/* 1) Modern near-zero reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
body{min-height:100vh;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,picture,svg{max-width:100%;display:block}
input,button,textarea,select{font:inherit;color:inherit}

/* 2) Design tokens */
:root{
  /* Core palette: blue/dark-blue + golden borders */
  --blue-900:#0b1b4d;
  --blue-800:#1e3a8a;
  --blue-700:#1d4ed8;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-400:#60a5fa;
  --blue-300:#93c5fd;
  --blue-200:#bfdbfe;
  --gold-400:#facc15;
  --gold-500:#f59e0b;
  --gold-300:#fcd34d;
  --gold-600:#d97706;
  --red-500:#ef4444;
  --red-400:#f87171;
  --green-400:#4ade80;

  --bg:#0b1020;           /* page background */
  --surface:#0f172a;      /* elevated surface */
  --text:#f3f6ff;         /* primary text (brighter for dark bg) */
  --muted:#c4d2ee;        /* secondary text (higher contrast) */
  --accent:var(--blue-600);
  /* Links (dark-mode first) */
  --link:#8ec5ff;         /* brighter link on dark */
  --link-hover:#c6e2ff;   /* lighter on hover */
  /* UI Font (nice, modern; falls back to system if unavailable) */
  --font-ui: Inter, "SF Pro Text", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  /* Pastel background for solid mode */
  --pastel-bg:#eaf2ff;

  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
  --radius:.75rem; --radius-lg:1rem; --radius-xl:1.25rem;
  --max-width:72rem;
  /* layout */
  --nav-primary-height:calc(72px + env(safe-area-inset-top));
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --text:#0b1020;
    --muted:#334155;
    /* Links (dark-mode first) */
    --link:var(--blue-700);
    --link-hover:var(--blue-600);
  }
}

/* 3) Base */
body{
  background:var(--bg);
  color:var(--text);
  font-family: var(--font-ui);
  position:relative;z-index:0
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
a:focus-visible{outline:2px dashed var(--gold-500);outline-offset:2px;border-radius:.25rem}
.h1,h1{font-size:clamp(1.75rem,4vw,3rem);line-height:1.1;letter-spacing:-.02em}
.muted{color:var(--muted)}
.brand{font-weight:700;letter-spacing:.2px}
.h3{font-size:1.125rem;line-height:1.4}
ul[role='list'],ol[role='list']{list-style:none;padding:0;margin:0}

/* 4) Layout helpers */
.container{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--space-3)}
/* Tablet: add a bit more side padding for breathing room */
@media (min-width:48rem) and (max-width:64rem){
  .container{padding-inline:var(--space-4)}
}
.flow > * + *{margin-top:var(--space-3)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.grid{display:grid;gap:var(--space-3);grid-template-columns:1fr}
.pad-3{padding:var(--space-3)}
.pad-y-3{padding-block:var(--space-3)}
.pad-y-4{padding-block:var(--space-4)}
.pad-y-5{padding-block:var(--space-5)}
.pad-b-5{padding-bottom:var(--space-5)}

/* Hero CTA (minimal) */
.hero-cta{display:grid;place-items:center;text-align:center;padding-block:var(--space-6);gap:var(--space-4)}
.hero-cta .cta-buttons{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.hero-cta .cta-note{color:var(--muted);font-size:.875rem}

/* Hero CTA Large (enhanced homepage hero) */
.hero-cta-large{
  min-height:60vh;
  padding-block:clamp(4rem, 12vh, 8rem);
  gap:var(--space-5);
  position:relative;
}

.hero-content{
  max-width:52rem;
  display:grid;
  gap:var(--space-4);
  place-items:center;
  z-index:1;
}

.hero-title{
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  margin-bottom:var(--space-2);
  text-align:center;
}

.hero-title-white{
  color:#ffffff;
  text-shadow:
    0 2px 10px rgba(0,0,0,.4),
    0 4px 20px rgba(0,0,0,.3),
    0 8px 40px rgba(0,0,0,.2);
}

.hero-subtitle{
  font-size:clamp(1rem, 2.5vw, 1.375rem);
  color:#ffffff;
  line-height:1.6;
  max-width:42rem;
  text-align:center;
  margin-bottom:var(--space-3);
  text-shadow:
    0 1px 3px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.3);
}

/* Larger buttons in hero */
.hero-cta-large .cta-buttons{
  gap:var(--space-4);
  margin-top:var(--space-3);
}

.hero-cta-large .cta-note{
  color:#ffffff;
  text-shadow:
    0 1px 3px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.3);
}

/* Tablet and up: even more dramatic */
@media (min-width:48rem){
  .hero-cta-large{
    min-height:70vh;
  }

  .hero-title{
    font-size:clamp(3rem, 7vw, 5rem);
  }

  .hero-subtitle{
    font-size:clamp(1.125rem, 3vw, 1.5rem);
  }
}

@media (min-width:48rem){
  .grid{grid-template-columns:repeat(3,1fr)}
}

/* 5) Accessibility */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-3);top:var(--space-3);background:var(--surface);padding:.5rem;border-radius:.5rem}

/* 6) Surfaces and buttons */
.card{border-radius:var(--radius-lg);background:var(--surface)}
.solid-surface{border-radius:var(--radius-lg);background:var(--surface)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.625rem 1rem;font-weight:600}

/* 7) Blue background gradient (page backdrop) */
.bg-gradient-blue{
  background-image:
    radial-gradient(1000px 800px at -10% -10%, rgba(37,99,235,.15), transparent 60%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 60%, var(--blue-700) 120%);
}

/* 8) Gradient text utility */
.gradient-text-blue{
  background-image:linear-gradient(90deg, var(--blue-300), var(--blue-200));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* 9) 1px gradient border (gold) utility */
.border-gradient-gold{
  position:relative;
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
  border-radius:var(--radius-lg);
}

/* 10) Glass effect surface with golden gradient border */
.glass{
  position:relative;
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  /* Layer 1: semi-transparent bluish surface | Layer 2: golden gradient border */
  background:
    linear-gradient(to bottom right, hsla(220,90%,70%,.08), hsla(220,90%,30%,.08)) padding-box,
    linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 30px rgba(0,0,0,.35);
}

/* Fallback when backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .glass{
    background:
      linear-gradient(to bottom right, rgba(255,255,255,.04), rgba(255,255,255,.02)) padding-box,
      linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
  }
}

/* 11) Glassy navbar + solid pastel background utility */
.navbar{
  position:sticky;top:0;z-index:1000;
  width:100%;
  border-radius:0; /* full-width bar, not rounded */
  height:var(--nav-primary-height);
  /* dark translucent glass surface with stronger Gaussian blur + subtle blue glows */
  background:
    radial-gradient(600px 160px at 50% -40px, rgba(96,165,250,.14), transparent 65%),
    radial-gradient(380px 120px at 12% 0, rgba(37,99,235,.10), transparent 70%),
    radial-gradient(380px 120px at 88% 0, rgba(96,165,250,.10), transparent 70%),
    linear-gradient(
      to bottom,
      rgba(7,11,20,.82) 0%,
      rgba(10,16,28,.64) 60%,
      rgba(10,16,28,.52) 100%
    );
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 16px rgba(0,0,0,.35);
}
.navbar > .container{display:flex;align-items:center;height:100%;position:relative;z-index:1}
.navbar nav.cluster{width:100%;justify-content:space-between}
/* White nav link text, keep gradient brand untouched */
.navbar a:not(.gradient-text-blue){color:#fff}
.navbar a:not(.gradient-text-blue):hover{color:#fff;opacity:.9}
.navbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  /* Fade to transparent edges with blue center (footer-like) */
  background:linear-gradient(90deg,
    transparent 0%,
    rgb(96 165 250 / .45) 18%,
    var(--blue-400) 50%,
    rgb(96 165 250 / .45) 82%,
    transparent 100%);
  opacity:.6;pointer-events:none;z-index:1
}
/* Centered diamond ornament over the bottom rule */
.navbar::before{content:none}
@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){
  .navbar{background:linear-gradient(to bottom, rgba(7,11,20,.95), rgba(10,16,28,.75))}
}

.bg-pastel{background:var(--pastel-bg);color:#0b1020}

/* Secondary navbar: darker glass bar with same ornaments */
.navbar-secondary{
  width:100%;
  position:sticky;top:var(--nav-primary-height);z-index:999;
  padding-block:.75rem;
  background:
    radial-gradient(520px 140px at 50% -32px, rgba(250,204,21,.10), transparent 65%),
    radial-gradient(320px 110px at 15% 0, rgba(217,119,6,.08), transparent 70%),
    radial-gradient(320px 110px at 85% 0, rgba(250,204,21,.08), transparent 70%),
    linear-gradient(
      to bottom,
      rgba(3,6,15,.92) 0%,
      rgba(6,10,20,.78) 60%,
      rgba(8,12,22,.66) 100%
    );
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 16px rgba(0,0,0,.4);
}
/* White nav link text for secondary bar */
.navbar-secondary a:not(.gradient-text-blue){color:#fff}
.navbar-secondary a:not(.gradient-text-blue):hover{color:#fff;opacity:.9}
.navbar-secondary::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(250,204,21,.55) 18%,
    var(--gold-500) 50%,
    rgba(250,204,21,.55) 82%,
    transparent 100%);
  opacity:.65;pointer-events:none;z-index:1
}
.navbar-secondary::before{
  content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));
  border-radius:2px;box-shadow:0 0 6px rgba(250,204,21,.25);pointer-events:none;z-index:2
}

/* 12) Page vignette overlay (subtle, works on pastel and dark) */
.with-vignette::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% -200px, rgba(37,99,235,.12), transparent 70%),
    radial-gradient(600px 400px at -150px 70%, rgba(250,204,21,.10), transparent 70%),
    radial-gradient(600px 400px at calc(100% + 150px) 80%, rgba(217,119,6,.10), transparent 70%);
}

/* 13) Stats component */
.stats{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-end}
.stat{display:grid;gap:.25rem}
.stat .value{font-size:clamp(1.75rem,5vw,2.75rem);font-weight:800;color:var(--blue-600);letter-spacing:-.01em}
.stat .label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* 14) Social tray (glassy capsule with decorative gold lines) */
.social-tray{
  position:relative;z-index:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-xl);
  border:1px solid transparent;
  background:
    linear-gradient(to bottom right, rgba(255,255,255,.6), rgba(255,255,255,.25)) padding-box,
    linear-gradient(135deg, var(--gold-400), var(--gold-600)) border-box;
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(2,6,23,.12);
}
.social-tray::before,.social-tray::after{
  content:"";position:absolute;top:50%;width:18%;height:1px;z-index:0;
  background:linear-gradient(90deg, transparent, rgba(250,204,21,.7), transparent)
}
.social-tray::before{left:var(--space-3)}
.social-tray::after{right:var(--space-3)}
.social-tray > *{position:relative;z-index:1}

/* 15) Icon buttons */
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:12px;text-decoration:none;color:var(--text);
  background:linear-gradient(to bottom, rgba(14,23,44,.85), rgba(23,32,55,.85));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(2,6,23,.18);
  transition:transform .18s ease, box-shadow .18s ease
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 20px rgba(2,6,23,.22)}

/* 16) Ornamental divider */
.ornament-divider{position:relative;height:1px;background:linear-gradient(90deg, transparent, rgba(96,165,250,.45), transparent);margin-block:var(--space-5)}
.ornament-divider::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));border-radius:2px;box-shadow:0 0 8px rgba(250,204,21,.35)
}

/* 17) Tech dark background (layered glows + subtle grid) */
.bg-tech-dark{
  /* Force dark-mode tokens regardless of OS preference */
  --surface:#0f172a;
  --text:#f3f6ff;
  --muted:#c4d2ee;
  --link:#8ec5ff;
  --link-hover:#c6e2ff;
  /* Grid toggles (disabled to remove white squares) */
  --grid-alpha:0;            /* major grid 32px */
  --minor-grid-alpha:0;      /* minor grid 8px */
  --glow-1:37 99 235;        /* blue */
  --glow-2:13 148 136;       /* teal */
  --glow-3:217 119 6;        /* gold */
  --glow-1-alpha:.20; --glow-2-alpha:.12; --glow-3-alpha:.10;

  background-color:#070b14;
  background-image:
    radial-gradient(800px 600px at 18% -10%, rgb(var(--glow-1) / var(--glow-1-alpha)), transparent 60%),
    radial-gradient(700px 500px at 85% 110%, rgb(var(--glow-2) / var(--glow-2-alpha)), transparent 60%),
    radial-gradient(800px 600px at -10% 100%, rgb(var(--glow-3) / var(--glow-3-alpha)), transparent 60%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / var(--minor-grid-alpha)) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / var(--minor-grid-alpha)) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / var(--grid-alpha)) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / var(--grid-alpha)) 0 1px, transparent 1px 32px),
    url("assets/bg.png");
  background-size: auto, auto, auto, auto, auto, auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, fixed;
  background-position: center center;
  color:var(--text);
}
.bg-tech-dark.tech-quiet{
  --grid-alpha:0; --minor-grid-alpha:0;
  --glow-1-alpha:.12; --glow-2-alpha:.08; --glow-3-alpha:.06;
}
.bg-tech-dark.tech-loud{
  --grid-alpha:.08; --minor-grid-alpha:.04;
  --glow-1-alpha:.28; --glow-2-alpha:.20; --glow-3-alpha:.16;
}

/* Optional: re-enable grid if desired */
.bg-tech-dark.tech-grid{ --grid-alpha:.05; --minor-grid-alpha:.02 }
.navbar nav ul[role='list'] a, .navbar-secondary nav ul[role='list'] a{
  text-transform: uppercase; letter-spacing:.12em; font-weight:500; font-size:.75rem;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:.4rem .5rem
}
/* Thin separators between nav items with vertical fade (centered in the gap) */
.navbar nav ul[role='list'], .navbar-secondary nav ul[role='list']{ --nav-gap: var(--space-3); gap: var(--nav-gap); position:relative }
.navbar nav ul[role='list'] li, .navbar-secondary nav ul[role='list'] li{ position:relative }
.navbar nav ul[role='list'] li:not(:last-child)::after,
.navbar-secondary nav ul[role='list'] li:not(:last-child)::after{
  content:""; position:absolute; right: calc(var(--nav-gap) / -2); top:50%; transform:translateY(-50%);
  width:1px; height:1.25em; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:.6
}

/* Navbar 2: center items and increase spacing */
.navbar-secondary nav.cluster{justify-content:center;width:100%}
.navbar-secondary nav ul[role='list']{ --nav-gap: var(--space-5); gap: var(--nav-gap); justify-content:center; flex-wrap: wrap; overflow-x: visible }
.navbar-secondary .container{ display:flex; justify-content:center }

/* Mobile-first adjustments: ensure true centering on wrap, hide separators */
@media (max-width: 48rem){
  .navbar-secondary nav ul[role='list']{ --nav-gap: var(--space-3); gap: var(--nav-gap); justify-content:center; flex-wrap: wrap; overflow-x: visible }
}

/* Grid utilities */
.cols-1{grid-template-columns:minmax(0,1fr)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:48rem){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
}

/* Realm Mode Pill */
.realm-mode-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.realm-mode-pill.is-pvp { background: rgba(239, 68, 68, 0.15); color: var(--red-400); }
.realm-mode-pill.is-pve { background: rgba(59, 130, 246, 0.15); color: var(--blue-400); }