/* ============================================================
   casande.tech — Automação de Edição de Vídeo · página de vendas

   DIREÇÃO DE DESIGN (v2)
   Escuro, sofisticado e silencioso — no espírito Apple e das
   referências de página de vendas do Behance. Sem padrão de
   grade no fundo: só gradientes radiais amplos e muito preto.
   Uma família tipográfica só; a hierarquia vem de peso, tamanho
   e espaço, não de fontes diferentes. Superfícies com borda
   capilar, raio generoso e bastante respiro.

   TIPOGRAFIA  Plus Jakarta Sans (200–800) · JetBrains Mono (terminal)
   COR         #08080A fundo · #FF6A00 marca · #F5F3F0 texto
   MOVIMENTO   entrada escalonada + revelação no scroll,
               só em transform/opacity
   ============================================================ */

:root{
  --f-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --ink:#08080A;
  --ink-1:#0C0C0F;
  --ink-2:#111114;
  --ink-3:#17171B;

  --surf:rgba(255,255,255,.026);
  --surf-2:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);

  --orange:#FF6A00;
  --orange-2:#FF8329;
  --orange-3:#FFB279;
  --orange-dim:rgba(255,106,0,.12);
  --orange-glow:rgba(255,106,0,.28);

  --text:#F5F3F0;
  --text-2:#A9A6A1;
  --text-3:#6F6C68;

  --wrap:1160px;
  --pad:clamp(22px,5vw,44px);
  --sec-y:clamp(58px,6vw,88px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:200ms; --med:380ms; --slow:700ms;

  --r:18px; --r-lg:26px; --r-xl:34px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--f-sans); font-size:17px; font-weight:400; line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* grão fino — dá matéria ao preto sem virar textura */
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:300; line-height:1.08; letter-spacing:-.03em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
em{font-style:normal; color:var(--orange)}
::selection{background:var(--orange); color:#0A0A0C}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.skip{position:absolute; left:-9999px; top:0; background:var(--orange); color:#000; padding:12px 18px; z-index:10000; border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--orange-2); outline-offset:3px; border-radius:8px}

.rv{opacity:0; transform:translateY(22px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}

/* ---------- luz ---------- */
.glow{position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none}
.glow--a{width:min(760px,95vw); height:min(700px,90vw); top:-24%; right:-16%; background:radial-gradient(circle,rgba(255,106,0,.30),transparent 68%); animation:float 20s ease-in-out infinite}
.glow--b{width:min(560px,85vw); height:min(560px,85vw); bottom:-26%; left:-18%; background:radial-gradient(circle,rgba(255,131,41,.13),transparent 70%); animation:float 26s ease-in-out infinite reverse}
.glow--c{width:min(860px,100vw); height:min(560px,80vw); top:-14%; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(255,106,0,.20),transparent 70%)}
.glow--d{width:min(1000px,115vw); height:min(620px,90vw); bottom:-42%; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(255,106,0,.26),transparent 68%)}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-30px,38px,0)}}

/* ---------- superfícies ---------- */
.card{background:var(--surf); border:1px solid var(--line); border-radius:var(--r-lg)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-sans); font-weight:600; font-size:.95rem; letter-spacing:-.012em; line-height:1.2;
  color:#1A0800; background:var(--orange); border:0; cursor:pointer;
  padding:1.02em 1.75em; border-radius:100px; text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 16px 40px -18px rgba(255,106,0,.9);
  transition:transform var(--fast) var(--ease), box-shadow var(--med) var(--ease), background var(--fast) var(--ease);
}
.btn:hover{transform:translateY(-2px); background:var(--orange-2); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 24px 50px -18px rgba(255,106,0,1)}
.btn:active{transform:translateY(0)}
.btn-arrow{display:inline-block; transition:transform var(--med) var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn--sm{padding:.72em 1.2em; font-size:.84rem}
.btn--lg{font-size:1rem; padding:1.1em 2em}
.btn--xl{font-size:clamp(1rem,2.2vw,1.2rem); padding:1.16em 2.3em}
.btn--block{display:flex; width:100%}
.btn--pill{background:linear-gradient(100deg,var(--orange),#FF9A3D); color:#1A0800;
  padding:.72em .78em .72em 1.9em; font-size:clamp(.92rem,1.5vw,1.04rem); font-weight:700; letter-spacing:-.005em; gap:1.1em}
.btn-badge{width:2.5em; height:2.5em; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.94); transition:transform var(--med) var(--ease)}
.btn-badge svg{width:1.05em; height:1.05em; stroke:#1A0800; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.btn--pill:hover .btn-badge{transform:rotate(45deg)}

/* selos de confiança sob o botão */
.trust{display:flex; flex-wrap:nowrap; white-space:nowrap; justify-content:space-between; gap:9px 20px; margin-top:22px}
.trust li{display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--text-3)}
.trust svg{width:16px; height:16px; flex:0 0 auto; stroke:var(--orange); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

.btn--ghost{background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{background:var(--surf-2); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text); transform:translateY(-2px)}

.rec{width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block; flex:0 0 auto; box-shadow:0 0 0 0 var(--orange-glow); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--orange-glow)}70%{box-shadow:0 0 0 9px rgba(255,106,0,0)}100%{box-shadow:0 0 0 0 rgba(255,106,0,0)}}

/* ============ HEADER ============ */
.hdr{position:fixed; inset:0 0 auto; z-index:900; transition:background var(--med) var(--ease), backdrop-filter var(--med)}
.hdr::after{content:''; position:absolute; inset:auto 0 0; height:1px; background:transparent; transition:background var(--med)}
.hdr.stuck{background:rgba(8,8,10,.72); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%)}
.hdr.stuck::after{background:var(--line)}
.hdr-in{display:flex; align-items:center; gap:24px; height:78px}

.logo{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:1.04rem; letter-spacing:-.035em}
.logo-rec{width:8px; height:8px; border-radius:50%; background:var(--orange); animation:pulse 2.4s infinite}
.logo-dot{color:var(--orange)}

.nav{display:flex; gap:30px; margin-left:auto; font-size:.9rem; font-weight:500; color:var(--text-2)}
.nav a{position:relative; padding:6px 0; transition:color var(--fast)}
.nav a:hover{color:var(--text)}
.hdr-cta{flex:0 0 auto; white-space:nowrap}

.burger{display:none; width:44px; height:44px; background:var(--surf); border:1px solid var(--line); border-radius:14px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; margin-left:auto}
.burger span{width:17px; height:1.5px; background:var(--text); border-radius:2px; transition:transform var(--med) var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative; padding:clamp(98px,9.5vw,118px) 0 clamp(15px,2vw,24px); overflow:hidden}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-in{position:relative; display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(32px,5vw,68px); align-items:center}
.hero-copy{min-width:0}

.eyebrow{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-size:clamp(.66rem,1vw,.74rem); font-weight:500; letter-spacing:.02em; color:var(--text-2); border:1px solid var(--line); background:var(--surf); padding:.68em 1.15em; border-radius:100px; margin-bottom:clamp(24px,3.6vw,32px)}
.eyebrow b{font-weight:700; color:var(--text)}

.hero-h1{font-size:clamp(2.2rem,4.9vw,3.5rem); font-weight:300; letter-spacing:-.035em; line-height:1.1}
.hero-h1 .ln{display:block; white-space:nowrap}
.ln--accent{color:var(--orange)}

.hero-sub{max-width:50ch; margin:clamp(22px,3vw,28px) 0 0; color:var(--text-2); font-size:clamp(1rem,1.6vw,1.09rem); font-weight:400; line-height:1.68}
.hero-sub strong{color:var(--text); font-weight:600}

.cta-stack{display:inline-block; max-width:100%}
.hero-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:clamp(28px,4vw,38px)}
.hero-cta .btn--pill{width:100%}

.hero-facts{display:flex; flex-direction:column; gap:16px; margin-top:clamp(34px,4.4vw,44px); padding-top:clamp(26px,3.4vw,32px); border-top:1px solid var(--line)}
.hero-facts li{display:flex; align-items:baseline; gap:16px}
.hero-facts strong{font-size:1.3rem; font-weight:700; color:var(--orange); letter-spacing:-.04em; line-height:1; flex:0 0 auto; min-width:64px}
.hero-facts span{font-size:.91rem; color:var(--text-3); line-height:1.5}

/* ---- foto recortada: ela fica NA página, sem moldura ---- */
.hero-shot{position:relative; min-width:0; display:flex; justify-content:center; align-items:flex-end; isolation:isolate}

/* o glifo de filmadora desfocado atrás dela — no lugar da boca da referência */
.hero-glyph{position:absolute; z-index:0; left:50%; top:29%; transform:translate(-50%,-50%) rotate(-8deg);
  width:116%; opacity:.42; filter:blur(15px); animation:glyphIn 1.6s var(--ease) backwards .1s}
.hero-glyph svg{width:100%; height:auto; display:block; fill:var(--orange)}
@keyframes glyphIn{from{opacity:0; transform:translate(-50%,-45%) rotate(-8deg) scale(.9)}}

/* halo suave que assenta ela no fundo */
.hero-halo{position:absolute; z-index:0; left:50%; bottom:-6%; transform:translateX(-50%);
  width:96%; height:56%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,106,0,.30),transparent 68%);
  filter:blur(44px); animation:glyphIn 1.8s var(--ease) backwards}

.hero-shot picture{position:relative; z-index:2; display:block; width:100%; aspect-ratio:871/1215; overflow:hidden}
.hero-cut{position:relative; z-index:2; width:100%; max-width:none; height:100%; object-fit:cover; object-position:50% 0;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.8));
  -webkit-mask-image:linear-gradient(to bottom,#000 93%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 93%,transparent 100%);
  animation:cutIn 1.4s var(--ease) backwards .22s}
@keyframes cutIn{from{opacity:0; transform:translateY(26px) scale(.985)}to{opacity:1; transform:none}}

/* cartõezinhos de vidro — sempre ABAIXO da linha do rosto */
.fcard{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:12px;
  background:rgba(14,14,18,.78); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-radius:100px; padding:9px 18px 9px 9px;
  box-shadow:0 26px 50px -24px #000; white-space:nowrap}
.fcard b{display:block; font-size:.84rem; font-weight:600; letter-spacing:-.02em; color:var(--text)}
.fcard em{display:block; font-size:.74rem; font-weight:400; color:var(--text-3)}
.fcard img{width:38px; height:38px; border-radius:50%; flex:0 0 auto}
/* ícone solto, sem bolinha em volta */
.fcard-ico{width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; margin-left:6px}
.fcard-ico svg{width:26px; height:26px; stroke:var(--orange); fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}

.fcard--author{right:-6%; top:52%; animation:floatIn .8s var(--ease) backwards .9s}
.fcard--product{left:-8%; bottom:12%; animation:floatIn .8s var(--ease) backwards 1.15s}
@keyframes floatIn{from{opacity:0; transform:translateY(12px) scale(.96)}to{opacity:1; transform:none}}

/* ============ TERMINAL ============ */
.term{margin:52px 0 0; border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); overflow:hidden; box-shadow:0 60px 110px -60px #000}
.term-bar{display:flex; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--line)}
.term-dots{display:flex; gap:7px}
.term-dots i{width:10px; height:10px; border-radius:50%}
.term-dots i:first-child{background:#ff5f57} .term-dots i:nth-child(2){background:#febc2e} .term-dots i:last-child{background:#28c840}
.term-title{font-family:var(--f-mono); font-size:.76rem; color:var(--text-3)}
.term-badge{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:500; color:var(--orange-3); background:var(--orange-dim); border:1px solid rgba(255,106,0,.22); padding:.34em .85em; border-radius:100px}
.term-badge::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); animation:pulse 2.4s infinite}

.term-body{padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px) clamp(10px,1.3vw,15px); font-family:var(--f-mono); font-size:clamp(.76rem,1.4vw,.88rem); line-height:2.05; min-height:clamp(300px,37vw,378px)}
.tl{opacity:0; transform:translateY(6px); transition:opacity 360ms var(--ease), transform 360ms var(--ease); color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl.on{opacity:1; transform:none}
.tl--cmd{opacity:1; transform:none; color:var(--text); margin-bottom:.9em}
.prompt{color:var(--orange)}
.tl b{color:var(--orange); font-weight:500; margin-right:.6em}
.tl--wait,.tl--wait b{color:var(--orange-3)}
.tl--done{color:var(--text); margin-top:.7em; padding-top:.9em; border-top:1px solid var(--line)}
.tl--done b{color:#28c840}
.dim{color:var(--text-3)}
.hi{color:var(--orange-3)}
.caret{display:inline-block; width:8px; height:1.05em; background:var(--orange); vertical-align:-2px; animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ============ MARQUEE ============ */
.marquee{overflow:hidden; padding:15px 0; margin-top:clamp(27px,3.5vw,43px); background:linear-gradient(90deg,#C24E00,var(--orange) 50%,#C24E00)}
.marquee-track{display:flex; align-items:center; gap:34px; width:max-content; animation:slide 40s linear infinite; font-size:clamp(.68rem,1.4vw,.78rem); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#2A0F00}
.marquee-track i{color:rgba(42,15,0,.5); font-style:normal; font-size:.85em}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SEÇÕES ============ */
.sec{position:relative; padding:calc(var(--sec-y) * .5) 0 var(--sec-y)}
.sec-head{max-width:780px; margin-bottom:clamp(36px,4.4vw,56px)}
.sec-head--wide{max-width:880px}
.sec-head--xwide{max-width:1000px}
.nb{white-space:nowrap}
.sec-head--center{text-align:center; margin-inline:auto; max-width:740px}
.tag{font-size:clamp(.84rem,1.5vw,.95rem); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--orange); margin-bottom:22px}
.sec-h2{font-size:clamp(1.9rem,4.4vw,3rem); font-weight:300; letter-spacing:-.032em; line-height:1.14}
.sec-lead{margin-top:24px; color:var(--text-2); font-size:clamp(1.08rem,1.85vw,1.24rem); line-height:1.7; max-width:62ch}
.sec-lead strong{color:var(--text); font-weight:600}
.sec-head--center .sec-lead{margin-inline:auto}

/* card base: aresta de acento no topo, borda capilar, raio generoso */
.tile{position:relative; background:var(--surf); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--med) var(--ease), border-color var(--med), background var(--med)}
.tile::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--orange),transparent 62%); opacity:.34; transition:opacity var(--med)}
.tile:hover{transform:translateY(-4px); background:var(--surf-2); border-color:var(--line-2)}
.tile:hover::before{opacity:1}

/* ícone de linha em disco */
.ico{width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--orange-dim); border:1px solid rgba(255,106,0,.2); margin-bottom:20px; flex:0 0 auto}
.ico svg{width:21px; height:21px; stroke:var(--orange); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ============ PARA QUEM É ============ */
.who-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(246px,1fr)); gap:16px}
.who-c{padding:clamp(26px,3vw,32px)}
.who-c h3{font-weight:600; font-size:1.05rem; font-weight:700; line-height:1.28; margin-bottom:11px}
.who-c p{color:var(--text-2); font-size:.92rem; line-height:1.68}

/* ============ DOR / CUSTO ============ */
.cost{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surf)}
.cost-row{display:grid; grid-template-columns:1fr 150px 190px; gap:20px; align-items:center; padding:26px clamp(20px,3vw,34px); border-bottom:1px solid var(--line); transition:background var(--med) var(--ease)}
.cost-row:last-child{border-bottom:0}
.cost-row:not(.cost-row--head):hover{background:var(--surf-2)}
.cost-row--head{font-size:.76rem; font-weight:600; color:var(--text-3); padding-block:15px}
.cost-what b{display:block; font-size:1.02rem; font-weight:700; letter-spacing:-.02em; margin-bottom:6px}
.cost-what em{color:var(--text-3); font-size:.88rem; line-height:1.55; font-weight:400}
.cost-len{font-size:.9rem; color:var(--text-2)}
.cost-time{font-size:clamp(1.35rem,3vw,1.85rem); font-weight:700; letter-spacing:-.04em; text-align:right; white-space:nowrap}
.cost-row--peak{background:linear-gradient(90deg,var(--orange-dim),transparent 70%)}
.cost-row--peak .cost-time{color:var(--orange)}

.pain-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin-top:16px}
.pain-card{padding:clamp(28px,3vw,34px)}
.pain-card h3{font-weight:600; font-size:1.1rem; font-weight:700; margin-bottom:11px}
.pain-card p{color:var(--text-2); font-size:.93rem; line-height:1.7}

/* frase-manifesto entre seções, em dois tons */
.pain-turn{margin-top:clamp(40px,5vw,58px); text-align:center}
.pain-turn span{display:inline-block; max-width:40ch; color:#fff; font-weight:700;
  font-size:clamp(1.3rem,3.1vw,2.05rem); letter-spacing:-.03em; line-height:1.3; text-wrap:balance}

/* ============ O CORTE EM 3D ============ */
.cut{overflow:hidden; padding-bottom:clamp(64px,8vw,96px)}
.cut-stage{position:relative; width:100%; height:clamp(320px,42vw,500px); margin:clamp(8px,2vw,18px) 0 clamp(32px,4vw,46px)}
#cutCanvas{width:100%; height:100%; display:block}
.cut-fallback{display:none; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 82%,var(--orange-dim),transparent 64%)}
.cut-stage.no3d #cutCanvas{display:none}
.cut-stage.no3d .cut-fallback{display:block}
.cut-legend{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; font-size:.8rem; color:var(--text-3); pointer-events:none}
.cut-legend li{display:flex; align-items:center; gap:9px}
.cdot{width:9px; height:9px; border-radius:3px; display:inline-block}
.cdot--bad{background:#c0392b}
.cdot--good{background:var(--orange)}
.cut-cap{max-width:64ch; margin:0 auto; text-align:center; color:var(--text-2); font-size:clamp(.98rem,1.6vw,1.08rem); line-height:1.75}

/* ============ PASSO 1 / PASSO 2 ============ */
.steps2{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.s2{position:relative; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,3.4vw,42px); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)); overflow:hidden}
.s2::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--orange),transparent 65%)}
.s2--b{margin-top:clamp(0px,4vw,52px)}
.s2--b::before{background:linear-gradient(90deg,var(--orange-3),transparent 65%)}
.s2-num{display:inline-block; font-size:.78rem; font-weight:600; color:var(--orange); background:var(--orange-dim); border:1px solid rgba(255,106,0,.2); padding:.42em .95em; border-radius:100px; margin-bottom:20px}
.s2-title{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:300; letter-spacing:-.035em; margin-bottom:12px}
.s2-sub{color:var(--text-2); font-size:1rem; line-height:1.62; margin-bottom:28px}

.s2-list{display:flex; flex-direction:column; gap:17px; margin-top:28px}
.s2-list li{position:relative; padding-left:30px; color:var(--text-2); font-size:.95rem; line-height:1.68}
.s2-list li::before{content:''; position:absolute; left:0; top:.58em; width:12px; height:2px; border-radius:2px; background:var(--orange)}
.s2-list b{color:var(--text); font-weight:600}

.s2-foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); color:var(--text-3); font-size:.87rem}
.pill{font-size:.74rem; font-weight:600; border:1px solid var(--line-2); border-radius:100px; padding:.42em .9em; color:var(--text-2)}
.pill--ok{color:var(--orange); border-color:rgba(255,106,0,.28); background:var(--orange-dim)}

.wave{display:grid; grid-template-columns:60px 1fr; gap:12px 14px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:var(--r); background:rgba(0,0,0,.28)}
.wave-lbl{font-size:.72rem; font-weight:500; color:var(--text-3)}
.wave-bars{display:flex; align-items:center; gap:3px; height:42px}
.wave-bars span{flex:1; border-radius:2px; background:rgba(255,255,255,.14); transform-origin:center}
.wave-bars--raw span.gap{background:rgba(192,57,43,.55)}
.wave-bars--clean span{background:var(--orange); opacity:.9}
.s2.in .wave-bars span{animation:bar 1.6s var(--ease) both}
@keyframes bar{from{transform:scaleY(.12)}to{transform:scaleY(1)}}

.mock{display:grid; grid-template-columns:180px 1fr; gap:22px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:var(--r); background:rgba(0,0,0,.28)}
.mock video{width:100%; height:auto; display:block; border-radius:14px}
.mock-side{display:flex; flex-wrap:wrap; gap:8px; align-content:center}
.chip{font-size:.76rem; color:var(--text-2); border:1px solid var(--line); border-radius:100px; padding:.46em .9em; background:var(--surf); transition:color var(--fast), border-color var(--fast)}
.chip:hover{color:var(--orange); border-color:rgba(255,106,0,.35)}

/* ============ COMO FUNCIONA ============ */
.flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px}
.flow-i{position:relative; padding:clamp(28px,3.2vw,36px)}
.flow-n{font-size:.8rem; font-weight:600; color:var(--orange); display:block; margin-bottom:22px}
.flow-i h3{font-weight:600; font-size:1.12rem; font-weight:700; margin-bottom:12px}
.flow-i p{color:var(--text-2); font-size:.93rem; line-height:1.7}
.flow-code{display:block; margin-top:18px; font-family:var(--f-mono); font-size:.7rem; line-height:1.6; color:var(--orange-3); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:11px; padding:11px 13px; white-space:normal; overflow-wrap:anywhere}

/* imagem larga entre seções */
.band{position:relative; margin-top:clamp(32px,4vw,48px); border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line)}
.band img{width:100%; height:auto; display:block}
.band-txt{position:absolute; inset:auto auto 0 0; z-index:2; padding:clamp(24px,4vw,48px); max-width:min(560px,80%)}
.band-txt p{font-size:clamp(1.05rem,2.3vw,1.55rem); font-weight:700; letter-spacing:-.03em; line-height:1.75; margin-bottom:14px}
/* titulo: fundo laranja, fonte preta, cantos retos */
.band-txt p span{display:inline; background:var(--orange); color:#0A0A0C; border-radius:0;
  padding:.18em .5em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
/* apoio: fundo laranja, fonte branca, cantos retos */
.band-txt > span{display:inline; background:var(--orange); color:#fff; font-size:.95rem; font-weight:600; line-height:1.9;
  padding:.2em .45em; -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* ============ O QUE VOCÊ LEVA ============ */
.deliver-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.dcard{padding:clamp(28px,3.2vw,38px)}
.dcard--wide{grid-column:1/-1; background:linear-gradient(115deg,rgba(255,106,0,.11),var(--surf) 58%); border-color:rgba(255,106,0,.2)}
.dcard--course{grid-column:1/-1}
.dcard-tag{font-size:.78rem; font-weight:600; color:var(--orange); display:block; margin-bottom:14px}
.dcard h3{font-weight:600; font-size:clamp(1.22rem,2.4vw,1.55rem); font-weight:700; margin-bottom:14px}
.dcard p{color:var(--text-2); font-size:.98rem; line-height:1.72; max-width:70ch}
.dcard strong{color:var(--text); font-weight:600}

.lessons{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0 32px; margin-top:28px}
.lessons li{padding:15px 0; border-bottom:1px solid var(--line); font-size:.93rem; color:var(--text-2); display:flex; gap:14px; align-items:baseline}
.lessons span{font-size:.78rem; font-weight:600; color:var(--orange); flex:0 0 auto; min-width:56px}

/* ============ PROVA / AUTORIDADE ============ */
.proof-in{display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(32px,5vw,66px); align-items:start}
.proof-txt p{color:var(--text-2); font-size:1rem; line-height:1.76; margin-top:22px; max-width:58ch}
.proof-txt strong{color:var(--text); font-weight:600}

.proof-links{display:flex; flex-direction:column; gap:12px; margin-top:36px}
.plink{display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:var(--r); padding:17px 21px; background:var(--surf); transition:transform var(--fast) var(--ease), border-color var(--med), background var(--med)}
.plink:hover{transform:translateX(5px); border-color:var(--line-2); background:var(--surf-2)}
.plink-ico{width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:var(--orange-dim); color:var(--orange); font-size:.86rem}
.plink b{display:block; font-size:.98rem; font-weight:700; letter-spacing:-.02em}
.plink em{color:var(--text-3); font-size:.86rem; font-weight:400}

.author{border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--surf); position:sticky; top:104px}
.author-photo{position:relative; aspect-ratio:3/4; overflow:hidden; border-bottom:1px solid var(--line); background:var(--ink-2)}
.author-photo img{width:100%; height:100%; object-fit:cover}
.author-txt{padding:28px}
.author-name{font-size:1.22rem; font-weight:700; letter-spacing:-.03em}
.author-role{font-size:.85rem; color:var(--orange); margin-bottom:16px; font-weight:500}
.author-bio{color:var(--text-2); font-size:.93rem; line-height:1.72}

/* ============ REQUISITOS ============ */
.req-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px}
.req-grid--solo{grid-template-columns:1fr}
.req-grid--solo .req-i{display:flex; align-items:flex-start; gap:22px; padding:clamp(26px,3vw,34px) clamp(28px,3.4vw,40px)}
.req-grid--solo .ico{margin-bottom:0}
.req-grid--solo h3{margin-bottom:9px}
.req-grid--solo p{max-width:78ch}
.req-i{padding:clamp(26px,3vw,32px)}
.req-i h3{font-weight:600; font-size:1.04rem; font-weight:700; margin-bottom:11px}
.req-i h3 em{font-size:.76rem; font-weight:500; color:var(--orange); vertical-align:middle}
.req-i p{color:var(--text-2); font-size:.91rem; line-height:1.68}
.req-i--opt .ico{background:var(--surf-2); border-color:var(--line)}
.req-i--opt .ico svg{stroke:var(--text-2)}

/* ============ OFERTA ============ */
.offer{position:relative; overflow:hidden}
.offer-bg{position:absolute; inset:0; pointer-events:none}
.offer .wrap{position:relative}
.offer .sec-head{text-align:center; margin-inline:auto}

.price-card{display:grid; grid-template-columns:1.12fr .88fr; border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; background:var(--surf); box-shadow:0 60px 120px -70px rgba(255,106,0,.5)}
.price-left,.price-right{padding:clamp(32px,4vw,50px)}
.price-left{border-right:1px solid var(--line)}
.price-right{background:linear-gradient(165deg,rgba(255,106,0,.11),rgba(255,255,255,.02) 62%); display:flex; flex-direction:column}

.price-name{font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:300; letter-spacing:-.035em; margin-bottom:13px}
.price-desc{color:var(--text-2); font-size:.97rem; line-height:1.72; margin-bottom:30px}
.price-list{display:flex; flex-direction:column; gap:14px}
.price-list li{position:relative; padding-left:32px; font-size:.95rem; color:var(--text-2)}
.price-list li::before{content:''; position:absolute; left:0; top:.28em; width:20px; height:20px; border-radius:50%; background:var(--orange-dim); border:1px solid rgba(255,106,0,.26)}
.price-list li::after{content:''; position:absolute; left:6.5px; top:.62em; width:7px; height:4px; border-left:1.6px solid var(--orange); border-bottom:1.6px solid var(--orange); transform:rotate(-45deg)}

.price-from{font-size:.82rem; font-weight:500; color:var(--text-3)}
.price-big{display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; margin:12px 0 5px; font-weight:700; letter-spacing:-.05em; line-height:.92}
.price-big .pre{width:100%; font-size:.98rem; font-weight:400; letter-spacing:-.01em; color:var(--text-2); margin-bottom:8px}
.price-big .cur{font-size:clamp(1.1rem,2.2vw,1.45rem); color:var(--orange); align-self:flex-start; margin-top:.2em}
.price-big .val{font-size:clamp(3.1rem,8vw,4.6rem)}
.price-big .ast{font-size:1rem; color:var(--orange); align-self:flex-start; margin-top:.35em; font-weight:400}
.price-inst{color:var(--text-2); font-size:.96rem}
.price-inst b{color:var(--text); font-weight:600}
.price-day{font-size:.85rem; color:var(--orange-3); margin:8px 0 30px}
.price-day b{font-weight:600}
.price-right .btn{margin-top:auto}
.price-note{margin-top:17px; font-size:.83rem; color:var(--text-3); line-height:1.65; text-align:center}
.price-note .ast{color:var(--orange)}
.price-scar{display:flex; gap:11px; align-items:flex-start; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); font-size:.86rem; line-height:1.62; color:var(--orange-3)}
.price-scar .rec{margin-top:.5em}

.offer-math{max-width:62ch; margin:clamp(34px,4vw,48px) auto 0; text-align:center; color:var(--text-2); font-size:clamp(1rem,1.8vw,1.14rem); line-height:1.76}
.offer-math strong{color:var(--orange); font-weight:600}

/* ============ FAQ ============ */
.faq-list{border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--surf)}
.fq{border-bottom:1px solid var(--line)}
.fq:last-child{border-bottom:0}
.fq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:26px; text-align:left; background:transparent; border:0; cursor:pointer; padding:clamp(22px,2.6vw,28px) clamp(22px,3vw,34px); color:var(--text); font-family:var(--f-sans); font-weight:600; font-size:clamp(.98rem,1.8vw,1.08rem); letter-spacing:-.022em; line-height:1.42; transition:color var(--fast), background var(--fast)}
.fq-q:hover{color:var(--orange-3); background:var(--surf-2)}
.fq-ic{position:relative; flex:0 0 auto; width:28px; height:28px; border:1px solid var(--line-2); border-radius:50%; transition:transform var(--med) var(--ease), border-color var(--med), background var(--med)}
.fq-ic::before,.fq-ic::after{content:''; position:absolute; top:50%; left:50%; background:var(--orange); border-radius:2px; transition:transform var(--med) var(--ease), opacity var(--fast)}
.fq-ic::before{width:11px; height:1.6px; transform:translate(-50%,-50%)}
.fq-ic::after{width:1.6px; height:11px; transform:translate(-50%,-50%)}
.fq-q:hover .fq-ic{border-color:var(--orange); background:var(--orange-dim)}
.fq-q[aria-expanded="true"] .fq-ic{transform:rotate(180deg); border-color:var(--orange); background:var(--orange-dim)}
.fq-q[aria-expanded="true"] .fq-ic::after{opacity:0; transform:translate(-50%,-50%) scaleY(0)}
.fq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--med) var(--ease)}
.fq-q[aria-expanded="true"] + .fq-a{grid-template-rows:1fr}
.fq-a > div{overflow:hidden}
.fq-a p{padding:0 clamp(22px,3vw,34px) clamp(26px,3vw,32px); padding-right:clamp(22px,8vw,96px); color:var(--text-2); font-size:.96rem; line-height:1.8}

/* ============ CTA FINAL ============ */
.final{position:relative; overflow:hidden; padding:clamp(48px,6.5vw,84px) 0 clamp(96px,13vw,168px)}
.final-bg{position:absolute; inset:0; pointer-events:none; background:var(--ink-1)}
.final-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,var(--ink) 0%,rgba(8,8,10,.55) 42%,var(--ink) 100%)}
.final-in{position:relative; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(34px,5vw,68px); align-items:center}
.final-copy{min-width:0}
.final-h2{font-size:clamp(1.95rem,4.2vw,3rem); font-weight:300; letter-spacing:-.035em; line-height:1.1}
.final-sub{max-width:46ch; margin:26px 0 clamp(34px,4.4vw,44px); color:var(--text-2); font-size:clamp(1rem,1.75vw,1.13rem); line-height:1.7}
.final-micro{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px 28px; margin-top:32px; font-size:.84rem; color:var(--text-3)}

/* foto ao lado do texto, no lugar do antigo fundo */
.final-shot{margin:0; position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line-2); background:var(--ink-2); aspect-ratio:4/5; box-shadow:0 60px 110px -60px #000}
.final-shot img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block}
.final-micro li{display:flex; align-items:center; gap:9px}
.final-micro li::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--orange)}

/* ============ RODAPÉ ============ */
.ft{border-top:1px solid var(--line); padding-top:clamp(58px,7vw,84px)}
.ft-in{display:grid; grid-template-columns:1.8fr 1fr; gap:clamp(30px,4vw,64px); padding-bottom:clamp(42px,5vw,58px)}
.ft-brand p{color:var(--text-3); font-size:.94rem; line-height:1.72; margin:20px 0 24px; max-width:44ch}
.ft-social{display:flex; flex-wrap:wrap; gap:10px}
.ft-social a{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--text-2); transition:color var(--fast), border-color var(--fast), transform var(--fast), background var(--fast)}
.ft-social svg{width:20px; height:20px; fill:currentColor}
.ft-social .fill-bg{fill:var(--ink)}
.ft-social .stroked{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ft-social .stroked .filled{fill:currentColor; stroke:none}
.ft-social a:hover{background:var(--orange-dim)}
.ft-social a:hover{color:var(--orange); border-color:rgba(255,106,0,.35); transform:translateY(-2px)}
.ft-col{display:flex; flex-direction:column; gap:12px}
.ft-col h3{font-size:.8rem; font-weight:600; color:var(--text-3); margin-bottom:6px; letter-spacing:0}
.ft-col a{font-size:.91rem; color:var(--text-2); transition:color var(--fast)}
.ft-col a:hover{color:var(--orange)}
.ft-small{font-size:.84rem; color:var(--text-3); line-height:1.65; margin-top:6px}
.ft-bottom{display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:center; text-align:center; align-items:center; padding-block:26px; border-top:1px solid var(--line); font-size:.85rem; color:var(--text-3)}
.ft-disc{max-width:60ch}

/* ============ RESPONSIVO ============ */
@media (max-width:1020px){
  .nav{display:none; position:fixed; inset:78px 0 auto; flex-direction:column; gap:0; background:rgba(8,8,10,.97); backdrop-filter:blur(22px); border-block:1px solid var(--line); padding:8px var(--pad) 22px}
  .nav.open{display:flex}
  .nav a{padding:17px 0; border-bottom:1px solid var(--line); font-size:1rem}
  .burger{display:flex}
  .hdr-cta{display:none}
  .steps2{grid-template-columns:1fr}
  .s2--b{margin-top:0}
  .proof-in{grid-template-columns:1fr}
  .author{position:static; max-width:420px}
  .price-card{grid-template-columns:1fr}
  .price-left{border-right:0; border-bottom:1px solid var(--line)}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  .final-in{grid-template-columns:1fr; gap:40px}
  .final-shot{max-width:460px; aspect-ratio:3/4}
  .hero-in{grid-template-columns:1fr; gap:46px}
  .hero-h1{font-size:clamp(2.2rem,7.2vw,3.5rem)}
}
@media (max-width:900px){
  .hero-shot{max-width:440px}
  .shot-stat{right:0}
}
@media (max-width:760px){ .nb{white-space:normal} }
@media (max-width:560px){ .eyebrow{white-space:normal} }
@media (max-width:760px){
  body{font-size:16px}
  .hero-shot{max-width:none}
  .shot-stat{position:static; margin-top:14px; animation:none}
  .cost-row{grid-template-columns:1fr auto; gap:8px 16px; padding:22px}
  .cost-row--head{display:none}
  .cost-len{grid-column:1; font-size:.82rem; color:var(--text-3)}
  .cost-time{grid-column:2; grid-row:1/3; align-self:center}
  .cost-what{grid-column:1}
  .deliver-grid{grid-template-columns:1fr}
  .mock{grid-template-columns:118px 1fr; gap:16px}
  .term-badge{display:none}
  .tl{white-space:normal}
  .ft-in{grid-template-columns:1fr; gap:34px}
  .cta-stack{display:block}
  .hero-cta .btn{width:100%}
  .trust{flex-wrap:wrap; white-space:normal; justify-content:flex-start; gap:9px 18px}
  .req-grid--solo .req-i{flex-direction:column; gap:0}
  .req-grid--solo .ico{margin-bottom:18px}
  .band-txt{max-width:none; position:static; background:var(--surf)}
  .band::after{display:none}
}
@media (max-width:420px){
  .mock{grid-template-columns:1fr}
  .mock-frame{max-width:150px; margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv,.tl{opacity:1; transform:none}
}

/* ============ GALERIA DE B-ROLL (Remotion) ============ */
.brollx{margin-top:clamp(46px,6vw,74px)}
.brollx-head{max-width:640px; margin-bottom:clamp(26px,3vw,36px)}
.brollx-head h3{font-size:clamp(1.25rem,2.5vw,1.7rem); font-weight:300; letter-spacing:-.035em; line-height:1.2}
.brollx-head p{margin-top:16px; color:var(--text-2); font-size:.97rem; line-height:1.7}
.brollx-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.bclip{position:relative; margin:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-1); transition:transform var(--med) var(--ease), border-color var(--med)}
.bclip:hover{transform:translateY(-4px); border-color:var(--line-2)}
.bclip video{width:100%; height:auto; display:block}
.bclip figcaption{position:absolute; left:14px; bottom:14px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em; color:var(--text-2); background:rgba(8,8,10,.66); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:.4em .75em; border-radius:100px}

/* ============ PADRÃO DE ÍCONES NO FUNDO DO HERO ============ */
/* vários motivos de filmadora/play compondo o fundo, como as bocas
   da referência — nenhum deles fica só atrás dela */
.motifs{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.motif{position:absolute; fill:var(--orange); opacity:.07; filter:blur(1px)}
.motif--1{width:22%; top:6%;  left:6%;   transform:rotate(-12deg)}
.motif--2{width:9%;  top:44%; left:29%;  opacity:.055}
.motif--3{width:15%; top:70%; left:14%;  transform:rotate(9deg); opacity:.05}
.motif--4{width:13%; top:12%; right:8%;  transform:rotate(7deg); opacity:.05}
.motif--5{width:8%;  bottom:14%; right:22%; opacity:.06}
@media (max-width:900px){ .motif--2,.motif--5{display:none} }

/* galeria de b-roll: responsivo (depois da regra base, por ordem de cascata) */
@media (max-width:1020px){ .brollx-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .brollx-grid{grid-template-columns:repeat(2,1fr)} }

/* selos do hero: uma linha só quando cabe; quebram quando a coluna aperta */
@media (max-width:1150px) and (min-width:901px){
  .cta-stack{display:block}
  .trust{flex-wrap:wrap; white-space:normal; justify-content:flex-start; gap:9px 18px}
}
/* header: CTA do topo é longo, o menu cede espaço antes de estourar */
@media (max-width:1240px) and (min-width:1021px){
  .nav{gap:20px; font-size:.85rem}
  .hdr-in{gap:18px}
}