/* ============================================================
   OrderBook — landing page
   ============================================================ */

:root {
  --canvas: #fcfaf7;
  --surface: #ffffff;
  --surface-muted: #f8fafc;

  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --divider: #f1f5f9;

  --ink: #111827;
  --ink-muted: #374151;
  --ink-subtle: #6b7280;

  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-soft: #fff3e8;
  --accent-strong: #c2410c;
  --accent-ink: #ffffff;

  --secondary: #1e293b;
  --secondary-hover: #0f172a;
  --secondary-ink: #ffffff;

  --positive: #22c55e;
  --positive-soft: #ecfdf5;
  --positive-strong: #15803d;

  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --warning-strong: #b45309;

  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --danger-strong: #b91c1c;

  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);

  /* extras */
  --wa: #25d366;
  --wa-dark: #128c46;
  --paper: #fff8ec;
  --hard: 0 4px 0 rgba(17,24,39,.14);
  --font-d: "Bricolage Grotesque", "Noto Sans Devanagari", Georgia, serif;
  --font-b: "Karla", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;

  /* stage choreography defaults (JS overrides these on .stage) */
  --p: 0; --intro: 0; --center: 0; --pile: 0; --stress: 0; --panic: 0; --stamp: 0;

  color-scheme: light;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  /* faint graph paper, the notebook feel */
  background-image:
    linear-gradient(rgba(17,24,39,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,39,.028) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}

img, svg { display: block; max-width: 100%; }
h1,h2,h3 { font-family: var(--font-d); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; margin: 0; }
p { margin: 0 0 .9em; }
a { color: inherit; }

.wrap { width: min(1140px, calc(100% - 2.5rem)); margin-inline: auto; }

/* ---------- marker highlight ---------- */
.mark {
  position: relative; display: inline-block; padding: 0 .12em; z-index: 0; white-space: nowrap;
}
.mark::before {
  content: ""; position: absolute; inset: 12% -.16em 6% -.16em; z-index: -1;
  background: var(--accent);
  opacity: .28;
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  transform: rotate(-1.2deg);
}
.mark--y::before { background: var(--warning); opacity: .38; transform: rotate(1deg); }

/* ---------- sticker ---------- */
.sticker {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  background: var(--paper); border: 1.5px solid var(--ink);
  padding: .38em .8em; border-radius: 999px; transform: rotate(-1.6deg);
  box-shadow: 3px 3px 0 rgba(17,24,39,.9);
  margin-bottom: 1.15rem;
}
.sticker--dark { background: var(--secondary); color: #fff; border-color: var(--secondary); box-shadow: 3px 3px 0 var(--accent); }

.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: .5rem; }

.h2 { font-size: clamp(2rem, 6.2vw, 3.6rem); margin-bottom: 1.6rem; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--secondary); --fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  background: var(--bg); color: var(--fg); text-decoration: none;
  font-family: var(--font-b); font-weight: 700; font-size: 1rem;
  padding: .82rem 1.3rem; border-radius: 999px; border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.btn--wa { --bg: var(--wa); --fg: #06301a; }
.btn--wa:hover { background: #1fbe5b; }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: none; border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface); box-shadow: none; transform: none; border-color: var(--ink); }
.btn--sm { font-size: .88rem; padding: .5rem .95rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--lg { font-size: 1.12rem; padding: 1.05rem 1.7rem; box-shadow: 6px 6px 0 var(--ink); }
.ico-wa { width: 1.15em; height: 1.15em; fill: currentColor; }

/* ============================================================
   scroll rail + nav
   ============================================================ */
.rail { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 90; background: rgba(17,24,39,.06); }
.rail i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--warning)); }

.nav {
  position: fixed; top: 4px; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2.2rem);
  backdrop-filter: blur(9px);
  background: rgba(252,250,247,.78);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-family: var(--font-d); font-weight: 800; font-size: 1.08rem; }
.nav__mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: -.02em;
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg);
}
.nav__links { margin-left: auto; display: flex; gap: 1.4rem; font-weight: 600; font-size: .93rem; }
.nav__links a { text-decoration: none; color: var(--ink-muted); }
.nav__links a:hover { color: var(--accent-strong); }
.nav .btn--sm { margin-left: auto; }
.nav__links + .btn--sm { margin-left: .4rem; }

/* ============================================================
   ACT 1 — sticky stage
   ============================================================ */
.stage { position: relative; height: 520vh; --p:0; --intro:0; --center:0; --pile:0; --stress:0; --panic:0; --stamp:0; --outro:0; }
.stage__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stage__inner {
  height: 100%; width: min(1240px, calc(100% - 2.5rem)); margin-inline: auto;
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 2rem;
  padding-top: 3.5rem;
}

/* hero copy */
.hero { position: relative; z-index: 4; max-width: 34rem; transform: translateY(calc(var(--intro) * -26vh)); opacity: calc(1 - var(--intro)); }
.hero h1 { font-size: clamp(2.25rem, 5.4vw, 4.2rem); margin-bottom: 1.1rem; }
.hero p { color: var(--ink-muted); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 30rem; }
.hero p i { color: var(--ink); font-style: italic; }
.hero__punch { font-size: 1.16rem !important; color: var(--ink) !important; }
.hero__punch b { background: var(--secondary); color: #fff; padding: 0 .3em; border-radius: 5px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* the scene */
.scene {
  position: relative; height: 100%; display: grid; place-items: center;
  transform: translateX(calc(var(--center) * -55%)) scale(calc(1 + var(--center) * .12));
}
.scene__guy { position: relative; z-index: 3; width: min(300px, 46vh); filter: drop-shadow(0 18px 28px rgba(17,24,39,.13)); }

/* ---------- bhaiya ---------- */
.guy {
  width: 100%; height: auto; overflow: visible;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--stress) * 16px)) rotate(calc(var(--stress) * -2.5deg)) scaleY(calc(1 - var(--stress) * .035));
}
.g-shadow { fill: rgba(17,24,39,.12); }
.g-skin { fill: #f0bb90; stroke: #1f2937; stroke-width: 4; }
.g-neck { fill: #dda579; stroke: #1f2937; stroke-width: 4; }
.g-kurta { fill: #4f6484; stroke: #1f2937; stroke-width: 4.5; stroke-linejoin: round; }
.g-fold { stroke: rgba(255,255,255,.22); stroke-width: 3; stroke-linecap: round; fill: none; }
.g-collar { fill: none; stroke: #1f2937; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.g-hair { fill: #241f1c; stroke: #1f2937; stroke-width: 4; stroke-linejoin: round; }
.g-white { fill: #fff; stroke: #1f2937; stroke-width: 3; }
.g-pupil { fill: #1f2937; }
.g-brow { fill: none; stroke: #241f1c; stroke-width: 5.5; stroke-linecap: round; }
.g-stache { fill: #241f1c; }
.g-nose { fill: none; stroke: #c08c62; stroke-width: 3.4; stroke-linecap: round; }
.g-mouth { fill: none; stroke: #1f2937; stroke-width: 4.5; stroke-linecap: round; }
.g-arm { fill: none; stroke: #4f6484; stroke-width: 21; stroke-linecap: round; }
.g-hand { stroke-width: 3.5; }
.g-phonebody { fill: #1f2937; }
.g-scr--wa { fill: #25d366; }
.g-scr--ob { fill: var(--accent); }

/* facial states driven by --stress */
.g-brows { transform: translateY(calc(var(--stress) * 7px)); }
.g-brow--l { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--stress) * 16deg)); }
.g-brow--r { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--stress) * -16deg)); }
.g-mouth--flat  { opacity: calc(1 - var(--stress)); }
.g-mouth--sad   { opacity: var(--stress); }
.g-mouth--smile { opacity: 0; }
.g-sweat { fill: #7dd3fc; stroke: #0284c7; stroke-width: 3; opacity: calc(var(--stress) * .95); }
.g-sweat path { animation: drip 1.7s ease-in-out infinite; }
.g-sweat path:last-child { animation-delay: .6s; }
@keyframes drip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.g-scr--ob { opacity: 0; }
.guy--happy .g-mouth--smile { opacity: 1; }
.guy--happy .g-scr--ob { opacity: 1; }
.guy--happy .g-arm--wave { transform-box: fill-box; transform-origin: 90% 90%; animation: wave 1.5s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(14deg); } }

/* blink */
.g-eyes { animation: blink 5.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%,95.5%,100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } }

/* panic shake */
.stage.is-panic .scene__guy { animation: shake .16s linear infinite; }
@keyframes shake { 0%,100% { translate: 0 0 } 25% { translate: -3px 1px } 50% { translate: 2px -2px } 75% { translate: -1px 2px } }

/* ---------- chat bubbles ---------- */
.bubbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bub {
  --t: clamp(0, calc((var(--pile) - var(--d)) / .26), 1);
  position: absolute; left: 50%; top: 50%;
  max-width: 15.5rem; width: max-content;
  font-size: clamp(.72rem, 1.15vw, .88rem); font-weight: 600; line-height: 1.35;
  background: var(--surface); color: var(--ink-muted);
  padding: .5rem .78rem; border-radius: 14px 14px 14px 4px;
  border: 1.5px solid var(--line);
  box-shadow: 0 6px 16px rgba(15,23,42,.09);
  opacity: var(--t);
  transform:
    translate(-50%,-50%)
    translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vh))
    translateY(calc((1 - var(--t)) * 46vh))
    rotate(calc(var(--r) * var(--t)))
    scale(calc(.72 + .28 * var(--t)));
}
.bub i { font-style: italic; }
.bub--me { background: #dcf8c6; border-color: #bfe8a4; border-radius: 14px 14px 4px 14px; color: #14532d; }

/* unread counter */
.unread {
  position: absolute; z-index: 5; left: 50%; bottom: 12%;
  transform: translateX(-50%) scale(calc(.86 + var(--stress) * .18));
  display: flex; align-items: center; gap: .5rem;
  background: var(--secondary); color: #fff; font-weight: 700; font-size: .95rem;
  padding: .5rem .95rem; border-radius: 999px;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  opacity: clamp(0, calc(var(--pile) * 4), 1);
}
.unread__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.75) } }
.unread__n { font-variant-numeric: tabular-nums; color: var(--warning); font-size: 1.05rem; }
.unread__lbl { opacity: .7; font-weight: 500; }

/* stamp */
.stamp {
  position: absolute; z-index: 8; left: 50%; top: 46%;
  font-family: var(--font-d); font-weight: 800; font-size: clamp(1.1rem, 3.2vw, 2rem);
  color: var(--danger-strong); border: 4px solid var(--danger-strong);
  padding: .5rem 1.1rem; border-radius: 10px; background: rgba(254,242,242,.92);
  white-space: nowrap;
  opacity: var(--stamp);
  transform: translate(-50%,-50%) rotate(-9deg) scale(calc(2.4 - 1.4 * var(--stamp)));
}

/* scroll hint */
.scrollhint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem; z-index: 6;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-subtle);
  opacity: calc(1 - var(--intro));
}
.scrollhint i { font-style: normal; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(5px) } }

/* ============================================================
   marquee
   ============================================================ */
.marquee {
  background: var(--secondary); color: #fff; overflow: hidden;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  padding: .7rem 0; position: relative; z-index: 10;
}
.marquee__track { display: flex; gap: 1.1rem; width: max-content; animation: slide 28s linear infinite; font-family: var(--font-d); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.marquee__track b { color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   pain notes
   ============================================================ */
.pain { padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem); }
.pain .h2 { text-align: center; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.8rem; margin-top: 2.8rem; }
.note {
  position: relative; background: var(--paper); padding: 2rem 1.5rem 1.5rem;
  border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 rgba(17,24,39,.13);
}
.note--a { transform: rotate(-1.8deg); }
.note--b { transform: rotate(1.2deg); background: #f0f6ff; }
.note--c { transform: rotate(-.7deg); background: #fff1f2; }
.note h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.note p { color: var(--ink-muted); font-size: .97rem; margin: 0; }
.note__pin {
  position: absolute; top: -11px; left: 50%; translate: -50% 0;
  width: 60px; height: 20px; background: rgba(249,115,22,.55);
  border: 1px solid rgba(194,65,12,.35); rotate: -3deg;
}

/* ============================================================
   the turn
   ============================================================ */
.turn {
  position: relative; overflow: hidden; --p: 0;
  background: var(--secondary-hover); color: #fff;
  padding: clamp(5rem, 16vw, 10rem) 0; text-align: center;
  border-block: 3px solid var(--ink);
}
.turn__wrap { position: relative; z-index: 2; }
.turn__kicker { color: #94a3b8; font-size: 1.05rem; letter-spacing: .02em; }
.turn__big { font-size: clamp(2.6rem, 11vw, 7rem); line-height: .95; margin: .5rem 0 1.4rem; }
.turn__big span { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(-4deg); transition: opacity .5s ease, transform .5s cubic-bezier(.2,1.2,.3,1); }
.turn__big span:nth-child(1) { color: var(--accent); transition-delay: .05s; }
.turn__big span:nth-child(2) { transition-delay: .18s; }
.turn__big span:nth-child(3) { transition-delay: .31s; }
.turn.in .turn__big span { opacity: 1; transform: none; }
.turn__sub { color: #cbd5e1; font-size: 1.12rem; max-width: 38rem; margin-inline: auto; }
.turn__sub b { color: #fff; }
.turn__glow {
  position: absolute; left: 50%; top: 50%; width: 70vmax; height: 70vmax; translate: -50% -50%;
  background: radial-gradient(circle, rgba(249,115,22,.30), transparent 62%);
  scale: calc(.3 + var(--p) * .9); opacity: var(--p);
}

/* ============================================================
   how — sticky phone + steps
   ============================================================ */
.how { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 0 clamp(1rem, 4vw, 3rem); }
.how__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.how__steps { display: grid; }

.step { min-height: 100vh; display: grid; align-content: center; max-width: 30rem; padding: 4rem 0; --p: 0; }
.step__no { font-family: var(--font-d); font-size: .95rem; font-weight: 800; color: var(--accent); letter-spacing: .12em; margin-bottom: .5rem; }
.step h3 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: .9rem; }
.step p { color: var(--ink-muted); font-size: 1.06rem; }
.step__mini {
  border-left: 3px solid var(--accent); padding-left: .9rem;
  font-style: italic; color: var(--ink-subtle) !important; font-size: .98rem !important; margin: 0;
}
.step > * { opacity: .25; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.step.is-on > * { opacity: 1; transform: none; }

/* ---------- phone ---------- */
.phone {
  position: relative; width: 300px; height: 600px; font-size: 13px;
  background: #0b1220; border: 9px solid #111827; border-radius: 42px;
  box-shadow: 0 26px 50px rgba(15,23,42,.24), 0 0 0 2px #2b3648 inset;
  overflow: hidden; flex: none;
}
.phone__notch { position: absolute; z-index: 6; top: 8px; left: 50%; translate: -50% 0; width: 92px; height: 20px; background: #111827; border-radius: 999px; }
.phone__screen { position: relative; height: 100%; background: var(--canvas); border-radius: 33px; overflow: hidden; }

.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(22px) scale(.985); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.screen.is-active { opacity: 1; transform: none; }

.s-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.4em 1.1em .8em; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: 1.05em; font-weight: 700; font-family: var(--font-d);
}
.s-top--dark { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.s-chip { font-family: var(--font-b); font-size: .78em; font-weight: 700; background: var(--accent-soft); color: var(--accent-strong); padding: .25em .6em; border-radius: 999px; }
.s-chip--v { background: rgba(255,255,255,.16); color: #fff; }
.s-pad { padding: 1em 1.1em; flex: 1; overflow: hidden; }
.s-hi { font-size: .95em; color: var(--ink-muted); margin-bottom: 1em; }
.s-hi b { color: var(--ink); }
.s-muted { color: var(--ink-subtle); font-style: normal; }
.s-lbl { font-size: .74em; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-subtle); margin: 0 0 .6em; }

.s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.s-cat { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: .55em; box-shadow: var(--shadow-soft); }
.s-cat b { display: block; font-size: .88em; margin-top: .45em; }
.s-cat i { font-style: normal; font-size: .76em; color: var(--ink-subtle); }
.s-thumb { display: block; height: 52px; border-radius: 9px; background: #ddd; }
.s-thumb--1 { background: linear-gradient(135deg,#fda4af,#f43f5e); }
.s-thumb--2 { background: linear-gradient(135deg,#a5b4fc,#4f46e5); }
.s-thumb--3 { background: linear-gradient(135deg,#fcd34d,#f59e0b); }
.s-thumb--4 { background: linear-gradient(135deg,#6ee7b7,#059669); }
.s-thumb--big { height: 62px; width: 62px; }

.s-prod { display: flex; gap: .7em; align-items: center; margin-bottom: 1em; }
.s-prod b { display: block; font-size: 1em; }
.s-prod i { font-style: normal; font-size: .84em; color: var(--accent-strong); font-weight: 700; }

.s-sw { display: flex; gap: .5em; margin-bottom: 1.1em; }
.sw {
  position: relative; font-size: .82em; font-weight: 700; padding: .42em .8em; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-muted);
}
.sw::before { content: ""; display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-right: .4em; vertical-align: baseline; }
.sw--red::before { background: #e11d48; } .sw--blk::before { background: #1f2937; } .sw--blu::before { background: #2563eb; }
.sw.is-on { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 2px 2px 0 var(--accent); }
.sw__badge {
  position: absolute; top: -.6em; right: -.5em; font-style: normal; font-size: .78em;
  background: var(--accent); color: #fff; border-radius: 999px; padding: .05em .45em; border: 1.5px solid #fff;
}

.s-rows { display: grid; gap: .5em; }
.s-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: .5em .7em;
}
.s-row b { font-size: .95em; width: 2em; }
.stp { display: flex; align-items: center; gap: .55em; }
.stp i {
  font-style: normal; display: grid; place-items: center; width: 1.75em; height: 1.75em;
  border-radius: 8px; background: var(--surface-muted); border: 1px solid var(--line-strong); font-weight: 700; color: var(--ink-muted);
}
.stp em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.1em; text-align: center; font-size: 1em; }

.s-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6em;
  padding: .8em 1.1em 1.2em; background: var(--surface); border-top: 1px solid var(--line); font-size: .9em;
}
.s-foot b { font-variant-numeric: tabular-nums; }
.s-btn { background: var(--accent); color: #fff; font-weight: 700; padding: .6em 1em; border-radius: 10px; font-size: .95em; }
.s-btn--full { width: 100%; text-align: center; }
.s-foot--cta { justify-content: stretch; }

.s-line { display: flex; align-items: center; gap: .6em; padding: .6em 0; border-bottom: 1px solid var(--divider); }
.s-line .s-thumb { width: 38px; height: 38px; flex: none; }
.s-line div { flex: 1; min-width: 0; }
.s-line b { display: block; font-size: .9em; }
.s-line i { font-style: normal; font-size: .76em; color: var(--ink-subtle); }
.s-line em { font-style: normal; font-weight: 700; font-size: .88em; }
.s-note { width: 100%; margin-top: .8em; border: 1px dashed var(--line-strong); border-radius: 10px; padding: .55em; font: inherit; font-size: .82em; color: var(--ink-subtle); background: var(--surface-muted); resize: none; }
.s-tot { display: flex; justify-content: space-between; align-items: center; margin-top: .9em; background: var(--accent-soft); border-radius: 11px; padding: .7em .8em; font-size: .9em; }
.s-tot b { font-weight: 700; }
.s-tot--plain { background: var(--surface); border: 1px solid var(--line); }

.steps4 { position: relative; padding-left: 1.5em; display: grid; gap: 1.05em; margin: 1em 0; }
.steps4__bar { position: absolute; left: .42em; top: .5em; bottom: .8em; width: 3px; background: var(--line); border-radius: 3px; }
.steps4__bar i { display: block; width: 100%; height: 0%; background: var(--positive); border-radius: 3px; transition: height .25s linear; }
.st { position: relative; }
.st span { position: absolute; left: -1.5em; top: .18em; width: .92em; height: .92em; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--line-strong); }
.st b { display: block; font-size: .92em; }
.st i { font-style: normal; font-size: .74em; color: var(--ink-subtle); }
.st.done span { background: var(--positive); border-color: var(--positive-strong); }
.st.done b { color: var(--positive-strong); }
.s-rcpt { margin-top: .9em; text-align: center; font-size: .84em; font-weight: 700; color: var(--secondary); background: var(--surface-muted); border: 1px dashed var(--line-strong); border-radius: 10px; padding: .6em; }

/* ============================================================
   product tour — asli app ke screens
   ============================================================ */
.tour { padding: clamp(4rem, 10vw, 7rem) 0; }
.tour__lede { max-width: 42rem; color: var(--ink-muted); font-size: 1.06rem; margin-top: -.6rem; }

.tour__ctrl { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1.8rem; }
.seg { display: inline-flex; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 4px; box-shadow: 4px 4px 0 rgba(17,24,39,.13); }
.seg button {
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-subtle);
  padding: .48rem 1rem; border-radius: 999px; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--ink); color: #fff; }

.tour__stage { display: grid; place-items: center; }
.pane { display: none; }
.pane.is-shown { display: block; }
.frame--mob.pane { margin-inline: auto; }

.tour__notes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: .7rem; }
.tour__notes li { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: .7rem .9rem; font-size: .95rem; color: var(--ink-muted); }
.tour__notes b { color: var(--ink); }

/* ---------- phone frame ---------- */
.frame--mob {
  position: relative; width: 300px; height: 620px; flex: none;
  background: #f6f7fb; border: 9px solid #111827; border-radius: 42px;
  box-shadow: 0 26px 50px rgba(15,23,42,.22), 0 0 0 2px #374151 inset;
  overflow: hidden;
}
.frame__notch { position: absolute; z-index: 9; top: 8px; left: 50%; translate: -50% 0; width: 92px; height: 20px; background: #111827; border-radius: 999px; }

/* ---------- the app itself ---------- */
.app {
  --a-bg: #f6f7fb; --a-panel: #ffffff; --a-chrome: #ffffff; --a-line: #e5e7eb;
  --a-ink: #111827; --a-mut: #4b5563; --a-dim: #6b7280;
  --a-amber: #f59e0b; --a-orange: #ea580c; --a-blue: #2563eb; --a-green: #059669; --a-red: #dc2626;
  display: flex; background: var(--a-bg); color: var(--a-ink);
  font-family: var(--font-b); line-height: 1.35;
  font-size: clamp(7.2px, 1.02vw, 12.5px);
}
.app--mob { flex-direction: column; height: 100%; font-size: 10px; }
.app b, .app h4 { font-family: var(--font-b); letter-spacing: 0; }

.app__logo { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: linear-gradient(140deg,#fb923c,#ea580c); color: #fff; font-size: .78em; font-weight: 800; flex: none; }
.app__logo--sm { width: 2em; height: 2em; }
.app__top i { display: block; font-style: normal; font-size: .78em; color: var(--a-dim); }

/* top bar */
.app__top { display: flex; align-items: center; gap: .6em; padding: .8em 1.2em; border-bottom: 1px solid var(--a-line); background: var(--a-chrome); }
.app--mob .app__top, .app--mob .shop__top { padding-top: 3.1em; }
.app__top b { font-size: .95em; }
.app__burger { font-size: 1.1em; color: var(--a-mut); }
.app__body { flex: 1; padding: 1.4em 1.6em 1.8em; overflow: hidden; }
.app--mob .app__body { padding: .9em; overflow-y: auto; }
.app__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.app__head h4 { font-size: 1.5em; font-weight: 800; margin: 0 0 .15em; letter-spacing: -.01em; }
.app__head p { font-size: .82em; color: var(--a-dim); margin: 0; }

/* KPI tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-bottom: .9em; }
.tile { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: .8em; padding: .85em .9em; box-shadow: 0 1px 2px rgba(17,24,39,.05); }
.tile i { display: flex; justify-content: space-between; align-items: center; font-style: normal; font-size: .8em; color: var(--a-mut); }
.tile em { font-style: normal; color: var(--a-orange); }
.tile b { display: block; font-size: 1.5em; font-weight: 800; letter-spacing: -.02em; margin: .18em 0 .1em; font-variant-numeric: tabular-nums; }
.tile u { text-decoration: none; font-size: .72em; color: var(--a-dim); }

/* cards */
.card { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: .8em; padding: .9em; box-shadow: 0 1px 2px rgba(17,24,39,.05); }
.card__hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7em; }
.card__hd b { font-size: .95em; }
.card__hd span { font-size: .72em; color: var(--a-dim); }

/* trend chart */
.trend { width: 100%; height: 12.5em; display: block; }
.app--mob .trend { height: 8em; }
.trend__grid line { stroke: rgba(17,24,39,.08); stroke-width: 1; }
.trend__bars rect { fill: var(--a-orange); opacity: .85; rx: 2; transform-origin: 50% 162px; transform: scaleY(0); }
.trend__area { fill: rgba(37,99,235,.10); opacity: 0; }
.trend__line { fill: none; stroke: var(--a-blue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }

/* donut */
.donut { position: relative; display: grid; place-items: center; margin-bottom: .7em; }
.donut svg { width: 8.6em; height: 8.6em; transform: rotate(-90deg); }
.app--mob .donut svg { width: 7em; height: 7em; }
.donut__track { fill: none; stroke: rgba(17,24,39,.07); stroke-width: 13; }
.donut__seg { fill: none; stroke-width: 13; stroke-dasharray: 0 251.4; }
.donut__seg.s1 { stroke: var(--a-orange); }
.donut__seg.s2 { stroke: var(--a-blue); }
.donut__seg.s3 { stroke: var(--a-green); }
.donut__seg.s4 { stroke: var(--a-red); }
.donut--row { grid-auto-flow: column; grid-template-columns: auto 1fr; gap: .8em; place-items: center; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .38em; font-size: .8em; }
.legend li { display: flex; align-items: center; gap: .45em; color: var(--a-mut); }
.legend span { width: .55em; height: .55em; border-radius: 50%; flex: none; }
.legend .d1 { background: var(--a-orange); } .legend .d2 { background: var(--a-blue); }
.legend .d3 { background: var(--a-green); } .legend .d4 { background: var(--a-red); }
.legend b { margin-left: auto; color: var(--a-ink); }
.legend u { text-decoration: none; color: var(--a-dim); font-size: .9em; min-width: 3.2em; text-align: right; }

/* horizontal bars */
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.hbars li { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: .6em; font-size: .8em; }
.app--mob .hbars li { grid-template-columns: 7.5em 1fr auto; }
.hbars i { font-style: normal; color: var(--a-mut); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars span { display: block; height: 1.25em; border-radius: 3px; background: var(--a-amber); width: var(--w); transform: scaleX(0); transform-origin: left; }
.hbars u { text-decoration: none; color: var(--a-dim); font-variant-numeric: tabular-nums; }

/* ---------- customer shop ---------- */
.app--shop { flex-direction: column; }
.shop__top { display: flex; align-items: center; gap: .6em; padding: .85em 1.2em; background: var(--a-chrome); border-bottom: 1px solid var(--a-line); }
.shop__top b { display: block; font-size: .95em; }
.shop__top i { display: block; font-style: normal; font-size: .74em; color: var(--a-dim); letter-spacing: .04em; }

.grp { background: var(--a-panel); border: 1px solid var(--a-line); border-radius: .9em; padding: .8em; margin-bottom: .8em; box-shadow: 0 1px 2px rgba(17,24,39,.05); }
.grp__hd { display: flex; align-items: center; gap: .5em; margin-bottom: .65em; }
.grp__hd b { font-size: 1em; font-weight: 800; letter-spacing: .02em; }
.grp__hd i { font-style: normal; font-size: .82em; color: var(--a-dim); }
.grp__hd span { margin-left: auto; color: var(--a-dim); }

.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.pt { background: #fff; border: 1px solid var(--a-line); border-radius: .6em; overflow: hidden; }
.pt b { display: block; font-size: .76em; padding: .5em .5em 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt i { display: inline-block; font-style: normal; font-size: .68em; color: var(--a-dim); padding: 0 .5em .5em; }
.pt u { float: right; text-decoration: none; font-size: .74em; font-weight: 700; padding: 0 .5em .5em; }
.pt--more { position: relative; display: grid; }
.pt--more .ph { aspect-ratio: auto; height: 100%; }
.pt--more b { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 1.5em; font-weight: 800; color: #fff; padding: 0; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.ph { position: relative; display: block; aspect-ratio: 1 / 1.05; }
.ph em {
  position: absolute; left: 50%; bottom: .5em; translate: -50% 0; font-style: normal;
  background: rgba(255,255,255,.92); color: #111827; font-size: .6em; font-weight: 800; letter-spacing: .06em;
  padding: .18em .5em; border-radius: 3px; white-space: nowrap;
}
.pt--more .ph::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8,14,26,.62); }
/* "fabric" swatches — asli photo nahi, sirf texture */
.ph { background-blend-mode: overlay, normal; }
.ph--1 { background: repeating-linear-gradient(96deg, rgba(255,255,255,.10) 0 2px, transparent 2px 7px), linear-gradient(160deg,#6b5145,#3a2a24); }
.ph--2 { background: repeating-linear-gradient(88deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px), linear-gradient(160deg,#8b93a1,#4a515e); }
.ph--3 { background: repeating-linear-gradient(94deg, rgba(255,255,255,.10) 0 2px, transparent 2px 8px), linear-gradient(160deg,#a05a4a,#5c2f2a); }
.ph--4 { background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px), linear-gradient(160deg,#3f7f79,#1d3f42); }
.ph--5 { background: repeating-linear-gradient(97deg, rgba(255,255,255,.10) 0 2px, transparent 2px 7px), linear-gradient(160deg,#c2ab8a,#6d5c46); }
.ph--6 { background: repeating-linear-gradient(92deg, rgba(255,255,255,.08) 0 2px, transparent 2px 6px), linear-gradient(160deg,#4c5b7a,#232f47); }
.ph--7 { background: repeating-linear-gradient(95deg, rgba(255,255,255,.10) 0 2px, transparent 2px 8px), linear-gradient(160deg,#8e2f3f,#4a1720); }
.ph--8 { background: repeating-linear-gradient(89deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px), linear-gradient(160deg,#9d6f8c,#4d3348); }
.ph--9 { background: repeating-linear-gradient(93deg, rgba(255,255,255,.10) 0 2px, transparent 2px 7px), linear-gradient(160deg,#4f8fa8,#20404f); }

/* bottom tab bar */
.tabbar { display: flex; background: var(--a-chrome); border-top: 1px solid var(--a-line); padding: .5em 0 .8em; }
.tabbar a { flex: 1; display: grid; justify-items: center; gap: .15em; font-size: 1.1em; color: var(--a-dim); }
.tabbar a span { font-size: .6em; }
.tabbar a.is-on { color: var(--a-orange); }

/* ============================================================
   tour animations — pane dikhte hi chalti hain
   ============================================================ */
.pane.is-live .tile,
.pane.is-live .card,
.pane.is-live .grp { animation: riseIn .5s cubic-bezier(.2,.8,.25,1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.pane.is-live .pt { animation: riseIn .45s cubic-bezier(.2,.8,.25,1) backwards; animation-delay: calc(300ms + var(--i, 0) * 55ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

.pane.is-live .trend__bars rect { animation: growUp .6s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(650ms + var(--i) * 70ms); }
@keyframes growUp { to { transform: scaleY(1); } }
.pane.is-live .trend__line { animation: draw 1.5s cubic-bezier(.4,0,.2,1) .45s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pane.is-live .trend__area { animation: fadeIn .8s ease 1.1s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.pane.is-live .donut__seg { animation-duration: .9s; animation-timing-function: cubic-bezier(.3,.9,.3,1); animation-fill-mode: forwards; }
.pane.is-live .s1 { animation-name: seg1; animation-delay: .5s;  stroke-dashoffset: 0; }
.pane.is-live .s2 { animation-name: seg2; animation-delay: .65s; stroke-dashoffset: -111.6; }
.pane.is-live .s3 { animation-name: seg3; animation-delay: .8s;  stroke-dashoffset: -186; }
.pane.is-live .s4 { animation-name: seg4; animation-delay: .95s; stroke-dashoffset: -232.5; }
@keyframes seg1 { to { stroke-dasharray: 111.6 139.8; } }
@keyframes seg2 { to { stroke-dasharray: 74.4 177; } }
@keyframes seg3 { to { stroke-dasharray: 46.5 204.9; } }
@keyframes seg4 { to { stroke-dasharray: 18.6 232.8; } }

.pane.is-live .hbars span { animation: growRight .75s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(700ms + var(--i) * 100ms); }
@keyframes growRight { to { transform: scaleX(1); } }
.pane.is-live .hbars u { animation: fadeIn .4s ease backwards; animation-delay: calc(1150ms + var(--i) * 100ms); opacity: 0; animation-fill-mode: forwards; }

/* ============================================================
   compare
   ============================================================ */
.cmp { padding: clamp(3rem, 8vw, 6rem) 0; --p: 0; }
.cmp .h2 { text-align: center; }
.cmp__arrow { color: var(--accent); display: inline-block; transform: translateY(-.05em); }
.cmp__box { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 8px 8px 0 rgba(17,24,39,.13); }
.cmp__side { padding: 2rem 1.6rem; }
.cmp__side--old { background: #fff6f4; }
.cmp__side--new { background: var(--secondary); color: #fff; clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.cmp__tag { display: inline-block; font-family: var(--font-d); font-weight: 800; letter-spacing: .16em; font-size: .82rem; background: var(--ink); color: #fff; padding: .3em .8em; border-radius: 999px; margin-bottom: 1.2rem; }
.cmp__tag--new { background: var(--accent); }
.cmp__side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.cmp__side li { font-size: 1.02rem; font-weight: 500; }
.cmp__side--old li { color: var(--ink-muted); }

/* ============================================================
   features
   ============================================================ */
.feat { padding: clamp(4rem, 10vw, 7rem) 0; }
.feat__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.fcard { background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; padding: 1.3rem; box-shadow: 5px 5px 0 rgba(17,24,39,.1); transition: transform .18s ease, box-shadow .18s ease; }
.fcard:nth-child(odd) { rotate: -.5deg; }
.fcard:nth-child(even) { rotate: .5deg; }
.fcard:hover { transform: translate(-2px,-3px); box-shadow: 8px 9px 0 rgba(17,24,39,.14); }
.fcard__ico { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.fcard h3 { font-size: 1.18rem; margin-bottom: .35rem; }
.fcard p { font-size: .95rem; color: var(--ink-muted); margin: 0; }

/* ============================================================
   CTA
   ============================================================ */
.cta { padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 6vw, 5rem); background: var(--accent-soft); border-top: 3px solid var(--ink); }
.cta__wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2rem; align-items: center; }
.cta h2 { font-size: clamp(2.1rem, 6vw, 3.6rem); margin-bottom: 1rem; }
.cta p { color: var(--ink-muted); max-width: 32rem; font-size: 1.07rem; }
.cta__fine { font-size: .9rem !important; color: var(--ink-subtle) !important; margin-top: 1rem; }
.cta__guy { position: relative; justify-self: center; width: min(260px, 60vw); }
.cta__cup { position: absolute; right: -6%; top: 8%; font-size: 2.4rem; animation: bob 2.4s ease-in-out infinite; }

/* ============================================================
   footer
   ============================================================ */
.foot { background: var(--secondary-hover); color: #cbd5e1; padding: 3rem 0; border-top: 3px solid var(--ink); }
.foot__wrap { display: grid; gap: .6rem; text-align: center; justify-items: center; }
.foot__brand { display: flex; align-items: center; gap: .5rem; font-family: var(--font-d); font-weight: 800; color: #fff; font-size: 1.15rem; }
.foot p { margin: 0; font-size: .95rem; max-width: 34rem; }
.foot__phone { font-weight: 700; }
.foot__phone a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--accent, #25d366); padding-bottom: 2px; }
.foot__phone a:hover { color: var(--accent, #25d366); }
.foot__c { color: #64748b; font-size: .85rem !important; }

/* ============================================================
   reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
.reveal.in { opacity: 1; transform: none; }
.note.in { transform: rotate(var(--rot, -1.8deg)); }
.note--a { --rot: -1.8deg; } .note--b { --rot: 1.2deg; } .note--c { --rot: -.7deg; }
.note { transform: translateY(22px) rotate(0deg); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav__links { display: none; }
  .nav .btn--sm { margin-left: auto; }

  /* stage stacks: copy on top of the scene */
  .stage { height: 420vh; }
  .stage__inner { grid-template-columns: 1fr; padding-top: 4.5rem; align-items: start; }
  .hero { max-width: none; grid-area: 1 / 1; padding-top: .5rem; }
  .scene { grid-area: 1 / 1; height: 100%; display: block; position: relative; transform: none; }
  .bubbles { top: 18vh; }
  .scene__guy {
    position: absolute; left: 50%; bottom: 4vh; margin: 0;
    width: min(340px, 88vw); transform-origin: 50% 100%;
    transform: translateX(-50%) translateY(calc((1 - var(--center)) * 7vh)) scale(calc(.58 + var(--center) * .42));
  }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
  .hero p { font-size: .98rem; }
  .hero__punch { font-size: 1.02rem !important; }
  .bub { max-width: 11rem; font-size: .68rem; padding: .4em .6em; }
  .stamp { font-size: clamp(.9rem, 4.6vw, 1.3rem); white-space: normal; text-align: center; width: 78%; }
  .scrollhint { font-size: .68rem; }

  /* how: sticky phone on top, text below */
  .how { display: block; padding-inline: 1.25rem; }
  .how__sticky { height: 56vh; background: var(--canvas); z-index: 3; padding-top: 3.2rem; }
  .how__sticky::after { content: ""; position: absolute; left: -2rem; right: -2rem; bottom: -26px; height: 26px; background: linear-gradient(var(--canvas), transparent); }
  .phone { width: 232px; height: 430px; font-size: 10.5px; border-width: 7px; border-radius: 34px; }
  .phone__notch { width: 70px; height: 15px; }
  .phone__screen { border-radius: 27px; }
  .s-top { padding-top: 2em; }
  .chart__bars { height: 120px; }
  .step { min-height: 78vh; align-content: end; padding: 0 0 3rem; max-width: none; }
  .step h3 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .step p { font-size: 1rem; }

  .cmp__box { grid-template-columns: 1fr; }
  .cmp__side--new { clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
  .cta__wrap { grid-template-columns: 1fr; }
  .cta__guy { order: -1; width: min(200px, 52vw); }

  /* tour: PC frame chhoti screen pe bhi padhne layak rahe */
  .tour__ctrl { gap: .5rem; }
  .seg button { font-size: .82rem; padding: .45rem .75rem; }
  .frame--mob { width: 280px; height: 570px; }
}

@media (max-width: 560px) {
  .wrap { width: calc(100% - 2rem); }
  .stage { height: 400vh; }
  .scene__guy { width: min(330px, 92vw); }
  .bub { max-width: 9.2rem; font-size: .62rem; }
  .btn--lg { font-size: 1rem; padding: .9rem 1.3rem; }
  .notes { gap: 1.4rem; }
  .tour__ctrl { flex-direction: column; align-items: flex-start; }
  .seg { width: 100%; }
  .seg button { flex: 1; }
  .frame--mob { width: min(268px, 84vw); height: min(545px, 170vw); }
}

@media (max-height: 720px) and (min-width: 901px) {
  .phone { transform: scale(.85); }
}

/* ============================================================
   reduced motion — sab kuch dikha do, hilao mat
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .step > * { opacity: 1; transform: none; }
  .cmp__side--new { clip-path: none; }
  .bub { opacity: 1; transform: translate(-50%,-50%) translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vh)) rotate(var(--r)); }
  .turn__big span { opacity: 1; transform: none; }
  .trend__bars rect { transform: scaleY(1); }
  .trend__line { stroke-dashoffset: 0; }
  .trend__area { opacity: 1; }
  .hbars span { transform: scaleX(1); }
  .hbars u { opacity: 1 !important; }
  .donut__seg.s1 { stroke-dasharray: 111.6 139.8; stroke-dashoffset: 0; }
  .donut__seg.s2 { stroke-dasharray: 74.4 177;   stroke-dashoffset: -111.6; }
  .donut__seg.s3 { stroke-dasharray: 46.5 204.9; stroke-dashoffset: -186; }
  .donut__seg.s4 { stroke-dasharray: 18.6 232.8; stroke-dashoffset: -232.5; }
}