:root{
  --bg:#070A0F;
  --bg2:#0A1020;
  --card:#0B1223;
  --line:rgba(160, 220, 255, .18);
  --line2:rgba(160, 220, 255, .28);
  --text:rgba(235, 245, 255, .92);
  --muted:rgba(235, 245, 255, .72);
  --dim:rgba(235, 245, 255, .55);
  --accent:rgba(120, 210, 255, .95);
  --accent2:rgba(120, 255, 220, .85);
  --danger:rgba(255, 120, 140, .9);

  --radius:16px;
  --radius2:22px;
  --shadow:0 18px 55px rgba(0,0,0,.55);

  --max:1200px;
  --pad:clamp(16px, 3vw, 28px);
  --topbarH:72px;
  --hudNavW: 320px;
  --hudNavH: 560px;
  --hudNavOffsetX: var(--hudInset);
  --hudNavOffsetY: 30px;
  --hudNavRingExtraLeft: 5px;
  --hudNavRingShiftX: calc(0px - var(--hudNavRingExtraLeft));

  --hudNavRingScaleX: 1.18;
  --hudNavRingScaleY: 0.88;
  --hudNavRingNudgeX: 0px;
  --hudNavRingNudgeY: 0px;

  --hudNavLinkPadX: 14px;
  --hudNavLinkExtraRight: 20px;
  --hudNavLinksShiftX: 20px;

  --gridGap:clamp(14px, 2.4vw, 22px);
  --stroke:1px;

  --hudInset: clamp(14px, 2vw, 22px);
  --hudCornerStrokeInset: 14px;
  --hudContentInset: calc(var(--hudInset) + var(--hudCornerStrokeInset));

  /* Default fade thickness inside HUD scroll */
  --hudFade: 30px;

  /* View scroll padding (controls where content starts/ends inside the HUD frame) */
  --viewScrollPadTop: clamp(46px, 7vh, 86px);
  --viewScrollPadBottom: clamp(46px, 7vh, 86px);

    /* HUD scroll fade (editable knobs)
      - Set --hudFadeOn: 0 to disable the fade completely
      - Adjust --hudFadeTopBase / --hudFadeBottomBase independently
    */
  --hudFadeOn: 1;
  --hudFadeTopBase: var(--hudFade);
  --hudFadeBottomBase: var(--hudFade);
  --hudFadeTop: calc(var(--hudFadeTopBase) * var(--hudFadeOn));
  --hudFadeBottom: calc(var(--hudFadeBottomBase) * var(--hudFadeOn));

  --font-body: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-display: "Orbitron", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{overflow:hidden}
body{
  margin:0;
  font-family: var(--font-body);
  background: radial-gradient(900px 600px at 90% 10%, rgba(120,255,220,.06), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #04060A 100%);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
  overflow-y:hidden;
  overscroll-behavior: none;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* Global star canvas (static positions, twinkle only; drawn by JS) */
.spaceStars{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

/* Cursor hunt overlay: target stars + direction hint */
.huntCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:70;
}

/* Gate UI until preloader completes */
body.is-preloading .topbar,
body.is-preloading .hudNav,
body.is-preloading main,
body.is-preloading .footer{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Prevent any flash-of-content before preloader completes */
body.is-preloading main,
body.is-preloading .footer{
  display:none;
}

body .topbar,
body .hudNav,
body main,
body .footer{transition: opacity 420ms ease;}

/* Preloader overlay */
.preloader{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(7,10,15,.38), rgba(7,10,15,.30));
}

/* Ensure hidden preloaders stay hidden (author CSS overrides UA defaults) */
.preloader[hidden]{
  display:none !important;
}

/* Red game preloader */
.preloader--game{
  z-index:98;
  background: radial-gradient(900px 600px at 50% 30%, rgba(255, 80, 95, .10), transparent 60%),
              linear-gradient(180deg, rgba(7,10,15,.78), rgba(7,10,15,.92));
}

.preloader--game .preloader__title{color: rgba(255, 140, 155, .92)}
.preloader--game .preloader__scan{
  background: linear-gradient(90deg, transparent, rgba(255, 80, 95, .22), rgba(255, 140, 155, .26), transparent);
}
.preloader--game .preloader__grid{
  background:
    linear-gradient(transparent 0 28px, rgba(255, 80, 95, .06) 28px 29px, transparent 29px),
    linear-gradient(90deg, transparent 0 28px, rgba(255, 80, 95, .06) 28px 29px, transparent 29px);
  opacity:.38;
}
.preloader--game .preloader__ring{
  border-color: rgba(255, 80, 95, .22);
  box-shadow: 0 0 0 1px rgba(255, 80, 95, .10) inset;
  background:
    radial-gradient(closest-side, rgba(255, 140, 155, .12), transparent 70%),
    radial-gradient(closest-side, rgba(255, 80, 95, .10), transparent 78%);
}
.preloader--game .preloader__bar{border-color: rgba(255, 80, 95, .18)}
.preloader--game .preloader__barFill{
  background: linear-gradient(90deg, rgba(255, 80, 95, .50), rgba(255, 140, 155, .35));
}

/* Gate UI while game preloader runs */
body.is-game-preloading .topbar,
body.is-game-preloading .hudNav,
body.is-game-preloading main,
body.is-game-preloading .footer{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Alert red HUD flash */
body.hud-alert .hud,
body.hud-alert .hudNav,
body.hud-alert .topbar{
  filter: drop-shadow(0 0 18px rgba(255,80,95,.16));
  animation: hudAlertBlink 0.18s steps(2) 10;
}

body.hud-alert .hud__corner path{stroke: rgba(255, 80, 95, .85) !important;}
body.hud-alert .scanline{background: linear-gradient(90deg, transparent, rgba(255, 80, 95, .45), transparent) !important;}
body.hud-alert .gridlines{
  background:
    linear-gradient(to right, rgba(255, 80, 95, .10) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(255, 80, 95, .10) 1px, transparent 1px) 0 0 / 64px 64px;
}

@keyframes hudAlertBlink{
  0%{opacity:1}
  50%{opacity:.25}
  100%{opacity:1}
}

.quantumTravel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

.preloader__hud{z-index:1;}
.preloader__inner{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

/* Keep the logo exactly at the screen center */
.preloader__logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

/* Status block sits below the centered logo */
.preloader__status{
  position:absolute;
  left:50%;
  top:calc(50% + 120px);
  transform:translateX(-50%);
  width:min(560px, 92vw);
}

.preloader__hud{position:absolute;inset:0;pointer-events:none;}
.preloader__grid{
  position:absolute;inset:-20%;
  background:
    linear-gradient(transparent 0 28px, rgba(120,210,255,.06) 28px 29px, transparent 29px),
    linear-gradient(90deg, transparent 0 28px, rgba(120,210,255,.06) 28px 29px, transparent 29px);
  background-size: 29px 29px;
  opacity:.35;
  transform: perspective(900px) rotateX(62deg) translateY(18%);
  transform-origin: 50% 70%;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 72%);
}
.preloader__scan{
  position:absolute;
  left:-10%;
  right:-10%;
  height:2px;
  top:20%;
  background: linear-gradient(90deg, transparent, rgba(120,255,220,.18), rgba(120,210,255,.22), transparent);
  filter: blur(.2px);
  opacity:.65;
  animation: preScan 1.35s linear infinite;
}

@keyframes preScan{
  0%{transform: translateY(0)}
  100%{transform: translateY(62vh)}
}

.preloader__inner{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  display:block;
  padding:0;
}

.preloader__logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:160px;
  height:160px;
  display:grid;
  place-items:center;
}
.preloader__logo img{width:160px;height:160px;object-fit:contain;opacity:.98;filter: drop-shadow(0 0 18px rgba(120,210,255,.18));}

.preloader__ring{
  position:absolute;
  inset:-18px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.22);
  box-shadow: 0 0 0 1px rgba(120,210,255,.10) inset;
  background:
    radial-gradient(closest-side, rgba(120,255,220,.12), transparent 70%),
    radial-gradient(closest-side, rgba(120,210,255,.10), transparent 78%);
  animation: preQuantum 1.15s ease-in-out infinite;
}

@keyframes preQuantum{
  0%,100%{transform: scale(.96); opacity:.55;}
  55%{transform: scale(1.04); opacity:.92;}
}

.preloader__status{width:100%;max-width:560px;text-align:center}
.preloader__title{
  font-family: var(--font-display);
  letter-spacing:.18em;
  font-size:12px;
  color:var(--muted);
}

.preloader__lines{margin-top:10px;display:grid;gap:6px}
.preloader__line{
  font-family: var(--font-display);
  letter-spacing:.10em;
  font-size:11px;
  color:rgba(235,245,255,.78);
  text-transform:uppercase;
}

.preloader__bar{
  margin:14px auto 0;
  width:min(520px, 86vw);
  height:10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.18);
  background: rgba(11,18,35,.45);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(120,210,255,.08) inset;
}
.preloader__barFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(120,210,255,.45), rgba(120,255,220,.35));
}

.preloader__pct{margin-top:8px;color:var(--dim);font-size:12px;letter-spacing:.12em;font-family: var(--font-display)}

.preloader.is-done{
  animation: preFade 520ms ease forwards;
}

@keyframes preFade{
  0%{opacity:1}
  55%{opacity:1}
  100%{opacity:0; pointer-events:none;}
}

@media (prefers-reduced-motion: reduce){
  .preloader__scan,.preloader__ring{animation:none}
  .preloader.is-done{animation:none; opacity:0; pointer-events:none}
}

/* Cursor FX: small animation under the cursor (max 60px) */
.cursorFx{
  position:fixed;
  left:0;
  top:0;
  width:10px;
  height:10px;
  border-radius:999px;
  pointer-events:none;
  z-index:80;
  opacity:0;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
}

.cursorFx.is-on{opacity:1;}

.cursorFx::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  background: radial-gradient(closest-side, var(--line2), transparent 72%);
}

.cursorFx::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:60px;
  height:60px;
  border-radius:999px;
  border:1px solid var(--line);
  transform: translate(-50%, -50%) scale(.55);
  opacity:.0;
  animation: cursorPulse 1.15s ease-out infinite;
}

@keyframes cursorPulse{
  0%{transform: translate(-50%, -50%) scale(.55); opacity: 0;}
  20%{opacity: .9;}
  100%{transform: translate(-50%, -50%) scale(1); opacity: 0;}
}

@media (prefers-reduced-motion: reduce){
  .cursorFx{display:none;}
}

@media (hover: none), (pointer: coarse){
  .cursorFx{display:none;}
}

/* Display font: titles + menus */
h1, h2, h3,
.kicker,
.brand__name,
.nav__link,
.menuPanel__link,
.hudNav__link,
.panel__title,
.section__title,
.stat__num{
  font-family: var(--font-display);
}

main{flex:1 1 auto;min-height:0;overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit}

/* Avoid default focus ring flash on programmatically focused headings */
h1:focus, h2:focus, [role="heading"]:focus{outline:none}
h1:focus-visible, h2:focus-visible, [role="heading"]:focus-visible{
  outline:2px solid rgba(120,210,255,.45);
  outline-offset:4px;
  border-radius:12px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;overflow:hidden;
}
.skip:focus{left:16px;top:16px;width:auto;height:auto;z-index:1000;background:var(--card);padding:10px 12px;border-radius:12px;border:1px solid var(--line2)}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

.topbar{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(7,10,15,.88), rgba(7,10,15,.65));
  border-bottom:1px solid rgba(160,220,255,.16);
}
.topbar__inner{
  height:var(--topbarH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{display:flex;align-items:center;gap:12px;min-width:210px}
.brand--link{text-decoration:none}
.brand--link:hover .brand__tag{color:var(--muted)}
.brand__mark{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid rgba(160,220,255,.22)}
.brand__name{display:block;letter-spacing:.12em;font-size:14px}
.brand__tag{display:block;color:var(--dim);font-size:12px}

.nav{display:flex;align-items:center;gap:10px}
.nav__link{
  position:relative;
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  letter-spacing:.06em;
  font-size:12px;
  text-transform:uppercase;
}
.nav__link:hover{border-color:rgba(160,220,255,.18);color:var(--text)}
.nav__link.is-active{
  color:var(--text);
  border-color:rgba(120,210,255,.28);
  box-shadow: 0 0 0 1px rgba(120,210,255,.14) inset;
}
.nav__link--cta{
  color:rgba(10,16,32,.98);
  background: linear-gradient(135deg, rgba(120,210,255,.95), rgba(120,255,220,.78));
  border-color: transparent;
}
.nav__link--cta:hover{filter:saturate(1.1) contrast(1.05)}

.menu{
  display:none;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.18);
  background: rgba(11,18,35,.55);
  color:var(--text);
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(120,210,255,.10) inset;
}
.menu:hover{border-color:rgba(160,220,255,.28)}
.menu svg{width:22px;height:22px}

.menuPanel{
  border-top:1px solid rgba(160,220,255,.12);
  background: rgba(7,10,15,.92);
}
.menuPanel__inner{padding:14px 0;display:grid;gap:10px}
.menuPanel__link{
  text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.16);
  background: rgba(11,18,35,.35);
  color:var(--text);
}
.menuPanel__link:hover{border-color:rgba(160,220,255,.26)}
.menuPanel__link--cta{background: linear-gradient(135deg, rgba(120,210,255,.22), rgba(120,255,220,.14));}

/* HUD overlay navigation (semi-circle / moon) */
.hudNav{display:none}

@media (min-width: 941px){
  :root{--hudSafe: clamp(96px, 10vw, 190px)}

  /* Desktop uses HUD nav; hide the duplicate header menu */
  .topbar{display:none}

  /* Shift content so HUD never overlaps readable text */
  main .container,
  .footer .container{
    padding-left: calc(var(--pad) + var(--hudSafe) + 30px);
    padding-right: var(--pad);
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    transform: translateX(clamp(0px, 8vw, 140px));
  }

  /* Keep header aligned normally */
  .topbar .container{padding:0 var(--pad)}

  .hudNav{
    display:block;
    position:fixed;
    left:var(--hudNavOffsetX);
    top:50%;
    transform:translateY(calc(-50% - var(--hudNavOffsetY)));
    width:var(--hudNavW);
    height:var(--hudNavH);
    z-index:55;
    pointer-events:none;
  }

  .hudNav__ring{
    position:absolute;
    inset:0;
    transform: translateX(var(--hudNavRingShiftX));
    pointer-events:none;
    filter: drop-shadow(0 0 22px rgba(120,210,255,.12));
    opacity:.95;
  }
  .hudNav__ring svg{width:100%;height:100%;overflow:visible}
  .hudNav__ring svg{
    transform:
      translate(var(--hudNavRingNudgeX), var(--hudNavRingNudgeY))
      scaleX(-1)
      scaleX(var(--hudNavRingScaleX))
      scaleY(var(--hudNavRingScaleY));
    transform-origin:50% 50%;
  }

  .hudNav__logo{
    position:absolute;
    left:35%;
    top:48%;
    transform:translate(-50%,-50%);
    width:200px;
    height:200px;
    pointer-events:none;
    z-index:1;
    filter: drop-shadow(0 0 14px rgba(120,210,255,.18));
    animation: hudLogoGlow 3.4s ease-in-out infinite;
  }
  .hudNav__logo::after{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:999px;
    background: radial-gradient(closest-side, rgba(120,255,220,.16), transparent 62%),
                radial-gradient(closest-side, rgba(120,210,255,.14), transparent 70%);
    opacity:.55;
    filter: blur(8px);
    transform: scale(.96);
    animation: hudLogoBloom 3.4s ease-in-out infinite;
    pointer-events:none;
  }
  .hudNav__logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    opacity:.96;
  }

  @keyframes hudLogoGlow{
    0%, 100%{filter: drop-shadow(0 0 14px rgba(120,210,255,.16)) drop-shadow(0 0 0 rgba(120,255,220,0));}
    55%{filter: drop-shadow(0 0 26px rgba(120,210,255,.24)) drop-shadow(0 0 18px rgba(120,255,220,.14));}
  }

  @keyframes hudLogoBloom{
    0%, 100%{opacity:.45; transform: scale(.95);}
    55%{opacity:.78; transform: scale(1.02);}
  }

  .hudArc{
    stroke: rgba(120,210,255,.32);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 980;
    stroke-dashoffset: 980;
    animation: hudRingIn 2.05s cubic-bezier(.18,.88,.22,1) forwards;
  }
  .hudArc--inner{stroke: rgba(120,255,220,.18);animation-delay:.10s}

  .hudTick{
    stroke: rgba(235,245,255,.16);
    stroke-width: 1;
    stroke-linecap: round;
    opacity:.9;
  }

  .hudMarker{
    transform: translate3d(0,0,0);
    transform-origin: 0 0;
    transition: transform .55s cubic-bezier(.18,.88,.22,1);
    opacity:0;
  }
  .hudMarker__core{fill: rgba(120,255,220,.92)}
  .hudMarker__glow{fill: rgba(120,210,255,.14)}

  @keyframes hudRingIn{
    0%{stroke-dashoffset:980;opacity:.15}
    60%{opacity:.95}
    100%{stroke-dashoffset:0;opacity:1}
  }

  .hudNav__links{
    position:absolute;
    inset:0;
    pointer-events:auto;
    z-index:2;
  }

  .hudNav__link{
    position:relative;
    text-decoration:none;
    display:flex;
    align-items:center;
    height:46px;
    padding:0;
    padding-right: var(--hudNavLinkExtraRight);
    border-radius:16px;
    border:1px solid rgba(160,220,255,.14);
    background: rgba(11,18,35,.22);
    box-shadow:0 0 0 1px rgba(120,210,255,.06) inset;
    color:var(--muted);
    letter-spacing:.10em;
    text-transform:uppercase;
    font-size:12px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    width: 194px;
    max-width: calc(var(--hudNavW) - 120px);
    position:absolute;
    left:110px;
    top:80px;
    --hudShift: 0px;
    --hudDelay: 0ms;
    opacity:0;
    transform:translate(-50%, -50%) translateX(calc(var(--hudShift) + var(--hudNavLinksShiftX))) translateY(10px);
    filter: blur(1px);
    transition: transform .55s cubic-bezier(.18,.88,.22,1), border-color .32s ease, background .32s ease, color .32s ease;
  }

  .hudNav__label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 var(--hudNavLinkPadX);
    pointer-events:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hudNav.is-ready .hudNav__link{
    animation: hudItemIn 1.15s cubic-bezier(.18,.88,.22,1) forwards;
    animation-delay: calc(220ms + var(--hudDelay));
  }

  .hudNav.is-ready .hudMarker{
    animation: hudMarkerIn 1.05s cubic-bezier(.18,.88,.22,1) forwards;
    animation-delay: 640ms;
  }

  .hudNav__link::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background: rgba(120,210,255,.18);
    opacity:.9;
  }
  .hudNav__link::after{
    content:"";
    position:absolute;
    inset:-2px;
    background: radial-gradient(420px 120px at 10% 50%, rgba(120,210,255,.18), transparent 60%);
    opacity:0;
    transition: opacity .25s ease;
    pointer-events:none;
  }
  .hudNav__link:hover{color:var(--text);border-color:rgba(160,220,255,.22)}
  .hudNav__link:hover::after{opacity:.8}

  .hudNav__link.is-active{
    color:var(--text);
    border-color:rgba(120,210,255,.36);
    background: linear-gradient(180deg, rgba(120,210,255,.10), rgba(11,18,35,.22));
    padding-left:0;
    --hudShift: 12px;
    animation: hudPulse 2.1s ease-in-out infinite;
  }
  .hudNav__link.is-active::before{
    background: linear-gradient(180deg, rgba(120,255,220,.85), rgba(120,210,255,.85));
    box-shadow: 0 0 18px rgba(120,210,255,.22);
    width:15px;
  }
  .hudNav__link.is-active::after{opacity:.95}

  .hudNav__link--cta{
    color:rgba(10,16,32,.98);
    background: linear-gradient(135deg, rgba(120,210,255,.95), rgba(120,255,220,.78));
    border-color: transparent;
  }
  .hudNav__link--cta::before{background: rgba(10,16,32,.25)}

  @keyframes hudPulse{
    0%,100%{box-shadow:0 0 0 1px rgba(120,210,255,.08) inset}
    50%{box-shadow:0 0 0 1px rgba(120,210,255,.14) inset, 0 0 18px rgba(120,210,255,.10)}
  }

  @keyframes hudItemIn{
    0%{opacity:0;transform:translate(-50%, -50%) translateX(calc(var(--hudShift) + var(--hudNavLinksShiftX))) translateY(10px);filter:blur(2px)}
    55%{opacity:1}
    100%{opacity:1;transform:translate(-50%, -50%) translateX(calc(var(--hudShift) + var(--hudNavLinksShiftX)));filter:none}
  }

  @keyframes hudMarkerIn{
    0%{opacity:0;filter:blur(2px)}
    100%{opacity:1;filter:none}
  }
}

.hero{
  position:relative;
  height:100%;
  min-height:0;
  display:grid;
  align-items:stretch;
  padding:0;
  overflow:hidden;
}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns: 1.2fr .8fr;gap: clamp(18px, 3vw, 34px);align-items:center;width:100%;max-width:100%}
.hero__copy{max-width:720px}
.kicker{display:inline-flex;gap:10px;align-items:center;color:var(--dim);letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin:0 0 14px}
.hero__title{margin:0 0 10px;font-size: clamp(38px, 6vw, 64px);letter-spacing:.08em}
.hero__subtitle{margin:0 0 22px;color:var(--muted);font-size: clamp(14px, 1.6vw, 18px);max-width:60ch}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.22);
  background: linear-gradient(180deg, rgba(120,210,255,.20), rgba(11,18,35,.28));
  text-decoration:none;
  color:var(--text);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.btn:hover{border-color:rgba(120,210,255,.34)}
.btn--ghost{background:rgba(11,18,35,.28)}

.btn[aria-disabled="true"],
.btn.is-disabled{
  opacity:.65;
  pointer-events:none;
}

.hero__stats{margin-top:20px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.stat{border:1px solid rgba(160,220,255,.16);background:rgba(11,18,35,.28);border-radius:16px;padding:12px 14px;box-shadow:0 0 0 1px rgba(120,210,255,.08) inset}
.stat__num{font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.stat__label{color:var(--dim);font-size:12px;margin-top:4px}

.discordWidget{
  margin-top:16px;
  max-width:100%;
  padding:14px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items:start;
  column-gap:12px;
}

.discordWidget__content{min-width:0;}
.discordWidget__content .panel__title{margin:0;}

.discordWidget__mark{
  width:100px;
  height:100px;
  flex:0 0 100px;
  object-fit:contain;
  opacity:.92;
  pointer-events:none;
  filter: drop-shadow(0 0 12px rgba(120,210,255,.16));
  justify-self:end;
  align-self:start;
}

.discordWidget__members{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  max-height:240px;
  overflow:auto;
  overscroll-behavior: contain;
  padding-right:6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,210,255,.45) rgba(0,0,0,0);
}

.discordWidget__members::-webkit-scrollbar{width:10px}
.discordWidget__members::-webkit-scrollbar-track{background: rgba(0,0,0,0)}
.discordWidget__members::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(120,255,220,.45), rgba(120,210,255,.35));
  border-radius:999px;
  border:2px solid rgba(7,10,15,.75);
}
.discordWidget__members::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(120,255,220,.60), rgba(120,210,255,.48));
}
.discordMember{
  border:1px solid rgba(160,220,255,.14);
  background:rgba(7,10,15,.40);
  border-radius:14px;
  padding:10px 12px;
}
.discordMember__left{display:flex;align-items:center;gap:10px;min-width:0}
.discordMember__avatar{
  width:32px;height:32px;
  border-radius:12px;
  border:1px solid rgba(160,220,255,.16);
  object-fit:cover;
  flex:0 0 auto;
}
.discordMember__text{min-width:0}
.discordMember__name{font-weight:650;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discordMember__status{font-size:12px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.discordMember--empty{color:var(--dim);font-size:12px}

@media (max-width: 520px){
  .discordWidget{max-width:100%;}
  .discordWidget__mark{justify-self:end}
  .discordWidget__members{grid-template-columns: 1fr; max-height:260px}
}

.hero__visual{position:relative}
.frame{
  width:100%;
  aspect-ratio: 16/10;
  object-fit:cover;
  border-radius: var(--radius2);
  border:1px solid rgba(160,220,255,.22);
  box-shadow: var(--shadow);
  background: rgba(11,18,35,.28);
}

.hero__visualOverlay{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  pointer-events:none;
}

.tagPill{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.22);
  background: rgba(7,10,15,.55);
  color:rgba(235,245,255,.88);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  box-shadow:0 0 0 1px rgba(120,210,255,.08) inset;
  backdrop-filter: blur(8px);
}

.hero__visual{
  will-change: transform;
  transform: translateZ(0);
}
.hero__caption{margin-top:10px;color:var(--dim);font-size:12px;letter-spacing:.06em}

.hero__fade{position:absolute;left:0;right:0;bottom:-1px;height:140px;background: linear-gradient(180deg, transparent, rgba(4,6,10,1));z-index:1}

/* HUD overlays */
.hud{
  position:absolute;
  inset: var(--hudInset);
  pointer-events:none;
  z-index:2;
  opacity:.95;
  overflow:hidden;
}
.hud__corner{position:absolute;width:180px;height:180px;opacity:.65;filter:drop-shadow(0 0 14px rgba(120,210,255,.12))}
.hud__corner--tl{top:0;left:0}
.hud__corner--tr{top:0;right:0;transform:scaleX(-1)}
.hud__corner--bl{bottom:0;left:0;transform:scaleY(-1)}
.hud__corner--br{bottom:0;right:0;transform:scale(-1)}

.hud__corner path{
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: hudDraw 3.2s ease forwards;
}
.hud__corner path:nth-child(2){animation-delay:.08s}
.hud__corner path:nth-child(3){animation-delay:.16s}
.hud__corner path:nth-child(4){animation-delay:.22s}
.hud__corner path:nth-child(5){animation-delay:.28s}

.scanline{
  position:absolute;
  left:0;right:0;
  top:-12%;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(120,210,255,.35), transparent);
  opacity:.7;
  animation: scan 8.2s linear infinite;
}
.gridlines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(160,220,255,.10) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(160,220,255,.10) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 85%);
  opacity:.34;
}

@keyframes scan{
  0%{transform:translateY(0)}
  100%{transform:translateY(120vh)}
}

@keyframes hudDraw{
  0%{stroke-dashoffset:240;opacity:.25}
  55%{opacity:.9}
  100%{stroke-dashoffset:0;opacity:.65}
}

.view{height:100%}

.section{padding: clamp(46px, 7vh, 86px) 0}
.section.view{position:relative;padding:0;height:100%}

.view__scroll{
  position:absolute;
  z-index:1;
  inset: var(--hudContentInset);
  border-radius: var(--radius2);
  overflow:auto;
  overscroll-behavior: contain;
  padding: 0;
  padding-top: var(--viewScrollPadTop);
  padding-bottom: var(--viewScrollPadBottom);
  scrollbar-width: thin;
  scrollbar-color: rgba(120,210,255,.45) rgba(0,0,0,0);

  /* Fade top/bottom edges inside the HUD frame */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 var(--hudFadeTop),
    #000 calc(100% - var(--hudFadeBottom)),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 var(--hudFadeTop),
    #000 calc(100% - var(--hudFadeBottom)),
    transparent
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Quick kill-switch if you ever want to debug layout without the HUD fade */
body.noHudFade .view__scroll{
  -webkit-mask-image: none;
  mask-image: none;
}

.view__scroll::-webkit-scrollbar{width:10px}
.view__scroll::-webkit-scrollbar-track{background: rgba(0,0,0,0)}
.view__scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(120,255,220,.45), rgba(120,210,255,.35));
  border-radius:999px;
  border:2px solid rgba(7,10,15,.75);
}
.view__scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(120,255,220,.60), rgba(120,210,255,.48));
}

.view__scroll--hero{
  --viewScrollPadTop: clamp(36px, 6vh, 64px);
  --viewScrollPadBottom: clamp(36px, 6vh, 64px);
}

.view__scroll--game{
  --viewScrollPadTop: clamp(26px, 4vh, 44px);
  --viewScrollPadBottom: clamp(26px, 4vh, 44px);
}

@media (min-width: 941px){

}
.section__header{max-width:860px;margin-bottom:22px}
.section__title{margin:0 0 10px;letter-spacing:.10em;text-transform:uppercase;font-size: clamp(18px, 2.1vw, 26px)}
.section__lead{margin:0;color:var(--muted);max-width:75ch}

.grid{display:grid;gap:var(--gridGap)}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}

.card{
  border:1px solid rgba(160,220,255,.16);
  background: linear-gradient(180deg, rgba(11,18,35,.55), rgba(11,18,35,.22));
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow:0 0 0 1px rgba(120,210,255,.08) inset;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 250px at 30% 0%, rgba(120,210,255,.14), transparent 55%),
              radial-gradient(520px 250px at 90% 10%, rgba(120,255,220,.10), transparent 50%);
  opacity:.7;
  pointer-events:none;
}
.card > *{position:relative;z-index:1}

.card__title{margin:0 0 8px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.card__text{margin:0;color:var(--muted)}

.card--media{padding:0 0 14px}
.card__img{
  width:100%;
  height:170px;
  object-fit:cover;
  border-bottom:1px solid rgba(160,220,255,.14);
}
.card--media .card__title,.card--media .card__text{padding:0 16px}
.card--media .card__title{margin-top:14px}

.divider{height:1px;background:rgba(160,220,255,.14);margin:28px 0 0}

.accordion{border:1px solid rgba(160,220,255,.16);border-radius:var(--radius);background:rgba(11,18,35,.25);overflow:hidden}
.accordion__trigger{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text);
  padding:14px 14px;
  cursor:pointer;
  letter-spacing:.06em;
}
.accordion__trigger:hover{background:rgba(120,210,255,.06)}
.accordion__trigger[aria-expanded="true"]{border-bottom:1px solid rgba(160,220,255,.14)}
.accordion__panel{padding:14px 14px;color:var(--muted)}

.timeline{display:grid;gap:14px;position:relative}
.timeline::before{
  content:"";
  position:absolute;
  left:14px;
  top:10px;
  bottom:10px;
  width:1px;
  background: linear-gradient(180deg, transparent, rgba(120,210,255,.26), transparent);
}
.titem{position:relative;padding:14px 14px 14px 44px;border:1px solid rgba(160,220,255,.14);border-radius:var(--radius);background:rgba(11,18,35,.22)}
.titem__dot{position:absolute;left:9px;top:18px;width:11px;height:11px;border-radius:999px;background:rgba(120,210,255,.75);box-shadow:0 0 0 4px rgba(120,210,255,.12)}
.titem__title{margin:0 0 8px;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.titem__text{margin:0;color:var(--muted)}

.banner{display:grid;grid-template-columns:.45fr .55fr;gap:var(--gridGap);margin-top:22px;align-items:stretch}
.banner__media img{width:100%;height:100%;min-height:220px;object-fit:cover;border-radius:var(--radius2);border:1px solid rgba(160,220,255,.18)}
.banner__copy{border:1px solid rgba(160,220,255,.16);border-radius:var(--radius2);background:rgba(11,18,35,.22);padding:18px}
.banner__quote{margin:0 0 10px;font-size:18px;color:var(--text)}
.banner__meta{margin:0;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;font-size:12px}

.split{display:grid;grid-template-columns: .9fr 1.1fr;gap:var(--gridGap);margin-top:22px;align-items:center}
.split__media img{width:100%;aspect-ratio: 16/10;object-fit:cover;border-radius:var(--radius2);border:1px solid rgba(160,220,255,.18)}
.split__title{margin:0 0 12px;letter-spacing:.08em;text-transform:uppercase;font-size:15px}

.checklist{margin:0;padding-left:18px;color:var(--muted)}
.checklist li{margin:8px 0}

.gallery{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--gridGap)}
.shot{margin:0;border:1px solid rgba(160,220,255,.16);border-radius:var(--radius);background:rgba(11,18,35,.22);overflow:hidden}
.shot img{width:100%;height:180px;object-fit:cover;border-bottom:1px solid rgba(160,220,255,.14)}
.shot figcaption{padding:12px 12px;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.guideWrap{display:grid;grid-template-columns: 1.1fr .9fr;gap:var(--gridGap);align-items:start}

.guide__progress{display:flex;align-items:center;gap:12px;margin:12px 0 16px}
.guide__bar{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.18);
  background: rgba(7,10,15,.45);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(120,210,255,.08) inset;
}
.guide__barFill{height:100%;width:0%;background: linear-gradient(90deg, rgba(120,210,255,.45), rgba(120,255,220,.35));transition: width .35s ease;}
.guide__pct{min-width:48px;text-align:right;color:var(--dim);font-size:12px;letter-spacing:.12em;font-family: var(--font-display)}

.guide__steps{display:grid;gap:12px}

.guideAcc .accordion__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family: var(--font-display);
  letter-spacing:.10em;
  text-transform:uppercase;
}

.guideAcc__badge{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.18);
  background: rgba(7,10,15,.45);
  color:rgba(235,245,255,.70);
  font-size:11px;
  letter-spacing:.14em;
  flex:0 0 auto;
}

.guideAcc__badge.is-done{
  border-color: rgba(120,255,220,.28);
  background: linear-gradient(135deg, rgba(120,255,220,.14), rgba(120,210,255,.10));
  color: rgba(235,245,255,.86);
}

.guideCheck{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted)}
.guideCheck input{width:18px;height:18px;accent-color: rgba(120,255,220,.85)}

.guideTemplate textarea{margin-top:10px}
.guideTemplate__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.formWrap{display:grid;grid-template-columns: 1.1fr .9fr;gap:var(--gridGap);align-items:start}
.form{
  border:1px solid rgba(160,220,255,.16);
  border-radius:var(--radius2);
  background:rgba(11,18,35,.22);
  padding:18px;
}
.field{display:grid;gap:8px;margin-bottom:12px}
label{color:var(--dim);font-size:12px;letter-spacing:.10em;text-transform:uppercase}
input,select,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.14);
  background:rgba(7,10,15,.55);
  color:var(--text);
  padding:12px 12px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(120,210,255,.35);box-shadow:0 0 0 4px rgba(120,210,255,.10)}

.form__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.form__hint{margin:10px 0 0;color:var(--dim);font-size:12px}

.panel{
  border:1px solid rgba(160,220,255,.16);
  border-radius:var(--radius2);
  background:rgba(11,18,35,.22);
  padding:18px;
}
.panel__title{margin:0 0 8px;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.panel__text{margin:0 0 12px;color:var(--muted)}
.links{display:grid;gap:10px;margin-bottom:14px}
.link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.14);
  background:rgba(7,10,15,.55);
  text-decoration:none;
  color:var(--text);
}
.link:hover{border-color:rgba(160,220,255,.26)}
.link[aria-disabled="true"]{opacity:.75;pointer-events:none}

/* Game */
.gameWrap{display:grid;gap:14px}
.gameHud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.gameHud__left{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.gameStat{border:1px solid rgba(160,220,255,.14);background:rgba(7,10,15,.40);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:baseline}
.gameStage{position:relative;border-radius:var(--radius2);border:1px solid rgba(160,220,255,.18);background:rgba(7,10,15,.55);overflow:hidden;box-shadow: var(--shadow)}
.gameCanvas{display:block;width:100%;height:auto;aspect-ratio:16/9}
.gameOverlay{position:absolute;inset:0;display:grid;place-items:center;background: rgba(7,10,15,.55);backdrop-filter: blur(6px);}
.gameOverlay[hidden]{display:none !important;}

.rankList{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-height: 220px;overflow:auto}
.rankList li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(160,220,255,.14);background:rgba(7,10,15,.50)}
.rankList .rank{color:var(--dim);font-size:12px;letter-spacing:.10em;text-transform:uppercase}
.rankList .name{font-weight:650;letter-spacing:.02em}
.rankList .pts{color:var(--text)}
.rankList li.is-me{border-color: rgba(120,255,220,.32);background: linear-gradient(135deg, rgba(120,255,220,.12), rgba(120,210,255,.08));}

.gameHelp{display:grid;gap:6px}
.gameHelp p{margin:0}

/* Discord events cards */
.eventLink{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
}
.eventLink__row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.eventLink__title{
  font-weight:650;
  letter-spacing:.03em;
}
.eventLink__cta{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:.92;
}
.eventLink__meta{
  font-size:12px;
  color:var(--dim);
}
.eventLink__desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}
.panel__img img{border-radius:16px;border:1px solid rgba(160,220,255,.14);height:190px;object-fit:cover;width:100%}

.footer{border-top:1px solid rgba(160,220,255,.14);padding:22px 0;background:rgba(7,10,15,.65)}
.footer{margin-top:auto}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.footer__left{display:flex;align-items:center;gap:12px}
.footer__mark{width:36px;height:36px;border-radius:12px;object-fit:cover;border:1px solid rgba(160,220,255,.18)}
.muted{color:var(--dim);font-size:12px}
.top{text-decoration:none;color:var(--muted)}
.top:hover{color:var(--text)}

/* Reveal */
.reveal{opacity:0;transform:translateY(10px);filter:blur(2px);transition: opacity .95s ease, transform .95s ease, filter .95s ease}
.reveal.is-visible{opacity:1;transform:none;filter:none}

/* View switching (one-page SPA style) */
.view{display:block;position:relative}
.view[hidden]{display:none}
.view.is-active{
  animation: viewIn .75s cubic-bezier(.18,.88,.22,1) both;
}

.view.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(120,210,255,.06) 42%,
      rgba(120,255,220,.05) 52%,
      transparent 70%);
  opacity:0;
  animation: viewSweep 1.05s ease both;
}

@keyframes viewIn{
  0%{opacity:0;transform:translateY(8px);filter:blur(2px)}
  100%{opacity:1;transform:none;filter:none}
}

@keyframes viewSweep{
  0%{opacity:0;transform:translateX(-12%)}
  40%{opacity:.9}
  100%{opacity:0;transform:translateX(12%)}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none;filter:none}
  .scanline{animation:none}
  .hud__corner path{animation:none;stroke-dashoffset:0;opacity:.65}
  .view.is-active{animation:none}
  .view.is-active::after{animation:none;display:none}
  .hudNav__link.is-active{animation:none}
  .hudNav.is-ready .hudNav__link{animation:none;opacity:1;transform:translate(-50%, -50%) translateX(calc(var(--hudShift) + var(--hudNavLinksShiftX)));filter:none}
  .hudNav.is-ready .hudMarker{animation:none;opacity:1}
  .hudNav__logo{animation:none;filter:none}
  .hudNav__logo::after{animation:none;display:none}
}

/* Responsive */
@media (max-width: 940px){
  .nav{display:none}
  .menu{display:inline-flex}
  .hero__inner{grid-template-columns:1fr;max-width:100%}
  .hero__stats{grid-template-columns:1fr;max-width:520px}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .banner{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .formWrap{grid-template-columns:1fr}
  .guideWrap{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .gallery{grid-template-columns:1fr}
  .brand{min-width:unset}
}