/* =====================================================================
       Design tokens
       ===================================================================== */
    :root {
      --cream:    #fef7e6;
      --cream-2:  #fbeacc;
      --paper:    #ffffff;
      --ink:      #0a1628;
      --ink-2:    #1e293b;
      --muted:    #4b5b6e;
      --hairline: #f1e0bf;

      --blue:     #2563eb;
      --blue-dk:  #1d4ed8;
      --blue-sk:  #93c5fd;
      --orange:   #f97316;
      --orange-dk:#ea580c;
      --yellow:   #fbbf24;
      --mint:     #10b981;
      --pink:     #f472b6;
      --plum:     #6d28d9;

      --shadow-sticker: 0 6px 0 0 #0a1628;
      --shadow-card:    0 12px 0 -2px #0a1628, 0 16px 28px -10px rgba(10,22,40,0.18);
      --shadow-soft:    0 18px 40px -12px rgba(10,22,40,0.18);

      --radius-sm: 12px;
      --radius:    18px;
      --radius-lg: 28px;
      --radius-xl: 40px;

      --max: 1200px;
    }

    /* =====================================================================
       Reset
       ===================================================================== */
    *,*::before,*::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: 'Manrope', system-ui, -apple-system, sans-serif;
      font-size: 17px;
      line-height: 1.6;
      color: var(--ink);
      background: var(--cream);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { max-width: 100%; height: auto; display: block; }
    button { font: inherit; cursor: pointer; }
    a { color: inherit; text-decoration: none; }

    /* Confetti dot background */
    body::before {
      content: "";
      position: fixed; inset: 0; z-index: 0;
      background-image:
        radial-gradient(circle at 12% 8%,  rgba(249,115,22,0.10) 0 6px, transparent 7px),
        radial-gradient(circle at 88% 14%, rgba(37,99,235,0.10) 0 5px, transparent 6px),
        radial-gradient(circle at 72% 80%, rgba(251,191,36,0.10) 0 7px, transparent 8px),
        radial-gradient(circle at 18% 86%, rgba(16,185,129,0.09) 0 5px, transparent 6px);
      pointer-events: none;
    }
    main, header, footer, section { position: relative; z-index: 1; }

    /* =====================================================================
       Typography
       ===================================================================== */
    .display, h1, h2, h3, h4 {
      font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.04;
      color: var(--ink);
      margin: 0;
    }
    h1 { font-size: clamp(2.4rem, 6.5vw, 5.4rem); font-weight: 800; letter-spacing: -0.03em; }
    h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
    h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); letter-spacing: -0.015em; }
    p  { margin: 0; }
    .eyebrow {
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--blue);
    }
    .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); line-height: 1.55; }

    /* Squiggle underline used to highlight key words */
    .squiggle {
      position: relative;
      display: inline-block;
      color: var(--orange-dk);
    }
    .squiggle::after {
      content: "";
      position: absolute;
      left: -2%; right: -2%; bottom: -0.18em;
      height: 0.45em;
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'><path d='M2 16 Q 25 0, 50 12 T 100 12 T 150 12 T 200 12' fill='none' stroke='%23f97316' stroke-width='5' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
      pointer-events: none;
    }
    .underline-blue::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'><path d='M2 16 Q 25 0, 50 12 T 100 12 T 150 12 T 200 12' fill='none' stroke='%232563eb' stroke-width='5' stroke-linecap='round'/></svg>"); }

    /* =====================================================================
       Layout helpers
       ===================================================================== */
    .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
    .grid { display: grid; gap: 24px; }
    .stack { display: flex; flex-direction: column; }
    .row { display: flex; align-items: center; }

    /* =====================================================================
       Buttons
       ===================================================================== */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 24px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.98rem;
      border: 2px solid var(--ink);
      transition: transform .15s ease, box-shadow .15s ease;
      box-shadow: 4px 4px 0 var(--ink);
      white-space: nowrap;
    }
    .btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
    .btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
    .btn-primary { background: var(--blue); color: white; }
    .btn-orange  { background: var(--orange); color: white; }
    .btn-ghost   { background: var(--paper); color: var(--ink); }
    .btn-arrow::after { content: "→"; font-weight: 800; transition: transform .15s ease; }
    .btn-arrow:hover::after { transform: translateX(3px); }

    /* =====================================================================
       Header / Nav
       ===================================================================== */
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(254, 247, 230, 0.85);
      backdrop-filter: saturate(150%) blur(10px);
      -webkit-backdrop-filter: saturate(150%) blur(10px);
      border-bottom: 1px solid var(--hairline);
    }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 0; gap: 20px;
    }
    .nav-logo { display: flex; align-items: center; gap: 6px; }
    .nav-logo img { height: 34px; }
    .nav-logo .icon { height: 38px; }
    .nav-links { display: none; align-items: center; gap: 28px; }
    .nav-link {
      color: var(--ink-2);
      font-weight: 600;
      font-size: 0.96rem;
      position: relative;
      transition: color .15s ease;
    }
    .nav-link:hover { color: var(--blue); }
    .nav-link::after {
      content: "";
      position: absolute; left: 0; right: 0; bottom: -6px;
      height: 3px; background: var(--orange);
      border-radius: 3px;
      transform: scaleX(0); transform-origin: center;
      transition: transform .2s ease;
    }
    .nav-link:hover::after { transform: scaleX(0.7); }

    .nav-dropdown { position: relative; }
    /* Invisible hover bridge — keeps :hover alive while the cursor traverses
       the gap between the button and the dropdown menu. */
    .nav-dropdown::after {
      content: "";
      position: absolute;
      top: 100%; left: -20px; right: -20px;
      height: 28px;
      pointer-events: auto;
    }
    .nav-dropdown-button {
      background: none; border: none; color: var(--ink-2);
      font-weight: 600; font-size: 0.96rem;
      display: inline-flex; align-items: center; gap: 4px;
      padding: 0; cursor: pointer;
      transition: color .15s ease;
    }
    .nav-dropdown-button:hover { color: var(--blue); }
    .nav-dropdown-menu {
      position: absolute; top: calc(100% + 16px); left: 50%;
      transform: translateX(-50%) translateY(-8px);
      width: 280px;
      background: var(--ink);
      border-radius: var(--radius);
      padding: 12px;
      opacity: 0; pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      box-shadow: 0 20px 40px -10px rgba(10,22,40,0.4);
    }
    .nav-dropdown:hover .nav-dropdown-menu {
      opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown-menu a {
      display: block; padding: 10px 14px;
      color: #cbd5e1;
      border-radius: 10px;
      font-size: 0.94rem;
      transition: background .15s, color .15s;
    }
    .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: white; }

    .nav-cta { display: none; }
    .menu-btn {
      background: var(--ink); color: white;
      border: none; padding: 10px 12px; border-radius: 12px;
      display: flex; align-items: center; gap: 6px;
    }
    @media (min-width: 980px) {
      .nav-links, .nav-cta { display: inline-flex; }
      .menu-btn { display: none; }
    }

    .mobile-menu {
      display: none;
      padding: 16px 0 24px;
      border-top: 1px solid var(--hairline);
    }
    .mobile-menu.open { display: block; }
    .mobile-menu a {
      display: block; padding: 12px 4px;
      font-weight: 600; color: var(--ink-2);
      border-bottom: 1px solid var(--hairline);
    }
    .mobile-menu a:last-child { border-bottom: none; }

    /* =====================================================================
       Hero
       ===================================================================== */
    .hero {
      padding: 60px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
    }
    @media (min-width: 980px) {
      .hero { padding: 80px 0 120px; }
      .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 60px; }
    }

    .hero h1 .line { display: block; }
    .hero h1 .ai {
      font-style: italic;
      font-weight: 600;
      font-variation-settings: "opsz" 96;
    }
    .hero h1 .blue-w { color: var(--blue); }
    .hero h1 .orange-w { color: var(--orange-dk); }

    .hero-pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: 999px;
      padding: 8px 14px 8px 10px;
      font-weight: 700;
      font-size: 0.86rem;
      box-shadow: var(--shadow-sticker);
      margin-bottom: 28px;
      transform: rotate(-1.5deg);
    }
    .hero-pill .dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
      50%     { box-shadow: 0 0 0 8px rgba(16,185,129,0.05); }
    }

    .hero-sub { margin-top: 24px; max-width: 540px; }
    .hero-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

    .hero-bullets {
      margin-top: 28px;
      display: flex; flex-wrap: wrap; gap: 22px;
      font-size: 0.94rem; color: var(--muted);
      font-weight: 600;
    }
    .hero-bullets span { display: inline-flex; align-items: center; gap: 6px; }
    .hero-bullets svg { color: var(--mint); }

    /* Hero video */
    .hero-art {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 380px;
    }
    .hero-video-blob {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 65% 35%, rgba(249,115,22,0.18) 0%, transparent 55%),
        radial-gradient(circle at 30% 70%, rgba(37,99,235,0.16) 0%, transparent 55%);
      transform: scale(1.05);
      filter: blur(2px);
    }
    .hero-video-frame {
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 16 / 11;
      border-radius: 28px;
      border: 3px solid var(--ink);
      box-shadow: 14px 14px 0 var(--orange),
                  0 30px 60px -20px rgba(10,22,40,0.3);
      background: var(--ink);
      transform: rotate(-1deg);
      transition: transform .3s ease;
    }
    .hero-video-frame:hover { transform: rotate(0); }
    .hero-video-frame video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 25px;
    }
    .hero-video-tape {
      position: absolute;
      top: -22px; left: 50%;
      transform: translateX(-50%) rotate(-2deg);
      background: var(--yellow);
      border: 2px solid var(--ink);
      padding: 6px 24px;
      border-radius: 4px;
      font-weight: 800;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      box-shadow: 2px 2px 0 var(--ink);
      z-index: 3;
      white-space: nowrap;
    }

    /* Floating sticker badges */
    .sticker {
      position: absolute;
      background: white;
      border: 2px solid var(--ink);
      border-radius: 18px;
      padding: 10px 14px;
      font-weight: 700;
      font-size: 0.84rem;
      box-shadow: var(--shadow-sticker);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .sticker .num { font-family: 'Bricolage Grotesque'; font-weight: 800; color: var(--blue); font-size: 1.15rem; line-height: 1; }
    .sticker.s1 { top: 4%; left: -2%; transform: rotate(-7deg); }
    .sticker.s2 { top: 20%; right: -2%; transform: rotate(6deg); background: var(--blue); color: white; border-color: var(--ink); }
    .sticker.s2 .num { color: var(--yellow); }
    .sticker.s3 { bottom: 8%; left: 4%; transform: rotate(4deg); }
    .sticker.s4 { bottom: 20%; right: -4%; transform: rotate(-5deg); background: var(--orange); color: white; }
    @media (max-width: 720px) {
      .sticker { font-size: 0.74rem; padding: 8px 10px; }
      .sticker.s2, .sticker.s4 { display: none; }
    }

    /* =====================================================================
       Marquee proof bar
       ===================================================================== */
    .proof-bar {
      background: var(--ink);
      color: white;
      padding: 22px 0;
      overflow: hidden;
      border-top: 3px solid var(--ink);
      border-bottom: 3px solid var(--ink);
    }
    .proof-track {
      display: flex; gap: 60px;
      align-items: center;
      width: max-content;
      animation: scroll-left 38s linear infinite;
      font-weight: 700;
      font-size: 1rem;
    }
    .proof-track span { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
    .proof-track .star { color: var(--yellow); font-size: 1.2rem; }
    @keyframes scroll-left {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* =====================================================================
       Section heading
       ===================================================================== */
    .section { padding: 90px 0; position: relative; }
    .section-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    .section-head .eyebrow { display: inline-block; margin-bottom: 14px; }
    .section-head h2 { margin-bottom: 16px; }

    /* Wavy section divider */
    .wave {
      display: block;
      width: 100%;
      height: 60px;
      color: var(--cream); /* color of section ABOVE */
    }

    /* =====================================================================
       Ecosystem section (6 product cards)
       ===================================================================== */
    .section-ecosystem { background: var(--paper); }
    .product-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 720px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1040px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

    .product-card {
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 28px;
      position: relative;
      transition: transform .18s ease, box-shadow .18s ease;
      box-shadow: var(--shadow-card);
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    .product-card:hover {
      transform: translate(-3px, -3px);
      box-shadow: 0 16px 0 -2px var(--ink), 0 22px 36px -8px rgba(10,22,40,0.2);
    }
    .product-card .tag {
      position: absolute; top: 18px; right: 18px;
      background: var(--ink); color: white;
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 5px 10px; border-radius: 999px;
    }
    .product-card .icon-box {
      width: 88px; height: 88px;
      border-radius: 22px;
      border: 2px solid var(--ink);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      transform: rotate(-3deg);
      transition: transform .2s ease;
    }
    .product-card:hover .icon-box { transform: rotate(3deg) scale(1.05); }
    .product-card .icon-box img { width: 60%; max-height: 60px; }
    .product-card .pillar {
      font-size: 0.74rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 10px;
    }
    .product-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
    .product-card p {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.55;
      flex: 1;
      margin-bottom: 22px;
    }
    .product-card .read-more {
      display: inline-flex; align-items: center; gap: 6px;
      font-weight: 700;
      color: var(--ink);
      border-bottom: 2px solid currentColor;
      padding-bottom: 2px;
      align-self: flex-start;
      transition: gap .15s ease, color .15s ease;
    }
    .product-card .read-more:hover { gap: 10px; }

    /* Color variants */
    .pc-blue   { background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%); }
    .pc-blue   .icon-box { background: var(--blue); }
    .pc-blue   .pillar { color: var(--blue-dk); }
    .pc-blue   .read-more:hover { color: var(--blue); }

    .pc-orange { background: linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%); }
    .pc-orange .icon-box { background: var(--orange); }
    .pc-orange .pillar { color: var(--orange-dk); }
    .pc-orange .read-more:hover { color: var(--orange-dk); }

    .pc-mint   { background: linear-gradient(160deg, #ecfdf5 0%, #a7f3d0 100%); }
    .pc-mint   .icon-box { background: var(--mint); }
    .pc-mint   .pillar { color: #047857; }
    .pc-mint   .read-more:hover { color: var(--mint); }

    .pc-yellow { background: linear-gradient(160deg, #fffbeb 0%, #fde68a 100%); }
    .pc-yellow .icon-box { background: var(--yellow); }
    .pc-yellow .pillar { color: #b45309; }
    .pc-yellow .read-more:hover { color: #b45309; }

    .pc-pink   { background: linear-gradient(160deg, #fdf2f8 0%, #fbcfe8 100%); }
    .pc-pink   .icon-box { background: var(--pink); }
    .pc-pink   .pillar { color: #be185d; }
    .pc-pink   .read-more:hover { color: #be185d; }

    .pc-plum   { background: linear-gradient(160deg, #f5f3ff 0%, #ddd6fe 100%); }
    .pc-plum   .icon-box { background: var(--plum); }
    .pc-plum   .pillar { color: var(--plum); }
    .pc-plum   .read-more:hover { color: var(--plum); }

    .ecosystem-cta {
      text-align: center;
      margin-top: 56px;
    }

    /* =====================================================================
       Inside the LMS — tabbed product preview
       ===================================================================== */
    .section-lms {
      background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    }
    .lms-tabs {
      display: flex; flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 36px;
    }
    .lms-tab {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 18px;
      border: 2px solid var(--ink);
      background: var(--paper);
      color: var(--ink);
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.9rem;
      box-shadow: 3px 3px 0 var(--ink);
      transition: transform .15s ease, box-shadow .15s ease, background .15s, color .15s;
    }
    .lms-tab:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--ink);
    }
    .lms-tab.active {
      background: var(--blue);
      color: white;
      transform: translate(1px, 1px);
      box-shadow: 2px 2px 0 var(--ink);
    }
    .lms-tab .ic {
      width: 18px; height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* LMS feature panel (text-only — no product screenshots) */
    .lms-panel {
      max-width: 920px;
      margin: 0 auto;
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: 28px;
      padding: 44px 36px;
      box-shadow: 0 30px 50px -20px rgba(10,22,40,0.25),
                  10px 10px 0 var(--orange);
      transform: rotate(-0.4deg);
      position: relative;
    }
    .lms-feature {
      display: none;
      animation: fadeIn .35s ease;
    }
    .lms-feature.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    .lms-feature h3 {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      margin-bottom: 14px;
    }
    .lms-feature .tagline {
      color: var(--blue);
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .lms-feature p.summary {
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.65;
      margin-bottom: 26px;
    }
    .lms-feature ul {
      list-style: none;
      padding: 0; margin: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 720px) { .lms-feature ul { grid-template-columns: 1fr 1fr; } }
    .lms-feature li {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 14px 16px;
      background: var(--cream);
      border: 1.5px solid var(--hairline);
      border-radius: 14px;
      font-size: 0.95rem;
      color: var(--ink-2);
      line-height: 1.5;
    }
    .lms-feature li::before {
      content: "✓";
      flex-shrink: 0;
      width: 22px; height: 22px;
      background: var(--mint);
      color: white;
      border-radius: 50%;
      font-size: 0.7rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }

    .lms-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
      padding-top: 26px;
      border-top: 1.5px dashed var(--hairline);
    }
    .lms-stat-chip {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      padding: 8px 14px;
      background: var(--cream-2);
      border: 2px solid var(--ink);
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.88rem;
    }
    .lms-stat-chip .big {
      font-family: 'Bricolage Grotesque';
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--orange-dk);
    }

    /* =====================================================================
       Rollout — 3 steps
       ===================================================================== */
    .section-rollout {
      background: var(--paper);
    }
    .rollout-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      position: relative;
    }
    @media (min-width: 900px) {
      .rollout-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    }
    .rollout-card {
      background: var(--cream);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 36px 28px 32px;
      position: relative;
      transition: transform .18s ease;
      box-shadow: var(--shadow-card);
    }
    .rollout-card:nth-child(1) { transform: rotate(-1deg); }
    .rollout-card:nth-child(2) { transform: rotate(0.5deg); margin-top: 18px; }
    .rollout-card:nth-child(3) { transform: rotate(-0.5deg); margin-top: 8px; }
    .rollout-card:hover { transform: rotate(0) translateY(-4px); }
    .rollout-num {
      position: absolute;
      top: -28px; left: 24px;
      width: 64px; height: 64px;
      border-radius: 50%;
      border: 2px solid var(--ink);
      background: var(--paper);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Bricolage Grotesque';
      font-weight: 800;
      font-size: 1.8rem;
      box-shadow: var(--shadow-sticker);
    }
    .rollout-card:nth-child(1) .rollout-num { background: var(--orange); color: white; }
    .rollout-card:nth-child(2) .rollout-num { background: var(--blue);   color: white; }
    .rollout-card:nth-child(3) .rollout-num { background: var(--mint);   color: white; }
    .rollout-card h3 { font-size: 1.35rem; margin: 24px 0 12px; }
    .rollout-card p {
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.55;
    }

    /* =====================================================================
       For Whom — Teachers / Students / Principals / Parents
       ===================================================================== */
    .section-audiences { background: var(--cream); }
    .audience-grid {
      display: grid; gap: 24px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 720px)  { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1040px) { .audience-grid { grid-template-columns: repeat(4, 1fr); } }

    .audience-card {
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 32px 26px;
      box-shadow: var(--shadow-card);
      position: relative;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .audience-card:hover { transform: translate(-3px, -3px); box-shadow: 0 16px 0 -2px var(--ink), 0 22px 36px -8px rgba(10,22,40,0.2); }
    .audience-card .emoji {
      width: 64px; height: 64px;
      border-radius: 50%;
      border: 2px solid var(--ink);
      background: var(--cream-2);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem;
      margin-bottom: 18px;
      transform: rotate(-4deg);
    }
    .audience-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
    .audience-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
    .audience-card li {
      padding: 8px 0 8px 26px;
      position: relative;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.5;
    }
    .audience-card li::before {
      content: "✓";
      position: absolute; left: 0; top: 8px;
      width: 20px; height: 20px;
      background: var(--blue);
      color: white;
      border-radius: 50%;
      font-size: 0.7rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
    }
    .audience-card.ac-orange li::before { background: var(--orange); }
    .audience-card.ac-mint li::before { background: var(--mint); }
    .audience-card.ac-pink li::before { background: var(--pink); }

    .audience-card .know-more {
      display: inline-flex; align-items: center; gap: 6px;
      font-weight: 700;
      color: var(--ink);
      font-size: 0.9rem;
      border-bottom: 2px solid currentColor;
      transition: gap .15s;
    }
    .audience-card .know-more:hover { gap: 10px; }

    /* =====================================================================
       IIT collaboration
       ===================================================================== */
    .section-iit {
      background: var(--ink);
      color: white;
      overflow: hidden;
    }
    .section-iit h2 { color: white; }
    .iit-wrap {
      max-width: 880px;
      margin: 0 auto;
      text-align: center;
      position: relative;
    }
    .iit-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(251,191,36,0.15);
      border: 1px solid rgba(251,191,36,0.4);
      color: var(--yellow);
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.8rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 24px;
    }
    .iit-text {
      color: #cbd5e1;
      font-size: 1.1rem;
      max-width: 720px;
      margin: 0 auto 32px;
      line-height: 1.6;
    }
    .iit-sparkle {
      position: absolute;
      font-size: 2rem;
      opacity: 0.4;
    }
    .iit-sparkle.left  { top: -10px; left: -20px; transform: rotate(-12deg); }
    .iit-sparkle.right { bottom: -10px; right: -20px; transform: rotate(15deg); }

    /* =====================================================================
       Stats / Numbers
       ===================================================================== */
    .section-stats { background: var(--paper); }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    @media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .stat-card {
      background: var(--cream);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 28px 22px;
      text-align: center;
      box-shadow: var(--shadow-sticker);
      transition: transform .18s ease;
    }
    .stat-card:nth-child(odd)  { transform: rotate(-1deg); }
    .stat-card:nth-child(even) { transform: rotate(1deg); }
    .stat-card:hover { transform: rotate(0) translateY(-4px); }
    .stat-num {
      font-family: 'Bricolage Grotesque';
      font-weight: 800;
      font-size: clamp(2.4rem, 4.5vw, 3.6rem);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .stat-card:nth-child(1) .stat-num { color: var(--blue); }
    .stat-card:nth-child(2) .stat-num { color: var(--orange-dk); }
    .stat-card:nth-child(3) .stat-num { color: var(--mint); }
    .stat-card:nth-child(4) .stat-num { color: var(--pink); }
    .stat-label {
      margin-top: 8px;
      font-size: 0.94rem;
      font-weight: 600;
      color: var(--muted);
    }

    /* =====================================================================
       Two-paths section (single school / group)
       ===================================================================== */
    .section-paths {
      background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
    }
    .paths-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 860px) { .paths-grid { grid-template-columns: 1fr 1fr; } }

    .path-card {
      position: relative;
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: transform .18s ease;
    }
    .path-card:hover { transform: translate(-3px, -3px); }
    .path-card .corner-shape {
      position: absolute;
      top: -40px; right: -40px;
      width: 160px; height: 160px;
      border-radius: 50%;
      opacity: 0.18;
    }
    .path-card.pc-1 .corner-shape { background: var(--blue); }
    .path-card.pc-2 .corner-shape { background: var(--orange); }
    .path-card h3 { font-size: 1.7rem; margin-bottom: 12px; }
    .path-card p { color: var(--muted); margin-bottom: 24px; }
    .path-card .arrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-weight: 700;
      transition: gap .15s ease;
    }
    .path-card.pc-1 .arrow { color: var(--blue); }
    .path-card.pc-2 .arrow { color: var(--orange-dk); }
    .path-card:hover .arrow { gap: 14px; }

    /* =====================================================================
       Trusted by — marquee
       ===================================================================== */
    .section-trust { background: var(--paper); padding: 70px 0; }
    .trust-head { text-align: center; margin-bottom: 36px; }
    .trust-head h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
    .trust-head p { color: var(--muted); margin-top: 8px; }
    .marquee {
      position: relative;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
    }
    .marquee-track {
      display: flex; gap: 48px;
      width: max-content;
      animation: scroll-left 60s linear infinite;
      align-items: center;
    }
    .marquee-track img {
      height: 60px;
      object-fit: contain;
      filter: grayscale(100%);
      opacity: 0.65;
      transition: filter .25s, opacity .25s;
    }
    .marquee-track img:hover { filter: grayscale(0); opacity: 1; }

    .partner-row {
      display: flex; flex-wrap: wrap;
      justify-content: center; align-items: center;
      gap: 36px;
      margin-bottom: 36px;
    }
    .partner-row img { height: 56px; opacity: 0.85; }

    /* =====================================================================
       Demo CTA
       ===================================================================== */
    .section-demo {
      background: var(--ink);
      color: white;
      position: relative;
      overflow: hidden;
    }
    .section-demo::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(circle at 15% 30%, rgba(37,99,235,0.20) 0, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(249,115,22,0.18) 0, transparent 40%);
    }
    .demo-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: start;
      position: relative;
    }
    @media (min-width: 980px) {
      .demo-grid { grid-template-columns: 1.05fr 1fr; gap: 80px; }
    }
    .demo-left h2 { color: white; margin-bottom: 18px; }
    .demo-left p { color: #cbd5e1; font-size: 1.05rem; margin-bottom: 32px; max-width: 480px; }
    .demo-list { list-style: none; padding: 0; margin: 0; }
    .demo-list li {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      color: #cbd5e1;
      font-size: 0.98rem;
    }
    .demo-list li:last-child { border-bottom: none; }
    .demo-list .num {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: var(--yellow); color: var(--ink);
      font-weight: 800; font-size: 0.9rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .demo-list strong { color: white; }

    .demo-form {
      background: var(--paper);
      color: var(--ink);
      border-radius: var(--radius-lg);
      padding: 36px;
      border: 2px solid var(--ink);
      box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4),
                  10px 10px 0 var(--blue);
    }
    .demo-form h3 { font-size: 1.4rem; margin-bottom: 6px; }
    .demo-form .sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 24px; }
    .field { margin-bottom: 14px; }
    .field label {
      display: block;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .field input, .field textarea {
      width: 100%;
      padding: 13px 14px;
      border: 2px solid var(--hairline);
      border-radius: 12px;
      font: inherit;
      font-size: 0.96rem;
      background: var(--cream);
      transition: border .15s ease, box-shadow .15s ease, background .15s;
    }
    .field input:focus, .field textarea:focus {
      outline: none;
      border-color: var(--blue);
      background: white;
      box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    }
    .field-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
    @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
    .submit-btn {
      width: 100%;
      background: var(--blue);
      color: white;
      border: 2px solid var(--ink);
      padding: 16px 24px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.02rem;
      box-shadow: 5px 5px 0 var(--ink);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .submit-btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
    .submit-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

    .dvMsg {
      text-align: center;
      margin-top: 16px;
      font-weight: 600;
      color: var(--mint);
    }

    /* =====================================================================
       Footer
       ===================================================================== */
    footer.site-footer {
      background: var(--ink);
      color: #cbd5e1;
      padding: 56px 0 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 36px;
      margin-bottom: 36px;
    }
    @media (min-width: 720px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

    .footer-brand img { height: 40px; margin-bottom: 14px; background: white; padding: 6px 10px; border-radius: 10px; }
    .footer-brand p { font-size: 0.92rem; max-width: 320px; }
    .footer-col h4 {
      color: white;
      font-size: 0.82rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .footer-col a {
      display: block;
      padding: 5px 0;
      font-size: 0.94rem;
      transition: color .15s;
    }
    .footer-col a:hover { color: white; }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 22px;
      display: flex; flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      font-size: 0.86rem;
      color: #64748b;
    }

    /* =====================================================================
       Reveal animation
       ===================================================================== */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* =====================================================================
       CONTENT-PAGE PATTERNS — used by about-us, learning-gap, fly-wheel, etc.
       Appended to the index.html-extracted core.
       ===================================================================== */

    /* Sub-hero (smaller than the homepage hero — used as page header) */
    .page-hero {
      padding: 80px 0 60px;
      background:
        radial-gradient(circle at 10% 10%, rgba(37,99,235,0.07) 0 200px, transparent 220px),
        radial-gradient(circle at 90% 80%, rgba(249,115,22,0.07) 0 250px, transparent 270px);
      position: relative;
      overflow: hidden;
    }
    .page-hero .container { text-align: center; }
    .page-hero h1 {
      font-size: clamp(2.2rem, 5.5vw, 4.4rem);
      max-width: 880px;
      margin: 0 auto 22px;
    }
    .page-hero h1 em { font-style: italic; color: var(--orange-dk); font-weight: 600; }
    .page-hero .lead { max-width: 720px; margin: 0 auto; }
    .page-hero .pill-row {
      margin-top: 28px;
      display: flex; flex-wrap: wrap;
      gap: 10px; justify-content: center;
    }

    /* Story split — image left/right + text */
    .story-split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
    }
    @media (min-width: 860px) {
      .story-split { grid-template-columns: 1fr 1fr; gap: 60px; }
      .story-split.flip > div:first-child { order: 2; }
    }
    .story-split .story-img {
      position: relative;
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      background: var(--cream-2);
      aspect-ratio: 5 / 4;
      transform: rotate(-1deg);
      transition: transform .3s ease;
    }
    .story-split .story-img:hover { transform: rotate(0); }
    .story-split.flip .story-img { transform: rotate(1deg); }
    .story-split.flip .story-img:hover { transform: rotate(0); }
    .story-split .story-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .story-split h2 { margin-bottom: 18px; }
    .story-split p { color: var(--muted); margin-bottom: 14px; line-height: 1.65; }
    .story-split p strong { color: var(--ink); }

    /* Mission / vision dual cards (used on about-us) */
    .mv-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
    }
    @media (min-width: 800px) { .mv-grid { grid-template-columns: 1fr 1fr; } }
    .mv-card {
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 38px 32px;
      box-shadow: var(--shadow-card);
      transition: transform .18s ease;
    }
    .mv-card:hover { transform: translate(-3px,-3px); }
    .mv-card .icon-circle {
      width: 60px; height: 60px;
      border-radius: 50%;
      border: 2px solid var(--ink);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem;
      margin-bottom: 20px;
    }
    .mv-card.mission { background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%); transform: rotate(-1deg); }
    .mv-card.vision  { background: linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%); transform: rotate(1deg); }
    .mv-card.mission:hover, .mv-card.vision:hover { transform: rotate(0) translateY(-4px); }
    .mv-card.mission .icon-circle { background: var(--blue); color: white; }
    .mv-card.vision  .icon-circle { background: var(--orange); color: white; }
    .mv-card h3 { font-size: 1.55rem; margin-bottom: 12px; }
    .mv-card p { color: var(--ink-2); line-height: 1.65; font-size: 1rem; }

    /* Timeline (used on about-us journey) */
    .timeline {
      position: relative;
      max-width: 760px;
      margin: 0 auto;
      padding: 20px 0;
    }
    .timeline::before {
      content: "";
      position: absolute;
      left: 24px; top: 0; bottom: 0;
      width: 3px;
      background: repeating-linear-gradient(
        to bottom,
        var(--ink) 0 8px,
        transparent 8px 14px
      );
    }
    @media (min-width: 720px) {
      .timeline::before { left: 50%; transform: translateX(-50%); }
    }
    .tl-item {
      position: relative;
      padding: 0 0 28px 64px;
    }
    @media (min-width: 720px) {
      .tl-item { width: 50%; padding-left: 40px; }
      .tl-item:nth-child(even) {
        margin-left: 50%;
      }
      .tl-item:nth-child(odd) {
        text-align: right;
        padding-left: 0; padding-right: 40px;
      }
    }
    .tl-dot {
      position: absolute;
      left: 12px; top: 8px;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--orange);
      border: 3px solid var(--ink);
      box-shadow: var(--shadow-sticker);
      z-index: 2;
    }
    @media (min-width: 720px) {
      .tl-item:nth-child(odd)  .tl-dot { left: auto; right: -14px; }
      .tl-item:nth-child(even) .tl-dot { left: -14px; }
    }
    .tl-card {
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 22px 26px;
      box-shadow: var(--shadow-card);
      transition: transform .18s ease;
    }
    .tl-card:hover { transform: translate(-2px, -2px); }
    .tl-card .year {
      display: inline-block;
      background: var(--ink); color: white;
      padding: 4px 10px;
      border-radius: 999px;
      font-family: 'Bricolage Grotesque';
      font-weight: 800;
      font-size: 0.86rem;
      margin-bottom: 10px;
    }
    .tl-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
    .tl-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

    /* Big quote / pull-quote */
    .pull-quote {
      max-width: 880px;
      margin: 0 auto;
      text-align: center;
      padding: 36px 24px;
      position: relative;
    }
    .pull-quote::before {
      content: "“";
      font-family: 'Bricolage Grotesque';
      font-weight: 800;
      font-size: 6rem;
      color: var(--orange);
      line-height: 0.6;
      display: block;
      margin-bottom: 18px;
    }
    .pull-quote .q {
      font-family: 'Bricolage Grotesque';
      font-weight: 500;
      font-style: italic;
      font-size: clamp(1.3rem, 2.8vw, 1.9rem);
      color: var(--ink);
      line-height: 1.4;
    }
    .pull-quote .attr {
      margin-top: 18px;
      font-size: 0.9rem;
      color: var(--muted);
      font-weight: 600;
    }

    /* Feature list (for 'Our Advantage' / similar) */
    .feature-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 720px)  { .feature-list { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1040px) { .feature-list { grid-template-columns: 1fr 1fr 1fr; } }
    .feature-card {
      background: var(--paper);
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 30px 28px;
      box-shadow: var(--shadow-card);
      transition: transform .18s ease;
      position: relative;
    }
    .feature-card:hover { transform: translate(-3px,-3px); }
    .feature-card .badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 52px; height: 52px;
      border-radius: 16px;
      border: 2px solid var(--ink);
      background: var(--yellow);
      font-size: 1.5rem;
      margin-bottom: 18px;
      transform: rotate(-3deg);
    }
    .feature-card:hover .badge { transform: rotate(3deg); }
    .feature-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
    .feature-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
    .feature-card.fc-blue   .badge { background: var(--blue);   color: white; }
    .feature-card.fc-orange .badge { background: var(--orange); color: white; }
    .feature-card.fc-mint   .badge { background: var(--mint);   color: white; }
    .feature-card.fc-pink   .badge { background: var(--pink);   color: white; }
    .feature-card.fc-plum   .badge { background: var(--plum);   color: white; }

    /* Counting numbers (animated by JS) */
    .count-stat .stat-num { transition: none; }