/* affinova.ai public website — 2026 design language */
:root {
  --ink:#0b0d1a; --ink-2:#12152b; --text:#171a2e; --muted:#5d6178; --line:rgba(19,22,48,.09);
  --indigo:#4f46e5; --indigo-2:#6366f1; --violet:#a78bfa; --mint:#7bf2ae; --cyan:#67e8f9;
  --green:#25d366; --green-d:#1eb356;
  --bg:#f7f7fb; --card:#ffffff;
  --r-lg:28px; --r-md:20px;
  --disp:'Space Grotesk', -apple-system, sans-serif;
  --body:'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { font:16px/1.65 var(--body); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--indigo); text-decoration:none; }
::selection { background:var(--indigo); color:#fff; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }

/* Reveal-on-scroll */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1; transform:none; transition:none; } }

/* ===== Floating glass nav ===== */
nav { position:fixed; top:14px; left:0; right:0; z-index:90; pointer-events:none; }
.nav-in {
  pointer-events:auto; max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6); box-shadow:0 8px 32px rgba(11,13,26,.12);
  border-radius:999px; padding:9px 10px 9px 18px; width:calc(100% - 48px);
}
.nav-logo { display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--text); }
.nav-links { display:flex; gap:4px; margin-left:auto; align-items:center; }
.nav-links a:not(.btn) { color:var(--muted); font-weight:600; font-size:14px; padding:8px 14px; border-radius:999px; transition:.2s; }
.nav-links a:not(.btn):hover { color:var(--text); background:rgba(19,22,48,.06); }

.btn { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:999px; font-weight:700; font-size:15px; border:0; cursor:pointer; transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, background .18s; }
.btn:hover { transform:translateY(-2px) scale(1.02); }
.btn .arr { transition:transform .18s; }
.btn:hover .arr { transform:translateX(3px); }
.btn-wa { background:var(--green); color:#fff; box-shadow:0 8px 24px rgba(37,211,102,.35); }
.btn-wa:hover { background:var(--green-d); box-shadow:0 12px 30px rgba(37,211,102,.45); }
.btn-indigo { background:var(--indigo); color:#fff; box-shadow:0 8px 24px rgba(79,70,229,.35); }
.btn-indigo:hover { background:#4338ca; }
.btn-glass { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px); }
.btn-glass:hover { background:rgba(255,255,255,.2); }
.btn-ghost { background:rgba(79,70,229,.08); color:var(--indigo); }

/* ===== Hero ===== */
.hero { position:relative; background:var(--ink); color:#fff; padding:150px 0 0; overflow:hidden; isolation:isolate; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; z-index:-1; }
.blob-1 { width:560px; height:560px; background:#4f46e5; top:-180px; right:-80px; animation:drift 16s ease-in-out infinite alternate; }
.blob-2 { width:420px; height:420px; background:#7c3aed; bottom:-120px; left:-140px; animation:drift 20s ease-in-out infinite alternate-reverse; }
.blob-3 { width:300px; height:300px; background:#0e7490; top:34%; left:38%; opacity:.35; animation:drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform:translate(0,0) scale(1); } to { transform:translate(60px,40px) scale(1.15); } }
.hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:26px 26px;
  mask-image:radial-gradient(700px 500px at 30% 20%, black, transparent); }

.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-bottom:110px; }
.free-badge { display:inline-flex; align-items:center; gap:9px; background:rgba(123,242,174,.1); border:1px solid rgba(123,242,174,.35);
  color:var(--mint); font-weight:700; font-size:13px; letter-spacing:.08em; padding:8px 18px; border-radius:999px; margin-bottom:26px; text-transform:uppercase; }
.free-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); animation:pulse 2s infinite; }
@keyframes pulse { 50% { opacity:.4; } }
.hero h1 { font-family:var(--disp); font-size:clamp(38px, 5.6vw, 64px); line-height:1.04; letter-spacing:-.035em; font-weight:700; margin-bottom:22px; }
.hero h1 .grad { background:linear-gradient(92deg, var(--violet) 0%, var(--mint) 60%, var(--cyan) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:18.5px; color:#a6abce; max-width:500px; margin-bottom:34px; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; }
.hero-note { margin-top:20px; font-size:13.5px; color:#5e648f; }

/* Phone + floating chips */
.hero-visual { position:relative; display:flex; justify-content:center; }
.phone { width:314px; background:#0b141a; border-radius:42px; padding:12px 11px; position:relative; z-index:2;
  box-shadow:0 40px 100px rgba(0,0,0,.6), inset 0 0 0 2px #28343c; transform:rotate(2.5deg); animation:floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { transform:rotate(2.5deg) translateY(-12px); } }
.phone-top { display:flex; align-items:center; gap:10px; background:#1f2c33; border-radius:30px 30px 0 0; padding:14px 16px; }
.phone-top .nm { color:#fff; font-weight:700; font-size:14px; }
.phone-top .st { color:var(--mint); font-size:11px; }
.chat { background:#0b141a; padding:14px 10px 20px; display:flex; flex-direction:column; gap:8px; border-radius:0 0 30px 30px; }
.msg { max-width:84%; padding:8px 12px; border-radius:14px; font-size:12.5px; line-height:1.45; color:#e9edef; }
.msg.in { background:#1f2c33; align-self:flex-start; border-bottom-left-radius:4px; }
.msg.out { background:#144d37; align-self:flex-end; border-bottom-right-radius:4px; }
.msg .t { display:block; font-size:9px; color:#8696a0; margin-top:3px; text-align:right; }
.chip { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:16px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(14px);
  color:#fff; font-size:13px; font-weight:600; box-shadow:0 16px 40px rgba(0,0,0,.35); animation:floaty2 6s ease-in-out infinite; }
.chip b { color:var(--mint); }
.chip-1 { top:10%; left:-2%; animation-delay:.8s; }
.chip-2 { bottom:24%; right:-4%; animation-delay:1.8s; }
.chip-3 { bottom:4%; left:2%; animation-delay:0s; }
@keyframes floaty2 { 50% { transform:translateY(-9px); } }

/* Marquee */
.marquee { background:var(--ink); border-top:1px solid rgba(255,255,255,.07); padding:20px 0; overflow:hidden; position:relative; }
.marquee-track { display:flex; gap:44px; width:max-content; animation:scrollx 28s linear infinite; }
.marquee span { color:#8f95bd; font-family:var(--disp); font-weight:600; font-size:16px; white-space:nowrap; letter-spacing:.01em; }
.marquee span em { font-style:normal; color:#3f4470; margin-left:44px; }
@keyframes scrollx { to { transform:translateX(-50%); } }

/* ===== Sections ===== */
section { padding:96px 0; }
.kicker { display:inline-flex; align-items:center; gap:8px; color:var(--indigo); font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px;
  background:rgba(79,70,229,.08); padding:7px 16px; border-radius:999px; }
h2.title { font-family:var(--disp); font-size:clamp(30px,4vw,46px); letter-spacing:-.03em; font-weight:700; line-height:1.1; margin-bottom:16px; }
p.sub { color:var(--muted); font-size:17px; max-width:620px; }
.center { text-align:center; }
.center p.sub, .center .kicker { margin-left:auto; margin-right:auto; }

/* Bento */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:52px; }
.b-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.b-card:hover { transform:translateY(-5px); box-shadow:0 24px 50px rgba(19,22,48,.1); }
.b-card h3 { font-family:var(--disp); font-size:19px; letter-spacing:-.01em; margin-bottom:8px; }
.b-card p { color:var(--muted); font-size:14.5px; }
.b-card .ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:23px; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(79,70,229,.1), rgba(167,139,250,.12)); }
.span-2 { grid-column:span 2; } .span-3 { grid-column:span 3; } .span-4 { grid-column:span 4; } .span-6 { grid-column:span 6; }

/* Steps */
.step-num { font-family:var(--disp); font-size:74px; font-weight:700; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(180deg, rgba(79,70,229,.35), rgba(79,70,229,.04)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px; }

/* Services bento tiles */
.svc { display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; }
.svc .e { font-size:34px; margin-bottom:auto; }
.svc b { font-family:var(--disp); font-size:16.5px; letter-spacing:-.01em; }
.svc span { color:var(--muted); font-size:13px; }
.svc-hero { background:linear-gradient(140deg, var(--indigo) 0%, #7c3aed 100%); color:#fff; }
.svc-hero p, .svc-hero span { color:#dcd7fe; }
.svc-hero h3 { color:#fff; font-size:24px; }

/* Dark section */
.dark { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.dark h2.title { color:#fff; }
.dark p.sub { color:#a6abce; }
.dark .b-card { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
.dark .b-card:hover { box-shadow:0 24px 60px rgba(0,0,0,.5); border-color:rgba(167,139,250,.35); }
.dark .b-card h3 { color:#fff; }
.dark .b-card p { color:#9297bd; }
.dark .kicker { background:rgba(167,139,250,.12); color:var(--violet); }

/* Split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.checklist { list-style:none; margin-top:26px; display:grid; gap:13px; padding:0; }
.checklist li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.checklist li::before { content:"✓"; flex-shrink:0; width:24px; height:24px; border-radius:8px; background:linear-gradient(135deg, var(--indigo), var(--violet)); color:#fff; font-weight:800; display:grid; place-items:center; font-size:12px; margin-top:2px; }

/* FAQ */
.faq { max-width:780px; margin:48px auto 0; text-align:left; }
.faq details { border:1px solid var(--line); border-radius:18px; margin-bottom:12px; background:var(--card); overflow:hidden; transition:box-shadow .2s; }
.faq details[open] { box-shadow:0 16px 40px rgba(19,22,48,.08); }
.faq summary { font-weight:700; cursor:pointer; font-size:16px; padding:20px 24px; list-style:none; display:flex; justify-content:space-between; align-items:center; font-family:var(--disp); letter-spacing:-.01em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:22px; color:var(--indigo); transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { color:var(--muted); padding:0 24px 20px; font-size:15px; }

/* CTA band */
.cta-band { position:relative; overflow:hidden; border-radius:36px; padding:74px 44px; color:#fff; text-align:center; background:var(--ink); isolation:isolate; }
.cta-band .blob-1 { width:420px; height:420px; top:-160px; right:-60px; }
.cta-band .blob-2 { width:360px; height:360px; bottom:-160px; left:-60px; }
.cta-band h2 { font-family:var(--disp); font-size:clamp(28px,3.8vw,44px); font-weight:700; letter-spacing:-.03em; margin-bottom:12px; }
.cta-band p { color:#a6abce; margin-bottom:30px; font-size:17px; }

/* Footer */
footer { background:var(--ink); color:#8f95bd; padding:70px 0 30px; margin-top:100px; position:relative; overflow:hidden; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; position:relative; z-index:1; }
footer h4 { color:#fff; font-size:13px; margin-bottom:16px; letter-spacing:.12em; text-transform:uppercase; font-family:var(--disp); }
footer a { display:block; color:#8f95bd; font-size:14.5px; margin-bottom:10px; transition:color .15s; }
footer a:hover { color:#fff; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:44px; padding-top:24px; font-size:13px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.foot-mark { position:absolute; bottom:-64px; left:50%; transform:translateX(-50%); font-family:var(--disp); font-weight:700; font-size:clamp(120px,22vw,260px); letter-spacing:-.05em; color:rgba(255,255,255,.035); line-height:1; user-select:none; pointer-events:none; white-space:nowrap; }

/* Legal pages */
.legal { max-width:820px; margin:0 auto; padding:150px 24px 40px; }
.legal h1 { font-family:var(--disp); font-size:40px; letter-spacing:-.03em; margin-bottom:8px; }
.legal .updated { color:var(--muted); font-size:14px; margin-bottom:38px; }
.legal h2 { font-family:var(--disp); font-size:22px; margin:36px 0 12px; letter-spacing:-.02em; }
.legal p, .legal li { color:#3c405c; font-size:15.5px; margin-bottom:10px; }
.legal ul { padding-left:22px; }
.legal .box { background:linear-gradient(135deg, rgba(79,70,229,.06), rgba(167,139,250,.08)); border:1px solid rgba(79,70,229,.18); border-radius:18px; padding:20px 26px; margin:20px 0; }

@media (max-width: 940px) {
  .hero-grid, .split { grid-template-columns:1fr; }
  .hero { padding-top:120px; }
  .hero-visual { margin-top:26px; }
  .chip { display:none; }
  .bento { grid-template-columns:repeat(2,1fr); }
  .span-2, .span-3, .span-4, .span-6 { grid-column:span 2; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .nav-links a:not(.btn) { display:none; }
}