E-Learning Platform — Meridian

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger);

initDemoShell({
  title: 'Meridian — E-Learning Platform',
  category: 'pages',
  tech: ['gsap', 'scroll-trigger', 'lenis', 'accordion', 'canvas-2d', 'outfit'],
});

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

// ── Lenis ─────────────────────────────────────────────────────────────────────
const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

// ── Nav ───────────────────────────────────────────────────────────────────────
// Nav is always visible (solid), no scroll-triggered changes needed

// ── Hero entrance ─────────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set(['.hero-badge', '.hero-h1', '.hero-p', '.hero-actions', '.hero-stats'], { opacity: 0, y: 20 });
  gsap.set('.progress-card', { opacity: 0, x: 30 });
  gsap.set('.skill-badge', { opacity: 0, scale: 0.8 });

  gsap.timeline({ delay: 0.3, defaults: { ease: 'expo.out' } })
    .to('.hero-badge',   { opacity: 1, y: 0, duration: 0.6 })
    .to('.hero-h1',      { opacity: 1, y: 0, duration: 0.9 }, '-=0.3')
    .to('.hero-p',       { opacity: 1, y: 0, duration: 0.7 }, '-=0.5')
    .to('.hero-actions', { opacity: 1, y: 0, duration: 0.6 }, '-=0.4')
    .to('.hero-stats',   { opacity: 1, y: 0, duration: 0.6 }, '-=0.3')
    .to('.progress-card',{ opacity: 1, x: 0, duration: 0.9, ease: 'back.out(1.5)' }, 0.5)
    .to('.skill-badge',  { opacity: 1, scale: 1, duration: 0.5, stagger: 0.1, ease: 'back.out(2)' }, 0.8);
}

// ── Hero stat counters ────────────────────────────────────────────────────────
document.querySelectorAll('.hs-num').forEach((el) => {
  const target = parseFloat(el.dataset.target);
  const suffix = el.dataset.suffix || '';
  if (!reduced) {
    ScrollTrigger.create({
      trigger: '.hero-stats',
      start: 'top 85%',
      end: 'top 30%',
      onUpdate: (self) => {
        const val = Math.round(target * self.progress);
        el.textContent = val.toLocaleString() + suffix;
      },
    });
  } else {
    el.textContent = target.toLocaleString() + suffix;
  }
});

// ── Progress card animation ───────────────────────────────────────────────────
if (!reduced) {
  // Animate progress bar to 37%
  gsap.to('#pc-fill', {
    width: '37%',
    duration: 1.5,
    ease: 'expo.out',
    delay: 1.2,
    onUpdate: function () {
      const w = parseFloat(this.targets()[0].style.width);
      document.getElementById('pc-pct').textContent = Math.round(w) + '%';
    },
  });

  // Floating skill badges gently float
  document.querySelectorAll('.skill-badge').forEach((badge, i) => {
    gsap.to(badge, {
      y: -8 + (i % 2) * 16,
      duration: 2 + i * 0.3,
      repeat: -1,
      yoyo: true,
      ease: 'sine.inOut',
      delay: i * 0.5,
    });
  });
} else {
  document.getElementById('pc-fill').style.width = '37%';
  document.getElementById('pc-pct').textContent = '37%';
}

// ── Skill tree canvas ─────────────────────────────────────────────────────────
const treeCanvas = document.getElementById('tree-canvas');
if (treeCanvas) {
  const tctx = treeCanvas.getContext('2d');
  function drawTree() {
    treeCanvas.width = treeCanvas.offsetWidth;
    treeCanvas.height = treeCanvas.offsetHeight;

    const COL_W = 110;
    const ROW_H = 60;
    const X_OFF = 60; // center of first col

    // Connections: [fromCol, fromRow, toCol, toRow, done]
    const connections = [
      [2, 1, 1, 2, true], [2, 1, 3, 2, true],
      [1, 2, 2, 3, false], [3, 2, 2, 3, false],
      [2, 3, 1, 4, false], [2, 3, 3, 4, false],
      [1, 4, 2, 5, false], [3, 4, 2, 5, false],
      [2, 5, 1, 6, false], [2, 5, 3, 6, false],
    ];

    connections.forEach(([c1, r1, c2, r2, done]) => {
      const x1 = (c1 - 1) * COL_W + X_OFF + 50;
      const y1 = (r1 - 1) * ROW_H + 28;
      const x2 = (c2 - 1) * COL_W + X_OFF + 50;
      const y2 = (r2 - 1) * ROW_H + 28;

      tctx.beginPath();
      tctx.moveTo(x1, y1);
      tctx.bezierCurveTo(x1, (y1 + y2) / 2, x2, (y1 + y2) / 2, x2, y2);
      tctx.strokeStyle = done ? 'rgba(5, 150, 105, 0.5)' : 'rgba(255, 255, 255, 0.08)';
      tctx.lineWidth = 1.5;
      tctx.stroke();
    });
  }
  drawTree();
  window.addEventListener('resize', drawTree);
}

// ── Course progress bars animate on scroll ────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.cc-progress-fill').forEach((fill, i) => {
    gsap.to(fill, {
      scaleX: 1,
      duration: 1,
      ease: 'expo.out',
      delay: i * 0.08,
      scrollTrigger: {
        trigger: '.courses-grid',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Course cards reveal ───────────────────────────────────────────────────────
if (!reduced) {
  document.querySelectorAll('.course-card').forEach((card, i) => {
    gsap.set(card, { opacity: 0, y: 30 });
    gsap.to(card, {
      opacity: 1, y: 0,
      duration: 0.8,
      ease: 'expo.out',
      delay: i * 0.08,
      scrollTrigger: {
        trigger: '.courses-grid',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Filter tabs ───────────────────────────────────────────────────────────────
document.querySelectorAll('.ft-btn').forEach((btn) => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.ft-btn').forEach((b) => b.classList.remove('active'));
    btn.classList.add('active');
    // In a real implementation: filter .course-card by data-category
    // Here we just toggle the active class for the demo
  });
});

// ── Pricing cards reveal ──────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.price-card', { opacity: 0, y: 25 });
  gsap.to('.price-card', {
    opacity: 1, y: 0,
    duration: 0.8,
    stagger: 0.12,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.pricing-grid',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Skill tree nodes reveal ───────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.st-node', { opacity: 0, scale: 0.8 });
  gsap.to('.st-node', {
    opacity: 1, scale: 1,
    duration: 0.5,
    stagger: 0.07,
    ease: 'back.out(1.5)',
    scrollTrigger: {
      trigger: '.skill-tree',
      start: 'top 70%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── FAQ Accordion ─────────────────────────────────────────────────────────────
const DURATION = reduced ? 0 : 0.4;

document.querySelectorAll('#faq-acc .acc-trigger').forEach((trigger) => {
  const item = trigger.closest('.acc-item');
  const body = item.querySelector('.acc-body');
  const arrow = trigger.querySelector('.at-arrow');
  gsap.set(body, { height: 0, overflow: 'hidden' });

  trigger.addEventListener('click', () => {
    const isOpen = item.classList.contains('is-open');

    // Close all
    document.querySelectorAll('#faq-acc .acc-item').forEach((other) => {
      if (other !== item && other.classList.contains('is-open')) {
        other.classList.remove('is-open');
        other.querySelector('.acc-trigger').setAttribute('aria-expanded', 'false');
        gsap.to(other.querySelector('.acc-body'), { height: 0, duration: DURATION, ease: 'expo.in', overwrite: true });
        gsap.to(other.querySelector('.at-arrow'), { rotation: 0, duration: DURATION * 0.7, ease: 'power2.in', overwrite: true });
      }
    });

    if (isOpen) {
      item.classList.remove('is-open');
      trigger.setAttribute('aria-expanded', 'false');
      gsap.to(body, { height: 0, duration: DURATION, ease: 'expo.in', overwrite: true });
      gsap.to(arrow, { rotation: 0, duration: DURATION * 0.7, ease: 'power2.in', overwrite: true });
    } else {
      item.classList.add('is-open');
      trigger.setAttribute('aria-expanded', 'true');
      gsap.to(body, { height: 'auto', duration: DURATION, ease: 'expo.out', overwrite: true });
      gsap.to(arrow, { rotation: 45, duration: DURATION, ease: 'back.out(2)', overwrite: true });
    }
  });
});

// ── Motion toggle ─────────────────────────────────────────────────────────────
window.addEventListener('motion-preference', (e) => {
  gsap.globalTimeline.paused(e.detail.reduced);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meridian — Learn Without Limits</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>

  <!-- Nav -->
  <nav class="nav" id="nav">
    <a href="#" class="nav-logo">
      <div class="logo-mark"></div>
      <span>Meridian</span>
    </a>
    <ul class="nav-links">
      <li><a href="#courses">Courses</a></li>
      <li><a href="#paths">Learning Paths</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
    <div class="nav-ctas">
      <a href="#" class="btn-text">Log in</a>
      <a href="#" class="btn-primary">Start Free</a>
    </div>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-inner">
      <div class="hero-text">
        <div class="hero-badge">
          <span class="hb-dot"></span>
          <span>2,400+ learners enrolled this week</span>
        </div>
        <h1 class="hero-h1">
          Learn skills that<br>
          <span class="h1-highlight">actually matter.</span>
        </h1>
        <p class="hero-p">Structured paths from beginner to job-ready. Expert instructors, real projects, and a community that keeps you accountable.</p>
        <div class="hero-actions">
          <a href="#courses" class="btn-primary btn-primary--lg">Browse Courses</a>
          <a href="#" class="btn-ghost">See how it works →</a>
        </div>
        <div class="hero-stats">
          <div class="hs-item">
            <span class="hs-num" data-target="48000" data-suffix="">0</span>
            <span class="hs-label">Students</span>
          </div>
          <div class="hs-div"></div>
          <div class="hs-item">
            <span class="hs-num" data-target="320" data-suffix="+">0</span>
            <span class="hs-label">Courses</span>
          </div>
          <div class="hs-div"></div>
          <div class="hs-item">
            <span class="hs-num" data-target="94" data-suffix="%">0</span>
            <span class="hs-label">Completion rate</span>
          </div>
        </div>
      </div>
      <div class="hero-visual">
        <!-- Progress card -->
        <div class="progress-card" id="progress-card">
          <div class="pc-header">
            <div class="pc-avatar"></div>
            <div class="pc-meta">
              <strong>Design Systems</strong>
              <span>Week 3 of 8</span>
            </div>
            <span class="pc-pct" id="pc-pct">0%</span>
          </div>
          <div class="pc-progress">
            <div class="pc-fill" id="pc-fill"></div>
          </div>
          <div class="pc-lessons">
            <div class="pc-lesson pc-lesson--done">✓ Introduction to tokens</div>
            <div class="pc-lesson pc-lesson--done">✓ Color scales</div>
            <div class="pc-lesson pc-lesson--active">▶ Typography system</div>
            <div class="pc-lesson">○ Spacing & grid</div>
            <div class="pc-lesson">○ Component variants</div>
          </div>
        </div>
        <!-- Floating skill badges -->
        <div class="skill-badge sb--1">Figma</div>
        <div class="skill-badge sb--2">Design Systems</div>
        <div class="skill-badge sb--3">React</div>
        <div class="skill-badge sb--4">CSS</div>
      </div>
    </div>
  </section>

  <!-- Skill tree -->
  <section class="skills-section" id="skills">
    <div class="skills-inner">
      <div class="skills-header">
        <span class="section-tag">Learning Path</span>
        <h2>Your skill tree,<br>visualized.</h2>
        <p>Every course unlocks the next. See exactly where you are and where you're headed.</p>
      </div>
      <div class="skill-tree" id="skill-tree">
        <canvas id="tree-canvas" aria-hidden="true"></canvas>
        <!-- Nodes -->
        <div class="st-node st-node--done" style="--col:2; --row:1">HTML & CSS</div>
        <div class="st-node st-node--done" style="--col:1; --row:2">Flexbox</div>
        <div class="st-node st-node--done" style="--col:3; --row:2">Grid</div>
        <div class="st-node st-node--active" style="--col:2; --row:3">JavaScript</div>
        <div class="st-node" style="--col:1; --row:4">React</div>
        <div class="st-node" style="--col:3; --row:4">TypeScript</div>
        <div class="st-node" style="--col:2; --row:5">Full-Stack</div>
        <div class="st-node st-node--locked" style="--col:1; --row:6">Next.js</div>
        <div class="st-node st-node--locked" style="--col:3; --row:6">Node.js</div>
      </div>
    </div>
  </section>

  <!-- Courses grid -->
  <section class="courses-section" id="courses">
    <div class="courses-header">
      <span class="section-tag">Featured Courses</span>
      <h2>What do you want to learn?</h2>
      <div class="filter-tabs">
        <button class="ft-btn active" data-filter="all">All</button>
        <button class="ft-btn" data-filter="design">Design</button>
        <button class="ft-btn" data-filter="dev">Development</button>
        <button class="ft-btn" data-filter="data">Data</button>
      </div>
    </div>
    <div class="courses-grid">
      <article class="course-card" data-category="design">
        <div class="cc-art cc-art--1"></div>
        <div class="cc-body">
          <div class="cc-tags"><span class="cc-tag">Design</span><span class="cc-level">Beginner</span></div>
          <h3>UI Fundamentals</h3>
          <p>Learn the principles that make great interfaces — contrast, hierarchy, whitespace, and motion.</p>
          <div class="cc-footer">
            <div class="cc-progress-bar"><div class="cc-progress-fill" style="--w: 0%"></div></div>
            <div class="cc-meta"><span>24 lessons</span><span class="cc-dot">·</span><span>4.8 ★</span></div>
          </div>
        </div>
      </article>
      <article class="course-card" data-category="dev">
        <div class="cc-art cc-art--2"></div>
        <div class="cc-body">
          <div class="cc-tags"><span class="cc-tag cc-tag--dev">Dev</span><span class="cc-level">Intermediate</span></div>
          <h3>React + TypeScript</h3>
          <p>Build scalable applications with modern React patterns, TypeScript, and component architecture.</p>
          <div class="cc-footer">
            <div class="cc-progress-bar"><div class="cc-progress-fill" style="--w: 0%"></div></div>
            <div class="cc-meta"><span>36 lessons</span><span class="cc-dot">·</span><span>4.9 ★</span></div>
          </div>
        </div>
      </article>
      <article class="course-card" data-category="data">
        <div class="cc-art cc-art--3"></div>
        <div class="cc-body">
          <div class="cc-tags"><span class="cc-tag cc-tag--data">Data</span><span class="cc-level">Beginner</span></div>
          <h3>Python for Data</h3>
          <p>From pandas to machine learning fundamentals — a practical path through data science with Python.</p>
          <div class="cc-footer">
            <div class="cc-progress-bar"><div class="cc-progress-fill" style="--w: 0%"></div></div>
            <div class="cc-meta"><span>42 lessons</span><span class="cc-dot">·</span><span>4.7 ★</span></div>
          </div>
        </div>
      </article>
      <article class="course-card" data-category="design">
        <div class="cc-art cc-art--4"></div>
        <div class="cc-body">
          <div class="cc-tags"><span class="cc-tag">Design</span><span class="cc-level">Advanced</span></div>
          <h3>Motion Design Systems</h3>
          <p>GSAP, Framer Motion, and principled animation choreography for production interfaces.</p>
          <div class="cc-footer">
            <div class="cc-progress-bar"><div class="cc-progress-fill" style="--w: 0%"></div></div>
            <div class="cc-meta"><span>28 lessons</span><span class="cc-dot">·</span><span>5.0 ★</span></div>
          </div>
        </div>
      </article>
      <article class="course-card" data-category="dev">
        <div class="cc-art cc-art--5"></div>
        <div class="cc-body">
          <div class="cc-tags"><span class="cc-tag cc-tag--dev">Dev</span><span class="cc-level">Intermediate</span></div>
          <h3>CSS Architecture</h3>
          <p>Design tokens, cascade layers, logical properties, and building design systems with modern CSS.</p>
          <div class="cc-footer">
            <div class="cc-progress-bar"><div class="cc-progress-fill" style="--w: 0%"></div></div>
            <div class="cc-meta"><span>18 lessons</span><span class="cc-dot">·</span><span>4.8 ★</span></div>
          </div>
        </div>
      </article>
      <article class="course-card" data-category="data">
        <div class="cc-art cc-art--6"></div>
        <div class="cc-body">
          <div class="cc-tags"><span class="cc-tag cc-tag--data">Data</span><span class="cc-level">Advanced</span></div>
          <h3>Data Visualization</h3>
          <p>D3.js, Observable Plot, and Canvas 2D — telling stories with data that people actually understand.</p>
          <div class="cc-footer">
            <div class="cc-progress-bar"><div class="cc-progress-fill" style="--w: 0%"></div></div>
            <div class="cc-meta"><span>31 lessons</span><span class="cc-dot">·</span><span>4.9 ★</span></div>
          </div>
        </div>
      </article>
    </div>
  </section>

  <!-- Pricing -->
  <section class="pricing-section" id="pricing">
    <div class="pricing-header">
      <span class="section-tag">Pricing</span>
      <h2>Simple, honest pricing.</h2>
    </div>
    <div class="pricing-grid">
      <div class="price-card">
        <div class="prce-tier">Free</div>
        <div class="prce-price">$0<span>/mo</span></div>
        <ul class="prce-features">
          <li>✓ 5 courses</li>
          <li>✓ Community access</li>
          <li>✓ Basic projects</li>
          <li class="prce-off">✗ Certificates</li>
          <li class="prce-off">✗ Mentor sessions</li>
        </ul>
        <a href="#" class="btn-outline-dark">Get started free</a>
      </div>
      <div class="price-card price-card--featured">
        <div class="prce-badge">Most Popular</div>
        <div class="prce-tier">Pro</div>
        <div class="prce-price">$29<span>/mo</span></div>
        <ul class="prce-features">
          <li>✓ All 320+ courses</li>
          <li>✓ Learning paths</li>
          <li>✓ Real projects + feedback</li>
          <li>✓ Certificates</li>
          <li>✓ 2 mentor sessions/mo</li>
        </ul>
        <a href="#" class="btn-primary">Start 7-day trial</a>
      </div>
      <div class="price-card">
        <div class="prce-tier">Team</div>
        <div class="prce-price">$19<span>/seat/mo</span></div>
        <ul class="prce-features">
          <li>✓ Everything in Pro</li>
          <li>✓ Team analytics</li>
          <li>✓ Custom paths</li>
          <li>✓ Priority support</li>
          <li>✓ Unlimited mentoring</li>
        </ul>
        <a href="#" class="btn-outline-dark">Contact sales</a>
      </div>
    </div>
  </section>

  <!-- FAQ accordion -->
  <section class="faq-section">
    <div class="faq-inner">
      <span class="section-tag">FAQ</span>
      <h2>Common questions</h2>
      <div class="accordion" id="faq-acc">
        <div class="acc-item">
          <button class="acc-trigger" aria-expanded="false">
            <span>Can I cancel anytime?</span>
            <span class="at-arrow">+</span>
          </button>
          <div class="acc-body">
            <div class="acc-inner"><p>Yes — no contracts, no lock-in. Cancel with a single click from your dashboard. You'll keep access until the end of your billing period.</p></div>
          </div>
        </div>
        <div class="acc-item">
          <button class="acc-trigger" aria-expanded="false">
            <span>Do I get a certificate?</span>
            <span class="at-arrow">+</span>
          </button>
          <div class="acc-body">
            <div class="acc-inner"><p>Pro and Team members receive verified completion certificates for every course. They're shareable directly to LinkedIn and as credential URLs.</p></div>
          </div>
        </div>
        <div class="acc-item">
          <button class="acc-trigger" aria-expanded="false">
            <span>How do learning paths work?</span>
            <span class="at-arrow">+</span>
          </button>
          <div class="acc-body">
            <div class="acc-inner"><p>A learning path is a curated sequence of courses that takes you from zero to a specific goal (e.g., "Frontend Developer" or "UX Researcher"). The skill tree unlocks as you progress through each course.</p></div>
          </div>
        </div>
        <div class="acc-item">
          <button class="acc-trigger" aria-expanded="false">
            <span>What if a course isn't right for me?</span>
            <span class="at-arrow">+</span>
          </button>
          <div class="acc-body">
            <div class="acc-inner"><p>Every course has a 30-minute free preview. If you're a Pro member and still find a course isn't right, contact us within 7 days for a full refund of that course.</p></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-brand">
      <div class="logo-mark"></div>
      <span>Meridian</span>
    </div>
    <p>© 2025 Meridian Learning Inc. · All rights reserved.</p>
  </footer>

  <script type="module" src="script.js"></script>
</body>
</html>