@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-0.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-2.woff2') format('woff2');font-weight:600;font-display:swap}

/* Paleta: noite #07090d, superfície #0e121a, linha #232c3b, sinal #a8c4ff, whatsapp #25d366, alerta #e8b65a */
:root{--night:#07090d;--surface:#0e121a;--surface-2:#131926;--line:#232c3b;--text:#f2f4f8;--soft:#c4ccd8;--mute:#8a95a8;--signal:#a8c4ff;--wpp:#25d366;--warn:#e8b65a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--night);color:var(--text);font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.glow{position:absolute;inset:0 0 auto;height:900px;z-index:-1;pointer-events:none;background:radial-gradient(700px 480px at 78% 120px,#3d5bd933,transparent 70%),radial-gradient(520px 380px at 8% 0,#1d8a5722,transparent 70%)}

.wrap{width:100%;max-width:1080px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.wrap-wide{width:calc(100% - 40px);max-width:1180px;margin:0 auto}

section{padding-top:96px}
h2{font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.035em;max-width:20ch}
.section-lead{margin-top:14px;max-width:56ch;font-size:18px;line-height:1.55;color:var(--soft)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 26px;border-radius:14px;font-size:17px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn:focus-visible,.top-cta:focus-visible,.sound:focus-visible,summary:focus-visible,.window-open:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.btn-main{background:var(--text);color:#07090d;box-shadow:0 0 0 1px #ffffff40,0 10px 40px -10px #a8c4ff80}
.btn-main:hover{background:#fff;transform:translateY(-2px);box-shadow:0 0 0 1px #fff,0 16px 50px -10px #a8c4ffb0}
.btn-wpp{background:var(--wpp);color:#03140a}
.btn-wpp:hover{background:#3be07a;transform:translateY(-2px)}

/* Topo */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:calc(18px + env(safe-area-inset-top))}
.brand{font-size:17px;font-weight:600;letter-spacing:-.035em;text-decoration:none}
.brand span{color:var(--signal)}
.top-cta{font-size:14px;color:var(--soft);text-decoration:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px}
.top-cta:hover{color:var(--text);border-color:var(--signal)}

/* Hero: texto + celular com o vídeo */
.hero{display:grid;gap:44px;align-items:center;padding-top:48px}
@media(min-width:900px){.hero{grid-template-columns:1.15fr .85fr;gap:56px;padding-top:72px}}
.hero h1{font-size:clamp(36px,6.2vw,64px);line-height:1;letter-spacing:-.05em;max-width:15ch}
.lead{margin-top:22px;max-width:46ch;font-size:19px;line-height:1.55;color:var(--soft)}
.proof-line{margin-top:20px;max-width:46ch;padding-left:14px;border-left:2px solid var(--signal);font-size:16px;line-height:1.5;color:var(--soft)}
.proof-line b{color:var(--text)}
.hero-buy{margin-top:30px}
.hero-buy .btn{width:100%}
@media(min-width:520px){.hero-buy .btn{width:auto}}
.hero-terms{margin-top:12px;font-size:14px;color:var(--mute)}

.phone{margin:0;justify-self:center;width:min(300px,78vw)}
.phone-body{position:relative;aspect-ratio:9/16;border-radius:38px;padding:10px;background:linear-gradient(160deg,#2a3347,#10141d 40%,#1b2232);box-shadow:0 0 0 1px #2f3a50,0 40px 90px -30px #3d5bd9aa,0 20px 50px -20px #000}
.phone-video{width:100%;height:100%;object-fit:cover;border-radius:29px;background:#0b0e14}
.sound{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:9px 16px;border:1px solid #ffffff40;border-radius:999px;background:#07090dcc;color:var(--text);font:600 13px/1 'Instrument Sans',sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.sound[aria-pressed="true"]{border-color:var(--signal);color:var(--signal)}
.phone figcaption{margin-top:14px;text-align:center;font-size:13.5px;color:var(--mute)}

/* Antes x depois */
.contrast-grid{display:grid;gap:14px;margin-top:28px}
@media(min-width:760px){.contrast-grid{grid-template-columns:1fr 1fr}}
.contrast-side{padding:24px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.contrast-side h3{font-size:15px;color:var(--mute);margin-bottom:14px}
.contrast-side li{position:relative;padding:10px 0 10px 28px;border-top:1px solid #1a2130;font-size:16.5px;line-height:1.45;color:var(--soft)}
.contrast-side li:first-child{border-top:0}
.before li:before{content:'';position:absolute;left:4px;top:19px;width:10px;height:2px;background:#5d6778}
.after{border-color:#2f4a86;background:linear-gradient(180deg,#121a2c,var(--surface))}
.after h3{color:var(--signal)}
.after li{color:var(--text)}
.after li:before{content:'';position:absolute;left:3px;top:16px;width:10px;height:6px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}

/* Demo do painel: o momento principal */
.demo{padding-top:110px}
.window{margin-top:30px;border-radius:18px;overflow:hidden;border:1px solid #2c3546;background:#0b0e14;box-shadow:0 50px 120px -40px #3d5bd977,0 30px 60px -30px #000}
.window-bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:#121722;border-bottom:1px solid #222a39;font-size:13px;color:var(--mute)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#2d3647}
.window-title{flex:1}
.window-open{color:var(--soft);text-decoration:none;font-size:12.5px}
.window-open:hover{color:var(--signal)}
.window-view{position:relative;aspect-ratio:16/10;max-height:720px;width:100%}
@media(max-width:640px){.window-view{aspect-ratio:3/4}}
.window-view iframe,.window-fallback{position:absolute;inset:0;width:100%;height:100%;border:0}
.window-fallback{object-fit:cover;object-position:left top}
.window-view iframe{opacity:0;transition:opacity .4s}
.window-view.is-live iframe{opacity:1}
.panel-tabs{display:grid;gap:10px 28px;margin-top:22px}
@media(min-width:640px){.panel-tabs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.panel-tabs{grid-template-columns:repeat(3,1fr)}}
.panel-tabs li{font-size:15px;line-height:1.45;color:var(--mute)}
.panel-tabs b{display:block;color:var(--text);font-weight:600}

/* Pipeline: sequência real, numerada */
.how{display:grid;gap:30px}
@media(min-width:900px){.how{grid-template-columns:.8fr 1.2fr;gap:56px}.how-head{position:sticky;top:40px;align-self:start}}
.how-head p{margin-top:12px;font-size:17px;color:var(--soft)}
.pipeline{counter-reset:p;position:relative}
.pipeline:before{content:'';position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--signal),#2f4a86 60%,var(--wpp))}
.pipeline li{counter-increment:p;position:relative;padding:0 0 30px 62px}
.pipeline li:last-child{padding-bottom:0}
.pipeline li:before{content:counter(p);position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--night);border:2px solid #2f4a86;font-size:15px;font-weight:600;color:var(--signal)}
.pipeline li:last-child:before{border-color:var(--wpp);color:var(--wpp)}
.pipeline h3{font-size:20px;letter-spacing:-.02em;padding-top:8px}
.pipeline p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--soft);max-width:52ch}
.pipeline .you:before{background:var(--signal);border-color:var(--signal);color:#07090d}
.pipeline .you h3:after{content:'você decide';margin-left:10px;padding:3px 9px;border-radius:999px;background:#a8c4ff1f;color:var(--signal);font-size:12.5px;font-weight:600;letter-spacing:0;vertical-align:3px}

/* Prova */
.proof-card{position:relative;padding:clamp(26px,5vw,48px);border-radius:24px;border:1px solid #2f4a86;background:radial-gradient(600px 300px at 0 0,#3d5bd92e,transparent 70%),var(--surface)}
.proof-big{font-size:clamp(30px,5.4vw,52px);line-height:1.04;font-weight:600;letter-spacing:-.045em;max-width:16ch;margin-bottom:22px}
.proof-card p{font-size:17px;line-height:1.6;color:var(--soft);max-width:62ch}
.proof-card .proof-note{margin-top:14px;font-size:14.5px;color:var(--mute)}
.proof-note a{color:var(--signal)}

/* O que precisa + tabela de custo */
.needs-grid{display:grid;gap:24px;margin-top:28px}
@media(min-width:860px){.needs-grid{grid-template-columns:1.2fr .8fr;gap:40px}}
.needs-list li{padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--soft)}
.needs-list li:last-child{border-bottom:1px solid var(--line)}
.needs-list b{display:block;color:var(--text);font-size:16.5px}
.cost{width:100%;border-collapse:collapse;align-self:start;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.cost caption{text-align:left;padding:0 0 12px;font-size:15px;font-weight:600;color:var(--text)}
.cost th,.cost td{padding:14px 16px;border-top:1px solid var(--line);font-size:15px;text-align:left;vertical-align:top}
.cost tr:first-child th,.cost tr:first-child td{border-top:0}
.cost th{font-weight:400;color:var(--mute)}
.cost td{color:var(--text);font-weight:600}

/* Risco */
.risk-box{margin-top:26px;padding:clamp(22px,4vw,34px);border-radius:20px;border:1px solid #5a4a2e;background:linear-gradient(180deg,#1c170e,#14110b)}
.risk-box p{font-size:16.5px;line-height:1.6;color:#e7dcc6;max-width:66ch}
.risk-box p b{color:var(--warn)}
.risk-box ul{margin:18px 0;display:grid;gap:8px}
.risk-box li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5;color:#e7dcc6}
.risk-box li:before{content:'';position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--warn)}

/* Pra quem é */
.fit{display:grid;gap:14px}
@media(min-width:760px){.fit{grid-template-columns:1fr 1fr}}
.fit-col{padding:26px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.fit-col h2{font-size:22px;letter-spacing:-.025em;margin-bottom:14px}
.fit-col li{position:relative;padding:9px 0 9px 28px;font-size:16px;line-height:1.45;color:var(--soft)}
.yes{border-color:#1f6b3d}
.yes li:before{content:'';position:absolute;left:3px;top:15px;width:10px;height:6px;border-left:2px solid var(--wpp);border-bottom:2px solid var(--wpp);transform:rotate(-45deg)}
.no li:before{content:'×';position:absolute;left:3px;top:4px;font-size:20px;line-height:1.3;color:#ff9b94}

/* Oferta: duas opções lado a lado */
.offer h2{max-width:none}
.offer-grid{display:grid;gap:16px;margin-top:28px}
@media(min-width:860px){.offer-grid{grid-template-columns:1.1fr .9fr;align-items:stretch}}
.plan{display:flex;flex-direction:column;padding:clamp(24px,4vw,34px);border-radius:24px;border:1px solid var(--line);background:var(--surface)}
.plan h3{font-size:18px;color:var(--soft)}
.plan-price{margin:10px 0 18px;font-size:15px;color:var(--mute)}
.plan-price b{display:block;font-size:clamp(44px,7vw,60px);line-height:1;letter-spacing:-.05em;color:var(--text);margin-bottom:6px}
.plan ul{display:grid;gap:10px;margin-bottom:26px}
.plan li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.45;color:var(--soft)}
.plan li:before{content:'';position:absolute;left:3px;top:7px;width:10px;height:6px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;width:100%}
.plan-note{margin-top:12px;font-size:13.5px;color:var(--mute);text-align:center}
.plan-main{border-color:#3b5aa0;background:radial-gradient(500px 260px at 100% 0,#3d5bd933,transparent 70%),var(--surface-2);box-shadow:0 30px 80px -40px #3d5bd9aa}
.plan-install{border-color:#1f6b3d}
.plan-install li:before{border-color:var(--wpp)}

/* Perguntas */
.faq{max-width:780px}
.faq h2{margin-bottom:18px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;position:relative;padding:20px 40px 20px 0;font-size:17.5px;font-weight:600;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary:after{content:'';position:absolute;right:8px;top:26px;width:10px;height:10px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);transition:transform .2s}
details[open] summary:after{transform:rotate(-135deg);top:30px}
details p{padding:0 0 20px;font-size:16px;line-height:1.6;color:var(--soft);max-width:64ch}

/* Fechamento */
.closing{text-align:center;padding-bottom:20px}
.closing h2{margin:0 auto 26px;max-width:18ch}
.closing .hero-terms{margin-top:14px}

.foot{padding-top:64px;padding-bottom:calc(110px + env(safe-area-inset-bottom));text-align:center;font-size:13.5px;line-height:1.7;color:#7e8899}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text)}
.link-btn{all:unset;cursor:pointer;text-decoration:underline}
.link-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* Barra de compra fixa (celular e tablet) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#0b0e14f2;border-top:1px solid #2c3546;backdrop-filter:blur(12px);transform:translateY(110%);transition:transform .3s ease}
.buybar.is-on{transform:none}
.buybar-price{display:flex;flex-direction:column;font-size:12px;color:var(--mute);line-height:1.2}
.buybar-price b{font-size:22px;color:var(--text);letter-spacing:-.03em}
.buybar .btn{flex:1;min-height:50px;font-size:16px}
@media(min-width:900px){.buybar{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.buybar,.window-view iframe,summary:after{transition:none}
}
.window-view iframe{background:#0b0e14}
.window-view.is-live .window-fallback{display:none}

/* Cartão do Nathan, logo depois do topo */
.cred{padding-top:56px}
.cred-card{display:flex;gap:20px;align-items:flex-start;padding:24px;border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.cred-photo{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--night),0 0 0 5px #2f4a86}
.cred-name{font-size:17px;font-weight:600}
.cred-name span{display:block;margin-top:2px;font-size:13.5px;font-weight:400;color:var(--mute)}
.cred-text{margin-top:10px;font-size:16.5px;line-height:1.6;color:var(--soft);max-width:66ch}
.cred-text b{color:var(--text)}
.cred-note{margin-top:10px;font-size:14px;line-height:1.5;color:var(--mute)}
.cred-note a{color:var(--signal)}
@media(max-width:520px){.cred-card{flex-direction:column}}

/* Antes x depois: as duas cenas */
.mock{position:relative;height:200px;margin:4px 0 16px;border-radius:14px;overflow:hidden}
.mock-before{background:repeating-linear-gradient(0deg,#141924 0 27px,#181e2b 27px 28px)}
.note{position:absolute;padding:8px 11px;border-radius:6px;background:#2a2f3a;color:#aab3c2;font-size:13px;box-shadow:0 6px 14px #0006;white-space:nowrap}
.n1{left:8%;top:14%;transform:rotate(-4deg)}
.n2{right:8%;top:30%;transform:rotate(3deg)}
.n3{left:14%;top:56%;transform:rotate(2deg);text-decoration:line-through;color:#7d8696}
.n4{right:10%;bottom:10%;transform:rotate(-3deg);background:#3a2626;color:#e8b0aa}
.mock-after{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px;background:radial-gradient(300px 160px at 80% 0,#3d5bd92e,transparent 70%),#0f1626}
.ping{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#17213a;border:1px solid #2f4a86;font-size:13.5px}
.ping i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#25d36633;color:var(--wpp);font-style:normal;font-weight:600}
.ping span{display:flex;flex-direction:column;color:var(--soft)}
.ping b{font-size:12px;color:var(--wpp)}
.ping.queue{border-color:#2c3546;background:#141b2b}
.ping.queue i{background:#a8c4ff26;color:var(--signal)}
.ping.queue b{color:var(--signal)}
.mock-after small{position:absolute;right:12px;bottom:8px;font-size:11px;color:#5e6a7e}
/* entrada das notificações quando a seção aparece */
.js .contrast .ping{opacity:0;transform:translateY(10px)}
.contrast.play .ping{animation:ping-in .5s cubic-bezier(.2,.8,.2,1) forwards}
.contrast.play .p2{animation-delay:.5s}
.contrast.play .p3{animation-delay:1s}
@keyframes ping-in{to{opacity:1;transform:none}}

/* Depois que você compra */
.road-steps{display:grid;gap:12px;margin-top:28px;counter-reset:r}
@media(min-width:860px){.road-steps{grid-template-columns:repeat(4,1fr)}}
.road-steps li{position:relative;padding:22px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.road-steps li:last-child{border-color:#1f6b3d}
.road-when{display:inline-block;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:#a8c4ff1f;color:var(--signal);font-size:12.5px;font-weight:600}
.road-steps li:last-child .road-when{background:#25d3661f;color:var(--wpp)}
.road-steps h3{font-size:18px;letter-spacing:-.02em}
.road-steps p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--soft)}
.road-cta{margin-top:22px}

@media(prefers-reduced-motion:reduce){.js .contrast .ping{opacity:1;transform:none}.contrast.play .ping{animation:none}}

/* Garantia */
.guarantee-card{display:grid;gap:26px;align-items:center;padding:clamp(26px,5vw,44px);border-radius:24px;border:1px solid #2f4a86;background:radial-gradient(420px 260px at 0 50%,#3d5bd92b,transparent 70%),var(--surface)}
@media(min-width:760px){.guarantee-card{grid-template-columns:200px 1fr;gap:40px}}
.seal{width:min(200px,56vw);height:auto;justify-self:center;filter:drop-shadow(0 18px 40px #3d5bd955)}
.seal-ring-text{font:600 13.5px 'Instrument Sans',sans-serif;letter-spacing:.14em}
.seal-num{font:600 64px/1 'Instrument Sans',sans-serif;letter-spacing:-.04em}
.seal-days{font:600 16px 'Instrument Sans',sans-serif;letter-spacing:.06em}
.guarantee-copy h2{max-width:22ch}
.guarantee-copy p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--soft);max-width:58ch}
.guarantee-copy .guarantee-note{font-size:14.5px;color:var(--mute)}

/* Três dúvidas rápidas */
.quick{padding-top:72px}
.quick h2{font-size:clamp(22px,3.2vw,28px);max-width:none}
.quick-grid{display:grid;gap:12px;margin-top:18px}
@media(min-width:860px){.quick-grid{grid-template-columns:repeat(3,1fr)}}
.quick-item{padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.quick-item h3{font-size:16.5px;letter-spacing:-.015em}
.quick-item p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--soft)}
.quick-item a{color:var(--signal)}
