/* ============================================================================
   T9C — Roblox Rivals Clan  ·  styles.css
   Near-black esports theme · neon crimson-pink + electric cyan · Discord blurple
   ========================================================================== */

/* ---- Tokens (JS overrides the color trio from CONFIG.theme) ------------- */
:root{
  --bg:        #0a0a12;
  --primary:   #ff2e63;
  --secondary: #08d9d6;
  --discord:   #5865F2;

  --bg-2:   #0e0e1a;
  --bg-3:   #14142400;
  --panel:  rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.09);
  --stroke-2:rgba(255,255,255,.14);
  --text:   #f2f3f7;
  --muted:  #a6a8b8;
  --dim:    #7a7c8e;

  --radius: 16px;
  --radius-sm: 11px;
  --wrap: 1120px;
  --nav-h: 64px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 18px 50px -18px rgba(0,0,0,.8);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* Persistent ambient background behind the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(255,46,99,.16), transparent 60%),
    radial-gradient(1000px 700px at 12% 6%, rgba(8,217,214,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

/* ---- Helpers ----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.section{ padding-block:clamp(56px,9vw,108px); position:relative; }

.skip-link{
  position:fixed; left:12px; top:-60px; z-index:200;
  background:var(--primary); color:#0a0a12; font-weight:800;
  padding:10px 16px; border-radius:10px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--secondary); outline-offset:3px; border-radius:6px; }

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  --b:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:44px; padding:12px 22px; border-radius:999px;
  font-weight:800; letter-spacing:.02em; border:1px solid transparent;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  text-align:center; line-height:1.1; white-space:nowrap;
}
.btn-lg{ min-height:52px; padding:15px 30px; font-size:1.04rem; }
.btn-primary{
  background:linear-gradient(180deg, var(--primary), #d81d4f);
  color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px -10px var(--primary);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 28px -4px var(--primary), 0 14px 34px -12px var(--primary); }
.btn-ghost{
  background:var(--panel); color:var(--text);
  border-color:var(--stroke-2); backdrop-filter:blur(8px);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--secondary); box-shadow:0 0 22px -6px var(--secondary); }
.btn-discord{
  background:linear-gradient(180deg, #6b78ff, var(--discord));
  color:#fff; box-shadow:0 10px 30px -10px var(--discord), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.btn-discord:hover{ transform:translateY(-2px); box-shadow:0 0 30px -4px var(--discord); }
.btn:active{ transform:translateY(0) scale(.99); }

/* ---- Brand ------------------------------------------------------------- */
.brand{ display:inline-flex; align-items:center; gap:.5rem; font-weight:900; }
.brand-glyph{
  font-size:1.5rem; line-height:1; color:var(--primary);
  text-shadow:0 0 14px var(--primary); transition:transform .4s var(--ease);
}
.brand:hover .brand-glyph{ transform:rotate(90deg); }
.brand-word{
  font-size:1.35rem; letter-spacing:.18em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===================== NAV ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,18,.55);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  padding-top:env(safe-area-inset-top);
}
.site-header.scrolled{
  background:rgba(10,10,18,.86);
  border-bottom-color:var(--stroke);
  box-shadow:0 10px 30px -20px #000;
}
.nav{
  height:var(--nav-h); max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-menu{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); }
.nav-links{ display:flex; align-items:center; gap:clamp(10px,2vw,26px); }
.nav-links a{
  position:relative; font-weight:700; color:var(--muted);
  font-size:.95rem; padding:8px 2px; letter-spacing:.04em;
  transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
  border-radius:2px;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--stroke-2);
  border-radius:12px; background:var(--panel);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle-bar{
  width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--nav-h) + 24px) 16px 64px;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 18%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 18%, #000 35%, transparent 78%);
  transform:perspective(620px) rotateX(58deg) translateY(-6%) scale(1.6);
  transform-origin:center top; opacity:.5;
  animation:gridFlow 11s linear infinite;
}
@keyframes gridFlow{ to{ background-position:0 46px, 46px 0; } }
.hero-sweep{
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,46,99,.14) 48%, rgba(8,217,214,.12) 56%, transparent 70%);
  background-size:280% 280%; mix-blend-mode:screen;
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{ 0%{ background-position:120% 0; } 50%{ background-position:-20% 0; } 100%{ background-position:120% 0; } }
.hero-scanlines{
  position:absolute; inset:0; opacity:.4; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);
          mask-image:linear-gradient(180deg,transparent,#000 30%);
}
.hero-glow{
  position:absolute; left:50%; top:38%; width:min(80vw,720px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,46,99,.26), transparent 62%);
  filter:blur(20px); animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
.hero-particles{ position:absolute; inset:0; overflow:hidden; }
.particle{
  position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:var(--secondary); box-shadow:0 0 8px var(--secondary);
  opacity:0; animation:rise linear infinite;
}
.particle.p{ background:var(--primary); box-shadow:0 0 8px var(--primary); }
@keyframes rise{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.7; }
  100%{ transform:translateY(-108vh) scale(.4); opacity:0; }
}

.hero-inner{ position:relative; z-index:1; max-width:840px; }
.eyebrow{
  display:inline-block; margin:0 0 14px; padding:7px 16px;
  font-size:.74rem; font-weight:800; letter-spacing:.42em; text-transform:uppercase;
  color:var(--secondary); border:1px solid var(--stroke-2); border-radius:999px;
  background:rgba(8,217,214,.07); text-indent:.42em;
}
.hero-word{
  margin:0; font-weight:900; line-height:.9;
  font-size:clamp(5rem, 27vw, 16rem); letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 0%, #ffd9e3 38%, var(--primary) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,46,99,.55)) drop-shadow(0 0 60px rgba(255,46,99,.3));
  animation:flicker 7s steps(1) infinite;
}
@keyframes flicker{ 0%,93%,100%{ opacity:1; } 94%{ opacity:.72; } 96%{ opacity:1; } 97%{ opacity:.85; } }
.hero-tagline{
  margin:.5rem 0 .35rem; font-size:clamp(1.15rem,3.4vw,1.7rem);
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#fff;
}
.hero-blurb{ margin:0 auto; max-width:60ch; color:var(--muted); font-size:clamp(1rem,2.2vw,1.16rem); }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.hero-meta{
  margin-top:26px; display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap;
  color:var(--dim); font-size:.84rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.hero-meta .dot{ color:var(--primary); }

.scroll-chevron{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:1; width:44px; height:44px; display:grid; place-items:center;
  font-size:2rem; color:var(--muted); animation:bob 1.8s ease-in-out infinite;
}
.scroll-chevron:hover{ color:#fff; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ===================== STATS ===================== */
.stats{ padding-block:clamp(28px,5vw,46px); border-block:1px solid var(--stroke); background:rgba(255,255,255,.02); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,3vw,28px); }
.stat{ text-align:center; padding:8px; }
.stat-value{
  font-size:clamp(2rem,6vw,3.4rem); font-weight:900; line-height:1;
  background:linear-gradient(180deg,#fff, var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 12px rgba(8,217,214,.35));
  font-variant-numeric:tabular-nums;
}
.stat-label{
  margin-top:8px; font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}

/* ===================== SECTION HEADS ===================== */
.section-head{ margin-bottom:clamp(28px,5vw,48px); }
.section-eyebrow{
  margin:0 0 8px; font-size:.78rem; font-weight:800; letter-spacing:.28em;
  text-transform:uppercase; color:var(--secondary); font-family:ui-monospace,Menlo,Consolas,monospace;
}
.section-title{
  margin:0; font-size:clamp(2rem,6vw,3.2rem); font-weight:900; line-height:1.02;
  text-transform:uppercase; letter-spacing:.01em;
}
.section-title::after{
  content:""; display:block; width:64px; height:4px; margin-top:14px; border-radius:4px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
}

/* ---- Glassy card base -------------------------------------------------- */
.card{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--stroke); border-radius:var(--radius);
  backdrop-filter:blur(8px); box-shadow:var(--shadow);
}

/* ===================== ABOUT ===================== */
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.6vw,24px); }
.about-card{
  padding:clamp(22px,3vw,30px); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--stroke); position:relative; overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.about-card::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:linear-gradient(135deg, var(--primary), transparent 40%, var(--secondary));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s;
}
.about-card:hover{ transform:translateY(-6px); border-color:var(--stroke-2); box-shadow:0 24px 50px -22px var(--primary); }
.about-card:hover::before{ opacity:.7; }
.about-icon{
  font-size:2.1rem; width:60px; height:60px; display:grid; place-items:center;
  border-radius:14px; background:rgba(255,46,99,.1); border:1px solid var(--stroke-2);
  margin-bottom:16px;
}
.about-card h3{ margin:0 0 8px; font-size:1.25rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.about-card p{ margin:0; color:var(--muted); }

/* ===================== DISCORD ===================== */
.discord-section{ position:relative; }
.discord-section::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(700px 420px at 50% 30%, rgba(88,101,242,.16), transparent 65%);
}
.discord-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(18px,3vw,28px); align-items:start; }
.discord-card{
  padding:clamp(24px,3.4vw,38px); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(88,101,242,.16), rgba(88,101,242,.05));
  border:1px solid rgba(88,101,242,.4);
  box-shadow:0 0 60px -24px var(--discord), var(--shadow);
  position:relative; overflow:hidden;
}
.discord-card::before{
  content:""; position:absolute; top:-40%; right:-20%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(88,101,242,.4), transparent 65%); filter:blur(10px);
}
.discord-logo{
  width:64px; height:64px; display:grid; place-items:center; border-radius:16px;
  background:var(--discord); box-shadow:0 0 30px -6px var(--discord); margin-bottom:18px; position:relative;
}
.discord-logo svg{ width:38px; height:38px; fill:#fff; }
.discord-card h3{ margin:0; font-size:clamp(1.5rem,3.6vw,2rem); font-weight:900; text-transform:uppercase; }
.discord-members{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-weight:700; color:#c9cdff; font-size:.95rem;
}
.discord-members .live-dot{
  width:9px; height:9px; border-radius:50%; background:#3ba55d; box-shadow:0 0 10px #3ba55d;
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.perks{ margin:22px 0; display:grid; gap:12px; }
.perks li{ display:flex; align-items:flex-start; gap:12px; color:#e8e9ff; }
.perks .check{
  flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:rgba(8,217,214,.16); color:var(--secondary); font-weight:900; font-size:.85rem;
  border:1px solid rgba(8,217,214,.3); margin-top:2px;
}
.discord-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }

.discord-widget{
  border-radius:var(--radius); overflow:hidden; border:1px solid rgba(88,101,242,.4);
  box-shadow:var(--shadow); min-height:0;
}
.discord-widget iframe{ display:block; width:100%; height:500px; border:0; }
.discord-aside{
  padding:clamp(22px,3vw,30px); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--stroke);
}
.discord-aside h4{ margin:0 0 6px; text-transform:uppercase; letter-spacing:.04em; font-size:1.1rem; }
.discord-aside p{ margin:0 0 16px; color:var(--muted); }
.discord-aside .tag{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(8,217,214,.08); border:1px solid var(--stroke-2); color:var(--secondary);
  font-weight:700; font-size:.85rem; margin-top:4px;
}

/* ===================== ROSTER ===================== */
.roster-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,20px); }
.member{
  padding:22px 18px; border-radius:var(--radius); text-align:center; position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--stroke);
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.member:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -24px var(--primary); }
.member.is-leader{ border-color:rgba(255,46,99,.5); box-shadow:0 0 34px -16px var(--primary); background:linear-gradient(180deg, rgba(255,46,99,.1), var(--panel)); }
.member.is-officer{ border-color:rgba(8,217,214,.45); }
.member-avatar{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; font-size:1.4rem; color:#0a0a12;
  border:2px solid rgba(255,255,255,.22); position:relative;
}
.member-rank{
  position:absolute; top:-6px; right:-6px; font-size:1.05rem; line-height:1;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.member-name{ font-weight:800; font-size:1.08rem; overflow-wrap:anywhere; }
.member-role{
  margin-top:4px; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  display:inline-flex; align-items:center; gap:6px; overflow-wrap:anywhere; max-width:100%;
}
.member.is-leader .member-role{ color:var(--primary); }
.member.is-officer .member-role{ color:var(--secondary); }
.member-note{
  margin-top:10px; font-size:.74rem; color:var(--muted); padding-top:10px;
  border-top:1px solid var(--stroke);
}
.member-dot{ width:7px; height:7px; border-radius:50%; background:var(--dim); display:inline-block; }

/* ===================== JOIN ===================== */
.join-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(18px,3vw,30px); align-items:start; }
.reqs{ padding:clamp(22px,3vw,30px); border-radius:var(--radius); background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--stroke); }
.reqs h3{ margin:0 0 16px; text-transform:uppercase; letter-spacing:.04em; font-size:1.2rem; }
.reqs li{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; color:var(--muted); border-bottom:1px dashed var(--stroke); }
.reqs li:last-child{ border-bottom:0; }
.reqs .chk{ color:var(--secondary); font-weight:900; flex:0 0 auto; }

.steps{ display:grid; gap:14px; counter-reset:step; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:20px 22px; border-radius:var(--radius); position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--stroke);
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.step:hover{ transform:translateX(4px); border-color:var(--stroke-2); }
.step-num{
  counter-increment:step; width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  font-weight:900; font-size:1.3rem; color:#fff;
  background:linear-gradient(180deg,var(--primary),#d81d4f); box-shadow:0 0 20px -6px var(--primary);
}
.step-num::before{ content:counter(step); }
.step h4{ margin:0 0 4px; font-size:1.12rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.step p{ margin:0; color:var(--muted); }
.join-cta{ text-align:center; margin-top:clamp(28px,5vw,42px); }

/* ===================== FAQ ===================== */
.faq-list{ display:grid; gap:12px; max-width:820px; }
.faq-item{ border-radius:var(--radius-sm); background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--stroke); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; background:transparent; text-align:left;
  font-weight:800; font-size:1.04rem; letter-spacing:.01em;
}
.faq-q:hover{ color:var(--secondary); }
.faq-icon{ flex:0 0 auto; font-size:1.4rem; color:var(--primary); transition:transform .3s var(--ease); line-height:1; }
.faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); color:var(--secondary); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner{ padding:0 20px 20px; color:var(--muted); }

/* ===================== FOOTER ===================== */
.site-footer{ border-top:1px solid var(--stroke); padding-block:clamp(36px,6vw,56px); background:rgba(0,0,0,.25); padding-bottom:calc(36px + env(safe-area-inset-bottom)); }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; }
.footer-link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 16px;
  border-radius:999px; background:var(--panel); border:1px solid var(--stroke);
  font-weight:700; font-size:.9rem; color:var(--muted);
  transition:transform .18s var(--ease), border-color .2s, color .2s, box-shadow .2s;
}
.footer-link:hover{ transform:translateY(-2px); color:#fff; border-color:var(--secondary); box-shadow:0 0 18px -6px var(--secondary); }
.footer-link.is-rivals{ color:var(--primary); border-color:rgba(255,46,99,.4); }
.footer-link.is-rivals:hover{ color:#fff; border-color:var(--primary); box-shadow:0 0 18px -6px var(--primary); }
.footer-link.is-discord:hover{ border-color:var(--discord); box-shadow:0 0 18px -6px var(--discord); }
.footer-fine{ margin:0; color:var(--dim); font-size:.82rem; }
.footer-fine #footerYear{ display:block; margin-top:4px; opacity:.8; }

/* ===================== TOAST ===================== */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 140%);
  z-index:300; max-width:90vw;
  background:rgba(20,20,34,.96); color:#fff; border:1px solid var(--stroke-2);
  padding:13px 20px; border-radius:12px; font-weight:700; box-shadow:var(--shadow);
  backdrop-filter:blur(10px); transition:transform .35s var(--ease), opacity .35s var(--ease); opacity:0;
  margin-bottom:env(safe-area-inset-bottom);
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
.toast.ok{ border-color:var(--secondary); box-shadow:0 0 24px -8px var(--secondary); }

/* ===================== REVEAL ANIMATION ===================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:920px){
  .discord-layout{ grid-template-columns:1fr; }
  .join-layout{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr 1fr; }
  .roster-grid{ grid-template-columns:repeat(3,1fr); }
  .discord-widget iframe{ height:420px; }
}
@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:6px; padding:18px clamp(16px,4vw,32px) 24px;
    background:rgba(10,10,18,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--stroke);
    transform:translateY(-130%); transition:transform .34s var(--ease); pointer-events:none;
    max-height:calc(100svh - var(--nav-h)); overflow:auto;
  }
  .nav-menu.open{ transform:translateY(0); pointer-events:auto; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-links a{ padding:14px 6px; font-size:1.05rem; border-bottom:1px solid var(--stroke); }
  .nav-links a::after{ display:none; }
  .nav-cta{ margin-top:10px; }
}
@media (max-width:560px){
  .stats-grid{ grid-template-columns:1fr 1fr; gap:18px 12px; }
  .about-grid{ grid-template-columns:1fr; }
  .roster-grid{ grid-template-columns:1fr 1fr; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .discord-actions{ flex-direction:column; }
  .discord-actions .btn{ width:100%; }
}
@media (max-width:380px){
  .roster-grid{ grid-template-columns:1fr 1fr; }
  .member-avatar{ width:56px; height:56px; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero-grid,.hero-sweep,.hero-glow,.hero-particles,.scroll-chevron{ animation:none !important; }
  .hero-particles{ display:none; }
  .reveal{ opacity:1; transform:none; }
  .hero-word{ animation:none; }
}