:root{
  --bg:#070a10;
  --surface:#0f141c;
  --surface2:#141b26;
  --border:rgba(255,255,255,.09);

  --text:#e9eef6;
  --muted:#a9b4c5;

  --primary:#5f7cff;
  --accent:#38d6ff;

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;

  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --mx: 0px;
  --my: 0px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font: 15px/1.6 var(--font-body);
  background:
    radial-gradient(1100px 650px at 18% 10%, rgba(95,124,255,.20), transparent 60%),
    radial-gradient(900px 600px at 82% 12%, rgba(56,214,255,.12), transparent 60%),
    linear-gradient(180deg, #05070c 0%, #070a10 35%, #070a10 100%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{color:#fff}
code{font-family:var(--font-mono)}

/* Intro */
.intro-overlay{
  position:fixed; inset:0;
  background:#000;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.intro-overlay.off{ animation: introUp .75s ease-in-out forwards; }
@keyframes introUp{ to{ transform: translateY(-100%); opacity:0; pointer-events:none; } }
.intro-block{max-width:520px; width:100%}
.intro-line{display:flex; align-items:center; gap:12px; font-family: var(--font-mono); color: var(--primary); font-size: 18px; letter-spacing:.02em;}
.intro-caret{width:10px; height:10px; border-radius:2px; background: var(--accent); box-shadow: 0 0 18px rgba(56,214,255,.35); animation: caretBlink .55s steps(1) infinite;}
@keyframes caretBlink{ 50%{opacity:.15} }
.intro-text{white-space:nowrap; overflow:hidden; border-right: 2px solid rgba(56,214,255,.65); animation: typing 1.2s steps(22) forwards;}
@keyframes typing{ from{width:0} to{width:100%} }
.intro-sub{margin-top:10px; font-family: var(--font-mono); color: rgba(169,180,197,.55); font-size: 12px; letter-spacing:.14em;}
.intro-dots{margin-top:18px; display:flex; gap:8px}
.intro-dots span{width:8px; height:8px; border-radius:2px; background: rgba(95,124,255,.70); animation:pulse 1s infinite;}
.intro-dots span:nth-child(2){animation-delay:.18s}
.intro-dots span:nth-child(3){animation-delay:.36s}
@keyframes pulse{ 50%{opacity:.25; transform: translateY(-2px)} }

/* Nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter: blur(12px); background: rgba(7,10,16,.74); border-bottom:1px solid var(--border);}
.nav-inner{max-width:1240px; margin:0 auto; padding:0 22px; height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px;}
.brand{display:flex; align-items:center; gap:12px}
.brand-icon{width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background: linear-gradient(135deg, rgba(95,124,255,.16), rgba(56,214,255,.10)); border:1px solid rgba(255,255,255,.10); box-shadow: var(--shadow2); overflow:hidden;}
.brand-icon img{width:34px; height:34px; object-fit:contain; filter: drop-shadow(0 12px 26px rgba(0,0,0,.65)) brightness(1.15) contrast(1.1);}
.brand-name{font-family: var(--font-head); font-weight:700; letter-spacing:-.02em;}
.brand-sub{display:block; margin-top:2px; font-family: var(--font-mono); color: rgba(169,180,197,.6); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.nav-links{display:flex; align-items:center; gap:18px}

.nav-link{position:relative; font-family: var(--font-mono); font-size: 13px; color: rgba(169,180,197,.85); letter-spacing:.08em; transition: color .15s ease, text-shadow .15s ease;}
.nav-link:hover{color: var(--accent); text-shadow: 0 0 18px rgba(56,214,255,.22);}
.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: linear-gradient(90deg, transparent, rgba(56,214,255,.75), transparent); transform: scaleX(0); transform-origin:left; transition: transform .18s ease; opacity:.9;}
.nav-link:hover::after{ transform: scaleX(1); }

/* Buttons & Beams */
@keyframes beamSweep{0%{ transform: translateX(-140%) skewX(-18deg); opacity:0; }15%{ opacity:.95; }100%{ transform: translateX(140%) skewX(-18deg); opacity:0; }}
@keyframes softPulse{0%,100%{ filter: brightness(1); }50%{ filter: brightness(1.12); }}
.beam-btn{ position:relative; overflow:hidden; }
.beam-btn::before{content:""; position:absolute; inset:-2px; background: radial-gradient(220px 70px at 20% 50%, rgba(95,124,255,.30), transparent 60%), radial-gradient(220px 70px at 80% 50%, rgba(56,214,255,.20), transparent 60%); opacity:.55; pointer-events:none;}
.beam-btn::after{content:""; position:absolute; top:-40%; left:-60%; width:60%; height:180%; background: linear-gradient(90deg, transparent, rgba(56,214,255,.45), transparent); opacity:0; pointer-events:none;}
.beam-btn:hover{border-color: rgba(56,214,255,.42) !important; box-shadow: 0 0 0 1px rgba(56,214,255,.10), 0 10px 30px rgba(0,0,0,.35), 0 0 28px rgba(56,214,255,.12);} 
.beam-btn:hover::after{ opacity:1; animation: beamSweep .85s ease-out 1; }
.beam-idle{ animation: softPulse 3.2s ease-in-out infinite; }
.beam-strong{ box-shadow: 0 0 0 1px rgba(56,214,255,.14), 0 0 26px rgba(56,214,255,.10); }

.nav-cta{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); background: rgba(20,27,38,.70); font-family: var(--font-head); font-weight:700;}
.nav-cta svg{width:16px; height:16px; color: var(--primary)}

/* Hero */
.hero{padding-top:130px; padding-bottom:64px}
.hero-inner{max-width:1240px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:center;}
@media (max-width: 980px){ .hero-inner{grid-template-columns:1fr} }

/* LIVE STATUS MODULE */
.server-status-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  background: rgba(15, 20, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.status-pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #070a10; background: #7fe9c2;
  padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 6px; letter-spacing: 0.05em; transition: background 0.3s ease;
}
.status-dot { width: 6px; height: 6px; background: rgba(0,0,0,0.6); border-radius: 50%; animation: blink 2s infinite; }
.status-info { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: rgba(169,180,197,0.75); padding-right: 8px; }
.status-players { display: flex; align-items: center; gap: 8px; color: rgba(169,180,197,0.9); }
.status-wipe .accent { color: var(--accent); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-title{margin:16px 0 10px; font-family: var(--font-head); font-weight:700; font-size: clamp(42px, 5vw, 72px); line-height:1.02; letter-spacing:-.03em;}
.hero-accent {
  color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(to right, var(--primary) 20%, #fff 50%, var(--accent) 80%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: shine 5s linear infinite;
}
.hero-lead{color: rgba(178,188,203,.98); max-width: 60ch; font-size: 16px}

/* Connect Bar */
.connect-bar{
  margin-top:18px; display:flex; align-items:center; gap:10px; padding:10px; border-radius: 16px; 
  background: linear-gradient(90deg, rgba(15,20,28,0.9) 0%, rgba(20,27,38,0.95) 100%);
  border:1px solid rgba(56, 214, 255, 0.18); 
  box-shadow: var(--shadow2); max-width: 560px;
  position: relative; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.connect-bar:hover {
  transform: translateY(-2px); box-shadow: 0 10px 40px rgba(56, 214, 255, 0.12); border-color: rgba(56, 214, 255, 0.45);
}
.connect-bar::before {
  content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(56, 214, 255, 0.15), transparent);
  transform: skewX(-20deg); animation: barScan 4s infinite linear; pointer-events: none;
}
@keyframes barScan { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }

.connect-label{font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding:8px 10px; border-radius:12px; background: rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08);}
.connect-ip{flex:1; font-family: var(--font-mono); font-size: 13px; color: rgba(233,238,246,.9); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.icon-btn{width:40px; height:40px; border-radius: 12px; border:1px solid rgba(255,255,255,.10); background: rgba(20,27,38,.70); color: rgba(233,238,246,.9); cursor:pointer;}
.icon-btn:hover{border-color: rgba(56,214,255,.35)}
.icon-btn svg{width:18px; height:18px}
.copy-tip{font-family: var(--font-mono); font-size: 11px; color: rgba(56,214,255,.95); opacity:0; transform: translateY(-2px); transition: .16s;}
.copy-tip.show{opacity:1; transform: translateY(0)}

/* Hero Actions */
.hero-actions{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(20,27,38,.70); font-family: var(--font-head); font-weight:700; letter-spacing:.01em; cursor:pointer; transition: transform .12s ease;}
.btn svg{width:18px; height:18px}
.btn:hover{transform: translateY(-1px)}
.btn.primary{background: linear-gradient(135deg, rgba(95,124,255,.40), rgba(56,214,255,.16)); border-color: rgba(95,124,255,.50); box-shadow: 0 0 26px rgba(95,124,255,.18);} 
.btn.ghost:hover{border-color: rgba(56,214,255,.35)}

.quick-links{margin-top:14px; color: rgba(169,180,197,.8); font-family: var(--font-mono); font-size:12px}
.sep{opacity:.4; margin:0 8px}

.hero-card{position:relative; border-radius: 26px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(18,26,40,.78), rgba(10,14,22,.86)); box-shadow: var(--shadow); padding:26px 22px; min-height: 320px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;}
.hero-glow{position:absolute; inset:-160px; background: radial-gradient(circle at 35% 35%, rgba(95,124,255,.22), transparent 55%), radial-gradient(circle at 70% 40%, rgba(56,214,255,.16), transparent 58%); filter: blur(14px); opacity:.95;}
.hero-mark{width: 260px; height:auto; filter: drop-shadow(0 28px 62px rgba(0,0,0,.70)) drop-shadow(0 0 26px rgba(95,124,255,.18)) brightness(1.12) contrast(1.10); opacity:.98; position:relative;}
.hero-lines{width:100%; max-width:360px; margin-top:18px; display:grid; gap:10px; position:relative}
.hero-lines div{height:1px; background: linear-gradient(90deg, transparent, rgba(95,124,255,.45), rgba(56,214,255,.35), transparent)}

.section{max-width:1240px; margin:0 auto; padding: 80px 22px;}
.section-head{margin-bottom:18px; position:relative}

.kicker{font-family: var(--font-mono); font-size:12px; letter-spacing:.14em; color: rgba(95,124,255,.85); text-transform:uppercase;}
.section h2{margin:6px 0 8px; font-family: var(--font-head); font-size: 32px; letter-spacing:-.02em;}
.section-sub{color: rgba(178,188,203,.96); margin:0}

.cards{margin-top:18px; display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;}
@media (max-width: 1100px){ .cards{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 560px){ .cards{grid-template-columns: 1fr} }

.flip-card{height: 320px; perspective: 1000px; cursor:pointer; outline:none;}
.flip-inner{position:relative; width:100%; height:100%; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.4,0,.2,1);}
.flip-card:hover .flip-inner, .flip-card.is-flipped .flip-inner, .flip-card:focus .flip-inner{transform: rotateY(180deg);}
.flip-front,.flip-back{position:absolute; inset:0; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(145deg, rgba(15,20,28,.78), rgba(20,27,38,.70)); box-shadow: var(--shadow2); padding:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; backface-visibility:hidden;}
.flip-front::before,.flip-front::after{content:""; position:absolute; width:12px; height:12px; border:1px solid rgba(95,124,255,.55); opacity:.55;}
.flip-front::before{top:10px; left:10px; border-right:0; border-bottom:0}
.flip-front::after{bottom:10px; right:10px; border-left:0; border-top:0}
.flip-back{transform: rotateY(180deg); background: linear-gradient(145deg, rgba(18,26,40,.88), rgba(10,14,22,.86));}
.icon{width:56px; height:56px; border-radius: 18px; display:grid; place-items:center; background: rgba(95,124,255,.12); border:1px solid rgba(95,124,255,.20); margin-bottom:16px; color: var(--primary);}
.icon svg{width:26px; height:26px}
.icon.cyan{background: rgba(56,214,255,.10); border-color: rgba(56,214,255,.18); color: var(--accent)}
.icon.indigo{background: rgba(95,124,255,.10); border-color: rgba(95,124,255,.18)}
.icon.green{background: rgba(140,255,190,.08); border-color: rgba(140,255,190,.18); color: #7fe9c2}
.flip-front h3,.flip-back h3{font-family: var(--font-head); font-size: 18px; margin:0 0 8px;}
.flip-back p{margin:0; color: rgba(178,188,203,.96); text-align:center}
.hint{margin-top:10px; font-family: var(--font-mono); font-size:12px; letter-spacing:.14em; color: rgba(169,180,197,.65);}

.section-alt{border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background: rgba(10,14,22,.55); max-width:none;}
.about-wrap{max-width:1240px; margin:0 auto; padding: 0 22px; display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:stretch;}
@media (max-width: 980px){ .about-wrap{grid-template-columns:1fr} }
.stats{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; max-width:420px}
.stat{background: rgba(15,20,28,.78); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding:14px; box-shadow: var(--shadow2)}
.stat-val{font-family: var(--font-mono); font-size:22px; font-weight:700}
.stat-lbl{font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; color: rgba(169,180,197,.7); text-transform:uppercase}

/* RUST UPDATE CARD */
.update-card{grid-column: span 2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:18px 20px;}
.stat-lbl-accent{font-family: var(--font-mono); font-size:10px; letter-spacing:.14em; color: rgba(169,180,197,.6); margin-bottom:4px; text-transform:uppercase}
.stat-content{width:100%;}
.stat-title{font-family: var(--font-head); font-weight:700; font-size: 18px; color:#e9eef6; margin-bottom:2px;}
.stat-desc{font-family: var(--font-mono); font-size: 12px; color: rgba(56,214,255,0.9);}
.stat-arrow{margin-top:8px; font-family: var(--font-mono); font-size: 11px; color: rgba(169,180,197,.7); align-self:flex-end; opacity:0; transform:translateX(-4px); transition:all .2s;}
.update-card:hover .stat-arrow{opacity:1; transform:translateX(0); color:var(--accent);}

.about-row{display:flex; align-items:center; gap:12px; padding:14px; border-radius: 16px; background: rgba(15,20,28,.78); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow2);}
.about-row:hover{border-color: rgba(95,124,255,.28)}
.about-row.static:hover{border-color: rgba(255,255,255,.08)}
.row-icon{width:42px; height:42px; border-radius: 14px; display:grid; place-items:center; background: rgba(95,124,255,.12); border:1px solid rgba(95,124,255,.20); color: var(--primary);}
.row-icon.ok{background: rgba(140,255,190,.08); border-color: rgba(140,255,190,.18); color: #7fe9c2}
.row-icon svg{width:18px; height:18px}
.row-title{font-family: var(--font-head); font-weight:700}
.row-sub{font-family: var(--font-mono); font-size:12px; color: rgba(169,180,197,.75)}
.row-go{margin-left:auto; color: rgba(56,214,255,.85); font-family: var(--font-mono)}
.about-wrap svg{ max-width:100%; height:auto; }

/* LEADERBOARD GRID STYLES */
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; margin-top: 24px; min-height: 100px;
}
.leader-card {
  display: flex; align-items: center; gap: 16px; padding: 18px;
  background: rgba(15,20,28,0.7); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; transition: transform 0.2s, border-color 0.2s;
}
.leader-card:hover { transform: translateY(-2px); border-color: rgba(95,124,255,0.3); }
.leader-rank {
  font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--primary); opacity: 0.8; width: 30px;
}
.leader-name {
  font-family: var(--font-head); font-weight: 700; color: #e9eef6; margin-bottom: 2px;
}
.leader-time { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing:0.05em; text-transform:uppercase;}
.leader-loading { width:100%; text-align:center; padding:30px; font-family: var(--font-mono); color: var(--muted); opacity:0.6; }


.footer{border-top:1px solid rgba(255,255,255,.06); background: rgba(8,11,18,.74); padding: 48px 0;}
.footer-inner{max-width:1240px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns: 1.4fr .8fr .8fr .8fr; gap:18px;}
@media (max-width: 980px){ .footer-inner{grid-template-columns:1fr} }
.footer-brand img{height:36px; width:auto; opacity:.90; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45))}
.footer-brand p{margin:10px 0 0; color: rgba(178,188,203,.96)}
.footer-h{font-family: var(--font-head); font-weight:700; margin-bottom:10px}
.footer-col a{display:block; color: rgba(169,180,197,.9); margin:8px 0; font-family: var(--font-mono); font-size:12px; letter-spacing:.06em}
.footer-col a:hover{color: var(--accent)}
.footer-col.right{justify-self:end; text-align:right}
@media (max-width: 980px){ .footer-col.right{justify-self:start; text-align:left} }
.footer-mono{font-family: var(--font-mono); font-size:12px; color: rgba(169,180,197,.75); letter-spacing:.06em}

/* SPLINE */
.spline-container{
  position: fixed; inset: 0; z-index: -30; pointer-events: none; overflow: hidden; display: flex; justify-content: center; align-items: stretch;
}
#aura-spline{
  width: min(1680px, 100vw); height: 100vh; border: 0; display: block; opacity: 0.60; filter: saturate(1.05) contrast(1.05) brightness(0.78);
}

/* HERO MEDIA */
.hero-flip{ perspective: 1200px; }
.hero-flip-inner{
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.4,0,.2,1);
}
.hero-flip.is-flipped .hero-flip-inner{ transform: rotateY(180deg); }
.hero-face{ position: relative; backface-visibility: hidden; }
.hero-back{ position: absolute; inset: 0; transform: rotateY(180deg); }

.hero-card.hero-media{ padding:0; overflow:hidden; position:relative; }
.hero-header-img{
  width:100%; height:100%; min-height:320px; object-fit:cover; display:block;
  filter: brightness(1.02) contrast(1.12) saturate(1.10);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.38) 92%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 62%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.38) 92%, rgba(0,0,0,0) 100%);
  animation: heroFloat 18s ease-in-out infinite;
}
@keyframes heroFloat{ 0%{ transform: scale(1) translateY(0); } 50%{ transform: scale(1.02) translateY(-6px); } 100%{ transform: scale(1) translateY(0); } }

.hero-media-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.62) 100%),
    radial-gradient(700px 320px at 35% 35%, rgba(95,124,255,.10), transparent 60%),
    radial-gradient(520px 240px at 72% 55%, rgba(255,138,42,.10), transparent 66%);
}
.hero-card.hero-contact{ padding: 22px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.contact-top{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.contact-avatar{ width:88px; height:88px; border-radius: 18px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 55px rgba(0,0,0,.45); }
.contact-title{ font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; font-size: 22px; }
.contact-sub{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: rgba(169,180,197,.85); }
.contact-note{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(169,180,197,.65); text-align:center; }

.glass-btn{
  display:inline-flex; align-items:center; justify-content:center; padding: 12px 14px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(20,27,38,.55);
  backdrop-filter: blur(10px); font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn, .nav-cta, .icon-btn, .glass-btn{ transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease; }
.btn:hover, .nav-cta:hover, .icon-btn:hover, .glass-btn:hover{
  box-shadow: 0 0 0 1px rgba(56,214,255,.10), 0 0 24px rgba(56,214,255,.10); border-color: rgba(56,214,255,.35);
}
.shop-cta:hover{
  box-shadow: 0 0 0 1px rgba(255,138,42,.10), 0 0 30px rgba(255,138,42,.12); border-color: rgba(255,138,42,.45);
}
.btn:active, .nav-cta:active, .icon-btn:active, .glass-btn:active{ transform: translateY(0) scale(0.98); filter: brightness(1.06); }

@media (max-width: 980px){
  .hero-flip:hover .hero-flip-inner{ transform:none; }
  #aura-spline{ opacity: 0.40; filter: saturate(1.0) contrast(1.0) brightness(0.68); }
}
@media (prefers-reduced-motion: reduce){
  #aura-spline{ opacity: 0.35; }
  .hero-header-img{ animation:none !important; }
  .beam-idle{ animation:none !important; }
  .hero-flip-inner{ transition:none !important; }
}

.nav-cta, .btn, .icon-btn{ position: relative; transition: transform .10s ease, filter .10s ease, box-shadow .12s ease, border-color .12s ease; }
.nav-cta:active, .btn:active, .icon-btn:active{ transform: translateY(1px) scale(0.99); filter: brightness(1.08); }

.beam-btn::after{ opacity: 0; filter: blur(.2px); }
.beam-btn:hover::after{ opacity: 1; animation: beamSweep .85s ease-out 1; }

.shop-cta{ border-color: rgba(255,138,42,.35) !important; box-shadow: 0 0 0 1px rgba(255,138,42,.10), 0 0 26px rgba(255,138,42,.10); }
.shop-cta::before{
  background: radial-gradient(240px 80px at 20% 50%, rgba(255,138,42,.30), transparent 62%), radial-gradient(240px 80px at 80% 50%, rgba(255,178,107,.18), transparent 62%); opacity: .70;
}
.shop-cta::after{ background: linear-gradient(90deg, transparent, rgba(255,138,42,.55), transparent); opacity: 0.85; }
.shop-cta:hover{ border-color: rgba(255,138,42,.52) !important; box-shadow: 0 0 0 1px rgba(255,138,42,.14), 0 10px 30px rgba(0,0,0,.35), 0 0 40px rgba(255,138,42,.14); }
.shop-cta:hover::after{ opacity: 1; animation: beamSweep .80s ease-out 1; }

.discord-cta::before{
  background: radial-gradient(240px 80px at 20% 50%, rgba(56,214,255,.28), transparent 62%), radial-gradient(240px 80px at 80% 50%, rgba(95,124,255,.18), transparent 62%); opacity: .65;
}
.discord-cta::after{ background: linear-gradient(90deg, transparent, rgba(56,214,255,.45), transparent); }

.nav-link:hover{ text-shadow: 0 0 22px rgba(56,214,255,.18); }

@media (min-width: 1800px){
  .nav-inner, .hero-inner, .section, .about-wrap, .footer-inner{ max-width: 1680px; }
  .hero-title{ font-size: 84px; }
}

.stat-link{ cursor: pointer; transition: transform .12s ease, border-color .12s ease; display: block; }
.stat-link:hover{ transform: translateY(-1px); border-color: rgba(56,214,255,.25); }

body::before{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: -25;
  background: radial-gradient(1200px 900px at 50% 20%, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%), linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.26) 100%);
}

body::after{
  content:""; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(1680px, 100vw); height: 100vh; pointer-events: none; z-index: -26;
  background: radial-gradient(900px 600px at 18% 10%, rgba(95,124,255,.18), transparent 60%), radial-gradient(800px 520px at 82% 12%, rgba(56,214,255,.10), transparent 60%), radial-gradient(680px 520px at 78% 58%, rgba(255,138,42,.07), transparent 60%), linear-gradient(180deg, rgba(5,7,12,.35) 0%, rgba(7,10,16,.25) 35%, rgba(7,10,16,.20) 100%);
  opacity: .95;
}

/* Beams BG */
.beams-bg{ position: fixed; inset: 0; z-index: -15; pointer-events: none; overflow: hidden; background: rgba(5,7,12,0.35); }
#beamsCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.75; mix-blend-mode: screen; }
.beams-softblur{ position:absolute; inset:0; background: rgba(10,12,18,0.08); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px); animation: beamsPulse 8s ease-in-out infinite; }
@keyframes beamsPulse{ 0%,100%{ opacity: .18; } 50%{ opacity: .28; } }
.beams-vignette{ position:absolute; inset:0; }
.beams-top{ position:absolute; left:0; right:0; top:0; height:160px; background: linear-gradient(to bottom, rgba(5,7,12,.90), transparent); }
.beams-bottom{ position:absolute; left:0; right:0; bottom:0; height:180px; background: linear-gradient(to top, rgba(5,7,12,.92), transparent); }
.beams-radial{ position:absolute; inset:-25%; background: radial-gradient(60% 60% at 50% 40%, rgba(80,120,255,0.10), transparent 70%); }
@media (max-width: 980px){
  #beamsCanvas{ opacity:0.55; } .beams-softblur{ backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
}
@media (prefers-reduced-motion: reduce){ .beams-softblur{ animation:none !important; } }

@keyframes shine { to { background-position: 200% center; } }

/* Scroll Reveals */
.reveal{ opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); will-change: transform, opacity; }
.reveal.active{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: 0.1s; } .reveal-delay-2{ transition-delay: 0.2s; } .reveal-delay-3{ transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce){
  .hero-accent{ animation: none !important; } .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* HERO CARD BEAM */
.hero-front .hero-card{ position: relative; overflow: hidden; }
.hero-front .hero-card::after{
  content:""; position:absolute; top:-40%; left:-60%; width:60%; height:180%; background: linear-gradient(90deg, transparent, rgba(56,214,255,.22), transparent); opacity:0; transform: skewX(-18deg); pointer-events:none;
}
.hero-flip:hover .hero-front .hero-card::after{ opacity: 1; animation: beamSweep .95s ease-out 1; }
.hero-flip.is-pressed{ transform: translateY(1px); }
.hero-flip.is-pressed .hero-front .hero-card{ box-shadow: 0 0 0 1px rgba(56,214,255,.10), 0 10px 30px rgba(0,0,0,.35), 0 0 34px rgba(56,214,255,.12); }

@media (max-width: 980px){
  .nav-link{ display:none; } .hero-right{ width:100%; display:flex; justify-content:center; } .hero-flip{ width:100%; max-width: 560px; } .connect-bar{ max-width: 100%; }
}

/* MOBILE STICKY BAR */
.mobile-sticky-bar {
  display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: calc(100% - 44px); max-width: 420px;
  background: rgba(15, 20, 28, 0.90); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px; padding: 8px 8px 8px 16px; z-index: 9999; box-shadow: 0 14px 45px rgba(0,0,0,0.6); justify-content: space-between; align-items: center;
  animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@media (max-width: 768px) { .mobile-sticky-bar { display: flex; } }
.sticky-status { font-family: var(--font-mono); font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 8px; color: #e9eef6; }
.dot-online { width: 6px; height: 6px; background: #7fe9c2; border-radius: 50%; box-shadow: 0 0 8px rgba(127, 233, 194, 0.6); }
.sticky-actions { display: flex; gap: 8px; }
.sticky-btn { height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-family: var(--font-head); font-weight: 700; font-size: 13px; transition: transform 0.1s; }
.sticky-btn:active { transform: scale(0.96); }
.sticky-btn.discord { width: 44px; background: rgba(255,255,255,0.06); color: var(--primary); border: 1px solid rgba(255,255,255,0.05); }
.sticky-btn.join { padding: 0 20px; background: linear-gradient(135deg, var(--primary), #4866ea); color: white; box-shadow: 0 4px 15px rgba(95, 124, 255, 0.35); border: 1px solid rgba(255,255,255,0.1); }
@keyframes slideUp { from { transform: translate(-50%, 120%); } to { transform: translate(-50%, 0); } }