@scope (.official-tool) {

/* ══════════════════════════════════════════════════════════════════════════════
   Inspire TALENT HUB - ENTERPRISE STYLESHEET
   Architecture: BEM-Inspire, Fluid Typography, Hardware-Accelerated Animation
   Theme: Monochromatic Deep Blue & Gold
══════════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   01. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */


   :scope {
  /* ── 1.1 Color System: Core ── */
  --color-bg-base: #02040a;
  --color-bg-surface-1: #060a14;
  --color-bg-surface-2: #0a1020;
  --color-bg-surface-3: #0f172a;
  
  --color-bg-overlay-light: rgba(2, 4, 10, 0.65);
  --color-bg-overlay-heavy: rgba(2, 4, 10, 0.90);
  
  /* ── 1.2 Color System: Brand (Gold) ── */
  --color-brand-primary: #e8c66a;    /* Bright Gold */
  --color-brand-secondary: #c9a84c;  /* Mid Gold */
  --color-brand-tertiary: #a88732;   /* Deep Gold */
  
  --color-brand-alpha-10: rgba(232, 198, 106, 0.10);
  --color-brand-alpha-20: rgba(232, 198, 106, 0.20);
  --color-brand-alpha-40: rgba(232, 198, 106, 0.40);
  
  /* ── 1.3 Color System: Typography ── */
  --color-text-primary: #ffffff;
  --color-text-secondary: #e2e8f0;
  --color-text-tertiary: #94a3b8;
  --color-text-quaternary: #64748b;
  
  /* ── 1.4 Color System: Semantic/Status ── */
  --color-status-success: #10b981;
  --color-status-success-alpha: rgba(16, 185, 129, 0.15);
  --color-status-warning: #f59e0b;
  --color-status-danger: #ef4444;
  --color-status-info: #3b82f6;

  /* ── 1.5 Typography System: Families ──
     Headings & titles: Cormorant Garamond (600). Long-form reading: EB Garamond.
     UI / everything else: Inter. Numbers: one standard font (Inter, tabular).
     Hindi (Devanagari) falls back to Noto Serif Devanagari in every stack. */
  --font-family-display: 'Cormorant Garamond', 'Noto Serif Devanagari', 'Times New Roman', Times, serif;
  --font-family-heading: 'Cormorant Garamond', 'Noto Serif Devanagari', 'Times New Roman', Times, serif;
  --font-family-read: 'EB Garamond', 'Noto Serif Devanagari', Georgia, 'Times New Roman', Times, serif;
  --font-family-body: 'Inter', 'Noto Serif Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-num: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* ── 1.6 Typography System: Fluid Scales (Clamp) ── */
  --font-size-xs: clamp(0.70rem, 0.65rem + 0.25vw, 0.85rem);
  --font-size-sm: clamp(0.85rem, 0.80rem + 0.25vw, 1.00rem);
  --font-size-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --font-size-lg: clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --font-size-xl: clamp(1.50rem, 1.30rem + 1.00vw, 2.00rem);
  --font-size-2xl: clamp(2.00rem, 1.70rem + 1.50vw, 3.00rem);
  --font-size-3xl: clamp(2.50rem, 2.00rem + 2.50vw, 4.50rem);
  --font-size-4xl: clamp(3.00rem, 2.50rem + 4.00vw, 6.00rem);
  --font-size-hero: clamp(3.5rem, 6vw + 1rem, 7.5rem);

  /* ── 1.7 Spacing System ── */
  --spacing-1: 0.25rem;
  --spacing-2: 0.50rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1.00rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.50rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2.00rem;
  --spacing-10: 2.50rem;
  --spacing-12: 3.00rem;
  --spacing-16: 4.00rem;
  --spacing-24: 6.00rem;
  --spacing-32: 8.00rem;
  
  --section-padding-y: clamp(5rem, 8vw, 12rem);
  --container-padding-x: clamp(1.5rem, 4vw, 4rem);
  --container-max-width: 1400px;

  /* ── 1.8 Z-Index Architecture ── */
  --z-index-below: -1;
  --z-index-base: 1;
  --z-index-above: 10;
  --z-index-sticky: 100;
  --z-index-dropdown: 200;
  --z-index-nav: 1000;
  --z-index-modal: 2000;
  --z-index-cursor: 9000;
  --z-index-loader: 10000;

  /* ── 1.9 Easing & Animation Timings ── */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-lux: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.26, 1.55);

  --duration-fast: 200ms;
  --duration-mid: 400ms;
  --duration-slow: 800ms;
  --duration-slower: 1200ms;
}

/* ==========================================================================
   02. RESET & NORMALIZATION
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-behavior: smooth;
  background-color: var(--color-bg-base);
}

@-ms-viewport { width: device-width; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-primary);
  text-align: left;
  background-color: var(--color-bg-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global focus states for accessibility */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 4px;
}

/* HTML5 display definitions */
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
[tabindex="-1"]:focus { outline: 0 !important; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--spacing-4); font-weight: normal; }
p { margin-top: 0; margin-bottom: var(--spacing-4); }
abbr[title], abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; }
address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
ol, ul, dl { margin-top: 0; margin-bottom: 1rem; list-style: none; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: .5rem; margin-left: 0; }
blockquote { margin: 0 0 1rem; }
dfn { font-style: italic; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
a { color: inherit; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; }
a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; }
pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Sans", "Courier New", monospace; font-size: 1em; }
pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; }
figure { margin: 0 0 1rem; }
img, svg { vertical-align: middle; border-style: none; max-width: 100%; height: auto; }
svg:not(:scope) { overflow: hidden; }
table { border-collapse: collapse; }
caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: var(--color-text-tertiary); text-align: left; caption-side: bottom; }
th { text-align: inherit; }
label { display: inline-block; margin-bottom: 0.5rem; }
button { border-radius: 0; }
button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }
input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; }
textarea { overflow: auto; resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }
progress { vertical-align: baseline; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { outline-offset: -2px; -webkit-appearance: none; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
output { display: inline-block; }
summary { display: list-item; cursor: pointer; }
template { display: none; }
[hidden] { display: none !important; }

/* Selection & Scrollbar */
::selection {
  background-color: var(--color-brand-secondary);
  color: var(--color-bg-base);
  text-shadow: none;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: var(--color-bg-base); border-left: 1px solid rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb { background-color: rgba(201, 168, 76, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-brand-primary); }

/* ==========================================================================
   03. CUSTOM CURSOR ARCHITECTURE
   ========================================================================== */
/* The cursor only exists on devices that have a precise pointing device */
@media (pointer: fine) {
  .body-dark {
    cursor: none !important;
  }
  a, button, input, textarea, select, summary, .hover-target {
    cursor: none !important;
  }
  
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-brand-primary);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: var(--z-index-cursor);
    transition: width 0.2s var(--ease-lux), height 0.2s var(--ease-lux), opacity 0.2s var(--ease-lux);
    box-shadow: 0 0 10px var(--color-brand-primary);
  }
  
  .cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-brand-alpha-40);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: calc(var(--z-index-cursor) - 1);
    transition: width 0.3s var(--ease-lux), height 0.3s var(--ease-lux), background-color 0.3s var(--ease-lux), border-color 0.3s var(--ease-lux);
  }

  /* Cursor Hover States */
  .body-dark.cursor-hover .cursor-outline {
    width: 70px;
    height: 70px;
    background-color: var(--color-brand-alpha-10);
    border-color: var(--color-brand-primary);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .body-dark.cursor-hover .cursor-dot {
    width: 4px;
    height: 4px;
    opacity: 0.5;
  }

  /* Click State */
  .body-dark.cursor-click .cursor-outline {
    width: 30px;
    height: 30px;
    background-color: var(--color-brand-alpha-40);
    transition: width 0.1s, height 0.1s;
  }
}

/* Hide on touch devices */
@media (pointer: coarse), (hover: none) {
  .cursor-dot, .cursor-outline {
    display: none !important;
  }
}

/* ==========================================================================
   04. TYPOGRAPHY & UTILITY CLASSES
   ========================================================================== */
.text-gold { color: var(--color-brand-primary); }
.text-muted { color: var(--color-text-tertiary); }
.text-main { color: var(--color-text-primary); }

.font-display { font-family: var(--font-family-display); }
.font-heading { font-family: var(--font-family-heading); }
.font-body { font-family: var(--font-family-body); }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.section {
  position: relative;
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  overflow: hidden;
}

.section-dark { background-color: var(--color-bg-base); }
.section-darker { 
  background-color: #010206; 
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* Common Section Headers */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-24);
  position: relative;
  z-index: var(--z-index-base);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: var(--spacing-6);
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--color-brand-alpha-20);
  border-radius: 100px;
  background-color: var(--color-brand-alpha-10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.section-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-brand-primary);
  margin-bottom: var(--spacing-6);
}

.section-title em {
  font-family: var(--font-family-heading);
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-primary);
}

.section-desc {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* Premium SVGs */
.premium-svg {
  filter: drop-shadow(0 0 8px var(--color-brand-alpha-20));
  transition: transform var(--duration-mid) var(--ease-lux), filter var(--duration-mid) var(--ease-lux);
}

/* ==========================================================================
   05. BUTTONS & INTERACTIVE ELEMENTS
   ========================================================================== */
.btn-magnetic-wrap {
  display: inline-block;
  padding: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 3.5rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux), background-color var(--duration-fast);
  z-index: 1;
}

.btn-gold {
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  color: var(--color-bg-base);
  border: 1px solid transparent;
  box-shadow: 0 10px 30px var(--color-brand-alpha-20);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px var(--color-brand-alpha-40);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-alpha-40);
}

.btn-outline:hover {
  background: var(--color-brand-alpha-10);
  border-color: var(--color-brand-primary);
  transform: translateY(-2px);
}

.btn-lux {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 3.5rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bg-base);
  background-color: var(--color-brand-primary);
  border-radius: 4px;
  transition: all var(--duration-slow) var(--ease-lux);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn-lux::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s var(--ease-lux);
  z-index: -1;
}

.btn-lux:hover::before {
  left: 100%;
}

.btn-lux:hover {
  background-color: var(--color-text-primary);
  color: var(--color-bg-base);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(255,255,255,0.1);
}

/* Ripple Animation */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.btn-ripple.animate {
  animation: rippleEffect 0.6s ease-out forwards;
}

@keyframes rippleEffect {
  to {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

/* ==========================================================================
   06. CINEMATIC LOADER
   ========================================================================== */
/* ---- Page loader (homepage): a golden seal that draws itself ---- */
.loader {
  position: fixed;
  inset: 0;
  background: radial-gradient(130% 130% at 50% 38%, #070b16 0%, var(--color-bg-base) 68%);
  z-index: var(--z-index-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s var(--ease-lux), visibility 0.7s var(--ease-lux);
}

.loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
}

.loader-logo-img {
  width: clamp(180px, 46vw, 258px);
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 198, 106, 0.28);
  opacity: 0;
  transform: scale(0.94);
  animation: ldLogoIn 0.9s var(--ease-lux) forwards;
}

.loader-line {
  position: relative;
  width: 200px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  animation: ldRiseIn 0.6s var(--ease-lux) 0.7s forwards;
}

.loader-line i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(232,198,106,0), var(--color-brand-primary));
  box-shadow: 0 0 12px var(--color-brand-primary);
  animation: ldLineFill 1.5s var(--ease-lux) 0.6s forwards;
}

@keyframes ldLogoIn { to { opacity: 1; transform: scale(1); } }
@keyframes ldRiseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes ldLineFill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .loader-logo-img { animation: none !important; opacity: 1 !important; transform: none !important; }
  .loader-line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .loader-line i { animation: none !important; width: 100% !important; }
}

/* ==========================================================================
   07. ENTERPRISE NAVIGATION SYSTEM
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; width: 100%;
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
  z-index: var(--z-index-nav);
  background-color: transparent;
  transition: padding var(--duration-slow) var(--ease-lux), background-color var(--duration-slow) var(--ease-lux), border-color var(--duration-slow) var(--ease-lux), backdrop-filter var(--duration-slow);
}

.navbar.scrolled {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  background-color: rgba(3, 6, 13, 0.80);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.nav-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  text-decoration: none;
  z-index: calc(var(--z-index-nav) + 2);
}

.nav-logo em {
  font-family: var(--font-family-heading);
  font-style: italic;
  color: var(--color-text-primary);
  text-transform: lowercase;
}

.icon-star-small {
  animation: starRotate 12s linear infinite;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0; padding: 0; list-style: none;
}

.nav-link {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-text-tertiary);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--duration-fast) var(--ease-lux);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; width: 0; height: 1px;
  background-color: var(--color-brand-primary);
  transition: width var(--duration-mid) var(--ease-lux);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-text-primary);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  z-index: calc(var(--z-index-nav) + 2);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border: 1px solid var(--color-brand-alpha-40);
  border-radius: 100px;
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-brand-primary);
  background-color: var(--color-brand-alpha-10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all var(--duration-mid) var(--ease-lux);
  text-decoration: none;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
  box-shadow: 0 0 20px var(--color-brand-alpha-40);
  transform: translateY(-2px);
}

/* Mobile Hamburger Menu */
.nav-hamburger {
  display: none; /* Hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: calc(var(--z-index-nav) + 2);
}

.hamburger-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-brand-primary);
  border-radius: 2px;
  transition: transform var(--duration-mid) var(--ease-lux), opacity var(--duration-mid) var(--ease-lux);
  transform-origin: left center;
}

/* Hamburger Open States */
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg);
}

/* ==========================================================================
   08. HERO ENGINE & WEBGL CANVAS
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--spacing-32); /* Account for fixed nav */
}

/* WebGL Container */
.hero-canvas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(2,4,10,0.85) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-silhouette {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 35vh;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, rgba(2,4,10,1) 0%, rgba(2,4,10,0.8) 20%, transparent 100%),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,160 Q50,130 80,150 Q120,80 150,120 Q180,60 200,100 Q240,40 260,90 Q290,50 310,80 Q340,20 360,70 L380,60 Q400,30 420,65 Q450,10 480,50 Q510,20 540,60 Q570,15 600,55 Q630,25 660,65 Q690,30 720,70 Q750,40 780,75 Q810,50 840,85 Q870,60 900,90 Q930,70 960,100 Q990,80 1020,110 Q1060,90 1090,120 Q1120,105 1150,130 Q1170,140 1200,160 L1200,200 Z' fill='rgba(2,4,10,0.7)'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
}

.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1000px;
  padding: 0 var(--container-padding-x);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Side Hover Box (Eyebrow) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: 0.75rem 2rem;
  border-radius: 100px;
  border: 1px solid var(--color-brand-alpha-40);
  background-color: var(--color-brand-alpha-10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: var(--spacing-8);
  transition: all var(--duration-mid) var(--ease-lux);
}

.hero-badge:hover {
  background-color: var(--color-brand-alpha-20);
  border-color: var(--color-brand-primary);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 10px var(--color-brand-alpha-20);
}

.badge-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-status-success);
  box-shadow: 0 0 12px var(--color-status-success);
  animation: badgePulse 2s infinite var(--ease-in-out);
}

.badge-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

.hero-title {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-8);
  text-shadow: 0 20px 60px rgba(0,0,0,0.9);
}

.title-main {
  font-family: var(--font-family-display);
  font-size: var(--font-size-hero);
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-text-primary);
}

.title-sub {
  font-family: var(--font-family-heading);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 300;
  font-style: italic;
  margin-top: 0.2em;
}

.hero-subtitle {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-12);
  text-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: var(--spacing-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  opacity: 0.7;
  transition: opacity var(--duration-fast);
}
.hero-scroll-indicator:hover { opacity: 1; }

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 1px solid var(--color-brand-alpha-40);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-wheel {
  width: 2px;
  height: 8px;
  background-color: var(--color-brand-primary);
  border-radius: 2px;
  animation: wheelScroll 2s infinite var(--ease-lux);
}

.hero-scroll-indicator span {
  font-family: var(--font-family-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

@keyframes wheelScroll {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}


/* ==========================================================================
   09. EDITORIAL LAYOUTS (Why Us, Mission, Vision)
   ========================================================================== */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(4rem, 8vw, 8rem);
  align-items: start;
}

.sticky-col {
  position: sticky;
  top: 150px;
  /* Hardware acceleration for smooth sticky scroll */
  transform: translateZ(0);
  will-change: transform;
}

.sticky-desc {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-6);
  border-left: 2px solid var(--color-brand-primary);
  padding-left: var(--spacing-6);
}

/* Feature List Asymmetric Styling */
.feature-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-brand-alpha-20);
}

.feature-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-8);
  padding: var(--spacing-12) 0;
  border-bottom: 1px solid var(--color-brand-alpha-20);
  transition: all var(--duration-mid) var(--ease-lux);
  position: relative;
  overflow: hidden;
}

/* Hover background logic */
.feature-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--color-brand-alpha-10), transparent);
  transform: translateX(-100%);
  transition: transform var(--duration-mid) var(--ease-lux);
  z-index: 0;
}

.feature-item:hover {
  padding-left: var(--spacing-6);
  border-bottom-color: var(--color-brand-primary);
}

.feature-item:hover::before {
  transform: translateX(0);
}

.feature-icon-wrap {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-alpha-40);
  background-color: rgba(2, 4, 10, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-mid) var(--ease-lux);
}

.feature-item:hover .feature-icon-wrap {
  background-color: var(--color-brand-primary);
  color: var(--color-bg-base);
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 0 30px var(--color-brand-alpha-40);
}

.feature-item:hover .feature-icon-wrap svg {
  color: var(--color-bg-base);
}

.feature-content {
  position: relative;
  z-index: 1;
}

.feature-content h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: 400;
  margin-bottom: var(--spacing-4);
  line-height: 1.2;
}

.feature-content p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: 300;
  line-height: 1.8;
  margin: 0;
}

/* ==========================================================================
   10. ABOUT US: MISSION & VISION
   ========================================================================== */
.about-premium {
  /* Using pseudo-elements for background overlay to preserve GPU layers */
  position: relative;
}
.about-premium::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.05), transparent 70%);
  z-index: 0; pointer-events: none;
}

.about-intro {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-32);
  text-align: center;
  position: relative;
  z-index: 1;
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(4rem, 8vw, 8rem);
  position: relative;
  z-index: 1;
}

.mission-vision-grid::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--color-brand-alpha-40), transparent);
  transform: translateX(-50%);
}

.mv-block {
  position: relative;
  padding: var(--spacing-8);
}

.mv-watermark {
  position: absolute;
  top: -4rem; left: -2rem;
  font-family: var(--font-family-display);
  font-size: clamp(8rem, 15vw, 16rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.02);
  z-index: -1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.mv-block h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: 400;
  margin-bottom: var(--spacing-6);
  display: inline-block;
  position: relative;
}

.mv-block p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: 300;
  line-height: 1.9;
  margin-bottom: var(--spacing-4);
}

.values-grid {
  position: relative; z-index: 1;
}
.value-item {
  background: rgba(255,255,255,0.01);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--duration-mid) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux), background var(--duration-mid) var(--ease-lux);
}
.value-item:hover {
  transform: translateY(-10px);
  background: rgba(201, 168, 76, 0.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: var(--color-brand-secondary) !important;
}

/* ==========================================================================
   11. INTERACTIVE TABS SYSTEM (Categories, Eval, Elig)
   ========================================================================== */
.premium-tabs-section {
  background-color: var(--color-bg-base);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.tab-system {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.tab-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: var(--spacing-16);
}

.tab-btn {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 0 var(--spacing-4) var(--spacing-6);
  position: relative;
  transition: color var(--duration-fast) var(--ease-lux);
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  width: 0%; height: 2px;
  background-color: var(--color-brand-primary);
  transform: translateX(-50%);
  transition: width var(--duration-mid) var(--ease-lux);
}

.tab-btn[aria-selected="true"] {
  color: var(--color-brand-primary);
}

.tab-btn[aria-selected="true"]::after {
  width: 100%;
}

.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(30px);
  /* Animation handles the entry gracefully */
}

.tab-panel.active {
  display: block;
  animation: panelEntry 0.8s var(--ease-lux) forwards;
}

@keyframes panelEntry {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Category Grid Layout */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-6);
}

.cat-item {
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all var(--duration-mid) var(--ease-lux);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.cat-item:hover {
  background-color: rgba(201, 168, 76, 0.03);
  border-color: var(--color-brand-alpha-40);
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.cat-icon {
  opacity: 0.6;
  transition: opacity var(--duration-fast), transform var(--duration-mid) var(--ease-lux);
}

.cat-item:hover .cat-icon {
  opacity: 1;
  transform: scale(1.15);
}

.cat-item span {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-text-primary);
}

/* ── 12. 3D FLIP CARDS (Who Can Participate) ── */
.who-section {
  position: relative;
}
.who-section::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(201,168,76,0.05), transparent 50%);
  pointer-events: none;
}

.who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  perspective: 1500px;
}

.flip-card {
  height: 350px;
  position: relative;
}

.flip-inner {
  position: relative;
  width: 100%; height: 100%;
  text-align: center;
  transition: transform 0.8s var(--ease-bounce);
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-radius: 12px;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%; height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  border-radius: 12px;
}

.flip-front {
  background-color: var(--color-bg-surface-2);
  border: 1px solid rgba(255,255,255,0.05);
}

.flip-back {
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-brand-primary);
  transform: rotateY(180deg);
  box-shadow: inset 0 0 40px rgba(201,168,76,0.1);
}


/* ── 13. LIVE COMPETITIONS CARDS ── */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-8);
}

.comp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-mid) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux);
  border-radius: 12px;
  overflow: hidden;
}

.comp-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 0 1px var(--color-brand-alpha-40);
}

.comp-badge {
  display: inline-flex; align-items: center;
  padding: 0.4rem 1rem; border-radius: 100px;
  background: rgba(2,4,10,0.8);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  width: fit-content;
}

/* ── 14. TESTIMONIALS ── */
.testimonial-card {
  position: relative;
  border-radius: 12px;
  transition: transform var(--duration-mid) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux);
}
.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: var(--color-brand-secondary) !important;
}

/* ── 15. SCROLL REVEAL ENGINE ── */
/* We use data-delay attributes parsed by JS, but standard stagger classes
   are included here for hardware-accelerated fallbacks.
*/
.reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1.2s var(--ease-lux), transform 1.2s var(--ease-lux), visibility 1.2s;
  will-change: opacity, transform;
}

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

.reveal-left { transform: translateX(-60px); }
.reveal-left.visible { transform: translateX(0); }

.reveal-right { transform: translateX(60px); }
.reveal-right.visible { transform: translateX(0); }

/* Standard Staggers */
.delay-1 { transition-delay: 150ms; }
.delay-2 { transition-delay: 300ms; }
.delay-3 { transition-delay: 450ms; }
.delay-4 { transition-delay: 600ms; }

/* ── 16. PRICING & DATA TABLES ── */
.pricing-card {
  position: relative;
  border-radius: 12px;
  transition: transform var(--duration-mid) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux);
  background-color: var(--color-bg-surface-2);
}
.pricing-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-brand-primary) !important;
}
.pricing-card ul li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 17. FOOTER ── */
footer {
  position: relative;
  z-index: 10;
}
footer input, footer textarea {
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
footer input:focus, footer textarea:focus {
  border-bottom-color: var(--color-brand-primary) !important;
  box-shadow: 0 10px 10px -10px var(--color-brand-alpha-20);
}

/* ==========================================================================
   18. EXTENSIVE MEDIA QUERIES & RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* ── Ultrawide Monitors (4K) ── */
@media (min-width: 2000px) {
  :scope {
    --container-max-width: 1800px;
  }
  .split-layout { gap: 12rem; }
  .feature-item { padding: 4rem 0; }
  .mission-vision-grid { gap: 12rem; }
}

/* ── Desktop Scale Down ── */
@media (max-width: 1400px) {
  .who-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* ── Tablet / Small Desktop ── */
@media (max-width: 1024px) {
  :scope {
    --section-padding-y: clamp(4rem, 6vw, 8rem);
  }
  
  .split-layout, .mission-vision-grid, .eval-grid, .elig-grid { 
    grid-template-columns: 1fr; 
    gap: 4rem; 
  }
  
  .sticky-col { 
    position: relative; 
    top: 0; 
    margin-bottom: 2rem;
  }
  
  .mission-vision-grid::after { display: none; }
  
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile Landscape / Tablet Portrait ── */
@media (max-width: 768px) {
  .navbar { padding: 1.5rem 2rem; }
  .navbar.scrolled { padding: 1rem 2rem; }
  
  /* Mobile Drawer Navigation */
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 100%; height: 100vh;
    background-color: var(--color-bg-overlay-heavy);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.6s var(--ease-lux);
    z-index: calc(var(--z-index-nav) + 1);
  }
  .nav-links.open { right: 0; }
  .nav-link { font-size: 1.5rem; letter-spacing: 0.3em; margin: 1rem 0; }
  
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  
  /* Hero Adjustments */
  .hero { height: auto; min-height: 100vh; padding-top: 7rem; padding-bottom: 2.5rem; }
  .hero-content { padding-top: 0; padding-bottom: 1rem; }
  .hero-cta-group { flex-direction: column; width: 100%; }
  .btn-magnetic-wrap { width: 100%; padding: 0.5rem 0; }
  .btn { width: 100%; }
  /* Decorative scroll hint would overlap the stacked CTA buttons on small screens */
  .hero-scroll-indicator { display: none; }
  
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .comp-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  
  .prizes-display { flex-direction: column; align-items: center; }
  .prize-item { width: 100%; max-width: 100% !important; margin-bottom: 2rem; }
  
  /* Feature List Reset */
  .feature-item {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .feature-icon-wrap { margin: 0 auto; }
}

/* ── Mobile Portrait ── */
@media (max-width: 480px) {
  :scope {
    --container-padding-x: 1.5rem;
  }
  
  .cat-grid { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr !important; }
  
  .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .title-sub { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  
  .tab-nav { flex-direction: column; gap: 1rem; align-items: center; }
  .tab-btn { width: 100%; text-align: center; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .tab-btn::after { display: none; }
  .tab-btn[aria-selected="true"] { background: rgba(201,168,76,0.1); }
  
  .footer-bottom { flex-direction: column; text-align: center; gap: 1.5rem; }
}

/* ── Small Mobile ── */
@media (max-width: 350px) {
  .btn { font-size: 0.7rem; padding: 1rem 1.5rem; }
  .hero-badge { padding: 0.5rem 1rem; }
}

/* ==========================================================================
   19. ACCESSIBILITY OVERRIDES (Reduced Motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal {
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  
  .hero-canvas {
    display: none; /* Turn off WebGL canvas for reduced motion */
  }
  
  .hero {
    background-color: var(--color-bg-base);
  }
}/* 🚨 DROP THIS AT THE VERY BOTTOM OF STYLE.CSS TO FORCE THE TEXT TO SHRINK 🚨 */

:scope {
  /* Drastically reducing the global fluid typography scale */
  --font-size-xs: 0.75rem !important;
  --font-size-sm: 0.875rem !important;
  --font-size-base: 1rem !important;         /* 16px */
  --font-size-lg: 1.1rem !important;         /* ~18px */
  --font-size-xl: 1.25rem !important;        /* 20px */
  --font-size-2xl: 1.5rem !important;        /* 24px */
  --font-size-3xl: 2rem !important;          /* 32px (Section Titles) */
  --font-size-4xl: 2.5rem !important;        /* 40px */
  --font-size-hero: clamp(2.5rem, 5vw, 3.5rem) !important; /* Max 56px instead of 120px! */
  
  /* Shrinking the massive gaps between sections */
  --section-padding-y: 5rem !important; 
}

/* Forcing the specific Hero text down to a normal, elegant size */
.title-sub {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
}

.hero-subtitle {
  font-size: 1.05rem !important;
  max-width: 600px !important;
  margin-bottom: 2rem !important;
}

/* Ensuring standard paragraph text isn't bloated */
p {
  font-size: 0.95rem !important;
}

.section-desc, .sticky-desc {
  font-size: 1rem !important;
}

/* Keeping the watermarked numbers subtle instead of gigantic */
.mv-watermark {
  font-size: 6rem !important;
  top: -1rem !important;
}
/* 🚨 DROP THIS AT THE BOTTOM OF STYLE.CSS TO FIX NAVBAR & CURSOR 🚨 */

/* --- 1. SLEEK NAVBAR OVERRIDES --- */
.navbar {
  padding: 1.2rem 4rem !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
}

.navbar.scrolled {
  padding: 0.8rem 4rem !important; /* Much thinner when scrolling */
  background: rgba(3, 6, 13, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Premium Mobile Menu Slide-in */
@media (max-width: 768px) {
  .navbar { padding: 1rem 1.5rem !important; }
  .navbar.scrolled { padding: 0.8rem 1.5rem !important; }
  
  .nav-links {
    position: fixed !important;
    top: 0 !important; 
    right: -100vw !important; /* Hides off-screen to the right */
    width: 100vw !important; 
    height: 100vh !important;
    background: rgba(3, 6, 13, 0.98) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
    border: none !important;
  }
  
  .nav-links.open {
    right: 0 !important; /* Slides in smoothly */
  }
  
  .nav-link {
    font-size: 1.5rem !important;
    margin: 1rem 0 !important;
  }
}

/* --- 2. BULLETPROOF CURSOR CSS --- */
/* Force the body to hide default cursor ONLY if it's a desktop */
@media (pointer: fine) {
  body, a, button, input, textarea, .hover-target {
    cursor: none !important;
  }
}

.cursor-dot, .cursor-outline {
  position: fixed !important; 
  top: 0 !important; 
  left: 0 !important;
  pointer-events: none !important; 
  z-index: 99999 !important; /* Forces it above EVERYTHING */
  transform: translate(-50%, -50%);
  opacity: 0; /* Hidden until mouse moves */
}

.cursor-dot {
  width: 8px !important; 
  height: 8px !important; 
  border-radius: 50% !important;
  background: var(--gold-bright, #e8c66a) !important;
  box-shadow: 0 0 10px rgba(232, 198, 106, 0.5) !important;
}

.cursor-outline {
  width: 40px !important; 
  height: 40px !important; 
  border-radius: 50% !important;
  border: 1px solid var(--gold-mid, #c9a84c) !important;
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease !important;
}

.cursor-hover-active {
  width: 65px !important; 
  height: 65px !important;
  background-color: rgba(201, 168, 76, 0.1) !important;
  border-color: #e8c66a !important;
}

/* 💎 ULTRA-PREMIUM MINIMALIST OVERRIDE 💎 */
/* For a sleek, editorial, high-end enterprise aesthetic */
:scope {
  /* 1. Drastically reduce the global fluid typography scale */
  --font-size-xs: 0.65rem !important;         /* ~10px */
  --font-size-sm: 0.75rem !important;         /* 12px */
  --font-size-base: 0.875rem !important;      /* 14px (Standard luxury base) */
  --font-size-lg: 1rem !important;            /* 16px */
  --font-size-xl: 1.15rem !important;         /* ~18px */
  --font-size-2xl: 1.35rem !important;        /* ~21px */
  --font-size-3xl: 1.75rem !important;        /* 28px (Section Titles) */
  --font-size-4xl: 2.15rem !important;        /* ~34px */
  
  /* Restrained, elegant Hero text */
  --font-size-hero: clamp(2rem, 4vw, 3rem) !important; 

  /* 2. Tighten up the massive gaps to reduce the "too long" scrolling feeling */
  --section-padding-y: clamp(3rem, 5vw, 6rem) !important;
  --spacing-12: 2rem !important;
  --spacing-16: 3rem !important;
  --spacing-24: 4.5rem !important;
  --spacing-32: 6rem !important;
}

/* 3. Force paragraph text into a refined, readable size */
p {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.6 !important;
}

.section-desc, .sticky-desc {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  max-width: 550px !important; /* Keeps line lengths sophisticated */
}

/* 4. Tame the Hero section specifically */
.title-sub {
  font-size: clamp(1rem, 2vw, 1.5rem) !important;
}

.hero-subtitle {
  font-size: 0.95rem !important;
  max-width: 550px !important;
  margin-bottom: 2rem !important;
}

/* 5. Keep the watermarked numbers subtle so they don't dominate */
.mv-watermark {
  font-size: 4.5rem !important;
  top: -0.5rem !important;
}

@media (max-width: 768px) {
  .nav-link {
    /* Ensure no hardcoded transitions fight the JS */
    transition: none !important; 
  }
  
  /* Adds a beautiful subtle glow to the active mobile menu */
  .nav-links.open {
    box-shadow: inset 0 0 100px rgba(232, 198, 106, 0.05);
  }
}

/* ==========================================================================
   PREMIUM FEATURE CARDS (Grid Layout)
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
}

.feature-card {
  background-color: var(--color-bg-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Luxury Background Glow on Hover */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(232, 198, 106, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-brand-primary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feature-card:hover::before {
  opacity: 1;
}

/* Interactive Icon Styling */
.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem auto;
  /* Default Gold Tint - overwritten inline for variety */
  background: rgba(201, 168, 76, 0.1); 
  color: var(--color-brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.feature-card:hover .feature-icon {
  background: var(--color-brand-primary) !important;
  color: var(--color-bg-base) !important;
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 10px 20px rgba(201, 168, 76, 0.2);
}

.feature-card h3 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.feature-card p {
  font-family: var(--font-family-body);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .feature-card {
    padding: 2.5rem 1.5rem;
  }
}


/* ============================================================
   INDEX NAVIGATION STYLES
============================================================ */
.index-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem clamp(1.5rem, 5vw, 4rem);
  transition: background 0.3s ease, padding 0.3s ease;
}

.index-nav.scrolled {
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-block: 1rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}

/* Logo Alignment & Styles */
.index-nav__logo-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #c9a84c; /* Gold color */
}

/* Brand logo emblem in the nav - a cropped badge of the real logo mark */
.index-nav__logo-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background-color: #fbf9f3;
  background-image: url('logo.jpeg');
  background-repeat: no-repeat;
  background-size: 250%;
  background-position: 50% 26%;
  box-shadow: 0 0 0 1px rgba(232, 198, 106, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform var(--duration-fast) var(--ease-lux);
}
.index-nav__logo-link:hover .index-nav__logo-mark {
  transform: scale(1.06);
}

.index-nav__logo-title {
  font-family: inherit; /* Update to var(--font-display) if you have it */
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Desktop Links */
.index-nav__links {
  display: flex;
  gap: 2.4rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-nav__link {
  font-family: inherit; /* Update to var(--font-ui) if you have it */
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.index-nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: #c9a84c;
  transition: width 0.3s ease;
}

.index-nav__link:hover { color: #c9a84c; }
.index-nav__link:hover::after { width: 100%; }

/* Competitions - PRIMARY call-to-action in the main nav (most prominent) */
.index-nav__link--comp {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.42rem; white-space: nowrap;
  padding: 0.55rem 1.15rem; border-radius: 999px; letter-spacing: 0.08em; font-weight: 700;
  color: #1a1200 !important;
  background: linear-gradient(135deg, #e8c66a, #f5dc93);
  box-shadow: 0 8px 22px rgba(232,198,106,0.42);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.index-nav__link--comp::after { display: none; }
.index-nav__link--comp::before {
  content: ""; position: absolute; inset: -2px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,220,147,0.55), rgba(232,198,106,0));
  filter: blur(6px); z-index: -1; opacity: 0.8;
}
.index-nav__link--comp:hover {
  color: #1a1200 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(232,198,106,0.55);
  filter: brightness(1.05);
}
.index-nav__link--comp[aria-current="page"] {
  box-shadow: 0 0 0 2px rgba(232,198,106,0.6), 0 8px 22px rgba(232,198,106,0.42);
}

/* Study Hub - SECONDARY highlight: gold-outline pill (subordinate to Competitions) */
.index-nav__link--study {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  padding: 0.48rem 0.9rem; border-radius: 999px; letter-spacing: 0.06em; font-weight: 600;
  color: #e8c66a !important;
  background: rgba(232,198,106,0.08);
  border: 1.5px solid rgba(232,198,106,0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.index-nav__link--study::after { display: none; }
.index-nav__link--study:hover {
  color: #1a1200 !important;
  background: linear-gradient(135deg, #e8c66a, #f0d488);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232,198,106,0.32);
}
.index-nav__link--study[aria-current="page"] {
  background: rgba(232,198,106,0.16);
  box-shadow: 0 0 0 1px rgba(232,198,106,0.4);
}
.index-nav__link-ic { flex-shrink: 0; }

/* ---- Homepage: Study Hub promo section ---- */
.sh-promo { position: relative; display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 2.4rem; align-items: center;
  padding: 2.6rem; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, rgba(20,32,58,0.9), rgba(12,18,34,0.94));
  border: 1px solid rgba(232,198,106,0.28); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.sh-promo__glow { position: absolute; top: -40%; right: -10%; width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(232,198,106,0.18), rgba(232,198,106,0) 65%); pointer-events: none; }
.sh-promo__body { position: relative; z-index: 1; }
.sh-promo__title { font-family: var(--font-family-display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.5rem 0 0.8rem; color: #fff; }
.sh-promo__lead { color: var(--color-text-secondary); line-height: 1.65; margin: 0 0 1.3rem; max-width: 46ch; }
.sh-promo__lead strong { color: #f0d488; }
.sh-promo__feats { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.2rem; }
.sh-promo__feats li { display: flex; align-items: center; gap: 0.6rem; color: var(--color-text-primary); font-size: var(--font-size-sm); }
.sh-promo__ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 999px; color: #e8c66a;
  background: rgba(232,198,106,0.12); border: 1px solid rgba(232,198,106,0.35); }
.sh-promo__actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.sh-promo__link { color: #e8c66a; font-weight: 600; font-size: var(--font-size-sm); text-decoration: none; transition: color 0.2s ease; }
.sh-promo__link:hover { color: #f5dc93; }
.sh-promo__cards { position: relative; z-index: 1; display: grid; gap: 0.9rem; }
.sh-promo__card { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.3rem; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(232,198,106,0.22);
  box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
.sh-promo__card b { font-family: var(--font-family-display); font-size: 1.5rem; color: #f0d488; line-height: 1; }
.sh-promo__card span { font-size: 0.78rem; color: var(--color-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.sh-promo__card--2 { transform: translateX(1.6rem); }
.sh-promo__card--3 { transform: translateX(0.7rem); }
@media (max-width: 860px) {
  .sh-promo { grid-template-columns: 1fr; gap: 1.8rem; padding: 2rem 1.6rem; }
  .sh-promo__cards { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
  .sh-promo__card { padding: 0.9rem; }
  .sh-promo__card--2, .sh-promo__card--3 { transform: none; }
}
@media (max-width: 520px) {
  .sh-promo__feats { grid-template-columns: 1fr; }
  .sh-promo__cards { grid-template-columns: 1fr; }
}

/* Mobile Hamburger Base */
.index-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001; /* Keeps it above the mobile menu */
}

.index-nav__hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: #ffffff;
  transition: all 0.3s ease;
}

/* ============================================================
   MOBILE RESPONSIVENESS
============================================================ */
@media screen and (max-width: 768px) {
  .index-nav__hamburger {
    display: flex;
  }

  .index-nav__links {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 14, 26, 0.98); /* Solid dark background */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    
    /* Sliding animation setup */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0.4s;
  }

  .index-nav__links.open {
    transform: translateY(0);
    visibility: visible;
  }

  .index-nav__link {
    font-size: 1.2rem; /* Larger touch targets for mobile */
  }

  /* Hamburger to "X" Animation */
  .index-nav__hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .index-nav__hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .index-nav__hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}


/* ============================================================
   INDEX FOOTER STYLES
============================================================ */
.index-footer {
  background: #07090E; /* Deep theme background */
  border-top: 1px solid rgba(201, 168, 76, 0.15); /* Gold dim border */
  position: relative;
  overflow: hidden;
}

/* Canvas styling so it sits behind the content */
.index-footer__canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.4; /* Slightly dimmed so text remains readable */
  pointer-events: none;
}

.index-footer__container {
  padding-block: 4rem 2rem;
  position: relative;
  z-index: 1; /* Keeps content above the canvas */
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: 2rem;
}

.index-footer__brand {
  text-align: center;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-footer__logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #c9a84c;
  margin-bottom: 0.8rem;
  transition: transform 0.3s ease;
}
.index-footer__logo-link:hover {
  transform: scale(1.02);
}

.index-footer__title {
  font-family: inherit; /* Update to var(--font-display) if applicable */
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #ffffff;
  font-weight: 600;
}
.index-footer__title em {
  font-style: normal;
  color: #c9a84c;
}

.index-footer__sub {
  font-family: inherit;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 450px;
  margin-top: 0.5rem;
}

.index-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.index-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.index-footer__social-link svg {
  flex-shrink: 0;
}
.index-footer__social-link:hover,
.index-footer__social-link:focus-visible {
  transform: translateY(-2px);
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.index-footer__secure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 1.4rem 0 0;
  font-family: inherit;
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: center;
}
.index-footer__secure-by { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7b8494; }
.index-footer__secure img { height: 1.5rem; width: auto; display: block; }
.index-footer__secure-methods { font-size: 0.75rem; }
.index-footer__secure strong { color: #cbd5e1; font-weight: 700; }

.index-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 2.5rem;
  margin-bottom: 3rem;
  list-style: none;
  padding: 0;
}

.index-footer__nav a {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.3s ease;
}
.index-footer__nav a:hover { 
  color: #c9a84c; 
}

.index-footer__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.25), transparent);
  margin-bottom: 2rem;
}

.index-footer__copy {
  text-align: center;
  font-family: inherit;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
}

.index-footer__tagline {
  color: #c9a84c;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}
/* ==========================================================================
   20. HOMEPAGE INCREMENTAL ENHANCEMENTS (Accessibility, Stats, Testimonials,
       FAQ preview, Newsletter) - reuses existing design tokens & brand.
   ========================================================================== */

/* ── Accessibility utilities ── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -120px;
  left: 1rem;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--color-brand-primary);
  color: var(--color-bg-base);
  border-radius: 0 0 8px 8px;
  font-family: var(--font-family-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ── National Impact / Stats band ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-8);
}
.stat-item {
  text-align: center;
  padding: var(--spacing-8) var(--spacing-4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.01);
  transition: transform var(--duration-mid) var(--ease-lux),
              border-color var(--duration-mid) var(--ease-lux),
              box-shadow var(--duration-mid) var(--ease-lux);
}
.stat-item:hover {
  transform: translateY(-6px);
  border-color: var(--color-brand-alpha-40);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.stat-number,
.stat-static {
  font-family: var(--font-family-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
}
.stat-label {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ── Testimonials ── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background-color: var(--color-bg-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.testimonial-stars {
  display: flex;
  gap: 4px;
  color: var(--color-brand-primary);
}
.testimonial-card blockquote {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.testimonial-name { color: var(--color-text-primary); font-weight: 600; }
.testimonial-role { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

/* ── FAQ preview (native details/summary) ── */
.faq-preview-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background-color: var(--color-bg-surface-1);
  padding: 0 var(--spacing-6);
  transition: border-color var(--duration-fast);
}
.faq-item[open] { border-color: var(--color-brand-alpha-40); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-4) 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--color-brand-primary);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item > p {
  padding: 0 0 var(--spacing-4);
  margin: 0;
  color: var(--color-text-tertiary);
}
.faq-inline-link {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-preview-cta { text-align: center; margin-top: var(--spacing-8); }

/* ── Newsletter ── */
.newsletter-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--color-brand-alpha-20);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(232, 198, 106, 0.05), rgba(255, 255, 255, 0.01));
}
.newsletter-form {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.newsletter-input {
  flex: 1 1 220px;
  padding: 0.9rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(2, 4, 10, 0.6);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.newsletter-input::placeholder { color: var(--color-text-quaternary); }
.newsletter-input:focus-visible {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--color-brand-alpha-20);
}
.newsletter-btn { white-space: nowrap; }
.newsletter-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .newsletter-card { grid-template-columns: 1fr; gap: var(--spacing-8); }
}

/* ==========================================================================
   21. EVENT RECAP, GALLERY, LIGHTBOX & VIDEO REVIEWS
       (built on existing tokens; used by index.html and gallery.html)
   ========================================================================== */

/* ── Featured event recap ── */
.recap-card {
  position: relative;
  border: 1px solid var(--color-brand-alpha-20);
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 0%, rgba(232, 198, 106, 0.06), transparent 45%),
    var(--color-bg-surface-1);
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}
.recap-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--color-brand-alpha-20);
  background-color: var(--color-brand-alpha-10);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-6);
}
.recap-flag .badge-dot { position: static; }
.recap-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  color: var(--color-brand-primary);
  line-height: 1.15;
  margin-bottom: var(--spacing-4);
}
.recap-title em { font-family: var(--font-family-heading); font-style: italic; color: var(--color-text-primary); }
.recap-lead { color: var(--color-text-secondary); max-width: 60ch; }
.recap-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
  margin: var(--spacing-12) 0;
  padding: var(--spacing-8) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.recap-stat { text-align: center; }
.recap-stat b {
  display: block;
  font-family: var(--font-family-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  color: var(--color-brand-primary);
  line-height: 1;
}
.recap-stat span {
  display: block;
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.recap-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-8); }
.recap-chip {
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.recap-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }

/* ── Gallery filters ── */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-12);
}
.gallery-filter {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  border: 1px solid var(--color-brand-alpha-20);
  background-color: transparent;
  color: var(--color-text-tertiary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast);
}
.gallery-filter:hover { color: var(--color-brand-primary); border-color: var(--color-brand-alpha-40); }
.gallery-filter.is-active {
  color: var(--color-bg-base);
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

/* ── Masonry gallery ── */
.gallery-masonry { column-count: 3; column-gap: var(--spacing-4); }
.gallery-item { break-inside: avoid; margin-bottom: var(--spacing-4); }
.gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  position: relative;
  transition: transform var(--duration-mid) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux), border-color var(--duration-mid) var(--ease-lux);
}
.gallery-trigger img { display: block; width: 100%; height: auto; }
.gallery-trigger:hover,
.gallery-trigger:focus-visible {
  transform: translateY(-6px);
  border-color: var(--color-brand-alpha-40);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
.gallery-cat {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background-color: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-mid) var(--ease-lux), transform var(--duration-mid) var(--ease-lux);
}
.gallery-trigger:hover .gallery-cat,
.gallery-trigger:focus-visible .gallery-cat { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 560px) { .gallery-masonry { column-count: 1; } }

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background-color: rgba(2, 4, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-mid) var(--ease-out);
}
.lightbox.is-open { opacity: 1; }
.lightbox__stage { max-width: min(1100px, 90vw); max-height: 85vh; display: flex; flex-direction: column; margin: 0; }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 12px;
  border: 1px solid var(--color-brand-alpha-20);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform var(--duration-mid) var(--ease-lux);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption { margin-top: var(--spacing-4); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.lightbox__close {
  position: absolute;
  top: var(--spacing-6); right: var(--spacing-6);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-alpha-20);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.lightbox__nav {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-brand-alpha-20);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--color-brand-primary);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.lightbox__close:hover,
.lightbox__nav:hover { background-color: var(--color-brand-alpha-20); border-color: var(--color-brand-primary); }

/* ── Video reviews ── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
}
.video-card {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-bg-surface-1);
  transition: transform var(--duration-mid) var(--ease-lux), border-color var(--duration-mid) var(--ease-lux), box-shadow var(--duration-mid) var(--ease-lux);
}
.video-card:hover { transform: translateY(-8px); border-color: var(--color-brand-alpha-40); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6); }
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.video-thumb img { width: 100%; height: auto; display: block; }
/* Branded gradient thumbnail - used when a card has no poster image yet.
   Keeps a consistent 16:9 frame with a soft gold glow and the clip's label. */
.video-thumb--ph {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  line-height: normal;
  background:
    radial-gradient(120% 90% at 78% 8%, var(--color-brand-alpha-20), transparent 60%),
    radial-gradient(90% 80% at 10% 100%, rgba(120, 130, 220, 0.14), transparent 62%),
    linear-gradient(155deg, #0a1120, #05080f 70%);
}
.video-thumb--ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 85%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 85%);
  opacity: 0.7;
}
.video-thumb__tag {
  position: relative;
  margin: 0 auto var(--spacing-6);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background-color: rgba(2, 4, 10, 0.5);
  border: 1px solid var(--color-brand-alpha-20);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  background-color: rgba(2, 4, 10, 0.55);
  border: 2px solid var(--color-brand-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-mid) var(--ease-bounce), background-color var(--duration-fast);
}
.video-play::after {
  content: "";
  display: block;
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--color-brand-primary);
}
.video-thumb:hover .video-play,
.video-thumb:focus-visible .video-play { transform: scale(1.12); background-color: rgba(2, 4, 10, 0.75); }
.video-meta { padding: var(--spacing-6); }
.video-name { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); margin-bottom: 0.25rem; }
.video-sub { font-size: var(--font-size-sm); color: var(--color-brand-primary); margin-bottom: var(--spacing-3); letter-spacing: 0.04em; }
.video-desc { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin: 0; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  background-color: rgba(2, 4, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--duration-mid) var(--ease-out);
}
.video-modal.is-open { opacity: 1; }
.video-modal__frame {
  position: relative;
  width: min(960px, 92vw);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-brand-alpha-20);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
  background-color: var(--color-bg-surface-2);
}
.video-modal__slot, .video-modal__slot iframe, .video-modal__slot video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__slot video { background-color: #000; object-fit: contain; }
.video-modal__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-8); gap: var(--spacing-3); }
.video-modal__ph-title { font-family: var(--font-family-display); font-size: var(--font-size-xl); color: var(--color-brand-primary); margin: 0; }
.video-modal__ph-sub { color: var(--color-text-tertiary); margin: 0; }
.video-modal__close {
  position: absolute;
  top: var(--spacing-6); right: var(--spacing-6);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-alpha-20);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: 1.75rem; line-height: 1; cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.video-modal__close:hover { background-color: var(--color-brand-alpha-20); border-color: var(--color-brand-primary); }

@media (max-width: 1024px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .recap-stats { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-8); }
}
@media (max-width: 768px) {
  .video-grid { grid-template-columns: 1fr; }
  .lightbox { padding: var(--spacing-4); gap: var(--spacing-2); }
  .lightbox__close { top: var(--spacing-4); right: var(--spacing-4); }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; }
}

/* Reduced-motion: neutralise transforms for gallery/media */
@media (prefers-reduced-motion: reduce) {
  .gallery-trigger, .video-card, .lightbox__img, .gallery-cat, .video-play { transition: none !important; transform: none !important; }
}

/* Recap "memorable moments" strip */
.recap-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-bottom: var(--spacing-8); }
.recap-subhead { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); margin-bottom: var(--spacing-6); letter-spacing: 0.02em; }
@media (max-width: 768px) {
  .recap-stats { grid-template-columns: repeat(2, 1fr); }
  .recap-moments { grid-template-columns: 1fr; }
}

/* ── Breadcrumb, load-more, cross-links (gallery & future pages) ── */
.breadcrumb { margin-bottom: var(--spacing-8); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--font-size-sm); margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-tertiary); }
.breadcrumb li + li::before { content: '/'; color: var(--color-text-quaternary); }
.breadcrumb a { color: var(--color-text-tertiary); transition: color var(--duration-fast); }
.breadcrumb a:hover { color: var(--color-brand-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-brand-primary); }

.gallery-loadmore-wrap { text-align: center; margin-top: var(--spacing-12); }

.gallery-cross-links {
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-12);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.gallery-cross-links > p {
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-6);
}
.gallery-cross-links__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-4) var(--spacing-8); }
.gallery-cross-links__row a {
  color: var(--color-text-secondary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  transition: color var(--duration-fast);
}
.gallery-cross-links__row a:hover { color: var(--color-brand-primary); }

/* ==========================================================================
   22. COMPETITION (COMING SOON) & SUCCESS (CONFIRMATION) PAGES
       Rebranded to the gold/navy system - all values from design tokens.
   ========================================================================== */

/* ── Competition hero ── */
.comp-hero {
  position: relative;
  padding-top: clamp(9rem, 14vw, 12rem);
  padding-bottom: var(--section-padding-y);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 8%, rgba(232, 198, 106, 0.08), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(201, 168, 76, 0.06), transparent 45%),
    var(--color-bg-base);
}
.comp-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.comp-orb--1 { width: 320px; height: 320px; top: -60px; left: -80px; background: radial-gradient(circle, rgba(232, 198, 106, 0.22), transparent 70%); }
.comp-orb--2 { width: 360px; height: 360px; bottom: -100px; right: -90px; background: radial-gradient(circle, rgba(201, 168, 76, 0.16), transparent 70%); }
.comp-hero .container { position: relative; z-index: 1; }
.comp-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.comp-hero__title { font-family: var(--font-family-display); font-size: var(--font-size-3xl); line-height: 1.08; color: var(--color-text-primary); margin-bottom: var(--spacing-6); }
.comp-hero__title em { font-family: var(--font-family-heading); font-style: italic; color: var(--color-brand-primary); }

/* ── Mini stat tiles ── */
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-top: var(--spacing-8); }
.mini-stat { padding: var(--spacing-6) var(--spacing-4); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; background-color: rgba(255, 255, 255, 0.01); text-align: center; }
.mini-stat b { display: block; font-family: var(--font-family-display); font-size: var(--font-size-xl); color: var(--color-brand-primary); line-height: 1; }
.mini-stat span { display: block; margin-top: 0.45rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); }

/* ── Countdown card ── */
.countdown-card {
  border: 1px solid var(--color-brand-alpha-20);
  border-radius: 20px;
  background:
    radial-gradient(circle at 80% 0%, rgba(232, 198, 106, 0.06), transparent 45%),
    var(--color-bg-surface-1);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.countdown-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.countdown-card__head h2 { font-family: var(--font-family-heading); font-size: var(--font-size-xl); color: var(--color-text-primary); margin: 0; }
.countdown-card__head p { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-tertiary); margin: 0 0 0.25rem; }
.countdown-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.85rem; border-radius: 100px;
  border: 1px solid var(--color-brand-alpha-20);
  background-color: var(--color-brand-alpha-10);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-3); }
.countdown-cell { text-align: center; padding: var(--spacing-4) var(--spacing-2); border-radius: 12px; background-color: rgba(2, 4, 10, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); }
.countdown-num { font-family: var(--font-family-display); font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-brand-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-label { margin-top: 0.45rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); }
.countdown-note { margin-top: var(--spacing-6); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

@media (max-width: 900px) { .comp-hero__grid { grid-template-columns: 1fr; gap: var(--spacing-12); } }
@media (max-width: 480px) { .countdown-grid { grid-template-columns: repeat(2, 1fr); } .mini-stats { grid-template-columns: 1fr; } }

/* ── Success / confirmation page ── */
.confirm-page {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8rem, 13vw, 11rem) var(--container-padding-x) var(--section-padding-y);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 198, 106, 0.07), transparent 55%),
    var(--color-bg-base);
}
.confirm-card {
  width: 100%; max-width: 580px;
  border: 1px solid var(--color-brand-alpha-20);
  border-radius: 20px;
  background-color: var(--color-bg-surface-1);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.confirm-badge {
  width: 84px; height: 84px; margin: 0 auto var(--spacing-6);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--color-brand-primary);
  border: 2px solid var(--color-brand-alpha-40);
  background-color: var(--color-brand-alpha-10);
  animation: confirmPulse 2.4s infinite;
}
@keyframes confirmPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 198, 106, 0.35); }
  70% { box-shadow: 0 0 0 18px rgba(232, 198, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 198, 106, 0); }
}
.confirm-summary { text-align: left; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; padding: var(--spacing-6); margin: var(--spacing-8) 0; background-color: rgba(255, 255, 255, 0.01); }
.confirm-summary h2 { font-size: var(--font-size-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-tertiary); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: var(--spacing-3); margin-bottom: var(--spacing-4); }
.confirm-row { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-3); }
.confirm-row:last-child { margin-bottom: 0; }
.confirm-row > span:first-child { color: var(--color-text-tertiary); }
.confirm-amount { font-family: var(--font-family-display); font-size: var(--font-size-lg); color: var(--color-text-primary); }
.confirm-id { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-brand-primary); background-color: var(--color-brand-alpha-10); border: 1px solid var(--color-brand-alpha-20); padding: 0.2rem 0.6rem; border-radius: 6px; }
.confirm-note { display: flex; gap: var(--spacing-3); align-items: flex-start; text-align: left; border: 1px solid var(--color-brand-alpha-20); border-radius: 12px; padding: var(--spacing-4); background-color: var(--color-brand-alpha-10); color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-8); }

/* ==========================================================================
   23. REVIEWS & TESTIMONIALS PAGE
       Reuses .testimonial-card, .testimonial-stars, .stat-item, .video-grid.
   ========================================================================== */
.review-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-4); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-8); }
.review-card__head { display: flex; align-items: center; gap: var(--spacing-4); }
.review-avatar {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg); font-weight: 600;
  color: var(--color-brand-primary);
  background-color: var(--color-brand-alpha-10);
  border: 1px solid var(--color-brand-alpha-20);
}
.review-card__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  margin-top: auto; padding-top: var(--spacing-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}
.review-card__meta b { color: var(--color-brand-primary); font-weight: 600; }
@media (max-width: 1024px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   24. TIMELINE, CASE STUDIES & PROCESS STEPS
       (Student Success Stories + About pages) - built from design tokens.
   ========================================================================== */

/* ── Vertical timeline (journey / milestones / roadmap) ── */
.timeline { position: relative; max-width: 880px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--color-brand-primary), var(--color-brand-alpha-20), transparent);
}
.timeline-item { position: relative; padding-left: 60px; padding-bottom: var(--spacing-12); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 11px; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background-color: var(--color-bg-base);
  border: 2px solid var(--color-brand-primary);
  box-shadow: 0 0 0 4px var(--color-brand-alpha-10);
}
.timeline-year { font-family: var(--font-family-display); color: var(--color-brand-primary); font-size: var(--font-size-lg); line-height: 1.1; margin-bottom: 0.25rem; }
.timeline-title { font-family: var(--font-family-heading); color: var(--color-text-primary); font-size: var(--font-size-lg); margin-bottom: 0.4rem; }
.timeline-item p { color: var(--color-text-tertiary); margin: 0; }

/* Compact timeline used inside case-study cards */
.timeline--compact .timeline-item { padding-bottom: var(--spacing-6); padding-left: 44px; }
.timeline--compact::before { left: 11px; }
.timeline--compact .timeline-dot { left: 3px; width: 14px; height: 14px; top: 5px; }
.timeline--compact .timeline-title { font-size: var(--font-size-base); margin-bottom: 0.15rem; }

/* ── Case-study layout (Success Stories) ── */
.case-study { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.case-study + .case-study { margin-top: var(--section-padding-y); }
.case-study__media { position: relative; }
.case-study__media img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--color-brand-alpha-20); }
.case-study__ribbon {
  position: absolute; top: 14px; left: 14px;
  padding: 0.35rem 0.9rem; border-radius: 100px;
  background-color: rgba(2, 4, 10, 0.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--color-brand-primary); font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase;
}
.case-study__eyebrow { display: block; color: var(--color-brand-primary); font-size: var(--font-size-xs); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: var(--spacing-3); }
.case-study__title { font-family: var(--font-family-display); font-size: var(--font-size-2xl); color: var(--color-text-primary); line-height: 1.15; margin-bottom: var(--spacing-4); }
.case-study__title em { font-family: var(--font-family-heading); font-style: italic; color: var(--color-brand-primary); }
.case-study__badges { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin: var(--spacing-6) 0; }
.case-study__badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: 100px; border: 1px solid var(--color-brand-alpha-20); background-color: var(--color-brand-alpha-10); color: var(--color-brand-primary); font-size: var(--font-size-xs); }
.case-study--reverse .case-study__media { order: 2; }

@media (max-width: 900px) {
  .case-study { grid-template-columns: 1fr; gap: var(--spacing-8); }
  .case-study--reverse .case-study__media { order: 0; }
}

/* ── Numbered process steps (judging methodology / how it works) ── */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--spacing-8); counter-reset: step; }
.process-step { position: relative; padding: var(--spacing-8) var(--spacing-6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; background-color: var(--color-bg-surface-1); transition: transform var(--duration-mid) var(--ease-lux), border-color var(--duration-mid) var(--ease-lux); }
.process-step:hover { transform: translateY(-6px); border-color: var(--color-brand-alpha-40); }
.process-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-family-display); font-size: var(--font-size-2xl); color: var(--color-brand-primary); line-height: 1; margin-bottom: var(--spacing-4); opacity: 0.85; }
.process-step h3 { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); margin-bottom: var(--spacing-3); }
.process-step p { color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0; }

/* ==========================================================================
   25. STANDARDISED FOOTER (multi-column), FORMS & CHECK-LISTS
       Rolled out across every style.css page for one consistent system.
   ========================================================================== */

/* ── Multi-column footer (extends .index-footer) ── */
.index-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-8);
  max-width: 900px;
  margin: 0 auto var(--spacing-12);
  text-align: left;
}
.index-footer__col h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: var(--spacing-4);
}
.index-footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.index-footer__col a { font-size: var(--font-size-sm); color: #94a3b8; transition: color var(--duration-fast); }
.index-footer__col a:hover { color: var(--color-brand-primary); }
.index-footer__col a[aria-current="page"] { color: var(--color-brand-primary); }
@media (max-width: 768px) { .index-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-8) var(--spacing-6); } }
@media (max-width: 420px) { .index-footer__cols { grid-template-columns: 1fr; } }

/* ── Standardised form component ── */
.ith-form { max-width: 720px; margin: 0 auto; }
.ith-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; }
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(2, 4, 10, 0.6);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-quaternary); }
.form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--color-brand-alpha-20);
}
.form-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.form-actions { margin-top: var(--spacing-6); text-align: center; }
.form-honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .ith-form__grid { grid-template-columns: 1fr; } }

/* ── Check / benefit lists ── */
.check-list { display: grid; gap: var(--spacing-3); max-width: 640px; }
.check-list li { display: flex; gap: var(--spacing-3); align-items: flex-start; color: var(--color-text-secondary); }
.check-list svg { flex-shrink: 0; color: var(--color-brand-primary); margin-top: 3px; }
.check-list--center { margin-left: auto; margin-right: auto; }

/* Info note / disclaimer block */
.info-note {
  display: flex; gap: var(--spacing-4); align-items: flex-start;
  max-width: 760px; margin: 0 auto;
  padding: var(--spacing-6);
  border: 1px solid var(--color-brand-alpha-20);
  border-radius: 14px;
  background-color: var(--color-brand-alpha-10);
  color: var(--color-text-secondary);
}
.info-note svg { flex-shrink: 0; color: var(--color-brand-primary); margin-top: 2px; }
.info-note p { margin: 0; }

/* ==========================================================================
   26. POLISH PASS - mobile grid fixes, premium section depth, typography
       (appended last so responsive rules win over earlier base grids)
   ========================================================================== */

/* ── CRITICAL mobile fixes: stats & testimonials were stuck at desktop cols ── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .recap-stats { grid-template-columns: 1fr; }
}

/* Guarantee big numbers never crop: allow wrapping, keep them fluid */
.stat-number, .stat-static, .recap-stat b, .mini-stat b, .countdown-num {
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

/* ── Premium section depth (kills the "flat black blocks" feel) ── */
.section-dark { background-image: radial-gradient(130% 90% at 50% -20%, rgba(232, 198, 106, 0.045), transparent 55%); }
.section-darker { background-image: radial-gradient(120% 90% at 50% 120%, rgba(232, 198, 106, 0.04), transparent 55%); }
/* Subtle gold hairline between stacked sections for layered rhythm */
.section + .section { border-top: 1px solid rgba(232, 198, 106, 0.06); }

/* Refined glass/lift on cards for a richer, more luxurious surface */
.feature-card, .testimonial-card, .stat-item, .cat-item, .recap-card,
.video-card, .process-step, .countdown-card, .confirm-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.stat-item, .cat-item {
  background-color: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Typography refinements (tighter display type, better rhythm) ── */
.section-title, .comp-hero__title, .case-study__title, .recap-title {
  letter-spacing: -0.01em;
}
.section-title { line-height: 1.12; }
.hero-title, .comp-hero__title { text-wrap: balance; }
.section-desc { text-wrap: pretty; }
.section-tag { font-weight: 600; }
.timeline-title, .feature-card h3, .video-name, .process-step h3 { letter-spacing: 0.01em; }

/* Comfortable touch targets & spacing on small screens */
@media (max-width: 480px) {
  .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .index-nav__link { padding: 0.35rem 0; }
  .section-header { margin-bottom: var(--spacing-12); }
}

/* Small-screen safety: let confirmation rows wrap instead of overflowing */
@media (max-width: 380px) {
  .confirm-row { flex-wrap: wrap; }
  .confirm-row > span { min-width: 0; }
}

/* ==========================================================================
   27. FOOTER LEGAL ROW + LONG-FORM (POLICY) PROSE
   ========================================================================== */
.index-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: var(--spacing-6);
}
.index-footer__legal a {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--duration-fast);
}
.index-footer__legal a:hover,
.index-footer__legal a[aria-current="page"] { color: var(--color-brand-primary); }

/* Long-form policy / prose content */
.legal { max-width: 820px; margin: 0 auto; }
.legal__updated { color: var(--color-text-quaternary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-8); }
.legal h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  color: var(--color-brand-primary);
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-4);
  letter-spacing: -0.01em;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-3);
}
.legal p { color: var(--color-text-tertiary); margin-bottom: var(--spacing-4); }
.legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: var(--spacing-4); color: var(--color-text-tertiary); }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--color-brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--color-text-secondary); }

/* HTML sitemap page */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-8); }
.sitemap-col h2 { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-brand-primary); margin-bottom: var(--spacing-4); }
.sitemap-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.sitemap-col a { color: var(--color-text-secondary); transition: color var(--duration-fast); }
.sitemap-col a:hover { color: var(--color-brand-primary); }

/* ==========================================================================
   28. UNIVERSAL MOBILE NAV - robust scroll lock (position-fixed technique)
   ========================================================================== */
body.nav-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* Ensure the mobile drawer always sits above page content and the hamburger
   above the drawer so it can toggle it closed (no z-index conflicts). */
@media (max-width: 768px) {
  .index-nav { z-index: var(--z-index-nav); }
  .index-nav__links { z-index: calc(var(--z-index-nav) - 1); }
  .index-nav__hamburger { z-index: calc(var(--z-index-nav) + 1); }
}

/* ── FAQ page: search + filter controls ── */
.faq-controls { max-width: 860px; margin: 0 auto var(--spacing-8); }
.faq-search { margin-bottom: var(--spacing-6); }
.faq-search::-webkit-search-cancel-button { filter: invert(0.6); }

/* ==========================================================================
   29. THEME REVEAL PAGE - Academic Kickoff Fest (writingcompetitionthemereveal)
   ========================================================================== */
.reveal-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .reveal-grid { grid-template-columns: 1fr; gap: var(--spacing-10); } }

/* Key-timing rows shown alongside the countdown */
.timing-list { display: grid; gap: var(--spacing-4); }
.timing-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px;
  background-color: var(--color-bg-surface-1);
}
.timing-row dt { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-tertiary); margin: 0; }
.timing-row dd { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-base); color: var(--color-brand-primary); text-align: right; }

/* Security-lock note under the countdown */
.reveal-lock {
  margin-top: var(--spacing-6); display: flex; gap: var(--spacing-4); align-items: flex-start;
  padding: var(--spacing-5); border: 1px solid var(--color-brand-alpha-20); border-radius: 14px;
  background-color: var(--color-brand-alpha-05, rgba(232,198,106,0.04));
}
.reveal-lock svg { flex-shrink: 0; color: var(--color-brand-primary); margin-top: 2px; }
.reveal-lock h3 { font-family: var(--font-family-heading); font-size: var(--font-size-base); color: var(--color-text-primary); margin: 0 0 0.25rem; }
.reveal-lock p { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

/* Theme cards */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
@media (max-width: 900px) { .theme-grid { grid-template-columns: 1fr; } }
.theme-card {
  border: 1px solid var(--color-brand-alpha-20); border-radius: 18px;
  background:
    radial-gradient(circle at 80% 0%, rgba(232, 198, 106, 0.06), transparent 45%),
    var(--color-bg-surface-1);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  transition: transform var(--duration-base), border-color var(--duration-base);
}
.theme-card:hover { transform: translateY(-6px); border-color: var(--color-brand-alpha-40); }
.theme-card__head { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.theme-card__icon {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-brand-alpha-10); color: var(--color-brand-primary);
}
.theme-card__head h3 { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-brand-primary); margin: 0; }
.theme-card__head span { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-tertiary); }
.theme-prompt {
  font-family: var(--font-family-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.35; color: var(--color-text-primary);
  transition: filter var(--duration-slow);
}
.theme-prompt.theme-blur { filter: blur(8px); user-select: none; }

/* ==========================================================================
   30. CERTIFICATE VERIFICATION MODULE (verifycertificate.html)
   Self-contained verification card, captcha, results grid, recognised-comp
   chips and support FAQ. Preserves the JS contract in script_verification.js.
   ========================================================================== */
        /* --- VERIFICATION MODULE UI --- */
        .page_container_verification_fest_2026 {
            width: 100%; max-width: 800px; margin: 140px auto 80px auto; padding: 0 20px;
            animation: slideUpFade_verification_fest_2026 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .card_verification_fest_2026 {
            background: #ffffff; border-radius: 28px; padding: 48px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); border: 1px solid #e2e8f0;
            position: relative; overflow: hidden; margin-bottom: 30px;
        }

        .card_verification_fest_2026::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
            background: linear-gradient(90deg, #4f46e5, #ec4899);
        }

        .header_verification_fest_2026 { text-align: center; margin-bottom: 40px; }
        
        .shield_wrapper_verification_fest_2026 {
            width: 80px; height: 80px; margin: 0 auto 20px auto; background: #e0e7ff; border-radius: 24px;
            display: flex; align-items: center; justify-content: center; color: #4f46e5;
            animation: float_verification_fest_2026 4s ease-in-out infinite;
        }

        .title_verification_fest_2026 { font-size: 36px; font-weight: 900; color: #0f172a; margin-bottom: 12px; letter-spacing: -0.03em; }
        .subtitle_verification_fest_2026 { font-size: 16px; color: #64748b; font-weight: 500; line-height: 1.6; max-width: 500px; margin: 0 auto; }

        /* Search Input */
        .search_container_verification_fest_2026 { margin-bottom: 24px; position: relative; }
        .search_label_verification_fest_2026 { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
        .helper_link_verification_fest_2026 { color: #4f46e5; text-transform: none; letter-spacing: normal; cursor: pointer; text-decoration: underline; font-size: 12px; }
        .search_input_verification_fest_2026 { width: 100%; padding: 20px 24px; font-family: var(--font-family-num), monospace; font-size: 18px; font-weight: 800; color: #0f172a; background: #f8fafc; border: 2px solid #cbd5e1; border-radius: 16px; text-transform: uppercase; letter-spacing: 2px; outline: none; transition: all 0.3s ease; }
        .search_input_verification_fest_2026:focus { border-color: #4f46e5; background: #ffffff; box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.15); }

        /* Helper Box (Hidden by default) */
        .helper_box_verification_fest_2026 { background: #f8fafc; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; margin-bottom: 24px; font-size: 13px; color: #475569; display: none; }
        .helper_box_verification_fest_2026.show_verification_fest_2026 { display: block; animation: fadeInDown_verification_fest_2026 0.3s ease; }

        /* Captcha Box */
        .captcha_box_verification_fest_2026 { display: flex; align-items: center; justify-content: space-between; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 16px 24px; border-radius: 16px; margin-bottom: 24px; transition: all 0.3s ease; }
        .captcha_box_verification_fest_2026:focus-within { border-color: #4f46e5; background: #ffffff; }
        .captcha_text_verification_fest_2026 { font-size: 14px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 8px; }
        .captcha_input_verification_fest_2026 { width: 80px; padding: 12px; font-size: 16px; font-weight: 800; text-align: center; border: 2px solid #cbd5e1; border-radius: 10px; outline: none; transition: border-color 0.3s ease; }
        .captcha_input_verification_fest_2026:focus { border-color: #4f46e5; }

        /* Button */
        .verify_btn_verification_fest_2026 { width: 100%; padding: 20px; font-size: 18px; font-weight: 800; color: #ffffff; background: #0f172a; border: none; border-radius: 16px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 12px; }
        .verify_btn_verification_fest_2026:hover { background: #4f46e5; transform: translateY(-3px); box-shadow: 0 15px 25px -5px rgba(79, 70, 229, 0.4); }

        /* Loading Skeleton */
        .skeleton_loader_verification_fest_2026 { display: none; margin-top: 40px; padding-top: 40px; border-top: 2px dashed #e2e8f0; }
        .skeleton_loader_verification_fest_2026.active_verification_fest_2026 { display: block; }
        .skel_line_verification_fest_2026 { height: 20px; background: #e2e8f0; border-radius: 10px; margin-bottom: 16px; animation: pulse_verification_fest_2026 1.5s infinite ease-in-out; }
        .skel_box_verification_fest_2026 { height: 80px; background: #e2e8f0; border-radius: 16px; margin-bottom: 16px; animation: pulse_verification_fest_2026 1.5s infinite ease-in-out; }

        /* Error Banner */
        .error_box_verification_fest_2026 { background: #fef2f2; color: #b91c1c; padding: 16px; border-radius: 12px; font-size: 14px; font-weight: 700; text-align: center; border: 1px solid #fecaca; margin-top: 20px; animation: shake_verification_fest_2026 0.4s ease-in-out; }

        /* Results Panel */
        .results_panel_verification_fest_2026 { margin-top: 40px; padding-top: 40px; border-top: 2px dashed #e2e8f0; }
        
        .badge_verification_fest_2026 { display: inline-flex; align-items: center; gap: 8px; background: #10b981; color: #ffffff; padding: 8px 16px; border-radius: 99px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 30px; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); animation: popIn_verification_fest_2026 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

        .data_grid_verification_fest_2026 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .data_row_verification_fest_2026 { background: #f8fafc; padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; opacity: 0; transform: translateY(20px); animation: staggerFade_verification_fest_2026 0.5s ease forwards; }
        .data_row_full_verification_fest_2026 { grid-column: 1 / -1; }
        
        /* Staggered animations */
        .delay_1_verification_fest_2026 { animation-delay: 0.1s; }
        .delay_2_verification_fest_2026 { animation-delay: 0.2s; }
        .delay_3_verification_fest_2026 { animation-delay: 0.3s; }
        .delay_4_verification_fest_2026 { animation-delay: 0.4s; }

        .label_verification_fest_2026 { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 8px; }
        .value_verification_fest_2026 { font-size: 18px; font-weight: 800; color: #0f172a; }
        .value_id_verification_fest_2026 { font-family: monospace; letter-spacing: 2px; color: #4f46e5; }
        .value_rank_verification_fest_2026 { color: #ec4899; }

        .download_btn_verification_fest_2026 { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 30px; padding: 20px; font-size: 16px; font-weight: 800; color: #4f46e5; background: #e0e7ff; border-radius: 16px; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; }
        .download_btn_verification_fest_2026::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s ease; }
        .download_btn_verification_fest_2026:hover { background: #4f46e5; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3); }
        .download_btn_verification_fest_2026:hover::before { left: 100%; }

        .hidden_verification_fest_2026 { display: none !important; }

        /* FAQ Section */
        .faq_section_verification_fest_2026 { background: #ffffff; border-radius: 24px; padding: 40px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; }
        .faq_title_verification_fest_2026 { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 20px; }
        .faq_item_verification_fest_2026 { margin-bottom: 16px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; }
        .faq_q_verification_fest_2026 { font-size: 15px; font-weight: 700; color: #334155; margin-bottom: 8px; }
        .faq_a_verification_fest_2026 { font-size: 14px; color: #64748b; line-height: 1.5; }

        /* Keyframes */
        @keyframes slideUpFade_verification_fest_2026 { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes float_verification_fest_2026 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        @keyframes popIn_verification_fest_2026 { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
        @keyframes staggerFade_verification_fest_2026 { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes shake_verification_fest_2026 { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
        @keyframes pulse_verification_fest_2026 { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        @keyframes fadeInDown_verification_fest_2026 { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }

        @media (max-width: 640px) {
            .card_verification_fest_2026, .faq_section_verification_fest_2026 { padding: 32px 20px; }
            .data_grid_verification_fest_2026 { grid-template-columns: 1fr; }
            .title_verification_fest_2026 { font-size: 28px; }
            .captcha_box_verification_fest_2026 { flex-direction: column; gap: 16px; align-items: stretch; }
        }
.page_container_verification_fest_2026 {
    animation: slideUpFade_verification_fest_2026 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.card_verification_fest_2026 {
    background: linear-gradient(145deg, rgba(10, 16, 32, 0.98), rgba(6, 10, 20, 0.98));
    border: 1px solid rgba(232, 198, 106, 0.16);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.card_verification_fest_2026::before {
    background: linear-gradient(90deg, #e8c66a, #c9a84c);
}

.title_verification_fest_2026 {
    color: #ffffff;
}

.subtitle_verification_fest_2026 {
    color: #94a3b8;
}

.shield_wrapper_verification_fest_2026 {
    background: rgba(232, 198, 106, 0.10);
    color: #e8c66a;
}

.search_label_verification_fest_2026 {
    color: #ffffff;
}

.helper_link_verification_fest_2026 {
    color: #e8c66a;
}

.search_input_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    border: 1px solid rgba(232, 198, 106, 0.18);
}

.search_input_verification_fest_2026:focus {
    border-color: #e8c66a;
    box-shadow: 0 0 0 5px rgba(232, 198, 106, 0.12);
}

.helper_box_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 198, 106, 0.12);
    color: #cbd5e1;
}

.captcha_box_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 198, 106, 0.12);
}

.captcha_box_verification_fest_2026:focus-within {
    border-color: #e8c66a;
    background: rgba(255, 255, 255, 0.05);
}

.captcha_text_verification_fest_2026 {
    color: #cbd5e1;
}

.captcha_input_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    border: 1px solid rgba(232, 198, 106, 0.18);
}

.captcha_input_verification_fest_2026:focus {
    border-color: #e8c66a;
}

.verify_btn_verification_fest_2026 {
    background: linear-gradient(135deg, #e8c66a, #c9a84c);
    color: #02040a;
    box-shadow: 0 15px 25px -5px rgba(232, 198, 106, 0.25);
}

.verify_btn_verification_fest_2026:hover {
    background: linear-gradient(135deg, #f0d98a, #e8c66a);
    color: #02040a;
}

.skeleton_loader_verification_fest_2026 {
    border-top: 2px dashed rgba(232, 198, 106, 0.18);
}

.skel_line_verification_fest_2026,
.skel_box_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.06);
}

.error_box_verification_fest_2026 {
    background: rgba(127, 29, 29, 0.25);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.25);
}

.results_panel_verification_fest_2026 {
    border-top: 2px dashed rgba(232, 198, 106, 0.18);
}

.badge_verification_fest_2026 {
    background: rgba(232, 198, 106, 0.12);
    color: #e8c66a;
    box-shadow: 0 4px 10px rgba(232, 198, 106, 0.12);
}

.data_row_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 198, 106, 0.10);
}

.label_verification_fest_2026 {
    color: #94a3b8;
}

.value_verification_fest_2026 {
    color: #ffffff;
}

.value_id_verification_fest_2026 {
    color: #e8c66a;
}

.value_rank_verification_fest_2026 {
    color: #fbbf24;
}

.download_btn_verification_fest_2026 {
    background: rgba(232, 198, 106, 0.10);
    color: #e8c66a;
    border: 1px solid rgba(232, 198, 106, 0.16);
}

.download_btn_verification_fest_2026:hover {
    background: #e8c66a;
    color: #02040a;
}

.faq_section_verification_fest_2026 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 198, 106, 0.10);
}

.faq_title_verification_fest_2026,
.faq_q_verification_fest_2026 {
    color: #ffffff;
}

.faq_a_verification_fest_2026 {
    color: #94a3b8;
}
/* Find this in your theme overrides */
.search_input_verification_fest_2026:focus {
    border-color: #e8c66a;
    /* If this has 'background: #ffffff;' change it to a dark color */
    background: rgba(255, 255, 255, 0.05); 
    box-shadow: 0 0 0 5px rgba(232, 198, 106, 0.12);
}

/* ===== Recognised Competitions (built at runtime from the certificate DB) ===== */
.verify_recognised_fest_2026 {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px dashed rgba(232, 198, 106, 0.18);
}
.verify_recognised_head_fest_2026 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.verify_recognised_title_fest_2026 {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.verify_recognised_count_fest_2026 {
    font-size: 12px;
    font-weight: 800;
    color: #e8c66a;
    background: rgba(232, 198, 106, 0.10);
    border: 1px solid rgba(232, 198, 106, 0.22);
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.verify_recognised_sub_fest_2026 {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 16px;
}
.verify_recognised_sub_fest_2026 strong { color: #e8c66a; font-weight: 600; }
.verify_chips_fest_2026 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.verify_chip_fest_2026 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 198, 106, 0.14);
    padding: 8px 14px;
    border-radius: 12px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.verify_chip_fest_2026:hover {
    border-color: rgba(232, 198, 106, 0.42);
    background: rgba(232, 198, 106, 0.07);
    transform: translateY(-2px);
}
.verify_chip_fest_2026::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e8c66a;
    flex-shrink: 0;
}


/* ==========================================================================
   31. CERTIFICATE & RESULTS SYSTEM
   Certificate sheet (screen + print), results portal, verification result card.
   ========================================================================== */

/* ---- Certificate sheet (A4 portrait) ---- */
.cert-stage { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8);
  padding: clamp(7rem, 11vw, 9rem) var(--container-padding-x) var(--section-padding-y); }
.cert-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-4); justify-content: center; }
/* The sheet is drawn at a fixed A4 @96dpi size and scaled uniformly to fit the
   viewport (via JS), so text proportions never shift and nothing is ever clipped. */
.cert-viewport { position: relative; width: 100%; max-width: 900px; margin: 0 auto; overflow: hidden; }
.cert-sheet {
  position: relative; width: 794px; height: 1123px;
  container-type: inline-size; transform-origin: top left;
  background:
    radial-gradient(circle at 18% 12%, rgba(232,198,106,0.10), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(232,198,106,0.10), transparent 42%),
    linear-gradient(160deg, #fffdf6 0%, #f9f1de 100%);
  color: #1b2436; border: 3px solid #c9a84c;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); overflow: hidden;
  font-family: var(--font-family-heading);
}
.cert-sheet::before { content: ''; position: absolute; inset: 3.2cqw;
  border: 2px solid rgba(201,168,76,0.75); pointer-events: none; z-index: 2; }
.cert-sheet::after { content: ''; position: absolute; inset: 3.9cqw;
  border: 0.8px solid rgba(201,168,76,0.45); pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 60px rgba(201,168,76,0.10); }
/* Faint guilloché-style concentric texture + emblem watermark */
.cert-watermark { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url('https://inspiretalenthub.in/assets/cert/seal.png') center 45% / 50cqw auto no-repeat;
  opacity: 0.055; }
.cert-watermark::after { content: ''; position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 50% 44%, transparent 0 5cqw, rgba(201,168,76,0.02) 5cqw 5.12cqw),
    radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(120,90,20,0.06) 100%); }
.cert-inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 5.5cqw 8cqw 5.5cqw; }
/* Brand emblem crest + wordmark */
.cert-emblem { width: 15cqw; height: auto; object-fit: contain;
  filter: drop-shadow(0 0.6cqw 1cqw rgba(120,90,20,0.22)); }
.cert-wordmark { font-family: var(--font-family-display); font-weight: 700;
  font-size: 3.1cqw; letter-spacing: 0.4em; text-transform: uppercase; color: #12305c;
  margin: 1.4cqw 0 0.4cqw; padding-left: 0.4em; }
/* Corner flourishes with a small diamond accent */
.cert-corner { position: absolute; width: 8cqw; height: 8cqw; border: 2px solid #c9a84c; pointer-events: none; opacity: 0.9; z-index: 2; }
.cert-corner::after { content: ''; position: absolute; width: 1.8cqw; height: 1.8cqw; background: #c9a84c; transform: rotate(45deg); }
.cert-corner--tl { top: 5cqw; left: 5cqw; border-right: 0; border-bottom: 0; }
.cert-corner--tl::after { top: -0.9cqw; left: -0.9cqw; }
.cert-corner--tr { top: 5cqw; right: 5cqw; border-left: 0; border-bottom: 0; }
.cert-corner--tr::after { top: -0.9cqw; right: -0.9cqw; }
.cert-corner--bl { bottom: 5cqw; left: 5cqw; border-right: 0; border-top: 0; }
.cert-corner--bl::after { bottom: -0.9cqw; left: -0.9cqw; }
.cert-corner--br { bottom: 5cqw; right: 5cqw; border-left: 0; border-top: 0; }
.cert-corner--br::after { bottom: -0.9cqw; right: -0.9cqw; }

.cert-topline { display: flex; align-items: center; justify-content: center; gap: 2.5cqw; color: #9a7b2e; margin-top: 1.6cqw; margin-bottom: 2.4cqw; }
.cert-topline i { display: block; width: 9cqw; height: 1px; background: linear-gradient(90deg, transparent, #c9a84c); }
.cert-topline i:last-child { background: linear-gradient(90deg, #c9a84c, transparent); }
.cert-fest { font-family: var(--font-family-body); font-size: 2.5cqw; letter-spacing: 0.22em; text-transform: uppercase; color: #8a6d28; font-weight: 700; white-space: nowrap; }
.cert-title { font-family: var(--font-family-display); font-weight: 700; font-size: 10.5cqw; line-height: 0.95;
  color: #b28f30;
  background: linear-gradient(175deg, #e6c766 4%, #b8912f 46%, #8a6a21 78%, #d4ad4a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.4cqw 0.5cqw rgba(120,90,20,0.28)); margin: 0; }
.cert-subtitle { font-family: var(--font-family-heading); font-size: 4.4cqw; letter-spacing: 0.34em; text-transform: uppercase; color: #1b2436; margin-top: 1cqw; }
.cert-divider { display: flex; align-items: center; justify-content: center; gap: 2cqw; margin: 2.2cqw 0; width: 40cqw; }
.cert-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c9a84c); }
.cert-divider span:last-child { background: linear-gradient(90deg, #c9a84c, transparent); }
.cert-divider b { color: #c9a84c; font-size: 2.6cqw; line-height: 1; }
.cert-presented { font-family: var(--font-family-heading); font-style: italic; font-size: 3.5cqw; color: #55607a; margin-bottom: 1.5cqw; }
.cert-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 8.2cqw; color: #12305c; line-height: 1.05; margin-bottom: 2.6cqw; }
.cert-citation { font-family: var(--font-family-heading); font-size: 4.15cqw; line-height: 1.7; color: #333c56;
  max-width: 84cqw; margin: 0 auto; text-align: center; }
.cert-citation strong { color: #12305c; font-weight: 600; }

.cert-foot { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3cqw; }
.cert-sign { display: flex; flex-direction: column; align-items: center; }
.cert-sign-img { width: 30cqw; max-height: 15cqw; object-fit: contain; margin-bottom: -1cqw; }
.cert-sign-line { width: 30cqw; height: 1px; background: #b6a468; margin-bottom: 1cqw; }
.cert-sign-name { font-family: var(--font-family-display); font-size: 3.2cqw; color: #12305c; font-weight: 600; }
.cert-sign-role { font-family: var(--font-family-body); font-size: 2.3cqw; letter-spacing: 0.12em; text-transform: uppercase; color: #8a7a4e; margin-top: 0.4cqw; }
.cert-seal-wrap { display: flex; align-items: flex-end; justify-content: center; }
.cert-seal-img { width: 24cqw; height: 24cqw; object-fit: contain; }
.cert-verify-col { display: flex; flex-direction: column; align-items: center; }
.cert-qr { width: 17cqw; height: 17cqw; background: #fff; padding: 1.2cqw; border: 1px solid #e5dcc2; }
.cert-qr svg { display: block; width: 100%; height: 100%; }
.cert-verify-label { font-family: var(--font-family-body); font-size: 2.3cqw; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7a4e; margin-top: 1cqw; }
.cert-id-line { font-family: var(--font-family-body); font-size: 2.7cqw; letter-spacing: 0.06em; color: #55607a; margin-top: 4cqw; }
.cert-id-line span { font-family: 'Courier New', monospace; font-weight: 700; color: #12305c; letter-spacing: 0.08em; }

/* Certificate: unavailable / not-found state */
.cert-missing { max-width: 560px; margin: 0 auto; text-align: center; }

/* ---- Results portal ---- */
.portal-search-card { max-width: 900px; margin: 0 auto; border: 1px solid var(--color-brand-alpha-20);
  border-radius: 20px; background:
    radial-gradient(circle at 80% 0%, rgba(232,198,106,0.06), transparent 45%), var(--color-bg-surface-1);
  padding: clamp(1.5rem, 3vw, 2.5rem); }
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-5); }
@media (max-width: 640px) { .portal-grid { grid-template-columns: 1fr; } }
.portal-hint { margin-top: var(--spacing-5); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.result-card { max-width: 900px; margin: var(--spacing-8) auto 0; border: 1px solid var(--color-brand-alpha-20);
  border-radius: 20px; background: var(--color-bg-surface-1); overflow: hidden; }
.result-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spacing-4); padding: var(--spacing-6); border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(232,198,106,0.04); }
.result-card__name { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-text-primary); margin: 0; }
.result-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 100px;
  font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.result-badge--win { background: rgba(232,198,106,0.14); color: var(--color-brand-primary); border: 1px solid var(--color-brand-alpha-40); }
.result-badge--part { background: rgba(255,255,255,0.05); color: var(--color-text-secondary); border: 1px solid rgba(255,255,255,0.12); }
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.06); }
@media (max-width: 560px) { .result-grid { grid-template-columns: 1fr; } }
.result-cell { background: var(--color-bg-surface-1); padding: var(--spacing-5) var(--spacing-6); }
.result-cell dt { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-tertiary); margin-bottom: 0.3rem; }
.result-cell dd { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); }
.result-cta { padding: var(--spacing-6); display: flex; flex-wrap: wrap; gap: var(--spacing-4); align-items: center; }
.result-note { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

/* ---- Verification result ---- */
.verify-result { max-width: 680px; margin: var(--spacing-8) auto 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--color-brand-alpha-20); background: var(--color-bg-surface-1); }
.verify-status { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-6); font-family: var(--font-family-heading); }
.verify-status svg { width: 2rem; height: 2rem; flex-shrink: 0; }
.verify-status--ok { background: rgba(16,185,129,0.12); color: #34d399; }
.verify-status--bad { background: rgba(239,68,68,0.12); color: #f87171; }
.verify-status b { font-size: var(--font-size-xl); display: block; }
.verify-status span { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ---- Long-form content: tables, callouts, lead paragraphs ---- */
.ith-table-wrap { overflow-x: auto; max-width: 920px; margin: 0 auto; border: 1px solid var(--color-brand-alpha-20);
  border-radius: 14px; background: var(--color-bg-surface-1); }
table.ith-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); min-width: 520px; }
.ith-table th, .ith-table td { padding: 0.95rem 1.2rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: top; }
.ith-table thead th { color: var(--color-brand-primary); text-transform: uppercase; font-size: var(--font-size-xs);
  letter-spacing: 0.08em; background: rgba(232,198,106,0.05); }
.ith-table tbody tr:last-child td { border-bottom: 0; }
.ith-table td:first-child { font-family: var(--font-family-heading); color: var(--color-text-primary); font-weight: 600; }
.ith-table .ith-table__num { color: var(--color-brand-primary); font-family: var(--font-family-display); font-weight: 700; white-space: nowrap; }
.ith-lead { font-size: var(--font-size-lg); line-height: 1.7; color: var(--color-text-secondary); max-width: 78ch; margin: 0 auto 1.6rem; text-align: center; }
.ith-pullquote { max-width: 760px; margin: 0 auto; text-align: center; font-family: var(--font-family-heading);
  font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.5; color: var(--color-text-primary); }
.ith-pullquote::before { content: '\201C'; display: block; font-family: var(--font-family-display);
  font-size: 3.5rem; line-height: 0.4; color: var(--color-brand-primary); margin-bottom: 1.2rem; }
.ith-pullquote cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: var(--font-size-sm);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); }

/* ---- Admin password gate ---- */
.admin-gate { min-height: 78vh; display: flex; align-items: center; padding-top: clamp(7rem, 12vw, 10rem); }
.admin-gate__card { max-width: 480px; margin: 0 auto; text-align: center;
  border: 1px solid var(--color-brand-alpha-20); border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(232,198,106,0.07), transparent 60%), var(--color-bg-surface-1);
  padding: clamp(2rem, 5vw, 3rem); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.admin-gate__form { display: flex; flex-direction: column; gap: var(--spacing-4); margin-top: var(--spacing-6); text-align: left; }
.admin-gate__form .btn { justify-content: center; }
.admin-gate__err { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  margin-top: var(--spacing-5); color: #f87171; font-size: var(--font-size-sm); font-weight: 600; }
.admin-gate__err svg { flex-shrink: 0; }

/* ---- Admin importer ---- */
.admin-shell { max-width: 1040px; margin: 0 auto; }
.admin-drop { border: 2px dashed var(--color-brand-alpha-40); border-radius: 16px; padding: clamp(2rem,5vw,3.5rem);
  text-align: center; background: rgba(232,198,106,0.03); transition: background var(--duration-fast), border-color var(--duration-fast); }
.admin-drop.is-drag { background: rgba(232,198,106,0.08); border-color: var(--color-brand-primary); }
.admin-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-top: var(--spacing-6); }
table.admin-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); white-space: nowrap; }
.admin-table th, .admin-table td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.admin-table th { color: var(--color-brand-primary); text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.08em; position: sticky; top: 0; background: var(--color-bg-surface-2); }
.admin-table tr.row-bad td { background: rgba(239,68,68,0.08); }
.admin-row-err { color: #f87171; font-size: var(--font-size-xs); }
.admin-stat-row { display: flex; flex-wrap: wrap; gap: var(--spacing-4); margin-top: var(--spacing-6); }
.admin-stat { flex: 1; min-width: 130px; border: 1px solid var(--color-brand-alpha-20); border-radius: 12px; padding: var(--spacing-4) var(--spacing-5); background: var(--color-bg-surface-1); }
.admin-stat b { display: block; font-family: var(--font-family-display); font-size: var(--font-size-2xl); color: var(--color-brand-primary); line-height: 1; }
.admin-stat span { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); }
.admin-panel { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: clamp(1.25rem,3vw,2rem); background: var(--color-bg-surface-1); margin-top: var(--spacing-6); }
textarea.form-input { min-height: 150px; font-family: 'Courier New', monospace; font-size: var(--font-size-sm); resize: vertical; }

/* ============================================================
   Practice Arena - interactive quiz generator
   ============================================================ */
.pa-shell { max-width: 860px; margin: 0 auto; }
.pa-panel.pa-in { animation: pa-fade 0.5s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes pa-fade { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }

.pa-card { border: 1px solid var(--color-brand-alpha-20); border-radius: 20px;
  background: radial-gradient(circle at 85% -10%, rgba(232,198,106,0.08), transparent 55%), var(--color-bg-surface-1);
  padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.pa-field { margin-bottom: var(--spacing-6); }
.pa-label { display: block; font-family: var(--font-family-heading); font-size: var(--font-size-base);
  color: var(--color-text-primary); margin-bottom: 0.75rem; }
.pa-label span { color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-family: var(--font-family-body); }

.pa-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.pa-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 100px;
  border: 1px solid var(--color-brand-alpha-20); background: rgba(255,255,255,0.03); color: var(--color-text-secondary);
  font-family: var(--font-family-heading); font-size: var(--font-size-sm); cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
.pa-chip svg { width: 18px; height: 18px; opacity: 0.8; }
.pa-chip small { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 0.35em;
  border-radius: 100px; background: rgba(255,255,255,0.08); font-size: 0.72em; color: var(--color-text-tertiary); }
.pa-chip:hover { border-color: var(--color-brand-alpha-40); transform: translateY(-2px); color: var(--color-text-primary); }
.pa-chip.is-on { background: rgba(232,198,106,0.16); border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.pa-chip.is-on small { background: rgba(232,198,106,0.25); color: var(--color-brand-primary); }

.pa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-5); align-items: end; }
@media (max-width: 640px) { .pa-grid { grid-template-columns: 1fr; } }
.pa-grid .pa-field { margin-bottom: 0; }

.pa-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none;
  font-family: var(--font-family-heading); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pa-switch__track { position: relative; width: 46px; height: 26px; border-radius: 100px; flex-shrink: 0;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); transition: background var(--duration-fast), border-color var(--duration-fast); }
.pa-switch__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #d9d2c2; transition: transform var(--duration-base), background var(--duration-base); }
.pa-switch input:checked + .pa-switch__track { background: rgba(232,198,106,0.3); border-color: var(--color-brand-primary); }
.pa-switch input:checked + .pa-switch__track .pa-switch__thumb { transform: translateX(20px); background: var(--color-brand-primary); }
.pa-switch input:focus-visible + .pa-switch__track { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

.pa-avail { margin: var(--spacing-6) 0 var(--spacing-5); color: var(--color-text-tertiary); font-size: var(--font-size-sm); text-align: center; }
.pa-card__cta { text-align: center; }
.pa-card__cta .btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---- Quiz ---- */
.pa-quiz { border: 1px solid var(--color-brand-alpha-20); border-radius: 20px; background: var(--color-bg-surface-1);
  padding: clamp(1.4rem, 4vw, 2.5rem); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.pa-quiz__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.pa-quiz__prog { font-family: var(--font-family-heading); color: var(--color-brand-primary); font-size: var(--font-size-sm); letter-spacing: 0.04em; }
.pa-quiz__topright { display: inline-flex; align-items: center; gap: 0.7rem; }
.pa-combo { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 100px;
  background: linear-gradient(120deg, rgba(232,198,106,0.22), rgba(245,158,11,0.18)); border: 1px solid var(--color-brand-alpha-40);
  color: var(--color-brand-primary); font-size: var(--font-size-xs); font-family: var(--font-family-heading); }
.pa-combo svg { width: 14px; height: 14px; color: #f5b83d; }
.pa-combo b { font-family: var(--font-family-display); font-weight: 700; }
.pa-combo span { color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.65rem; }
.pa-combo--bump { animation: pa-bump 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes pa-bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.pa-opt.pa-pop { animation: pa-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes pa-pop { 0% { transform: scale(1); } 45% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(16,185,129,0.18); } 100% { transform: scale(1); } }
.pa-quiz__timer { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.pa-quiz__timer svg { width: 18px; height: 18px; }
.pa-progress { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pa-progress__bar { height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, #b8912f, var(--color-brand-primary)); transition: width var(--duration-base) ease; }
.pa-per { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.pa-per__track { flex: 1; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pa-per__bar { height: 100%; width: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b); }
.pa-per__text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }

.pa-q { margin: var(--spacing-6) 0; }
.pa-q__tag { display: inline-block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-brand-primary); background: rgba(232,198,106,0.1); border: 1px solid var(--color-brand-alpha-20);
  padding: 0.25rem 0.7rem; border-radius: 100px; margin-bottom: 0.9rem; }
.pa-q__text { font-family: var(--font-family-heading); font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.4; color: var(--color-text-primary); margin: 0; }

.pa-opts { display: grid; gap: 0.8rem; }
.pa-opt { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; cursor: pointer;
  padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--color-brand-alpha-20); background: rgba(255,255,255,0.03);
  color: var(--color-text-primary); font-family: var(--font-family-body); font-size: var(--font-size-base);
  transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
.pa-opt__key { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--color-brand-alpha-20); font-family: var(--font-family-display);
  font-weight: 700; color: var(--color-brand-primary); transition: background var(--duration-fast), color var(--duration-fast); }
.pa-opt__txt { flex: 1; }
.pa-opt__mark { width: 1.4rem; height: 1.4rem; flex-shrink: 0; opacity: 0; transition: opacity var(--duration-fast); }
.pa-opt:not(:disabled):hover { border-color: var(--color-brand-alpha-40); background: rgba(232,198,106,0.06); transform: translateY(-2px); }
.pa-opt:disabled { cursor: default; }
.pa-opt.is-correct { border-color: #10b981; background: rgba(16,185,129,0.12); }
.pa-opt.is-correct .pa-opt__key { background: #10b981; color: #04120c; border-color: #10b981; }
.pa-opt.is-correct .pa-opt__mark { opacity: 1; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.pa-opt.is-chosen { border-color: var(--color-brand-primary); background: rgba(232,198,106,0.12); }
.pa-opt.is-chosen .pa-opt__key { background: var(--color-brand-primary); color: #1a1200; border-color: var(--color-brand-primary); }
.pa-opt.is-wrong { border-color: #ef4444; background: rgba(239,68,68,0.1); }
.pa-opt.is-wrong .pa-opt__key { background: #ef4444; color: #1a0505; border-color: #ef4444; }
.pa-opt.is-wrong .pa-opt__mark { opacity: 1; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }

.pa-explain { margin-top: var(--spacing-5); padding: 1rem 1.2rem; border-radius: 12px; font-size: var(--font-size-base);
  line-height: 1.6; animation: pa-fade 0.35s ease both; }
.pa-explain.is-ok { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #b8f0d8; }
.pa-explain.is-no { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.28); color: #f6c9c9; }
.pa-explain strong { color: #fff; }
.pa-quiz__actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: var(--spacing-7); }
.pa-quiz__actions .btn { flex: 0 0 auto; }
.pa-quiz__actions #paNext { margin-left: auto; }

/* ---- Result ---- */
.pa-result { position: relative; border: 1px solid var(--color-brand-alpha-20); border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 50% -20%, rgba(232,198,106,0.1), transparent 60%), var(--color-bg-surface-1);
  padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.pa-result__head { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); flex-wrap: wrap; }
.pa-ring { --pa-pct: 0; position: relative; width: 128px; height: 128px; flex-shrink: 0; border-radius: 50%;
  background: conic-gradient(var(--color-brand-primary) calc(var(--pa-pct) * 1%), rgba(255,255,255,0.08) 0);
  display: grid; place-items: center; }
.pa-ring::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--color-bg-surface-1); }
.pa-ring__inner { position: relative; z-index: 1; text-align: center; line-height: 1; }
.pa-ring__num { display: block; font-family: var(--font-family-display); font-weight: 700; font-size: 2.6rem; color: var(--color-brand-primary); }
.pa-ring__den { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.pa-result__headtext { flex: 1; min-width: 220px; }
.pa-result__msg { font-family: var(--font-family-display); font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--color-text-primary); margin: 0 0 0.4rem; }
.pa-result__meta { color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0 0 1rem; }
.pa-breakdown { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pa-bd { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: 100px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--color-brand-alpha-20); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pa-bd b { color: var(--color-brand-primary); font-family: var(--font-family-heading); }
.pa-result__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: var(--spacing-8) 0 var(--spacing-4); }

.pa-review__title { font-family: var(--font-family-heading); font-size: var(--font-size-xl); color: var(--color-brand-primary);
  margin: var(--spacing-8) 0 var(--spacing-5); }
.pa-review { display: grid; gap: 0.7rem; }
.pa-rev { border: 1px solid var(--color-brand-alpha-20); border-radius: 12px; background: rgba(255,255,255,0.02); overflow: hidden; }
.pa-rev summary { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1.1rem; cursor: pointer;
  font-family: var(--font-family-heading); color: var(--color-text-primary); list-style: none; }
.pa-rev summary::-webkit-details-marker { display: none; }
.pa-rev__ic { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 1rem; }
.pa-rev.is-ok .pa-rev__ic { background-color: rgba(16,185,129,0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.pa-rev.is-no .pa-rev__ic { background-color: rgba(239,68,68,0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
.pa-rev__q { flex: 1; font-size: var(--font-size-base); line-height: 1.4; }
.pa-rev__body { padding: 0 1.1rem 1.1rem 3.2rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pa-rev__body p { margin: 0 0 0.5rem; }
.pa-rev__exp { color: var(--color-text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .pa-panel.pa-in, .pa-explain { animation: none !important; }
  .pa-progress__bar, .pa-per__bar, .pa-opt, .pa-chip, .pa-switch__thumb { transition: none !important; }
}

/* ============================================================
   Study Hub - chapter-wise test generator
   ============================================================ */
.sh-shell { max-width: 900px; margin: 0 auto; }
.sh-step.pa-in, .sh-step { animation: none; }

/* Breadcrumb path */
.sh-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin-bottom: var(--spacing-7); min-height: 1.5rem; }
.sh-path:empty { display: none; }
.sh-path__crumb { background: none; border: 0; padding: 0.2rem 0.4rem; border-radius: 8px; cursor: pointer;
  font-family: var(--font-family-heading); font-size: var(--font-size-sm); color: var(--color-text-tertiary);
  transition: color var(--duration-fast), background var(--duration-fast); }
.sh-path__crumb:hover:not(:disabled) { color: var(--color-brand-primary); background: rgba(232,198,106,0.08); }
.sh-path__crumb.is-current { color: var(--color-brand-primary); }
.sh-path__crumb:disabled { cursor: default; }
.sh-path__sep { display: inline-flex; color: var(--color-text-tertiary); opacity: 0.5; }
.sh-path__sep svg { width: 14px; height: 14px; }

.sh-step__head { display: flex; align-items: center; gap: var(--spacing-5); margin-bottom: var(--spacing-7); flex-wrap: wrap; }
.sh-step__title { font-family: var(--font-family-display); font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--color-text-primary); margin: 0; }
.sh-step__sub { color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0.3rem 0 0; max-width: 60ch; }
.sh-back { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-brand-alpha-20); border-radius: 100px; padding: 0.5rem 1rem 0.5rem 0.75rem; cursor: pointer;
  color: var(--color-text-secondary); font-family: var(--font-family-heading); font-size: var(--font-size-sm);
  transition: border-color var(--duration-fast), color var(--duration-fast); }
.sh-back svg { transform: rotate(180deg); width: 16px; height: 16px; }
.sh-back:hover { border-color: var(--color-brand-alpha-40); color: var(--color-brand-primary); }

/* Board switcher */
.sh-boards { display: flex; width: max-content; max-width: 100%; flex-wrap: wrap; justify-content: center;
  gap: 0.35rem; padding: 0.35rem; margin: 0 auto var(--spacing-7);
  border-radius: 999px; border: 1px solid var(--color-brand-alpha-20);
  background: var(--color-bg-surface-1); }
.sh-boards[hidden] { display: none; }
.sh-board { appearance: none; border: 0; cursor: pointer; padding: 0.55rem 1.4rem; border-radius: 999px;
  font-family: var(--font-family-body); font-weight: 600; font-size: var(--font-size-sm);
  color: var(--color-text-secondary); background: transparent;
  transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast); }
.sh-board:hover { color: var(--color-text-primary); }
.sh-board.is-active { color: #1a1200;
  background: linear-gradient(135deg, var(--color-brand-primary), #f0d488);
  box-shadow: 0 6px 18px rgba(232,198,106,0.3); }
.sh-boards-wrap { text-align: center; }

/* Grade grid */
.sh-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--spacing-4); }
.sh-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  padding: 1.6rem 1rem; border-radius: 18px; cursor: pointer; text-align: center;
  border: 1px solid var(--color-brand-alpha-20);
  background: radial-gradient(circle at 50% 0%, rgba(232,198,106,0.08), transparent 65%), var(--color-bg-surface-1);
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast); }
.sh-grade:hover { transform: translateY(-4px); border-color: var(--color-brand-primary); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.sh-grade__n { font-family: var(--font-family-display); font-weight: 700; font-size: 2.6rem; line-height: 1;
  background: linear-gradient(160deg, #e6c766, #b8912f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sh-grade__l { font-family: var(--font-family-heading); color: var(--color-text-primary); font-size: var(--font-size-base); margin-top: 0.4rem; }
.sh-grade__s { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }

/* Subject cards */
.sh-cards { display: grid; gap: var(--spacing-4); }
.sh-sub { display: flex; align-items: center; gap: var(--spacing-5); width: 100%; text-align: left; cursor: pointer;
  padding: 1.1rem 1.35rem; border-radius: 16px; border: 1px solid var(--color-brand-alpha-20); background: var(--color-bg-surface-1);
  transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
.sh-sub:hover { transform: translateY(-3px); border-color: var(--color-brand-alpha-40); background: rgba(232,198,106,0.04); }
.sh-sub__ic { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 12px;
  background: rgba(232,198,106,0.1); color: var(--color-brand-primary); }
.sh-sub__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sh-sub__name { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); }
.sh-sub__ready { font-size: var(--font-size-sm); color: #34d399; }
.sh-sub__soon { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.sh-sub__arrow { color: var(--color-text-tertiary); flex-shrink: 0; }
.sh-sub:hover .sh-sub__arrow { color: var(--color-brand-primary); }

/* Chapter controls */
.sh-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-4);
  padding: var(--spacing-5); border: 1px solid var(--color-brand-alpha-20); border-radius: 16px;
  background: rgba(255,255,255,0.02); margin-bottom: var(--spacing-6); }
.sh-ctrl { display: flex; flex-direction: column; gap: 0.4rem; }
.sh-ctrl > label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); }
.sh-ctrl .form-select { min-width: 150px; }
.sh-ctrl--switch { justify-content: flex-end; }
.sh-mixed { margin-left: auto; }

/* Chapter list */
.sh-chapters { display: grid; gap: 0.7rem; }
.sh-chap { display: flex; align-items: center; gap: var(--spacing-4); width: 100%; text-align: left; cursor: pointer;
  padding: 0.95rem 1.2rem; border-radius: 14px; border: 1px solid var(--color-brand-alpha-20); background: var(--color-bg-surface-1);
  transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
.sh-chap:hover:not(.is-soon) { transform: translateX(3px); border-color: var(--color-brand-primary); background: rgba(232,198,106,0.05); }
.sh-chap__no { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,255,255,0.05); font-family: var(--font-family-display); font-weight: 700; color: var(--color-brand-primary); font-size: var(--font-size-sm); }
.sh-chap__name { flex: 1; min-width: 0; font-family: var(--font-family-heading); color: var(--color-text-primary); font-size: var(--font-size-base); }
.sh-chap__badge { flex-shrink: 0; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-brand-primary);
  background: rgba(232,198,106,0.12); border: 1px solid var(--color-brand-alpha-20); padding: 0.2rem 0.6rem; border-radius: 100px; }
.sh-chap__go { color: var(--color-text-tertiary); flex-shrink: 0; }
.sh-chap:hover:not(.is-soon) .sh-chap__go { color: var(--color-brand-primary); }
.sh-chap.is-soon { cursor: default; opacity: 0.6; }
.sh-chap.is-soon .sh-chap__no { color: var(--color-text-tertiary); }
.sh-chap__soon { flex-shrink: 0; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); }

.sh-note { display: flex; align-items: flex-start; gap: 0.9rem; margin-top: var(--spacing-8); padding: 1.1rem 1.3rem;
  border-radius: 14px; background: rgba(232,198,106,0.05); border: 1px solid var(--color-brand-alpha-20); }
.sh-note svg { flex-shrink: 0; color: var(--color-brand-primary); margin-top: 0.15rem; }
.sh-note p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

@media (max-width: 560px) {
  .sh-controls { flex-direction: column; align-items: stretch; }
  .sh-ctrl .form-select { min-width: 0; width: 100%; }
  .sh-mixed { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-grade, .sh-sub, .sh-chap, .sh-back { transition: none !important; }
}

/* ============================================================
   Study Hub - chapter hub tiles + learning tools
   ============================================================ */
.sh-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-4); }
.sh-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: left; cursor: pointer;
  padding: 1.4rem 1.4rem 1.5rem; border-radius: 18px; border: 1px solid var(--color-brand-alpha-20);
  background: radial-gradient(circle at 100% 0%, rgba(232,198,106,0.08), transparent 60%), var(--color-bg-surface-1);
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast); }
.sh-tool:hover { transform: translateY(-4px); border-color: var(--color-brand-primary); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.sh-tool__ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; margin-bottom: 0.5rem;
  background: rgba(232,198,106,0.12); color: var(--color-brand-primary); }
.sh-tool__name { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); }
.sh-tool__sub { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

/* ---- Flashcards ---- */
.fc { max-width: 640px; margin: 0 auto; }
.fc__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.fc__prog { font-family: var(--font-family-heading); color: var(--color-brand-primary); font-size: var(--font-size-sm); }
.fc__known { font-size: var(--font-size-sm); color: #34d399; }
.fc__progress { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: var(--spacing-6); }
.fc__progress-bar { height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, #b8912f, var(--color-brand-primary)); transition: width var(--duration-base) ease; }
.fc__card { display: block; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; perspective: 1400px; }
.fc__inner { position: relative; width: 100%; min-height: 260px; transition: transform 0.6s cubic-bezier(0.4,0.2,0.2,1); transform-style: preserve-3d; }
.fc__inner.is-flipped { transform: rotateY(180deg); }
.fc__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; text-align: center;
  padding: 2rem; border-radius: 22px; border: 1px solid var(--color-brand-alpha-20); }
.fc__face--front { background: radial-gradient(circle at 50% 0%, rgba(232,198,106,0.1), transparent 60%), var(--color-bg-surface-1); }
.fc__face--back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 0%, rgba(16,185,129,0.12), transparent 60%), var(--color-bg-surface-2); }
.fc__label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-brand-primary); }
.fc__face--back .fc__label { color: #34d399; }
.fc__txt { font-family: var(--font-family-heading); font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.4; color: var(--color-text-primary); }
.fc__hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.fc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: var(--spacing-6); }
.fc__actions .btn { justify-content: center; }
.fc__exit { display: block; margin: var(--spacing-6) auto 0; background: none; border: 0; cursor: pointer; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.fc__exit:hover { color: var(--color-brand-primary); }
.fc-slide { animation: fc-slide 0.35s ease; }
@keyframes fc-slide { 0% { opacity: 0; transform: translateX(24px); } 100% { opacity: 1; transform: none; } }

.fc-summary { max-width: 520px; margin: 0 auto; text-align: center; padding: var(--spacing-8) var(--spacing-6); }
.fc-summary__ring { --fc-pct: 0; width: 120px; height: 120px; margin: 0 auto var(--spacing-6); border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--color-brand-primary) calc(var(--fc-pct) * 1%), rgba(255,255,255,0.08) 0); }
.fc-summary__ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-bg-surface-1); }
.fc-summary__ring span { position: relative; z-index: 1; font-family: var(--font-family-display); font-weight: 700; font-size: 1.6rem; color: var(--color-brand-primary); }
.fc-summary__title { font-family: var(--font-family-display); font-size: clamp(1.4rem,4vw,2rem); color: var(--color-text-primary); margin: 0 0 0.4rem; }
.fc-summary__meta { color: var(--color-text-tertiary); margin: 0 0 var(--spacing-6); }
.fc-summary__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---- Match-up game ---- */
.mt { max-width: 720px; margin: 0 auto; }
.mt__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.mt__prog { font-family: var(--font-family-heading); color: var(--color-brand-primary); font-size: var(--font-size-sm); }
.mt__timer { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.mt__hint { text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0 0 var(--spacing-5); }
.mt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }
.mt__col { display: grid; gap: 0.7rem; align-content: start; }
.mt-tile { display: flex; align-items: center; min-height: 64px; padding: 0.8rem 1rem; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--color-brand-alpha-20); background: var(--color-bg-surface-1); color: var(--color-text-primary);
  font-size: var(--font-size-sm); line-height: 1.35; text-align: left;
  transition: transform var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast), opacity var(--duration-base); }
.mt-tile:hover:not(.is-done) { border-color: var(--color-brand-alpha-40); transform: translateY(-2px); }
.mt-tile.is-sel { border-color: var(--color-brand-primary); background: rgba(232,198,106,0.12); }
.mt-tile.is-wrong { border-color: #ef4444; background: rgba(239,68,68,0.12); animation: mt-shake 0.4s; }
.mt-tile.is-done { border-color: #10b981; background: rgba(16,185,129,0.12); color: #a7f3d0; opacity: 0.55; pointer-events: none; }
@keyframes mt-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- Revision notes ---- */
.notes { max-width: 760px; margin: 0 auto; }
.notes__head { margin-bottom: var(--spacing-7); }
.notes__tag { display: inline-block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand-primary);
  background: rgba(232,198,106,0.1); border: 1px solid var(--color-brand-alpha-20); padding: 0.25rem 0.7rem; border-radius: 100px; margin-bottom: 0.8rem; }
.notes__title { font-family: var(--font-family-display); font-size: clamp(1.6rem,4vw,2.3rem); color: var(--color-text-primary); margin: 0; }
.notes__meta { color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0.4rem 0 0; }
.notes__h3 { font-family: var(--font-family-heading); font-size: var(--font-size-xl); color: var(--color-brand-primary); margin: var(--spacing-7) 0 var(--spacing-4); }
.notes__list { list-style: none; display: grid; gap: 0.8rem; padding: 0; margin: 0; }
.notes__list li { position: relative; padding: 0.9rem 1.1rem 0.9rem 2.6rem; border-radius: 12px; background: rgba(255,255,255,0.02);
  border: 1px solid var(--color-brand-alpha-20); color: var(--color-text-secondary); line-height: 1.6; }
.notes__list li::before { content: ''; position: absolute; left: 1.1rem; top: 1.35rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-brand-primary); }
.notes__formulas { display: grid; gap: 0.7rem; }
.notes__formula { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.2rem;
  padding: 0.85rem 1.2rem; border-radius: 12px; background: rgba(232,198,106,0.05); border: 1px solid var(--color-brand-alpha-20); }
.notes__fname { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.notes__fexpr { font-family: 'Courier New', monospace; color: var(--color-brand-primary); font-weight: 700; }
.notes__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--spacing-8); }

/* ---- Test setup screen ---- */
.ts { max-width: 640px; margin: 0 auto; }
.ts__head { margin-bottom: var(--spacing-7); }
.ts__title { font-family: var(--font-family-display); font-size: clamp(1.5rem, 4vw, 2rem); color: var(--color-brand-primary); margin: 0.4rem 0 0.2rem; }
.ts__meta { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin: 0; }
.ts__grp { margin-bottom: var(--spacing-5); }
.ts__lbl { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ts__seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ts__opt { appearance: none; cursor: pointer; padding: 0.55rem 1rem; border-radius: 999px; font-family: var(--font-family-body); font-weight: 600; font-size: var(--font-size-sm);
  color: var(--color-text-secondary); background: var(--color-bg-surface-1); border: 1px solid var(--color-brand-alpha-20); transition: color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast); }
.ts__opt:hover { color: var(--color-text-primary); }
.ts__opt.is-on { color: #1a1200; background: linear-gradient(135deg, var(--color-brand-primary), #f0d488); box-shadow: 0 6px 16px rgba(232,198,106,0.28); border-color: transparent; }
.ts__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--spacing-6); }
.ts__hist { margin-top: var(--spacing-8); padding-top: var(--spacing-5); border-top: 1px solid var(--color-brand-alpha-20); }
.ts__note { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-muted); }
.ts__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.ts__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--color-brand-alpha-20); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.ts__list li b { color: var(--color-brand-primary); }
.ts__weak { display: flex; align-items: center; gap: 0.5rem; margin: var(--spacing-4) 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(232,198,106,0.08); border: 1px solid var(--color-brand-alpha-20); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.ts__weak svg { color: var(--color-brand-primary); flex-shrink: 0; }

/* ---- Definitions list & exam-tips chips ---- */
.defs { display: grid; gap: 0.7rem; margin: 0; padding: 0; }
.defs__row { display: grid; grid-template-columns: minmax(140px, 0.4fr) 1fr; gap: 0.4rem 1.2rem;
  padding: 0.85rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--color-brand-alpha-20); }
.defs__term { font-weight: 700; color: var(--color-brand-primary); }
.defs__def { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
.tips__terms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.tips__chip { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: var(--font-size-sm); font-weight: 600;
  color: var(--color-brand-primary); background: rgba(232,198,106,0.1); border: 1px solid var(--color-brand-alpha-20); }
.tips__mistakes li strong { color: var(--color-brand-primary); }
@media (max-width: 520px) { .defs__row { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---- Worksheet ---- */
.ws-preview__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.3rem; border-radius: 14px; background: rgba(232,198,106,0.06); border: 1px solid var(--color-brand-alpha-20); margin-bottom: var(--spacing-6); }
.ws-preview__bar p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.ws-sheet { position: relative; overflow: hidden; background: #fff; color: #14203a; border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 820px; margin: 0 auto;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ws__wm { position: absolute; top: 50%; left: 50%; width: 62%; max-width: 460px; transform: translate(-50%, -50%);
  opacity: 0.06; z-index: 0; pointer-events: none; user-select: none; }
.ws__inner { position: relative; z-index: 1; }
.ws__head { display: flex; align-items: center; gap: 1rem; }
.ws__logo { width: 66px; height: auto; flex-shrink: 0; }
.ws__headtext { min-width: 0; }
.ws__brand { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9a7b2e; }
.ws__title { font-family: var(--font-family-display); font-size: 1.7rem; margin: 0.2rem 0 0.15rem; color: #12305c; }
.ws__meta { font-size: 0.9rem; color: #55607a; margin: 0.15rem 0; }
.ws__namebar { margin-top: 0.9rem; }
.ws__rule { border: 0; border-top: 2px solid #c9a84c; margin: 1rem 0 1.4rem; }
.ws__list { padding-left: 1.4rem; display: grid; gap: 1.1rem; }
.ws__list li { line-height: 1.5; }
.ws__q { margin: 0 0 0.5rem; font-weight: 600; color: #14203a; }
.ws__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1.2rem; }
.ws__opt { font-size: 0.95rem; color: #33415c; }
.ws__key { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px dashed #c9a84c; }
.ws__key-title { font-size: 1.1rem; color: #12305c; margin: 0 0 0.4rem; }
.ws__key p { font-family: 'Courier New', monospace; color: #33415c; margin: 0; letter-spacing: 0.04em; }

/* ---- Exam paper (multi-section worksheet) ---- */
.ws-preview__opts { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ws-preview__lbl { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.ws-preview__sel { padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--color-brand-alpha-20);
  background: var(--color-bg-surface-1); color: var(--color-text-primary); font-family: var(--font-family-body); }
.ws-paper { position: relative; overflow: hidden; }
.ws-paper + .ws-paper { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 2px dashed #c9a84c; }
.ws__stamp { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem;
  font-size: 0.85rem; font-weight: 600; color: #12305c; white-space: nowrap; }
.ws__namebar { margin-top: 0.9rem; font-size: 0.9rem; color: #55607a; }
.ws__instr { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-radius: 8px; background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.4); font-size: 0.85rem; color: #3a4462; line-height: 1.55; }
.ws__scheme { margin: 0.7rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-size: 0.8rem; color: #3a4462; }
.ws__scheme-title { font-weight: 700; color: #12305c; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.ws__scheme-cell { padding: 0.15rem 0.5rem; border-radius: 6px; background: rgba(18,48,92,0.06); border: 1px solid rgba(18,48,92,0.12); }
.ws__scheme-cell b { color: #9a7b2e; }
.ws__sec { font-family: var(--font-family-display); font-size: 1.15rem; color: #12305c; margin: 1.5rem 0 0.3rem;
  padding-bottom: 0.25rem; border-bottom: 1.5px solid #c9a84c; }
.ws__sec-note { font-family: var(--font-family-body); font-size: 0.8rem; font-weight: 400; color: #7a6320; }
.ws__secinstr { margin: 0.15rem 0 0.6rem; font-size: 0.82rem; font-style: italic; color: #55607a; }
.ws__opts--ar { grid-template-columns: 1fr; gap: 0.15rem; }
.ws__scheme-cell--tot { background: rgba(201,168,76,0.16); border-color: rgba(201,168,76,0.5); }
.ws__qrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.ws__marks { font-size: 0.85rem; font-weight: 700; color: #9a7b2e; flex-shrink: 0; }
.ws__lines { margin: 0.4rem 0 0.2rem; background-image: repeating-linear-gradient(to bottom, transparent, transparent 1.55rem, #c7d0e0 1.55rem, #c7d0e0 calc(1.55rem + 1px)); }
.ws__lines--1 { height: 1.6rem; }
.ws__lines--2 { height: 3.15rem; }
.ws__lines--3 { height: 4.7rem; }
.ws__lines--5 { height: 7.8rem; }
.ws__case { margin: 0.6rem 0 0.4rem; padding: 0.8rem 1rem; border-radius: 8px; background: #f4f1e6; border-left: 3px solid #c9a84c; }
.ws__case-lead { margin: 0 0 0.4rem; font-weight: 600; color: #12305c; font-size: 0.9rem; }
.ws__case-body { margin: 0; color: #33415c; line-height: 1.6; font-size: 0.92rem; }
.ws__list--case { margin-top: 0.8rem; }
.ws__keypage { position: relative; z-index: 1; }
.ws__head--key { gap: 0.7rem; }
.ws__title--sm { font-size: 1.2rem; }
.ws__keylist { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.ws__keylist li { line-height: 1.5; color: #33415c; font-size: 0.92rem; padding-bottom: 0.4rem; border-bottom: 1px dotted #d9cfa8; }
.ws__keyq { font-weight: 700; color: #12305c; }
.ws__keyhint { display: inline-block; margin-top: 0.15rem; font-size: 0.82rem; color: #55607a; }
.ws__keyhint b { color: #12305c; }
.ws__keynote { margin: 1rem 0 0; font-size: 0.8rem; font-style: italic; color: #6b7488; }

@media (max-width: 520px) {
  .mt__opts, .ws__opts { grid-template-columns: 1fr; }
  .fc__actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fc__inner, .fc-slide, .mt-tile, .sh-tool { transition: none !important; animation: none !important; }
}

/* ---- Print: isolate the certificate on an A4 portrait page ---- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .cert-sheet, .cert-sheet * { visibility: visible !important; }
  .index-nav, .index-footer, .cert-actions, .skip-link, .cursor-dot, .cursor-outline, .breadcrumb, .cert-toast { display: none !important; }
  .cert-stage { padding: 0 !important; }
  .cert-viewport { width: auto !important; max-width: none !important; height: auto !important; overflow: visible !important; margin: 0 !important; }
  .cert-sheet {
    position: fixed; left: 0; top: 0; margin: 0; transform: none !important;
    width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto;
    border: none; box-shadow: none; border-radius: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ---- In-page QR scanner (verification) ---- */
.qr-scanner { max-width: 680px; margin: var(--spacing-6) auto 0; border: 1px solid var(--color-brand-alpha-20);
  border-radius: 16px; overflow: hidden; background: #000; }
.qr-scanner__view { position: relative; }
.qr-scanner video { width: 100%; display: block; max-height: 58vh; object-fit: cover; background: #000; }
.qr-scanner__reticle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.qr-scanner__reticle span { width: min(60%, 260px); aspect-ratio: 1; border: 3px solid var(--color-brand-primary);
  border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35); }
.qr-scanner__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--spacing-4) var(--spacing-5); background: var(--color-bg-surface-1); }
.qr-scanner__status { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }
.qr-fallback { max-width: 680px; margin: var(--spacing-6) auto 0; }

/* Modal overlay: scanner pops up in front (centred), not in-flow below the form */
.qr-scanner--modal { position: fixed; inset: 0; z-index: 2000; margin: 0; max-width: none;
  width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(3, 6, 13, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--spacing-4); padding: max(env(safe-area-inset-top), 1rem) 1rem max(env(safe-area-inset-bottom), 1rem);
  opacity: 1; transform: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: qrModalIn 0.28s ease both; }
@keyframes qrModalIn { from { opacity: 0; } to { opacity: 1; } }
.qr-scanner--modal .qr-scanner__view { width: min(92vw, 460px); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--color-brand-alpha-20); box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.qr-scanner--modal video { max-height: 70vh; }
.qr-scanner--modal .qr-scanner__bar { width: min(92vw, 460px); border-radius: 14px;
  background: var(--color-bg-surface-1); border: 1px solid var(--color-brand-alpha-20); }
body.qr-open { overflow: hidden; }

/* ---- Study Hub "Coming Soon" placeholder ---- */
.cs-hub { max-width: 720px; margin: 0 auto; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.25rem, 5vw, 3.5rem);
  border: 1px solid var(--color-brand-alpha-20); border-radius: 22px;
  background: var(--color-bg-surface-1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.cs-hub__badge { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-brand-primary); border: 1px solid var(--color-brand-alpha-20);
  border-radius: 999px; padding: 0.4rem 0.9rem; margin-bottom: var(--spacing-6); }
.cs-hub__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-primary);
  box-shadow: 0 0 0 0 var(--color-brand-primary); animation: csPulse 2s ease-out infinite; }
@keyframes csPulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }
.cs-hub__icon { width: 84px; height: 84px; margin: 0 auto var(--spacing-5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-alpha-20); background: rgba(212, 175, 55, 0.08); }
.cs-hub__title { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.12; margin: 0 0 var(--spacing-4);
  color: var(--color-text-primary); }
.cs-hub__desc { color: var(--color-text-secondary); font-size: var(--font-size-lg);
  line-height: 1.7; max-width: 56ch; margin: 0 auto var(--spacing-8); }
.cs-hub__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3) var(--spacing-5); text-align: left; max-width: 560px;
  margin: 0 auto var(--spacing-8); padding: 0; list-style: none; }
.cs-hub__list li { display: flex; align-items: center; gap: 0.7rem;
  color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.4; }
.cs-hub__list li svg { flex: 0 0 auto; color: var(--color-brand-primary); }
.cs-hub__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-4);
  align-items: center; justify-content: center; margin-bottom: var(--spacing-6); }
.cs-hub__note { color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: var(--font-size-sm); margin: 0; }
@media (max-width: 560px) {
  .cs-hub__list { grid-template-columns: 1fr; max-width: 340px; }
  .cs-hub__actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   32. CERTIFICATE SYSTEM - PREMIUM MOTION & MICRO-INTERACTIONS
   GPU-friendly (transform/opacity only). All entrance/looping motion is
   disabled under prefers-reduced-motion (final states shown instantly).
   ========================================================================== */

/* ---- Loading states ---- */
.cs-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-4);
  padding: clamp(2rem, 6vw, 3.5rem); text-align: center; }
.cs-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--color-brand-alpha-20);
  border-top-color: var(--color-brand-primary); animation: cs-spin 0.8s linear infinite; }
.cs-loader p { color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0; letter-spacing: 0.04em; }
.cs-loader__dots::after { content: ''; animation: cs-dots 1.4s steps(4, end) infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* Skeleton shimmer for pending cards */
.cs-skeleton { position: relative; overflow: hidden; background: var(--color-bg-surface-1);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; height: 92px; }
.cs-skeleton + .cs-skeleton { margin-top: var(--spacing-4); }
.cs-skeleton::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(232,198,106,0.08) 50%, transparent 80%);
  transform: translateX(-100%); animation: cs-sweep 1.3s ease-in-out infinite; }
@keyframes cs-sweep { to { transform: translateX(100%); } }

/* ---- Card entrance + stagger ---- */
.cs-reveal { opacity: 0; transform: translateY(18px) scale(0.985); animation: cs-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes cs-card-in { to { opacity: 1; transform: none; } }
.cs-stagger > * { opacity: 0; transform: translateY(12px); animation: cs-cell-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes cs-cell-in { to { opacity: 1; transform: none; } }

/* ---- Verified credential card ---- */
.verify-result.is-verified { position: relative; border-color: var(--color-brand-alpha-40);
  background:
    radial-gradient(circle at 50% -10%, rgba(232,198,106,0.10), transparent 55%),
    var(--color-bg-surface-1);
  box-shadow: 0 0 0 1px var(--color-brand-alpha-20), 0 24px 60px rgba(0,0,0,0.45), 0 0 46px rgba(232,198,106,0.10);
  animation: cs-credential-glow 3.6s ease-in-out 0.5s infinite; }
@keyframes cs-credential-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--color-brand-alpha-20), 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(232,198,106,0.08); }
  50% { box-shadow: 0 0 0 1px var(--color-brand-alpha-40), 0 24px 60px rgba(0,0,0,0.45), 0 0 66px rgba(232,198,106,0.20); }
}
.verify-result__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* Animated checkmark / cross badge */
.cs-badge-icon { width: 3rem; height: 3rem; flex-shrink: 0; }
.cs-check__circle { stroke: #34d399; stroke-width: 2.5; fill: none; stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: cs-draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards; }
.cs-check__path { stroke: #34d399; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 42; stroke-dashoffset: 42; animation: cs-draw 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards; }
.cs-cross__circle { stroke: #f87171; stroke-width: 2.5; fill: none; stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: cs-draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards; }
.cs-cross__line { stroke: #f87171; stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: cs-draw 0.28s ease 0.55s forwards; }
.cs-cross__line--2 { animation-delay: 0.72s; }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }

/* Shimmer sweep on the status badge (periodic, gentle) */
.verify-status { position: relative; overflow: hidden; }
.verify-status.is-shimmer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: translateX(-180%); animation: cs-badge-shimmer 3.8s ease-in-out 0.8s infinite; }
@keyframes cs-badge-shimmer { 0% { transform: translateX(-180%); } 28%, 100% { transform: translateX(320%); } }

.verify-status b { display: block; }
.verify-genuine-tag { display: inline-block; margin-top: 0.35rem; font-size: var(--font-size-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-primary);
  opacity: 0; transform: translateY(6px); animation: cs-cell-in 0.5s ease 0.9s forwards; }

/* Error state entrance */
.verify-result.is-error { animation: cs-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, cs-error-nudge 0.5s ease 0.5s; }
@keyframes cs-error-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- Result cards (portal) hover + progressive reveal ---- */
.result-card { transition: transform var(--duration-base) var(--ease-out, ease), border-color var(--duration-base), box-shadow var(--duration-base); }
.result-card:hover { transform: translateY(-4px); border-color: var(--color-brand-alpha-40);
  box-shadow: 0 20px 46px rgba(0,0,0,0.4), 0 0 34px rgba(232,198,106,0.08); }
.result-cell { transition: background var(--duration-fast); }
.result-cell:hover { background: rgba(232,198,106,0.04); }
.result-badge { transition: transform var(--duration-base); }
.result-badge--win { animation: cs-badge-pop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both; }
@keyframes cs-badge-pop { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); } }
.count-up { font-variant-numeric: tabular-nums; }

/* Admin stat hover */
.admin-stat { transition: transform var(--duration-base), border-color var(--duration-base); }
.admin-stat:hover { transform: translateY(-3px); border-color: var(--color-brand-alpha-40); }

/* ---- Certificate sheet entrance + download button states ---- */
.cert-sheet.cs-enter { animation: cs-sheet-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cs-sheet-in { 0% { opacity: 0; transform: translateY(26px) scale(0.96); } 100% { opacity: 1; transform: none; } }
/* Viewport entrance: opacity + translateY only, so it never overrides the
   inline transform: scale() that fitCert() applies to the sheet inside. */
.cert-viewport.cs-enter { animation: cs-vp-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cs-vp-in { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: none; } }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading span { visibility: hidden; }
.btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.35); border-top-color: #02040a; animation: cs-spin 0.7s linear infinite; }
.cert-toast { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border-radius: 100px;
  background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.35); color: #34d399;
  font-size: var(--font-size-sm); font-weight: 600; opacity: 0; transform: translateY(8px);
  animation: cs-cell-in 0.5s ease forwards; }
.cert-toast svg { width: 1.1rem; height: 1.1rem; }

/* ---- Reduced motion: show final states, no looping/entrance motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cs-reveal, .cs-stagger > *, .cert-sheet.cs-enter, .cert-viewport.cs-enter, .verify-genuine-tag, .result-badge--win,
  .verify-result.is-verified, .verify-result.is-error, .cert-toast {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .verify-status.is-shimmer::after, .cs-skeleton::after { animation: none !important; }
  .cs-check__circle, .cs-check__path, .cs-cross__circle, .cs-cross__line { stroke-dashoffset: 0 !important; animation: none !important; }
  .cs-spinner, .btn.is-loading::after { animation-duration: 1.4s; }
}

/* ==========================================================================
   33. CERTIFICATE SYSTEM - PREMIUM RESULT MODAL (pop-up)
   Verification and results appear in an animated, focused overlay.
   ========================================================================== */
.cs-modal-overlay {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem); overflow-y: auto;
  background: radial-gradient(circle at 50% 30%, rgba(232,198,106,0.06), transparent 60%), rgba(2, 4, 10, 0.74);
  -webkit-backdrop-filter: blur(9px) saturate(1.1); backdrop-filter: blur(9px) saturate(1.1);
  opacity: 0; animation: cs-fade-in 0.3s ease forwards;
}
.cs-modal-overlay.is-closing { animation: cs-fade-out 0.24s ease forwards; }
@keyframes cs-fade-in { to { opacity: 1; } }
@keyframes cs-fade-out { to { opacity: 0; } }
.cs-modal { position: relative; width: 100%; max-width: 660px; margin: auto; }
.cs-modal__card {
  position: relative; border-radius: 22px; overflow: hidden;
  opacity: 0; transform: translateY(26px) scale(0.94);
  animation: cs-modal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.06s forwards;
}
@keyframes cs-modal-in { to { opacity: 1; transform: none; } }
.cs-modal__close {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 6; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 1px solid var(--color-brand-alpha-20); background: rgba(2, 4, 10, 0.55); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-base);
}
.cs-modal__close:hover, .cs-modal__close:focus-visible { color: var(--color-brand-primary); border-color: var(--color-brand-alpha-40); transform: rotate(90deg); outline: none; }
/* Neutralise the standalone card margins when hosted inside the modal */
.cs-modal .verify-result, .cs-modal .result-card { margin: 0 !important; }
.cs-modal .result-card + .result-card { margin-top: var(--spacing-4) !important; }
.cs-modal__scroll { max-height: 86vh; overflow-y: auto; overflow-x: hidden; }
.cs-modal__note { border-radius: 22px; background: var(--color-bg-surface-1); border: 1px solid var(--color-brand-alpha-20);
  padding: clamp(1.75rem, 5vw, 2.75rem); text-align: center; }
.cs-modal__note .cs-badge-icon { margin: 0 auto var(--spacing-4); }
.cs-modal__note h3 { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); color: var(--color-text-primary); margin: 0 0 0.5rem; }
.cs-modal__note p { color: var(--color-text-tertiary); margin: 0 auto; max-width: 44ch; }
.cs-modal__loader { border-radius: 22px; background: var(--color-bg-surface-1); border: 1px solid var(--color-brand-alpha-20); }

@media (prefers-reduced-motion: reduce) {
  .cs-modal-overlay, .cs-modal__card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cs-modal__close:hover { transform: none; }
}

/* ==========================================================================
   34. CERTIFICATE SYSTEM - CENTERED CREDENTIAL (verified modal) + typewriter
   ========================================================================== */
.cred { position: relative; text-align: center; overflow: hidden;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 2.75rem) clamp(2rem, 4vw, 2.75rem);
  background:
    radial-gradient(circle at 50% -5%, rgba(232,198,106,0.16), transparent 58%),
    radial-gradient(circle at 50% 110%, rgba(232,198,106,0.08), transparent 55%),
    var(--color-bg-surface-1);
}
.cred__seal { width: clamp(4.2rem, 12vw, 5.2rem); height: clamp(4.2rem, 12vw, 5.2rem); margin: 0 auto var(--spacing-5);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-brand-alpha-40);
  background: radial-gradient(circle, rgba(232,198,106,0.18), rgba(2,4,10,0.2) 72%);
  box-shadow: 0 0 34px rgba(232,198,106,0.28), inset 0 0 18px rgba(232,198,106,0.12);
  animation: cred-seal-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) both, cred-seal-glow 3.4s ease-in-out 0.7s infinite; }
.cred__seal .cs-badge-icon { width: 58%; height: 58%; }
@keyframes cred-seal-in { 0% { opacity: 0; transform: scale(0.35) rotate(-35deg); } 100% { opacity: 1; transform: none; } }
@keyframes cred-seal-glow { 0%, 100% { box-shadow: 0 0 30px rgba(232,198,106,0.22), inset 0 0 18px rgba(232,198,106,0.10); }
  50% { box-shadow: 0 0 52px rgba(232,198,106,0.40), inset 0 0 22px rgba(232,198,106,0.18); } }
.cred__tag { display: inline-block; font-family: var(--font-family-body); font-size: var(--font-size-xs);
  letter-spacing: 0.34em; text-transform: uppercase; font-weight: 700; color: var(--color-brand-primary);
  margin-bottom: var(--spacing-3); opacity: 0; transform: translateY(8px); animation: cs-cell-in 0.5s ease 0.4s forwards; }
.cred__title { font-family: var(--font-family-display); font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.04; font-weight: 700;
  background: linear-gradient(120deg, #c9a84c 0%, #fff1b7 48%, #e8c66a 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #e8c66a; margin: 0 0 var(--spacing-4);
  opacity: 0; transform: translateY(14px) scale(0.96); animation: cs-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards; }
.cred__present { font-family: var(--font-family-body); font-size: var(--font-size-xs); letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--spacing-2);
  opacity: 0; animation: cs-cell-in 0.5s ease 0.5s forwards; }
.cred__name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  color: #12305c; color: var(--color-text-primary); margin: 0 auto var(--spacing-3); min-height: 1.3em; letter-spacing: 0.01em; }
.cred__name .tw-cursor { color: var(--color-brand-primary); font-style: normal; margin-left: 1px; animation: tw-blink 1s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.cred__divider { width: min(52%, 240px); height: 1px; margin: 0 auto var(--spacing-5);
  background: linear-gradient(90deg, transparent, var(--color-brand-primary), transparent);
  opacity: 0; animation: cs-cell-in 0.5s ease 0.6s forwards; }
.cred__sub { font-family: var(--font-family-heading); font-size: var(--font-size-base); color: var(--color-text-secondary);
  max-width: 44ch; margin: 0 auto var(--spacing-7); line-height: 1.6; }
.cred__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-5) var(--spacing-6);
  max-width: 480px; margin: 0 auto var(--spacing-7); text-align: center; }
@media (max-width: 460px) { .cred__grid { grid-template-columns: 1fr; gap: var(--spacing-4); } }
.cred__grid > div { opacity: 0; transform: translateY(12px); animation: cs-cell-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.cred__grid .span2 { grid-column: 1 / -1; }
.cred__grid dt { font-family: var(--font-family-body); font-size: var(--font-size-xs); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-brand-primary); margin-bottom: 0.3rem; }
.cred__grid dd { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); }
.cred__grid dd.mono { font-family: 'Courier New', monospace; letter-spacing: 0.06em; color: var(--color-brand-primary); font-size: var(--font-size-base); }
.cred__cta { opacity: 0; animation: cs-cell-in 0.5s ease 0.9s forwards; }

/* Centered error credential */
.cred--error { background: radial-gradient(circle at 50% -5%, rgba(239,68,68,0.12), transparent 58%), var(--color-bg-surface-1); }
.cred--error .cred__seal { border-color: rgba(248,113,113,0.4); background: radial-gradient(circle, rgba(248,113,113,0.16), rgba(2,4,10,0.2) 72%);
  box-shadow: 0 0 30px rgba(248,113,113,0.22); animation: cred-seal-in 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.cred--error .cred__title { background: none; -webkit-text-fill-color: initial; color: #f87171; }
.cred--error .cred__tag { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
  .cred__seal, .cred__tag, .cred__title, .cred__present, .cred__divider, .cred__grid > div, .cred__cta {
    animation: none !important; opacity: 1 !important; transform: none !important; }
  .cred__name .tw-cursor { animation: none !important; }
}

/* ---- Admin toast (export confirmation) ---- */
.admin-toast { position: fixed; left: 50%; bottom: 24px; z-index: 5000; display: inline-flex; align-items: center;
  gap: 0.6rem; padding: 0.75rem 1.3rem; border-radius: 100px; max-width: calc(100vw - 2rem);
  background: rgba(16,185,129,0.16); border: 1px solid rgba(16,185,129,0.4); color: #34d399;
  font-size: var(--font-size-sm); font-weight: 600; box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  transform: translate(-50%, 20px); opacity: 0; animation: admin-toast-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
.admin-toast svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.admin-toast.is-out { animation: admin-toast-out 0.4s ease forwards; }
@keyframes admin-toast-in { to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes admin-toast-out { to { transform: translate(-50%, 20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .admin-toast { animation: none !important; opacity: 1 !important; transform: translate(-50%, 0) !important; } }

/* ---- Result picker (multiple matches) ---- */
.cred-picklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; width: 100%; max-width: 460px; margin: 0.5rem auto 0.5rem; }
.cred-pick { display: flex; align-items: center; gap: 0.9rem; width: 100%; min-width: 0; padding: 0.85rem 1rem;
  border: 1px solid var(--color-brand-alpha-20); border-radius: 14px; background: rgba(255,255,255,0.02);
  cursor: pointer; text-align: left; color: inherit; font-family: inherit;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
  opacity: 0; transform: translateY(10px); animation: cs-cell-in 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.cred-pick:hover, .cred-pick:focus-visible { border-color: var(--color-brand-alpha-40);
  background: rgba(232,198,106,0.06); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.35); outline: none; }
.cred-pick__icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-brand-alpha-10); border: 1px solid var(--color-brand-alpha-20); color: var(--color-brand-primary); }
.cred-pick__icon svg { width: 1.25rem; height: 1.25rem; }
.cred-pick__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cred-pick__name { font-family: var(--font-family-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); line-height: 1.15; }
.cred-pick__meta { font-size: var(--font-size-sm); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-pick__badge { flex-shrink: 0; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.32rem 0.7rem; border-radius: 100px; white-space: nowrap; }
.cred-pick__badge.win { background: var(--color-brand-alpha-10); color: var(--color-brand-primary); border: 1px solid var(--color-brand-alpha-40); }
.cred-pick__badge.part { background: rgba(255,255,255,0.05); color: var(--color-text-secondary); border: 1px solid rgba(255,255,255,0.12); }
.cred-pick__arrow { flex-shrink: 0; color: var(--color-brand-primary); opacity: 0.7; transition: transform 0.25s; }
.cred-pick:hover .cred-pick__arrow { transform: translateX(3px); opacity: 1; }
.cred-back { position: absolute; top: 0.9rem; left: 1.1rem; z-index: 4; background: none; border: none; padding: 0.3rem 0.4rem;
  color: var(--color-brand-primary); font-family: var(--font-family-body); font-size: var(--font-size-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 8px; transition: background 0.2s; }
.cred-back:hover, .cred-back:focus-visible { background: var(--color-brand-alpha-10); outline: none; }
@media (max-width: 430px) {
  .cred-pick { padding: 0.72rem 0.8rem; gap: 0.65rem; }
  .cred-pick__icon { width: 2.15rem; height: 2.15rem; }
  .cred-pick__arrow { display: none; }
  .cred-pick__badge { font-size: 0.62rem; padding: 0.28rem 0.55rem; }
}
@media (prefers-reduced-motion: reduce) { .cred-pick { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* ---- Print: worksheet (Study Hub) - only when body.ws-printing is set ----
   Forces a true A4 layout on EVERY device. On phones the layout viewport is
   ~380px, so a width:100% sheet made the browser lay the paper out at phone
   width and then scale it - producing clipped, misaligned PDFs. Pinning the
   container and every paper to 210mm makes the print engine compose at real
   A4 width regardless of screen size. */
@media print {
  @page { size: A4 portrait; margin: 0; }
  body.ws-printing { width: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.ws-printing * { visibility: hidden !important; }
  body.ws-printing #wsSheet, body.ws-printing #wsSheet * { visibility: visible !important; }
  body.ws-printing #wsSheet {
    position: absolute; left: 0; top: 0; right: auto;
    width: 210mm; max-width: 210mm; min-width: 210mm; margin: 0;
    box-shadow: none; border-radius: 0; padding: 0; background: #fff;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Each question paper and each answer key prints on its own A4 page. */
  body.ws-printing .ws-paper {
    width: 210mm; max-width: 210mm; min-height: 297mm; box-sizing: border-box;
    break-inside: auto; break-after: page; page-break-after: always;
    padding: 14mm 15mm; margin: 0; border-top: 0 !important; border-radius: 0; overflow: visible; }
  body.ws-printing .ws-paper:last-child { break-after: auto; page-break-after: auto; min-height: 0; }
  /* Keep every inner block inside the printable column. */
  body.ws-printing .ws-paper * { max-width: 100%; }
  /* The single in-flow watermark is replaced by a per-page fixed watermark below. */
  body.ws-printing .ws__wm { display: none !important; }
  /* Per-page watermark: fixed-position elements are painted on EVERY printed
     page, so the brand seal + diagonal text appear on every A4 sheet. */
  body.ws-printing::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(https://inspiretalenthub.in/assets/cert/seal.png);
    background-repeat: no-repeat; background-position: center center; background-size: 58% auto;
    opacity: 0.05; z-index: 2147483000; pointer-events: none;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body.ws-printing::after {
    content: "INSPIRE TALENT HUB"; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg); white-space: nowrap;
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; letter-spacing: 0.14em;
    font-size: 52px; color: #12305c; opacity: 0.05; z-index: 2147483000; pointer-events: none;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body.ws-printing .ws__sec, body.ws-printing .ws__case { break-after: avoid; page-break-after: avoid; }
  body.ws-printing .ws__list li { break-inside: avoid; page-break-inside: avoid; }
  body.ws-printing .ws__head { break-after: avoid; page-break-after: avoid; }
  body.ws-printing .ws__lines { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ===== Study Hub - student dashboard & experience ===== */
.sh-hometabs { display: inline-flex; gap: 0.4rem; padding: 0.35rem; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(232,198,106,0.22); margin: 0 auto var(--spacing-8); }
.sh-hometabs { display: flex; width: fit-content; }
.sh-hometab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border-radius: 999px;
  border: 0; background: transparent; color: var(--color-text-secondary); font-family: var(--font-family-body);
  font-weight: 600; font-size: var(--font-size-sm); cursor: pointer; transition: background .2s ease, color .2s ease; }
.sh-hometab.is-on { background: linear-gradient(135deg, #e8c66a, #f0d488); color: #1a1200; box-shadow: 0 6px 16px rgba(232,198,106,0.3); }
.sh-hometab:not(.is-on):hover { color: #f0d488; }

.sh-dash { display: grid; gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-hi { font-family: var(--font-family-display); font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0; color: #fff; }
.dash-sub { margin: 0.2rem 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.dash-streak { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px;
  background: rgba(232,198,106,0.1); border: 1px solid rgba(232,198,106,0.4); color: #f0d488; font-size: var(--font-size-sm); }
.dash-streak b { font-size: 1.15rem; color: #f5dc93; }

.dash-continue { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.2rem 1.4rem; border-radius: 18px; background: linear-gradient(135deg, rgba(232,198,106,0.14), rgba(232,198,106,0.04));
  border: 1px solid rgba(232,198,106,0.35); }
.dash-continue__k { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: #d9b757; }
.dash-continue__txt b { display: block; font-family: var(--font-family-display); font-size: 1.2rem; color: #fff; margin: 0.15rem 0; }
.dash-continue__m { font-size: 0.82rem; color: var(--color-text-secondary); }
.dash-continue__act { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dash-continue__act .btn { padding: 0.6rem 1.1rem; }

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.dash-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.1rem 1.2rem; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.dash-stat__ic { color: #e8c66a; margin-bottom: 0.25rem; }
.dash-stat__val { font-family: var(--font-family-display); font-size: 1.7rem; line-height: 1; color: #fff; }
.dash-stat__lbl { font-size: 0.78rem; color: var(--color-text-secondary); }
.dash-stat--gold { border-color: rgba(232,198,106,0.45); background: rgba(232,198,106,0.08); }
.dash-stat--gold .dash-stat__val { color: #f0d488; }
.dash-stat--weak { border-color: rgba(224,122,95,0.4); }
.dash-stat--weak .dash-stat__val { color: #e8927a; }

.dash-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dash-card { padding: 1.3rem 1.4rem; border-radius: 18px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.dash-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.dash-card__head h3 { font-family: var(--font-family-display); font-size: 1.1rem; color: #fff; margin: 0; }
.dash-card__note { font-size: 0.75rem; color: var(--color-text-secondary); }
.dash-mini { border: 1px solid rgba(232,198,106,0.4); background: transparent; color: #e8c66a; border-radius: 8px;
  padding: 0.2rem 0.6rem; font-size: 0.72rem; cursor: pointer; }
.dash-mini:hover { background: rgba(232,198,106,0.12); }

.dash-goal { display: flex; align-items: center; gap: 1rem; }
.dash-ring__bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 8; }
.dash-ring__fg { fill: none; stroke: url(#dashgrad); stroke: #e8c66a; stroke-width: 8; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 42px 42px; transition: stroke-dashoffset .6s ease; }
.dash-ring__t { fill: #fff; font-size: 15px; font-weight: 700; font-family: var(--font-family-display); }
.dash-goal__txt b { display: block; color: #fff; margin-bottom: 0.2rem; }
.dash-goal__txt span { font-size: 0.82rem; color: var(--color-text-secondary); }

.dash-bar { display: block; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 0.4rem; }
.dash-bar__fill { display: block; height: 100%; border-radius: 99px; }
.dash-bar__fill--gold { background: linear-gradient(90deg, #e8c66a, #f5dc93); }
.dash-bar__fill--ok { background: linear-gradient(90deg, #6fae8f, #86c6a6); }
.dash-bar__fill--weak { background: linear-gradient(90deg, #d98a6a, #e8a488); }

.dash-weak { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.dash-weak li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-weak__info { flex: 1 1 260px; }
.dash-weak__info b { color: #fff; }
.dash-weak__info span { display: block; font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 0.1rem; }
.dash-weak__act { display: flex; gap: 0.5rem; }
.dash-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: 999px;
  border: 1px solid rgba(232,198,106,0.4); background: rgba(232,198,106,0.06); color: #e8c66a; font-size: 0.78rem;
  cursor: pointer; font-family: var(--font-family-body); transition: background .2s ease, transform .2s ease; }
.dash-chip:hover { background: rgba(232,198,106,0.15); transform: translateY(-1px); }
.dash-chip--gold { background: linear-gradient(135deg, #e8c66a, #f0d488); color: #1a1200; border-color: transparent; }

.dash-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.dash-subs li { cursor: pointer; padding: 0.55rem 0.7rem; border-radius: 12px; transition: background .2s ease; }
.dash-subs li:hover { background: rgba(255,255,255,0.05); }
.dash-subs__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.dash-subs__row b { color: #fff; }
.dash-subs__row span { font-size: 0.78rem; color: var(--color-text-secondary); }

.dash-taglist, .dash-bms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--color-text-primary); }
.dash-tag--gold { background: rgba(232,198,106,0.1); border-color: rgba(232,198,106,0.4); color: #f0d488; }

.dash-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dash-recent li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash-recent li:last-child { border-bottom: 0; }
.dash-recent__dot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.dash-recent__dot--gold { background: #f0d488; } .dash-recent__dot--ok { background: #86c6a6; } .dash-recent__dot--weak { background: #e8a488; }
.dash-recent__ch { color: #fff; font-weight: 600; font-size: 0.88rem; }
.dash-recent__meta { color: var(--color-text-secondary); font-size: 0.76rem; margin-left: auto; }
.dash-recent__score { color: #e8c66a; font-size: 0.82rem; flex-shrink: 0; }
.dash-empty { color: var(--color-text-secondary); font-size: 0.85rem; margin: 0.2rem 0; }

/* Chapter-hub action bar: bookmark + progress chip */
.sh-hubbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.sh-hubbar__chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.8rem; }
.sh-hubbar__chip--gold { background: rgba(232,198,106,0.12); border: 1px solid rgba(232,198,106,0.4); color: #f0d488; }
.sh-hubbar__chip--ok { background: rgba(111,174,143,0.12); border: 1px solid rgba(111,174,143,0.4); color: #8fd0b0; }
.sh-hubbar__chip--weak { background: rgba(224,138,106,0.12); border: 1px solid rgba(224,138,106,0.4); color: #e8a488; }
.sh-hubbar__chip--new { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--color-text-secondary); }
.sh-bookmark { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid rgba(232,198,106,0.45); background: transparent; color: #e8c66a; font-family: var(--font-family-body);
  font-size: 0.82rem; cursor: pointer; transition: background .2s ease, color .2s ease; }
.sh-bookmark:hover { background: rgba(232,198,106,0.1); }
.sh-bookmark.is-on { background: linear-gradient(135deg, #e8c66a, #f0d488); color: #1a1200; border-color: transparent; }
.sh-bookmark.is-on svg { fill: #1a1200; }

/* Chapter search filter */
.sh-filter { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); margin-bottom: 1rem; max-width: 420px; }
.sh-filter__ic { color: var(--color-text-secondary); display: inline-flex; }
.sh-filter__in { flex: 1; border: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-family-body);
  font-size: var(--font-size-sm); outline: none; }
.sh-filter__in::placeholder { color: var(--color-text-secondary); }

/* Chapter completion badges */
.sh-chap__badge--gold { background: rgba(232,198,106,0.15); color: #f0d488; border: 1px solid rgba(232,198,106,0.4); }
.sh-chap__badge--done { background: rgba(111,174,143,0.15); color: #8fd0b0; border: 1px solid rgba(111,174,143,0.35); }

@media (max-width: 760px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-grid2 { grid-template-columns: 1fr; }
}

/* ===== Study Hub - Priority 2 UI/UX polish (refinement only) ===== */
/* Cleaner focus rings that hug pill/chip controls (vs the global 4px offset) */
.sh-hometab:focus-visible, .dash-chip:focus-visible, .sh-bookmark:focus-visible,
.dash-mini:focus-visible, .sh-filter__in:focus-visible {
  outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.sh-grade:focus-visible, .sh-sub:focus-visible, .sh-chap:focus-visible,
.sh-tool:focus-visible, .dash-subs__btn:focus-visible {
  outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }

/* Keyboard-accessible subject rows (now real buttons) */
.dash-subs__btn { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 0.55rem 0.7rem; border-radius: 12px; color: inherit; font-family: inherit;
  transition: background 0.2s ease; }
.dash-subs__btn:hover { background: rgba(255,255,255,0.05); }

/* Consistent hover elevation & feedback on dashboard cards/stats */
.dash-card, .dash-stat { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.dash-stat:hover { transform: translateY(-2px); border-color: rgba(232,198,106,0.32); }
.dash-continue { transition: box-shadow 0.25s ease; }
.dash-continue:hover { box-shadow: 0 10px 30px rgba(232,198,106,0.14); }

/* Subtle staggered entrance for dashboard blocks */
.sh-dash > * { animation: dashUp 0.5s cubic-bezier(.2,.7,.3,1) both; }
.sh-dash > *:nth-child(2) { animation-delay: .04s; } .sh-dash > *:nth-child(3) { animation-delay: .08s; }
.sh-dash > *:nth-child(4) { animation-delay: .12s; } .sh-dash > *:nth-child(5) { animation-delay: .16s; }
.sh-dash > *:nth-child(6) { animation-delay: .20s; } .sh-dash > *:nth-child(n+7) { animation-delay: .24s; }
@keyframes dashUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Comfortable touch targets on small screens */
@media (max-width: 760px) {
  .sh-hometab, .dash-chip, .sh-bookmark, .dash-mini { min-height: 42px; }
  .dash-continue__act { width: 100%; }
  .dash-continue__act .btn { flex: 1 1 auto; justify-content: center; }
  .dash-hi { font-size: 1.5rem; }
}

/* Respect reduced motion for every new dashboard/hub animation */
@media (prefers-reduced-motion: reduce) {
  .sh-dash > *, .dash-card, .dash-stat, .dash-continue, .dash-subs__btn { animation: none !important; transition: none !important; transform: none !important; }
  .dash-ring__fg, .dash-bar__fill { transition: none !important; }
}

/* ===== Premium editorial content - insight cards (replaces walls of prose) ===== */
.ith-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.3rem; max-width: 1120px; margin: 0 auto; }
.ith-cards--2 { max-width: 900px; }
.ith-card { position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.75rem 1.6rem 1.65rem 1.9rem; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(232,198,106,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.ith-card:hover { transform: translateY(-4px); border-color: rgba(232,198,106,0.42);
  box-shadow: 0 18px 44px rgba(0,0,0,0.3); }
.ith-card::before { content: ""; position: absolute; left: 0; top: 1.75rem; bottom: 1.65rem; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(#e8c66a, rgba(232,198,106,0)); }
.ith-card__num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 12px; font-family: var(--font-family-display);
  font-weight: 700; font-size: 1.05rem; color: #1a1200;
  background: linear-gradient(135deg, #e8c66a, #f0d488); box-shadow: 0 6px 16px rgba(232,198,106,0.3); }
.ith-card p { margin: 0; color: var(--color-text-secondary); font-size: 0.96rem; line-height: 1.72; max-width: none !important; }
.ith-card p a, .ith-card a { color: #e8c66a; text-decoration: none; border-bottom: 1px solid rgba(232,198,106,0.4); }
.ith-card p a:hover { color: #f5dc93; }
/* subtle staggered entrance when the group reveals */
.reveal.is-visible .ith-card, .reveal.visible .ith-card, .reveal.in-view .ith-card,
.ith-cards.reveal.is-visible .ith-card { animation: ithCardUp 0.5s cubic-bezier(.2,.7,.3,1) both; }
.ith-cards .ith-card:nth-child(2) { animation-delay: 0.07s; }
.ith-cards .ith-card:nth-child(3) { animation-delay: 0.14s; }
.ith-cards .ith-card:nth-child(4) { animation-delay: 0.21s; }
@keyframes ithCardUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .ith-card { padding: 1.4rem 1.3rem 1.3rem 1.55rem; } }
@media (prefers-reduced-motion: reduce) { .ith-card { animation: none !important; transition: none !important; transform: none !important; } }

/* ==========================================================================
   STUDY HUB - UI/UX REVAMP (mobile-first, native only)
   Layered after the base .sh-* rules so it wins by source order.
   Spacing uses the 8-point token scale exclusively:
   --spacing-2 = 8px · --spacing-4 = 16px · --spacing-6 = 24px · --spacing-8 = 32px
   All interactive elements are >= 44x44px touch targets.
   ========================================================================== */

/* Shell rhythm ----------------------------------------------------------- */
.sh-shell { max-width: 960px; margin: 0 auto; }
.sh-path { margin-bottom: var(--spacing-6); gap: var(--spacing-1); }

/* Step headers: clear visual hierarchy ---------------------------------- */
.sh-step__head { gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.sh-step__title { letter-spacing: -0.01em; }
.sh-step__sub { color: var(--color-text-tertiary); margin-top: var(--spacing-1); }

/* Back button - >=44px touch target with tactile press ------------------ */
.sh-back {
  min-height: 44px;
  padding: var(--spacing-2) var(--spacing-4);
  gap: var(--spacing-2);
  border-radius: 12px;
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.sh-back:hover { transform: translateX(-2px); }
.sh-back:active { transform: scale(0.97); }
.sh-back:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* Board toggle pills - >=44px, animated active state -------------------- */
.sh-boards { gap: var(--spacing-2); margin-bottom: var(--spacing-6); }
.sh-board {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-6);
  transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.sh-board:active { transform: scale(0.97); }
.sh-board:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }

/* ----------------------------------------------------------------------- */
/* GRADE / CLASS CARDS - mobile-first grid, premium hover                  */
/* ----------------------------------------------------------------------- */
.sh-grades {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}
.sh-grade {
  min-height: 44px;
  padding: var(--spacing-6) var(--spacing-4);
  border-radius: 16px;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.sh-grade:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--color-brand-primary);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-brand-alpha-20) inset;
}
.sh-grade:active { transform: translateY(-1px) scale(0.99); }
.sh-grade:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.sh-grade__n { transition: color 0.22s ease; }
.sh-grade:hover .sh-grade__n { color: var(--color-brand-primary); }

/* ----------------------------------------------------------------------- */
/* SUBJECT CARDS                                                           */
/* ----------------------------------------------------------------------- */
.sh-cards { gap: var(--spacing-4); }
.sh-sub {
  min-height: 44px;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-6);
  border-radius: 16px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}
.sh-sub:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--color-brand-alpha-40);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}
.sh-sub:active { transform: scale(0.99); }
.sh-sub:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.sh-sub__arrow { transition: transform 0.22s ease, color 0.22s ease; }
.sh-sub:hover .sh-sub__arrow { transform: translateX(4px); }

/* ----------------------------------------------------------------------- */
/* CHAPTER ROWS                                                            */
/* ----------------------------------------------------------------------- */
.sh-chapters { gap: var(--spacing-2); }
.sh-chap {
  min-height: 44px;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.sh-chap:hover:not(.is-soon) {
  transform: translateX(4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.sh-chap:not(.is-soon):active { transform: translateX(2px) scale(0.995); }
.sh-chap:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.sh-chap__go { transition: transform 0.2s ease, color 0.2s ease; }
.sh-chap:hover:not(.is-soon) .sh-chap__go { transform: translateX(3px); }

/* ----------------------------------------------------------------------- */
/* STUDY-MODULE (TOOL) CARDS - mobile-first grid                           */
/* ----------------------------------------------------------------------- */
.sh-tools {
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
.sh-tool {
  min-height: 44px;
  padding: var(--spacing-6);
  border-radius: 16px;
  gap: var(--spacing-2);
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.sh-tool:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--color-brand-primary);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.sh-tool:active { transform: translateY(-1px) scale(0.99); }
.sh-tool:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.sh-tool__ic { transition: transform 0.22s ease, background-color 0.22s ease; }
.sh-tool:hover .sh-tool__ic { transform: scale(1.08) rotate(-3deg); }

.sh-note { margin-top: var(--spacing-8); padding: var(--spacing-4) var(--spacing-6); gap: var(--spacing-3); }

/* ----------------------------------------------------------------------- */
/* SCROLL-TRIGGERED CASCADE (IntersectionObserver adds .is-in)             */
/* Progressive enhancement: JS adds .sh-anim; without JS content shows.    */
/* ----------------------------------------------------------------------- */
.sh-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sh-delay, 0ms);
}
.sh-anim.is-in {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------- */
/* MOBILE-FIRST SCALE-UPS                                                  */
/* ----------------------------------------------------------------------- */
@media (min-width: 600px) {
  .sh-grades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sh-grades { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .sh-tools { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-grade, .sh-sub, .sh-chap, .sh-tool, .sh-board, .sh-back,
  .sh-sub__arrow, .sh-chap__go, .sh-tool__ic {
    transition: none !important;
  }
  .sh-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   STUDY HUB MODULES - PREMIUM UPGRADE (matches the study-preview blueprint)
   Extends the exact hover/press/focus micro-interactions, the 8-point
   spacing tokens (8/16/24/32px) and >=44px touch targets to every rendered
   module: quiz runner, interactive test (T/F + fill-in-the-blanks),
   flashcards, match game, notes & formula sheets, worksheet preview, and the
   dashboard. Layered after the base rules so it wins by source order.
   Brand colours come from CSS variables only (gold var(--color-brand-primary)).
   ========================================================================== */

/* ---- Quiz runner (.pa-*) - hub Interactive Test + Practice Arena -------- */
.pa-opts { gap: var(--spacing-3); }
.pa-opt {
  min-height: 44px;
  padding: var(--spacing-3) var(--spacing-4);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.pa-opt:not(:disabled):hover {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-alpha-10);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.pa-opt:not(:disabled):active { transform: translateY(0) scale(0.99); }
.pa-opt:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

.pa-review { gap: var(--spacing-2); }
.pa-rev summary {
  min-height: 44px;
  padding: var(--spacing-3) var(--spacing-4);
  gap: var(--spacing-3);
  transition: background-color 0.2s ease;
}
.pa-rev summary:hover { background: var(--color-brand-alpha-10); }
.pa-rev summary:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; }

/* ---- Interactive Test - True/False & Fill-in-the-blanks (.ts-*) --------- */
.ts__seg { gap: var(--spacing-2); }
.ts__opt {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* "Exit game" affordance in flashcards & match - real 44px touch target,
   still centred as a block (width:max-content keeps margin:auto working). */
.fc__exit {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: 12px;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.fc__exit:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.ts__opt:not(.is-on):hover { border-color: var(--color-brand-alpha-40); transform: translateY(-1px); }
.ts__opt:active { transform: scale(0.97); }
.ts__opt:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* ---- Flashcards (.fc-*) ------------------------------------------------- */
.fc__card:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; border-radius: 18px; }

/* ---- Match game (.mt-*) ------------------------------------------------- */
.mt__col { gap: var(--spacing-3); }
.mt-tile {
  padding: var(--spacing-3) var(--spacing-4);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.mt-tile:hover:not(.is-done):not(.is-sel) {
  border-color: var(--color-brand-primary);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.mt-tile:not(.is-done):active { transform: scale(0.98); }
.mt-tile:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }

/* ---- Notes / Formula sheet / Exam tips (.notes-*) ----------------------- */
.notes__formulas { gap: var(--spacing-3); }
.notes__list { gap: var(--spacing-3); }
.notes__cta { gap: var(--spacing-4); margin-top: var(--spacing-8); }

/* ---- Worksheet / exam-paper preview controls (.ws-preview-*) ------------ */
.ws-preview__opts { gap: var(--spacing-3); }
.ws-preview__sel {
  min-height: 44px;
  padding: var(--spacing-2) var(--spacing-3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ws-preview__sel:hover { border-color: var(--color-brand-alpha-40); }
.ws-preview__sel:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* ---- Dashboard (.dash-*) - upgrade to blueprint hover ------------------- */
.dash-stats { gap: var(--spacing-3); }
.dash-stat { padding: var(--spacing-4); }
.dash-stat:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--color-brand-primary);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.dash-card { padding: var(--spacing-4) var(--spacing-6); }
.dash-subs__btn {
  min-height: 44px;
  padding: var(--spacing-3) var(--spacing-4);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.dash-subs__btn:active { transform: scale(0.99); }

/* ---- Guarantee 44px targets on every module action button -------------- */
.notes__cta .btn, .ts__actions .btn, .pa-quiz__actions .btn,
.pa-result__actions .btn, .dash-continue__act .btn, .dash-weak__act .btn {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .pa-opt, .ts__opt, .mt-tile, .dash-stat, .dash-subs__btn { transition: none !important; transform: none !important; }
}

/* Practice/quiz category chips - enforce 44px touch target + focus ring */
.pa-chips { gap: var(--spacing-3); }
.pa-chip { min-height: 44px; }
.pa-chip:not(.is-on):active { transform: scale(0.97); }
.pa-chip:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* Gallery with a single real photo - centre it at a readable size */
.gallery-masonry--single { column-count: 1; max-width: 760px; margin-left: auto; margin-right: auto; }
.gallery-more-note { text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm);
  margin: var(--spacing-8) auto 0; max-width: 60ch; }

/* Success-story cards without a photo - single, readable column */
.case-study--nomedia { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   TYPOGRAPHY SYSTEM - font-family mapping (Cormorant / EB Garamond / Inter)
   Headings use Cormorant Garamond (--font-family-display/heading).
   The rules below route the two exceptions:
     1. Every NUMBER to one standard font (Inter, tabular figures).
     2. Long-form READING text to EB Garamond.
   Layered last so it wins by source order over per-component font rules.
   ========================================================================== */

/* ---- Numbers: one standard font with aligned (tabular) figures ---------- */
.countdown-num,
.stat-number, .stat-static,
.recap-stat b,
.mini-stat b,
.ith-table .ith-table__num,
.ith-card__num,
.pa-ring__num,
.pa-combo b,
.sh-grade__n,
.fc-summary__ring span,
.dash-continue__txt b,
.dash-stat__val,
.dash-ring__t,
.admin-stat b,
.sh-promo__card b,
.process-step::before {
  font-family: var(--font-family-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---- Long-form reading text: EB Garamond, with breathing room ----------- */
.ith-lead,
.ith-card p,
.ith-pullquote,
.notes__list li,
.case-study .section-desc {
  font-family: var(--font-family-read);
}
.ith-card p,
.notes__list li {
  line-height: 1.8;
}
.ith-lead { line-height: 1.75; }

/* Nav breathing room: at 1024–1300px the wordmark and the first nav item sat
   flush against each other. Guarantee a gap and let the link row tighten
   slightly instead of colliding with the brand. */
.index-nav { column-gap: var(--spacing-8); }
.index-nav__logo { flex: 0 0 auto; }
@media (min-width: 1024px) and (max-width: 1300px) {
  .index-nav__links { gap: 1.5rem; }
}

/* Contact detail cards: promoted from h3 to h2 for correct heading order;
   keep the original card-heading appearance. */
.contact-card__h { font-family: var(--font-family-heading); font-size: var(--font-size-lg);
  color: var(--color-text-primary); margin: 0 0 var(--spacing-2); }

/* ==========================================================================
   NO-JAVASCRIPT FALLBACK (indexability + resilience)
   .reveal starts hidden and is un-hidden by script.js. If JavaScript never
   runs - a crawler that does not execute it, a failed script, a restrictive
   network - that content must still be readable rather than invisible.
   The inline bootstrap swaps html.no-js -> html.js, so this only applies
   when scripting genuinely did not run.
   ========================================================================== */
html.no-js .reveal,
html.no-js .reveal-left,
html.no-js .reveal-right,
html.no-js .hm-reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
@media (scripting: none) {
  .reveal, .reveal-left, .reveal-right, .hm-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ICON SNAKE - a low-opacity trail of arena/instrument icons that drifts
   left↔right behind section text as you scroll. Injected by ith-snake.js into
   position:relative sections; clipped to the section so it never adds overflow.
   Purely decorative: pointer-events none, hidden for reduced-motion.
   ========================================================================== */
.ith-snake {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ith-snake__row {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 8vw, 6.5rem);
  padding-inline: 4vw;
  will-change: transform;
}
.ith-snake__i {
  flex: 0 0 auto;
  width: clamp(26px, 3vw, 40px);
  height: clamp(26px, 3vw, 40px);
  color: var(--color-brand-primary, #e8c66a);
  opacity: 0.30;
  transform: translateY(var(--wy, 0px));
}
@media (prefers-reduced-motion: reduce) { .ith-snake { display: none; } }

/* Snake horizontal loop: left → right → left, forever. Alternate sections
   drift the opposite way. (Motion already disabled above for reduced-motion.) */
.ith-snake__row { animation: ith-snake-loop 24s ease-in-out infinite; }
.ith-snake--rev .ith-snake__row { animation-direction: reverse; }
@keyframes ith-snake-loop {
  0%   { transform: translate(-170px, -50%); }
  50%  { transform: translate(170px, -50%); }
  100% { transform: translate(-170px, -50%); }
}

/* ==========================================================================
   NAV "Register" CTA button - prominent, animated (added Aug 2026)
   ========================================================================== */
.index-nav__cta {
  position: relative;
  overflow: hidden;
  color: #14100a !important;
  background: linear-gradient(135deg, var(--color-brand-primary, #e8c66a), var(--color-brand-secondary, #c9a84c));
  border-radius: 999px;
  padding: 0.5rem 1.2rem !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(232, 198, 106, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.index-nav__cta::after { display: none !important; }   /* no underline */
.index-nav__cta::before {                               /* shine sweep */
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  animation: nav-cta-shine 4s ease-in-out infinite;
}
@keyframes nav-cta-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.index-nav__cta:hover { color: #14100a !important; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(232, 198, 106, 0.5); }
@media (prefers-reduced-motion: reduce) { .index-nav__cta::before { animation: none; display: none; } }

}