@font-face{font-family:'Geist';font-weight:400 700;font-style:normal;font-display:swap;src:url(geist.woff2?v=6) format('woff2')}
:root{--g:#111317;--g2:#191C22;--g3:#22262E;--az:#4B83FF;--azf:#2A62F0;--pa:#F4F5F7;--ci:#676D79;--cid:#9AA1AD;--ln:#DFE2E8;
 --f:'Geist',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--sk:-21.8deg;--e:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.5;color:var(--g);background:var(--pa);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.w{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4.4vw,48px)}
.sr{position:absolute;left:-9999px}
.sr:focus{left:16px;top:16px;z-index:99;background:#fff;color:var(--g);padding:10px 14px;border-radius:8px}
:focus-visible{outline:3px solid var(--az);outline-offset:3px;border-radius:4px}
.lg{height:1em;width:auto;--barra:var(--az)}
.lg-n{fill:currentColor}.lg-b{fill:var(--barra)}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:12px;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;transition:transform .25s var(--e),background-color .2s,color .2s,border-color .2s}
.bt:active{transform:scale(.97)}
.bt-a{background:var(--az);color:var(--g)}
.bt-a:hover{background:#6E9BFF}
.bt-o{border:1.5px solid rgba(244,245,247,.36);color:var(--pa)}
.bt-o:hover{border-color:var(--pa)}
.bt i{font-style:normal;display:inline-block;transition:transform .25s var(--e)}
.bt:hover i{transform:translateX(4px)}
.ey{font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bar{color:var(--az);font-weight:700;font-style:normal}

/* topo */
.tp{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--pa);transition:background-color .3s,box-shadow .3s}
.tp .w{display:flex;align-items:center;justify-content:space-between;height:68px}
.tp.s{background:rgba(17,19,23,.92);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.tp .lgl{font-size:23px;display:flex;align-items:center;min-height:44px}
.tp nav{display:flex;align-items:center;gap:6px}
.tp nav a.l{font-size:15px;font-weight:500;padding:12px 14px;border-radius:10px;color:rgba(244,245,247,.82);transition:color .2s}
.tp nav a.l:hover{color:#fff}
.tp .bt{min-height:44px;font-size:15px;padding:0 18px;margin-left:8px}

/* abertura */
.hero{position:relative;min-height:100svh;background:var(--g);color:var(--pa);display:flex;align-items:flex-end;overflow:hidden;padding:120px 0 clamp(40px,7vh,84px)}
.hero .w{position:relative;z-index:2;width:100%}
.hero .ey{color:var(--az)}
.hero h1{font-size:clamp(40px,6.4vw,92px);line-height:.97;letter-spacing:-.05em;font-weight:700;margin:.22em 0 .3em}
.hero h1 span{display:block}
.rot{display:flex;align-items:baseline;font-size:clamp(22px,3.3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1.1;min-height:1.2em}
.rot b{font-weight:500;letter-spacing:-.03em}
.rot .bar{padding:0 .1em}
.rot .ct{display:inline-block;width:.09em;height:.86em;background:var(--az);margin-left:.08em;transform:translateY(.1em);animation:pisca 1s steps(1) infinite}
.hero p{font-size:clamp(17px,1.6vw,21px);max-width:31em;color:rgba(244,245,247,.8);margin-top:clamp(18px,2.4vh,28px)}
.hero .ac{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vh,36px)}
.bars{position:absolute;inset:0;z-index:1;pointer-events:none}
.bars span{position:absolute;bottom:-12%;height:124%;transform:translate3d(0,calc(var(--p,0)*var(--k,0)*1px),0) skewX(var(--sk));transform-origin:bottom left;will-change:transform}
.bars .b1{right:6%;width:clamp(56px,9vw,150px);background:var(--az);--k:-90;animation:sobe 1.1s var(--e) .25s both}
.bars .b2{right:22%;width:clamp(90px,16vw,270px);background:var(--g2);--k:-40;animation:sobe 1.2s var(--e) .1s both}
.bars .b3{right:-6%;width:clamp(120px,22vw,360px);background:var(--g3);--k:-140;animation:sobe 1.3s var(--e) both}
.bars .b4{right:46%;width:clamp(40px,5vw,84px);background:var(--g2);--k:-200;animation:sobe 1.3s var(--e) .35s both}
@keyframes sobe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pisca{50%{opacity:0}}
@keyframes entra{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes nome{from{opacity:0;transform:translate3d(-14px,0,0)}to{opacity:1;transform:none}}
@keyframes barra{from{transform:scale(0)}to{transform:none}}
.hero .ey,.hero h1 span,.hero .rot,.hero p,.hero .ac{animation:entra .9s var(--e) both}
.hero .ey{animation-delay:.25s}.hero h1 span:nth-child(1){animation-delay:.35s}.hero h1 span:nth-child(2){animation-delay:.45s}.hero h1 span:nth-child(3){animation-delay:.55s}
.hero .rot{animation-delay:.7s}.hero p{animation-delay:.8s}.hero .ac{animation-delay:.9s}
.tp .lg-n{animation:nome .7s var(--e) both}
.tp .lg-b{transform-box:fill-box;transform-origin:left bottom;animation:barra .6s var(--e) .5s both}

/* faixa dos temas */
.mq{background:var(--az);color:var(--g);overflow:hidden;padding:18px 0}
.mq-t{display:flex;width:max-content;animation:corre 46s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq ul{display:flex;flex:none}
.mq li{font-size:clamp(18px,2vw,26px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center}
.mq li:after{content:"/";font-weight:700;color:#fff;padding:0 .7em}
@keyframes corre{to{transform:translate3d(-50%,0,0)}}

/* blocos */
.sc{padding:clamp(72px,11vw,150px) 0}
.sc h2{font-size:clamp(34px,5.4vw,72px);line-height:1;letter-spacing:-.045em;font-weight:700;max-width:13em}
.sc .sub{font-size:clamp(17px,1.6vw,21px);color:var(--ci);max-width:34em;margin-top:18px}
.es{background:var(--g);color:var(--pa)}
.es .sub{color:var(--cid)}
.js .rv{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.d1{--d:.1s}.d2{--d:.2s}.d3{--d:.3s}

/* o que faz */
.vb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vw,64px)}
.vc{background:#fff;border:1px solid var(--ln);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.vc .pal{background:var(--g);height:clamp(170px,19vw,230px);position:relative;overflow:hidden}
.vc .tx{padding:26px 26px 30px}
.vc h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1;font-weight:700}
.vc p{color:var(--ci);margin-top:10px;font-size:17px}
.pal i{position:absolute;display:block}
/* organiza: 9 peças soltas viram grade */
.o1 i{width:13%;aspect-ratio:1;background:var(--g3);left:calc(28% + var(--c)*16%);top:calc(18% + var(--r)*24%);animation:org 5.2s var(--e) infinite;animation-play-state:paused}
.o1 i:nth-child(1){--c:0;--r:0;--x:-90%;--y:40%;--a:-24deg}.o1 i:nth-child(2){--c:1;--r:0;--x:60%;--y:-50%;--a:18deg}.o1 i:nth-child(3){--c:2;--r:0;--x:130%;--y:70%;--a:40deg}
.o1 i:nth-child(4){--c:0;--r:1;--x:-150%;--y:-30%;--a:12deg}.o1 i:nth-child(5){--c:1;--r:1;--x:20%;--y:60%;--a:-32deg;background:var(--az)}.o1 i:nth-child(6){--c:2;--r:1;--x:110%;--y:-60%;--a:-14deg}
.o1 i:nth-child(7){--c:0;--r:2;--x:-60%;--y:-80%;--a:30deg}.o1 i:nth-child(8){--c:1;--r:2;--x:-40%;--y:30%;--a:-46deg}.o1 i:nth-child(9){--c:2;--r:2;--x:80%;--y:20%;--a:22deg}
@keyframes org{0%,14%{transform:translate(var(--x),var(--y)) rotate(var(--a))}42%,82%{transform:none}100%{transform:translate(var(--x),var(--y)) rotate(var(--a))}}
/* simplifica: muitas linhas viram uma */
.o2 i{left:18%;height:7px;background:var(--g3);transform-origin:left center;animation:simp 5.2s var(--e) infinite;animation-play-state:paused}
.o2 i:nth-child(1){top:22%;width:58%;--s:.0}.o2 i:nth-child(2){top:34%;width:40%;--s:0}.o2 i:nth-child(3){top:46%;width:64%;--s:1;background:var(--az)}
.o2 i:nth-child(4){top:58%;width:30%;--s:0}.o2 i:nth-child(5){top:70%;width:52%;--s:0}.o2 i:nth-child(6){top:82%;width:36%;--s:0}
@keyframes simp{0%,14%{transform:none;opacity:1}42%,82%{transform:scaleX(var(--s,0)) scaleY(calc(1 + var(--s,0)*1.6));opacity:var(--s,0)}100%{transform:none;opacity:1}}
/* automatiza: a barra percorre os passos sozinha */
.o3 i{top:50%;width:11%;aspect-ratio:1;margin-top:-5.5%;background:var(--g3);animation:auto 4.2s linear infinite;animation-play-state:paused}
.o3 i:nth-of-type(1){left:14%;animation-delay:0s}.o3 i:nth-of-type(2){left:34%;animation-delay:.7s}.o3 i:nth-of-type(3){left:54%;animation-delay:1.4s}.o3 i:nth-of-type(4){left:74%;animation-delay:2.1s}
.o3 b{position:absolute;left:19%;right:20%;top:50%;height:3px;margin-top:-1.5px;background:var(--g3)}
.o3 u{position:absolute;top:50%;left:19%;width:7%;height:3px;margin-top:-1.5px;background:var(--az);animation:vai 4.2s linear infinite;animation-play-state:paused}
@keyframes auto{0%,8%{background:var(--az);transform:scale(1.18)}24%,100%{background:var(--g3);transform:none}}
@keyframes vai{0%{transform:translateX(0)}66%,100%{transform:translateX(770%)}}
.vc.in .pal i,.vc.in .pal u{animation-play-state:running}

/* temas */
.tms-d{font-size:clamp(30px,8.2vw,116px);font-weight:700;letter-spacing:-.05em;line-height:1.05;margin-top:clamp(30px,4vw,54px);display:flex;align-items:baseline;white-space:nowrap;min-height:1.05em}
.tms-d b{font-weight:500;letter-spacing:-.045em;display:inline-block}
.tms-d .bar{padding:0 .06em}
.tms-d b.tr{animation:troca .45s var(--e)}
@keyframes troca{from{opacity:0;transform:translate3d(0,.22em,0)}to{opacity:1;transform:none}}
.tms-n{color:var(--cid);font-size:16px;min-height:1.5em;margin-top:6px}
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:clamp(28px,4vw,48px)}
.tg button,.tg a{font:inherit;color:inherit;background:var(--g2);border:1px solid transparent;border-radius:14px;min-height:64px;padding:0 20px;display:flex;align-items:center;font-size:19px;font-weight:700;letter-spacing:-.03em;cursor:pointer;text-align:left;transition:background-color .25s,border-color .25s,transform .25s var(--e)}
.tg b{font-weight:500}
.tg .bar{padding:0 .1em;display:inline-block;transition:transform .3s var(--e)}
.tg button:hover,.tg a:hover{background:var(--g3)}
.tg button:hover .bar,.tg a:hover .bar{transform:translateX(3px) scaleY(1.25)}
.tg button[aria-pressed=true]{border-color:var(--az);background:var(--g3)}
.tg a{color:var(--az);border-color:rgba(75,131,255,.4);background:transparent}

/* como funciona */
.ps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(40px,6vw,76px);position:relative}
.ps:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ln)}
.ps:after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--azf);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e) .2s}
.ps.in:after{transform:none}
.ps li{padding-top:30px}
.ps .n{font-size:clamp(54px,7vw,96px);font-weight:700;letter-spacing:-.06em;line-height:.9;color:var(--azf)}
.ps h3{font-size:clamp(22px,2.2vw,29px);letter-spacing:-.03em;line-height:1.1;margin-top:14px;font-weight:700}
.ps p{color:var(--ci);margin-top:8px}

/* a frase */
.fr{background:var(--azf);color:#fff}
.fr p{font-size:clamp(30px,5.6vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:700;max-width:15.5em}
.fr p span{opacity:.32;transition:opacity .5s}
.fr p span.on{opacity:1}
.fr .tri{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(28px,4vw,48px);font-size:clamp(18px,2vw,26px);font-weight:600;letter-spacing:-.02em}

/* contato */
.ct2{position:relative;overflow:hidden}
.ct2 .w{position:relative;z-index:2}
.ct2 h2{font-size:clamp(44px,9vw,132px);letter-spacing:-.055em;max-width:5.6em}
.ct2 .ac{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(26px,4vw,44px)}
.ct2 .em{font-size:17px;color:var(--cid);display:inline-flex;align-items:center;min-height:44px;box-shadow:inset 0 -1px 0 rgba(154,161,173,.5)}
.ct2 .em:hover{color:#fff}
.ct2 .bars .b1{right:8%;animation:none}.ct2 .bars .b3{right:-8%;animation:none}

/* rodapé */
.rd{background:var(--g);color:var(--cid);border-top:1px solid rgba(255,255,255,.08);padding:34px 0 40px;font-size:14.5px}
.rd .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.rd .lgl{font-size:22px;color:var(--pa);display:flex;align-items:center;min-height:44px}
.rd nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.rd nav a{padding:12px 10px}
.rd nav a:hover{color:#fff}

@media(max-width:1024px){
 .vb{grid-template-columns:1fr;max-width:560px}
 .vc{flex-direction:row}.vc .pal{flex:0 0 42%;height:auto;min-height:170px}.vc .tx{flex:1}
 .bars .b2{right:30%}.bars .b4{display:none}
}
@media(max-width:639px){
 body{font-size:16px}
 .tp .w{height:60px}
 .tp nav a.l{display:none}
 .tp .bt{margin-left:0}
 .hero{padding-top:96px}
 .bars .b1{right:-3%;width:42px}.bars .b2{left:14%;right:auto;width:46px}.bars .b3{left:-44%;right:auto;width:62%}
 .ct2 .bars .b3{left:auto;right:-34%;width:150px}
 .vc{flex-direction:column}.vc .pal{flex:none;height:170px}
 .ps{grid-template-columns:1fr;gap:0}
 .ps:before,.ps:after{width:3px;height:100%;right:auto}
 .ps:after{transform:scaleY(0);transform-origin:top}
 .ps li{padding:0 0 30px 26px}
 .tg{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tg button,.tg a{font-size:17px;padding:0 14px;min-height:56px;min-width:0}
 .tg .nm{display:none}
 .rd .w{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation:none!important;transition:none!important}
 .js .rv{opacity:1;transform:none}
 .mq-t{flex-wrap:wrap;width:auto}.mq ul+ul{display:none}.mq ul{flex-wrap:wrap;justify-content:center;gap:6px 0}
 .fr p span{opacity:1}
 .ps:after{transform:none}
}