@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

/* ══════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════ */
:root {
  /* Accent */
  --accent:       #f472b6;
  --accent-mid:   #e879a8;
  --accent-light: #fbc8df;
  --accent-pale:  #fdeef6;
  --accent-glow:  rgba(244,114,182,0.22);
  --accent-dim:   rgba(244,114,182,0.07);

  /* Backwards-compat aliases used throughout existing pages */
  --blue:         #f472b6;
  --blue-mid:     #e879a8;
  --blue-light:   #fbc8df;
  --blue-pale:    #fdeef6;
  --blue-glow:    rgba(244,114,182,0.22);
  --gold:         #e879a8;
  --gold-light:   #fbc8df;
  --gold-glow:    rgba(244,114,182,0.2);

  /* Surfaces */
  --bg:           #050508;
  --bg-card:      #0b0b10;
  --bg-card2:     #0f0f18;

  /* Borders */
  --border:       rgba(255,255,255,0.08);
  --border-soft:  rgba(255,255,255,0.05);
  --border-mid:   rgba(255,255,255,0.13);

  /* Text */
  --text:         #f1f5f9;
  --text-muted:   #4b5563;
  --text-dim:     #1e293b;

  /* Typography */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-ui:      'Space Grotesk', sans-serif;

  /* Radius */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
}

/* ══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(244,114,182,0.35); border-radius: 4px; }

/* ══════════════════════════════════════════════════════
   BACKGROUND
══════════════════════════════════════════════════════ */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Dot grid — refined, precise */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 100%);
}

/* Static gradient accents — no floating blobs */
.bg-blob-1 {
  position: absolute;
  top: -200px; left: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(244,114,182,0.09) 0%, transparent 65%);
  border-radius: 50%;
}
.bg-blob-2 {
  position: absolute;
  top: 40%; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 65%);
  border-radius: 50%;
}
.bg-blob-3 {
  position: absolute;
  bottom: 0; left: 20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 65%);
  border-radius: 50%;
}

/* Film grain noise overlay */
.bg-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.022;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 60px;
  background: rgba(5,5,8,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.3s, border-color 0.3s;
}

nav.scrolled {
  background: rgba(5,5,8,0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img { height: 30px; width: auto; }
.nav-logo span {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.18s;
  padding: 0.25rem 0;
}
.nav-links a:hover  { color: #cbd5e1; }
.nav-links a.active { color: var(--text); }

/* ── Nav buttons ── */
.nav-links .btn {
  border-radius: var(--r-sm);
  padding: 0.55rem 1.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-links .btn-outline {
  background: transparent;
  color: #6b7280;
  border: 1px solid rgba(255,255,255,0.11);
}
.nav-links .btn-outline:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
  transform: translateY(-1px);
}
.nav-links .btn-primary {
  background: #5865F2;
  color: #fff;
  box-shadow: 0 0 14px rgba(88,101,242,0.2);
}
.nav-links .btn-primary:hover {
  background: #4752c4;
  box-shadow: 0 6px 22px rgba(88,101,242,0.38);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, filter 0.15s;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--accent);
  color: #0a0009;
  box-shadow: 0 0 20px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 8px 32px rgba(244,114,182,0.35);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-mid);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--accent);
  color: #0a0009;
  font-weight: 700;
}
.btn-gold:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY — DISPLAY
══════════════════════════════════════════════════════ */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 13vw, 11rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.gradient-text {
  background: linear-gradient(135deg, var(--accent-light) 0%, #fdeef6 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════
   HERO — CINEMATIC (index.html only)
══════════════════════════════════════════════════════ */
.hero-cinema {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 5.5rem;
}

.hero-cinema-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 5rem;
  align-items: flex-end;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.hero-meta-item {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-meta-sep {
  width: 20px; height: 1px;
  background: var(--border);
}
.hero-meta-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #4ade80;
}
.hero-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink-dot 2s ease-in-out infinite;
}
@keyframes blink-dot {
  0%, 100% { opacity: 1; } 50% { opacity: 0.25; }
}

.hero-display {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 13vw, 11.5rem);
  font-weight: 800;
  line-height: 0.87;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2.25rem;
}
.hero-display-accent { color: var(--accent); }

.hero-sub {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.hero-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Right panel — stats */
.hero-stats-panel {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hsp-item {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}
.hsp-item:last-child { border-bottom: none; }
.hsp-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hsp-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Decorative vertical line */
.hero-deco-line {
  position: absolute;
  left: 3rem;
  top: 0; bottom: 5.5rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.hero-deco-line::before {
  content: '';
  position: absolute;
  top: 60px; left: 0;
  width: 1px;
  height: 80px;
  background: var(--accent);
  animation: line-slide 4s ease-in-out infinite;
}
@keyframes line-slide {
  0%, 100% { top: 60px; opacity: 0; }
  20%       { opacity: 1; }
  80%       { opacity: 1; }
  100%      { top: 280px; opacity: 0; }
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.hero-scroll-hint span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--border), transparent);
}

/* ══════════════════════════════════════════════════════
   MARQUEE STRIP
══════════════════════════════════════════════════════ */
.marquee-strip {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.015);
  padding: 0.85rem 0;
  user-select: none;
}
.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee-scroll 28s linear infinite;
  width: max-content;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  z-index: 1;
  padding: 8rem 3rem 5rem;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 15% 50%, rgba(244,114,182,0.07) 0%, transparent 70%);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
}

.page-hero-content .hero-badge { margin-bottom: 1.25rem; }

.page-hero .section-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* ══════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════ */
.page-wrap { position: relative; z-index: 1; }

section {
  padding: 7rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 18px; height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 3.5rem;
}

/* ── Divider ── */
.divider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── Full-width diagonal band ── */
.section-band {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.018);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ══════════════════════════════════════════════════════
   HERO BADGE — pill label used across pages
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   CARDS — Angular, accent-line reveal
══════════════════════════════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

.card {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  padding: 2.25rem 2rem;
  transition: background 0.25s;
  position: relative;
  overflow: hidden;
}
.card + .card { border-left: 1px solid var(--border-soft); }

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.card:hover { background: rgba(255,255,255,0.025); }
.card:hover::before { transform: scaleY(1); }

.card-icon {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  display: block;
  filter: grayscale(0.3);
}
.card h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.card p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.75; }

/* ══════════════════════════════════════════════════════
   DEPT CARDS
══════════════════════════════════════════════════════ */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.dept-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 2rem;
  transition: border-color 0.3s, transform 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}
.dept-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  transition: opacity 0.3s;
  opacity: 0;
}
.dept-card.pd::before  { background: #3b82f6; opacity: 0; }
.dept-card.fd::before  { background: #ef4444; opacity: 0; }
.dept-card.dot::before { background: #f59e0b; opacity: 0; }

.dept-card:hover { transform: translateY(-4px); border-color: var(--border-mid); }
.dept-card.pd:hover  { border-color: rgba(59,130,246,0.25); }
.dept-card.pd:hover::before  { opacity: 1; }
.dept-card.fd:hover  { border-color: rgba(239,68,68,0.25); }
.dept-card.fd:hover::before  { opacity: 1; }
.dept-card.dot:hover { border-color: rgba(245,158,11,0.25); }
.dept-card.dot:hover::before { opacity: 1; }

.dept-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }

.dept-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.dept-icon.pd  { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.2); }
.dept-icon img {
  width: 92%; height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(59,130,246,0.4));
}
/* Inline NSPD seal used wherever the 🚔 emoji used to be */
.pd-logo-inline {
  width: 1.3em; height: 1.3em;
  object-fit: contain;
  vertical-align: -0.28em;
  display: inline-block;
}
.nav-ud-ic img { width: 17px; height: 17px; object-fit: contain; display: block; }
.dept-icon.fd  { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.18); }
.dept-icon.dot { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.2); }

.dept-name { font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700; }
.dept-full { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
.dept-desc { color: var(--text-muted); font-size: 0.875rem; line-height: 1.75; margin-bottom: 1.5rem; }

.dept-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.dept-tag.recruiting {
  background: rgba(34,197,94,0.08);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.18);
}
.dept-tag.recruiting::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: blink-dot 2s infinite;
}

/* ══════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.5rem; }

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(244,114,182,0.5);
  box-shadow: 0 0 0 3px rgba(244,114,182,0.08);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select option { background: var(--bg-card2); }

.form-container {
  max-width: 700px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 2.5rem;
}

/* ══════════════════════════════════════════════════════
   RANK TABLE
══════════════════════════════════════════════════════ */
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th {
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
}
.rank-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
}
.rank-table tr:last-child td { border-bottom: none; }
.rank-table tr:hover td { background: rgba(255,255,255,0.02); }

.rank-badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-sm);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rank-badge.high-command { background: rgba(244,114,182,0.1); color: #f9a8d4; }
.rank-badge.command      { background: rgba(244,114,182,0.1); color: #93c5fd; }
.rank-badge.supervisor   { background: rgba(139,92,246,0.1);  color: #a78bfa; }
.rank-badge.officer      { background: rgba(34,197,94,0.1);   color: #4ade80; }
.rank-badge.entry        { background: rgba(100,116,139,0.1); color: #94a3b8; }

/* ══════════════════════════════════════════════════════
   RULES
══════════════════════════════════════════════════════ */
.rules-grid { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; }

.rule-card {
  background: var(--bg-card);
  padding: 1.5rem 1.75rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  transition: background 0.2s;
  position: relative;
}
.rule-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.rule-card:hover { background: rgba(255,255,255,0.02); }
.rule-card:hover::before { transform: scaleY(1); }

.rule-number {
  min-width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  border: 1px solid rgba(244,114,182,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
  font-family: var(--font-display);
}
.rule-content h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.35rem; }
.rule-content p  { color: var(--text-muted); font-size: 0.85rem; line-height: 1.75; }

/* ══════════════════════════════════════════════════════
   NEWS
══════════════════════════════════════════════════════ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 1.75rem;
  transition: border-color 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}
.news-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.news-card:hover { border-color: var(--border-mid); transform: translateY(-3px); }
.news-card:hover::before { transform: scaleY(1); }

.news-tag {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-sm);
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.news-tag.announcement { background: rgba(244,114,182,0.08); color: var(--accent-light); border: 1px solid rgba(244,114,182,0.18); }
.news-tag.update       { background: rgba(244,114,182,0.08); color: var(--accent-light); border: 1px solid rgba(244,114,182,0.18); }
.news-tag.event        { background: rgba(34,197,94,0.08);   color: #4ade80;             border: 1px solid rgba(34,197,94,0.18); }
.news-tag.alert        { background: rgba(239,68,68,0.08);   color: #f87171;             border: 1px solid rgba(239,68,68,0.18); }

.news-card h3 { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4; }
.news-card p  { color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; margin-bottom: 1rem; }
.news-meta    { font-size: 0.72rem; color: var(--text-dim); }
.news-pinned-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.65rem; color: var(--accent); font-weight: 600; margin-bottom: 0.5rem;
}

/* ── Filter buttons (news page) ─────────────────────── */
.filter-btn {
  padding: 0.4rem 1rem;
  border-radius: 50px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: inherit;
}
.filter-btn:hover  { border-color: var(--blue); color: var(--text); }
.filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ══════════════════════════════════════════════════════
   STATUS
══════════════════════════════════════════════════════ */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }

.status-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 1.5rem;
}
.status-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.status-name   { font-size: 0.92rem; font-weight: 700; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.online  { background: #4ade80; box-shadow: 0 0 7px #4ade80; }
.status-dot.offline { background: #f87171; }

.status-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; }
.status-label {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-sm);
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-label.online  { background: rgba(34,197,94,0.08);   color: #4ade80; }
.status-label.offline { background: rgba(248,113,113,0.08); color: #f87171; }

/* ══════════════════════════════════════════════════════
   STAFF CARDS
══════════════════════════════════════════════════════ */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }

.staff-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 2rem;
  text-align: center;
  transition: border-color 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}
.staff-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.staff-card:hover { border-color: var(--border-mid); transform: translateY(-4px); }
.staff-card:hover::before { opacity: 1; }

.staff-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid rgba(244,114,182,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto 1rem;
  color: var(--accent);
  object-fit: cover;
}
img.staff-avatar { background: var(--bg-card2); }

.staff-name { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }

.staff-role {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-sm);
  display: inline-block;
  margin-bottom: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.staff-role.founder  { background: rgba(244,114,182,0.1); color: #f9a8d4; border: 1px solid rgba(244,114,182,0.22); }
.staff-role.director { background: rgba(244,114,182,0.1); color: var(--accent-light); border: 1px solid rgba(244,114,182,0.22); }
.staff-role.srAdmin,
.staff-role.sr-admin { background: rgba(139,92,246,0.1); color: #a78bfa; border: 1px solid rgba(139,92,246,0.22); }
.staff-role.admin    { background: rgba(100,116,139,0.1); color: #94a3b8; border: 1px solid rgba(100,116,139,0.18); }

.staff-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; }

/* ══════════════════════════════════════════════════════
   HANDBOOKS
══════════════════════════════════════════════════════ */
.handbooks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

.handbook-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.25s, transform 0.25s;
}
.handbook-card:hover { border-color: var(--border-mid); transform: translateY(-3px); }
.handbook-dept { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5rem; }
.handbook-dept.pd  { color: #60a5fa; }
.handbook-dept.fd  { color: #f87171; }
.handbook-dept.dot { color: #fbbf24; }
.handbook-dept.ncia    { color: #a78bfa; }
.handbook-dept.general { color: #4ade80; }
.handbook-title { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; line-height: 1.35; }
.handbook-meta  { font-size: 0.72rem; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
footer {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border-top: 1px solid var(--border-soft);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4.5rem 3rem 3.5rem;
  display: grid;
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 3rem;
  align-items: start;
}
.footer-brand { }
.footer-logo { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.footer-logo img { height: 28px; }
.footer-logo span {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.footer-tagline { color: var(--text-muted); font-size: 0.8rem; line-height: 1.75; max-width: 280px; margin-bottom: 1rem; }
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1.4rem;
  transition: color 0.18s;
}
.footer-email svg { flex-shrink: 0; opacity: 0.7; }
.footer-email:hover { color: var(--accent-light); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer-social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.footer-social-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); border-color: var(--border); }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.81rem; transition: color 0.18s; }
.footer-col a:hover { color: var(--text); }
.footer-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft) 20%, var(--border-soft) 80%, transparent);
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { color: var(--text-dim); font-size: 0.74rem; }
.footer-credits { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.footer-credit-item { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.02em; }
.footer-credit-item .credit-name { font-weight: 700; font-size: 0.75rem; }
.footer-credit-item .credit-name.founder {
  color: #fde68a;
  text-shadow: 0 0 10px rgba(251,191,36,0.8), 0 0 20px rgba(245,158,11,0.4);
}
.footer-credit-item .credit-name.director {
  color: #bfdbfe;
  text-shadow: 0 0 10px rgba(147,197,253,0.8), 0 0 20px rgba(59,130,246,0.4);
}
.footer-credit-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border); opacity: 0.6; }
.footer-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.35em;
}
.footer-badge.founder  { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.footer-badge.director { background: rgba(59,130,246,0.15);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }

/* ══════════════════════════════════════════════════════
   NAV PROFILE WIDGET (avatar pill + dropdown)
══════════════════════════════════════════════════════ */
#nav-auth-item { list-style: none; }
.nav-user-wrap { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: 2rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; font-size: 0.82rem; font-weight: 600;
  color: var(--text); white-space: nowrap;
  text-transform: none; letter-spacing: 0;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.nav-user-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.nav-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid rgba(255,255,255,0.15);
}
.nav-user-caret {
  font-size: 0.58rem; opacity: 0.45; margin-left: 0.05rem;
  transition: transform 0.2s;
}
.nav-user-wrap.open .nav-user-caret { transform: rotate(180deg); }
.nav-user-dropdown {
  position: absolute; top: calc(100% + 0.55rem); right: 0;
  min-width: 220px;
  background: rgba(10,11,18,0.97);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden; display: none; z-index: 300;
  padding: 0.25rem 0;
  transform-origin: top right;
}
.nav-user-wrap.open .nav-user-dropdown { display: block; }
.nav-ud-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1rem 0.8rem;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.25rem;
}
.nav-ud-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.nav-ud-name { font-weight: 700; font-size: 0.875rem; color: var(--text); text-transform: none; letter-spacing: 0; }
.nav-ud-role { font-size: 0.67rem; color: var(--text-muted); margin-top: 0.1rem; text-transform: capitalize; letter-spacing: 0; }
.nav-ud-sep { height: 1px; background: rgba(255,255,255,0.055); margin: 0.25rem 0; }
.nav-ud-section { padding: 0.5rem 1rem 0.15rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.2); }
.nav-ud-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.52rem 1rem; font-size: 0.815rem;
  color: rgba(148,163,184,0.85); text-decoration: none;
  text-transform: none !important; letter-spacing: 0 !important;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap; border-radius: 0;
}
.nav-ud-item:hover { background: rgba(255,255,255,0.05); color: #f1f5f9; }
.nav-ud-item.danger { color: rgba(248,113,113,0.85); }
.nav-ud-item.danger:hover { background: rgba(239,68,68,0.08); color: #fca5a5; }
.nav-ud-ic { font-size: 0.9rem; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.85; }

/* ══════════════════════════════════════════════════════
   HAMBURGER
══════════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  z-index: 101;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-muted);
  border-radius: 1px;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--accent); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--accent); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-cinema-inner { grid-template-columns: 1fr; }
  .hero-stats-panel  { display: grid; grid-template-columns: repeat(4,1fr); }
  .hsp-item { border-bottom: none; border-right: 1px solid var(--border-soft); }
  .hsp-item:last-child { border-right: none; }
  .hero-deco-line, .hero-scroll-hint { display: none; }
  section { padding: 5rem 2rem; }
  .page-hero { padding: 7rem 2rem 4rem; }
}

@media (max-width: 900px) {
  nav { padding: 0 1.5rem; height: 56px; }
  .nav-hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    background: rgba(5,5,8,0.98);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 2rem 2rem;
    gap: 0;
    border-top: 1px solid var(--border-soft);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    z-index: 100;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links li { display: block !important; width: 100%; }
  .nav-links a {
    font-size: 0.9rem;
    padding: 1rem 0;
    display: block;
    border-bottom: 1px solid var(--border-soft);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }
  .nav-links li:last-child a,
  .nav-links li:nth-last-child(2) a { border-bottom: none; }
  .nav-links .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
    border-bottom: none !important;
    border-radius: var(--r-sm);
  }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 3rem 1.5rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-divider { padding: 0 1.5rem; }
  .footer-bottom { padding: 1.25rem 1.5rem; flex-direction: column; align-items: center; text-align: center; }
  .cards-grid { gap: 0; border-radius: 0; flex-direction: column; }
  .card + .card { border-left: none; border-top: 1px solid var(--border-soft); }
}

@media (max-width: 640px) {
  .hero-display { font-size: clamp(4rem, 18vw, 6rem); }
  .hero-stats-panel { grid-template-columns: 1fr 1fr; }
  .hsp-item:nth-child(even) { border-right: none; }
  .hsp-item:nth-child(1),
  .hsp-item:nth-child(2) { border-bottom: 1px solid var(--border-soft); }
  .dept-grid { grid-template-columns: 1fr; }
  .section-title { font-size: clamp(2rem, 10vw, 3rem); }
  section { padding: 3.5rem 1.25rem; }
  .page-hero { padding: 6rem 1.25rem 3rem; }
  /* Larger touch targets on phones */
  .btn { padding: 0.85rem 1.5rem; }
  .nav-user-dropdown { right: -6px; max-width: calc(100vw - 20px); }
}

/* ══════════════════════════════════════════════════════
   MOBILE POLISH (small phones)
══════════════════════════════════════════════════════ */
/* Stray absolutely-positioned decor (hero star scene, watermark text)
   must never cause sideways scrolling on narrow screens. clip doesn't
   create a scroll container, so sticky elements keep working. */
html, body { overflow-x: clip; }

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; gap: 1.9rem; padding: 2.5rem 1.25rem 1.75rem; }
  .footer-brand { grid-column: auto; }
  .footer-tagline { max-width: none; }
  .footer-email { word-break: break-all; }
  .form-container { padding: 1.5rem 1.15rem; }
  .cta-inner .btn,
  .policy-ack-actions .btn { width: 100%; justify-content: center; }
  .footer-credits { flex-direction: column; gap: 0.5rem; }
  .footer-credit-sep { display: none; }
}

/* ══════════════════════════════════════════════════════
   PAGE ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes pg-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

body:not(.loaded) .page-hero-content > * { opacity: 0; }
.loaded .page-hero-content > *:nth-child(1) { animation: pg-enter 0.55s 0.08s cubic-bezier(0.22,1,0.36,1) both; }
.loaded .page-hero-content > *:nth-child(2) { animation: pg-enter 0.55s 0.18s cubic-bezier(0.22,1,0.36,1) both; }
.loaded .page-hero-content > *:nth-child(3) { animation: pg-enter 0.55s 0.28s cubic-bezier(0.22,1,0.36,1) both; }
.loaded .page-hero-content > *:nth-child(4) { animation: pg-enter 0.55s 0.38s cubic-bezier(0.22,1,0.36,1) both; }
.loaded .page-hero-content > *:nth-child(5) { animation: pg-enter 0.55s 0.48s cubic-bezier(0.22,1,0.36,1) both; }

body.no-loader .page-hero-content > *:nth-child(1) { animation: pg-enter 0.55s 0.06s cubic-bezier(0.22,1,0.36,1) both; }
body.no-loader .page-hero-content > *:nth-child(2) { animation: pg-enter 0.55s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
body.no-loader .page-hero-content > *:nth-child(3) { animation: pg-enter 0.55s 0.24s cubic-bezier(0.22,1,0.36,1) both; }
body.no-loader .page-hero-content > *:nth-child(4) { animation: pg-enter 0.55s 0.33s cubic-bezier(0.22,1,0.36,1) both; }
body.no-loader .page-hero-content > *:nth-child(5) { animation: pg-enter 0.55s 0.42s cubic-bezier(0.22,1,0.36,1) both; }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1),
              transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════════════════════ */
#ns-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.75rem;
  transition: transform 0.65s cubic-bezier(0.76,0,0.24,1), opacity 0.3s ease;
}
#ns-loader.loader-out { transform: translateY(-100%); opacity: 0; }

.loader-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  animation: pg-enter 0.4s ease both;
}
.loader-logo-wrap img {
  width: 56px; height: 56px;
  object-fit: contain;
  animation: loader-glow 2s ease-in-out infinite;
}
@keyframes loader-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(244,114,182,0.35)); }
  50%       { filter: drop-shadow(0 0 24px rgba(244,114,182,0.7)); }
}
.loader-wordmark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #cbd5e1;
}
.loader-bar-track {
  width: 120px; height: 1px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  animation: loader-fill 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
  box-shadow: 0 0 8px var(--accent-glow);
}
@keyframes loader-fill { from { width: 0; } to { width: 100%; } }

/* ══════════════════════════════════════════════════════
   PULSE ANIMATION (used by dots / tags)
══════════════════════════════════════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}



/* ══════════════════════════════════════════════════════
   HERO — STAR WATERMARK
══════════════════════════════════════════════════════ */

/* ── STARFIELD BACKGROUND ────────────────────────────── */
.hero-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Each layer is a 1px dot — box-shadow clones fill the sky (injected by JS).
   will-change promotes each layer to its own GPU layer so the opacity
   twinkle runs on the compositor instead of repainting ~680 shadows
   every frame (this was the main cause of scroll lag). */
.hs-layer {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: transparent;
  animation: star-twinkle 4s ease-in-out infinite;
  will-change: opacity;
  transform: translateZ(0);
}
.hs-l2 { animation-duration: 6.5s;  animation-delay: -2.3s; }
.hs-l3 { animation-duration: 10s;  animation-delay: -5.7s; }   /* deep-field, very slow */
.hs-spark { animation: star-sparkle 2.8s ease-in-out infinite; animation-delay: -0.9s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.38; }
}
/* Sparkle: dramatic flash-dim-flash cycle for bright feature stars */
@keyframes star-sparkle {
  0%, 100% { opacity: 1.00; }
  30%       { opacity: 0.80; }
  50%       { opacity: 0.08; }
  70%       { opacity: 0.75; }
}

/* ── SHOOTING STARS ──────────────────────────────────── */
.sstar {
  position: absolute;
  height: 1px;
  border-radius: 999px;
  /*
   * Long comet tail: bright head on the LEFT (direction of travel) → fading
   * pink haze → invisible far end on the RIGHT (trailing behind).
   */
  background: linear-gradient(
    to left,
    transparent        0%,
    rgba(244,114,182,0.00) 18%,
    rgba(244,114,182,0.06) 38%,
    rgba(255,200,225,0.28) 60%,
    rgba(255,240,250,0.72) 82%,
    rgba(255,255,255,0.94) 96%,
    transparent        100%
  );
  /* Soft pink glow along the tail length */
  box-shadow:
    0 0  5px 0px rgba(255,220,240,0.55),
    0 0 12px 1px rgba(244,114,182,0.22);
  opacity: 0;
  animation: shoot-anim linear infinite;
  transform-origin: right center;
  will-change: transform, opacity;
}

/* Bright glowing head — the "star" at the front of the comet */
.sstar::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0  3px  1px rgba(255,255,255,0.95),   /* tight white core  */
    0 0  8px  3px rgba(255,220,240,0.80),   /* pink inner halo   */
    0 0 18px  6px rgba(244,114,182,0.55),   /* mid pink glow     */
    0 0 32px 10px rgba(244,114,182,0.20);   /* wide outer bloom  */
}

@keyframes shoot-anim {
  0%   { opacity: 0;   transform: rotate(var(--sa)) translateX(0); }
  4%   { opacity: 1; }
  55%  { opacity: 0.8; }
  65%  { opacity: 0;   transform: rotate(var(--sa)) translateX(-140vw); }
  100% { opacity: 0;   transform: rotate(var(--sa)) translateX(-140vw); }
}

/* Six individual shooting stars — longer widths for more visible comet tail */
.ss1 { top:  5%; right:  3%; width: 300px; --sa: -28deg; animation-duration: 5.0s; animation-delay:  0.5s; }
.ss2 { top: 19%; right:  9%; width: 240px; --sa: -33deg; animation-duration: 6.2s; animation-delay:  5.5s; }
.ss3 { top:  2%; right: 26%; width: 380px; --sa: -22deg; animation-duration: 4.5s; animation-delay: 10.0s; }
.ss4 { top: 37%; right:  5%; width: 200px; --sa: -36deg; animation-duration: 5.6s; animation-delay: 15.5s; }
.ss5 { top: 11%; right: 41%; width: 280px; --sa: -25deg; animation-duration: 5.1s; animation-delay: 21.0s; }
.ss6 { top:  4%; right: 16%; width: 330px; --sa: -30deg; animation-duration: 4.1s; animation-delay: 27.5s; }

/* ── STAR SCENE — 3D cinematic backdrop ──────────────── */
.star-scene {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(920px, 72vw);
  height: min(920px, 72vw);
  z-index: 0;
  pointer-events: none;
}

/* Rotating conic light rays — full-hero sunburst anchored at the star position */
.star-rays {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 68% 50%,
    transparent 0deg,     rgba(244,114,182,0.07) 3deg,   transparent 11deg,
    transparent 26deg,    rgba(244,114,182,0.05) 29deg,  transparent 38deg,
    transparent 51deg,    rgba(244,114,182,0.07) 54deg,  transparent 63deg,
    transparent 78deg,    rgba(244,114,182,0.05) 81deg,  transparent 90deg,
    transparent 105deg,   rgba(244,114,182,0.06) 108deg, transparent 117deg,
    transparent 132deg,   rgba(244,114,182,0.05) 135deg, transparent 144deg,
    transparent 159deg,   rgba(244,114,182,0.07) 162deg, transparent 171deg,
    transparent 185deg,   rgba(244,114,182,0.05) 188deg, transparent 197deg,
    transparent 213deg,   rgba(244,114,182,0.06) 216deg, transparent 225deg,
    transparent 240deg,   rgba(244,114,182,0.05) 243deg, transparent 252deg,
    transparent 267deg,   rgba(244,114,182,0.07) 270deg, transparent 279deg,
    transparent 295deg,   rgba(244,114,182,0.05) 298deg, transparent 307deg,
    transparent 322deg,   rgba(244,114,182,0.06) 325deg, transparent 334deg
  );
  animation: rays-rotate 35s linear infinite;
}
@keyframes rays-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Multi-layer breathing glow halo */
.star-halo {
  position: absolute;
  inset: -16%;
  background: radial-gradient(circle at 50% 50%,
    rgba(244,114,182,0.45) 0%,
    rgba(236, 72,153,0.25) 20%,
    rgba(192, 38,211,0.14) 40%,
    rgba(168, 85,247,0.07) 58%,
    transparent 72%
  );
  border-radius: 50%;
  filter: blur(12px);
  animation: halo-breathe 4s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { transform: scale(0.90); opacity: 0.60; }
  50%       { transform: scale(1.12); opacity: 1.00; }
}

/* Orbiting sparkle particles */
.star-orb {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}
.orb-a {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #f472b6;
  box-shadow: 0 0 8px #f472b6, 0 0 20px rgba(244,114,182,0.7), 0 0 38px rgba(244,114,182,0.3);
  animation: orbit-a 7s linear infinite;
}
.orb-b {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #c026d3;
  box-shadow: 0 0 8px #c026d3, 0 0 18px rgba(192,38,211,0.65);
  animation: orbit-b 11s linear infinite;
  animation-delay: -4.5s;
}
.orb-c {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa, 0 0 16px rgba(167,139,250,0.55);
  animation: orbit-c 16s linear infinite;
  animation-delay: -8s;
}
@keyframes orbit-a {
  from { transform: rotate(0deg)   translateX(215px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(215px) rotate(-360deg); }
}
@keyframes orbit-b {
  from { transform: rotate(0deg)   translateX(162px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(162px) rotate(-360deg); }
}
@keyframes orbit-c {
  from { transform: rotate(0deg)   translateX(270px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(270px) rotate(-360deg); }
}

/* Float with subtle 3D tilt */
.star-floater {
  position: absolute;
  inset: 0;
  animation: star-float 8s ease-in-out infinite;
}
@keyframes star-float {
  0%, 100% { transform: translateY(-22px) rotateX(4deg);  }
  50%       { transform: translateY(22px)  rotateX(-4deg); }
}

/* Star image — 3D perspective spin with intense glow */
.star-spinner {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.44;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 28px rgba(244,114,182,1.00))
    drop-shadow(0 0 70px rgba(236, 72,153,0.85))
    drop-shadow(0 0 140px rgba(192, 38,211,0.60))
    drop-shadow(0 0 240px rgba(168, 85,247,0.38));
  animation: star-wobble 14s ease-in-out infinite;
  will-change: transform;
}
@keyframes star-wobble {
  0%,  100% { transform: perspective(700px) rotateY(-10deg) rotateX(3deg);  }
  25%        { transform: perspective(700px) rotateY(-4deg)  rotateX(-2deg); }
  50%        { transform: perspective(700px) rotateY(10deg)  rotateX(-3deg); }
  75%        { transform: perspective(700px) rotateY(4deg)   rotateX(2deg);  }
}

/* ══════════════════════════════════════════════════════
   HERO — GRADIENT VEIL
   Dark on the left where text lives, transparent on the
   right so the star shows through cleanly.
══════════════════════════════════════════════════════ */
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--bg)            20%,
    rgba(5,5,8,0.78)     40%,
    rgba(5,5,8,0.15)     62%,
    transparent          78%
  );
  z-index: 1;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   HERO — SHELL
══════════════════════════════════════════════════════ */
.hero-v2 {
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 600px;
  /* Break out of the global section max-width: 1200px constraint */
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 80px;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   HERO — CONTENT
══════════════════════════════════════════════════════ */
.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* title at top, actions at bottom — star fills the gap */
  align-items: flex-start;
  padding: 3rem 5.5rem 3.5rem;
  max-width: min(820px, 58vw);
}

/* Title group — badge + headline grouped so space-between separates them from the lower block */
.hero-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-title-group .hero-badge { margin-bottom: 1.25rem; }
.hero-title-group .hero-hl    { margin-bottom: 0; }

/* Hero pill badge — used on index hero + inner page-hero headers */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 100px;
  padding: 0.35rem 0.95rem 0.35rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2.25rem;
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 7px rgba(74,222,128,0.8);
  animation: dot-blink 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.hero-badge-pipe { opacity: 0.22; }

/* Headline */
.hero-hl {
  font-family: 'General Sans', var(--font-display), sans-serif;
  font-size: clamp(4rem, 7.5vw, 9.5rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 1.75rem;
}
/* "STAR" — shimmering gradient text */
.hero-hl-accent {
  background: linear-gradient(
    135deg,
    #fce7f3 0%,
    #f472b6 28%,
    #c026d3 52%,
    #f472b6 72%,
    #fce7f3 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 5s ease-in-out infinite;
}
@keyframes text-shimmer {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}

/* Lower block — sub + actions + stats grouped together */
.hero-lower {
  width: 100%;
  max-width: 480px;
}

/* Subtitle */
.hero-sub-p {
  font-size: 1rem;
  line-height: 1.78;
  color: #6b7280;
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
}

/* CTA row */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* Stats row */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hstat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.hstat > span {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.hstat > small {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hstat-line {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   HERO — DEPARTMENT MARQUEE (bottom strip)
══════════════════════════════════════════════════════ */
.hero-marquee-bar {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.75rem 5rem 3rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.hmb-label {
  font-family: var(--font-ui);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.hmb-track-outer {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.hmb-track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  animation: hmb-scroll 32s linear infinite;
  will-change: transform;
}
@keyframes hmb-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hmb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  flex-shrink: 0;
}
.hmb-chip > span { font-size: 0.85rem; line-height: 1; }
.hmb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   HERO RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-content     { padding: 2rem 2.5rem 2.5rem; max-width: 100%; }
  .hero-lower       { max-width: 100%; }
  .star-scene       { right: -14%; width: min(480px, 80vw); height: min(480px, 80vw); top: 44%; }
  .star-rays        { display: none; }
  .star-orb         { display: none; }
  .hero-veil        { background: linear-gradient(to right, var(--bg) 38%, rgba(5,5,8,0.88) 60%, rgba(5,5,8,0.1) 85%, transparent 100%); }
  .hero-marquee-bar { padding: 1.25rem 2.5rem 2rem; flex-direction: column; align-items: flex-start; gap: 0.65rem; }
}
@media (max-width: 520px) {
  .hero-content { padding: 0 1.5rem; max-width: 100%; }
  .star-scene   { opacity: 0.28; right: -20%; }
  .star-rays    { display: none; }
  .star-orb     { display: none; }
  .hero-stats   { gap: 1.25rem; flex-wrap: wrap; }
  .hstat-line   { height: 18px; }
  .hero-v2      { height: auto; min-height: 100svh; }
}

/* ══════════════════════════════════════════════════════
   ✦ POLISH LAYER ✦
   Tasteful depth, hover, and accessibility refinements that
   respect the editorial style (sharp radii, left-bar cards).
══════════════════════════════════════════════════════ */

/* Smooth, crisp image rendering everywhere */
img { image-rendering: -webkit-optimize-contrast; }

/* Keyboard accessibility — visible focus rings on interactive elements */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── DEPT CARDS: add depth + accent-tinted hover glow ── */
.dept-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 14px 34px -24px rgba(0,0,0,0.7);
}
.dept-card:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 22px 44px -24px var(--accent-glow);
}
.dept-card.pd:hover  { box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 22px 44px -24px rgba(59,130,246,0.3); }
.dept-card.fd:hover  { box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 22px 44px -24px rgba(239,68,68,0.3); }
.dept-card.dot:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 22px 44px -24px rgba(245,158,11,0.3); }
.dept-icon { transition: transform 0.25s, box-shadow 0.25s; }
.dept-card:hover .dept-icon {
  transform: scale(1.06);
  box-shadow: 0 0 18px var(--accent-glow);
}
.dept-card.pd:hover  .dept-icon { box-shadow: 0 0 18px rgba(59,130,246,0.35); }
.dept-card.fd:hover  .dept-icon { box-shadow: 0 0 18px rgba(239,68,68,0.35); }
.dept-card.dot:hover .dept-icon { box-shadow: 0 0 18px rgba(245,158,11,0.35); }

/* ── BUTTONS: gradient sheen on primary ── */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
}
.btn { will-change: transform; }

/* ── NEWS / STAFF / RULE cards: lift + glow ── */
.news-card, .staff-card, .rule-card {
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.22s, box-shadow 0.22s;
}
.news-card:hover, .staff-card:hover, .rule-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-mid);
  box-shadow: 0 20px 42px -26px var(--accent-glow);
}

/* Staff avatar accent ring on hover */
.staff-avatar { transition: box-shadow 0.25s, transform 0.25s; }
.staff-card:hover .staff-avatar {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 18px var(--accent-glow);
}

/* ── FILTER BUTTONS: smoother active feel ── */
.filter-btn { transition: all 0.18s; }
.filter-btn:hover { transform: translateY(-1px); }

/* ── RANK BADGES / TABLE rows ── */
.rank-badge { transition: transform 0.15s, box-shadow 0.15s; }
.rank-table tr:hover .rank-badge { box-shadow: 0 0 14px var(--accent-glow); }

/* ── NAV: refined scrolled state ── */
nav.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 10px 30px -16px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px) saturate(1.2);
}

/* ── SECTION TITLES: subtle accent underline accent ── */
.section-label { position: relative; }

/* ── Selection color ── */
::selection { background: var(--accent-glow); color: var(--text); }

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}