/* ==========================================================================
   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;
  padding: 0 24px;
}

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

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: justify;
  text-justify: inter-word;
}

.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: 20px;
  font-weight: 700;
  color: var(--text-main);
}

.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;
}

/* --------------------------------------------------------------------------
   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: 420px;
  object-fit: cover;
  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;
}

.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;
}

.about-lead-text {
  font-size: clamp(18px, 2vw, 21.5px);
  font-weight: 700;
  line-height: 1.65;
  color: var(--text-main);
}

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

.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: 14.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.point-num-highlight {
  color: #ff2a5f;
  font-size: 15.5px;
  font-weight: 800;
}

[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);
}

/* 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;
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 12px;
}

.chart-yr-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

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

/* --------------------------------------------------------------------------
   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: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(0, 0, 0, 0.4);
  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: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
}

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

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

.modal-rev-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-rev-student {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modal-rev-student h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.modal-rev-student p {
  font-size: 13px;
  color: var(--text-muted);
}

.modal-rev-body {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--text-main);
  margin-bottom: 22px;
}

.modal-rev-image-preview {
  margin-top: 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.modal-rev-image-preview img {
  width: 100%;
  height: auto;
  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;
}

.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-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) */
.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: 340px;
  }
  
  .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 { padding: 0 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;
  }

  /* The full review is the payoff for tapping through - give it room, and a
     close button big enough to hit with a thumb. */
  .review-modal-dialog { padding: 22px 16px; }

  .review-modal-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .modal-rev-header { margin-bottom: 16px; padding-bottom: 14px; }

  .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: 280px;
  }
  
  /* Horizontal Mobile Snap Sliders (Smooth touch swipe, avoids long vertical card stacking) */
  .achievers-bento-grid,
  .reviews-grid-layout,
  .telegram-grid-layout,
  .reg-cards-cluster {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin: 0 -18px;
    padding: 16px 18px 20px;
    scrollbar-width: none;
  }
  
  .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); }
  
  .vertical-steps-timeline { gap: 24px; }
  .timeline-vertical-spine { left: 34px; }
  .v-step-row { grid-template-columns: 68px 1fr; gap: 16px; }
  .v-step-node-box { width: 68px; height: 68px; border-radius: 6px; }
  .v-step-big-num { font-size: 24px; }
  .v-step-mini-tag { font-size: 8.5px; padding: 1.5px 6px; top: -8px; border-radius: 3px; }
  .v-step-card { padding: 20px 18px; }
  .v-step-title { font-size: 17px; }
  .v-step-row.is-active .v-step-card,
  .v-step-row:hover .v-step-card { transform: translateY(-2px); }
  
  .footer-grid-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 30px;
  }

  .footer-brand-col { padding-bottom: 24px; }

  /* Single column already separates the blocks - the extra rule would read
     as a stray divider */
  .footer-contact-col {
    padding-top: 0;
    border-top: none;
  }
  .footer-col-head { margin-bottom: 14px; }
  .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 { padding: 0 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;
  }
}