/* =========================================================
     1. Design tokens
     ========================================================= */
  :root {
    --bg: #F6F0E6;
    --bg-2: #EFE6D8;
    --sand: #EEE1CF;
    --band: #F0E2D2;
    --surface: #FFFCF7;
    --paper: #FCF8F1;

    --ink: #14231C;
    --ink-2: #34443C;
    --muted: #4F6058;
    --line: rgba(20, 35, 28, 0.11);
    --line-2: rgba(20, 35, 28, 0.2);

    --forest: #16382E;
    --forest-deep: #0E2620;
    --on-dark: #F3ECE3;
    --on-dark-2: #A9B8B0;
    --line-dark: rgba(243, 236, 227, 0.14);

    --accent: #C7622A;
    --accent-on-dark: #E8875A;
    --action: #A84F1C;
    --action-hover: #8F4216;
    --on-action: #FFF8F0;

    --ai: #5B43B5;
    --ai-bright: #6E52C9;
    --ai-on-dark: #B3A2F0;

    --font-d: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --font-b: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;

    --maxw: 1200px;
    --gutter: clamp(20px, 4vw, 40px);
    --section: clamp(56px, 7vw, 96px);
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 24px;

    --shadow-1: 0 1px 2px rgba(20, 35, 28, 0.05), 0 4px 14px -6px rgba(20, 35, 28, 0.1);
    --shadow-2: 0 1px 2px rgba(20, 35, 28, 0.06), 0 34px 64px -32px rgba(74, 38, 12, 0.38);
    --shadow-lift: 0 1px 2px rgba(20, 35, 28, 0.05), 0 24px 48px -30px rgba(20, 35, 28, 0.42);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --focus: var(--ai);
    interpolate-size: allow-keywords;
  }

  /* =========================================================
     2. Base
     ========================================================= */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0; background: var(--bg); color: var(--ink-2);
    font-family: var(--font-b); font-size: 1.0625rem; line-height: 1.65;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; overflow-x: clip; position: relative;
  }
  img, svg { max-width: 100%; }
  h1, h2, h3 { font-family: var(--font-d); color: var(--ink); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  .muted { color: var(--muted); }
  .wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .btn:focus-visible { outline-offset: 4px; }
  .on-dark { --focus: var(--ai-on-dark); }
  main:focus { outline: none; }

  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link {
    position: absolute; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-md);
    background: var(--forest-deep); color: var(--on-dark); font-family: var(--font-d); font-weight: 700; font-size: .9375rem; text-decoration: none;
    box-shadow: var(--shadow-1); transform: translateY(calc(-100% - 24px));
  }
  .skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid var(--ai); outline-offset: 3px; }
  .scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

  /* Shared section scaffolding */
  .eyebrow-rule { display: block; width: 40px; height: 2px; background: var(--accent); }

  /* =========================================================
     3. Buttons
     ========================================================= */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 14px 26px 14px 28px; border-radius: var(--r-md);
    border: 1px solid transparent; background: var(--action); color: var(--on-action);
    font-family: var(--font-d); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.005em;
    text-decoration: none; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(20, 35, 28, 0.2), 0 8px 20px -10px rgba(168, 79, 28, 0.7);
    transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .btn::after {
    content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s var(--ease);
  }
  .btn:active { transform: translateY(0) scale(0.985); }
  .btn--sm { min-height: 44px; padding: 10px 16px 10px 18px; font-size: .9375rem; gap: 8px; }
  .btn--sm::after { width: 14px; height: 14px; }
  .btn--ghost { background: transparent; color: var(--forest); border-color: var(--line-2); box-shadow: none; }
  .btn--lg { min-height: 60px; padding: 18px 32px 18px 36px; font-size: 1.1875rem; }
  @media (hover: hover) {
    .btn:hover { background: var(--action-hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(20,35,28,.2), 0 14px 28px -12px rgba(168,79,28,.75); }
    .btn:hover::after { transform: translateX(3px); }
    .btn--ghost:hover { background: var(--forest); color: var(--on-dark); border-color: var(--forest); box-shadow: 0 10px 24px -14px rgba(14,38,32,.6); }
  }

  /* =========================================================
     4. Header
     ========================================================= */
  .site-header {
    position: sticky; top: 0; z-index: 50; background: rgba(250, 245, 238, 0.88);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  }
  .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -22px rgba(20, 35, 28, 0.35); background: rgba(250, 245, 238, 0.94); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; max-width: calc(1650px + 2 * var(--gutter)); border-bottom: 1px solid rgba(16, 36, 27, 0.1); }
  .site-header.is-scrolled .wrap { border-bottom-color: transparent; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-d); font-weight: 700; font-size: clamp(1.0625rem, .85rem + .75vw, 1.5rem); letter-spacing: -0.025em; color: #10241B; white-space: nowrap; }
  .brand-mark { flex: none; width: 1.45em; height: auto; fill: #16382E; }
  /* Pill CTAs in the hero palette (header + hero only) */
  .btn--pill { border-radius: 999px; background: linear-gradient(90deg, #C8571E, #E0742F); padding-inline: 26px 22px; }
  .btn--sm.btn--pill { padding-inline: 20px 16px; font-weight: 700; }
  .btn--glow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 30px rgba(224, 116, 47, 0.35); }
  @media (hover: hover) {
    .btn--pill:hover { background: linear-gradient(90deg, #B44C17, #D3662A); }
    .btn--glow:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 36px rgba(224, 116, 47, 0.45); }
  }

  /* =========================================================
     5. Hero band (hero + stats as one composition)
     ========================================================= */
  .hero-band {
    --h-ink: #10241B; --h-purple: #4B2BD6; --h-violet: #8A63F0; --h-purple-text: #6B4BE0; --h-lilac: #9C86E8;
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(180deg, #FAF5EE 0%, #FAF5EE 70%, #F5EDE1 100%);
    border-bottom: 1px solid var(--line);
    padding-bottom: clamp(36px, 4.5vw, 56px);
  }
  /* Faint dot grid, strongest on the right half */
  .hero-band::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(rgba(16, 36, 27, 0.16) 1.1px, transparent 1.5px) 0 0 / 24px 24px;
    -webkit-mask: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.35) 52%, #000 78%); mask: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.35) 52%, #000 78%);
  }
  .hero-band > .wrap { max-width: calc(1650px + 2 * var(--gutter)); }
  .hero {
    position: relative; display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: clamp(24px, 2.4vw, 48px); align-items: center;
    padding-top: clamp(36px, 4.4vw, 72px); padding-bottom: clamp(40px, 4.4vw, 72px);
  }
  /* Corner shapes, partly cut off by the viewport */
  .hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .deco { position: absolute; border-radius: 50%; }
  .deco--tr-b { width: 150px; height: 150px; right: calc(50% - 50vw - 70px); top: 90px; background: #F6B98E; }
  .deco--tr-a { width: 150px; height: 150px; right: calc(50% - 50vw - 80px); top: -14px; background: rgba(167, 139, 234, 0.88); }
  .deco--bl-b { width: 150px; height: 150px; left: calc(50% - 50vw - 80px); bottom: -84px; background: #1E4D3A; }
  .deco--bl-a { width: 190px; height: 190px; left: calc(50% - 50vw - 130px); bottom: -170px; background: rgba(196, 180, 245, 0.85); }

  /* Copy column */
  .hero-copy { position: relative; min-width: 0; }
  .hero-accent { display: block; width: 70px; height: 4px; margin-bottom: clamp(18px, 2vw, 26px); border-radius: 4px; background: linear-gradient(90deg, var(--h-purple), var(--h-violet)); }
  .hero-title { font-size: clamp(2.5rem, 5.3vw, 5.625rem); line-height: 1.02; letter-spacing: -0.045em; color: var(--h-ink); margin-bottom: clamp(26px, 2.8vw, 40px); }
  .hero-title .ai { display: block; color: var(--h-purple); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title .ai { width: fit-content; padding-bottom: .06em; background: linear-gradient(90deg, var(--h-purple) 0%, #6A47E6 45%, var(--h-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  .hero-programs { display: grid; gap: clamp(18px, 2vw, 26px); margin-bottom: clamp(28px, 3vw, 40px); }
  .program { display: grid; justify-items: start; gap: 12px; }
  .prog-title { font-family: var(--font-b); font-weight: 600; font-size: clamp(1.25rem, .95rem + .85vw, 1.625rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--h-ink); max-width: 30ch; }
  .prog-intern { font-weight: 500; font-size: clamp(1.125rem, .9rem + .6vw, 1.375rem); color: var(--h-purple-text); max-width: 36ch; }
  .prog-plus { font-weight: 700; }
  .prog-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 8px; background: #fff; border: 1px solid rgba(16, 36, 27, 0.06); box-shadow: 0 1px 2px rgba(16, 36, 27, 0.06), 0 6px 16px -8px rgba(16, 36, 27, 0.18); font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--h-ink); }
  .prog-badge svg { flex: none; width: 16px; height: 16px; color: var(--h-purple-text); }
  .hero-actions { display: grid; justify-items: start; gap: clamp(22px, 2.4vw, 32px); }
  .hero-actions .btn--lg { min-height: 60px; padding-inline: 34px 30px; }
  .trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 640px; }
  .trust li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-radius: 12px; border: 1px solid rgba(16, 36, 27, 0.06); box-shadow: 0 1px 2px rgba(16, 36, 27, 0.05), 0 10px 22px -14px rgba(16, 36, 27, 0.25); font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--h-ink); }
  .trust svg { flex: none; width: 22px; height: 22px; color: var(--h-ink); }

  /* Visual column: orbital diagram, handwritten accent, student */
  .hero-visual { position: relative; min-width: 0; align-self: stretch; display: flex; align-items: center; }
  .hero-art { position: relative; width: 78%; max-width: 680px; margin-right: auto; margin-top: -2%; }
  .hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
  .h-orbit { fill: none; stroke: rgba(138, 99, 240, 0.3); stroke-width: 1.2; }
  .h-orbit--part { stroke-dasharray: 250 70 40 70; }
  .h-orbit--dots { stroke: rgba(138, 99, 240, 0.55); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .1 93; }
  .h-orbit--arc { stroke: rgba(138, 99, 240, 0.4); stroke-width: 1.4; stroke-dasharray: 180 46 6 46; }
  .h-orbit--fine { stroke: rgba(138, 99, 240, 0.2); stroke-dasharray: 2 6; }
  .h-orbit--ticks { stroke: rgba(138, 99, 240, 0.5); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 46; }
  .h-spoke { stroke: rgba(138, 99, 240, 0.16); stroke-width: 1; stroke-dasharray: 1.5 7; stroke-linecap: round; }
  .h-link { stroke: rgba(106, 63, 234, 0.6); stroke-width: 2; stroke-linecap: round; }
  .h-disc { fill: url(#h-disc); stroke: rgba(138, 99, 240, 0.16); stroke-width: 1; }
  .h-core-ring { fill: none; stroke: rgba(106, 63, 234, 0.55); stroke-width: 1.6; }
  .h-core-ring--soft { stroke: rgba(138, 99, 240, 0.18); stroke-width: 6; }
  .h-label { font-family: var(--font-b); font-size: 17px; font-weight: 700; fill: var(--h-ink); letter-spacing: -0.01em; }
  .h-chip { fill: rgba(138, 99, 240, 0.62); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
  .h-chip-text { font-family: var(--font-b); font-size: 15px; font-weight: 700; fill: #fff; letter-spacing: .04em; }
  .h-icon { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .hnode, .core-halo, .h-node-halo { transform-box: fill-box; transform-origin: center; }
  .hero-script {
    position: absolute; left: 1%; bottom: -1%; z-index: 2; display: grid; justify-items: start; margin: 0; rotate: -15deg;
    font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600; font-size: clamp(1.5rem, 1rem + 1vw, 2.125rem); line-height: .95; color: #A89BD6;
  }
  .hero-script span:nth-child(2) { padding-left: .5em; }
  .hero-script span:nth-child(3) { padding-left: 1.1em; }
  .hero-script svg { width: 4.6em; height: auto; margin-top: .15em; stroke: #A89BD6; }
  .hero-student { position: absolute; right: calc(-1 * max(var(--gutter), (100vw - 1650px) / 2)); bottom: calc(-1 * clamp(40px, 4.4vw, 72px)); z-index: 1; width: clamp(230px, 20vw, 360px); pointer-events: none; }
  .student-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .student-photo { position: relative; display: block; width: 100%; height: auto; -webkit-mask: linear-gradient(180deg, #000 90%, transparent); mask: linear-gradient(180deg, #000 90%, transparent); }

  @media (max-width: 1023px) {
    .hero { grid-template-columns: 1fr; gap: 36px; }
    .hero-title { font-size: clamp(2.5rem, 7.8vw, 4.5rem); }
    .hero-visual { display: block; }
    .hero-art { width: min(68%, 540px); margin: 0; }
    .hero-student { right: calc(-1 * var(--gutter)); width: min(31%, 260px); }
    .hero-script { left: auto; right: 3%; top: 4%; bottom: auto; font-size: 1.875rem; }
  }
  @media (max-width: 640px) {
    .trust { grid-template-columns: 1fr; max-width: none; }
    .hero-student, .hero-script { display: none; }
    .hero-art { width: auto; margin-inline: -8px; }
    .h-label { font-size: 24px; }
    .hero-actions .btn--lg { width: 100%; }
    .deco--tr-a, .deco--tr-b { scale: .6; transform-origin: top right; }
    .deco--bl-a, .deco--bl-b { scale: .6; }
  }

  /* Stats: a raised strip that closes the hero */
  .stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: linear-gradient(180deg, #FFFDF9 0%, var(--surface) 55%, #FCF8F1 100%);
    border: 0; border-radius: 18px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 1px 1px rgba(20, 35, 28, 0.04),
      0 3px 8px -4px rgba(20, 35, 28, 0.08),
      0 26px 44px -30px rgba(20, 35, 28, 0.34);
    position: relative; overflow: hidden; transition: box-shadow .35s var(--ease);
  }
  .stat { position: relative; display: flex; flex-direction: column; padding: 28px 30px 30px; }
  /* Hairline dividers that fade toward the ends instead of a hard full-height border */
  .stat + .stat::after {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 35, 28, 0), rgba(20, 35, 28, 0.13) 22%, rgba(20, 35, 28, 0.13) 78%, rgba(20, 35, 28, 0));
  }
  /* One brand gradient (forest > terracotta > indigo) runs across the whole strip;
     each column shows its own slice of it via --slice. */
  .stats { --brand-grad: linear-gradient(90deg, var(--forest) 0%, var(--accent) 45%, var(--ai-bright) 100%); }
  .stat:nth-child(1) { --slice: 0%; }
  .stat:nth-child(2) { --slice: 33.333%; }
  .stat:nth-child(3) { --slice: 66.666%; }
  .stat:nth-child(4) { --slice: 100%; }
  .stat-mark {
    display: block; width: 42px; height: 4px; border-radius: 4px; margin-bottom: 16px;
    background: var(--brand-grad) var(--slice) 0 / 240% 100% no-repeat;
    transform-origin: left center;
    transition: width .45s var(--ease-out), background-position .6s var(--ease-out);
  }
  /* Gradient hairline that grows along the bottom of a column on hover */
  .stat::before {
    content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
    background: var(--brand-grad) var(--slice) 0 / 400% 100% no-repeat;
    transform: scaleX(0); transform-origin: left center; opacity: .85;
    transition: transform .5s var(--ease-out);
  }
  /* Gradient ring border: sweeps once on reveal, turns slowly while hovered */
  @property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .stats::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--sweep), rgba(22, 56, 46, 0.18), rgba(199, 98, 42, 0.5), rgba(110, 82, 201, 0.5), rgba(22, 56, 46, 0.18) 75%, rgba(22, 56, 46, 0.18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .stat strong {
    font-family: var(--font-d); font-weight: 780; font-size: clamp(1.5rem, 1.05rem + 1.25vw, 2.125rem);
    line-height: 1.04; letter-spacing: -0.032em; color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums; font-kerning: normal; text-wrap: balance;
    transition: transform .3s var(--ease-out);
  }
  /* Figures can melt from ink into the brand gradient on hover (text stays ink until then) */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .stat strong {
      background: linear-gradient(90deg, var(--ink) 0 50%, var(--forest) 60%, var(--action) 80%, var(--ai) 100%) 0 0 / 200% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      transition: transform .3s var(--ease-out), background-position .7s var(--ease-out);
    }
  }
  @media (forced-colors: active) {
    .stat strong { background: none; color: CanvasText; }
  }
  .stat strong .count { display: inline-block; }
  .stat strong + span {
    margin-top: 9px; font-size: .875rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.005em;
    color: var(--muted); transition: color .3s var(--ease);
  }
  @media (hover: hover) {
    .stats:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 1px rgba(20, 35, 28, 0.04), 0 4px 10px -4px rgba(20, 35, 28, 0.09), 0 30px 52px -30px rgba(20, 35, 28, 0.4); }
    .stats:hover::after, .motion .stats:has(.stat.is-in):hover::after { animation: border-sweep 7s linear infinite; }
    .stat:hover .stat-mark { width: 60px; }
    .stat:hover::before { transform: scaleX(1); }
    .stat:hover strong { transform: translateY(-1px); background-position: 100% 0; }
    .stat:hover strong + span { color: var(--ink-2); }
  }

  /* =========================================================
     6. Journey (light editorial cards on warm paper)
     ========================================================= */
  .journey-band {
    --jr-green: #123D2E; --jr-orange: #E0702A; --jr-sage: #A9C7A0; --jr-peach: #F2B08A; --jr-body: #5E6B64; --jr-card: #FBF8F3;
    --jr-pad: clamp(22px, 2.1vw, 34px); --jr-badge: clamp(62px, 5vw, 88px); --jr-head-gap: clamp(10px, 1vw, 16px); --jr-title: clamp(1.5rem, .9rem + 1vw, 2.125rem); --jr-photo: clamp(132px, 11.5vw, 200px);
    position: relative; isolation: isolate; overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px, #F7F1E8;
    padding-block: clamp(52px, 5.2vw, 92px) clamp(76px, 7.4vw, 128px);
  }
  .jr-wrap { max-width: calc(1800px + 2 * clamp(16px, 4.6vw, 100px)); margin-inline: auto; padding-inline: clamp(16px, 4.6vw, 100px); }
  .jr-deco { position: absolute; z-index: -1; pointer-events: none; height: auto; max-width: none; }
  .jr-deco--bl { left: 0; bottom: 0; width: clamp(240px, 30vw, 540px); }
  .jr-deco--br { right: 0; bottom: 0; width: clamp(200px, 22vw, 400px); }

  .jr-top { position: relative; display: grid; grid-template-columns: auto minmax(0, 500px) minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 3.6vw, 72px); margin-bottom: clamp(30px, 3.2vw, 56px); }
  .jr-eyebrow { font-family: var(--font-b); font-weight: 600; font-size: clamp(.875rem, .7rem + .4vw, 1.125rem); letter-spacing: .3em; text-transform: uppercase; color: var(--jr-green); margin-bottom: 14px; }
  .jr-bar { display: block; width: 110px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--jr-green) 0 55%, var(--jr-orange) 55%); margin-bottom: clamp(20px, 2vw, 30px); }
  .jr-intro h2 { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.9rem); line-height: .98; letter-spacing: -0.045em; color: var(--jr-green); }
  .jr-intro h2 span { display: block; color: var(--jr-orange); }
  .jr-desc { position: relative; max-width: 500px; padding-left: clamp(24px, 2.6vw, 44px); font-size: 1.125rem; line-height: 1.65; color: var(--jr-body); } /* same size as the .certs-head intro text */
  .jr-desc::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 120px; translate: 0 -50%; background: rgba(18, 61, 46, 0.2); }
  .jr-accent { justify-self: end; align-self: start; display: grid; justify-items: center; gap: 4px; }
  .jr-mark { width: clamp(76px, 6vw, 116px); height: auto; justify-self: end; margin-bottom: -6px; }
  .jr-script { display: grid; justify-items: start; margin: 0; rotate: -15deg; font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.1vw, 2.75rem); line-height: .92; color: var(--jr-green); }
  .jr-script span:nth-child(2) { padding-left: .45em; }
  .jr-script span:nth-child(3) { padding-left: .95em; }
  .jr-script svg { width: 3.6em; height: auto; margin: .12em 0 0 .3em; }

  /* Four cards with connector buttons in the gaps */
  .jr-stages { --gap: clamp(28px, 3.4vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr) var(--gap) minmax(0, 1fr) var(--gap) minmax(0, 1fr); align-items: stretch; }
  .jr-card {
    --tone: var(--jr-green); --leaf-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='%23A9C7A0'%3E%3Cpath d='M54 0c34 12 72 36 106 72V50C132 26 104 9 78 0z' fill-opacity='.32'/%3E%3Cpath d='M104 0c22 10 42 24 56 40V16C148 9 132 3 118 0z' fill-opacity='.24'/%3E%3C/g%3E%3C/svg%3E"); --leaf-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='%23A9C7A0' fill-opacity='.38' d='M160 22C100 42 58 94 44 160h116z'/%3E%3Cpath fill='%239CBE92' fill-opacity='.88' d='M160 66c-40 14-68 48-76 94h76z'/%3E%3C/svg%3E");
    position: relative; overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--jr-pad) * .72) var(--jr-pad) var(--jr-pad) calc(var(--jr-pad) * .72); border-radius: 20px;
    background: var(--jr-card); box-shadow: 0 10px 30px rgba(18, 61, 46, 0.08);
    transition: translate .3s var(--ease-out), box-shadow .3s var(--ease);
  }
  .jr-card--orange { --tone: var(--jr-orange); --leaf-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='%23F2B08A'%3E%3Cpath d='M54 0c34 12 72 36 106 72V50C132 26 104 9 78 0z' fill-opacity='.32'/%3E%3Cpath d='M104 0c22 10 42 24 56 40V16C148 9 132 3 118 0z' fill-opacity='.24'/%3E%3C/g%3E%3C/svg%3E"); --leaf-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath fill='%23F2B08A' fill-opacity='.38' d='M160 22C100 42 58 94 44 160h116z'/%3E%3Cpath fill='%23E98A52' fill-opacity='.88' d='M160 66c-40 14-68 48-76 94h76z'/%3E%3C/svg%3E"); }
  .jr-card::before, .jr-card::after { content: ""; position: absolute; right: 0; width: clamp(80px, 6.6vw, 128px); aspect-ratio: 1; pointer-events: none; background: var(--leaf-top) right top / contain no-repeat; }
  .jr-card::before { top: 0; }
  .jr-card::after { bottom: 0; background-image: var(--leaf-bottom); background-position: right bottom; }
  .jr-card > * { position: relative; z-index: 1; }
  .jr-card-head { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 24px); margin-bottom: clamp(14px, 1.4vw, 20px); }
  .jr-badge { flex: none; width: var(--jr-badge); height: var(--jr-badge); display: grid; place-items: center; border-radius: 50%; background: var(--tone); color: #fff; box-shadow: -6px -3px 0 0 color-mix(in srgb, var(--tone) 30%, transparent), 0 14px 24px -14px var(--tone); }
  .jr-badge svg { width: 42%; height: 42%; }
  .jr-num { font-family: var(--font-b); font-weight: 600; font-size: clamp(.8125rem, .7rem + .3vw, 1rem); letter-spacing: .18em; text-transform: uppercase; color: var(--jr-green); white-space: nowrap; }
  .jr-num::after { content: ""; display: block; width: 30px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--tone); }
  .jr-photo { position: relative; z-index: 1; height: var(--jr-photo); margin: 0 0 clamp(16px, 1.6vw, 22px); border-radius: 14px; overflow: hidden; isolation: isolate; background: #E9E0D2; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 26px -18px rgba(18, 61, 46, 0.55); }
  .jr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05) sepia(.1) brightness(1.02); transition: scale .9s var(--ease-out), filter .6s var(--ease); }
  /* Colour grade: a warm wash in the card's tone, a soft vignette and a fine inner rim */
  .jr-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 244, 228, 0.12), rgba(255, 244, 228, 0) 40%), linear-gradient(0deg, color-mix(in srgb, var(--tone) 30%, transparent), transparent 55%), radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(18, 30, 24, 0.28));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: opacity .5s var(--ease); }
  @media (hover: hover) {
    .jr-card:hover .jr-photo img { scale: 1.06; filter: saturate(1) contrast(1.06) sepia(.04) brightness(1.03); }
    .jr-card:hover .jr-photo::after { opacity: .75; }
  }
  .jr-title { font-size: var(--jr-title); line-height: 1.1; letter-spacing: -0.03em; color: var(--jr-green); margin: 0 0 10px; }
  .jr-text { max-width: 36ch; margin-left: 0; padding-right: clamp(6px, 1vw, 24px); font-size: clamp(.9375rem, .75rem + .3vw, 1.125rem); line-height: 1.5; color: var(--jr-body); }
  @media (hover: hover) {
    .jr-card:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(18, 61, 46, 0.14); }
  }
  .jr-link { --tone: var(--jr-green); position: relative; z-index: 2; align-self: start; height: 44px; display: grid; place-items: center; margin-top: calc(var(--jr-pad) * .72 + var(--jr-badge) + clamp(14px, 1.4vw, 20px) + var(--jr-photo) / 2 - 22px); }
  .jr-link--orange { --tone: var(--jr-orange); }
  .jr-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--tone); }
  .jr-link span { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tone); box-shadow: 0 8px 18px -8px var(--tone); }
  .jr-link span::after { content: ""; width: 18px; height: 18px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

  @media (max-width: 1199px) {
    .jr-top { grid-template-columns: minmax(0, 1fr) auto; row-gap: 28px; }
    .jr-desc { grid-column: 1 / -1; max-width: 640px; }
    .jr-desc::before { height: 100%; }
    .jr-accent { grid-row: 1; grid-column: 2; }
    .jr-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
    .journey-band { --jr-photo: clamp(170px, 20vw, 230px); }
    .jr-link { display: none; }
  }
  @media (max-width: 767px) {
    .jr-top { grid-template-columns: 1fr; row-gap: 22px; }
    .jr-accent { grid-row: auto; grid-column: auto; }
    .jr-accent { justify-self: start; grid-template-columns: auto auto; align-items: center; gap: 18px; }
    .jr-script { font-size: 1.75rem; rotate: -10deg; }
    .jr-desc { padding: 22px 0 0; }
    .jr-desc::before { top: 0; width: 72px; height: 1px; translate: none; }
    .jr-stages { grid-template-columns: 1fr; gap: 0; }
    .jr-text { padding-right: clamp(48px, 15vw, 80px); }
    .journey-band { --jr-photo: clamp(170px, 50vw, 260px); }
    .jr-link { display: grid; height: 64px; margin: 0; }
    .jr-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; }
    .jr-link span { width: 40px; height: 40px; rotate: 90deg; }
  }

  /* =========================================================
     7. Differentiators (white spec band)
     ========================================================= */
  /* Benefits as three illustrated pillars on one blueprint surface */
  .diffs-band {
    position: relative; isolation: isolate;
    background: linear-gradient(180deg, #FAF5EC 0%, #F3EADC 100%);
    border-block: 1px solid rgba(20, 35, 28, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 26px 40px -34px rgba(20, 35, 28, 0.45);
  }
  .diffs-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(20, 35, 28, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 35, 28, 0.055) 1px, transparent 1px);
    background-size: 32px 32px; background-position: center top;
    -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
            mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  }
  .diffs {
    --cg: clamp(36px, 4.6vw, 68px);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg);
    /* faded hairline dividers drawn exactly in the centre of each column gap */
    background-image:
      linear-gradient(180deg, rgba(20, 35, 28, 0), rgba(20, 35, 28, 0.12) 18%, rgba(20, 35, 28, 0.12) 82%, rgba(20, 35, 28, 0)),
      linear-gradient(180deg, rgba(20, 35, 28, 0), rgba(20, 35, 28, 0.12) 18%, rgba(20, 35, 28, 0.12) 82%, rgba(20, 35, 28, 0));
    background-size: 1px 100%; background-repeat: no-repeat; background-origin: content-box;
    background-position: calc((100% - 2 * var(--cg)) / 3 + var(--cg) / 2) 0, calc((100% - 2 * var(--cg)) * 2 / 3 + var(--cg) * 1.5) 0;
  }
  .diff {
    --tint: 22, 56, 46; --tone: var(--forest);
    position: relative; isolation: isolate; display: flex; flex-direction: column;
    padding: clamp(30px, 3vw, 40px) 0 clamp(32px, 3.2vw, 42px);
  }
  .diff:nth-child(2) { --tint: 199, 98, 42; --tone: var(--action); }
  .diff:nth-child(3) { --tint: 110, 82, 201; --tone: var(--ai); }
  .diff::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--tint)), rgba(var(--tint), 0.7)); transform-origin: left center;
  }
  .diff::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(var(--tint), 0.05), rgba(var(--tint), 0) 70%);
    transition: opacity .35s var(--ease);
  }
  .diff::after { left: calc(var(--cg) / -2); right: calc(var(--cg) / -2); }

  /* Illustrated plate with the icon set into its lower edge */
  .diff-art { position: relative; margin-bottom: 34px; }
  .diff-art-plate {
    position: relative; overflow: hidden; height: clamp(108px, 8.6vw, 124px); border-radius: 14px;
    border: 1px solid rgba(var(--tint), 0.26);
    background: radial-gradient(120% 140% at 100% 0%, rgba(var(--tint), 0.2), rgba(var(--tint), 0.08) 60%, rgba(var(--tint), 0.05)), var(--paper);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -18px 30px -24px rgba(var(--tint), 0.35);
    transition: border-color .35s var(--ease);
  }
  .diff-art-plate::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(var(--tint), 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--tint), 0.12) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask: radial-gradient(ellipse 75% 95% at 72% 40%, #000 25%, transparent 85%);
            mask: radial-gradient(ellipse 75% 95% at 72% 40%, #000 25%, transparent 85%);
  }
  .diff-motif { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--tone); }
  .diff-motif .m-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .78; transition: opacity .35s var(--ease); }
  .diff-motif .m-soft { opacity: .42; }
  .diff-motif .m-dash { stroke-dasharray: 3 5; }
  .diff-motif .m-fill { fill: currentColor; stroke: none; opacity: .85; }
  .diff-motif .m-tint { fill: currentColor; stroke: none; opacity: .16; }
  .diff-motif .m-paper { fill: var(--surface); }
  .diff-motif .m-paper-soft { fill: none; }
  .diff-motif .m-sheen { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .12 1.2; stroke-dashoffset: .12; opacity: 0; }
  .diff-motif .m-sheen--soft { stroke-width: 2; stroke-dasharray: .16 1.2; }
  .diff-motif .m-dot { fill: currentColor; }
  .diff-motif .m-spin, .diff-motif .m-type, .diff-motif .m-float { transform-box: fill-box; transform-origin: center; }
  .diff-motif .m-type { transform-origin: left center; }
  .mark {
    position: absolute; left: 18px; bottom: -24px; z-index: 1;
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%), var(--tone);
    border: 1px solid rgba(var(--tint), 0.9); color: var(--on-dark);
    box-shadow: 0 0 0 5px #F8F2E9, inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 24px -12px rgba(var(--tint), 0.75);
    transition: translate .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .mark svg { width: 24px; height: 24px; display: block; }
  .diff h3 {
    font-weight: 780; font-size: clamp(1.25rem, 1.06rem + .5vw, 1.5rem); line-height: 1.14; letter-spacing: -0.022em;
    margin-bottom: 10px; text-wrap: balance;
  }
  .diff p { font-size: .9688rem; line-height: 1.6; max-width: 36ch; color: var(--ink-2); }
  /* Desktop: headings share a two-line box (aligned to its base) so all three descriptions start on one line */
  @media (min-width: 961px) {
    .diff h3 { min-height: 2.28em; display: flex; align-items: flex-end; }
  }
  @keyframes dash-flow { to { stroke-dashoffset: -16; } }
  @media (hover: hover) {
    .diff:hover::after { opacity: 1; }
    .diff:hover .diff-art-plate { border-color: rgba(var(--tint), 0.42); }
    .diff:hover .diff-motif .m-line { opacity: .95; }
    .diff:hover .diff-motif .m-soft { opacity: .55; }
    .diff:hover .mark { translate: 0 -3px; box-shadow: 0 0 0 5px #F8F2E9, inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 28px -12px rgba(var(--tint), 0.85); }
  }
  .diff:focus-within::after { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .diff:hover .mark { translate: none; } .diff-motif .m-dot, .diff-motif .m-sheen { display: none; } }

  /* =========================================================
     8. Domain taster (split panel)
     ========================================================= */
  .taster-section { padding-block: calc(var(--section) * 0.55) calc(var(--section) * 0.8); }
  /* One compact card: sand flows into ivory left-to-right instead of a hard split */
  .taster {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(28px, 4vw, 56px); align-items: center;
    padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px);
    background: linear-gradient(100deg, #F0E4D3 0%, #F5ECE0 34%, var(--surface) 60%);
    border: 1px solid rgba(20, 35, 28, 0.1); border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(20, 35, 28, 0.05), 0 24px 44px -32px rgba(20, 35, 28, 0.4);
  }
  /* dotted texture lives on the sand side and fades toward the tiles */
  .taster-deco {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(rgba(20, 35, 28, 0.12) 1px, transparent 1.4px) 0 0 / 18px 18px;
    -webkit-mask: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 52%);
            mask: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 52%);
  }
  .taster-content { position: relative; }
  .taster-head { display: flex; align-items: center; gap: 30px; margin-bottom: 18px; padding-left: 4px; }
  /* compass icon carries the circular motif: hairline rings + a ticked dial radiate from it */
  .taster-icon {
    position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%), var(--forest); color: var(--on-dark);
    box-shadow: 0 0 0 4px rgba(255, 252, 247, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 22px -12px rgba(14, 38, 32, 0.75);
  }
  .taster-icon::before {
    content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 236px; height: 236px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle,
      rgba(168, 79, 28, 0) 0 47px, rgba(168, 79, 28, 0.34) 47.5px 48.5px, rgba(168, 79, 28, 0.03) 49px 77px,
      rgba(168, 79, 28, 0.16) 77.5px 78.5px, rgba(168, 79, 28, 0) 79px 115px, rgba(22, 56, 46, 0.12) 115.5px 116.5px, rgba(22, 56, 46, 0) 117px);
  }
  .taster-icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 96px; height: 96px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(168, 79, 28, 0.5) 0deg 1.4deg, transparent 1.4deg 15deg);
    -webkit-mask: radial-gradient(circle, transparent 0 41px, #000 42px 47px, transparent 47.5px);
            mask: radial-gradient(circle, transparent 0 41px, #000 42px 47px, transparent 47.5px);
  }
  .taster-icon svg { width: 25px; height: 25px; display: block; overflow: visible; }
  .taster-icon polygon { transform-box: fill-box; transform-origin: center; }
  .taster h2 { font-size: clamp(1.625rem, 1.2rem + 1.25vw, 2.25rem); line-height: 1.05; letter-spacing: -0.028em; margin: 0; }
  .taster-content p { font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }

  /* Six slim tiles: icon beside label, a left accent bar in each domain's colour */
  .domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
  .domains li {
    --tint: 22, 56, 46; --tone: var(--forest);
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 12px 14px 12px 16px;
    border: 1px solid rgba(20, 35, 28, 0.09); border-radius: 12px;
    background: linear-gradient(180deg, #FFFEFB 0%, var(--paper) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(20, 35, 28, 0.04), 0 8px 16px -14px rgba(20, 35, 28, 0.3);
    font-family: var(--font-d); font-weight: 720; font-size: clamp(.9375rem, .9rem + .15vw, 1rem); line-height: 1.2; letter-spacing: -0.012em; color: var(--ink);
    transition: translate .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .domains li:nth-child(3n+2) { --tint: 199, 98, 42; --tone: var(--action); }
  .domains li:nth-child(3n) { --tint: 110, 82, 201; --tone: var(--ai); }
  .domains li::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
    background: rgb(var(--tint)); opacity: .6; transition: top .3s var(--ease-out), bottom .3s var(--ease-out), opacity .3s var(--ease);
  }
  .dom-icon {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
    color: var(--tone); border: 1px solid rgba(var(--tint), 0.18);
    background: linear-gradient(180deg, rgba(var(--tint), 0.06), rgba(var(--tint), 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .dom-icon svg { width: 19px; height: 19px; display: block; }
  @media (hover: hover) {
    .domains li:hover { translate: 0 -2px; border-color: rgba(var(--tint), 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(20, 35, 28, 0.04), 0 14px 24px -16px rgba(var(--tint), 0.55); }
    .domains li:hover::before { top: 0; bottom: 0; opacity: 1; }
    .domains li:hover .dom-icon { background-color: var(--tone); background-image: none; color: var(--on-dark); border-color: var(--tone); box-shadow: 0 8px 14px -9px rgba(var(--tint), 0.8); }
  }
  @media (prefers-reduced-motion: reduce) { .domains li:hover { translate: none; } }

  /* =========================================================
     9. Certificates (tinted band with rosette)
     ========================================================= */
  .certs-band {
    position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section);
    background:
      radial-gradient(48% 62% at 50% 60%, rgba(255, 250, 242, 0.85), rgba(255, 250, 242, 0) 72%),
      linear-gradient(180deg, #EDE1D0 0%, #F3EBDF 100%);
    border-top: 1px solid var(--line);
  }
  /* Orbit artwork: one shared centre. Centred with translate so rotation never shifts it. */
  .certs-band::before {
    content: ""; position: absolute; left: 50%; top: 58%; z-index: -1; width: 1100px; height: 1100px; translate: -50% -50%; pointer-events: none; opacity: .6;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23B9A27F'%3E%3Ccircle cx='200' cy='200' r='198' stroke-width='.5'/%3E%3Ccircle cx='200' cy='200' r='170' stroke-width='.5' stroke-dasharray='1 4'/%3E%3Ccircle cx='200' cy='200' r='140' stroke-width='.5'/%3E%3Ccircle cx='200' cy='200' r='112' stroke-width='.4' stroke-dasharray='3 5'/%3E%3Ccircle cx='200' cy='200' r='84' stroke-width='.4'/%3E%3Cpath d='M200 2V398M2 200H398M60 60L340 340M340 60L60 340' stroke-width='.25'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Fine tick dial at the same centre, counter-rotating very slowly */
  .certs-band::after {
    content: ""; position: absolute; left: 50%; top: 58%; z-index: -1; width: 640px; height: 640px; translate: -50% -50%; pointer-events: none; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(168, 79, 28, 0.22) 0deg .5deg, transparent .5deg 6deg);
    -webkit-mask: radial-gradient(circle, transparent 0 311px, #000 312px 319px, transparent 319.5px);
            mask: radial-gradient(circle, transparent 0 311px, #000 312px 319px, transparent 319.5px);
  }
  .certs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 56px; align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
  .certs-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px 6px 11px; border: 1px solid rgba(20, 35, 28, 0.1); border-radius: 999px; background: rgba(255, 253, 249, 0.8); box-shadow: 0 6px 14px -10px rgba(20, 35, 28, 0.3); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
  .certs-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(199, 98, 42, 0.16); }
  .certs-head h2 { font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.02; letter-spacing: -0.04em; }
  .certs-head h2 span { display: block; color: var(--accent); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .certs-head h2 span { width: fit-content; background: linear-gradient(90deg, var(--accent), #D9A15A); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
  }
  .certs-head > p { font-size: 1.125rem; max-width: 40ch; justify-self: end; padding-left: 24px; border-left: 1px solid var(--line-2); }
  .cert-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
  .cert-card-wrapper {
    --tint: 199, 98, 42;
    position: relative; display: flex; flex-direction: column; gap: 18px; padding: 20px 22px 30px;
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.86), rgba(252, 247, 239, 0.74));
    border: 1px solid rgba(20, 35, 28, 0.09); border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(20, 35, 28, 0.04), 0 28px 50px -36px rgba(74, 38, 12, 0.42);
    transition: translate .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  .cert-card-wrapper:nth-child(2) { --tint: 110, 82, 201; }
  /* restrained corner marks in each preview's own accent */
  .cert-card-wrapper::before, .cert-card-wrapper::after {
    content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; border: 0 solid rgba(var(--tint), 0.5);
  }
  .cert-card-wrapper::before { top: 10px; right: 10px; border-width: 1px 1px 0 0; border-top-right-radius: 6px; }
  .cert-card-wrapper::after { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; border-bottom-left-radius: 6px; }
  .cert-title { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; color: var(--ink); padding-inline: 2px; }
  .cert-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: rgb(var(--tint)); background: linear-gradient(145deg, rgba(var(--tint), 0.16), rgba(var(--tint), 0.05)); border: 1px solid rgba(var(--tint), 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
  .cert-ico svg { width: 19px; height: 19px; }
  @media (hover: hover) {
    .cert-card-wrapper:hover { translate: 0 -4px; border-color: rgba(var(--tint), 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(20, 35, 28, 0.05), 0 36px 60px -36px rgba(var(--tint), 0.5); }
  }
  @media (prefers-reduced-motion: reduce) { .cert-card-wrapper:hover { translate: none; } }
  .cert-placeholder {
    position: relative; aspect-ratio: 1.414 / 1; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(120% 90% at 0% 0%, rgba(199, 98, 42, 0.06), transparent 60%), var(--paper);
    border: 1px solid rgba(20, 35, 28, 0.12); border-radius: var(--r-sm);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      7px 7px 0 -1px #F3EBDF, 7px 7px 0 0 rgba(20, 35, 28, 0.1),
      14px 14px 0 -1px #EFE5D6, 14px 14px 0 0 rgba(20, 35, 28, 0.07),
      0 30px 46px -30px rgba(var(--tint), 0.45);
    margin: 0 14px 14px 0;
  }
  /* one-time highlight that traces the sheet border on entrance, then fades away */
  .cert-placeholder::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    border: 1px solid rgba(var(--tint), 0.7); opacity: 0;
  }
  .cert-placeholder::before {
    content: 'SAMPLE'; position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none;
    font-family: var(--font-d); font-weight: 800; font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); letter-spacing: .18em;
    color: rgba(20, 35, 28, 0.045); transform: rotate(-24deg);
  }
  /* Sample certificate, sized in container units so it scales with the card */
  .cert-placeholder { container-type: inline-size; }
  .cert-doc {
    position: absolute; inset: 4.6%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5.2cqw 7cqw 0;
    background: radial-gradient(90% 70% at 50% 45%, #FFFDF8, #FBF5EA 70%, #F5ECDD); color: #2A2A24;
    border: .35cqw solid #2F3A33; box-shadow: inset 0 0 0 .8cqw #FBF5EA, inset 0 0 0 .95cqw rgba(160, 120, 60, 0.55);
  }
  .cd-brand { display: inline-flex; align-items: center; gap: .9cqw; font-family: var(--font-d); font-weight: 700; font-size: 1.75cqw; letter-spacing: -0.02em; color: var(--forest-deep); }
  .cd-brand svg { width: 3.2cqw; height: auto; fill: var(--forest); }
  .cd-kicker { margin-top: 1.8cqw; padding-bottom: 1.2cqw; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 3.3cqw; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #22302A; background: linear-gradient(90deg, transparent, rgba(160, 120, 60, 0.6), transparent) center bottom / 60% 1px no-repeat; }
  .cd-certify, .cd-done { font-family: var(--font-b); font-style: italic; font-size: 1.55cqw; color: #6B6A60; }
  .cd-certify { margin-top: auto; }
  .cd-name { margin: .2cqw 0 .3cqw; padding: 0 4cqw .4cqw; font-family: 'Great Vibes', 'Caveat', cursive; font-size: 6cqw; line-height: 1.05; color: #1F2D27; border-bottom: 1px solid rgba(47, 58, 51, 0.35); }
  .cd-program { margin-top: 1cqw; max-width: 80%; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 2.35cqw; line-height: 1.2; color: #1F2D27; text-wrap: balance; }
  .cd-meta { margin-top: .5cqw; font-size: 1.4cqw; color: #6B6A60; }
  .cd-foot { align-self: stretch; display: grid; grid-template-columns: 1fr auto auto auto; align-items: end; gap: 3.2cqw; margin-top: auto; padding: 0 0 4.6cqw; font-size: 1.25cqw; line-height: 1.45; color: #4F5650; text-align: left; }
  .cd-ids b { font-weight: 700; color: #2A2A24; }
  .cd-sign { display: grid; justify-items: center; min-width: 13cqw; text-align: center; }
  .cd-sign i { font-family: 'Great Vibes', 'Caveat', cursive; font-style: normal; font-size: 2.6cqw; line-height: 1; color: #33413A; padding: 0 1.5cqw .3cqw; border-bottom: 1px solid rgba(47, 58, 51, 0.45); margin-bottom: .5cqw; }
  .cd-seal { position: relative; isolation: isolate; width: 9.5cqw; aspect-ratio: 1; margin-bottom: -1cqw; display: grid; place-items: center; border-radius: 50%; color: #fff;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 45%), radial-gradient(circle, rgb(var(--tint)) 0 58%, color-mix(in srgb, rgb(var(--tint)) 75%, #000) 60% 100%);
    box-shadow: 0 .6cqw 1.4cqw -0.4cqw rgba(var(--tint), 0.7), inset 0 0 0 .5cqw rgba(255, 255, 255, 0.18); }
  .cd-seal::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: .25cqw dashed rgba(255, 255, 255, 0.55); }
  .cd-seal::before { content: ""; position: absolute; z-index: -1; left: 22%; right: 22%; top: 62%; height: 70%; background: linear-gradient(90deg, color-mix(in srgb, rgb(var(--tint)) 85%, #000) 0 46%, transparent 46% 54%, color-mix(in srgb, rgb(var(--tint)) 85%, #000) 54%); clip-path: polygon(0 0, 46% 0, 46% 100%, 23% 82%, 0 100%, 0 0, 54% 0, 100% 0, 100% 100%, 77% 82%, 54% 100%, 54% 0); }
  .cd-seal svg { width: 42%; height: 42%; }
  .cert-view { display: none; align-self: center; align-items: center; gap: 8px; margin-top: 2px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; font: 700 .9375rem/1.2 var(--font-b); color: color-mix(in srgb, rgb(var(--tint)) 82%, #000); cursor: pointer; transition: background-color .25s var(--ease); }
  .js .cert-view { display: inline-flex; }
  .cert-view::after { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate .25s var(--ease-out); }
  .cert-view:hover, .cert-view:focus-visible { background: rgba(var(--tint), 0.08); }
  .cert-view:hover::after, .cert-view:focus-visible::after { translate: 3px 0; }
  /* Enlarged view */
  .cert-dialog { --tint: 199, 98, 42; width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(10, 20, 15, 0.6); overflow: auto; }
  .cert-dialog::backdrop { background: rgba(14, 38, 32, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .cert-dialog-inner { padding: clamp(18px, 3vw, 32px); }
  .cert-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .cert-dialog-title { font-size: 1.125rem; letter-spacing: -0.01em; }
  .cert-dialog-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
  .cert-dialog-close svg { width: 16px; height: 16px; }
  .cert-dialog .cert-placeholder { margin: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 20px 40px -26px rgba(var(--tint), 0.5); }
  .motion .cert-dialog[open] { animation: cert-pop .35s var(--ease-out); }
  @keyframes cert-pop { from { opacity: 0; scale: .96; } }

  /* =========================================================
     9b. Build-a-Thon (from V8; dark band with fluid wave edges)
     ========================================================= */
  .build-band {
    position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark);
    padding-block: clamp(110px, 11vw, 160px);
    background:
      radial-gradient(45% 55% at 74% 55%, rgba(46, 204, 133, 0.16), rgba(46, 204, 133, 0) 70%),
      radial-gradient(60% 70% at 100% 0%, rgba(110, 82, 201, 0.2), rgba(110, 82, 201, 0) 65%),
      radial-gradient(50% 60% at 0% 100%, rgba(199, 98, 42, 0.14), rgba(199, 98, 42, 0) 62%),
      url("../images/img-01-64617b0679.webp") center / cover,
      linear-gradient(180deg, #06201A 0%, #031712 100%);
  }
  .build-wave { position: absolute; left: 0; z-index: 3; display: block; width: 100%; height: clamp(44px, 6vw, 80px); pointer-events: none; }
  .build-wave--top { top: -1px; fill: #F3EBDF; }
  .build-wave--bottom { bottom: -1px; rotate: 180deg; }
  .build-orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
  .build-orb--ai { width: 640px; height: 640px; top: -240px; right: -140px; background: radial-gradient(circle, rgba(110, 82, 201, 0.4), rgba(110, 82, 201, 0) 66%); }
  .build-orb--terra { width: 540px; height: 540px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(199, 98, 42, 0.32), rgba(199, 98, 42, 0) 66%); }
  .build-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(243, 236, 227, 0.07) 1px, transparent 1.4px) 0 0 / 24px 24px; -webkit-mask: radial-gradient(ellipse 70% 60% at 70% 50%, #000, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 70% 50%, #000, transparent 75%); }
  .build { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
  .build-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 16px 6px 12px; border: 1px solid rgba(243, 236, 227, 0.2); border-radius: 999px; background: rgba(243, 236, 227, 0.08); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
  .build-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-on-dark); box-shadow: 0 0 0 4px rgba(232, 135, 90, 0.18); }
  .build-copy h2 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; color: #fff; margin-bottom: 16px; }
  .build-tagline { margin-bottom: 18px; font-size: clamp(.9375rem, .85rem + .3vw, 1.0625rem); font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ai-bright); }
  .build-sub { font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--accent-on-dark); margin-bottom: 20px; }
  .build-desc { max-width: 52ch; margin-bottom: 32px; font-size: 1.125rem; line-height: 1.65; color: rgba(243, 236, 227, 0.86); }
  .build-desc em { font-style: normal; font-weight: 700; color: var(--on-dark); }
  .build-reward { position: relative; margin-bottom: 36px; padding: 26px 28px 26px 30px; border: 1px solid rgba(243, 236, 227, 0.16); border-left: 3px solid var(--accent-on-dark); border-radius: 0 18px 18px 0; background: linear-gradient(110deg, rgba(243, 236, 227, 0.09), rgba(243, 236, 227, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
  .build-reward:last-child { margin-bottom: 0; }
  .build-reward strong { display: block; margin-bottom: 10px; font-family: var(--font-d); font-size: 1.25rem; letter-spacing: -0.01em; color: var(--accent-on-dark); }
  .build-reward p { font-size: 1.0625rem; line-height: 1.65; color: var(--on-dark); }
  .build-reward span { font-weight: 800; color: var(--ai-on-dark); }
  .btn--light { background: #FFFCF7; color: var(--forest-deep); box-shadow: inset 0 1px 0 #fff, 0 10px 26px -12px rgba(0, 0, 0, 0.6); }
  @media (hover: hover) {
    .btn--light:hover { background: var(--on-dark); color: var(--forest-deep); box-shadow: inset 0 1px 0 #fff, 0 16px 32px -12px rgba(0, 0, 0, 0.65); }
  }
  .build-art { position: relative; width: 112%; max-width: 620px; justify-self: center; aspect-ratio: 505 / 537; }
  .build-art-stage { position: absolute; inset: 0; }
  .build-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
  /* the AI core breathes: a green bloom sits on the chip */
  .build-core { position: absolute; left: 47%; top: 64%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(90, 255, 170, 0.42), rgba(46, 204, 133, 0.12) 45%, rgba(46, 204, 133, 0) 70%); }
  /* a soft scan of light that crosses the artwork */
  .build-scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; overflow: hidden;
    -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 100%); mask: radial-gradient(closest-side, #000 70%, transparent 100%); }
  .build-scan::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 40%; rotate: 18deg; background: linear-gradient(90deg, rgba(140, 255, 200, 0), rgba(140, 255, 200, 0.16), rgba(140, 255, 200, 0)); }
  .build-spark { position: absolute; width: 14px; height: 14px; pointer-events: none; color: #B6FFD9; }
  .build-spark svg { width: 100%; height: 100%; display: block; }
  .build-spark--a { left: 12%; top: 14%; } .build-spark--b { right: 6%; top: 42%; width: 10px; height: 10px; } .build-spark--c { left: 22%; bottom: 12%; width: 11px; height: 11px; color: #E8875A; }
  /* reward card: a trophy leads it */
  .build-reward { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: start; }
  .build-trophy { grid-row: span 2; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, rgba(232, 135, 90, 0.2), rgba(232, 135, 90, 0.05)); border: 1px solid rgba(232, 135, 90, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -12px rgba(232, 135, 90, 0.6); }
  .build-trophy svg { width: 32px; height: 32px; }
  @media (max-width: 960px) {
    .build { grid-template-columns: 1fr; }
    .build-art { width: 100%; max-width: 440px; }
  }
  @media (max-width: 640px) {
    .build-reward { padding: 22px 20px 22px 22px; grid-template-columns: 1fr; }
    .build-trophy { grid-row: auto; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 13px; }
    .build-trophy svg { width: 26px; height: 26px; }
    .build-band .btn { width: 100%; }
  }

  /* =========================================================
     10. Story band: statement + credibility on one dark field
     ========================================================= */
  .story-band {
    position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark);
    padding-top: var(--section); padding-bottom: calc(var(--section) + 72px);
    background:
      radial-gradient(70% 55% at 12% 0%, rgba(30, 74, 60, 0.95), rgba(30, 74, 60, 0) 62%),
      radial-gradient(55% 50% at 100% 100%, rgba(110, 82, 201, 0.18), rgba(110, 82, 201, 0) 62%),
      linear-gradient(180deg, #102C24 0%, var(--forest-deep) 45%, #0A1D17 100%);
  }
  .story-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(rgba(243, 236, 227, 0.08) 1px, transparent 1.4px) 0 0 / 24px 24px;
    -webkit-mask: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 75%); mask: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 75%);
  }
  .pullquote { position: relative; text-align: center; padding-bottom: clamp(44px, 5.5vw, 72px); }
  .pullquote::before { content: ""; display: block; width: 40px; height: 2px; background: var(--accent-on-dark); margin: 0 auto 28px; }
  .pullquote p { font-family: var(--font-d); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2.1vw, 2.625rem); line-height: 1.2; letter-spacing: -0.022em; color: var(--on-dark); max-width: 32ch; margin-inline: auto; text-wrap: balance; }
  .credibility { --cred-gap: clamp(36px, 5.5vw, 88px); position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: var(--cred-gap); align-items: stretch; padding-top: clamp(52px, 6vw, 84px); border-top: 1px solid var(--line-dark); }
  /* Terracotta lead-in on the top rule, and a fine technical grid that fades out from behind the stats */
  .credibility::after { content: ""; position: absolute; top: -1px; left: 0; width: min(240px, 40%); height: 1px; background: linear-gradient(90deg, var(--accent-on-dark), rgba(232, 135, 90, 0)); pointer-events: none; }
  .credibility::before {
    content: ""; position: absolute; inset: 0 -6% -12% 18%; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(243, 236, 227, 0.05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(243, 236, 227, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask: radial-gradient(55% 60% at 72% 48%, #000, transparent 78%); mask: radial-gradient(55% 60% at 72% 48%, #000, transparent 78%);
  }
  .cred-watermark { display: none; }
  /* Globe behind the stats panel (screen-blended, so its black ground disappears) with live routes on top */
  .cred-globe { position: absolute; z-index: -1; right: -12%; top: calc(50% + 40px); width: min(940px, 74%); aspect-ratio: 744 / 572; translate: 0 -50%; pointer-events: none; }
  .cred-globe img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: .2;
    -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 96%); mask: radial-gradient(closest-side, #000 45%, transparent 96%); }
  .cred-globe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .cg-mer ellipse { fill: none; stroke: rgba(124, 240, 184, 0.16); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
  .cg-mer .cg-lat { stroke: rgba(124, 240, 184, 0.08); stroke-dasharray: 2 6; }
  .cg-route { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 34 432; mix-blend-mode: screen; opacity: .55; }
  .cg-route--b, .cg-route--c, .cg-ring:not(:first-of-type), .cg-node--g, .cg-node:last-of-type { display: none; }
  .cg-route--a { stroke: #FFE7C9; } .cg-route--b { stroke: #F08A5D; } .cg-route--c { stroke: #7CF0B8; }
  .cg-node { fill: #F08A5D; opacity: .6; } .cg-node--g { fill: #7CF0B8; }
  .cg-ring { fill: none; stroke: rgba(124, 240, 184, 0.22); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
  /* Concentric arcs between the milestone and the panel */
  .cred-arcs { position: absolute; z-index: -1; left: calc((100% - var(--cred-gap)) * 1.04 / 2.04 + var(--cred-gap)); top: calc(50% + 40px); width: 760px; height: 760px; translate: -50% -50%; pointer-events: none; overflow: visible;
    -webkit-mask: linear-gradient(90deg, transparent 6%, #000 30%, #000 50%, transparent 50.5%); mask: linear-gradient(90deg, transparent 6%, #000 30%, #000 50%, transparent 50.5%); }
  .ca-arc { fill: none; stroke: rgba(46, 204, 133, 0.09); stroke-width: 1.2; }
  .ca-arc:nth-child(even) { stroke-dasharray: 2 9; stroke: rgba(46, 204, 133, 0.13); }
  .ca-arc:nth-child(4n) { display: none; }
  .ca-dot { fill: #3DDC97; opacity: .5; }
  .ca-dot:nth-of-type(odd) { display: none; }
  .ca-dot--t { fill: #E8875A; }
  /* Glass panel and icons for the figures */
  .cred-stats-grid { -webkit-backdrop-filter: blur(1.5px) saturate(1.15); backdrop-filter: blur(1.5px) saturate(1.15); border-color: rgba(124, 240, 184, 0.18); }
  .stat-ico { display: block; width: clamp(28px, 2.2vw, 34px); height: clamp(28px, 2.2vw, 34px); margin-bottom: 14px; color: #E9D6C2; opacity: .9; transition: color .35s var(--ease), translate .35s var(--ease-out); }
  .stat-ico svg { width: 100%; height: 100%; display: block; }
  .cred-content { position: relative; }
  .cred-logo { display: block; height: 44px; width: auto; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: clamp(30px, 3.2vw, 44px); color: var(--on-dark); font-size: .875rem; }
  .cred-logo[hidden] { display: none; }
  .cred-logo-fallback { display: flex; align-items: center; gap: 14px; min-height: 44px; margin-bottom: clamp(30px, 3.2vw, 44px); font-family: var(--font-d); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.015em; color: var(--on-dark); }
  .cred-logo-fallback::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, rgba(232, 135, 90, 0.8), rgba(232, 135, 90, 0)); }
  .cred-title { margin-bottom: 28px; color: var(--on-dark); }

  /* The 27 lockup: a large numeral with "Years" seated on its baseline, ringed by a fine orbit */
  .highlight-27 { position: relative; display: flex; align-items: flex-end; gap: clamp(14px, 1.5vw, 22px); line-height: 1; letter-spacing: normal; color: var(--on-dark); }
  .h27-num { position: relative; display: inline-block; flex: none; font-size: clamp(6rem, 3.2rem + 8vw, 11.5rem); line-height: .76; letter-spacing: -0.065em; color: #FBF6EF; }
  .h27-num .count { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; padding-right: .05em; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .h27-num .count {
      background: linear-gradient(105deg, rgba(255, 233, 216, 0) 40%, rgba(255, 233, 216, 0.95) 50%, rgba(255, 233, 216, 0) 60%) 0 0 / 250% 100% no-repeat, linear-gradient(180deg, #FFFBF6 0%, #F3ECE3 52%, #E2B594 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
  }
  .h27-ring { position: absolute; left: 54%; top: 50%; width: 1.72em; height: 1.72em; translate: -50% -50%; max-width: none; z-index: -1; overflow: visible; pointer-events: none; }
    .h27-word { display: flex; flex-direction: column; flex: none; padding-bottom: .02em; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: .9; letter-spacing: -0.035em; color: var(--on-dark); }
  .h27-word::before { content: ""; width: 1.1em; height: 3px; margin-bottom: .32em; border-radius: 2px; background: var(--accent-on-dark); }
  /* Connector from the milestone across the gutter to the stats panel */
  .highlight-27::after {
    content: ""; flex: 1 1 auto; align-self: flex-end; min-width: 24px; height: 9px; margin: 0 calc(-1 * var(--cred-gap) - 4px) .7em 6px;
    background: radial-gradient(circle, var(--accent-on-dark) 0 3px, rgba(232, 135, 90, 0.25) 3.5px 4.5px, transparent 5px) right center / 9px 9px no-repeat, linear-gradient(90deg, rgba(232, 135, 90, 0.75), rgba(232, 135, 90, 0.2)) left center / calc(100% - 6px) 1px no-repeat;
    transform-origin: left center;
  }
  .cred-title-sub { display: block; margin-top: 20px; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--accent-on-dark); }
  .cred-tag { font-weight: 700; color: #FBEBDA; }
  .cred-lead { color: var(--on-dark-2); font-size: 1.0625rem; line-height: 1.75; max-width: 54ch; margin-bottom: 30px; }
  .cred-badge { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 20px 22px; border: 1px solid rgba(232, 135, 90, 0.24); border-radius: 14px; background: linear-gradient(100deg, rgba(232, 135, 90, 0.13), rgba(232, 135, 90, 0.035) 55%, rgba(243, 236, 227, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); color: var(--on-dark); font-size: 1rem; line-height: 1.6; }
  .cred-badge::after {
    content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--cred-gap) + 4px); height: 9px; margin-top: -4.5px; pointer-events: none; transform-origin: left center;
    background: radial-gradient(circle, rgba(232, 135, 90, 0.85) 0 2.5px, transparent 3px) right center / 9px 9px no-repeat, repeating-linear-gradient(90deg, rgba(232, 135, 90, 0.45) 0 4px, transparent 4px 8px) left center / calc(100% - 6px) 1px no-repeat;
  }
  .pulse-dot { position: relative; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--accent-on-dark); box-shadow: 0 0 0 4px rgba(232, 135, 90, 0.18); }
  .pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(232, 135, 90, 0.6); opacity: 0; pointer-events: none; }

  /* Stats: one framed 2 x 3 system, level with the 27 lockup; each figure and its label form one tight group */
  .cred-stats-grid {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-self: stretch; margin-top: calc(44px + clamp(30px, 3.2vw, 44px));
    background: linear-gradient(160deg, rgba(243, 236, 227, 0.065), rgba(243, 236, 227, 0.02) 60%, rgba(46, 204, 133, 0.04)), rgba(8, 26, 20, 0.56);
    border: 1px solid var(--line-dark); border-radius: 22px; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 36px 70px -40px rgba(0, 0, 0, 0.6);
  }
  .cred-stats-grid::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(232, 135, 90, 0.85), rgba(232, 135, 90, 0.1) 55%, rgba(179, 162, 240, 0.35)); pointer-events: none; }
  /* Terracotta nodes where the hairlines cross */
  .cred-stats-grid::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(232, 135, 90, 0.9) 0 2.5px, transparent 3px) center calc(33.333% - 2px) / 9px 9px no-repeat, radial-gradient(circle, rgba(232, 135, 90, 0.9) 0 2.5px, transparent 3px) center calc(66.666% + 1px) / 9px 9px no-repeat;
  }
  .stat-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.3vw, 34px); border-bottom: 1px solid var(--line-dark); }
  .stat-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 90% at 0% 0%, rgba(232, 135, 90, 0.13), rgba(232, 135, 90, 0) 62%); opacity: 0; transition: opacity .35s var(--ease); }
  .stat-card > * { position: relative; }
  .stat-card:nth-child(odd) { border-right: 1px solid var(--line-dark); }
  .stat-card:nth-last-child(-n+2) { border-bottom: 0; }
  .stat-num { font-family: var(--font-d); font-weight: 800; font-size: clamp(2.125rem, 1.25rem + 1.9vw, 3.375rem); line-height: .95; letter-spacing: -0.04em; color: #FBF6EF; white-space: nowrap; font-variant-numeric: tabular-nums; margin-bottom: 12px; transition: translate .35s var(--ease-out), color .35s var(--ease); }
  .stat-num .count { display: inline-block; }
  .stat-lbl { display: flex; align-items: flex-start; gap: 10px; min-height: 2.8em; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.4; color: var(--on-dark-2); transition: color .35s var(--ease); }
  .stat-lbl::before { content: ""; flex: none; width: 14px; height: 2px; margin-top: .62em; background: var(--accent-on-dark); opacity: .85; transition: opacity .35s var(--ease); }
  @media (hover: hover) {
    .stat-card:hover::before { opacity: 1; }
    .stat-card:hover .stat-num { translate: 0 -3px; color: #fff; }
    .stat-card:hover .stat-ico { color: var(--accent-on-dark); translate: 0 -2px; }
    .stat-card:hover .stat-lbl { color: var(--on-dark); }
    .stat-card:hover .stat-lbl::before { opacity: 1; }
  }

  /* =========================================================
     11. Webinar (straddles the dark band)
     ========================================================= */
  .webinar { --overlap: 72px; --webinar-pad: clamp(48px, 6vw, 72px); position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); padding-bottom: var(--webinar-pad); }
  /* A warm wash below the banner runs straight into the offer band, so banner and ticket read as one composition */
  .webinar::before { content: ""; position: absolute; z-index: -1; top: var(--overlap); bottom: 0; left: 50%; width: 100vw; translate: -50% 0; pointer-events: none; background: linear-gradient(180deg, rgba(241, 226, 208, 0) 0%, rgba(241, 226, 208, 0.7) 60%, #F1E2D0 100%); }
  /* Connector: purple from the banner, turning terracotta as it reaches the ticket's top notch */
  .webinar::after, .ticket::before {
    content: ""; position: absolute; width: 1.5px; pointer-events: none; transform-origin: center top;
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 10px); mask: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 10px);
  }
  .webinar::after { bottom: 0; height: var(--webinar-pad); left: calc(50% + 0.07447 * min(1080px, 100% - 2 * var(--gutter))); background: linear-gradient(180deg, var(--ai-bright), color-mix(in srgb, var(--ai-bright), var(--accent))); }
  .webinar-card {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 28px);
    padding: clamp(22px, 2.6vw, 28px) clamp(22px, 3vw, 32px) clamp(22px, 2.6vw, 28px) clamp(26px, 3.4vw, 40px);
    background: radial-gradient(55% 150% at 0% 50%, rgba(110, 82, 201, 0.06), rgba(110, 82, 201, 0) 70%), var(--surface);
    border: 1px solid rgba(20, 35, 28, 0.09); border-radius: 20px;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 35, 28, 0.05), 0 30px 60px -34px rgba(74, 38, 12, 0.34);
  }
  .webinar-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--ai-bright), var(--ai)); }
  /* Fine orbit arcs tucked behind the registration button */
  .webinar-card::after { content: ""; position: absolute; right: -96px; top: 50%; width: 320px; height: 320px; translate: 0 -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 0 98px, rgba(110, 82, 201, 0.12) 98.5px 99.5px, transparent 100px 132px, rgba(168, 79, 28, 0.1) 132.5px 133.5px, transparent 134px); }
  .webinar-card > * { position: relative; z-index: 1; }
  .webinar-icon { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; border: 1px solid rgba(110, 82, 201, 0.22); background: linear-gradient(145deg, rgba(110, 82, 201, 0.13), rgba(110, 82, 201, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -8px rgba(91, 67, 181, 0.45); color: var(--ai); }
  .webinar-icon svg { width: 26px; height: 26px; display: block; }
  .webinar-text { flex: 1; min-width: 0; padding-left: clamp(18px, 2.4vw, 28px); border-left: 1px solid var(--line); }
  .webinar-text h2 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -0.02em; margin-bottom: 6px; }
  .webinar-text p { max-width: 52ch; }
  .webinar-card .btn--ghost { background: var(--surface); border-color: rgba(20, 35, 28, 0.18); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 35, 28, 0.06), 0 8px 18px -12px rgba(20, 35, 28, 0.3); }
  @media (hover: hover) {
    .webinar-card .btn--ghost:hover { background: var(--forest); color: var(--on-dark); border-color: var(--forest); box-shadow: 0 12px 26px -14px rgba(14, 38, 32, 0.6); }
  }

  /* =========================================================
     12. Offer (ticket on a warm band)
     ========================================================= */
  .offer { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #F1E2D0 0%, #EEDAC4 100%); padding-block: clamp(56px, 7vw, 88px); border-bottom: 1px solid rgba(168, 79, 28, 0.12); }
  .offer::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 90% -6%, rgba(199, 98, 42, 0.04) 0deg 1.2deg, transparent 1.2deg 7deg);
    -webkit-mask: radial-gradient(circle at 90% -6%, #000 0%, transparent 55%); mask: radial-gradient(circle at 90% -6%, #000 0%, transparent 55%);
  }
  .offer::after { content: ""; position: absolute; z-index: -1; left: -160px; bottom: -260px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(168, 79, 28, 0.16); box-shadow: 0 0 0 36px rgba(168, 79, 28, 0.025), 0 0 0 37px rgba(168, 79, 28, 0.09); pointer-events: none; }
  .offer-orbits { position: absolute; z-index: -1; left: calc(50% + 330px); top: 50%; width: 820px; height: auto; max-width: none; translate: -50% -50%; pointer-events: none; overflow: visible; }
  .ticket {
    --notch: 14px; position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); max-width: 1080px; margin-inline: auto; border-radius: 24px;
    filter: drop-shadow(0 1px 1px rgba(20, 35, 28, 0.07)) drop-shadow(0 24px 30px rgba(74, 38, 12, 0.15));
  }
  .ticket::before { bottom: 100%; height: clamp(56px, 7vw, 88px); left: calc(100% * 1.35 / 2.35 - .75px); background: linear-gradient(180deg, color-mix(in srgb, var(--ai-bright), var(--accent)), var(--accent)); }
  /* Real notches: each half of the ticket is masked, so the band shows through and the shadow follows the cut */
  .ticket-main {
    position: relative; isolation: isolate; overflow: hidden; border-radius: 24px 0 0 24px;
    padding: clamp(36px, 4.6vw, 60px) clamp(30px, 4.2vw, 56px) clamp(36px, 4.6vw, 60px) clamp(46px, 5.6vw, 80px);
    background: radial-gradient(90% 130% at 0% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%), var(--surface);
    -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  }
  .ticket-main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--action)); }
  .ticket-main::after {
    content: "27"; content: "27" / ""; position: absolute; z-index: -1; right: -.02em; bottom: -.28em; pointer-events: none;
    font-family: var(--font-d); font-weight: 800; font-size: clamp(11rem, 6rem + 13vw, 19rem); line-height: 1; letter-spacing: -0.07em;
    color: rgba(199, 98, 42, 0.065);
  }
  .ticket-main h2 { position: relative; font-size: clamp(2rem, 1.15rem + 2.7vw, 3.5rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 20px; max-width: 15ch; }
  .ticket-main h2::before { content: ""; position: absolute; left: calc(-1 * clamp(18px, 2.4vw, 32px)); top: .1em; bottom: .12em; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--action)); }
  .ticket-main p { font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); max-width: 44ch; }
  .ticket-stub {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 26px; border-radius: 0 24px 24px 0;
    padding: clamp(36px, 4.4vw, 56px) clamp(28px, 3.8vw, 52px);
    background: repeating-linear-gradient(180deg, rgba(20, 35, 28, 0.24) 0 6px, transparent 6px 12px) left top / 1.5px 100% no-repeat, radial-gradient(110% 80% at 100% 0%, rgba(232, 135, 90, 0.13), rgba(232, 135, 90, 0) 62%), linear-gradient(180deg, #FFF8EF, #FBF0E2);
    -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  }
  .ticket-stub::before { content: ""; position: absolute; right: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 0 116px, rgba(168, 79, 28, 0.12) 116.5px 117.5px, transparent 118px 148px, rgba(168, 79, 28, 0.08) 148.5px 149.5px, transparent 150px); }
  .ticket-stub::after { content: none; }
  .ticket-stub > * { position: relative; }
  .price-display { display: flex; flex-direction: column; gap: 6px; }
  .price-old { font-size: 1.25rem; font-weight: 600; color: var(--muted); }
  .price-old s { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
  .price-new { font-family: var(--font-d); font-weight: 800; font-size: clamp(3.5rem, 2.2rem + 3.7vw, 5.5rem); line-height: .92; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ticket-stub .btn { width: 100%; position: relative; overflow: hidden; isolation: isolate; }
  .ticket-stub .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0) 70%) -120% 0 / 60% 100% no-repeat; transition: background-position .8s var(--ease-out); }
  @media (hover: hover) {
    .ticket-stub .btn:hover::before { background-position: 220% 0; }
  }

  /* =========================================================
     13. FAQ
     ========================================================= */
  .faq { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: var(--section); }
  .faq-head { position: sticky; top: 104px; }
  .faq-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
  .faq-head h2::after { content: ""; display: block; width: 52px; height: 6px; margin-top: 20px; background: radial-gradient(circle, var(--ai-bright) 0 2.5px, transparent 3px) right center / 6px 6px no-repeat, linear-gradient(var(--accent), var(--accent)) left center / 40px 2px no-repeat; }
  /* Quiet orbit + dot field behind the conversation art */
  .faq-head::after {
    content: ""; position: absolute; z-index: -1; left: -36px; bottom: -48px; width: 360px; height: 330px; pointer-events: none;
    background: radial-gradient(circle at 46% 54%, transparent 0 118px, rgba(110, 82, 201, 0.14) 118.5px 119.5px, transparent 120px 150px, rgba(168, 79, 28, 0.12) 150.5px 151.5px, transparent 152px), radial-gradient(rgba(20, 35, 28, 0.12) 1px, transparent 1.4px) 0 0 / 18px 18px;
    -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent);
  }
  .faq-art { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 44px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(20, 35, 28, 0.05)) drop-shadow(0 14px 18px rgba(74, 38, 12, 0.1)); }
  .faq-art .bubble { fill: var(--surface); stroke: rgba(20, 35, 28, 0.13); }
  .faq-art .bubble--dark { fill: url(#faq-dark); stroke: none; }
  .faq-art .skel { fill: rgba(20, 35, 28, 0.11); }
  .faq-art .skel--light { fill: rgba(243, 236, 227, 0.4); }
  .faq-art .spark { fill: var(--accent-on-dark); }
  .faq-art .ai-dot { fill: var(--ai-bright); }
  .faq-art .ai-ring { fill: none; stroke: rgba(179, 162, 240, 0.45); stroke-width: 1; }
  .faq-art .spark-w { fill: #fff; }
  .faq-art .link { stroke: rgba(20, 35, 28, 0.25); stroke-dasharray: 2 4; fill: none; }
  .faq-list {
    position: relative; overflow: hidden; padding: 8px 0; border: 1px solid rgba(20, 35, 28, 0.09); border-radius: 22px;
    background: linear-gradient(180deg, #FFFEFB, var(--surface));
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20, 35, 28, 0.04), 0 26px 50px -32px rgba(74, 38, 12, 0.3);
  }
  .faq-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--accent), rgba(199, 98, 42, 0.12) 50%, rgba(110, 82, 201, 0.3)); }
  .faq details { --row-pad: 28px; position: relative; padding-inline: var(--row-pad); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
  .faq details + details { background-image: linear-gradient(var(--line), var(--line)); background-size: calc(100% - 2 * var(--row-pad)) 1px; background-position: center top; background-repeat: no-repeat; }
  .faq details[open] { background-color: rgba(199, 98, 42, 0.045); box-shadow: inset 3px 0 0 var(--accent); }
  .faq summary {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none;
    font-family: var(--font-d); font-weight: 700; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.35; letter-spacing: -0.012em; color: var(--ink);
    transition: color .2s var(--ease);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; flex: none; width: 32px; height: 32px; margin-top: calc(.675em - 16px); border-radius: 50%; border: 1px solid rgba(20, 35, 28, 0.16); color: var(--action);
    background-color: var(--surface); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-position: center; background-repeat: no-repeat; background-size: 12px 1.75px, 1.75px 12px;
    transition: transform .4s var(--ease-out), background-size .4s var(--ease-out), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  }
  .faq details[open] summary::after { transform: rotate(180deg); background-size: 12px 1.75px, 1.75px 0px; border-color: var(--action); background-color: rgba(199, 98, 42, 0.1); }
  .faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 10px; }
  .faq summary:focus-visible::after { border-color: var(--action); box-shadow: 0 0 0 4px rgba(199, 98, 42, 0.14); }
  .faq details p { padding: 0 56px 26px 0; margin-top: -4px; font-size: 1.0625rem; line-height: 1.75; max-width: 66ch; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  @media (hover: hover) {
    .faq summary:hover { color: var(--forest); }
    .faq details:not([open]):has(> summary:hover) { background-color: rgba(199, 98, 42, 0.03); }
    .faq summary:hover::after { border-color: var(--action); box-shadow: 0 0 0 4px rgba(199, 98, 42, 0.1); }
  }

  /* =========================================================
     14. Finale + footer
     ========================================================= */
  .finale { position: relative; isolation: isolate; overflow: hidden; background: var(--forest-deep); color: var(--on-dark); border-radius: 32px 32px 0 0; }
  .finale::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 110%, rgba(110, 82, 201, 0.3), transparent 70%), radial-gradient(50% 60% at 50% -10%, rgba(30, 74, 60, 0.9), transparent 70%); }
  .finale-rings { position: absolute; left: 50%; top: 50%; width: min(1000px, 160vw); height: auto; transform: translate(-50%, -46%); opacity: .1; z-index: -1; pointer-events: none; }
  .final { text-align: center; padding-block: clamp(72px, 9vw, 128px) clamp(56px, 7vw, 96px); }
  .final h2 { color: var(--on-dark); font-size: clamp(2.375rem, 1.3rem + 4.6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.045em; margin-bottom: clamp(28px, 3.5vw, 44px); }
  .site-footer { border-top: 1px solid var(--line-dark); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--on-dark-2); font-size: .9375rem; }
  .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
  .site-footer strong { font-family: var(--font-d); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--on-dark); }

  /* =========================================================
     15. Motion (only when .motion is set)
     ========================================================= */
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { from { opacity: 0; transform: scale(.4); } }
  @keyframes ring-in { from { opacity: 0; transform: scale(.82) rotate(-24deg); } }
  @keyframes ripple { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
  @keyframes ping { 0% { box-shadow: 0 0 0 6px rgba(110, 82, 201, .28), 0 0 0 6px rgba(179, 162, 240, .5); } 100% { box-shadow: 0 0 0 6px rgba(110, 82, 201, .28), 0 0 0 24px rgba(179, 162, 240, 0); } }

  .motion .hero [data-enter] { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 40ms); }
  @keyframes orbit-wave { 0% { opacity: 0; transform: scale(1); } 10% { opacity: .9; } 65% { opacity: .45; } 100% { opacity: 0; transform: scale(3.6); } }
  @keyframes orbit-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(var(--spread, 1.1)) rotate(var(--turn, 0deg)); } }
  @keyframes hub-hum { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: .6; transform: scale(1) rotate(45deg); } }
  @keyframes underline-draw { from { transform: scaleX(0); } }
  @keyframes border-sweep { to { --sweep: 360deg; } }
  @keyframes bar-fill { from { transform: scaleX(0); } }
  .motion .stat-mark { transform: scaleX(0); }
  .motion .stat.is-in .stat-mark { animation: bar-fill .7s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * 140ms); transform: none; }
  .motion .stat + .stat::after { transform: scaleY(0); transition: transform .8s var(--ease-out); transition-delay: calc(.25s + var(--i, 0) * 110ms); }
  .motion .stat + .stat.is-in::after { transform: none; }
  .motion .stats:has(.stat.is-in)::after { animation: border-sweep 2.6s var(--ease-out) .5s 1 both; }

  /* Hero diagram: nodes drift, the core breathes, the dotted orbit flows */
  @keyframes node-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes core-pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
  @keyframes dot-flow { to { stroke-dashoffset: -93; } }
  .motion .hnode { animation: node-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1s); }
  .motion .core-halo { animation: core-pulse 4.5s ease-in-out infinite; }
  .motion .h-orbit--dots { animation: dot-flow 9s linear infinite; }
  .hero-art svg.is-paused .hnode, .hero-art svg.is-paused .core-halo, .hero-art svg.is-paused .h-orbit--dots { animation-play-state: paused; }

  .motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }

  /* Journey: cards rise in a 100ms stagger; connector buttons pulse one after another */
  .motion .jr-card[data-reveal] { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), translate .3s var(--ease-out), box-shadow .3s var(--ease); transition-delay: calc(var(--i, 0) * 100ms), calc(var(--i, 0) * 100ms), 0s, 0s; }
  @keyframes jr-pulse { 0%, 34%, 100% { box-shadow: 0 8px 18px -8px var(--tone), 0 0 0 0 color-mix(in srgb, var(--tone) 35%, transparent); scale: 1; } 12% { box-shadow: 0 8px 18px -8px var(--tone), 0 0 0 9px color-mix(in srgb, var(--tone) 0%, transparent); scale: 1.06; } }
  .motion .jr-link span { animation: jr-pulse 3.6s var(--ease-out) infinite; animation-delay: calc(1s + var(--i, 0) * 1.2s); }
  .journey-band.is-paused .jr-link span { animation-play-state: paused; }
  .motion .jr-card[data-reveal] .jr-photo { clip-path: inset(100% 0 0 0 round 14px); transition: clip-path .9s var(--ease-out); transition-delay: calc(.2s + var(--i, 0) * 100ms); }
  .motion .jr-card[data-reveal] .jr-photo img { scale: 1.12; transition: scale 1.4s var(--ease-out), filter .6s var(--ease); transition-delay: calc(.2s + var(--i, 0) * 100ms), 0s; }
  .motion .jr-card.is-in .jr-photo { clip-path: inset(0 0 0 0 round 14px); }
  .motion .jr-card.is-in .jr-photo img { scale: 1; }
  @media (hover: hover) { .motion .jr-card.is-in:hover .jr-photo img { scale: 1.06; transition-delay: 0s; } }
  .motion .diff::before { transform: scaleX(0); transition: transform .9s var(--ease-out); transition-delay: calc(.25s + var(--i, 0) * 140ms); }
  .motion .diff.is-in::before { transform: none; }
  .motion .diff-art-plate { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), border-color .35s var(--ease); transition-delay: calc(.1s + var(--i, 0) * 140ms), calc(.1s + var(--i, 0) * 140ms), 0s; }
  .motion .diff.is-in .diff-art-plate { opacity: 1; transform: none; }
  .motion .diff-motif .m-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out), opacity .35s var(--ease); transition-delay: calc(.4s + var(--i, 0) * 140ms), 0s; }
  .motion .diff.is-in .diff-motif .m-draw { stroke-dashoffset: 0; }
  .motion .diff .mark { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), translate .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); transition-delay: calc(.5s + var(--i, 0) * 140ms), calc(.5s + var(--i, 0) * 140ms), 0s, 0s, 0s; }
  .motion .diff.is-in .mark { opacity: 1; transform: none; }
  /* Certificate section: orbit turns slowly; dial counter-turns; sheets get a one-time border trace */
  @keyframes orbit-turn { to { rotate: 360deg; } }
  @keyframes orbit-turn-rev { to { rotate: -360deg; } }
  @keyframes border-trace { 0% { opacity: 1; clip-path: inset(0 100% 100% 0); } 55% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
  .motion .certs-band::before { will-change: rotate; animation: orbit-turn 64s linear infinite; }
  .motion .certs-band::after { will-change: rotate; animation: orbit-turn-rev 110s linear infinite; }
  .certs-band.is-paused::before, .certs-band.is-paused::after { animation-play-state: paused; }
  .motion .cert-card-wrapper.is-in .cert-placeholder::after { animation: border-trace 1.6s var(--ease-out) calc(.5s + var(--i, 0) * .2s) 1 both; }
  .motion .certs-head h2, .motion .certs-head > p { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
  .motion .certs-head > p { transition-delay: .12s; }
  .motion .certs-head.is-in h2, .motion .certs-head.is-in > p { opacity: 1; transform: none; }
  /* Living graphs: gentle loops inside each plate */
  @keyframes m-travel { from { stroke-dashoffset: .12; opacity: 0; } 12% { opacity: .9; } 80% { opacity: .9; } to { stroke-dashoffset: -1.05; opacity: 0; } }
  @keyframes m-rise { to { stroke-dashoffset: 16; } }
  @keyframes m-spin { to { transform: rotate(360deg); } }
  @keyframes m-type { 0%, 8% { transform: scaleX(0); } 30%, 82% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
  .motion .diff.is-in .m-sheen { animation: m-travel 3.6s cubic-bezier(.45, 0, .25, 1) 2s infinite; }
  .motion .diff.is-in .m-sheen--soft { animation-duration: 5.5s; animation-delay: 2.6s; }
  .motion .diff.is-in .m-rise { animation: m-rise 1.6s linear 1.8s infinite; }
  .motion .diff.is-in .m-flow { animation: dash-flow 1.4s linear 1.8s infinite; }
  .motion .diff.is-in .m-spin { animation: m-spin 12s linear 1.8s infinite; }
  .motion .diff.is-in .m-spin--slow { animation-duration: 8s; }
  .motion .diff.is-in .m-type { animation: m-type 4.8s var(--ease-out) infinite; animation-delay: calc(1.8s + var(--k, 0) * .28s); }
  .motion .diff.is-in .m-float { animation: m-float 5s ease-in-out 1.8s infinite; }
  .diffs-band.is-paused .diff-motif * { animation-play-state: paused !important; }

  /* Grids: children arrive in a short stagger once the group is visible */
  .motion .domains li, .motion .stat-card { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(.15s + var(--i, 0) * 70ms); }
  .motion .is-in .domains li, .motion .is-in .stat-card { opacity: 1; transform: none; }
  /* Story: the orbit arc draws, connectors reach across, one sheen passes over the 27 */
  @keyframes h27-orbit { to { stroke-dashoffset: -600; } }
  @keyframes h27-sheen { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
  @keyframes dot-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
  .motion .h27-ring .ring-arc { stroke-dashoffset: 186; transition: stroke-dashoffset 1.8s var(--ease-out) .35s; }
  .motion .credibility.is-in .h27-ring .ring-arc { stroke-dashoffset: 0; }
  .motion .h27-ring .ring-ticks { animation: h27-orbit 80s linear infinite; }
  .motion .credibility.is-in .h27-num .count { animation: h27-sheen 1.5s var(--ease) 2.5s both; }
  .motion .highlight-27::after, .motion .cred-badge::after { transform: scaleX(0); transition: transform 1s var(--ease-out) .9s; }
  .motion .cred-badge::after { transition-delay: 1.2s; }
  .motion .credibility.is-in .highlight-27::after, .motion .credibility.is-in .cred-badge::after { transform: none; }
  .motion .pulse-dot::after { animation: dot-ping 2.8s var(--ease-out) 1.5s infinite; }
  /* Webinar + offer: connectors draw toward the ticket, the faint 27 settles in, orbits turn very slowly */
  .motion .webinar::after, .motion .ticket::before { transform: scaleY(0); transition: transform .8s var(--ease-out) .45s; }
  .motion .ticket::before { transition-delay: .25s; }
  .motion .webinar:has(.webinar-card.is-in)::after, .motion .ticket.is-in::before { transform: none; }
  @supports not selector(:has(*)) { .motion .webinar::after { transform: none; } }
  .motion .ticket-main::after { opacity: 0; transition: opacity 1.4s var(--ease) .6s; }
  .motion .ticket.is-in .ticket-main::after { opacity: 1; }
  .motion .offer-orbits { animation: orbit-turn 150s linear infinite; }
  .offer.is-paused .offer-orbits { animation-play-state: paused; }
  @supports selector(::details-content) {
    .motion .faq details p { opacity: 0; translate: 0 -4px; transition: opacity .35s var(--ease) .06s, translate .4s var(--ease-out) .06s; }
    .motion .faq details[open] p { opacity: 1; translate: none; }
    @starting-style { .motion .faq details[open] p { opacity: 0; translate: 0 -4px; } }
  }
  /* Build-a-Thon: orbs drift, the mock window floats, its dashed outline marches */
  @keyframes build-drift { from { translate: 0 0; scale: 1; } to { translate: 90px 44px; scale: 1.08; } }
  @keyframes build-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
  @keyframes build-breathe { 0%, 100% { opacity: .55; scale: .92; } 50% { opacity: 1; scale: 1.06; } }
  @keyframes build-sweep { 0% { translate: 0 0; } 60%, 100% { translate: 420% 0; } }
  @keyframes build-twinkle { 0%, 100% { opacity: .2; scale: .6; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
  .motion .build-orb { animation: build-drift 16s ease-in-out infinite alternate; }
  .motion .build-orb--terra { animation-delay: -6s; }
  .motion .build-art-stage { animation: build-float 8s ease-in-out infinite; }
  .motion .build-core { animation: build-breathe 4.2s ease-in-out infinite; }
  .motion .build-scan::before { animation: build-sweep 7s var(--ease) 1.2s infinite; }
  .motion .build-spark { animation: build-twinkle 3.4s ease-in-out infinite; }
  .motion .build-spark--b { animation-delay: 1.1s; } .motion .build-spark--c { animation-delay: 2.2s; }
  .build-band.is-paused .build-orb, .build-band.is-paused .build-art-stage, .build-band.is-paused .build-core, .build-band.is-paused .build-scan::before, .build-band.is-paused .build-spark { animation-play-state: paused; }
  /* =========================================================
     Deployment artwork: the image stays still; light moves through it.
     Everything below is placed in the artwork's own coordinates (1310 x 1200), so it tracks the image at any size.
     ========================================================= */
  .build-art-stage { -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
  .dp { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 1310 / 1200; translate: -50% 0; }
  .build-art-img.dp-img { object-fit: fill; -webkit-mask: none; mask: none; }
  .dp-core, .dp-ripple, .dp-wave { position: absolute; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
  /* processor: emerald bloom over the chip, flattened to its isometric top */
  .dp-core { width: 40%; aspect-ratio: 1 / .62; mix-blend-mode: screen; opacity: .45;
    background: radial-gradient(closest-side, rgba(140, 255, 205, 0.55), rgba(60, 230, 150, 0.22) 45%, rgba(60, 230, 150, 0) 100%); }
  .dp-ripple { width: 30%; aspect-ratio: 1 / .58; border: 2px solid rgba(150, 255, 210, 0.8); box-shadow: 0 0 14px rgba(90, 240, 170, 0.55), inset 0 0 10px rgba(90, 240, 170, 0.35); opacity: 0; }
  /* circuit traces: a ring of light expands from the core but is only visible on the traces themselves */
  .dp-traces { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
  .dp-wave { width: 150%; aspect-ratio: 1 / .62; opacity: 0;
    background: radial-gradient(closest-side, rgba(200, 255, 230, 0) 76%, rgba(200, 255, 230, 1) 86%, rgba(160, 255, 215, 0.55) 90%, rgba(200, 255, 230, 0) 97%); }
  .dp-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .dp-hop { fill: #F0FFF8; opacity: 0; }
  .dp-hop-halo { fill: url(#dp-g-soft); }
  .dp-node { fill: url(#dp-g-soft); opacity: 0; mix-blend-mode: screen; }
  .dp-sweep { opacity: 0; mix-blend-mode: screen; }
  .dp-chart, .dp-donut { opacity: 0; mix-blend-mode: screen; }
  .dp-ring { fill: none; stroke: #9CFFD3; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; transform-box: fill-box; transform-origin: center; rotate: -90deg; }
  .dp-panel { fill: url(#dp-g-soft); opacity: 0; mix-blend-mode: screen; }
  .dp-check { fill: none; stroke: #A8FFD8; stroke-width: 3.5; opacity: 0; filter: drop-shadow(0 0 8px #5BE3A4); }

  @keyframes dp-core { 0%, 100% { opacity: .38; scale: .96; } 45% { opacity: .78; scale: 1.04; } 60% { opacity: .7; } }
  @keyframes dp-ripple { 0% { opacity: 0; scale: .55; } 8% { opacity: .75; } 70% { opacity: 0; scale: 1.5; } 100% { opacity: 0; scale: 1.5; } }
  @keyframes dp-wave { 0% { opacity: 0; scale: .12; } 6% { opacity: 1; } 62% { opacity: .9; } 78% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } }
  @keyframes dp-hop { 0% { opacity: 0; transform: translate(var(--x1), var(--y1)); } 2% { opacity: 1; } 11% { opacity: 1; transform: translate(var(--x2), var(--y2)); } 14%, 100% { opacity: 0; transform: translate(var(--x2), var(--y2)); } }
  @keyframes dp-node { 0%, 9% { opacity: 0; } 12% { opacity: 1; } 24%, 100% { opacity: 0; } }
  @keyframes dp-sweep { 0%, 55% { opacity: 0; transform: translateX(0); } 58% { opacity: 1; } 84% { opacity: 1; transform: translateX(640px); } 88%, 100% { opacity: 0; transform: translateX(640px); } }
  @keyframes dp-hl { 0%, 100% { opacity: 0; } 18%, 32% { opacity: .85; } 46% { opacity: 0; } }
  @keyframes dp-ring { 0%, 20% { stroke-dasharray: 0 100; opacity: 0; } 24% { opacity: .9; } 48% { stroke-dasharray: 92 100; opacity: .9; } 62%, 100% { stroke-dasharray: 92 100; opacity: 0; } }
  @keyframes dp-deploy { 0%, 100% { opacity: 0; } 14% { opacity: 1; } 30% { opacity: .65; } 44% { opacity: 0; } }

  .motion .build-art-stage { animation: none; }              /* the artwork itself no longer floats */
  .motion .dp-core { animation: dp-core 5s ease-in-out infinite; }
  .motion .dp-ripple { animation: dp-ripple 5s cubic-bezier(.2, .6, .3, 1) infinite; }
  .motion .dp-ripple--b { animation-delay: 2.5s; }
  .motion .dp-wave { animation: dp-wave 7.5s cubic-bezier(.35, .1, .4, 1) infinite; }
  .motion .dp-wave--b { animation-delay: 3.75s; }
  .motion .dp-hop { animation: dp-hop 7.5s linear infinite; }
  .motion .dp-node { animation: dp-node 7.5s ease-out infinite; }
  .motion .dp-sweep { animation: dp-sweep 9s cubic-bezier(.45, 0, .3, 1) infinite; }
  .motion .dp-chart { animation: dp-hl 6.4s ease-in-out 1.2s infinite; }
  .motion .dp-donut { animation: dp-hl 6.4s ease-in-out 3.8s infinite; }
  .motion .dp-ring { animation: dp-ring 8s cubic-bezier(.45, 0, .3, 1) .6s infinite; }
  .motion .dp-panel, .motion .dp-check { animation: dp-deploy 9s ease-in-out infinite; animation-delay: calc(var(--k) * 3s + .8s); }
  .build-band.is-paused .dp *, .build-band.is-paused .dp-fx * { animation-play-state: paused !important; }
  /* without motion: a calm, slightly lit still */
  html:not(.motion) .dp-core { opacity: .5; }
  /* entrance: copy rises line by line, the artwork settles in */
  .motion .build-copy[data-reveal] { opacity: 1; transform: none; }
  .motion .build-copy > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
  .motion .build-copy.is-in > * { opacity: 1; transform: none; }
  .motion .build-copy > :nth-child(2) { transition-delay: .08s; } .motion .build-copy > :nth-child(3) { transition-delay: .16s; } .motion .build-copy > :nth-child(4) { transition-delay: .24s; } .motion .build-copy > :nth-child(5) { transition-delay: .34s; } .motion .build-copy > :nth-child(6) { transition-delay: .44s; }
  .motion .build-art[data-reveal] { transform: translateY(24px) scale(.96); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
  .motion .build-art[data-reveal].is-in { transform: none; }
  @keyframes cg-fly { from { stroke-dashoffset: 466; } to { stroke-dashoffset: 0; } }
  @keyframes cg-glow { 0%, 100% { opacity: .16; scale: 1; } 50% { opacity: .26; scale: 1.025; } }
  @keyframes cg-ping { 0% { scale: .4; opacity: .9; } 100% { scale: 2.6; opacity: 0; } }
  @keyframes ca-wave { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: 1; } }
  @keyframes ca-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .6; } }
  .motion .cred-globe img { animation: cg-glow 14s ease-in-out infinite; }
  /* meridians sweep across the sphere: each squeezes from full width to a line and out the other side */
  @keyframes cg-spin { from { scale: 1 1; } to { scale: -1 1; } }
  .motion .cg-mer ellipse:not(.cg-lat) { animation: cg-spin 18s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -3s); }
  .motion .cg-route { animation: cg-fly 11s var(--ease) infinite; }
  .motion .cg-route--b { animation-duration: 6.5s; animation-delay: -2s; } .motion .cg-route--c { animation-duration: 7.5s; animation-delay: -4s; }
  .motion .cg-ring { animation: cg-ping 6s var(--ease-out) infinite; } .motion .cg-ring:nth-of-type(2) { animation-delay: 1.2s; } .motion .cg-ring:nth-of-type(3) { animation-delay: 2.4s; }
  .motion .ca-arc { animation: ca-wave 9s ease-in-out infinite; animation-delay: calc(var(--k) * .7s); }
  .motion .ca-dot { animation: ca-twinkle 6s ease-in-out infinite; animation-delay: calc(var(--k) * .9s); }
  .story-band.is-paused .cred-globe img, .story-band.is-paused .cg-mer ellipse, .story-band.is-paused .cg-route, .story-band.is-paused .cg-ring, .story-band.is-paused .ca-arc, .story-band.is-paused .ca-dot { animation-play-state: paused; }
  .story-band.is-paused .h27-ring .ring-ticks, .story-band.is-paused .pulse-dot::after { animation-play-state: paused; }
  .motion .domains li { transition: opacity .45s var(--ease-out) calc(.2s + var(--i, 0) * 80ms), transform .5s var(--ease-out) calc(.2s + var(--i, 0) * 80ms), translate .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); }
  @keyframes needle-settle { from { transform: rotate(-70deg); } }
  @keyframes dial-in { from { opacity: 0; rotate: -30deg; } }
  .motion .taster.is-in .taster-icon polygon { animation: needle-settle 1.3s var(--ease-out) .35s both; }
  .motion .taster.is-in .taster-icon::after { animation: dial-in 1.6s var(--ease-out) .2s both; }
  .motion .taster-head, .motion .taster-content p { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-out), transform .65s var(--ease-out); }
  .motion .taster-content p { transition-delay: .12s; }
  .motion .taster.is-in .taster-head, .motion .taster.is-in .taster-content p { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .particle { display: none; }
  }
  @media print {
    .motion [data-reveal], .motion .stage, .motion .journey-head > *, .motion .stage-icon, .motion .domains li, .motion .stat-card, .motion .certs-head h2, .motion .certs-head p, .motion .taster-head, .motion .taster-content p, .motion .diff .mark, .motion .diff::before, .motion .diff-art-plate, .motion .highlight-27::after, .motion .cred-badge::after, .motion .webinar::after, .motion .ticket::before, .motion .ticket-main::after, .motion .faq details p, .motion .build-copy > * { opacity: 1 !important; transform: none !important; }
    .motion .jr-photo { clip-path: none !important; }
    .motion .h27-ring .ring-arc { stroke-dashoffset: 0 !important; }
    .site-header { position: static; }
  }

  /* =========================================================
     16. Responsive
     ========================================================= */
  @media (max-width: 1240px) {
  }
  @media (max-width: 1100px) {
    .stat { padding-inline: 22px; }
    .credibility { grid-template-columns: 1fr; }
    .cred-content { max-width: 680px; }
    .highlight-27::after, .cred-badge::after { display: none; }
    .cred-badge { max-width: 60ch; }
    .cred-arcs { display: none; }
    .cred-globe { right: -20%; top: auto; bottom: -4%; translate: none; width: 90%; }
    .credibility::before { inset: 40% -8% -10% -8%; -webkit-mask: radial-gradient(60% 55% at 50% 60%, #000, transparent 78%); mask: radial-gradient(60% 55% at 50% 60%, #000, transparent 78%); }
    .cred-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
    .cred-stats-grid::after { background-position: calc(33.333% - 2px) center, calc(66.666% + 1px) center; }
    .stat-card { border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
    .stat-card:nth-child(3n) { border-right: 0; }
    .stat-card:nth-last-child(-n+3) { border-bottom: 0; }
    .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 960px) {
    .taster { grid-template-columns: 1fr; gap: 22px; }
    .domains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .taster-deco { -webkit-mask: linear-gradient(180deg, #000, transparent 55%); mask: linear-gradient(180deg, #000, transparent 55%); }
    .taster { background: linear-gradient(180deg, #F0E4D3 0%, #F5ECE0 30%, var(--surface) 62%); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3)::after { display: none; }
    .stat:nth-child(n+3) { border-top: 1px solid rgba(20, 35, 28, 0.08); }
    .diffs { grid-template-columns: 1fr; }
    .diff { flex-direction: row; align-items: center; gap: clamp(24px, 4vw, 40px); padding: 28px 0 48px; }
    .diff-art { flex: 0 0 min(42%, 300px); margin-bottom: 0; }
    .diff-art-plate { height: 112px; }
    .diff-body { flex: 1; min-width: 0; }
    .diffs { background-image: none; }
    .diff + .diff { border-top: 1px solid var(--line); }
    .diff::after { left: 0; right: 0; }
    .diff::before { left: 0; right: auto; width: 44px; }
    .certs-head { grid-template-columns: 1fr; }
    .certs-head > p { justify-self: start; }
    .faq { grid-template-columns: 1fr; gap: 28px; }
    .faq-head { position: static; }
    .faq-art, .faq-head::after { display: none; }
  }
  @media (max-width: 820px) {
    .cert-container { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .ticket { grid-template-columns: 1fr; }
    .ticket::before { left: calc(50% - .75px); }
    .webinar::after { left: calc(50% - .75px); }
    .ticket-main { border-radius: 24px 24px 0 0; -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat; }
    .ticket-main::before { right: 0; bottom: auto; width: auto; height: 4px; background: linear-gradient(90deg, var(--accent), var(--action)); }
    .ticket-stub { border-radius: 0 0 24px 24px; -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
      background: repeating-linear-gradient(90deg, rgba(20, 35, 28, 0.24) 0 6px, transparent 6px 12px) left top / 100% 1.5px no-repeat, radial-gradient(110% 80% at 100% 0%, rgba(232, 135, 90, 0.13), rgba(232, 135, 90, 0) 62%), linear-gradient(180deg, #FFF8EF, #FBF0E2); }
    .offer-orbits { left: 100%; top: 62%; width: 640px; }
    .webinar { --overlap: 56px; }
    .webinar-card { flex-wrap: wrap; }
    .webinar-text { flex-basis: calc(100% - 88px); }
    .webinar-card .btn { width: 100%; }
    .story-band { padding-bottom: calc(var(--section) + 56px); }
    .finale { border-radius: 24px 24px 0 0; }
    .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    .diff { flex-direction: column; align-items: stretch; gap: 0; padding: 24px 0 28px; }
    .diff-art { flex: none; margin-bottom: 42px; }
    .diff-art-plate { height: 92px; }
    .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .domains li { min-height: 58px; padding: 10px 12px 10px 14px; gap: 10px; }
    .dom-icon { width: 32px; height: 32px; border-radius: 9px; }
    .dom-icon svg { width: 17px; height: 17px; }
    .taster-head { gap: 26px; }
    .cred-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
    .h27-ring { left: 56%; width: 1.62em; height: 1.62em; }
    .cred-globe { right: -40%; width: 150%; bottom: -2%; }
    .stat-ico { width: 24px; height: 24px; margin-bottom: 10px; }
    .cred-stats-grid::after { background-position: center calc(33.333% - 2px), center calc(66.666% + 1px); }
    .stat-card, .stat-card:nth-child(3n) { padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
    .stat-card:nth-child(odd) { border-right: 1px solid var(--line-dark); }
    .stat-card:nth-last-child(-n+2) { border-bottom: 0; }
    .stat-num { font-size: clamp(1.5rem, 6.8vw, 2.125rem); margin-bottom: 10px; }
    .stat-lbl { flex-direction: column; gap: 8px; min-height: calc(2.8em + 10px); }
    .stat-lbl::before { margin-top: 0; }
    .cred-badge { padding: 18px 18px 18px 16px; gap: 14px; }
    .faq-list { padding: 6px 0; border-radius: 20px; }
    .faq details { --row-pad: 18px; }
    .faq summary { gap: 16px; padding: 20px 0; }
    .faq details p { padding-right: 0; }
    .ticket-main { padding: 34px 24px 34px 40px; }
    .ticket-main h2::before { left: -16px; }
    .ticket-stub { padding: 32px 24px; }
  }
  @media (max-width: 420px) {
    .btn--sm { padding-inline: 14px 12px; }
    .stat { padding: 22px 16px 24px; }
    .stat-mark { margin-bottom: 14px; }
    .stat strong { font-size: clamp(1.25rem, 6.2vw, 1.5rem); }
    .hero-title { font-size: clamp(2rem, 10.6vw, 2.875rem); }
    .webinar-text { flex-basis: 100%; padding-left: 0; border-left: 0; }
    .stat-card, .stat-card:nth-child(3n) { padding: 20px 12px; }
    .stat-num { font-size: clamp(1.3125rem, 6.6vw, 1.625rem); }
    .stat-lbl { letter-spacing: .08em; }
    .domains li { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 12px 12px 12px 14px; font-size: .9375rem; }
    .domains li::before { top: 12px; bottom: auto; height: 32px; }
    .taster-icon { width: 46px; height: 46px; }
  }
  @media (max-width: 365px) {
    .taster { padding: 20px 16px; }
    .domains li { font-size: .8125rem; letter-spacing: -0.02em; padding: 12px 10px 12px 12px; }
    .stat { padding-inline: 12px; }
    .stat strong { font-size: 1.1875rem; letter-spacing: -0.028em; }
    .stat strong + span { font-size: .8125rem; }
    .ticket-main { padding: 30px 18px 30px 32px; }
    .ticket-main h2 { font-size: 1.625rem; }
    .ticket-main h2::before { left: -14px; }
    .ticket-stub { padding: 30px 18px; }
    .webinar-card .btn { padding-inline: 16px; font-size: 1rem; }
    .stat-card, .stat-card:nth-child(3n) { justify-content: flex-start; }
    .site-header .btn--pill { padding-inline: 16px; white-space: nowrap; }
    .site-header .btn--pill::after { display: none; }
    .brand { gap: 8px; }
  }

  /* =========================================================
     12b. Offer v2: framed certificate-paper ticket + dark circuit stub
     ========================================================= */
  .webinar-art { width: clamp(96px, 9vw, 132px); height: auto; aspect-ratio: 326 / 256; padding: 0; border: 0; background: none; box-shadow: none; position: relative; overflow: visible; }
  .webinar-art img { width: 100%; height: 100%; display: block; mix-blend-mode: multiply; -webkit-mask: radial-gradient(closest-side, #000 78%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent 92%); }
  .webinar-play { position: absolute; left: 50%; top: 40%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(196, 120, 255, 0.55), rgba(110, 82, 201, 0) 70%); opacity: 0; }

  @media (min-width: 821px) { .ticket { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
  .ticket-main { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: repeating-radial-gradient(circle at 0% 50%, rgba(160, 120, 60, 0.05) 0 1px, transparent 1px 7px), repeating-radial-gradient(circle at 100% 50%, rgba(160, 120, 60, 0.04) 0 1px, transparent 1px 9px), linear-gradient(180deg, #FFFCF5, #FBF4E6); }
  .ticket-main h2 { max-width: 16ch; margin-inline: auto; }
  .ticket-main h2::before { display: none; }
  .ticket-main p { margin-inline: auto; }
  .tk-frame { position: absolute; inset: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) clamp(24px, 2.6vw, 34px); z-index: -1; pointer-events: none; border-radius: 6px; border: 1.5px solid rgba(181, 140, 72, 0.6); box-shadow: inset 0 0 0 5px rgba(255, 252, 245, 0.9), inset 0 0 0 6px rgba(181, 140, 72, 0.35); }
  .ticket-main::after { content: "27"; content: "27" / ""; left: 2%; right: auto; bottom: auto; top: 50%; translate: 0 -50%; font-size: clamp(12rem, 7rem + 12vw, 20rem); color: transparent; -webkit-text-stroke: 1.5px rgba(181, 140, 72, 0.16); }

  .ticket-stub { align-items: center; text-align: center; color: var(--on-dark); padding-left: clamp(52px, 5vw, 76px);
    background: radial-gradient(60% 50% at 55% 40%, rgba(46, 204, 133, 0.18), rgba(46, 204, 133, 0) 70%), linear-gradient(160deg, #0F3A2C 0%, #0A2A20 55%, #072018 100%); }
  .ticket-stub::before { display: none; }
  .tk-tear { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(26px, 2.6vw, 38px); height: 100%; z-index: 2; fill: #F7F1E6; filter: drop-shadow(3px 0 3px rgba(0, 0, 0, 0.28)); }
  .tk-circuit { position: absolute; left: 50%; top: 50%; width: 125%; max-width: none; height: auto; translate: -45% -50%; z-index: 0 !important; pointer-events: none; opacity: .32; -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
  .tk-brain-shell { fill: none; stroke: rgba(80, 220, 150, 0.22); stroke-width: 1.4; }
  .tk-traces path, .tk-stem { fill: none; stroke: rgba(80, 220, 150, 0.45); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .tk-nodes circle { fill: #59E6A4; filter: drop-shadow(0 0 4px rgba(89, 230, 164, 0.9)); }
  .ticket-stub .price-display, .ticket-stub .btn { z-index: 1; }
  .ticket-stub .price-old { color: rgba(243, 236, 227, 0.82); font-size: 1.375rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
  .ticket-stub .price-old s { text-decoration-color: var(--accent-on-dark); }
  .ticket-stub .price-new { color: #FFF6EA; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ticket-stub .price-new { background: linear-gradient(180deg, #FFFBF4 30%, #F2D2AE); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); }
  }
  .ticket-stub .btn { width: auto; min-width: 230px; border-radius: 999px; background: linear-gradient(90deg, #C8571E, #E0742F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 170, 110, 0.35), 0 12px 32px rgba(224, 116, 47, 0.5); }
  @media (hover: hover) { .ticket-stub .btn:hover { background: linear-gradient(90deg, #B44C17, #D3662A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 170, 110, 0.5), 0 16px 40px rgba(224, 116, 47, 0.65); } }
  .ticket-stub .btn:focus-visible { outline-color: #FFD9B8; }

  /* motion: traces flow, nodes blink, button glows, price stamps in */
  @keyframes tk-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes tk-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes tk-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 170, 110, 0.35), 0 12px 32px rgba(224, 116, 47, 0.45); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 170, 110, 0.55), 0 14px 44px rgba(224, 116, 47, 0.75); } }
  @keyframes tk-shine { 0%, 70% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
  @keyframes tk-stamp { from { opacity: 0; scale: 1.18; filter: blur(6px); } }
  @keyframes tk-play { 0%, 100% { opacity: .2; scale: .9; } 50% { opacity: .85; scale: 1.08; } }
  .motion .tk-traces path { stroke-dasharray: 22 78; animation: tk-flow 5s linear infinite; animation-delay: calc(var(--k) * -.55s); }
  .motion .tk-nodes circle { animation: tk-blink 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); }
  .motion .ticket-stub .btn { animation: tk-glow 3s ease-in-out infinite; }
  .motion .ticket-stub .btn::before { animation: tk-shine 4.5s var(--ease) 1.5s infinite; }
  .motion .ticket.is-in .ticket-stub .price-new { animation: tk-stamp .9s var(--ease-out) .5s both; }
  .motion .ticket.is-in .ticket-stub .price-old { animation: tk-stamp .7s var(--ease-out) .3s both; }
  .motion .webinar-play { animation: tk-play 3.6s ease-in-out infinite; }
  .motion .tk-frame { clip-path: inset(0 100% 0 0 round 6px); transition: clip-path 1.4s var(--ease-out) .3s; }
  .motion .ticket.is-in .tk-frame { clip-path: inset(0 0 0 0 round 6px); }
  .offer.is-paused .tk-traces path, .offer.is-paused .tk-nodes circle, .offer.is-paused .ticket-stub .btn, .offer.is-paused .ticket-stub .btn::before { animation-play-state: paused; }
  @media (max-width: 820px) {
    .ticket-stub .btn { min-width: 0; width: 100%; }
    .ticket-stub { padding: 44px 24px 36px; background: radial-gradient(60% 50% at 50% 40%, rgba(46, 204, 133, 0.18), rgba(46, 204, 133, 0) 70%), linear-gradient(160deg, #0F3A2C 0%, #0A2A20 55%, #072018 100%); }
    .tk-tear { display: none; }
    .ticket-stub::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16px; z-index: 2; background: #F7F1E6; -webkit-mask: linear-gradient(135deg, #000 50%, transparent 50%) 0 0 / 16px 16px repeat-x, linear-gradient(225deg, #000 50%, transparent 50%) 8px 0 / 16px 16px repeat-x; mask: conic-gradient(from -45deg at 50% 100%, transparent 90deg, #000 0) 0 0 / 16px 16px repeat-x; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25)); }
    .tk-circuit { translate: -50% -50%; width: 110%; }
    .ticket-main::after { left: 50%; translate: -50% -50%; }
  }
  @media (prefers-reduced-motion: reduce) { .tk-frame { clip-path: none !important; } }

  /* Gold sunburst behind the webinar + ticket, as in the reference */
  .offer { --reach: clamp(110px, 10vw, 150px); margin-top: calc(-1 * var(--reach)); padding-top: calc(clamp(56px, 7vw, 88px) + var(--reach)); }
  .webinar::before { background: #F1E2D0; }
  .offer-sun { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1500px, 150vw); height: auto; max-width: none; translate: -50% -50%; pointer-events: none;
    -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); }
  .os-rings circle, .os-dash { fill: none; stroke: rgba(181, 140, 72, 0.32); stroke-width: 1.2; }
  .os-dash { stroke-dasharray: 3 9; stroke: rgba(181, 140, 72, 0.4); }
  .os-rays line { stroke: rgba(181, 140, 72, 0.14); stroke-width: 1; }
  .os-rays, .os-rings, .os-dash { transform-box: view-box; transform-origin: 50% 50%; }
  @keyframes os-turn { to { rotate: 360deg; } }
  @keyframes os-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
  .motion .os-rays { animation: os-turn 240s linear infinite; }
  .motion .os-dash { animation: os-turn 120s linear infinite reverse; }
  .motion .os-rings { animation: os-breathe 8s ease-in-out infinite; }
  .offer.is-paused .os-rays, .offer.is-paused .os-dash, .offer.is-paused .os-rings { animation-play-state: paused; }

  /* =========================================================
     12c. Offer v3: matched to the approved generated mockup
     ========================================================= */
  .offer { --reach: clamp(190px, 19vw, 280px); background: linear-gradient(180deg, #F4EBDD 0%, #F1E5D3 100%); }
  .offer::after, .offer::before, .offer-orbits { display: none; }
  .story-band { z-index: 1; }
  .webinar::before { display: none; }
  .webinar::after, .ticket::before { display: none; }
  .offer-sun { -webkit-mask: radial-gradient(closest-side, #000 70%, transparent 100%); mask: radial-gradient(closest-side, #000 70%, transparent 100%); }
  .os-rings circle { stroke: rgba(176, 134, 66, 0.5); stroke-width: 1.3; }
  .os-dash { stroke: rgba(176, 134, 66, 0.55); }
  .os-rays line { stroke: rgba(176, 134, 66, 0.26); }
  /* compact webinar card aligned with the ticket's left edge */
  .webinar-card { --bar: clamp(14px, 1.8vw, 26px); width: min(100%, 620px); margin-left: max(0px, calc((100% - 1080px) / 2)); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 2vw, 26px); row-gap: 14px;
    padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 24px) calc(var(--bar) + clamp(14px, 1.8vw, 24px)); border-radius: 16px; background: linear-gradient(180deg, #FFFDF9, #FBF6EE); }
  .webinar-card::before { width: var(--bar); background: linear-gradient(180deg, #7B4FE0, #5B33C9); }
  .webinar-card::after { display: none; }
  .webinar-art { grid-row: span 2; width: clamp(110px, 12vw, 160px); }
  .webinar-text { padding-left: 0; border-left: 0; }
  .webinar-text h2 { font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); }
  .webinar-text p { font-size: 1rem; max-width: 40ch; }
  .webinar-card .btn { grid-column: 2; justify-self: start; width: auto; min-height: 42px; padding: 8px 16px 8px 18px; border-radius: 999px; font-size: .9375rem; border-color: rgba(20, 35, 28, 0.6); background: transparent; box-shadow: none; }
  /* ticket */
  .ticket { max-width: 1080px; filter: drop-shadow(0 1px 1px rgba(20, 35, 28, 0.06)) drop-shadow(0 22px 32px rgba(74, 38, 12, 0.16)); }
  .ticket-main { --bar: clamp(14px, 1.8vw, 26px); padding-left: calc(var(--bar) + clamp(30px, 3.6vw, 52px)); }
  .ticket-main::before { width: var(--bar); background: linear-gradient(180deg, #F07A2C, #D9581A); }
  .tk-frame { inset: clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px) calc(var(--bar) + clamp(12px, 1.6vw, 22px)); }
  .ticket-main h2 { font-size: clamp(1.875rem, 1.1rem + 2.1vw, 2.875rem); }
  .ticket-main p { font-size: clamp(1rem, .9rem + .35vw, 1.1875rem); color: var(--ink); }
  .ticket-stub { padding-left: clamp(70px, 7vw, 96px); }
  .tk-tear { width: clamp(48px, 5vw, 66px); fill: #F6F1E8; filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.35)); }
  .tk-fibre { fill: none; stroke: rgba(160, 150, 130, 0.35); stroke-width: .8; }
  .tk-circuit { opacity: .62; translate: -42% -50%; -webkit-mask: radial-gradient(closest-side, #000 75%, transparent); mask: radial-gradient(closest-side, #000 75%, transparent); }
  .tk-traces path, .tk-stem { stroke: rgba(80, 220, 150, 0.55); }
  .tk-brain-shell { stroke: rgba(80, 220, 150, 0.35); }
  @media (max-width: 820px) {
    .webinar-card { width: 100%; margin-left: 0; }
    .offer { --reach: 340px; }
    .ticket-main { padding-left: 24px; }
    .ticket-main::before { width: auto; height: 10px; }
    .tk-frame { inset: 22px 14px 14px; }
    .ticket-stub { padding-left: 24px; }
  }
  @media (max-width: 480px) {
    .webinar-card { grid-template-columns: 1fr; padding-left: calc(var(--bar) + 16px); }
    .offer { --reach: 400px; }
    .webinar-art { grid-row: auto; }
    .webinar-card .btn { grid-column: 1; }
  }

  /* =========================================================
     14b. Finale: converging light + living agent scene
     ========================================================= */
  .finale { background: linear-gradient(180deg, #0F2E24 0%, #0B261E 45%, #071A14 100%); }
  .final { position: relative; z-index: 2; padding-bottom: 0; }
  .final h2 { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); }
  .fin-cta { position: relative; display: grid; place-items: center; height: 110px; margin-top: -10px; }
  .fin-rays { position: absolute; left: 50%; bottom: -60px; width: 100vw; max-width: 1600px; height: 320px; translate: -50% 0; pointer-events: none; overflow: visible; }
  .fin-ray-lines path { fill: none; stroke: rgba(80, 220, 150, 0.22); stroke-width: 1; }
  .fin-ray-pulses path { fill: none; stroke: #7CF0B8; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 92; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px rgba(124, 240, 184, 0.9)); }
  .fin-ray-dot { fill: #59E6A4; opacity: .55; }
  .fin-btn { position: relative; z-index: 1; border-radius: 12px; background: linear-gradient(90deg, #E2581C, #F07A2C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 160, 100, 0.5), 0 0 34px rgba(240, 110, 40, 0.55), 0 14px 30px -10px rgba(0, 0, 0, 0.6); }
  @media (hover: hover) { .fin-btn:hover { background: linear-gradient(90deg, #C94A14, #E2681F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 170, 110, 0.7), 0 0 48px rgba(240, 110, 40, 0.75), 0 16px 34px -10px rgba(0, 0, 0, 0.6); } }
  .fin-scene { position: relative; z-index: 1; height: clamp(220px, 27vw, 420px); margin-top: 8px; overflow: hidden; isolation: isolate;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); }
  .fin-slide { position: absolute; inset: 0; }
  .fin-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.05); }
  .fin-slide--b { opacity: 0; }
  .fin-holo { position: absolute; width: var(--s); height: var(--s); translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; background: radial-gradient(circle, rgba(120, 255, 190, 0.45), rgba(120, 255, 190, 0) 70%); opacity: .4; }
  .fin-comets { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fin-comets path { fill: none; stroke: #8CFFC9; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px #59E6A4); opacity: .9; }
  .fin-scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 40%, rgba(150, 255, 205, 0.12) 50%, transparent 60%) -100% 0 / 60% 100% no-repeat; }
  .fin-particles { position: absolute; inset: 0; pointer-events: none; }
  .fin-particles i { position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%; background: #9CFFD0; box-shadow: 0 0 6px #59E6A4; opacity: 0; }
  .finale .site-footer { position: relative; z-index: 2; border-top-color: rgba(124, 240, 184, 0.14); }
  @keyframes fin-pulse { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes fin-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 160, 100, 0.5), 0 0 26px rgba(240, 110, 40, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.6); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(255, 170, 110, 0.75), 0 0 52px rgba(240, 110, 40, 0.8), 0 14px 30px -10px rgba(0, 0, 0, 0.6); } }
  @keyframes fin-kb-a { from { scale: 1.02; translate: 0 0; } to { scale: 1.12; translate: -2% -1%; } }
  @keyframes fin-kb-b { from { scale: 1.14; } to { scale: 1.02; } }
  @keyframes fin-flicker { 0%, 100% { opacity: .25; } 40% { opacity: .7; } 45% { opacity: .35; } 60% { opacity: .8; } }
  @keyframes fin-walk { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
  @keyframes fin-sweep { 0%, 30% { background-position: -100% 0; } 100% { background-position: 250% 0; } }
  @keyframes fin-rise { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .9; } 100% { opacity: 0; translate: 10px -260px; } }
  .motion .fin-ray-pulses path { animation: fin-pulse 3.6s var(--ease) infinite; animation-delay: calc(var(--k) * .4s); }
  .motion .fin-btn { animation: fin-glow 2.8s ease-in-out infinite; }
  .motion .fin-slide--a img { animation: fin-kb-a 20s ease-in-out infinite alternate; }
  .motion .fin-slide--b { animation: fin-swap 20s ease-in-out infinite; }
  .motion .fin-slide--b img { animation: fin-kb-b 20s ease-in-out infinite alternate; }
  .motion .fin-holo { animation: fin-flicker 3.4s steps(1, end) infinite; animation-delay: calc(var(--k) * .45s); }
  .motion .fin-comets path { animation: fin-walk 3s linear infinite; animation-delay: calc(var(--k) * -.75s); }
  .motion .fin-scan { animation: fin-sweep 6s var(--ease) infinite; }
  .motion .fin-particles i { animation: fin-rise 7s linear infinite; animation-delay: calc(var(--k) * .7s); }
  .finale.is-paused .fin-ray-pulses path, .finale.is-paused .fin-btn, .finale.is-paused .fin-slide img, .finale.is-paused .fin-slide--b, .finale.is-paused .fin-holo, .finale.is-paused .fin-comets path, .finale.is-paused .fin-scan, .finale.is-paused .fin-particles i { animation-play-state: paused; }
  @media (max-width: 640px) {
    .fin-scene { height: 220px; }
    .fin-slide img { object-position: 60% 50%; }
    .fin-cta { height: 96px; }
  }

  /* Gold guilloche waves (replaces the concentric circles) */
  .offer-sun { display: none; }
  .offer-waves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .ow-band path { fill: none; stroke: rgba(176, 134, 66, 0.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .ow-band path:nth-child(4n+1) { stroke: rgba(176, 134, 66, 0.45); }
  .ow-band--c path { stroke: rgba(176, 134, 66, 0.16); }
  .motion .ow-band--c { animation: ow-drift 90s linear infinite; }
  .ow-spark { fill: rgba(196, 150, 70, 0.55); transform-box: fill-box; transform-origin: center; }
  @keyframes ow-drift { from { translate: 0 0; } to { translate: -600px 0; } }
  @keyframes ow-drift-rev { from { translate: -600px 0; } to { translate: 0 0; } }
  @keyframes ow-twinkle { 0%, 100% { opacity: .15; scale: .6; } 50% { opacity: 1; scale: 1.1; } }
  .motion .ow-band--a { animation: ow-drift 60s linear infinite; }
  .motion .ow-band--b { animation: ow-drift-rev 75s linear infinite; }
  .motion .ow-spark { animation: ow-twinkle 4s ease-in-out infinite; animation-delay: calc(var(--k) * .55s); }
  .offer.is-paused .ow-band, .offer.is-paused .ow-spark { animation-play-state: paused; }

  /* =========================================================
     Hero motion pass
     ========================================================= */
  /* decorative icon tiles around the hub */
  .h-tiles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .h-tile { position: absolute; width: clamp(30px, 3vw, 44px); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 12px; color: #6E52C9;
    background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(110, 82, 201, 0.14); box-shadow: 0 8px 18px -10px rgba(75, 43, 214, 0.35), inset 0 1px 0 #fff; }
  .h-tile svg { width: 52%; height: 52%; }
  .h-tile--brain { color: #8A63F0; }
  /* circuit lines at the right edge */
  .h-circuit { position: absolute; z-index: -1; right: 0; top: 30%; width: clamp(220px, 24vw, 400px); height: auto; pointer-events: none; opacity: .9;
    -webkit-mask: linear-gradient(270deg, #000 40%, transparent); mask: linear-gradient(270deg, #000 40%, transparent); }
  .hc-lines path { fill: none; stroke: rgba(110, 82, 201, 0.16); stroke-width: 1.2; }
  .hc-pulses path { fill: none; stroke: #8A63F0; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 8 92; stroke-dashoffset: 100; opacity: 0; }
  .h-circuit circle { fill: rgba(110, 82, 201, 0.35); }
  /* bottom wave behind the stats strip */
  .h-wave { position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: clamp(46px, 5vw, 80px); pointer-events: none; overflow: visible; }
  .hw-fill { fill: rgba(22, 56, 46, 0.07); }
  .hw-line { fill: none; stroke: rgba(46, 204, 133, 0.45); stroke-width: 1.5; stroke-dasharray: 160 40; vector-effect: non-scaling-stroke; }
  /* connector light pulses */
  .h-link-pulse { stroke: #C9B6FF; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 14 86; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 3px rgba(138, 99, 240, 0.9)); }
  /* node hover: gentle glow + scale (works alongside the float) */
  .hero .btn--glow { transition: translate .25s var(--ease-out), box-shadow .25s var(--ease), background-color .2s var(--ease); }
  .hnode { cursor: default; transition: scale .4s var(--ease-out), filter .4s var(--ease); }
  @media (hover: hover) { .hnode:hover { scale: 1.06; filter: drop-shadow(0 0 10px rgba(138, 99, 240, 0.45)) brightness(1.04); } }
  .hero-art svg { pointer-events: auto; }
  /* CTA hover: slight lift, soft shadow, minimal arrow */
  @media (hover: hover) {
    .hero .btn--glow:hover { translate: 0 -2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 34px -6px rgba(224, 116, 47, 0.45); }
    .hero .btn--glow:hover::after { transform: translateX(2px); }
  }
  /* soft light behind the student (the photo itself is untouched) */
  .hero-student::before { content: ""; position: absolute; left: -10%; right: -20%; top: 10%; bottom: 0; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(214, 240, 122, 0.45), rgba(214, 240, 122, 0) 70%); opacity: .6; }
  .hero-student { isolation: isolate; }

  @keyframes h-orbit-turn { to { rotate: 360deg; } }
  @keyframes h-link-pulse { 0%, 62% { stroke-dashoffset: 100; opacity: 0; } 66% { opacity: 1; } 96% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes h-tile-float { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 6px); } }
  @keyframes hc-pulse { 0%, 55% { stroke-dashoffset: 100; opacity: 0; } 60% { opacity: .9; } 95% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes hw-flow { to { stroke-dashoffset: -200; } }
  @keyframes h-dots-drift { to { background-position: 24px 24px; } }
  @keyframes h-student-light { 0%, 100% { opacity: .45; scale: .97; } 50% { opacity: .75; scale: 1.03; } }
  .motion .h-orbits { transform-box: view-box; transform-origin: 320px 282px; animation: h-orbit-turn 160s linear infinite; }
  .motion .h-link-pulse { animation: h-link-pulse 7s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: calc(var(--k) * 1.15s); }
  .motion .h-tile { animation: h-tile-float 7s ease-in-out infinite; animation-delay: calc(var(--k) * -1.4s); }
  .motion .hc-pulses path { animation: hc-pulse 6s linear infinite; animation-delay: calc(var(--k) * -1.5s); }
  .motion .hw-line { animation: hw-flow 30s linear infinite; }
  .motion .hero-band::before { animation: h-dots-drift 40s linear infinite; }
  .motion .hero-student::before { animation: h-student-light 8s ease-in-out infinite; }
  .hero-art svg.is-paused .h-orbits, .hero-art svg.is-paused .h-link-pulse { animation-play-state: paused; }
  .hero-band.is-paused .h-tile, .hero-band.is-paused .hc-pulses path, .hero-band.is-paused .hw-line, .hero-band.is-paused::before, .hero-band.is-paused .hero-student::before { animation-play-state: paused; }
  @media (max-width: 1023px) { .h-circuit { display: none; } }
  @media (max-width: 640px) { .h-tiles { display: none; } }
  /* =========================================================
     Professional audience: AI core visits each audience
     ========================================================= */
  .pullquote.pa { text-align: left; padding-bottom: clamp(44px, 5.5vw, 72px); }
  .pullquote.pa::before { display: none; }
  .pa-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(8px, 2vw, 32px);
    border-radius: 28px; border: 1px solid rgba(214, 160, 100, 0.18);
    background: radial-gradient(70% 90% at 28% 45%, #1F3E31 0%, #19362B 55%, #142E25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.06), 0 40px 80px -50px rgba(0, 0, 0, 0.7); }
  .pa-panel::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 7%; height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, rgba(214, 160, 100, 0.35) 20%, rgba(214, 160, 100, 0.35) 80%, transparent); pointer-events: none; }
  .pa-stage { position: relative; z-index: 1; aspect-ratio: 960 / 693; }
  .pa-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .pa-obj { position: absolute; z-index: 2; background-image: var(--art); background-repeat: no-repeat; pointer-events: none; opacity: 0;
    -webkit-mask: radial-gradient(closest-side, #000 66%, transparent 100%); mask: radial-gradient(closest-side, #000 66%, transparent 100%);
    transition: transform 1s cubic-bezier(.22, 1, .36, 1), filter 1s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
  .pa-obj.is-on { opacity: 1; transform: translateY(-2.2%) scale(1.065); filter: brightness(1.18) contrast(1.06) saturate(1.12) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
  .pa-glow { position: absolute; z-index: 1; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
    background: radial-gradient(circle, rgba(255, 196, 120, 0.42), rgba(230, 140, 70, 0.14) 40%, rgba(230, 140, 70, 0) 70%); transition: opacity .9s ease, scale 1s cubic-bezier(.22, 1, .36, 1); scale: .8; }
  .pa-glow.is-on { opacity: 1; scale: 1; }
  /* current-profession label: small, gold-rimmed, fades with the focus */
  .pa-label { position: absolute; z-index: 4; translate: var(--t); white-space: nowrap; pointer-events: none;
    padding: .38em .8em .4em; border-radius: 999px; border: 1px solid rgba(222, 170, 110, 0.45);
    background: rgba(12, 32, 25, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 170, 0.08);
    font-family: var(--font-b); font-weight: 600; font-size: clamp(.625rem, .45rem + .45vw, .8125rem); letter-spacing: .06em; text-transform: uppercase; color: #F1D3AE;
    opacity: 0; transform: translateY(4px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
  .pa-label.is-on { opacity: 1; transform: none; }
  @media (min-width: 901px) and (max-width: 1180px) { .pa-label { font-size: .625rem; letter-spacing: .04em; padding: .34em .7em .36em; } }
  @media (min-width: 901px) and (max-width: 1000px) { .pa-label { font-size: .5625rem; } }
  @media (max-width: 640px) { .pa-label { left: 50% !important; top: 99% !important; translate: -50% -100%; font-size: .625rem; } }
  .pa-core { position: absolute; z-index: 1; left: 38.28%; top: 49.35%; width: 16%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255, 214, 160, 0.55), rgba(255, 170, 90, 0.18) 35%, rgba(255, 170, 90, 0) 68%); opacity: .55; }
  .pa-ripple { position: absolute; z-index: 1; left: 38.28%; top: 49.35%; width: 10%; aspect-ratio: 1.9; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255, 200, 140, 0.7); opacity: 0; pointer-events: none; }
  .pa-ripple.is-go { animation: pa-ripple 1.1s cubic-bezier(.22, 1, .36, 1); }
  .pa-svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .pa-route { fill: none; stroke: rgba(222, 170, 110, 0.16); stroke-width: 1; stroke-dasharray: 2 4; transition: stroke .8s ease, stroke-width .8s ease; }
  .pa-route.is-lit { stroke: rgba(255, 205, 140, 0.75); stroke-width: 1.4; stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(255, 180, 100, 0.9)); }
  /* inner movement while an audience is selected: soft light keeps flowing from the core to the figure */
  .pa-flow { fill: none; stroke: #FFE6C2; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 9 41; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 175, 95, 0.95)); transition: opacity .6s ease; }
  .pa-route.is-lit + .pa-flow { opacity: .9; }
  @keyframes pa-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -50; } }
  .motion .pa-flow { animation: pa-flow 1.5s linear infinite; }
  .pa.is-paused .pa-flow { animation-play-state: paused; }
  .pa-trail { fill: none; stroke: #FFE2B8; stroke-width: 1.8; stroke-linecap: round; transition: opacity .35s ease; }
  .pa-trail--glow { stroke: rgba(255, 170, 90, 0.85); stroke-width: 5; filter: url(#pa-blur); }
  .pa-dot { fill: #FFF3DC; opacity: 0; transition: opacity .3s ease; }
  .pa-dot-halo { fill: rgba(255, 190, 110, 0.45); filter: url(#pa-blur); opacity: 0; transition: opacity .3s ease; }
  .pa-net { position: absolute; right: 6%; top: -6%; width: 46%; height: auto; opacity: .55; pointer-events: none; }
  .pa-net-l line { stroke: rgba(214, 160, 100, 0.22); stroke-width: .5; }
  .pa-net-n circle { fill: #E3A86B; opacity: .6; }
  @keyframes pa-ripple { from { opacity: .9; scale: .6; } to { opacity: 0; scale: 2.4; } }
  @keyframes pa-core { 0%, 100% { opacity: .45; scale: .94; } 50% { opacity: .85; scale: 1.06; } }
  @keyframes pa-node { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
  .motion .pa-core { animation: pa-core 3.2s ease-in-out infinite; }
  .motion .pa-net-n circle { animation: pa-node 4s ease-in-out infinite; animation-delay: calc(var(--k) * -.37s); }
  .pa.is-paused .pa-core, .pa.is-paused .pa-net-n circle { animation-play-state: paused; }
  @media (max-width: 900px) {
    .pa-panel { grid-template-columns: 1fr; }
    .pa-net { display: none; }
    .pa-panel::after { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .pa-obj, .pa-glow, .pa-route, .pa-label { transition: none !important; } }

  /* Audience tabs. The signal's arrival selects the tab; a click selects the figure. */
  .pa-side { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0;
    padding: clamp(28px, 3.2vw, 52px) clamp(24px, 3.4vw, 56px) clamp(56px, 6vw, 84px) 0; }   /* clears the gold floor line */
  @media (max-width: 900px) { .pa-side { padding: 4px clamp(20px, 5vw, 40px) clamp(30px, 6vw, 44px); } }
  .pa-side .pa-net { display: none; }   /* the quote's network motif would sit behind the tabs/list */
  .pa-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: clamp(22px, 2.4vw, 32px); border-bottom: 1px solid rgba(214, 160, 100, 0.2); }
  .pa-tab { position: relative; margin: 0; padding: 10px 8px 14px 2px; border: 0; border-radius: 8px 8px 0 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--font-b); font-weight: 600; font-size: clamp(.75rem, .62rem + .3vw, .9375rem); line-height: 1.3; letter-spacing: .01em; color: rgba(241, 211, 174, 0.52);
    -webkit-tap-highlight-color: transparent; transition: color .45s var(--ease); }
  .pa-tab:hover { color: rgba(241, 211, 174, 0.85); }
  .pa-tab.is-on { color: #FFF1DC; }
  .pa-tab:focus-visible { outline: 2px solid #F1D3AE; outline-offset: 2px; }
  .pa-tab-bar { position: absolute; left: 2px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: rgba(222, 170, 110, 0.3); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
  .pa-tab.is-on .pa-tab-bar { transform: none; }
  .pa-tab-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #D9A673, #FFD9A8); box-shadow: 0 0 8px rgba(255, 190, 120, 0.45); transform-origin: left; }
  .pa-deck.is-timing .pa-tab.is-on .pa-tab-bar::after { animation: pa-progress var(--hold, 7s) linear both; }
  @keyframes pa-progress { from { transform: scaleX(0); } to { transform: none; } }
  /* the signal carries on from the figure, out of the artwork and along the tab row to the active tab */
  .pa-link { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .pa-tab.is-hit .pa-tab-bar { animation: pa-hit .9s var(--ease-out); }
  @keyframes pa-hit { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 130, 0); } 30% { box-shadow: 0 0 14px 2px rgba(255, 196, 130, 0.65); } 100% { box-shadow: 0 0 0 0 rgba(255, 196, 130, 0); } }
  .pa-deck-panels { display: grid; }
  .js .pa-tabpanel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .22s var(--ease), visibility 0s linear .22s; }
  .js .pa-tabpanel.is-on { visibility: visible; opacity: 1; transition-delay: 0s; }
  html:not(.js) .pa-tabs, html:not(.js) .pa-panel::after { display: none; }
  html:not(.js) .pa-tabpanel + .pa-tabpanel { margin-top: 32px; }
  .pa-tabpanel:focus-visible { outline: 2px solid #F1D3AE; outline-offset: 6px; border-radius: 6px; }
  .pa-tp-title { margin: 0; font-family: var(--font-d); font-weight: 700; font-size: clamp(1.375rem, .95rem + 1.1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: #EBCBA4; }
  .pa-tp-title::after { content: ""; display: block; width: 46px; height: 2px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, #E3A86B, rgba(227, 168, 107, 0)); transform-origin: left; }
  .pa-points { list-style: none; margin: clamp(18px, 2vw, 24px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.5vw, 20px); }
  .pa-points li { position: relative; padding-left: 22px; font-size: clamp(.9375rem, .86rem + .2vw, 1.0625rem); line-height: 1.6; color: rgba(243, 236, 227, 0.8); }
  .pa-points li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #E3A86B; background: rgba(227, 168, 107, 0.22); box-sizing: border-box; }
  .pa-points strong { display: block; font-weight: 700; color: #F1D3AE; }
  .motion .pa-tabpanel .pa-tp-title, .motion .pa-tabpanel li { opacity: 0; translate: 0 8px; transition: opacity .5s var(--ease), translate .6s var(--ease-out); }
  .motion .pa-tabpanel .pa-tp-title::after { transform: scaleX(0); transition: transform .8s var(--ease-out); }
  .motion .pa-tabpanel.is-on .pa-tp-title, .motion .pa-tabpanel.is-on li { opacity: 1; translate: none; }
  .motion .pa-tabpanel.is-on .pa-tp-title { transition-delay: .06s; }
  .motion .pa-tabpanel.is-on .pa-tp-title::after { transform: none; transition-delay: .2s; }
  .motion .pa-tabpanel.is-on li:nth-child(1) { transition-delay: .16s; }
  .motion .pa-tabpanel.is-on li:nth-child(2) { transition-delay: .25s; }
  .motion .pa-tabpanel.is-on li:nth-child(3) { transition-delay: .34s; }
  @media (max-width: 420px) { .pa-tab { padding-inline: 1px 4px; font-size: .71875rem; letter-spacing: 0; } .pa-tab-bar { left: 1px; right: 4px; } }
  @media (prefers-reduced-motion: reduce) { .js .pa-tabpanel, .pa-tab, .pa-tab-bar, .pa-trail, .pa-dot, .pa-dot-halo { transition: none !important; } }
  /* =========================================================
     Closing scene: a working robotics lab.
     The panorama is split into a clean plate plus cut-out parts (arm links, heads, a forearm, hands),
     each turning about its real joint. Lights and screens are overlays on the original light sources.
     ========================================================= */
  .lab { position: absolute; inset: 0; container-type: size; }
  .lab-stage { position: absolute; left: 50%; top: 50%; width: max(100cqw, 299.85cqh); aspect-ratio: 2000 / 667; translate: -50% -50%; }
  .lab-plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .lab-p { position: absolute; display: block; }
  .lab-p > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .lab-arm, .lab-fore { position: absolute; inset: 0; display: block; }
  .lab-glow { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .4;
    background: radial-gradient(circle, rgba(190, 255, 225, 0.95), rgba(90, 235, 165, 0.42) 24%, rgba(80, 230, 160, 0.12) 46%, rgba(80, 230, 160, 0) 68%); }
  .lab-city { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: .25; background: radial-gradient(50% 50% at 50% 60%, rgba(140, 255, 205, 0.55), rgba(140, 255, 205, 0) 70%); }
  .lab-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: screen; }
  .lab-bars rect { fill: #9CFFD6; opacity: .6; transform-box: fill-box; transform-origin: 50% 100%; }
  .lab-dots circle { fill: #C8FFE6; opacity: 0; }
  .lab-radar { transform-box: view-box; transform-origin: 1740px 323px; }
  .lab-scan, .lab-cityscan, .lab-sheen { opacity: 0; }

  /* arm (18s): reach down to the hologram, pause, two small adjustments as if handling a part, lift, pause, return */
  @keyframes lab-arm-up { 0%, 8% { rotate: 0deg; } 24%, 46% { rotate: 2.8deg; } 60%, 68% { rotate: -2.4deg; } 84%, 100% { rotate: 0deg; } }
  @keyframes lab-arm-fore { 0%, 10% { rotate: 0deg; } 27% { rotate: 7.6deg; } 32% { rotate: 7.6deg; } 35% { rotate: 6.4deg; } 38% { rotate: 7.4deg; } 41% { rotate: 6.6deg; } 46% { rotate: 7.2deg; }
    61%, 68% { rotate: -4deg; } 86%, 100% { rotate: 0deg; } }
  @keyframes lab-city { 0%, 24% { opacity: .22; } 30%, 46% { opacity: .85; } 54%, 100% { opacity: .22; } }
  @keyframes lab-cityscan { 0%, 27% { opacity: 0; transform: translateY(0); } 30% { opacity: .75; } 46% { opacity: .7; transform: translateY(-70px); } 48%, 100% { opacity: 0; transform: translateY(-70px); } }
  /* presenter (12s): open the hand out, two explaining beats, hold, back to rest */
  @keyframes lab-gest { 0%, 14% { rotate: 0deg; } 26% { rotate: -9deg; } 33% { rotate: -6.2deg; } 40% { rotate: -9.4deg; } 47% { rotate: -6.8deg; } 54% { rotate: -8.6deg; } 70%, 100% { rotate: 0deg; } }
  /* heads: turn, hold long enough to read as looking, turn back, rest */
  @keyframes lab-look { 0%, 20% { rotate: 0deg; } 32%, 60% { rotate: var(--a); } 74%, 100% { rotate: 0deg; } }
  @keyframes lab-nod { 0%, 26% { rotate: 0deg; } 34% { rotate: var(--a); } 41% { rotate: calc(var(--a) * .2); } 48% { rotate: var(--a); } 60%, 100% { rotate: 0deg; } }
  /* typing: whole forearm lifts and drops from the elbow in short bursts, then rests to read */
  @keyframes lab-type-d { 0%, 100% { rotate: 0deg; } 3% { rotate: -1.6deg; } 6% { rotate: 0deg; } 10% { rotate: -1.3deg; } 13% { rotate: 0deg; } 17% { rotate: -1.7deg; } 20% { rotate: 0deg; }
    24% { rotate: -1.2deg; } 27%, 54% { rotate: 0deg; } 58% { rotate: -1.6deg; } 61% { rotate: 0deg; } 65% { rotate: -1.4deg; } 68% { rotate: 0deg; } 72% { rotate: -1.7deg; } 75% { rotate: 0deg; } }
  @keyframes lab-type-o { 0%, 100% { rotate: 0deg; } 6% { rotate: 1.5deg; } 11% { rotate: 0deg; } 17% { rotate: 1.2deg; } 22% { rotate: 0deg; } 28% { rotate: 1.6deg; } 33%, 100% { rotate: 0deg; } }
  @keyframes lab-tap { 0%, 100% { translate: 0 0; } 4% { translate: 0 10%; } 8% { translate: 0 0; } 14% { translate: 0 9%; } 18% { translate: 0 0; } 26% { translate: 0 10%; } 30%, 56% { translate: 0 0; } 60% { translate: 0 9%; } 64% { translate: 0 0; } }
  /* collaboration (13s): the robot at the holo table reaches in and adjusts the display; its partner looks across */
  @keyframes lab-reach { 0%, 18% { rotate: 0deg; } 32% { rotate: 4.6deg; } 38% { rotate: 3.4deg; } 44% { rotate: 4.8deg; } 56%, 64% { rotate: 3.8deg; } 78%, 100% { rotate: 0deg; } }
  @keyframes lab-pulse { 0%, 100% { opacity: .32; scale: .9; } 16% { opacity: .85; scale: 1.08; } 25% { opacity: .5; scale: .96; } 47% { opacity: 1; scale: 1.14; } 66% { opacity: .4; scale: .92; } 83% { opacity: .7; scale: 1.02; } }
  @keyframes lab-scan { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 62% { opacity: 1; transform: translateY(120px); } 66%, 100% { opacity: 0; transform: translateY(120px); } }
  @keyframes lab-bar { 0%, 100% { transform: scaleY(.25); } 30% { transform: scaleY(1); } 55% { transform: scaleY(.45); } 80% { transform: scaleY(.85); } }
  @keyframes lab-radar { to { transform: rotate(360deg); } }
  @keyframes lab-blink { 0%, 100% { opacity: 0; } 10%, 24% { opacity: 1; } 36% { opacity: 0; } }
  @keyframes lab-hl { 0%, 100% { opacity: 0; } 12%, 30% { opacity: .3; } 42% { opacity: 0; } }
  @keyframes lab-sheen { 0%, 40% { opacity: 0; transform: translateX(0); } 46% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; transform: translateX(330px); } }
  .lab-hl { fill: #9CFFD6; opacity: 0; }

  .motion .lab-arm { animation: lab-arm-up 18s cubic-bezier(.45, 0, .3, 1) infinite; }
  .motion .lab-fore { animation: lab-arm-fore 18s cubic-bezier(.45, 0, .3, 1) infinite; }
  .motion .lab-city { animation: lab-city 18s ease-in-out infinite; }
  .motion .lab-cityscan { animation: lab-cityscan 18s ease-in-out infinite; }
  .motion .lab-gest { animation: lab-gest 12s cubic-bezier(.45, 0, .3, 1) -1s infinite; }
  .motion .lab-head { animation: lab-look var(--d, 12s) cubic-bezier(.45, 0, .3, 1) var(--dl, 0s) infinite; }
  .lab-head--p { --a: -3deg; --d: 12s; --dl: -7.5s; }            /* presenter glances while not gesturing */
  .lab-head--d { --a: 3.8deg; --d: 11s; --dl: -1.5s; }           /* desk robot leans toward the monitors */
  .lab-head--r { --a: -3.2deg; --d: 14s; --dl: -9s; }
  .lab-head--l1 { --a: 3.4deg; --d: 13s; --dl: -1.2s; }          /* watches its partner's reach */
  .lab-head--l2 { --a: -3deg; --d: 13s; --dl: -7.5s; }
  .motion .lab-head--f, .motion .lab-head--b { animation-name: lab-nod; animation-duration: 15s; }
  .lab-head--f { --a: 4deg; --dl: -4s; }
  .lab-head--b { --a: 3deg; --dl: -2.9s; }                        /* answers the nod a beat later */
  .motion .lab-type--d { animation: lab-type-d 4.2s linear infinite; }
  .motion .lab-type--o { animation: lab-type-o 6.4s linear -3s infinite; }
  .motion .lab-hand--l { animation: lab-tap 3.6s linear -1.4s infinite; }
  .motion .lab-reach { animation: lab-reach 13s cubic-bezier(.45, 0, .3, 1) infinite; }
  .motion .lab-glow { animation: lab-pulse calc(4.2s + var(--k) * .9s) ease-in-out calc(var(--k) * -1.7s) infinite; }
  .motion .lab-scan { animation: lab-scan 4s linear infinite; }
  .motion .lab-scan--b { animation-duration: 5.4s; animation-delay: -2.4s; }
  .motion .lab-bars rect { animation: lab-bar 2.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.37s); }
  .motion .lab-radar { animation: lab-radar 6s linear infinite; }
  .motion .lab-dots circle { animation: lab-blink 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -1.1s); }
  .motion .lab-hl { animation: lab-hl 5.2s ease-in-out infinite; animation-delay: calc(var(--k) * -1.3s); }
  .motion .lab-sheen { animation: lab-sheen 9s ease-in-out infinite; }
  .motion .lab-sheen--b { animation-delay: -4.5s; }
  .motion .lab-arm, .motion .lab-fore, .motion .lab-gest, .motion .lab-head, .motion .lab-hand, .motion .lab-type, .motion .lab-reach { will-change: rotate, translate; }
  .finale.is-paused .lab *, .finale.is-paused .lab-fx * { animation-play-state: paused !important; }
  @media (max-width: 640px) {
    .lab-stage { translate: -56% -50%; }
    .motion .lab-minor, .motion .lab-sheen, .motion .lab-dots circle { animation: none; }   /* phones: arm, presenter, desk robot, screens, lights */
  }
  /* =========================================================
     FAQ redesign
     ========================================================= */
  .faq-section { position: relative; isolation: isolate; }
  .faq-blob { position: absolute; z-index: -1; pointer-events: none; height: auto; max-width: none; }
  .faq-blob path:first-child { fill: rgba(169, 199, 160, 0.28); }
  .faq-blob--tr { right: calc(50% - 50vw); top: 0; width: clamp(160px, 18vw, 280px); }
  .fb-dots circle { fill: rgba(199, 98, 42, 0.35); }
  .fb-dots circle:nth-child(3n) { fill: rgba(110, 82, 201, 0.4); }
  .faq-blob--bl { left: calc(50% - 50vw); bottom: 0; width: clamp(260px, 32vw, 520px); }
  .fb-line { fill: none; stroke: rgba(199, 98, 42, 0.35); stroke-width: 1.2; }
  .fb-pt { fill: #7B5BE0; }
  .faq-head::after { display: none; }
  .faq-kicker { display: block; width: 84px; height: 10px; margin-bottom: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0c.4 3 2.6 5.6 6 6-3.4.4-5.6 3-6 6-.4-3-2.6-5.6-6-6 3.4-.4 5.6-3 6-6z' fill='%23C7622A'/%3E%3C/svg%3E") right center / 10px 10px no-repeat, linear-gradient(90deg, #6E52C9, #8A63F0) left center / 66px 2px no-repeat; }
  .faq-head h2 { font-size: clamp(2.25rem, 1.3rem + 2.9vw, 3.75rem); line-height: 1.02; letter-spacing: -0.04em; }
  .faq-head h2::after { width: 74px; height: 8px; margin-top: 24px; background: radial-gradient(circle, var(--ai-bright) 0 3px, transparent 3.5px) right center / 8px 8px no-repeat, linear-gradient(var(--accent), var(--accent)) left center / 62px 2px no-repeat; }
  .faq-art { max-width: 400px; margin-top: 30px; margin-left: -18px; filter: drop-shadow(0 16px 22px rgba(74, 38, 12, 0.1)); }
  .fa-circuit path { fill: none; stroke: rgba(20, 35, 28, 0.16); stroke-width: 1; }
  .fa-orbit { fill: none; stroke: rgba(199, 98, 42, 0.32); stroke-width: 1; }
  .fa-orbit--dash { stroke: rgba(110, 82, 201, 0.22); stroke-dasharray: 2 6; }
  .fa-bot, .fa-b1, .fa-b2, .fa-tag, .fa-spark { transform-box: fill-box; transform-origin: center; }
  /* panel */
  .faq-list { padding: 14px; border-radius: 26px; border: 1px solid rgba(214, 150, 100, 0.28);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(252, 246, 238, 0.92));
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(74, 38, 12, 0.03), 0 36px 70px -40px rgba(74, 38, 12, 0.35); }
  .faq-list::before { display: none; }
  .faq details { --row-pad: clamp(18px, 2vw, 26px); border-radius: 16px; background: #FFFDFA; border: 1px solid rgba(20, 35, 28, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 16px -12px rgba(74, 38, 12, 0.22);
    transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), translate .25s var(--ease-out); }
  .faq details + details { margin-top: 10px; background-image: none; }
  .faq details[open] { background: linear-gradient(180deg, #FFF8F1, #FFFDFA 60%); border-color: rgba(199, 98, 42, 0.28); box-shadow: inset 3px 0 0 var(--accent), 0 14px 30px -18px rgba(199, 98, 42, 0.35); }
  .faq summary { padding: clamp(18px, 1.7vw, 24px) 0; }
  .faq summary::after { width: 36px; height: 36px; margin-top: calc(.675em - 18px); border-color: rgba(199, 98, 42, 0.28); background-color: #FFFDFA; background-size: 13px 2px, 2px 13px; box-shadow: 0 4px 10px -6px rgba(199, 98, 42, 0.45); }
  .faq details[open] summary::after { background-size: 13px 2px, 2px 0px; background-color: #FCE7D6; border-color: rgba(199, 98, 42, 0.5); }
  .faq details p { padding: 14px 52px 24px 0; margin-top: 0; border-top: 1px dashed rgba(199, 98, 42, 0.22); color: var(--ink-2); line-height: 1.8; }
  @media (hover: hover) {
    .faq details:not([open]):has(> summary:hover) { background-color: #FFFAF4; border-color: rgba(199, 98, 42, 0.22); translate: 0 -1px; box-shadow: 0 10px 22px -14px rgba(199, 98, 42, 0.35); }
    .faq summary:hover::after { background-color: #FCE7D6; border-color: rgba(199, 98, 42, 0.5); box-shadow: 0 0 0 4px rgba(199, 98, 42, 0.08); }
  }
  .faq details:has(> summary:focus-visible) { border-color: rgba(110, 82, 201, 0.45); }
  /* entrance: heading, illustration parts, then rows in a short stagger */
  @keyframes fa-pop { from { opacity: 0; scale: .9; translate: 0 8px; } }
  .motion .faq-head.is-in .fa-b1 { animation: fa-pop .7s var(--ease-out) .25s both; }
  .motion .faq-head.is-in .fa-bot { animation: fa-pop .8s var(--ease-out) .4s both; }
  .motion .faq-head.is-in .fa-b2 { animation: fa-pop .7s var(--ease-out) .55s both; }
  .motion .faq-head.is-in .fa-tag, .motion .faq-head.is-in .fa-spark { animation: fa-pop .6s var(--ease-out) .7s both; }
  .motion .faq-head .fa-orbit { stroke-dasharray: 770; stroke-dashoffset: 770; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
  .motion .faq-head .fa-orbit--dash { stroke-dasharray: 2 6; stroke-dashoffset: 0; transition: none; }
  .motion .faq-head.is-in .fa-orbit:not(.fa-orbit--dash) { stroke-dashoffset: 0; }
  .motion .faq-list[data-reveal] details { opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease-out), translate .55s var(--ease-out), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); transition-delay: calc(.2s + var(--r) * 60ms), calc(.2s + var(--r) * 60ms), 0s, 0s, 0s; }
  .motion .faq-list.is-in details { opacity: 1; translate: none; }
  @media (hover: hover) { .motion .faq-list.is-in details:not([open]):has(> summary:hover) { translate: 0 -1px; transition-delay: 0s; } }
  /* stacked layouts: keep the illustration, compact */
  @media (max-width: 960px) {
    .faq-art { display: block; max-width: 300px; margin: 18px 0 0 -10px; }
    .faq-blob--bl { width: 240px; }
  }
  @media (max-width: 640px) {
    .faq-list { padding: 8px; border-radius: 20px; }
    .faq details + details { margin-top: 8px; }
    .faq details p { padding-right: 0; }
    .faq-art { max-width: 250px; }
    .faq-blob--tr { width: 120px; }
  }
  @media print { .motion .faq-list details, .motion .faq-head [class^="fa-"] { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; } .motion .faq-head .fa-orbit { stroke-dashoffset: 0 !important; } }

  /* Header logo (supplied raster, white background removed) */
  .brand-logo { display: block; height: clamp(30px, 1.6rem + .5vw, 38px); width: auto; image-rendering: auto; }
  @media (max-width: 420px) { .brand-logo { height: 28px; } }

  /* =========================================================
     FAQ refinement: AI-orbit illustration + premium accordion
     ========================================================= */
  .faq-blob { display: none; }
  .faq-section::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
    background: radial-gradient(45% 60% at 82% 10%, rgba(247, 214, 178, 0.45), rgba(247, 214, 178, 0) 70%), radial-gradient(40% 55% at 12% 70%, rgba(220, 234, 214, 0.5), rgba(220, 234, 214, 0) 70%); }
  .faq-head h2 { font-size: clamp(2.5rem, 1.4rem + 3.3vw, 4.25rem); line-height: .98; letter-spacing: -0.045em; color: var(--forest); }
  .faq-head h2::after { width: min(300px, 78%); height: 14px; margin-top: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C70 3 160 2 297 7' fill='none' stroke='%23C7622A' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M20 12C100 8 190 8 280 10' fill='none' stroke='%23C7622A' stroke-width='1.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; }
  .faq-art.faq-orbit { max-width: 440px; margin: 24px 0 0 -24px; filter: drop-shadow(0 18px 24px rgba(22, 56, 46, 0.12)); }
  .fo-circuit path { fill: none; stroke: rgba(22, 56, 46, 0.28); stroke-width: 1.3; }
  .fo-circuit circle { fill: #FFFCF7; stroke: rgba(22, 56, 46, 0.45); stroke-width: 1.2; }
  .fo-signal { fill: none; stroke: #8A63F0; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 3px rgba(138, 99, 240, 0.8)); }
  .fo-base-ring { fill: none; stroke: rgba(22, 56, 46, 0.18); }
  .fo-net line { stroke: rgba(22, 56, 46, 0.5); stroke-width: 1.1; }
  .fo-net circle { fill: #16382E; }
  .fo-ring { transform-box: view-box; transform-origin: 200px 178px; }
  .fo-ring-body { fill: none; stroke: #1E4A3C; stroke-width: 7.5; }
  .fo-ring-hi { fill: none; stroke: #6FA58A; stroke-width: 2; opacity: .75; }
  .fo-ring--c .fo-ring-body { stroke: #2A5A47; }
  .fo-arrow { fill: none; stroke: rgba(22, 56, 46, 0.45); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .fo-pn-halo { opacity: .5; transform-box: fill-box; transform-origin: center; }
  /* accordion: cards sit directly on the page, warm and light */
  .faq-list { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .faq details { --row-pad: clamp(18px, 2vw, 26px); border-radius: 16px; background: #FFFCF7; border: 1px solid rgba(150, 110, 70, 0.16);
    box-shadow: 0 1px 2px rgba(74, 38, 12, 0.04), 0 10px 24px -20px rgba(74, 38, 12, 0.35); }
  .faq details + details { margin-top: 12px; }
  .faq summary { align-items: center; gap: 20px; padding: clamp(17px, 1.6vw, 21px) 0; font-family: var(--font-b); font-weight: 650; font-size: clamp(1rem, .94rem + .22vw, 1.125rem); line-height: 1.45; letter-spacing: -0.006em; color: var(--forest); text-wrap: pretty; }
  .faq summary::after { width: 32px; height: 32px; margin-top: 0; border: 1.5px solid rgba(199, 98, 42, 0.5); color: var(--accent); background-color: transparent; background-size: 12px 1.8px, 1.8px 12px; box-shadow: none;
    transition: transform .45s var(--ease-out), background-size .45s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
  .faq details[open] summary::after { color: #FFF8F0; background-color: var(--accent); border-color: var(--accent); background-size: 12px 1.8px, 1.8px 0px; box-shadow: 0 6px 14px -6px rgba(199, 98, 42, 0.6); }
  .faq details[open] { background: linear-gradient(180deg, #FFF8F0 0%, #FFFCF7 70%); border-color: rgba(199, 98, 42, 0.32); box-shadow: inset 2px 0 0 var(--accent), 0 16px 32px -22px rgba(199, 98, 42, 0.4); }
  .faq details p { padding: 16px 48px 22px 0; border-top: 1px solid rgba(199, 98, 42, 0.14); font-size: 1rem; line-height: 1.78; color: var(--ink-2); }
  @media (hover: hover) {
    .faq details:not([open]):has(> summary:hover) { background-color: #FFFAF3; border-color: rgba(199, 98, 42, 0.28); translate: none; box-shadow: 0 1px 2px rgba(74, 38, 12, 0.04), 0 14px 28px -20px rgba(199, 98, 42, 0.4); }
    .faq summary:hover::after { background-color: rgba(199, 98, 42, 0.08); border-color: var(--accent); box-shadow: none; }
    .faq details[open] summary:hover::after { background-color: var(--action); }
  }
  .faq details:has(> summary:focus-visible) { border-color: rgba(110, 82, 201, 0.5); }
  .faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
  /* motion: rings sway slowly (two of three), nodes glow in turn, an occasional signal on the circuit */
  @keyframes fo-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: var(--sw); } }
  @keyframes fo-glow-pn { 0%, 70%, 100% { opacity: .35; scale: .8; } 82% { opacity: 1; scale: 1.25; } }
  @keyframes fo-run { 0%, 70% { stroke-dashoffset: 100; opacity: 0; } 74% { opacity: 1; } 96% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .motion .fo-ring--a { --sw: 5deg; animation: fo-sway 16s ease-in-out infinite; }
  .motion .fo-ring--b { --sw: -4deg; animation: fo-sway 21s ease-in-out -6s infinite; }
  .motion .fo-pn-halo { animation: fo-glow-pn 8s ease-in-out infinite; animation-delay: calc(var(--k) * 2s); }
  .motion .fo-signal { animation: fo-run 9s linear infinite; }
  .motion .fo-signal--b { animation-delay: -4.5s; }
  .faq-section.is-paused .fo-ring, .faq-section.is-paused .fo-pn-halo, .faq-section.is-paused .fo-signal { animation-play-state: paused; }
  @keyframes fo-in { from { opacity: 0; scale: .94; } }
  .motion .faq-head.is-in .fo-card { animation: fo-in .9s var(--ease-out) .3s both; transform-box: fill-box; transform-origin: center; }
  .motion .faq-head.is-in .fo-ring { animation-name: fo-sway, fo-in; animation-duration: 16s, 1.1s; animation-timing-function: ease-in-out, var(--ease-out); animation-iteration-count: infinite, 1; animation-delay: 0s, calc(.15s + var(--k) * .12s); animation-fill-mode: none, both; }
  .motion .faq-head.is-in .fo-ring--b { animation-duration: 21s, 1.1s; animation-delay: -6s, calc(.15s + var(--k) * .12s); }
  .motion .faq-head.is-in .fo-ring--c { animation: fo-in 1.1s var(--ease-out) .39s both; }
  @media (max-width: 960px) { .faq-art.faq-orbit { max-width: 320px; margin: 16px 0 0 -12px; } }
  @media (max-width: 640px) { .faq-art.faq-orbit { max-width: 260px; } .faq details p { padding-right: 0; } .faq summary { gap: 14px; } }

  /* =========================================================
     FAQ green interaction layer
     ========================================================= */
  .faq { --fq-green: #1E5A44; --fq-sage: rgba(46, 120, 88, 0.36); --fq-t: .32s; }
  .faq details { position: relative; overflow: hidden;
    transition: background-color var(--fq-t) var(--ease-out), border-color var(--fq-t) var(--ease-out), box-shadow var(--fq-t) var(--ease-out), translate .26s var(--ease-out); }
  /* entrance moved to transform so the hover lift (translate) is never delayed by the stagger */
  @keyframes fq-row-in { from { opacity: 0; transform: translateY(10px); } }
  .motion .faq-list[data-reveal] details { opacity: 1; translate: none; transition: background-color var(--fq-t) var(--ease-out), border-color var(--fq-t) var(--ease-out), box-shadow var(--fq-t) var(--ease-out), translate .26s var(--ease-out); }
  .motion .faq-list[data-reveal]:not(.is-in) details { opacity: 0; }
  .motion .faq-list.is-in details { animation: fq-row-in .5s var(--ease-out) calc(.15s + var(--r, 0) * 60ms) both; }
  /* hover: 1.5px lift, sage border, soft depth */
  @media (hover: hover) {
    .faq details:not([open]):has(> summary:hover), .motion .faq-list.is-in details:not([open]):has(> summary:hover) {
      translate: 0 -1.5px; background-color: #FFFCF7; border-color: var(--fq-sage);
      box-shadow: 0 1px 2px rgba(22, 56, 46, 0.05), 0 12px 24px -18px rgba(22, 56, 46, 0.4); }
    .faq summary:hover::after { background-color: rgba(46, 120, 88, 0.07); border-color: var(--accent); }
    .faq details[open] summary:hover::after { background-color: var(--action); }
  }
  /* open (secondary) and active (most recently opened) states */
  .faq details[open] { background: #FBFCF8; border-color: rgba(46, 120, 88, 0.26); box-shadow: inset 2px 0 0 rgba(30, 90, 68, 0.45), 0 10px 24px -20px rgba(22, 56, 46, 0.3); }
  .faq details[open].is-active { background: linear-gradient(180deg, #F2F7EF 0%, #FAFCF7 72%); border-color: rgba(30, 90, 68, 0.42);
    box-shadow: inset 3px 0 0 var(--fq-green), 0 16px 32px -22px rgba(22, 56, 46, 0.4); }
  .faq details[open] summary::after { box-shadow: 0 0 0 3px rgba(46, 120, 88, 0.14), 0 6px 14px -6px rgba(199, 98, 42, 0.5); }
  .faq details[open] p { border-top-color: rgba(30, 90, 68, 0.16); }
  .faq summary::after { transition: transform .38s var(--ease-out), background-size .38s var(--ease-out), background-color var(--fq-t) var(--ease), border-color var(--fq-t) var(--ease), color var(--fq-t) var(--ease), box-shadow var(--fq-t) var(--ease); }
  /* one brief green glint along the top edge when a question becomes active */
  .faq details::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; z-index: 1; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(60, 170, 120, 0.85), transparent) -40% 0 / 40% 100% no-repeat; }
  @keyframes fq-glint { 0% { opacity: 1; background-position: -40% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 140% 0; } }
  .motion .faq details.is-active[open]::before { animation: fq-glint .75s var(--ease-out) .05s 1 both; }
  .faq details:has(> summary:focus-visible) { border-color: rgba(110, 82, 201, 0.5); }

  /* =========================================================
     FAQ hover pattern (faint circuit network)
     ========================================================= */
  .faq details::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='88' viewBox='0 0 132 88'%3E%3Cg fill='none' stroke='%232E7858' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='.55'%3E%3Cpath d='M0 20H28l10 10H66'/%3E%3Cpath d='M66 30l12-12H104'/%3E%3Cpath d='M104 18H132'/%3E%3Cpath d='M0 62H18l8-8H52l14 14H92'/%3E%3Cpath d='M92 68l10-10H132'/%3E%3Cpath d='M38 30V54'/%3E%3Cpath d='M78 18V4'/%3E%3Cpath d='M66 30V68' stroke-dasharray='1.5 3.5'/%3E%3Cpath d='M114 58V84'/%3E%3C/g%3E%3Cg fill='%23FFFCF7' stroke='%232E7858' stroke-width='1' stroke-opacity='.6'%3E%3Ccircle cx='66' cy='30' r='2.6'/%3E%3Ccircle cx='104' cy='18' r='2.2'/%3E%3Ccircle cx='38' cy='54' r='2'/%3E%3Ccircle cx='78' cy='4' r='2'/%3E%3Ccircle cx='92' cy='68' r='2.6'/%3E%3Ccircle cx='114' cy='84' r='2'/%3E%3Ccircle cx='18' cy='62' r='2'/%3E%3C/g%3E%3Cg fill='%232E7858' fill-opacity='.35'%3E%3Ccircle cx='10' cy='40' r='.9'/%3E%3Ccircle cx='52' cy='8' r='.9'/%3E%3Ccircle cx='122' cy='40' r='.9'/%3E%3Ccircle cx='84' cy='46' r='.9'/%3E%3C/g%3E%3C/svg%3E") right -6px center / 132px 88px repeat;
    -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 38%, rgba(0, 0, 0, 0.75) 72%, #000 100%);
            mask: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 38%, rgba(0, 0, 0, 0.75) 72%, #000 100%);
    transition: opacity .55s var(--ease); }
  .faq details > summary, .faq details > p { position: relative; z-index: 1; }
  @media (hover: hover) {
    .faq details:has(> summary:hover)::after { opacity: .32; transition-duration: .42s; }
    .faq details[open]:has(> summary:hover)::after { opacity: .2; }
  }
  .faq details:has(> summary:focus-visible)::after { opacity: .32; transition-duration: .42s; }
  .faq details[open]::after { opacity: .12; }
  .faq details[open].is-active::after { opacity: .14; }
  @media (forced-colors: active) { .faq details::after { display: none; } }

  /* Offer ticket, larger, with the offer dates on the certificate paper */
  .ticket-main { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
  .ticket-main h2 { font-size: clamp(2.125rem, 1.15rem + 2.6vw, 3.375rem); max-width: 18ch; margin-bottom: 18px; }
  .ticket-main p { font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); max-width: 46ch; }
  .tk-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: clamp(22px, 2.4vw, 30px) 0 0; padding: 0; list-style: none; }
  .tk-facts li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px; border-radius: 10px;
    background: rgba(255, 252, 245, 0.85); border: 1px solid rgba(181, 140, 72, 0.4); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(74, 38, 12, 0.35);
    font-size: clamp(.875rem, .82rem + .2vw, .9688rem); line-height: 1.35; color: var(--ink-2); text-align: left; }
  .tk-facts b { font-weight: 700; color: var(--ink); }
  .tk-facts svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
  .ticket-stub { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
  .ticket-stub .price-new { font-size: clamp(3.75rem, 2.3rem + 4vw, 6rem); }
  @media (max-width: 420px) { .tk-facts li { width: 100%; justify-content: center; } }
  /* stat labels: accent tick removed (a new treatment is coming) */
  .stat-lbl::before { content: none; }
  .stat-lbl { gap: 0; }

  /* =========================================================
     Lab boost — larger, clearer working cycles (~1.6-1.8x), livelier screens, floor/bench light pulses
     (same keyframe names, redefined here, so the last definition wins)
     ========================================================= */
  /* arm (18s): descend to the table, pause, three small handling adjustments, lift and swing back, return */
  @keyframes lab-arm-up { 0%, 8% { rotate: 0deg; } 24%, 46% { rotate: 4.8deg; } 60%, 68% { rotate: -4deg; } 84%, 100% { rotate: 0deg; } }
  @keyframes lab-arm-fore { 0%, 10% { rotate: 0deg; } 27% { rotate: 12.5deg; } 31% { rotate: 12.5deg; } 34% { rotate: 10.6deg; } 37% { rotate: 12.2deg; } 40% { rotate: 10.8deg; } 43% { rotate: 12deg; } 46% { rotate: 11.4deg; }
    61%, 68% { rotate: -6.6deg; } 86%, 100% { rotate: 0deg; } }
  /* presenter: clearer open-hand gesture toward the tablet with explaining beats */
  @keyframes lab-gest { 0%, 12% { rotate: 0deg; } 24% { rotate: -15deg; } 31% { rotate: -10.5deg; } 38% { rotate: -15.5deg; } 45% { rotate: -11deg; } 52% { rotate: -14.5deg; } 68%, 100% { rotate: 0deg; } }
  @keyframes lab-type-d { 0%, 100% { rotate: 0deg; } 3% { rotate: -2.8deg; } 6% { rotate: 0deg; } 10% { rotate: -2.3deg; } 13% { rotate: 0deg; } 17% { rotate: -2.9deg; } 20% { rotate: 0deg; }
    24% { rotate: -2.1deg; } 27%, 54% { rotate: 0deg; } 58% { rotate: -2.7deg; } 61% { rotate: 0deg; } 65% { rotate: -2.4deg; } 68% { rotate: 0deg; } 72% { rotate: -2.9deg; } 75% { rotate: 0deg; } }
  @keyframes lab-type-o { 0%, 100% { rotate: 0deg; } 6% { rotate: 2.6deg; } 11% { rotate: 0deg; } 17% { rotate: 2.1deg; } 22% { rotate: 0deg; } 28% { rotate: 2.7deg; } 33%, 100% { rotate: 0deg; } }
  @keyframes lab-tap { 0%, 100% { translate: 0 0; } 4% { translate: 0 16%; } 8% { translate: 0 0; } 14% { translate: 0 15%; } 18% { translate: 0 0; } 26% { translate: 0 16%; } 30%, 56% { translate: 0 0; } 60% { translate: 0 15%; } 64% { translate: 0 0; } }
  @keyframes lab-reach { 0%, 18% { rotate: 0deg; } 32% { rotate: 7.8deg; } 38% { rotate: 5.6deg; } 44% { rotate: 8deg; } 56%, 64% { rotate: 6.4deg; } 78%, 100% { rotate: 0deg; } }
  .lab-head--p { --a: -5.2deg; } .lab-head--d { --a: 6.4deg; } .lab-head--r { --a: -5.6deg; }
  .lab-head--l1 { --a: 5.8deg; } .lab-head--l2 { --a: -5.2deg; } .lab-head--f { --a: 6.6deg; } .lab-head--b { --a: 5.2deg; }
  /* lights: brighter, crisper pulses on eyes and chest cores */
  @keyframes lab-pulse { 0%, 100% { opacity: .45; scale: .9; } 16% { opacity: 1; scale: 1.12; } 25% { opacity: .62; scale: .96; } 47% { opacity: 1; scale: 1.2; } 66% { opacity: .5; scale: .92; } 83% { opacity: .85; scale: 1.04; } }
  .lab-glow--chest { filter: saturate(1.2) brightness(1.15); }
  /* screens: stronger scan, more highlights, live sparkline */
  @keyframes lab-hl { 0%, 100% { opacity: 0; } 12%, 30% { opacity: .55; } 42% { opacity: 0; } }
  .lab-spark { fill: none; stroke: #C8FFE6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .9; }
  @keyframes lab-spark { 0% { stroke-dashoffset: 100; opacity: 0; } 6% { opacity: .9; } 55%, 82% { stroke-dashoffset: 0; opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .lab-cursor { fill: #DFFFF0; opacity: 0; }
  @keyframes lab-cursor { 0%, 49%, 100% { opacity: 0; } 50%, 99% { opacity: .9; } }
  /* floor circuits and bench connections: occasional travelling pulses */
  .lab-floor path { fill: none; stroke: #9CFFD6; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px rgba(120, 255, 200, 0.9)); }
  @keyframes lab-floor { 0%, 58% { stroke-dashoffset: 100; opacity: 0; } 62% { opacity: 1; } 94% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .motion .lab-spark { animation: lab-spark 6.5s ease-in-out infinite; }
  .motion .lab-spark--b { animation-delay: -3.2s; }
  .motion .lab-cursor { animation: lab-cursor 1.1s steps(1) infinite; }
  .motion .lab-floor path { animation: lab-floor 7s linear infinite; animation-delay: calc(var(--k) * -1.75s); }
  @media (max-width: 640px) { .motion .lab-floor path:nth-child(n+3) { animation: none; } }

  /* Offer chips: staggered entrance, ticking clock, pulsing batch day, occasional gold sheen */
  .tk-facts li { position: relative; overflow: hidden; transition: translate .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); }
  .tk-facts li::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 200, 0.75) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat; }
  .tk-facts li > * { position: relative; z-index: 1; }
  @media (hover: hover) { .tk-facts li:hover { translate: 0 -2px; border-color: rgba(199, 98, 42, 0.5); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -12px rgba(199, 98, 42, 0.45); } }
  .tk-hand-m, .tk-hand-h { transform-box: view-box; transform-origin: 12px 12px; }
  .tk-cal-dot { transform-box: fill-box; transform-origin: center; }
  @keyframes tk-fact-in { from { opacity: 0; transform: translateY(10px); } }
  @keyframes tk-tick { 0%, 100% { rotate: 0deg; } 8.33% { rotate: 30deg; } 16.66% { rotate: 60deg; } 25% { rotate: 90deg; } 33.33% { rotate: 120deg; } 41.66% { rotate: 150deg; } 50% { rotate: 180deg; } 58.33% { rotate: 210deg; } 66.66% { rotate: 240deg; } 75% { rotate: 270deg; } 83.33% { rotate: 300deg; } 91.66% { rotate: 330deg; } 99.99% { rotate: 360deg; } }
  @keyframes tk-hour { to { rotate: 360deg; } }
  @keyframes tk-dot { 0%, 100% { opacity: .55; scale: .8; } 50% { opacity: 1; scale: 1.25; } }
  @keyframes tk-chip-sheen { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
  .motion .ticket .tk-facts li { opacity: 0; }
  .motion .ticket.is-in .tk-facts li { opacity: 1; animation: tk-fact-in .6s var(--ease-out) calc(.7s + var(--i, 0) * .15s) both; }
  .motion .tk-hand-m { animation: tk-tick 12s steps(1, end) infinite; }
  .motion .tk-hand-h { animation: tk-hour 144s linear infinite; }
  .motion .tk-cal-dot { animation: tk-dot 2.4s ease-in-out infinite; }
  .motion .tk-facts li::after { animation: tk-chip-sheen 7s var(--ease) 2s infinite; }
  .motion .tk-facts li:nth-child(2)::after { animation-delay: 2.6s; }
  .offer.is-paused .tk-hand-m, .offer.is-paused .tk-hand-h, .offer.is-paused .tk-cal-dot, .offer.is-paused .tk-facts li::after { animation-play-state: paused; }
  @media print { .motion .ticket .tk-facts li { opacity: 1 !important; animation: none !important; } }

  /* Stage marker: a four-dot journey track replaces the underline; dots up to this stage are filled */
  .jr-num::after { content: none; }
  .jr-steps { display: flex; align-items: center; gap: 6px; margin-top: 11px; }
  .jr-steps i { position: relative; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tone) 45%, transparent); background: transparent; transition: background-color .4s var(--ease), border-color .4s var(--ease), scale .4s var(--ease-out); }
  .jr-steps i + i::before { content: ""; position: absolute; right: calc(100% + 1.5px); top: 50%; width: 3px; height: 1.5px; margin-top: -.75px; background: color-mix(in srgb, var(--tone) 35%, transparent); }
  .jr-steps[style*="--s:1"] i:nth-child(-n+1), .jr-steps[style*="--s:2"] i:nth-child(-n+2), .jr-steps[style*="--s:3"] i:nth-child(-n+3), .jr-steps[style*="--s:4"] i:nth-child(-n+4) { background: var(--tone); border-color: var(--tone); }
  .jr-steps[style*="--s:1"] i:nth-child(1), .jr-steps[style*="--s:2"] i:nth-child(2), .jr-steps[style*="--s:3"] i:nth-child(3), .jr-steps[style*="--s:4"] i:nth-child(4) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent); }
  @keyframes jr-dot-in { from { background-color: transparent; border-color: color-mix(in srgb, var(--tone) 45%, transparent); scale: .6; } }
  .motion .jr-card.is-in .jr-steps i { animation: jr-dot-in .45s var(--ease-out) both; animation-delay: calc(.35s + var(--i, 0) * .1s); }
  .motion .jr-card.is-in .jr-steps i:nth-child(2) { animation-delay: calc(.5s + var(--i, 0) * .1s); }
  .motion .jr-card.is-in .jr-steps i:nth-child(3) { animation-delay: calc(.65s + var(--i, 0) * .1s); }
  .motion .jr-card.is-in .jr-steps i:nth-child(4) { animation-delay: calc(.8s + var(--i, 0) * .1s); }

  /* Audience section heading */
  .pa-title { position: relative; margin: 0 auto clamp(28px, 3.4vw, 48px); max-width: 30ch; text-align: center; font-size: clamp(1.875rem, 1.1rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--on-dark); text-wrap: balance; }
  @media (min-width: 1024px) { .pa-title { max-width: none; font-size: clamp(2.25rem, 1rem + 2.1vw, 3rem); white-space: nowrap; } }
  .pa-title::after { content: ""; display: block; width: 56px; height: 2px; margin: 18px auto 0; border-radius: 2px; background: linear-gradient(90deg, rgba(232, 135, 90, 0), var(--accent-on-dark), rgba(232, 135, 90, 0)); }
  .motion .pullquote.pa .pa-title { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
  .motion .pullquote.pa.is-in .pa-title { opacity: 1; transform: none; }
  @media print { .motion .pullquote.pa .pa-title { opacity: 1 !important; transform: none !important; } }

  /* Audience heading motion: words rise in sequence, underline draws from the centre, an occasional gold shimmer */
  .pa-w { display: inline-block; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .pa-title .pa-w { background: linear-gradient(105deg, var(--on-dark) 0%, var(--on-dark) 42%, #F6D3A8 50%, var(--on-dark) 58%, var(--on-dark) 100%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  @keyframes pa-word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } }
  @keyframes pa-line-in { from { transform: scaleX(0); opacity: 0; } }
  @keyframes pa-shimmer { 0%, 72% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  .motion .pullquote.pa .pa-title { opacity: 1; transform: none; }
  .motion .pullquote.pa:not(.is-in) .pa-w { opacity: 0; }
  .motion .pullquote.pa.is-in .pa-w { animation: pa-word-in .7s var(--ease-out) calc(.1s + var(--w) * 70ms) both, pa-shimmer 8s ease-in-out calc(1.6s + var(--w) * 60ms) infinite; }
  .motion .pullquote.pa:not(.is-in) .pa-title::after { transform: scaleX(0); }
  .motion .pullquote.pa.is-in .pa-title::after { animation: pa-line-in .8s var(--ease-out) .75s both; }
  .pa.is-paused .pa-w { animation-play-state: running, paused; }
  @media print { .motion .pullquote.pa .pa-w { opacity: 1 !important; animation: none !important; } }

  /* Hero accent: a three-node agent pipeline instead of the plain bar */
  .hero-accent.hero-nodes { width: 96px; height: 14px; border-radius: 0; background: none; }
  .hero-nodes svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .hn-link { fill: none; stroke: url(#hn-line); stroke-width: 2; stroke-linecap: round; opacity: .7; }
  .hn-node { transform-box: fill-box; transform-origin: center; stroke: #FAF5EE; stroke-width: 1.6; }
  .hn-pulse { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 3px rgba(138, 99, 240, 0.9)); }
  @keyframes hn-pop { from { scale: 0; opacity: 0; } }
  @keyframes hn-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }
  @keyframes hn-travel { 0%, 55% { stroke-dashoffset: 100; opacity: 0; } 58% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes hn-glow-0 { 0%, 52%, 64%, 100% { filter: none; scale: 1; } 57% { filter: drop-shadow(0 0 4px currentColor) brightness(1.25); scale: 1.2; } }
  @keyframes hn-glow-1 { 0%, 72%, 84%, 100% { filter: none; scale: 1; } 78% { filter: drop-shadow(0 0 4px currentColor) brightness(1.25); scale: 1.2; } }
  @keyframes hn-glow-2 { 0%, 90%, 100% { filter: none; scale: 1; } 98% { filter: drop-shadow(0 0 4px currentColor) brightness(1.25); scale: 1.2; } }
  .motion .hn-node { animation: hn-pop .45s var(--ease-out) calc(.2s + var(--n) * .18s) both, hn-glow-0 5s ease-in-out 1.6s infinite; }
  .motion .hn-node:nth-of-type(2) { animation-name: hn-pop, hn-glow-1; }
  .motion .hn-node:nth-of-type(3) { animation-name: hn-pop, hn-glow-2; }
  .motion .hn-link { animation: hn-draw .8s var(--ease-out) .3s both; }
  .motion .hn-pulse { animation: hn-travel 5s linear 1.6s infinite; }
  .hero-band.is-paused .hn-pulse, .hero-band.is-paused .hn-node { animation-play-state: paused; }
  .hn-node:nth-of-type(1) { color: #8A63F0; } .hn-node:nth-of-type(2) { color: #B3A2F0; } .hn-node:nth-of-type(3) { color: #E0742F; }

  /* "Years": three-node motif (terracotta to cream) instead of the plain bar, with a travelling pulse */
  .h27-word::before { content: none; }
  .h27-nodes { display: block; width: 1.15em; height: auto; margin-bottom: .3em; overflow: visible; }
  .h27n-link { fill: none; stroke: url(#h27n-line); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
  .h27n-node { transform-box: fill-box; transform-origin: center; }
  .h27n-pulse { fill: none; stroke: #FFF4E6; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 12 88; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 3px rgba(232, 135, 90, 0.95)); }
  @keyframes h27n-pop { from { scale: 0; opacity: 0; } }
  @keyframes h27n-draw { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }
  @keyframes h27n-travel { 0%, 60% { stroke-dashoffset: 100; opacity: 0; } 63% { opacity: 1; } 93% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes h27n-glow-0 { 0%, 58%, 68%, 100% { scale: 1; filter: none; } 62% { scale: 1.3; filter: drop-shadow(0 0 4px #E8875A); } }
  @keyframes h27n-glow-1 { 0%, 74%, 84%, 100% { scale: 1; filter: none; } 79% { scale: 1.3; filter: drop-shadow(0 0 4px #F0B48F); } }
  @keyframes h27n-glow-2 { 0%, 90%, 100% { scale: 1; filter: none; } 97% { scale: 1.3; filter: drop-shadow(0 0 4px #F3ECE3); } }
  .motion .credibility .h27n-node { opacity: 0; }
  .motion .credibility.is-in .h27n-node { opacity: 1; animation: h27n-pop .45s var(--ease-out) calc(.5s + var(--n) * .18s) both, h27n-glow-0 6s ease-in-out 2.6s infinite; }
  .motion .credibility.is-in .h27n-node:nth-of-type(2) { animation-name: h27n-pop, h27n-glow-1; }
  .motion .credibility.is-in .h27n-node:nth-of-type(3) { animation-name: h27n-pop, h27n-glow-2; }
  .motion .credibility.is-in .h27n-link { animation: h27n-draw .8s var(--ease-out) .6s both; }
  .motion .credibility.is-in .h27n-pulse { animation: h27n-travel 6s linear 2.6s infinite; }
  .story-band.is-paused .h27n-pulse, .story-band.is-paused .h27n-node { animation-play-state: paused; }
  @media print { .motion .credibility .h27n-node { opacity: 1 !important; animation: none !important; } }


  /* Product names in the company story: brighter, underlined, with an occasional gold glint */
  .cred-prod { position: relative; display: inline-block; font-weight: 700; color: #FBEBDA; white-space: nowrap; }
  .cred-prod::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-on-dark), #F6C9A0); transform-origin: left center; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cred-prod { background: linear-gradient(105deg, #FBEBDA 0%, #FBEBDA 40%, #FFD9A8 50%, #FBEBDA 60%, #FBEBDA 100%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  @keyframes cred-prod-line { from { transform: scaleX(0); } }
  @keyframes cred-prod-glint { 0%, 78% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  .motion .credibility:not(.is-in) .cred-prod::after { transform: scaleX(0); }
  .motion .credibility.is-in .cred-prod::after { animation: cred-prod-line .7s var(--ease-out) calc(1.1s + var(--p) * .25s) both; }
  .motion .credibility.is-in .cred-prod { animation: cred-prod-glint 7s ease-in-out calc(2.2s + var(--p) * .35s) infinite; }
  .story-band.is-paused .cred-prod { animation-play-state: paused; }

  /* 27th-anniversary callout: translucent green surface, circuit detail, emblem, occasional border light sweep */
  .cred-badge { isolation: isolate; align-items: center; gap: 18px; padding: 18px 24px 18px 18px; border-radius: 16px;
    border: 1px solid rgba(124, 240, 184, 0.22);
    background: radial-gradient(120% 140% at 0% 50%, rgba(46, 204, 133, 0.14), rgba(46, 204, 133, 0) 55%), linear-gradient(100deg, rgba(20, 70, 56, 0.55), rgba(12, 40, 32, 0.4) 60%, rgba(243, 236, 227, 0.03));
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgba(200, 255, 230, 0.06), 0 18px 40px -26px rgba(0, 0, 0, 0.7), 0 0 60px -30px rgba(46, 204, 160, 0.55); }
  .cred-badge::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .28;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'%3E%3Cg fill='none' stroke='%237CF0B8' stroke-width='1' stroke-opacity='.5'%3E%3Cpath d='M0 22H60l14 14H130l12-12H220'/%3E%3Cpath d='M40 70H96l10-10H160l14 14H220'/%3E%3Cpath d='M130 36V60'/%3E%3C/g%3E%3Cg fill='%237CF0B8' fill-opacity='.7'%3E%3Ccircle cx='130' cy='36' r='2.2'/%3E%3Ccircle cx='160' cy='60' r='2'/%3E%3Ccircle cx='60' cy='22' r='1.8'/%3E%3Ccircle cx='96' cy='70' r='1.8'/%3E%3C/g%3E%3C/svg%3E") right -10px center / 220px 90px no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent 35%, #000 85%); mask: linear-gradient(90deg, transparent 35%, #000 85%); }
  .cred-badge > div { font-size: 1.0313rem; line-height: 1.6; letter-spacing: .002em; color: var(--on-dark); max-width: 52ch; }
  .cb-emblem { position: relative; flex: none; width: 42px; height: 42px; }
  .cb-emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .cb-ring { fill: none; stroke: rgba(124, 240, 184, 0.18); stroke-width: 1; }
  .cb-ring-dash { fill: none; stroke: #7CF0B8; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 7; opacity: .75; transform-box: view-box; transform-origin: 20px 20px; }
  .cb-emblem text { font-family: var(--font-d); font-weight: 800; font-size: 12.5px; letter-spacing: -0.03em; fill: #EAFBF2; }
  .cb-ping { position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(124, 240, 184, 0.7); opacity: 0; pointer-events: none; }
  .cb-sweep { position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(100deg, transparent 0 40%, rgba(160, 255, 210, 0.9) 50%, transparent 60% 100%) 150% 0 / 250% 100% no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; }
  .pulse-dot { display: none; }
  @keyframes cb-turn { to { rotate: 360deg; } }
  @keyframes cb-ping { 0% { opacity: .8; scale: .8; } 70%, 100% { opacity: 0; scale: 1.7; } }
  @keyframes cb-sweep { 0%, 70% { opacity: 0; background-position: 150% 0; } 74% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; background-position: -50% 0; } }
  @keyframes cb-in { from { opacity: 0; transform: translateY(12px); } }
  @keyframes cb-text { from { opacity: 0; transform: translateY(6px); } }
  .motion .credibility:not(.is-in) .cred-badge { opacity: 0; }
  .motion .credibility.is-in .cred-badge { animation: cb-in .8s var(--ease-out) .55s both; }
  .motion .credibility.is-in .cred-badge > div { animation: cb-text .7s var(--ease-out) .85s both; }
  .motion .cb-ring-dash { animation: cb-turn 24s linear infinite; }
  .motion .cb-ping { animation: cb-ping 3.4s var(--ease-out) 1.6s infinite; }
  .motion .cb-sweep { animation: cb-sweep 9s ease-in-out 2.5s infinite; }
  .story-band.is-paused .cb-ring-dash, .story-band.is-paused .cb-ping, .story-band.is-paused .cb-sweep { animation-play-state: paused; }
  @media (max-width: 640px) { .cred-badge { gap: 14px; padding: 16px 16px 16px 14px; } .cb-emblem { width: 36px; height: 36px; } .cred-badge > div { font-size: .9688rem; } }
  @media print { .motion .credibility .cred-badge, .motion .credibility .cred-badge > div { opacity: 1 !important; animation: none !important; } }

  /* Offer chips: warm terracotta (Offer Ends) and soft sage (Next Batch) treatments */
  .tk-facts li { min-height: 42px; padding: 9px 16px 9px 12px; border-radius: 11px; gap: 10px; }
  .tk-facts svg { width: 18px; height: 18px; }
  .tk-facts li.tk-fact--clock { background: linear-gradient(135deg, rgba(253, 228, 208, 0.95), rgba(251, 240, 229, 0.9)); border-color: rgba(199, 98, 42, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px -10px rgba(199, 98, 42, 0.5); }
  .tk-facts li.tk-fact--clock svg { color: #C24F17; }
  .tk-facts li.tk-fact--cal { background: linear-gradient(135deg, rgba(222, 238, 226, 0.95), rgba(240, 247, 240, 0.9)); border-color: rgba(30, 90, 68, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px -10px rgba(22, 56, 46, 0.45); }
  .tk-facts li.tk-fact--cal svg { color: #1E5A44; }
  .tk-facts li.tk-fact--cal::after { background: linear-gradient(105deg, transparent 35%, rgba(220, 255, 235, 0.85) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat; }
  @media (hover: hover) {
    .tk-facts li.tk-fact--clock:hover { translate: 0 -2px; border-color: rgba(199, 98, 42, 0.6); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(199, 98, 42, 0.6), 0 0 0 3px rgba(199, 98, 42, 0.08); }
    .tk-facts li.tk-fact--cal:hover { translate: 0 -2px; border-color: rgba(30, 90, 68, 0.5); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(22, 56, 46, 0.55), 0 0 0 3px rgba(30, 90, 68, 0.08); }
  }

  /* Journey header: keep the original layout; on desktop centre the paragraph on the headline (not on the whole
     eyebrow + bar + headline block) and let the divider span exactly the headline. */
  @media (min-width: 1200px) {
    .jr-top { grid-template-columns: auto minmax(0, 1fr); }
    .jr-desc { justify-self: end; }
    .jr-desc { align-self: end; display: flex; align-items: center; min-height: calc(clamp(2.5rem, 1rem + 4.4vw, 5.9rem) * .98 * 2); }
    .jr-desc::before { top: 0; height: 100%; translate: none; }
  }

  /* Statistic accents: four small, distinct technical motifs replacing the repeated gradient line */
  .stat-mark.sm-progress, .stat-mark.sm-dots, .stat-mark.sm-circuit, .stat-mark.sm-seg { width: 48px; height: 12px; border-radius: 0; background: none; display: flex; align-items: center; transform: none; }
  .stat:hover .stat-mark { width: 48px; }
  /* 30 Hours: progress track with a travelling light */
  .sm-progress { position: relative; }
  .sm-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, rgba(22, 56, 46, 0.85), rgba(22, 56, 46, 0.25)); }
  .sm-progress i { position: absolute; top: 50%; left: 0; width: 14px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, transparent, #F0A070, transparent); box-shadow: 0 0 6px rgba(240, 140, 80, 0.7); opacity: 0; }
  /* 15 Sessions: five dots lighting in sequence */
  .sm-dots { gap: 5px; }
  .sm-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(199, 98, 42, 0.25); border: 1px solid rgba(199, 98, 42, 0.45); }
  /* 1 Capstone: circuit trace with a travelling signal */
  .sm-circuit svg { width: 48px; height: 12px; overflow: visible; }
  .smc-trace { fill: none; stroke: rgba(110, 82, 201, 0.4); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
  .smc-sig { fill: none; stroke: #7B55F0; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 84; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 2px rgba(123, 85, 240, 0.8)); }
  .sm-circuit circle { fill: #7B55F0; }
  /* 4 or 8 Weeks: segmented line with a gradient reveal (4 solid + 4 more as the "or 8") */
  .sm-seg { gap: 3px; }
  .sm-seg i { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1FA9BE, #2E7858); opacity: .9; }
  .sm-seg i:nth-child(n+5) { opacity: .35; }
  @keyframes sm-travel { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
  @keyframes sm-dot { 0%, 100% { background: rgba(199, 98, 42, 0.25); scale: 1; } 12% { background: #E0742F; scale: 1.25; } 30% { background: rgba(199, 98, 42, 0.5); scale: 1; } }
  @keyframes sm-sig { 0%, 30% { stroke-dashoffset: 100; opacity: 0; } 36% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes sm-seg { 0%, 100% { clip-path: inset(0 0 0 0); } 40% { clip-path: inset(0 100% 0 0); } 41% { clip-path: inset(0 100% 0 0); } 80% { clip-path: inset(0 0 0 0); } }
  .motion .stat-mark.sm-progress, .motion .stat-mark.sm-dots, .motion .stat-mark.sm-circuit, .motion .stat-mark.sm-seg { transform: none; }
  .motion .stat.is-in .stat-mark { animation: none; }
  .motion .stat.is-in .sm-progress i { animation: sm-travel 3.2s cubic-bezier(.45, 0, .25, 1) .4s infinite; }
  .motion .stat.is-in .sm-dots i { animation: sm-dot 2.6s ease-in-out infinite; animation-delay: calc(.6s + var(--d, 0) * .18s); }
  .sm-dots i:nth-child(2) { --d: 1; } .sm-dots i:nth-child(3) { --d: 2; } .sm-dots i:nth-child(4) { --d: 3; } .sm-dots i:nth-child(5) { --d: 4; }
  .motion .stat.is-in .smc-sig { animation: sm-sig 3.8s linear 1s infinite; }
  .motion .stat.is-in .sm-seg { animation: sm-seg 5s ease-in-out 1.4s infinite; }
  .hero-band.is-paused .stat-mark *, .hero-band.is-paused .stat-mark { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .sm-progress i { opacity: .8; left: 30%; } .smc-sig { opacity: 1; stroke-dashoffset: 60; } }

  /* Reward card motion: light runs down the accent edge, trophy floats with sparkles, highlights glint, gentle hover */
  .build-reward { isolation: isolate; overflow: hidden; transition: translate .35s var(--ease-out), border-color .35s var(--ease), box-shadow .35s var(--ease); }
  .build-reward::before { content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 38%; z-index: 1; pointer-events: none; border-radius: 3px;
    background: linear-gradient(180deg, transparent, #FFD9B8, transparent); opacity: 0; }
  .build-reward::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 90% at 0% 0%, rgba(232, 135, 90, 0.16), transparent 70%); opacity: .6; }
  .build-trophy { position: relative; }
  .build-trophy svg { transform-box: fill-box; transform-origin: 50% 90%; }
  .bt-spark { position: absolute; width: 8px; height: 8px; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, #FFE9C7 0 1.2px, transparent 1.6px), linear-gradient(#FFE9C7, #FFE9C7) center / 1px 100% no-repeat, linear-gradient(#FFE9C7, #FFE9C7) center / 100% 1px no-repeat; }
  .bt-spark--a { top: 6px; right: 7px; } .bt-spark--b { bottom: 12px; left: 6px; width: 6px; height: 6px; }
  .build-reward span { background: linear-gradient(105deg, var(--ai-on-dark) 0%, var(--ai-on-dark) 40%, #F2ECFF 50%, var(--ai-on-dark) 60%, var(--ai-on-dark) 100%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
  @media (hover: hover) { .build-reward:hover { translate: 0 -3px; border-color: rgba(232, 135, 90, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 56px -30px rgba(232, 135, 90, 0.45); } }
  @keyframes br-edge { 0%, 55% { top: -40%; opacity: 0; } 60% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  @keyframes br-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -3px; rotate: -4deg; } }
  @keyframes br-spark { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1; } }
  @keyframes br-glint { 0%, 75% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  @keyframes br-glow { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
  .motion .build-reward::before { animation: br-edge 5s ease-in-out 1.5s infinite; }
  .motion .build-reward::after { animation: br-glow 6s ease-in-out infinite; }
  .motion .build-trophy svg { animation: br-float 4s ease-in-out infinite; }
  .motion .bt-spark--a { animation: br-spark 2.8s ease-in-out .8s infinite; }
  .motion .bt-spark--b { animation: br-spark 2.8s ease-in-out 2.2s infinite; }
  .motion .build-reward span { animation: br-glint 6s ease-in-out 2s infinite; }
  .motion .build-reward span:nth-of-type(2) { animation-delay: 2.4s; } .motion .build-reward span:nth-of-type(3) { animation-delay: 2.8s; }
  .build-band.is-paused .build-reward::before, .build-band.is-paused .build-reward::after, .build-band.is-paused .build-trophy svg, .build-band.is-paused .bt-spark, .build-band.is-paused .build-reward span { animation-play-state: paused; }

  /* Anniversary callout, more noticeable: rotating emerald light ring on the border, larger glowing emblem,
     the key phrase highlighted in warm gold, a lit left edge */
  @property --cb-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  .cred-badge { border-color: rgba(124, 240, 184, 0.35); padding-block: 20px; padding-left: 20px;
    background: radial-gradient(120% 160% at 0% 50%, rgba(46, 204, 133, 0.26), rgba(46, 204, 133, 0) 55%), linear-gradient(100deg, rgba(24, 86, 66, 0.7), rgba(12, 44, 34, 0.5) 60%, rgba(243, 236, 227, 0.04));
    box-shadow: inset 0 1px 0 rgba(200, 255, 230, 0.1), 0 20px 44px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(124, 240, 184, 0.06), 0 0 70px -24px rgba(46, 204, 160, 0.7); }
  .cb-sweep { opacity: 1 !important; animation: none !important; padding: 1.5px;
    background: conic-gradient(from var(--cb-a), rgba(124, 240, 184, 0) 0deg, rgba(124, 240, 184, 0) 250deg, #9CFFD2 320deg, #F6C9A0 345deg, rgba(124, 240, 184, 0) 360deg); }
  .cred-badge > .cb-edge { position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #7CF0B8, #E8875A); box-shadow: 0 0 12px rgba(124, 240, 184, 0.6); }
  .cb-emblem { width: 50px; height: 50px; }
  .cb-emblem::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 240, 184, 0.35), rgba(124, 240, 184, 0) 68%); pointer-events: none; }
  .cb-emblem text { font-size: 13.5px; }
  .cb-hl { font-weight: 700; color: #FFD9B5; background: linear-gradient(105deg, #FFD9B5 0%, #FFD9B5 40%, #FFF3E2 50%, #FFD9B5 60%, #FFD9B5 100%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
  @keyframes cb-ring-turn { to { --cb-a: 360deg; } }
  @keyframes cb-halo { 0%, 100% { opacity: .55; scale: .92; } 50% { opacity: 1; scale: 1.1; } }
  @keyframes cb-hl-glint { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
  .motion .credibility.is-in .cb-sweep { animation: cb-ring-turn 6s linear infinite !important; }
  .motion .cb-emblem::before { animation: cb-halo 3s ease-in-out infinite; }
  .motion .credibility.is-in .cb-hl { animation: cb-hl-glint 6s ease-in-out 1.8s infinite; }
  .story-band.is-paused .cb-sweep, .story-band.is-paused .cb-emblem::before, .story-band.is-paused .cb-hl { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) { .cb-sweep { --cb-a: 210deg; } }
  @media (max-width: 640px) { .cb-emblem { width: 40px; height: 40px; } }

  /* Hero programs as two tiles: white course card, lavender internship card (from the approved mockup) */
  .hero-programs { gap: 12px; max-width: 620px; }
  .hero-programs .program { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 10px; align-items: start; justify-items: start;
    padding: 18px 22px 18px 18px; border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(16, 36, 27, 0.09);
    box-shadow: 0 1px 2px rgba(16, 36, 27, 0.04), 0 10px 24px -18px rgba(16, 36, 27, 0.3);
    transition: translate .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease); }
  .hero-programs .program--intern { background: linear-gradient(135deg, #F1ECFD, #F6F2FE); border-color: rgba(107, 75, 224, 0.2); }
  .prog-ico { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #F1EEE8; color: #10241B; border: 1px solid rgba(16, 36, 27, 0.06); }
  .prog-ico svg { width: 21px; height: 21px; }
  .program--intern .prog-ico { background: linear-gradient(145deg, #5A36E0, #4B2BD6); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px rgba(75, 43, 214, 0.6); }
  .hero-programs .prog-title { font-family: var(--font-d); font-weight: 700; font-size: clamp(1.0625rem, .9rem + .45vw, 1.25rem); line-height: 1.35; letter-spacing: -0.01em; color: #10241B; max-width: none; margin: 0; padding-top: 2px; }
  .hero-programs .prog-intern { color: #4B2BD6; }
  .hero-programs .prog-badge { grid-column: 2; box-shadow: none; font-size: .875rem; }
  .hero-programs .program:not(.program--intern) .prog-badge { background: #FCF1E8; border-color: rgba(200, 87, 30, 0.22); }
  .hero-programs .program:not(.program--intern) .prog-badge svg { color: #C8571E; }
  .hero-programs .program--intern .prog-badge { background: #FFFFFF; border-color: rgba(107, 75, 224, 0.3); }
  @media (hover: hover) {
    .hero-programs .program:hover { translate: 0 -2px; border-color: rgba(16, 36, 27, 0.16); box-shadow: 0 1px 2px rgba(16, 36, 27, 0.05), 0 16px 30px -18px rgba(16, 36, 27, 0.35); }
    .hero-programs .program--intern:hover { border-color: rgba(107, 75, 224, 0.4); box-shadow: 0 16px 30px -18px rgba(75, 43, 214, 0.4); }
  }
  @media (max-width: 420px) { .hero-programs .program { column-gap: 12px; padding: 14px 14px 14px 12px; } .prog-ico { width: 34px; height: 34px; } }
  .nowrap { white-space: nowrap; }
  .hero-programs .prog-title { text-wrap: balance; }

  /* Audience tabs as a premium segmented control: muted-gold frame, gold hairline separators,
     a sliding gold-tinted indicator that glides to the active tab, active label lifts into focus */
  .pa-tabs { --idx: 0; gap: 0; padding: 4px; border: 1px solid rgba(214, 160, 100, 0.28); border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 236, 210, 0.04), rgba(255, 236, 210, 0.015)); box-shadow: inset 0 1px 0 rgba(255, 230, 200, 0.05); }
  .pa-tab { z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 12px; border-radius: 10px; text-align: center;
    color: rgba(241, 211, 174, 0.55); transition: color .45s var(--ease), translate .45s var(--ease-out); }
  .pa-tab + .pa-tab::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, rgba(214, 160, 100, 0.45), transparent); transition: opacity .4s var(--ease); }
  .pa-tab.is-on::before, .pa-tab.is-on + .pa-tab::before { opacity: 0; }
  .pa-tab.is-on { color: #FFF4E2; translate: 0 -1px; }
  .pa-tab-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; pointer-events: none;
    translate: calc(var(--idx) * 100%) 0; transition: translate .6s cubic-bezier(.22, 1, .36, 1);
    background: radial-gradient(120% 140% at 50% 120%, rgba(255, 200, 140, 0.22), rgba(255, 200, 140, 0) 70%), linear-gradient(180deg, rgba(217, 166, 115, 0.2), rgba(217, 166, 115, 0.08));
    border: 1px solid rgba(255, 210, 160, 0.38); box-shadow: inset 0 1px 0 rgba(255, 235, 210, 0.18), 0 6px 18px -8px rgba(255, 180, 100, 0.45); }
  .pa-tab-ind::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 26px; height: 2px; margin-left: -13px; border-radius: 2px; background: linear-gradient(90deg, #D9A673, #FFE2B8, #D9A673); box-shadow: 0 0 8px rgba(255, 200, 140, 0.7); }
  html:not(.js) .pa-tab-ind, .pa-tabs:not(.is-ready) .pa-tab-ind { opacity: 0; }
  /* hold-progress and arrival glint move onto the indicator's frame */
  .pa-tab-bar { left: 18%; right: 18%; bottom: 3px; height: 1.5px; background: transparent; }
  .pa-tab-bar::after { opacity: .55; }
  .pa-tab:hover:not(.is-on) { color: rgba(241, 211, 174, 0.85); }
  .pa-tabs.is-ready .pa-tab.is-hit ~ .pa-tab-ind, .pa-tab-ind { animation: none; }
  @keyframes pa-ind-hit { 0% { box-shadow: inset 0 1px 0 rgba(255, 235, 210, 0.18), 0 0 0 0 rgba(255, 200, 140, 0); } 35% { box-shadow: inset 0 1px 0 rgba(255, 235, 210, 0.25), 0 0 22px 2px rgba(255, 200, 140, 0.45); } 100% { box-shadow: inset 0 1px 0 rgba(255, 235, 210, 0.18), 0 6px 18px -8px rgba(255, 180, 100, 0.45); } }
  .pa-tabs:has(.pa-tab.is-hit) .pa-tab-ind { animation: pa-ind-hit 1s var(--ease-out); }
  @media (max-width: 420px) { .pa-tab { min-height: 56px; padding: 8px 6px; } }
  @media (prefers-reduced-motion: reduce) { .pa-tab-ind { transition: none; } }

  /* Product names: animated gold "marker" wipes in behind each name, then an occasional soft sheen (no underline) */
  .cred-prod { padding: 0 .3em; margin: 0 .05em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: linear-gradient(105deg, rgba(255, 238, 215, 0) 35%, rgba(255, 238, 215, 0.55) 50%, rgba(255, 238, 215, 0) 65%) 160% 0 / 250% 100% no-repeat,
                linear-gradient(90deg, rgba(232, 135, 90, 0.34), rgba(246, 201, 160, 0.26)) 0 0 / 100% 100% no-repeat;
    -webkit-background-clip: border-box; background-clip: border-box; color: #FFF3E4; box-shadow: inset 0 0 0 1px rgba(246, 201, 160, 0.28); }
  .cred-prod::after { content: none; }
  @keyframes cred-prod-wipe { from { background-size: 250% 100%, 0% 100%; box-shadow: inset 0 0 0 1px rgba(246, 201, 160, 0); } }
  @keyframes cred-prod-sheen { 0%, 80% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
  .motion .credibility:not(.is-in) .cred-prod { background-size: 250% 100%, 0% 100%; }
  .motion .credibility.is-in .cred-prod { animation: cred-prod-wipe .8s var(--ease-out) calc(1.1s + var(--p) * .3s) both, cred-prod-sheen 6.5s ease-in-out calc(2.4s + var(--p) * .4s) infinite; }

  /* Audience tabs, premium finish: layered deep-green frame with champagne hairline, emerald-olive active plate,
     slim gold base indicator with a tiny signal that runs along it when the audience changes */
  .pa-tabs { --ch: 222, 196, 150; --ease-tab: cubic-bezier(.22, 1, .36, 1); padding: 5px; border-radius: 16px;
    border: 1px solid rgba(var(--ch), 0.22);
    background: linear-gradient(180deg, rgba(10, 36, 28, 0.72), rgba(8, 28, 22, 0.55)), radial-gradient(80% 140% at 50% 0%, rgba(var(--ch), 0.05), transparent 70%);
    box-shadow: inset 0 1px 0 rgba(var(--ch), 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 14px 34px -22px rgba(0, 0, 0, 0.8); }
  .pa-tab { min-height: 54px; padding: 10px 14px; border-radius: 11px; font-weight: 600; font-size: clamp(.75rem, .64rem + .28vw, .90625rem); letter-spacing: .015em;
    color: rgba(214, 226, 214, 0.62); text-wrap: balance; transition: color .5s var(--ease-tab), translate .5s var(--ease-tab), font-weight .5s var(--ease-tab); }
  .pa-tab:hover:not(.is-on) { color: rgba(236, 232, 218, 0.86); }
  .pa-tab.is-on { color: #FFF6E8; font-weight: 700; translate: none; }
  .pa-tab + .pa-tab::before { top: 30%; bottom: 30%; background: linear-gradient(180deg, transparent, rgba(var(--ch), 0.28), transparent); }
  .pa-tab-ind { top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 11px; transition: translate .55s var(--ease-tab);
    background: radial-gradient(90% 120% at 50% 115%, rgba(255, 214, 160, 0.16), rgba(255, 214, 160, 0) 70%), linear-gradient(160deg, rgba(36, 92, 70, 0.72), rgba(62, 78, 44, 0.55));
    border: 1px solid rgba(var(--ch), 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 240, 215, 0.14), inset 0 -10px 18px -14px rgba(255, 210, 150, 0.35), 0 8px 22px -12px rgba(0, 0, 0, 0.6), 0 0 26px -12px rgba(255, 200, 140, 0.45); }
  .pa-tab-ind::after { left: 22%; right: 22%; width: auto; margin-left: 0; bottom: 6px; height: 1.5px; background: linear-gradient(90deg, rgba(var(--ch), 0), #E9CFA2 30%, #F7E3BE 50%, #E9CFA2 70%, rgba(var(--ch), 0)); box-shadow: 0 0 6px rgba(240, 205, 150, 0.55); }
  .pa-tab-ind::before { content: ""; position: absolute; bottom: 4.5px; left: 22%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #FFF4DE; box-shadow: 0 0 8px 2px rgba(255, 215, 160, 0.8); opacity: 0; }
  @keyframes pa-ind-signal { 0% { left: 22%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 78%; opacity: 0; } }
  .motion .pa-tabs.is-moving .pa-tab-ind::before { animation: pa-ind-signal .9s var(--ease-tab) .35s both; }
  .pa-tab-bar { display: none; }
  @keyframes pa-label-in { from { opacity: .55; translate: 0 2px; } }
  .motion .pa-tab.is-on { animation: pa-label-in .5s var(--ease-tab) both; }
  .pa-tab:focus-visible { outline: 1.5px solid #EAD7B2; outline-offset: 1px; border-radius: 11px; }
  .pa-tabs:has(.pa-tab.is-hit) .pa-tab-ind { animation: none; }
  @media (max-width: 420px) { .pa-tab { min-height: 58px; padding: 8px 6px; font-size: .6875rem; letter-spacing: .005em; } .pa-tab-ind::after { left: 26%; right: 26%; } }
  @media (prefers-reduced-motion: reduce) { .pa-tab-ind { transition: none; } .pa-tab-ind::before { display: none; } }
  /* tab labels: fewer, cleaner line breaks */
  .pa-tab { text-wrap: wrap; padding-inline: 8px; }
  @media (min-width: 901px) { .pa-tab { font-size: clamp(.78rem, .6rem + .3vw, .875rem); letter-spacing: .005em; } }
  @media (max-width: 420px) { .pa-tab { padding-inline: 5px; } }

  /* Company section logo (light version for the dark band) */
  .cred-logo { filter: none; height: clamp(28px, 1.6rem + .6vw, 36px); width: auto; }
  /* Audience tabs: show the wait. A champagne track sits under the active label and fills while the tour holds,
     so visitors can see the next audience is coming. */
  .pa-tab-ind { background:
      linear-gradient(rgba(233, 207, 162, 0.22), rgba(233, 207, 162, 0.22)) 50% calc(100% - 6px) / 56% 1.5px no-repeat,
      radial-gradient(90% 120% at 50% 115%, rgba(255, 214, 160, 0.16), rgba(255, 214, 160, 0) 70%),
      linear-gradient(160deg, rgba(36, 92, 70, 0.72), rgba(62, 78, 44, 0.55)); }
  .pa-tab-ind::after { transform-origin: left center; background: linear-gradient(90deg, #D9B47F, #F7E3BE); }
  @keyframes pa-ind-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .motion .pa-deck.is-timing .pa-tab-ind::after { animation: pa-ind-fill var(--hold, 7s) linear both; }
  .motion .pa-deck:not(.is-timing) .pa-tab-ind::after { transform: scaleX(1); transition: transform .3s var(--ease-out); }
  @media (max-width: 420px) { .pa-tab-ind { background-size: 48% 1.5px, auto, auto; } }

  /* Hero fits the screen on desktop: sizes follow the window height as well as its width */
  @media (min-width: 1024px) {
    .hero { padding-top: clamp(14px, 3.2vh, 48px); padding-bottom: clamp(22px, 4vh, 64px); align-items: center; }
    .hero-accent { margin-bottom: clamp(12px, 2vh, 26px); }
    .hero-title { font-size: min(5.3vw, 8.6vh, 5.625rem); margin-bottom: clamp(14px, 2.8vh, 40px); }
    .hero-programs { gap: clamp(8px, 1.3vh, 12px); margin-bottom: clamp(16px, 2.8vh, 40px); }
    .hero-programs .program { padding-block: clamp(11px, 1.8vh, 18px); row-gap: clamp(6px, 1vh, 10px); }
    .hero-actions { gap: clamp(14px, 2.4vh, 32px); }
    .hero-actions .btn--lg { min-height: clamp(48px, 6.4vh, 60px); }
    .trust li { padding-block: clamp(8px, 1.2vh, 12px); }
    .hero-art { max-width: min(680px, 74vh); }
    .hero-student { width: min(clamp(230px, 20vw, 360px), 44vh); }
  }

  /* Edge-anchored hero art measured against the hero band (not 100vw), so a visible scrollbar never clips it */
  .hero-band { container-type: inline-size; container-name: heroband; }
  @container heroband (min-width: 0px) {
    .hero-student { right: calc(-1 * max(var(--gutter), (100cqw - 1650px) / 2)); }
    .deco--tr-b { right: calc(50% - 50cqw - 70px); } .deco--tr-a { right: calc(50% - 50cqw - 80px); }
    .deco--bl-b { left: calc(50% - 50cqw - 80px); } .deco--bl-a { left: calc(50% - 50cqw - 130px); }
  }

  /* Heading scale (v11.1): hero H1 is the anchor (76px at 1440); every section H2 is 0.95 of it (72px at 1440). Closing headline keeps its v11 size. */
  :root { --h-display: clamp(2.5rem, 7.8vw, 4.5rem); --h-ratio: 0.95; --h-lh: 1.02; --h-ls: -0.04em; --h-section: max(1.875rem, calc(var(--h-display) * var(--h-ratio))); }
  @media (min-width: 1024px) { :root { --h-display: min(5.3vw, 8.6vh, 5.625rem); } }
  @media (max-width: 420px) { :root { --h-display: clamp(2rem, 10.6vw, 2.875rem); } }
  .jr-intro h2, .certs-head h2, .build-copy h2, .pa-title, .faq-head h2 { font-size: var(--h-section); line-height: var(--h-lh); letter-spacing: var(--h-ls); }
  @media (min-width: 1024px) { .pa-title { max-width: none; white-space: nowrap; font-size: min(var(--h-section), 3.875rem); } }
  @media (min-width: 1200px) { .jr-desc { min-height: calc(var(--h-section) * var(--h-lh) * 2); } }

  /* =========================================================
     Anniversary section, light theme (v11_7): warm ivory ground in the FAQ's language — peach and sage
     ambient light, a faint forest dot grid, green line-art globe — rising out of the dark band on the
     site's wave edge. Logo keeps its original colours; stats stay on a deep emerald panel.
     ========================================================= */
  .credibility { color: var(--ink-2); border-top-color: transparent; }
  .credibility::after { content: none; }
  .cred-light { position: absolute; z-index: -1; top: -40px; bottom: calc(-1 * var(--section) - 90px); left: calc(50% - 50vw); width: 100vw; pointer-events: none; --wave: clamp(46px, 7vw, 104px);
    background:
      radial-gradient(42% 46% at 86% 34%, rgba(247, 214, 178, 0.42), rgba(247, 214, 178, 0) 70%),
      radial-gradient(38% 50% at 8% 62%, rgba(220, 234, 214, 0.55), rgba(220, 234, 214, 0) 70%),
      radial-gradient(30% 34% at 18% 16%, rgba(255, 252, 245, 0.85), rgba(255, 252, 245, 0) 70%),
      linear-gradient(180deg, #F8F2E8 0%, var(--bg) 55%, #F4EBDC calc(100% - 40px));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,27.35A600.21,600.21,0,0,0,321.39,56.44c58-10.79,114.16-30.13,172-41.86c82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0Z'/%3E%3C/svg%3E") 0 0 / 100% var(--wave) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wave) - 1px) / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,27.35A600.21,600.21,0,0,0,321.39,56.44c58-10.79,114.16-30.13,172-41.86c82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0Z'/%3E%3C/svg%3E") 0 0 / 100% var(--wave) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wave) - 1px) / 100% 100% no-repeat; }
  /* delicate forest dot grid, strongest around the globe, gone behind the copy */
  .cred-light::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(rgba(22, 56, 46, 0.16) 1px, transparent 1.5px) 0 0 / 24px 24px;
    -webkit-mask: radial-gradient(48% 56% at 74% 46%, #000, transparent 80%); mask: radial-gradient(48% 56% at 74% 46%, #000, transparent 80%); }
  /* a very soft green halo that slowly breathes behind the globe */
  .cred-light::after { content: ""; position: absolute; right: 2%; top: 14%; width: 56%; height: 78%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(46, 139, 99, 0.1), rgba(46, 139, 99, 0) 100%); }
  /* fine technical grid behind the stats, now in forest ink */
  .credibility::before { background: linear-gradient(rgba(22, 56, 46, 0.055) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(22, 56, 46, 0.055) 1px, transparent 1px) 0 0 / 56px 56px; }

  /* Globe as green line art: the raster is tone-inverted (black ground -> white, light lines -> dark, hue kept) and multiplied onto the cream */
  .cred-globe img { mix-blend-mode: multiply; filter: invert(1) hue-rotate(180deg) saturate(1.6) contrast(1.15); opacity: .68; }
  @keyframes cg-glow-light { 0%, 100% { opacity: .6; scale: 1; } 50% { opacity: .74; scale: 1.025; } }
  .motion .cred-globe img { animation-name: cg-glow-light; }
  .cg-mer ellipse { stroke: rgba(22, 86, 62, 0.42); stroke-width: 1.1; }
  .cg-mer .cg-lat { stroke: rgba(22, 86, 62, 0.26); }
  .cg-route { mix-blend-mode: normal; opacity: .9; stroke-width: 1.8; }
  .cg-route--a { stroke: #1F7A55; filter: drop-shadow(0 0 2px rgba(46, 160, 110, 0.55)); }
  .cg-route--c { display: inline; stroke: #C7622A; opacity: .75; }
  .cg-node { fill: #C7622A; opacity: .85; }
  .cg-ring { stroke: rgba(31, 122, 85, 0.45); }
  .ca-arc { stroke: rgba(22, 86, 62, 0.16); }
  .ca-arc:nth-child(even) { stroke: rgba(22, 86, 62, 0.2); }
  .ca-dot { fill: #2E8B63; }
  .ca-dot--t { fill: #C7622A; }
  @keyframes cg-node-glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
  @keyframes cred-halo { 0%, 100% { opacity: .75; scale: .98; } 50% { opacity: 1; scale: 1.03; } }
  .motion .cg-node { animation: cg-node-glow 5s ease-in-out infinite; }
  .motion .cred-light::after { animation: cred-halo 14s ease-in-out infinite; }
  .story-band.is-paused .cg-node, .story-band.is-paused .cred-light::after { animation-play-state: paused; }

  /* 27 lockup: deep forest numeral, terracotta "Years" and subtitle, terracotta orbit */
  .credibility .cred-title { color: var(--forest); }
  .credibility .highlight-27 { color: var(--forest); }
  .credibility .h27-num { color: var(--forest); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .credibility .h27-num .count {
      background: linear-gradient(105deg, rgba(255, 246, 232, 0) 40%, rgba(255, 246, 232, 0.55) 50%, rgba(255, 246, 232, 0) 60%) 0 0 / 250% 100% no-repeat,
                  linear-gradient(180deg, #1F5643 0%, #16382E 52%, #0E2620 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent; }
    .credibility .cred-title-sub { background: linear-gradient(90deg, #A84F1C 0%, #B9592A 55%, #A84F1C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  .credibility .h27-word { color: #A84F1C; }
  .credibility .cred-title-sub { color: #A84F1C; font-weight: 800; letter-spacing: -0.022em; padding-bottom: .06em; }
  .h27-ring ellipse:first-child { stroke: rgba(22, 56, 46, 0.18); }
  .h27-ring .ring-ticks { stroke: rgba(22, 56, 46, 0.3); }
  .h27-ring .ring-arc, .h27-ring circle { stroke: #C7622A; }
  .h27-ring circle { fill: #C7622A; }
  #h27n-line stop:first-child { stop-color: #C7622A; } #h27n-line stop:last-child { stop-color: #16382E; }
  .credibility .h27n-node:nth-of-type(1) { fill: #C7622A; }
  .credibility .h27n-node:nth-of-type(2) { fill: #D9935F; }
  .credibility .h27n-node:nth-of-type(3) { fill: #16382E; }
  .credibility .h27n-pulse { stroke: #FFE3C8; filter: drop-shadow(0 0 3px rgba(199, 98, 42, 0.9)); }
  .highlight-27::after { background: radial-gradient(circle, #C7622A 0 3px, rgba(199, 98, 42, 0.25) 3.5px 4.5px, transparent 5px) right center / 9px 9px no-repeat, linear-gradient(90deg, rgba(199, 98, 42, 0.7), rgba(22, 56, 46, 0.25)) left center / calc(100% - 6px) 1px no-repeat; }

  /* Copy: dark forest ink; terracotta only on the product highlights */
  .credibility .cred-lead { color: #2B3D34; }
  .credibility .cred-tag { color: var(--forest); }
  .credibility .cred-prod {
    background: linear-gradient(105deg, rgba(255, 250, 242, 0) 35%, rgba(255, 250, 242, 0.9) 50%, rgba(255, 250, 242, 0) 65%) 160% 0 / 250% 100% no-repeat,
                linear-gradient(90deg, rgba(199, 98, 42, 0.13), rgba(217, 147, 95, 0.18)) 0 0 / 100% 100% no-repeat;
    color: #8A3C12; box-shadow: inset 0 0 0 1px rgba(199, 98, 42, 0.32); }

  /* Anniversary callout: solid emerald plate so its light copy keeps full contrast on the cream */
  .credibility .cred-badge { -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(120% 160% at 0% 50%, rgba(46, 204, 133, 0.2), rgba(46, 204, 133, 0) 55%), linear-gradient(100deg, #1B5241 0%, #133B2F 62%, #10322A 100%);
    box-shadow: inset 0 1px 0 rgba(200, 255, 230, 0.1), 0 22px 40px -26px rgba(22, 56, 46, 0.6); }
  .cred-badge::after { background: radial-gradient(circle, rgba(199, 98, 42, 0.85) 0 2.5px, transparent 3px) right center / 9px 9px no-repeat, repeating-linear-gradient(90deg, rgba(199, 98, 42, 0.5) 0 4px, transparent 4px 8px) left center / calc(100% - 6px) 1px no-repeat; }

  /* Stats: deep emerald glass panel, same grid and size */
  .credibility .cred-stats-grid { border-color: rgba(22, 56, 46, 0.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    background: linear-gradient(160deg, rgba(243, 236, 227, 0.06), rgba(243, 236, 227, 0.015) 60%, rgba(46, 204, 133, 0.05)), rgba(16, 50, 39, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 34px 60px -34px rgba(22, 56, 46, 0.6); }
  .credibility .cred-stats-grid::before { background: linear-gradient(90deg, rgba(232, 135, 90, 0.9), rgba(232, 135, 90, 0.15) 55%, rgba(124, 240, 184, 0.3)); }

  /* =========================================================
     Webinar waves (experiment): a layered champagne-gold current with a few sage/forest strands, rising to the
     right behind the webinar card and feathering into the top of the offer. Pure SVG + CSS; slow, staggered motion.
     ========================================================= */
  .webinar-waves { position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; max-width: none; top: 0; bottom: calc(-1 * clamp(100px, 10vw, 150px)); height: auto; pointer-events: none; overflow: visible;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%, #000 72%, transparent 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000 30%);
    -webkit-mask-composite: source-in; mask: linear-gradient(180deg, transparent 0, #000 18%, #000 72%, transparent 100%) intersect, linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000 30%); }
  .wv-g { fill: none; stroke: rgba(176, 134, 66, var(--a)); stroke-width: var(--w); vector-effect: non-scaling-stroke; }
  .wv-e { fill: none; stroke: rgba(46, 110, 82, var(--a)); stroke-width: var(--w); vector-effect: non-scaling-stroke; }
  .wv-flow { fill: none; stroke: rgba(196, 150, 70, 0.4); stroke-width: 1.1; stroke-dasharray: 2 14; vector-effect: non-scaling-stroke; }
  .wv-flow--e { stroke: rgba(46, 110, 82, 0.4); stroke-dasharray: 2 18; }
  .wv-shim { fill: none; stroke: url(#wv-shim-g); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0 1000; opacity: 0; }
  .wv-dot { fill: #2E8B63; opacity: .45; }
  .webinar-card { box-shadow: 0 1px 2px rgba(20, 35, 28, 0.05), 0 22px 44px -30px rgba(74, 38, 12, 0.32); }

  @keyframes wv-breathe-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  @keyframes wv-breathe-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
  @keyframes wv-flow { to { stroke-dashoffset: -320; } }
  @keyframes wv-shim { 0% { stroke-dasharray: 0 1000; stroke-dashoffset: 0; opacity: 0; } 6% { opacity: .9; } 46% { opacity: .9; } 56%, 100% { stroke-dasharray: 140 1000; stroke-dashoffset: -1000; opacity: 0; } }
  @keyframes wv-em { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
  @keyframes wv-dot { 0%, 100% { opacity: .3; } 50% { opacity: .75; } }
  .motion .wv-set--gold { animation: wv-breathe-a 19s ease-in-out infinite; }
  .motion .wv-set--far { animation: wv-breathe-b 23s ease-in-out -6s infinite; }
  .motion .wv-set--green { animation: wv-breathe-b 17s ease-in-out -11s infinite; }
  .motion .wv-set--low { animation: wv-breathe-a 21s ease-in-out -4s infinite; }
  .motion .wv-flow { animation: wv-flow 40s linear infinite; }
  .motion .wv-flow--e { animation-duration: 52s; animation-direction: reverse; }
  .motion .wv-shim { animation: wv-shim 14s cubic-bezier(.45, 0, .3, 1) infinite; animation-delay: calc(2s + var(--t) * 6.5s); }
  .motion .wv-em-glow { animation: wv-em 11s ease-in-out infinite; }
  .motion .wv-dot { animation: wv-dot 7s ease-in-out infinite; animation-delay: calc(var(--t) * -3.4s); }
  .webinar.is-paused .wv-set, .webinar.is-paused .wv-flow, .webinar.is-paused .wv-shim, .webinar.is-paused .wv-em-glow, .webinar.is-paused .wv-dot { animation-play-state: paused; }
  @media print { .wv-shim { display: none; } }
  @media (max-width: 820px) {
    .webinar-waves { top: 30%; bottom: -190px; }
    .wv-g { stroke: rgba(176, 134, 66, calc(var(--a) * 1.35)); }
    .wv-e { stroke: rgba(46, 110, 82, calc(var(--a) * 1.35)); }
  }

  /* MIT University hero: Industry Partner credit above the diagram (right column; after the cards when stacked), diagram and student sizing */
  @media (min-width: 1024px) {
    .hero { grid-template-rows: auto 1fr; row-gap: clamp(8px, 1.4vh, 16px); }
    .hero-copy { grid-column: 1; grid-row: 1 / span 2; }
    .hero > .hero-partner { grid-column: 2; grid-row: 1; align-self: end; margin-left: clamp(20px, 3.4vw, 64px); }
    .hero-visual { grid-column: 2; grid-row: 2; }
    .hero-art { width: 72%; max-width: min(610px, 56vh); margin-left: clamp(20px, 3.4vw, 64px); }
    .hero-student { width: min(clamp(205px, 18vw, 320px), 40vh); }
  }

  /* MIT University hero: longer certificate title; "Academia–Industry…Course on" is its own line as supplied */
  .prog-title--collab { max-width: 34ch; }
  @media (min-width: 641px) { .prog-title--collab { max-width: none; } .prog-title--collab .prog-line { display: block; } }

  /* MIT University hero: "Organised by" line between the two programme cards */
  .hero-org { display: grid; gap: 2px; padding: 1px 0 1px 15px; margin-left: 22px; border-left: 2px solid; border-image: linear-gradient(180deg, #4B2BD6, #C8571E) 1; }
  .hero-org-label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B5FA0; }
  .hero-org-name { font-size: clamp(.78rem, .72rem + .15vw, .84rem); font-weight: 600; line-height: 1.4; color: #10241B; }
  @media (max-width: 420px) { .hero-org, .hero-partner { margin-left: 12px; } .hero-org-name br { display: none; } }

  /* MIT University hero headline: "Winter Internship" is frosted ice text (royal blue → cyan, soft glow) revealed by a light wipe, then a glint passes every few seconds; "Agentic AI" flows violet */
  .hero-title--winter .ht-line { display: block; }
  .hero-title--winter .ai { display: inline; }
  .hl-winter { display: inline-block; color: #1059C9; filter: drop-shadow(0 .06em .18em rgba(34, 168, 230, 0.35)); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hl-winter {
      background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat,
                  linear-gradient(90deg, #1B3FB8 0%, #1677E0 30%, #19B3E6 60%, #1677E0 85%, #1B3FB8 100%) 0 0 / 200% 100%;
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero-title--winter .hl-ai { background: linear-gradient(90deg, var(--h-purple) 0%, #6A47E6 25%, #A974F2 50%, #6A47E6 75%, var(--h-purple) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  @keyframes hl-reveal { from { clip-path: inset(-.2em 100% -.2em 0); translate: -.12em 0; } to { clip-path: inset(-.2em -.2em -.2em 0); translate: 0 0; } }
  @keyframes hl-ice { 0% { background-position: 160% 0, 0 0; } 30% { background-position: -60% 0, -60% 0; } 100% { background-position: -60% 0, -200% 0; } }
  @keyframes hl-flow { to { background-position: -200% 0; } }
  @keyframes hl-pop { from { opacity: 0; translate: 0 .35em; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
  .motion .hl-winter { animation: hl-reveal .9s var(--ease-out) .45s both, hl-ice 7s ease-in-out 1.3s infinite; }
  .motion .hero-title--winter .hl-ai { animation: hl-pop .7s var(--ease-out) .85s both, hl-flow 5s linear 1.5s infinite; }

  /* MIT University hero: "Industry Partner" as an open credit (no box): pulsing dot + label + gradient hairline that draws in, IPSR logo below */
  .hero-partner { display: grid; justify-items: start; gap: 8px; width: min(100% - 22px, 360px); margin-left: 22px; }
  .hero-partner-label { display: flex; align-items: center; gap: 9px; width: 100%; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: #6B5FA0; }
  .hero-partner-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #C8571E; box-shadow: 0 0 0 0 rgba(200, 87, 30, 0.45); }
  .hero-partner-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(75, 43, 214, 0.45), rgba(200, 87, 30, 0.35) 55%, transparent); transform-origin: left center; }
  .hero-partner-logo { position: relative; display: block; height: clamp(23px, 1.15rem + .3vw, 29px); aspect-ratio: 650 / 90; background: var(--logo) center / contain no-repeat; transition: translate .35s var(--ease-out), filter .35s var(--ease); }
  .hero-partner-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.95) 47%, rgba(255, 236, 200, 0.9) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat;
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
  @media (hover: hover) { .hero-partner:hover .hero-partner-logo { filter: drop-shadow(0 6px 12px rgba(16, 36, 27, 0.16)); } .motion .hero-partner:hover .hero-partner-logo::after { animation-duration: 1.4s; } }
  @keyframes hp-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hp-ping { 0% { box-shadow: 0 0 0 0 rgba(200, 87, 30, 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(200, 87, 30, 0); } }
  .motion .hero-partner-label::after { animation: hp-line 1s var(--ease-out) .9s both; }
  .motion .hero-partner-label::before { animation: hp-ping 2.4s ease-out 1.6s infinite; }
  @keyframes hp-reveal { from { clip-path: inset(-10% 100% -10% 0); filter: blur(4px); } to { clip-path: inset(-10% -2% -10% 0); filter: blur(0); } }
  @keyframes hp-sheen { 0%, 62% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
  @keyframes hp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
  .motion .hero-partner-logo { animation: hp-reveal 1.1s var(--ease-out) 1s both, hp-float 5s ease-in-out 2.4s infinite; }
  .motion .hero-partner-logo::after { animation: hp-sheen 4.2s ease-in-out 2s infinite; }
  @media (max-width: 420px) { .hero-partner-logo { height: 24px; } }

  /* MIT University hero: internship badge — "offered by a Public Limited Company" on its own line */
  .badge-by { color: #4B2BD6; }
  @media (min-width: 421px) { .badge-by { display: block; } }

  /* MIT University: academia–industry collaboration section (between the stats strip and the journey).
     Left: the collaboration statement, then a quieter note. Right: the campus photo on a soft glow, with a
     floating MIT-ADT × IPSR logo plaque. Reveal once; only the photo's slow zoom and the glow keep moving. */
  .collab-band { position: relative; background: #F4EFE6; padding-block: clamp(64px, 7vw, 120px); overflow: hidden; }
  .collab-band::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(1200px, 86%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(18, 61, 46, 0.16), transparent); }
  .collab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 104px); align-items: center; max-width: calc(1650px + 2 * var(--gutter)); }
  .collab-copy { max-width: 640px; }
  .collab-lead { font-size: clamp(1.0625rem, .92rem + .38vw, 1.25rem); line-height: 1.8; color: #5E6B64; text-wrap: pretty; }
  .collab-lead b { font-weight: 600; color: #10241B; }
  .collab-note { margin-top: clamp(20px, 2vw, 30px); padding-left: 18px; border-left: 2px solid #C8571E; font-size: clamp(1rem, .9rem + .25vw, 1.125rem); line-height: 1.7; color: #4A5A52; }
  .collab-note b { font-weight: 600; color: #10241B; }

  .collab-visual { position: relative; padding-bottom: clamp(30px, 3vw, 44px); }
  .collab-glow { position: absolute; z-index: 0; inset: 8% -6% 4% 10%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(242, 176, 138, 0.55), rgba(169, 199, 160, 0.35) 55%, transparent); filter: blur(30px); }
  .collab-photo { position: relative; z-index: 1; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; isolation: isolate;
    box-shadow: 0 1px 2px rgba(16, 36, 27, 0.06), 0 40px 80px -44px rgba(16, 36, 27, 0.6); }
  .collab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform-origin: 55% 60%; }
  .collab-plaque { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: max-content; max-width: calc(100% - 24px); margin-inline: auto; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); white-space: nowrap;
    padding: clamp(10px, 1vw, 14px) clamp(18px, 2vw, 28px); border-radius: 999px; background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 1px rgba(16, 36, 27, 0.05), 0 18px 40px -18px rgba(16, 36, 27, 0.45); }
  .collab-plaque img { display: block; flex: none; width: auto; height: clamp(34px, 2.8vw, 46px); }
  .collab-plaque img + .collab-link + img { height: clamp(20px, 1.7vw, 28px); }
  .collab-link { flex: none; width: clamp(30px, 2.4vw, 38px); height: auto; overflow: visible; fill: none; stroke-width: 2.6; stroke-linecap: round; }
  .collab-link .cl-a { stroke: #5B2C83; }
  .collab-link .cl-b { stroke: #2E9A47; }
  @media (max-width: 900px) { .collab { grid-template-columns: 1fr; } .collab-copy { max-width: none; } }
  @media (max-width: 420px) { .collab-plaque { gap: 10px; padding-inline: 14px; } .collab-plaque img { height: 30px; } .collab-plaque img + .collab-link + img { height: 18px; } }

  @keyframes cp-zoom { from { scale: 1; } to { scale: 1.07; } }
  @keyframes cp-glow { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
  .motion .collab-visual[data-reveal] { transform: none; }
  .motion .collab-photo { clip-path: inset(6% 5% 6% 5% round 24px); transition: clip-path 1.1s var(--ease-out) .15s; }
  .motion .collab-visual.is-in .collab-photo { clip-path: inset(0 0 0 0 round 24px); }
  .motion .collab-photo img { animation: cp-zoom 20s ease-in-out infinite alternate; }
  .motion .collab-glow { opacity: 0; transition: opacity 1.2s var(--ease-out) .4s; }
  .motion .collab-visual.is-in .collab-glow { opacity: 1; animation: cp-glow 9s ease-in-out 1.6s infinite; }
  .motion .collab-plaque { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease-out) .9s, translate .8s var(--ease-out) .9s; }
  .motion .collab-visual.is-in .collab-plaque { opacity: 1; translate: 0 0; }
  @keyframes cl-join-a { from { translate: -5px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  @keyframes cl-join-b { from { translate: 5px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  @keyframes cl-beat { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
  .collab-link { transform-origin: center; }
  .motion .collab-visual.is-in .collab-link .cl-a { animation: cl-join-a .7s var(--ease-out) 1.3s both; }
  .motion .collab-visual.is-in .collab-link .cl-b { animation: cl-join-b .7s var(--ease-out) 1.3s both; }
  .motion .collab-visual.is-in .collab-link { animation: cl-beat 3.2s ease-in-out 2.4s infinite; }
  .motion .collab-note { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease-out) .5s, translate .7s var(--ease-out) .5s; }
  .motion .collab-copy.is-in .collab-note { opacity: 1; translate: 0 0; }

  /* MIT University hero: programme card headings a step smaller */
  .hero-programs .prog-title { font-size: clamp(.98rem, .86rem + .34vw, 1.125rem); }

  /* MIT University header: white bar; the logo's wordmark is recoloured dark so it reads on white. */
  .site-header { background: rgba(255, 255, 255, 0.94); }
  .site-header.is-scrolled { background: rgba(255, 255, 255, 0.97); }
  .brand-logo { height: clamp(50px, 2.7rem + .9vw, 66px); width: auto; aspect-ratio: 717 / 248; object-fit: fill; } /* logo drawn ~12% wider than its native 640:248, at the user's request */
  @media (max-width: 420px) { .brand-logo { height: 44px; } }

  /* MIT University header headline: one line between the logo and Enroll Now on desktop; its own row below on smaller screens, folded away once the page scrolls */
  .site-header .header-title { --h-ink: #10241B; --h-purple: #4B2BD6; --h-violet: #8A63F0; color: var(--h-ink); flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font-size: clamp(1.25rem, .45rem + 1.25vw, 1.9rem); line-height: 1.15; letter-spacing: -0.03em; }
  .site-header .header-title .ht-line { display: inline; }
  @media (min-width: 1024px) { .site-header .wrap { height: 92px; } .site-header .header-title { white-space: nowrap; } }
  @media (max-width: 1023px) {
    .site-header .wrap { flex-wrap: wrap; height: auto; min-height: 76px; row-gap: 0; padding-block: 10px; }
    .site-header .header-title { order: 3; flex-basis: 100%; text-align: left; font-size: clamp(1.25rem, .8rem + 2.2vw, 1.75rem); padding: 6px 0 6px; transition: opacity .25s var(--ease); }
    .site-header.is-scrolled .header-title { display: none; }
  }