/* ==========================================================================
   ECHEM 2027 REVISION & PAPER CLASS - ULTRA-MODERN BESPOKE DESIGN SYSTEM
   Author: Echem Engineering
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES & DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color Palette - Deep Space Dark (Default) */
  --bg-base: #06090e;
  --bg-subtle: #0c1017;
  --bg-card: rgba(16, 22, 33, 0.65);
  --bg-card-hover: rgba(22, 30, 46, 0.85);
  --bg-card-solid: #0e141f;
  --bg-input: rgba(12, 17, 26, 0.9);
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-card-hover: rgba(244, 63, 94, 0.45);
  
  --text-main: #f8fafc;
  --text-body: #94a3b8;
  --text-muted: #64748b;
  
  /* Vibrant Editorial Accents */
  --coral-500: #f43f5e;
  --coral-400: #fb7185;
  --coral-soft: rgba(244, 63, 94, 0.14);
  --coral-glow: rgba(244, 63, 94, 0.35);
  --coral-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  
  --amber-400: #fbbf24;
  --amber-soft: rgba(var(--amber-rgb), 0.14);
  --amber-glow: rgba(var(--amber-rgb), 0.3);
  --amber-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  /* Channels behind the accent, so tints and glows re-theme with it */
  --amber-rgb: 251, 191, 36;
  
  --cyan-500: #06b6d4;
  --cyan-soft: rgba(6, 182, 212, 0.12);
  
  --emerald-400: #34d399;
  --emerald-soft: rgba(52, 211, 153, 0.14);
  
  /* Map Specific Styling */
  --map-bg: #090e17;
  --map-province: #0f1726;
  --map-province-stroke: rgba(244, 63, 94, 0.55);
  --map-province-hover: rgba(244, 63, 94, 0.25);
  --map-pin-default: #fb7185;
  
  /* Typography Hierarchy */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sinhala: 'Noto Sans Sinhala', 'Plus Jakarta Sans', sans-serif;
  
  /* Layout & Geometry */
  --wrap-max: 1240px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 8px;
  
  /* Motion & Physics */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Depth */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 54px -12px rgba(0, 0, 0, 0.65);
}

/* Light Mode Overrides */
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-subtle: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --bg-card-solid: #ffffff;
  --bg-input: #ffffff;
  
  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-card: rgba(0, 0, 0, 0.1);
  --border-card-hover: rgba(244, 63, 94, 0.4);
  
  --text-main: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  
  --coral-soft: rgba(244, 63, 94, 0.08);
  --coral-glow: rgba(244, 63, 94, 0.2);
  /* Gold does not survive a white ground - #fbbf24 sits at ~1.7:1 as ink and
     still reads as washed-out yellow even when deepened. Light mode retires it
     and runs the secondary accent as teal: it holds contrast on white (4.9:1),
     separates cleanly from the coral primary, and green carries the "moved up"
     meaning this page is built around. */
  --amber-400: #0f766e;
  --amber-gradient: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  --amber-soft: rgba(13, 148, 136, 0.1);
  --amber-glow: rgba(13, 148, 136, 0.22);
  --amber-rgb: 13, 148, 136;
  
  --map-bg: #f1f5f9;
  --map-province: #ffffff;
  /* slate-300 on white was ~1.6:1 and washed the borders out; rose-700 at
     65% reads ~3.5:1 and matches the brand-tinted stroke used in dark */
  --map-province-stroke: rgba(190, 18, 60, 0.65);
  --map-province-hover: #ffe4e6;
  --map-pin-default: #e11d48;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 28px -6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 20px 48px -10px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESETS & ARCHITECTURAL GRID BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-image: 
    radial-gradient(var(--border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  /* Exposed as a variable so full-bleed children (the mobile snap sliders)
     can cancel exactly this padding instead of guessing at it. */
  --wrap-pad: 24px;
  padding: 0 var(--wrap-pad);
}

.si {
  font-family: var(--font-sinhala);
}

/* Left-aligned, not justified: Sinhala does not hyphenate, so justify pushes
   its long words apart and leaves gaping holes in short lines. */
p,
.hero-description,
.hero-center-links,
.about-lead-text,
.bento-desc,
.ach-quote-body,
.v-step-desc,
.review-card-snippet,
.review-quote-full,
.faq-answer-inner,
.reg-card-desc {
  text-align: left;
  text-wrap: pretty;
}

.section-header.center p,
.section-header.center .section-subtitle,
.countdown-header p,
.footer-bottom-bar p {
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. SCROLL PROGRESS INDICATOR
   -------------------------------------------------------------------------- */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 1200;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--coral-500), var(--amber-400), var(--cyan-500));
  transition: width 0.08s linear;
}

/* --------------------------------------------------------------------------
   4. NAVIGATION & HEADER
   -------------------------------------------------------------------------- */
header#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal), border-color var(--transition-normal), padding var(--transition-normal);
  border-bottom: 1px solid transparent;
}

header#siteHeader.scrolled {
  background-color: var(--bg-card);
  backdrop-filter: blur(16px);
  border-color: var(--border-subtle);
  padding: 10px 0;
  box-shadow: var(--shadow-sm);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast), height var(--transition-normal);
}

header#siteHeader.scrolled .logo-img {
  height: 40px;
}

.logo-wrap:hover .logo-img {
  transform: scale(1.05);
}

.logo-light-mode {
  display: none !important;
}

.logo-dark-mode {
  display: block !important;
}

[data-theme="light"] .logo-light-mode {
  display: block !important;
}

[data-theme="light"] .logo-dark-mode {
  display: none !important;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
}

.nav-links li a {
  display: block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-links li a:hover,
.nav-links li a.active {
  color: var(--text-main);
  background: var(--coral-soft);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn svg {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle-btn:hover {
    border-color: var(--amber-400);
    color: var(--amber-400);
    transform: scale(1.05);
  }
  .theme-toggle-btn:hover svg {
    transform: rotate(15deg);
  }
}

.theme-toggle-btn:active {
  transform: scale(0.92) !important;
}

.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

[data-theme="light"] .theme-toggle-btn .icon-sun {
  display: none;
}
[data-theme="light"] .theme-toggle-btn .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: block;
}

/* Mobile Hamburger Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  z-index: 1100;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-main);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
/* Mobile Navigation Drawer System */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.mobile-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 360px);
  background: var(--bg-card-solid);
  border-left: 1px solid var(--border-card);
  z-index: 2010;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

.mobile-nav-drawer.active {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.mobile-drawer-logo .logo-img {
  height: 38px;
  width: auto;
}

.mobile-drawer-close {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.mobile-drawer-close svg {
  width: 20px;
  height: 20px;
}

.mobile-drawer-close:hover {
  border-color: var(--coral-500);
  color: var(--coral-500);
  transform: scale(1.05);
}

.mobile-drawer-body {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-body);
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.mobile-nav-link svg {
  width: 20px;
  height: 20px;
  color: var(--coral-500);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: var(--coral-soft);
  color: var(--text-main);
  border-color: rgba(var(--coral-rgb), 0.25);
}

.mobile-nav-link:hover svg,
.mobile-nav-link.active svg {
  transform: scale(1.15);
}

.mobile-drawer-footer {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

body.menu-open {
  overflow: hidden !important;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS & INTERACTIVE PILLS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.btn-icon {
  width: 22px;
  height: 22px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.btn:hover .btn-icon {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--coral-gradient);
  color: #ffffff;
  box-shadow: 0 6px 20px -4px var(--coral-glow);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px var(--coral-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--amber-gradient);
  color: #1a1003;
  box-shadow: 0 6px 20px -4px var(--amber-glow);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px var(--amber-glow);
}

.btn-glass {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-card);
  backdrop-filter: blur(10px);
}

.btn-glass:hover {
  background: var(--bg-card-hover);
  border-color: var(--coral-500);
  color: var(--coral-500);
  transform: translateY(-2px);
}

.btn-telegram {
  background: rgba(42, 171, 238, 0.12);
  color: #38bdf8;
  box-shadow: 0 4px 16px -2px rgba(34, 158, 217, 0.25);
  border: 1px solid rgba(42, 171, 238, 0.35);
  backdrop-filter: blur(10px);
  font-weight: 600;
}

.btn-telegram:hover {
  background: rgba(42, 171, 238, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(34, 158, 217, 0.45);
}

.btn-telegram:active {
  transform: translateY(0);
}

[data-theme="light"] .btn-telegram {
  background: rgba(14, 165, 233, 0.08);
  color: #0284c7;
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 4px 14px -2px rgba(14, 165, 233, 0.15);
}

[data-theme="light"] .btn-telegram:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: #0284c7;
  color: #0369a1;
  box-shadow: 0 8px 20px -4px rgba(14, 165, 233, 0.25);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-lg {
  padding: 16px 34px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   6. CARD SPOTLIGHT & 3D TILT EFFECT SHADERS
   -------------------------------------------------------------------------- */
.bento-card, .date-card, .grade-card, .ach-card, .step-item, .tg-tile-card, .faq-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
  overflow: hidden;
}

/* Dynamic Spotlight Shader Following Cursor */
.bento-card::before, .date-card::before, .ach-card::before, .grade-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(244, 63, 94, 0.08),
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.bento-card:hover::before, .date-card:hover::before, .ach-card:hover::before, .grade-card:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. HERO SECTION & LIVE COUNTDOWN
   -------------------------------------------------------------------------- */
.hero-section {
  display: block;
  padding: 120px 0 50px;
  position: relative;
}

.hero-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(24px, 3.2vw, 40px);
  width: 100%;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--coral-soft);
  border: 1px solid rgba(244, 63, 94, 0.38);
  color: var(--coral-500);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.badge-mini-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-500);
  box-shadow: 0 0 0 0 var(--coral-glow);
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(46px, 7.8vw, 102px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  word-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0;
  width: 100%;
}

.hero-title-highlight {
  display: inline-block;
  word-spacing: 0.28em;
  background: linear-gradient(
    110deg,
    var(--text-main) 10%,
    var(--amber-400) 33%,
    var(--coral-500) 48%,
    var(--text-main) 65%,
    var(--text-main) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroGradientSweep 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
  will-change: background-position;
}

@keyframes heroGradientSweep {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* The gold stop turns muddy on white, so light mode runs the title straight
   from ink to the brand rose instead. */
[data-theme="light"] .hero-title-highlight {
  background: linear-gradient(
    110deg,
    var(--text-main) 10%,
    #f43f5e 33%,
    #e11d48 48%,
    var(--text-main) 65%,
    var(--text-main) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-description {
  font-size: clamp(15.5px, 1.35vw, 17.5px);
  line-height: 1.85;
  color: var(--text-body);
  margin-bottom: 0;
  max-width: 620px;
}

.hero-ctas-cluster {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 0;
  width: 100%;
}

.hero-primary-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.hero-primary-btns-row .btn-hero {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  min-height: 48px;
  box-sizing: border-box;
}

.btn-hero-tg-full {
  width: 100%;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  box-sizing: border-box;
}

.btn-hero {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  min-height: 48px;
  box-sizing: border-box;
}

.btn-hero .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero-tg-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.12) 0%, rgba(34, 158, 217, 0.05) 100%), var(--bg-card);
  border: 1px solid rgba(42, 171, 238, 0.35);
  color: var(--text-main);
  text-decoration: none;
  font-size: 13.5px;
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  width: fit-content;
}

.hero-tg-link-pill:hover {
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.22) 0%, rgba(34, 158, 217, 0.12) 100%), var(--bg-card-hover);
  border-color: #2AABEE;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(42, 171, 238, 0.35);
  color: var(--text-main);
}

.hero-tg-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(42, 171, 238, 0.4);
}

.hero-tg-icon svg {
  width: 15px;
  height: 15px;
}

.hero-tg-text {
  line-height: 1.3;
  color: var(--text-body);
}

.hero-tg-text b {
  font-family: var(--font-sans);
  color: #2AABEE;
  font-weight: 700;
  margin-right: 4px;
}

.hero-tg-arrow {
  width: 16px;
  height: 16px;
  color: #2AABEE;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.hero-tg-link-pill:hover .hero-tg-arrow {
  transform: translateX(4px);
}

.venue-note-banner {
  padding: 13px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--coral-500);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.8;
}

.venue-note-banner b {
  color: var(--amber-400);
}

.hero-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.hero-trust-points {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-card-solid);
  backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal);
}

.hero-trust-points:hover {
  border-color: var(--border-card-hover);
}

.trust-point-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  transition: background var(--transition-fast);
}

.trust-point-item + .trust-point-item {
  border-top: 1px solid var(--border-subtle);
}

.trust-point-item:hover {
  background: var(--bg-card-hover);
}

.trust-point-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--coral-500);
}

.trust-point-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-sinhala);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  white-space: nowrap;
}

.trust-point-text .trust-stat-number,
.trust-point-text .stat-unit-a {
  font-family: var(--font-sans);
  font-size: 1.25em;
  font-weight: 800;
  color: var(--amber-400);
  letter-spacing: -0.02em;
  display: inline;
  line-height: 1;
}

.trust-point-text .stat-unit-a {
  margin-right: 4px;
}

[data-theme="light"] .trust-point-text .trust-stat-number,
[data-theme="light"] .trust-point-text .stat-unit-a {
  color: #059669;
}

.hero-countdown-box {
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.hero-countdown-box:hover {
  border-color: var(--border-card-hover);
}

.countdown-header {
  text-align: center;
  margin-bottom: 24px;
}

.countdown-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.countdown-badge-icon {
  width: 14px;
  height: 14px;
}

.countdown-title {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  text-wrap: balance;
}

.countdown-timer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.timer-slot {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timer-num {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--coral-500);
}

.timer-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kickoff-dates-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.kickoff-venue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}

.kickoff-venue-tag {
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.venue-row-icon {
  width: 15px;
  height: 15px;
  color: var(--amber-400);
  flex-shrink: 0;
}

.venue-row-icon.live {
  color: var(--coral-500);
}

.kickoff-date-val {
  color: var(--coral-500);
  font-weight: 700;
}

.kickoff-venue-row.is-active {
  background: rgba(255, 42, 95, 0.08);
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 42, 95, 0.25);
}

.kickoff-venue-row.is-passed {
  opacity: 0.45;
}

.kickoff-venue-row.is-passed .kickoff-date-val {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. SECTION HEADINGS (EDITORIAL HIERARCHY)
   -------------------------------------------------------------------------- */
.section-header {
  margin-bottom: clamp(24px, 4vw, 36px);
  width: 100%;
  max-width: 100%;
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-500);
  margin-bottom: 14px;
}

.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--coral-500);
}

.section-header.center .section-eyebrow::before {
  display: none;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  word-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-body);
  font-family: var(--font-sinhala);
  line-height: 1.85;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

.section-header.center .section-subtitle {
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. SCHEDULE / 3 DATES BENTO
   -------------------------------------------------------------------------- */
.schedule-section {
  padding: 48px 0;
}

.schedule-highlight-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 7px 16px 7px 8px;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.12) 0%, rgba(244, 63, 94, 0.04) 50%, var(--bg-card) 100%);
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px -4px rgba(244, 63, 94, 0.2);
  margin-top: 4px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.schedule-highlight-pill:hover {
  border-color: var(--coral-500);
  box-shadow: 0 6px 24px -4px rgba(244, 63, 94, 0.35);
}

.free-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--coral-gradient);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.4);
}

.free-tag-icon {
  width: 14px;
  height: 14px;
  fill: #ffffff;
  stroke: #ffffff;
  flex-shrink: 0;
}

.free-tag-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
}

[data-theme="light"] .schedule-highlight-pill {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.08) 0%, rgba(244, 63, 94, 0.02) 50%, #ffffff 100%);
  border-color: rgba(244, 63, 94, 0.32);
  box-shadow: 0 4px 16px -4px rgba(244, 63, 94, 0.12);
}

[data-theme="light"] .free-tag-text {
  color: #0f172a;
}

.dates-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.date-card {
  padding: 38px 30px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-color: rgba(244, 63, 94, 0.24);
  background: radial-gradient(circle at 85% 0%, rgba(244, 63, 94, 0.14) 0%, rgba(244, 63, 94, 0.03) 45%, transparent 70%), var(--bg-card);
  box-shadow: 0 4px 20px -4px rgba(244, 63, 94, 0.14);
}

.date-card:hover {
  transform: translateY(-8px);
  border-color: rgba(244, 63, 94, 0.55);
  box-shadow: 0 16px 36px -6px rgba(244, 63, 94, 0.28), 0 0 24px -2px rgba(244, 63, 94, 0.18);
}

.date-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.date-month-badge {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--coral-500);
  text-transform: uppercase;
  flex-shrink: 0;
}

.venue-type-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.venue-type-tag svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.date-day-number {
  font-family: var(--font-serif);
  font-size: clamp(54px, 6.5vw, 76px);
  font-weight: 700;
  line-height: 0.95;
  margin-bottom: 20px;
  background: linear-gradient(160deg, var(--text-main), var(--text-muted));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.date-venue-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.date-venue-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.date-card-footer {
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-body);
}

.date-card-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.inline-clock-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.date-card:not(.online-featured) .venue-type-tag {
  background: var(--coral-soft);
  color: var(--coral-400);
  border-color: rgba(244, 63, 94, 0.28);
}

/* Online Special Highlight */
.date-card.online-featured {
  border-color: rgba(var(--amber-rgb), 0.35);
  background: radial-gradient(circle at 85% 0%, var(--amber-soft), transparent 60%), var(--bg-card);
  box-shadow: 0 4px 20px -4px var(--amber-glow);
}

.date-card.online-featured:hover {
  border-color: var(--amber-400);
  box-shadow: 0 16px 36px -6px var(--amber-glow), 0 0 24px -2px rgba(var(--amber-rgb), 0.2);
}

.date-card.online-featured .date-month-badge {
  color: var(--amber-400);
}

.date-card.online-featured .venue-type-tag {
  background: var(--amber-soft);
  color: var(--amber-400);
  border-color: rgba(var(--amber-rgb), 0.3);
}

/* --------------------------------------------------------------------------
   10. ABOUT THE REVISION & PAPER CLASS
   -------------------------------------------------------------------------- */
.methodology-section,
.about-paper-section {
  padding: 48px 0;
}

.quote-master-card {
  padding: clamp(32px, 5vw, 48px);
  background: radial-gradient(circle at 0% 0%, var(--coral-soft), transparent 60%), var(--bg-card-solid);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.about-grid-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  padding: clamp(24px, 3.5vw, 36px);
  background: radial-gradient(circle at 0% 0%, var(--coral-soft), transparent 60%), var(--bg-card-solid);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.about-image-col {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}

.about-showcase-img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--transition-normal);
}

.about-grid-card:hover .about-showcase-img {
  transform: scale(1.03);
}

.about-content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-quote-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 0;
}

.about-quote-header .quote-icon-inline {
  width: 40px;
  height: 40px;
  color: var(--coral-500);
  flex-shrink: 0;
  opacity: 0.95;
  margin-top: 3px;
}

.about-lead-wrap {
  flex: 1;
}

.about-lead-text,
.about-sublead-text {
  font-size: clamp(16px, 1.8vw, 20.5px);
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.about-lead-text {
  color: var(--text-main);
}

.about-sublead-text {
  color: var(--coral-500);
  margin-top: 24px;
  margin-bottom: 16px;
  padding-left: 13px;
}

[data-theme="light"] .about-sublead-text {
  color: #e11d48;
}

@media (max-width: 640px) {
  .about-quote-header {
    gap: 12px;
  }
  .about-quote-header .quote-icon-inline {
    width: 32px;
    height: 32px;
    margin-top: 2px;
  }
  .about-lead-text,
  .about-sublead-text {
    font-size: 15.5px;
    line-height: 1.55;
  }
  .about-sublead-text {
    margin-top: 20px;
    margin-bottom: 14px;
    padding-left: 13px;
  }
}

.quote-card-inner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.quote-icon-large {
  width: 64px;
  height: 64px;
  color: var(--coral-500);
  flex-shrink: 0;
  opacity: 0.95;
}

.about-quote-text {
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.95;
  color: var(--text-main);
  font-weight: 500;
}

.about-text-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Eye-Catching Clean Highlight Points */
.about-highlights-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
}

.about-point-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(var(--coral-rgb), 0.04);
  border: 1px solid rgba(var(--coral-rgb), 0.12);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="light"] .about-point-row {
  background: rgba(244, 63, 94, 0.04);
  border-color: rgba(244, 63, 94, 0.12);
}

.about-point-row:hover {
  transform: translateX(4px);
  background: rgba(var(--coral-rgb), 0.08);
  border-color: rgba(var(--coral-rgb), 0.28);
}

.point-icon-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral-500), #ff2a5f);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(244, 63, 94, 0.35);
}

.point-icon-dot svg {
  width: 12px;
  height: 12px;
}

.point-content-wrap {
  font-size: clamp(14px, 1.35vw, 15px);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.45;
  flex: 1;
}

.point-num-highlight {
  color: #ff2a5f;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

[data-theme="light"] .point-num-highlight {
  color: #e11d48;
}

/* Typographical Diagonal Fraction (1/4) */
.math-fraction {
  font-family: var(--font-sans);
  font-variant-numeric: diagonal-fractions;
  font-feature-settings: 'frac' 1;
  font-weight: 800;
  font-size: 21px;
  color: #ff2a5f;
  line-height: 1;
  vertical-align: -2px;
  margin: 0 2px 0 3px;
  display: inline-block;
  letter-spacing: 0.02em;
}

[data-theme="light"] .math-fraction {
  color: #e11d48;
}

/* Year-wise Results Grid at Bottom */
.about-years-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.year-stat-pill {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.year-stat-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--coral-rgb), 0.45);
  box-shadow: var(--shadow-md);
}

.year-stat-pill.highlight {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(255, 42, 95, 0.28));
  border-color: #ff2a5f;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.25);
}

.year-stat-pill .year-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.year-stat-pill .year-val {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.year-stat-pill.highlight .year-val {
  color: #ff2a5f;
  text-shadow: 0 0 10px rgba(255, 42, 95, 0.4);
}

.about-sub-text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-body);
}

.about-points-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.about-points-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.01em;
}

.stat-line-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
}

.stat-big-badge {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--coral-500);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   11. RESULTS & YEAR-WISE GROWTH CHART
   -------------------------------------------------------------------------- */
.results-showcase-section {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 48px 0;
}

.results-bento-layout {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.results-metric-card {
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: 
    radial-gradient(circle at 0% 0%, var(--coral-soft), transparent 60%),
    var(--bg-card-solid);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.results-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 12px;
}

.results-headline-stat {
  font-family: var(--font-sans);
  font-size: clamp(58px, 7vw, 92px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 12px;
  white-space: nowrap;
}

.results-headline-stat span.unit {
  color: var(--coral-500);
  font-size: 1em;
  font-weight: 800;
  vertical-align: baseline;
  margin-left: 6px;
  display: inline-block;
  white-space: nowrap;
}

.results-sub-si {
  font-size: 15px;
  color: var(--text-body);
  margin-bottom: 24px;
}

.results-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-tag-pill {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pill-svg-icon {
  width: 15px;
  height: 15px;
  color: var(--coral-500);
  flex-shrink: 0;
}

/* Results Interactive SVG Chart */
.results-chart-card {
  padding: clamp(24px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.chart-header-title-wrap {
  display: flex;
  align-items: center;
}

.chart-header-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-muted);
}

.chart-legend-chip .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-legend-chip.other-chip .legend-dot {
  background: #94a3b8;
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.6);
}

.chart-legend-chip.amila-chip {
  color: var(--text-main);
  border-color: rgba(244, 63, 94, 0.3);
  background: rgba(244, 63, 94, 0.06);
}

.chart-legend-chip.amila-chip .legend-dot {
  background: var(--coral-500);
  box-shadow: 0 0 8px var(--coral-500);
}

.chart-title-tag {
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  line-height: 1.2;
}

.chart-title-tag .chart-a-pink {
  color: #ff2a5f;
  font-size: 1.15em;
  font-weight: 900;
  display: inline-block;
  margin-right: 1px;
  text-shadow: 0 0 14px rgba(255, 42, 95, 0.4);
}

.chart-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6.5;
  min-height: 250px;
  max-height: 380px;
}

.chart-grid-lines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.chart-grid-lines span {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
}

.chart-svg-elem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-area-fill {
  fill: url(#chartAreaGrad);
}

.chart-curve-line {
  fill: none;
  stroke: url(#chartLineGrad);
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* HTML Overlay Dots Layer: Completely eliminates SVG non-uniform aspect ratio oval distortion */
.chart-dots-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.chart-dot-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: all;
  background: var(--bg-card-solid);
  border: 3px solid var(--amber-400);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.22s ease, 
              background-color 0.22s ease, 
              box-shadow 0.22s ease;
  z-index: 15;
}

/* Large hit target (40px) for effortless hover and touch */
.chart-dot-point::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: transparent;
  pointer-events: all;
}

.chart-dot-point.not-amila {
  border-color: #94a3b8;
  background: var(--bg-card-solid);
}

.chart-dot-point.from-amila {
  border-color: var(--amber-400);
  background: var(--bg-card-solid);
}

.chart-dot-point.from-amila.peak {
  border-color: var(--coral-400);
  background: var(--coral-500);
  box-shadow: 0 0 10px var(--coral-glow);
}

/* HOVER STATE: Uniform scaling ensures it stays a PERFECT CIRCLE ALWAYS */
.chart-dot-point:hover,
.chart-dot-point.hovered {
  transform: translate(-50%, -50%) scale(1.45);
}

.chart-dot-point.not-amila:hover,
.chart-dot-point.not-amila.hovered {
  border-color: #cbd5e1;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.5);
}

.chart-dot-point.from-amila:hover,
.chart-dot-point.from-amila.hovered {
  border-color: var(--coral-500);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.5);
}

.chart-dot-point.from-amila.peak:hover,
.chart-dot-point.from-amila.peak.hovered {
  border-color: #ffffff;
  background: var(--coral-500);
  box-shadow: 0 0 16px var(--coral-glow);
}

.chart-dot-pulse-ring {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--coral-500);
  animation: pulse-ring 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
  z-index: 14;
}

.chart-floating-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chart-num-badge {
  position: absolute;
  transform: translate(-50%, -130%);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.chart-num-badge.not-amila {
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--text-muted);
}

.chart-num-badge.not-amila.hovered {
  transform: translate(-50%, -145%) scale(1.08);
  border-color: #94a3b8;
  color: var(--text-main);
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.25);
}

.chart-num-badge.from-amila.hovered {
  transform: translate(-50%, -145%) scale(1.08);
  border-color: var(--coral-500);
  box-shadow: 0 4px 14px rgba(var(--coral-rgb), 0.35);
  color: var(--coral-500);
}

.chart-num-badge.peak {
  background: var(--coral-500);
  border-color: var(--coral-400);
  color: #ffffff;
  box-shadow: 0 4px 14px var(--coral-glow);
}

.chart-num-badge.peak.hovered,
.chart-num-badge.peak:hover {
  background: var(--coral-500);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px var(--coral-glow);
  transform: translate(-50%, -145%) scale(1.1);
}

/* Dynamic Interactive Hover Tooltip */
.chart-dynamic-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  min-width: 195px;
  white-space: nowrap;
  backdrop-filter: blur(14px);
}

[data-theme="light"] .chart-dynamic-tooltip {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.chart-dynamic-tooltip.pos-center {
  transform: translate(-50%, calc(-100% - 16px));
}

.chart-dynamic-tooltip.pos-left {
  transform: translate(-14%, calc(-100% - 16px));
}

.chart-dynamic-tooltip.pos-right {
  transform: translate(-86%, calc(-100% - 16px));
}

.chart-dynamic-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.chart-dynamic-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--bg-card-solid) transparent transparent transparent;
}

[data-theme="light"] .chart-dynamic-tooltip::after {
  border-color: #ffffff transparent transparent transparent;
}

.chart-dynamic-tooltip.pos-left::after {
  left: 28px;
}

.chart-dynamic-tooltip.pos-right::after {
  left: calc(100% - 28px);
}

.tooltip-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.tooltip-yr-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.tooltip-val-badge {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.tooltip-author-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.tooltip-author-pill .tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip-author-pill.not-amila {
  background: rgba(148, 163, 184, 0.14);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .tooltip-author-pill.not-amila {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.2);
}

.tooltip-author-pill.from-amila {
  background: rgba(244, 63, 94, 0.12);
  color: var(--coral-500);
  border: 1px solid rgba(244, 63, 94, 0.35);
}

.tooltip-author-si {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.chart-year-axis {
  position: relative;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 14px;
  min-height: 56px;
}

.chart-yr-label {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.chart-yr-label .yr-num {
  white-space: nowrap;
}

.chart-yr-label .yr-teacher {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
}

.chart-yr-label.from-amila {
  color: var(--coral-500);
}

.chart-yr-label.from-amila .yr-teacher {
  color: var(--coral-500);
}

.chart-yr-label.not-amila {
  color: var(--text-muted);
}

.chart-yr-label.not-amila .yr-teacher {
  color: var(--text-muted);
}

.chart-yr-label.peak {
  color: var(--coral-500);
  font-weight: 800;
}

.chart-yr-label.peak .yr-num {
  color: var(--coral-500);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(var(--coral-rgb), 0.4);
}

/* Continuous Era Indicator Track (Active on mobile <=640px) */
.chart-era-track {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  gap: 8px;
  width: 100%;
}

.chart-era-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-sizing: border-box;
}

.chart-era-chip.other-era {
  flex: 0 0 32%;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-muted);
}

.chart-era-chip.amila-era {
  flex: 1;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: var(--coral-500);
  box-shadow: 0 2px 10px rgba(var(--coral-rgb), 0.15);
}

.chart-era-chip .era-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-era-chip.other-era .era-dot {
  background: #94a3b8;
}

.chart-era-chip.amila-era .era-dot {
  background: var(--coral-500);
  box-shadow: 0 0 6px var(--coral-glow);
}

[data-theme="light"] .chart-era-chip.other-era {
  background: rgba(100, 116, 139, 0.08);
  border-color: rgba(100, 116, 139, 0.25);
  color: #64748b;
}

[data-theme="light"] .chart-era-chip.amila-era {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.35);
  color: #e11d48;
}

@media (max-width: 640px) {
  .chart-year-axis {
    min-height: 74px;
  }
  .chart-yr-label .yr-teacher {
    display: none;
  }
  .chart-era-track {
    display: flex;
  }
  .chart-era-chip {
    font-size: 10.5px;
    padding: 5px 8px;
    gap: 5px;
  }
  .chart-yr-label {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   12. TOP ACHIEVERS SPOTLIGHT
   -------------------------------------------------------------------------- */
.achievers-section {
  padding: 48px 0;
}

.achievers-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 24px;
}

.ach-card {
  position: relative;
  overflow: visible !important;
  padding: 34px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ach-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--amber-rgb), 0.45);
  box-shadow: var(--shadow-lg);
}

.ach-photo-box {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card-solid);
}

.ach-photo-box img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  transition: transform var(--transition-slow);
}

.ach-card:hover .ach-photo-box img {
  transform: scale(1.05);
}

.rank-medal-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1.5px solid #fbbf24;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .rank-medal-badge {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35), 0 2px 5px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.rank-medal-badge sup {
  font-size: 0.72em;
  top: -0.42em;
  position: relative;
  vertical-align: baseline;
  font-weight: 800;
  margin-left: 1.5px;
}

.ach-identity {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(6, 9, 14, 0.95));
}

.ach-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

/* Sits on the photo's dark scrim in both themes, so it needs its own bright
   value rather than the page-facing accent */
.ach-college {
  font-size: 12.5px;
  color: #fbbf24;
  margin-top: 2px;
}

[data-theme="light"] .ach-college {
  color: #2dd4bf;
}

.ach-quote-body {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   12B. DISTRICT FIRST ACHIEVERS
   -------------------------------------------------------------------------- */
.district-firsts-section {
  padding: 48px 0;
}

/* One ledger rather than nine cards - the point is the length of the list */
.district-list {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

/* Fixed side columns, not content-sized ones: each row is its own grid, so
   the badges and the student credit stay flush down the list. The district
   owns the flexible column - it is the headline of every row. */
.dist-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--transition-fast);
  transition-delay: calc(var(--i) * 0.05s);
  cursor: default;
}

.district-list.in .dist-row {
  opacity: 1;
  transform: translateY(0);
}

.dist-row + .dist-row {
  border-top: 1px solid var(--border-subtle);
}

.dist-row:hover {
  background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.08) 0%, rgba(var(--amber-rgb), 0.02) 45%, var(--bg-card-hover) 100%);
}

.dist-row:hover .dist-district {
  color: var(--amber-400);
  transform: translateX(4px);
}

.dist-district {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-main);
  line-height: 1.3;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.dist-rank-num {
  display: inline-flex;
  align-items: baseline;
  margin-left: 7px;
  white-space: nowrap;
  color: var(--amber-400);
}

.dist-district sup {
  font-size: 0.65em;
  vertical-align: baseline;
  position: relative;
  top: -0.42em;
  line-height: 1;
  font-weight: 800;
  text-transform: lowercase;
  color: var(--amber-400);
  margin-left: 2px;
}

.dist-name {
  justify-self: end;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin: 0;
  line-height: 1.4;
}

.dist-student {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 195px;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.dist-user-icon {
  width: 15px;
  height: 15px;
  color: var(--coral-500);
  flex-shrink: 0;
  opacity: 0.9;
}

.dist-id {
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 78px;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.dist-row:hover .dist-student,
.dist-row:hover .dist-id {
  color: var(--text-main);
}

[data-theme="light"] .dist-student,
[data-theme="light"] .dist-id {
  color: #64748b;
}

[data-theme="light"] .dist-row:hover .dist-student,
[data-theme="light"] .dist-row:hover .dist-id {
  color: var(--text-main);
}

.dist-badge {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--amber-soft);
  border: 1px solid rgba(var(--amber-rgb), 0.28);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-400);
  white-space: nowrap;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.dist-badge sup {
  font-size: 0.62em;
  vertical-align: top;
  position: relative;
  top: -0.38em;
  line-height: 0;
  font-weight: 800;
  text-transform: lowercase;
  margin-left: 1px;
}

/* --------------------------------------------------------------------------
   13. GRADE TURNAROUND STORIES
   -------------------------------------------------------------------------- */
.grades-turnaround-section {
  padding: 40px 0 48px;
  position: relative;
}

/* The band frames all four leaps as one piece of proof and carries the warm
   amber wash that separates this strip from the coral-led hero above it. */
.grades-proof-band {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.06), transparent 58%), var(--bg-card);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.grades-proof-band::before,
.grades-proof-band::after {
  content: "";
  position: absolute;
  width: 55%;
  height: 150%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.grades-proof-band::before {
  top: -60%;
  left: -14%;
  background: radial-gradient(circle at 45% 50%, var(--amber-glow), transparent 62%);
  opacity: 0.7;
}

.grades-proof-band::after {
  bottom: -70%;
  right: -16%;
  background: radial-gradient(circle at 55% 50%, var(--coral-glow), transparent 64%);
  opacity: 0.45;
}

/* Micro caption strip that names the scale the ladders are drawn against */
.grades-band-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.band-rail-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-400);
  white-space: nowrap;
}

.band-rail-scale {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Hairline that pushes the scale label to the far edge of the band */
.band-rail-scale::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.45), transparent 85%);
}

.grades-grid-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.grade-card {
  padding: 26px 18px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(168deg, rgba(var(--amber-rgb), 0.07), transparent 42%), var(--bg-card-solid);
}

/* Warm the shared cursor spotlight from coral to gold inside this section */
.grade-card::before {
  background: radial-gradient(
    360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(var(--amber-rgb), 0.12),
    transparent 70%
  );
}

.grade-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--amber-rgb), 0.45);
  box-shadow: 0 22px 44px -20px var(--amber-glow), var(--shadow-md);
}

/* Oversized watermark of the grade reached */
.grade-ghost-letter {
  position: absolute;
  right: -4px;
  bottom: -34px;
  font-family: var(--font-serif);
  font-size: 148px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
  opacity: 0.045;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.grade-card:hover .grade-ghost-letter {
  opacity: 0.09;
  transform: translateY(-6px);
}

.grade-transformation-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}

.grade-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.grade-letter-chip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

/* Where they started: hollow, dashed, deliberately unglamorous */
.grade-letter-chip.from {
  color: var(--text-muted);
  border: 1px dashed var(--border-card);
  background: transparent;
}

/* Where they finished: solid gold */
.grade-letter-chip.to {
  color: #1c1305;
  background: var(--amber-gradient);
  box-shadow: 0 8px 18px -8px var(--amber-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.grade-jump-word {
  font-family: var(--font-sinhala);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.grade-arrow-svg {
  width: 20px;
  height: 20px;
  margin-top: 9px;
  color: var(--coral-500);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.grade-card:hover .grade-arrow-svg {
  transform: translate(3px, -2px);
}

/* Grade track - the F-S-C-B-A scale drawn left to right, with the stretch
   the student actually covered filled in gold */
.grade-track {
  --node: 13px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 170px;
  height: var(--node);
  margin: 20px 0 30px;
}

.grade-track-rail,
.grade-track-fill {
  position: absolute;
  top: 50%;
  height: 3px;
  border-radius: 3px;
}

.grade-track-rail {
  left: calc(var(--node) / 2);
  right: calc(var(--node) / 2);
  background: var(--border-card);
  transform: translateY(-50%);
}

.grade-track-fill {
  left: calc(var(--node) / 2 + var(--from) * (100% - var(--node)) / 4);
  width: calc((var(--to) - var(--from)) * (100% - var(--node)) / 4);
  background: var(--amber-gradient);
  box-shadow: 0 0 14px -2px var(--amber-glow);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.grade-card.in .grade-track-fill {
  transform: translateY(-50%) scaleX(1);
}

.grade-node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--bg-card-solid);
  border: 2px solid var(--border-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Every node carries its grade letter, so the scale needs no decoding */
.grade-node::after {
  content: attr(data-g);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Grades outside the journey - drawn faintly, just for scale */
.grade-node.before,
.grade-node.after {
  background: transparent;
  transform: scale(0.5);
}

/* Where the student started */
.grade-node.origin {
  border-color: var(--text-muted);
}

.grade-node.origin::after {
  color: var(--text-body);
  opacity: 0.95;
}

/* Grades crossed on the way up */
.grade-node.passed {
  background: var(--amber-400);
  border-color: transparent;
  transform: scale(0.62);
}

/* Where they finished */
.grade-node.target {
  background: var(--amber-gradient);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(var(--amber-rgb), 0.14), 0 6px 14px -6px var(--amber-glow);
}

.grade-node.target::after {
  color: var(--amber-400);
  opacity: 1;
}

.grade-card:hover .grade-node.target {
  box-shadow: 0 0 0 6px rgba(var(--amber-rgb), 0.18), 0 6px 16px -6px var(--amber-glow);
}

.grade-divider-line {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--amber-rgb), 0.55), transparent);
  margin: 0 auto 14px;
}

.grade-student-count {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 700;
  line-height: 0.9;
  background: var(--amber-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grade-count-unit {
  position: relative;
  z-index: 2;
  font-family: var(--font-sinhala);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 10px;
}

/* The accent fills are dark enough on white that their dark ink stops working */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .grade-letter-chip.to {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   14. REVIEWS & TESTIMONIALS
   -------------------------------------------------------------------------- */
.reviews-section {
  padding: 48px 0;
}

/* --------------------------------------------------------------------------
   14. STUDENT REVIEWS CAROUSEL & MODAL
   -------------------------------------------------------------------------- */
.reviews-section {
  padding: 48px 0;
  position: relative;
}

.rev-carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.rev-track-wrapper {
  overflow: hidden;
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 10px 4px;
}

.rev-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.rev-slide-item {
  flex: 0 0 calc(33.333% - 16px);
  margin-right: 16px;
  box-sizing: border-box;
  display: flex;
}

.rev-card {
  width: 100%;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 330px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--coral-rgb), 0.4);
  box-shadow: var(--shadow-md);
}

.rev-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.star-rating-row {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--amber-400);
}

.star-rating-row svg {
  width: 20px;
  height: 20px;
}

.rev-quote-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 12px;
  min-height: 98px;
}

.rev-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--coral-500);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 18px;
  align-self: flex-start;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.rev-readmore-btn svg {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-fast);
}

.rev-readmore-btn:hover {
  color: var(--amber-400);
}

.rev-readmore-btn:hover svg {
  transform: translateX(4px);
}

.rev-student-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.rev-avatar-initials {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rev-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(var(--coral-rgb), 0.12);
  border: 1px solid rgba(var(--coral-rgb), 0.28);
  color: var(--coral-500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rev-meta-data h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
}

.rev-meta-data p {
  font-size: 12px;
  color: var(--text-muted);
}

/* Nav Buttons */
.rev-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
  z-index: 2;
}

.rev-nav-btn svg {
  width: 20px;
  height: 20px;
}

.rev-nav-btn:hover {
  background: var(--coral-500);
  border-color: var(--coral-500);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(var(--coral-rgb), 0.35);
}

/* Dots */
.rev-dots-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.rev-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--border-card);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.rev-dot-btn.active {
  width: 28px;
  background: var(--coral-500);
  box-shadow: 0 0 10px rgba(var(--coral-rgb), 0.5);
}

/* Telegram Feedback CTA */
.rev-feedback-cta {
  text-align: center;
  margin-top: 32px;
}

.btn-feedback-tg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 30px;
  min-height: 52px;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.14) 0%, rgba(34, 158, 217, 0.06) 100%), var(--bg-card);
  border: 1px solid rgba(42, 171, 238, 0.38);
  color: #38bdf8;
  text-decoration: none;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px -2px rgba(42, 171, 238, 0.25);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.btn-feedback-tg:hover {
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.25) 0%, rgba(34, 158, 217, 0.14) 100%), var(--bg-card-hover);
  border-color: #2AABEE;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -2px rgba(42, 171, 238, 0.45);
}

.btn-feedback-tg:active {
  transform: translateY(0);
}

[data-theme="light"] .btn-feedback-tg {
  background: rgba(14, 165, 233, 0.08);
  color: #0284c7;
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 4px 14px -2px rgba(14, 165, 233, 0.15);
}

[data-theme="light"] .btn-feedback-tg:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: #0284c7;
  color: #0369a1;
  box-shadow: 0 8px 20px -4px rgba(14, 165, 233, 0.25);
}

.btn-feedback-tg .tg-svg-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #2AABEE;
  filter: drop-shadow(0 2px 8px rgba(42, 171, 238, 0.45));
}

.btn-feedback-tg .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.btn-feedback-tg:hover .btn-icon {
  transform: translate(3px, -3px);
}

/* Popup Modal */
.review-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.review-modal-dialog {
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  max-width: 620px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  padding: 0;
  box-shadow: var(--shadow-xl), 0 0 50px rgba(0, 0, 0, 0.6);
  position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-modal-backdrop.open .review-modal-dialog {
  transform: scale(1) translateY(0);
}

.review-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.review-modal-close svg {
  width: 18px;
  height: 18px;
}

.review-modal-close:hover {
  background: var(--coral-500);
  border-color: var(--coral-500);
  color: #ffffff;
  transform: scale(1.08) rotate(90deg);
}

.modal-rev-img-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-solid);
  overflow: hidden;
}

.modal-rev-img {
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  display: block;
}

.verified-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--emerald-400);
  font-weight: 600;
  font-size: 12px;
}

.verified-badge-pill svg {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------------------
   15. PAPER CLASS SHOWCASE & BANNER
   -------------------------------------------------------------------------- */
.paper-class-section {
  padding: 48px 0;
}

.paper-showcase-banner {
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 40px);
  border-radius: var(--radius-xl);
  background: 
    radial-gradient(circle at 50% 0%, var(--coral-soft), transparent 70%),
    var(--bg-card-solid);
  border: 1px solid rgba(244, 63, 94, 0.28);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.paper-banner-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.paper-banner-si {
  font-size: clamp(15px, 1.6vw, 17.5px);
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 34px;
}

.paper-banner-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   16. BESPOKE CINEMA SPOTLIGHT THEATER & DECK (EXAM CENTERS)
   -------------------------------------------------------------------------- */
.centers-gallery-section {
  padding: 48px 0;
}

.venue-spotlight-stage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 24px;
  padding: 0;
  border-radius: var(--radius-xl);
}

/* Left: Theater Viewport */
.venue-theater-col {
  position: relative;
  display: flex;
  flex-direction: column;
}

.theater-screen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #06090e;
  border: 1px solid var(--border-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.theater-ambient-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--coral-rgb), 0.22) 0%, rgba(var(--amber-rgb), 0.12) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.theater-slides-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.theater-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s;
  margin: 0;
}

.theater-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.theater-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.theater-img-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 9, 14, 0.55) 0%, rgba(6, 9, 14, 0.05) 25%, rgba(6, 9, 14, 0.15) 55%, rgba(6, 9, 14, 0.85) 80%, rgba(6, 9, 14, 0.98) 100%);
  pointer-events: none;
}

.theater-top-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}

.theater-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: rgba(6, 9, 14, 0.72);
  border: 1px solid rgba(var(--amber-rgb), 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--amber-400);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.theater-zoom-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(6, 9, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.theater-zoom-btn:hover {
  background: var(--coral-500);
  border-color: var(--coral-500);
  transform: scale(1.08);
}

.theater-zoom-btn svg {
  width: 16px;
  height: 16px;
}

.theater-caption-card {
  position: relative;
  z-index: 3;
  margin: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: rgba(8, 12, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.theater-caption-content {
  flex: 1;
  min-width: 0;
}

.theater-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.theater-pin-pulse {
  width: 20px;
  height: 20px;
  color: var(--coral-500);
  flex-shrink: 0;
}

.theater-pin-pulse svg {
  width: 100%;
  height: 100%;
}

.theater-city-heading {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.theater-en-inline {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--amber-400);
  font-family: var(--font-sans);
}

.theater-venue-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  margin-left: 30px;
}

.theater-index-pill {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.theater-nav-controls {
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.theater-nav-btn {
  pointer-events: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(6, 9, 14, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.7;
  transform: scale(0.95);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.theater-screen:hover .theater-nav-btn {
  opacity: 1;
  transform: scale(1);
}

.theater-nav-btn:hover {
  background: var(--coral-500);
  border-color: var(--coral-500);
  opacity: 1;
}

.theater-nav-btn svg {
  width: 18px;
  height: 18px;
}

/* Right: Center Deck Column */
.venue-deck-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.venue-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
}

.venue-deck-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral-500);
}

.venue-deck-si {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.venue-count-tag {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--coral-soft);
  color: var(--coral-500);
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid rgba(var(--coral-rgb), 0.25);
}

.venue-deck-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.venue-deck-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.venue-deck-item:hover {
  transform: translateX(4px);
  border-color: rgba(var(--coral-rgb), 0.5);
  background: var(--bg-subtle);
}

.venue-deck-item.active {
  background: linear-gradient(135deg, rgba(var(--coral-rgb), 0.14), rgba(var(--amber-rgb), 0.06));
  border-color: var(--coral-500);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25), inset 3px 0 0 0 var(--coral-500);
}

.venue-item-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
  border: 1px solid var(--border-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.venue-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.venue-deck-item:hover .venue-item-thumb img,
.venue-deck-item.active .venue-item-thumb img {
  transform: scale(1.12);
}

.venue-deck-item.active .venue-item-thumb {
  border-color: var(--coral-500);
  box-shadow: 0 0 10px rgba(var(--coral-rgb), 0.35);
}

.venue-item-info {
  flex: 1;
  min-width: 0;
}

.venue-item-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.venue-item-num {
  font-family: var(--font-serif);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--coral-500);
}

.venue-item-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  transition: color var(--transition-fast);
}

.venue-deck-item.active .venue-item-name {
  color: var(--coral-500);
}

.venue-item-en {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}

.venue-deck-item.active .venue-item-en {
  color: var(--amber-400);
}

.venue-item-hall {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast);
}

.venue-deck-item.active .venue-item-hall {
  color: var(--text-body);
  font-weight: 500;
}

/* Map direct cta */
.venue-deck-map-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-radius: var(--radius-md);
  background: var(--coral-soft);
  border: 1px solid rgba(var(--coral-rgb), 0.3);
  color: var(--text-main);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.venue-deck-map-cta:hover {
  transform: translateY(-2px);
  border-color: var(--coral-500);
  background: rgba(var(--coral-rgb), 0.14);
}

.venue-map-cta-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--coral-500);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.venue-map-cta-icon svg {
  width: 18px;
  height: 18px;
}

.venue-map-cta-text {
  flex: 1;
}

.venue-map-cta-text span.si {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.venue-map-cta-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--coral-500);
}

.ec-more-btn:hover,
.ec-more-btn:focus-visible {
  border-color: var(--coral-500);
  color: var(--coral-500);
}

/* ---- Lightbox ---- */
.ec-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(4, 6, 11, 0.93);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.ec-lightbox.open {
  opacity: 1;
  visibility: visible;
}

/* Source photos are 300x224, so the viewer never upscales them - it frames
   them instead, and the panel keeps its presence at any image size. If larger
   exports land later, max-height lets the photo grow into the frame. */
.ec-lb-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: min(1080px, 100%);
  min-width: min(460px, 88vw);
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.ec-lb-figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: scale(0.97);
  transition: transform var(--transition-normal);
}

.ec-lightbox.open .ec-lb-figure img {
  transform: scale(1);
}

.ec-lb-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

.ec-lb-pin { display: flex; }
.ec-lb-pin .ec-pin { color: var(--coral-400, #fb7185); }

.ec-lb-name {
  font-family: var(--font-sinhala);
  font-size: 14px;
  font-weight: 600;
}

.ec-lb-en {
  font-size: 13px;
  color: rgba(248, 250, 252, 0.65);
}

.ec-lb-count {
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(248, 250, 252, 0.65);
}

.ec-lb-close,
.ec-lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ec-lb-close:hover,
.ec-lb-nav:hover {
  background: var(--coral-500);
  border-color: var(--coral-500);
}

.ec-lb-close {
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 42px;
  height: 42px;
}

.ec-lb-close svg { width: 19px; height: 19px; }

.ec-lb-nav {
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.ec-lb-nav svg { width: 21px; height: 21px; }
.ec-lb-nav.prev { left: clamp(10px, 3vw, 32px); }
.ec-lb-nav.next { right: clamp(10px, 3vw, 32px); }

.ec-lb-nav:hover { transform: translateY(-50%) scale(1.06); }


/* --------------------------------------------------------------------------
   17. INTERACTIVE SRI LANKA MAP & DIRECTORY
   -------------------------------------------------------------------------- */
.map-section {
  padding: 48px 0;
}

.map-directory-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

.map-svg-container {
  position: relative;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--map-bg);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.sl-map-svg {
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
  overflow: visible;
}

.sl-map-svg .province {
  fill: var(--map-province);
  stroke: var(--map-province-stroke);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.sl-map-svg .province:hover, .sl-map-svg .province.active-district {
  fill: var(--map-province-hover);
  stroke: var(--coral-500);
  stroke-width: 1.5;
}

.sl-map-svg .po {
  display: none;
}

.sl-map-svg .mpin {
  cursor: pointer;
}

.sl-map-svg .mpin .pi {
  fill: var(--map-pin-default);
  transition: fill var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(1.2);
  filter: drop-shadow(0 2px 5px rgba(244, 63, 94, 0.4));
}

.sl-map-svg .mpin:hover .pi,
.sl-map-svg .mpin:focus-visible .pi,
.sl-map-svg .mpin.is-active .pi {
  fill: #ff2d75;
  transform: scale(1.85);
  filter: drop-shadow(0 0 12px #f43f5e);
}

.map-tooltip-card {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  transform: translate(-50%, -140%);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--bg-card-solid);
  border: 1px solid var(--amber-400);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.map-tooltip-card.show {
  opacity: 1;
}

/* Map Directory Sidebar */
.map-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.map-search-input-box {
  position: relative;
  width: 100%;
}

.map-search-field {
  width: 100%;
  padding: 14px 18px 14px 44px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.map-search-field:focus {
  outline: none;
  border-color: var(--coral-500);
  box-shadow: 0 0 0 3px var(--coral-soft);
}

.map-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  pointer-events: none;
}

.center-results-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 6px;
}

.center-results-list::-webkit-scrollbar {
  width: 5px;
}

.center-results-list::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 10px;
}

.center-list-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-card);
  border: 1px solid transparent;
}

.center-list-entry[hidden],
.center-list-entry.is-hidden {
  display: none !important;
}

.center-list-entry:hover, .center-list-entry.is-active {
  background: var(--coral-soft);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--text-main);
}

.center-list-entry .dot-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-500);
  box-shadow: 0 0 6px var(--coral-500);
  flex-shrink: 0;
  margin-right: 10px;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.center-list-entry:hover .dot-indicator, .center-list-entry.is-active .dot-indicator {
  background: #ff2d75;
  transform: scale(1.4);
}

/* --------------------------------------------------------------------------
   18. 5-STEP VERTICAL TIMELINE (Scroll-Interactive)
   -------------------------------------------------------------------------- */
.how-to-join-section {
  padding: 60px 0;
  position: relative;
}

/* Mobile Step Progress Connected Stepper */
.steps-mobile-progress-bar {
  display: none;
  position: relative;
  max-width: 340px;
  margin: 0 auto 24px;
  padding: 0 8px;
}

/* Sits in the progress line now that the per-card STEP badge is gone */
.m-progress-label {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-500);
}

/* Anchored to the node row, not the whole bar, so the STEP label above it
   cannot push the line off the centre of the circles. */
.m-progress-track {
  position: absolute;
  top: 50%;
  left: 24px;
  right: 24px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  border-radius: 4px;
  z-index: 1;
}

[data-theme="light"] .m-progress-track {
  background: rgba(0, 0, 0, 0.1);
}

.m-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f43f5e, #ff2a5f);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.8);
  border-radius: 4px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-progress-nodes {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.m-step-node {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card-solid);
  border: 1.5px solid var(--border-card);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-step-node.is-active,
.m-step-node.is-passed {
  background: linear-gradient(145deg, #f43f5e, #ff2a5f);
  border-color: #ff5e84;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.65);
  transform: scale(1.12);
}

@media (max-width: 640px) {
  .steps-mobile-progress-bar {
    display: block;
  }
}

.vertical-steps-timeline {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

.timeline-vertical-spine {
  position: absolute;
  left: 44px;
  top: 45px;
  width: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

[data-theme="light"] .timeline-vertical-spine {
  background: rgba(0, 0, 0, 0.08);
}

.timeline-spine-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #f43f5e, #ff2a5f);
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.7);
  border-radius: 4px;
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-step-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 2;
  opacity: 0.35;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-step-row.is-active,
.v-step-row:hover {
  opacity: 1;
}

.v-step-node-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-step-node-box {
  width: 86px;
  height: 86px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-card);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.v-step-mini-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.4s ease;
}

.v-step-big-num {
  font-size: 32px;
  font-weight: 900;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  transition: all 0.4s ease;
}

/* Active Pink / Coral Node & Card State */
.v-step-row.is-active .v-step-node-box,
.v-step-row:hover .v-step-node-box {
  background: linear-gradient(145deg, #f43f5e 0%, #ff2a5f 100%);
  border-color: #ff5e84;
  box-shadow: 0 0 32px rgba(244, 63, 94, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

.v-step-row.is-active .v-step-mini-tag,
.v-step-row:hover .v-step-mini-tag {
  background: #ffffff;
  color: #e11d48;
  border-color: #ffffff;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.v-step-row.is-active .v-step-big-num,
.v-step-row:hover .v-step-big-num {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.v-step-card {
  padding: 28px 34px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease,
              background 0.45s ease;
}

.v-step-row.is-active .v-step-card,
.v-step-row:hover .v-step-card {
  transform: translateX(10px);
  border-color: rgba(var(--coral-rgb), 0.55);
  background: linear-gradient(90deg, rgba(var(--coral-rgb), 0.08) 0%, rgba(var(--coral-rgb), 0.02) 45%, var(--bg-card) 100%);
  box-shadow: 0 12px 36px -10px rgba(var(--coral-rgb), 0.25), 0 0 0 1px rgba(var(--coral-rgb), 0.3);
}

.v-step-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.35s ease;
}

.v-step-row.is-active .v-step-title,
.v-step-row:hover .v-step-title {
  color: var(--coral-400);
}

[data-theme="light"] .v-step-row.is-active .v-step-title,
[data-theme="light"] .v-step-row:hover .v-step-title {
  color: var(--coral-600);
}

.v-step-card p {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.95;
}

.inline-accent-link {
  color: var(--coral-500);
  font-weight: 600;
  border-bottom: 1px solid rgba(244, 63, 94, 0.4);
  transition: color var(--transition-fast), border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.inline-accent-link:hover {
  color: var(--amber-400);
  border-color: var(--amber-400);
}

/* --------------------------------------------------------------------------
   19. TELEGRAM COMMUNITY HUB
   -------------------------------------------------------------------------- */
.telegram-section {
  padding: 48px 0;
}

.telegram-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.tg-tile-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.tg-tile-card:hover {
  transform: translateY(-8px);
  border-color: var(--coral-500);
  box-shadow: var(--shadow-lg);
}

.tg-photo-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card-solid);
}

.tg-photo-wrap img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.tg-tile-card:hover .tg-photo-wrap img {
  transform: scale(1.05);
}

.tg-channel-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  text-align: center;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.tg-svg-icon {
  width: 26px;
  height: 26px;
  color: #229ED9;
  flex-shrink: 0;
}

.tg-tile-card:hover .tg-channel-name {
  color: var(--coral-500);
}

/* --------------------------------------------------------------------------
   20. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq-section {
  padding: 48px 0;
}

.faq-container {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question-btn {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition-fast);
}

.faq-question-btn:hover {
  color: var(--coral-500);
}

.faq-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral-500);
  flex-shrink: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.faq-chevron-icon {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-normal);
}

.faq-item.active .faq-chevron-icon {
  transform: rotate(180deg);
}

.faq-item.active .faq-icon-wrapper {
  background: var(--coral-soft);
  border-color: var(--coral-500);
}

.faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.faq-answer-text {
  padding: 0 24px 22px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   21. REGISTRATION BAND
   -------------------------------------------------------------------------- */
.register-action-section {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  padding: 48px 0;
}

.reg-cards-cluster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.reg-card {
  padding: 42px 32px;
  text-align: center;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.reg-card:hover {
  transform: translateY(-8px);
  border-color: var(--coral-500);
  box-shadow: var(--shadow-lg);
}

.reg-card-icon {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  background: var(--coral-soft);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: var(--coral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  font-family: var(--font-serif);
  flex-shrink: 0;
}

.reg-card-icon.amber {
  background: var(--amber-soft);
  border-color: rgba(var(--amber-rgb), 0.4);
  color: var(--amber-400);
}

.reg-card-icon svg {
  width: 40px;
  height: 40px;
}

.reg-card-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
}

.reg-card-title.si {
  font-family: var(--font-sinhala);
  font-size: 21px;
  line-height: 1.4;
}

.reg-card-desc {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------------------- */
footer#siteFooter {
  position: relative;
  padding: 54px 0 26px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}

/* Hairline of brand colour so the page closes on a deliberate edge */
footer#siteFooter::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--coral-500), transparent);
  opacity: 0.45;
  pointer-events: none;
}

.footer-grid-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* The link boxes the logo at its own size - as a bare flex child the img
   stretched to the full column and object-fit centred it mid-column. */
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.footer-logo {
  display: block;
  height: 54px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transition: transform var(--transition-fast);
}

.footer-logo-link:hover .footer-logo {
  transform: translateY(-2px);
}

.footer-motto {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 290px;
}

.footer-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(42, 171, 238, 0.35);
  background: rgba(42, 171, 238, 0.08);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.footer-tg-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #2AABEE;
}

.footer-tg-link:hover {
  border-color: #2AABEE;
  background: rgba(42, 171, 238, 0.16);
  transform: translateY(-2px);
}

.footer-col-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 18px;
}

.footer-links-list li a {
  display: inline-block;
  font-size: 14px;
  color: var(--text-body);
  margin-bottom: 10px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-links-list li a:hover {
  color: var(--coral-500);
  transform: translateX(4px);
}

.footer-contact-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  transition: color var(--transition-fast);
}

.footer-phone svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--coral-500);
}

.footer-phone:hover {
  color: var(--coral-500);
}

.footer-venues {
  margin-top: 22px;
}

.footer-venue-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.footer-venues li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sinhala);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 7px;
}

.footer-venues svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--coral-500);
  opacity: 0.8;
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 26px;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-dev-credit {
  color: var(--coral-500);
  font-weight: 600;
}

/* Always-Floating Hotline Widget (Bottom Right) */
/* --------------------------------------------------------------------------
   MOBILE BOTTOM NAVIGATION BAR
   Replaces the off-canvas drawer on phones: every destination is reachable
   in one tap, with no overlay to open, close or trap scrolling.
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 640px) {
  :root {
    /* icon (21) + gap (4) + two lines of label (~24) + 7px padding each side */
    --bottom-nav-h: 74px;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: grid;
    /* Login lives in the header's top-right, so it is not repeated here */
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card-solid);
    border-top: 1px solid var(--border-card);
    box-shadow: 0 -8px 28px -10px rgba(0, 0, 0, 0.6);
  }

  .bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 5px 2px;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: color 0.25s ease, background-color 0.25s ease;
  }

  /* Labels carry an explicit <br>: at this size several of them fit on one
     line, so relying on natural wrapping gave an inconsistent mix. */
  .bottom-nav-link span {
    display: block;
  }

  .bottom-nav-link svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
  }

  .bottom-nav-link.active {
    color: var(--coral-500);
    background: var(--coral-soft);
  }

  .bottom-nav-link.is-cta {
    color: var(--coral-500);
  }

  /* Keep page content clear of the bar. The floating widgets are lifted at
     the end of this file - their base rules are declared after this block,
     so an override here would lose on source order. */
  body {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
}

.floating-hotline-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--radius-lg);
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.55), 0 0 16px rgba(245, 158, 11, 0.15);
  z-index: 990;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="light"] .floating-hotline-widget {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.15), 0 0 14px rgba(13, 148, 136, 0.12);
}

.floating-hotline-widget:hover {
  transform: translateY(-3px);
  border-color: #fbbf24;
  box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .floating-hotline-widget:hover {
  border-color: #0f766e;
  box-shadow: 0 14px 32px -4px rgba(0, 0, 0, 0.2), 0 0 16px rgba(13, 148, 136, 0.25);
}

.hotline-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
  transition: transform var(--transition-fast);
}

[data-theme="light"] .hotline-icon-box {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(13, 148, 136, 0.35);
}

.floating-hotline-widget:hover .hotline-icon-box {
  transform: scale(1.06);
}

.hotline-icon-box svg {
  width: 18px;
  height: 18px;
}

.hotline-text-body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hotline-tag-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-transform: uppercase;
}

[data-theme="light"] .hotline-tag-label {
  color: #0f766e;
}

.hotline-phone-number {
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
}

[data-theme="light"] .hotline-phone-number {
  color: #0f172a;
}

/* Floating Back to Top Button: Positioned above Hotline widget */
.back-to-top {
  position: fixed;
  bottom: 84px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-card-solid);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal), border-color var(--transition-fast), color var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: var(--coral-500);
  color: var(--coral-500);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   23. SCROLL REVEAL UTILITIES
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   24. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .results-bento-layout { grid-template-columns: 1fr; }
  .map-directory-grid { grid-template-columns: 1fr; }
  .map-svg-container { max-width: 540px; margin: 0 auto; height: auto; }
  .map-sidebar-content { height: auto; }
  .center-results-list { flex: initial; max-height: 480px; }
  .grades-grid-layout { grid-template-columns: repeat(2, 1fr); }
  .rev-slide-item { flex: 0 0 calc(50% - 12px); margin-right: 12px; }
}

@media (max-width: 900px) {
  /* District ledger stacks cleanly without redundant 2025 A/L badge */
  .dist-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 15px 18px;
  }

  .dist-district {
    font-size: 18.5px;
    width: 100%;
    line-height: 1.3;
  }

  .dist-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .dist-student {
    width: auto;
    min-width: auto;
  }

  .dist-badge {
    display: none !important;
  }

  .nav-menu-cluster {
    display: none !important;
  }

  .nav-actions {
    gap: 8px;
    flex-shrink: 0;
  }

  .theme-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .theme-toggle-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .nav-actions .btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    gap: 6px;
    white-space: nowrap;
  }

  .nav-actions .btn-sm .btn-icon {
    width: 17px;
    height: 17px;
  }
  
  .dates-grid-layout,
  .methodology-bento,
  .achievers-bento-grid,
  .reviews-grid-layout,
  .telegram-grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-grid-card {
    grid-template-columns: 1fr;
  }
  
  .about-showcase-img {
    max-height: 380px;
    object-position: top center;
  }
  
  .footer-grid-layout {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .footer-motto { max-width: 460px; }

  /* Contact takes the full row rather than leaving a hole beside it */
  .footer-contact-col {
    grid-column: 1 / -1;
    padding-top: 26px;
    border-top: 1px solid var(--border-subtle);
  }

  .footer-venues {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .wrap { --wrap-pad: 16px; }
  .logo-img { height: 34px; }
  .footer-logo { height: 48px; }

  /* Phones read the reviews as a native scroll-snap rail instead of a
     JS-transformed track: the cards follow the finger, keep their momentum,
     and the peek of the next card says "there is more" without arrows. */
  .rev-nav-btn { display: none; }
  .rev-carousel-container { gap: 0; margin-top: 4px; }

  .rev-track-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0 4px;
    border-radius: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .rev-track-wrapper::-webkit-scrollbar { display: none; }

  .rev-track {
    gap: 12px;
    transform: none !important;
  }

  /* A real trailing flex item, not padding: padding on the track sits inside
     a box the slides already overflow, so it adds nothing to the scroll
     length. Without this the last card can never snap to the left edge. */
  .rev-track::after {
    content: "";
    flex: 0 0 calc(12% - 12px);
  }

  .rev-slide-item {
    flex: 0 0 88%;
    margin-right: 0;
    scroll-snap-align: start;
  }

  /* The card fills its slide - the old fixed width was written for a flat
     scroller and left a dead strip beside every card once slides wrapped them */
  .rev-card {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 20px 18px 18px;
  }

  .rev-card:hover { transform: none; }

  .rev-card-top-row { margin-bottom: 14px; }

  .star-rating-row svg { width: 17px; height: 17px; }

  /* Seven lines instead of four: the extra height is free now that the card
     is not padlocked to 330px, and the quote is the reason to be here. */
  .rev-quote-text.clamped {
    -webkit-line-clamp: 7;
    min-height: 0;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 14px;
  }

  /* A 17px text link is not a tap target - this is a full-width pill */
  .rev-readmore-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 0 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-pill);
    background: rgba(var(--coral-rgb), 0.1);
    border: 1px solid rgba(var(--coral-rgb), 0.25);
  }

  .rev-student-footer { padding-top: 14px; gap: 11px; }
  .rev-avatar-initials { width: 40px; height: 40px; font-size: 13px; }
  .rev-meta-data h4 { font-size: 14px; }

  /* Dots carry a 26px hit area; only the pill inside them is small */
  .rev-dots-row { gap: 2px; margin-top: 12px; }

  .rev-dot-btn {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: none;
  }

  .rev-dot-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--border-card);
    transition: width var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  }

  .rev-dot-btn.active {
    width: 34px;
    background: none;
    box-shadow: none;
  }

  .rev-dot-btn.active::before {
    width: 22px;
    background: var(--coral-500);
    box-shadow: 0 0 10px rgba(var(--coral-rgb), 0.5);
  }

  .rev-feedback-cta {
    margin-top: 24px;
    padding: 0 8px;
  }

  .btn-feedback-tg {
    padding: 13px 22px;
    font-size: 14px;
    min-height: 52px;
    width: 100%;
    max-width: 390px;
    gap: 12px;
  }

  .btn-feedback-tg .tg-svg-icon {
    width: 32px;
    height: 32px;
  }

  .review-modal-dialog {
    max-width: 94vw;
    padding: 0;
  }

  .review-modal-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }

  .nav-actions {
    gap: 7px;
  }

  .theme-toggle-btn,
  .menu-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .theme-toggle-btn svg {
    width: 19px;
    height: 19px;
  }

  .nav-actions .btn-sm {
    padding: 7px 11px;
    font-size: 12.5px;
    gap: 5px;
  }

  .nav-actions .btn-sm .btn-icon {
    width: 15px;
    height: 15px;
  }
  /* The hero section with full-width header on top and stacked columns below */
  .hero-section {
    padding: 96px 0 48px;
  }

  .hero-header {
    margin-bottom: 20px;
    width: 100%;
  }

  .hero-badge-pill {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    gap: 7px;
    padding: 8px 14px;
    font-size: clamp(10px, 3vw, 12.5px);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
  }

  .hero-title {
    font-size: clamp(34px, 8.5vw, 50px);
    line-height: 1.1;
    margin-bottom: 0;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: auto;
  }

  .hero-description {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 0;
  }
  
  /* Stacked full-width CTAs */
  .hero-ctas-cluster {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-bottom: 0;
  }

  .hero-primary-btns-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
  }

  @media (max-width: 480px) {
    .hero-primary-btns-row {
      grid-template-columns: 1fr;
    }
  }

  .hero-primary-btns-row .btn {
    padding: 12px 10px;
    font-size: 13.5px;
    min-height: 48px;
    white-space: normal;
    text-align: center;
    width: 100%;
    justify-content: center;
  }

  .btn-hero-tg-full {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 48px;
    justify-content: center;
    box-sizing: border-box;
  }

  .hero-tg-link-pill {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  /* Venue Callout */
  .venue-note-banner {
    padding: 13px 15px;
    font-size: 13.5px;
    line-height: 1.75;
    margin-bottom: 0;
  }

  .hero-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  .hero-countdown-box {
    padding: 22px 18px;
    margin: 0;
  }

  .countdown-header {
    margin-bottom: 16px;
  }

  .countdown-eyebrow {
    font-size: 11.5px;
    margin-bottom: 7px;
  }

  .countdown-title {
    font-size: 18px;
  }

  .countdown-timer-grid {
    gap: 8px;
    margin-bottom: 16px;
  }

  .timer-slot {
    padding: 12px 4px;
  }

  .timer-num {
    font-size: 28px;
  }

  .timer-lbl {
    font-size: 10.5px;
  }

  .kickoff-dates-mini {
    padding: 14px;
    gap: 10px;
  }

  .kickoff-venue-row {
    font-size: 13px;
  }

  /* Trust points in left column */
  .hero-trust-points {
    width: 100%;
    margin-top: 0;
  }

  .trust-point-item {
    padding: 11px 16px;
    gap: 12px;
  }

  .trust-point-icon {
    width: 20px;
    height: 20px;
  }

  .trust-point-text {
    font-size: 15.5px;
    gap: 5px;
  }

  .timer-slot { padding: 12px 4px; }
  
  .paper-banner-ctas {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .paper-banner-ctas .btn {
    width: 100%;
  }

  .about-grid-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  
  .quote-card-inner {
    flex-direction: column;
    gap: 16px;
  }

  .quote-icon-large {
    width: 44px;
    height: 44px;
  }

  .about-years-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-highlights-list {
    grid-template-columns: 1fr;
  }
  
  .about-showcase-img {
    max-height: 320px;
    object-position: top center;
  }
  
  /* Horizontal Mobile Snap Sliders (Smooth touch swipe, avoids long vertical card stacking) */
  .vertical-steps-timeline,
  .achievers-bento-grid,
  .reviews-grid-layout,
  .telegram-grid-layout,
  .reg-cards-cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    /* Bleed exactly the wrap's padding. The old hardcoded 18px matched no
       breakpoint (wrap is 16px under 640 and 12px under 390), so every
       slider overhung the viewport and the page scrolled sideways. */
    margin: 0 calc(-1 * var(--wrap-pad));
    padding: 16px var(--wrap-pad) 24px;
    scrollbar-width: none;
  }
  
  .vertical-steps-timeline::-webkit-scrollbar,
  .achievers-bento-grid::-webkit-scrollbar,
  .reviews-grid-layout::-webkit-scrollbar,
  .telegram-grid-layout::-webkit-scrollbar,
  .reg-cards-cluster::-webkit-scrollbar {
    display: none;
  }
  
  /* Three days section: vertical stack on mobile */
  .dates-grid-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
  }

  .date-card {
    padding: 26px 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .date-month-badge {
    font-size: 14px;
    letter-spacing: 0.1em;
  }

  .venue-type-tag {
    font-size: 11.5px;
    padding: 5px 11px;
    gap: 5px;
  }

  .venue-type-tag svg {
    width: 13px;
    height: 13px;
  }

  .schedule-highlight-pill {
    padding: 7px 12px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .free-tag-badge {
    font-size: 12.5px;
    padding: 4px 10px;
  }

  .free-tag-text {
    font-size: 13.5px;
  }

  .date-day-number {
    font-size: 54px;
    margin-bottom: 14px;
  }
  
  .ach-card {
    flex: 0 0 calc(82% - 8px);
    min-width: 250px;
    max-width: 310px;
    scroll-snap-align: center;
  }
  
  .tg-tile-card {
    flex: 0 0 calc(75% - 8px);
    min-width: 230px;
    max-width: 280px;
    scroll-snap-align: center;
  }
  
  /* The cards are .reg-card (.reg-action-card matched nothing, so they fell
     back to flex:0 1 auto in a nowrap row and shrank to ~130px each). */
  .reg-card {
    flex: 0 0 calc(88% - 8px);
    min-width: 275px;
    scroll-snap-align: center;
  }

  /* Mobile layout for Cinema Spotlight Theater & Deck */
  .venue-spotlight-stage {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .theater-screen {
    min-height: 320px;
  }

  .theater-top-bar {
    padding: 12px 14px;
  }

  .theater-caption-card {
    margin: 12px;
    padding: 12px 14px;
    gap: 10px;
  }

  .theater-city-heading {
    font-size: 16.5px;
  }

  .theater-en-inline {
    font-size: 12px;
  }

  .theater-venue-sub {
    margin-left: 24px;
    font-size: 11.5px;
  }

  .theater-nav-btn {
    opacity: 0.95;
    width: 36px;
    height: 36px;
  }

  .theater-nav-btn svg {
    width: 15px;
    height: 15px;
  }

  .venue-deck-item {
    padding: 8px 10px;
    gap: 10px;
  }

  .venue-item-thumb {
    width: 44px;
    height: 44px;
  }

  .venue-item-name {
    font-size: 13.5px;
  }

  .venue-item-hall {
    font-size: 11.5px;
  }

  .ec-lb-nav { width: 40px; height: 40px; }
  .ec-lb-figure { min-width: 0; padding: 12px; }
  .ec-lb-figure img { max-height: calc(100vh - 230px); }
  
  .timeline-vertical-spine {
    display: none !important;
  }

  .v-step-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 calc(86% - 8px);
    min-width: 275px;
    max-width: 340px;
    scroll-snap-align: center;
    gap: 12px;
    opacity: 1 !important;
    transform: none !important;
  }

  /* The big STEP 01 badge above each card is redundant on mobile - the
     numbered progress line above the slider already says which step you
     are on, so the card gets the full height instead. */
  .v-step-node-col {
    display: none;
  }

  .v-step-node-box {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }

  .v-step-big-num {
    font-size: 22px;
  }

  .v-step-mini-tag {
    font-size: 8px;
    padding: 1.5px 6px;
    top: -7px;
    border-radius: 3px;
  }

  .v-step-card {
    padding: 22px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--radius-xl);
    transform: none !important;
  }

  .v-step-title {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .v-step-card p {
    font-size: 13.5px;
    line-height: 1.85;
  }

  .v-step-row.is-active .v-step-card,
  .v-step-row:hover .v-step-card {
    transform: none !important;
  }
  
  .footer-grid-layout {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 18px;
    padding-bottom: 24px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .footer-brand-col .footer-motto {
    font-size: 13px;
    margin: 8px 0 12px;
  }

  .footer-col-head {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .footer-links-list li {
    margin-bottom: 7px;
  }

  .footer-links-list li a {
    font-size: 13.5px;
  }

  .footer-contact-col {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
  }

  .footer-contact-label {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .footer-phone {
    font-size: 16px;
  }

  .footer-venues {
    display: none !important;
  }

  .footer-bottom-bar {
    justify-content: center;
    text-align: center;
    font-size: 12.5px;
  }

  /* Floating Hotline & Back to Top Mobile Sizing */
  .floating-hotline-widget {
    bottom: 16px;
    right: 16px;
    padding: 6px 12px 6px 6px;
    gap: 9px;
  }

  .hotline-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }

  .hotline-icon-box svg {
    width: 16px;
    height: 16px;
  }

  .hotline-tag-label {
    font-size: 9.5px;
  }

  .hotline-phone-number {
    font-size: 14.5px;
  }

  .back-to-top {
    bottom: 70px;
    right: 16px;
    width: 38px;
    height: 38px;
  }
  /* The district ledger stacks - four columns leave no room for the district */
  .district-firsts-section { padding: 32px 0; }

  .dist-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 13px 16px;
  }

  .dist-district {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
    width: 100%;
  }

  .dist-name {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .dist-student {
    font-size: 13.5px;
    font-weight: 500;
    color: #94a3b8;
  }

  .dist-user-icon {
    width: 13px;
    height: 13px;
  }

  .dist-badge {
    display: none !important;
  }

  /* Phones read the leaps as compact rows: four narrow columns crushed the
     chips, and the scale track only repeated what the chips already say. */
  .grades-turnaround-section { padding: 30px 0 38px; }

  .grades-proof-band {
    padding: 14px 12px;
    border-radius: var(--radius-lg);
  }

  .grades-band-rail { display: none; }

  .grades-grid-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .grade-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 14px;
    padding: 14px 16px;
    text-align: left;
  }

  .grade-card:hover { transform: none; }

  .grade-transformation-pill {
    grid-row: span 2;
    padding: 8px 10px 6px;
  }

  .grade-letter-chip {
    width: 32px;
    height: 32px;
    font-size: 18px;
    border-radius: 9px;
  }

  .grade-jump-word { font-size: 10px; }

  .grade-arrow-svg {
    width: 16px;
    height: 16px;
    margin-top: 7px;
  }

  .grade-track,
  .grade-divider-line { display: none; }

  .grade-student-count {
    align-self: end;
    justify-self: end;
    font-size: 40px;
    line-height: 0.82;
  }

  .grade-count-unit {
    align-self: start;
    justify-self: end;
    margin-top: 3px;
    font-size: 11.5px;
  }

  .grade-ghost-letter {
    font-size: 92px;
    right: 4px;
    bottom: -20px;
  }

}

@media (max-width: 390px) {
  .wrap { --wrap-pad: 12px; }
  .logo-img { height: 30px; }
  .nav-actions { gap: 5px; }

  .theme-toggle-btn,
  .menu-toggle {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }

  .theme-toggle-btn svg {
    width: 17px;
    height: 17px;
  }

  .nav-actions .btn-sm {
    padding: 6px 9px;
    font-size: 11.5px;
    gap: 4px;
  }

  .nav-actions .btn-sm .btn-icon {
    width: 13px;
    height: 13px;
  }
  .grade-card { padding: 12px 13px; gap: 4px 10px; }
  .grade-transformation-pill { padding: 7px 8px 5px; }

  .grade-letter-chip {
    width: 29px;
    height: 29px;
    font-size: 16px;
  }

  .grade-student-count { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
  .grade-track-fill {
    transform: translateY(-50%) scaleX(1);
  }
  .dist-row {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Lift the floating widgets above the mobile bottom nav.
   Declared last on purpose: their base rules set bottom: 24px further up the
   file, so at equal specificity only a later rule wins.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* These two must keep the 60px separation they have on desktop
     (bottom 24px and 84px). Lifting both by the same amount stacked them
     on top of each other. */
  .floating-hotline-widget {
    bottom: calc(var(--bottom-nav-h, 66px) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .back-to-top {
    bottom: calc(var(--bottom-nav-h, 66px) + env(safe-area-inset-bottom, 0px) + 72px);
  }
}