:root {
        --page-bg: #f7f7fb;
        --ink: #101525;
        --muted: #687084;
        --line: rgba(16, 21, 37, 0.1);
        --panel: rgba(255, 255, 255, 0.58);
        --shadow-soft: 0 28px 90px rgba(34, 28, 87, 0.08);
        --shadow-card: 0 18px 44px rgba(34, 28, 87, 0.055);
      }

      * {
        box-sizing: border-box;
      }

      /* Scoped to the hero block so it does not override the handoff sections below. */
      .engine-page {
        min-height: 230vh;
        padding: 28px clamp(16px, 3vw, 56px) 120px;
        color: var(--ink);
        background:
          radial-gradient(circle at 22% 18%, rgba(105, 89, 250, 0.14), transparent 32%),
          radial-gradient(circle at 86% 76%, rgba(105, 89, 250, 0.1), transparent 34%),
          var(--page-bg);
        font-family: var(--font-ui);
      }

      .engine-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        max-width: 1500px;
        margin: 0 auto 20px;
      }

      .brand-lockup {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: var(--ink);
        text-decoration: none;
      }

      .brand-lockup strong {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 760;
        letter-spacing: 0;
      }

      .top-pill {
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 10px 16px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.66);
        font-size: 13px;
        font-weight: 650;
      }

      .engine-stage {
        position: sticky;
        top: 22px;
        max-width: 1500px;
        min-height: calc(100vh - 76px);
        margin: 0 auto;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 48%, rgba(105, 89, 250, 0.13), transparent 30%),
          radial-gradient(circle at 16% 20%, rgba(105, 89, 250, 0.06), transparent 24%),
          radial-gradient(circle at 86% 76%, rgba(16, 21, 37, 0.045), transparent 28%),
          transparent;
        box-shadow: none;
      }

      .engine-stage::before,
      .engine-stage::after {
        display: none;
      }

      .stage-label {
        position: absolute;
        top: 28px;
        left: 32px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(104, 112, 132, 0.78);
        font-size: 10.5px;
        font-weight: 760;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .stage-label span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary);
        box-shadow: 0 0 0 7px rgba(105, 89, 250, 0.12);
      }

      .engine-center {
        position: absolute;
        z-index: 6;
        top: 50%;
        left: 50%;
        width: min(760px, calc(100% - 56px));
        transform: translate(-50%, -50%);
        border: 0;
        border-radius: 0;
        padding: 0;
        text-align: center;
        background: transparent;
        box-shadow: none;
      }

      .engine-center .eyebrow {
        margin: 0 0 18px;
        color: var(--primary);
        font-size: 12px;
        font-weight: 820;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .engine-center h1 {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(38px, 4.8vw, 76px);
        line-height: 0.96;
        font-weight: 760;
        letter-spacing: 0;
      }

      .engine-center .summary {
        max-width: 520px;
        margin: 24px auto 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.62;
        font-weight: 520;
      }

      .center-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px;
      }

      .focus-strip {
        min-width: 200px;
        max-width: 520px;
        border: 1px solid rgba(16, 21, 37, 0.07);
        border-radius: 999px;
        padding: 11px 15px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.42);
        font-size: 11px;
        font-weight: 650;
      }

      .engine-card {
        position: absolute;
        z-index: 3;
        width: 104px;
        min-height: 48px;
        --scroll-x: 0px;
        --scroll-y: 0px;
        --tilt: 0deg;
        border: 1px solid rgba(105, 89, 250, 0.035);
        border-radius: 9px;
        padding: 5px 6px 6px;
        background: rgba(255, 255, 255, 0.24);
        box-shadow: 0 10px 24px rgba(34, 28, 87, 0.028);
        backdrop-filter: blur(20px);
        opacity: 0.68;
        transform: translate3d(var(--scroll-x), var(--scroll-y), 0) rotate(var(--tilt));
        will-change: transform, translate;
        transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease, border-color 180ms ease, background 180ms ease;
        animation: floatCard 9.8s ease-in-out infinite;
      }

      .engine-card::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 11px;
        height: 11px;
        border-radius: 4px;
        background:
          linear-gradient(135deg, rgba(105, 89, 250, 0.16) 0 50%, transparent 51%),
          rgba(105, 89, 250, 0.06);
        opacity: 0.55;
      }

      .engine-card:hover {
        transform: translate3d(var(--scroll-x), calc(var(--scroll-y) - 7px), 0) rotate(var(--tilt)) scale(1.035);
        border-color: rgba(105, 89, 250, 0.24);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 22px 52px rgba(34, 28, 87, 0.11);
        opacity: 1;
      }

      .card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 5px;
      }

      .card-number {
        display: inline-grid;
        place-items: center;
        width: 16px;
        height: 16px;
        border-radius: 5px;
        color: var(--primary);
        background: rgba(105, 89, 250, 0.1);
        font-family: var(--font-mono);
        font-size: 6.7px;
        font-weight: 700;
      }

      .phase {
        border-radius: 999px;
        padding: 2px 3.5px;
        color: var(--muted);
        background: rgba(16, 21, 37, 0.05);
        font-size: 5.7px;
        font-weight: 820;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .engine-card h2 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 9.2px;
        line-height: 1.16;
        font-weight: 680;
        letter-spacing: 0;
      }

      .engine-card p {
        margin: 2px 0 0;
        color: var(--muted);
        font-size: 7px;
        line-height: 1.28;
        font-weight: 500;
      }

      .c1 { left: 10%; top: 24%; --tilt: -8deg; animation-delay: -1.1s; }
      .c2 { left: 28%; top: 12%; --tilt: 5deg; animation-delay: -2.8s; }
      .c3 { right: 30%; top: 14%; --tilt: -5deg; animation-delay: -4.1s; }
      .c4 { right: 10%; top: 26%; --tilt: 8deg; animation-delay: -0.6s; }
      .c5 { left: 13%; top: 43%; --tilt: 6deg; animation-delay: -3.7s; }
      .c6 { right: 13%; top: 44%; --tilt: -7deg; animation-delay: -2.1s; }
      .c7 { left: 9%; bottom: 23%; --tilt: 4deg; animation-delay: -5.5s; }
      .c8 { left: 27%; bottom: 12%; --tilt: -5deg; animation-delay: -1.8s; }
      .c9 { right: 27%; bottom: 12%; --tilt: 5deg; animation-delay: -3.2s; }
      .c10 { right: 9%; bottom: 23%; --tilt: -8deg; animation-delay: -4.8s; }
      .c11 { left: 38%; top: 70%; --tilt: -3deg; animation-delay: -0.9s; }
      .c12 { right: 38%; top: 68%; --tilt: 4deg; animation-delay: -2.6s; }

      .connector {
        display: none;
      }

      .connector.one { transform: rotate(90deg); }
      .connector.two { transform: rotate(34deg); }
      .connector.three { transform: rotate(-34deg); }

      @keyframes floatCard {
        0%, 100% { translate: 0 0; }
        35% { translate: 8px -11px; }
        70% { translate: -7px 8px; }
      }

      @media (max-width: 1080px) {
        .engine-stage {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 16px;
          min-height: auto;
          padding: 132px 20px 24px;
          overflow: visible;
        }

        .engine-stage::before,
        .engine-stage::after,
        .connector {
          display: none;
        }

        .engine-center {
          position: relative;
          grid-column: 1 / -1;
          top: auto;
          left: auto;
          width: 100%;
          transform: none;
          margin-bottom: 8px;
        }

        .engine-card {
          position: relative;
          inset: auto;
          width: 100%;
          min-height: 132px;
          transform: none !important;
          animation: none;
        }
      }

      @media (max-width: 680px) {
        .engine-page {
          padding: 18px 14px 28px;
        }

        .engine-topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        .engine-stage {
          grid-template-columns: 1fr;
          padding-top: 96px;
          border-radius: 24px;
        }

        .stage-label {
          top: 22px;
          left: 22px;
          right: 22px;
          line-height: 1.5;
        }

        .engine-center {
          padding: 26px 20px;
          border-radius: 24px;
        }

        .engine-center h1 {
          font-size: 34px;
        }

        .focus-strip,
        .btn {
          width: 100%;
        }
      }

/* ============================================================
   PROTOTYPE v2 — light hero (like current floating-engines) + readable cards
   ============================================================ */
.engine-page{
  background:
    linear-gradient(rgba(120,98,54,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,98,54,.06) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, rgba(105,89,250,.10), transparent 40%),
    radial-gradient(circle at 86% 82%, rgba(105,89,250,.08), transparent 42%),
    #f8f3e8;
  background-size: 40px 40px, 40px 40px, auto, auto, auto;
  color:#101525;
}
/* secondary hero button on the cream bg */
.engine-center .btn--ondark{ background:#fff; border:1px solid rgba(16,21,37,.14); color:#101525; }
.engine-center .btn--ondark:hover{ border-color:#6959fa; color:#4b3fd6; }
.engine-center h1{ color:#101525; }
.engine-center .eyebrow{ color:#6959fa; }
.engine-center .summary{ color:#687084; }
.stage-label{ color:rgba(104,112,132,.82); }
.focus-strip{ background:rgba(255,255,255,.58); border-color:rgba(16,21,37,.08); color:#687084; }

.engine-card{
  opacity:1;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(105,89,250,.14);
  box-shadow:0 14px 30px rgba(34,28,87,.08);
  backdrop-filter:blur(16px);
}
.engine-card:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(105,89,250,.42);
  box-shadow:0 22px 50px rgba(34,28,87,.15);
}
.engine-card h2{ color:#101525; font-weight:700; }
.engine-card p{ color:#5a6072; }
.engine-card .card-number{ color:#6959fa; background:rgba(105,89,250,.12); }
.engine-card .phase{ color:#687084; background:rgba(16,21,37,.05); }
.engine-card::after{
  background:linear-gradient(135deg, rgba(105,89,250,.30) 0 50%, transparent 51%), rgba(105,89,250,.10);
  opacity:.6;
}

/* desktop only — bigger, readable cards (mobile keeps the stacked layout) */
@media (min-width:1081px){
  .engine-card{ width:148px; min-height:66px; padding:9px 11px 10px; }
  .engine-card .card-number{ width:18px; height:18px; font-size:8px; }
  .engine-card .phase{ font-size:7px; padding:2px 5px; }
  .engine-card h2{ font-size:13px; line-height:1.2; }
  .engine-card p{ font-size:9.6px; line-height:1.34; margin-top:3px; }
}

/* ============================================================
   Hero theme toggle — light by default, .is-dark flips to dark
   ============================================================ */
.hero-theme{ width:36px; height:36px; border-radius:9px; border:1px solid rgba(16,21,37,.12);
  background:rgba(255,255,255,.6); color:#6959fa; font-size:16px; cursor:pointer; display:grid; place-items:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.hero-theme:hover{ background:#fff; border-color:#6959fa; transform:translateY(-1px); }

.engine-page.is-dark{
  background:
    radial-gradient(circle at 50% 26%, rgba(105,89,250,.22), transparent 44%),
    radial-gradient(circle at 86% 82%, rgba(105,89,250,.12), transparent 40%),
    #0b0d1a;
  color:#e8eaf2;
}
.engine-page.is-dark .engine-center h1{ color:#ffffff; }
.engine-page.is-dark .engine-center .eyebrow{ color:#b6a8ff; }
.engine-page.is-dark .engine-center .summary{ color:#aab1c4; }
.engine-page.is-dark .stage-label{ color:rgba(200,205,222,.82); }
.engine-page.is-dark .focus-strip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#aab1c4; }
.engine-page.is-dark .engine-card{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.12); box-shadow:0 14px 34px rgba(0,0,0,.34); }
.engine-page.is-dark .engine-card:hover{ background:rgba(255,255,255,.12); border-color:rgba(139,125,255,.62); box-shadow:0 22px 54px rgba(0,0,0,.5); }
.engine-page.is-dark .engine-card h2{ color:#ffffff; }
.engine-page.is-dark .engine-card p{ color:#9aa1b6; }
.engine-page.is-dark .engine-card .card-number{ color:#cdb6ff; background:rgba(139,125,255,.20); }
.engine-page.is-dark .engine-card .phase{ color:#aab1c4; background:rgba(255,255,255,.08); }
.engine-page.is-dark .engine-card::after{ background:linear-gradient(135deg, rgba(139,125,255,.42) 0 50%, transparent 51%), rgba(139,125,255,.12); }

/* fixed header spacing + login button hover */
body{ padding-top:58px; }
.login-btn:hover{ border-color:#6959fa !important; color:#4b3fd6 !important; }

/* hero headline — Intercom-style geometric sans */
.engine-center h1{ font-family:"Manrope","Inter",sans-serif !important; font-weight:700 !important; letter-spacing:-0.025em !important; }

/* brand wordmark — geometric, Anthropic-style */
.brand-lockup strong{ font-family:"Manrope","Inter",sans-serif !important; font-weight:700 !important; font-size:18px !important; text-transform:uppercase; letter-spacing:.03em; }

/* signature slanted letter (Anthropic-style) — black */
.brand-lockup strong .bslant{ display:inline-block; transform:skewX(-15deg); }