/* ==========================================================================
   Indigroo — section styles S1 → S14 + in-phone app UI + subpages
   ========================================================================== */

/* ==========================================================================
   Phone mockup (shared) — live DOM UI inside, never a flat screenshot
   ========================================================================== */
.phone-stage {
  --pscale: 1;
  display: flex; justify-content: center;
  transform: scale(var(--pscale));
  transform-origin: center center;
  margin-block: calc((var(--pscale) - 1) * 330px);
}
.phone {
  --pw: 320px;
  position: relative;
  width: var(--pw);
  aspect-ratio: 320 / 660;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(150deg, #2A2118 0%, var(--deep-bark) 42%, #0B0906 100%);
  box-shadow:
    0 0 0 1.5px rgba(232, 220, 200, .18),
    0 50px 90px -34px rgba(0, 0, 0, .75),
    inset 0 1px 1px rgba(255, 255, 255, .12);
  transition: transform var(--t-cine) var(--ease-out);
}
.phone::after { /* screen glare */
  content: "";
  position: absolute; inset: 11px;
  border-radius: 36px;
  background: linear-gradient(122deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none; z-index: 4;
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.phone__notch {
  position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 26px;
  border-radius: var(--r-pill);
  background: #070906;
  z-index: 5;
}
.phone__float { animation: phoneFloat 6s ease-in-out infinite; }
@keyframes phoneFloat {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}

/* ---------- In-phone app chrome ---------- */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.app__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: #fff;
}
.app__status--dark { color: var(--deep-bark); }
.app__status i { display: inline-block; width: 15px; height: 9px; border-radius: 2px; background: currentColor; opacity: .85; font-style: normal; }
.app__status .sig { width: 16px; height: 10px; clip-path: polygon(0 100%, 22% 100%, 22% 62%, 0 62%, 0 100%, 30% 100%, 30% 40%, 52% 40%, 52% 100%, 60% 100%, 60% 18%, 82% 18%, 82% 100%, 90% 100%, 90% 0, 100% 0, 100% 100%); }

.app__head {
  padding: 6px 16px 14px;
  background: linear-gradient(160deg, var(--peepal-green) 0%, var(--deep-forest) 100%);
  color: #fff;
  border-radius: 0 0 20px 20px;
}
.app__loc { display: flex; align-items: center; gap: 7px; }
.app__loc svg { width: 15px; height: 15px; color: var(--burnished-gold); }
.app__loc small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.app__loc b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.app__loc .chev { margin-left: auto; opacity: .8; }
.app__search {
  display: flex; align-items: center; gap: 8px;
  margin-top: 11px; padding: 9px 12px;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--r-pill);
  color: var(--muted-sand);
  font-size: 11.5px;
}
.app__search svg { width: 14px; height: 14px; }

.app__body { flex: 1; overflow: hidden; padding: 12px 0 0; }

/* banner carousel */
.app__banners { position: relative; height: 84px; margin: 0 16px 12px; border-radius: 14px; overflow: hidden; }
.app__banner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 14px;
  color: #fff;
  opacity: 0;
  transform: translateX(28px) scale(.98);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.app__banner.is-on { opacity: 1; transform: none; }
.app__banner:nth-child(1) { background: var(--grad-brand); }
.app__banner:nth-child(2) { background: var(--grad-gold); }
.app__banner:nth-child(3) { background: linear-gradient(135deg, var(--deep-forest) 0%, var(--peepal-green) 100%); }
.app__banner b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.app__banner span { font-size: 10px; opacity: .9; margin-top: 2px; }
.app__banner em { font-style: normal; align-self: flex-start; margin-top: 7px; font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .22); }
.app__dots { position: absolute; bottom: 7px; right: 10px; display: flex; gap: 4px; }
.app__dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: width var(--t-std) var(--ease-out), background-color var(--t-std); }
.app__dots i.is-on { width: 13px; border-radius: 3px; background: #fff; }

/* category rail */
.app__rail { display: flex; gap: 9px; padding: 0 16px 13px; overflow: hidden; }
.app__cat { flex: none; width: 52px; text-align: center; }
.app__cat span {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  font-size: 21px;
}
.app__cat b { display: block; font-size: 8.5px; font-weight: 600; color: var(--warm-umber); margin-top: 5px; letter-spacing: -.01em; }

/* shop cards in feed */
.app__sectitle { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 9px; }
.app__sectitle b { font-family: var(--font-display); font-size: 13px; letter-spacing: -.02em; }
.app__sectitle span { font-size: 9.5px; font-weight: 700; color: var(--gold); }
.app__shops { display: grid; gap: 10px; padding: 0 16px; }
/* Distance rank inside the phone feed */
.app__rank {
  position: absolute; top: -5px; left: -5px;
  z-index: 2;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #fff;
  font-size: 8.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 7px -3px rgba(200, 134, 10, .9);
}
.app__meta b { color: var(--peepal-green); font-weight: 800; }

.app__shop {
  position: relative;
  display: flex; gap: 10px;
  padding: 9px;
  background: var(--surface);
  border: 1px solid var(--warm-divider);
  border-radius: 14px;
  box-shadow: var(--sh-sm);
  opacity: 0;
  transform: translateY(18px);
  animation: shopIn 700ms var(--ease-out) forwards;
}
.app__shop:nth-child(1) { animation-delay: .35s; }
.app__shop:nth-child(2) { animation-delay: .5s; }
.app__shop:nth-child(3) { animation-delay: .65s; }
@keyframes shopIn { to { opacity: 1; transform: none; } }
.app__thumb {
  width: 50px; height: 50px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 22px;
}
.app__shop h5 { font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; }
.app__shop p { font-size: 9px; color: var(--muted-sand); margin-top: 1px; }
.app__meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 8.5px; color: var(--warm-umber); font-weight: 600; }
.app__rate {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 5px; border-radius: 5px;
  background: var(--peepal-green); color: #fff; font-weight: 800; font-size: 8.5px;
}
.app__chip {
  display: inline-block; margin-top: 6px;
  padding: 2.5px 6px; border-radius: 5px;
  background: rgba(200, 134, 10, .13);
  color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .03em;
}

/* generic in-phone bottom bar */
.app__tabbar {
  display: flex; justify-content: space-around;
  padding: 9px 0 15px;
  background: var(--surface);
  border-top: 1px solid var(--warm-divider);
}
.app__tabbar span { width: 18px; height: 18px; border-radius: 5px; background: var(--warm-border); }
.app__tabbar span:first-child { background: var(--peepal-green); }

/* floating cart bar (shop screen) */
.app__cartbar {
  margin: auto 12px 12px;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--peepal-green);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(27, 94, 53, .9);
}
.app__cartbar b { font-size: 11.5px; }
.app__cartbar small { display: block; font-size: 9px; opacity: .8; }
.app__cartbar em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; background: rgba(255, 255, 255, .18); padding: 6px 11px; border-radius: var(--r-pill); }

/* ==========================================================================
   S1 · Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  background: var(--grad-hero);
  color: var(--on-ink);
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center;
}
.hero::after { /* grain, dark band signature */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none;
  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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
}
.hero__copy { position: relative; z-index: 2; will-change: transform; }
.hero__title { font-size: var(--h1); line-height: .95; letter-spacing: -.03em; }
.hero__title .ln { display: block; }
.hero__sub { margin-top: 1.75rem; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); color: var(--on-ink-dim); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
.hero__micro {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
  margin-top: 1.5rem;
  font-size: .875rem;
  color: rgba(245, 241, 232, .55);
}
.hero__micro i { width: 4px; height: 4px; border-radius: 50%; background: var(--burnished-gold); }

/* aurora blobs */
.hero__aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: .55;
}
.hero__aurora span:nth-child(1) {
  width: min(660px, 46vw); aspect-ratio: 1; right: -6vw; top: 4vh;
  background: radial-gradient(circle, rgba(27, 94, 53, .95) 0%, rgba(27, 94, 53, 0) 68%);
  animation: aurora1 18s var(--ease-io) infinite;
}
.hero__aurora span:nth-child(2) {
  width: min(480px, 34vw); aspect-ratio: 1; right: 12vw; top: 30vh;
  background: radial-gradient(circle, rgba(200, 134, 10, .8) 0%, rgba(200, 134, 10, 0) 66%);
  animation: aurora2 24s var(--ease-io) infinite;
}
@keyframes aurora1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6%, 7%) scale(1.16); }
}
@keyframes aurora2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50%      { transform: translate(8%, -9%) scale(.9); }
}

/* phone + orbiting cards */
.hero__visual { position: relative; display: flex; justify-content: center; will-change: transform; }
.hero__phone-in { animation: phoneEnter 1.1s var(--ease-out) both; }
@keyframes phoneEnter {
  from { opacity: 0; transform: perspective(1200px) rotateY(14deg) scale(.92) translateY(60px); }
  to   { opacity: 1; transform: perspective(1200px) rotateY(6deg) scale(1) translateY(0); }
}
.orbit {
  position: absolute;
  z-index: 3;
  padding: .75rem .875rem;
  border-radius: 16px;
  background: rgba(20, 28, 22, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, .7);
  font-size: .8125rem;
  line-height: 1.35;
  white-space: nowrap;
  will-change: transform;
  animation: orbitIn 900ms var(--ease-out) both;
}
@keyframes orbitIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.orbit b { display: block; font-weight: 700; font-size: .875rem; letter-spacing: -.01em; }
.orbit small { color: var(--on-ink-dim); font-size: .75rem; }
.orbit__ico {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-glass);
  font-size: 15px;
}
.orbit__row { display: flex; align-items: center; gap: .625rem; }
.orbit--1 { top: 12%; left: -6%; animation-delay: .8s; }
.orbit--2 { top: 44%; right: -4%; animation-delay: 1s; }
.orbit--3 { bottom: 11%; left: -3%; animation-delay: 1.2s; }
.orbit--1 .drift { animation: drift 7s ease-in-out infinite; }
.orbit--2 .drift { animation: drift 9s ease-in-out infinite reverse; }
.orbit--3 .drift { animation: drift 8s ease-in-out infinite .6s; }
.drift { display: block; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, -7px, 0); }
  50%      { transform: translate3d(5px, 8px, 0); }
}
.orbit__amt { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--burnished-gold); }

/* scroll cue */
.hero__cue {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  width: 1.5px; height: 54px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
}
.hero__cue::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-gold);
  animation: cue 2s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (max-width: 1023px) {
  .hero { min-height: auto; padding-bottom: 4rem; text-align: center; }
  .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__sub, .hero__micro { margin-inline: auto; justify-content: center; }
  .hero__cta { justify-content: center; }
  .hero__cue { display: none; }
  .orbit--1 { left: -2%; top: 6%; }
  .orbit--2 { right: -4%; }
  .orbit--3 { left: -2%; bottom: 6%; }
}
@media (max-width: 560px) {
  .phone-stage { --pscale: .84; }
  .orbit { font-size: .75rem; padding: .625rem .75rem; }
  .orbit b { font-size: .8125rem; }
  .orbit--1 { left: -12px; }
  .orbit--2 { right: -12px; }
  .orbit--3 { left: -8px; }
}

/* ==========================================================================
   S2 · Trust bar
   ========================================================================== */
.trustbar { background: var(--bg); border-bottom: 1px solid var(--warm-border); }
.trustbar__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.5rem;
}
.trustbar__item {
  display: flex; align-items: center; gap: .75rem;
  font-size: .9375rem; font-weight: 600; color: var(--warm-umber);
}
.trustbar__item b { font-weight: 800; color: var(--deep-bark); font-variant-numeric: tabular-nums; }
.trustbar__item + .trustbar__item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); margin-right: .25rem;
}

/* ==========================================================================
   S3 · Value props
   ========================================================================== */
.props { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1.25rem; }
.prop {
  position: relative;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--warm-border);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow var(--t-std) var(--ease-out), transform 120ms var(--ease-out);
}
.prop::before { /* gradient border on hover via mask-composite */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-std) var(--ease-out);
  pointer-events: none;
}
.prop::after { /* cursor spotlight */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 134, 10, .14), transparent 45%);
  opacity: 0;
  transition: opacity var(--t-std) var(--ease-out);
  pointer-events: none;
}
.prop:hover { box-shadow: var(--sh-md); }
.prop:hover::before, .prop:hover::after { opacity: 1; }
.prop__ico {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--light-peepal);
  color: var(--peepal-green);
  margin-bottom: 1.5rem;
}
.prop__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prop h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -.02em; margin-bottom: .75rem; }
.prop p { color: var(--warm-umber); font-size: .9688rem; }
.prop__tag {
  display: inline-block; margin-top: 1.25rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 900px) { .props { grid-template-columns: 1fr; } }

/* ==========================================================================
   S4 · Category marquee
   ========================================================================== */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee + .marquee { margin-top: 1rem; }
.marquee__track {
  display: flex; gap: 1rem;
  flex: none;
  padding-right: 1rem;
  will-change: transform;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: .75rem;
  flex: none;
  padding: .875rem 1.5rem .875rem 1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--warm-border);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform var(--t-std) var(--ease-out), box-shadow var(--t-std) var(--ease-out);
}
.cat-chip span {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 20px;
  background: var(--tint, var(--warm-divider));
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.cat-chip:hover { transform: translateY(-6px) scale(1.06); box-shadow: var(--sh-md); }

/* Categories onboarding next — flagged so nothing reads as live when it isn't */
.cat-chip--soon {
  border-style: dashed;
  color: var(--warm-umber);
}
.cat-chip--soon span { opacity: .55; }
.cat-chip--soon em {
  font-style: normal;
  margin-left: .5rem;
  padding: .2rem .5rem;
  border-radius: var(--r-pill);
  background: rgba(200, 134, 10, .12);
  color: var(--gold);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ==========================================================================
   S5 · Shop card showcase
   ========================================================================== */
.showcase { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.shopstack { position: relative; display: grid; gap: 1.125rem; }

/* "Within 10 km · nearest first" header above the stack */
.shopstack__head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600;
  color: var(--warm-umber);
  padding-bottom: .25rem;
}
.shopstack__head svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--peepal-green); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.shopstack__head b { color: var(--peepal-green); font-weight: 800; }

/* Distance rank — the whole point is that #1 is the closest */
.shopcard__rank {
  position: absolute; top: -9px; left: -9px;
  z-index: 2;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-gold);
  color: #fff;
  font-size: .75rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -6px rgba(200, 134, 10, .8);
}
.shopcard { overflow: visible; }
.shopcard__km { color: var(--peepal-green); font-weight: 800; }

/* 10 km radius diagram */
.radius { margin-top: 2rem; max-width: 340px; }
.radius svg { width: 100%; height: auto; overflow: visible; }
.radius__ring {
  fill: none;
  stroke: var(--warm-border);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}
.radius__label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--muted-sand);
  text-anchor: middle;
}
.radius__you {
  font-size: 12px; font-weight: 800;
  fill: var(--deep-bark);
  text-anchor: middle;
}
.radius__pulse {
  fill: rgba(200, 134, 10, .3);
  transform-origin: 160px 160px;
  animation: radiusPulse 2.6s ease-out infinite;
}
@keyframes radiusPulse {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(3.2); opacity: 0; }
}
.radius__shop circle { fill: var(--peepal-green); }
.radius__shop text {
  font-size: 11px; font-weight: 700;
  fill: var(--warm-umber);
  font-variant-numeric: tabular-nums;
}
.radius__shop { opacity: 0; transition: opacity 600ms var(--ease-out) var(--d, 0ms); }
.is-in .radius__shop { opacity: 1; }
@media (max-width: 900px) { .radius { margin-inline: auto; } }
.shopcard {
  position: relative;
  display: flex; gap: 1rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  overflow: hidden;
  transform: translateY(var(--sy, 0)) rotate(var(--sr, 0deg));
  transition: transform 200ms var(--ease-out), box-shadow var(--t-std) var(--ease-out);
}
.shopcard::after { /* light sweep on hover */
  content: "";
  position: absolute; top: -50%; left: -70%;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-30deg);
  transition: left 700ms var(--ease-io);
  pointer-events: none;
}
.shopcard:hover::after { left: 130%; }
.shopcard__img {
  width: 92px; height: 92px; flex: none;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 38px;
  background: var(--tint, var(--warm-divider));
}
.shopcard__top { display: flex; align-items: flex-start; gap: .75rem; }
.shopcard h4 { font-size: 1.0625rem; letter-spacing: -.015em; }
.shopcard__sub { font-size: .8125rem; color: var(--muted-sand); margin-top: .125rem; }
.rating {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-left: auto; flex: none;
  padding: .3rem .5rem;
  border-radius: 8px;
  background: var(--peepal-green);
  color: #fff;
  font-size: .8125rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rating svg { width: 12px; height: 12px; fill: var(--burnished-gold); }
.shopcard__reviews { font-size: .75rem; color: var(--muted-sand); margin-left: .4rem; }
.shopcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .625rem;
  font-size: .8125rem; font-weight: 600; color: var(--warm-umber);
}
.shopcard__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-sand); }
.offer-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; }
.offer-chip {
  padding: .3rem .55rem;
  border-radius: 7px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
  background: rgba(200, 134, 10, .12);
  color: var(--gold);
}
.veg-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem;
  border-radius: 7px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
  background: var(--light-peepal);
  color: var(--deep-forest);
}
.closed-chip { background: rgba(192, 57, 43, .1); color: var(--error); }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }

/* ==========================================================================
   S6 · How it works — pinned phone scroll
   ========================================================================== */
.pin { position: relative; }
.pin__stage {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr .85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 8vh, 6rem);
}
.steps { position: relative; padding-left: 2.75rem; }
.steps__rail {
  position: absolute; left: 0; top: .5rem; bottom: .5rem;
  width: 2px; border-radius: 2px;
  background: rgba(245, 241, 232, .12);
  overflow: hidden;
}
.steps__rail::after {
  content: "";
  position: absolute; left: 0; top: 0; width: 100%;
  height: var(--progress, 0%);
  background: var(--grad-gold);
  transition: height 120ms linear;
}
.steps__dot {
  position: absolute; left: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--burnished-gold);
  box-shadow: 0 0 0 4px rgba(212, 160, 23, .22);
  top: var(--progress, 0%);
  transform: translateY(-50%);
  transition: top 200ms var(--ease-out);
}
.step {
  padding-block: clamp(1rem, 2.2vh, 1.75rem);
  opacity: .3;
  transform: scale(.97);
  transform-origin: left center;
  transition: opacity var(--t-std) var(--ease-out), transform var(--t-std) var(--ease-out);
}
.step.is-active { opacity: 1; transform: scale(1); }
.step__n {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 800; letter-spacing: .1em;
  color: var(--on-ink-dim);
  transition: color var(--t-std) var(--ease-out), font-size var(--t-std) var(--ease-out);
  display: block; margin-bottom: .5rem;
}
.step.is-active .step__n { color: var(--burnished-gold); font-size: 1.25rem; }
.step h3 { font-size: clamp(1.375rem, 2.4vw, 2rem); letter-spacing: -.025em; }
.step p { color: var(--on-ink-dim); margin-top: .625rem; max-width: 44ch; font-size: .9688rem; }

.pin__phone { display: flex; justify-content: center; }
.pin__phone .phone { transition: transform 200ms linear; }
.screenset { position: absolute; inset: 0; }
.screen {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  pointer-events: none;
}
.screen.is-on { opacity: 1; transform: none; }

/* in-phone: location picker */
.scr-map {
  position: relative;
  height: 58%;
  background:
    radial-gradient(circle at 30% 40%, rgba(212, 237, 218, .8) 0 22%, transparent 22.5%),
    linear-gradient(180deg, #EDF3EE 0%, #E4EDE6 100%);
}
.scr-map::before, .scr-map::after {
  content: ""; position: absolute; background: rgba(155, 139, 111, .28);
}
.scr-map::before { left: 0; right: 0; top: 42%; height: 7px; }
.scr-map::after { top: 0; bottom: 0; left: 58%; width: 7px; }
.scr-pin {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -100%);
  font-size: 27px;
  filter: drop-shadow(0 6px 8px rgba(26, 18, 9, .3));
  animation: pinBob 2.4s ease-in-out infinite;
}
@keyframes pinBob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -122%); } }
.scr-sheet { padding: 16px; background: var(--surface); border-radius: 20px 20px 0 0; margin-top: -20px; position: relative; flex: 1; }
.scr-sheet .grab { width: 34px; height: 4px; border-radius: 3px; background: var(--warm-border); margin: 0 auto 13px; }
.scr-sheet h5 { font-size: 13px; letter-spacing: -.02em; margin-bottom: 3px; }
.scr-sheet p { font-size: 10px; color: var(--muted-sand); }
.scr-addr {
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px; padding: 10px;
  border: 1px solid var(--warm-divider); border-radius: 11px;
  font-size: 10.5px;
}
.scr-addr b { display: block; font-size: 11px; }
.scr-addr small { color: var(--muted-sand); font-size: 9px; }
.scr-addr.is-sel { border-color: var(--peepal-green); background: rgba(212, 237, 218, .35); }
.scr-btn {
  margin-top: 13px; padding: 11px;
  border-radius: 11px;
  background: var(--peepal-green); color: #fff;
  text-align: center; font-size: 11.5px; font-weight: 800;
}

/* in-phone: checkout / payment */
.scr-pad { padding: 14px 16px; overflow: hidden; }
.scr-h { font-size: 13px; letter-spacing: -.02em; margin-bottom: 11px; }
.scr-line { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--warm-umber); padding-block: 4px; }
.scr-line b { color: var(--deep-bark); font-weight: 700; }
.scr-line--tot { border-top: 1px dashed var(--warm-border); margin-top: 6px; padding-top: 8px; font-size: 12px; }
.scr-line--tot b { font-size: 13px; }
.scr-coupon {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0; padding: 9px 10px;
  border: 1px dashed var(--gold); border-radius: 10px;
  background: rgba(200, 134, 10, .07);
  font-size: 10px; font-weight: 700; color: var(--gold);
}
.scr-pay { display: grid; gap: 7px; margin-top: 11px; }
.scr-pay div {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--warm-divider);
  font-size: 10.5px; font-weight: 600;
}
.scr-pay div.is-sel { border-color: var(--peepal-green); background: rgba(212, 237, 218, .35); }
.scr-pay i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--warm-divider); }
.scr-pay .radio { margin-left: auto; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--warm-border); }
.scr-pay .is-sel .radio { border-color: var(--peepal-green); background: radial-gradient(circle, var(--peepal-green) 0 40%, transparent 42%); }

/* in-phone: live tracking */
.scr-track { position: relative; height: 55%; background: linear-gradient(180deg, #E7F0E9, #DDE9DF); overflow: hidden; }
.scr-track svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr-otp { display: flex; gap: 6px; justify-content: center; margin: 12px 0; }
.scr-otp b {
  width: 34px; height: 42px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--deep-bark); color: var(--burnished-gold);
  font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.scr-rider { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--warm-divider); border-radius: 12px; }
.scr-rider .av { width: 32px; height: 32px; border-radius: 50%; background: var(--light-peepal); display: grid; place-items: center; font-size: 15px; }
.scr-rider b { font-size: 11px; display: block; }
.scr-rider small { font-size: 9px; color: var(--muted-sand); }
.scr-rider .call { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--peepal-green); color: #fff; display: grid; place-items: center; font-size: 13px; }

@media (max-width: 1023px) {
  .pin { height: auto !important; }
  .pin__stage { position: static; min-height: 0; grid-template-columns: 1fr; }
  .steps { padding-left: 0; }
  .steps__rail, .steps__dot { display: none; }
  .step { opacity: 1; transform: none; padding-block: 1.5rem; border-top: 1px solid rgba(245, 241, 232, .1); }
  .step__n { color: var(--burnished-gold); }
  .pin__mobile { display: grid; gap: 2.5rem; }
}

/* ==========================================================================
   S7 · Live tracking spotlight
   ========================================================================== */
.track { position: relative; }
.track__map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #EDF3EE 0%, #E2ECE4 60%, #DFE9E1 100%);
  border: 1px solid var(--warm-border);
  box-shadow: var(--sh-lg);
}
.track__map svg { width: 100%; height: auto; display: block; }
.route-path { fill: none; stroke: var(--peepal-green); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.is-in .route-path { animation: drawRoute 1.6s var(--ease-io) forwards; }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
.route-ghost { fill: none; stroke: rgba(155, 139, 111, .25); stroke-width: 9; stroke-linecap: round; }

#scooter {
  offset-path: path("M 120 400 C 250 400, 240 272, 360 262 S 528 248, 600 168");
  offset-rotate: auto;
  offset-distance: 0%;
  animation: ride 6s var(--ease-io) infinite;
  opacity: 0;
}
.is-in #scooter { opacity: 1; animation-delay: 1.5s; }
@keyframes ride {
  0%   { offset-distance: 0%; }
  85%  { offset-distance: 100%; }
  100% { offset-distance: 100%; }
}
.radar { transform-origin: 600px 168px; animation: radar 2s ease-out infinite; }
@keyframes radar {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.4); opacity: 0; }
}

.track__panel {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 50%;
  transform: translateY(-50%);
  width: min(340px, 40vw);
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--sh-md);
}
.track__panel h4 { font-size: 1.0625rem; letter-spacing: -.02em; }
.track__eta { font-size: .8125rem; color: var(--warm-umber); margin-bottom: 1.125rem; }
.track__eta b { color: var(--peepal-green); font-weight: 800; }
.tl { display: grid; gap: .625rem; }
.tl__row { display: flex; align-items: center; gap: .625rem; font-size: .875rem; color: var(--muted-sand); transition: color var(--t-std) var(--ease-out); }
.tl__row.is-done { color: var(--deep-bark); font-weight: 600; }
.tl__tick {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--warm-border);
  display: grid; place-items: center;
  transition: background-color var(--t-std) var(--ease-out), border-color var(--t-std) var(--ease-out);
}
.tl__row.is-done .tl__tick { background: var(--peepal-green); border-color: var(--peepal-green); }
.tl__tick svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 420ms var(--ease-out); }
.tl__row.is-done .tl__tick svg { stroke-dashoffset: 0; }

.otp {
  margin-top: 1.25rem; padding-top: 1.125rem;
  border-top: 1px dashed var(--warm-border);
}
.otp small { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-sand); }
.otp__digits { display: flex; gap: .5rem; margin-top: .625rem; }
.otp__digits b {
  width: 42px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--deep-bark);
  color: var(--burnished-gold);
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  transform-origin: top center;
  animation: flip 620ms var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
@keyframes flip {
  from { transform: rotateX(-92deg); opacity: 0; }
  to   { transform: rotateX(0); opacity: 1; }
}
@media (max-width: 900px) {
  .track__panel { position: static; transform: none; width: auto; margin-top: -2.5rem; margin-inline: 1rem; }
}

/* ==========================================================================
   S8 · Payments strip
   ========================================================================== */
.pay-strip { background: var(--surface); border-block: 1px solid var(--warm-border); }
.pay-chip {
  display: inline-flex; align-items: center; gap: .625rem;
  flex: none;
  padding: .75rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--warm-divider);
  background: var(--bg);
  font-weight: 700; font-size: .9375rem;
  white-space: nowrap;
  filter: grayscale(1);
  opacity: .55;
  transition: filter var(--t-std) var(--ease-out), opacity var(--t-std) var(--ease-out), transform var(--t-std) var(--ease-out), box-shadow var(--t-std) var(--ease-out);
}
.pay-chip:hover { filter: none; opacity: 1; transform: translateY(-4px); box-shadow: var(--sh-sm); }
.pay-chip span {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: var(--grad-brand);
}
.pay-strip .marquee::before {
  content: "₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹ ₹";
  position: absolute; inset: 0;
  display: flex; align-items: center;
  gap: 3rem;
  font-size: 2rem; font-weight: 800;
  color: var(--gold);
  opacity: .05;
  pointer-events: none;
  letter-spacing: 3rem;
  overflow: hidden;
}

/* ==========================================================================
   S9 · For Shop Owners
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split--rev .split__visual { order: 2; }
.benefits { display: grid; gap: 1.375rem; margin-top: 2.25rem; }
.benefit { display: flex; gap: 1rem; }
.benefit__ico {
  width: 44px; height: 44px; flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--warm-border);
  color: var(--peepal-green);
}
.band-dark .benefit__ico { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--burnished-gold); }
.benefit__ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit b { display: block; font-size: 1.0625rem; font-family: var(--font-display); letter-spacing: -.015em; margin-bottom: .2rem; }
.benefit p { font-size: .9375rem; color: var(--warm-umber); }
.band-dark .benefit p { color: var(--on-ink-dim); }
.split__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__visual { order: 0; }
}

/* Shopkeeper dashboard mockup */
.dash {
  background: var(--surface);
  border: 1px solid var(--warm-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 1.375rem;
  position: relative;
  overflow: hidden;
}
.dash__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.dash__head small { display: block; font-size: .75rem; color: var(--muted-sand); }
.dash__head b { font-size: 1.0625rem; font-family: var(--font-display); letter-spacing: -.02em; }
.toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--peepal-green);
}
.toggle__track {
  width: 46px; height: 26px; border-radius: var(--r-pill);
  background: var(--warm-border);
  position: relative;
  transition: background-color 520ms var(--ease-out);
}
.toggle__track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(26, 18, 9, .3);
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}
.toggle.is-on .toggle__track { background: var(--peepal-green); }
.toggle.is-on .toggle__track::after { transform: translateX(20px); }
.toggle.is-on .toggle__track { box-shadow: 0 0 0 0 rgba(27, 94, 53, .5); animation: togglePulse 700ms var(--ease-out); }
@keyframes togglePulse {
  from { box-shadow: 0 0 0 0 rgba(27, 94, 53, .55); }
  to   { box-shadow: 0 0 0 14px rgba(27, 94, 53, 0); }
}
.dash__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--light-peepal); display: grid; place-items: center; font-size: 19px; }

.dash__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; margin-bottom: 1.25rem; }
.tile {
  padding: .875rem;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--warm-divider);
}
.tile small { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-sand); }
.tile b { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.tile--gold b { color: var(--gold); }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 0 .25rem; margin-bottom: .5rem; }
.chart__bar {
  flex: 1;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--peepal-green), var(--deep-forest));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 760ms cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: var(--bd, 0ms);
}
.chart__bar--gold { background: var(--grad-gold); }
.is-in .chart__bar { transform: scaleY(1); }
.chart__labels { display: flex; gap: 6px; font-size: .625rem; color: var(--muted-sand); font-weight: 700; }
.chart__labels span { flex: 1; text-align: center; }

.order-card {
  margin-top: 1rem;
  padding: .875rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--warm-border);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  transform: translateX(40px);
  opacity: 0;
  transition: transform 700ms var(--ease-out) .6s, opacity 700ms var(--ease-out) .6s;
}
.is-in .order-card { transform: none; opacity: 1; }
.order-card__top { display: flex; align-items: center; gap: .5rem; }
.order-card__top b { font-size: .9375rem; }
.badge-new {
  font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 6px;
  background: var(--light-peepal); color: var(--deep-forest);
  animation: newPulse 1.8s var(--ease-io) infinite;
}
@keyframes newPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.07); opacity: .8; }
}
.order-card__items { font-size: .8125rem; color: var(--warm-umber); margin-top: .375rem; }
.order-card__amt { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-card__acts { display: flex; gap: .5rem; margin-top: .875rem; }
.order-card__acts button {
  flex: 1; min-height: 40px;
  border-radius: 10px;
  font-size: .8125rem; font-weight: 800;
  transition: transform 180ms var(--ease-out), background-color var(--t-std);
}
.act-accept { background: var(--peepal-green); color: #fff; }
.act-reject { background: var(--bg); color: var(--warm-umber); border: 1px solid var(--warm-border); }
.act-accept.is-pressed { transform: scale(.94); background: var(--deep-forest); }
.order-card__state {
  display: none;
  align-items: center; gap: .5rem;
  margin-top: .875rem; padding: .625rem .75rem;
  border-radius: 10px;
  background: rgba(212, 237, 218, .5);
  color: var(--deep-forest);
  font-size: .8125rem; font-weight: 700;
}
.order-card.is-accepted .order-card__acts { display: none; }
.order-card.is-accepted .order-card__state { display: flex; }
.order-card.is-accepted .badge-new { display: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(27, 94, 53, .25); border-top-color: var(--peepal-green); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.fake-cursor {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 300ms linear;
  filter: drop-shadow(0 3px 5px rgba(26, 18, 9, .4));
}
.fake-cursor svg { width: 100%; height: 100%; }

/* ==========================================================================
   S10 · For Delivery Partners
   ========================================================================== */
.rider-visual { position: relative; display: flex; justify-content: center; }
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.particles i {
  position: absolute; bottom: -10px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--peepal-green);
  opacity: .2;
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(0) scale(1); opacity: .22; }
  to   { transform: translateY(-110%) scale(.4); opacity: 0; }
}

.req-pop {
  position: absolute; z-index: 5;
  left: 50%; bottom: 12%;
  width: min(300px, 84%);
  transform: translateX(-50%);
  padding: 1.125rem;
  border-radius: var(--r-md);
  background: rgba(22, 33, 26, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
  animation: slam 900ms var(--ease-out) both;
  animation-delay: .7s;
}
@keyframes slam {
  0%   { opacity: 0; transform: translateX(-50%) scale(.85); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.req-pop small { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--burnished-gold); }
.req-pop b { display: block; font-family: var(--font-display); font-size: 1.0625rem; margin-top: .375rem; letter-spacing: -.015em; }
.req-pop p { font-size: .8125rem; color: var(--on-ink-dim); margin-top: .25rem; }
.req-pop__foot { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.req-pop__accept {
  position: relative;
  flex: 1; min-height: 42px;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  color: #fff; font-weight: 800; font-size: .875rem;
}
.ring { width: 42px; height: 42px; flex: none; }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: rgba(255, 255, 255, .16); }
.ring .fg {
  stroke: var(--burnished-gold);
  stroke-linecap: round;
  stroke-dasharray: 113;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: deplete 6s linear infinite;
}
@keyframes deplete { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 113; } }
.ring text { font-size: 13px; font-weight: 800; fill: var(--on-ink); }

.rider-stats { display: flex; gap: .75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.rider-stat {
  flex: 1; min-width: 130px;
  padding: 1rem 1.125rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.rider-stat small { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-dim); }
.rider-stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.rider-stat b.gold { color: var(--burnished-gold); }

/* rider phone screen bits */
.scr-rider-top { padding: 14px 16px; background: linear-gradient(160deg, var(--deep-forest), var(--ink-2)); color: #fff; }
.scr-online { display: flex; align-items: center; gap: 9px; }
.scr-online .dot { width: 8px; height: 8px; border-radius: 50%; background: #6FD08C; box-shadow: 0 0 0 0 rgba(111, 208, 140, .6); animation: dotPulse 1.8s infinite; }
@keyframes dotPulse { to { box-shadow: 0 0 0 9px rgba(111, 208, 140, 0); } }
.scr-online b { font-size: 12px; }
.scr-online .timer { margin-left: auto; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--burnished-gold); }
.scr-earn { display: flex; gap: 8px; padding: 12px 16px; }
.scr-earn div { flex: 1; padding: 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--warm-divider); }
.scr-earn small { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-sand); }
.scr-earn b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   S11 · Stats band
   ========================================================================== */
.statband { position: relative; overflow: hidden; }
/* Softened with a radial mask rather than filter: blur() — a rotating blurred
   layer this large re-rasterises every frame and locks up the compositor. */
.statband__glow {
  position: absolute; left: 50%; top: 50%;
  width: min(1400px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(27, 94, 53, .55), rgba(200, 134, 10, .42),
    rgba(27, 94, 53, .55), rgba(200, 134, 10, .42), rgba(27, 94, 53, .55));
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 15%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  opacity: .3;
  animation: rotate 46s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
.statband__india {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 118%;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.statband__india path { fill: none; stroke: var(--on-ink); stroke-width: 2; }
.stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--grad-glass);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
  transition: transform var(--t-std) var(--ease-out), border-color var(--t-std) var(--ease-out);
}
.stat:hover { transform: translateY(-8px); border-color: rgba(212, 160, 23, .5); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stat small { display: block; margin-top: .625rem; font-size: .875rem; font-weight: 600; color: var(--on-ink-dim); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   S12 · Testimonials
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.quote {
  position: relative;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--warm-border);
  box-shadow: var(--sh-sm);
  transform: rotate(-2deg);
  transition: transform var(--t-cine) var(--ease-out), box-shadow var(--t-std) var(--ease-out);
}
.quote.is-in { transform: rotate(0); }
.quote:hover { box-shadow: var(--sh-md); }
.quote__mark { width: 40px; height: 32px; margin-bottom: 1rem; }
.quote__mark path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.quote__role {
  display: inline-block;
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peepal-green);
  padding: .3rem .625rem; border-radius: 6px;
  background: var(--light-peepal);
  margin-bottom: 1rem;
}
.quote p { font-size: 1.0625rem; line-height: 1.6; letter-spacing: -.01em; }
.quote cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: .875rem; font-weight: 700; color: var(--warm-umber); }
.quotes__bar { display: none; }
@media (max-width: 900px) {
  .quotes {
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 380px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { scroll-snap-align: start; }
  .quotes__bar { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
  .quotes__bar i { width: 34px; height: 3px; border-radius: 2px; background: var(--warm-border); overflow: hidden; }
  .quotes__bar i.is-on { background: var(--gold); }
}

/* ==========================================================================
   S13 · FAQ
   ========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--warm-border); position: relative; }
.faq__item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; border-radius: 2px;
  background: var(--grad-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 380ms var(--ease-io);
}
.faq__item.is-open::before { transform: scaleY(1); }
.faq__q {
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  padding: 1.5rem .5rem 1.5rem 1.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.015em;
  min-height: 56px;
  transition: color var(--t-std) var(--ease-out);
}
.faq__q:hover { color: var(--peepal-green); }
.faq__ico {
  margin-left: auto; flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--warm-border);
  color: var(--gold);
  transition: transform 380ms var(--ease-io), background-color var(--t-std), border-color var(--t-std);
}
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute;
  background: currentColor; border-radius: 2px;
}
.faq__ico::before { width: 13px; height: 2px; }
.faq__ico::after { width: 2px; height: 13px; }
.faq__item.is-open .faq__ico { transform: rotate(45deg); background: var(--light-peepal); border-color: var(--light-peepal); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-io);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 3rem 1.75rem 1.25rem; color: var(--warm-umber); font-size: .9688rem; }

/* ==========================================================================
   S14 · Download CTA
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--grad-hero);
  color: var(--on-ink);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.cta-band__dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cta-band__dust i {
  position: absolute; bottom: -8px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--burnished-gold);
  opacity: .06;
  animation: rise linear infinite;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .h2 { max-width: 16ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; margin-top: 1.25rem; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; margin-top: 2.25rem; }
.cta-band__link { margin-top: 1.5rem; }
.cta-phones {
  display: flex; justify-content: center;
  gap: clamp(-40px, -3vw, 0px);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  perspective: 1400px;
}
.cta-phones .phone-stage { --pscale: .82; }
.cta-phones .phone-stage:first-child .phone {
  transform: rotate(-8deg) translateX(24px);
  animation: ctaFloatA 7s ease-in-out infinite 1.1s;
}
.cta-phones .phone-stage:last-child .phone {
  transform: rotate(8deg) translateX(-24px);
  animation: ctaFloatB 7s ease-in-out infinite 1.1s;
}
.cta-phones .phone-stage:first-child { animation: slideL 1.1s var(--ease-out) both; }
.cta-phones .phone-stage:last-child  { animation: slideR 1.1s var(--ease-out) both; }
@keyframes slideL { from { opacity: 0; transform: scale(.82) translateX(-140px); } }
@keyframes slideR { from { opacity: 0; transform: scale(.82) translateX(140px); } }
@keyframes ctaFloatA {
  0%, 100% { transform: rotate(-8deg) translate(24px, -10px); }
  50%      { transform: rotate(-8deg) translate(24px, 10px); }
}
@keyframes ctaFloatB {
  0%, 100% { transform: rotate(8deg) translate(-24px, 10px); }
  50%      { transform: rotate(8deg) translate(-24px, -10px); }
}
.qr {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: 2rem; padding: .875rem 1.375rem;
  border-radius: var(--r-md);
  background: var(--grad-glass);
  border: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
  animation: qrFlip 1s var(--ease-out) both .7s;
}
@keyframes qrFlip { from { opacity: 0; transform: perspective(700px) rotateY(-84deg); } }
.qr__code { width: 62px; height: 62px; border-radius: 8px; background: #fff; padding: 5px; }
.qr small { display: block; font-size: .75rem; color: var(--on-ink-dim); }
.qr b { font-size: .9375rem; }
@media (max-width: 640px) {
  .cta-phones { display: none; }
}

/* ==========================================================================
   Sub-pages: page hero, prose, lead form, contact
   ========================================================================== */
.page-hero {
  background: var(--grad-hero);
  color: var(--on-ink);
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 6rem));
  padding-bottom: clamp(3rem, 7vh, 5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero .h1 { font-size: clamp(1.875rem, 6vw, 4rem); max-width: 18ch; }
.page-hero .lede { margin-top: 1.5rem; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }
.crumb { font-size: .8125rem; color: var(--on-ink-dim); margin-bottom: 1.25rem; }
.crumb a:hover { color: var(--burnished-gold); }

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin-top: 2.75rem; margin-bottom: .875rem; }
.prose h3 { font-size: 1.1875rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.prose p { color: var(--warm-umber); margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.25rem; display: grid; gap: .625rem; }
.prose ul li { position: relative; padding-left: 1.5rem; color: var(--warm-umber); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.prose a { color: var(--peepal-green); font-weight: 600; border-bottom: 1px solid var(--warm-border); }
.prose a:hover { border-color: var(--gold); }
.prose strong { color: var(--deep-bark); }
.prose__meta { font-size: .875rem; color: var(--muted-sand); margin-bottom: 2rem; }

.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .lead-grid { grid-template-columns: 1fr; } }

.steps-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step-num {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--warm-border);
}
.step-num b {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800; letter-spacing: -.04em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: .5rem;
}
.step-num h3 { font-size: 1.125rem; margin-bottom: .375rem; }
.step-num p { font-size: .9375rem; color: var(--warm-umber); }
@media (max-width: 800px) { .steps-num { grid-template-columns: 1fr; } }

.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.contact-card {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--warm-border);
  transition: transform var(--t-std) var(--ease-out), box-shadow var(--t-std) var(--ease-out);
}
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.contact-card svg { width: 26px; height: 26px; color: var(--peepal-green); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.contact-card b { display: block; font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: .25rem; }
.contact-card p, .contact-card a { font-size: .9375rem; color: var(--warm-umber); }
.contact-card a:hover { color: var(--peepal-green); }
@media (max-width: 800px) { .contact-cards { grid-template-columns: 1fr; } }

/* Parent-company card (about) */
.parent-card {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  isolation: isolate;
}
.parent-card::before {
  content: "";
  position: absolute; inset: -40% -20% auto auto;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 94, 53, .85), transparent 68%);
  z-index: -1;
}
.parent-card__eyebrow {
  display: block;
  font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--burnished-gold);
}
.parent-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin-top: .5rem;
}
.parent-card__name span { color: var(--on-ink-dim); font-weight: 600; }
.parent-card__desc { font-size: .9375rem; color: var(--on-ink-dim); margin-top: .625rem; }
.parent-card__list { margin-top: 1.75rem; display: grid; gap: .75rem; }
.parent-card__list li {
  display: flex; flex-direction: column;
  padding: .75rem .875rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.parent-card__list b { font-size: .9375rem; }
.parent-card__list span { font-size: .8125rem; color: var(--on-ink-dim); }
.parent-card__link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.5rem;
  font-weight: 700;
  color: var(--burnished-gold);
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--t-std) var(--ease-out);
}
.parent-card__link:hover { border-color: var(--burnished-gold); }
.parent-card__link svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-std) var(--ease-out);
}
.parent-card__link:hover svg { transform: translate(2px, -2px); }

/* Values grid (about) */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.value-card {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  background: var(--grad-glass);
  border: 1px solid rgba(255, 255, 255, .12);
}
.value-card b { display: block; font-family: var(--font-display); font-size: 1.1875rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.value-card p { font-size: .9375rem; color: var(--on-ink-dim); }
/* The cards were drawn for dark bands; on a light band they need a surface. */
.band-cream .value-card { background: var(--surface); border-color: var(--warm-border); box-shadow: var(--sh-sm); }
.band-cream .value-card p { color: var(--warm-umber); }
@media (max-width: 800px) { .values { grid-template-columns: 1fr; } }

/* Reduced motion overrides for sections */
@media (prefers-reduced-motion: reduce) {
  .phone__float, .drift, .hero__aurora span, .hero__cue::after, .radar,
  .badge-new, .particles i, .cta-band__dust i, .statband__glow,
  .cta-phones .phone-stage:first-child .phone, .cta-phones .phone-stage:last-child .phone,
  #scooter, .ring .fg, .scr-pin, .scr-online .dot, .marquee__track, .btn--shimmer::after,
  .app__shop, .orbit, .req-pop, .qr, .hero__phone-in { animation: none !important; }
  .app__shop, .orbit, .req-pop, .qr, .hero__phone-in { opacity: 1 !important; transform: none !important; }
  .route-path { stroke-dashoffset: 0 !important; }
  #scooter { opacity: 1; offset-distance: 62%; }
  .chart__bar { transform: scaleY(1) !important; }
  .order-card { opacity: 1 !important; transform: none !important; }
  .quote { transform: none !important; }
  .footer__ghost { opacity: .35; transform: translate(-50%, 22%); }
}