html {
  scroll-behavior: smooth;
}
    :root {
      /* Base colors */
      --bg-hero-start: #f6d7c8; /* warm peach */
      --bg-hero-end: #e6c8db; /* soft pink-lilac */
      --bg-page: #ffffff;
      --text-strong: #141318;
      --text-body: #3a3940;
      --text-muted: #6a6873;

      /* Brand primaries */
      --brand-primary: #5a4ea0; /* plum */
      --brand-primary-press: #4b4289;
      --brand-primary-soft: #efeaf9;

      /* Accents */
      --accent-coral: #ef7467;
      --accent-red: #e05a58;

      /* Surfaces and lines */
      --surface: #ffffff;
      --surface-2: #faf7fb; /* very light lilac section */
      --line: #ece8f2;

      /* Radii and shadows */
      --radius-xl: 20px;
      --radius-lg: 14px;
      --radius-md: 10px;
      --radius-sm: 8px;
      --shadow-1: 0 10px 30px rgba(18, 10, 40, 0.08);

      /* Spacing */
      --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
      --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

      /* Type scale */
      --ff-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
      --ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
      --fz-xs: 12px; --fz-sm: 14px; --fz-md: 16px; --fz-lg: 18px; --fz-xl: 22px; --fz-2xl: 28px; --fz-3xl: 36px; --fz-4xl: 46px; --fz-5xl: 56px;
    }

    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--bg-page);
      color: var(--text-body);
      font-family: var(--ff-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-6); }

    /* Top bar */
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-6); position: sticky; top: 0; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); z-index: 20; }
    .brand { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; color: var(--text-strong); letter-spacing: .2px; }
    .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-coral), var(--brand-primary)); display: inline-block; }
    .nav { display: flex; gap: var(--s-6); align-items: center; font-size: var(--fz-sm); }

    /* Hero */
    .hero {
      background: url('https://magnity.ai/wp-content/uploads/2025/04/Wave_1_hero.webp');
      background-size: cover; background-position: center;
      padding: var(--s-20) 0 var(--s-16);
      text-align: center;
    }
    .eyebrow { color: var(--brand-primary); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: var(--fz-sm); }
    .title { font-family: var(--ff-display); font-weight: 800; color: var(--text-strong); margin: var(--s-3) auto var(--s-4); line-height: 1.05; font-size: clamp(32px, 4vw, var(--fz-5xl)); max-width: 18ch; }
    .subtitle { color: var(--text-body); opacity: .9; font-size: clamp(16px, 1.4vw, var(--fz-xl)); max-width: 70ch; margin: 0 auto var(--s-10); }

    /* Buttons */
    .actions { display: flex; justify-content: center; gap: var(--s-4); flex-wrap: wrap; }
    .btn { appearance: none; border: 1.5px solid transparent; padding: 12px 20px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
    .btn.primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-1); }
    .btn.primary:hover { transform: translateY(-1px); background: var(--brand-primary-press); }
    .btn.secondary { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }
    .btn.secondary:hover { background: var(--brand-primary-soft); }

    /* Sections & cards */
    .section { padding: var(--s-20) 0; }
    .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); overflow: hidden; }
    .card-hd { padding: var(--s-6) var(--s-8) var(--s-4); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
    .card-hd h3 { margin: 0; font-family: var(--ff-display); font-weight: 700; color: var(--text-strong); font-size: var(--fz-2xl); }
    .card-bd { padding: var(--s-8); }

    /* Video */
    .video-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; }
    .video-wrapper iframe, .video-wrapper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    /* Details */
    details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
    details + details { margin-top: var(--s-4); }
    summary { list-style: none; padding: var(--s-5) var(--s-6); font-weight: 600; cursor: pointer; position: relative; }
    summary::-webkit-details-marker { display: none; }
    summary:after { content: "+"; position: absolute; right: var(--s-6); top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 700; }
    details[open] summary:after { content: "−"; }
    details .content { padding: 0 var(--s-6) var(--s-6); color: var(--text-muted); }

    /* Related grid */
    .related { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .related-hd { text-align: center; margin-bottom: var(--s-10); }
    .related-hd h3 { font-family: var(--ff-display); font-size: var(--fz-3xl); color: var(--text-strong); margin: 0 0 var(--s-3); }
    .related-hd p { color: var(--text-muted); margin: 0; }

    .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
    @media (max-width: 980px) { .related-grid { grid-template-columns: 1fr; } }

    .rel-card { display: block; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: #fff; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
    .rel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: rgba(90, 78, 160, .35); }
    .rel-media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #f3f1f8; }
    .rel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .rel-body { padding: var(--s-6) var(--s-6) var(--s-6); display: grid; gap: var(--s-3); }
    .chip { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; padding: 2px 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-muted); width: fit-content; }
    .rel-title { margin: 0; font-weight: 700; color: var(--text-strong); font-size: var(--fz-lg); }

    /* CTA band & footer */
    .cta-band { padding: var(--s-16) 0; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .cta-band h3 { font-family: var(--ff-display); font-size: var(--fz-3xl); color: var(--text-strong); margin: 0 0 var(--s-4); text-align: center; }
    .cta-band p { text-align: center; color: var(--text-muted); margin: 0 0 var(--s-6); }

    footer { padding: var(--s-16) 0 var(--s-20); font-size: var(--fz-sm); color: var(--text-muted); border-top: 1px solid var(--line); }