/*
 * AI Optimization Services.
 *
 * Its own design language, like the India page before it, but a different
 * one — an answer-engine console: a cool white ground, deep indigo panels,
 * every accent drawn in the brand's violet-to-blue gradient, monospace
 * micro-labels for the "system" voice, glass tiles, gradient rims and soft
 * light orbs instead of hard borders and drop shadows.
 *
 * Everything is scoped under .aio-page. landing.css still loads (the button
 * set and the shared FAQ accordion), so a few rules here exist purely to
 * unpick a shared default — each says so.
 *
 * Motion contract: [data-reveal] gets .is-in from aio-services.js on first
 * intersection, and each child staggers off its own --i (elements deeper in
 * the block opt in with data-stagger). Hero elements carry .aio-rise and
 * animate on load instead. The reveal is an ANIMATION with backwards fill, not
 * a transition, so it never replaces a component's own hover transition (the
 * lesson the India page learned). Hiding is gated on .aio-js, which the script
 * adds at parse time — no script, no class, nothing hidden. The whole system
 * collapses to "everything visible, nothing moving" under
 * prefers-reduced-motion, at the foot of this file.
 *
 * Section order in this file: tokens, type, buttons, motion, hero, what,
 * versus, services, panel, platforms, optimize, industries, process, why,
 * FAQ, closing, responsive, reduced motion.
 */
.aio-page {
  --aio-ink: #0b0f2a;
  --aio-ink-2: #141a3d;
  --aio-bg: #f7f8fe;
  --aio-bg-2: #eef1fc;
  --aio-violet: #7e41fc;
  --aio-blue: #336bfb;
  --aio-blue-2: #465dfc;
  --aio-azure: #0066ff;
  --aio-grad: linear-gradient(90deg, #7e41fc 0%, #336bfb 43.27%, #0066ff 100%);
  --aio-grad-soft: linear-gradient(135deg, rgba(126, 65, 252, 0.14), rgba(0, 102, 255, 0.1));
  --aio-muted: #5b6079;
  --aio-line: rgba(70, 93, 252, 0.16);
  --aio-line-light: rgba(255, 255, 255, 0.14);

  --aio-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --aio-num: "Poppins", var(--heading-font);

  --aio-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --aio-sec-y: clamp(64px, 8vw, 128px);
  --aio-top: clamp(96px, 9vw, 124px); /* the theme's header-clearing offset */

  background: var(--aio-bg);
  color: var(--aio-ink);
  overflow-x: clip; /* orbs and rings overhang; never scroll for them */
}

.aio-sec {
  position: relative;
  padding-block: var(--aio-sec-y);
}

.aio-dark {
  background: var(--aio-ink);
  color: #fff;
}

/* ---------- Type ---------- */
.aio-page .aio-h2 {
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

.aio-page .aio-h3 {
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

/* The gradient phrase every heading turns on. */
.aio-page .text-accent {
  background: var(--aio-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--aio-blue-2);
}

.aio-h2-center {
  text-align: center;
}

.aio-h2-light {
  color: #fff;
}

.aio-lead {
  margin: 18px 0 0;
  max-width: 58ch;
  color: var(--aio-muted);
  font-size: 16px;
  line-height: 1.8;
}

.aio-lead + .aio-lead {
  margin-top: 12px;
}

.aio-lead-center {
  margin-inline: auto;
  text-align: center;
  max-width: 64ch;
}

.aio-lead-strong {
  color: var(--aio-ink);
  font-weight: 600;
}

.aio-lead-light {
  color: rgba(255, 255, 255, 0.72);
}

.aio-head-note {
  margin-top: 0;
}

/* Heading left, its note right and low, so the pair reads as a spread. */
.aio-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(34px, 4.4vw, 64px);
}

.aio-head-center {
  margin-bottom: clamp(34px, 4.4vw, 64px);
}

/* The console voice: small monospace, spaced, always secondary. */
.aio-mono {
  display: inline-block;
  font-family: var(--aio-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aio-blue-2);
}

.aio-mono-light {
  color: rgba(255, 255, 255, 0.6);
}

.aio-center-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4.4vw, 60px);
}

/* ---------- Buttons ---------- */
/* The theme's .btn-strategy pill, re-inked with the gradient. Its hover is a
   glide — style.css swaps the label's padding while the disc travels across,
   both on `transition: all 0.4s` — so every property the base animates is
   named here. The base hover only changes background-COLOR, which a gradient
   background-image would hide, so the ink hover state is a ::before that
   fades in over the gradient instead. */
.aio-page .btn-strategy.aio-btn {
  background: var(--aio-grad);
  border-color: transparent;
  isolation: isolate;
  transition:
    padding 0.42s var(--aio-ease),
    box-shadow 0.42s var(--aio-ease),
    transform 0.42s var(--aio-ease);
}

.aio-page .btn-strategy.aio-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--aio-ink);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.42s var(--aio-ease);
}

.aio-page .btn-strategy.aio-btn:hover {
  background: var(--aio-grad);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(70, 93, 252, 0.32);
}

.aio-page .btn-strategy.aio-btn:hover::before {
  opacity: 1;
}

.aio-page .btn-strategy.aio-btn .btn-text {
  position: relative;
  color: #fff;
  transition: color 0.42s var(--aio-ease);
}

.aio-page .btn-strategy.aio-btn .icon-circle {
  background: #fff;
  transition:
    right 0.42s var(--aio-ease),
    background-color 0.42s var(--aio-ease);
}

.aio-page .btn-strategy.aio-btn .icon-circle svg path {
  fill: var(--aio-blue-2);
  transition: fill 0.42s var(--aio-ease);
}

.aio-page .btn-strategy.aio-btn:hover .icon-circle {
  background: #fff;
}

.aio-page .btn-strategy.aio-btn:hover .icon-circle svg path {
  fill: var(--aio-ink);
}

/* On the dark panels: a white pill, ink text, gradient disc. */
.aio-page .btn-strategy.aio-btn-light {
  background: #fff;
}

.aio-page .btn-strategy.aio-btn-light:hover {
  background: #fff;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.aio-page .btn-strategy.aio-btn-light .btn-text {
  color: var(--aio-ink);
}

.aio-page .btn-strategy.aio-btn-light:hover .btn-text {
  color: #fff;
}

.aio-page .btn-strategy.aio-btn-light .icon-circle {
  background: var(--aio-grad);
}

.aio-page .btn-strategy.aio-btn-light .icon-circle svg path {
  fill: #fff;
}

.aio-page .btn-strategy.aio-btn-light:hover .icon-circle {
  background: #fff;
}

/* ---------- Light ---------- */
/* Blurred gradient orbs that drift behind the hero and the orbit.
   Decoration only: aria-hidden, no pointer events, still under
   reduced motion. */
.aio-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
  animation: aio-drift 16s ease-in-out infinite alternate;
}

.aio-orb-a {
  width: 520px;
  height: 520px;
  top: -140px;
  left: -160px;
  background: radial-gradient(circle, rgba(126, 65, 252, 0.55), transparent 65%);
}

.aio-orb-b {
  width: 620px;
  height: 620px;
  right: -200px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.5), transparent 65%);
  animation-delay: -8s;
}

.aio-orb-c {
  width: 560px;
  height: 560px;
  right: -180px;
  top: 10%;
  background: radial-gradient(circle, rgba(126, 65, 252, 0.35), transparent 65%);
}

@keyframes aio-drift {
  to {
    transform: translate(40px, 30px) scale(1.08);
  }
}

/* A faint grid, faded out toward the edges: the console's graph paper. */
.aio-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(70, 93, 252, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 93, 252, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%);
}

.aio-mesh-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ---------- Justified copy ---------- */
/* Every running paragraph that is not centred is justified. Centred leads
   and the flow/tile labels are left alone. */
.aio-page .aio-hero-text,
.aio-page .aio-lead:not(.aio-lead-center),
.aio-page .aio-service-body p,
.aio-page .aio-showcase-copy p,
.aio-page .aio-step-body p,
.aio-page .aio-why-card p,
.aio-page .aio-panel-copy p,
.aio-page .aio-faq .faq-ans-in p {
  text-align: justify;
}

/* ---------- Motion primitives ---------- */
.aio-page.aio-js [data-reveal] > *,
.aio-page.aio-js [data-reveal] > ul > li,
.aio-page.aio-js [data-reveal] > ol > li,
.aio-page.aio-js [data-reveal] [data-stagger] {
  opacity: 0;
}

.aio-page [data-reveal].is-in > *,
.aio-page [data-reveal].is-in > ul > li,
.aio-page [data-reveal].is-in > ol > li,
.aio-page [data-reveal].is-in [data-stagger] {
  opacity: 1;
  animation: aio-reveal 0.8s var(--aio-ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes aio-reveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

.aio-page.aio-js .aio-rise {
  opacity: 0;
  transform: translateY(30px);
  animation: aio-rise 0.9s var(--aio-ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}

@keyframes aio-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero ---------- */
/* --aio-hero-bg is set inline by the template from aio_hero_bg. */
.aio-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--aio-top) clamp(56px, 7vw, 110px);
  background-color: var(--aio-bg);
  background-image:
    var(--aio-hero-bg, none),
    linear-gradient(180deg, #fff 0%, var(--aio-bg) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.aio-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-top: clamp(16px, 3vw, 48px);
}

/* Sized so "AI Optimization" always fits its column on one line — the break
   before "Services" is in the copy, so the headline is two lines, never three. */
.aio-hero-title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(44px, 5vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.aio-hero-sub {
  margin: 22px 0 0;
  font-family: var(--heading-font);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* The cycling platform name: a clipped slot the words slide through. */
.aio-cycle {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  padding-inline: 2px;
}

.aio-cycle-word {
  display: inline-block;
  background: var(--aio-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:
    transform 0.38s var(--aio-ease),
    opacity 0.38s var(--aio-ease);
}

.aio-cycle-word.is-out {
  transform: translateY(-110%);
  opacity: 0;
}

.aio-cycle-word.is-in {
  animation: aio-cycle-in 0.5s var(--aio-ease);
}

@keyframes aio-cycle-in {
  from {
    transform: translateY(110%);
    opacity: 0;
  }
}

.aio-hero-text {
  margin: 22px 0 0;
  max-width: 56ch;
  color: var(--aio-muted);
  font-size: 17px;
  line-height: 1.8;
}

.aio-hero-actions {
  margin-top: 34px;
}

.aio-hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

.aio-hero-art > img {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(70, 93, 252, 0.22));
  animation: aio-float 7s ease-in-out infinite;
}

/* A gradient ring turning slowly behind the phone. Only the ring is painted:
   the mask cuts the middle out of a conic fill. */
.aio-hero-ring {
  position: absolute;
  width: min(92%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7e41fc, #336bfb, #0066ff, rgba(126, 65, 252, 0.05), #7e41fc);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
  mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
  opacity: 0.7;
  animation: aio-spin 16s linear infinite;
}

.aio-hero-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(70, 93, 252, 0.35);
}

@keyframes aio-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aio-spin-rev {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes aio-float {
  50% {
    transform: translateY(-14px);
  }
}

/* The "answer" chips: glass pills floating around the phone. */
.aio-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(70, 93, 252, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  animation: aio-float 6s ease-in-out infinite;
}

/* Placed in the gaps of the owner's artwork, which carries its own floating
   cards: one above the phone between the ChatGPT and Gemini cards, one at
   the lower left under the visibility chart, one at the lower right past the
   AI cube. Percentages are of the art box, so they hold at every width. */
.aio-chip-1 {
  top: -3%;
  left: 34%;
  animation-delay: -1s;
}

.aio-chip-2 {
  left: -6%;
  top: 76%;
  animation-delay: -3s;
}

.aio-chip-3 {
  right: -6%;
  bottom: 0;
  animation-delay: -5s;
}

.aio-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aio-grad);
  box-shadow: 0 0 0 4px rgba(70, 93, 252, 0.16);
  animation: aio-pulse 2.4s ease-out infinite;
}

@keyframes aio-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(70, 93, 252, 0.35);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(70, 93, 252, 0);
  }
}

.aio-chip-src {
  font-family: var(--aio-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aio-blue-2);
  padding-left: 10px;
  border-left: 1px solid var(--aio-line);
}

/* ---------- What is AIO ---------- */
.aio-what {
  background: #fff;
}

.aio-what-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.aio-what-art {
  position: relative;
}

/* A gradient rim around a soft white card, one pixel thick. */
.aio-frame {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 1px;
  border-radius: 24px;
  background: transparent;
  box-shadow: 0 40px 80px rgba(70, 93, 252, 0.18);
  transform: rotate(-2deg);
  transition: transform 0.7s var(--aio-ease);
}

.aio-what-art:hover .aio-frame {
  transform: rotate(0deg);
}

.aio-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px;
}

.aio-what-glow {
  position: absolute;
  inset: 10% -10% -10% 10%;
  background: var(--aio-grad-soft);
  border-radius: 32px;
  filter: blur(30px);
  pointer-events: none;
}

/* The five signals as pills with the owner's tiny icons. */
.aio-signals {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aio-signals li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--aio-bg-2);
  border: 1px solid var(--aio-line);
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 0.4s var(--aio-ease),
    border-color 0.4s var(--aio-ease),
    background-color 0.4s var(--aio-ease);
}

.aio-signals li:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(70, 93, 252, 0.5);
}

.aio-signals img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---------- SEO vs AIO ---------- */
.aio-versus {
  background: var(--aio-bg);
}

.aio-vs-wrap {
  position: relative;
  max-width: 1180px;
  margin-inline: auto;
}

/* A real <table> for the pairing semantics, laid out as a grid: each row is
   two columns with the spine's gutter between them. */
.aio-vs,
.aio-vs thead,
.aio-vs tbody {
  display: block;
  width: 100%;
}

.aio-vs tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 80px;
}

.aio-vs th,
.aio-vs td {
  text-align: left;
  padding: 0;
}

.aio-vs th {
  display: block;
}

/* Element-qualified to outrank the `.aio-vs th` left-align above. */
.aio-vs th.aio-vs-head {
  padding-bottom: 22px;
  text-align: center;
}

.aio-vs-head span {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--aio-num);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aio-vs-head-seo span {
  background: var(--aio-ink);
  color: #fff;
}

.aio-vs-head-aio span {
  background: var(--aio-grad);
  color: #fff;
}

/* Each cell is a card; the row is the pair. */
.aio-vs td.aio-vs-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  margin-block: 6px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--aio-line);
  font-size: 15px;
  line-height: 1.55;
  transition:
    transform 0.45s var(--aio-ease),
    box-shadow 0.45s var(--aio-ease),
    border-color 0.45s var(--aio-ease);
}

.aio-vs-seo {
  color: var(--aio-muted);
}

.aio-vs-aio {
  font-weight: 600;
  background: linear-gradient(#fff, #fff) padding-box, var(--aio-grad-soft) border-box;
}

.aio-vs tr:hover .aio-vs-cell {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(70, 93, 252, 0.12);
}

.aio-vs tr:hover .aio-vs-aio {
  border-color: rgba(70, 93, 252, 0.55);
}

.aio-vs-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--aio-bg-2);
}

.aio-vs-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* The spine between the columns, with the "vs" badge riding on it. */
.aio-vs-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--aio-blue-2) 12%, var(--aio-violet) 88%, transparent);
  pointer-events: none;
}

.aio-vs-spine i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--aio-grad);
  box-shadow: 0 0 0 6px var(--aio-bg), 0 8px 20px rgba(70, 93, 252, 0.3);
  font-family: var(--aio-mono);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

/* The two journeys. */
.aio-flows {
  margin-top: clamp(48px, 6vw, 88px);
  display: grid;
  gap: 8px;
}

.aio-flow {
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--aio-line);
}

.aio-flow-ai {
  background: var(--aio-ink);
  color: #fff;
  border-color: transparent;
}

.aio-flow-label {
  margin: 0 0 22px;
  font-family: var(--aio-mono);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aio-blue-2);
}

.aio-flow-ai .aio-flow-label {
  color: rgba(255, 255, 255, 0.6);
}

.aio-flow-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}

.aio-flow-node {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding-inline: 6px;
}

/* The dashed connector marching from each node to the next. */
.aio-flow-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(50% + 36px);
  right: calc(-50% + 36px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--aio-blue-2) 0 8px, transparent 8px 14px);
  background-size: 14px 2px;
  opacity: 0.55;
  animation: aio-march 0.9s linear infinite;
}

.aio-flow-ai .aio-flow-node:not(:last-child)::after {
  background: repeating-linear-gradient(90deg, #8fb0ff 0 8px, transparent 8px 14px);
  background-size: 14px 2px;
}

@keyframes aio-march {
  to {
    background-position: 14px 0;
  }
}

.aio-flow-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aio-bg-2);
  border: 1px solid var(--aio-line);
  transition: transform 0.45s var(--aio-ease), box-shadow 0.45s var(--aio-ease);
}

.aio-flow-node:hover .aio-flow-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 24px rgba(70, 93, 252, 0.2);
}

.aio-flow-ai .aio-flow-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.aio-flow-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.aio-flow-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

/* Between the two tracks: a short dotted drop with an arrow. */
.aio-flow-shift {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--aio-blue-2);
}

.aio-flow-shift i {
  width: 2px;
  height: 14px;
  background: repeating-linear-gradient(180deg, currentColor 0 4px, transparent 4px 8px);
}

.aio-flow-shift svg {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: var(--aio-grad);
  color: #fff;
  animation: aio-nudge 1.6s ease-in-out infinite;
}

@keyframes aio-nudge {
  50% {
    transform: translateY(4px);
  }
}

/* ---------- Services ---------- */
.aio-services {
  background: #fff;
}

.aio-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.aio-service {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--aio-bg);
  border: 1px solid var(--aio-line);
  overflow: hidden;
  transition:
    transform 0.55s var(--aio-ease),
    box-shadow 0.55s var(--aio-ease);
}

/* The gradient rim, masked to a one-pixel ring and faded in on hover. */
.aio-service::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--aio-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--aio-ease);
}

.aio-service:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(70, 93, 252, 0.16);
}

.aio-service:hover::after {
  opacity: 1;
}

.aio-service-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.aio-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--aio-ease);
}

.aio-service:hover .aio-service-media img {
  transform: scale(1.06);
}

.aio-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 42, 0) 55%, rgba(11, 15, 42, 0.55));
}

.aio-tag {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--aio-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aio-blue-2);
}

.aio-service-num {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 10px;
  font-family: var(--aio-num);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}

.aio-service-body {
  padding: 22px 24px 26px;
}

.aio-service-body p {
  margin: 10px 0 0;
  color: var(--aio-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Panel (the gradient CTA blocks) ---------- */
.aio-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(30px, 4.5vw, 64px);
  border-radius: 28px;
  background: var(--aio-ink);
  color: #fff;
  isolation: isolate;
}

/* The glow follows the pointer (--mx/--my from the script); it rests at the
   top-right corner until the pointer arrives. */
.aio-panel-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx, 85%) var(--my, 20%), rgba(126, 65, 252, 0.55), transparent 60%),
    radial-gradient(420px circle at 15% 100%, rgba(0, 102, 255, 0.35), transparent 60%);
  transition: background 0.2s linear;
}

.aio-panel-copy .aio-h2 {
  font-size: clamp(26px, 3vw, 42px);
}

.aio-panel-copy p {
  margin: 14px 0 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
}

/* ---------- Platforms (the orbit) ---------- */
.aio-platforms {
  background: var(--aio-bg);
  overflow: hidden;
}

.aio-platforms-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.aio-pills {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aio-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--aio-line);
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 0.4s var(--aio-ease),
    box-shadow 0.4s var(--aio-ease);
}

.aio-pills li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(70, 93, 252, 0.16);
}

.aio-pills img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
}

.aio-orbit {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.aio-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(70, 93, 252, 0.35);
}

.aio-orbit-ring-1 {
  inset: 9%;
  animation: aio-spin 60s linear infinite;
}

.aio-orbit-ring-2 {
  inset: 24%;
  border-style: solid;
  border-color: rgba(70, 93, 252, 0.18);
}

.aio-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--aio-grad);
  box-shadow:
    0 0 0 12px rgba(70, 93, 252, 0.1),
    0 0 0 28px rgba(70, 93, 252, 0.05),
    0 20px 50px rgba(70, 93, 252, 0.35);
  animation: aio-breathe 4s ease-in-out infinite;
}

/* The site badge, on the gradient disc. */
.aio-orbit-core img {
  width: 58%;
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

@keyframes aio-breathe {
  50% {
    box-shadow:
      0 0 0 18px rgba(70, 93, 252, 0.12),
      0 0 0 40px rgba(70, 93, 252, 0.05),
      0 20px 50px rgba(70, 93, 252, 0.35);
  }
}

/* The whole satellite layer turns; every disc turns back, so the logos stay
   upright. Each satellite is an arm the full size of the orbit, rotated to
   its slot; its disc sits on the arm at the ring's radius. */
.aio-orbit-spin {
  position: absolute;
  inset: 0;
  animation: aio-spin 36s linear infinite;
}

.aio-orbit:hover .aio-orbit-spin,
.aio-orbit:hover .aio-orbit-disc,
.aio-orbit:hover .aio-orbit-ring-1 {
  animation-play-state: paused;
}

.aio-orbit-sat {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--k) * 360deg / var(--n)));
}

.aio-orbit-disc {
  position: absolute;
  top: 9%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--aio-line);
  box-shadow: 0 12px 30px rgba(70, 93, 252, 0.18);
  /* Centre the disc on its anchor with the `translate` PROPERTY, not
     transform: the individual properties compose translate -> rotate, so the
     counter-spin below turns the disc about its own (already centred) box.
     With `transform: translate()` the rotate ran first, around the
     un-translated corner, and every disc drifted off its ring by half a
     diagonal in a different direction. */
  translate: -50% -50%;
  /* Static un-rotate for the arm's slot, then a full reverse turn at the
     layer's speed. var() inside keyframes resolves per element. */
  rotate: calc(var(--k) * -360deg / var(--n));
  animation: aio-orbit-rev 36s linear infinite;
}

@keyframes aio-orbit-rev {
  from {
    rotate: calc(var(--k) * -360deg / var(--n));
  }
  to {
    rotate: calc(var(--k) * -360deg / var(--n) - 360deg);
  }
}

/* Odd satellites ride the inner ring. */
.aio-orbit-sat:nth-child(even) .aio-orbit-disc {
  top: 24%;
  width: 54px;
  height: 54px;
  border-radius: 15px;
}

.aio-orbit-disc img {
  width: 62%;
  height: 62%;
  border-radius: 10px;
  object-fit: contain;
}

/* ---------- We optimize more than keywords ---------- */
.aio-optimize {
  overflow: hidden;
}

/* The pointer spotlight over the whole panel. */
.aio-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(126, 65, 252, 0.28), transparent 60%);
  transition: background 0.15s linear;
}

.aio-tiles {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.aio-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    transform 0.45s var(--aio-ease),
    background-color 0.45s var(--aio-ease),
    border-color 0.45s var(--aio-ease);
}

.aio-tile:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(143, 176, 255, 0.55);
}

.aio-tile-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(126, 65, 252, 0.35), rgba(0, 102, 255, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.aio-tile-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.aio-tile-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.aio-tile-num {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--aio-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- Industries (the showcase) ---------- */
.aio-industries {
  background: #fff;
}

.aio-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.aio-showcase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--aio-line);
}

.aio-showcase-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  gap: 18px;
  align-items: start;
  padding: 22px 12px 22px 0;
  border-bottom: 1px solid var(--aio-line);
  cursor: default;
  outline: none;
  transition: background-color 0.4s var(--aio-ease);
}

/* The active row's gradient underline draws in from the left. */
.aio-showcase-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--aio-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--aio-ease);
}

.aio-showcase-row.is-active::after {
  transform: scaleX(1);
}

.aio-showcase-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--aio-blue-2);
  border-radius: 8px;
}

.aio-showcase-num {
  font-family: var(--aio-num);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(70, 93, 252, 0.4);
  transition: -webkit-text-stroke-color 0.4s var(--aio-ease);
}

.aio-showcase-row.is-active .aio-showcase-num {
  -webkit-text-stroke: 0;
  background: var(--aio-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aio-showcase-thumb {
  display: none;
}

.aio-showcase-copy p {
  margin: 8px 0 0;
  color: var(--aio-muted);
  font-size: 15px;
  line-height: 1.7;
}

.aio-showcase-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--aio-grad);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.45s var(--aio-ease),
    transform 0.45s var(--aio-ease);
}

.aio-showcase-arrow svg path {
  fill: #fff;
}

.aio-showcase-row.is-active .aio-showcase-arrow {
  opacity: 1;
  transform: none;
}

.aio-showcase-stage {
  position: sticky;
  top: var(--aio-top);
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  overflow: hidden;
  background: var(--aio-bg-2);
  box-shadow: 0 40px 80px rgba(70, 93, 252, 0.16);
}

.aio-showcase-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.7s var(--aio-ease),
    transform 1.1s var(--aio-ease);
}

.aio-showcase-slide.is-active {
  opacity: 1;
  transform: none;
  z-index: 1;
}

.aio-showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.aio-showcase-slide figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(11, 15, 42, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Process (the scroll story) ---------- */
.aio-process {
  background: var(--aio-bg);
}

.aio-process-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 96px);
  /* The side column must stretch to the steps' full height — sticky can
     only travel inside its parent, and a start-aligned column is exactly as
     tall as the sticky block itself, i.e. no travel at all. */
  align-items: stretch;
}

.aio-process-sticky {
  position: sticky;
  top: var(--aio-top);
}

.aio-progress {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin-top: 36px;
}

.aio-progress-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.aio-progress-track {
  fill: none;
  stroke: var(--aio-line);
  stroke-width: 4;
}

.aio-progress-fill {
  fill: none;
  stroke: var(--aio-blue-2);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--aio-ease);
}

.aio-progress-num {
  font-family: var(--aio-num);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  background: var(--aio-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aio-progress-num i {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  -webkit-text-fill-color: var(--aio-muted);
}

.aio-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.aio-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 28px 30px 28px 26px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--aio-line);
  overflow: hidden;
  transition:
    transform 0.6s var(--aio-ease),
    box-shadow 0.6s var(--aio-ease),
    border-color 0.6s var(--aio-ease),
    opacity 0.6s var(--aio-ease);
}

/* The gradient bar on the current step's left edge. */
.aio-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--aio-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--aio-ease);
}

.aio-step.is-current {
  border-color: rgba(70, 93, 252, 0.45);
  box-shadow: 0 30px 60px rgba(70, 93, 252, 0.14);
  transform: translateX(6px);
}

.aio-step.is-current::before {
  transform: scaleY(1);
}

.aio-step.is-past {
  opacity: 0.7;
}

.aio-step-num {
  position: absolute;
  right: 22px;
  top: 16px;
  font-family: var(--aio-num);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(70, 93, 252, 0.22);
  transition: -webkit-text-stroke-color 0.5s var(--aio-ease);
}

.aio-step.is-current .aio-step-num {
  -webkit-text-stroke-color: rgba(70, 93, 252, 0.6);
}

.aio-step-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--aio-bg-2);
  border: 1px solid var(--aio-line);
  transition: background 0.5s var(--aio-ease);
}

.aio-step-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.aio-step-body .aio-mono {
  margin-bottom: 8px;
}

.aio-step-body p {
  margin: 10px 0 0;
  color: var(--aio-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 56ch;
}

/* ---------- Why choose ---------- */
.aio-why {
  background: #fff;
}

/* Six tracks: the first three cards span two each (a third), the last two
   span three each (a half), so five cards fill 3 + 2 with no orphan. */
.aio-why-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.aio-why-card {
  grid-column: span 2;
}

.aio-why-card:nth-child(n + 4) {
  grid-column: span 3;
}

.aio-why-card {
  position: relative;
  padding: 30px 28px 32px;
  border-radius: 22px;
  background: var(--aio-bg);
  border: 1px solid var(--aio-line);
  overflow: hidden;
  transition:
    transform 0.55s var(--aio-ease),
    box-shadow 0.55s var(--aio-ease),
    border-color 0.55s var(--aio-ease);
}

.aio-why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(70, 93, 252, 0.45);
  box-shadow: 0 26px 56px rgba(70, 93, 252, 0.14);
}

.aio-why-card p {
  margin: 12px 0 0;
  color: var(--aio-muted);
  font-size: 15px;
  line-height: 1.7;
}

.aio-why-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--aio-grad);
  color: #fff;
  box-shadow: 0 12px 26px rgba(70, 93, 252, 0.28);
}

.aio-why-icon svg {
  width: 26px;
  height: 26px;
}

.aio-why-num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--aio-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--aio-blue-2);
}

/* ---------- FAQ ---------- */
/* The shared accordion, re-inked. The artwork is attached to #faq, an id, so
   the override carries one too. */
.aio-page #faq.aio-faq {
  background-image: none;
  background-color: var(--aio-bg-2);
}

.aio-page .aio-faq .faq-title {
  font-family: var(--heading-font);
  letter-spacing: -0.03em;
}

.aio-page .aio-faq .faq-title .text-blue {
  background: var(--aio-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aio-page .aio-faq .faq-card {
  background: var(--aio-ink);
  border-radius: 20px;
}

.aio-page .aio-faq .faq-cta {
  color: var(--aio-ink);
}

.aio-page .aio-faq .faq-cta:hover .faq-cta-label,
.aio-page .aio-faq .faq-cta:hover .faq-cta-arrow {
  background: var(--aio-grad);
  color: #fff;
}

.aio-page .aio-faq .faq-list details {
  border: 1px solid var(--aio-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.4s var(--aio-ease);
}

.aio-page .aio-faq .faq-list details.is-open,
.aio-page .aio-faq .faq-list details[open] {
  border-color: rgba(70, 93, 252, 0.55);
}

.aio-page .aio-faq .faq-list summary {
  font-weight: 700;
}

.aio-page .aio-faq .faq-list details.is-open > summary,
.aio-page .aio-faq .faq-list details[open] > summary,
.aio-page .aio-faq .faq-list details.is-open summary::after {
  color: var(--aio-blue-2);
}

.aio-page .aio-faq .faq-ans-in p {
  color: var(--aio-muted);
}

/* ---------- Closing ---------- */
.aio-closing {
  overflow: hidden;
}

/* A slow conic sweep behind the copy. */
.aio-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(126, 65, 252, 0.35) 76%, rgba(0, 102, 255, 0.3) 86%, transparent 100%);
  animation: aio-spin 28s linear infinite;
  pointer-events: none;
}

.aio-closing-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aio-closing-inner .aio-mono {
  margin-bottom: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .aio-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .aio-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
  }

  .aio-hero-art {
    order: -1;
    max-width: 520px;
    margin-inline: auto;
  }

  /* The chips keep their pixel size while the art shrinks, so they sit a
     little further from the art's own cards here. */
  .aio-chip-1 {
    left: 20%;
  }

  .aio-chip-2 {
    left: 0;
  }

  .aio-chip-3 {
    right: 0;
  }

  .aio-what-inner,
  .aio-platforms-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .aio-orbit {
    width: min(100%, 440px);
  }

  .aio-head-split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .aio-head-note {
    margin-top: 0;
  }

  .aio-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2 + 2 + 1: the fifth card runs full width. */
  .aio-why-card,
  .aio-why-card:nth-child(n + 4) {
    grid-column: span 3;
  }

  .aio-why-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .aio-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aio-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column; the sticky column releases and reads as an intro. */
  .aio-process-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .aio-process-sticky {
    position: static;
  }

  .aio-progress {
    display: none;
  }

  .aio-step.is-current {
    transform: none;
  }
}

@media (max-width: 960px) {
  /* The stage goes; every row carries its own thumbnail instead. */
  .aio-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .aio-showcase-stage {
    display: none;
  }

  .aio-showcase-row {
    grid-template-columns: 40px 88px minmax(0, 1fr);
    align-items: center;
  }

  .aio-showcase-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
  }

  .aio-showcase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .aio-showcase-arrow {
    display: none;
  }

  .aio-showcase-num {
    font-size: 22px;
  }
}

@media (max-width: 720px) {
  .aio-hero-title {
    font-size: clamp(38px, 11vw, 56px);
  }

  .aio-chip {
    font-size: 12px;
    padding: 8px 12px 8px 10px;
  }

  .aio-chip-src {
    display: none;
  }

  /* The comparison stacks: each pair reads SEO, then AIO. */
  .aio-vs thead {
    display: none;
  }

  .aio-vs tr {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 18px;
  }

  .aio-vs-seo,
  .aio-vs-aio {
    position: relative;
    margin-block: 0;
    padding-top: 30px;
  }

  /* With the header row gone, each card names its column itself. */
  .aio-vs td.aio-vs-cell::before {
    content: attr(data-col);
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: var(--aio-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aio-blue-2);
  }

  .aio-vs-aio {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .aio-vs-seo {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .aio-vs-spine {
    display: none;
  }

  /* The journeys go vertical; the connector drops between nodes. */
  .aio-flow-track {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .aio-flow-node {
    flex-direction: row;
    text-align: left;
    padding-inline: 0;
  }

  .aio-flow-node:not(:last-child)::after {
    top: 56px;
    bottom: -18px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--aio-blue-2) 0 8px, transparent 8px 14px);
    background-size: 2px 14px;
    animation: aio-march-y 0.9s linear infinite;
  }

  .aio-flow-ai .aio-flow-node:not(:last-child)::after {
    background: repeating-linear-gradient(180deg, #8fb0ff 0 8px, transparent 8px 14px);
    background-size: 2px 14px;
  }

  .aio-service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .aio-why-card,
  .aio-why-card:nth-child(n + 4),
  .aio-why-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Twelve tiles one-up is a long scroll; two-up, stacked, keeps it short. */
  .aio-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .aio-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .aio-tile-label {
    font-size: 14px;
  }

  .aio-showcase-row {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
  }

  .aio-showcase-thumb {
    aspect-ratio: 1;
  }

  .aio-showcase-num {
    display: none;
  }

  .aio-step {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 22px;
  }

  .aio-step-num {
    font-size: 40px;
    top: 20px;
  }

  .aio-panel {
    padding: 28px 24px;
    border-radius: 22px;
  }
}

@keyframes aio-march-y {
  to {
    background-position: 0 14px;
  }
}

@media (max-width: 480px) {
  .aio-orbit-disc {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .aio-orbit-sat:nth-child(even) .aio-orbit-disc {
    width: 42px;
    height: 42px;
  }

}

/* ---------- Reduced motion ---------- */
/* Everything visible, nothing moving. The script makes the same call. */
@media (prefers-reduced-motion: reduce) {
  .aio-page [data-reveal] > *,
  .aio-page [data-reveal] > ul > li,
  .aio-page [data-reveal] > ol > li,
  .aio-page [data-reveal] [data-stagger],
  .aio-page .aio-rise {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .aio-page *,
  .aio-page *::before,
  .aio-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .aio-orb,
  .aio-hero-ring,
  .aio-sweep {
    animation: none !important;
  }
}