:root {
      /* ============================================================
         BRAND PALETTE — UNCHANGED. Every hex below is preserved
         exactly from the original Shared Pearls of Wisdom stylesheet.
         The 3D redesign works ONLY with these colours: tints, shades,
         opacity layers and shadows derived from them.
         ============================================================ */
      --ink: #0F172A;
      --ink-soft: #1E293B;
      --parchment: #FDFCF8;
      --cream: #F8F5EF;
      --cream-dark: #F1EBDF;
      --gold: #B78A2D;
      --gold-light: #D4A96A;
      --gold-pale: #F5E6C8;
      --rust: #9C2A1A;
      --teal: #0F4C5C;
      --teal-light: #1A7A8C;
      --pearl: #E8DDD0;
      --green-premium: #14532D;
      --green-original: #357A1D;
      --green-light: #15803D;
      --green-pale: #DCFCE7;
      --slate-400: #94A3B8;
      --slate-600: #475569;
      --shadow: rgba(2, 78, 15, 0.08);
      --shadow-strong: rgba(15,23,42,0.14);

      /* ============================================================
         TYPOGRAPHY SYSTEM
         Display  → Cormorant Garamond  (headlines, quotes — the
                     elegant, high-contrast academic serif)
         Editorial→ Source Serif 4      (long-form body copy)
         UI       → Source Sans 3       (nav, buttons, labels, meta)
         Notation → DM Mono             (CEFR codes, durations, tags)
         ============================================================ */
      --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-serif: ui-sans-serif, Georgia, serif;
      --font-sans: 'Source Sans 3', BlinkMacSystemFont, sans-serif;
      --font-mono: 'DM Mono', 'SFMono-Regular', monospace;

      /* ============================================================
         3D DEPTH SYSTEM
         Six depth planes, consistent perspective, consistent motion.
         ============================================================ */
      --depth-0: 0px;    /* background */
      --depth-1: 6px;    /* content surfaces */
      --depth-2: 14px;   /* cards */
      --depth-3: 26px;   /* interactive cards */
      --depth-4: 44px;   /* floating elements */
      --depth-5: 72px;   /* hero objects */

      --perspective: 1400px;
      --perspective-hero: 1800px;
      --perspective-tight: 900px;

      --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --dur-fast: 0.22s;
      --dur-base: 0.45s;
      --dur-slow: 0.75s;

      /* Elevation shadows — neutral, derived from --ink */
      --shadow-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
      --shadow-2: 0 6px 18px rgba(15,23,42,0.09), 0 1px 2px rgba(15,23,42,0.05);
      --shadow-3: 0 14px 36px rgba(15,23,42,0.13), 0 3px 8px rgba(15,23,42,0.06);
      --shadow-4: 0 26px 60px rgba(15,23,42,0.17), 0 6px 18px rgba(15,23,42,0.08);
      --shadow-5: 0 44px 96px rgba(15,23,42,0.22), 0 10px 28px rgba(15,23,42,0.1);

      /* Elevation shadows tinted from brand colours, for coloured glows */
      --shadow-gold: 0 18px 44px rgba(183,138,45,0.28);
      --shadow-teal: 0 18px 44px rgba(15,76,92,0.26);
      --shadow-rust: 0 18px 44px rgba(156,42,26,0.26);
      --shadow-green:0 18px 44px rgba(20,83,45,0.26);

      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-serif);
      background: var(--parchment);
      color: var(--ink);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── ACCESSIBLE FOCUS ── never dependent on hover for essential content */
    a:focus-visible,
    button:focus-visible,
    .skill-tile:focus-visible,
    .lesson-card:focus-visible,
    .level-stage:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* ── SCROLL-REVEAL UTILITY ── */
    [data-reveal] {
      opacity: 0;
      transform: translateY(28px) translateZ(0);
      transition: opacity var(--dur-slow) var(--ease-soft),
                  transform var(--dur-slow) var(--ease-soft);
      will-change: opacity, transform;
    }
    [data-reveal].is-revealed {
      opacity: 1;
      transform: translateY(0) translateZ(0);
      transition-delay: var(--reveal-delay, 0s);
    }

    /* ── NAV — depth-aware, gains elevation once the page scrolls ── */
    /* ── NAV ── - Restored YOUR green for creativity, premium shade */
    nav {
      background: linear-gradient(135deg, var(--green-premium) 0%, var(--green-original) 100%);
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px var(--shadow-strong);
      border-bottom: 1px solid rgba(212,169,106,0.15);
    }
    .nav-logo-container {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .nav-logo-img {
      height: 52px;
      width: auto;
      filter: brightness(1.1);
    }
    .nav-logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.45rem;
      font-weight: 700;
      color: var(--gold-light);
      padding: 1.2rem 0;
      letter-spacing: -0.01em;
    }
    .nav-logo span { color: #fff; font-style: italic; font-weight: 400; }
    
    .nav-links {
      display: flex;
      gap: 0;
      list-style: none;
      align-items: center;
    }
    .nav-links a {
      color: #CBD5E1;
      text-decoration: none;
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 1.35rem 1.1rem;
      display: block;
      transition: color 0.2s, background 0.2s;
      position: relative;
    }
    .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.04); }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 1.1rem;
      right: 1.1rem;
      height: 2px;
      background: var(--gold);
      transform: scaleX(0);
      transition: transform 0.25s ease;
    }
    .nav-links a:hover::after { transform: scaleX(1); }
    .nav-cta {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
      color: var(--ink) !important;
      border-radius: 4px;
      font-weight: 600 !important;
      text-align: center;
      padding: 0.7rem 1.3rem !important;
      box-shadow: 0 2px 10px rgba(183,138,45,0.3);
    }
    .nav-cta::after { display: none !important;}
    .nav-cta:hover { background: linear-gradient(135deg, var(--gold-light) 0%, #E8C488 100%) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(183,138,45,0.4); text-align: center; }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 6px;
      z-index: 1001;
    }
    .hamburger span {
      width: 28px;
      height: 2px;
      background-color: var(--gold-light);
      border-radius: 2px;
      transition: all 0.3s ease;
    }
    .hamburger.toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.toggle span:nth-child(2) { opacity: 0; }
    .hamburger.toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* ══════════════════════════════════════════════════════════════
       HERO — 3D layered composition
       hero-left  : perspective stage with floating linguistic objects
       hero-right : featured cards fanned in depth, straighten on hover
       ══════════════════════════════════════════════════════════════ */
    .hero {
      min-height: 86vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
      overflow: hidden;
    }
    .hero-left {
      background: radial-gradient(120% 120% at 0% 0%, #1E293B 0%, var(--ink) 60%);
      padding: 6rem 4rem 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      perspective: var(--perspective-hero);
      overflow: hidden;
    }
    .hero-left::after {
      content: '';
      position: absolute;
      right: -40px;
      top: 0; bottom: 0;
      width: 80px;
      background: var(--ink);
      clip-path: polygon(0 0, 0 100%, 100% 100%);
      z-index: 2;
    }
    /* faint dimensional grid to reinforce spatial depth, no motion */
    .hero-left::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(212,169,106,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,169,106,0.05) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
              mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* the floating scene */
    .hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform-style: preserve-3d; }
    .hero-object {
      position: absolute;
      color: var(--gold-light);
      transform-style: preserve-3d;
      will-change: transform;
    }
    /* JS applies continuous per-frame lerp smoothing to these objects
       on pointer-capable devices, so no CSS transition is added here
       (it would fight the animation loop and feel laggy). */
    .obj-quote {
      top: -3.5rem; left: -1rem;
      font-family: var(--font-display);
      font-size: 13rem;
      font-weight: 700;
      color: var(--gold);
      opacity: 0.16;
      line-height: 1;
    }
    .obj-letter-a {
      bottom: 8%; left: 6%;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 5rem;
      color: var(--teal-light);
      opacity: 0.28;
    }
    .obj-pilcrow {
      top: 14%; right: 20%;
      font-family: var(--font-display);
      font-size: 3.4rem;
      color: var(--gold-light);
      opacity: 0.3;
    }
    .obj-bracket {
      bottom: 20%; right: 12%;
      font-family: var(--font-mono);
      font-size: 2.6rem;
      color: var(--slate-400);
      opacity: 0.35;
      letter-spacing: 0.3em;
    }
    .obj-waves {
      bottom: 6%; left: 44%;
      display: flex;
      align-items: flex-end;
      gap: 4px;
      opacity: 0.4;
    }
    .obj-waves span {
      display: block;
      width: 3px;
      background: var(--gold-light);
      border-radius: 2px;
    }
    .obj-waves span:nth-child(1){ height: 10px; }
    .obj-waves span:nth-child(2){ height: 22px; }
    .obj-waves span:nth-child(3){ height: 14px; }
    .obj-waves span:nth-child(4){ height: 30px; }
    .obj-waves span:nth-child(5){ height: 16px; }
    .obj-waves span:nth-child(6){ height: 24px; }
    .obj-node-cluster { top: 62%; left: 12%; width: 90px; height: 60px; opacity: 0.4; }
    .obj-node-cluster svg { display: block; }
    .obj-book { top: 8%; left: 42%; opacity: 0.3; }

    .hero-tag {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 1.6rem;
      display: flex;
      align-items: center;
      gap: 0.8rem;
      position: relative;
      z-index: 1;
    }
    .hero-tag::before {
      content: '';
      display: block;
      width: 36px;
      height: 1px;
      background: linear-gradient(90deg, var(--gold), transparent);
    }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(3rem, 5.4vw, 4.6rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.05;
      letter-spacing: -0.01em;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
    }
    .hero h1 em {
      color: var(--gold-light);
      font-style: italic;
      font-weight: 500;
    }
    .hero-desc {
      font-family: var(--font-serif);
      color: #94A3B8;
      font-size: 1.14rem;
      line-height: 1.75;
      max-width: 460px;
      margin-bottom: 2.5rem;
      font-weight: 300;
      position: relative;
      z-index: 1;
    }
    .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }

    /* ── 3D BUTTONS — elevation + press ── */
    .btn {
      display: inline-block;
      padding: 0.9rem 1.9rem;
      border-radius: 4px;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
      border: none;
      transform: translateZ(0);
    }
    .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color: var(--ink); box-shadow: 0 2px 8px rgba(183,138,45,0.25); }
    .btn-gold:hover { transform: translateY(-3px) translateZ(10px); box-shadow: var(--shadow-gold); }
    .btn-gold:active { transform: translateY(-1px) translateZ(4px); box-shadow: 0 6px 16px rgba(183,138,45,0.3); }
    .btn-outline { background: transparent; color: #CBD5E1; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(4px); }
    .btn-outline:hover { border-color: var(--gold-light); color: #fff; background: rgba(255,255,255,0.06); transform: translateY(-3px); }

    /* ── HERO RIGHT: fanned 3D featured-card stack ── */
    .hero-right {
      background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
      padding: 4rem 3rem 4rem 5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.6rem;
      position: relative;
      perspective: var(--perspective-hero);
    }
    .hero-right::before {
      content: '"';
      font-family: var(--font-display);
      font-size: 18rem;
      color: var(--pearl);
      position: absolute;
      top: -2rem;
      right: 2rem;
      line-height: 1;
      pointer-events: none;
      opacity: 0.6;
    }
    .featured-card {
      background: #fff;
      border-left: 3px solid var(--gold);
      padding: 1.5rem 1.8rem;
      box-shadow: var(--shadow-2);
      position: relative;
      z-index: 1;
      transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
      cursor: pointer;
      border-radius: 0 6px 6px 0;
      transform-style: preserve-3d;
    }
    .featured-card:nth-of-type(1) { transform: rotateY(-3deg) translateZ(0px); }
    .featured-card:nth-of-type(2) { transform: rotateY(-1.5deg) translateZ(-16px) translateY(4px); }
    .featured-card:nth-of-type(3) { transform: rotateY(0deg) translateZ(-32px) translateY(8px); }
    .featured-card:hover {
      transform: rotateY(0deg) translateZ(36px) translateX(6px) translateY(-4px) !important;
      box-shadow: var(--shadow-4);
      z-index: 2;
    }
    .card-level {
      font-family: var(--font-sans);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.6rem;
    }
    .featured-card h3 {
      font-family: var(--font-display);
      font-size: 1.32rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--ink);
      line-height: 1.3;
    }
    .featured-card h3 a { text-decoration: none; color: inherit; }
    .featured-card p { font-size: 0.9rem; color: #64748B; line-height: 1.6; font-family: var(--font-sans); }
    .teal-card { border-left-color: var(--teal); }
    .teal-card .card-level { color: var(--teal); }
    .rust-card { border-left-color: var(--rust); }
    .rust-card .card-level { color: var(--rust); }

    /* ── TICKER ── */
    .ticker {
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
      padding: 0.75rem 0;
      overflow: hidden;
      white-space: nowrap;
      border-top: 1px solid rgba(255,255,255,0.2);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .ticker-inner { display: inline-block; animation: ticker 32s linear infinite; }
    .ticker-item {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.74rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--ink);
      margin: 0 2.5rem;
    }
    .ticker-item::before { content: '◆ '; opacity: 0.4; font-size: 0.6em; }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ── SECTION HEADER ── */
    .section { padding: 5.5rem 4rem; }
    .section-alt { background: var(--cream); border-top: 1px solid var(--pearl); border-bottom: 1px solid var(--pearl); }
    .section-dark { background: var(--ink); }

    .section-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 3rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid var(--pearl);
    }
    .section-title {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--ink);
    }
    .section-dark .section-title { color: #fff; }
    .section-dark .section-header { border-bottom-color: rgba(255,255,255,0.08); }
    .section-link {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: all var(--dur-fast) ease;
    }
    .section-link:hover { color: var(--green-original); border-bottom-color: var(--green-original); }

    /* ══════════════════════════════════════════════════════════════
       SKILLS GRID → interactive 3D learning-category ecosystem
       Each tile tilts toward the pointer (JS) and glows in a colour
       drawn from the existing palette, cycling by category.
       ══════════════════════════════════════════════════════════════ */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      perspective: var(--perspective);
    }
    .skill-tile {
      background: #fff;
      padding: 2.4rem 1.6rem;
      text-align: center;
      cursor: pointer;
      border-radius: var(--radius-md);
      border: 1px solid var(--pearl);
      box-shadow: var(--shadow-2);
      transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), background var(--dur-base) ease;
      transform-style: preserve-3d;
      position: relative;
    }
    .skill-tile:hover, .skill-tile:focus-visible {
      background: var(--green-premium);
      box-shadow: var(--shadow-4);
      z-index: 1;
    }
    .skill-tile:hover .skill-name a, .skill-tile:focus-visible .skill-name a { color: #fff; }
    .skill-tile:hover .skill-desc, .skill-tile:focus-visible .skill-desc { color: #94A3B8; }
    .skill-tile:hover .skill-icon, .skill-tile:focus-visible .skill-icon { transform: translateZ(30px) scale(1.08); }

    /* colour cycling per category, glow derived from existing palette only */
    .skill-tile:nth-child(4n+1):hover { box-shadow: var(--shadow-teal); }
    .skill-tile:nth-child(4n+2):hover { box-shadow: var(--shadow-gold); }
    .skill-tile:nth-child(4n+3):hover { box-shadow: var(--shadow-rust); }
    .skill-tile:nth-child(4n+4):hover { box-shadow: var(--shadow-green); }

    .skill-icon {
      font-size: 2.2rem;
      margin-bottom: 1rem;
      display: inline-block;
      transition: transform var(--dur-base) var(--ease-spring);
    }
    .skill-name {
      font-family: var(--font-display);
      font-size: 1.24rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      transition: color var(--dur-fast) ease;
      transform: translateZ(4px);
    }
    .skill-name a { text-decoration: none; color: var(--ink); transition: color var(--dur-fast) ease; }
    .skill-desc { font-size: 0.86rem; color: #64748B; line-height: 1.55; font-family: var(--font-sans); transition: color var(--dur-fast) ease; }

    /* ══════════════════════════════════════════════════════════════
       LESSON CARDS → dimensional surfaces, elevate + tilt on hover
       ══════════════════════════════════════════════════════════════ */
    .lessons-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem;
      perspective: var(--perspective);
    }
    .lesson-card {
      background: #fff;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-2);
      cursor: pointer;
      transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
      border: 1px solid rgba(0,0,0,0.04);
      transform-style: preserve-3d;
    }
    .lesson-card:hover, .lesson-card:focus-within { transform: translateY(-8px) translateZ(20px); box-shadow: var(--shadow-4); }
    .lesson-thumb {
      height: 148px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.8rem;
      position: relative;
      overflow: hidden;
    }
    .lesson-thumb span { transition: transform var(--dur-base) var(--ease-spring); display: inline-block; }
    .lesson-card:hover .lesson-thumb span { transform: translateZ(24px) scale(1.1); }
    .thumb-grammar { background: linear-gradient(135deg, #0F172A 40%, #1E3A5F 100%); }
    .thumb-vocab { background: linear-gradient(135deg, #0F4C5C 0%, #1A7A8C 100%); }
    .thumb-pronun { background: linear-gradient(135deg, #7F1D1D 0%, #9C2A1A 100%); }
    .thumb-listen { background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%); }
    .thumb-news { background: linear-gradient(135deg, #2D1A4D 0%, #5B21B6 100%); }
    .thumb-biz { background: linear-gradient(135deg, #14532D 0%, #15803D 100%); }

    .lesson-tag-bar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 0.55rem 1rem;
      background: linear-gradient(135deg, var(--green-premium) 85%, var(--green-light) 100%);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .lesson-level {
      font-family: var(--font-mono);
      font-size: 0.64rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--gold-light);
    }
    .lesson-duration {
      font-family: var(--font-mono);
      font-size: 0.64rem;
      font-weight: 500;
      color: #CBD5E1;
    }
    .lesson-body { padding: 1.3rem 1.5rem 1.6rem; }
    .lesson-category {
      font-family: var(--font-sans);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.6rem;
    }
    .lesson-title {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 0.65rem;
      color: #1E40AF;
      letter-spacing: -0.01em;
    }
    .lesson-title a {
      text-decoration: none;
      color: #1E40AF !important;
      transition: color var(--dur-fast) ease;
    }
    .lesson-title a:hover, .lesson-title a:focus-visible {
      color: #14532D !important;
    }
    .lesson-excerpt { font-size: 0.87rem; color: #64748B; line-height: 1.6; font-family: var(--font-sans); }

    /* ── QUOTE BAND ── */
    .quote-band {
      background: linear-gradient(135deg, var(--teal) 0%, #0F3D4A 100%);
      padding: 4.5rem 4rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }
    .quote-band::before {
      content: '❝';
      font-size: 16rem;
      color: rgba(255,255,255,0.04);
      position: absolute;
      left: 3rem;
      top: -3rem;
      font-family: var(--font-display);
      pointer-events: none;
    }
    .quote-text {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      font-weight: 500;
      font-style: italic;
      color: #fff;
      max-width: 800px;
      margin: 0 auto 1.2rem;
      line-height: 1.4;
      position: relative;
      letter-spacing: -0.01em;
    }
    .quote-attr {
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════════════════════════
       TESTIMONIALS → 3D depth cards, featured card advanced in Z
       ══════════════════════════════════════════════════════════════ */
    .testimonials-section {
      background: #fff;
      padding: 5.5rem 4rem;
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--pearl);
      border-bottom: 1px solid var(--pearl);
    }
    .testimonials-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
      opacity: 0.5;
    }
    .testimonials-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 3.5rem;
    }
    .testimonials-kicker {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
    }
    .testimonials-kicker::before, .testimonials-kicker::after {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--gold-light);
    }
    .testimonials-title {
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 3.8vw, 2.9rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 0.9rem;
    }
    .testimonials-title em {
      font-style: italic;
      font-weight: 500;
      color: var(--gold);
    }
    .testimonials-subtitle {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--slate-600);
      font-weight: 300;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.8rem;
      max-width: 1200px;
      margin: 0 auto;
      perspective: var(--perspective);
    }
    .testimonial-card {
      background: var(--parchment);
      border: 1px solid var(--pearl);
      border-radius: var(--radius-md);
      padding: 2rem 2rem 1.8rem;
      position: relative;
      transition: transform var(--dur-slow) var(--ease-soft), box-shadow var(--dur-slow) var(--ease-soft), background var(--dur-slow) ease;
      display: flex;
      flex-direction: column;
      transform-style: preserve-3d;
    }
    .testimonial-card:hover, .testimonial-card:focus-within {
      transform: translateY(-8px) translateZ(18px);
      box-shadow: var(--shadow-4);
      border-color: var(--gold-pale);
      background: #fff;
    }
    .testimonial-card.featured {
      background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
      border: 1px solid var(--gold-pale);
      box-shadow: 0 10px 36px rgba(183,138,45,0.14), 0 1px 0 rgba(0,0,0,0.04);
      transform: translateZ(22px) scale(1.02);
    }
    .testimonial-card.featured:hover {
      transform: translateZ(40px) scale(1.02) translateY(-8px);
      box-shadow: 0 30px 64px rgba(183,138,45,0.2);
    }
    .testimonial-quote-icon {
      font-family: var(--font-display);
      font-size: 3.6rem;
      line-height: 1;
      color: var(--gold-light);
      opacity: 0.35;
      margin-bottom: 0.6rem;
      font-weight: 700;
    }
    .testimonial-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 1.1rem;
      color: var(--gold);
      font-size: 0.95rem;
      letter-spacing: 1px;
    }
    .testimonial-text {
      font-family: var(--font-serif);
      font-size: 1.02rem;
      line-height: 1.7;
      color: var(--ink-soft);
      font-style: italic;
      margin-bottom: 1.6rem;
      flex-grow: 1;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      padding-top: 1.2rem;
      border-top: 1px solid var(--pearl);
      margin-top: auto;
    }
    .testimonial-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.1rem;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(15,23,42,0.15);
    }
    .testimonial-avatar.gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color: var(--ink); }
    .testimonial-avatar.teal { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%); }
    .testimonial-info h4 {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.2;
      margin-bottom: 2px;
    }
    .testimonial-info p {
      font-family: var(--font-sans);
      font-size: 0.76rem;
      color: var(--slate-600);
      line-height: 1.4;
    }
    .testimonial-badge {
      position: absolute;
      top: -10px; right: 20px;
      background: var(--ink);
      color: var(--gold-light);
      font-family: var(--font-sans);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.35rem 0.7rem;
      border-radius: 20px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    }
    .testimonial-photo {
      width: 48px; height: 48px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(15,23,42,0.15), 0 0 0 2px #fff, 0 0 0 3px var(--pearl);
      border: 2px solid #fff;
      transition: transform var(--dur-base) ease;
    }
    .testimonial-photo.gold { box-shadow: 0 2px 8px rgba(183,138,45,0.25), 0 0 0 2px #fff, 0 0 0 3px var(--gold-pale); }
    .testimonial-photo.teal { box-shadow: 0 2px 8px rgba(15,76,92,0.2), 0 0 0 2px #fff, 0 0 0 3px rgba(15,76,92,0.15); }
    .testimonial-card:hover .testimonial-photo { transform: scale(1.05) translateZ(6px); }
    .testimonial-badge.gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color: var(--ink); }

    /* ══════════════════════════════════════════════════════════════
       POPULAR SERIES → immersive 3D library, three-up shelf
       ══════════════════════════════════════════════════════════════ */
    .series-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.4rem;
      perspective: var(--perspective);
    }
    .series-card {
      border: 1px solid rgba(255,255,255,0.08);
      padding: 2.1rem 1.9rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      cursor: pointer;
      transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), border-color var(--dur-base) ease, background var(--dur-base) ease;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,0.02);
      transform-style: preserve-3d;
    }
    .series-card:hover, .series-card:focus-within {
      border-color: var(--gold);
      background: hwb(105 3% 65%);
      transform: translateY(-6px) translateZ(16px);
      box-shadow: 0 22px 48px rgba(0,0,0,0.4);
    }
    .series-num {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 700;
      color: rgba(212,169,106,0.22);
      line-height: 1;
      transition: color var(--dur-base) ease;
    }
    .series-card:hover .series-num { color: rgba(212,169,106,0.5); }
    .series-info h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.5rem;
    }
    .series-info p { font-size: 0.9rem; color: #94A3B8; line-height: 1.6; font-family: var(--font-sans); }
    .series-badge {
      display: inline-block;
      margin-top: 0.9rem;
      padding: 0.3rem 0.75rem;
      background: rgba(212,169,106,0.12);
      border: 1px solid rgba(212,169,106,0.18);
      color: var(--gold-light);
      font-family: var(--font-mono);
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      border-radius: 20px;
    }

    /* ══════════════════════════════════════════════════════════════
       FIND YOUR LEVEL → dimensional CEFR progression pathway
       Track line connects four stage-cards; each reveals a short
       description on hover AND on keyboard focus (:focus-within).
       ══════════════════════════════════════════════════════════════ */
    .level-finder {
      background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
      padding: 4.5rem 4rem 5rem;
      text-align: center;
      border-top: 1px solid var(--pearl);
      position: relative;
      overflow: hidden;
    }
    .level-finder::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(183,138,45,0.07) 1.5px, transparent 1.5px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%);
              mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%);
      pointer-events: none;
    }
    .level-finder h2 {
      font-family: var(--font-display);
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 0.8rem;
      letter-spacing: -0.01em;
      position: relative;
    }
    .level-finder > p { color: var(--slate-600); margin-bottom: 3rem; font-size: 1.05rem; font-family: var(--font-sans); position: relative; }

    .level-pathway {
      position: relative;
      max-width: 1080px;
      margin: 0 auto 2.6rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
      perspective: var(--perspective);
    }
    .level-track {
      position: absolute;
      top: 34px; left: 6%; right: 6%;
      height: 3px;
      background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 50%, var(--rust) 100%);
      opacity: 0.35;
      z-index: 0;
      border-radius: 2px;
    }
    .level-stage {
      position: relative;
      z-index: 1;
      text-decoration: none;
      color: inherit;
      background: #fff;
      border: 1px solid var(--pearl);
      border-radius: var(--radius-md);
      padding: 2.2rem 1.2rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      box-shadow: var(--shadow-2);
      transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
      transform-style: preserve-3d;
      cursor: pointer;
    }
    .level-node {
      width: 56px; height: 56px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 0.92rem;
      font-weight: 500;
      color: #fff;
      background: var(--teal);
      box-shadow: 0 6px 16px rgba(15,76,92,0.3);
      transition: transform var(--dur-base) var(--ease-spring);
    }
    .stage-2 .level-node { background: linear-gradient(135deg, var(--teal) 0%, var(--gold) 100%); box-shadow: 0 6px 16px rgba(183,138,45,0.25); }
    .stage-3 .level-node { background: var(--gold); box-shadow: 0 6px 16px rgba(183,138,45,0.32); }
    .stage-4 .level-node { background: linear-gradient(135deg, var(--gold) 0%, var(--rust) 100%); box-shadow: 0 6px 16px rgba(156,42,26,0.28); }

    .level-stage-label {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--ink);
    }
    .level-detail {
      font-family: var(--font-sans);
      font-size: 0.82rem;
      line-height: 1.55;
      color: var(--slate-600);
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height var(--dur-base) var(--ease-soft), opacity var(--dur-base) ease, margin-top var(--dur-base) ease;
      margin-top: 0;
    }
    .level-stage:hover, .level-stage:focus-visible, .level-stage:focus-within {
      transform: translateY(-10px) translateZ(24px);
      box-shadow: var(--shadow-4);
      border-color: var(--gold-pale);
    }
    .level-stage:hover .level-node, .level-stage:focus-visible .level-node { transform: translateZ(18px) scale(1.08); }
    .level-stage:hover .level-detail, .level-stage:focus-visible .level-detail, .level-stage:focus-within .level-detail {
      max-height: 120px;
      opacity: 1;
      margin-top: 0.4rem;
    }

    .level-test-btn {
      background: linear-gradient(135deg, var(--rust) 0%, #B91C1C 100%);
      color: #fff;
      padding: 1rem 2.8rem;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
      display: inline-block;
      text-decoration: none;
      box-shadow: var(--shadow-rust);
      position: relative;
    }
    .level-test-btn:hover, .level-test-btn:focus-visible {
      transform: translateY(-3px) translateZ(10px);
      box-shadow: 0 26px 56px rgba(156,42,26,0.36);
    }

    /* ══════════════════════════════════════════════════════════════
       PREMIUM MEMBERSHIP — new, small, exclusivity-led panel
       Layered 3D panels derived entirely from gold + ink.
       ══════════════════════════════════════════════════════════════ */
    .premium-section { padding: 5rem 4rem; background: var(--parchment); }
    .premium-panel {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      border-radius: var(--radius-lg);
      padding: 3.4rem 3.6rem;
      background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
      overflow: hidden;
      box-shadow: var(--shadow-4);
      transform-style: preserve-3d;
      perspective: var(--perspective);
    }
    .premium-layer {
      position: absolute;
      border-radius: var(--radius-lg);
      pointer-events: none;
    }
    .premium-layer-back {
      inset: -14px -14px auto auto;
      width: 60%; height: 70%;
      top: -20px; right: -30px;
      background: radial-gradient(circle, rgba(183,138,45,0.22) 0%, transparent 70%);
      transform: translateZ(-30px);
    }
    .premium-layer-mid {
      left: -10%; bottom: -30%;
      width: 46%; height: 90%;
      background: radial-gradient(circle, rgba(15,76,92,0.28) 0%, transparent 70%);
      transform: translateZ(-16px);
    }
    .premium-content { position: relative; z-index: 1; max-width: 620px; }
    .premium-kicker {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 1.1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
    }
    .premium-kicker::before { content: ''; width: 24px; height: 1px; background: var(--gold-light); }
    .premium-title {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 3.4vw, 2.5rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
    }
    .premium-title em { font-style: italic; font-weight: 500; color: var(--gold-light); }
    .premium-desc {
      font-family: var(--font-serif);
      color: #94A3B8;
      font-size: 1.02rem;
      line-height: 1.7;
      margin-bottom: 2rem;
      font-weight: 300;
    }
    .premium-cta { position: relative; }

    /* ── NEWSLETTER ── */
    .newsletter-banner {
      background: linear-gradient(135deg, var(--gold) 0%, #D4A96A 100%) !important;
      padding: 3.2rem 2.5rem !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 2rem;
      border-top: 1px solid rgba(0,0,0,0.06);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .newsletter-banner h2 { font-family: var(--font-display) !important; font-size: 2.3rem !important; font-weight: 700 !important; letter-spacing: -0.01em; }
    .newsletter-banner p { font-family: var(--font-sans) !important; }
    .newsletter-btn {
      padding: 1rem 2rem;
      background-color: var(--ink) !important;
      color: var(--gold-light) !important;
      border: none;
      font-family: var(--font-sans) !important;
      font-size: 0.8rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.08em !important;
      cursor: pointer;
      transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), background var(--dur-fast) ease;
      border-radius: 4px !important;
    }
    .newsletter-btn:hover, .newsletter-btn:focus-visible {
      background-color: #000 !important;
      transform: translateY(-2px) translateZ(8px);
      box-shadow: var(--shadow-3);
    }

    /* ─── PREMIUM FOOTER ─── */
    .site-footer {
      background-color: var(--green-premium);
      color: var(--pearl);
      font-family: var(--font-sans);
      border-top: 1px solid rgba(212,169,106,0.12);
    }
    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 4.5rem 2rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2.5rem;
    }
    .footer-brand-col { flex: 2; min-width: 300px; padding-right: 2rem; }
    .footer-links-col { flex: 1; min-width: 150px; }
    .footer-brand-title {
      font-family: var(--font-display);
      font-size: 2.1rem;
      margin: 0 0 1rem 0;
      font-weight: 700;
      color: var(--gold-light);
      letter-spacing: -0.01em;
    }
    .footer-brand-col p { font-size: 0.95rem; line-height: 1.7; margin: 0; color: #94A3B8; }
    .footer-links-col h4 {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin: 0 0 1.5rem 0;
    }
    .footer-links-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
    .footer-links-col a {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 400;
      color: #CBD5E1;
      text-decoration: none;
      transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
      display: inline-block;
    }
    .footer-links-col a:hover, .footer-links-col a:focus-visible { color: var(--gold-light); transform: translateX(3px); }
    .footer-bottom {
      background-color: #020617;
      padding: 1.3rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-bottom p { font-family: var(--font-sans); font-size: 0.78rem; color: #64748B; margin: 0; font-weight: 500; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-left > * { animation: fadeUp 0.7s var(--ease-soft) both; }
    .hero-tag { animation-delay: 0.1s; }
    .hero h1 { animation-delay: 0.2s; }
    .hero-desc { animation-delay: 0.35s; }
    .hero-btns { animation-delay: 0.5s; }

    /* ── CEFR MODAL ── */
    .cefr-modal-overlay {
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(6px);
      z-index: 999999; display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; padding: 1.5rem;
      perspective: 1000px;
    }
    .cefr-modal-overlay.active { opacity: 1; visibility: visible; }
    .cefr-modal-box {
      width: 100%; max-width: 440px; background: #FFFFFF;
      border-top: 5px solid var(--gold); border-radius: 10px;
      box-shadow: var(--shadow-5); padding: 2.4rem 2rem;
      position: relative; text-align: center; display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      transform: scale(0.9) translateZ(-40px) rotateX(6deg);
      transition: transform 0.4s var(--ease-spring);
    }
    .cefr-modal-overlay.active .cefr-modal-box { transform: scale(1) translateZ(0) rotateX(0); }
    .cefr-modal-close {
      position: absolute; top: 12px; right: 14px; background: transparent; border: none;
      font-size: 1.8rem; line-height: 1; color: #94A3B8; cursor: pointer;
      width: 34px; height: 34px; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; transition: background 0.2s, color 0.2s;
    }
    .cefr-modal-close:hover, .cefr-modal-close:focus-visible { background: #F1F5F9; color: var(--rust); }
    .cefr-modal-badge {
      font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      background: #FEF3C7; color: var(--gold); border: 1px solid #FDE68A;
      padding: 0.35rem 0.85rem; border-radius: 20px; margin-bottom: 1.1rem;
    }
    .cefr-modal-title {
      font-family: var(--font-display); font-size: 1.75rem;
      color: var(--ink); line-height: 1.25; margin-bottom: 0.8rem; font-weight: 700;
    }
    .cefr-modal-desc {
      font-family: var(--font-serif); font-size: 0.95rem;
      color: #475569; line-height: 1.6; margin-bottom: 1.8rem; max-width: 360px;
    }
    .cefr-modal-cta {
      display: block; width: 100%; padding: 1rem 1.2rem;
      background: linear-gradient(135deg, var(--rust) 0%, #B91C1C 100%);
      color: #FFFFFF !important; text-decoration: none;
      font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700;
      letter-spacing: 0.04em; border-radius: 6px;
      transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
      box-shadow: 0 4px 16px rgba(156,42,26,0.3);
    }
    .cefr-modal-cta:hover, .cefr-modal-cta:focus-visible { transform: translateY(-2px) translateZ(6px); box-shadow: var(--shadow-rust); }
    .cefr-modal-subnote { font-family: var(--font-sans); font-size: 0.7rem; color: #94A3B8; margin-top: 0.9rem; }

    /* ══════════════════════════════════════════════════════════════
       RESPONSIVE — desktop: rich 3D · tablet: simplified depth ·
       mobile: readability + performance first, scene simplified
       not merely shrunk (hero objects reduced in count, no parallax)
       ══════════════════════════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .testimonials-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      .testimonial-card.featured { transform: none; }
      .testimonial-card.featured:hover { transform: translateY(-6px); }
      .series-grid { grid-template-columns: repeat(2, 1fr); }
      .level-pathway { grid-template-columns: repeat(2, 1fr); }
      .hero-scene { opacity: 0.6; }
    }
    @media (max-width: 950px) {
      .hamburger { display: flex; }
      .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--ink);
        padding: 1rem 0;
        box-shadow: 0 12px 32px rgba(0,0,0,0.4);
        border-top: 1px solid rgba(255,255,255,0.06);
        perspective: none;
      }
      .nav-links.active { display: flex; }
      .nav-links li { width: 100%; text-align: center; }
      .nav-links a { padding: 1.2rem; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
      .nav-links a:hover { transform: none; }
      .nav-cta { margin: 1rem auto; width: 80%; text-align: center; }
      .nav-logo-img { height: 44px; }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-left::after { display: none; }
      .hero-right { padding: 3rem 2rem; }
      .featured-card, .featured-card:hover { transform: none !important; }
      /* Mobile 3D scene: simplified, not just shrunk — fewer objects, no parallax motion */
      .obj-node-cluster, .obj-bracket { display: none; }
      .skills-grid { grid-template-columns: repeat(2, 1fr); perspective: none; }
      .skill-tile:hover { transform: none; }
      .lessons-grid { grid-template-columns: 1fr 1fr; perspective: none; }
      .lesson-card:hover { transform: translateY(-4px); }
      .series-grid { grid-template-columns: 1fr; }
      .series-card:hover { transform: translateY(-4px); }
      .level-pathway { grid-template-columns: 1fr; gap: 1rem; }
      .level-track { display: none; }
      .level-stage:hover { transform: translateY(-4px); }
      .premium-panel { padding: 2.6rem 2rem; }
      .section, .testimonials-section { padding: 3rem 1.5rem; }
      .footer-container { flex-direction: column; padding: 3rem 1.5rem; gap: 3rem;}
      .footer-brand-col { padding-right: 0; }
      .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
    }
    @media (max-width: 600px) {
      .lessons-grid { grid-template-columns: 1fr; }
      .skills-grid { grid-template-columns: 1fr; }
      .hero-left { padding: 3rem 1.5rem; }
      .hero-btns { flex-direction: column; width: 100%; }
      .btn { text-align: center; width: 100%; }
      .newsletter-banner { flex-direction: column; text-align: center; gap: 1.5rem; }
      #subscribe-form { flex-direction: column; }
      .newsletter-btn { width: 100%; }
      .obj-waves, .obj-book, .obj-letter-a, .obj-pilcrow { display: none; }
      .obj-quote { font-size: 8rem; opacity: 0.12; }
      .premium-section { padding: 3rem 1.5rem; }
    }

    /* ══════════════════════════════════════════════════════════════
       ACCESSIBILITY — reduced motion: disable all transform/parallax
       animation, keep content instantly visible and static
       ══════════════════════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      [data-reveal] { opacity: 1 !important; transform: none !important; }
      .hero-object { transform: none !important; }
      .featured-card, .featured-card:nth-of-type(1), .featured-card:nth-of-type(2), .featured-card:nth-of-type(3) {
        transform: none !important;
      }
      .skill-tile:hover, .lesson-card:hover, .testimonial-card:hover, .series-card:hover, .level-stage:hover {
        transform: none !important;
      }
      .ticker-inner { animation: none !important; }
    }