/* ================================================================
   STUDENT HELP SQUAD — Luxury Theme Layer (Charcoal + Platinum)
   ----------------------------------------------------------------
   Load AFTER styles.css. This file re-tokenises the design system
   to a dark, premium charcoal-and-platinum palette and surgically
   overrides every hard-coded light surface with glass + neumorphic
   treatment. No HTML changes required — class surface is preserved.
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   1.  ROOT TOKENS — redefine the palette in place.
   Variable NAMES from v2 are reused so every selector that calls
   var(--teal), var(--cream), var(--ink) etc. picks up the new
   luxury values automatically.
   ────────────────────────────────────────────────────────────── */
:root {
  /* Brand: replaced navy/sky with platinum + silver */
  --teal:        #c0c5cf;          /* primary platinum */
  --teal-light:  rgba(192,197,207,0.10);
  --teal-dark:   #e8eaed;          /* "darker" = brighter on dark bg */
  --indigo:      #c0c5cf;
  --violet:      #a8adb7;
  --amber:       #d4af37;          /* champagne gold (used very sparingly) */
  --amber-light: rgba(212,175,55,0.14);
  --coral:       #9eb1a3;          /* muted sage for "success" hits */
  --coral-light: rgba(158,177,163,0.16);
  --blue:        #8d97a8;
  --blue-light:  rgba(141,151,168,0.14);
  --purple:      #a8adb7;
  --sun:         #d4af37;
  --sun-light:   rgba(212,175,55,0.14);
  --pink:        #c0c5cf;

  /* Surfaces — dark base, layered up */
  --cream:       #14171d;          /* primary surface (was #f8fafc) */
  --cream-dark:  #1a1d23;          /* slightly elevated (was #eff6ff) */
  --white:       #1c2027;          /* "white" cards = elevated charcoal */

  /* Ink (text) — light on dark */
  --ink:         #f1f3f6;
  --ink-soft:    #b8bcc4;
  --ink-muted:   #7a818c;

  /* Borders — hairline silver, almost invisible at rest */
  --border:        rgba(192,197,207,0.10);
  --border-strong: rgba(192,197,207,0.22);

  /* Radii — slightly tighter for a more architectural feel */
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Shadows — deep blacks with platinum highlight */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40),
                 inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow:      0 8px 24px rgba(0,0,0,0.45),
                 0 2px 6px rgba(0,0,0,0.30),
                 inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-lg:   0 24px 56px rgba(0,0,0,0.55),
                 0 8px 16px rgba(0,0,0,0.35),
                 inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-xl:   0 40px 90px rgba(0,0,0,0.65),
                 0 12px 28px rgba(0,0,0,0.40),
                 inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glow: 0 0 0 6px rgba(192,197,207,0.08);
  --ring:        0 0 0 4px rgba(192,197,207,0.18);

  /* Gradients — platinum + champagne, no more navy/blue */
  --gradient-primary: linear-gradient(135deg, #d8dde6 0%, #8e95a3 100%);
  --gradient-hero:    linear-gradient(135deg, #f0f2f5 0%, #c0c5cf 45%, #8e95a3 100%);
  --gradient-warm:    linear-gradient(135deg, #d4af37 0%, #a48126 100%);
  --gradient-cool:    linear-gradient(135deg, #c0c5cf 0%, #6b7280 100%);
  --gradient-mint:    linear-gradient(135deg, #b8c4b0 0%, #8d97a8 100%);
  --gradient-sun:     linear-gradient(135deg, #e8c89a 0%, #d4af37 100%);
  --gradient-soft:    linear-gradient(180deg, #14171d 0%, #1a1d23 100%);
  --gradient-aurora:  radial-gradient(ellipse at 20% 0%, rgba(192,197,207,0.08), transparent 50%),
                      radial-gradient(ellipse at 80% 0%, rgba(212,175,55,0.06), transparent 50%);

  /* Easing — same names, slightly slower for premium feel */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

  /* Glass + platinum — new luxury-only tokens */
  --glass-bg:        rgba(28,32,39,0.55);
  --glass-bg-strong: rgba(28,32,39,0.78);
  --glass-blur:      blur(28px) saturate(180%);
  --platinum:        #c0c5cf;
  --platinum-bright: #e8eaed;
  --platinum-deep:   #6b7280;
  --champagne:       #d4af37;
  --hairline:        rgba(192,197,207,0.14);
  --hairline-strong: rgba(192,197,207,0.26);

  /* Legacy aliases */
  --navy:        var(--teal-dark);
  --orange:      var(--champagne);
  --offwhite:    var(--cream);
  --radius-md:   var(--radius);
  --radius-sm:   10px;
  --transition:  0.32s cubic-bezier(0.22, 1, 0.36, 1);
  --font-head:   'Fraunces', 'Times New Roman', serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
}

/* ──────────────────────────────────────────────────────────────
   2.  BODY — atmospheric charcoal with subtle aurora
   ────────────────────────────────────────────────────────────── */
html { color-scheme: dark; }
body {
  background: #0b0d11;
  background-image:
    radial-gradient(1200px 700px at 12% -10%, rgba(192,197,207,0.06), transparent 60%),
    radial-gradient(1000px 600px at 88% -8%, rgba(212,175,55,0.04), transparent 60%),
    radial-gradient(1400px 800px at 50% 110%, rgba(141,151,168,0.05), transparent 70%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
  color-scheme: dark;

  /* Establish a stacking context so the ::before / ::after animated
     orbs below sit ABOVE the body background but BEHIND every child
     element (which all default to z-index: auto). */
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* ── Site-wide ambient background — Constellation Network ────
   Single-layer SVG mesh, GPU-cheap. The tile is a 240×240 pattern of
   platinum nodes + thin connecting lines + a champagne hub at centre.
   Drifts diagonally by exactly one tile width so the seam is invisible.
   No backdrop-filter, no mix-blend-mode, no per-frame paint — just a
   single composited background-position animation. */
html::before {
  content: '';
  position: fixed;
  inset: -50px;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><g fill='none' stroke='%23c0c5cf' stroke-width='0.5' opacity='0.18'><line x1='40' y1='40' x2='120' y2='120'/><line x1='200' y1='40' x2='120' y2='120'/><line x1='40' y1='200' x2='120' y2='120'/><line x1='200' y1='200' x2='120' y2='120'/><line x1='40' y1='40' x2='200' y2='40'/><line x1='40' y1='200' x2='200' y2='200'/></g><g fill='%23c0c5cf'><circle cx='40' cy='40' r='1.4' opacity='0.55'/><circle cx='200' cy='40' r='1.4' opacity='0.55'/><circle cx='40' cy='200' r='1.4' opacity='0.55'/><circle cx='200' cy='200' r='1.4' opacity='0.55'/><circle cx='40' cy='120' r='1' opacity='0.40'/><circle cx='200' cy='120' r='1' opacity='0.40'/><circle cx='120' cy='40' r='1' opacity='0.40'/><circle cx='120' cy='200' r='1' opacity='0.40'/></g><circle cx='120' cy='120' r='2.4' fill='%23d4af37' opacity='0.70'/></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
  animation: lux-network-drift 80s linear infinite;
  will-change: background-position;
  opacity: 0.85;
}
@keyframes lux-network-drift {
  from { background-position:   0px   0px; }
  to   { background-position: 240px 240px; }
}
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE — disable backdrop-filter everywhere except where
   glassmorphism is visually load-bearing. Each backdrop-filter forces
   the browser to create a new compositor layer and re-blur the content
   behind it on every paint. With 90+ instances on cards/inputs/etc.,
   scroll + initial render gets very slow on mid-range hardware.

   Whitelist (kept blurred):
   - .nav-inner          — sticky floating pill, first thing user sees
   - .partner-dropdown   — opens over content
   - .pmodal-card        — auth modal centered on dimmed page
   - .enrol-modal-card   — enrolment modal
   - .chatbot-window     — chatbot panel
   - .hero-pill          — only 4 of them, on hero only
   - mobile menu panel   — opens over content

   Everything else gets a solid translucent fill which looks identical
   at rest but is essentially free to render.
   ══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-inner,
.partner-dropdown,
.pmodal-overlay,
.pmodal-card,
.enrol-modal-card,
.enrol-overlay,
.chatbot-window,
.hero-pill,
nav.menu-open .nav-links {
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

/* Cards that lost their blur — give them a slightly more opaque
   solid surface so they still feel like discrete glass tiles rather
   than the bare body showing through. */
.how-card,
.allinone-card,
.adm-tool,
.testimonial-card,
.feature-mockup,
.disc-card,
.pricing-card,
.contact-info-item,
.contact-form-card,
.uni-chip,
.audience-tabs,
.faq-item,
.disc-filters,
.disc-cat,
.disc-search-inner,
.disc-sort,
.skill-stat-item,
.filter-tab,
.course-search input,
.course-select,
.course-card,
.tabs,
.tab-content,
.course-meta-bar,
.ai-feature-card,
.ai-use-card,
.ai-search-card,
.ai-suggest-card,
.ai-cat-btn,
.ai-section-eyebrow,
.ai-live-badge,
.ai-agent-pill,
.feature-image-pill,
.btn-ghost,
.btn-partner,
.btn-hero-secondary,
.ai-cta-secondary {
  background-color: rgba(28,32,39,0.92) !important;
}
.allinone-card:hover,
.how-card:hover,
.adm-tool:hover,
.testimonial-card:hover,
.disc-card:hover,
.pricing-card:hover,
.feature-mockup:hover,
.course-card:hover,
.ai-feature-card:hover,
.ai-use-card:hover {
  background-color: rgba(34,38,46,0.95) !important;
}

/* Content-visibility hint — let the browser skip offscreen sections
   entirely until they scroll near the viewport. Huge win for pages
   like ai.html and skills-development.html which have many sections. */
section,
footer,
.section,
.cta-section,
.features-section,
.testimonials-section,
.discover-section,
.courses-section,
.admission-section,
.ai-intro-section,
.ai-use-section,
.ai-stats-section,
.ai-cta-banner,
.adm-cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

::selection { background: rgba(212,175,55,0.30); color: var(--platinum-bright); }

/* Typography polish — refined letter-spacing for the luxury feel */
.display,
h1, h2, h3, h4 { color: var(--ink); }
.hero h1,
.section-title,
.page-banner h1,
.cta-inner h2 {
  font-weight: 400;
  letter-spacing: -1.4px;
  text-shadow: none;
}
.hero h1 em,
.section-title em,
.page-banner h1 em,
.cta-inner h2 em,
.contact-heading em,
.adm-divider-text em {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
   3.  PAGE LOADER + SCROLL PROGRESS
   ────────────────────────────────────────────────────────────── */
.page-loader { background: #0b0d11 !important; }
.scroll-progress { background: var(--gradient-hero) !important; }

/* ──────────────────────────────────────────────────────────────
   4.  NAVIGATION — dark glass pill with hairline platinum edge
   ────────────────────────────────────────────────────────────── */
.nav-inner {
  background: rgba(20,23,29,0.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 18px 48px rgba(0,0,0,0.50),
    0 4px 12px rgba(0,0,0,0.30);
}
.nav-inner::before {
  background: linear-gradient(135deg,
    rgba(192,197,207,0.35) 0%,
    transparent 30%,
    transparent 70%,
    rgba(212,175,55,0.25) 100%);
}
nav.scrolled .nav-inner {
  background: rgba(20,23,29,0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 22px 60px rgba(0,0,0,0.60),
    0 6px 16px rgba(0,0,0,0.40);
}

.nav-links a { color: var(--ink-soft); }
.nav-links a::after { background: var(--gradient-hero); }
.nav-links a:hover {
  color: var(--platinum-bright);
  background: rgba(192,197,207,0.06);
}
.nav-links a.active {
  color: var(--platinum-bright);
  background: rgba(192,197,207,0.10);
}

.logo-text { color: var(--ink); }
footer .logo-text,
footer .nav-logo .logo-img { color: var(--ink); }
.logo-badge {
  background: var(--gradient-warm);
  color: #1a1d23;
  box-shadow: 0 4px 14px rgba(212,175,55,0.30);
}
.logo-badge::after { border-top-color: #d4af37; }

.nav-divider {
  background: linear-gradient(180deg, transparent, var(--hairline-strong), transparent);
}

/* Hamburger */
.hamburger {
  background: rgba(192,197,207,0.06);
  border: 1px solid var(--hairline);
}
.hamburger:hover { background: rgba(192,197,207,0.12); }
.hamburger span { background: var(--ink); }

/* Mobile drop panel */
@media (max-width: 900px) {
  .nav-links {
    background: rgba(14,17,22,0.94);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--hairline);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 30px 80px rgba(0,0,0,0.70);
  }
}

/* ──────────────────────────────────────────────────────────────
   5.  BUTTONS — platinum gradient + glass ghost
   ────────────────────────────────────────────────────────────── */
.btn-ghost {
  color: var(--ink);
  background: rgba(192,197,207,0.08);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(192,197,207,0.25),
              0 0 0 1px rgba(232,234,237,0.40) inset;
}

.btn-primary {
  color: #14171d;
  background: var(--gradient-primary);
  box-shadow:
    0 6px 18px rgba(192,197,207,0.22),
    inset 0 1px 0 rgba(255,255,255,0.40);
}
.btn-primary:hover {
  box-shadow:
    0 14px 36px rgba(192,197,207,0.32),
    inset 0 1px 0 rgba(255,255,255,0.50);
}

.btn-partner {
  color: var(--ink);
  background: rgba(192,197,207,0.08);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-partner:hover {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(192,197,207,0.25);
}

.partner-dropdown {
  background: rgba(20,23,29,0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 60px rgba(0,0,0,0.60);
}
.partner-dropdown a { color: var(--ink-soft); }
.partner-dropdown a:hover {
  background: rgba(192,197,207,0.10);
  color: var(--platinum-bright);
}

/* ──────────────────────────────────────────────────────────────
   6.  HERO — luxury restyle
   ────────────────────────────────────────────────────────────── */
.hero::before {
  background: radial-gradient(circle, rgba(192,197,207,0.20), transparent 70%);
  opacity: 0.45;
}
.hero::after {
  background: radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
  opacity: 0.32;
}

.hero-eyebrow {
  background: rgba(192,197,207,0.06);
  border: 1px solid var(--hairline-strong);
  color: var(--platinum-bright);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 14px rgba(0,0,0,0.35);
}
.eyebrow-dot {
  background: var(--gradient-primary);
  box-shadow: 0 4px 12px rgba(192,197,207,0.30);
}
.eyebrow-dot svg { stroke: #14171d; }

.hero-sub { color: var(--ink-soft); text-shadow: none; font-weight: 400; }
.hero h1 { color: var(--ink); }

.btn-hero-primary {
  color: #14171d;
  background: var(--gradient-primary);
  box-shadow:
    0 12px 32px rgba(192,197,207,0.28),
    inset 0 1px 0 rgba(255,255,255,0.50);
  letter-spacing: 0.2px;
}
.btn-hero-primary:hover {
  box-shadow:
    0 18px 44px rgba(192,197,207,0.40),
    inset 0 1px 0 rgba(255,255,255,0.60);
}
.btn-hero-primary svg { stroke: #14171d; }

.btn-hero-secondary {
  color: var(--ink);
  background: rgba(192,197,207,0.06);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.30);
}
.btn-hero-secondary:hover {
  border-color: var(--platinum);
  color: var(--platinum-bright);
  background: rgba(192,197,207,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 32px rgba(0,0,0,0.45);
}

/* Trust bar */
.trust-bar { border-top: 1px solid var(--hairline); }
.trust-num {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trust-label { color: var(--ink-muted); }

/* Hero visual blobs */
.hero-blob-1 {
  background: radial-gradient(circle, rgba(192,197,207,0.60), transparent 70%);
  opacity: 0.35;
}
.hero-blob-2 {
  background: radial-gradient(circle, rgba(212,175,55,0.45), transparent 70%);
  opacity: 0.30;
}
.hero-blob-3 {
  background: radial-gradient(circle, rgba(141,151,168,0.45), transparent 70%);
  opacity: 0.28;
}

.hero-ring { border-color: rgba(192,197,207,0.20); }
.hero-ring:nth-child(2) { border-color: rgba(212,175,55,0.18); }
.hero-ring:nth-child(3) { border-color: rgba(141,151,168,0.20); }

.hero-image-glow {
  background: var(--gradient-hero);
  opacity: 0.25;
}
.hero-image-frame {
  background: linear-gradient(135deg,
    rgba(232,234,237,0.55) 0%,
    rgba(192,197,207,0.30) 50%,
    rgba(212,175,55,0.40) 100%);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.60),
    0 16px 32px rgba(0,0,0,0.40);
}

.hero-sparkle {
  background: var(--gradient-warm);
  color: #14171d;
  box-shadow: 0 14px 32px rgba(212,175,55,0.40);
}

.hero-pill {
  background: rgba(28,32,39,0.78);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 32px rgba(0,0,0,0.50);
}
.pill-icon { box-shadow: 0 4px 12px rgba(0,0,0,0.40); }
.pill-icon-mint   { background: var(--gradient-mint);    box-shadow: 0 4px 14px rgba(158,177,163,0.30); }
.pill-icon-indigo { background: var(--gradient-primary); box-shadow: 0 4px 14px rgba(192,197,207,0.30); color: #14171d; }
.pill-icon-rose   { background: var(--gradient-warm);    box-shadow: 0 4px 14px rgba(212,175,55,0.30); color: #14171d; }
.pill-icon-amber  { background: var(--gradient-sun);     box-shadow: 0 4px 14px rgba(232,200,154,0.26); color: #14171d; }
.pill-title { color: var(--ink); }
.pill-meta { color: var(--ink-muted); }

/* Hero "browser" card */
.hero-card {
  background: rgba(28,32,39,0.85);
  border: 1px solid var(--hairline);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.hero-card-header {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 100%);
  border-bottom: 1px solid var(--hairline);
}
.hero-card-header span { color: var(--ink-muted); }
.dash-stat {
  background: rgba(192,197,207,0.04);
  border: 1px solid var(--hairline);
}
.dash-stat:hover { border-color: var(--platinum); }
.dash-stat-num { color: var(--ink); }
.dash-stat-lbl { color: var(--ink-muted); }
.dash-stat.accent {
  background: var(--gradient-primary);
  box-shadow: 0 6px 18px rgba(192,197,207,0.24);
}
.dash-stat.accent .dash-stat-num { color: #14171d; }
.dash-stat.accent .dash-stat-lbl { color: rgba(20,23,29,0.75); }

.match-item {
  background: rgba(192,197,207,0.04);
  border: 1px solid var(--hairline);
}
.match-item:hover {
  border-color: var(--platinum);
  background: rgba(192,197,207,0.08);
}
.match-title { color: var(--ink); }
.match-co { color: var(--ink-muted); }
.match-score {
  background: var(--gradient-mint);
  color: #14171d;
  box-shadow: 0 2px 8px rgba(158,177,163,0.30);
}
.floating-badge {
  background: rgba(28,32,39,0.85);
  border: 1px solid var(--hairline);
  color: var(--ink);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.fb-dot {
  box-shadow: 0 0 0 4px rgba(192,197,207,0.20);
}

/* ──────────────────────────────────────────────────────────────
   7.  LOGOS / UNIVERSITY MARQUEE
   ────────────────────────────────────────────────────────────── */
.logos-section::after {
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.logos-label { color: var(--ink-muted); }
.logos-label::before,
.logos-label::after {
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.uni-chip {
  background: rgba(28,32,39,0.70);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 18px rgba(0,0,0,0.35);
}
.uni-chip:hover {
  border-color: var(--hairline-strong);
  background: rgba(28,32,39,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 36px rgba(0,0,0,0.55);
}
.uni-mono { color: #14171d; }
.uni-mono-indigo { background: var(--gradient-primary); }
.uni-mono-amber  { background: var(--gradient-warm); }
.uni-mono-mint   { background: var(--gradient-mint); }
.uni-mono-sky    { background: var(--gradient-cool); }
.uni-name { color: var(--ink); }

/* ──────────────────────────────────────────────────────────────
   8.  SECTION LABELS / TITLES
   ────────────────────────────────────────────────────────────── */
.section-label,
.contact-eyebrow {
  color: var(--platinum);
  letter-spacing: 1.6px;
}
.section-label::before,
.contact-eyebrow::before { background: var(--gradient-hero); }
.section-title { color: var(--ink); }
.section-sub { color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────
   9.  HOW-IT-WORKS, ALL-IN-ONE, ADMISSION TOOLS — dark glass cards
   ────────────────────────────────────────────────────────────── */
.how-card,
.allinone-card,
.adm-tool {
  --accent: var(--platinum);
  --accent-soft: rgba(192,197,207,0.18);
  background: rgba(28,32,39,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.40);
}
/* Top hairline accent (replaces the brand-coloured 3px stripe) */
.how-card::after,
.allinone-card::after,
.adm-tool::after {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--platinum), transparent);
  opacity: 0.55;
  z-index: 2;
  transition: opacity 0.4s var(--ease-out);
}
.how-card::before,
.allinone-card::before,
.adm-tool::before {
  background: radial-gradient(ellipse at top right, var(--accent-soft), transparent 70%);
  opacity: 0.25;
}
.how-card:hover,
.allinone-card:hover,
.adm-tool:hover {
  background: rgba(34,38,46,0.75);
  border-color: var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 32px 64px rgba(0,0,0,0.60),
    0 0 60px rgba(192,197,207,0.10);
}
.how-card:hover::after,
.allinone-card:hover::after,
.adm-tool:hover::after { opacity: 1; }
.how-card:hover::before,
.allinone-card:hover::before,
.adm-tool:hover::before { opacity: 0.65; }

.how-num {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.90;
}
.how-icon {
  background: rgba(192,197,207,0.10);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.30);
}
.how-card h3,
.allinone-card .aio-title,
.adm-tool h4 { color: var(--ink); }
.how-card p,
.allinone-card .aio-desc,
.adm-tool p { color: var(--ink-soft); }

.aio-icon {
  background: rgba(192,197,207,0.08);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.30);
}

.aio-tag,
.adm-tool-tag {
  background: rgba(192,197,207,0.10);
  color: var(--platinum-bright);
  border: 1px solid var(--hairline);
}
.unique {
  background: var(--gradient-warm);
  color: #14171d;
  box-shadow: 0 4px 14px rgba(212,175,55,0.32);
  border-color: transparent;
}

.adm-tool { background: rgba(28,32,39,0.55); }
.adm-tool:hover { background: rgba(34,38,46,0.75); }
.adm-tool-link { color: var(--platinum-bright); }

/* ──────────────────────────────────────────────────────────────
   10. FEATURES SECTION + TAB MOCKUPS
   ────────────────────────────────────────────────────────────── */
.features-section {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(192,197,207,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(212,175,55,0.05) 0%, transparent 55%),
    linear-gradient(180deg, #0e1116 0%, #11141a 100%);
}
.features-section::before {
  background: radial-gradient(circle, rgba(192,197,207,0.08), transparent 60%);
}
.features-section::after {
  background: radial-gradient(circle, rgba(212,175,55,0.06), transparent 60%);
}
.features-section .section-title,
.features-section .section-sub,
.features-section .section-label { color: inherit; }

.audience-tabs {
  background: rgba(28,32,39,0.60);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.45);
}
.tab-btn { color: var(--ink-muted); }
.tab-btn:hover {
  color: var(--platinum-bright);
  background: rgba(192,197,207,0.08);
}
.tab-btn.active {
  background: var(--gradient-primary);
  color: #14171d;
  box-shadow: 0 6px 16px rgba(192,197,207,0.26);
}

.feature-item { border-bottom: 1px solid var(--hairline); }
.feat-icon {
  background: rgba(192,197,207,0.08) !important;
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 10px rgba(0,0,0,0.30);
}
.feat-title { color: var(--ink); }
.feat-desc { color: var(--ink-soft); }

.feature-mockup {
  background: rgba(28,32,39,0.60);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.45);
}
.feature-mockup:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 56px rgba(0,0,0,0.60);
}
.mockup-header {
  background: rgba(20,23,29,0.65);
  border-bottom: 1px solid var(--hairline);
}
.mockup-header span { color: var(--ink-muted); }
.mock-stat {
  background: rgba(192,197,207,0.04);
  border: 1px solid var(--hairline);
}
.mock-stat:hover {
  background: rgba(192,197,207,0.08);
  border-color: var(--platinum);
}
.mock-stat-n { color: var(--ink); }
.mock-stat-l { color: var(--ink-muted); }
.mock-row {
  background: rgba(192,197,207,0.04);
  border: 1px solid var(--hairline);
}
.mock-row:hover {
  background: rgba(192,197,207,0.08);
  border-color: var(--hairline-strong);
}
.mock-name { color: var(--ink); }

/* ──────────────────────────────────────────────────────────────
   11. TESTIMONIALS
   ────────────────────────────────────────────────────────────── */
.testimonials-section {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(192,197,207,0.05), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(212,175,55,0.04), transparent 55%),
    linear-gradient(180deg, #0e1116 0%, #11141a 100%);
}
.testimonial-card {
  background: rgba(28,32,39,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.40);
}
.testimonial-card::before {
  color: rgba(212,175,55,0.20);
  font-size: 110px;
}
.testimonial-card:hover {
  background: rgba(34,38,46,0.75);
  border-color: var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 28px 60px rgba(0,0,0,0.55),
    0 0 60px rgba(212,175,55,0.06);
}
.stars { color: var(--champagne); filter: drop-shadow(0 2px 6px rgba(212,175,55,0.40)); }
.testimonial-text { color: var(--ink-soft); }
.author-avatar {
  background: rgba(192,197,207,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 12px rgba(0,0,0,0.35);
}
.author-name { color: var(--ink); }
.author-role { color: var(--ink-muted); }

/* ──────────────────────────────────────────────────────────────
   12. STATS CARD — premium dark glass with platinum trim
   ────────────────────────────────────────────────────────────── */
.stats-inner {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 60%, #1c2027 100%);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 40px 100px rgba(0,0,0,0.60),
    0 16px 32px rgba(0,0,0,0.40);
}
.stats-inner::before {
  background:
    radial-gradient(circle at 12% 28%, rgba(192,197,207,0.12), transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(212,175,55,0.10), transparent 42%);
}
.stats-head .section-label { color: var(--platinum); }
.stats-head .section-label::before { background: var(--gradient-hero); }
.stats-head .section-title { color: var(--ink); }
.stats-head .section-title em {
  background: var(--gradient-sun);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats-sub { color: var(--ink-soft); }
.stats-grid {
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.stat-block { background: rgba(192,197,207,0.03); }
.stat-block:hover { background: rgba(192,197,207,0.08); }
.stat-num {
  color: var(--platinum-bright);
  text-shadow: 0 4px 24px rgba(212,175,55,0.20);
}
.stat-label { color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────
   13. PRICING
   ────────────────────────────────────────────────────────────── */
.pricing-card {
  background: rgba(28,32,39,0.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.40);
}
.pricing-card:hover {
  border-color: var(--platinum);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 28px 60px rgba(0,0,0,0.55),
    0 0 60px rgba(192,197,207,0.10);
}
.pricing-card.featured {
  background: linear-gradient(160deg, #1c2027 0%, #14171d 100%);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 24px 60px rgba(0,0,0,0.55),
    0 0 80px rgba(212,175,55,0.12);
}
.pricing-badge {
  background: var(--gradient-warm);
  color: #14171d;
}
.pricing-plan { color: var(--platinum); }
.pricing-card.featured .pricing-plan { color: var(--champagne); }
.pricing-price { color: var(--ink); }
.pricing-card.featured .pricing-price { color: var(--platinum-bright); }
.pricing-period { color: var(--ink-muted); }
.pricing-card.featured .pricing-period { color: rgba(232,234,237,0.55); }
.pricing-desc { color: var(--ink-soft); }
.pricing-card.featured .pricing-desc { color: rgba(232,234,237,0.75); }
.pricing-divider { border-top-color: var(--hairline); }
.pricing-card.featured .pricing-divider { border-top-color: var(--hairline-strong); }
.pricing-features li { color: var(--ink-soft); }
.pricing-card.featured .pricing-features li { color: rgba(232,234,237,0.85); }
.check-icon { color: var(--champagne); }
.pricing-card.featured .check-icon { color: var(--platinum-bright); }
.btn-plan-light {
  background: rgba(192,197,207,0.08);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-plan-light:hover {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
}
.btn-plan-dark {
  background: var(--gradient-primary);
  color: #14171d;
}
.btn-plan-dark:hover {
  box-shadow: 0 10px 28px rgba(192,197,207,0.32);
}

/* ──────────────────────────────────────────────────────────────
   14. FAQ — luxury accordion
   ────────────────────────────────────────────────────────────── */
.faq-item {
  background: rgba(28,32,39,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 2px 8px rgba(0,0,0,0.30);
}
.faq-item::before { color: var(--ink-muted); }
.faq-item::after { background: var(--gradient-hero); }
.faq-item:hover {
  border-color: var(--hairline-strong);
  background: rgba(34,38,46,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 32px rgba(0,0,0,0.45);
}
.faq-item:hover::before { color: var(--platinum-bright); }
.faq-item.open {
  border-color: var(--platinum);
  background:
    radial-gradient(circle at 100% 0%, rgba(212,175,55,0.08), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(192,197,207,0.08), transparent 55%),
    rgba(28,32,39,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 26px 56px rgba(0,0,0,0.55),
    0 0 60px rgba(192,197,207,0.10);
}
.faq-item.open::before { color: var(--platinum-bright); }
.faq-q { color: var(--ink); }
.faq-icon {
  background: rgba(192,197,207,0.10);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.30);
}
.faq-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8bcc4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
.faq-item:hover .faq-icon { background: rgba(192,197,207,0.16); }
.faq-item.open .faq-icon {
  background: var(--gradient-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 8px 20px rgba(192,197,207,0.30);
}
.faq-item.open .faq-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
.faq-a { color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────
   15. CTA SECTION
   ────────────────────────────────────────────────────────────── */
.cta-section {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(192,197,207,0.08), transparent 60%),
    linear-gradient(180deg, #0e1116 0%, #0b0d11 100%);
}
.cta-section::before {
  background: var(--gradient-hero);
  opacity: 0.06;
}
.cta-inner h2 { color: var(--ink); }
.cta-inner p { color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────
   16. FOOTER — deep matte black
   ────────────────────────────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, #0a0c10 0%, #060708 100%);
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
}
.footer-top { border-bottom: 1px solid var(--hairline); }
.footer-brand p { color: var(--ink-soft); }
.footer-col h4 { color: var(--platinum-bright); letter-spacing: 1.4px; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--platinum-bright); }
.social-link {
  background: rgba(192,197,207,0.06);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 12px rgba(0,0,0,0.40);
}
.social-link:hover {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 10px 22px rgba(192,197,207,0.26);
}
.footer-bottom p { color: var(--ink-muted); }
.footer-legal a { color: var(--ink-muted); }
.footer-legal a:hover { color: var(--platinum-bright); }
.trust-logo {
  background: rgba(192,197,207,0.06);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.trust-logo:hover {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
}
.gdpr-badge {
  background: rgba(158,177,163,0.10);
  border: 1px solid rgba(158,177,163,0.30);
  color: #b8c4b0;
}

/* ──────────────────────────────────────────────────────────────
   17. MOBILE APP SECTION
   ────────────────────────────────────────────────────────────── */
.app-phone {
  background: linear-gradient(160deg, #1c2027 0%, #14171d 100%);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 40px 100px rgba(0,0,0,0.70);
}
.app-phone-screen {
  background: linear-gradient(160deg, #0a0c10 0%, #060708 100%);
}
.app-notch { background: #060708; }
.app-feature-item {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}
.app-check {
  background: var(--gradient-primary);
  color: #14171d;
  box-shadow: 0 4px 12px rgba(192,197,207,0.26);
}
.btn-appstore {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(192,197,207,0.25),
              inset 0 1px 0 rgba(255,255,255,0.40);
}
.btn-appstore:hover {
  background: var(--gradient-primary);
  box-shadow: 0 14px 32px rgba(192,197,207,0.36),
              inset 0 1px 0 rgba(255,255,255,0.50);
}
.btn-appstore-light {
  background: rgba(192,197,207,0.06);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-appstore-light:hover {
  background: rgba(192,197,207,0.12);
  color: var(--platinum-bright);
  border-color: var(--platinum);
}

/* ──────────────────────────────────────────────────────────────
   18. DISCOVER (search, filters, cards)
   ────────────────────────────────────────────────────────────── */
.discover-section {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(192,197,207,0.05), transparent 55%),
    linear-gradient(180deg, #0e1116 0%, #11141a 100%);
}
.disc-search-inner {
  background: rgba(28,32,39,0.60);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 28px rgba(0,0,0,0.40);
}
.disc-search-inner:focus-within {
  border-color: var(--platinum);
  box-shadow: var(--ring),
              inset 0 1px 0 rgba(255,255,255,0.08),
              0 14px 36px rgba(0,0,0,0.55);
}
.disc-search-icon { color: var(--ink-muted); }
.disc-search-input { color: var(--ink); }
.disc-search-input::placeholder { color: var(--ink-muted); }
.disc-search-btn {
  background: var(--gradient-primary);
  color: #14171d;
  box-shadow: 0 4px 14px rgba(192,197,207,0.26);
}
.disc-search-btn:hover {
  box-shadow: 0 10px 24px rgba(192,197,207,0.38);
}

.disc-cat {
  background: rgba(28,32,39,0.55);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.disc-cat:hover {
  border-color: var(--platinum);
  color: var(--platinum-bright);
  background: rgba(28,32,39,0.78);
}
.disc-cat.active {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(192,197,207,0.32);
}

.disc-filters {
  background: rgba(28,32,39,0.55);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 32px rgba(0,0,0,0.40);
}
.disc-filter-title { color: var(--ink); }
.disc-clear { color: var(--platinum-bright); }
.disc-fl { color: var(--ink-muted); }
.disc-pill {
  background: rgba(192,197,207,0.05);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.disc-pill:hover {
  background: rgba(192,197,207,0.12);
  border-color: var(--platinum);
  color: var(--platinum-bright);
}
.disc-pill.sel {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(192,197,207,0.28);
}
.disc-rinput {
  background: rgba(192,197,207,0.05);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.disc-rinput:focus {
  border-color: var(--platinum);
  background: rgba(192,197,207,0.10);
}
.disc-divider { background: var(--hairline); }
.disc-count { color: var(--ink-muted); }
.disc-count strong { color: var(--ink); }
.disc-sort {
  background: rgba(28,32,39,0.55);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.disc-sort:hover { border-color: var(--platinum); }

.disc-card {
  background: rgba(28,32,39,0.55);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 32px rgba(0,0,0,0.40);
}
.disc-card:hover {
  border-color: var(--platinum);
  background: rgba(34,38,46,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 28px 60px rgba(0,0,0,0.60),
    0 0 60px rgba(192,197,207,0.10);
}
.disc-card-img {
  background: linear-gradient(135deg, rgba(192,197,207,0.10) 0%, rgba(212,175,55,0.08) 100%);
  height: 160px;
}

/* Photo variant — real image fills the tile, soft luxury vignette
   on top for legibility of the tag/title row below. */
.disc-card-img--photo {
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.disc-card-img--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-out);
  filter: saturate(105%) contrast(102%) brightness(0.92);
}
.disc-card:hover .disc-card-img--photo img {
  transform: scale(1.06);
  filter: saturate(115%) contrast(105%) brightness(1.0);
}
.disc-card-img--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,13,17,0) 55%, rgba(11,13,17,0.55) 100%),
    radial-gradient(ellipse at top right, rgba(212,175,55,0.10), transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Recipes / Transport SVG-icon variant — keep the centered icon
   but theme the icon stroke/fill to platinum for the luxury look. */
.disc-card-img:not(.disc-card-img--photo) svg {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.50));
  opacity: 0.92;
}
.disc-card-img:not(.disc-card-img--photo) svg [fill="white"],
.disc-card-img:not(.disc-card-img--photo) svg[fill="white"] {
  fill: var(--platinum-bright);
}
.disc-card-img:not(.disc-card-img--photo) svg [stroke="white"],
.disc-card-img:not(.disc-card-img--photo) svg[stroke="white"] {
  stroke: var(--platinum-bright);
}
.disc-card-title { color: var(--ink); }
.disc-card-loc { color: var(--ink-muted); }
.disc-card-footer { border-top: 1px solid var(--hairline); }
.disc-price { color: var(--ink); }
.disc-price-unit { color: var(--ink-muted); }
.disc-mpill {
  background: rgba(192,197,207,0.06);
  color: var(--ink-soft);
}

/* ──────────────────────────────────────────────────────────────
   19. CONTACT
   ────────────────────────────────────────────────────────────── */
.contact-section { background: transparent; }
.contact-heading { color: var(--ink); }
.contact-sub { color: var(--ink-soft); }
.contact-info-item {
  background: rgba(28,32,39,0.55);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 22px rgba(0,0,0,0.35);
}
.contact-info-item:hover {
  border-color: var(--platinum);
  background: rgba(34,38,46,0.78);
}
.contact-info-icon {
  background: rgba(192,197,207,0.10) !important;
  border: 1px solid var(--hairline);
}
.contact-info-label { color: var(--ink-muted); }
.contact-info-value { color: var(--ink); }
.contact-info-value a { color: var(--ink); }
.contact-info-value a:hover { color: var(--platinum-bright); }
.contact-reg {
  background: rgba(28,32,39,0.40);
  border: 1px dashed var(--hairline-strong);
  color: var(--ink-muted);
}
.contact-reg strong { color: var(--ink-soft); }

.contact-form-card {
  background: rgba(28,32,39,0.65);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 30px 80px rgba(0,0,0,0.55);
}
.contact-form-card::before { background: var(--gradient-hero); }
.contact-form-title { color: var(--ink); }
.contact-form-sub { color: var(--ink-muted); }
.contact-textarea {
  background: rgba(192,197,207,0.04);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
}
.contact-textarea:focus {
  border-color: var(--platinum);
  background: rgba(192,197,207,0.08);
  box-shadow: var(--ring);
}
.contact-textarea::placeholder { color: var(--ink-muted); }

.contact-success h4 { color: var(--ink); }
.contact-success p { color: var(--ink-soft); }
.contact-success-icon {
  background: var(--gradient-primary);
  box-shadow: 0 14px 30px rgba(192,197,207,0.32);
}
.contact-success-icon svg { color: #14171d; stroke: #14171d; }

/* ──────────────────────────────────────────────────────────────
   20. ADMISSION JOURNEY
   ────────────────────────────────────────────────────────────── */
.admission-section { background: transparent; }
.adm-journey::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--platinum) 30%,
    var(--champagne) 50%,
    var(--platinum) 70%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.55;
}
.adm-step-circle {
  background: rgba(28,32,39,0.85);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-muted);
  box-shadow:
    0 0 0 8px #0b0d11,
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 18px rgba(0,0,0,0.50);
}
.adm-step:hover .adm-step-circle {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #14171d;
  box-shadow:
    0 0 0 8px #0b0d11,
    0 14px 30px rgba(192,197,207,0.36);
}
.adm-step-icon {
  background: rgba(192,197,207,0.08);
  border: 1px solid var(--hairline);
}
.adm-step h4 { color: var(--ink); }
.adm-step p { color: var(--ink-muted); }
.adm-divider::before, .adm-divider::after {
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.adm-divider-text { color: var(--ink); }

.adm-cta {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 60%, #1c2027 100%);
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 40px 100px rgba(0,0,0,0.65);
}
.adm-cta::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(192,197,207,0.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,0.18), transparent 50%);
}
.adm-cta h3 { color: var(--ink); }
.adm-cta h3 em {
  background: var(--gradient-sun);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.adm-cta p { color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────
   21. PAGE BANNER (inner-page hero)
   ────────────────────────────────────────────────────────────── */
.page-banner {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(212,175,55,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%);
}
.page-banner::before {
  background: radial-gradient(circle, rgba(192,197,207,0.20), transparent 70%);
  opacity: 0.35;
}
.page-banner::after {
  background: radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
  opacity: 0.28;
}
.page-banner-label { color: var(--platinum); letter-spacing: 1.6px; }
.page-banner-label::before { background: var(--gradient-hero); }
.page-banner h1 { color: var(--ink); text-shadow: none; }
.page-banner p { color: var(--ink-soft); text-shadow: none; font-weight: 400; }
.page-banner-img img {
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}
.collage-circle {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.30),
    0 0 40px var(--halo, rgba(192,197,207,0.30)),
    0 26px 50px rgba(0,0,0,0.55);
}

/* ──────────────────────────────────────────────────────────────
   22. PORTAL MODAL (auth) — premium dark glass
   ────────────────────────────────────────────────────────────── */
.pmodal-overlay {
  background: rgba(6,7,8,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pmodal-card,
.enrol-modal-card {
  background: rgba(20,23,29,0.92);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 40px 100px rgba(0,0,0,0.75);
  color: var(--ink);
}
.pmodal-close,
.enrol-modal-close {
  background: rgba(192,197,207,0.08);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.pmodal-close:hover,
.enrol-modal-close:hover {
  background: rgba(192,197,207,0.16);
  color: var(--platinum-bright);
}
.pmodal-title { color: var(--ink); }
.pmodal-sub { color: var(--ink-soft); }
.pmodal-role-tabs {
  background: rgba(192,197,207,0.06);
  border: 1px solid var(--hairline);
}
.pmodal-role-tab { color: var(--ink-muted); background: transparent; }
.pmodal-role-tab:hover { color: var(--platinum-bright); }
.pmodal-role-tab.active {
  background: var(--gradient-primary);
  color: #14171d;
  box-shadow: 0 4px 12px rgba(192,197,207,0.28);
}
.pform-label { color: var(--ink-soft); }
.pform-input,
.pform-phone-wrap,
input.pform-input,
select.pform-input,
textarea.pform-input {
  background: rgba(192,197,207,0.05);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
}
.pform-input:focus,
.pform-phone-wrap:focus-within {
  border-color: var(--platinum);
  background: rgba(192,197,207,0.10);
  box-shadow: var(--ring);
}
.pform-input::placeholder { color: var(--ink-muted); }
/* Phone-number country-code prefix — base styles hardcode background:white,
   which on the dark theme rendered near-white --ink text invisibly. Make
   the prefix fully transparent so it blends with the wrap, and brighten
   the "GB +44" text to platinum so it stays legible. */
.pform-phone-prefix {
  background: transparent !important;
  border-right: 1px solid var(--hairline-strong) !important;
  color: var(--platinum-bright) !important;
}
.pform-phone-input { color: var(--ink); background: transparent; }
.pform-phone-input::placeholder { color: var(--ink-muted); }
.pform-eye { color: var(--ink-muted); }
.pform-eye:hover { color: var(--platinum-bright); }
.pform-error { color: #e8a8a8; }
.btn-pform-submit {
  background: var(--gradient-primary);
  color: #14171d;
  border: none;
  box-shadow: 0 10px 26px rgba(192,197,207,0.32),
              inset 0 1px 0 rgba(255,255,255,0.50);
}
.btn-pform-submit:hover {
  box-shadow: 0 16px 38px rgba(192,197,207,0.44),
              inset 0 1px 0 rgba(255,255,255,0.60);
}

/* ──────────────────────────────────────────────────────────────
   23. CHATBOT WIDGET
   ────────────────────────────────────────────────────────────── */
.chatbot-trigger {
  background: var(--gradient-primary);
  color: #14171d;
  box-shadow: 0 14px 32px rgba(192,197,207,0.36),
              inset 0 1px 0 rgba(255,255,255,0.50);
}
.chatbot-trigger:hover {
  box-shadow: 0 20px 44px rgba(192,197,207,0.48),
              inset 0 1px 0 rgba(255,255,255,0.60);
}
.chatbot-badge {
  background: var(--champagne);
  color: #14171d;
}
.chatbot-window {
  background: rgba(20,23,29,0.94);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.65);
}
.chatbot-header {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 100%);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.chatbot-messages { background: transparent; }
.chat-bubble {
  background: rgba(192,197,207,0.06);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.chat-msg.user .chat-bubble {
  background: var(--gradient-primary);
  color: #14171d;
  border-color: transparent;
}
.chatbot-input {
  background: rgba(192,197,207,0.05);
  border-top: 1px solid var(--hairline);
}
.chatbot-input input {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.chatbot-input input::placeholder { color: var(--ink-muted); }
.chatbot-send {
  background: var(--gradient-primary);
  color: #14171d;
}

/* ──────────────────────────────────────────────────────────────
   24. COURSES + COURSE DETAILS
   ────────────────────────────────────────────────────────────── */
.courses-section { background: transparent; }
.courses-grid .course-card,
.course-card {
  background: rgba(28,32,39,0.60);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 32px rgba(0,0,0,0.40);
}
.course-card:hover {
  border-color: var(--platinum);
  background: rgba(34,38,46,0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 28px 60px rgba(0,0,0,0.55),
    0 0 60px rgba(192,197,207,0.10);
}
.course-title, .course-name { color: var(--ink); }
.course-meta, .course-desc { color: var(--ink-soft); }
.skills-hero, .course-hero {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%);
}

/* Enrol modal */
.enrol-section-label { color: var(--platinum); }

/* ──────────────────────────────────────────────────────────────
   25. AI PAGE — custom sections
   ────────────────────────────────────────────────────────────── */
.ai-hero {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(212,175,55,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%);
}
.ai-intro-section,
.ai-features-grid,
.ai-stats-grid,
.ai-use-section,
.ai-cat-grid,
.ai-cta-banner {
  color: var(--ink);
}
.ai-cta-banner {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 60%, #1c2027 100%) !important;
  border: 1px solid var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 40px 100px rgba(0,0,0,0.65),
    0 0 80px rgba(212,175,55,0.08);
}

/* ──────────────────────────────────────────────────────────────
   26. AUDIENCE ROW (solutions page)
   ────────────────────────────────────────────────────────────── */
.audience-row { color: var(--ink); }
.audience-num {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.audience-role { color: var(--ink); }
.audience-tagline { color: var(--ink-soft); }

/* ──────────────────────────────────────────────────────────────
   27. MISC — text colour rescues that didn't fit cleanly above
   ────────────────────────────────────────────────────────────── */
p { color: inherit; }
.section-title strong { color: var(--platinum-bright); }
.kicker, .label { color: var(--platinum); }
.note, .small-print { color: var(--ink-muted); }
a:not(.btn-primary):not(.btn-ghost):not(.btn-hero-primary):not(.btn-hero-secondary):not(.btn-plan):not(.btn-pform-submit):not(.btn-appstore):not(.btn-appstore-light):not(.btn-partner):not(.social-link):not(.uni-chip):not(.nav-logo):not(.tab-btn):not(.nav-links a):not(.partner-dropdown a):not(.footer-col a):not(.footer-legal a):not(.contact-info-value a):not(.disc-clear):not(.adm-tool-link) {
  color: var(--platinum-bright);
  transition: color 0.2s var(--ease-out);
}

/* Inputs everywhere */
input:not([type="checkbox"]):not([type="radio"]):not(.pform-input):not(.disc-rinput):not(.disc-search-input),
select:not(.pform-input):not(.disc-sort),
textarea:not(.contact-textarea):not(.pform-input) {
  background: rgba(192,197,207,0.05);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--platinum);
  background: rgba(192,197,207,0.10);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); }

/* Native <select> dropdown options — paint them dark so the open
   panel doesn't flash the OS default light grey on the dark theme.
   Note: option styling is browser-dependent (Mac Safari falls back
   to system colours); on Windows Chrome/Edge/Firefox this is honoured. */
select,
.disc-sort,
.course-select {
  color-scheme: dark;
}
select option,
.disc-sort option,
.course-select option {
  background-color: #14171d !important;
  color: var(--ink) !important;
  padding: 10px 14px;
}
select option:checked,
select option:hover,
.disc-sort option:checked,
.course-select option:checked {
  background: linear-gradient(0deg, rgba(192,197,207,0.18), rgba(192,197,207,0.18)) !important;
  background-color: rgba(192,197,207,0.18) !important;
  color: var(--platinum-bright) !important;
}
select optgroup,
.disc-sort optgroup {
  background-color: #1a1d23 !important;
  color: var(--platinum) !important;
  font-style: normal;
}

/* ──────────────────────────────────────────────────────────────
   28. NEW MICRO-INTERACTIONS — luxury polish
   ────────────────────────────────────────────────────────────── */

/* Hairline glow that follows hover on premium cards */
.how-card,
.allinone-card,
.adm-tool,
.testimonial-card,
.disc-card,
.pricing-card,
.feature-mockup {
  isolation: isolate;
  overflow: hidden;
}
.how-card::after,
.allinone-card::after,
.adm-tool::after {
  /* Defined above — top hairline */
}

/* Soft platinum ring on focus for any interactive element */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0b0d11, 0 0 0 4px rgba(192,197,207,0.50);
}

/* Smoother default transition for interactive surfaces */
a, button { transition: all 0.32s var(--ease-out); }

/* Scrollbar — minimal platinum thumb on dark track */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(192,197,207,0.22) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(192,197,207,0.20);
  border-radius: 10px;
  border: 2px solid #0b0d11;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(192,197,207,0.40);
}

/* Subtle "lift" on every card-like surface */
.how-card,
.allinone-card,
.adm-tool,
.testimonial-card,
.disc-card,
.pricing-card,
.feature-mockup,
.contact-info-item,
.contact-form-card {
  will-change: transform;
}

/* ──────────────────────────────────────────────────────────────
   29. RESPONSIVE — adjust glass blur for low-end devices
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Cheaper blur on mobile to keep scrolling smooth */
  .how-card, .allinone-card, .adm-tool,
  .testimonial-card, .feature-mockup, .disc-card,
  .pricing-card, .contact-info-item, .contact-form-card,
  .uni-chip, .audience-tabs {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ──────────────────────────────────────────────────────────────
   30. REDUCED MOTION — keep premium feel without animation
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-ring,
  .hero-image-glow, .hero-image-wrap,
  .hero-pill, .hero-sparkle,
  .adm-journey::after {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   31. INLINE-STYLE OVERRIDES — must use !important because inline
   <style> blocks in HTML <head> load AFTER this file. These selectors
   undo hard-coded `white`, `rgba(255,255,255,X)` and dark text colours
   that would otherwise read as "text merged with background" on the
   dark theme.
   ════════════════════════════════════════════════════════════════ */

/* ── Icon SVGs with hard-coded brand-colour strokes/fills ──────
   Every .feat-icon, .aio-icon, .how-icon etc. has an SVG inside with
   inline attributes like stroke="#1F1F4F" (dark navy) or stroke="#2563eb"
   (blue). On the dark theme those strokes blend into the background.
   Force the icon strokes/fills to platinum-bright so they pop on every
   tinted/glass container, regardless of the original brand colour. */
.feat-icon svg, .feat-icon svg *,
.aio-icon svg, .aio-icon svg *,
.how-icon svg, .how-icon svg *,
.adm-step-icon svg, .adm-step-icon svg *,
.contact-info-icon svg, .contact-info-icon svg *,
.ai-tool-icon svg, .ai-tool-icon svg *,
.ai-item-icon svg, .ai-item-icon svg *,
.disc-cat svg, .disc-cat svg *,
.meta-item svg, .meta-item svg *,
.course-info-item svg, .course-info-item svg *,
.adm-tool svg, .adm-tool svg * {
  stroke: var(--platinum-bright) !important;
}
.feat-icon svg [fill]:not([fill="none"]),
.feat-icon svg[fill]:not([fill="none"]),
.aio-icon svg [fill]:not([fill="none"]),
.aio-icon svg[fill]:not([fill="none"]),
.how-icon svg [fill]:not([fill="none"]),
.how-icon svg[fill]:not([fill="none"]),
.adm-step-icon svg [fill]:not([fill="none"]),
.adm-step-icon svg[fill]:not([fill="none"]),
.contact-info-icon svg [fill]:not([fill="none"]),
.contact-info-icon svg[fill]:not([fill="none"]),
.ai-tool-icon svg [fill]:not([fill="none"]),
.ai-tool-icon svg[fill]:not([fill="none"]),
.adm-tool svg [fill]:not([fill="none"]) {
  fill: var(--platinum-bright) !important;
}

/* Tinted icon containers — bump the background to a consistent dark
   glass tile so the icon inside actually reads. Without this, inline
   styles like `background:#e5e5f2` (solutions.html) or `rgba(31,31,79,0.15)`
   (features.html) leak through and either blend into the dark theme
   (cool tints) or appear as out-of-palette cream tiles. We catch ANY
   inline-styled icon container — HEX or rgba — and normalise it. */
.feat-icon[style],
.aio-icon[style],
.how-icon[style],
.adm-step-icon[style],
.contact-info-icon[style],
.ai-tool-icon[style],
.ai-item-icon[style],
.aio-icon,
.feat-icon,
.how-icon,
.adm-step-icon,
.contact-info-icon {
  background: rgba(192,197,207,0.10) !important;
  background-color: rgba(192,197,207,0.10) !important;
  background-image: none !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 12px rgba(0,0,0,0.40) !important;
}

/* Hover lift on icon tiles inside cards — adds a touch of life */
.allinone-card:hover .aio-icon,
.how-card:hover .how-icon,
.adm-tool:hover .adm-step-icon,
.feature-item:hover .feat-icon,
.contact-info-item:hover .contact-info-icon {
  background: rgba(192,197,207,0.16) !important;
  border-color: var(--platinum) !important;
}



/* ── AI page (ai.html) ──────────────────────────────────────── */
.ai-hero {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(212,175,55,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%) !important;
}
.ai-hero::before {
  background: radial-gradient(circle, rgba(192,197,207,0.22), transparent 70%) !important;
  opacity: 0.30 !important;
}
.ai-hero::after {
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 70%) !important;
  opacity: 0.25 !important;
}
.ai-live-badge {
  background: rgba(28,32,39,0.78) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink-soft) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 14px rgba(0,0,0,0.40) !important;
}
.ai-live-dot {
  background: var(--platinum) !important;
}
.ai-hero .ai-h1 { color: var(--ink) !important; }
.ai-sub { color: var(--ink-soft) !important; }

.ai-search-card {
  background: rgba(28,32,39,0.70) !important;
  border: 1px solid var(--hairline-strong) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 56px rgba(0,0,0,0.55) !important;
}
.ai-search-card:focus-within {
  border-color: var(--platinum) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 32px 70px rgba(0,0,0,0.65) !important;
}
.ai-search-card::before {
  background: var(--gradient-hero) !important;
}
.ai-search-row { border-bottom: 1px solid var(--hairline) !important; }
.ai-search-input { color: var(--ink) !important; }
.ai-search-input::placeholder { color: var(--ink-muted) !important; }

/* Tool icons — backgrounds dim, text MUST become platinum */
.ai-tool-icon.purple,
.ai-tool-icon.amber,
.ai-tool-icon.blue,
.ai-tool-icon.teal,
.ai-tool-icon.coral,
.ai-tool-icon.cyan {
  background: rgba(192,197,207,0.10) !important;
  color: var(--platinum-bright) !important;
}
.ai-tool-icon:hover {
  background: rgba(192,197,207,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 16px rgba(0,0,0,0.45) !important;
}

.ai-agent-pill {
  background: rgba(28,32,39,0.70) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.ai-agent-pill:hover {
  border-color: var(--platinum) !important;
  color: var(--platinum-bright) !important;
  background: rgba(28,32,39,0.92) !important;
}

/* `body` prefix bumps specificity above the inline-style rule's
   `#ai-go-btn { color: white !important }` declaration (otherwise we
   tie at 0,1,0,0 and inline wins on source order). */
body .ai-hero .ai-go-btn,
body #ai-go-btn {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow:
    0 8px 22px rgba(192,197,207,0.30),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
body .ai-hero .ai-go-btn:hover,
body #ai-go-btn:hover {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow:
    0 14px 32px rgba(192,197,207,0.42),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
}
/* The magnifying-glass SVG inside is hard-coded stroke="white".
   On the platinum gradient that reads as white-on-light → invisible.
   Flip it to dark so it matches the button text. */
body #ai-go-btn svg,
body #ai-go-btn svg *,
body .ai-hero .ai-go-btn svg,
body .ai-hero .ai-go-btn svg * {
  stroke: #14171d !important;
}

/* CTA banner buttons — "Launch AI Draftsman" + "Contact Us" */
.ai-cta-primary {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  border: none !important;
  box-shadow:
    0 10px 26px rgba(192,197,207,0.32),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
.ai-cta-primary:hover {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow:
    0 18px 40px rgba(192,197,207,0.44),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
}
.ai-cta-secondary {
  background: rgba(192,197,207,0.08) !important;
  color: var(--platinum-bright) !important;
  border: 1px solid var(--hairline-strong) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ai-cta-secondary:hover {
  background: rgba(192,197,207,0.18) !important;
  border-color: var(--platinum) !important;
  color: var(--platinum-bright) !important;
}
.ai-cta-h2 { color: var(--ink) !important; }
.ai-cta-p { color: var(--ink-soft) !important; }
.ai-cta-h2 em {
  background: var(--gradient-sun) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.ai-suggest-card {
  background: rgba(28,32,39,0.60) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 44px rgba(0,0,0,0.50) !important;
}
.ai-tabs { border-bottom: 1px solid var(--hairline) !important; }
.ai-tab { color: var(--ink-muted) !important; }
.ai-tab:hover { color: var(--ink) !important; }
.ai-tab.active {
  color: var(--platinum-bright) !important;
  border-bottom-color: var(--platinum) !important;
}
.ai-item { border-bottom: 1px solid var(--hairline) !important; }
.ai-item:hover {
  background: rgba(192,197,207,0.06) !important;
}
.ai-item-icon {
  background: rgba(192,197,207,0.10) !important;
  border: 1px solid var(--hairline) !important;
}
.ai-item-text { color: var(--ink) !important; }
.ai-hint {
  background: rgba(20,23,29,0.65) !important;
  border-top: 1px solid var(--hairline) !important;
  color: var(--ink-muted) !important;
}

.ai-cat-btn {
  background: rgba(28,32,39,0.55) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 22px rgba(0,0,0,0.35) !important;
}
.ai-cat-btn:hover {
  background: rgba(34,38,46,0.78) !important;
  border-color: var(--platinum) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 32px rgba(0,0,0,0.50) !important;
}
.ai-cat-btn--explore {
  background: transparent !important;
  border-color: var(--hairline-strong) !important;
}
.ai-cat-btn--explore:hover {
  background: rgba(28,32,39,0.55) !important;
}
.ai-cat-label { color: var(--ink-soft) !important; }

.ai-hero-stat-num {
  background: var(--gradient-hero) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.ai-hero-stat-lbl { color: var(--ink-muted) !important; }

.ai-power-strip {
  background: rgba(20,23,29,0.65) !important;
  border-top: 1px solid var(--hairline) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.ai-power-inner { color: var(--ink-muted) !important; }

.ai-intro-section {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(192,197,207,0.06), transparent 55%),
    linear-gradient(180deg, #0e1116 0%, #11141a 100%) !important;
}
.ai-intro-section::before {
  background: radial-gradient(circle, rgba(192,197,207,0.10), transparent 70%) !important;
  opacity: 0.40 !important;
}
.ai-section-eyebrow {
  background: rgba(28,32,39,0.65) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--platinum) !important;
  letter-spacing: 1.4px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.ai-intro-h2 { color: var(--ink) !important; }
.ai-intro-p { color: var(--ink-soft) !important; }
.ai-cta-link {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow:
    0 10px 28px rgba(192,197,207,0.30),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
.ai-cta-link:hover {
  box-shadow:
    0 16px 38px rgba(192,197,207,0.42),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
}

/* ── Features page (features.html) ──────────────────────────── */
.features-section {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,197,207,0.06), transparent 70%),
    linear-gradient(180deg, #0e1116 0%, #11141a 100%) !important;
}
.audience-tabs {
  background: rgba(28,32,39,0.65) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.45) !important;
}
.tab-btn { color: var(--ink-muted) !important; }
.tab-btn:hover {
  color: var(--platinum-bright) !important;
  background: rgba(192,197,207,0.08) !important;
}
.tab-btn.active {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow: 0 6px 16px rgba(192,197,207,0.28) !important;
}
.feature-mockup {
  background: rgba(28,32,39,0.60) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.45) !important;
}
.feature-mockup:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 56px rgba(0,0,0,0.60) !important;
}
.mockup-header {
  background: rgba(20,23,29,0.65) !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.mock-stat {
  background: rgba(192,197,207,0.04) !important;
  border: 1px solid var(--hairline) !important;
}
.mock-stat:hover {
  background: rgba(192,197,207,0.10) !important;
  border-color: var(--platinum) !important;
}
.mock-row {
  background: rgba(192,197,207,0.04) !important;
  border: 1px solid var(--hairline) !important;
}
.mock-row:hover {
  background: rgba(192,197,207,0.10) !important;
  border-color: var(--hairline-strong) !important;
}

.feature-image-frame {
  background: linear-gradient(135deg,
    rgba(232,234,237,0.55) 0%,
    rgba(192,197,207,0.30) 50%,
    rgba(212,175,55,0.40) 100%) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.55),
    0 12px 28px rgba(0,0,0,0.35) !important;
}
.feature-image-pill {
  background: rgba(28,32,39,0.85) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 30px rgba(0,0,0,0.50) !important;
}
.fi-title { color: var(--ink) !important; }
.fi-meta { color: var(--ink-muted) !important; }

/* ── Course Details page (course-details.html) ──────────────── */
.course-hero {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(212,175,55,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%) !important;
}
.course-hero::before {
  background: radial-gradient(circle, rgba(192,197,207,0.18), transparent 70%) !important;
  opacity: 0.35 !important;
}
.course-hero::after {
  background: radial-gradient(circle, rgba(212,175,55,0.14), transparent 70%) !important;
  opacity: 0.30 !important;
}
.course-hero-image { opacity: 0.10 !important; }
.course-hero-overlay {
  background: linear-gradient(to bottom,
    rgba(11,13,17,0.55) 0%,
    rgba(11,13,17,0.20) 60%,
    rgba(11,13,17,0.55) 100%) !important;
}
.course-hero-content { color: var(--ink) !important; }
.course-hero h1 { color: var(--ink) !important; }
.course-hero p { color: var(--ink-soft) !important; }
.course-hero-content .section-label { color: var(--platinum) !important; }
.course-hero-content .section-label::before { background: var(--gradient-hero) !important; }

.course-meta-bar {
  background: rgba(20,23,29,0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.45) !important;
}
.meta-item { color: var(--ink-soft) !important; }
.meta-item strong { color: var(--ink) !important; }
.meta-item svg { color: var(--platinum) !important; }

.course-content {
  background: linear-gradient(180deg, #0e1116 0%, #11141a 100%) !important;
}
.course-content::before {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,197,207,0.05), transparent 70%) !important;
}

.tabs {
  background: rgba(28,32,39,0.65) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.45) !important;
}
.tab { color: var(--ink-muted) !important; }
.tab:hover {
  color: var(--platinum-bright) !important;
  background: rgba(192,197,207,0.08) !important;
}
.tab.active {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow: 0 4px 14px rgba(192,197,207,0.30) !important;
}

.tab-content {
  background: rgba(28,32,39,0.60) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 56px rgba(0,0,0,0.55) !important;
}
.tab-content h2,
.tab-content h3 { color: var(--ink) !important; }
.tab-content p,
.tab-content li { color: var(--ink-soft) !important; }
.tab-content ul li::marker { color: var(--platinum) !important; }
.tab-content a { color: var(--platinum-bright) !important; }

/* Course info-grid cards — match the dark glass family */
.info-grid > *,
.info-card,
.info-item {
  background: rgba(28,32,39,0.55) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink-soft) !important;
}
.info-card strong,
.info-item strong { color: var(--ink) !important; }

/* Course-page enrol/CTA banners */
.enrol-modal,
.enrol-banner,
.course-cta {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 60%, #1c2027 100%) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 30px 80px rgba(0,0,0,0.60) !important;
}

/* ════════════════════════════════════════════════════════════════
   CHATBOT — fix white-on-white bubbles + light text on light pills.
   Original rules use `.chat-msg.bot .chat-bubble { background: white }`
   which has higher specificity than my section-23 overrides, so the
   page-default white bubbles leaked through with light --ink text inside.
   ════════════════════════════════════════════════════════════════ */
.chat-msg.bot .chat-bubble {
  background: rgba(192,197,207,0.10) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 12px rgba(0,0,0,0.35) !important;
}
.chat-msg.user .chat-bubble {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 6px 16px rgba(192,197,207,0.32) !important;
}
.chat-typing span { background: var(--platinum) !important; }

.chatbot-suggestions {
  background: rgba(20,23,29,0.65) !important;
  border-top: 1px solid var(--hairline) !important;
}
.chat-chip {
  background: rgba(192,197,207,0.08) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink-soft) !important;
}
.chat-chip:hover {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  border-color: transparent !important;
  box-shadow: 0 6px 14px rgba(192,197,207,0.32) !important;
}

.chatbot-input-row {
  background: rgba(20,23,29,0.85) !important;
  border-top: 1px solid var(--hairline) !important;
}
.chatbot-input {
  background: rgba(192,197,207,0.06) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink) !important;
}
.chatbot-input:focus {
  border-color: var(--platinum) !important;
  background: rgba(192,197,207,0.12) !important;
  box-shadow: var(--ring) !important;
}
.chatbot-input::placeholder { color: var(--ink-muted) !important; }
.chatbot-send {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow:
    0 6px 16px rgba(192,197,207,0.32),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
.chatbot-send:hover {
  box-shadow:
    0 10px 22px rgba(192,197,207,0.46),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
}
.chatbot-header { color: var(--ink) !important; }
.chatbot-name { color: var(--ink) !important; }
.chatbot-status { color: var(--ink-muted) !important; }
.chatbot-avatar {
  background: rgba(192,197,207,0.14) !important;
  color: var(--platinum-bright) !important;
}
.chatbot-close {
  background: rgba(192,197,207,0.08) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink-soft) !important;
}
.chatbot-close:hover {
  background: rgba(192,197,207,0.18) !important;
  color: var(--platinum-bright) !important;
}

/* ════════════════════════════════════════════════════════════════
   AI PAGE — 3D-style icon tiles
   Currently emoji floats bare (`.ai-feature-icon`) or sits in a flat
   tinted square (`.ai-use-icon`). Convert both to premium 3D tiles:
   gradient depth, inset highlight, drop shadow, glossy top-left
   reflection. The emoji glyph also gets a drop-shadow so it lifts
   off the surface.
   ════════════════════════════════════════════════════════════════ */
.ai-feature-icon,
.ai-use-icon,
.ai-cat-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.75rem !important;
  margin-bottom: 18px !important;

  /* 3D depth: glossy radial highlight + charcoal gradient body */
  background:
    radial-gradient(ellipse 70% 50% at 28% 18%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, #2c3038 0%, #1d2027 55%, #15181e 100%) !important;
  background-color: transparent !important;

  /* Inset highlight (top edge) + inset shadow (bottom) → 3D edge */
  /* Outer multi-layer shadow → floating, deep contact shadow */
  border: 1px solid var(--hairline-strong) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.16),
    inset 0 -1.5px 0 rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(192,197,207,0.04),
    0 14px 30px rgba(0,0,0,0.55),
    0 6px 12px rgba(0,0,0,0.35),
    0 0 0 1px rgba(192,197,207,0.04) !important;

  /* Lift the emoji glyph off the tile */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.50));
  position: relative;
  isolation: isolate;
  transition: transform 0.4s var(--ease-spring),
              box-shadow 0.4s var(--ease-out) !important;
}

/* Add an extra glossy curved highlight overlay on top — a thin
   crescent of light at the upper-left for the chrome-bead look. */
.ai-feature-icon::after,
.ai-use-icon::after,
.ai-cat-icon::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px;
  height: 40%;
  border-radius: 14px 14px 60% 60% / 14px 14px 80% 80%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: -1;
}

.ai-feature-card:hover .ai-feature-icon,
.ai-use-card:hover .ai-use-icon,
.ai-cat-btn:hover .ai-cat-icon {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),
    inset 0 -1.5px 0 rgba(0,0,0,0.50),
    inset 0 0 0 1px rgba(192,197,207,0.06),
    0 22px 44px rgba(0,0,0,0.65),
    0 10px 18px rgba(0,0,0,0.45),
    0 0 50px rgba(212,175,55,0.18) !important;
}

/* The feature card itself — make sure the dark-glass override beats
   the inline `background: var(--white)` (which becomes elevated charcoal
   but we want consistent glass tone). */
.ai-feature-card,
.ai-use-card {
  background: rgba(28,32,39,0.62) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 44px rgba(0,0,0,0.45) !important;
}
.ai-feature-card::before,
.ai-use-card::before {
  background: var(--gradient-hero) !important;
}
.ai-feature-card:hover,
.ai-use-card:hover {
  background: rgba(34,38,46,0.78) !important;
  border-color: var(--platinum) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 30px 60px rgba(0,0,0,0.60),
    0 0 60px rgba(192,197,207,0.10) !important;
}
.ai-feature-card h4,
.ai-use-card h3 { color: var(--ink) !important; }
.ai-feature-card p,
.ai-use-card p { color: var(--ink-soft) !important; }
.ai-use-link { color: var(--platinum-bright) !important; }

/* ── Admissions journey connecting arrows ──────────────────── */
/* The arrows between steps 01→02→03→04→05 are SVG data URIs in
   styles.css with stroke='#1e40af' (URL-encoded as %231e40af). Replace
   the entire background-image with a platinum-stroked variant. */
.adm-step:not(:last-child)::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 14'><path d='M2 7 H24 M19 2 L25 7 L19 12' stroke='%23c0c5cf' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  opacity: 0.70 !important;
}
.adm-journey:hover .adm-step:not(:last-child)::after {
  opacity: 1 !important;
}
/* Mobile vertical arrow variant */
@media (max-width: 760px) {
  .adm-step:not(:last-child)::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'><path d='M7 2 V16 M2 12 L7 18 L12 12' stroke='%23c0c5cf' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  }
}

/* ── Skills development page (skills-development.html) ──────── */
.skills-hero {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(212,175,55,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0b0d11 0%, #0e1116 100%) !important;
  color: var(--ink) !important;
}
.skills-hero::before {
  background: radial-gradient(circle, rgba(192,197,207,0.20), transparent 70%) !important;
  opacity: 0.32 !important;
}
.skills-hero::after {
  background: radial-gradient(circle, rgba(212,175,55,0.14), transparent 70%) !important;
  opacity: 0.26 !important;
}
.skills-hero h1 {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.skills-hero p {
  color: var(--ink-soft) !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}
.skills-hero .section-label { color: var(--platinum) !important; }
.skills-hero .section-label::before { background: var(--gradient-hero) !important; }
.skills-hero-content { color: var(--ink) !important; }

/* Stat tiles in skills hero */
.skill-stat-item {
  background: rgba(28,32,39,0.65) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 32px rgba(0,0,0,0.45) !important;
}
.skill-stat-item:hover {
  background: rgba(34,38,46,0.85) !important;
  border-color: var(--platinum) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 50px rgba(0,0,0,0.55),
    0 0 60px rgba(192,197,207,0.10) !important;
}
.skill-stat-number {
  background: var(--gradient-hero) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.skill-stat-label { color: var(--ink-soft) !important; }

/* Courses section background */
.courses-section {
  background: linear-gradient(180deg, #0e1116 0%, #11141a 100%) !important;
}
.courses-section::before {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,197,207,0.05), transparent 70%) !important;
}

/* Search input + select */
.course-search input,
.course-select {
  background: rgba(28,32,39,0.65) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.35) !important;
}
.course-search input::placeholder { color: var(--ink-muted) !important; }
.course-search input:hover,
.course-select:hover { border-color: var(--platinum) !important; }
.course-search input:focus,
.course-select:focus {
  border-color: var(--platinum) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 4px rgba(192,197,207,0.18) !important;
}
.course-search-icon { color: var(--ink-muted) !important; }
/* Repaint the inline select chevron from indigo to platinum */
.course-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0c5cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
}

/* Filter category pills — THIS WAS THE WHITE-ON-WHITE BUG */
.filter-tab {
  background: rgba(28,32,39,0.65) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 12px rgba(0,0,0,0.35) !important;
}
.filter-tab:hover {
  background: rgba(34,38,46,0.82) !important;
  border-color: var(--platinum) !important;
  color: var(--platinum-bright) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 22px rgba(0,0,0,0.45) !important;
}
.filter-tab.active {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(192,197,207,0.32) !important;
}
.filter-tab .count {
  background: rgba(192,197,207,0.14) !important;
  color: var(--platinum-bright) !important;
}
.filter-tab.active .count {
  background: rgba(20,23,29,0.28) !important;
  color: #14171d !important;
}

/* Results count */
.courses-count { color: var(--ink-muted) !important; }
.courses-count strong { color: var(--platinum-bright) !important; }

/* Course cards */
.course-card {
  background: rgba(28,32,39,0.60) !important;
  border: 1px solid var(--hairline) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.45) !important;
}
.course-card:hover {
  background: rgba(34,38,46,0.78) !important;
  border-color: var(--platinum) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 28px 60px rgba(0,0,0,0.60),
    0 0 60px rgba(192,197,207,0.10) !important;
}
.course-card::before { background: var(--gradient-hero) !important; }

/* Course image hero gradient — replace navy/blue/amber with platinum */
.course-image {
  background: linear-gradient(135deg, #2a2e36 0%, #1a1d23 50%, #2a2e36 100%) !important;
}
.course-image-logo {
  background: rgba(20,23,29,0.88) !important;
  color: var(--platinum-bright) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55) !important;
}

/* Card text */
.course-title { color: var(--ink) !important; }
.course-description { color: var(--ink-soft) !important; }
.course-category { color: var(--champagne) !important; }
.course-info-row {
  color: var(--ink-muted) !important;
  border-top: 1px solid var(--hairline) !important;
}
.course-info-item svg { color: var(--platinum) !important; }

/* Level + ref badges */
.course-level-badge {
  background: rgba(192,197,207,0.12) !important;
  color: var(--platinum-bright) !important;
  border: 1px solid var(--hairline) !important;
}
.course-ref-badge {
  background: rgba(192,197,207,0.06) !important;
  color: var(--ink-muted) !important;
}

/* COURSE BUTTONS — these were the "View Details / Enrol Now" mess */
.course-btn-primary {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  box-shadow:
    0 6px 18px rgba(192,197,207,0.32),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
.course-btn-primary:hover {
  box-shadow:
    0 12px 28px rgba(192,197,207,0.46),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
}
.course-btn-secondary {
  background: rgba(192,197,207,0.08) !important;
  color: var(--platinum-bright) !important;
  border: 1px solid var(--hairline-strong) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.course-btn-secondary:hover {
  background: rgba(192,197,207,0.16) !important;
  border-color: var(--platinum) !important;
  color: var(--platinum-bright) !important;
}

/* Skills CTA strip — replace navy/blue/amber gradient with luxury */
.courses-cta {
  background: linear-gradient(135deg, #1c2027 0%, #14171d 60%, #1c2027 100%) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}
.courses-cta::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(192,197,207,0.08), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,0.12), transparent 50%) !important;
}
.courses-cta h2 { color: var(--ink) !important; }
.courses-cta p { color: var(--ink-soft) !important; }
.courses-cta .btn-primary {
  background: var(--gradient-primary) !important;
  color: #14171d !important;
  border: none !important;
  box-shadow:
    0 10px 26px rgba(192,197,207,0.32),
    inset 0 1px 0 rgba(255,255,255,0.50) !important;
}
.courses-cta .btn-primary:hover {
  box-shadow:
    0 16px 38px rgba(192,197,207,0.44),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
}
.courses-cta .btn-secondary {
  background: rgba(192,197,207,0.08) !important;
  color: var(--platinum-bright) !important;
  border: 1px solid var(--hairline-strong) !important;
}
.courses-cta .btn-secondary:hover {
  background: rgba(192,197,207,0.18) !important;
  border-color: var(--platinum) !important;
}

/* Enrol modal overlay (skills page) */
.enrol-overlay {
  background: rgba(6,7,8,0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Course-details page: enrol modal + page CTAs.
   Hardcoded `color: white` is unreadable on the platinum gradient
   that --gradient-primary becomes under the luxury theme. */
.enrol-btn-submit,
.action-btn-primary {
  color: #14171d !important;
  box-shadow:
    0 6px 18px rgba(192,197,207,0.28),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.enrol-btn-submit:hover,
.action-btn-primary:hover {
  box-shadow:
    0 14px 36px rgba(192,197,207,0.42),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
.enrol-btn-submit svg,
.action-btn-primary svg { stroke: #14171d; }

/* ── Privacy / Terms ────────────────────────────────────────── */
.legal-content,
.legal-section,
.legal-content p,
.legal-content li {
  color: var(--ink-soft) !important;
}
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-section h2,
.legal-section h3 {
  color: var(--ink) !important;
}
.legal-content a { color: var(--platinum-bright) !important; }

/* ── Catch-all: any element using hard-coded white that I didn't
   reach by name. These selectors are intentionally narrow so they
   don't repaint elements that should stay white (e.g. button text). */
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"] {
  /* leave inline color alone — too risky to override globally */
}

/* ── Generic dark-text rescue — when a low-opacity light tint
   background appears with hard-coded navy/teal text, push the
   text to platinum so it never disappears. Targeted selectors
   only — broad enough to catch stragglers, narrow enough not to
   nuke intentional buttons. */
[class*="-tool-icon"],
[class*="-icon-bg"],
[class*="-mini-"] {
  color: var(--platinum-bright) !important;
}

/* Ensure any heading inside a known dark-glass card reads bright */
.tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4,
.feature-mockup h1, .feature-mockup h2, .feature-mockup h3, .feature-mockup h4,
.ai-search-card h1, .ai-search-card h2, .ai-search-card h3, .ai-search-card h4,
.ai-suggest-card h1, .ai-suggest-card h2, .ai-suggest-card h3, .ai-suggest-card h4 {
  color: var(--ink) !important;
}

/* ════════════════════════════════════════════════════════════════
   HERO / BANNER / SECTION TRANSPARENCY — let the constellation
   network animation (html::before) flow through every page.

   The `body` prefix is essential: per-page inline <style> blocks
   declare rules like `.features-section { background: ...
   linear-gradient(--cream) ... !important }` which load AFTER this
   file. Without `body` we tie at 0,0,1,0 and source-order wins,
   meaning the opaque linear-gradient bases cover the constellation.
   With `body` we sit at 0,0,1,1 and beat them all decisively.
   ════════════════════════════════════════════════════════════════ */

/* Hero / banner sections */
body .page-banner,
body .ai-hero,
body .skills-hero,
body .course-hero,
body .hero {
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at 25% 20%, rgba(192,197,207,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 78%, rgba(212,175,55,0.08) 0%, transparent 55%) !important;
}

/* Mid-page sections that also painted opaque bases */
body .features-section,
body .testimonials-section,
body .discover-section,
body .courses-section,
body .course-content,
body .ai-intro-section,
body .cta-section {
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,197,207,0.05), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(212,175,55,0.04), transparent 70%) !important;
}

/* features.html declares two decorative ::before / ::after radial
   blobs inside .features-section — they're behind the constellation,
   making it look busier than the rest of the site. Suppress them. */
body .features-section::before,
body .features-section::after {
  display: none !important;
}

/* Body background — drop the opaque linear-gradient base so the
   constellation on html::before is visible through the whole page.
   Keep the soft atmospheric radial glows on top.
   The solid dark base (#0b0d11) moves to <html> so very-tall pages
   always have a guaranteed dark canvas behind everything. */
html {
  background: #0b0d11 !important;
}
body {
  background-color: transparent !important;
  background-image:
    radial-gradient(1200px 700px at 12% -10%, rgba(192,197,207,0.06), transparent 60%),
    radial-gradient(1000px 600px at 88% -8%, rgba(212,175,55,0.04), transparent 60%),
    radial-gradient(1400px 800px at 50% 110%, rgba(141,151,168,0.05), transparent 70%) !important;
}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — match the proportions of inner-page banners
   (.page-banner) so the whole site reads with one consistent hero
   rhythm. Mirrors:
     .page-banner          padding: 116px 5vw 64px
     .page-banner-inner    grid: 1fr 1fr, gap 64px
     .page-banner h1       clamp(36px, 4.5vw, 58px) / -1.4px tracking
     .page-banner p        17px / 500px max-width
     responsive: stack at  ≤900px
   ════════════════════════════════════════════════════════════════ */
body .hero {
  padding: 116px 5vw 64px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  max-width: 1240px;
}
body .hero h1 {
  font-size: clamp(36px, 4.5vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.4px !important;
  font-weight: 500 !important;
  max-width: none;
}
body .hero-sub {
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 500px !important;
  margin: 22px 0 30px !important;
}
body .hero-ctas { margin-top: 0; }

/* Trust bar — same compact treatment as before */
body .hero .trust-bar {
  margin-top: 36px !important;
  padding-top: 28px !important;
  gap: 24px !important;
}
body .hero .trust-num { font-size: 24px !important; }

/* Stack at the same breakpoint as page-banner (≤900px). */
@media (max-width: 900px) {
  body .hero {
    padding: 100px 5vw 48px !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  body .hero h1 {
    font-size: clamp(32px, 6vw, 48px) !important;
  }
  body .hero-sub { max-width: 640px !important; }
}