/* =========================================================================
   Kyn Marketing — Design System (dark / tech)
   ========================================================================= */

/* ---- Fonts (self-hosted) ---- */
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/spacegrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/spacegrotesk-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/spacegrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrainsmono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrainsmono-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---- Tokens ---- */
/* Camada 1 — PRIMITIVOS (paleta crua; NÃO usar direto em componentes) */
:root{
  --p-ink-950:#070A12; --p-ink-900:#0B1020; --p-ink-850:#0E1426;
  --p-blue-400:#6AA0FF; --p-blue-500:#4D8DFF; --p-blue-900:#0B2A5B; --p-purple-500:#7C5CFF;
  --p-fg-0:#F4F7FF; --p-green-400:#34D399; --p-amber-400:#FBBF24;
  --p-rgb-white:255,255,255; --p-rgb-fg:228,234,247; --p-rgb-blue:77,141,255; --p-rgb-purple:124,92,255;
}
/* Camada 2 — SEMÂNTICOS (o que os componentes consomem; um tema sobrescreve AQUI via [data-theme]) */
:root{
  --bg:var(--p-ink-950); --bg-2:var(--p-ink-900); --bg-3:var(--p-ink-850);
  --surface:rgba(var(--p-rgb-white),.04); --surface-strong:rgba(var(--p-rgb-white),.07); --surface-input:rgba(var(--p-rgb-white),.05);
  --stroke:rgba(var(--p-rgb-white),.10); --stroke-strong:rgba(var(--p-rgb-white),.18);
  --accent:var(--p-blue-500); --accent-hover:var(--p-blue-400); --accent-deep:var(--p-blue-900); --accent-2:var(--p-purple-500);
  --grad:linear-gradient(135deg,var(--p-blue-500) 0%,var(--p-purple-500) 100%);
  --grad-soft:linear-gradient(135deg,rgba(var(--p-rgb-blue),.16),rgba(var(--p-rgb-purple),.16));
  --ink:var(--p-fg-0); --ink-2:rgba(var(--p-rgb-fg),.72); --ink-3:rgba(var(--p-rgb-fg),.52);
  --ok:var(--p-green-400); --warn:var(--p-amber-400);
  --shadow-1:0 4px 24px rgba(0,0,0,.35); --shadow-glow:0 8px 40px rgba(var(--p-rgb-blue),.25); --blur:16px;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-h1:clamp(2.2rem,6vw,4.2rem); --fs-h2:clamp(1.7rem,4vw,2.6rem); --fs-h3:clamp(1.2rem,2.4vw,1.45rem);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --container:1200px; --narrow:760px; --gutter:clamp(16px,5vw,40px);
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:.15s;--dur-mid:.3s;--dur-slow:.6s;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;overflow-x:hidden;
}
body::before{ /* mesh/luz de fundo */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% -5%,rgba(124,92,255,.18),transparent 60%),
    radial-gradient(50% 45% at 10% 0%,rgba(77,141,255,.16),transparent 55%),
    var(--bg);
}
body::after{ /* grid sutil */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.03em}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{color:var(--ink-2)}
strong{color:var(--ink);font-weight:600}
::selection{background:rgba(124,92,255,.4);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

#progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--grad);z-index:120;transition:width .1s linear;box-shadow:0 0 14px rgba(77,141,255,.6)}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--s7)}
.sec-tight{padding-block:var(--s6)}
.narrow{max-width:var(--narrow);margin-inline:auto}
.center{text-align:center}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.glass{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}

.eyebrow{display:inline-flex;flex-wrap:wrap;max-width:100%;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s2)}
.eyebrow::before{content:"";width:14px;height:14px;background:var(--grad);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.sec-head{max-width:680px;margin-bottom:var(--s5)}
.sec-head.center{margin-inline:auto}
.sec-head h2{margin-bottom:var(--s2)}
.sec-head p{font-size:1.075rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-mid),background var(--dur-mid),border-color var(--dur-mid);white-space:nowrap}
.btn .ic-svg{flex:none}
.btn-primary{color:#fff;background:var(--grad);box-shadow:var(--shadow-glow);position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25),transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease-out)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 48px rgba(77,141,255,.4)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-glass{color:var(--ink);background:var(--surface);border-color:var(--stroke);backdrop-filter:blur(var(--blur))}
.btn-glass:hover{background:var(--surface-strong);border-color:var(--stroke-strong);transform:translateY(-2px)}
.btn-sm{padding:11px 18px;font-size:.9rem}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-ghost{color:var(--ink-2);padding:12px 0;gap:6px}
.btn-ghost:hover{color:var(--ink)}

/* ---- Header / nav ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background var(--dur-mid),border-color var(--dur-mid),padding var(--dur-mid);padding-block:18px;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,10,18,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--stroke);padding-block:12px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.04em;color:var(--ink)}
.logo span{color:var(--accent)}
.nav-desktop{display:flex;gap:var(--s4);margin-left:auto;margin-right:var(--s3)}
.nav-desktop a{color:var(--ink-2);font-size:.94rem;font-weight:500;position:relative;transition:color var(--dur-fast)}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad);transition:width var(--dur-mid) var(--ease-out)}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--ink)}
.nav-desktop a:hover::after,.nav-desktop a.active::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--dur-mid),opacity var(--dur-mid)}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{position:fixed;inset:0;width:100%;height:100%;background:var(--bg);z-index:200;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);padding:var(--gutter);font-size:1.5rem}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.nav-mobile{background:rgba(7,10,18,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}}
.nav-mobile[hidden]{display:none}
.nav-close{position:absolute;top:14px;right:var(--gutter);width:44px;height:44px;background:none;border:0;cursor:pointer}
.nav-close::before,.nav-close::after{content:"";position:absolute;top:50%;left:50%;width:24px;height:2px;background:var(--ink);border-radius:2px}
.nav-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.nav-mobile a{color:var(--ink);font-family:var(--font-display);font-weight:500}
.nav-mobile .btn{font-size:1rem}

/* ---- Hero ---- */
.hero{position:relative;padding-top:calc(var(--s8) + 40px);padding-bottom:var(--s7);text-align:center;overflow:hidden}
.hero .eyebrow{justify-content:center}
.hero h1{max-width:16ch;margin:0 auto var(--s3)}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--ink-2);max-width:60ch;margin:0 auto var(--s2);font-weight:400}
.hero .apoio{font-size:.95rem;color:var(--ink-3);margin-bottom:var(--s4)}
.hero-cta{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-bottom:var(--s5)}
.pills{display:flex;gap:var(--s1);justify-content:center;flex-wrap:wrap}
.pill{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);padding:8px 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--stroke)}

/* ---- Trust bar ---- */
.trust{border-block:1px solid var(--stroke);background:var(--surface)}
.trust .wrap{padding-block:var(--s4)}
.trust-label{text-align:center;font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin-bottom:var(--s3)}
.trust-grid{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:center;align-items:center}
.trust-grid span{font-family:var(--font-display);font-weight:500;color:var(--ink-2);font-size:1.05rem}

/* ---- Grids genéricos ---- */
.grid{display:grid;gap:var(--s3)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(2,1fr)}

/* ---- Cards (soluções / features) ---- */
.card{position:relative;padding:var(--s4);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg);transition:transform var(--dur-mid) var(--ease-out),border-color var(--dur-mid),background var(--dur-mid)}
.card:hover{transform:translateY(-4px);border-color:var(--stroke-strong);background:var(--surface-strong)}
.card .ic{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:14px;background:var(--grad);color:#fff;margin-bottom:var(--s3);box-shadow:var(--shadow-glow)}
.card h3{margin-bottom:var(--s1)}
.card p{font-size:.98rem}
.card .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);color:var(--accent);font-weight:600;font-size:.9rem}
.card .card-link .ic-svg{transition:transform var(--dur-mid) var(--ease-out)}
.card:hover .card-link .ic-svg{transform:translateX(4px)}
.card.is-link{cursor:pointer}

/* feature simples (sem hover de link) */
.feature{padding:var(--s3);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-md)}
.feature .ic{color:var(--accent);margin-bottom:var(--s2)}
.feature h3{font-size:1.1rem;margin-bottom:6px}
.feature p{font-size:.95rem}

/* ---- Ecossistema (tese) ---- */
.eco{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s4)}
.eco-node{font-family:var(--font-mono);font-size:.85rem;padding:10px 16px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--stroke);color:var(--ink-2);transition:all var(--dur-mid)}
.eco-node:hover{border-color:var(--accent);color:var(--ink);background:var(--grad-soft)}
.eco-arrow{color:var(--ink-3);align-self:center}

/* ---- Metodologia (timeline) ---- */
.method{display:grid;gap:var(--s2);counter-reset:step}
.step{position:relative;display:flex;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-md);align-items:flex-start;transition:border-color var(--dur-mid),background var(--dur-mid)}
.step:hover{border-color:var(--stroke-strong);background:var(--surface-strong)}
.step-num{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700}
.step h3{font-size:1.1rem;margin-bottom:2px}
.step p{font-size:.95rem}

/* ---- Autoridade ---- */
.authority{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s5);align-items:center}
.bio-photo{aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--stroke);display:grid;place-items:center;overflow:hidden}
.bio-photo .ph{font-family:var(--font-mono);color:var(--ink-3);font-size:.8rem;text-align:center;padding:var(--s3)}
.bio-monogram{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,9vw,5.5rem);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.tags span{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-2);background:var(--surface);border:1px solid var(--stroke);padding:6px 12px;border-radius:var(--r-pill)}

/* ---- Cases ---- */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.case{padding:var(--s4);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg)}
.case .seg{font-family:var(--font-mono);font-size:.78rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em}
.case-empty{text-align:center;padding:var(--s7) var(--s4);border:1px dashed var(--stroke-strong);border-radius:var(--r-lg);background:var(--surface)}

/* ---- FAQ ---- */
.faq{max-width:var(--narrow);margin-inline:auto;display:grid;gap:var(--s1)}
.faq-item{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-md);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3);background:none;border:0;color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:1.05rem;text-align:left;cursor:pointer}
.faq-q .ic-svg{flex:none;transition:transform var(--dur-mid) var(--ease-out);color:var(--accent);transform:rotate(90deg)}
.faq-q[aria-expanded=true] .ic-svg{transform:rotate(-90deg)}
.faq-a{padding:0 var(--s3) var(--s3)}
.faq-a p{font-size:1rem}

/* ---- Problemas (cards sintoma) ---- */
.problem{padding:var(--s3);background:var(--surface);border:1px solid var(--stroke);border-left:3px solid var(--warn);border-radius:var(--r-md)}
.problem h3{font-size:1.02rem;margin-bottom:4px}
.problem p{font-size:.92rem}

/* ---- Fluxo de dados ---- */
.flow{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:stretch;justify-content:center;margin-top:var(--s4)}
.flow-node{flex:1 1 130px;max-width:170px;text-align:center;padding:var(--s3) var(--s2);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-md)}
.flow-node .ic{color:var(--accent);margin-bottom:8px;display:inline-flex}
.flow-node b{display:block;font-family:var(--font-display);font-size:.95rem;margin-bottom:2px}
.flow-node small{color:var(--ink-3);font-size:.78rem}
.flow-loop{text-align:center;margin-top:var(--s3);font-family:var(--font-mono);font-size:.85rem;color:var(--accent)}

/* ---- Chat mock (IA) ---- */
.chat{max-width:420px;margin-inline:auto;padding:var(--s3);background:var(--bg-3);border:1px solid var(--stroke);border-radius:var(--r-lg)}
.bubble{padding:12px 16px;border-radius:16px;margin-bottom:10px;max-width:85%;font-size:.95rem;line-height:1.45}
.bubble.them{background:var(--surface-strong);border:1px solid var(--stroke);border-bottom-left-radius:4px}
.bubble.me{background:var(--grad);color:#fff;margin-left:auto;border-bottom-right-radius:4px}

/* ---- Split hero (páginas de serviço) ---- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:center}
.split h1{font-size:clamp(2rem,4.5vw,3.2rem)}
.panel{padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--stroke)}

/* ---- Forms ---- */
.form-card{padding:var(--s5);border-radius:var(--r-lg);background:var(--surface-strong);border:1px solid var(--stroke);backdrop-filter:blur(var(--blur))}
.lead-form{display:grid;gap:var(--s2)}
.field{display:grid;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.field label{font-size:.85rem;color:var(--ink-2);font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--surface-input);border:1px solid var(--stroke);border-radius:var(--r-sm);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(77,141,255,.22)}
.field.has-error input,.field.has-error select{border-color:var(--warn)}
.field-err{color:var(--warn);font-size:.82rem}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);margin-top:6px}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.consent a{color:var(--accent)}
.consent.has-error span{color:var(--warn)}
.form-alert{padding:12px 16px;border-radius:var(--r-sm);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#fde68a;font-size:.9rem}
.form-note{text-align:center;font-size:.82rem;color:var(--ink-3);margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- CTA final ---- */
.cta-final{position:relative;border-radius:var(--r-lg);overflow:hidden}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.cta-copy h2{margin-bottom:var(--s2)}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--stroke);background:var(--bg-2);padding-block:var(--s6) var(--s4);margin-top:var(--s7)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--s4)}
.footer-brand p{font-size:.92rem;margin-block:var(--s2) var(--s3);max-width:34ch}
.footer-col h4{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:var(--s2);font-weight:500}
.footer-col a{display:block;color:var(--ink-2);font-size:.92rem;padding:5px 0;transition:color var(--dur-fast)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--stroke);font-size:.82rem;color:var(--ink-3)}
.footer-lgpd{display:inline-flex;align-items:center;gap:6px}

/* ---- WhatsApp float ---- */
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;z-index:90;box-shadow:var(--shadow-glow);transition:transform var(--dur-mid) var(--ease-out)}
.wa-float:hover{transform:scale(1.08) translateY(-2px)}

/* ---- Cookie banner ---- */
.cookie-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:110;max-width:560px;width:calc(100% - 32px);display:flex;align-items:center;gap:var(--s3);padding:var(--s3);background:rgba(14,20,38,.92);backdrop-filter:blur(14px);border:1px solid var(--stroke-strong);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.cookie-banner[hidden]{display:none}
.cookie-banner p{font-size:.85rem;margin:0}
.cookie-banner a{color:var(--accent)}
.cookie-actions{display:flex;gap:8px;flex:none}

/* ---- Misc ---- */
.lead-big{font-size:1.15rem;color:var(--ink-2);max-width:60ch}
.prose{max-width:var(--narrow);margin-inline:auto}
.prose h2{margin-block:var(--s4) var(--s2)}
.prose h3{margin-block:var(--s3) var(--s1)}
.prose p,.prose li{color:var(--ink-2);margin-bottom:var(--s2)}
.prose ul{padding-left:1.2em}
.divider{height:1px;background:var(--stroke);border:0;margin-block:var(--s5)}

/* ---- Reveal (animação, preserva hover) ---- */
.reveal{opacity:0;transform:translateY(36px)}
.reveal.in{opacity:1;transform:none;animation:reveal-in var(--dur-slow) var(--ease-out) both;animation-delay:var(--d,0ms)}
@media (scripting:none){.reveal{opacity:1;transform:none}}
@keyframes reveal-in{from{opacity:0;transform:translateY(36px)}}

/* ---- Responsivo ---- */
@media (max-width:900px){
  .nav-desktop,.header-cta{display:none}
  .nav-toggle{display:flex}
  .authority,.split,.cta-grid{grid-template-columns:1fr}
  .grid-3,.cases-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4,.cases-grid,.field-row{grid-template-columns:1fr}
  .sec{padding-block:var(--s6)}
  .hero{padding-top:calc(var(--s7) + 30px)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .cookie-banner{flex-direction:column;align-items:stretch;text-align:center}
  .form-card{padding:var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  body::after{display:none}
}

/* ---- Utilitários adicionais ---- */
.check-list{display:grid;gap:10px;margin-top:var(--s2)}
.check-list p{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.96rem;margin:0}
.check-list .ic-svg{color:var(--ok);flex:none;margin-top:3px}
.cta-band{text-align:center}
.cta-band h2{margin-bottom:var(--s2)}
.callout{padding:var(--s4);border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--stroke-strong)}
.callout h3{margin-bottom:var(--s2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.entrega ul{list-style:none;display:grid;gap:8px;margin-top:var(--s2)}
.entrega li{display:flex;gap:8px;align-items:flex-start;font-size:.94rem;color:var(--ink-2)}
.entrega li::before{content:"";width:7px;height:7px;margin-top:8px;flex:none;border-radius:2px;background:var(--accent);transform:rotate(45deg)}

/* ---- Mockups de device (CSS puro, sem imagem; usa tokens => themeable) ---- */
.devices{position:relative;display:flex;justify-content:center;padding-top:var(--s4);padding-inline:var(--s3)}
.devices::before{content:"";position:absolute;left:50%;top:18%;transform:translateX(-50%);width:min(720px,92%);height:62%;background:var(--grad-soft);filter:blur(70px);opacity:.6;border-radius:50%;z-index:0}
.dv-laptop{position:relative;width:min(600px,86%);z-index:1}
.dv-screen{background:var(--bg-3);border:1px solid var(--stroke-strong);border-radius:12px;overflow:hidden}
.dv-laptop>.dv-screen{aspect-ratio:16/10;box-shadow:var(--shadow-1)}
.dv-base{position:relative;height:13px;width:116%;margin:-1px -8% 0;background:linear-gradient(var(--bg-3),var(--bg-2));border:1px solid var(--stroke-strong);border-top:0;border-radius:0 0 14px 14px}
.dv-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:84px;height:5px;background:var(--stroke);border-radius:0 0 7px 7px}
.dv-phone{position:absolute;right:5%;bottom:-12px;width:120px;z-index:2;background:var(--bg-3);border:1px solid var(--stroke-strong);border-radius:22px;padding:7px;box-shadow:var(--shadow-glow)}
.dv-phone>.dv-screen{aspect-ratio:9/19;border-radius:15px;border-color:var(--stroke);background:var(--bg-2)}
.dv-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:38px;height:5px;background:var(--bg);border-radius:3px;z-index:3}
.ui-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--bg-2);border-bottom:1px solid var(--stroke)}
.ui-dot{width:7px;height:7px;border-radius:50%;background:var(--stroke-strong)}
.ui-url{margin-left:6px;font-family:var(--font-mono);font-size:8px;color:var(--ink-3);background:var(--surface);padding:2px 10px;border-radius:6px}
.ui-page{padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.ui-line{display:block;height:7px;border-radius:4px;background:var(--surface-strong)}
.ui-line--eyebrow{width:36%;height:5px;background:var(--accent);opacity:.75}
.ui-line--h1{height:14px;width:92%;background:var(--grad);opacity:.9;border-radius:5px}
.ui-line--h1.short{width:58%}
.ui-text{opacity:.5}
.ui-line.short{width:68%}
.ui-btn{align-self:flex-start;margin-top:5px;font-family:var(--font-body);font-size:8px;font-weight:600;color:#fff;background:var(--grad);padding:6px 14px;border-radius:999px}
.ui-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.ui-cards span{height:36px;border-radius:7px;background:var(--surface);border:1px solid var(--stroke)}
.dv-phone .ui-media{height:30%;background:var(--grad-soft);border-bottom:1px solid var(--stroke)}
.dv-phone .ui-line{margin:8px 10px 0}
.ui-price{display:flex;align-items:center;justify-content:space-between;margin:9px 10px 0}
.ui-tag{display:inline-block;width:32px;height:9px;border-radius:4px;background:var(--accent);opacity:.85}
.ui-buy{font-family:var(--font-body);font-size:7px;font-weight:700;color:#fff;background:var(--grad);padding:4px 9px;border-radius:999px}
.ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 10px}
.ui-grid span{height:24px;border-radius:6px;background:var(--surface);border:1px solid var(--stroke)}
@media (max-width:600px){
  .dv-laptop{width:84%}
  .dv-phone{right:0;width:90px;bottom:-8px}
  .ui-cards span{height:26px}
  .ui-page{padding:12px 13px;gap:6px}
}

/* ---- Fluxo de dados (exemplo animado — pagina tracking) ---- */
.dflow{max-width:720px;margin-inline:auto}
.df-step{display:grid;grid-template-columns:46px 1fr;gap:var(--s3)}
.df-rail{position:relative;display:flex;justify-content:center;align-items:flex-start}
.df-rail::before{content:"";position:absolute;top:0;bottom:calc(-1 * var(--s2));width:2px;background:var(--stroke)}
.df-step--last .df-rail::before{display:none}
.df-num{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.92rem;box-shadow:var(--shadow-glow)}
.df-rail::after{content:"";position:absolute;left:50%;margin-left:-3px;top:-34px;width:6px;height:32px;border-radius:6px;background:linear-gradient(transparent,var(--accent));opacity:0;animation:dflow-pulse 2.8s linear infinite;animation-delay:calc(var(--i,0) * .35s)}
.df-step--last .df-rail::after{display:none}
@keyframes dflow-pulse{0%{top:-34px;opacity:0}12%{opacity:.9}85%{opacity:.9}100%{top:calc(100% + 8px);opacity:0}}
.df-card{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s2)}
.df-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.df-ic{color:var(--accent);display:inline-flex;flex:none}
.df-head h3{font-size:1.05rem}
.df-card>p{font-size:.94rem;margin-bottom:10px}
.df-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);background:var(--bg-3);border:1px solid var(--stroke);padding:6px 11px;border-radius:var(--r-pill)}
.df-chip--ok{color:var(--ok);border-color:rgba(52,211,153,.32)}
.df-chip .ic-svg{color:var(--ok)}
.df-fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:10px}
.df-branch{background:var(--bg-3);border:1px solid var(--stroke);border-radius:var(--r-sm);padding:10px 12px;text-align:center}
.df-branch b{display:block;font-family:var(--font-display);font-size:.9rem;margin-bottom:2px}
.df-branch span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3)}
.df-loop{display:flex;align-items:center;gap:10px;margin-left:calc(46px + var(--s3));padding:var(--s3);border:1px dashed var(--stroke-strong);border-radius:var(--r-md);background:var(--grad-soft);color:var(--ink-2);font-size:.92rem}
.df-loop .ic-svg{color:var(--accent);flex:none}
@media (max-width:600px){
  .df-step{grid-template-columns:38px 1fr;gap:var(--s2)}
  .df-num{width:30px;height:30px;font-size:.82rem}
  .df-loop{margin-left:0}
  .df-fork{grid-template-columns:1fr}
}

/* ---- Superficies de anuncio animadas (pagina trafego) ---- */
.ad-card{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg);padding:var(--s3);transition:transform var(--dur-mid) var(--ease-out),border-color var(--dur-mid)}
.ad-card:hover{transform:translateY(-4px);border-color:var(--stroke-strong)}
.ad-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:var(--s2)}
.ad-label .ic-svg{color:var(--accent)}
.ad-screen{position:relative;height:236px;background:var(--bg-3);border:1px solid var(--stroke);border-radius:var(--r-md);padding:12px;overflow:hidden}
.fd-bar,.sr-line,.sr-url,.sr-title,.br-line,.br-url{display:block;height:7px;border-radius:4px;background:var(--surface-strong)}
/* feed social */
.ad-feed{display:flex;align-items:center}
.fd-post{width:100%;background:var(--surface);border:1px solid var(--stroke);border-radius:10px;padding:11px;animation:fd-in 6s ease-in-out infinite}
@keyframes fd-in{0%,100%{transform:translateY(7px);opacity:.8}12%,88%{transform:translateY(0);opacity:1}}
.fd-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fd-av{width:26px;height:26px;border-radius:50%;background:var(--grad);flex:none}
.fd-meta b{display:block;font-size:.8rem;line-height:1.2}
.fd-meta small{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-3)}
.fd-media{position:relative;height:80px;border-radius:8px;background:var(--grad-soft);border:1px solid var(--stroke);display:grid;place-items:center;margin-bottom:9px}
.fd-play{width:0;height:0;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px;opacity:.85}
.fd-actions{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.fd-heart{width:13px;height:13px;border-radius:50%;background:var(--accent);flex:none;animation:fd-pop 3s ease-in-out infinite}
@keyframes fd-pop{0%,72%,100%{transform:scale(1)}82%{transform:scale(1.55)}}
.fd-bar{width:34px}
.fd-cta{text-align:center;font-size:.74rem;font-weight:600;color:#fff;background:var(--grad);padding:7px;border-radius:7px}
/* pesquisa */
.ad-srch{display:flex;flex-direction:column;gap:9px}
.sr-bar{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--stroke);border-radius:999px;padding:8px 13px;font-size:.76rem;color:var(--ink-2)}
.sr-bar .ic-svg{color:var(--ink-3);flex:none}
.sr-q{white-space:nowrap;overflow:hidden}
.sr-caret{width:1.5px;height:14px;background:var(--accent);animation:sr-blink 1.1s step-end infinite}
@keyframes sr-blink{50%{opacity:0}}
.sr-res{display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:8px}
.sr-res--ad{background:var(--surface);border:1px solid var(--stroke);position:relative;overflow:hidden}
.sr-res--ad::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07),transparent 70%);transform:translateX(-110%);animation:sr-sweep 4.5s ease-in-out infinite}
@keyframes sr-sweep{0%,55%{transform:translateX(-110%)}80%,100%{transform:translateX(110%)}}
.sr-badge{align-self:flex-start;font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:var(--ok);border:1px solid rgba(52,211,153,.4);padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em}
.sr-title{width:82%;height:9px;background:var(--accent);opacity:.8}
.sr-title.short{width:56%}
.sr-url{width:46%;height:6px;opacity:.5}
.sr-line{width:100%;opacity:.4}
.sr-line.short{width:68%}
/* navegador / display */
.ad-disp{padding:0}
.br-bar{display:flex;align-items:center;gap:5px;padding:9px 11px;background:var(--bg-2);border-bottom:1px solid var(--stroke)}
.br-bar>span:not(.br-url){width:7px;height:7px;border-radius:50%;background:var(--stroke-strong);flex:none}
.br-url{flex:1;height:9px;margin-left:6px;background:var(--surface)}
.br-page{padding:13px}
.br-banner{position:relative;height:78px;border-radius:8px;border:1px solid var(--stroke);overflow:hidden;margin-bottom:11px}
.br-tag{position:absolute;top:5px;right:5px;z-index:2;font-family:var(--font-mono);font-size:.55rem;color:var(--ink-3);background:var(--bg);border:1px solid var(--stroke);padding:1px 5px;border-radius:3px}
.br-c1,.br-c2{position:absolute;inset:0;display:grid;place-items:center}
.br-c1{background:var(--grad-soft);animation:cr-a 6s ease-in-out infinite}
.br-c2{background:var(--grad);opacity:0;animation:cr-b 6s ease-in-out infinite}
.br-c1::after{content:"";width:42%;height:9px;border-radius:4px;background:var(--accent);opacity:.85}
.br-c2::after{content:"";width:54%;height:9px;border-radius:4px;background:#fff;opacity:.92}
@keyframes cr-a{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes cr-b{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.br-line{width:100%;opacity:.4;margin-bottom:7px}
.br-line.short{width:60%}

/* ---- Central de inteligencia (HUD holografico — pagina IA) ---- */
.hud{position:relative;width:min(440px,90vw);aspect-ratio:1;margin:var(--s5) auto 0;color:var(--accent)}
.hud-ring,.hud-arc,.hud-sweep,.hud-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;aspect-ratio:1}
@keyframes hud-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hud-ring--dash{width:88%;border:2px dashed currentColor;opacity:.28;animation:hud-spin 38s linear infinite}
.hud-ring--thin{width:64%;border:1px solid currentColor;opacity:.22}
.hud-ring--ticks{width:74%;background:repeating-conic-gradient(from 0deg,currentColor 0 .5deg,transparent .5deg 6deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));opacity:.35;animation:hud-spin 60s linear infinite reverse}
.hud-arc{border:2px solid transparent}
.hud-arc--1{width:96%;border-top-color:var(--accent);border-right-color:var(--accent);opacity:.75;animation:hud-spin 9s linear infinite}
.hud-arc--2{width:54%;border-bottom-color:var(--accent-2);opacity:.85;animation:hud-spin 5s linear infinite reverse}
.hud-arc--3{width:80%;border-left-color:var(--warn);opacity:.5;animation:hud-spin 16s linear infinite}
.hud-sweep{width:64%;background:conic-gradient(from 0deg,transparent 0 285deg,rgba(77,141,255,.35) 350deg,transparent 360deg);-webkit-mask:radial-gradient(farthest-side,transparent 28%,#000 29%);mask:radial-gradient(farthest-side,transparent 28%,#000 29%);animation:hud-spin 4.5s linear infinite}
.hud-core{width:30%;background:radial-gradient(circle,#fff 0%,var(--accent) 38%,transparent 72%);box-shadow:0 0 50px var(--accent);display:grid;place-items:center;animation:hud-pulse 3s ease-in-out infinite}
.hud-core span{width:52%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 0 14px rgba(255,255,255,.55)}
@keyframes hud-pulse{0%,100%{box-shadow:0 0 32px var(--accent);opacity:.92}50%{box-shadow:0 0 58px var(--accent);opacity:1}}
.hud-data{position:absolute;z-index:3;font-family:var(--font-mono);font-size:.64rem;line-height:1.45;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:flex;flex-direction:column}
.hud-data b{color:var(--accent);font-weight:600;font-size:.76rem;letter-spacing:.02em}
.hud-data::before{content:"";display:block;width:18px;height:1px;background:var(--accent);opacity:.5;margin-bottom:5px}
.hud-data--tl{top:4%;left:0}
.hud-data--tr{top:4%;right:0;text-align:right;align-items:flex-end}
.hud-data--bl{bottom:4%;left:0}
.hud-data--br{bottom:4%;right:0;text-align:right;align-items:flex-end}
.hud-data--tr::before,.hud-data--br::before{margin-left:auto}
.ai-chips{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:center;margin-top:var(--s4)}
@media (max-width:600px){.hud{width:min(330px,90vw);margin-top:var(--s4)}.hud-data{font-size:.58rem}.hud-data b{font-size:.68rem}}

/* ---- Micro-animacoes dos mockups (pagina Sites & E-commerce) ---- */
.dv-laptop{animation:dv-float 7s ease-in-out infinite}
.dv-phone{animation:dv-float 7s ease-in-out infinite 2.2s}
@keyframes dv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ui-btn{position:relative;animation:ui-btn-glow 4.5s ease-in-out infinite}
.ui-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--accent);opacity:0;animation:ui-ripple 4.5s ease-out infinite}
@keyframes ui-btn-glow{0%,58%,100%{box-shadow:0 0 0 transparent}70%{box-shadow:0 0 16px var(--accent)}}
@keyframes ui-ripple{0%,60%{transform:scale(1);opacity:0}72%{opacity:.55}100%{transform:scale(1.45);opacity:0}}
.dv-cursor{position:absolute;left:13%;top:34%;width:16px;height:16px;z-index:6;background:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));clip-path:polygon(0 0,0 78%,28% 60%,46% 96%,60% 88%,42% 53%,78% 53%);animation:dv-tap 4.5s ease-in-out infinite}
@keyframes dv-tap{0%,48%{transform:translate(7px,9px)}66%{transform:translate(0,0) scale(.82)}78%,100%{transform:translate(7px,9px)}}
.ui-line--h1{position:relative;overflow:hidden}
.ui-line--h1::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45),transparent 65%);transform:translateX(-120%);animation:ui-sheen 5s ease-in-out infinite}
@keyframes ui-sheen{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.dv-phone .ui-media{position:relative;overflow:hidden}
.dv-phone .ui-media::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22),transparent 65%);transform:translateX(-120%);animation:ui-sheen 5s ease-in-out infinite 1.2s}
.ui-price{position:relative}
.ui-buy{position:relative;animation:ui-btn-glow 4.5s ease-in-out infinite 2.2s}
.ui-cartpop{position:absolute;top:-10px;right:0;font-family:var(--font-mono);font-size:.6rem;font-weight:700;color:#fff;background:var(--ok);border-radius:999px;padding:1px 6px;opacity:0;animation:ui-cart 4.5s ease-in-out infinite 2.2s}
@keyframes ui-cart{0%,60%{opacity:0;transform:translateY(4px) scale(.7)}72%{opacity:1;transform:translateY(-2px) scale(1)}86%,100%{opacity:0;transform:translateY(-8px) scale(.9)}}

/* ---- Micro-interacoes sutis (site-wide) ---- */
body::before{animation:bg-drift 26s ease-in-out infinite alternate}
@keyframes bg-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.06)}}
.card .ic{transition:transform var(--dur-mid) var(--ease-out)}
.card:hover .ic{transform:translateY(-3px) scale(1.06)}
.step-num{transition:box-shadow var(--dur-mid) var(--ease-out)}
.step:hover .step-num{box-shadow:0 0 18px var(--accent)}
.hero .btn-primary{animation:cta-breathe 5s ease-in-out infinite}
.hero .btn-primary:hover{animation:none}
@keyframes cta-breathe{0%,100%{box-shadow:0 8px 38px rgba(77,141,255,.24)}50%{box-shadow:0 10px 48px rgba(77,141,255,.42)}}

/* ---- Fundo 3D do hero (Three.js, desktop-only) ---- */
.hero-3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 70%,transparent 100%)}
.hero>.wrap{position:relative;z-index:1}
@media (max-width:1023px){.hero-3d{display:none}}

/* ---- Cenas 3D de página (visual-3d.js, desktop-only) ---- */
.viz3d{position:relative;height:340px;max-width:820px;margin:0 auto var(--s5);display:none}
@media (min-width:1024px){.viz3d{display:block}}
.viz3d-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.viz3d-tag{position:absolute;z-index:2;font-family:var(--font-mono);font-size:.64rem;line-height:1.5;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.viz3d-tag b{color:var(--accent);font-weight:600}
.has-3d .viz3d-tag{opacity:1}
.viz3d-tag--t{top:6%;left:50%;transform:translateX(-50%)}
.viz3d-tag--b{bottom:6%;left:50%;transform:translateX(-50%)}
.viz3d-tag--l{left:1%;top:50%;transform:translateY(-50%)}
.viz3d-tag--r{right:1%;top:50%;transform:translateY(-50%);text-align:right}
/* HUD (IA): o 3D substitui os anéis CSS quando monta */
.hud .viz3d-canvas{z-index:2}
.hud.has-3d .hud-ring,.hud.has-3d .hud-arc,.hud.has-3d .hud-sweep,.hud.has-3d .hud-core{display:none}
/* Tilt 3D nos mockups (aplicado via main.js, pointer fine) */
.tilt{transition:transform var(--dur-mid) var(--ease-out);transform-style:preserve-3d}

/* ---- Astronauta 3D (404) ---- */
[data-3d="astronaut"]{position:relative}
.viz3d--404{height:280px;max-width:520px;margin:0 auto var(--s2)}

/* ---- Transicoes de pagina (View Transitions API cross-document, progressivo) ---- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
.wa-float{view-transition-name:wa-float}
::view-transition-old(root){animation:vt-out .2s var(--ease-glass) both}
::view-transition-new(root){animation:vt-in .32s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- Animacoes scroll-driven (CSS animation-timeline, progressivo) ---- */
@supports (animation-timeline: scroll()){
  .hero>.wrap,.hero-3d,.sec-head{animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto}
  /* Nao esmaece heroes que carregam conteudo critico (formularios, 404) */
  .hero:not(:has(.form-card,.viz3d))>.wrap{animation-name:hero-drift;animation-timeline:scroll(root);animation-range:0px 90vh}
  .hero-3d{animation-name:hero3d-drift;animation-timeline:scroll(root);animation-range:0px 90vh}
  .sec-head{animation-name:sec-rise;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@keyframes hero-drift{to{opacity:.15;transform:translateY(-46px)}}
@keyframes hero3d-drift{to{opacity:.15;transform:translateY(70px) scale(1.06)}}
@keyframes sec-rise{from{opacity:0;transform:translateY(26px)}}

/* ---- Tema claro (secao Personalizacao; padrao e dark, sem persistencia) ---- */
[data-theme="light"]{
  --bg:#F6F8FD; --bg-2:#EDF1FA; --bg-3:#E2E9F6;
  --p-rgb-white:11,16,32;   /* superficies/strokes glass invertem a base */
  --p-rgb-fg:11,16,32;
  --ink:#0B1020;
  --ink-2:rgba(11,16,32,.78); --ink-3:rgba(11,16,32,.62);
  --accent:#2E6BE6; --accent-hover:#1F5AD1; --accent-2:#6A48F2;
  --grad:linear-gradient(135deg,#3B78F0 0%,#7C5CFF 100%);
  --ok:#0E9F6E; --warn:#B45309;
  --shadow-1:0 4px 24px rgba(11,16,32,.12);
  --shadow-glow:0 8px 40px rgba(46,107,230,.28);
}
[data-theme="light"] body::before{background:radial-gradient(60% 50% at 80% -5%,rgba(124,92,255,.10),transparent 60%),radial-gradient(50% 45% at 10% 0%,rgba(77,141,255,.09),transparent 55%),var(--bg)}
[data-theme="light"] body::after{background-image:linear-gradient(rgba(11,16,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,16,32,.045) 1px,transparent 1px)}
[data-theme="light"] .site-header.scrolled{background:rgba(246,248,253,.8)}
[data-theme="light"] .nav-mobile{background:var(--bg)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  [data-theme="light"] .nav-mobile{background:rgba(246,248,253,.92)}
}
[data-theme="light"] .cookie-banner{background:rgba(255,255,255,.92)}
[data-theme="light"] .form-alert{background:rgba(180,83,9,.10);border-color:rgba(180,83,9,.35);color:#8a4207}
[data-theme="light"] ::selection{background:rgba(124,92,255,.3);color:#0B1020}
/* Cenas 3D (blending aditivo e calibrado p/ fundo escuro): inverte p/ funcionar no claro */
[data-theme="light"] .hero-3d,[data-theme="light"] .viz3d-canvas{filter:invert(1) hue-rotate(195deg);opacity:.45}

/* Toggle da secao Personalizacao */
.theme-toggle{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.theme-btn.is-active{border-color:var(--accent);background:var(--grad-soft);box-shadow:var(--shadow-glow)}

/* ---- Widgets nativos seguem o tema (dropdown do select, scrollbar, date picker) ---- */
:root{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
.field select option{background:var(--bg-2);color:var(--ink)}

/* ---- Foto da bio (Sobre) ---- */
.bio-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---- Cases reais ---- */
.case-block{grid-column:1/-1;max-width:900px;width:100%;margin-inline:auto;background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg);padding:var(--s4)}
.case-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.case-period{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s3)}
.case-metrics--home{grid-template-columns:repeat(3,1fr);max-width:760px;margin-inline:auto;margin-bottom:0}
.cs-metric{background:var(--bg-2);border:1px solid var(--stroke);border-radius:var(--r-md);padding:var(--s3) var(--s2);text-align:center;transition:transform var(--dur-mid) var(--ease-out),border-color var(--dur-mid)}
.cs-metric:hover{transform:translateY(-3px);border-color:var(--stroke-strong)}
.cs-metric b{display:block;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.cs-metric span{font-size:.8rem;color:var(--ink-3);line-height:1.4}
.case-note{font-size:.95rem;margin-bottom:var(--s3)}
.case-proof{border:1px solid var(--stroke-strong);border-radius:var(--r-md);overflow:hidden;background:var(--bg-3);margin:0}
.case-proof img{width:100%}
.case-proof figcaption{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);padding:10px 14px;border-top:1px solid var(--stroke)}
@media (max-width:760px){.case-metrics,.case-metrics--home{grid-template-columns:repeat(2,1fr)}}

/* ---- Briefing (onboarding): grupos de escolha ---- */
.brief-sec{font-family:var(--font-mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:var(--s3) 0 var(--s1);padding-top:var(--s2);border-top:1px solid var(--stroke)}
.lead-form .brief-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
.field-label{font-size:.85rem;color:var(--ink-2);font-weight:500}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.choice{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--surface-input);border:1px solid var(--stroke);border-radius:var(--r-pill);font-size:.9rem;color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.choice:hover{border-color:var(--stroke-strong)}
.choice input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.choice:has(input:checked){border-color:var(--accent);background:var(--grad-soft);color:var(--ink)}
.choice:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}

/* ---- Briefing: hints e input de arquivo ---- */
.brief-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3);margin-left:6px}
.field .file-input{padding:10px}
.field .file-input::file-selector-button{font-family:var(--font-body);font-weight:600;font-size:.85rem;color:var(--ink);background:var(--surface-strong);border:1px solid var(--stroke);border-radius:var(--r-pill);padding:8px 16px;margin-right:12px;cursor:pointer;transition:border-color var(--dur-fast)}
.field .file-input::file-selector-button:hover{border-color:var(--accent)}