/* ZORC DESIGN — sistema visual */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;600;700;800&family=Hanken+Grotesk:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --z-black:#08080a;--z-ink:#0d0d10;--z-graphite:#15151a;--z-graphite-2:#1d1d23;
  --z-blue:#2f4bff;--z-violet:#8b3cff;--z-cyan:#28e0ff;
  --z-chalk:#edecf0;--z-chalk-2:#b9b8c2;--z-chalk-3:#7d7c87;--z-faint:#48474f;
  --z-line:rgba(237,236,240,.10);--z-line-2:rgba(237,236,240,.20);
  --grad:linear-gradient(112deg,var(--z-blue) 0%,var(--z-violet) 46%,var(--z-cyan) 100%);
  --font-d:"Sora",system-ui,sans-serif;--font-b:"Hanken Grotesk","Sora",sans-serif;--font-m:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(20px,4.2vw,68px);--maxw:1560px;
  --sec-y:clamp(56px,7vw,112px);--frame-inset:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-hero:clamp(2.9rem,7.1vw,7.4rem);
  --t-d1:clamp(2rem,4vw,3.7rem);
  --t-d2:clamp(1.6rem,2.9vw,2.8rem);
  --t-d3:clamp(1.15rem,1.6vw,1.6rem);
  --t-lede:clamp(1rem,1.18vw,1.2rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--z-black);color:var(--z-chalk-2);font:400 1rem/1.62 var(--font-b);overflow-x:hidden;text-wrap:pretty;-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--z-chalk);text-decoration:none;transition:color .42s var(--ease)}
a:hover{color:#fff}
::selection{background:var(--z-violet);color:#fff}
:focus-visible{outline:1px solid var(--z-cyan);outline-offset:3px}

/* ——— campo de fundo: preto → grafite/violeta profundo ——— */
.field{position:fixed;inset:-6%;z-index:-2;pointer-events:none;transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-12px),0);transition:transform .9s var(--ease);background:
  radial-gradient(120% 78% at 8% -6%,rgba(93,44,214,.30),transparent 62%),
  radial-gradient(90% 60% at 96% 12%,rgba(40,224,255,.07),transparent 60%),
  linear-gradient(180deg,var(--z-black) 0%,#0b0a12 46%,#100c1d 100%)}
.dots-field{position:fixed;inset:0;z-index:-1;pointer-events:none}
.dither-cursor{position:fixed;inset:0;z-index:65;pointer-events:none;
  image-rendering:pixelated;image-rendering:crisp-edges}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ——— moldura técnica ——— */
.frame{position:fixed;inset:var(--frame-inset);z-index:55;pointer-events:none;border:1px solid var(--z-line)}
.scroll-bar{position:fixed;top:var(--frame-inset);left:var(--frame-inset);right:var(--frame-inset);height:1px;z-index:56;pointer-events:none;background:var(--z-line);overflow:hidden}
.scroll-bar i{position:absolute;inset:0;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.btn,.bento>*,.svc article,.diff div{transition:transform .4s var(--ease),color .42s var(--ease),border-color .42s var(--ease)}
.frame i{position:absolute;width:22px;height:22px;border:0 solid var(--z-line-2)}
.frame i:nth-child(1){top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.frame i:nth-child(2){top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.frame i:nth-child(3){bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.frame i:nth-child(4){bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
@media (max-width:760px){:root{--frame-inset:10px}}

/* ——— layout ——— */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:var(--sec-y)}
.rule{height:1px;background:var(--z-line);border:0;margin:0}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,40px)}
.grid12>*{min-width:0}
@media (max-width:860px){.grid12{grid-template-columns:1fr}.grid12>*{grid-column:1/-1!important;align-self:start!important}}

/* ——— tipografia ——— */
h1,h2,h3,h4{font-family:var(--font-d);color:var(--z-chalk);font-weight:600;letter-spacing:-.028em;line-height:1.03;margin:0;overflow-wrap:break-word}
p{overflow-wrap:break-word}
.h-hero{font-size:var(--t-hero);font-weight:700;letter-spacing:-.04em;line-height:.98}
.h1{font-size:var(--t-d1);line-height:1.02}
.h2{font-size:var(--t-d2);line-height:1.06}
.h3{font-size:var(--t-d3);line-height:1.14;font-weight:600}
.dim{color:var(--z-faint)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0}
.lede{font-size:var(--t-lede);line-height:1.62;color:var(--z-chalk-2);max-width:46ch}
.body{color:var(--z-chalk-2);max-width:44ch}
.body+.body{margin-top:1.1em}
.tag{font:500 .72rem/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--z-chalk-3);display:flex;align-items:center;gap:14px}
.tag::before{content:"";width:clamp(18px,3vw,46px);height:1px;background:var(--grad);flex:none}
.num{font:500 .72rem/1 var(--font-m);letter-spacing:.16em;color:var(--z-faint)}
.mono{font:400 .78rem/1.5 var(--font-m);letter-spacing:.06em;color:var(--z-chalk-3)}
.caps{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.05rem,1.35vw,1.35rem);color:var(--z-chalk)}
.slashes{height:12px;background:repeating-linear-gradient(115deg,var(--z-cyan) 0 2px,transparent 2px 9px);opacity:.6;width:clamp(70px,9vw,130px)}

/* ——— botões ——— */
.btn{--bg:transparent;position:relative;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font:600 .82rem/1 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--z-chalk);
  padding:17px 30px;border:1px solid var(--z-line-2);border-radius:999px;background:rgba(255,255,255,.02);
  backdrop-filter:blur(14px);overflow:hidden;cursor:pointer;transition:color .42s var(--ease),border-color .42s var(--ease),transform .18s var(--ease)}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .52s var(--ease);z-index:1}
.btn:hover{color:#fff;border-color:transparent}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:scale(.98)}
.btn--primary{border-color:transparent;color:#fff}
.btn--primary::before{transform:scaleX(1)}
.btn--primary:hover::before{filter:brightness(1.22) saturate(1.1)}
.btn-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;position:relative;z-index:2}
.btn:disabled{opacity:.35;pointer-events:none}
.tlink{display:inline-flex;align-items:center;gap:10px;font:500 .8rem/1 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--z-chalk);padding-bottom:6px;position:relative}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}

/* ——— header ——— */
.hdr{position:fixed;top:18px;left:18px;right:18px;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);transition:background .5s var(--ease),padding .5s var(--ease)}
.hdr.pinned{background:linear-gradient(180deg,rgba(8,8,10,.86),rgba(8,8,10,0));padding-block:16px}
@media (max-width:760px){.hdr{top:10px;left:10px;right:10px}}
.logo{display:flex;align-items:baseline;gap:10px}
.logo b{font:800 1.18rem/1 var(--font-d);letter-spacing:-.05em;color:var(--z-chalk)}
.logo i{font:500 .58rem/1 var(--font-m);letter-spacing:.44em;color:var(--z-chalk-3);font-style:normal}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font:500 .78rem/1 var(--font-b);letter-spacing:.02em;color:var(--z-chalk-3)}
.nav a:hover{color:var(--z-chalk)}
.hdr-right{display:flex;align-items:center;gap:20px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;font:500 .74rem/1 var(--font-m);letter-spacing:.2em;color:var(--z-chalk);padding:10px 0}
@media (max-width:1080px){.nav,.hdr .btn{display:none}.menu-btn{display:block}}

/* ——— seletor de idioma ——— */
.lang-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--z-line-2);border-radius:999px;padding:3px;background:rgba(255,255,255,.02)}
.lang-switch button{font:600 .68rem/1 var(--font-m);letter-spacing:.1em;color:var(--z-chalk-3);background:none;border:0;border-radius:999px;padding:6px 12px;cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease)}
.lang-switch button:hover{color:var(--z-chalk)}
.lang-switch button.on{color:var(--z-black);background:var(--z-chalk)}
@media (max-width:1080px){.hdr .lang-switch{display:none}}
.lang-switch--ov{align-self:flex-start}

/* ——— overlay de menu ——— */
.overlay{position:fixed;inset:0;z-index:70;background:rgba(8,8,10,.96);backdrop-filter:blur(18px);
  display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.overlay.open{opacity:1;visibility:visible}
.overlay-top{display:flex;align-items:center;justify-content:space-between;padding:38px var(--gut)}
.overlay-mid{padding:0 var(--gut);display:flex;flex-direction:column;justify-content:center;gap:6px}
.overlay-mid a{font-family:var(--font-d);font-weight:600;font-size:clamp(2rem,6vw,4.6rem);letter-spacing:-.04em;color:var(--z-chalk);
  line-height:1.12;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease),color .3s}
.overlay.open .overlay-mid a{opacity:1;transform:none;transition-delay:calc(.1s + var(--i) * .05s)}
.overlay-mid a:hover{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.overlay-mid a i{font:500 .7rem/1 var(--font-m);color:var(--z-faint);vertical-align:super;margin-right:16px;letter-spacing:.1em}
.overlay-btm{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:end;padding:32px var(--gut);border-top:1px solid var(--z-line)}

/* ——— preloader ——— */
.pre{position:fixed;inset:0;z-index:90;background:var(--z-black);display:grid;place-items:center;transition:opacity .9s var(--ease),visibility .9s}
.pre.done{opacity:0;visibility:hidden}
.pre-in{text-align:center;display:grid;gap:26px;justify-items:center}
.pre-in b{font:800 clamp(1.6rem,4vw,2.6rem)/1 var(--font-d);letter-spacing:-.04em;color:var(--z-chalk)}
.pre-in em{font:500 .74rem/1 var(--font-m);letter-spacing:.34em;font-style:normal;color:var(--z-chalk-3);text-transform:uppercase}
.pre-bar{width:min(360px,60vw);height:1px;background:var(--z-line-2);position:relative;overflow:hidden}
.pre-bar i{position:absolute;inset:0;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.pre-count{font:500 2rem/1 var(--font-m);color:var(--z-chalk);letter-spacing:.06em}
.pre-msg{font:500 .74rem/1 var(--font-m);letter-spacing:.3em;color:var(--z-cyan);text-transform:uppercase;opacity:0;transition:opacity .5s}
.pre-msg.on{opacity:1}

/* ——— reveal ——— */
.rv{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);transition-delay:calc(var(--i,0) * .04s)}
.rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none}*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ——— imagens / planos ——— */
.plane{position:relative;overflow:hidden;background:var(--z-graphite)}
.plane img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.72);transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.plane::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(47,75,255,.34),rgba(139,60,255,.16) 45%,rgba(40,224,255,.20));mix-blend-mode:screen;opacity:.62;transition:opacity 1.2s var(--ease)}
a.plane:hover img,.plane-h:hover img{transform:scale(1.03);filter:grayscale(.55) contrast(1.05) brightness(.82)}
a.plane:hover::after,.plane-h:hover::after{opacity:.34}

/* ——— marquee ——— */
.marq{overflow:hidden;border-block:1px solid var(--z-line);padding-block:20px;display:flex;margin-inline:var(--frame-inset);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marq div{display:flex;gap:56px;padding-right:56px;flex:none;animation:slide 34s linear infinite}
.marq span{font-family:var(--font-d);font-weight:700;font-size:clamp(1.2rem,2.8vw,2.4rem);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px var(--z-faint);text-transform:uppercase;white-space:nowrap}
.marq span:nth-child(2n){-webkit-text-stroke:1px transparent;color:var(--z-chalk)}
@keyframes slide{to{transform:translateX(-100%)}}

/* ——— rodapé ——— */
.ftr{position:relative;padding-top:clamp(44px,5vw,72px);border-top:1px solid var(--z-line);overflow:hidden}
.ftr-z{position:absolute;left:50%;bottom:-4%;width:min(1100px,120%);height:78%;transform:translateX(-50%);opacity:.5;pointer-events:none}
.ftr-cols{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:clamp(20px,3vw,44px);position:relative;z-index:2;padding-bottom:clamp(30px,4vw,50px)}
.ftr-cols>*{min-width:0}
@media (max-width:900px){.ftr-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-cols{grid-template-columns:1fr}}
.ftr-cols h4{font:500 .72rem/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--z-faint);margin-bottom:14px}
.ftr-list{display:flex;flex-direction:column;gap:11px}
.ftr-list a{font-size:.95rem;color:var(--z-chalk-2)}
.ftr-btm{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;border-top:1px solid var(--z-line);padding-block:18px;position:relative;z-index:2}

/* ——— utilidades ——— */
.badge{display:inline-flex;align-items:center;gap:9px;font:500 .68rem/1 var(--font-m);letter-spacing:.18em;text-transform:uppercase;
  color:var(--z-chalk-2);border:1px solid var(--z-line-2);border-radius:999px;padding:9px 16px;background:rgba(139,60,255,.10);backdrop-filter:blur(14px)}
.badge b{width:6px;height:6px;border-radius:50%;background:var(--z-cyan);box-shadow:0 0 10px var(--z-cyan)}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.meta{display:grid;gap:1px;background:var(--z-line)}
.meta>*{min-width:0}
.meta div{background:var(--z-black);padding:18px 0 18px 18px;display:grid;gap:7px}
.meta dt{font:500 .68rem/1 var(--font-m);letter-spacing:.18em;text-transform:uppercase;color:var(--z-faint)}
.meta dd{margin:0;font-family:var(--font-d);font-size:.98rem;color:var(--z-chalk);font-weight:600;letter-spacing:-.01em}