@property --spin{syntax:"<angle>"; inherits:true; initial-value:0deg}
@property --tilt{syntax:"<angle>"; inherits:true; initial-value:-40deg}

:root{
  --black:#09090B; --black-2:#111116; --navy:#061233;
  --blue:#1B2CDB; --blue-hi:#6E7BFF;
  --cream:#FAF8EA; --paper:#F4F4F1; --ink:#0B0C10;
  --mute-d:#A3A5B1; --mute-l:#565966;
  --line-d:rgb(250 248 234 / .12); --line-l:rgb(11 12 16 / .12);
  --hdr:72px; --gut:clamp(16px, 4vw, 40px); --max:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--hdr); -webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; overflow-x:clip; background:var(--black); color:var(--cream); font:350 1.0625rem/1.6 "Outfit", system-ui, sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit}
svg{display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue-hi); outline-offset:3px; border-radius:6px}
.wrap{width:min(100% - 2 * var(--gut), var(--max)); margin-inline:auto}

/* ---------- Tipografia da marca ---------- */
.kicker{display:inline-flex; align-items:center; gap:.8em; font-size:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase}
.kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue-hi); flex:none}
.h2{font-size:clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem); font-weight:600; line-height:1.02; letter-spacing:-.035em; text-wrap:balance}
.lead{color:var(--mute-d); font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width:34rem}

/* Palavras que sobem (títulos) */
.wm{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em}
.js [data-split] .w{display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease) calc(var(--i) * 60ms + var(--d0, 0ms))}
.js [data-split].is-in .w{transform:none}

/* Textos lidos com a rolagem */
.read{position:relative; font-size:clamp(1.8rem, 1rem + 3.3vw, 3.7rem); font-weight:500; line-height:1.12; letter-spacing:-.025em; text-wrap:pretty}
.js .read .w{opacity:clamp(.14, calc(var(--r, 0) * (var(--n) + 5) - var(--i)), 1)}
.read mark{position:relative; isolation:isolate; background:none; color:inherit; padding:0 .12em; margin:0 -.04em}
.read mark::before{content:""; position:absolute; inset:.1em 0 .02em; z-index:-1; background:var(--blue); transform-origin:left; transform:scaleX(clamp(0, calc((var(--r, 0) - .78) * 6), 1))}

/* Revelação simples (listas e grupos) */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i, 0) * 110ms)}
.js [data-reveal].is-in{opacity:1; transform:none}

/* ---------- Logo ---------- */
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:1.3rem; font-weight:250; letter-spacing:-.02em}
.logo b{font-weight:650}
.mark{--rim:rgb(250 248 234 / .9); width:22px; height:22px; border-radius:50%; background:var(--black); box-shadow:0 0 0 1.5px var(--rim), 0 0 10px 1px rgb(250 248 234 / .35); flex:none}

/* ---------- Botões ---------- */
.pill{
  --pbg:var(--cream); --pfg:var(--ink); --pbd:transparent;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.9em;
  min-height:52px; padding:0 1.7em; border-radius:999px; border:1px solid var(--pbd);
  background:var(--pbg); color:var(--pfg); text-decoration:none; cursor:pointer;
  font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.pill svg{width:16px; height:16px; flex:none; transition:transform .35s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill:hover svg{transform:translateX(4px)}
.pill::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .7) 50%, transparent 70%); transform:translateX(-120%); transition:transform .9s var(--ease)}
.pill:hover::after{transform:translateX(120%)}
.pill--ghost{--pbg:transparent; --pfg:currentColor; --pbd:rgb(250 248 234 / .3)}
.pill--ghost:hover{--pbd:rgb(250 248 234 / .7)}
.pill--ghost::after{display:none}
.pill--sm{min-height:42px; padding:0 1.3em; font-size:.72rem}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Header ---------- */
.hdr{--fg:var(--cream); --bg:rgb(9 9 11 / .62); --edge:rgb(250 248 234 / .08);
  position:fixed; inset:0 0 auto; z-index:50; height:var(--hdr); color:var(--fg); transition:background .4s, box-shadow .4s, color .4s}
.hdr[data-theme="blue"]{--bg:rgb(27 44 219 / .72); --edge:rgb(250 248 234 / .14)}
.hdr[data-theme="light"]{--fg:var(--ink); --bg:rgb(244 244 241 / .82); --edge:var(--line-l)}
.hdr[data-theme="light"] .mark{--rim:var(--ink); box-shadow:0 0 0 1.5px var(--rim)}
.hdr[data-theme="light"] .pill{--pbg:var(--ink); --pfg:var(--cream)}
.hdr.is-solid{background:var(--bg); box-shadow:0 1px 0 var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4)}
.hdr__in{height:100%; display:flex; align-items:center; gap:32px}
.nav{display:flex; gap:30px; margin-left:auto; font-size:.9375rem}
.nav a{position:relative; text-decoration:none; opacity:.75; transition:opacity .25s}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1)}

/* ---------- Hero: o eclipse ---------- */
.hero{position:relative; height:180vh; height:180svh}
.hero__pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.orbit{--cx:73%; --cy:52%; --d:min(50vw, 74svh);
  position:absolute; left:calc(var(--cx) - var(--d) / 2); top:calc(var(--cy) - var(--d) / 2); width:var(--d); aspect-ratio:1; pointer-events:none}
.eclipse{position:absolute; inset:0; border-radius:50%; will-change:transform;
  transform:translate(calc(var(--dx, 0px) * var(--e, 0)), calc(var(--dy, 0px) * var(--e, 0))) scale(var(--sc, 1));
  background:radial-gradient(circle at 50% 50%, var(--black) 64%, #0E0E13 100%);
  box-shadow:0 0 0 1px rgb(250 248 234 / .5), 0 0 28px 2px rgb(250 248 234 / .16), 0 0 120px 18px rgb(110 123 255 / .10), inset 0 0 50px rgb(250 248 234 / .06);
  transition:--tilt 1.4s var(--ease)}
.eclipse i{position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(from calc(var(--spin) + var(--tilt)), transparent 0deg 250deg, rgb(255 253 240 / .95) 322deg, transparent 360deg)}
.eclipse .rim{-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px))}
.eclipse .halo{inset:-6%; filter:blur(22px); opacity:.55;
  -webkit-mask:radial-gradient(farthest-side, transparent 80%, #000 88%, transparent 100%); mask:radial-gradient(farthest-side, transparent 80%, #000 88%, transparent 100%)}
@media (hover:none){ .eclipse{animation:spin 26s linear infinite} }
@keyframes spin{to{--spin:360deg}}

.hero__in{position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:var(--hdr);
  opacity:calc(1 - var(--e, 0) * 2.4); transform:translateY(calc(var(--e, 0) * -70px))}
.hero__copy{max-width:600px}
.hero h1{font-size:clamp(2.7rem, 1.35rem + 5.3vw, 6rem); font-weight:600; line-height:.98; letter-spacing:-.04em; text-wrap:balance}
.hero .kicker{margin-top:26px}
.hero .lead{margin-top:22px}
.hero .cta-row{margin-top:34px}
.hero__hint{position:absolute; left:var(--gut); bottom:28px; display:flex; align-items:center; gap:14px; color:var(--mute-d); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; opacity:calc(1 - var(--e, 0) * 8)}
.hero__hint span{position:relative; width:1px; height:38px; overflow:hidden; background:rgb(250 248 234 / .2)}
.hero__hint span::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--cream); animation:drip 2s var(--ease) infinite}
@keyframes drip{to{top:100%}}

/* Entrada da página */
.js .eclipse{opacity:0; scale:.9; filter:brightness(2.2)}
.js.is-ready .eclipse{opacity:1; scale:1; filter:none; transition:opacity 1.6s var(--ease) .15s, scale 2.2s var(--ease) .15s, filter 2.4s var(--ease) .15s, --tilt 1.4s var(--ease)}
.js .hero [data-fade]{opacity:0; transform:translateY(14px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d0)}
.js.is-ready .hero [data-fade]{opacity:1; transform:none}

/* ---------- Seções ---------- */
.sec{position:relative; padding-block:clamp(96px, 12vw, 170px)}
.light{background:var(--paper); color:var(--ink)}
.light .lead{color:var(--mute-l)}
.blue{background:var(--blue); color:var(--cream)}
.grain{isolation:isolate}
.grain::after{content:""; position:absolute; inset:0; z-index:-1; background:var(--grain); opacity:.22; mix-blend-mode:overlay; pointer-events:none}
.rings{background-image:repeating-radial-gradient(circle at 100% 0, transparent 0 34px, rgb(11 12 16 / .045) 34px 35px)}

.statement{padding-top:clamp(24px, 4vw, 60px)}
.statement__in{display:grid; gap:clamp(56px, 8vw, 110px)}
.asks{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; list-style:none; padding:0}
.asks li{display:inline-flex; align-items:center; min-height:38px; padding:0 18px; border:1px solid rgb(250 248 234 / .35); border-radius:999px; font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase}

.site__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:center}
.site__sub{font-size:clamp(1.3rem, 1.1rem + .8vw, 1.8rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; margin-bottom:26px}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.checks li{display:flex; align-items:center; gap:16px; padding:12px 22px 12px 12px; border-radius:999px; background:#fff; font-size:1.05rem; font-weight:450;
  box-shadow:0 1px 0 rgb(11 12 16 / .04), 0 12px 28px -18px rgb(11 12 16 / .35)}
.chk{width:34px; height:34px; padding:8px; border-radius:50%; background:var(--blue); color:#fff; flex:none;
  stroke-dasharray:24; stroke-dashoffset:0; transition:stroke-dashoffset .6s var(--ease) calc(var(--i, 0) * 110ms + .35s)}
.js :not(.is-in) > .chk{stroke-dashoffset:24}

/* ---------- Soluções (carrossel) ---------- */
.sol{padding:0; counter-reset:sol}
.sol__pin{display:flex; flex-direction:column; justify-content:center; gap:28px; padding-block:clamp(88px, 10vw, 130px) 56px}
.sol__track{display:flex; align-items:stretch; gap:22px; padding-inline:var(--gut); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); scrollbar-width:none; overscroll-behavior-x:contain}
.sol__track::-webkit-scrollbar{display:none}
.sol__track > *{flex:none; scroll-snap-align:start}
.sol__meta{display:flex; align-items:center; gap:20px; font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase}
.sol__count{font-variant-numeric:tabular-nums; white-space:nowrap}
.sol__bar{flex:1; height:2px; border-radius:2px; background:rgb(250 248 234 / .25); overflow:hidden}
.sol__bar i{display:block; height:100%; background:var(--cream); transform-origin:left; transform:scaleX(var(--p, 0)); transition:transform .3s var(--ease)}
.sol__hint{display:inline-flex; align-items:center; gap:10px; white-space:nowrap}
.sol__hint::before{content:"Arraste"}
.sol__hint svg{width:16px; height:16px; animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(5px)}}

.panel{position:relative; width:min(84vw, 420px); display:flex; flex-direction:column; justify-content:center; gap:22px; padding:8px 4px}
.panel .h2{font-size:clamp(2.2rem, 1.3rem + 3vw, 4rem)}
.cover__ring{position:absolute; left:-46%; bottom:-98%; width:110%; aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:-1;
  box-shadow:0 0 0 1.5px rgb(250 248 234 / .75), 0 0 36px 4px rgb(250 248 234 / .22), inset 0 0 36px rgb(250 248 234 / .08)}
.sum p{max-width:30rem; color:rgb(250 248 234 / .82)}
.tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.tags span{display:inline-flex; align-items:center; min-height:38px; padding:0 18px; border-radius:999px; background:var(--cream); color:var(--ink); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.tags i{font-style:normal; font-weight:300; font-size:1.2rem; opacity:.8}

.slide{--bg:var(--paper); --fg:var(--ink); --mu:var(--mute-l); --ln:var(--line-l); --vbg:#E7E7E2; --close:var(--blue);
  counter-increment:sol; width:min(86vw, 420px); display:grid; grid-template-rows:auto 1fr; gap:22px; padding:14px; border-radius:26px; background:var(--bg); color:var(--fg);
  box-shadow:0 40px 70px -40px rgb(3 8 60 / .7)}
.slide--dark{--bg:var(--black); --fg:var(--cream); --mu:var(--mute-d); --ln:var(--line-d); --vbg:var(--black-2); --close:var(--cream)}
.slide__body{display:flex; flex-direction:column; padding:4px 10px 12px}
.slide__label{font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase}
.slide__label::before{content:""; display:inline-block; vertical-align:middle; width:6px; height:6px; margin:-2px .8em 0 0; border-radius:50%; background:var(--blue-hi)}
.slide__num{font-variant-numeric:tabular-nums}
.slide__num::before{content:"Solução " counter(sol, decimal-leading-zero) " · "}
.slide h3{margin:14px 0 12px; font-size:clamp(1.9rem, 1.3rem + 1.6vw, 2.9rem); font-weight:600; line-height:1; letter-spacing:-.035em}
.slide__sub{font-size:1.15rem; font-weight:500; line-height:1.3; margin-bottom:10px}
.slide__desc{color:var(--mu); max-width:40ch}
.slide__list{list-style:none; margin:18px 0 0; padding:0}
.slide__list li{display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--ln); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase}
.slide__list li::before{content:""; width:7px; height:7px; background:var(--blue-hi); rotate:45deg; flex:none}
.slide__close{margin-top:18px; padding-top:16px; border-top:1px solid var(--ln); color:var(--close); font-size:1.15rem; font-weight:600; line-height:1.25; letter-spacing:-.01em}
.slide__cta{display:inline-flex; align-items:center; gap:10px; margin-top:18px; align-self:flex-start; text-decoration:none; font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:4px}
.slide__cta svg{width:14px; height:14px; transition:transform .35s var(--ease)}
.slide__cta:hover svg{transform:translateX(4px)}

/* Ilustrações animadas dos cards */
.vis{position:relative; min-height:210px; border-radius:18px; overflow:hidden; display:grid; place-items:center; padding:22px; background:var(--vbg)}
.slide--light .vis{background-image:repeating-radial-gradient(circle at 0 100%, transparent 0 26px, rgb(11 12 16 / .04) 26px 27px)}
.b{display:block; width:var(--w); height:var(--h, 8%); flex:none; border-radius:4px; background:#E2E2DC; transform-origin:left; transition:transform .8s var(--ease) calc(var(--k) * 90ms + 150ms)}
.b--blue{background:var(--blue)}
.b--ink{background:var(--ink); border-radius:99px}
/* Estado inicial das animações: só esconde quando há JS e o card ainda não apareceu */
.js .slide:not(.is-live) .b{transform:scaleX(0); transition-delay:0s}
.js .slide:not(.is-live) .phone{opacity:0; transform:translateY(26px); transition-delay:0s}
.js .slide:not(.is-live) .feed__grid i{opacity:0; scale:.6; transition-delay:0s}
.js .slide:not(.is-live) .bub{opacity:0; transform:translateY(12px) scale(.96); transition-delay:0s}
.js .slide:not(.is-live) .row i::after{transform:scaleX(0); transition-delay:0s}
.js .slide:not(.is-live) .row svg{opacity:0; scale:.4; transition-delay:0s}
.win{position:relative; width:84%; aspect-ratio:16/10; display:flex; flex-direction:column; gap:6%; padding:11% 8% 8%; background:#fff; border-radius:12px; box-shadow:0 24px 40px -24px rgb(11 12 16 / .45)}
.win::before{content:""; position:absolute; top:4.5%; left:4%; width:12%; height:4%; background:radial-gradient(circle, #CFCFC9 0 42%, transparent 48%) 0 50% / 33.33% 100% repeat-x}
.phone{position:absolute; right:6%; bottom:6%; width:22%; aspect-ratio:9/18; display:flex; flex-direction:column; gap:7%; padding:30% 11% 11%; background:#fff; border:3px solid var(--ink); border-radius:14px;
  box-shadow:0 20px 30px -16px rgb(11 12 16 / .5); transition:opacity .8s var(--ease) .55s, transform .8s var(--ease) .55s}

.feed{width:min(78%, 250px); display:grid; gap:12px}
.feed__head{display:flex; align-items:center; gap:10px}
.feed__head .mark{width:30px; height:30px}
.feed__head i{display:block; height:6px; border-radius:3px; background:rgb(250 248 234 / .25)}
.feed__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:5px}
.feed__grid i{aspect-ratio:1; border-radius:6px; background:#23232B; transition:opacity .5s var(--ease), scale .6s var(--ease); transition-delay:calc(var(--k) * 80ms + 150ms)}
.feed__grid .t-b{background:var(--blue)}
.feed__grid .t-c{background:var(--cream)}
.feed__grid .t-m{background:radial-gradient(circle, var(--black) 0 42%, rgb(250 248 234 / .9) 43% 45%, transparent 47%), var(--black)}

.chat{width:min(100%, 330px); display:flex; flex-direction:column; gap:8px; font-size:.82rem; line-height:1.35}
.bub{max-width:80%; padding:9px 13px; border-radius:16px 16px 16px 4px; background:#fff; color:var(--ink); box-shadow:0 6px 16px -10px rgb(11 12 16 / .45);
  transform-origin:left bottom; transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--k) * 650ms + 200ms)}
.bub--auto{align-self:flex-end; transform-origin:right bottom; border-radius:16px 16px 4px 16px; background:var(--blue); color:#fff}
.bub--auto::before{content:"Resposta automática"; display:block; margin-bottom:3px; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72}
.bub .opts{display:flex; gap:6px; margin-top:8px}
.bub .opts b{padding:3px 10px; border-radius:999px; background:var(--cream); color:var(--ink); font-weight:500; font-size:.75rem}

.stat{width:min(100%, 320px); display:grid; gap:14px; font-size:.82rem}
.stat__top{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line-d); font-weight:500}
.stat__top span{width:9px; height:9px; border-radius:50%; background:var(--blue-hi); box-shadow:0 0 0 0 rgb(110 123 255 / .6); animation:ping 2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgb(110 123 255 / 0)} 100%{box-shadow:0 0 0 0 rgb(110 123 255 / 0)}}
.row{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) 22px; align-items:center; gap:12px; color:var(--mute-d)}
.row i{height:4px; border-radius:2px; background:rgb(250 248 234 / .12); position:relative; overflow:hidden}
.row i::after{content:""; position:absolute; inset:0; background:var(--blue-hi); transform-origin:left; transition:transform 1s var(--ease) calc(var(--k) * 400ms + 200ms)}
.row svg{width:22px; height:22px; padding:5px; border-radius:50%; background:var(--blue); color:#fff; transition:opacity .4s var(--ease), scale .5s var(--ease); transition-delay:calc(var(--k) * 400ms + 1.1s)}

/* ---------- Contato ---------- */
.cta{overflow:hidden; padding-bottom:clamp(110px, 14vw, 190px)}
.dome{--size:max(1100px, 150vw); position:absolute; left:50%; bottom:calc(var(--size) * -.8); width:var(--size); aspect-ratio:1; translate:-50% 0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgb(110 123 255 / .95) 0 1.4px, transparent 1.9px) 0 0 / 12px 12px;
  -webkit-mask:radial-gradient(closest-side, transparent 72%, #000 90%, rgb(0 0 0 / .5) 96%, transparent 100%); mask:radial-gradient(closest-side, transparent 72%, #000 90%, rgb(0 0 0 / .5) 96%, transparent 100%);
  animation:breathe 10s ease-in-out infinite}
.dome::before{content:""; position:absolute; inset:6%; border-radius:50%; box-shadow:0 0 160px 40px rgb(27 44 219 / .4)}
@keyframes breathe{50%{scale:1.04; opacity:.8}}
.cta__grid{position:relative; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(40px, 6vw, 80px); align-items:start}
.cta .h2{margin-top:22px}
.cta .lead{margin-top:20px}
.tel{display:inline-block; margin:32px 0 26px; text-decoration:none; font-size:clamp(2rem, 1rem + 3.8vw, 3.8rem); font-weight:500; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(var(--cream), var(--cream)) 0 100% / 0 1.5px no-repeat; padding-bottom:10px; transition:background-size .6s var(--ease)}
.tel:hover{background-size:100% 1.5px}
.builder{padding:clamp(22px, 3vw, 34px); border-radius:26px; border:1px solid var(--line-d); background:rgb(17 17 22 / .72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.builder__t{font-size:1.4rem; font-weight:600; letter-spacing:-.02em; margin-bottom:22px}
.builder fieldset{border:0; margin:0; padding:0}
.builder legend,.field span{display:block; margin-bottom:12px; font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-d)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--line-d); cursor:pointer; font-size:.9375rem; transition:background .25s, color .25s, border-color .25s}
.chip span:hover{border-color:rgb(250 248 234 / .45)}
.chip input:checked + span{background:var(--cream); border-color:transparent; color:var(--ink); font-weight:500}
.chip input:focus-visible + span{outline:2px solid var(--blue-hi); outline-offset:3px}
.field{display:block; margin:24px 0}
.field input{width:100%; min-height:52px; padding:0 18px; border-radius:999px; border:1px solid var(--line-d); background:rgb(0 0 0 / .3); color:var(--cream); font:inherit; font-size:16px}
.field input::placeholder{color:rgb(250 248 234 / .35)}
.field input:focus{outline:none; border-color:var(--blue-hi)}
.builder .pill{width:100%}

.ftr{background:#050507; color:var(--mute-d); padding:44px 0 calc(44px + env(safe-area-inset-bottom)); font-size:.9375rem}
.ftr__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 36px}
.ftr .logo{color:var(--cream)}
.ftr nav{display:flex; gap:26px}
.ftr nav a{text-decoration:none}
.ftr nav a:hover{color:var(--cream)}

.fab{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--cream); color:var(--ink);
  box-shadow:0 14px 34px rgb(0 0 0 / .35); opacity:0; transform:translateY(130%) scale(.8); pointer-events:none; transition:opacity .4s var(--ease), transform .5s var(--ease)}
.fab svg{width:26px; height:26px}
.fab.is-on{opacity:1; transform:none; pointer-events:auto}

/* ---------- Desktop: carrossel preso à rolagem ---------- */
@media (min-width:900px) and (min-height:600px){
  .sol{height:var(--sol-h, auto)}
  .sol__pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; padding-block:calc(var(--hdr) + 12px) 36px}
  .sol__track{overflow:visible; scroll-snap-type:none; gap:28px; padding-inline:max(var(--gut), (100vw - var(--max)) / 2); transform:translate3d(var(--sx, 0px), 0, 0); will-change:transform}
  .sol__meta{width:min(100% - 2 * var(--gut), var(--max)); margin-inline:auto}
  .sol__hint::before{content:"Role para ver"}
  .panel{width:min(600px, 50vw)}
  .sum{width:min(640px, 54vw); padding-right:max(var(--gut), (100vw - var(--max)) / 2)}
  .sum{box-sizing:content-box}
  .slide{width:min(900px, 70vw); grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows:none; gap:clamp(22px, 2.6vw, 40px); padding:16px}
  .slide__body{justify-content:center; padding:18px 18px 18px 0}
  .vis{min-height:0}
}

/* ---------- Tablet e celular ---------- */
@media (max-width:899px){
  .nav{display:none}
  .hdr .pill{margin-left:auto}
  .orbit{--cx:50%; --cy:calc(100% + 10vw); --d:128vw}
  .hero{height:170vh; height:170svh}
  .hero__in{justify-content:flex-start; padding-top:calc(var(--hdr) + 7svh)}
  .hero__hint{display:none}
  .site__grid,.cta__grid{grid-template-columns:minmax(0, 1fr)}
}
@media not ((min-width:900px) and (min-height:600px)){
  .sol__meta{order:-1}
  .slide__cta{margin-top:auto}
  .slide__body > :nth-last-child(2){margin-bottom:18px}
}
@media (min-width:600px) and (max-width:899px){
  .hero__in{justify-content:center; padding-bottom:24svh}
}
@media (max-width:480px){
  .hero .cta-row{flex-wrap:nowrap}
  .hero .cta-row .pill:first-child{flex:1; padding:0 1em}
  .pill--icon{width:52px; padding:0}
  .pill--icon span{display:none}
  .hdr .pill{padding:0 1.1em; letter-spacing:.14em}
}
@media (max-width:899px) and (max-height:700px){
  .hero .lead{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important}
  .hero{height:auto}
  .hero__pin{position:relative; height:100svh}
  .js .read .w{opacity:1}
  .read mark::before{transform:none}
}