:root{
  --bg:#0e1116;--card:#161a24;--card-hover:#1d2230;--border:#262c3a;
  --text:#e8eaf0;--muted:#8a93a6;
  --arc:#e8a33d;--apex:#da292a;--valheim:#e98e4a;--warzone:#f96800;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Exo 2',system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(ellipse at top,rgba(232,163,61,0.06),transparent 60%),radial-gradient(ellipse at bottom,rgba(218,41,42,0.05),transparent 70%)}
/* faint CRT scanlines -- lab signature */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:99;opacity:0.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,0.03) 3px 6px)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.wrap{max-width:1100px;margin:0 auto;padding:48px 24px;display:flex;flex-direction:column;min-height:100vh}
.hero{text-align:center;margin:28px 0 52px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero>*{animation:rise 0.7s ease-out backwards}
.hero .sub{animation-delay:0.22s}
.hero .hero-rule{animation-delay:0.34s}
.hero-emblem{width:72px;height:72px;border-radius:50%;border:2px solid #00d9ff55;
  box-shadow:0 0 18px #00d9ffaa,0 0 46px -2px #00d9ff88,0 0 90px -10px var(--apex);
  animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 18px #00d9ffaa,0 0 46px -2px #00d9ff88,0 0 90px -10px var(--apex)}
  50%{box-shadow:0 0 30px #00d9ffee,0 0 70px 2px #00d9ffbb,0 0 120px -4px var(--apex)}}
.hero h1{font-family:'Orbitron',system-ui,sans-serif;font-size:48px;font-weight:800;letter-spacing:2px;
  -webkit-text-fill-color:transparent;
  /* layers: candy highlight stripe | vertical bubble shading | scrolling wave */
  background:
    linear-gradient(180deg,transparent 6%,rgba(255,255,255,0.5) 10%,rgba(255,255,255,0.08) 17%,transparent 22%),
    linear-gradient(180deg,rgba(255,235,245,0.16) 0%,transparent 30%,transparent 55%,rgba(150,0,80,0.38) 84%,rgba(90,0,60,0.55) 100%),
    linear-gradient(90deg,#ff1e2e 0%,#ff1e2e 26%,#b32eff 34%,#b32eff 43%,#ff7a00 51%,#ff7a00 77%,#b32eff 85%,#b32eff 94%,#ff1e2e 100%);
  background-size:100% 100%,100% 100%,300% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:shift 18s linear infinite;position:relative}
/* extruded base behind the text -- gives the letters depth */
.hero h1::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;
  transform:translate(2px,3px);
  -webkit-text-fill-color:#4a1322;background:none;
  text-shadow:1px 1px 0 #3d0f1e,2px 2px 0 #340d1a,3px 3px 0 #2b0b16,4px 4px 0 #220912,
    5px 5px 0 #1a070e,6px 6px 0 #120508,3px 9px 22px rgba(0,0,0,0.85),
    0 0 30px rgba(255,90,110,0.4),
    -2px -4.5px 0 rgba(255,228,238,0.55),-3.5px -3px 0 rgba(255,228,238,0.3)}
/* glisten rides its own top layer so it sweeps the WHOLE letter (face + edges) */
.hero h1::after{content:attr(data-text);position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,0.95) 50%,transparent 58%);
  background-size:250% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  animation:shine 18s linear infinite}
@keyframes shift{0%{background-position:0 0,0 0,300% 50%}100%{background-position:0 0,0 0,0% 50%}}
@keyframes shine{
  0%{background-position:230% 50%}
  15%{background-position:-130% 50%}
  100%{background-position:-130% 50%}}
.sub{font-family:'Share Tech Mono',monospace;color:var(--muted);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.dot{width:5px;height:5px;border-radius:50%;background:var(--valheim);box-shadow:0 0 8px var(--valheim)}
.hero-rule{width:min(520px,80%);height:1px;margin-top:6px;
  background:linear-gradient(90deg,transparent,var(--arc),var(--apex),var(--valheim),transparent);opacity:0.55}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{--accent:#888;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:36px 26px 28px;
  text-decoration:none;color:var(--text);transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;
  position:relative;overflow:hidden}
.card-arc{--accent:var(--arc);animation:rise 0.7s ease-out 0.45s backwards}
.card-apex{--accent:var(--apex);animation:rise 0.7s ease-out 0.6s backwards}
.card-valheim{--accent:var(--valheim);animation:rise 0.7s ease-out 0.75s backwards}
.card-warzone{--accent:var(--warzone);animation:rise 0.7s ease-out 0.9s backwards}
/* per-card brand typography -- each card speaks its site's language */
.card-arc h2,.card-apex h2{font-family:'Rajdhani',sans-serif;letter-spacing:1.5px}
.card-arc .go,.card-arc .chips span{font-family:'Share Tech Mono',monospace}
.card-apex p,.card-apex .chips span{font-family:'Exo 2',sans-serif}
.card-valheim h2{font-family:'Cinzel',serif;letter-spacing:1px}
.card-valheim p,.card-valheim .chips span,.card-valheim .go{font-family:'Marcellus',serif}
.card-warzone h2{font-family:'Black Ops One',system-ui;letter-spacing:1px;font-weight:400}
.card-warzone p,.card-warzone .chips span,.card-warzone .go{font-family:'Saira',sans-serif}
.card-valheim .chips span{text-transform:none}
/* top accent bar + faint diagonal texture */
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:0.7;transition:opacity 0.25s}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.05;
  background:repeating-linear-gradient(135deg,transparent 0 14px,var(--accent) 14px 15px)}
/* radial accent wash behind the logo */
.card-glow{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:280px;height:220px;
  border-radius:50%;pointer-events:none;opacity:0.16;transition:opacity 0.25s;
  background:radial-gradient(closest-side,var(--accent),transparent)}
.card:hover{transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 14px 40px rgba(0,0,0,0.5),0 0 24px -6px var(--accent)}
.card:hover::before{opacity:1}
.card:hover .card-glow{opacity:0.3}
.logo-ring{position:relative;z-index:1;padding:6px;border-radius:50%;
  border:2px solid var(--accent);transition:transform 0.25s;
  animation:ringpulse 4s ease-in-out infinite}
@keyframes ringpulse{0%,100%{box-shadow:0 0 11px -2px var(--accent),0 0 32px -10px var(--accent)}
  50%{box-shadow:0 0 21px -1px var(--accent),0 0 48px -7px var(--accent)}}
.card:hover .logo-ring{transform:scale(1.06)}
.card img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.card h2{position:relative;z-index:1;font-size:24px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--accent)}
.card p{position:relative;z-index:1;color:var(--text);font-size:14px;line-height:1.55;max-width:300px}
.chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chips span{font-size:11px;font-weight:600;letter-spacing:0.3px;color:var(--muted);
  border:1px solid var(--border);border-radius:20px;padding:3px 10px;background:rgba(255,255,255,0.03);
  transition:color 0.2s,border-color 0.2s}
.card:hover .chips span{color:var(--text);border-color:var(--accent)}
.go{position:relative;z-index:1;margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;letter-spacing:0.4px;color:var(--accent)}
.foot{margin-top:auto;padding-top:48px;text-align:center;color:var(--muted);font-size:12px}
@media (max-width:640px){
  .hero h1{font-size:20px;letter-spacing:1px}
  .sub{font-size:12px;gap:8px}
  .wrap{padding:24px 14px}
  .hero{margin:12px 0 26px;gap:10px}
  .hero-emblem{width:56px;height:56px}
  /* compact horizontal cards -- all three visible without scrolling */
  .cards{gap:12px}
  .card{display:grid;grid-template-columns:64px 1fr;column-gap:14px;row-gap:2px;
    align-items:center;text-align:left;padding:14px 16px}
  .logo-ring{grid-row:1/4;padding:4px;justify-self:center}
  .card img{width:56px;height:56px}
  .card h2{font-size:17px}
  .card p{font-size:11.5px;line-height:1.4;max-width:none}
  .chips{display:none}
  .go{margin-top:2px;padding-top:0;font-size:12px;justify-self:start}
}