/* ==========================================================================
   Nabo AI — design tokens
   Colours sampled directly from brand_assets/banner_final_v2.png.
   Change a value here and it changes everywhere on the site.
   ========================================================================== */

/* Mona Sans (display) and Inter (body) are loaded in index.html. */

:root {
  /* Brand colour ------------------------------------------------------- */
  --violet:        #6057FF;   /* accent, from "Purpose." / "Impact."      */
  --violet-bright: #7C74FF;   /* hover / highlight                        */
  --violet-deep:   #3B2FD9;   /* gradient shadow end                      */

  /* Surfaces: base -> elevated -> floating ----------------------------- */
  --bg:        #06081F;       /* page base, banner right edge             */
  --bg-2:      #0B0D24;       /* section tint                             */
  --panel:     #15151A;       /* card surface, banner left edge           */
  --panel-2:   #1B1B24;       /* raised card                              */
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.05);

  /* Text ---------------------------------------------------------------- */
  --text:      #F4F4F4;
  --muted:     #A5A3B0;
  /* Banner eyebrow is #5D5C63, but that lands at 2.99:1 on this background.
     Lightened to the nearest tone that clears WCAG AA (4.87:1). */
  --label:     #7E7D87;

  /* Type ---------------------------------------------------------------- */
  --font-display: 'Mona Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --step-hero: clamp(2.6rem, 6.2vw, 5.1rem);
  --step-h2:   clamp(1.9rem, 3.6vw, 3rem);
  --step-h3:   clamp(1.2rem, 1.7vw, 1.5rem);
  --step-lede: clamp(1rem, 1.35vw, 1.15rem);

  /* Spacing scale ------------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Layered, colour-tinted shadows -------------------------------------- */
  --shadow-card:
    0 1px 1px rgba(0,0,0,.4),
    0 8px 24px -12px rgba(6,8,31,.9),
    0 24px 60px -30px rgba(96,87,255,.35);
  --shadow-violet:
    0 1px 2px rgba(0,0,0,.35),
    0 10px 30px -8px rgba(96,87,255,.45);

  --ease-spring: cubic-bezier(.34,1.16,.64,1);
  --shell: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--violet-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Grain / texture overlay ------------------------------------------------ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.shell--narrow { width: min(100% - 40px, 820px); }

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-6); }
.center { text-align: center; }

.section__head { margin-bottom: var(--s-8); }
.section__head .h2 { margin-top: var(--s-3); }

.h2 { font-size: var(--step-h2); }

.lede {
  color: var(--muted);
  font-size: var(--step-lede);
  line-height: 1.75;
}

/* Eyebrow pill ----------------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0;
}
.eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.02);
  color: var(--muted);
}
.eyebrow--pill::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--violet-bright), var(--violet-deep));
  box-shadow: 0 0 10px rgba(96,87,255,.7);
}

/* ==========================================================================
   Buttons — every state defined
   ========================================================================== */

.btn {
  --_bg: transparent;
  --_fg: var(--text);
  --_bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 46px;
  padding-inline: 22px;
  border: 1px solid var(--_bd);
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform .25s var(--ease-spring),
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .25s ease,
    color .2s ease;
}
.btn--sm { height: 38px; padding-inline: 16px; font-size: 13px; }

.btn__arrow { transition: transform .3s var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  --_bg: var(--violet);
  --_bd: var(--violet);
  --_fg: #fff;
  box-shadow: var(--shadow-violet);
}
.btn--primary:hover { --_bg: var(--violet-bright); --_bd: var(--violet-bright); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { --_bg: rgba(255,255,255,.03); }
.btn--ghost:hover { --_bg: rgba(255,255,255,.07); --_bd: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0); }

.btn--invert { --_bg: #fff; --_bd: #fff; --_fg: #0B0D24; }
.btn--invert:hover { --_bg: #EDEBFF; --_bd: #EDEBFF; transform: translateY(-2px); }
.btn--invert:active { transform: translateY(0); }

.btn--onviolet { --_bg: rgba(255,255,255,.12); --_bd: rgba(255,255,255,.35); --_fg: #fff; }
.btn--onviolet:hover { --_bg: rgba(255,255,255,.2); --_bd: #fff; transform: translateY(-2px); }
.btn--onviolet:active { transform: translateY(0); }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(6,8,31,.72);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 68px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.nav__mark {
  height: 30px;
  width: auto;
  flex: none;
  border-radius: 4px; /* softens the mark's own square-ish background edge */
}

.nav__links { display: flex; gap: var(--s-6); }
.nav__links a {
  font-size: 14px;
  color: var(--muted);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--text); }

/* ==========================================================================
   Hero — signature: the banner swoosh, stretched behind the headline
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--s-10) var(--s-9);
  overflow: hidden;
  isolation: isolate;
}

/* Glow horizon.
   Four ellipses stacked in one container; the blurred black core sits on top
   and masks their centres, so what remains visible is a bright arc: white
   hairline rim, purple band, violet band. The container rises into place on
   load. Entry animates transform and opacity only; the blurs on the arcs are
   static filters, not animated. */

.horizon {
  position: absolute;
  z-index: 0;
  left: 0; right: 0; bottom: 0;
  height: 86%;
  isolation: isolate;
  pointer-events: none;
  animation: horizon-enter 2s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes horizon-enter {
  from { transform: translateY(100%) scaleY(1.5); opacity: 0; }
  to   { transform: translateY(50%)  scaleY(1);   opacity: 1; }
}

.horizon__arc {
  position: absolute;
  inset: 0;
  border-radius: 100%;
  transform: translateY(0) scale(var(--arc-scale, 1));
}

/* Staggered rise of the inner arcs, matching the source component's delays. */
@keyframes horizon-arc-rise {
  from { transform: translateY(40%) scale(var(--arc-scale, 1)); }
  to   { transform: translateY(0)   scale(var(--arc-scale, 1)); }
}

.horizon__arc--white {
  --arc-scale: 1.32;
  background: #fff;
  box-shadow: 0 -4px 23px 0 rgba(255,255,255,.71);
}
.horizon__arc--purple {
  --arc-scale: 1.2;
  background: #A558FB;
  filter: blur(31px);
  animation: horizon-arc-rise 2s cubic-bezier(.16, 1, .3, 1) .6s both;
}
.horizon__arc--violet {
  --arc-scale: 1.24;
  background: #4922E5;
  filter: blur(21px);
  animation: horizon-arc-rise 2s cubic-bezier(.16, 1, .3, 1) both;
}
.horizon__arc--core {
  --arc-scale: 1.2;
  /* Page background, not pure black: the core must blend into the section
     below rather than end the hero on a visible seam. */
  background: var(--bg);
  filter: blur(51px);
  animation: horizon-arc-rise 2s cubic-bezier(.16, 1, .3, 1) both;
}

.hero__inner { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }

.hero__title {
  font-size: var(--step-hero);
  max-width: 16ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--violet-bright);
}

.hero__sub {
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--step-lede);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-2); }

.hero__trust {
  margin-top: var(--s-6);
  font-size: 13px;
  color: var(--label);
  letter-spacing: .02em;
}
.hero__trust .stars { color: #FFC53D; letter-spacing: .1em; }

/* ==========================================================================
   Pillars
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.pillar {
  background: var(--bg);
  padding: var(--s-6) var(--s-5);
  transition: background-color .3s ease;
}
.pillar:hover { background: var(--panel); }
.pillar__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}
.pillar__body { font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   Problem
   ========================================================================== */

.problem .h2 { margin-block: var(--s-4) var(--s-5); text-wrap: balance; }

/* ==========================================================================
   Stages — 01. 02. 03. (a real sequence)
   ========================================================================== */

.stages { display: grid; gap: var(--s-4); }

.stage {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--s-7);
  padding: var(--s-7);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-spring), border-color .3s ease;
}
.stage:hover { transform: translateY(-3px); border-color: rgba(96,87,255,.4); }

.stage__label {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  align-self: start;
  position: sticky;
  top: 100px;
}
.stage__num { color: var(--violet); }

.stage__body { display: grid; gap: var(--s-4); }
.stage__body p { color: var(--muted); }
.stage__body p:first-child { color: var(--text); font-size: var(--step-lede); }

/* ==========================================================================
   Case studies
   ========================================================================== */

.cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.case {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-spring), border-color .3s ease;
}
.case:hover { transform: translateY(-4px); border-color: rgba(96,87,255,.4); }
.case:hover .case__media img { transform: scale(calc(var(--zoom, 1) * 1.03)); }

.case__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.case__media img {
  width: 100%; height: 100%;
  /* Wide screenshots (chat logs, canvases) are set to "contain" in
     content.json so the whole conversation stays readable; UI screenshots
     default to "cover" and crop from the top. */
  object-fit: var(--fit, cover);
  object-position: var(--focus, top center);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, top center);
  transition: transform .5s var(--ease-spring);
}
.case__media--contain { background: #0E0E13; }
.case:hover .case__media img { transform: scale(calc(var(--zoom, 1) * 1.03)); }
/* gradient + colour treatment, per house style */
.case__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,8,31,.55) 0%, rgba(6,8,31,.05) 38%, transparent 100%);
  pointer-events: none;
}
.case__tint {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(96,87,255,.16), transparent 62%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Fallback visual where no screenshot exists: the pipeline itself. */
.case__media--diagram {
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(96,87,255,.16), transparent 70%),
    var(--bg-2);
}
.flow {
  display: grid;
  gap: var(--s-3);
  width: 100%;
  max-width: 260px;
  counter-reset: flow;
}
.flow__step {
  counter-increment: flow;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.flow__step::before {
  content: counter(flow);
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--violet-bright), var(--violet-deep));
}
/* connector between steps */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 100%;
  width: 1px;
  height: var(--s-3);
  background: linear-gradient(var(--violet), transparent);
}

.case__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.case__sub { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.case__title { font-size: var(--step-h3); }
.case__text { font-size: 14.5px; line-height: 1.65; color: var(--muted); }

.case__result {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid rgba(96,87,255,.3);
  border-radius: var(--radius-sm);
  background: rgba(96,87,255,.08);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.case__result::before { content: "↗"; color: var(--violet-bright); }

.case__quote {
  margin: 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--violet);
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.case__quote cite { display: block; margin-top: var(--s-1); font-size: 12px; font-style: normal; color: var(--label); }

.case__stack { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.chip {
  font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: rgba(255,255,255,.02);
}

/* ==========================================================================
   Proof / review
   ========================================================================== */

.review {
  margin: 0;
  padding: var(--s-8);
  text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: var(--s-4);
  justify-items: center;
}
.review__stars { color: #FFC53D; letter-spacing: .18em; font-size: 15px; }
.review__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: 22ch;
  text-wrap: balance;
}
.review__source { font-size: 13px; color: var(--label); }
.review__source a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.review__source a:hover { color: var(--violet-bright); }

/* ==========================================================================
   Who this is for
   ========================================================================== */

.fit { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-5); }
.fit__col {
  padding: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.fit__col--yes { border-color: rgba(96,87,255,.28); background: linear-gradient(180deg, rgba(96,87,255,.07), var(--panel) 60%); }
.fit__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: var(--s-5);
}
.fit__list { display: grid; gap: var(--s-3); }
.fit__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.fit__list li::before { font-size: 13px; line-height: 1.7; }
.fit__col--yes .fit__list li::before { content: "✓"; color: var(--violet-bright); }
.fit__col--no .fit__list li::before { content: "✕"; color: var(--label); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-8); align-items: start; }
.faq__head .h2 { margin-block: var(--s-3) var(--s-4); }
.faq__note { color: var(--muted); font-size: 14.5px; margin-bottom: var(--s-5); }

.faq__list { display: grid; gap: var(--s-3); }

.qa {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
  transition: border-color .25s ease, background-color .25s ease;
}
.qa[open] { border-color: rgba(96,87,255,.35); background: var(--panel-2); }
.qa:hover { border-color: rgba(255,255,255,.18); }

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
  content: "＋";
  color: var(--muted);
  font-size: 15px;
  flex: none;
  transition: transform .3s var(--ease-spring), color .2s ease;
}
.qa[open] .qa__q::after { transform: rotate(45deg); color: var(--violet-bright); }

.qa__a { padding: 0 var(--s-5) var(--s-5); color: var(--muted); font-size: 14.5px; }

/* ==========================================================================
   Final CTA panel
   ========================================================================== */

.cta-panel {
  position: relative;
  padding: var(--s-9) var(--s-7);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 140% at 12% 8%, var(--violet-bright) 0%, var(--violet) 42%, var(--violet-deep) 100%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 80px -40px rgba(96,87,255,.7);
}
.cta-panel::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)'/%3E%3C/svg%3E");
}
.cta-panel__body { max-width: 44ch; display: grid; gap: var(--s-4); }
.cta-panel__title { font-size: var(--step-h2); color: #fff; text-wrap: balance; }
.cta-panel__text { color: rgba(255,255,255,.86); font-size: var(--step-lede); }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { padding-block: var(--s-8) var(--s-6); border-top: 1px solid var(--line-soft); }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-7);
}
.footer__label { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.footer__text { color: var(--muted); font-size: 14px; }
.footer__links { display: flex; gap: var(--s-5); font-size: 14px; }
.footer__links a { color: var(--muted); transition: color .2s ease; }
.footer__links a:hover { color: var(--violet-bright); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 15.5vw, 13rem);
  letter-spacing: -0.045em;
  line-height: .95;
  text-align: center;
  background: linear-gradient(180deg, rgba(244,244,244,.16), rgba(96,87,255,.05) 70%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  margin-bottom: var(--s-5);
}

.footer__fine { font-size: 12.5px; color: var(--label); text-align: center; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s var(--ease-spring);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .cases { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: var(--s-6); }
  .stage { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-6); }
  .stage__label { position: static; }
  .nav__links { display: none; }
}

@media (max-width: 620px) {
  .section { padding-block: var(--s-8); }
  /* Widen the horizon past the viewport so the arc flattens: keeps the bright
     rim below the subhead text and the glow inside the hero's bottom edge. */
  .horizon { left: -70%; right: -70%; height: 64%; }
  /* Dense product screenshots need more height to stay legible at 390px. */
  .case__media { aspect-ratio: 4 / 3; }
  .hero { padding-block: var(--s-8) var(--s-7); }
  .pillars { grid-template-columns: 1fr; }
  .cta-panel { padding: var(--s-7) var(--s-5); }
  .review { padding: var(--s-6) var(--s-5); }
  .hero__actions .btn, .cta-panel__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}