/* Steel Sand Gaming — purple gaming flagship hub */

@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #100522;
  --bg2: #1a0a38;
  --panel: rgba(168, 85, 247, 0.06);
  --panel-line: rgba(168, 85, 247, 0.28);
  --purple: #a855f7;
  --purple-hi: #c084fc;
  --violet: #7c3aed;
  --magenta: #d946ef;
  --ink: #efe9fb;
  --muted: #a99cc8;
  --display: "Orbitron", system-ui, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  background:
    radial-gradient(70% 50% at 50% -5%, #2a1256 0%, transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 40%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ambient glows */
.glow { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0; }
.glow-1 { width: 420px; height: 420px; background: #7c3aed; top: -120px; left: -100px; }
.glow-2 { width: 380px; height: 380px; background: #d946ef; bottom: -140px; right: -120px; opacity: .35; }

.hub { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 48px 20px 60px; }

/* Hero */
.hero { text-align: center; }
.logo-badge {
  position: relative;
  width: 268px; height: 268px; margin: 0 auto 22px;
  display: grid; place-items: center;
}
/* soft white cloud the transparent logo sits in */
.logo-badge::before {
  content: ""; position: absolute; inset: -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #ffffff 0%, rgba(255,255,255,.95) 48%, rgba(255,255,255,.55) 66%, rgba(255,255,255,0) 84%);
  filter: blur(7px);
}
/* purple aura behind the cloud */
.logo-badge::after {
  content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.6) 0%, rgba(124,58,237,.25) 45%, rgba(168,85,247,0) 72%);
  filter: blur(16px);
}
.logo-badge img { position: relative; z-index: 1; width: 84%; height: auto; display: block; }
.hero h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 7vw, 46px); letter-spacing: .04em; margin: 0 0 10px; line-height: 1.05;
  background: linear-gradient(180deg, #fff 0%, #d8b4fe 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(168,85,247,.45));
}
.tagline { font-family: var(--display); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--purple-hi); margin: 0 0 14px; }
.intro { color: var(--muted); max-width: 42ch; margin: 0 auto; font-size: 16px; }

/* Social row */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0; }
.social {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  color: #d8b4fe; background: var(--panel); border: 1px solid var(--panel-line);
  text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.social svg { width: 24px; height: 24px; fill: currentColor; }
.social:hover {
  transform: translateY(-4px); color: #fff;
  background: linear-gradient(180deg, rgba(168,85,247,.35), rgba(124,58,237,.25));
  box-shadow: 0 0 24px rgba(168,85,247,.6);
}
.social.pending { opacity: .32; cursor: default; }

/* Shop button */
.shop-btn {
  display: flex; align-items: center; gap: 16px;
  margin: 6px 0 34px; padding: 16px 22px; border-radius: 16px;
  text-decoration: none; color: #fff;
  background: linear-gradient(120deg, var(--violet), var(--magenta));
  box-shadow: 0 10px 30px rgba(217,70,239,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.shop-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 14px 40px rgba(217,70,239,.5); }
.shop-cart { font-size: 26px; }
.shop-text { display: flex; flex-direction: column; flex: 1; }
.shop-text strong { font-family: var(--display); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.shop-text small { color: rgba(255,255,255,.8); font-size: 13px; }
.shop-arrow { font-size: 22px; opacity: .9; transition: transform .12s ease; }
.shop-btn:hover .shop-arrow { transform: translateX(4px); }

/* Sites */
.sites h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: .16em; color: var(--purple-hi);
  text-align: center; margin: 0 0 16px;
  display: flex; align-items: center; gap: 12px; justify-content: center;
}
.sites h2::before, .sites h2::after { content: ""; height: 1px; width: 40px; background: linear-gradient(90deg, transparent, var(--panel-line)); }
.site-grid { display: grid; gap: 12px; }
.site-card {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px; border-radius: 14px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--panel-line); color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.site-card::after {
  content: "→"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--purple); opacity: .6; transition: transform .14s ease, opacity .14s ease;
}
.site-card:hover {
  transform: translateY(-3px); border-color: var(--purple);
  background: linear-gradient(120deg, rgba(168,85,247,.12), rgba(124,58,237,.08));
  box-shadow: 0 12px 30px rgba(124,58,237,.25);
}
.site-card:hover::after { transform: translateY(-50%) translateX(4px); opacity: 1; }
.site-name { font-weight: 700; font-size: 17px; }
.site-desc { color: var(--muted); font-size: 14px; }
.site-card.soon { opacity: .55; pointer-events: none; }
.site-tag {
  position: absolute; right: 16px; top: 14px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--purple-hi); border: 1px solid var(--panel-line); border-radius: 999px; padding: 2px 8px;
}

/* Footer */
.foot {
  margin-top: 40px; text-align: center; color: var(--muted);
  font-size: 13px; display: flex; flex-direction: column; gap: 4px;
}
.foot-mark { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--purple-hi); font-size: 12px; }