/* ═════════════════════════════════════════════════════════════════
       REVORI — brand-locked refresh
       Palette + type matched to /Revori-Website/index*.html
       ═════════════════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    img, svg, video { display: block; max-width: 100%; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-top: var(--ribbon-h);
    }

    ::selection { background: var(--accent-glow); color: #fff; }

    /* Single ambient brand glow */
    #glow {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(60% 50% at 18% 8%,  rgba(78,143,247,0.10), transparent 60%),
        radial-gradient(50% 45% at 90% 95%, rgba(20,184,166,0.07), transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    /* ═════════ NAV ═════════ */
    /* ═════════ PROMO RIBBON — perspectives ticker ═════════ */
    .promo-ribbon {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--ribbon-h);
      z-index: 210;
      background: #05060a;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .promo-track {
      display: flex;
      align-items: center;
      gap: 30px;
      white-space: nowrap;
      padding-left: 30px;
      animation: promoScroll 36s linear infinite;
      will-change: transform;
    }
    .promo-ribbon:hover .promo-track { animation-play-state: paused; }
    @keyframes promoScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .promo-item {
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .promo-item:hover { color: #fff; }
    .promo-item .promo-tag {
      color: var(--accent-light);
      font-weight: 700;
      text-transform: uppercase;
      font-size: 10.5px;
      letter-spacing: 0.08em;
      margin-right: 8px;
    }
    .promo-cta { color: var(--accent-light); font-weight: 700; }
    .promo-cta:hover { color: #fff; }
    .promo-sep { color: rgba(255,255,255,0.22); font-size: 11px; }
    @media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
    @media (max-width: 640px) { .promo-item { font-size: 11.5px; } .promo-item .promo-tag { display: none; } }

    nav#nav {
      position: fixed;
      top: var(--ribbon-h); left: 0; right: 0;
      z-index: 200;
      height: 72px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 clamp(24px, 4vw, 64px);
      transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
      border-bottom: 1px solid transparent;
    }
    nav#nav .nav-logo { justify-self: start; }
    nav#nav .nav-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
    nav#nav.menu-open {
      background: rgba(10,12,18,0.985);
      -webkit-backdrop-filter: blur(24px);
      backdrop-filter: blur(24px);
      border-bottom-color: transparent;
    }
    nav#nav.scrolled {
      background: rgba(12,14,20,0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom-color: var(--border);
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }
    .logo-word {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      color: var(--text);
      padding-left: 0.36em; /* keeps optical balance with trailing letter-spacing */
    }
    .logo-word .logo-dot { color: var(--accent); }
    .logo-img { height: 22px; width: auto; display: block; }

    .nav-cta {
      padding: 11px 22px;
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      color: #fff;
      border: none;
      border-radius: 4px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.03em;
      cursor: pointer;
      text-decoration: none;
      transition: box-shadow 0.3s, transform 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .nav-cta:hover {
      box-shadow: 0 0 30px var(--accent-glow);
      transform: translateY(-1px);
    }

    /* ═════════ SHARED LAYOUT ═════════ */
    .section-inner {
      max-width: var(--w);
      margin: 0 auto;
      padding: 0 var(--gut);
      position: relative;
      z-index: 1;
    }

    /* Gradient word treatment. Global default so any heading can use
       a span with class accent-text and get the same gradient as
       "What is Revori?". Section-scoped rules below override it. */
.accent-text {
      color: inherit;
    }

    /* Section eyebrows — JetBrains Mono with bullet rule */
    .eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
    .eyebrow::before {
      content: '';
      width: 24px; height: 1px;
      background: var(--accent);
      opacity: 0.6;
    }
    .eyebrow .eb-num { color: var(--accent); font-weight: 600; }

    /* ═════════ HERO ═════════ */
    #hero {
      position: relative;
      width: 100%;
      height: 100svh;
      min-height: 640px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-video-frame { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .hero-video-frame video { width: 100%; height: 100%; object-fit: cover; }
    .v-placeholder {
      width: 100%; height: 100%;
      position: relative;
      display: block;
      background: linear-gradient(135deg, #06080d 0%, #0c0e14 50%, #050608 100%);
      overflow: hidden;
    }
    /* office footage sits under everything as texture only */
    .hero-bg-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      filter: grayscale(0.30) saturate(0.85) brightness(0.85) contrast(1.05) blur(0px);
      transform: scale(1.06);
      opacity: 0;
      animation: heroBgIn 1.6s ease .3s forwards;
    }
    @keyframes heroBgIn { to { opacity: 1; } }

    /* knocks the blown-out windows down and biases the whole plate blue */
    .hero-bg-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(96deg, rgba(8,9,14,0.94) 0%, rgba(8,9,14,0.86) 14%, rgba(8,9,14,0.46) 34%, rgba(8,9,14,0.12) 52%, rgba(8,9,14,0.06) 100%),
        linear-gradient(180deg, rgba(8,9,14,0.42) 0%, transparent 26%, rgba(8,9,14,0.62) 100%),
        linear-gradient(0deg, rgba(20,46,78,0.16), rgba(20,46,78,0.16));
      pointer-events: none;
    }


    @media (prefers-reduced-motion: reduce) {
      .hero-bg-video { animation: none; opacity: 1; }
    }


    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(105deg,
          rgba(8,9,14,0.92) 0%,
          rgba(8,9,14,0.72) 35%,
          rgba(8,9,14,0.30) 60%,
          rgba(8,9,14,0.10) 80%,
          transparent 100%),
        linear-gradient(to top, rgba(8,9,14,0.7) 0%, transparent 35%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 clamp(24px, 4vw, 64px);
    }

    /* Hero badge — minimal live-indicator pill (empty bubble + pulse dot) */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      background: var(--accent-soft);
      border: 1px solid rgba(78,143,247,0.22);
      border-radius: 2px;
      margin-bottom: 28px;
      backdrop-filter: blur(8px);
    }
    .hero-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent-glow);
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.45; transform: scale(0.9); }
    }

    .hero-kicker {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 600;
      font-size: clamp(15px, 1.6vw, 19px);
      color: var(--accent-light);
      letter-spacing: 0.005em;
      margin-bottom: 16px;
      max-width: 46ch;
    }

    .hero-display {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 640;
      font-size: clamp(2.2rem, 4.6vw, 4.3rem);
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.06;
      margin-bottom: 22px;
      max-width: 15ch;
    }
.hero-display .accent-text {
      color: var(--accent);
    }

    .hero-keystone {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(17px, 1.5vw, 21px);
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 40ch;
      margin-bottom: 36px;
      padding-left: 16px;
      border-left: 2px solid rgba(78,143,247,0.35);
    }
    .hero-keystone strong {
      color: var(--text);
      font-weight: 600;
    }

    .hero-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

    /* Primary CTA — brand gradient pill */
    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      color: #fff;
      border: none;
      border-radius: 2px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
      text-decoration: none;
      cursor: pointer;
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .hero-cta::after { content: '→'; font-size: 16px; transition: transform 0.3s; }
    .hero-cta:hover {
      box-shadow: 0 8px 32px var(--accent-glow);
      transform: translateY(-1px);
    }
    .hero-cta:hover::after { transform: translateX(3px); }

    /* Secondary ghost CTA */
    .hero-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-family: var(--sans);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: border-color 0.25s, background 0.25s;
    }
    .hero-secondary:hover {
      border-color: var(--border-2);
      background: var(--surface-2);
    }

    /* Marquee — high-visibility AMS logos */
    .hero-band {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 3;
      height: 92px;
      background:
        linear-gradient(to bottom, rgba(12,14,20,0.55) 0%, rgba(8,9,14,0.92) 100%);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      border-top: 1px solid var(--border-2);
      box-shadow: 0 -1px 0 0 rgba(255,255,255,0.04) inset;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .hero-band::before {
      content: '';
    }
    .hero-band::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0; bottom: 0;
      width: 80px;
      background: linear-gradient(to left, rgba(8,9,14,1) 30%, transparent);
      z-index: 2;
      pointer-events: none;
    }
    .hero-band-track {
      display: flex;
      align-items: center;
      gap: 0;
      white-space: nowrap;
      width: max-content;
      flex-shrink: 0;
      animation: marquee 50s linear infinite;
      will-change: transform;
      /* lighter masking — only fade at the very edges so the logos are clearly visible */
      mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    }
    @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .hero-band-item {
      display: flex; align-items: center;
      padding: 0 44px;
      flex-shrink: 0;
      opacity: 1;
      /* Brighten the SVG fills (which use rgba(255,255,255,0.5) hardcoded)
         so wordmarks read clearly against the dark band */
      filter: brightness(1.7) contrast(1.15) saturate(1.25);
      transition: filter 0.25s ease, transform 0.25s ease;
    }
    .hero-band-item:hover {
      filter: brightness(2.1) contrast(1.2) saturate(1.35);
      transform: scale(1.04);
    }
    .hero-band-item svg { height: 28px; width: auto; }
    .hero-band-divider {
      width: 1px; height: 22px;
      background: var(--border-2);
      flex-shrink: 0;
    }

    /* ═════════════════════════════════════════════════════════════════
       BAND SYSTEM — alternating section treatments.
       Add class="band-dark" or class="band-light" to a section element.
       band-light re-maps the text/border/surface tokens so every child
       rule that uses var(--text), var(--border), var(--surface) etc.
       inverts automatically. To reorder sections later, swap the class;
       nothing else needs to change.
       ═════════════════════════════════════════════════════════════════ */
    .band-dark {
      --band-base: var(--bg-elevated);
      background:
        radial-gradient(60% 70% at 0% 50%, rgba(78,143,247,0.045), transparent 72%),
        var(--band-base);
      color: var(--text);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .band-light {
      --text:           #0f1119;
      --text-secondary: rgba(15,17,25,0.62);
      --text-muted:     rgba(15,17,25,0.45);
      --text-faint:     rgba(15,17,25,0.30);
      --border:         rgba(0,0,0,0.08);
      --border-2:       rgba(0,0,0,0.16);
      --surface:        rgba(15,17,25,0.022);
      --surface-2:      rgba(15,17,25,0.05);
      background: #f4f0e8;
      color: var(--text);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    /* ═════════ ABOUT — LIGHT band ═════════ */
    #about {
      padding: calc(var(--pad-y) * 1.15) 0 calc(var(--pad-y) * 1.05);
      position: relative;
      border-bottom: none;
    }
    #about::before {
      content: '';
      position: absolute;
      top: -1px; left: 50%;
      transform: translateX(-50%);
      width: 1px; height: 56px;
      background: linear-gradient(to bottom, var(--accent), transparent);
      opacity: 0.5;
    }
    #about .section-inner {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 80px;
      align-items: start;
    }
    .about-side { position: sticky; top: 100px; }
    #about .eyebrow {
      color: var(--text-secondary);
    }
    #about .eyebrow::before { background: var(--accent); opacity: 0.7; }
    .about-header {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 2.7vw, 34px);
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.18;
    }
.about-header .accent-text {
      color: inherit;
    }
    .about-body {
      font-family: var(--sans);
      max-width: 64ch;
    }
    .about-lede {
      font-weight: 400;
      font-size: clamp(17px, 1.4vw, 19px);
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 26px;
    }
    .about-cards {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .about-card {
      padding: 17px 0;
      border-top: 1px solid var(--border);
    }
    .about-card:last-child { border-bottom: 1px solid var(--border); }
    .about-card-t {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 15px;
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.3;
      margin-bottom: 9px;
    }
    .about-card-b {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--text-secondary);
    }
    .about-watermark {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: clamp(240px, 26vw, 420px);
      pointer-events: none;
      z-index: 0;
      opacity: 0.22;
      overflow: hidden;
    }
    .about-watermark svg { width: 100%; height: 100%; display: block; }
    .about-watermark path {
      fill: none;
      stroke: var(--text);
      stroke-width: 1.1;
      stroke-linecap: round;
    }
    @media (max-width: 900px) { .about-watermark { display: none; } }

    /* ── About — auto-cycling states (loading bar + fixed left heading) ── */
    .about-stage-dots { display: flex; gap: 9px; margin-top: 22px; }
    .about-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text-faint);
      transition: background 0.5s ease, transform 0.5s ease;
    }
    .about-dot.is-active { background: var(--accent); transform: scale(1.25); }

    .about-stage-stack { position: relative; min-height: clamp(210px, 20vw, 268px); }
    .about-stage {
      position: absolute;
      top: 0; left: 0; right: 0;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
      pointer-events: none;
    }
    .about-stage.is-active {
      position: relative;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .about-stage-h {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(19px, 2vw, 24px);
      letter-spacing: -0.015em;
      line-height: 1.22;
      color: var(--text);
      margin: 0 0 10px;
    }
    .about-stage-p { max-width: 62ch; }
    .about-stage-p + .about-stage-p { margin-top: 12px; }

    .about-stage-line {
      margin-top: clamp(20px, 2.4vw, 30px);
      width: 100%;
      max-width: 300px;
      height: 1px;
      background: var(--border);
      position: relative;
      overflow: hidden;
    }
    .about-stage-line-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 0%;
      background: var(--accent);
    }
    .about-stage-line-fill.is-filling { animation: aboutLineFill 6.6s linear forwards; }
    /* the opening stage carries three paragraphs, so it holds longer */
    .about-stage-line-fill.is-filling.is-long { animation-duration: 13s; }
    @keyframes aboutLineFill { from { width: 0%; } to { width: 100%; } }

    .about-stage-viz { margin-top: clamp(18px, 2.2vw, 26px); width: 100%; max-width: 250px; opacity: 0.9; }
    .about-stage-viz svg { width: 100%; height: auto; display: block; }
    .viz-node { fill: var(--text-faint); transition: fill 0.7s ease; }
    .viz-edge {
      stroke: var(--accent);
      stroke-width: 1;
      fill: none;
      opacity: 0;
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      transition: opacity 0.9s ease, stroke-dashoffset 0.9s ease;
    }
    .viz-trace {
      stroke: var(--accent);
      stroke-width: 2;
      fill: none;
      opacity: 0;
      stroke-dasharray: 420;
      stroke-dashoffset: 420;
    }
    .viz-result { fill: var(--accent); opacity: 0; transition: opacity 0.6s ease; }

    .about-stage-viz.viz-p0 .viz-node { fill: var(--text-muted); }
    .about-stage-viz.viz-p0 .viz-edge[data-e="1"] { opacity: 0.5; stroke-dashoffset: 0; }
    .about-stage-viz.viz-p1 .viz-node { fill: var(--text-secondary); }
    .about-stage-viz.viz-p1 .viz-edge[data-e="2"] { opacity: 0.5; stroke-dashoffset: 0; }
    .about-stage-viz.viz-p2 .viz-result { opacity: 1; }
    .about-stage-viz.viz-trace-active .viz-trace { animation: vizTraceDraw 2.1s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes vizTraceDraw {
      0%   { opacity: 0;    stroke-dashoffset: 420; stroke-width: 2; }
      50%  { opacity: 1;    stroke-dashoffset: 0;   stroke-width: 2; }
      100% { opacity: 0.55; stroke-dashoffset: 0;   stroke-width: 1.2; }
    }

    @media (prefers-reduced-motion: reduce) {
      .about-stage-line-fill { animation: none !important; width: 100%; }
      .about-stage { transition: opacity 0.3s ease; }
      .about-stage-viz.viz-trace-active .viz-trace { animation: none; opacity: 0.55; stroke-dashoffset: 0; stroke-width: 1.2; }
    }

    /* ═════════ FOUNDER VIDEO ═════════ */
    #founder { padding: clamp(64px, 7vw, 92px) 0; background: #0a0c11; }

    /* ═════════ PAUSE — full-bleed breather statement (off-white) ═════════ */
    #pause {
      position: relative;
      overflow: hidden;
      min-height: clamp(340px, 42vw, 560px);
      padding: clamp(64px, 8vw, 100px) 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    #pause .section-inner { display: flex; justify-content: center; }

    /* the closing line now carries the call to action */
    #pause .section-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(30px, 3.6vw, 46px);
      position: relative;
      z-index: 1;
    }
    #pause .closing-cta { margin-top: 0; }

    .pause-line {
      font-family: var(--editorial);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 3.4vw, 40px);
      letter-spacing: -0.015em;
      line-height: 1.28;
      color: var(--text);
      max-width: 42ch;
    }
    .pause-watermark {
      position: absolute;
      top: 0;
      right: 0;
      width: clamp(320px, 42vw, 640px);
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.22;
      overflow: hidden;
    }
    .pause-watermark svg { width: 100%; height: 100%; display: block; }
    .pause-watermark path {
      fill: none;
      stroke: var(--text);
      stroke-width: 1.1;
      stroke-linecap: round;
    }
    @media (max-width: 900px) { .pause-watermark { display: none; } }
    .fdr-wrap {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(30px, 5vw, 64px);
      align-items: center;
    }
    .fdr-copy .fdr-kicker {
      display: block;
      font-family: var(--sans);
      font-weight: 600;
      font-size: clamp(15px, 1.5vw, 18px);
      color: var(--accent-light);
      margin-bottom: 12px;
    }
    .fdr-copy h2 {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 2.7vw, 34px);
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.18;
      margin-bottom: 16px;
    }
.fdr-copy h2 .accent-text {
      color: inherit;
    }
    .fdr-p {
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.66;
      color: var(--text-secondary);
      max-width: 44ch;
      margin-bottom: 16px;
    }
    .fdr-cap {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.005em;
      color: var(--text-muted);
    }
    @media (max-width: 880px) {
      .fdr-wrap { grid-template-columns: 1fr; gap: 26px; }
      .fdr-p { max-width: none; }
    }

    /* ═════════ PAYS FOR ITSELF ═════════ */
    #savings { padding: clamp(64px, 7vw, 96px) 0; position: relative; overflow: hidden; border-top: none; }
    /* Fractured transition off the dark Modules band above — multiple
       subtle jagged breaks in the dark color laid over this light
       section's top edge, so the seam feels fractured rather than a
       single clean angle. Same principle as the capabilities divider:
       this shaped edge is the full border, no straight line beneath it. */
    #savings::before {
      content: '';
      position: absolute;
      top: -1px; left: 0; right: 0;
      height: 56px;
      background: var(--bg-deeper);
      clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 92% 30%, 84% 12%, 76% 32%, 68% 10%, 60% 28%, 52% 14%, 44% 34%, 36% 16%, 28% 30%, 20% 12%, 12% 26%, 4% 14%, 0% 22%);
      pointer-events: none;
      z-index: 2;
    }
    .sav-head { margin-bottom: clamp(28px, 3.5vw, 44px); position: relative; z-index: 1; }
    .sav-head h2 {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 2.7vw, 34px);
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.18;
    }
.sav-head h2 .accent-text {
      color: inherit;
    }
    .sav-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(24px, 3.2vw, 40px);
    }
    .sav-card {
      border-top: 1px solid var(--border);
      padding-top: 18px;
      position: relative;
    }
    /* subtle vertical separation between columns, on top of the wider gap */
    .sav-card + .sav-card { border-left: 1px solid var(--border); padding-left: clamp(24px, 3.2vw, 40px); }
    @media (max-width: 820px) {
      .sav-card + .sav-card { border-left: none; padding-left: 0; }
    }
    /* loading-bar sweep across the top border — cycles between the three
       cards on a timer, the active card's bar fills while its title
       bolds, then both hand off to the next card */
    .sav-card::after {
      content: '';
      position: absolute;
      top: -1px; left: 0;
      width: 0; height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--teal));
      transition: width 1.1s cubic-bezier(.65,0,.35,1);
    }
    .sav-card.sav-active::after { width: 100%; }
    .sav-t {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: -0.018em;
      color: var(--text-secondary);
      margin-bottom: 8px;
      transition: color .5s ease, font-weight .15s ease;
    }
    .sav-card.sav-active .sav-t {
      font-weight: 800;
      color: var(--text);
    }
    @media (prefers-reduced-motion: reduce) {
      .sav-card::after { transition: none; }
      .sav-t { transition: none; }
    }
    .sav-b {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.62;
      color: var(--text-secondary);
    }
    .sav-close {
      margin-top: clamp(56px, 6.5vw, 88px);
      padding-top: clamp(36px, 4.5vw, 56px);
      border-top: 1px solid var(--border);
      font-family: var(--editorial);
      font-optical-sizing: auto;
      font-size: clamp(26px, 3.4vw, 42px);
      font-weight: 600;
      line-height: 1.28;
      color: var(--text);
      letter-spacing: -0.015em;
      max-width: 20ch;
    }
    @media (max-width: 820px) {
      .sav-grid { grid-template-columns: 1fr; gap: 22px; }
    }

    /* ═════════ CONSOLIDATION + DEPLOYMENT — split with diagram ═════════ */
    #consolidation, #deployment { padding: clamp(64px, 7vw, 96px) 0; }
    .split-grid, #deployment .section-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
    }

    /* deployment alternates: diagram left, copy right */
    #deployment .split-head { grid-column: 2; grid-row: 1; }
    #deployment .split-vis  { grid-column: 1; grid-row: 1; }
    .split-kicker {
      display: block;
      font-family: var(--sans);
      font-weight: 600;
      font-size: clamp(15px, 1.5vw, 18px);
      color: var(--accent-light);
      margin-bottom: 12px;
    }
    .split-head h2 {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 2.7vw, 34px);
      color: var(--text);
      letter-spacing: -0.015em;
      line-height: 1.18;
      margin-bottom: 18px;
      max-width: 18ch;
    }
.split-head h2 .accent-text {
      color: inherit;
    }
    .split-p {
      font-family: var(--sans);
      font-size: 16.5px;
      line-height: 1.68;
      color: var(--text-secondary);
      margin-bottom: 14px;
      max-width: 48ch;
    }
    .split-p:last-child { margin-bottom: 0; }
    .split-vis svg { width: 100%; height: auto; display: block; }

    /* consolidation diagram */
    .cons-svg .cs-before rect,
    .cons-svg .cs-after rect {
      fill: var(--surface);
      stroke: var(--border-2);
      stroke-width: 1;
    }
    .cons-svg .cs-after rect {
      fill: rgba(78,143,247,0.07);
      stroke: rgba(78,143,247,0.42);
    }
    .cons-svg text {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      fill: var(--text-muted);
      text-anchor: middle;
    }
    .cons-svg .cs-lg { font-size: 16px; font-weight: 700; fill: var(--text); }
    .cons-svg .cs-sm { font-size: 10.5px; fill: var(--text-muted); }
    .cons-svg .cs-arrows path {
      fill: none;
      stroke: var(--accent);
      stroke-width: 1.4;
      opacity: .5;
      stroke-dasharray: 220;
      stroke-dashoffset: 220;
    }
    .split-vis.in .cons-svg .cs-arrows path { animation: csDraw 1.1s cubic-bezier(.4,0,.2,1) forwards; }
    .split-vis.in .cons-svg .cs-arrows path:nth-child(2) { animation-delay: .10s; }
    .split-vis.in .cons-svg .cs-arrows path:nth-child(3) { animation-delay: .20s; }
    .split-vis.in .cons-svg .cs-arrows path:nth-child(4) { animation-delay: .30s; }
    @keyframes csDraw { to { stroke-dashoffset: 0; } }

    /* deployment diagram */
    .dep-svg .dp-perim {
      fill: rgba(78,143,247,0.03);
      stroke: rgba(78,143,247,0.35);
      stroke-width: 1.2;
      stroke-dasharray: 5 5;
    }
    .dep-svg .dp-perim-l {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .16em;
      fill: var(--text-faint);
    }
    .dep-svg .dp-core {
      fill: rgba(78,143,247,0.10);
      stroke: rgba(78,143,247,0.5);
      stroke-width: 1.2;
    }
    .dep-svg .dp-core-t {
      font-family: var(--sans);
      font-size: 15px; font-weight: 700;
      fill: var(--text); text-anchor: middle;
    }
    .dep-svg .dp-node rect {
      fill: var(--surface);
      stroke: var(--border-2);
      stroke-width: 1;
    }
    .dep-svg .dp-node text {
      font-family: var(--sans);
      font-size: 11px; font-weight: 500;
      fill: var(--text-muted); text-anchor: middle;
    }
    .dep-svg .dp-link path {
      fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .45;
      stroke-dasharray: 70; stroke-dashoffset: 70;
    }
    .split-vis.in .dep-svg .dp-link path { animation: csDraw .8s ease forwards; }
    .split-vis.in .dep-svg .dp-link path:nth-child(2){animation-delay:.08s}
    .split-vis.in .dep-svg .dp-link path:nth-child(3){animation-delay:.16s}
    .split-vis.in .dep-svg .dp-link path:nth-child(4){animation-delay:.24s}
    .dep-svg .dp-out path { fill:none; stroke: var(--text-faint); stroke-width:1.2; stroke-dasharray:4 4; }
    .dep-svg .dp-out line { stroke:#ef4444; stroke-width:1.8; stroke-linecap:round; opacity:.7; }

    @media (max-width: 900px) {
      .split-grid, #deployment .section-inner {
        grid-template-columns: 1fr; gap: 26px;
      }
      #deployment .split-head, #deployment .split-vis,
      .split-grid .split-head, .split-grid .split-vis {
        grid-column: 1; grid-row: auto;
      }
      #deployment .split-head { order: 1; }
      #deployment .split-vis  { order: 2; }
      .split-head h2 { max-width: none; }
      .split-p { max-width: none; }
      .split-vis { max-width: 400px; margin-top: 0 !important; }
    }


    /* ═════════ STATEMENTS — DARK band ═════════ */
    #statements {
      padding: calc(var(--pad-y) * 0.8) 0;
      position: relative;
      overflow: hidden;
    }
    #statements::after {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 1px; height: 56px;
      background: linear-gradient(to bottom, var(--teal), transparent);
      opacity: 0.5;
    }
    #statements .section-inner { display: flex; flex-direction: column; }


    .statement {
      display: grid;
      grid-template-columns: 96px 1fr 1.8fr;
      align-items: baseline;
      gap: 0 56px;
      padding: 36px 0;
      border-top: 1px solid var(--border);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1);
    }
    .statement:last-child { border-bottom: 1px solid var(--border); }
    .statement.in { opacity: 1; transform: translateY(0); }


    /* ═════════ ASK — DARK band (deeper base so the window lifts off it) ═════════ */
    #ask {
      padding: var(--pad-y) 0;
      position: relative;
      --band-base: var(--bg);
    }
    #ask .section-inner {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    /* stacked so the heading, the sub-paragraph and the tabs all sit on
       the same left margin as every other section */
    .ask-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    .ask-head h2 {
      font-family: var(--sans);
      font-weight: 700;
      font-size: clamp(22px, 2.4vw, 30px);
      letter-spacing: -0.025em;
      line-height: 1.2;
      max-width: 18ch;
      color: var(--text);
    }
.ask-head h2 .accent-text {
      color: inherit;
    }

    /* four equal columns so every tab is the same width regardless of label */
    @media (max-width: 560px) {
    }

    /* Console-style surface */

    .ask-dots { display: inline-flex; gap: 7px; }
    .ask-dots span {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: rgba(255,255,255,0.10);
      border: 1px solid var(--border);
    }
    .ask-dots span:first-child  { background: rgba(239,68,68,0.45); }
    .ask-dots span:nth-child(2) { background: rgba(245,158,11,0.45); }
    .ask-dots span:nth-child(3) { background: rgba(16,185,129,0.5); }
    .ask-chrome-id {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .ask-chrome-id::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(16,185,129,0.6);
    }


    .ask-mode-label {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--accent);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      padding: 28px 36px 0;
      display: block;
      opacity: 0.8;
    }

    .ask-input-row {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 36px 56px;
      /* Keep the typing canvas fixed while prompts move between one and
         two lines. The content remains vertically centered inside it. */
      height: 126px;
    }
    .ask-field {
      font-family: var(--sans);
      font-size: clamp(17px, 1.4vw, 21px);
      font-weight: 400;
      color: var(--text);
      line-height: 1.5;
      flex: 1;
      display: block;
      align-items: center;
      min-height: 44px;
      letter-spacing: -0.01em;
    }
    .ask-typed { white-space: pre-wrap; word-break: break-word; }

    .cursor {
      display: inline-block;
      width: 2px;
      height: 1.05em;
      background: var(--accent);
      vertical-align: text-bottom;
      margin-left: 2px;
      animation: blink 1.05s step-end infinite;
      flex-shrink: 0;
    }
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

    .ask-send {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      border: none;
      cursor: default;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: 0 0 24px var(--accent-glow);
    }
    .ask-send svg { width: 16px; height: 16px; fill: #fff; }

    /* ═════════ BUILT-FOR — LIGHT band ═════════ */


    /* ═════════ CAPABILITIES — LIGHT band ═════════ */
    #capabilities {
      padding: calc(var(--pad-y) * 0.8) 0;
      position: relative;
      border-top: none;
    }
    .seam-wedge {
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 55px;
      background: #f4f0e8;
      clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 58% 100%, 0% 40%);
      pointer-events: none;
      z-index: 2;
    }
    /* Headline runs full width above; below it the stepper and the asset
       sit in the two-column arrangement from V3, at V3's sizing. */
    #capabilities .section-inner {
      display: flex;
      flex-direction: column;
    }
    .cap-top { margin-bottom: 36px; }
    .sys-wrap { position: relative; }
    .cap-header {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 2.7vw, 34px);
      letter-spacing: -0.015em;
      line-height: 1.18;
      color: var(--text);
    }

    /* see-it-work frame sizing inside the site section */
    #capabilities .sys { max-width: 100%; margin-top: 34px; }
    #capabilities .cap-top { margin-bottom: 0; }
    .cap-hint {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 14px;
    }
    .cap-sub {
      font-family: var(--sans);
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.65;
      max-width: 74ch;
      margin-top: 18px;
    }
    .cap-sub + .cap-sub { margin-top: 12px; }


    .cap-step:hover,
    .cap-step-num {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      color: var(--text-faint);
      padding-top: 4px;
      transition: color 0.3s ease;
      font-feature-settings: "tnum" 1;
    }
    .cap-step-body { display: flex; flex-direction: column; gap: 8px; }
    .cap-step-title {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 15px;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .cap-step-desc {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.4s ease, max-height 0.4s ease;
      padding-top: 0;
    }


    .carousel-frame {
      width: 100%;
      aspect-ratio: 16/11;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: #e8edf3;
      position: relative;
      box-shadow: 0 20px 40px -16px rgba(0,0,0,0.12);
    }
    .carousel-frame::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--teal) 70%, transparent);
      opacity: 0.5;
      z-index: 3;
    }
    .c-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.02);
      transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
    }
    .c-slide.active { opacity: 1; transform: scale(1); }
    .c-slide-inner {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-elevated);
    }

    /* ═════════ ADDED: hero assurance + marquee caption ═════════ */
    .hero-assurance {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 18px;
      letter-spacing: 0.01em;
    }
    .hero-band-caption {
      font-family: var(--sans);
      font-size: 12.5px;
      color: var(--text-faint);
      text-align: center;
      max-width: 60ch;
      margin: 14px auto 0;
      padding: 0 var(--gut);
      line-height: 1.5;
    }

    /* ═════════ ADDED: WHERE REVORI FITS ═════════ */


    /* ═════════ ADDED: THREE MODULES ═════════ */
    #modules {
      padding: 0;
      position: relative;
      background: #12141c;
      overflow: hidden;
      border-bottom: none;
    }
    #modules > .section-inner {
      padding: 0 !important;
      max-width: none !important;
    }
    #modules .mod-head { margin-bottom: 26px; max-width: 60ch; }
    .mod-head .mod-kicker {
      display: block;
      font-family: var(--sans);
      font-weight: 600;
      font-size: clamp(15px, 1.5vw, 18px);
      color: var(--accent-light);
      margin-bottom: 10px;
    }
    .mod-head h2 {
      font-family: var(--sans);
      font-optical-sizing: auto;
      font-weight: 620;
      font-size: clamp(24px, 2.7vw, 30px);
      letter-spacing: -0.015em;
      line-height: 1.2;
    }

    .mod-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      align-items: stretch;
    }
    .mod-cockpit-side {
      background: transparent;
      padding: clamp(28px, 4vw, 72px) clamp(16px, 2vw, 40px) clamp(28px, 4vw, 72px) clamp(16px, 3vw, 72px);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }
    .mod-text-side {
      background: transparent;
      padding: clamp(28px, 4vw, 72px) clamp(16px, 3vw, 72px) clamp(28px, 4vw, 72px) clamp(16px, 2vw, 40px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .mod-cols {
      min-height: clamp(560px, 62vw, 720px);
    }

    /* left stepper */
    .mod-stepper { display: flex; flex-direction: column; }
    .mod-step {
      display: block;
      padding: 13px 14px;
      border-top: 1px solid var(--border);
      cursor: pointer;
      position: relative;
      transition: padding-left .4s cubic-bezier(.16,1,.3,1);
    }
    .mod-stepper .mod-step:last-child { border-bottom: 1px solid var(--border); }
    .mod-step::before {
      content: '';
      position: absolute;
      left: 0; top: -1px; bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--accent), var(--teal));
      transform: scaleY(0);
      transform-origin: center;
      transition: transform .5s cubic-bezier(.16,1,.3,1);
    }
    .mod-step.active { padding-left: 14px; }
    .mod-step.active::before { transform: scaleY(1); }
    .mod-step:hover .mod-step-title { color: var(--text); }

    .mod-step-num {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .12em;
      color: var(--text-faint);
      padding-top: 2px;
      transition: color .35s ease;
    }
    .mod-step.active .mod-step-num { color: var(--accent); }

    .mod-step-body { display: flex; flex-direction: column; min-width: 0; }
    .mod-step-title {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: -0.012em;
      line-height: 1.32;
      color: var(--text-muted);
      transition: color .35s ease, font-weight .35s ease;
    }
    .mod-step.active .mod-step-title { color: var(--text); font-weight: 700; }
    .mod-step-desc {
      font-family: var(--sans);
      font-size: 13.5px;
      line-height: 1.52;
      color: var(--text-muted);
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, margin-top .4s ease;
    }
    .mod-step.active .mod-step-desc { max-height: 80px; opacity: 1; margin-top: 5px; }

    /* right panel */
    .mod-panel {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--surface);
      padding: 26px 26px 28px;
      min-height: 250px;
      overflow: hidden;
    }
    .mod-panel::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, var(--accent), var(--teal));
      opacity: .55;
    }
    .mod-pane {
      position: absolute;
      inset: 26px 26px 28px;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
    }
    .mod-pane.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

    .mod-icon {
      width: 30px; height: 30px;
      border-radius: 2px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 13px;
      background: linear-gradient(140deg, rgba(78,143,247,0.16), rgba(20,184,166,0.10));
      border: 1px solid rgba(78,143,247,0.24);
    }
    .mod-icon svg {
      width: 15px; height: 15px;
      stroke: var(--accent); fill: none;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    }
    .mod-pane-t {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: -0.018em;
      color: var(--text);
      margin-bottom: 14px;
    }
    .mod-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
    .mod-list li {
      position: relative;
      padding-left: 16px;
      font-family: var(--sans);
      font-size: 14.5px;
      line-height: 1.56;
      color: var(--text-secondary);
      opacity: 0;
      transform: translateX(6px);
      transition: opacity .45s ease, transform .45s ease;
    }
    .mod-pane.active li { opacity: 1; transform: translateX(0); }
    .mod-pane.active li:nth-child(1){transition-delay:.10s}
    .mod-pane.active li:nth-child(2){transition-delay:.16s}
    .mod-pane.active li:nth-child(3){transition-delay:.22s}
    .mod-pane.active li:nth-child(4){transition-delay:.28s}
    .mod-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 8px;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .6;
    }

    /* ═════════ Cockpit: My Workflows preview ═════════ */
    #modules .sys-cockpit {
      width: 100%;
      max-width: none;
      margin: 0;
    }
    #modules .sys-cockpit .sys-body {
      height: auto;
      aspect-ratio: 1140 / 640;
      max-height: 640px;
    }
    /* pane contents — sit inside .sys-main */
    .cp-wrap { position:relative; padding:22px 22px 22px; height:100%; display:flex; flex-direction:column; }
    .cp-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .cp-h h4 { font-family:var(--sans); font-size:15px; font-weight:700; color:#fff; letter-spacing:-.01em; margin:0; }
    .cp-h .cp-sub { font-size:10.5px; color:rgba(229,233,240,.45); margin-left:10px; font-weight:500; letter-spacing:.01em; }
    .cp-new { width:26px; height:26px; border-radius:6px; background:rgba(42,212,229,.14); border:1px solid rgba(42,212,229,.4); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:400; line-height:1; transition:background .25s, transform .15s; }
    .cp-new.pulse { background:rgba(42,212,229,.28); transform:scale(0.94); }

    .cp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; transition:opacity .25s; }
.cp-wrap.creating .cp-grid { opacity:0; pointer-events:none; }
.cp-wrap.creating .cp-h { opacity:0; pointer-events:none; transition:opacity .25s; }
    .cp-tile { position:relative; border:1px solid rgba(255,255,255,.07); border-radius:7px; padding:13px 14px; background:rgba(255,255,255,.018); transition:background .3s, border-color .3s; }
    .cp-tile.hover { background:rgba(255,255,255,.045); border-color:rgba(42,212,229,.3); }
    .cp-tile-t { font-size:12.5px; font-weight:600; color:#fff; margin-bottom:3px; letter-spacing:-.005em; }
    .cp-tile-d { font-size:10.5px; line-height:1.5; color:rgba(229,233,240,.6); }
    .cp-tile.newborn { animation:cpNew .8s ease-out; border-color:rgba(42,212,229,.55); background:rgba(42,212,229,.06); }
    @keyframes cpNew { 0%{opacity:0; transform:translateY(6px);} 100%{opacity:1; transform:translateY(0);} }

    .cp-tip { position:absolute; z-index:8; background:#141822; border:1px solid rgba(255,255,255,.11); border-radius:6px; padding:10px 12px; font-size:11px; line-height:1.5; color:#e5e9f0; max-width:230px; box-shadow:0 12px 30px rgba(0,0,0,.55); opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; pointer-events:none; }
    .cp-tip.on { opacity:1; transform:translateY(0); }
    .cp-tip b { color:#fff; }

    .cp-create { position:absolute; inset:22px; background:transparent; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .35s, transform .35s; display:flex; flex-direction:column; z-index:5; }
    .cp-create.on { opacity:1; transform:translateY(0); }
    .cp-create h5 { margin:0 0 4px; font-size:14px; font-weight:700; color:#fff; letter-spacing:-.005em; }
    .cp-create .cp-hint { font-size:10.5px; color:rgba(229,233,240,.5); margin-bottom:14px; }
    .cp-field { border:1px solid rgba(42,212,229,.4); border-radius:8px; padding:14px 16px; background:rgba(255,255,255,.03); font-size:12.5px; color:#fff; line-height:1.55; min-height:88px; box-shadow:0 0 0 4px rgba(42,212,229,.06); overflow-wrap:break-word; word-break:break-word; white-space:normal; }
    .cp-field .cp-caret { display:inline-block; width:1.5px; height:14px; background:var(--cyan); vertical-align:-2px; margin-left:2px; animation:cpCaret .8s steps(2) infinite; }
    @keyframes cpCaret { 50%{opacity:0;} }

    .cp-compile { margin-top:14px; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; }
    .cp-compile.on { opacity:1; transform:translateY(0); }
    .cp-compile-l { font-size:9.5px; letter-spacing:.18em; color:rgba(229,233,240,.4); font-weight:600; margin-bottom:8px; }
    .cp-recipe { border:1px solid rgba(255,255,255,.08); border-radius:7px; padding:0; overflow:hidden; }
    .cp-row { display:grid; grid-template-columns:88px 1fr; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05); font-size:11px; }
    .cp-row:last-child { border-bottom:0; }
    .cp-row .cp-k { color:rgba(229,233,240,.5); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:9.5px; padding-top:2px; }
    .cp-row .cp-v { color:#e5e9f0; line-height:1.5; }
    .cp-row .cp-v b { color:#fff; }

    /* fake cursor */
    .cp-cursor { position:absolute; z-index:9; width:16px; height:20px; left:50%; top:50%; opacity:0; transition:left .9s cubic-bezier(.4,.05,.2,1), top .9s cubic-bezier(.4,.05,.2,1), opacity .3s; pointer-events:none; }
    .cp-cursor svg { width:100%; height:100%; fill:#fff; stroke:#000; stroke-width:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
    .cp-cursor.on { opacity:1; }
    .cp-cursor.click svg { transform:scale(.85); transform-origin:top left; }

    /* threads empty state */
    .sys-rail-empty { padding:8px 10px; font-size:11px; color:rgba(255,255,255,.28); font-style:italic; }


    /* split holds at all widths — no stacking */


    /* ═════════ ADDED: ask subhead + callout, cap export ═════════ */
    /* Tab-specific notes. Hidden unless their tab is the active one, so
       Production and Book of Business show none. */
    @keyframes askNoteIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: none; }
    }
    /* runs the full width beneath both columns */
    .cap-export {
      font-size: 15px;
      color: var(--text);
      line-height: 1.6;
      margin-top: 40px;
      padding-top: 22px;
      border-top: 1px solid var(--border);
      max-width: none;
    }

    /* ═════════ THREE LINES (CLOSING) ═════════ */
    #three-lines {
      padding: calc(var(--pad-y) * 1.4) 0 var(--pad-y);
      min-height: 74vh;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      background:
        radial-gradient(60% 40% at 50% 30%, rgba(78,143,247,0.08), transparent 70%),
        var(--bg);
      border-top: 1px solid var(--border);
    }
    /* giant ghost wordmark behind the close — same uppercase, letter-spaced
       treatment as the real nav logo, just huge and faint */
    .tl-ghost {
      position: absolute;
      inset: auto 0 0 0;
      text-align: center;
      font-family: var(--sans);
      font-weight: 800;
      text-transform: uppercase;
      font-size: clamp(70px, 11vw, 190px);
      line-height: 0.8;
      letter-spacing: 0.06em;
      color: var(--accent);
      opacity: 0.06;
      pointer-events: none;
      user-select: none;
      z-index: 0;
      transform: translateY(18%);
    }
    #three-lines .section-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .closing-line {
      font-family: var(--sans);
      font-weight: 800;
      text-transform: uppercase;
      font-size: clamp(22px, 3.7vw, 45px);
      color: var(--text);
      text-align: center;
      letter-spacing: 0.01em;
      line-height: 1.2;
      margin-bottom: 22px;
      opacity: 0;
      filter: blur(8px);
      transform: translateY(8px);
      transition:
        opacity 1.4s cubic-bezier(.16,1,.3,1),
        filter 1.4s cubic-bezier(.16,1,.3,1),
        transform 1.4s cubic-bezier(.16,1,.3,1);
      max-width: none;
      width: 100%;
      padding: 0 clamp(8px, 2vw, 24px);
      box-sizing: border-box;
    }
.closing-line:nth-child(2) {
      color: var(--accent);
    }
    .closing-line.visible { opacity: 1; filter: blur(0); transform: translateY(0); }
    .closing-line:last-of-type { margin-bottom: 0; }

    .closing-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 40px;
      padding: 16px 32px;
      background: linear-gradient(135deg, var(--accent), var(--accent-light));
      color: #fff;
      border: none;
      border-radius: 4px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.02em;
      text-decoration: none;
      cursor: pointer;
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .closing-cta::after { content: '→'; font-size: 17px; transition: transform 0.3s; }
    .closing-cta:hover {
      box-shadow: 0 8px 36px var(--accent-glow);
      transform: translateY(-1px);
    }
    .closing-cta:hover::after { transform: translateX(3px); }

    /* ═════════ FOOTER ═════════ */
    footer {
      padding: 40px var(--gut);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px;
    }
    .footer-text {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      line-height: 1.8;
    }
    .footer-text a {
      color: inherit;
      text-decoration: none;
    }
    .footer-text a:hover,
    .footer-text a:focus-visible {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* ═════════ Scroll choreography ═════════
       Every entrance is opacity + transform driven by three custom
       properties: --i (stagger index, drives the per-element delay),
       and --reveal-x / --reveal-y / --reveal-scale (direction + weight
       of the motion). Direction modifier classes below set the latter
       three so sections don't all rise from the same distance — a
       column of copy can drift in from the left while the visual next
       to it drifts from the right, etc. Headline-level elements add
       .reveal-head for a blur-into-focus finish instead of a plain
       fade. */
    .r, .scroll-reveal {
      opacity: 0;
      transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 22px), 0) scale(var(--reveal-scale, 0.97));
      transition:
        opacity 1.5s cubic-bezier(.16,1,.3,1),
        transform 1.7s cubic-bezier(.16,1,.3,1),
        filter 1.6s cubic-bezier(.16,1,.3,1);
      will-change: opacity, transform;
    }
    .r { transition-delay: calc(var(--i, 0) * 210ms); }
    .scroll-reveal { transition-delay: calc(var(--i, 0) * 145ms); }
    .r.in, .scroll-reveal.in {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    /* headline treatment — comes into focus rather than just fading */
    .reveal-head {
      filter: blur(7px);
      --reveal-y: 12px;
      --reveal-scale: 0.985;
    }
    .reveal-head.in { filter: blur(0); }

    /* direction variants — applied alongside .scroll-reveal / .r */
    .reveal-from-left  { --reveal-x: -30px; --reveal-y: 0px; --reveal-scale: 0.98; }
    .reveal-from-right { --reveal-x: 30px;  --reveal-y: 0px; --reveal-scale: 0.98; }
    .reveal-rise-lg     { --reveal-y: 34px; --reveal-scale: 0.95; }

    @media (prefers-reduced-motion: reduce) {
      .r, .scroll-reveal, .reveal-head {
        transition: opacity 0.4s ease !important;
        transform: none !important;
        filter: none !important;
        transition-delay: 0s !important;
      }
    }

    /* ═════════ Mobile ═════════ */
    @media (max-width: 960px) {
      :root { --pad-y: 60px; }
      .ask-input-row { height: 152px; }
      .about-side { position: static; }
      .ask-head { gap: 18px; }
      .statement {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 8px 18px;
        padding: 36px 0;
      }
    }

    @media (max-width: 640px) {
      #hero { min-height: 580px; }
      .hero-display { font-size: clamp(36px, 9vw, 56px); }
      .ask-input-row { height: 208px; padding: 16px 22px 38px; }
      .ask-mode-label { padding: 22px 22px 0; }
      .hero-band-item { padding: 0 32px; }
      .hero-band::before { display: none; }
    }
    .hero-content { position:relative; z-index:2; width:100%; max-width:1500px; margin:0 auto; padding:0 clamp(24px, 3vw, 52px); }
    .hero-content .hero-display { max-width:26ch; white-space:normal; font-size:clamp(1.9rem, 3.3vw, 3rem); font-weight:520; line-height:1.16; letter-spacing:-0.01em; }
    .hero-content .hero-keystone { max-width: 50ch; }
    .hero-cta-alt {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 24px;
      border: 1px solid var(--border-2);
      border-radius: 4px;
      background: rgba(255,255,255,0.05);
      color: var(--text);
      font-family: var(--sans); font-weight: 600; font-size: 14px;
      letter-spacing: .01em; text-decoration: none; white-space: nowrap;
      transition: border-color .3s ease, background .3s ease, transform .3s ease;
    }
    .hero-cta-alt span { transition: transform .3s ease; }
    .hero-cta-alt:hover { border-color: rgba(78,143,247,.5); background: rgba(255,255,255,0.09); transform: translateY(-1px); }
    .hero-cta-alt:hover span { transform: translateX(3px); }
    .personal-video-wrap { width: 100%; max-width:none; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); background: var(--bg-elevated); }
    .personal-video-container { position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden; }
    .personal-video-container iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background: var(--bg-elevated); }
    @media (max-width: 760px) { .hero-content { max-width:none; padding:0 32px; } .hero-content .hero-inner { padding:0; } .hero-content .hero-display { max-width:none; font-size:clamp(25px, 6.6vw, 30px); line-height:1.2; margin-bottom:28px; } .hero-content .hero-keystone { max-width:none; margin-bottom:22px; } .personal-video-wrap { max-width:100%; } #hero { min-height:0; height:auto; padding:120px 0 72px; } }
    /* ── centered minimal menu ── */
    .nav-links { display:flex; align-items:stretch; height:72px; gap:clamp(18px,2.4vw,34px); justify-self:center; }
    .nav-item { position:relative; display:flex; align-items:stretch; }
    .nav-link {
      display:inline-flex; align-items:center; gap:6px;
      font-family:var(--sans); font-size:11.5px; font-weight:600;
      color:var(--text-secondary); text-decoration:none;
      letter-spacing:.14em; text-transform:uppercase;
      background:none; border:0; padding:0; cursor:pointer;
      transition:color .25s ease;
    }
    .nav-link:hover, .nav-item.open > .nav-link, .nav-link[aria-expanded="true"] { color:var(--text); }
    .nav-caret { width:8px; height:8px; flex:0 0 8px; opacity:.6; transition:transform .25s ease, opacity .25s ease; }
    .nav-item.open .nav-caret { transform:rotate(180deg); opacity:1; }

    /* full-bleed mega panel */
    .nav-panel {
      /* nav#nav gains backdrop-filter when open, making it the containing
         block for this fixed panel. Offset by both the ribbon and nav height. */
      position:fixed; top:calc(var(--ribbon-h) + 72px); left:0; right:0;
      background:rgba(10,12,18,.985);
      -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      box-shadow:0 30px 70px rgba(0,0,0,.55);
      opacity:0; visibility:hidden; pointer-events:none;
      transform:translateY(-6px);
      transition:opacity .22s ease, transform .22s ease, visibility .22s;
      z-index:190;
    }
    .nav-item.open .nav-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); z-index:201; }

    .nav-panel-inner {
      max-width:var(--w); margin:0 auto;
      padding:clamp(36px,4vw,56px) clamp(24px,4vw,64px) clamp(40px,4.5vw,60px);
      display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
      column-gap:clamp(32px,5vw,88px); row-gap:38px;
      text-align:left;
    }
    .nav-panel-inner.cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }

    .np-item { display:block; text-decoration:none; max-width:340px; }
    .np-title {
      font-family:var(--sans); font-size:15px; font-weight:600;
      color:var(--text); letter-spacing:0; margin-bottom:7px;
      transition:color .2s ease;
    }
    .np-desc {
      font-family:var(--sans); font-size:13.5px; font-weight:400;
      line-height:1.55; color:var(--text-secondary);
    }
    .np-item:hover .np-title { color:var(--accent); }
    .np-item-external {
      grid-column: 1 / -1;
      margin-top: 10px;
      padding: 14px 16px;
      border: 1px solid rgba(78,143,247,0.3);
      border-radius: 6px;
      background: rgba(78,143,247,0.07);
      transition: border-color .25s ease, background .25s ease;
    }
    .np-item-external:hover { border-color: rgba(78,143,247,0.55); background: rgba(78,143,247,0.12); }
    .np-item-external .np-title { display:flex; align-items:center; gap:6px; color: var(--accent-light); }
    .np-item-external .np-desc { color: var(--text-secondary); }
    .mm-sub a.mm-external {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(78,143,247,0.3);
      border-radius: 6px;
      background: rgba(78,143,247,0.08);
      color: var(--accent-light);
    }

    /* open-state underline on the trigger, Harvey style */
    .nav-item[data-dropdown] > .nav-link::after {
      content:''; position:absolute; left:0; right:0; bottom:0;
      height:1.5px; background:var(--text);
      transform:scaleX(0); transform-origin:center;
      transition:transform .25s ease;
    }
    .nav-item.open > .nav-link::after { transform:scaleX(1); }
    .hamburger { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
    .hamburger span { display:block; width:22px; height:2px; margin:4px 0; background:var(--text); }
    .mobile-menu { display:none; }
    @media (max-width: 1080px) { .nav-links { display:none; } .hamburger { display:block; } nav#nav { grid-template-columns:1fr auto; } nav#nav .nav-right .nav-cta { display:none; } }
    @media (max-width: 1080px) { .mobile-menu { position:fixed; top:calc(var(--ribbon-h) + 72px); left:0; right:0; bottom:0; z-index:299; display:none; flex-direction:column; gap:0; padding:24px 24px 48px; overflow-y:auto; background:rgba(12,14,20,.98); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); } .mobile-menu.open { display:flex; } .mobile-menu a { color:var(--text); text-decoration:none; font-size:16px; } .mm-group { padding:16px 0; border-bottom:1px solid var(--border); } .mm-label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:10px; } .mm-group .mm-sub { display:flex; flex-direction:column; gap:12px; padding-left:2px; } .mm-group .mm-sub a { font-size:15px; color:var(--text); } .mm-single { display:block; padding:16px 0; border-bottom:1px solid var(--border); font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text); } .mobile-menu .mobile-cta { margin-top:24px; align-self:flex-start; padding:12px 24px; background:linear-gradient(135deg,var(--accent),var(--accent-light)); border-radius:4px; font-weight:700; font-size:14px; color:#fff; } }

    /* ═══════════ SEE IT WORK — live system replica ═══════════ */

:root{--sys-bg:#05060b;--sys-border:rgba(255,255,255,0.07);--sys-border-2:rgba(255,255,255,0.12);--sys-text:#e6ecf3;--sys-text-2:rgba(255,255,255,0.66);--sys-muted:rgba(255,255,255,0.38);--cyan:#2ad4e5;--blue:#3b82f6;}








.sys{border:1px solid var(--sys-border-2);border-radius:0;overflow:hidden;background:radial-gradient(58% 60% at 50% 30%, rgba(78,143,247,0.16), transparent 68%), radial-gradient(40% 45% at 85% 90%, rgba(20,184,166,0.08), transparent 70%), var(--sys-bg);font-family:var(--sans);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset}
.sys *{font-family:inherit}
.sys::before,.sys::after{display:none !important}
.sys-topline{display:none !important}

.sys-rail-brand{display:flex;align-items:center;gap:10px;padding:2px 3px 14px}
.sys-burger{display:flex;flex-direction:column;gap:3px;cursor:pointer}
.sys-burger i{display:block;width:14px;height:1.5px;background:rgba(255,255,255,.5);border-radius:0}
.sys-logo{display:flex;align-items:center;gap:8px}
.sys-logo-svg{height:20px;width:auto;display:block}
.sys-logo-mark{width:22px;height:22px;border-radius:0;border:1.5px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--cyan)}
.sys-logo-word{font-size:13px;font-weight:700;letter-spacing:.26em}

.sys-filters{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--sys-border);flex-wrap:wrap}
.sys-sel{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:6px 10px;border:1px solid var(--sys-border);border-radius:0;font-size:11.5px;color:var(--sys-text-2);min-width:118px}
.sys-sel span:last-child{font-size:8px;color:var(--sys-muted)}
.sys-flabel{font-size:11px;color:var(--sys-muted)}
.sys-pills{display:flex;gap:5px}
.sys-pill{padding:6px 13px;border-radius:0;font-size:11.5px;font-weight:500;color:var(--sys-text-2);border:1px solid transparent;transition:background .35s,color .35s}
.sys-pill.on{background:var(--cyan);color:#04222a;font-weight:600}
.sys-filters-r{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--sys-muted)}
.sys-hide{padding:5px 11px;border:1px solid var(--sys-border);border-radius:0;color:var(--sys-text-2);font-size:11px}

.sys-chatlabel{display:none}
.sys-body{display:grid;grid-template-columns:236px 1fr;padding:14px 14px 14px 0;height:640px}

.sys-rail{border:none;border-right:1px solid var(--sys-border);border-radius:0;padding:12px 14px;display:flex;flex-direction:column;background:rgba(255,255,255,.012);min-height:0;overflow:hidden}
.sys-greet{display:none;flex:1;min-height:0;align-items:center;justify-content:center;text-align:center}
.sys-greet-text{font-size:26px;font-weight:600;color:var(--sys-text);letter-spacing:.005em}
.sys-main.pre-chat .sys-greet{display:flex}
.sys-main.pre-chat .sys-scroll{display:none}
.sys-rail-menu{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.sys-rail-menu .rmi{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:0;border:1px solid transparent;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--sys-text-2);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.sys-rail-menu .rmi{border-radius:7px}
.sys-rail-menu .rmi:hover{background:rgba(255,255,255,.045);color:#fff}
.sys-rail-menu .rmi.on{background:rgba(255,255,255,.07);border-color:transparent;color:var(--sys-text);font-weight:600}
.sys-rail-menu .rmi svg{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.sys-rail-div{height:1px;background:var(--sys-border);margin:0 3px 12px}
.rail-group{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;color:var(--sys-muted);padding:0 3px;margin:0 0 9px}
.rail-group.second{margin-top:18px;padding-top:14px;border-top:1px solid var(--sys-border)}
.wf-t{font-size:12.5px;font-weight:600;color:var(--sys-text);margin-bottom:4px;letter-spacing:.005em}
.wf-d{font-size:11px;line-height:1.45;color:var(--sys-muted)}
.thread.on .wf-t{color:#fff}
.sys-rail-menu .rmi[data-mode]{cursor:pointer}
.thread-badge{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.12em;color:var(--cyan);border:1px solid rgba(42,212,229,.35);padding:2px 5px;margin-bottom:6px}
.file-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;background:rgba(255,255,255,.05);border:1px solid var(--sys-border);font-size:11px;color:var(--sys-text-2);max-width:100%}
.file-chip .fc-x{width:15px;height:15px;flex:0 0 15px;background:#1d6f43;color:#fff;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.file-chip .fc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-input-wrap{display:flex;flex-direction:column;gap:0;width:100%;max-width:780px;margin:0 auto}
.sys-attach{display:none;margin-bottom:-1px;padding:10px 16px 12px 18px;border:1px solid var(--sys-border-2);border-bottom:0;border-radius:14px 14px 0 0;background:rgba(255,255,255,.03)}
.sys-attach.on{display:block}
.sys-attach.on + .sys-input{border-radius:0 0 14px 14px;margin-top:0}
.msg-file{align-self:flex-end;margin-bottom:-14px}
.sys-attach-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--sys-muted);cursor:pointer;transition:color .25s;flex-shrink:0;margin-right:2px}
.sys-attach-btn:hover{color:#fff}
.sys-attach-btn svg{width:16px;height:16px}
.sys-rail-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;color:var(--sys-muted);margin-bottom:11px;padding:0 3px}
.sys-rail-list{flex:1;overflow-y:auto;min-height:0;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.sys-rail-list::-webkit-scrollbar{width:5px}
.sys-rail-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:0}
.thread{border-radius:7px;padding:10px 11px;margin-bottom:4px;border:1px solid transparent;cursor:pointer;transition:background .3s,border-color .3s}
.thread:hover{background:rgba(255,255,255,.045)}
.thread:hover .thread-t{color:#fff}
.thread.on{background:rgba(255,255,255,.07);border-color:transparent}
.thread.on .thread-t{color:#fff}
.thread-t{font-size:10.5px;font-weight:600;line-height:1.45;color:var(--sys-text);transition:color .25s}
.sys-rail-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--sys-border);font-size:9.5px;color:var(--sys-muted)}

.sys-main{display:flex;flex-direction:column;padding-left:14px;min-width:0;min-height:0;overflow:hidden;position:relative}
.sys-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.sys-scroll::-webkit-scrollbar{width:7px}
.sys-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:0}
.sys-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
.sys-stream{display:flex;flex-direction:column;gap:22px;padding:0 26px 10px 6px;width:100%;max-width:780px;margin:0 auto}

.msg-user{align-self:flex-end;max-width:82%;background:rgba(255,255,255,.06);border:0;border-radius:14px;padding:11px 16px;font-size:12.5px;line-height:1.5;color:var(--sys-text);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.msg-user.in{opacity:1;transform:none}
.msg-bot{border:0;border-radius:0;padding:6px 2px 2px;background:none;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.msg-bot.in{opacity:1;transform:none}
.rv{opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s}
.rv.in{opacity:1;transform:none}

.b-line{font-size:12.5px;line-height:1.65;color:var(--sys-text-2);margin-bottom:11px}
.b-line strong{color:var(--sys-text);font-weight:600}
.b-h{font-size:12.5px;font-weight:700;color:var(--sys-text);margin:4px 0 9px}
.b-h2{font-size:12px;font-weight:700;color:var(--sys-text);margin:2px 0 7px}
.b-rule{height:1px;background:var(--sys-border);margin:15px 0 13px}
.b-memo{font-size:12px;line-height:1.7;color:var(--sys-text-2);margin-bottom:11px}
.b-memo b{color:var(--sys-text);font-weight:700}

.b-kpis{display:grid;gap:10px;margin-bottom:14px}
.kpi{border:1px solid var(--sys-border);border-radius:0;padding:12px 13px;background:linear-gradient(160deg,rgba(40,72,110,.2),rgba(255,255,255,.012))}
.kpi-l{font-size:8.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sys-muted);margin-bottom:7px;line-height:1.3}
.kpi-v{font-size:19px;font-weight:700;color:var(--sys-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-s{font-size:9.5px;color:var(--sys-muted);margin-top:5px}
.kpi-d{font-size:10px;font-weight:600;margin-top:5px;color:var(--green)}
.kpi-d.dn{color:var(--green)}

/* gauges */
.b-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px}
.gauge{border:1px solid var(--sys-border);border-radius:0;padding:14px 10px 12px;background:rgba(255,255,255,.014);text-align:center}
.gauge svg{width:100%;max-width:126px;margin:0 auto;display:block}
.g-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:11;stroke-linecap:round}
.g-fill{fill:none;stroke:var(--green);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1)}
.g-v{font-size:19px;font-weight:700;color:var(--sys-text);margin-top:-4px}
.g-l{font-size:8.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sys-muted);margin-top:4px}

.b-tbl{width:100%;border-collapse:collapse;margin-bottom:13px;font-size:11.5px}
.b-tbl thead th{background:rgba(255,255,255,.05);color:var(--sys-text);font-weight:600;text-align:left;padding:8px 12px;border-bottom:1px solid var(--sys-border);font-size:11px;white-space:nowrap}
.b-tbl tbody tr{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.b-tbl tbody tr.in{opacity:1;transform:none}
.b-tbl tbody td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.045);color:var(--sys-text-2);font-variant-numeric:tabular-nums}
.b-tbl tbody td:first-child{color:var(--sys-text);font-weight:600}
.b-tbl tbody tr.tot td{border-bottom:0;font-weight:700;color:var(--sys-text)}

.b-chart{border:1px solid rgba(78,143,247,.22);border-radius:0;padding:15px 14px 10px;margin-bottom:13px;background:rgba(10,20,38,.4);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.b-chart.in{opacity:1;transform:none}
.ch-title{text-align:center;font-size:11.5px;font-weight:700;color:var(--sys-text);margin-bottom:4px}
.ch-legend{display:flex;justify-content:flex-end;gap:14px;margin-bottom:2px}
.ch-lg{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;color:var(--sys-text-2)}
.ch-lg i{width:8px;height:8px;border-radius:50%}
.b-chart svg{width:100%;display:block}
.gridline{stroke:rgba(255,255,255,.055);stroke-width:1}
.axlbl{font-size:7.5px;fill:var(--sys-muted)}
.axlbl-x{font-size:8px;fill:var(--sys-text-2);font-weight:500}
.ln-path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.b-sum{margin-bottom:11px}
.b-sum-i{font-size:12px;line-height:1.62;color:var(--sys-text-2);padding-left:16px;margin-bottom:7px}
.b-sum-i b{color:var(--sys-text);font-weight:700}
.b-steps{margin:0 0 11px 0}
.b-step{font-size:12px;line-height:1.62;color:var(--sys-text-2);padding-left:30px;margin-bottom:6px}
.b-step b{color:var(--sys-text);font-weight:700}

.b-links{font-size:11.5px;margin-bottom:9px}
.b-links a{color:#6da3fa;text-decoration:underline;text-underline-offset:2px}
.b-links span{color:var(--sys-muted);margin:0 6px}
.b-rel{margin-bottom:11px}
.b-rel-h{font-size:11.5px;font-weight:700;color:var(--sys-text);margin-bottom:6px}
.b-rel a{display:block;font-size:11.5px;color:#6da3fa;text-decoration:underline;text-underline-offset:2px;padding-left:16px;margin-bottom:4px}
.b-plain{font-size:11.5px;color:var(--sys-text-2);margin-bottom:7px}

.b-meta{display:flex;align-items:center;gap:11px;margin-top:4px}
.b-meta-t{font-size:10.5px;color:var(--sys-muted)}
.b-pdf{font-size:10.5px;padding:4px 10px;border:1px solid rgba(78,143,247,.35);border-radius:0;color:#6da3fa}

.thinking{display:flex;align-items:center;gap:10px;padding:10px 2px;border:0;border-radius:0;background:none;opacity:0;transition:opacity .35s}
.thinking.in{opacity:1}
.think-dots{display:flex;gap:4px}
.think-dots i{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:td 1.3s infinite}
.think-dots i:nth-child(2){animation-delay:.18s}
.think-dots i:nth-child(3){animation-delay:.36s}
@keyframes td{0%,60%,100%{opacity:.22;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.think-txt{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--sys-muted)}

.jump{position:absolute;bottom:92px;left:50%;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:0;
  background:rgba(20,30,48,.94);border:1px solid rgba(78,143,247,.4);backdrop-filter:blur(8px);
  font-size:10.5px;color:#9dc0fb;cursor:pointer;z-index:6;transition:opacity .3s,transform .3s}
.jump.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

.sys-input{width:100%;max-width:780px;margin-left:auto;margin-right:auto;margin-top:14px;border:1px solid var(--sys-border-2);border-radius:14px;background:rgba(255,255,255,.03);padding:15px 16px 15px 18px;min-height:66px;display:flex;align-items:flex-start;gap:12px;box-shadow:0 8px 28px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.02) inset;transition:border-color .3s,box-shadow .3s}
.sys-input:hover{border-color:rgba(255,255,255,.2)}
.sys-input-txt{flex:1;font-size:12.5px;line-height:1.5;color:var(--sys-text);min-height:20px}
.sys-input-txt.ph{color:var(--sys-muted)}
.cur{display:inline-block;width:1.5px;height:14px;background:var(--cyan);vertical-align:-2px;margin-left:2px;animation:bl 1.1s steps(1) infinite}
@keyframes bl{0%,50%{opacity:1}51%,100%{opacity:0}}
.sys-send{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s,box-shadow .25s}
.sys-send.fire{transform:scale(1.14);box-shadow:0 0 22px rgba(59,130,246,.55)}
.sys-send svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:920px){
  .b-gauges{grid-template-columns:1fr}
}


/* 2026 product architecture and page polish */
.product-nav-item { border-top:1px solid rgba(42,212,229,.32); padding-top:14px; }
.product-nav-item .np-title { color:#2ad4e5; }
.np-menu-rule { grid-column:1 / -1; margin:4px 0 0; padding:10px 0 2px; border-top:1px solid var(--border); font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); }
.mm-product-divider { display:block; margin:3px 0 0; padding-top:12px; border-top:1px solid var(--border); font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); }
.fin-intro-grid { align-items:start; }
.fin-product-peek { margin-top:28px; display:flex; gap:12px; align-items:center; max-width:560px; padding:14px 16px; background:rgba(18,32,51,.7); border:1px solid rgba(42,212,229,.26); border-radius:8px; box-shadow:0 14px 36px rgba(2,8,18,.18); }
.fin-product-peek svg { width:36px; flex:none; } .fin-product-peek strong { display:block; font-size:12px; letter-spacing:.03em; } .fin-product-peek span { display:block; margin-top:3px; color:var(--text-secondary); font-size:12px; }
@media(max-width:760px){.fin-product-peek{margin-top:20px}.np-menu-rule{display:none}}

/* Product navigation: intentionally compact and quiet. */
.products-menu .nav-panel { background:#0a0d14; }
.products-menu .nav-panel-inner.has-feature { grid-template-columns:1fr; max-width:1180px; min-height:0; padding:26px clamp(28px,4vw,54px) 28px; }
.products-menu .nav-panel-inner.has-feature .np-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 58px; max-width:820px; }
.products-menu .np-links::before { content:'Core products'; grid-column:1/-1; color:var(--text-secondary); font:500 9px var(--mono); letter-spacing:.16em; text-transform:uppercase; padding-bottom:2px; }
.products-menu .product-nav-item, .products-menu .nav-feature { display:none; }
.products-menu .np-menu-rule { margin:7px 0 1px; padding:15px 0 2px; }
.products-menu .np-item { max-width:none; padding:0; }
.products-menu .np-item .np-title { font-size:14px; margin-bottom:3px; }
.products-menu .np-item .np-desc { font-size:12px; line-height:1.42; max-width:38ch; }
@media(max-width:760px){.products-menu .nav-panel-inner.has-feature .np-links{grid-template-columns:1fr;gap:16px}.products-menu .np-links::before{display:none}}

/* Two-product menu: product selection, not a dense destination list. */
.products-menu .nav-panel { background:#0a0d14; }
.products-menu .product-menu-panel { width:min(1060px,calc(100vw - 48px)); margin:0 auto; padding:26px 0 30px; }
.product-menu-heading { display:flex; align-items:baseline; gap:28px; margin:0 0 18px; }
.product-menu-heading span { color:var(--text); font:600 12px var(--sans); letter-spacing:.01em; }
.product-menu-heading p { margin:0; max-width:670px; color:var(--text-secondary); font-size:12px; line-height:1.45; }
.product-menu-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.product-menu-card { display:block; overflow:hidden; color:var(--text); text-decoration:none; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#101118; transition:transform .22s ease,border-color .22s ease,background .22s ease; }
.product-menu-card-new { border-color:rgba(42,212,229,.35); }
.product-menu-card:hover { transform:translateY(-3px); border-color:rgba(42,212,229,.6); background:#131722; }
.pmc-visual { height:132px; background-size:cover; background-position:center; filter:brightness(.55) saturate(.75); transition:filter .22s ease,transform .35s ease; }
.product-menu-card:hover .pmc-visual { filter:brightness(.75) saturate(.9); transform:scale(1.02); }
.pmc-revori { background-image:linear-gradient(90deg,rgba(8,11,17,.1),rgba(8,11,17,.5)),url('onprem-machine.webp'); }
.pmc-revori2 { background-image:linear-gradient(90deg,rgba(6,11,18,.15),rgba(6,11,18,.55)),url('ai-particles-poster.jpg'); }
.pmc-copy { padding:18px 20px 20px; }
.pmc-label { display:block; margin-bottom:8px; color:var(--text-secondary); font:500 9px var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.pmc-label i { color:var(--accent); font-style:normal; }
.pmc-copy h3 { margin:0 0 7px; color:var(--text); font:500 24px var(--sans); letter-spacing:-.025em; }
.pmc-copy p { margin:0; min-height:38px; max-width:46ch; color:var(--text-secondary); font-size:12px; line-height:1.45; }
.pmc-link { display:block; margin-top:16px; color:var(--text); font-size:12px; font-weight:600; }.pmc-link b{color:var(--accent);margin-left:4px;transition:transform .2s}.product-menu-card:hover .pmc-link b{display:inline-block;transform:translateX(4px)}
@media(max-width:760px){.products-menu .product-menu-panel{width:auto;padding:22px 24px 28px}.product-menu-heading{display:block}.product-menu-heading span{display:block;margin-bottom:8px}.product-menu-cards{grid-template-columns:1fr}.pmc-visual{height:105px}}

/* Products menu: core products and solution links on the left, comparison action on the right. */
.products-menu .nav-panel{background:#0a0d14}.products-menu .product-menu-panel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);gap:clamp(34px,5vw,72px);width:min(1120px,calc(100vw - 56px));margin:0 auto;padding:30px 0 34px}.product-menu-links{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}.pm-section-label{grid-column:1/-1;color:var(--text-secondary);font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:1px}.pm-link{display:flex;justify-content:space-between;gap:12px;padding:12px 0;color:var(--text);text-decoration:none;border-top:1px solid rgba(255,255,255,.1)}.pm-link strong{display:block;font-size:14px;font-weight:600}.pm-link small{display:block;margin-top:4px;max-width:28ch;color:var(--text-secondary);font-size:11.5px;line-height:1.4}.pm-link b{color:var(--accent);font-weight:500;opacity:.7}.pm-link:hover strong,.pm-link:hover b{color:var(--accent);opacity:1}.pm-link em{margin-left:7px;color:var(--accent);font:500 8px var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal}.pm-solutions-label{margin-top:8px;padding-top:17px;border-top:1px solid rgba(255,255,255,.13)}.pm-solutions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.pm-solutions a{padding:9px 0;color:var(--text);text-decoration:none}.pm-solutions strong{display:block;font-size:12px;font-weight:600}.pm-solutions small{display:block;margin-top:3px;color:var(--text-secondary);font-size:10.5px;line-height:1.35}.pm-solutions a:hover strong{color:var(--accent)}.pm-compare-card{display:flex;flex-direction:column;overflow:hidden;align-self:stretch;color:var(--text);text-decoration:none;border:1px solid rgba(42,212,229,.3);border-radius:9px;background:#101923;transition:transform .2s,border-color .2s}.pm-compare-card:hover{transform:translateY(-2px);border-color:rgba(42,212,229,.68)}.pm-compare-visual{height:118px;background:linear-gradient(100deg,rgba(7,13,23,.08),rgba(7,13,23,.62)),url('ai-particles-poster.jpg') center/cover;filter:saturate(.7)}.pm-compare-card>div:last-child{padding:16px 18px 18px}.pm-compare-card span{color:var(--accent);font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase}.pm-compare-card h3{margin:8px 0 7px;font:500 21px/1.1 var(--sans);letter-spacing:-.02em}.pm-compare-card p{margin:0;color:var(--text-secondary);font-size:11.5px;line-height:1.45}.pm-compare-card strong{display:block;margin-top:14px;font-size:11.5px}.pm-compare-card strong b{color:var(--accent);margin-left:4px}@media(max-width:760px){.products-menu .product-menu-panel{display:block;width:auto;padding:24px}.pm-compare-card{margin-top:22px}.product-menu-links,.pm-solutions{grid-template-columns:1fr}.pm-link small{max-width:none}}

/* ═════════ PROMO VIDEO FOLD — one screen tall, centered copy, video fills the rest ═════════ */
.promo-fold {
  background: #F7F6F3;
  min-height: calc(100svh - var(--ribbon-h) - 72px);
  display: flex;
  align-items: center;
  padding: clamp(32px, 4vw, 48px) 0;
}
.promo-fold .promo-fold-inner { max-width: 1600px; }
.promo-fold-inner { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.promo-fold-h {
  font-family: var(--editorial);
  font-weight: 620;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent);
  margin: 0;
}
.promo-fold-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 14px 0 0;
}
.promo-fold-video {
  position: relative;
  margin-top: clamp(24px, 3vw, 36px);
  width: min(100%, max(560px, calc((100svh - var(--ribbon-h) - 72px - 260px) * 16 / 9)));
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0b0d13;
}
.promo-fold-video > iframe,
.promo-fold-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.promo-fold-placeholder {
  padding: 0;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(78,143,247,.16), transparent 65%), #0b0d13;
}
.promo-fold-placeholder[hidden] { display: none; }
.promo-fold-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-fold-placeholder:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.promo-fold-play {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.promo-fold-play::after {
  content: '';
  position: absolute;
  left: 30px;
  top: 23px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--accent);
}
@media (max-width: 900px) {
  .promo-fold { min-height: 0; padding: 64px 0; }
  .promo-fold-video { width: 100%; }
}

/* Homepage: the perspectives ticker runs along the bottom of the hero instead of pinned above the nav */
body:has(#hero > .promo-ribbon) { --ribbon-h: 0px; }
#hero > .promo-ribbon {
  position: absolute;
  top: auto;
  bottom: 0;
  height: 38px;
  z-index: 3;
  border-bottom: 0;
  border-top: 1px solid var(--border);
}

/* Promo fold entrance (assets/promo-reveal.js): words rise out of a blur, the subtext follows,
   the video frame settles in from slightly smaller, and the play button lands last with a slow pulse. */
.promo-armed .promo-word { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.28em); }
.promo-armed.promo-in .promo-word { animation: promo-word-in 1.26s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes promo-word-in { to { opacity: 1; filter: blur(0); transform: none; } }
.promo-armed .promo-fold-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s ease .54s, transform .9s cubic-bezier(.16, 1, .3, 1) .54s;
}
.promo-armed .promo-fold-video {
  opacity: 0;
  transform: scale(.94) translateY(28px);
  filter: blur(12px);
  transition: opacity 1.17s ease .81s, transform 1.53s cubic-bezier(.16, 1, .3, 1) .81s, filter 1.17s ease .81s;
}
.promo-armed .promo-fold-play {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .72s ease 1.8s, transform .9s cubic-bezier(.34, 1.56, .64, 1) 1.8s;
}
.promo-armed.promo-in .promo-fold-sub,
.promo-armed.promo-in .promo-fold-video,
.promo-armed.promo-in .promo-fold-play { opacity: 1; transform: none; filter: none; }
.promo-fold-play::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  opacity: 0;
  pointer-events: none;
}
.promo-in .promo-fold-play::before { animation: promo-pulse 2.8s ease-out 2.7s infinite; }
@keyframes promo-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.75); opacity: 0; } }
/* one soft sheen glides across the video once it has settled, just as the play button lands */
.promo-armed .promo-fold-video::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(120,170,255,.14) 45%, rgba(255,255,255,.22) 50%, rgba(120,170,255,.14) 55%, transparent 68%);
  transform: translateX(-110%);
}
.promo-armed.promo-in .promo-fold-video::after { animation: promo-sheen 1.71s cubic-bezier(.45, 0, .25, 1) 1.71s forwards; }
@keyframes promo-sheen { to { transform: translateX(110%); } }

/* "Let your data speak for itself." in the brand blue, like "A strange problem". */
#capabilities .cap-header,
#capabilities .cap-header .accent-text { color: var(--accent); }
#savings .sav-head h2,
#savings .sav-head h2 .accent-text { color: var(--accent); }

/* #deployment (between The Work Revori Runs and The Impact) is hidden, so draw the section line here. */
#modules { border-bottom: 1px solid rgb(220, 226, 234); }
#savings { border-top: 1px solid rgb(220, 226, 234); }

/* Blue closing punctuation on "What is Revori?" and "Ask instead of build." */
.punct-accent { color: var(--accent) !important; }

/* More visible background curves behind "What is Revori?" and the closing statement. */
.about-watermark, .pause-watermark { opacity: .45; }
.about-watermark path, .pause-watermark path { stroke-width: 1.4; }

/* Phones: the hero fills the whole first screen (svh = visible height with browser toolbars showing). */
@media (max-width: 760px) {
  #hero { min-height: 100vh; min-height: 100svh; }
}

/* Hero headline word reveal 10% quicker (was 1.4s per word). */
#hero .hero-display.hero-reveal .hero-word { animation-duration: 1.26s; }

/* Founder-video card under "Talk with our team" in the phone menu (matches the desktop menu card). */
.mobile-menu .mm-feature {
  display: block;
  margin-top: 22px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #F7F6F3;
  text-decoration: none;
}
.mobile-menu .mm-feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mobile-menu .mm-feature-t { display: block; padding: 14px 16px 4px; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.mobile-menu .mm-feature-s { display: block; padding: 0 16px 16px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

/* iOS Safari draws its own play button over the background video when it declines to autoplay
   (e.g. Low Power Mode). The hero video is decoration only, so hide the native controls. */
.hero-bg-video::-webkit-media-controls,
.hero-bg-video::-webkit-media-controls-panel,
.hero-bg-video::-webkit-media-controls-overlay-play-button,
.hero-bg-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Phones: the "a strange problem" entrance runs about twice as fast so it lands as the user scrolls. */
@media (max-width: 760px) {
  .promo-armed.promo-in .promo-word { animation-duration: .8s; }
  .promo-armed .promo-fold-sub { transition-duration: .55s, .55s; transition-delay: .2s, .2s; }
  .promo-armed .promo-fold-video { transition-duration: .7s, .9s, .7s; transition-delay: .3s, .3s, .3s; }
  .promo-armed .promo-fold-play { transition-delay: .85s, .85s; }
  .promo-armed.promo-in .promo-fold-video::after { animation-duration: 1.1s; animation-delay: .9s; }
  .promo-in .promo-fold-play::before { animation-delay: 1.6s; }
}

/* ═════════ WHERE REVORI DELIVERS — data-model diagram (assets/wrd-diagram.js) ═════════ */
#modules { padding: clamp(80px, 10vw, 136px) 0; overflow: visible; }
.wrd-inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.wrd-head { max-width: 640px; margin: 0 auto clamp(28px, 3.5vw, 48px); text-align: center; }
.wrd-head h2 {
  font-family: var(--sans); font-optical-sizing: auto; font-weight: 620;
  font-size: clamp(24px, 2.7vw, 34px); color: var(--text); letter-spacing: -0.015em; line-height: 1.18; margin: 0 0 12px;
}
.wrd-sub { font-family: var(--sans); font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

.wrd { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3.5vw, 44px); }
.wrd-diagram { position: relative; width: 100%; max-width: 660px; aspect-ratio: 1; margin: 0 auto; }
.wrd-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wrd-orbit { fill: none; stroke: #cfd6e0; stroke-width: 1; stroke-dasharray: 2 7; }
.wrd-base line { stroke: #d3dae4; stroke-width: 1.3; }
.wrd-line { stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0; transition: opacity .35s ease; }
.wrd-line.is-hover { opacity: .45; }
.wrd-line.is-on { opacity: 1; animation: wrd-flow 1.1s linear infinite; }
@keyframes wrd-flow { to { stroke-dashoffset: -28; } }

/* The model: the Revori wordmark with "Data Model" beneath it. */
.wrd-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); text-align: center; padding: 0 7%; overflow: hidden;
}
.wrd-core::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(120,170,255,.16) 46%, rgba(255,255,255,.75) 50%, rgba(120,170,255,.16) 54%, transparent 70%);
  transform: translateX(-120%);
}
.wrd-halo {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid rgba(49, 95, 206, .18); pointer-events: none;
}
.wrd-core-visual { position: relative; width: 52%; height: auto; overflow: visible; margin-bottom: 4px; }
.wrd-core-rails line { stroke: #c9d1dc; stroke-width: 1.2; }
.wrd-core-ties line { stroke: var(--accent); stroke-width: 1; stroke-opacity: .35; }
.wrd-core-dots circle { fill: var(--accent); }
.wrd-core-dots circle:nth-child(3n+2) { fill: #17243a; }
.wrd-core-dots circle:nth-child(3n) { fill: #8a98ab; }
.wrd-core-drift circle { fill: var(--accent); opacity: 0; }
/* Centered on the letters REVORI: the period is taken out of flow and hangs just after the last letter. */
.wrd-wordmark { position: relative; font-size: clamp(18px, 2.1vw, 24px); line-height: 1; }
.wrd-wordmark .logo-dot { position: absolute; left: 100%; top: 0; }
@keyframes wrd-drift { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { transform: translateX(108px); opacity: 0; } }
.wrd-core-label { position: relative; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--text-secondary); }

/* Applications: numbered cards sitting on the ends of their lines. */
.wrd-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; max-width: 30%;
  padding: 11px 16px; border-radius: 12px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); cursor: pointer;
  font: inherit; color: var(--text); text-align: center;
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.wrd-node-t { font-family: var(--sans); font-size: 14px; font-weight: 620; line-height: 1.3; }
.wrd-node:hover, .wrd-node:focus-visible { border-color: var(--accent); transform: translate(-50%, calc(-50% - 3px)); outline: none; }
.wrd-node.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wrd-node::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.wrd-node.is-on::after { animation: wrd-shine .9s cubic-bezier(.45, 0, .25, 1) .1s; }
@keyframes wrd-shine { to { transform: translateX(120%); } }

/* Description card under the diagram, with the auto-advance progress bar. */
.wrd-detail {
  position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(24px, 2.6vw, 34px); width: 100%; max-width: 760px; min-height: 200px; overflow: hidden; text-align: center;
}
.wrd-panel h3 { font-family: var(--sans); font-size: 22px; font-weight: 650; line-height: 1.25; color: var(--text); margin: 0 0 8px; }
.wrd-panel-sub { font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--accent); margin: 0 0 14px; }
.wrd-panel p:not(.wrd-panel-sub) { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.wrd-panel:not([hidden]) { animation: wrd-panel-in .45s ease both; }
@keyframes wrd-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wrd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(49, 95, 206, .08); }
.wrd-progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.wrd.is-auto .wrd-progress span { animation: wrd-progress var(--wrd-dwell, 6s) linear forwards; }
.wrd.is-paused .wrd-progress span { animation-play-state: paused; }
.wrd.is-manual .wrd-progress { display: none; }
@keyframes wrd-progress { to { width: 100%; } }
@keyframes wrd-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1.06); opacity: .9; } 50% { transform: translate(-50%, -50%) scale(1.16); opacity: .25; } }

/* Motion (skipped entirely for reduced-motion visitors). */
@media (prefers-reduced-motion: no-preference) {
  .wrd-halo { animation: wrd-breathe 4.5s ease-in-out infinite; }
  .wrd-core-drift circle { animation: wrd-drift 7s linear infinite; }
  .wrd-core-drift circle:nth-child(2) { animation-delay: -2.4s; animation-duration: 8.5s; }
  .wrd-core-drift circle:nth-child(3) { animation-delay: -4.6s; animation-duration: 6.2s; }

  /* Entrance: lines draw out from the model, then the cards arrive one by one and the model shines once. */
  .wrd.wrd-armed .wrd-base line { stroke-dasharray: 260; stroke-dashoffset: 260; }
  .wrd.wrd-armed .wrd-node { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  .wrd.wrd-armed .wrd-core { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  .wrd.wrd-armed.wrd-in .wrd-core { opacity: 1; transform: translate(-50%, -50%); transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
  .wrd.wrd-armed.wrd-in .wrd-base line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .35s; }
  .wrd.wrd-armed.wrd-in .wrd-node { opacity: 1; transform: translate(-50%, -50%); transition: opacity .6s ease calc(.9s + var(--d) * .12s), transform .8s cubic-bezier(.16, 1, .3, 1) calc(.9s + var(--d) * .12s), border-color .3s ease, background .3s ease, color .3s ease; }
  .wrd.wrd-armed.wrd-in .wrd-node:hover, .wrd.wrd-armed.wrd-in .wrd-node:focus-visible { transform: translate(-50%, calc(-50% - 3px)); }
  .wrd.wrd-armed.wrd-in .wrd-core::after { animation: wrd-shine 1.4s cubic-bezier(.45, 0, .25, 1) 1.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .wrd-line.is-on { animation: none; stroke-dasharray: none; }
  .wrd-panel:not([hidden]) { animation: none; }
  .wrd-node.is-on::after { animation: none; }
}

/* Phones: the model on top, the five applications stacked beneath it on one connecting line. */
@media (max-width: 600px) {
  .wrd-diagram { aspect-ratio: auto; max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .wrd-lines { display: none; }
  .wrd-core, .wrd.wrd-armed .wrd-core, .wrd.wrd-armed.wrd-in .wrd-core { position: relative; left: auto; top: auto; transform: none; width: 214px; margin: 0 auto 10px; }
  .wrd-diagram::before { content: ""; position: absolute; left: 50%; top: 214px; bottom: 20px; width: 1px; background: #d3dae4; }
  .wrd-node, .wrd.wrd-armed .wrd-node, .wrd.wrd-armed.wrd-in .wrd-node { position: relative; left: auto; top: auto; max-width: none; width: 100%; transform: none; padding: 14px 16px; }
  .wrd-node:hover, .wrd-node:focus-visible, .wrd.wrd-armed.wrd-in .wrd-node:hover { transform: none; }
  .wrd-node-t { font-size: 15px; }
  .wrd-detail { margin-top: 14px; }
}
/* The two side cards mirror each other: same width, two lines each. */
.wrd-node[data-i="1"], .wrd-node[data-i="4"] { width: clamp(156px, 27%, 184px); max-width: none; }
@media (max-width: 600px) { .wrd-node[data-i="1"], .wrd-node[data-i="4"] { width: 100%; } }

/* Ask instead of build: the Revori wordmark (as in the nav) inside the source box of the diagram. */
.cons-svg .cs-wordmark { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .36em; fill: var(--text); }
.cons-svg .cs-wordmark-dot { font-family: var(--sans); font-size: 15px; font-weight: 700; fill: var(--accent); text-anchor: start; }