/* Visual do Diretor de IA / Marketing System (studio dark, título condensado, cards .mc) com acento azul */
:root{
  --accent:#3b82f6; --accent-2:#284c9a; --on-accent:#fff; --accent-soft:rgba(59,130,246,.14);
  --surface:#0b0c10; --panel:#121318; --card:#191a20; --card-2:#22242b;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --fg:#f4f4f5; --fg-2:#a1a1aa; --fg-3:#6b6b74; --glare:rgba(255,255,255,.12); --ok:#34d399;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease-spring:cubic-bezier(.3,1.5,.5,1); --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--surface); color:var(--fg)}
body{font-family:var(--body); font-size:15px; line-height:1.55; overflow-x:hidden;
  padding:18px max(16px, env(safe-area-inset-right,0px)) 96px max(16px, env(safe-area-inset-left,0px));
  background:radial-gradient(900px 520px at 50% -180px, rgba(59,130,246,.22), transparent 70%), var(--surface)}
a{color:inherit}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{max-width:720px; margin:0 auto; display:grid; gap:56px}
.disp{font-family:var(--display); font-stretch:75%; font-variation-settings:"wdth" 75; font-weight:800; text-transform:uppercase; letter-spacing:-.005em; line-height:.95; text-wrap:balance}
.eyebrow{margin:0; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.lede{margin:0; font-size:18px; color:var(--fg-2); max-width:40ch}
.lede b{color:var(--fg)}
h1{margin:0; font-size:clamp(52px, 14vw, 100px)}
h1 em,h2 em{font-style:normal; color:var(--accent)}
h2{margin:0; font-size:clamp(30px, 7vw, 42px)}
.sec{display:grid; gap:18px}
.muted{color:var(--fg-2)}

/* barra */
.bar{display:flex; align-items:center; gap:10px}
.logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; display:grid; place-items:center; font-size:15px; flex:none; text-decoration:none}
.bar b{font-weight:700}
.bar .spacer{flex:1}
.back{font-size:13px; color:var(--fg-2); text-decoration:none}
.back:hover{color:var(--fg)}
.chip{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--card); border:1px solid var(--line-2); white-space:nowrap}
.chip.hot{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
.dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)}

/* botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 22px; border-radius:14px; font-weight:700; font-size:15px; background:var(--card-2); border:1px solid var(--line-2); text-decoration:none; cursor:pointer; transition:border-color .2s, transform .3s var(--ease-spring)}
.btn:hover{border-color:var(--fg-3); transform:translateY(-1px)}
.btn svg{width:18px; height:18px; flex:none}
.btn.accent{position:relative; overflow:hidden; background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:inset 0 -3px 0 rgba(0,0,0,.2), 0 0 26px -8px var(--accent)}
.btn.accent::after{content:""; position:absolute; top:0; bottom:0; width:44px; left:-64px; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:streak 4s ease-in-out 1.5s infinite}
@keyframes streak{0%{left:-64px} 30%,100%{left:130%}}
.btn.block{width:100%}
.actions{display:flex; flex-wrap:wrap; gap:10px}

/* card com brilho na borda + tilt 3D */
.mc{position:relative; border-radius:16px; background:var(--card); border:1px solid var(--line); transform-style:preserve-3d; transition:transform .25s ease-out, box-shadow .4s, border-color .3s}
.mc:hover{border-color:var(--line-2); box-shadow:0 30px 50px -28px color-mix(in srgb, var(--accent) 65%, transparent)}
.mc::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), var(--accent), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; pointer-events:none; z-index:3}
.mc::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), var(--glare), transparent 60%); opacity:0; transition:opacity .3s; z-index:2}
.mc:hover::before,.mc:hover::after{opacity:1}
.mc > *{position:relative; z-index:4}

/* entrada com motion blur */
.rv{opacity:0; filter:blur(14px); transform:translateY(26px) scale(.98); transition:opacity .9s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d,0s)}
.rv.in{opacity:1; filter:none; transform:none}
.word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
.word > span{display:inline-block; animation:word .9s var(--ease-out) both; animation-delay:calc(.08s * var(--i,0) + .1s); filter:blur(0)}
@keyframes word{from{transform:translateY(105%) skewY(6deg); filter:blur(8px)}}

/* herói com pôster */
.hero{display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:24px; align-items:end}
@media (max-width:620px){ .hero{grid-template-columns:1fr} .poster{max-width:230px} }
.hero-copy{display:grid; gap:16px; min-width:0}
.poster{overflow:hidden; aspect-ratio:9/16; max-width:100%}
.poster img,.poster video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; transition:transform 1.2s var(--ease-out); z-index:1}
.poster:hover img,.poster:hover video{transform:scale(1.05)}
.poster .cap{position:absolute; left:12px; right:12px; bottom:12px; display:grid; gap:2px; text-shadow:0 2px 12px rgba(0,0,0,.8); color:#fff}
.poster .cap .disp{font-size:22px}
.poster .cap span{font-size:12.5px; opacity:.85}
.poster .shade{position:absolute; inset:0; z-index:2; border-radius:inherit; background:linear-gradient(transparent 55%, rgba(0,0,0,.75))}

/* números */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .stats{grid-template-columns:repeat(2, minmax(0,1fr))} }
.stat{padding:16px 14px; display:grid; gap:4px}
.stat .disp{font-size:clamp(34px, 9vw, 46px); color:var(--fg)}
.stat .disp small{font-size:.5em; color:var(--accent)}
.stat span{font-size:12.5px; color:var(--fg-2)}

/* grade de cards genérica */
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }
.card{padding:18px; display:grid; gap:8px; align-content:start; min-width:0}
.card .ic{width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center}
.card .ic svg{width:21px; height:21px}
.card h3{margin:0; font-size:26px}
.card p{margin:0; color:var(--fg-2); font-size:14px}
.card ul{margin:2px 0 0; padding:0 0 0 18px; color:var(--fg-2); font-size:14px}
.card.wide{grid-column:1 / -1}

/* passos */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.steps li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:16px}
.steps .n{font:600 12px/1 var(--mono); color:var(--accent); background:var(--accent-soft); border-radius:8px; padding:8px 9px}
.steps b{display:block; font-size:16px; margin-bottom:2px}
.steps p{margin:0; color:var(--fg-2)}

/* corrente */
.chain{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.chain span{display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:999px; background:var(--card); border:1px solid var(--line-2); font-weight:600; font-size:13.5px}
.chain span:not(:last-child)::after{content:"→"; margin-left:10px; color:var(--accent)}
.chain span:last-child{background:var(--accent-soft); color:var(--accent); border-color:transparent}

/* faq */
details{padding:14px 16px}
details summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px}
details summary::after{content:"+"; color:var(--accent); font-weight:700; transition:transform .3s var(--ease-spring)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:8px 0 0; color:var(--fg-2)}
.faq{display:grid; gap:8px}

/* CTA fixo no celular */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px max(16px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  background:linear-gradient(transparent, rgba(11,12,16,.92) 35%); transform:translateY(110%); transition:transform .5s var(--ease-out)}
.sticky.show{transform:none}
.sticky .btn{max-width:720px; margin:0 auto; width:100%; display:flex}

footer{display:grid; gap:6px}
footer .disp{font-size:clamp(28px, 8vw, 42px)}
footer .disp span{color:var(--accent)}
footer p{margin:0; color:var(--fg-3); font-size:13px}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} .rv{opacity:1; filter:none; transform:none} }