/* ---------- Hero ---------- */
 .hero {
    position: relative;
    padding: 96px 0 72px;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse 900px 500px at 85% 10%, color-mix(in srgb, var(--blush) 60%, transparent), transparent 60%),
      radial-gradient(ellipse 700px 400px at 10% 90%, color-mix(in srgb, var(--purple) 18%, transparent), transparent 60%);
    opacity: 0.85;
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, color-mix(in srgb, var(--charcoal) 5%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--charcoal) 5%, transparent) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 80%);
    pointer-events: none;
  }
  .hero-inner { position: relative; z-index: 2; }


  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--purple) 8%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent);
    margin-bottom: 28px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--purple);
  }
  .hero-eyebrow .pulse {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--purple);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--purple) 60%, transparent);
    animation: pulse 2.2s var(--ease) infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--purple) 60%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--purple) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--purple) 0%, transparent); }
  }

  .hero h1 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(56px, 9vw, 148px);
    line-height: 0.86;
    letter-spacing: -0.02em;
    max-width: 15ch;
    color: var(--charcoal);
  }
  .hero h1 em {
    font-style: normal;
    color: var(--purple);
    font-weight: 800;
    position: relative;
    display: inline-block;
  }
  .hero h1 em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.08em;
    height: 0.18em;
    background: color-mix(in srgb, var(--blush) 80%, transparent);
    z-index: -1;
    border-radius: 2px;
  }

  .hero-sub {
    max-width: 620px;
    margin-top: 32px;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.5;
    color: var(--gray-700);
    font-weight: 400;
  }
  .hero-sub strong { color: var(--charcoal); font-weight: 600; }

  .hero-cta { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

  .hero-footprint {
    margin-top: 72px;
    padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--charcoal) 10%, transparent);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .footprint-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--charcoal);
    margin-bottom: 10px;
  }
  .footprint-value {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1;
    color: var(--purple);
    letter-spacing: -0.02em;
  }
  .footprint-value .suffix { color: var(--purple); }
  .footprint-desc { margin-top: 8px; font-size: 13px; color: var(--charcoal); }
/* ---------- Section shell ---------- */
section { position: relative; padding: 120px 0; }
.section-head { display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: start; margin-bottom: 72px; }
.section-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  padding-top: 8px;
}
.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  max-width: 18ch;
}
.section-intro {
  margin-top: 24px;
  font-size: 18px;
  color: var(--gray-700);
  max-width: 58ch;
}

/* ---------- Suite pillars ---------- */
/* ---------- Suite showcase (interactive tabs + live demos) ---------- */
/* =========================================================================
   THE SUITE — horizontal expanding accordion
   Four panels side-by-side. One is always expanded wide (~2.5fr), the other
   three are narrow strips (~1fr each). Hover to expand, auto-rotates every 6s.
   ========================================================================= */
.suite-accordion {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;                                      /* visible lavender channel between panels */
  padding: 10px;                                  /* inset panels so their rounded corners sit inside the tray */
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  overflow: hidden;
  background: #E8E4D9;                            /* darker cream tray — 2x the delta from --cream for stronger contrast against the page background */
  min-height: 540px;
  /* Unified, cushioned ease — content fades below are synced to this duration
     so the grid resize and the cross-fade land together without glitching. */
  --suite-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --suite-dur: 0.6s;
  transition: grid-template-columns var(--suite-dur) var(--suite-ease);
}
/* Column template shifts based on which panel is .active.
   Active = 4fr, collapsed = 0.5fr each: closed panels are halved so they
   read as slim identity strips, and the active panel absorbs the freed
   width to host its demo, description, and CTA with plenty of breathing room. */
.suite-accordion:has(.suite-item:nth-child(1).active) { grid-template-columns: 4fr 0.5fr 0.5fr 0.5fr; }
.suite-accordion:has(.suite-item:nth-child(2).active) { grid-template-columns: 0.5fr 4fr 0.5fr 0.5fr; }
.suite-accordion:has(.suite-item:nth-child(3).active) { grid-template-columns: 0.5fr 0.5fr 4fr 0.5fr; }
.suite-accordion:has(.suite-item:nth-child(4).active) { grid-template-columns: 0.5fr 0.5fr 0.5fr 4fr; }

.suite-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;                          /* each panel is its own rounded tile floating in the tray */
  cursor: pointer;
  background: var(--purple);                    /* collapsed panels are solid purple */
  /* contain layout so inner text reflow during width change doesn't bleed
     into adjacent panels or cause visible jank */
  contain: layout paint;
  transition: background 0.5s var(--suite-ease);
}
.suite-item.active {
  background: var(--paper);                     /* active panel stays paper-white for max contrast */
  cursor: default;
}
.suite-item:hover:not(.active) {
  background: color-mix(in srgb, #fff 8%, var(--purple));   /* slightly lifted purple on hover */
}

/* ----- Collapsed content (shown when panel is NOT active) -----
   Fade-out (when panel BECOMES active) runs fast and immediately so the
   collapsed strip clears before the grid resizes into it. Fade-in (when
   panel goes back to collapsed) is delayed until the grid has finished
   resizing, so the label doesn't appear mid-motion. */
.suite-item-collapsed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 28px 14px;
  opacity: 0;
  pointer-events: none;
  /* No fade — content snaps instantly; the grid-column width change
     carries the entire visual transition. */
  transition: none;
}
.suite-item:not(.active) .suite-item-collapsed {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
.suite-item-collapsed .suite-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);              /* white with slight transparency against the purple */
  transition: color 0.3s var(--suite-ease);
  white-space: nowrap;                          /* prevent reflow during grid resize */
}
.suite-item:hover:not(.active) .suite-num { color: #fff; }

.suite-item-collapsed .suite-name-vertical {
  font-family: var(--display);
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -0.02em;
  color: #fff;                                   /* white vertical title on purple */
  line-height: 0.92;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: auto 0;
  white-space: nowrap;                          /* prevent reflow during grid resize */
  transition: color 0.3s var(--suite-ease), transform 0.4s var(--suite-ease);
}
.suite-item:hover:not(.active) .suite-name-vertical {
  color: #fff;
  transform: rotate(180deg) translateY(-4px);
}

.suite-item-collapsed .suite-icon {
  width: 44px;
  height: 44px;
  background: var(--blush);                      /* baby blush tile */
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--charcoal);                        /* black glyph on blush */
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s var(--ease);
}
.suite-item:hover:not(.active) .suite-icon {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
}
.suite-item-collapsed .suite-icon svg { width: 20px; height: 20px; }

/* ----- Expanded content (shown when panel IS active) -----
   Two-column layout: left has meta + title + description + CTA + icon
   pinned to the bottom; right has the demo canvas filling full height.
   Fade-in is delayed until the grid has resized, otherwise h3/p would
   render at the narrow width first and reflow once the panel finishes
   opening. Fade-out is SNAP-fast (0.08s, no delay) so the outgoing
   content clears before the grid width starts shrinking — otherwise the
   text reflows into narrow columns and bleeds through the collapsing
   panel's purple background for a moment. */
.suite-item-expanded {
  position: absolute;
  inset: 0;
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 32px;
  align-items: stretch;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No fade — snap visible/hidden; the grid width change carries motion */
  transition: visibility 0s linear 0s;
}
.suite-item-expanded > * { min-width: 0; }
.suite-item.active .suite-item-expanded {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

/* Left column — stacked flex so we can pin the icon-tile to the bottom */
.suite-expanded-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.suite-expanded-content .meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}
.suite-expanded-content h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 0.96;
  margin: 0;
  max-width: 14ch;
  color: var(--ink);
}
.suite-expanded-content p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0;
  max-width: 44ch;
}
/* Icon tile — pinned to the bottom-left, styled identically to the
   collapsed-state icon (baby blush tile, black glyph) for visual continuity */
.suite-expanded-content .icon-tile {
  margin-top: auto;                              /* pushes tile to bottom of flex column */
  width: 44px;
  height: 44px;
  background: var(--blush);
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--charcoal);
  flex-shrink: 0;
}
.suite-expanded-content .icon-tile svg { width: 22px; height: 22px; }

/* Right column — demo canvas fills the full panel height */
.suite-demo-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--cosmic);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.suite-demo-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 300px 180px at 70% 20%, color-mix(in srgb, var(--purple) 35%, transparent), transparent 60%),
    radial-gradient(ellipse 200px 150px at 20% 80%, color-mix(in srgb, var(--lilac) 20%, transparent), transparent 60%);
  pointer-events: none;
}
.suite-demo-canvas > * { position: relative; z-index: 1; }

/* Progress bar at bottom of active panel */
.suite-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--purple) 10%, transparent);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease) 0.3s;
}
.suite-item.active .suite-progress { opacity: 1; }
.suite-progress-bar {
  height: 100%;
  width: 0;
  background: var(--purple);
}
.suite-item.active .suite-progress-bar {
  animation: suiteProgress 6s linear forwards;
}
.suite-accordion.paused .suite-item.active .suite-progress-bar {
  animation-play-state: paused;
}
@keyframes suiteProgress { to { width: 100%; } }

/* ========= DEMO 1 · Assistants — chat preview ========= */
.demo-assist-chat {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
}
.demo-assist-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
}
.demo-assist-bubble.q {
  background: rgba(255, 255, 255, 0.1);
  align-self: flex-end;
  direction: rtl;
  font-family: "Alexandria", -apple-system, sans-serif;
  border-bottom-right-radius: 4px;
}
.demo-assist-bubble.a {
  background: var(--purple);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.demo-assist-bubble.a ul { margin: 4px 0 0; padding-inline-start: 18px; }
.demo-assist-bubble.a li { margin-bottom: 2px; font-size: 11.5px; line-height: 1.4; }
.suite-item.active .demo-assist-bubble.q { animation: demoFadeUp 0.5s var(--ease) 0.5s forwards; }
.suite-item.active .demo-assist-bubble.a { animation: demoFadeUp 0.5s var(--ease) 1.8s forwards; }
@keyframes demoFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ========= DEMO 2 · Translate — language pair ========= */
.demo-translate-pair {
  position: absolute;
  inset: 20px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 10px;
}
.demo-tr-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  color: #fff;
}
.demo-tr-box .tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.demo-tr-box .content {
  font-size: 12.5px;
  line-height: 1.5;
}
.demo-tr-box.en .content { font-family: var(--sans); }
.demo-tr-box.ar .content {
  font-family: "Alexandria", -apple-system, sans-serif;
  direction: rtl;
  text-align: right;
}
.suite-item.active .demo-tr-box.ar .content {
  opacity: 0;
  animation: demoFadeIn 0.5s var(--ease) 1.2s forwards;
}
@keyframes demoFadeIn { to { opacity: 1; } }
.demo-tr-arrow {
  align-self: center;
  justify-self: center;
  color: var(--lilac);
}
.suite-item.active .demo-tr-arrow {
  animation: demoTrArrow 2s var(--ease) 0.6s infinite;
}
@keyframes demoTrArrow {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ========= DEMO 3 · OCR — scanning document ========= */
.demo-ocr-box {
  position: absolute;
  inset: 20px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
}
.demo-ocr-doc {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
}
.demo-ocr-line {
  height: 5px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin-bottom: 8px;
  transition: background 0.3s var(--ease);
}
.demo-ocr-line.s { width: 60%; }
.demo-ocr-line.m { width: 85%; }
.suite-item.active .demo-ocr-line { animation: ocrLit 6s ease-in-out infinite; }
.suite-item.active .demo-ocr-line:nth-child(1) { animation-delay: 0.5s; }
.suite-item.active .demo-ocr-line:nth-child(2) { animation-delay: 0.8s; }
.suite-item.active .demo-ocr-line:nth-child(3) { animation-delay: 1.1s; }
.suite-item.active .demo-ocr-line:nth-child(4) { animation-delay: 1.4s; }
.suite-item.active .demo-ocr-line:nth-child(5) { animation-delay: 1.7s; }
.suite-item.active .demo-ocr-line:nth-child(6) { animation-delay: 2.0s; }
.suite-item.active .demo-ocr-line:nth-child(7) { animation-delay: 2.3s; }
@keyframes ocrLit {
  0%, 60%, 100% { background: rgba(255, 255, 255, 0.15); }
  8%, 50%       { background: var(--lilac); box-shadow: 0 0 8px var(--lilac); }
}
.demo-ocr-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--lilac), transparent);
  box-shadow: 0 0 12px var(--lilac);
  top: 0;
  opacity: 0;
}
.suite-item.active .demo-ocr-scan { animation: ocrScan 3s ease-in-out infinite; }
@keyframes ocrScan {
  0%   { top: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.demo-ocr-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.demo-ocr-field {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateX(-6px);
}
.demo-ocr-field .k {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.suite-item.active .demo-ocr-field:nth-child(1) { animation: demoFadeRight 0.5s var(--ease) 2.2s forwards; }
.suite-item.active .demo-ocr-field:nth-child(2) { animation: demoFadeRight 0.5s var(--ease) 2.5s forwards; }
.suite-item.active .demo-ocr-field:nth-child(3) { animation: demoFadeRight 0.5s var(--ease) 2.8s forwards; }
@keyframes demoFadeRight { to { opacity: 1; transform: translateX(0); } }

/* ========= DEMO 4 · Speech — waveform ========= */
.demo-speech-box {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.demo-speech-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.demo-speech-meta .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ff6b6b;
}
.demo-speech-meta .live::before {
  content: "";
  width: 6px; height: 6px;
  background: #ff6b6b;
  border-radius: 50%;
  animation: pulseSpeechDot 1.2s ease-in-out infinite;
}
@keyframes pulseSpeechDot { 50% { opacity: 0.4; } }
.demo-speech-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 56px;
}
.demo-speech-wave span {
  display: block;
  flex: 1;
  background: var(--lilac);
  border-radius: 1px;
  height: 4px;
}
.suite-item.active .demo-speech-wave span {
  animation: speechBarPulse 1.1s ease-in-out infinite;
}
@keyframes speechBarPulse {
  0%, 100% { height: 4px; }
  50%      { height: var(--h, 24px); }
}
.demo-speech-transcript {
  font-family: "Alexandria", -apple-system, sans-serif;
  direction: rtl;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  min-height: 2.6em;
}
.demo-speech-transcript span {
  opacity: 0;
  margin-inline: 2px;
}
.suite-item.active .demo-speech-transcript span {
  animation: speechWord 0.3s var(--ease) forwards;
}
@keyframes speechWord { to { opacity: 1; } }

/* Responsive — stack vertically on narrow screens */
/* =========================================================================
   Responsive — the horizontal 4fr/0.5fr accordion needs at least ~1100px
   of width to look right; below that we stack vertically.

   Specificity note: the desktop rules above use
   `.suite-accordion:has(.suite-item:nth-child(N).active)` — a higher
   specificity than `.suite-accordion:has(.suite-item.active)`. We have to
   match that exact shape here or the desktop ratios win and the mobile
   layout silently refuses to apply.
   ========================================================================= */
@media (max-width: 1100px) {
  .suite-accordion,
  .suite-accordion:has(.suite-item:nth-child(1).active),
  .suite-accordion:has(.suite-item:nth-child(2).active),
  .suite-accordion:has(.suite-item:nth-child(3).active),
  .suite-accordion:has(.suite-item:nth-child(4).active) {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    min-height: 0;
    transition: none;
  }
  .suite-item {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
    min-height: 0;                    /* content dictates, not a fixed value */
    transition: background 0.4s var(--ease);
  }
  .suite-item:last-child { border-bottom: 0; }

  /* KEY MOBILE FIX: drop the absolute positioning of both states so the
     expanded content can flow naturally and set its own height. Use
     display toggling instead of opacity overlay — no transition wizardry
     needed here. */
  .suite-item-collapsed,
  .suite-item-expanded {
    position: relative;
    inset: auto;
    opacity: 1;                       /* no fade timing needed in stacked mode */
    pointer-events: auto;
    transition: none;
  }
  .suite-item-collapsed {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 24px;
    gap: 20px;
  }
  .suite-item.active .suite-item-collapsed { display: none; }
  .suite-item-expanded { display: none; }
  .suite-item.active .suite-item-expanded {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;    /* demo canvas height is driven by its own aspect ratio, not a fixed row */
    gap: 24px;
    padding: 28px 24px;
  }
  .suite-item-collapsed .suite-num {
    order: 2;
    flex-shrink: 0;
  }
  .suite-item-collapsed .suite-icon {
    order: 1;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .suite-item-collapsed .suite-icon svg { width: 18px; height: 18px; }
  .suite-item-collapsed .suite-name-vertical {
    order: 3;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 30px;
    margin: 0;
    flex: 1;
    color: #fff;
  }
  .suite-item:hover:not(.active) .suite-name-vertical { transform: none; }

  .suite-expanded-content {
    gap: 14px;
  }
  .suite-expanded-content h3 {
    font-size: 38px;                /* slightly reduced so long titles fit */
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;             /* nicer line break distribution */
    max-width: 100%;                /* allow full container width on mobile */
    /* No line-clamp — titles must be fully visible */
  }
  .suite-expanded-content p { max-width: 100%; }
  /* Hide the expanded-state icon on mobile — it's redundant with the
     collapsed-row icon and takes up vertical space that should go to the
     demo canvas */
  .suite-expanded-content .icon-tile { display: none; }

  /* Demo canvas sizes by ITS content rather than by a fixed row height —
     uses aspect-ratio so each demo gets enough room for its own markup */
  .suite-demo-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;              /* 4:3 is enough for all 4 demos to fit cleanly */
    max-height: 420px;                /* don't grow wild on tablet widths */
  }
}
@media (max-width: 560px) {
  .suite-item-collapsed { padding: 16px 20px; }
  .suite-item-collapsed .suite-name-vertical { font-size: 26px; }
  .suite-item.active .suite-item-expanded { padding: 22px 20px; }
  .suite-expanded-content h3 { font-size: 30px; max-width: 100%; }       /* scaled down for narrow phones but still bold */
  .suite-demo-canvas { aspect-ratio: 3 / 4; max-height: 520px; }   /* portrait on phones — more room for vertical demos */
}

@media (prefers-reduced-motion: reduce) {
  .suite-accordion * {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  .suite-item.active .demo-assist-bubble,
  .suite-item.active .demo-tr-box.ar .content,
  .suite-item.active .demo-ocr-field,
  .suite-item.active .demo-speech-transcript span {
    opacity: 1;
    transform: none;
  }
}

  /* ---------- Assistants grid ---------- */
.assistants-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}
.assistants-intro p {
  font-size: 17px;
  color: var(--gray-700);
  line-height: 1.55;
}
/* ---------- Assistants carousel (vertical cards, hover-edge triggers, seamless loop) ---------- */
.assistants {
  position: relative;
  height: 780px;
  user-select: none;
}

.assistants-stage {
  position: absolute;
  inset: 0;
  /* Contain horizontal overflow so ±2/±3 cards don't push the page wide,
     but let vertical shadows breathe. */
  overflow: hidden;
  /* Clipping mask that fades out near the edges, giving a soft cutoff
     instead of a hard shadow cut. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-composite: intersect;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Room for card shadow: visually lift carousel content by a few px so
   box-shadow below the active card doesn't approach the stage's overflow edge */
.assistants-stage .assistant {
  --carousel-y-offset: -18px;
}
.assistants .assistant {
  position: absolute;
  width: 480px;
  height: 630px;
  margin: 0;
  padding: 28px 26px 24px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--charcoal) 8%, transparent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: 50% 60%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1),
              opacity .6s cubic-bezier(.2,.7,.2,1),
              box-shadow .4s ease;
  will-change: transform;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.assistants .assistant::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--purple));
}
.assistants .assistant.is-active {
  box-shadow: 0 40px 80px -20px rgba(20, 10, 50, 0.22),
              0 10px 24px -8px rgba(20, 10, 50, 0.10);
}
.assistants .assistant.is-active::before { height: 5px; }
.assistants .assistant-desc {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.assistants-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 20;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}
.assistants-zone.left { left: 0; }
.assistants-zone.right { right: 0; }
.assistants-zone .zone-arrow {
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.assistants-zone:hover .zone-arrow {
  transform: scale(1.1);
  background: var(--charcoal);
}
.assistants-zone .zone-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--charcoal) 88%, transparent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -4px rgba(20,10,50,0.25);
}

/* ---------- Carousel-only content scaling (applies inside .assistants carousel) ---------- */
.assistants .assistant {
  padding: 38px 34px 32px;
}
.assistants .assistant-head {
  margin-bottom: 28px;
}
.assistants .assistant-icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
}
.assistants .assistant-icon svg {
  width: 34px;
  height: 34px;
}
.assistants .assistant-badge {
  font-size: 13px;
  padding: 6px 14px;
}
.assistants .assistant h3 {
  font-size: 42px;
  line-height: 1.02;
  margin-bottom: 16px;
}
.assistants .assistant-tag {
  font-size: 21px;
  line-height: 1.35;
  margin-bottom: 20px;
}
.assistants .assistant-desc {
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 20px;
  /* Allow up to ~8 lines within the card */
  -webkit-line-clamp: 8;
}
.assistants .assistant-tags {
  gap: 8px;
}
.assistants .assistant-tags span {
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: 8px;
}

/* ---------- Tilt hover effect (center card only) ---------- */
.assistants .assistant {
  /* Outer: positioning + 3D perspective for inner tilt */
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
  perspective: 1200px;
}
.assistants .assistant::before {
  /* Accent border moves to the inner; hide outer pseudo */
  display: none;
}
.assistants .assistant-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--charcoal) 8%, transparent);
  border-radius: var(--radius);
  padding: 38px 34px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
}
.assistants .assistant-tilt::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--purple));
  transition: height .3s var(--ease);
  z-index: 1;
}
.assistants .assistant.is-active .assistant-tilt {
  box-shadow: 0 40px 90px -30px rgba(20, 10, 50, 0.28), 0 10px 20px -10px rgba(20, 10, 50, 0.1);
}
.assistants .assistant.is-active:hover .assistant-tilt::before {
  height: 5px;
}

@media (max-width: 720px) {
  .assistants { height: 660px; }
  .assistants .assistant { width: 320px; height: 520px; }
  .assistants-zone { width: 18%; }
}

.assistant-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 18px;
}
.assistant-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, var(--purple)) 12%, transparent);
  color: var(--accent, var(--purple));
  display: grid; place-items: center;
}
.assistant-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
}
.assistant-badge.live { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, transparent); }
.assistant h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--charcoal);
}
.assistant-tag {
  font-size: 14px;
  color: var(--accent, var(--purple));
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.35;
}
.assistant-desc {
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
}
.assistant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assistant-tags span {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 8px;
  background: var(--cream-2);
  color: var(--gray-700);
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* ---------- Engine (dark) ---------- */
.engine {
  background: var(--cosmic);
  color: #fff;
  border-radius: 28px;
  margin: 0 32px;
  padding: 120px 80px;
  position: relative;
  overflow: hidden;
}
.engine-wrap { max-width: var(--container); margin: 0 auto; padding: 0; }
.engine::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--purple) 50%, transparent), transparent 50%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--lilac) 18%, transparent), transparent 50%);
  pointer-events: none;
}
.engine::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}
.engine-inner { position: relative; z-index: 1; }
.engine .section-index { color: var(--lilac); }
.engine-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 18ch;
  margin-bottom: 24px;
}
.engine-title span { color: var(--lilac); }
.engine-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.72);
  max-width: 60ch;
  margin-bottom: 72px;
}
.engine-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.engine-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.engine-stat {
  padding: 36px 32px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}
.engine-stat-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.engine-stat-value .unit { color: var(--lilac); }
.engine-stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}
.engine-stat-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
  line-height: 1.5;
}
.engine-points { display: flex; flex-direction: column; gap: 28px; }
.engine-point {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 20px;
  align-items: start;
}
.engine-point-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lilac);
  padding-top: 4px;
  letter-spacing: 0.08em;
}
.engine-point-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
  letter-spacing: -0.005em;
}
.engine-point-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
}

/* ---------- C-suite ---------- */
.csuite {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--charcoal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--charcoal) 10%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.csuite-card {
  background: var(--paper);
  padding: 44px 32px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  transition: background .3s var(--ease);
}
.csuite-card:hover { background: var(--blush-soft); }
.csuite-role {
  font-family: var(--display);
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.csuite-headline {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--charcoal);
}
.csuite-body {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.55;
  flex: 1;
}
.csuite-metric {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.csuite-metric strong {
  color: var(--purple);
  font-weight: 600;
}

/* ---------- Deploy ---------- */
.deploy-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.deploy-list { display: flex; flex-direction: column; gap: 4px; }
.deploy-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: padding-left .3s var(--ease);
}
.deploy-row:hover { padding-left: 8px; }
.deploy-row:last-child { border-bottom: 0; }
.deploy-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--purple);
  letter-spacing: 0.08em;
}
.deploy-name {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--charcoal);
}
.deploy-desc {
  font-size: 14px;
  color: var(--gray-500);
  margin-top: 4px;
}
.deploy-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--gray-700);
}

.compliance {
  background: var(--paper);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: sticky;
  top: 96px;
}
.compliance-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.compliance-sub {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 28px;
}
.compliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.compliance-pill {
  padding: 14px 16px;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}
.compliance-pill svg { flex: 0 0 auto; color: var(--purple); }
  /* ---------- CTA ---------- */
  .cta {
    background: var(--cosmic);
    color: #fff;
    border-radius: 28px;
    margin: 0 32px 80px;
    padding: 100px 64px;
    position: relative;
    overflow: hidden;
  }
  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 600px 400px at 20% 20%, color-mix(in srgb, var(--purple) 55%, transparent), transparent 60%),
      radial-gradient(ellipse 500px 300px at 90% 80%, color-mix(in srgb, var(--blush) 25%, transparent), transparent 55%);
    pointer-events: none;
  }
  .cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
    align-items: end;
    max-width: var(--container);
    margin: 0 auto;
  }
  .cta h2 {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.88;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 14ch;
  }
  .cta h2 span { color: var(--lilac); }
  .cta-body {
    font-size: 17px;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    margin-bottom: 32px;
  }
  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .pillars { grid-template-columns: repeat(2, 1fr); }
    .csuite { grid-template-columns: repeat(2, 1fr); }
    .engine-grid { grid-template-columns: 1fr; gap: 48px; }
    .deploy-wrap { grid-template-columns: 1fr; gap: 48px; }
    .compliance { position: static; }
    .cta-inner { grid-template-columns: 1fr; }
    .section-head { grid-template-columns: 1fr; gap: 16px; }
    .hero-footprint { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .assistants-intro { grid-template-columns: 1fr; gap: 24px; }
    .engine { padding: 80px 40px; margin: 0 16px; }
    .cta { padding: 72px 40px; margin: 0 16px 48px; }
  }

  @media (max-width: 640px) {
    .container { padding: 0 20px; }
    .nav-links { display: none; }
    .hero { padding: 64px 0 48px; }
    section { padding: 80px 0; }
    .pillars { grid-template-columns: 1fr; }
    .csuite { grid-template-columns: 1fr; }
    .hero-footprint { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .engine { padding: 56px 24px; border-radius: 18px; }
    .cta { padding: 56px 24px; border-radius: 18px; }
    .footer-brand { grid-column: 1 / -1; }
  }

  /* Force Illustrator-style SVG paths (class="st0") inside the dropdown to render charcoal */
  .nav-mega-logo .st0 { fill: #09090A; }

  /* ---------- Subsection (inherits .section-head, tweaks margins + title size) ---------- */
  .subsection-head {
    margin-top: 120px;
    margin-bottom: 48px;
  }
  /* Subsection title a touch smaller than the main section title for hierarchy */
  .subsection-title.subsection-title {
    font-size: clamp(32px, 4vw, 54px);
    max-width: 18ch;
  }
  .subsection-cta {
    margin-top: 28px;
  }
  @media (max-width: 1024px) {
    .subsection-head { margin-top: 80px; margin-bottom: 32px; }
  }
  @media (max-width: 720px) {
    .subsection-head { margin-top: 56px; }
  }

  /* ---------- Hero logo strip (partners, subtle) ---------- */
  .hero-logos-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    margin: 56px 0 0;
    padding: 4px 0 8px;
  }
  .hero-logos-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-500);
    white-space: nowrap;
    position: relative;
    padding-right: 20px;
  }
  .hero-logos-label::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    background: color-mix(in srgb, var(--charcoal) 12%, transparent);
    transform: translateY(-50%);
  }
  .hero-logos {
    position: relative;
    overflow: hidden;
    /* Transparent-fade edges via mask (no color to mismatch) */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .hero-logos-track {
    display: flex;
    width: max-content;
    animation: hero-logos-scroll 38s linear infinite;
    will-change: transform;
  }
  .hero-logos:hover .hero-logos-track {
    animation-play-state: paused;
  }
  .hero-logos-list {
    display: flex;
    align-items: center;
    gap: 72px;
    padding-right: 72px;
  }
  .hero-logo {
    flex-shrink: 0;
    height: 48px;
    color: var(--charcoal);
    opacity: 0.5;
    transition: opacity .3s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-logo:hover {
    opacity: 0.9;
  }
  .hero-logo-svg {
    display: block;
    max-width: 160px;
    /* Each svg sets its own height + width inline for per-logo optical balance */
  }
  /* Investopia uses an embedded raster PNG — currentColor can't reach it,
     so use filter: brightness(0) to force it to pure black alongside the
     other logos' currentColor rendering. */
  .hero-logo.has-raster .hero-logo-svg {
    filter: brightness(0);
    -webkit-filter: brightness(0);
  }
  @keyframes hero-logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
  }
  @media (max-width: 720px) {
    .hero-logos-wrap { grid-template-columns: 1fr; gap: 12px; }
    .hero-logos-label::after { display: none; }
    .hero-logos-label { padding-right: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-logos-track { animation: none; }
  }

  /* ---------- Hero h1 typewriter ---------- */
  .hero h1 .typing-cursor {
    display: inline-block;
    color: var(--purple);
    font-family: var(--sans);
    font-weight: 300;
    margin-left: 4px;
    font-size: 0.9em;
    vertical-align: baseline;
    animation: hero-caret-blink 0.9s steps(2, end) infinite;
  }
  @keyframes hero-caret-blink {
    50% { opacity: 0; }
  }

  /* ---------- Hero MagnetLines interactive background ---------- */
  .hero { position: relative; overflow: hidden; }
  .hero-magnet-lines {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--magnet-cols, 16), 1fr);
    grid-template-rows: repeat(var(--magnet-rows, 10), 1fr);
    justify-items: center;
    align-items: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    transition: opacity 0.5s var(--ease);
    will-change: opacity;
  }
  .hero:hover .hero-magnet-lines {
    opacity: 0.14;
  }
  .hero-magnet-lines span {
    display: block;
    width: 2px;
    height: 26px;
    background-color: var(--purple);
    border-radius: 2px;
    transform-origin: center;
    transform: rotate(var(--rotate, -10deg));
    transition: transform 0.28s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  /* Keep hero content above the magnet grid */
  .hero > .container,
  .hero .hero-eyebrow,
  .hero h1,
  .hero .lead,
  .hero-ctas,
  .hero-stats,
  .stats-strip,
  .footprint-strip,
  .hero-logos-wrap,
  .crumbs {
    position: relative;
    z-index: 1;
  }
  @media (max-width: 720px) {
    .hero-magnet-lines { --magnet-cols: 10; --magnet-rows: 12; opacity: 0.05; }
    .hero-magnet-lines span { height: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-magnet-lines span { transition: none; }
  }

  /* Hero h1: scaled-up 1.2x from prior value to feel more commanding. */
html[dir="rtl"] .hero h1 {
  font-size: clamp(34px, 5.5vw, 91px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
html[dir="rtl"] .hero h1 em {
  font-style: normal;
  /* Arabic doesn't have italic — use a flat purple emphasis with the original pink blush underline */
  color: var(--purple, #3F1993);
}

/* Hero sub-paragraph: 0.8x smaller font for a quieter relationship to the
   now-bigger headline; widen max-width so it lays out in 4-5 lines, not 7-8. */
html[dir="rtl"] .hero-sub {
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.7;
  max-width: 820px;
}

/* All other body-paragraph subtexts on the Arabic page get the same
   typographic rhythm as the hero sub: 16px maximum, generous 1.7 line-height. */
html[dir="rtl"] .engine-sub,
html[dir="rtl"] .cta-body,
html[dir="rtl"] .suite-expanded-content p,
html[dir="rtl"] .assistants .assistant-tag,
html[dir="rtl"] .assistants .assistant-desc,
html[dir="rtl"] .engine-point-desc,
html[dir="rtl"] .deploy-desc,
html[dir="rtl"] .compliance-sub {
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.7;
}

/* Section intros sit just below the (now smaller) section titles, so scale
   them down 0.8x for a tighter relationship to the headline. */
html[dir="rtl"] .section-intro {
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.7;
}

/* Big titles — Arabic-only scale relative to EN originals.
   Combined factor of all prior adjustments: roughly 0.56x font, 1.56x line-height.
   max-width is widened so each title fits in ~2 lines instead of 4-6.
   text-wrap: balance distributes the lines evenly when there are 2.
   The hero h1 has its own block above and is intentionally NOT scaled here. */
html[dir="rtl"] .section-title {
  font-size: clamp(22px, 3.14vw, 47px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 950px;
  text-wrap: balance;
}
html[dir="rtl"] .subsection-title.subsection-title {
  font-size: clamp(18px, 2.24vw, 30px);
  line-height: 1.56;
  max-width: 700px;
  text-wrap: balance;
}
html[dir="rtl"] .engine-title {
  font-size: clamp(27px, 3.36vw, 54px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 1000px;
  text-wrap: balance;
}
html[dir="rtl"] .cta h2 {
  font-size: clamp(27px, 3.36vw, 50px);
  line-height: 1.38;
  letter-spacing: -0.005em;
  max-width: 800px;
  text-wrap: balance;
}

/* Suite pillar headlines — sized to comfortably fit in 2 lines inside the
   ~350px accordion panel even when the browser doesn't support text-wrap: balance. */
html[dir="rtl"] .suite-expanded-content h3 {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 100%;
  text-wrap: balance;
  text-wrap: pretty;  /* better fallback for browsers without 'balance' */
}
@media (max-width: 1024px) {
  html[dir="rtl"] .suite-expanded-content h3 {
    font-size: 20px;
    line-height: 1.6;
  }
}
@media (max-width: 720px) {
  html[dir="rtl"] .suite-expanded-content h3 {
    font-size: 17px;
    line-height: 1.56;
  }
}

/* Assistant card headlines */
html[dir="rtl"] .assistants .assistant h3 {
  font-size: 23px;
  line-height: 1.59;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Big stat numerals: keep digits flowing LTR (so "20B+" doesn't reverse to "+B02"),
   but place the block at the visual-right of its container so it lines up with
   the right-aligned RTL label and description above/below it. */
html[dir="rtl"] .footprint-value,
html[dir="rtl"] .engine-stat-value,
html[dir="rtl"] .deploy-num,
html[dir="rtl"] .suite-num,
html[dir="rtl"] .engine-point-num {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-family: "Big Shoulders Display", "Alexandria", sans-serif;
}

/* Section index labels like "/ 01 المنصة" — mixed slash + Arabic, keep readable */
html[dir="rtl"] .section-index,
html[dir="rtl"] .meta {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-family: "JetBrains Mono", "Alexandria", monospace;
}
html[dir="rtl"] .section-index > *,
html[dir="rtl"] .meta > * {
  direction: rtl;
}

/* --- Layout flips for things that don't auto-flip --- */

/* Arrow icons (→) inside buttons should mirror so they "lead" RTL */
html[dir="rtl"] .btn .arrow,
html[dir="rtl"] .arrow {
  transform: scaleX(-1);
}

/* Suite accordion: vertical name labels — English uses writing-mode rotation,
   in RTL we want them upright */
html[dir="rtl"] .suite-name-vertical {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
}

/* Suite collapsed strip: number stays at top, icon at bottom (the writing-mode
   flip above means the layout collapses; let's keep it simple) */
html[dir="rtl"] .suite-item-collapsed {
  /* Original uses absolute positioning for vertical text — keep number readable */
}

/* Hero magnet lines grid is symmetric, no flip needed.
   But the -10deg base angle should flip to +10deg in RTL for visual symmetry. */
/* Demo translate pair: keep EN box LTR even on Arabic page (it shows English source) */
html[dir="rtl"] .demo-tr-box.en {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .demo-tr-box.ar {
  direction: rtl;
  text-align: right;
}
/* The arrow between EN and AR points down in original; in RTL keep down (vertical) */
html[dir="rtl"] .demo-tr-arrow svg {
  transform: rotate(0deg);  /* vertical arrow stays vertical */
}

/* Demo OCR: keep contract numbers / dates LTR */
html[dir="rtl"] .demo-ocr-field {
  text-align: right;
}
html[dir="rtl"] .demo-ocr-field .k {
  margin-inline-end: 8px;
}

/* Demo speech meta — already mixed, keep flow natural */
html[dir="rtl"] .demo-speech-meta {
  direction: rtl;
}

/* Assistant cards: align text right, keep icons in their flex cells */
html[dir="rtl"] .assistant {
  text-align: right;
}
html[dir="rtl"] .assistant-head {
  /* head has icon (left) + badge (right) in EN; in RTL flex auto-reverses */
}

/* Compliance pills: icon should sit after text in RTL or before based on flex */
html[dir="rtl" ] .compliance-pill {
  flex-direction: row-reverse;
}

/* Pulse dot in hero eyebrow — keep its inline position natural */
html[dir="rtl"] .hero-eyebrow {
  flex-direction: row-reverse;
}

/* Nav: chevron in dropdown trigger should not flip */
html[dir="rtl"] .nav-trigger .chev {
  /* leave as is — down chevron is symmetric */
}

/* The sliding logos marquee keeps its scroll direction (visually fine RTL or LTR) */

/* Numerals in body text inside buttons / badges: keep LTR for "100+", "20B+", etc. */
html[dir="rtl"] .suffix,
html[dir="rtl"] .unit {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Hide typewriter cursor entirely on Arabic page (lingers as a square after typing) */
html[dir="rtl"] .typing-cursor { display: none !important; }

/* (consolidated into the rule above) */


/* Suite accordion strips: hide rotated text labels in Arabic.
   Arabic letters don't shape correctly when rotated 90°; rely on the number + icon
   for collapsed-state identification. The expanded panel still shows the full Arabic name. */
html[dir="rtl"] .suite-name-vertical {
  display: none !important;
}

/* Make the accordion strips share the right balance with the icon centered */
html[dir="rtl"] .suite-item-collapsed {
  justify-content: space-between;
}

/* Engine title span (the lilac-emphasized portion) — make sure the color contrast works
   on the dark background for the Arabic emphasis */
   html[dir="rtl"] .engine-title span {
    color: var(--lilac, #C9A4F5);
  }
  
  /* Strong tags in hero-sub — make the brand emphasis pop in Arabic too */
  html[dir="rtl"] .hero-sub strong {
    color: var(--purple, #3F1993);
    font-weight: 700;
  }
  
  /* Pulse dot in eyebrow: the flex direction reverse I had pushes it to the wrong side.
     In RTL the dot should still appear on the leading (right) edge of the eyebrow. */
  html[dir="rtl"] .hero-eyebrow {
    flex-direction: row;  /* override my earlier row-reverse */
  }
  
  /* Demo translate pair: the EN box appears first in DOM (was visually-left in EN);
     in RTL we want it to appear visually-right (leading position) since the demo
     reads "EN source → AR translation". With direction:rtl, default flex-row already
     does this. No additional changes needed. */
  
  /* Demo OCR field key/value spacing — the inline span needs spacing on its trailing side */
  html[dir="rtl"] .demo-ocr-field .k {
    margin-inline-start: 0;
    margin-inline-end: 8px;
  }
  
  /* The "/ 01 المنصة" section indices — keep the slash on the trailing/visual-left edge.
     With direction:ltr on the parent and a flipped child, the visual order becomes:
     "[Arabic text]   /   [number]" reading right-to-left. That matches the design intent. */
  
  /* Subsection (assistants) heading wrapper: keep CTA button on the trailing side */
  html[dir="rtl"] .subsection-cta {
    /* default fine */
  }