/* ==========================================================================
   Sanagis — section choreography
   --------------------------------------------------------------------------
   Every section below consumes `--p` (0..1), written by js/sanagis.js from
   scroll position. Pinning is CSS sticky; the engine never positions anything.
   Only transform / opacity / filter are animated.
   ========================================================================== */

/* Sticky pin scaffold ----------------------------------------------------- */
.pin-host { position: relative; }
.pin {
  position: sticky; top: 0;
  height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

/* ==========================================================================
   1 — HERO
   A single dashboard object, softly out of focus, pushed into focus by the
   first scroll. This same object survives the whole page.
   ========================================================================== */

.hero { position: relative; padding-block: 148px clamp(70px, 10vh, 120px); overflow: clip; }
.hero__grid {
  display: grid; gap: clamp(40px, 6vw, 72px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
}
.hero__copy { position: relative; z-index: 3; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 34px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }

/* Trust strip — a true capacity statement, not a counter. */
.trust {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 46ch; padding: 13px 15px;
  background: rgba(53, 224, 138, .045);
  border: 1px solid rgba(53, 224, 138, .14);
  border-radius: 12px;
  font-size: 12px; color: var(--tx-2); line-height: 1.55;
}
.trust svg { flex: none; margin-top: 2px; color: var(--mint); }

/* -- The object ---------------------------------------------------------- */
.hero__stage {
  position: relative; z-index: 2;
  perspective: 1600px; perspective-origin: 50% 46%;
}

.dash {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;

  /* Camera push: small/turned-away → centered/facing-forward. Sharp the
     whole time — a blur here read as a rendering bug on first load (the
     panel sat at --p:0 fully blurred until the visitor started scrolling),
     and it couldn't anyway: mobile's flatten breakpoint already forces
     filter:none, so blur only ever showed on desktop. Landing pages don't
     get a do-over on first impression, so precision beats the effect. */
  --dash-rot: calc(-19deg + var(--p, 0) * 19deg);
  --dash-tlt: calc(7deg - var(--p, 0) * 7deg);
  --dash-scl: calc(.83 + var(--p, 0) * .17);
  --dash-z:   calc(-320px + var(--p, 0) * 320px);

  transform: translate3d(0, 0, var(--dash-z))
             rotateY(var(--dash-rot)) rotateX(var(--dash-tlt))
             scale(var(--dash-scl));
}

/* Idle float, independent of scroll so the object never feels dead. */
.dash__float { animation: sgbob 7s ease-in-out infinite; }

.panel {
  position: relative;
  background: rgba(11, 17, 18, .9);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Wraps rather than clipping: at narrow widths a long title plus a long meta
   string cannot share one line, and the meta is the part that gets cut. */
.panel__head {
  display: flex; align-items: center; gap: 6px 10px; margin-bottom: 16px;
  flex-wrap: wrap;
}
.panel__title {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint-soft);
}
.panel__meta { margin-left: auto; font-size: 10px; color: var(--tx-4); }
.panel__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  flex: none; animation: sgpulse 1.8s ease-in-out infinite;
}

.panel__score { display: flex; align-items: center; gap: 20px; }

/* Orbiting cyan node — the product does this on its auth panel. */
.ring__orbit { position: absolute; inset: -14px; animation: sgorbit 15s linear infinite; }
.ring__orbit i {
  position: absolute; top: 0; left: 50%; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}

.panel__chart { margin-top: 16px; }
.panel__chart svg { width: 100%; height: 76px; display: block; }
.panel__engines { display: flex; gap: 6px; margin-top: 14px; }
.panel__engines .chip-engine svg { width: 12px; height: 12px; flex: none; }

/* -- Drifting search-query particles ------------------------------------- */
.qfield { position: absolute; inset: -8% -12%; z-index: 1; pointer-events: none; overflow: hidden; }
.qfield span {
  position: absolute; white-space: nowrap;
  font-size: 11.5px; color: var(--tx-4); opacity: .5;
  font-family: 'JetBrains Mono', monospace;
  animation: qdrift linear infinite;
  will-change: transform, opacity;
}
@keyframes qdrift {
  0%   { transform: translate3d(0, 0, 0) scale(.92); opacity: 0; }
  12%  { opacity: .5; }
  80%  { opacity: .32; }
  100% { transform: translate3d(-190px, -76px, 0) scale(1.04); opacity: 0; }
}
/* They dissolve as the dashboard snaps into focus. */
.hero__stage { --q-fade: calc(1 - var(--p, 0)); }
.qfield { opacity: var(--q-fade); transition: opacity .2s linear; }

/* ==========================================================================
   2 — THE PROBLEM
   Queries type themselves; competitor cards illuminate; one slot stays dark.
   ========================================================================== */

.problem__queries { display: flex; flex-direction: column; gap: 20px; margin-top: 46px; }

.query {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.query[data-active='true'] { border-color: #24322F; background: #0D1314; }

.query__bar {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.query__bar svg { flex: none; color: var(--tx-4); }
.query__text {
  font-size: 14px; color: var(--tx-hi); font-weight: 500;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -.02em;
  min-height: 1.4em;
}
.query__caret {
  width: 2px; height: 15px; background: var(--mint); flex: none;
  animation: sgcaret 1.05s step-end infinite; opacity: 0;
}
.query[data-active='true'] .query__caret { opacity: 1; }

.results { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }

.result {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 11px;
  background: #0A0F10; border: 1px solid #141B1C;
  opacity: .26; filter: saturate(.25);
  transition: opacity .5s var(--ease), filter .5s var(--ease),
              background-color .5s var(--ease), border-color .5s var(--ease),
              transform .5s var(--ease);
}
.result__rank {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--tx-3);
  background: #131A1B; font-family: 'JetBrains Mono', monospace;
}
.result__name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.result__meta { font-size: 10.5px; color: var(--tx-3); margin-top: 2px; }
.result__score {
  font-size: 12px; color: var(--tx-2); flex: none;
  font-family: 'JetBrains Mono', monospace;
}

/* Competitor slots light up as their query completes. */
.query[data-done='true'] .result--lit {
  opacity: 1; filter: none;
  background: var(--panel-2); border-color: var(--line-2);
}
.query[data-done='true'] .result--lit:nth-of-type(1) { transition-delay: .05s; }
.query[data-done='true'] .result--lit:nth-of-type(2) { transition-delay: .18s; }
.query[data-done='true'] .result--lit:nth-of-type(3) { transition-delay: .31s; }

/* The empty slot. It never lights. Hold it. */
.result--dark {
  opacity: 1; filter: none;
  background: repeating-linear-gradient(
    -45deg, #080C0D 0 9px, #0A0F10 9px 18px);
  border-style: dashed; border-color: #1E2627;
}
.result--dark .result__rank { background: #101617; color: #3E4B49; }
.result--dark .result__name { color: #46534F; font-weight: 500; }

.problem__note {
  display: flex; align-items: center; gap: 11px;
  margin-top: 16px; padding: 13px 15px;
  border-left: 2px solid var(--amber);
  background: rgba(245, 180, 85, .05);
  border-radius: 0 10px 10px 0;
  font-size: 12.5px; color: #E4CFA6; line-height: 1.55;
}

/* ==========================================================================
   3 — THE PLATFORM (pinned, exploded view)
   Five layers separate as you scroll and lock into place one by one.
   Scrolling back reassembles them.
   ========================================================================== */

.explode { position: relative; perspective: 1500px; perspective-origin: 50% 50%; }
/* Stack width is deliberately conservative: the labels sit outside its right
   edge, and the pair must fit inside .wrap or `overflow-x: clip` silently
   eats the label text. */
.explode__stack {
  position: relative; width: min(500px, 80vw); margin-inline: auto;
  transform-style: preserve-3d;
  transform: rotateX(calc(52deg * var(--p, 0))) rotateZ(calc(-16deg * var(--p, 0)));
  transition: transform .1s linear;
}

.layer {
  position: absolute; inset: 0;
  background: rgba(12, 17, 18, .92);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 16px 17px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  transform-style: preserve-3d;
  will-change: transform, opacity;

  /* --i is the layer index (0..4); spread grows with --p. */
  --spread: calc(var(--p, 0) * var(--i) * 108px);
  transform: translate3d(0, calc(var(--i) * -2px), var(--spread));
  transition: transform .1s linear, opacity .1s linear;
}
.layer:first-child { position: relative; }

/* Each layer's own reveal window inside the pinned scroll. */
.layer__label {
  position: absolute; left: calc(100% + 26px); top: 18px;
  display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: 260px;
  opacity: clamp(0, calc((var(--p, 0) - var(--in)) * 9), 1);
  transform: translate3d(calc((1 - clamp(0, (var(--p, 0) - var(--in)) * 9, 1)) * -14px), 0, 0);
}
.layer__num {
  font-size: 10px; font-weight: 700; color: var(--mint); flex: none;
  font-family: 'JetBrains Mono', monospace; line-height: 1.5;
}
.layer__name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; display: block; }
.layer__desc {
  font-size: 11.5px; color: var(--tx-3); margin-top: 3px;
  display: block; line-height: 1.45;
}

/* Between the flatten breakpoint and full desktop there is less room to the
   right of the stack, so both shrink together rather than clipping. */
@media (max-width: 1180px) {
  .explode__stack { width: min(410px, 72vw); }
  .layer__label { max-width: 186px; left: calc(100% + 18px); }
  .layer__name { font-size: 12.5px; }
  .layer__desc { font-size: 10.5px; }
}

.layer__head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-3);
}
.layer__head span:last-child {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0; text-transform: none; color: var(--tx-4);
}

/* ==========================================================================
   3b — CATEGORY TABS
   Everything that used to live on platform.html, compressed into three
   categories under the exploded-layer moment: Visibility (SEO+GEO),
   Local & Content (Local SEO+Content Lab), Scale (Multi-location+API).
   No scroll-timeline here — a plain, accessible tablist.
   ========================================================================== */

.cat-tabs { margin-top: 8px; }

.cat-tabs__list {
  display: flex; gap: 8px; margin-bottom: 32px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-tabs__list::-webkit-scrollbar { display: none; }

.cat-tabs__tab {
  flex: none; display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 18px;
  font-size: 13px; font-weight: 700; color: var(--tx-2);
  cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.cat-tabs__tab:hover { color: var(--tx); }
.cat-tabs__tab[aria-selected='true'] {
  color: var(--tx); background: #101718; border-color: #2A3B38;
}
.cat-tabs__tab-n {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--tx-4); flex: none;
}
.cat-tabs__tab[aria-selected='true'] .cat-tabs__tab-n { color: var(--mint); }

.cat-tabs__panel { display: none; }
.cat-tabs__panel[data-active='true'] {
  display: block; animation: catin .4s var(--ease) both;
}
@keyframes catin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cat-tabs__grid {
  display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
.feat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.feat__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feat__ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: rgba(53, 224, 138, .1); color: var(--mint);
}
.feat__name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.feat__meta { margin-left: auto; font-size: 10.5px; color: var(--tx-4); font-family: 'JetBrains Mono', monospace; }
.feat__desc { font-size: 12px; color: var(--tx-2); line-height: 1.6; margin-bottom: 16px; }

@media (max-width: 860px) {
  .cat-tabs__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4 — WHO IT'S FOR (curved 3D track)
   ========================================================================== */

.track {
  position: relative; margin-top: 48px;
  perspective: 900px; perspective-origin: 50% 50%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.track__rail { transform: rotateX(17deg); transform-style: preserve-3d; padding-block: 22px; }
.track__lane {
  display: flex; gap: 14px; width: max-content;
  will-change: transform;
}

.chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 13px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--tx-2);
  transition: color .4s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease);
}
.chip i {
  width: 7px; height: 7px; border-radius: 50%; background: #26302E;
  flex: none; transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.chip[data-lit='true'] {
  color: var(--tx); background: #0F1718; border-color: #2A3B38;
  transform: translateZ(46px) scale(1.05);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.chip[data-lit='true'] i { background: var(--mint); box-shadow: 0 0 12px var(--mint); }

/* Tilt-card: cursor-tracked 3D tilt + a spotlight that follows the pointer,
   plus a slow-drifting gradient border. Referenced against 21st.dev's
   "Standard Card" / "Card-11" style language (3D tilt on mouse move, glow
   bloom, animated accent) — reimplemented here in plain CSS/JS custom
   properties rather than importing their React/framer-motion source, which
   doesn't run in a zero-dependency static site. .tilt-card is reusable;
   .reskin below is the first thing that uses it. */
.tilt-card {
  position: relative; transform-style: preserve-3d; overflow: hidden;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .5s var(--ease-out);
  border: 1px solid transparent;
  background-image:
    radial-gradient(560px circle at var(--sx, 50%) var(--sy, 30%), rgba(53,224,138,.10), transparent 55%),
    linear-gradient(var(--panel), var(--panel)),
    conic-gradient(from var(--edge-a, 0deg), #35E08A, #38BDF8, #35E08A);
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  animation: tcedge 7s linear infinite;
}
.tilt-card:hover { transition: transform .08s linear; }
@keyframes tcedge { to { --edge-a: 360deg; } }
@property --edge-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

/* The panel behind the track reskins to the centred industry. */
.reskin__label { font-size: 12.5px; font-weight: 700; }
.reskin__query { font-size: 11.5px; color: var(--tx-3); font-family: 'JetBrains Mono', monospace; }
.reskin [data-skin-show] { display: none; }
.reskin[data-skin='restaurant'] [data-skin-show='restaurant'],
.reskin[data-skin='dentist']    [data-skin-show='dentist'],
.reskin[data-skin='lawyer']     [data-skin-show='lawyer'],
.reskin[data-skin='trainer']    [data-skin-show='trainer'],
.reskin[data-skin='realestate'] [data-skin-show='realestate'],
.reskin[data-skin='contractor'] [data-skin-show='contractor'],
.reskin[data-skin='consultant'] [data-skin-show='consultant'],
.reskin[data-skin='freelancer'] [data-skin-show='freelancer'],
.reskin[data-skin='local']      [data-skin-show='local'] { display: block; }

/* ==========================================================================
   5 — THE FOUR QUESTIONS (pinned)
   The dashboard holds centre; four question cards advance through it.
   ========================================================================== */

.fourq__stage {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center; width: 100%;
}

.fourq__cards { position: relative; min-height: 260px; }
.qcard {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.qcard[data-on='true'] { opacity: 1; transform: none; pointer-events: auto; }
.qcard h3 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 14px; }
.qcard p  { font-size: 14.5px; color: var(--tx-2); line-height: 1.65; max-width: 42ch; }
.qcard__i {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: var(--mint); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px;
}

.fourq__steps { display: flex; gap: 6px; margin-top: 30px; }
.fourq__steps i {
  height: 3px; flex: 1; border-radius: 3px; background: #16201F; overflow: hidden;
}
.fourq__steps i b { display: block; height: 100%; background: var(--mint); transform-origin: left; }

/* -- Visibility node graph ------------------------------------------------ */
.nodes { position: relative; aspect-ratio: 1 / .78; width: 100%; }
.nodes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node__edge { stroke: #1B2526; stroke-width: 1; fill: none;
  transition: stroke .5s var(--ease), stroke-width .5s var(--ease); }
.node__dot  { transition: fill .5s var(--ease), r .5s var(--ease); }
.node__ring { fill: none; stroke-width: 1.2; opacity: 0; transition: opacity .5s var(--ease); }
.node__cap  { font-size: 10.5px; fill: var(--tx-3); font-weight: 600;
  transition: fill .5s var(--ease); }

/* Q1 — surfaces light up. */
.nodes[data-q='1'] .node__dot,
.nodes[data-q='2'] .node__dot,
.nodes[data-q='3'] .node__dot,
.nodes[data-q='4'] .node__dot { fill: var(--mint); }
.nodes[data-q='1'] .node__edge,
.nodes[data-q='2'] .node__edge,
.nodes[data-q='3'] .node__edge,
.nodes[data-q='4'] .node__edge { stroke: #2B4A40; }
.nodes[data-q='1'] .node__cap,
.nodes[data-q='2'] .node__cap,
.nodes[data-q='3'] .node__cap,
.nodes[data-q='4'] .node__cap { fill: var(--tx-2); }

/* Q2 — the gaps pulse in the warm signal colour. */
.nodes[data-q='2'] .node--gap .node__dot,
.nodes[data-q='3'] .node--gap .node__dot,
.nodes[data-q='4'] .node--gap .node__dot { fill: var(--amber); }
.nodes[data-q='2'] .node--gap .node__ring { opacity: 1; stroke: var(--amber);
  animation: sgring 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.nodes[data-q='2'] .node--gap .node__cap { fill: var(--amber); }

/* -- Q3 recommendation list ---------------------------------------------- */
.recs { display: flex; flex-direction: column; gap: 9px; }
.recs .opp {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .5s var(--ease-over), transform .5s var(--ease-over);
}
.fourq[data-q='3'] .recs .opp,
.fourq[data-q='4'] .recs .opp { opacity: 1; transform: none; }
.fourq[data-q='3'] .recs .opp:nth-child(2) { transition-delay: .13s; }
.fourq[data-q='3'] .recs .opp:nth-child(3) { transition-delay: .26s; }

/* -- Q4 trend chart ------------------------------------------------------- */
.trend { position: relative; }
.trend svg { width: 100%; height: 190px; display: block; }
.trend__legend {
  display: flex; gap: 16px; justify-content: flex-end;
  font-size: 10.5px; color: var(--tx-2); margin-bottom: 8px;
}
.trend__legend span { display: flex; align-items: center; gap: 6px; }
.trend__legend i { width: 8px; height: 8px; border-radius: 2px; display: block; }

/* Each question's visual only occupies the stage while it is active. */
.qvis {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.qvis[data-on='true'] { opacity: 1; transform: none; pointer-events: auto; }
.fourq__vis { position: relative; min-height: min(58vh, 460px); }

/* ==========================================================================
   6 — MEET SAGE (pinned, layers reconverge)
   Sage is the sparkle mark — never a humanoid, never a face. This is how the
   product itself renders her: gradient tile, mint sparkle, live badge.
   ========================================================================== */

.sage__stage {
  display: grid; gap: clamp(30px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; width: 100%;
}

.sage__hero { position: relative; perspective: 1400px; }

/* The exploded layers from §3 come back together as --p climbs. */
.sage__deck { position: relative; transform-style: preserve-3d; }
.sage__deck .layer {
  --spread: calc((1 - var(--p, 0)) * var(--i) * 96px);
}

.sage__fab {
  position: absolute; right: -14px; top: -14px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-135); color: var(--on-mint);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(53, 224, 138, .3);
  opacity: clamp(0, calc((var(--p, 0) - .38) * 6), 1);
  transform: scale(calc(.6 + clamp(0, (var(--p, 0) - .38) * 6, 1) * .4));
}
.sage__fab::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(53, 224, 138, .35);
  animation: sgring 2.4s ease-out infinite;
}
.sage__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--mint);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
}

/* Sage's chat panel slides in from the right, exactly like in-product. */
.chat {
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: clamp(0, calc((var(--p, 0) - .5) * 4), 1);
  transform: translate3d(calc((1 - clamp(0, (var(--p, 0) - .5) * 4, 1)) * 46px), 0, 0);
}
.chat__head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px; border-bottom: 1px solid var(--line);
  background: linear-gradient(140deg, rgba(53, 224, 138, .1), rgba(56, 189, 248, .04));
}
.chat__name { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.chat__sub  { font-size: 10.5px; color: var(--tx-3); }
.chat__live {
  position: absolute; bottom: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--mint); border: 2px solid var(--bg-2);
}
.chat__body { padding: 17px; display: flex; flex-direction: column; gap: 13px; }

.msg { display: flex; }
.msg--you { justify-content: flex-end; }
.msg b {
  font-weight: 600; font-size: 12.5px; line-height: 1.55; padding: 10px 13px;
  display: block;
}
.msg--you b {
  max-width: 82%; background: var(--mint); color: var(--on-mint);
  border-radius: 13px 13px 4px 13px;
}
.msg--sage b {
  max-width: 90%; background: #101617; border: 1px solid #1C2426;
  color: #D6E1DE; font-weight: 400; border-radius: 13px 13px 13px 4px;
}
.msg--sage b a { color: var(--mint); font-weight: 600; white-space: nowrap; }

.chat__acts {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 14px;
}
.chat__acts span {
  font-size: 11px; font-weight: 600; color: var(--mint-pale);
  background: rgba(53, 224, 138, .09);
  border: 1px solid rgba(53, 224, 138, .18);
  border-radius: 20px; padding: 7px 12px;
}

/* ==========================================================================
   SITE-WIDE SAGE WIDGET — bottom-right, always available, not scroll-bound.
   Reuses the chat__head/chat__body/msg/chat__acts vocabulary from the Meet
   Sage section (same visual language) but NOT the .chat/.sage__fab classes
   themselves, since those are driven by --p from the pinned scroll section
   this widget has no relation to — a fresh, fixed-position component.
   ========================================================================== */
.sage-cs {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.sage-cs__launcher {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: var(--grad-135); color: var(--on-mint); border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(53, 224, 138, .35);
  transition: transform .25s var(--ease-out);
}
.sage-cs__launcher:hover { transform: scale(1.06); }
.sage-cs__launcher svg { width: 24px; height: 24px; }
.sage-cs__launcher::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(53, 224, 138, .35);
  animation: sgring 2.4s ease-out infinite;
}
.sage-cs__live {
  position: absolute; top: 2px; right: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #35E08A; border: 2px solid var(--bg-1, #06090A);
}

.sage-cs__panel {
  width: min(340px, calc(100vw - 44px)); max-height: min(480px, 70vh);
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
  transform-origin: bottom right;
  opacity: 0; transform: scale(.92) translateY(12px); pointer-events: none;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.sage-cs[data-open='true'] .sage-cs__panel {
  opacity: 1; transform: none; pointer-events: auto;
}
.sage-cs__panel .chat__body { overflow-y: auto; flex: 1; }
.sage-cs__close {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: none; color: var(--tx-3); cursor: pointer;
  font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.sage-cs__close:hover { color: var(--tx); background: rgba(255,255,255,.06); }
.sage-cs__typing { display: flex; gap: 4px; padding: 10px 13px; }
.sage-cs__typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tx-4);
  animation: sgtyping 1.1s ease-in-out infinite;
}
.sage-cs__typing i:nth-child(2) { animation-delay: .15s; }
.sage-cs__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sgtyping { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .sage-cs__launcher::after { animation: none; }
  .sage-cs__panel { transition: opacity .01s linear; }
}
@media (max-width: 480px) {
  .sage-cs { right: 14px; bottom: 14px; }
  .sage-cs__panel { width: calc(100vw - 28px); }
}

/* "Sage is acting" cursor indicators over the dashboard. */
.cursor {
  position: absolute; display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 7px; border-radius: 20px;
  background: rgba(10, 14, 15, .94); border: 1px solid var(--line-3);
  font-size: 10.5px; font-weight: 700; color: var(--mint-pale);
  white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cursor i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  flex: none; animation: sgpulse 1.4s ease-in-out infinite;
}
.sage[data-act='1'] .cursor--a,
.sage[data-act='2'] .cursor--a,
.sage[data-act='2'] .cursor--b,
.sage[data-act='3'] .cursor--a,
.sage[data-act='3'] .cursor--b,
.sage[data-act='3'] .cursor--c { opacity: 1; transform: none; }

.sage__film {
  width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: #06090A; display: block;
}

/* ==========================================================================
   6b — SAGE, CONDENSED
   The "works in every department" bento from sage.html, compressed to a
   tight 3x2 grid of one-liners, plus the "what she won't do" strip.
   ========================================================================== */

.sage-mini {
  display: grid; gap: 12px; margin-top: 8px;
  grid-template-columns: repeat(3, 1fr);
}
.sage-mini__item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; padding: 15px 16px;
}
.sage-mini__item h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px;
}
.sage-mini__item p { font-size: 11.5px; color: var(--tx-2); line-height: 1.55; }

.limits-row { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.limits-row .flag { font-size: 12px; }

@media (max-width: 860px) {
  .sage-mini { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sage-mini { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7 — WHY SANAGIS (results diagram)
   Sage at the hub, six concrete outcomes at the spokes. A traveling pulse
   on each connector (native SVG animateMotion — no JS) loops continuously,
   independent of scroll, reading as "she's always working."
   ========================================================================== */

.results-diagram {
  position: relative; max-width: 820px; margin: 54px auto 0;
  aspect-ratio: 800 / 460;
}
.results-diagram__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.results-diagram__pulse { filter: drop-shadow(0 0 5px rgba(124, 240, 182, .9)); }

@media (prefers-reduced-motion: reduce) {
  .results-diagram__pulse { display: none; }
}

.results-diagram__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 35% 30%, #123424, #0B1112 70%);
  border: 1px solid rgba(53, 224, 138, .4);
  color: var(--mint);
  box-shadow: 0 0 0 8px rgba(53, 224, 138, .06), 0 0 40px rgba(53, 224, 138, .25);
}
.results-diagram__hub span { font-size: 10.5px; font-weight: 700; color: var(--tx); letter-spacing: .02em; }

.results-diagram__node {
  position: absolute; transform: translate(-50%, -50%);
  width: min(210px, 40vw);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.results-diagram__stat {
  font-size: 21px; font-weight: 700; color: var(--mint); letter-spacing: -.01em;
}
.results-diagram__stat i {
  font-style: normal; font-size: 12px; font-weight: 600; color: var(--tx-3); margin-left: 2px;
}
.results-diagram__label { font-size: 10.5px; color: var(--tx-2); line-height: 1.45; }

/* Below ~640px a radial layout has no room to breathe — collapse to a
   simple vertical list, Sage's hub leading it rather than centered. */
@media (max-width: 640px) {
  .results-diagram {
    aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .results-diagram__lines { display: none; }
  .results-diagram__hub { position: static; transform: none; }
  .results-diagram__node {
    position: static; transform: none; width: 100%; max-width: 340px; flex-direction: row;
    text-align: left; gap: 14px;
  }
  .results-diagram__stat { flex: none; min-width: 64px; }
}

/* ==========================================================================
   8 — PRICING
   Anchored three-tier. Light gathers behind the middle tier's CTA.
   ========================================================================== */

.offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 26px 30px; border-radius: var(--r-xl);
  background: linear-gradient(140deg, rgba(53, 224, 138, .09), rgba(31, 165, 201, .04));
  border: 1px solid #1F2A2B; margin-bottom: 26px;
}
.offer__price { font-size: 42px; font-weight: 600; letter-spacing: -.04em; color: var(--mint); }
.offer__lead  { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.offer__sub   { font-size: 13px; color: var(--tx-2); margin-top: 4px; }

.tiers { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); align-items: start; }

.tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 26px 24px;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.tier:hover { border-color: #253331; transform: translateY(-3px); }

.tier--popular {
  border-color: rgba(53, 224, 138, .34);
  background: linear-gradient(180deg, #10191A 0%, #0D1415 100%);
}
/* Ambient light gathers behind the popular tier's CTA specifically. */
.tier--popular .tier__cta-wrap { position: relative; }
.tier--popular .tier__cta-wrap::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 210px; height: 92px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(53, 224, 138, .3), transparent 68%);
  filter: blur(20px); pointer-events: none; z-index: 0;
  animation: sgpulse 4.5s ease-in-out infinite;
}
.tier--popular .btn { position: relative; z-index: 1; }

.tier__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--mint); color: var(--on-mint);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 20px; white-space: nowrap;
}
.tier__name { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.tier__for  { font-size: 12px; color: var(--tx-3); margin-top: 4px; min-height: 2.6em; }
.tier__price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 6px; }
.tier__amount { font-size: 40px; font-weight: 600; letter-spacing: -.04em; }
.tier__per { font-size: 12.5px; color: var(--tx-3); }
.tier__note { font-size: 11.5px; color: var(--tx-4); margin-bottom: 20px; }

.tier__list { display: flex; flex-direction: column; gap: 11px; margin: 20px 0 24px; flex: 1; }
.tier__list li { display: flex; gap: 10px; font-size: 12.5px; color: var(--tx-2); line-height: 1.5; }
.tier__list svg { flex: none; margin-top: 2px; color: var(--mint); }

.tier__proof {
  margin-top: 14px; font-size: 11px; color: var(--tx-3); text-align: center; line-height: 1.5;
}

.pricing__honest {
  margin-top: 22px; text-align: center;
  font-size: 12.5px; color: var(--tx-3); line-height: 1.6;
}

/* The first-five-minutes strip, condensed from pricing.html into four steps. */
.steps-row {
  display: grid; gap: 12px; margin-top: 30px;
  grid-template-columns: repeat(4, 1fr);
}
.step {
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 13px; padding: 16px;
}
.step__n {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--mint); font-weight: 600; margin-bottom: 9px;
}
.step h4 { font-size: 13px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; }
.step p { font-size: 11.5px; color: var(--tx-2); line-height: 1.55; }

@media (max-width: 860px) {
  .steps-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9 — FAQ
   ========================================================================== */

.faq { max-width: 820px; margin-inline: auto; margin-top: 44px; }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 21px 4px; background: none; border: 0; cursor: pointer;
  text-align: left; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--tx); transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--mint-soft); }
.faq__q svg {
  flex: none; margin-left: auto; color: var(--tx-3);
  transition: transform .42s var(--ease-over), color .2s var(--ease);
}
.faq__q[aria-expanded='true'] svg { transform: rotate(180deg); color: var(--mint); }

.faq__a {
  height: 0; overflow: hidden;
  transition: height .44s var(--ease-over);
}
.faq__a p {
  font-size: 14px; color: var(--tx-2); line-height: 1.72;
  padding: 0 60px 24px 4px;
}
.faq__a p + p { padding-top: 14px; }

/* ==========================================================================
   10 — FINAL CTA (camera pulls all the way back, loop closes)
   ========================================================================== */

.final { position: relative; text-align: center; overflow: clip; }
.final__stage { perspective: 1400px; margin-bottom: 52px; }
.final__obj {
  width: min(430px, 78vw); margin-inline: auto;
  transform-style: preserve-3d;
  /* Inverse of the hero: we pull back out to the small floating object. */
  transform: scale(calc(1 - var(--p, 0) * .3))
             rotateY(calc(var(--p, 0) * 13deg))
             rotateX(calc(var(--p, 0) * -5deg));
}
.final h2 { margin-bottom: 20px; }
.final .lede { margin-inline: auto; margin-bottom: 32px; }
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.final__tag {
  margin-top: 40px; font-size: 12.5px; color: var(--tx-3);
  letter-spacing: .01em;
}

/* ==========================================================================
   Shared small parts
   ========================================================================== */

.head { max-width: 62ch; }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { margin-bottom: 18px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 17px; min-width: 124px;
}
.stat__v { font-size: 19px; font-weight: 600; color: var(--mint); }
.stat__l { font-size: 10.5px; color: var(--tx-2); margin-top: 4px; }

.flag {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(56, 189, 248, .05); border: 1px solid rgba(56, 189, 248, .16);
  font-size: 12.5px; color: #A9CFE2; line-height: 1.6;
}
.flag svg { flex: none; margin-top: 2px; color: var(--cyan); }

/* ==========================================================================
   Responsive — 3D → layered 2D parallax. Narrative order never changes.
   ========================================================================== */

@media (max-width: 980px) {
  .hero__grid,
  .fourq__stage,
  .sage__stage { grid-template-columns: 1fr; }

  .hero { padding-top: 118px; }
  .hero__stage { order: 2; }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .tile, .bento .tile--wide { grid-column: span 1; }

  .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .tier--popular { order: -1; }
}

@media (max-width: 720px) {
  /* Flatten every 3D transform to a 2D parallax lift. Sequence survives. */
  .explode__stack { transform: none; }
  .layer {
    position: relative; inset: auto; margin-bottom: 12px;
    transform: translate3d(0, calc((1 - clamp(0, (var(--p, 0) - var(--in)) * 6, 1)) * 20px), 0);
    opacity: clamp(.25, calc((var(--p, 0) - var(--in)) * 6), 1);
    box-shadow: none;
  }
  .layer__label {
    position: static; margin-bottom: 12px; opacity: 1; transform: none;
    white-space: normal;
  }
  .explode { perspective: none; }
  .pin { position: relative; height: auto; min-height: 0; padding-block: 60px; }
  .pin-host { height: auto !important; }

  .track__rail { transform: none; }
  .chip[data-lit='true'] { transform: scale(1.04); }

  .fourq__cards { position: static; min-height: 0; }
  .qcard { position: static; opacity: 1; transform: none; margin-bottom: 40px; }
  .qvis { position: static; opacity: 1; transform: none; margin-bottom: 34px; }
  .fourq__vis { min-height: 0; }
  .fourq__steps { display: none; }

  .dash { transform: scale(.98); filter: none; }
  .final__obj { transform: none; }

  /* Sage: the pin is gone, so the slide-in offsets no longer have room to
     travel into — they would push the panel past the viewport edge and get
     clipped. Serve the composed state and let the reveal carry the entrance. */
  .chat { opacity: 1; transform: none; }
  .sage__fab {
    position: static; opacity: 1; transform: none;
    margin: 0 0 16px auto;
  }
  .cursor { display: none; }
  .sage__stage { gap: 26px; }

  .bento { grid-template-columns: 1fr; }
  .faq__a p { padding-right: 12px; }
  .offer { padding: 22px; }
  .offer__price { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash, .final__obj, .explode__stack { transform: none !important; filter: none !important; }
  .layer { transform: none !important; }
  .qfield { display: none; }
  .qcard, .qvis { opacity: 1 !important; transform: none !important; position: static; }
  .fourq__cards, .fourq__vis { position: static; min-height: 0; }
  .qcard { margin-bottom: 34px; }
  .chat, .sage__fab { opacity: 1 !important; transform: none !important; }
  .cursor { opacity: 1 !important; transform: none !important; }
  .recs .opp { opacity: 1 !important; transform: none !important; }
  .result--lit { opacity: 1 !important; filter: none !important;
    background: var(--panel-2) !important; border-color: var(--line-2) !important; }
}