:root{
  --bg:#05060A; --bg2:#0A0C12; --card:rgba(255,255,255,.03); --card2:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --cy:#00F0FF; --ro:#8B4CFF; --tx:#F4F6FA; --mut:#8B92A6; --ok:#22C55E; --wa:#F5C842;
  --f-d:'Space Grotesk',system-ui,sans-serif; --f-b:'Inter',system-ui,sans-serif;
  --grad:linear-gradient(90deg,var(--cy),var(--ro));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--f-b);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(0,240,255,.25)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3,.fd{font-family:var(--f-d);letter-spacing:-.03em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mut{color:var(--mut)}
section{padding:110px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-d);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);margin-bottom:22px}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--grad)}
.h2{font-size:clamp(34px,5vw,56px);font-weight:600;line-height:1.08;margin-bottom:16px}
.sub{color:var(--mut);font-size:17.5px;max-width:620px}
/* ── FUNDO VIVO: mesh + grid SpaceX ── */
.cosmos{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%,rgba(0,240,255,.10),transparent 60%),
    radial-gradient(ellipse 70% 45% at 85% 15%,rgba(139,76,255,.12),transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 110%,rgba(0,240,255,.06),transparent 60%),
    var(--bg);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateY(-40px) scale(1.06)}}
/* ── CARDS GLASS ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(12px);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(0,240,255,.08),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:rgba(0,240,255,.3)}
.card:hover::before{opacity:1}
/* ── BOTÕES ── */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#05060A;font-family:var(--f-d);font-weight:700;font-size:15px;padding:15px 30px;border-radius:100px;text-decoration:none;border:none;cursor:pointer;transition:transform .25s,box-shadow .35s;box-shadow:0 10px 36px rgba(0,240,255,.25)}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 48px rgba(139,76,255,.4)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--tx);border:1px solid rgba(255,255,255,.16);box-shadow:none;backdrop-filter:blur(10px)}
.btn.ghost:hover{border-color:var(--cy);background:rgba(0,240,255,.06)}
/* ── HERO CINEMATOGRÁFICO ── */
.hero-h1{font-size:clamp(44px,7.2vw,86px);font-weight:600;line-height:1.02;letter-spacing:-.045em}
.hero-h1 .ln{display:block;overflow:hidden}
.hero-h1 .ln>span{display:inline-block;transform:translateY(110%);animation:riseUp .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-h1 .ln:nth-child(2)>span{animation-delay:.12s}
@keyframes riseUp{to{transform:none}}
.hero-glow{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:760px;height:760px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,rgba(0,240,255,.14),rgba(139,76,255,.16),rgba(0,240,255,.14));
  filter:blur(60px);opacity:.85;animation:spin 24s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.on{opacity:1;transform:none}
/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(5,6,10,.6);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.06)}
.lng{background:transparent;border:1px solid var(--line);color:var(--mut);font-family:var(--f-d);font-size:11px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer;transition:all .2s}
.lng.on{background:rgba(0,240,255,.12);border-color:rgba(0,240,255,.4);color:var(--cy)}
@media(max-width:860px){.nav-links{display:none}#burger{display:block}}
/* ── DIVISOR ESTILO SPACEX ── */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.35),rgba(139,76,255,.35),transparent);margin:0 auto;max-width:1140px}
/* ── MARQUEE TECNOLOGIAS ── */
.marquee{overflow:hidden;white-space:nowrap;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:inline-flex;gap:56px;animation:mq 30s linear infinite;font-family:var(--f-d);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .cosmos,.hero-glow,.marquee .track{animation:none!important}  /* para o movimento, MANTÉM o visual */
  .rise,.ln>span{transition:none!important;opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}}

/* ═══ HERO TECNOLÓGICO ═══ */
/* Neon REAL em camadas de text-shadow (renderiza em qualquer GPU, sem blur filter) */
.neon .ln>span{
  text-shadow:
    0 0 10px rgba(0,240,255,.85),
    0 0 30px rgba(0,240,255,.50),
    0 0 80px rgba(0,240,255,.30);
}
.neon .grad{
  text-shadow:
    0 0 12px rgba(139,76,255,.90),
    0 0 34px rgba(139,76,255,.55),
    0 0 90px rgba(0,240,255,.35);
}
/* grid tech em perspectiva no rodapé do hero */
.hero-grid{
  position:absolute;left:-20%;right:-20%;bottom:-40px;height:38vh;z-index:-1;
  background-image:
    linear-gradient(rgba(0,240,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,240,255,.13) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(420px) rotateX(58deg);
  transform-origin:center top;
  mask-image:linear-gradient(180deg,transparent 0%,#000 45%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,transparent 96%);
  opacity:.75;
}

/* ═══ CUBO 3D (CSS puro — renderiza em qualquer navegador) ═══ */
.cube-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:900px;min-height:380px}
.cube{
  width:190px;height:190px;position:relative;transform-style:preserve-3d;
  animation:cubeSpin 14s linear infinite;
}
.cube .face{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,240,255,.09),rgba(139,76,255,.09));
  border:1.5px solid rgba(0,240,255,.55);
  box-shadow:0 0 24px rgba(0,240,255,.22), inset 0 0 34px rgba(139,76,255,.14);
  backdrop-filter:blur(4px);
}
.cube .face .fd{font-size:44px;font-weight:700;color:var(--cy);text-shadow:0 0 18px rgba(0,240,255,.8)}
.f-front {transform:translateZ(95px)}
.f-back  {transform:rotateY(180deg) translateZ(95px)}
.f-right {transform:rotateY(90deg) translateZ(95px)}
.f-left  {transform:rotateY(-90deg) translateZ(95px)}
.f-top   {transform:rotateX(90deg) translateZ(95px)}
.f-bottom{transform:rotateX(-90deg) translateZ(95px)}
@keyframes cubeSpin{
  0%  {transform:rotateX(-18deg) rotateY(0)}
  100%{transform:rotateX(-18deg) rotateY(360deg)}
}
.cube-shadow{
  width:170px;height:26px;margin-top:34px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,240,255,.30),transparent 70%);
  filter:blur(8px);animation:cubeShadow 14s ease-in-out infinite alternate;
}
@keyframes cubeShadow{from{opacity:.55;transform:scaleX(.85)}to{opacity:.9;transform:scaleX(1.05)}}
/* cubo reage ao mouse (tilt) — via JS */
.cube-stage:hover .cube{animation-play-state:paused}
@media(max-width:900px){
  .cube-stage{min-height:300px;order:-1}
  .cube{width:140px;height:140px}
  .cube .face .fd{font-size:32px}
  .f-front {transform:translateZ(70px)}
  .f-back  {transform:rotateY(180deg) translateZ(70px)}
  .f-right {transform:rotateY(90deg) translateZ(70px)}
  .f-left  {transform:rotateY(-90deg) translateZ(70px)}
  .f-top   {transform:rotateX(90deg) translateZ(70px)}
  .f-bottom{transform:rotateX(-90deg) translateZ(70px)}
}