:root{
  --bg:#05070d;
  --bg-deep:#030408;
  --surface:#0b1120;
  --surface-2:#101a30;
  --surface-glass:rgba(11,17,32,0.72);
  --line:rgba(79,142,255,0.14);
  --line-bright:rgba(79,231,255,0.38);
  --cobalt:#0757e8;
  --cobalt-glow:rgba(7,87,232,0.35);
  --cobalt-bright:#256eff;
  --cyan:#4fe7ff;
  --cyan-dim:rgba(79,231,255,0.18);
  --text:#f5f8ff;
  --muted:#8e9fb8;
  --muted-dim:#5a6880;
  --wrap:min(1240px,calc(100% - 48px));
  --header-h:76px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.45,0,0.55,1);
  --dur-fast:0.25s;
  --dur-mid:0.5s;
  --dur-slow:0.9s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);color-scheme:dark;overflow-x:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  width:100%;
  position:relative;
}
main{overflow-x:hidden;width:100%}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%,rgba(7,87,232,0.18),transparent 65%),
    linear-gradient(to bottom,transparent,rgba(5,7,13,0.95)),
    linear-gradient(rgba(79,231,255,0.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,231,255,0.015) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,48px 48px,48px 48px;
}

::selection{background:var(--cobalt-bright);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
svg{display:block}
.wrap{width:var(--wrap);margin-inline:auto}
.section{position:relative;padding:140px 0}

.skip{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:9999;
  background:#fff;
  color:#000;
  font-weight:700;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  transition:top var(--dur-fast) var(--ease);
}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Cinematic Intro */
.intro{
  position:fixed;
  inset:0;
  z-index:10000;
  background:var(--bg-deep);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  opacity:1;
  visibility:visible;
  transition:opacity var(--dur-mid) var(--ease),visibility var(--dur-mid) var(--ease);
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.no-js .intro{display:none}
.intro-mark{
  position:relative;
  width:140px;
  height:90px;
  display:grid;
  place-items:center;
}
.intro-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  animation:introPulse 0.9s var(--ease) forwards;
}
.intro-mark i{
  position:absolute;
  inset:0;
  border:1px solid rgba(79,231,255,0.3);
  border-radius:var(--radius-md);
  transform:scale(0.85);
  opacity:0;
  animation:introRing 0.9s var(--ease) forwards;
}
.intro-mark i:nth-child(2){animation-delay:0.15s}
.intro-mark span{
  position:absolute;
  bottom:-8px;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:scaleX(0);
  animation:introScan 0.8s var(--ease) 0.1s forwards;
}
.intro p{
  font-size:0.7rem;
  letter-spacing:0.35em;
  color:var(--muted);
  margin:0;
  opacity:0;
  animation:introFade 0.6s var(--ease) 0.2s forwards;
}
@keyframes introPulse{0%{transform:scale(0.8);opacity:0}50%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes introRing{0%{transform:scale(0.8);opacity:0}50%{opacity:0.8}100%{transform:scale(1.25);opacity:0}}
@keyframes introScan{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0.7);opacity:0.6}}
@keyframes introFade{to{opacity:1}}

/* Pointer Spotlight */
.pointer-aura{
  position:fixed;
  width:500px;
  height:500px;
  margin-left:-250px;
  margin-top:-250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,87,232,0.12),transparent 70%);
  pointer-events:none;
  z-index:1;
  opacity:0;
  display:none;
  transition:opacity 0.4s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .pointer-aura{display:block}
  body:hover .pointer-aura{opacity:1}
}

/* Typography & Kickers */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:18px;
}
.kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cobalt);box-shadow:0 0 10px var(--cyan)}
.section-intro{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:60px;
  align-items:end;
  margin-bottom:64px;
}
.section-intro h2,h1,h2,h3{
  margin:0;
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.04;
}
.section-intro h2{font-size:clamp(2.6rem,5vw,4.5rem)}
.section-intro h2 em,h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#fff 30%,var(--cyan) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.section-intro p{color:var(--muted);font-size:1.08rem;margin:0}

/* Buttons & Links */
.button{
  --x:50%;
  --y:50%;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:700;
  font-size:0.88rem;
  letter-spacing:0.02em;
  padding:0 24px;
  height:52px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04);
  color:#fff;
  cursor:pointer;
  overflow:hidden;
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast);
}
.button::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle 80px at var(--x) var(--y),rgba(255,255,255,0.3),transparent 70%);
  opacity:0;
  transition:opacity var(--dur-fast);
}
.button:hover::before{opacity:1}
.button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.35)}
.button.primary{
  background:linear-gradient(135deg,var(--cobalt-bright),var(--cobalt));
  border-color:rgba(79,231,255,0.3);
  box-shadow:0 12px 36px var(--cobalt-glow),inset 0 1px rgba(255,255,255,0.25);
}
.button.primary:hover{box-shadow:0 18px 48px rgba(7,87,232,0.5),inset 0 1px rgba(255,255,255,0.4)}
.button.large{height:60px;padding:0 34px;font-size:0.98rem}
.button.compact{height:40px;padding:0 18px;font-size:0.78rem}
.button svg{width:18px;height:18px;fill:currentColor}
.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:0.9rem;
  color:#fff;
  transition:color var(--dur-fast);
}
.arrow-link span{color:var(--cyan);transition:transform var(--dur-fast) var(--ease)}
.arrow-link:hover{color:var(--cyan)}
.arrow-link:hover span{transform:translate(3px,-2px)}

/* Navigation */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--dur-mid),border-color var(--dur-mid),backdrop-filter var(--dur-mid);
}
.header.scrolled{
  background:rgba(5,7,13,0.85);
  border-color:var(--line);
  backdrop-filter:blur(20px);
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{width:145px;height:46px;display:flex;align-items:center;transition:transform var(--dur-fast) var(--ease)}
.brand:hover{transform:translateY(-1px)}
.brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
.nav-state{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.62rem;
  letter-spacing:0.18em;
  color:var(--muted-dim);
  padding:6px 14px;
  border-radius:100px;
  border:1px solid var(--line);
  background:rgba(11,17,32,0.4);
}
.nav-state i{width:6px;height:6px;border-radius:50%;background:#38e094;box-shadow:0 0 8px #38e094}
.nav-menu{display:flex;align-items:center;gap:32px}
.nav-menu a:not(.button){
  position:relative;
  font-size:0.84rem;
  font-weight:600;
  color:var(--muted);
  transition:color var(--dur-fast);
}
.nav-menu a:not(.button)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-6px;
  height:2px;
  background:var(--cyan);
  transition:right var(--dur-fast) var(--ease);
}
.nav-menu a:not(.button):hover,
.nav-menu a:not(.button).active{color:#fff}
.nav-menu a:not(.button):hover::after,
.nav-menu a:not(.button).active::after{right:0}
.menu-button{
  display:none;
  width:44px;
  height:44px;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px;
  cursor:pointer;
}
.menu-button span{
  display:block;
  height:2px;
  background:#fff;
  margin:5px 0;
  border-radius:2px;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast);
}
.menu-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Hero Section */
.hero{
  min-height:920px;
  padding-top:calc(var(--header-h) + 60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.hero-spotlight{
  position:absolute;
  width:700px;
  height:700px;
  right:-100px;
  top:10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,87,232,0.22),transparent 65%);
  pointer-events:none;
  z-index:0;
}
.hero-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:60px;
}
.hero-copy{max-width:580px}
.overline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.7rem;
  letter-spacing:0.25em;
  color:var(--cyan);
  margin-bottom:24px;
  padding:6px 14px;
  border:1px solid var(--line-bright);
  border-radius:100px;
  background:rgba(79,231,255,0.04);
}
.overline i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.hero h1{font-size:clamp(3.4rem,6.8vw,6.4rem);margin-bottom:28px}
.hero-lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted);margin:0 0 36px}
.hero-actions{display:flex;align-items:center;gap:26px;margin-bottom:28px}
.discord-presence{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.75rem;
  color:var(--muted);
}
.discord-presence i{width:8px;height:8px;border-radius:50%;background:#38e094;box-shadow:0 0 10px #38e094;flex:none}
.discord-presence b{color:var(--text);font-weight:600;margin-left:auto}

/* Centerpiece Network Stage */
.network-stage{
  position:relative;
  width:100%;
  height:600px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.network-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--line);
  animation:ringSpin 40s linear infinite;
}
.ring-a{width:420px;height:420px;border-style:dashed}
.ring-b{width:560px;height:560px;border-color:rgba(79,142,255,0.08);animation-duration:60s;animation-direction:reverse}
.ring-c{width:640px;height:640px;border:1px solid rgba(79,231,255,0.06);animation-duration:80s}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  stroke:var(--line);
  stroke-width:1.2;
  fill:none;
}
.network-lines .flow{
  stroke:var(--cyan);
  stroke-width:1.6;
  stroke-dasharray:12 40;
  animation:flowDash 12s linear infinite;
}
@keyframes flowDash{to{stroke-dashoffset:-200}}

.network-core{
  position:relative;
  z-index:4;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(11,21,43,0.95),rgba(5,7,13,0.98) 70%);
  border:1px solid var(--line-bright);
  box-shadow:0 0 60px var(--cobalt-glow),inset 0 0 30px rgba(7,87,232,0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  animation:corePulse 4s var(--ease-soft) infinite;
}
.network-core span{
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid rgba(79,231,255,0.18);
  animation:coreHalo 4s var(--ease-soft) infinite;
}
.network-core img{width:70px;height:auto;filter:drop-shadow(0 0 16px var(--cobalt-bright))}
.network-core b{font-size:0.68rem;letter-spacing:0.25em;color:var(--muted)}
@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes coreHalo{0%,100%{transform:scale(0.95);opacity:0.3}50%{transform:scale(1.08);opacity:0.8}}

.network-node{
  position:absolute;
  z-index:5;
  background:var(--surface-glass);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);
  border-radius:var(--radius-md);
  padding:12px 18px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:center;
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
  animation:nodeFloat 6s var(--ease-soft) infinite;
  transition:border-color var(--dur-fast),transform var(--dur-fast);
}
.network-node:hover{border-color:var(--line-bright);transform:translateY(-4px) scale(1.02)}
.network-node i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  grid-row:1/3;
}
.network-node span{font-size:0.6rem;letter-spacing:0.18em;color:var(--cyan);font-weight:700}
.network-node b{font-size:0.78rem;font-weight:600;color:#fff}
.wave{display:flex;gap:3px;margin-top:6px;grid-column:2}
.wave u{width:3px;height:12px;background:var(--cyan);border-radius:2px;display:block;animation:voiceWave 1.2s ease-in-out infinite}
.wave u:nth-child(2){animation-delay:0.2s}
.wave u:nth-child(3){animation-delay:0.4s}
@keyframes voiceWave{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}

.node-a{top:12%;left:4%;animation-delay:0s}
.node-b{top:8%;right:4%;animation-delay:-1.5s}
.node-c{bottom:16%;right:2%;animation-delay:-3s}
.node-d{bottom:12%;left:8%;animation-delay:-4.5s}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hero-foot{
  position:relative;
  z-index:2;
  margin-top:60px;
  display:flex;
  align-items:center;
  gap:24px;
  font-size:0.65rem;
  letter-spacing:0.2em;
  color:var(--muted-dim);
}
.hero-foot i{flex:1;height:1px;background:var(--line)}
.hero-foot a{color:var(--muted);display:flex;align-items:center;gap:6px;transition:color var(--dur-fast)}
.hero-foot a:hover{color:var(--cyan)}

/* Community Atmosphere Section (Asymmetric Mosaic) */
.atmosphere{background:linear-gradient(to bottom,transparent,rgba(11,17,32,0.5) 50%,transparent)}
.community-mosaic{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-auto-rows:minmax(140px,auto);
  gap:24px;
}
.community-mosaic>*{min-width:0}
.story-grid>*{min-width:0}
.mode-layout>*{min-width:0}
.tech-grid>*{min-width:0}
.mosaic-main{
  grid-row:1/3;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.mosaic-main::before{
  content:"";
  position:absolute;
  top:-80px;
  right:-80px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,87,232,0.18),transparent 70%);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:0.75rem;letter-spacing:0.16em}
.panel-head span{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:700}
.panel-head span img{width:28px;height:auto}
.panel-head b{display:flex;align-items:center;gap:8px;color:#38e094;font-size:0.68rem}
.panel-head b i{width:6px;height:6px;border-radius:50%;background:#38e094;box-shadow:0 0 8px #38e094}

.space-map{
  position:relative;
  width:100%;
  height:240px;
  margin:28px 0;
  display:grid;
  place-items:center;
}
.space-map svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--line);stroke-width:1.5;fill:none}
.space-core{
  width:74px;
  height:74px;
  border-radius:50%;
  background:radial-gradient(circle,var(--cobalt-bright),var(--cobalt));
  box-shadow:0 0 40px var(--cobalt-glow);
  display:grid;
  place-items:center;
  z-index:2;
}
.space-core img{width:36px;height:auto}
.space-map .point{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
}
.space-map .point::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(79,231,255,0.4);
  animation:pointPulse 2.4s infinite;
}
.space-map .p1{top:25%;left:18%}
.space-map .p2{top:18%;right:22%}
.space-map .p3{bottom:20%;left:26%}
.space-map .p4{bottom:26%;right:16%}
@keyframes pointPulse{0%{transform:scale(0.8);opacity:0.8}100%{transform:scale(2.2);opacity:0}}

.room-focus{
  background:rgba(5,7,13,0.6);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px 24px;
  position:relative;
  z-index:2;
}
.room-focus small{font-size:0.62rem;letter-spacing:0.2em;color:var(--cyan);font-weight:700}
.room-focus h3{font-size:1.4rem;margin:6px 0}
.room-focus p{color:var(--muted);font-size:0.86rem;margin:0 0 14px}
.voice-bars{display:flex;align-items:center;gap:4px;height:24px}
.voice-bars i{
  width:3px;
  height:40%;
  border-radius:2px;
  background:var(--cyan);
  animation:vBar 1s ease-in-out infinite;
}
.voice-bars i:nth-child(2){animation-delay:0.15s;height:85%}
.voice-bars i:nth-child(3){animation-delay:0.35s;height:60%}
.voice-bars i:nth-child(4){animation-delay:0.2s;height:100%}
.voice-bars i:nth-child(5){animation-delay:0.45s;height:50%}
.voice-bars i:nth-child(6){animation-delay:0.3s;height:75%}
.voice-bars i:nth-child(7){animation-delay:0.1s;height:35%}
@keyframes vBar{0%,100%{transform:scaleY(0.35)}50%{transform:scaleY(1)}}

.mosaic-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease);
}
.mosaic-card:hover{border-color:var(--line-bright);transform:translateY(-4px)}
.panel-index{font-size:0.68rem;letter-spacing:0.18em;color:var(--cyan);font-weight:700}
.mosaic-card h3{font-size:1.35rem;margin:14px 0 6px}
.mosaic-card p{color:var(--muted);font-size:0.85rem;margin:0}
.mosaic-card svg{width:32px;height:32px;stroke:var(--cyan);margin-top:10px}
.avatars{display:flex;align-items:center;gap:6px;margin-top:18px}
.avatars i{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid var(--surface);
  background:linear-gradient(135deg,var(--cobalt-bright),#6344ff);
}
.avatars i:nth-child(2){background:linear-gradient(135deg,#00b0ff,#1765ff)}
.avatars i:nth-child(3){background:linear-gradient(135deg,#23e6b7,#0084ff)}
.avatars span{font-size:0.64rem;letter-spacing:0.12em;color:var(--muted);margin-left:8px;font-weight:700}

.night-orbit{
  position:relative;
  width:70px;
  height:70px;
  border-radius:50%;
  border:1px dashed var(--line-bright);
  display:grid;
  place-items:center;
  animation:ringSpin 18s linear infinite;
  margin:10px 0;
}
.night-orbit span{width:22px;height:22px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 16px var(--cobalt-bright)}
.night-orbit i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);top:-3px}

.mosaic-wide{
  grid-column:1/3;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.mosaic-wide small{font-size:0.65rem;letter-spacing:0.2em;color:var(--cyan);font-weight:700}
.mosaic-wide h3{font-size:1.5rem;margin:4px 0 0}
.clip-track{display:flex;gap:14px;overflow:hidden}
.clip-track span{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.75rem;
  letter-spacing:0.12em;
  padding:10px 18px;
  background:rgba(5,7,13,0.6);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--muted);
  white-space:nowrap;
}
.clip-track span i{width:6px;height:6px;border-radius:50%;background:var(--cyan)}

.mosaic-stack{
  grid-column:1/3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.mosaic-stack div{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color var(--dur-fast);
}
.mosaic-stack div:hover{border-color:var(--line-bright)}
.mosaic-stack span{font-size:0.65rem;letter-spacing:0.18em;color:var(--cyan);font-weight:700}
.mosaic-stack b{font-size:0.96rem;font-weight:600;color:var(--text)}

/* Sticky Story (Meet, Play, Create) */
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.story-visual{
  position:sticky;
  top:calc(var(--header-h) + 40px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  height:540px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.story-top{display:flex;justify-content:space-between;font-size:0.75rem;letter-spacing:0.2em;color:var(--muted)}
.story-top b{color:var(--cyan);font-size:1.1rem}
.story-scene{
  position:relative;
  flex:1;
  display:grid;
  place-items:center;
}
.story-scene svg{position:absolute;inset:0;width:100%;height:100%;fill:none}
.story-path{stroke:var(--line);stroke-width:2;stroke-dasharray:6 10}
.story-scene circle{fill:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan))}
.story-core{
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,87,232,0.8),rgba(11,17,32,0.95));
  border:1px solid var(--line-bright);
  box-shadow:0 0 50px var(--cobalt-glow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  z-index:2;
  transition:transform var(--dur-mid) var(--ease);
}
.story-core img{width:46px;height:auto}
.story-core span{font-size:0.7rem;letter-spacing:0.25em;color:#fff;font-weight:700}
.story-satellite{
  position:absolute;
  font-size:0.65rem;
  letter-spacing:0.18em;
  font-weight:700;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  background:rgba(5,7,13,0.85);
  border:1px solid var(--line);
  color:var(--muted);
  transition:border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);
}
.story-satellite.s1{top:15%;left:12%}
.story-satellite.s2{top:18%;right:10%}
.story-satellite.s3{bottom:18%;left:22%}
.story-status{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.75rem;
  color:var(--muted);
  padding-top:18px;
  border-top:1px solid var(--line);
}
.story-status i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.story-copy header{margin-bottom:60px}
.story-step{
  padding:36px;
  border-left:2px solid var(--line);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  margin-bottom:32px;
  transition:border-color var(--dur-mid),opacity var(--dur-mid),transform var(--dur-mid);
  opacity:0.4;
}
.story-step.active{
  border-left-color:var(--cyan);
  opacity:1;
  transform:translateX(8px);
}
.story-step>span{font-size:1.1rem;font-weight:700;color:var(--cyan);letter-spacing:0.1em}
.story-step h3{font-size:1.8rem;margin:0 0 10px}
.story-step p{color:var(--muted);font-size:1.02rem;margin:0;line-height:1.6}

/* Gaming Section */
.gaming{overflow:hidden}
.activity-rail{
  width:120%;
  margin-left:-10%;
  overflow:hidden;
  white-space:nowrap;
  padding:14px 0;
  border-block:1px solid var(--line);
  background:rgba(7,87,232,0.04);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.24em;
  color:var(--muted);
  margin-bottom:90px;
  transform:rotate(-1deg);
}
.activity-rail div{display:inline-block;animation:railTicker 32s linear infinite}
.activity-rail i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);vertical-align:middle;margin:0 24px}
.activity-rail span{margin-left:36px}
@keyframes railTicker{to{transform:translateX(-50%)}}

.gaming-head{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:60px;
  align-items:end;
  margin-bottom:56px;
}
.gaming-head h2{font-size:clamp(2.4rem,4.5vw,4rem)}
.gaming-head p{color:var(--muted);font-size:1.06rem;margin:0}

.mode-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:32px;
  align-items:stretch;
}
.mode-nav{display:flex;flex-direction:column;gap:10px}
.mode-nav button{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 24px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-md);
  cursor:pointer;
  text-align:left;
  font-weight:700;
  font-size:1rem;
  color:var(--muted);
  transition:all var(--dur-fast) var(--ease);
}
.mode-nav button span{font-size:0.72rem;letter-spacing:0.18em;color:var(--muted-dim);transition:color var(--dur-fast)}
.mode-nav button:hover{color:#fff;border-color:var(--line-bright)}
.mode-nav button[aria-selected=true]{
  color:#fff;
  border-color:var(--cyan);
  background:linear-gradient(90deg,rgba(7,87,232,0.22),var(--surface));
  transform:translateX(6px);
}
.mode-nav button[aria-selected=true] span{color:var(--cyan)}

.mode-display{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.mode-copy span{font-size:0.68rem;letter-spacing:0.2em;color:var(--muted)}
.mode-copy span b{color:var(--cyan)}
.mode-copy h3{font-size:clamp(2rem,3.2vw,3rem);margin:16px 0}
.mode-copy p{color:var(--muted);font-size:1rem;margin:0 0 28px}
.mode-copy div{display:flex;gap:12px;flex-wrap:wrap}
.mode-copy div i{
  font-style:normal;
  font-size:0.68rem;
  letter-spacing:0.14em;
  font-weight:700;
  padding:6px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-bright);
  background:rgba(79,231,255,0.06);
  color:var(--cyan);
}

.mode-art{
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-width:360px;
  margin:auto;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,87,232,0.2),rgba(5,7,13,0.85) 60%);
  border:1px solid var(--line-bright);
  display:grid;
  place-items:center;
}
.arena-ring{position:absolute;border-radius:50%;border:1px solid rgba(79,231,255,0.18)}
.arena-ring.r1{width:80%;height:80%;border-style:dashed;animation:ringSpin 24s linear infinite}
.arena-ring.r2{width:55%;height:55%}
.arena-cross{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 49.5%,rgba(79,231,255,0.12) 50%,transparent 50.5%),linear-gradient(to right,transparent 49.5%,rgba(79,231,255,0.12) 50%,transparent 50.5%)}
.player{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}
.pl1{top:18%;left:32%}
.pl2{top:30%;right:22%}
.pl3{bottom:22%;right:36%}
.pl4{bottom:35%;left:20%}
.mode-emblem{
  width:80px;
  height:80px;
  border-radius:50%;
  background:var(--cobalt);
  box-shadow:0 0 32px var(--cobalt-bright);
  display:grid;
  place-items:center;
  z-index:2;
}
.mode-emblem img{width:42px;height:auto}

/* Discord Conversion Section */
.discord{
  position:relative;
  padding:160px 0;
  overflow:hidden;
}
.discord-field{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.discord-field i{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(7,87,232,0.14);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  animation:discordPulse 8s var(--ease-soft) infinite;
}
.discord-field i:nth-child(1){width:500px;height:500px}
.discord-field i:nth-child(2){width:750px;height:750px;animation-delay:-2s}
.discord-field i:nth-child(3){width:1000px;height:1000px;animation-delay:-4s}
.discord-field i:nth-child(4){width:1250px;height:1250px;animation-delay:-6s}
@keyframes discordPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.3}50%{transform:translate(-50%,-50%) scale(1.06);opacity:0.8}}

.discord-ghost{
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:460px;
  opacity:0.04;
  pointer-events:none;
}
.discord-layout{
  position:relative;
  z-index:2;
  background:linear-gradient(135deg,rgba(11,21,43,0.92),rgba(16,26,48,0.92) 60%,rgba(7,14,28,0.95));
  border:1px solid rgba(79,142,255,0.3);
  border-radius:var(--radius-lg);
  padding:80px;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:80px;
  align-items:center;
  box-shadow:0 30px 90px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.15);
}
.discord-copy h2{font-size:clamp(3rem,5vw,5rem);margin:14px 0 20px}
.discord-copy p{color:var(--muted);font-size:1.15rem;margin:0 0 36px;max-width:500px}
.discord-copy small{display:block;color:var(--muted-dim);font-size:0.78rem;margin-top:18px}

.discord-interface{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.4);
}
.discord-bar{
  height:48px;
  background:rgba(5,7,13,0.8);
  border-bottom:1px solid var(--line);
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.72rem;
  letter-spacing:0.18em;
  font-weight:700;
}
.discord-bar img{width:22px;height:auto}
.discord-bar i{width:6px;height:6px;border-radius:50%;background:#38e094;margin-left:auto}
.discord-channels{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-bottom:1px solid var(--line);
}
.discord-channels small{font-size:0.6rem;letter-spacing:0.2em;color:var(--muted-dim);margin-bottom:6px}
.discord-channels span{
  padding:8px 12px;
  border-radius:var(--radius-sm);
  font-size:0.82rem;
  color:var(--muted);
  transition:all var(--dur-fast);
}
.discord-channels span.active{background:rgba(7,87,232,0.22);color:#fff;font-weight:600}
.discord-voice{
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(5,7,13,0.4);
}
.discord-voice>div{display:flex;align-items:center;gap:12px}
.discord-voice i{width:8px;height:8px;border-radius:50%;background:#38e094;box-shadow:0 0 8px #38e094}
.discord-voice span b{display:block;font-size:0.82rem}
.discord-voice span small{display:block;color:var(--muted-dim);font-size:0.68rem}

/* Coding Section */
.technology{background:linear-gradient(to bottom,transparent,rgba(11,17,32,0.45) 50%,transparent)}
.tech-head{margin-bottom:64px;max-width:760px}
.tech-head h2{font-size:clamp(2.5rem,4.8vw,4.4rem);margin:14px 0 18px}
.tech-head p{color:var(--muted);font-size:1.1rem;margin:0}

.tech-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:40px;
  align-items:stretch;
}
.terminal{
  background:#070b14;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:480px;
  position:relative;
}
.terminal-head{
  height:48px;
  background:#0b101d;
  border-bottom:1px solid var(--line);
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.72rem;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--muted);
}
.terminal-head span{display:flex;gap:7px}
.terminal-head span i{width:9px;height:9px;border-radius:50%;background:#202a3c}
.terminal-head span i:first-child{background:#ff5f56}
.terminal-head span i:nth-child(2){background:#ffbd2e}
.terminal-head span i:nth-child(3){background:#27c93f}

.terminal-screen{
  padding:32px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:0.88rem;
  line-height:1.9;
  flex:1;
}
.terminal-screen p{margin:0}
.terminal-screen span{color:var(--cyan);font-weight:700}
.terminal-caret{
  display:inline-block;
  width:8px;
  height:15px;
  background:var(--cyan);
  vertical-align:middle;
  margin-left:4px;
  animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

.terminal-line{opacity:0;transform:translateY(4px);transition:all var(--dur-fast) var(--ease)}
.terminal-line.show{opacity:1;transform:none}
.terminal-line.l1,.terminal-line.l2{color:var(--muted)}
.terminal-line.success{color:#38e094;font-weight:700;margin-top:8px}

.module-map{
  position:relative;
  width:100%;
  height:190px;
  margin-top:auto;
  border-top:1px solid var(--line);
  background:rgba(5,7,13,0.7);
}
.module-map svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--line);stroke-dasharray:4 8}
.module{
  position:absolute;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.18em;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  transform:translate(-50%,-50%);
  transition:border-color var(--dur-mid),color var(--dur-mid),box-shadow var(--dur-mid);
}
.module.active{
  border-color:var(--cyan);
  color:#fff;
  box-shadow:0 0 16px var(--cyan-dim);
}
.module.core{left:50%;top:50%;background:var(--cobalt);color:#fff;border-color:var(--cyan)}
.module.m1{left:16%;top:20%}
.module.m2{left:84%;top:20%}
.module.m3{left:16%;top:80%}
.module.m4{left:84%;top:80%}

.capability-list{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.capability-list>span{font-size:0.68rem;letter-spacing:0.2em;color:var(--cyan);font-weight:700}
.capability-list ul{list-style:none;padding:0;margin:28px 0}
.capability-list li{
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:1.05rem;
}
.capability-list li i{font-style:normal;font-size:0.72rem;letter-spacing:0.12em;color:var(--muted-dim);font-weight:700}
.capability-list li b{font-weight:600;color:var(--text)}

/* FAQ Accordion */
.faq-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:80px;
}
.faq-head h2{font-size:clamp(2.4rem,4.5vw,4rem);margin:14px 0 18px}
.faq-head p{color:var(--muted);font-size:1.05rem;margin:0}
.accordion{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0}
.faq-item button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 8px;
  border:0;
  background:none;
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:color var(--dur-fast);
}
.faq-item button:hover{color:var(--cyan)}
.faq-item button span{
  position:relative;
  width:20px;
  height:20px;
  flex:none;
}
.faq-item button span::before,
.faq-item button span::after{
  content:"";
  position:absolute;
  background:var(--cyan);
  left:2px;
  right:2px;
  top:9px;
  height:2px;
  transition:transform var(--dur-fast) var(--ease);
}
.faq-item button span::after{transform:rotate(90deg)}
.faq-item.open button span::after,
.faq-item button[aria-expanded=true] span::after{transform:rotate(0)}
.answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.35s var(--ease);
}
.answer>div{
  overflow:hidden;
  min-height:0;
}
.faq-item.open .answer,
.faq-item:has(button[aria-expanded=true]) .answer{
  grid-template-rows:1fr;
}
.answer p{
  color:var(--muted);
  font-size:0.96rem;
  line-height:1.65;
  margin:0;
  padding:0 30px 28px 8px;
}

/* Final CTA */
.final{
  text-align:center;
  padding:180px 0;
  overflow:hidden;
  position:relative;
}
.final-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.final-rings{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.final-rings i{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--line);
  animation:ringSpin 50s linear infinite;
}
.final-rings i:nth-child(1){width:600px;height:600px;border-style:dashed}
.final-rings i:nth-child(2){width:850px;height:850px;animation-duration:80s;animation-direction:reverse}
.final-rings i:nth-child(3){width:1100px;height:1100px}
.final .wrap{position:relative;z-index:2;max-width:720px}
.final img{width:68px;height:auto;margin:0 auto 24px;filter:drop-shadow(0 0 20px var(--cobalt-bright))}
.final h2{font-size:clamp(3.2rem,7vw,6.8rem);margin:14px 0 20px}
.final p{color:var(--muted);font-size:1.15rem;margin:0 auto 36px}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background:#03050a;
  padding:80px 0 32px;
}
.footer-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:60px;
  margin-bottom:60px;
}
.footer-main img{width:130px;height:auto;margin-bottom:16px}
.footer-main p{color:var(--muted-dim);font-size:0.85rem;max-width:320px;margin:0}
.footer-main nav{display:flex;gap:28px}
.footer-main nav a{color:var(--muted);font-size:0.85rem;transition:color var(--dur-fast)}
.footer-main nav a:hover{color:#fff}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(79,142,255,0.08);
  padding-top:28px;
  font-size:0.65rem;
  letter-spacing:0.18em;
  color:var(--muted-dim);
}

/* Reveal Animation System */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.reveal.in-view{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:0.1s}
.reveal[data-delay="2"]{transition-delay:0.2s}
.reveal[data-delay="3"]{transition-delay:0.3s}
.reveal[data-delay="4"]{transition-delay:0.4s}

.hero-enter{
  opacity:0;
  transform:translateY(24px);
  animation:heroEnter var(--dur-slow) var(--ease) forwards;
}
.hero-enter:nth-child(1){animation-delay:0.1s}
.hero-enter:nth-child(2){animation-delay:0.2s}
.hero-enter:nth-child(3){animation-delay:0.3s}
.hero-enter:nth-child(4){animation-delay:0.4s}
.hero-enter:nth-child(5){animation-delay:0.5s}
@keyframes heroEnter{to{opacity:1;transform:none}}

/* Responsive Breakpoints */
@media (max-width:1040px){
  :root{--wrap:min(100% - 40px,940px)}
  .section{padding:100px 0}
  .section-intro,.gaming-head{grid-template-columns:1fr;gap:24px}
  .hero-layout{grid-template-columns:1fr;gap:40px}
  .network-stage{height:480px}
  .community-mosaic{grid-template-columns:1fr}
  .mosaic-main{grid-row:auto}
  .mosaic-wide{grid-column:auto;flex-direction:column;align-items:flex-start}
  .mosaic-stack{grid-column:auto}
  .story-grid{grid-template-columns:1fr;gap:40px}
  .story-visual{position:static;height:420px}
  .mode-layout{grid-template-columns:1fr}
  .mode-nav{flex-direction:row;overflow-x:auto;padding-bottom:10px}
  .mode-nav button{white-space:nowrap}
  .discord-layout{grid-template-columns:1fr;padding:48px 36px;gap:40px}
  .tech-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .footer-main{flex-direction:column;gap:36px}
}

@media (max-width:860px){
  :root{--wrap:calc(100% - 32px);--header-h:68px}
  .section{padding:80px 0}
  .menu-button{display:block}
  .nav-state{display:none}
  .nav-menu{
    position:fixed;
    inset:0 0 auto 0;
    padding:calc(var(--header-h) + 24px) 24px 36px;
    background:rgba(5,7,13,0.98);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    transform:translateY(-110%);
    visibility:hidden;
    transition:transform 0.4s var(--ease),visibility 0.4s;
  }
  .nav-menu.open{transform:none;visibility:visible}
  .nav-menu a:not(.button){font-size:1.25rem;padding:8px 0}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 30px)}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:18px}
  .network-stage{height:380px}
  .ring-a{width:280px;height:280px}
  .ring-b{width:360px;height:360px}
  .ring-c{width:420px;height:420px}
  .network-core{width:140px;height:140px}
  .network-core img{width:50px}
  .network-node{padding:8px 12px}
  .network-node b{font-size:0.68rem}
  .mode-display{grid-template-columns:1fr;padding:32px 24px}
  .discord-layout{padding:36px 20px}
  .terminal-screen{padding:20px}
  .capability-list{padding:28px 20px}
  .final{padding:120px 0}
  .final-rings i:nth-child(2),.final-rings i:nth-child(3){display:none}
}

@media (max-width:390px){
  :root{--wrap:calc(100% - 24px)}
  .hero h1{font-size:2.9rem}
  .mosaic-stack{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
  }
  .intro{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero-enter{opacity:1!important;transform:none!important}
  .hero-canvas,.final-canvas,.pointer-aura{display:none!important}
  html{scroll-behavior:auto!important}
}