/* Relevo — ver MazyOS/identidade/design-guide.md */
:root{
  --breu:#0A0A0C; --grafite:#131316;
  --branco:#F5F5F7;
  --t85:rgba(245,245,247,.85); --t62:rgba(245,245,247,.62); --t42:rgba(245,245,247,.42);
  --l18:rgba(255,255,255,.18); --l10:rgba(255,255,255,.10); --l06:rgba(255,255,255,.06); --l03:rgba(255,255,255,.03);
  --ok:#7FD4A0; --warn:#E9C46A; --bad:#F08A8A;
  --sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --mono:"Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter:clamp(20px, 4vw, 40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--breu); scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action:manipulation}
body{margin:0; background:var(--breu); color:var(--branco); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent}
input, select, textarea{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
.sel{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
img, svg{-webkit-user-drag:none; user-select:none; pointer-events:none}
a img, a svg, button svg{pointer-events:none}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:500; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:1px solid var(--branco); outline-offset:3px; border-radius:4px}
.wrap{max-width:1200px; margin:0 auto; padding-inline:var(--gutter)}
.wrap > *, .cta-in > *, .split > *, .head2 > *{min-width:0}
.skip{position:absolute; left:-999px; top:8px; background:var(--branco); color:var(--breu); padding:10px 14px; border-radius:8px; z-index:100}
.skip:focus{left:8px}

em.s{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; font-size:1.08em}
.glow{text-shadow:0 0 28px rgba(255,255,255,.45)}
.label{font:500 11px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--t42)}
.lead{color:var(--t62); font-size:17px; line-height:1.6; max-width:56ch}
.eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; line-height:1.4; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--t62)}
.eyebrow b{color:var(--branco); font-weight:700}
.eyebrow i{width:1px; height:12px; background:var(--l18)}

.pill{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:500 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border:1px solid var(--l18); color:var(--branco); padding:13px 20px; border-radius:999px; white-space:nowrap; background:transparent; cursor:pointer; transition:background .2s, border-color .2s, transform .2s}
.pill:hover{border-color:rgba(255,255,255,.4); background:var(--l06)}
.pill.solid{background:var(--branco); color:var(--breu); border-color:var(--branco)}
.pill.solid:hover{background:#fff; box-shadow:0 0 30px rgba(255,255,255,.25)}
.pill.big{padding:17px 24px; font-size:12.5px; width:100%; white-space:normal; text-align:center; line-height:1.3}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(10,10,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--l06); padding-top:env(safe-area-inset-top, 0px)}
.nav-in{max-width:1200px; margin:0 auto; padding:14px var(--gutter); display:flex; align-items:center; gap:28px}
.logo{display:inline-flex; align-items:center; gap:9px; font:600 19px/1 var(--sans); letter-spacing:-.03em; text-decoration:none; color:var(--branco)}
.logo svg{width:24px; height:24px}
.links{display:flex; gap:26px; margin-left:auto}
.links a{font-size:14px; color:var(--t62); text-decoration:none; transition:color .2s}
.links a:hover{color:var(--branco)}

/* HERO */
.hero{position:relative; min-height:min(760px, 92vh); display:flex; align-items:center; isolation:isolate; overflow:hidden; background:radial-gradient(900px 420px at 50% -160px, rgba(255,255,255,.10), transparent 70%), var(--breu)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--l03) 1px, transparent 1px), linear-gradient(90deg, var(--l03) 1px, transparent 1px); background-size:88px 88px; mask-image:linear-gradient(180deg,#000,transparent 80%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%)}
.hero-img{position:absolute; z-index:-1; right:-4%; top:50%; transform:translate3d(0, calc(-50% + var(--py, 0px)), 0); will-change:transform; width:min(1300px, 108%); aspect-ratio:1376/768; -webkit-mask-image:linear-gradient(90deg, transparent 18%, #000 48%), linear-gradient(180deg, transparent 2%, #000 22%, #000 78%, transparent 98%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 18%, #000 48%), linear-gradient(180deg, transparent 2%, #000 22%, #000 78%, transparent 98%); mask-composite:intersect}
.hero-in{width:100%; padding-block:96px 120px}
.hero h1{font-size:clamp(46px, 7vw, 96px); line-height:.98; letter-spacing:-.045em; margin-top:26px; max-width:11ch}
.hero .sub{color:var(--t62); font-size:18px; line-height:1.55; margin-top:24px; max-width:44ch}
@media (prefers-reduced-motion: no-preference){
  .hero-in > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-in > *:nth-child(2){animation-delay:.08s}
  .hero-in > *:nth-child(3){animation-delay:.16s}
  .hero-in > *:nth-child(4){animation-delay:.24s}
  .hero-img{animation:fade 1.6s ease both}
  @keyframes rise{from{transform:translateY(14px); opacity:.001}}
  @keyframes fade{from{opacity:.001}}
}

/* SEÇÕES */
.sec{padding-block:clamp(88px, 12vw, 140px) 0}
.sec h2, .search-sec h2{font-size:clamp(34px, 4.6vw, 56px); line-height:1.02; letter-spacing:-.04em; margin-top:14px}
.head2{display:grid; grid-template-columns:1.1fr 1fr; gap:24px 64px; align-items:end; margin-bottom:48px}

/* BUSCA */
.search-sec{padding-block:clamp(72px, 10vw, 120px) 0; border-top:1px solid var(--l06)}
.search-sec .wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.search-head .lead{margin-top:20px}
.search{border:1px solid var(--l10); border-radius:18px; padding:22px; background:linear-gradient(180deg, var(--l03), transparent)}
.bar{display:flex; align-items:center; gap:12px; border:1px solid var(--l18); border-radius:999px; padding:14px 20px; font-size:17px; color:var(--branco)}
.bar svg{width:18px; height:18px; color:var(--t42); flex:none}
.caret{width:1.5px; height:20px; background:var(--branco); margin-left:-8px}
@media (prefers-reduced-motion: no-preference){ .caret{animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} }
.results{display:grid; gap:0; margin-top:14px}
.results li{display:grid; gap:9px; padding:16px 6px; border-bottom:1px solid var(--l06)}
.results li:last-child{border-bottom:0}
.r-t{height:10px; width:46%; border-radius:4px; background:rgba(255,255,255,.16)}
.r-d{height:7px; width:82%; border-radius:4px; background:rgba(255,255,255,.07)}
.results li:nth-child(2) .r-t{width:38%} .results li:nth-child(4) .r-t{width:52%}
.results .you{position:relative; margin-inline:-6px; padding-inline:12px; border-radius:10px; border:1px solid rgba(255,255,255,.55); box-shadow:0 0 24px rgba(255,255,255,.18), inset 0 0 18px rgba(255,255,255,.05)}
.r-q{font:500 15px/1 var(--sans); color:var(--branco)}

/* LADDER */
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.step{display:grid; gap:14px; align-content:start; border:1px solid var(--l10); border-radius:16px; padding:28px; text-decoration:none; background:linear-gradient(180deg, var(--l03), transparent); transition:border-color .25s, background .25s}
.step:hover{border-color:var(--l18); background:linear-gradient(180deg, rgba(255,255,255,.05), transparent)}
.step.core{border-color:var(--l18); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01))}
.step .k{display:flex; justify-content:space-between; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--t42)}
.step h3{font-size:28px; letter-spacing:-.03em; line-height:1.1; margin-top:18px}
.step p{color:var(--t62); font-size:15px}
.step .more{font:500 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--t85); margin-top:8px}

/* DIAGNÓSTICO */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:72px; align-items:center}
.split .lead{margin-top:20px}
.diag-visual{position:relative}
.diag-visual img{border-radius:18px; width:100%; aspect-ratio:4/3; object-fit:cover}
.diag{position:absolute; right:-24px; bottom:-40px; width:min(340px, 82%); background:rgba(20,20,24,.72); border:1px solid var(--l10); border-radius:14px; padding:16px 16px 12px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 30px 80px rgba(0,0,0,.6)}
.diag-top{display:flex; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--l06)}
.diag-top .n{font:500 14px/1.3 var(--sans)}
.diag-top .n small{display:block; font:400 11px/1.4 var(--mono); color:var(--t42); margin-top:3px}
.score{font:500 30px/1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; text-align:right}
.score small{display:block; font:400 10px/1.2 var(--mono); color:var(--t42); letter-spacing:.08em; margin-top:4px}
.diag ul{padding-top:6px}
.diag li{display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; padding-block:7px; font-size:12.5px; color:var(--t85); border-bottom:1px solid var(--l03)}
.diag li:last-child{border-bottom:0}
.diag li span:last-child{font:400 11px/1 var(--mono); color:var(--t42)}
.diag .ex{font:400 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--t42); margin-top:8px; text-align:right}
.dot{width:7px; height:7px; border-radius:50%}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.checks{display:grid; margin-top:28px; border-top:1px solid var(--l06)}
.checks li{display:grid; grid-template-columns:200px 1fr; gap:16px; padding-block:13px; border-bottom:1px solid var(--l06); font-size:15px}
.checks b{font-weight:500}
.checks span{color:var(--t62)}

/* SITES */
.sites-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center}
.phone{justify-self:center; width:min(300px, 100%); aspect-ratio:9/18.5; border-radius:44px; padding:10px; background:linear-gradient(145deg,#2a2a30,#0d0d10 40%,#1c1c21); box-shadow:0 0 0 1px var(--l10), 0 50px 100px rgba(0,0,0,.7), 0 0 80px rgba(255,255,255,.05)}
.screen{height:100%; border-radius:35px; overflow:hidden; background:#F4F4F2; color:#0A0A0C; display:flex; flex-direction:column; gap:14px; padding:22px 16px}
.ph-nav{display:flex; justify-content:space-between; align-items:center}
.ph-logo{width:64px; height:10px; border-radius:4px; background:#0A0A0C}
.ph-menu{width:18px; height:8px; border-top:2px solid #0A0A0C; border-bottom:2px solid #0A0A0C}
.ph-hero{display:grid; gap:9px; padding:18px 14px; border-radius:16px; background:#E7E9E6}
.ph-tag{font:500 8px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#6B6B70}
.ph-h{font:500 22px/1.05 var(--sans); letter-spacing:-.03em}
.ph-p{height:6px; border-radius:3px; background:rgba(10,10,12,.14)} .ph-p.short{width:62%}
.ph-btn{margin-top:6px; justify-self:start; font:600 9px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; background:#0A0A0C; color:#F4F4F2; padding:9px 12px; border-radius:999px}
.ph-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ph-cards span{height:54px; border-radius:12px; background:#fff; border:1px solid rgba(10,10,12,.08)}
.ph-map{flex:1; border-radius:14px; background:repeating-linear-gradient(35deg, #e3e5e1 0 10px, #eceeea 10px 20px); position:relative}
.ph-map i{position:absolute; left:50%; top:45%; width:12px; height:12px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#0A0A0C}
.feats{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.feats li{padding-block:20px; border-top:1px solid var(--l06)}
.fk{display:block; font-size:18px; font-weight:500; letter-spacing:-.015em}
.feats p{color:var(--t62); font-size:15px; margin-top:6px}

/* CRESCIMENTO */
.growth{position:relative; isolation:isolate; overflow:hidden; margin-top:clamp(88px, 12vw, 140px); padding-block:clamp(88px, 10vw, 130px); border-block:1px solid var(--l06)}
.growth-img{position:absolute; z-index:-1; right:-6%; top:50%; transform:translate3d(0, calc(-50% + var(--py, 0px)), 0); will-change:transform; width:min(1200px, 100%); -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 55%), linear-gradient(180deg, transparent 2%, #000 22%, #000 78%, transparent 98%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 20%, #000 55%), linear-gradient(180deg, transparent 2%, #000 22%, #000 78%, transparent 98%); mask-composite:intersect; opacity:.9}
.growth-in{max-width:1200px}
.growth-in .lead{margin-top:20px}
.growth h2{max-width:14ch}
.grow-list{display:grid; margin-top:36px; max-width:560px; border-top:1px solid var(--l10)}
.grow-list li{display:grid; gap:4px; padding-block:16px; border-bottom:1px solid var(--l10); background:linear-gradient(90deg, rgba(10,10,12,.85), rgba(10,10,12,.4))}
.grow-list b{font-weight:500; font-size:17px}
.grow-list span{color:var(--t62); font-size:15px}

/* NICHOS */
.niches{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.niche{border:1px solid var(--l06); border-radius:16px; overflow:hidden; background:var(--grafite); display:flex; flex-direction:column}
.niche .ph{position:relative; overflow:hidden; aspect-ratio:1}
.niche .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.niche:hover .ph img{transform:scale(1.05)}
.niche .ph::after{content:""; position:absolute; inset:-20% auto -20% 0; width:45%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 20%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 80%, transparent 100%); transform:translateX(-160%) skewX(-12deg); mix-blend-mode:screen; pointer-events:none}
.niche h3{font-size:19px; letter-spacing:-.02em; padding:20px 20px 0}
.niche p{color:var(--t62); font-size:14.5px; padding:8px 20px 22px}

/* PROCESSO */
.process{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--l10)}
.process li{padding:24px 24px 0 0; position:relative}
.process li::before{content:""; position:absolute; z-index:1; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--branco); border:1px solid var(--branco); box-shadow:0 0 12px rgba(255,255,255,.6)}
/* Trilha que se preenche: a luz percorre a linha e acende cada etapa ao passar (--d vem do script.js) */
.js .process::after{content:""; position:absolute; left:0; top:-1px; width:100%; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.45), #fff); box-shadow:0 0 10px rgba(255,255,255,.55); transform:scaleX(0); transform-origin:left center; transition:transform var(--dur, 2.6s) linear .35s}
.js .process.go::after{transform:none}
.js .process li::before{background:var(--breu); border-color:rgba(255,255,255,.3); box-shadow:none; transition:background .35s, border-color .35s, box-shadow .6s; transition-delay:calc(var(--d, 0s) + .35s)}
.js .process.go li::before{background:var(--branco); border-color:var(--branco); box-shadow:0 0 14px rgba(255,255,255,.75), 0 0 0 5px rgba(255,255,255,.06); animation:acende .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--d, 0s) + .35s)}
@keyframes acende{0%{transform:scale(1)} 40%{transform:scale(1.7)} 100%{transform:scale(1)}}
.js .process h3, .js .process .pk{transition:color .5s; transition-delay:calc(var(--d, 0s) + .35s)}
.js .process h3{color:var(--t62)}
.js .process.go h3{color:var(--branco)}
.js .process.go .pk{color:var(--t85)}
/* Bolinha final: maior, preenche devagar no sentido horário e pulsa ao completar */
@property --fill{syntax:"<percentage>"; inherits:false; initial-value:0%}
.js .process::before{content:""; position:absolute; z-index:2; right:-10px; top:-10px; width:19px; height:19px; border-radius:50%; box-sizing:border-box; border:1.5px solid rgba(255,255,255,.35); background:conic-gradient(var(--branco) var(--fill), var(--breu) 0); --fill:0%; transition:--fill var(--end, 1.6s) cubic-bezier(.45,0,.25,1) calc(var(--dur, 2.6s) + .35s), border-color .4s calc(var(--dur, 2.6s) + .35s), box-shadow .6s calc(var(--dur, 2.6s) + .35s + var(--end, 1.6s))}
.js .process.go::before{--fill:100%; border-color:var(--branco); box-shadow:0 0 22px rgba(255,255,255,.7), 0 0 0 7px rgba(255,255,255,.07); animation:fim .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--dur, 2.6s) + .35s + var(--end, 1.6s))}
@keyframes fim{0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)}}
/* Fim do ciclo: tudo apaga junto, suavemente, antes de recomeçar */
.js .process.go.fading::after{opacity:0; transition:opacity .6s}
.js .process.go.fading::before{--fill:0%; border-color:rgba(255,255,255,.35); box-shadow:none; transition:--fill .6s, border-color .6s, box-shadow .6s}
.js .process.go.fading li::before{background:var(--breu); border-color:rgba(255,255,255,.3); box-shadow:none; transition:background .6s, border-color .6s, box-shadow .6s; transition-delay:0s}
.js .process.go.fading h3{color:var(--t62); transition-delay:0s}
.js .process.go.fading .pk{color:var(--t42); transition-delay:0s}
.js .process.reset::after, .js .process.reset::before, .js .process.reset li::before, .js .process.reset h3, .js .process.reset .pk{transition:none!important; animation:none!important}
.pk{font:500 11px/1 var(--mono); letter-spacing:.12em; color:var(--t42)}
.process h3{font-size:21px; letter-spacing:-.02em; margin-top:14px}
.process p{color:var(--t62); font-size:15px; margin-top:8px}

/* FAQ */
.faq-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start}
.faq{border-top:1px solid var(--l10)}
.faq details{border-bottom:1px solid var(--l10)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding-block:22px; font-size:18px; font-weight:500; letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:300 22px/1 var(--sans); color:var(--t62); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--t62); padding-bottom:22px; max-width:62ch}

/* CTA */
.cta{position:relative; isolation:isolate; overflow:hidden; margin-top:clamp(88px, 12vw, 140px); padding-block:clamp(88px, 10vw, 130px); border-top:1px solid var(--l06); background:radial-gradient(700px 400px at 20% 110%, rgba(255,255,255,.06), transparent 70%)}
.cta .topo{position:absolute; z-index:-1; right:-10%; top:-10%; width:70%; height:130%; opacity:.9}
.cta-in{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.cta-in .lead{margin-top:20px}
.alt{margin-top:18px; color:var(--t42); font-size:14px}
.alt a{color:var(--t85)}
.form{display:grid; gap:14px; padding:28px; border:1px solid var(--l10); border-radius:18px; background:rgba(19,19,22,.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:grid; gap:8px}
.field label{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--t62)}
.field label span{text-transform:none; letter-spacing:0; color:var(--t42)}
.field input, .field select{width:100%; font:400 16px/1.2 var(--sans); color:var(--branco); background:var(--breu); border:1px solid var(--l10); border-radius:10px; padding:14px 14px; appearance:none; -webkit-appearance:none}
.field select{background-image:linear-gradient(45deg, transparent 50%, var(--t62) 50%), linear-gradient(135deg, var(--t62) 50%, transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px}
.field input::placeholder{color:rgba(245,245,247,.3)}
.field input:focus, .field select:focus{outline:none; border-color:rgba(255,255,255,.45)}
.field [aria-invalid="true"]{border-color:var(--bad)}
.err{color:var(--bad); font-size:14px}
.form .pill.big{margin-top:6px}

/* FOOTER */
.foot{border-top:1px solid var(--l06); padding-block:56px calc(28px + env(safe-area-inset-bottom, 0px))}
.foot-in{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
.foot-tag{color:var(--t42); font-size:14px; margin-top:14px}
.foot-cols{display:flex; gap:64px; flex-wrap:wrap}
.foot-cols div{display:grid; gap:10px; align-content:start}
.foot-cols .label{margin-bottom:4px}
.foot-cols a{color:var(--t62); text-decoration:none; font-size:14.5px}
.foot-cols a:hover{color:var(--branco)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:22px; border-top:1px solid var(--l06); font:400 12px/1.4 var(--mono); color:var(--t42)}

.wa-float{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:60; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--branco); color:var(--breu); box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.06); transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:26px; height:26px}

/* MOVIMENTO: com prefers-reduced-motion saem os deslocamentos (parallax, inclinação, subir); ficam fades, vídeo e linhas */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1; transform:none}
.js .niches.rv .niche, .js .ladder.rv .step, .js .process.rv li{opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s}
.js .rv.in .niche, .js .rv.in .step, .js .rv.in li{opacity:1; transform:none}
.js .rv.in > :nth-child(2){transition-delay:.08s} .js .rv.in > :nth-child(3){transition-delay:.16s} .js .rv.in > :nth-child(4){transition-delay:.24s}
.niches.in .niche .ph::after{animation:shine 1.6s cubic-bezier(.4,0,.2,1) .5s 1 both}
.niches.in .niche:nth-child(2) .ph::after{animation-delay:.7s} .niches.in .niche:nth-child(3) .ph::after{animation-delay:.9s} .niches.in .niche:nth-child(4) .ph::after{animation-delay:1.1s}
.niche:hover .ph::after{animation:shine 1.1s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes shine{from{transform:translateX(-160%) skewX(-12deg)} to{transform:translateX(330%) skewX(-12deg)}}
.diag-visual{perspective:1100px}
.diag-visual img, .diag{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.diag-visual img{transform:rotateX(calc(var(--ty, 0) * 4deg)) rotateY(calc(var(--tx, 0) * -5deg))}
.diag{transform:translate3d(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px), 0)}
.diag li{transition:opacity .5s, transform .5s}
.js .diag:not(.in) li{opacity:0; transform:translateX(-6px)}
.diag.in li:nth-child(2){transition-delay:.12s} .diag.in li:nth-child(3){transition-delay:.24s} .diag.in li:nth-child(4){transition-delay:.36s} .diag.in li:nth-child(5){transition-delay:.48s} .diag.in li:nth-child(6){transition-delay:.6s}
.cta .topo path{transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1)}
.cta .topo .tracer{animation:trace 7s linear infinite}
@keyframes trace{to{stroke-dashoffset:var(--len-neg)}}
@media (prefers-reduced-motion: reduce){
  .js .rv, .js .niches.rv .niche, .js .ladder.rv .step, .js .process.rv li, .js .diag:not(.in) li{transform:none}
  .diag-visual img, .diag{transform:none}
}
.vid-toggle{position:absolute; right:var(--gutter); bottom:24px; z-index:2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--l18); background:rgba(10,10,12,.5); color:var(--t85); cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .2s, color .2s}
.vid-toggle:hover{border-color:rgba(255,255,255,.45); color:var(--branco)}
.vid-toggle svg{width:14px; height:14px}
.hero-img img, .hero-img video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-img video{opacity:0; transition:opacity 1.2s ease}
.hero-img video.on{opacity:1}

/* RESPONSIVO */
@media (max-width:1024px){
  .niches{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .links{display:none}
  .process{grid-template-columns:1fr; border-top:0; border-left:1px solid var(--l10); margin-left:5px; row-gap:0}
  .process li{padding:0 0 32px 26px}
  .process li:last-child{padding-bottom:0}
  .process li::before{top:5px; left:-5px}
  .process h3{margin-top:6px}
  .js .process::before{right:auto; top:auto; left:-10px; bottom:-10px}
  .js .process::after{left:-1px; top:0; width:1px; height:100%; background:linear-gradient(180deg, rgba(255,255,255,.45), #fff); transform:scaleY(0); transform-origin:center top}
  .nav-in .pill{margin-left:auto}
  .head2, .search-sec .wrap, .split, .sites-grid, .faq-wrap, .cta-in{grid-template-columns:1fr; gap:40px}
  .head2{margin-bottom:36px}
  .ladder{grid-template-columns:1fr}
  .hero{min-height:0; flex-direction:column; align-items:stretch}
  .hero-img{position:relative; transform:translate3d(0, var(--py, 0px), 0); top:auto; right:auto; width:140%; max-width:none; margin:-40px -10% -90px -30%; -webkit-mask-image:radial-gradient(ellipse 34% 46% at 64% 46%, #000 55%, transparent 100%); mask-image:radial-gradient(ellipse 34% 46% at 64% 46%, #000 55%, transparent 100%); -webkit-mask-composite:source-over; mask-composite:add}
  .hero-in{padding-block:0 80px}
  .diag{right:12px; bottom:-60px}
  .diag-visual{margin-bottom:60px}
  .growth-img{position:relative; transform:translate3d(0, var(--py, 0px), 0); top:auto; right:auto; width:130%; max-width:none; margin:-40px -15% -60px; -webkit-mask-image:radial-gradient(ellipse 36% 48% at 66% 42%, #000 55%, transparent 100%); mask-image:radial-gradient(ellipse 36% 48% at 66% 42%, #000 55%, transparent 100%); -webkit-mask-composite:source-over; mask-composite:add}
  .growth{padding-top:0}
  .cta .topo{width:140%; right:-50%; top:0; opacity:.5}
}
@media (max-width:560px){
  .checks li{grid-template-columns:1fr; gap:2px}
  .feats{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .form{padding:20px}
  .nav-in .pill{padding:11px 14px; font-size:11px}
  .diag{position:relative; right:auto; bottom:auto; width:auto; margin:-60px 12px 0}
  .diag-visual{margin-bottom:0}
}

/* MOBILE: toques confortáveis e layouts de coluna única */
@media (max-width:900px){
  .hero-in .ctas{flex-direction:column; align-items:stretch; max-width:360px}
  .hero-in .ctas .pill{padding-block:16px}
  .foot-cols a{padding-block:6px}
  .faq summary{padding-block:20px; font-size:17px}
}
@media (max-width:640px){
  .eyebrow b, .eyebrow i{display:none}
  .hero h1{max-width:none}
  .hero .sub{font-size:17px}
  .niches{grid-template-columns:1fr; gap:12px}
  .niche{flex-direction:row; align-items:stretch}
  .niche .ph{width:112px; flex:none; aspect-ratio:auto}
  .niche h3{font-size:17px; padding:16px 16px 0}
  .niche p{font-size:14px; padding:6px 16px 16px}
  .niche > div{display:flex; flex-direction:column; justify-content:center}
  .vid-toggle{top:calc(var(--gutter) + 4px); bottom:auto; right:var(--gutter)}
  .wa-float{width:50px; height:50px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
  .cta-in{gap:32px}
  .foot-cols{gap:40px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}