:root{
  color-scheme: light;
  --navy:#0B1F3A; --blue:#1D4ED8; --sky:#60A5FA;
  --bg:#FFFFFF; --surface:#F3F6FB; --ink:#0B1F3A; --text:#33415C; --muted:#5B6B85; --line:#DCE3EE;
  --tile:#FFFFFF; --tile-on:#0B1F3A; --tile-on-text:#FFFFFF; --accent:#1D4ED8; --accent-text:#FFFFFF;
  --display:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:"Public Sans", "Segoe UI", system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#08162B; --surface:#0E2240; --ink:#F1F5FB; --text:#C9D4E5; --muted:#93A3BC; --line:#1F3657;
    --tile:#0E2240; --tile-on:#1D4ED8; --tile-on-text:#FFFFFF; --accent:#60A5FA; --accent-text:#08162B;
  }
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important}}
body{margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 var(--body)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--display); color:var(--ink); margin:0; letter-spacing:-0.02em}
h1{font-size:clamp(40px,6vw,68px); line-height:1.02; font-weight:700}
h2{font-size:clamp(28px,3.4vw,40px); line-height:1.1; font-weight:700}
h3{font-size:19px; line-height:1.3; font-weight:700}
p{margin:0}

/* Cabeçalho */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:700 27px/1 var(--display); letter-spacing:-0.035em}
.brand svg .base{fill:var(--ink)} .brand svg .mod{fill:var(--blue)}
@media (prefers-color-scheme: dark){.brand svg .mod{fill:var(--sky)}}
nav{display:flex; align-items:center; gap:28px}
nav a{color:var(--text); text-decoration:none; font-weight:500; font-size:15px}
nav a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:8px; font:600 16px/1 var(--body); text-decoration:none; border:2px solid var(--accent); background:var(--accent); color:var(--accent-text); cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
nav .btn{min-height:40px; padding:0 18px; font-size:15px}
@media (max-width:820px){nav a:not(.btn){display:none}}

/* Hero com o montador de módulos */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}}
.lead{font-size:20px; margin-top:22px; max-width:34em}
.pilot{margin-top:22px; padding:12px 16px; border-left:3px solid var(--accent); background:var(--surface); font-size:15px; max-width:34em}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

.builder{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px}
.builder h2{font-size:20px; letter-spacing:-0.01em}
.builder .hint{font-size:14px; color:var(--muted); margin-top:4px}
.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative; min-height:76px; text-align:left; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--tile); color:var(--ink); font:600 15px/1.25 var(--body); cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .18s}
.tile small{display:block; margin-top:4px; font-weight:400; font-size:12.5px; color:var(--muted); transition:color .18s}
.tile[aria-pressed="true"]{background:var(--tile-on); border-color:var(--tile-on); color:var(--tile-on-text); transform:translateY(-2px)}
.tile[aria-pressed="true"] small{color:#C9D7EE}
.tile.core{cursor:default}
.summary{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.summary p{font-size:15px}
.summary strong{color:var(--ink)}

/* Seções */
section{padding:88px 0; border-top:1px solid var(--line)}
.intro{max-width:40em; margin-top:14px; font-size:18px}
.modlist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; margin-top:40px}
@media (max-width:760px){.modlist{grid-template-columns:1fr}}
.modlist div{padding:18px 0; border-bottom:1px solid var(--line)}
.modlist p{margin-top:4px; font-size:16px}

.why{display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:56px; align-items:start}
@media (max-width:900px){.why{grid-template-columns:1fr; gap:24px}}
.pains{display:flex; flex-direction:column}
.pain{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; padding:20px 0; border-bottom:1px solid var(--line)}
.pain:first-child{border-top:1px solid var(--line)}
@media (max-width:560px){.pain{grid-template-columns:1fr; gap:6px}}
.pain .was{color:var(--muted); font-size:15px}
.pain .is{color:var(--ink); font-weight:500}

.steps{list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s; padding-top:16px; border-top:3px solid var(--ink)}
.steps li::before{content:counter(s); display:block; font:700 32px/1 var(--display); color:var(--accent); margin-bottom:10px}
.steps p{font-size:15px; margin-top:6px}

.cta{background:var(--navy); color:#DCE6F5; border-top:0}
.cta h2{color:#FFFFFF}
.cta .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px}
.cta p{max-width:36em; margin-top:12px; font-size:18px}
.cta .btn{background:#FFFFFF; border-color:#FFFFFF; color:var(--navy)}
footer{padding:28px 0; font-size:14px; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}

/* Página Sobre */
.page-hero{padding:72px 0 56px}
.page-hero .lead{max-width:38em}
.statement{font:700 clamp(24px,3vw,34px)/1.25 var(--display); color:var(--ink); letter-spacing:-0.015em; max-width:28em; margin-top:16px}
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px}
@media (max-width:860px){.duo{grid-template-columns:1fr; gap:40px}}
.kicker{font-size:15px; font-weight:600; color:var(--accent)}
nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:6px}

/* Página Planos */
.price{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 40px; margin-top:28px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.price .main{font:700 clamp(40px,6vw,64px)/1 var(--display); color:var(--ink); letter-spacing:-0.03em}
.price .main span{font:500 18px/1.4 var(--body); color:var(--muted); letter-spacing:0; margin-left:8px}
.price .extra{font:700 26px/1.2 var(--display); color:var(--ink)}
.price .extra span{font:500 16px/1.4 var(--body); color:var(--muted); margin-left:6px}
.price ul{margin:0; padding-left:20px; font-size:18px; line-height:1.9; color:var(--ink)}
.segs{margin-top:32px}
.seg{display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,2fr) auto; gap:24px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line)}
.seg:first-child{border-top:1px solid var(--line)}
.seg p{font-size:16px}
.seg .btn{min-height:40px; font-size:15px; padding:0 16px}
@media (max-width:820px){.seg{grid-template-columns:1fr; gap:8px; align-items:start}}
.note{margin-top:24px; font-size:15px; color:var(--muted); max-width:46em}

/* Menu do celular */
.menu-btn{display:none; align-items:center; justify-content:center; width:46px; height:46px; border-radius:8px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer}
.menu-btn svg{width:22px; height:22px}
@media (max-width:820px){
  .menu-btn{display:inline-flex}
  nav{position:absolute; top:72px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 20px; box-shadow:0 12px 24px rgba(11,31,58,.08)}
  nav.open{display:flex}
  nav a:not(.btn){display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:17px}
  nav .btn{margin-top:14px; min-height:48px}
  header .bar{position:relative}
}
/* Perguntas frequentes */
.faq{margin-top:32px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font:700 19px/1.35 var(--display); color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:700 24px/1 var(--body); color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px; max-width:46em}

/* Logotipo se montando */
.brand svg .mod{animation:snap .8s cubic-bezier(.2,.9,.3,1.3) .3s both}
@keyframes snap{from{transform:translate(12px,-12px);opacity:0}to{transform:none;opacity:1}}

/* Seções surgindo */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1; transform:none}

/* Cartões de módulo */
.modcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:40px}
@media (max-width:900px){.modcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.modcards{grid-template-columns:1fr}}
.modcard{text-align:left; cursor:pointer; padding:22px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; display:flex; flex-direction:column; gap:8px; transition:transform .2s, border-color .2s, box-shadow .2s}
.modcard:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 14px 30px rgba(11,31,58,.10)}
.modcard h3{display:flex; align-items:center; gap:10px}
.modcard h3::before{content:""; width:12px; height:12px; border-radius:3px; background:var(--accent)}
.modcard p{font-size:15.5px}
.modcard .go{margin-top:auto; padding-top:6px; font-weight:600; font-size:15px; color:var(--accent)}

/* Janela do módulo */
dialog#mod{border:0; padding:0; border-radius:18px; width:min(720px, calc(100% - 32px)); max-height:calc(100% - 40px); background:var(--bg); color:var(--text); box-shadow:0 30px 80px rgba(8,22,43,.35)}
dialog#mod::backdrop{background:rgba(8,22,43,.6); backdrop-filter:blur(3px)}
dialog#mod[open]{animation:dlgin .35s ease both}
@keyframes dlgin{from{opacity:0; transform:translateY(24px) scale(.97)}to{opacity:1; transform:none}}
.mod-art{background:var(--surface); border-bottom:1px solid var(--line); padding:18px 18px 8px}
.mod-body{padding:24px 28px 28px}
.mod-body h3{font-size:28px}
.mod-desc{margin-top:8px; font-size:17px}
.mod-list{margin:16px 0 22px; padding-left:20px}
.mod-list li{margin:6px 0}
.mod-close{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:22px; cursor:pointer}

/* Ilustrações animadas */
.anim{display:block; width:100%; height:auto; max-height:260px}
.anim .c-navy{fill:var(--ink)} .anim .c-blue{fill:#1D4ED8} .anim .c-sky{fill:#60A5FA} .anim .c-red{fill:#E5484D} .anim .c-bg{fill:var(--surface)}
.anim .axis{stroke:var(--muted); stroke-width:2; opacity:.6}
.anim .rope{stroke:var(--muted); stroke-width:1.5}
.anim .lbl{fill:var(--ink); font:600 12.5px var(--body)}
.anim .t{fill:var(--muted); font:500 10.5px var(--body)} .anim .v{fill:var(--ink); font:700 13px var(--display)}
.anim .ic{fill:#fff; font:700 11px var(--body)}
.anim .card{fill:var(--bg); stroke:var(--line); stroke-width:1.5}
.anim .card.hi{stroke:#1D4ED8; stroke-width:2.5}
.anim .doc{stroke:var(--line); stroke-width:6; stroke-linecap:round}
.anim .line-blue{fill:none; stroke:#1D4ED8; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.anim .chk{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.anim .stp{fill:none; stroke:#16A34A; stroke-width:3} .anim .stt{fill:#16A34A; font:800 15px var(--display); letter-spacing:.08em}
.anim .sea{fill:#60A5FA; opacity:.35}
.anim .gear{fill:none; stroke:var(--ink); stroke-width:14; stroke-dasharray:8 6}
.anim .gear.sm{stroke:#1D4ED8; stroke-width:10; stroke-dasharray:6 5}
.anim .belt{fill:var(--line)} .anim .rack{fill:none; stroke:var(--muted); stroke-width:2; opacity:.6}
.anim .scan{fill:#E5484D; opacity:.8}

.anim *{transform-box:fill-box}
.anim .fly{transform-origin:center; animation:fly .8s cubic-bezier(.2,.9,.3,1.2) var(--d,0s) both}
.anim .grow{transform-origin:bottom; animation:grow .7s ease-out var(--d,0s) both}
.anim .draw{stroke-dasharray:var(--len); animation:draw 1s ease-out var(--d,0s) both}
.anim .pop{transform-origin:center; animation:pop .5s ease-out var(--d,0s) both}
.anim .fade{animation:fade .6s ease var(--d,0s) both}
.anim .drop{animation:drop .6s cubic-bezier(.3,1.3,.5,1) var(--d,0s) both}
.anim .slide{animation:slide .6s ease-out var(--d,0s) both}
.anim .rise{transform-origin:bottom; animation:rise .5s ease-out var(--d,0s) both}
.anim .stamp{transform-origin:center; animation:stamp .55s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both}
.anim .sail{animation:sail 2.2s cubic-bezier(.25,.8,.3,1) both}
.anim .bob{animation:bob 2.4s ease-in-out 2.2s infinite}
.anim .waves{animation:waves 3s linear infinite}
.anim .hook{animation:hook 2.4s ease-in-out 1.2s infinite}
.anim .spin{animation:spin 4s linear infinite} .anim .spin.rev{animation-direction:reverse; animation-duration:2.8s}
.anim .conv{animation:conv 4s linear infinite}
.anim .scan{animation:scan 1.8s ease-in-out 2}
.anim .bell{animation:shake 1s ease 1.1s 2}
.anim .pulse{transform-origin:center; animation:pulse 1.2s ease 1.2s infinite}

@keyframes fly{from{transform:translate(var(--fx),var(--fy)) rotate(-25deg); opacity:0}to{transform:none; opacity:1}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(0); opacity:0}70%{transform:scale(1.18); opacity:1}100%{transform:scale(1); opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drop{from{transform:translateY(-150px); opacity:0}to{transform:none; opacity:1}}
@keyframes slide{from{transform:translateX(-60px); opacity:0}to{transform:none; opacity:1}}
@keyframes rise{from{transform:translateY(-60px) scaleY(.6); opacity:0}to{transform:none; opacity:1}}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg); opacity:0}60%{transform:scale(.94) rotate(-8deg); opacity:1}100%{transform:rotate(-8deg); opacity:1}}
@keyframes sail{from{transform:translateX(-260px)}to{transform:translateX(0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes waves{from{transform:translateX(0)}to{transform:translateX(-40px)}}
@keyframes hook{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes conv{from{transform:translateX(0)}to{transform:translateX(300px)}}
@keyframes scan{0%,100%{transform:translateY(0)}50%{transform:translateY(94px)}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.35); opacity:.6}}

@media (prefers-reduced-motion: reduce){
  .anim *, .brand svg .mod, dialog#mod[open]{animation:none!important}
  .js .reveal{opacity:1; transform:none; transition:none}
}
.anim .spin, .anim .bell{transform-box:view-box}

nav .btn.ghost{margin-right:-12px}
@media (max-width:820px){nav .btn.ghost{margin-right:0; margin-top:14px}}