/* ============================================================
   VERTEX V12 — INFINITE ECOSYSTEM / CINEMATIC
   ------------------------------------------------------------
   01. Tokens & base
   02. Fundo global (estrelas)
   03. Loader (introdução — mantida)
   04. Progresso & navbar
   05. Hero fixado + emblema
   06. Botões
   07. Zonas, rótulos e tipografia de seção
   08. Núcleo / Sobre
   09. Serviços (cards verticais)
   10. Operating system
   11. Inteligência — J.A.R.V.I.S. / Max (fixado)
   12. Ecosystem online
   13. Contato & rodapé
   14. CTA flutuante
   15. Reveal
   16. Hover (ponteiro fino)
   17. Responsivo
   18. Movimento reduzido
   ============================================================ */

/* ---------- 01. Tokens & base ---------- */
:root{
  --bg:#020711;
  --bg2:#03101d;
  --blue:#168dff;
  --deep:#0d5ac4;
  --cyan:#4dc4ff;
  --light:#bcecff;
  --white:#f2f8ff;
  --text:#d5e7f7;
  --muted:rgba(200,224,244,.62);
  --dim:rgba(150,190,225,.38);
  --line:rgba(77,196,255,.14);
  --tech:"Orbitron",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --font:"Inter",system-ui,sans-serif;

  --gutter:clamp(20px,5vw,80px);
  --max:1280px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;overflow-x:clip;background:var(--bg);scroll-behavior:auto}
body{min-height:100vh;overflow-x:clip;color:var(--text);background:var(--bg);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{color:#fff;background:rgba(22,141,255,.72)}
:focus-visible{outline:1px solid var(--cyan);outline-offset:4px;border-radius:6px}
main{position:relative;z-index:2}

/* ---------- 02. Fundo global ---------- */
.global-fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 60% 30%,#061a2e 0,#030d18 40%,#020711 75%)}
#starCanvas{position:absolute;inset:0;width:100%;height:100%}
.global-glow{position:absolute;border-radius:50%;filter:blur(70px)}
.glow-a{left:48%;top:8%;width:900px;height:900px;background:radial-gradient(circle,rgba(0,128,255,.10),transparent 70%);animation:driftA 24s ease-in-out infinite;translate:var(--glow-x,0px) var(--glow-y,0px)}
.glow-b{left:-320px;bottom:-320px;width:760px;height:760px;background:radial-gradient(circle,rgba(0,102,255,.07),transparent 70%);animation:driftB 28s ease-in-out infinite}
.global-vignette{position:absolute;inset:0;background:radial-gradient(ellipse,transparent 40%,rgba(0,0,0,.55) 120%)}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,32px) scale(1.08)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(42px,-28px) scale(1.06)}}

/* ---------- 03. Loader (introdução — mantida) ---------- */
.loader{position:fixed;inset:0;z-index:50000;display:grid;place-items:center;background:#020711;transition:opacity .45s ease,visibility .45s ease}
.loader.hidden{opacity:0;visibility:hidden}
.loader-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(60,169,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(60,169,255,.025) 1px,transparent 1px);background-size:65px 65px}
.loader-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(22,141,255,.15),transparent 70%);filter:blur(25px)}
.loader-content{position:relative;z-index:2;width:min(620px,calc(100% - 50px))}
.loader-label{display:block;margin-bottom:25px;color:rgba(77,196,255,.55);font-family:var(--tech);font-size:7px;letter-spacing:.17em;text-align:center;animation:loaderFlicker 2.6s steps(1) infinite}
.loader-logo{color:#fff;font-family:var(--tech);font-size:clamp(52px,8vw,100px);font-weight:600;letter-spacing:.12em;text-align:center;animation:loaderPulse 2.4s ease-in-out infinite}
.loader-bar{height:1px;margin-top:30px;overflow:hidden;background:rgba(77,196,255,.11)}
.loader-bar i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--cyan));background-size:220% 100%;box-shadow:0 0 15px var(--cyan);animation:loaderBarShift 1.3s linear infinite}
.loader-meta{margin-top:9px;display:flex;justify-content:space-between;color:rgba(77,196,255,.30);font-family:var(--tech);font-size:6px;letter-spacing:.13em}
.loader-mark{display:block;width:210px;height:auto;margin:0 auto 62px;filter:drop-shadow(0 0 26px rgba(22,141,255,.6));animation:markIn 1s var(--ease-expo) both,markPulse 2.4s ease-in-out 1s infinite}
@keyframes markIn{from{opacity:0;transform:scale(.55) rotate(-90deg);filter:blur(10px)}to{opacity:1;transform:none}}
@keyframes markPulse{0%,100%{filter:drop-shadow(0 0 18px rgba(22,141,255,.45))}50%{filter:drop-shadow(0 0 40px rgba(77,196,255,.95))}}
.loader-ring{position:absolute;left:50%;top:112px;width:270px;height:270px;margin:-135px 0 0 -135px;border-radius:50%;border:1px solid transparent;border-top-color:rgba(77,196,255,.55);border-right-color:rgba(77,196,255,.16);animation:loaderSpin 2.6s linear infinite;pointer-events:none}
.loader-ring-reverse{width:310px;height:310px;margin:-155px 0 0 -155px;border-top-color:transparent;border-bottom-color:rgba(188,236,255,.38);border-left-color:rgba(188,236,255,.14);animation:loaderSpinReverse 3.4s linear infinite}
.loader-scan{position:absolute;left:0;right:0;top:-10%;height:2px;background:linear-gradient(90deg,transparent,rgba(77,196,255,.85),transparent);animation:loaderScan 2.3s ease-in-out infinite;opacity:.75}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderSpinReverse{to{transform:rotate(-360deg)}}
@keyframes loaderScan{0%{top:-8%}100%{top:106%}}
@keyframes loaderPulse{0%,100%{text-shadow:0 0 16px rgba(77,196,255,.22)}50%{text-shadow:0 0 36px rgba(77,196,255,.58)}}
@keyframes loaderFlicker{0%,88%,92%,100%{opacity:.55}90%{opacity:.18}}
@keyframes loaderBarShift{0%{background-position:0 0}100%{background-position:220% 0}}

/* ---------- 04. Progresso & navbar ---------- */
.page-progress{position:fixed;left:0;right:0;top:0;z-index:20000;height:1px}
.page-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 10px rgba(77,196,255,.65)}

.navbar{position:fixed;left:0;right:0;top:0;z-index:10000;height:76px;padding:0 clamp(18px,3.4vw,48px);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:34px;animation:fxDown .8s var(--ease) .1s backwards;transition:translate .6s var(--ease)}
.navbar::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;background:linear-gradient(180deg,rgba(2,7,17,.92),rgba(2,7,17,.55) 55%,transparent);opacity:0;transition:opacity .5s ease;pointer-events:none}
.navbar.scrolled::before{opacity:1}
.navbar.is-tucked{translate:0 -110%}
.navbar-brand{display:flex;align-items:center;gap:14px;justify-self:start}
.brand-logo{width:40px;height:auto;margin:-4px -4px -4px -6px;mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(22,141,255,.6));transition:filter .4s ease,rotate .9s var(--ease)}
.navbar-brand>strong{color:#fff;font-family:var(--tech);font-size:14px;font-weight:600;letter-spacing:.3em;transition:letter-spacing .6s var(--ease)}
.navbar-brand>i{width:1px;height:22px;background:rgba(151,205,246,.28)}
.navbar-brand small{color:var(--dim);font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.18em}
.navbar-links{display:flex;align-items:center;gap:28px}
.navbar-links a{position:relative;padding:6px 0;color:rgba(213,231,247,.6);font-size:13.5px;font-weight:500;transition:color .3s ease}
.navbar-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.navbar-links a:hover,.navbar-links a.active{color:#fff}
.navbar-links a.active::after{transform:scaleX(1)}
.navbar-cta{position:relative;overflow:hidden;isolation:isolate;height:38px;padding:0 18px;display:flex;align-items:center;gap:10px;border:1px solid rgba(77,196,255,.4);border-radius:999px;color:var(--light);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;background:rgba(2,12,23,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .4s ease,box-shadow .4s ease,color .3s ease}
.navbar-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--deep),var(--blue));transform:translateY(101%);transition:transform .55s var(--ease)}
.navbar-cta b{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:statusPulse 1.7s ease-in-out infinite}
.navbar-cta svg{width:13px;height:13px;transition:transform .5s var(--ease)}
.navbar-burger{display:none}
@keyframes statusPulse{0%,100%{box-shadow:0 0 8px var(--cyan);opacity:1}50%{box-shadow:0 0 17px var(--cyan);opacity:.5}}

/* ---------- 05. Hero fixado + emblema ---------- */
.hero-pin{position:relative;height:230vh}
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;overflow:hidden}
.hero-inner{position:relative;z-index:3;width:min(calc(100% - var(--gutter) * 2),var(--max));height:100%;margin:0 auto;display:flex;align-items:center}
.hero-copy{width:min(680px,56vw);padding-top:40px;opacity:var(--copy-o,1);translate:var(--copy-x,0px) 0}

.hero-eyebrow{display:inline-flex;align-items:center;gap:11px;padding:9px 16px;border:1px solid rgba(77,196,255,.22);border-radius:999px;background:rgba(2,12,23,.45);color:rgba(213,231,247,.72);font-family:var(--mono);font-size:10.5px;letter-spacing:.22em}
.hero-eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:statusPulse 1.7s ease-in-out infinite}
.hero-eyebrow i{width:3px;height:3px;border-radius:50%;background:var(--dim)}
.hero h1{margin-top:26px;color:#f6fbff;font-family:var(--tech);font-size:clamp(38px,4.7vw,70px);font-weight:800;line-height:1.02;letter-spacing:.005em}
.hero h1 span{background:linear-gradient(95deg,var(--cyan) 10%,var(--blue) 55%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{max-width:480px;margin-top:26px;color:var(--muted);font-size:18px;line-height:1.55}

.hero-bottom{margin-top:34px;display:flex;flex-wrap:wrap}
.hero-bottom div{padding:2px 28px;display:flex;flex-direction:column;gap:9px;border-left:1px solid rgba(77,196,255,.14)}
.hero-bottom div:first-child{padding-left:0;border-left:0}
.hero-bottom strong{color:#f1f8ff;font-size:19px;font-weight:600;letter-spacing:-.01em}
.hero-bottom span{color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.24em}
.hero-actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px}
.hero-note,.contact-note{display:flex;align-items:center;gap:10px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.hero-copy>.hero-note{max-width:none;margin-top:22px;font-size:11px;line-height:1.5;animation:fxUp .9s var(--ease) 2.5s backwards}
.contact-note{margin:14px 12px 4px}
.hero-note b,.contact-note b{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.scroll-hint{position:absolute;left:50%;bottom:34px;z-index:3;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.3em;white-space:nowrap;opacity:var(--copy-o,1)}
.scroll-hint i{position:relative;width:1px;height:34px;overflow:hidden;background:rgba(77,196,255,.14)}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--cyan),transparent);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{from{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* palco: feixes de luz + emblema Λ */
.hero-stage{position:absolute;inset:0;z-index:1;animation:fadeIn 1.4s ease 1.75s backwards}
/* depois do zoom o palco do hero sai de cena por completo */
.hero.is-out .hero-stage,.hero.is-out .hero-inner,.hero.is-out .scroll-hint{visibility:hidden}
.hero.logo-out .emblem-logo,.hero.logo-out .emblem-glow{visibility:hidden}
.beam{position:absolute;top:-10%;bottom:-10%;width:2px;background:linear-gradient(180deg,transparent,var(--c) 22%,var(--c) 70%,transparent);opacity:var(--beam-o,1);box-shadow:0 0 18px 2px var(--g),0 0 120px 46px var(--g2);animation:beamPulse 5s ease-in-out infinite}
.beam-a{left:52%;--c:rgba(77,196,255,.85);--g:rgba(77,196,255,.5);--g2:rgba(77,196,255,.10)}
.beam-b{left:70%;--c:rgba(22,141,255,.75);--g:rgba(22,141,255,.5);--g2:rgba(22,141,255,.12);animation-delay:-1.6s}
.beam-c{left:88%;--c:rgba(13,90,196,.9);--g:rgba(13,90,196,.6);--g2:rgba(13,90,196,.16);animation-delay:-3.1s}
@keyframes beamPulse{0%,100%{scale:1 1}50%{scale:2.2 1}}

.emblem{position:absolute;left:var(--emblem-x,70%);top:50%;width:min(44vw,600px);aspect-ratio:1;transform:translate(-50%,-50%) translate3d(var(--emblem-mx,0px),var(--emblem-my,0px),0) scale(var(--emblem-s,1));opacity:var(--emblem-o,1)}
.emblem-glow{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgba(22,141,255,.30),rgba(22,141,255,.10) 42%,rgba(22,141,255,.03) 58%,transparent 70%);opacity:var(--logo-o,1)}
.emblem-svg{position:relative;width:100%;height:100%}
.emblem-logo{position:absolute;left:50%;top:50%;width:78%;height:auto;margin:-41.7% 0 0 -39%;opacity:var(--logo-o,1)}
.emblem-ring{transform-origin:300px 300px}
.ring-1{animation:spin 16s linear infinite}
.ring-2{animation:spinReverse 40s linear infinite}
.ring-3{animation:spinReverse 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes corePulse{0%,100%{opacity:.75}50%{opacity:1}}

/* entrada escalonada do hero (sincronizada com o fim do loader) */
.hero-eyebrow,.hero h1,.hero-copy>p,.hero-bottom,.hero-actions,.scroll-hint{animation:fxUp .9s var(--ease) backwards}
.hero-eyebrow{animation-delay:1.8s}
.hero h1{animation-delay:1.93s}
.hero-copy>p{animation-delay:2.07s}
.hero-bottom{animation-delay:2.21s}
.hero-actions{animation-delay:2.35s}
.scroll-hint{animation-delay:2.65s}
@keyframes fxUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fxDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes textShine{0%{background-position:0% center}100%{background-position:220% center}}

/* ---------- 06. Botões ---------- */
.button{position:relative;display:inline-flex;align-items:center;gap:14px;transition:translate .5s var(--ease),filter .4s ease,color .3s ease}
.button svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.button-primary{height:58px;padding:0 38px;color:#fff;font-family:var(--tech);font-size:12.5px;font-weight:600;letter-spacing:.14em;background:linear-gradient(95deg,var(--cyan),var(--blue) 48%,var(--deep));background-size:160% 100%;clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);filter:drop-shadow(0 12px 30px rgba(22,141,255,.38));transition:translate .5s var(--ease),filter .4s ease,background-position .7s var(--ease)}
.button-primary::after{content:"";position:absolute;top:0;left:-65%;width:35%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .8s var(--ease)}
.button-secondary{color:rgba(213,231,247,.72);font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.button-secondary svg{width:13px;height:13px;color:var(--cyan)}
.button-secondary::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}

/* ---------- 07. Zonas, rótulos e tipografia ---------- */
.zone{position:relative;padding:clamp(90px,14vh,170px) 0}
.zone-inner{width:min(calc(100% - var(--gutter) * 2),var(--max));margin:0 auto}
.zone-label{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.34em}
.zone-label b{width:9px;height:9px;border:1px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 10px rgba(77,196,255,.5)}
.zone-label span{color:var(--cyan)}
.zone-label i{width:30px;height:1px;background:rgba(77,196,255,.25)}
.zone-label strong{color:var(--dim);font-weight:400}

.zone-head{margin-top:26px}
.zone-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.zone-head-side{max-width:340px;padding-bottom:10px}
.kicker{display:block;color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.3em}
.kicker-accent{color:var(--cyan)}
.display{margin-top:18px;color:#f3f9ff;font-size:clamp(38px,5.4vw,78px);font-weight:700;line-height:1.02;letter-spacing:-.04em}
.display strong{color:rgba(150,190,225,.42);font-weight:700}
.display-md{font-size:clamp(32px,3.9vw,56px);line-height:1.05}
.display-quote{font-size:clamp(34px,4.6vw,66px)}
.display-xl{font-size:clamp(54px,9.4vw,150px);letter-spacing:-.05em;line-height:.95}
.lead{max-width:560px;margin-top:24px;color:var(--muted);font-size:17.5px;line-height:1.6}
.tag{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px dashed rgba(77,196,255,.3);border-radius:999px;color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.2em}
.tag b{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.zone-head-side .tag{margin-top:20px}

/* ---------- 08. Ecossistema: coluna central ----------
   Um canvas fixo desenha a coluna de partículas no centro; as estações
   rolam normalmente à frente dela, alternando os lados. */
.tunnel{position:relative;padding:clamp(70px,10vh,120px) 0 40px}
/* com o hero fixado, o conteúdo sobe para não sobrar um trecho vazio depois do zoom */
.pin-on .tunnel{margin-top:-62vh}
.tunnel-sticky{position:relative}
.column-canvas{position:fixed;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
.stations{position:relative;z-index:1;width:min(calc(100% - var(--gutter) * 2),var(--max));margin:0 auto;display:flex;flex-direction:column;gap:clamp(90px,14vh,160px);perspective:1600px}
.station{position:relative;scroll-margin-top:110px}
.station-text{display:flex;flex-direction:column;align-items:center;text-align:center}
.station-text::before{content:"";position:absolute;inset:-70px -40px;z-index:-1;background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(2,7,17,.92),rgba(2,7,17,.6) 55%,transparent 75%);pointer-events:none}
.station-text .display{margin-top:18px}
.station-text .kicker{margin-top:26px}
.station-text .tag{margin-top:24px}

/* cards das capacidades: zigue-zague dos dois lados da coluna */
.station-cap{width:calc(50% - clamp(46px,6vw,96px))}
.station-cap[data-side="1"]{align-self:flex-end;margin-top:calc(clamp(90px,14vh,160px) * -1 - 190px)}
.station-cap .glass{transform:rotateY(calc(var(--side) * -7deg)) translateZ(0);transform-origin:calc(50% + var(--side) * 50%) 50%;transition:transform .9s var(--ease),box-shadow .6s ease}
.station-cap[data-side="-1"]{--side:-1}
.station-cap[data-side="1"]{--side:1}
/* conector do card até a coluna */
.station-cap::after{content:"";position:absolute;top:50%;width:clamp(46px,6vw,96px);height:1px;background:linear-gradient(90deg,rgba(77,196,255,.7),rgba(77,196,255,.15));transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease-expo) .35s}
.station-cap[data-side="-1"]::after{left:100%}
.station-cap[data-side="1"]::after{right:100%;rotate:180deg;transform-origin:left}
.station-cap.is-near::after{transform:scaleX(1)}
.station-cap::before{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan),0 0 0 5px rgba(77,196,255,.14);scale:0;transition:scale .6s var(--ease) 1.1s}
.station-cap[data-side="-1"]::before{left:calc(100% + clamp(46px,6vw,96px) - 4.5px)}
.station-cap[data-side="1"]::before{right:calc(100% + clamp(46px,6vw,96px) - 4.5px)}
.station-cap.is-near::before{scale:1}

/* entrada das estações ao rolar */
.js .station{opacity:0;translate:calc(var(--side,0) * -70px) 46px;transition:opacity 1.1s var(--ease),translate 1.3s var(--ease-expo)}
.js .station.is-near{opacity:1;translate:0 0}

/* superfície de vidro (placa com espessura, como no túnel) */
.glass{position:relative;isolation:isolate;border:1px solid rgba(120,205,255,.34);border-radius:26px;background:linear-gradient(150deg,rgba(9,40,74,.9),rgba(3,14,27,.94) 55%,rgba(2,9,17,.96));box-shadow:inset 0 1px 0 rgba(188,236,255,.22),inset 0 0 0 5px rgba(77,196,255,.045),0 0 0 1px rgba(2,7,17,.6),0 60px 140px -50px rgba(22,141,255,.65),0 0 90px -20px rgba(22,141,255,.25)}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,rgba(188,236,255,.12),transparent 28%,transparent 70%,rgba(77,196,255,.10));pointer-events:none}

/* Sobre */
.split-card{padding:clamp(18px,2.4vw,30px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(26px,4vw,60px)}
.split-copy{padding-right:clamp(0px,2vw,26px)}
.split-copy .display{margin-top:16px}
.about-visual{position:relative;padding:12% 0;display:grid;place-items:center}
.core{position:relative;width:min(72%,300px);aspect-ratio:1}
.core-aura{position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,rgba(22,141,255,.2),transparent 68%);filter:blur(14px)}
.core-ring{position:absolute;inset:-7%;border:1px solid rgba(77,196,255,.26);border-radius:50%;animation:spin 18s linear infinite}
.core-ring::before{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.core-ring-two{inset:-17%;border-style:dashed;opacity:.45;animation:spinReverse 26s linear infinite}
.core-content{position:absolute;inset:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(77,196,255,.6);border-radius:50%;background:radial-gradient(circle at 37% 30%,rgba(71,197,255,.45),rgba(16,101,193,.45) 18%,rgba(5,43,85,.95) 52%,rgba(2,13,25,.98) 78%);box-shadow:inset 0 0 40px rgba(56,181,255,.18),0 0 30px rgba(55,176,255,.38);animation:coreBreathe 4.5s ease-in-out infinite}
.core-logo{width:46%;height:auto;margin:-8% 0 -10%;mix-blend-mode:screen;filter:drop-shadow(0 0 14px rgba(100,218,255,.7))}
.core-content strong{color:#fff;font-family:var(--tech);font-size:clamp(13px,1.3vw,18px);font-weight:500;letter-spacing:.25em}
.core-content>i{width:40px;height:1px;margin:8px 0 6px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.core-content small{max-width:180px;color:rgba(218,240,255,.7);font-family:var(--mono);font-size:8px;line-height:1.7;letter-spacing:.14em;text-align:center}
@keyframes coreBreathe{0%,100%{box-shadow:inset 0 0 40px rgba(56,181,255,.18),0 0 30px rgba(55,176,255,.38)}50%{box-shadow:inset 0 0 58px rgba(56,181,255,.30),0 0 58px rgba(55,176,255,.58)}}

/* Capacidades */
.cap-card{overflow:hidden;display:grid;grid-template-columns:1fr}
.cap-body{min-height:clamp(250px,34vh,320px);padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.cap-top{margin-bottom:auto;display:flex;align-items:center;justify-content:space-between}
.cap-num{color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.cap-num::after{content:" / 06";color:var(--dim)}
.cap-icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid rgba(188,236,255,.35);border-radius:50%;background:rgba(13,90,196,.25);color:var(--light);transition:transform .7s var(--ease),background-color .4s ease}
.cap-icon svg{width:24px;height:24px}
.cap-body h3{margin-top:26px;color:#fff;font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.cap-body p{margin-top:12px;color:var(--muted);font-size:16.5px;line-height:1.55}

/* Operating system */
.os-panel{padding:clamp(26px,4vw,56px);overflow:hidden}
.os-panel .kicker{margin-top:26px}
.os-panel .display{margin-top:16px}
.os-grid{margin-top:clamp(26px,4vh,44px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.os-card{position:relative;padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(2,9,17,.6);transition:border-color .4s ease,transform .5s var(--ease),background-color .4s ease}
.os-card>span{color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.22em}
.os-card>strong{display:block;margin-top:14px;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.02em}
.os-card p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.5}
.os-bridge>strong{font-family:var(--tech);font-size:14px;font-weight:600;letter-spacing:.1em}
.os-bridge svg{position:absolute;right:22px;top:50%;width:26px;height:26px;margin-top:-13px;color:var(--cyan);animation:nudgeDown 2.4s var(--ease-inout) infinite}
@keyframes nudgeDown{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}

/* J.A.R.V.I.S. / Max */
/* o vão central deixa a coluna passar entre o texto e a janela */
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(150px,18vw,250px)}
.panel-flip .panel-copy{order:2}
.jarvis-name{display:block;margin-top:24px;color:var(--cyan);font-family:var(--mono);font-size:11px;letter-spacing:.3em}
.panel-flip .jarvis-name{margin-top:0}
.panel-visual{perspective:1400px}
.mock{position:relative;border:1px solid rgba(77,196,255,.45);border-radius:18px;background:linear-gradient(160deg,#061a2e,#020a14);box-shadow:0 0 0 1px rgba(2,7,17,.8),0 50px 120px -30px rgba(22,141,255,.6),0 0 80px rgba(22,141,255,.18);transform:rotateY(calc(-12deg + var(--tilt-x,0deg))) rotateX(calc(5deg + var(--tilt-y,0deg)));transition:transform .3s ease-out}
.panel-flip .mock{transform:rotateY(calc(12deg + var(--tilt-x,0deg))) rotateX(calc(5deg + var(--tilt-y,0deg)))}
.mock-bar{height:46px;padding:0 18px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line)}
.mock-bar em{width:9px;height:9px;border-radius:50%;background:rgba(77,196,255,.25)}
.mock-bar em:first-child{background:var(--cyan)}
.jarvis-status{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.2em}
.jarvis-status i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:statusPulse 1.7s ease-in-out infinite}
.mini-grid{padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mini-grid span{position:relative;overflow:hidden;min-height:clamp(84px,13vh,128px);padding:16px;display:flex;align-items:flex-end;border-radius:12px;color:#fff;font-family:var(--tech);font-size:clamp(12px,1.2vw,16px);font-weight:600;letter-spacing:.1em;transition:transform .5s var(--ease),filter .4s ease}
.mini-grid span::before{content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.12)}
.mini-grid span:nth-child(1){background:linear-gradient(135deg,var(--blue),var(--deep))}
.mini-grid span:nth-child(2){background:linear-gradient(135deg,var(--cyan),var(--blue))}
.mini-grid span:nth-child(3){background:linear-gradient(135deg,var(--deep),#06305f)}
.mini-grid span:nth-child(4){background:linear-gradient(135deg,#0a3f7d,var(--blue))}
.mock-max .mini-grid span:nth-child(1){background:linear-gradient(135deg,var(--cyan),var(--deep))}
.mock-max .mini-grid span:nth-child(2){background:linear-gradient(135deg,#06305f,var(--blue))}
.mock-max .mini-grid span:nth-child(3){background:linear-gradient(135deg,var(--blue),var(--cyan))}
.mock-max .mini-grid span:nth-child(4){background:linear-gradient(135deg,var(--deep),var(--blue))}

/* Ecosystem online */
.station-online .display{margin-top:26px}
.station-online .lead{max-width:520px}
.next-move{margin-top:44px;min-height:78px;padding:0 14px 0 28px;display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:22px;border:1px solid rgba(77,196,255,.34);border-radius:999px;background:rgba(2,12,23,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .4s ease,box-shadow .5s ease}
.next-move>span{color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.22em}
.next-move>strong{color:#fff;font-size:19px;font-weight:600;letter-spacing:-.01em}
.next-move svg{width:50px;height:50px;padding:15px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--blue),var(--deep));transition:transform .5s var(--ease)}

/* palavras das estações: animam quando a estação chega perto */
.js .station .split .word-inner{transform:translateY(110%) rotate(4deg)}
.js .station.is-near .split .word-inner{transform:none}

/* ---------- 13. Contato & rodapé ---------- */
.contact{scroll-margin-top:0}
.contact-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;gap:clamp(40px,6vw,90px)}
.contact-card{position:relative;padding:14px;border:1px solid rgba(77,196,255,.3);border-radius:24px;background:linear-gradient(160deg,rgba(7,29,51,.8),rgba(2,9,17,.94));box-shadow:0 50px 130px -50px rgba(22,141,255,.6)}
.contact-main{position:relative;overflow:hidden;isolation:isolate;min-height:120px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-radius:14px;background:linear-gradient(95deg,var(--cyan),var(--blue) 45%,var(--deep));background-size:170% 100%;transition:background-position .8s var(--ease),transform .4s var(--ease)}
.contact-main::after{content:"";position:absolute;top:0;left:-65%;width:30%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);transition:left .9s var(--ease)}
.contact-main div{display:flex;flex-direction:column}
.contact-main span{color:rgba(255,255,255,.75);font-family:var(--mono);font-size:10px;letter-spacing:.24em}
.contact-main strong{margin-top:8px;color:#fff;font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em}
.contact-main svg{width:52px;height:52px;padding:14px;border-radius:50%;color:var(--deep);background:#fff;transition:transform .6s var(--ease)}
.contact-links{margin-top:6px;display:flex;flex-direction:column}
.contact-links a{position:relative;padding:20px 12px;display:grid;grid-template-columns:110px 1fr;align-items:center;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background-color .4s ease}
.contact-links a:last-child{border-bottom:0}
.contact-links a::after{content:"→";position:absolute;right:14px;top:50%;translate:-8px -50%;color:var(--cyan);opacity:0;transition:opacity .4s ease,translate .5s var(--ease)}
.contact-links small{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.22em}
.contact-links strong{color:rgba(235,246,255,.88);font-size:16px;font-weight:500;overflow-wrap:anywhere}

.footer{position:relative;padding:40px 0 34px;border-top:1px solid rgba(77,196,255,.08);overflow:hidden}
.footer-word{font-family:var(--tech);font-size:min(17.5vw,270px);font-weight:800;line-height:.95;letter-spacing:.02em;text-align:center;white-space:nowrap;background:linear-gradient(180deg,rgba(22,141,255,.34),rgba(22,141,255,.02) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;translate:0 var(--word-y,0px)}
.footer-row{width:min(calc(100% - var(--gutter) * 2),var(--max));margin:30px auto 0;padding-top:26px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;border-top:1px solid rgba(77,196,255,.08)}
.footer-row>strong{color:#fff;font-family:var(--tech);font-size:13px;letter-spacing:.24em}
.footer-row>i{height:1px;background:linear-gradient(90deg,rgba(63,161,236,.2),transparent)}
.footer-row span,.footer-row small{color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}

/* ---------- 14. CTA flutuante ---------- */
.dock-cta{position:fixed;left:50%;bottom:24px;z-index:9000;height:46px;padding:0 24px;display:flex;align-items:center;gap:12px;border-radius:999px;color:#fff;font-family:var(--tech);font-size:11px;font-weight:600;letter-spacing:.14em;white-space:nowrap;background:linear-gradient(95deg,var(--cyan),var(--blue) 50%,var(--deep));box-shadow:0 0 0 6px rgba(2,7,17,.7),0 0 0 7px rgba(77,196,255,.22),0 18px 50px rgba(22,141,255,.45);translate:-50% 90px;opacity:0;visibility:hidden;transition:translate .7s var(--ease-expo),opacity .5s ease,visibility .5s,box-shadow .4s ease}
.dock-cta.is-on{translate:-50% 0;opacity:1;visibility:visible}
.dock-cta svg{width:14px;height:14px;transition:transform .5s var(--ease)}

/* ---------- 15. Reveal ---------- */
.js [data-reveal]{opacity:0;translate:0 34px;transition:opacity 1s var(--ease),translate 1.1s var(--ease-expo);transition-delay:calc(var(--d,0) * 1ms)}
.js [data-reveal].is-in{opacity:1;translate:0 0}
.split .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split .word-inner{display:inline-block}
.js .split .word-inner{transform:translateY(110%) rotate(4deg);transform-origin:left bottom;transition:transform 1.15s var(--ease-expo);transition-delay:calc(var(--i,0) * 55ms + 80ms)}
.js .split.is-in .word-inner{transform:none}

/* ---------- 16. Hover (ponteiro fino) ---------- */
@media(hover:hover) and (pointer:fine){
  .navbar-brand:hover .brand-logo{filter:drop-shadow(0 0 18px rgba(77,196,255,1));rotate:360deg}
  .navbar-brand:hover>strong{letter-spacing:.36em}
  .navbar-cta:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 30px rgba(22,141,255,.35)}
  .navbar-cta:hover::before{transform:translateY(0)}
  .navbar-cta:hover svg,.dock-cta:hover svg{transform:translateX(4px)}
  .navbar-links a:hover::after{transform:scaleX(1)}

  .button-primary:hover{background-position:100% 0;filter:drop-shadow(0 16px 40px rgba(22,141,255,.6))}
  .button-primary:hover::after{left:130%}
  .button-primary:hover svg{transform:translate(3px,3px)}
  .button-secondary:hover{color:#fff}
  .button-secondary:hover::after{transform:scaleX(1)}
  .button-secondary:hover svg{transform:scale(1.2)}


  .cap-card:hover .cap-icon{transform:rotate(-12deg) scale(1.1);background:var(--blue)}
  .station-cap .glass:hover{transform:rotateY(0deg) translateZ(30px)}
  .os-card:hover{border-color:rgba(77,196,255,.5);transform:translateY(-4px);background:rgba(13,90,196,.12)}
  .mini-grid span:hover{transform:translateY(-4px) scale(1.02);filter:brightness(1.15)}

  .next-move:hover{border-color:var(--cyan);box-shadow:0 0 50px rgba(22,141,255,.3)}
  .next-move:hover svg{transform:translateY(4px)}
  .contact-main:hover{background-position:100% 0}
  .contact-main:hover::after{left:130%}
  .contact-main:hover svg{transform:rotate(45deg)}
  .contact-links a:hover{padding-left:20px;background:rgba(13,90,196,.10)}
  .contact-links a:hover::after{opacity:1;translate:0 -50%}
  .dock-cta:hover{box-shadow:0 0 0 6px rgba(2,7,17,.7),0 0 0 7px rgba(77,196,255,.5),0 20px 60px rgba(22,141,255,.7)}
}
.button-primary:active,.contact-main:active,.dock-cta:active{filter:brightness(.92)}

/* ---------- 17. Responsivo ---------- */
@media(max-width:1100px){
  .navbar-brand small,.navbar-brand>i{display:none}
  .navbar{gap:22px}
  .navbar-links{gap:20px}
  .emblem{width:min(42vw,480px)}
  .hero-stage .beam-a{left:56%}
  .hero-copy{width:52vw}
  .hero-bottom div{padding:2px 18px}
  .hero-bottom strong{font-size:16px}
}

@media(max-width:860px){
  .navbar{height:66px;grid-template-columns:1fr auto;padding:0 16px}
  .navbar-cta{display:none}
  .navbar-burger{display:block;position:relative;width:42px;height:42px;border:1px solid rgba(77,196,255,.25);border-radius:12px;background:rgba(2,12,23,.7)}
  .navbar-burger span{position:absolute;left:12px;width:17px;height:1px;background:var(--cyan);transition:transform .45s var(--ease),top .45s var(--ease)}
  .navbar-burger span:first-child{top:17px}
  .navbar-burger span:last-child{top:24px}
  .navbar-burger[aria-expanded="true"] span:first-child{top:20.5px;transform:rotate(45deg)}
  .navbar-burger[aria-expanded="true"] span:last-child{top:20.5px;transform:rotate(-45deg)}
  .navbar-links{position:fixed;left:10px;right:10px;top:72px;padding:10px;flex-direction:column;align-items:stretch;gap:0;border:1px solid rgba(77,196,255,.2);border-radius:16px;background:rgba(2,9,17,.97);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s}
  .navbar-links.open{opacity:1;visibility:visible;transform:none}
  .navbar-links a{min-height:50px;display:flex;align-items:center;padding:0 10px;font-size:16px;border-bottom:1px solid rgba(77,196,255,.07)}
  .navbar-links a:last-child{border-bottom:0}
  .navbar-links a::after{display:none}

  /* no celular o hero rola até o fim do texto e só então fixa para a animação */
  .hero-pin{height:auto;padding-bottom:130vh}
  .hero{height:auto;min-height:100svh;padding:96px 0 48px}
  .hero-inner{align-items:flex-start}
  .hero-copy{width:100%;padding-top:0}
  .hero-eyebrow{font-size:9px;gap:8px;padding:8px 12px;letter-spacing:.16em}
  .hero h1{font-size:clamp(34px,10.2vw,54px)}
  .hero-copy>p{font-size:16.5px}
  .hero-bottom{flex-direction:column;gap:14px}
  .hero-bottom div{padding:0 0 0 14px;border-left:1px solid rgba(77,196,255,.3);flex-direction:column-reverse;gap:4px}
  .hero-bottom div:first-child{padding-left:14px;border-left:1px solid rgba(77,196,255,.3)}
  .hero-bottom strong{font-size:17px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:22px}
  .button-primary{justify-content:space-between}
  .button-secondary{align-self:flex-start}
  .scroll-hint{display:none}
  .emblem{width:min(92vw,440px);--emblem-x:78%;top:30%;opacity:.3}
  .beam-a{left:30%}.beam-b{left:62%}.beam-c{left:92%}
  .beam{opacity:.45}

  .zone{padding:84px 0}
  .loader-mark{width:150px;margin-bottom:50px}
  .loader-ring{top:80px;width:196px;height:196px;margin:-98px 0 0 -98px}
  .loader-ring-reverse{width:228px;height:228px;margin:-114px 0 0 -114px}
  .lead{font-size:16.5px}
  .tunnel{padding:70px 0 20px}
  .stations{gap:84px;perspective:none}
  .station-cap,.station-cap[data-side="1"]{width:100%;margin-top:0;align-self:auto}
  .station-cap::before,.station-cap::after{display:none}
  .column-canvas{opacity:.5}
  .split-card{grid-template-columns:1fr;gap:30px;padding:16px 16px 26px}
  .split-copy{padding:0 6px}
  .core{width:min(70%,260px)}
  .os-panel{border-radius:22px}
  .os-grid{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr;gap:34px}
  .panel-flip .panel-copy{order:0}
  .mini-grid span{min-height:86px}

  .next-move{grid-template-columns:1fr auto;gap:4px 16px;padding:16px 14px 16px 24px;border-radius:26px;text-align:left}
  .next-move>span,.next-move>strong{grid-column:1}
  .next-move svg{grid-column:2;grid-row:1/3}
  .contact-inner{grid-template-columns:1fr}
  .contact-main{min-height:104px;padding:0 20px}
  .contact-links a{grid-template-columns:1fr;gap:6px}
  .footer-row{grid-template-columns:1fr;gap:12px}
  .footer-row>i{display:none}
  .dock-cta{bottom:16px;height:44px;font-size:10px}
}

@media(max-height:780px){.scroll-hint{display:none}}

/* ---------- 18. Movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;translate:none!important;filter:none!important}
  .js .split .word-inner{transform:none!important}
  .hero-pin{height:auto}
  .hero{position:relative}
  .hero-copy,.footer-word,.glow-a,.online-photo{translate:none!important}
  .js .station .split .word-inner{transform:none!important}
  .js .station{opacity:1!important;translate:none!important}
}
}