/* PalmX — pre-launch site
   Botgify (Private) Limited
   ------------------------------------------------------------------ */

:root {
  /* brand */
  --ink:        #140A33;
  --ink-2:      #2A1D55;
  --violet:     #5B34E8;
  --violet-600: #4A25CE;
  --violet-100: #EDE8FF;
  --violet-050: #F6F3FF;
  --gold:       #F5B33C;
  --gold-100:   #FFF3DE;

  /* neutrals */
  --white:  #FFFFFF;
  --paper:  #FBFAFF;
  --line:   #E6E1F4;
  --muted:  #5C5478;
  --muted-2:#8A83A3;

  --radius:    28px;
  --radius-sm: 16px;
  --radius-pill: 999px;

  --shadow:    0 18px 50px -20px rgba(20, 10, 51, .28);
  --shadow-sm: 0 6px 20px -10px rgba(20, 10, 51, .25);

  --wrap: 1180px;
  --nav-h: 76px;

  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

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

h1 { font-size: clamp(2.5rem, 6.4vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }

p { margin: 0 0 1em; }
p.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); line-height: 1.55; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }

section { padding: clamp(64px, 9vw, 116px) 0; }
.section-tint { background: var(--violet-050); }
.section-ink  { background: var(--ink); color: var(--white); }
.section-ink p.lead, .section-ink .muted { color: #B9B0DC; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--violet);
  margin-bottom: 18px;
}
.section-ink .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.measure { max-width: 640px; }
.center .measure, .center.measure { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-600); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-ghost-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-sm { padding: 11px 22px; font-size: .93rem; }
.btn-block { width: 100%; }

.link-arrow {
  font-weight: 600; color: var(--violet); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow::after { content: "→"; transition: transform .16s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-family: var(--display);
  font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em;
  color: var(--ink); flex: none;
}
.brand svg { width: 26px; height: 26px; color: var(--ink); }
.brand .x { color: var(--violet); }
.nav-links { display: flex; gap: 26px; margin-left: 6px; }
.nav-links a {
  text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink-2);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--violet); border-color: var(--violet); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-toggle span + span { margin-top: 5px; }

@media (max-width: 900px) {
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff;
    border-bottom: 1px solid var(--line); padding: 8px 22px 20px;
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-cta .btn { display: none; }
  .nav-cta .btn.nav-cta-main { display: inline-flex; }
  .nav-toggle { display: block; }
  .nav-cta { margin-left: 0; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero h1 { margin-bottom: .35em; }
.hero h1 .accent { color: var(--violet); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.pill-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--violet-100); color: var(--violet-600);
  font-size: .82rem; font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-pill); margin-bottom: 20px;
}
.pill-tag .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--violet);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }



@media (prefers-reduced-motion: reduce) {
  .pill-tag .dot { animation: none; }
}

/* ---------- countdown ---------- */
.countdown { display: flex; gap: 10px; flex-wrap: wrap; }
.countdown .unit {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 6px;
  min-width: 78px; text-align: center; box-shadow: var(--shadow-sm);
}
.countdown .num {
  font-family: var(--display); font-weight: 700; font-size: 1.75rem;
  line-height: 1; display: block; font-variant-numeric: tabular-nums;
}
.countdown .lbl {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.countdown-head { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.section-ink .countdown .unit { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
.section-ink .countdown .lbl, .section-ink .countdown-head { color: #ADA2D4; }
.countdown.is-live .num { font-size: 1rem; }

/* ---------- trust bar ---------- */
.trustbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  border: 1px solid var(--line); background: var(--white);
  border-radius: var(--radius-sm); padding: 14px 18px;
  font-size: .88rem; color: var(--muted);
}
.trustbar strong { color: var(--ink); font-weight: 600; }
.trustbar .tb-item { display: flex; align-items: center; gap: 9px; }
.trustbar .tb-item + .tb-item { border-left: 1px solid var(--line); padding-left: 20px; }
.trustbar svg { width: 18px; height: 18px; color: var(--violet); flex: none; }
@media (max-width: 620px) {
  .trustbar .tb-item + .tb-item { border-left: 0; padding-left: 0; }
}
.trustbar--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #C6BEE4; }
.trustbar--dark strong { color: #fff; }
.trustbar--dark svg { color: var(--gold); }
.trustbar--dark .tb-item + .tb-item { border-color: rgba(255,255,255,.16); }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
}
.card.tinted { background: var(--violet-050); border-color: transparent; }
.section-tint .card { background: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.section-ink .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .step-no {
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  color: var(--violet); letter-spacing: .1em; display: block; margin-bottom: 14px;
}
.icon-badge {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--violet-100); color: var(--violet);
  display: grid; place-items: center; margin-bottom: 18px;
}
.icon-badge svg { width: 22px; height: 22px; }
.icon-badge.gold { background: var(--gold-100); color: #A8710B; }
.section-ink .icon-badge { background: rgba(245,179,60,.16); color: var(--gold); }

/* split section */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.ticks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--violet); color: #fff; font-size: .72rem; font-weight: 700;
  display: grid; place-items: center; margin-top: 3px;
}
.section-ink .ticks li::before { background: var(--gold); color: var(--ink); }
.ticks strong { display: block; }
.ticks span { color: var(--muted); }
.section-ink .ticks span { color: #B9B0DC; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.stat .n { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--violet); display: block; line-height: 1; }
.section-ink .stat .n { color: var(--gold); }
.stat .t { font-size: .88rem; color: var(--muted); }
.section-ink .stat .t { color: #B9B0DC; }
@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr; gap: 14px; } }


/* event teaser */
.event {
  background: linear-gradient(135deg, #1B0F42, #4A25CE);
  color: #fff; border-radius: var(--radius); padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center;
}
.event h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
.event p { color: #D7CFFA; margin-bottom: 0; }
@media (max-width: 820px) { .event { grid-template-columns: 1fr; } }

/* ---------- waitlist form ---------- */
.form-card {
  background: #fff; border-radius: var(--radius); padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.tabs { display: flex; gap: 6px; background: var(--violet-050); padding: 6px; border-radius: var(--radius-pill); margin-bottom: 26px; }
.tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--body); font-weight: 600; font-size: .95rem; color: var(--muted);
  padding: 12px 10px; border-radius: var(--radius-pill); transition: .16s;
}
.tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 14px 16px; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--violet); background: #fff;
  box-shadow: 0 0 0 4px var(--violet-100);
}
.field .hint { font-size: .78rem; color: var(--muted-2); margin-top: 6px; }
.field .err { font-size: .78rem; color: #C0304A; margin-top: 6px; display: none; }
.field.invalid input { border-color: #C0304A; }
.field.invalid .err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-foot { font-size: .8rem; color: var(--muted-2); margin: 14px 0 0; text-align: center; }

.success { display: none; text-align: center; padding: 10px 0; }
.success.show { display: block; }
.success .big { font-family: var(--display); font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; }
.refer-box {
  background: var(--violet-050); border-radius: var(--radius-sm);
  padding: 18px; margin-top: 20px; text-align: left;
}
.refer-row { display: flex; gap: 8px; margin-top: 10px; }
.refer-row input {
  flex: 1; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; font: inherit; font-size: .85rem; background: #fff; color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 6px 0;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0;
  font-family: var(--display); font-weight: 700; font-size: 1.08rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--violet); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 20px; padding-right: 30px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #C6BEE4; padding: clamp(52px, 7vw, 84px) 0 34px; }
.footer a { color: #C6BEE4; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 44px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer .brand svg { color: #fff; }
.footer h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px; font-family: var(--body); font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: .93rem; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; margin-top: 30px;
  font-size: .82rem; color: #9E95C4; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
}
.footer-note { font-size: .82rem; color: #9E95C4; max-width: 620px; margin-top: 18px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08);
}
.socials a:hover { background: var(--violet); }
.socials svg { width: 17px; height: 17px; }

/* ---------- page header (subpages) ---------- */
.page-head { background: var(--violet-050); padding: clamp(48px, 6vw, 84px) 0 clamp(44px, 5vw, 70px); }
.crumbs { font-size: .85rem; color: var(--muted-2); margin-bottom: 16px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--violet); }

.cta-strip { background: var(--ink); color: #fff; }
.cta-strip .btn-primary { background: var(--gold); color: var(--ink); }
.cta-strip .btn-primary:hover { background: #FFC759; }

/* ==================================================================
   MOTION LAYER
   Scroll reveals, hover micro-interactions, marquee, sticky CTA.
   Everything here degrades to "no animation" under
   prefers-reduced-motion (see the block at the bottom of this file).
   ================================================================== */

/* grid and flex children must be allowed to shrink below their intrinsic
   width, or an SVG's natural size forces horizontal overflow on phones */
.hero-grid > *, .split > *, .grid > *, .eco > *, .flow > *,
.perks > *, .footer-grid > *, .nav-inner > * { min-width: 0; }
body { overflow-x: hidden; }

/* ---------- scroll reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(30px);
  /* long, soft, no overshoot — the PayPal feel */
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.rv.in { opacity: 1; transform: none; }
.rv-left  { transform: translateX(-30px); }
.rv-right { transform: translateX(30px); }
.rv-scale { transform: translateY(20px) scale(.97); }


/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* ---------- nav ---------- */
.nav { transition: box-shadow .3s ease, background .3s ease; }
.nav-inner { transition: height .3s cubic-bezier(.22,.61,.36,1); }
.nav.scrolled { box-shadow: 0 6px 24px -14px rgba(20,10,51,.4); }
.nav.scrolled .nav-inner { height: 62px; }

.nav-links a { position: relative; border-bottom: 0 !important; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--violet); border-radius: 2px;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: 0 50%;
}
.brand svg { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.brand:hover svg { transform: rotateY(180deg); }

@media (max-width: 900px) {
  .nav-links {
    transform-origin: top; animation: menuIn .28s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 20px 30px -24px rgba(20,10,51,.5);
  }
  .nav-links a::after { display: none; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
  .nav-toggle span { transition: transform .28s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::before { transform: translateX(120%); }
.btn-outline::before { background: linear-gradient(115deg, transparent 35%, rgba(91,52,232,.16) 50%, transparent 65%); }
.btn-primary { box-shadow: 0 10px 24px -12px rgba(91,52,232,.9); }
.btn-primary:hover { box-shadow: 0 16px 30px -12px rgba(91,52,232,.95); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

/* ---------- cards ---------- */
.card {
  /* opacity is listed so revealed cards still fade rather than pop */
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease,
              border-color .35s ease, opacity .6s ease;
}
.grid .card:hover, .section-ink .card:hover { border-color: rgba(245,179,60,.45); box-shadow: none; }
.icon-badge { transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease; }
.card:hover .icon-badge { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.ticks li::before { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.ticks li:hover::before { transform: scale(1.18) rotate(8deg); }

/* ---------- hero visual: tilt, float, spin ---------- */
.scan-ring { transform-box: view-box; transform-origin: 50% 50%; animation: ringSpin 22s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex; width: max-content; gap: 14px;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; font-size: .92rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.marquee-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex: none; }
.marquee-item.gold .dot { background: var(--gold); }
.marquee-strip { border-block: 1px solid var(--line); padding: 26px 0; }
.marquee-label {
  text-align: center; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 700; margin-bottom: 6px;
}

/* ---------- countdown tick ---------- */
.countdown .unit { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.countdown .num { display: block; }
.countdown .num.tick { animation: tick .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes tick {
  0%   { transform: translateY(-42%) scale(.9); opacity: .25 }
  60%  { transform: translateY(4%)   scale(1.04); opacity: 1 }
  100% { transform: none }
}

/* ---------- tabs indicator ---------- */
.tabs { position: relative; }
.tab-ind {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
  background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  transition: transform .38s cubic-bezier(.22,.61,.36,1), width .38s cubic-bezier(.22,.61,.36,1);
  z-index: 0;
}
.tab { position: relative; z-index: 1; }
.tab[aria-selected="true"] { background: transparent; box-shadow: none; }

/* ---------- form micro-interactions ---------- */
.field input, .field select { transition: border-color .18s, box-shadow .18s, background .18s, transform .18s; }
.field.invalid { animation: shake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%,90% { transform: translateX(-2px) } 20%,80% { transform: translateX(3px) }
  30%,50%,70% { transform: translateX(-5px) } 40%,60% { transform: translateX(5px) }
}
.panel { animation: panelIn .35s cubic-bezier(.22,.61,.36,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.success.show { animation: panelIn .45s cubic-bezier(.22,.61,.36,1); }
.success .icon-badge svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawCheck .5s .15s ease forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0 } }
.refer-row input { transition: box-shadow .2s; }
#copyBtn.copied { background: #1E9E6A; }

/* ---------- FAQ ---------- */
.faq summary::after {
  content: "+" !important;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), color .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--violet); }
.faq details[open] > p { animation: faqIn .38s cubic-bezier(.22,.61,.36,1); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  display: none; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border-radius: var(--radius-pill);
  padding: 10px 10px 10px 20px; box-shadow: 0 18px 40px -16px rgba(20,10,51,.65);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.sticky-cta.show { transform: none; }
.sticky-cta span { font-size: .85rem; font-weight: 600; }
.sticky-cta small { display: block; color: #ADA2D4; font-weight: 500; font-size: .74rem; }
.sticky-cta .btn { margin-left: auto; }
@media (max-width: 760px) { .sticky-cta { display: flex; } }

/* ---------- links / footer ---------- */
.footer a, .socials a { transition: color .2s ease, background .25s ease, transform .25s ease; }
.socials a:hover { transform: translateY(-3px); }
.trustbar { transition: border-color .3s ease, box-shadow .3s ease, opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.trustbar:hover { border-color: rgba(91,52,232,.4); }
.trustbar svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.trustbar:hover svg { transform: scale(1.12); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv,     .marquee-track, .scan-ring,
  .countdown .num.tick, .panel, .success.show, .faq details[open] > p,
  .field.invalid, .success .icon-badge svg path { animation: none !important; }
  .success .icon-badge svg path { stroke-dashoffset: 0; }
  .btn::before { display: none; }
    .scroll-progress { display: none; }
  .sticky-cta { transition: none; }
  * { scroll-behavior: auto; }
}

/* ==================================================================
   V2 — ECOSYSTEM LAYER
   Ecosystem hub, ways to pay, bill split, uni groups, PalmX Perks.
   ================================================================== */

/* ---------- ecosystem hub ---------- */
.eco {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-areas:
    "p1 hub p2"
    "p3 hub p4"
    ".  p5  .";
  gap: 18px;
  align-items: stretch;
}
.eco .hub { grid-area: hub; }
.eco .pillar:nth-of-type(1) { grid-area: p1; }
.eco .pillar:nth-of-type(2) { grid-area: p2; }
.eco .pillar:nth-of-type(3) { grid-area: p3; }
.eco .pillar:nth-of-type(4) { grid-area: p4; }
.eco .pillar:nth-of-type(5) { grid-area: p5; max-width: 460px; margin-inline: auto; width: 100%; }

.pillar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px; position: relative;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease,
              border-color .35s ease, opacity .6s ease;
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -26px rgba(20,10,51,.42);
  border-color: rgba(91,52,232,.35);
}
.pillar h3 { font-size: 1.12rem; margin-bottom: .3em; }
.pillar p { font-size: .92rem; color: var(--muted); margin: 0; }
.pillar .icon-badge { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px; }
.pillar .icon-badge svg { width: 19px; height: 19px; }

.hub {
  background: linear-gradient(165deg, #1B0F42 0%, #3A1D8C 55%, #5B34E8 100%);
  color: #fff; border-radius: var(--radius); padding: 34px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.hub::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(245,179,60,.22), transparent 60%);
}
.hub > * { position: relative; }
.hub h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .3em; }
.hub p { color: #D7CFFA; font-size: .95rem; margin: 0; max-width: 30ch; }
.hub-mark { width: 132px; height: 132px; margin-bottom: 14px; }
.hub-ring { transform-box: view-box; transform-origin: 50% 50%; animation: ringSpin 26s linear infinite; }
.hub-pulse { animation: hubPulse 3.2s ease-in-out infinite; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes hubPulse {
  0%, 100% { opacity: .35; transform: scale(.94) }
  50%      { opacity: 1;   transform: scale(1) }
}

@media (max-width: 900px) {
  .eco {
    grid-template-columns: 1fr;
    grid-template-areas: "hub" "p1" "p2" "p3" "p4" "p5";
  }
  .eco .pillar:nth-of-type(5) { max-width: none; }
  .hub { padding: 30px 24px; }
}

/* ---------- ways to pay ---------- */
.rail {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 34px;
}
.rail-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.rail-chip svg { width: 16px; height: 16px; color: var(--violet); }

/* ---------- split flow ---------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
@media (max-width: 820px) { .flow { grid-template-columns: 1fr; } }
.flow-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px; position: relative;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
}
.flow-step:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(20,10,51,.42); border-color: rgba(91,52,232,.35); }
.flow-step .n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--violet); color: #fff;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  font-size: .9rem; margin-bottom: 14px;
}
.flow-step h3 { font-size: 1.1rem; margin-bottom: .3em; }
.flow-step p { font-size: .92rem; color: var(--muted); margin: 0; }
.flow-step::after {
  content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  color: var(--violet); font-size: 1.2rem; font-weight: 700;
}
.flow-step:last-child::after { display: none; }
@media (max-width: 820px) {
  .flow-step::after { right: 50%; top: auto; bottom: -22px; transform: translateX(50%) rotate(90deg); }
}

/* request-card mock */
.mock {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  padding: 22px; box-shadow: var(--shadow); max-width: 380px; width: 100%;
}
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mock-head strong { font-family: var(--display); font-size: 1.05rem; }
.mock-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--violet-100); color: var(--violet-600); padding: 5px 10px; border-radius: var(--radius-pill);
}
.mock-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--line); font-size: .92rem;
}
.mock-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--violet-100); color: var(--violet-600);
  display: grid; place-items: center; font-weight: 700; font-size: .78rem;
}
.mock-row .amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.mock-row .state { font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.mock-row .state.paid { color: #1E9E6A; }
.mock-row .state.due { color: var(--muted-2); }
.mock-foot { margin-top: 16px; font-size: .8rem; color: var(--muted-2); text-align: center; }
.mock-bar { height: 6px; border-radius: 4px; background: var(--violet-100); overflow: hidden; margin-top: 4px; }
.mock-bar span { display: block; height: 100%; width: 0; background: var(--violet); border-radius: 4px; transition: width 1.2s cubic-bezier(.22,.61,.36,1); }
.mock.in-view .mock-bar span { width: 67%; }

/* ---------- uni groups ---------- */
.group-card { display: flex; gap: 16px; align-items: flex-start; }
.group-card .avatars { display: flex; flex: none; }
.group-card .avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  background: var(--violet); color: #fff; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; margin-left: -10px;
}
.group-card .avatars span:first-child { margin-left: 0; }
.group-card .avatars span:nth-child(2) { background: #7B5CFF; }
.group-card .avatars span:nth-child(3) { background: var(--gold); color: var(--ink); }
.group-card .avatars span:nth-child(4) { background: var(--ink-2); }

/* ---------- perks ---------- */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } }
.perk {
  border-radius: var(--radius-sm); padding: 26px 22px; background: #fff;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
}
.perk:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(20,10,51,.42); border-color: rgba(245,179,60,.5); }
.perk h3 { font-size: 1.05rem; margin-bottom: .3em; }
.perk p { font-size: .9rem; color: var(--muted); margin: 0; }
.perk .icon-badge { background: var(--gold-100); color: #A8710B; }
.perk::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--gold-100); opacity: .55; transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.perk:hover::after { transform: scale(1.5); }
.perk > * { position: relative; }

.member-note {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: .88rem; color: var(--muted); border: 1px dashed var(--line);
  border-radius: var(--radius-pill); padding: 10px 20px;
}

/* section eyebrow chip used for the new feature labels */
.chip-new {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; background: var(--gold); color: var(--ink);
  padding: 4px 9px; border-radius: 6px; margin-left: 8px; vertical-align: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hub-ring, .hub-pulse { animation: none !important; }
  .mock-bar span { transition: none; }
}

/* ==================================================================
   V3 — FLAGSHIP HARDWARE + DEVICE UI
   Anatomical palm render, scanner device, animated phone wallet.
   ================================================================== */

/* ---------- scanner device motion ---------- */
.scan-plane { animation: scanSweep 4.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scanSweep {
  0%   { transform: translateY(-6px);  opacity: 0 }
  12%  { opacity: 1 }
  50%  { transform: translateY(150px); opacity: 1 }
  62%  { opacity: 0 }
  100% { transform: translateY(150px); opacity: 0 }
}
.beam { animation: beamPulse 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes beamPulse { 0%, 100% { opacity: .3 } 45% { opacity: .85 } }
.dev-ring { animation: devRing 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes devRing {
  0%, 100% { opacity: .45; transform: scale(.98) }
  55%      { opacity: 1;   transform: scale(1.02) }
}
.dev-ok { animation: devOk 4.6s ease-in-out infinite; }
@keyframes devOk {
  0%, 55%  { opacity: 0; transform: scale(.7) }
  65%      { opacity: 1; transform: scale(1) }
  85%      { opacity: 1 }
  100%     { opacity: 0 }
}

/* ---------- flagship scanner section ---------- */
.device-stage {
  position: relative; border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 15%, rgba(91,52,232,.35), transparent 65%), #0D0725;
  border: 1px solid rgba(255,255,255,.1);
  padding: clamp(20px, 3vw, 34px); overflow: hidden;
}
.device-stage::before {
  content: ""; position: absolute; left: 50%; top: -40%; width: 130%; height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(245,179,60,.16), transparent 70%);
  pointer-events: none;
}
.device-stage svg { position: relative; display: block; width: 100%; height: auto; }

.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }
.spec {
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 15px 16px;
  background: rgba(255,255,255,.04);
  transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}
.spec:hover { border-color: rgba(245,179,60,.5); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.spec strong { display: block; font-family: var(--display); font-size: .98rem; margin-bottom: 2px; }
.spec span { font-size: .84rem; color: #B9B0DC; }

/* ---------- phone / wallet UI ---------- */
.phone-stage { display: flex; justify-content: center; position: relative; }
.phone-stage::after {
  content: ""; position: absolute; width: 78%; height: 60%; bottom: 4%; left: 11%;
  background: radial-gradient(closest-side, rgba(91,52,232,.28), transparent 70%);
  filter: blur(6px); z-index: -1;
}
.phone {
  position: relative; width: min(292px, 76vw); aspect-ratio: 9 / 18.6;
  background: linear-gradient(160deg, #241A47, #0D0725 60%);
  border-radius: 44px; padding: 11px;
  box-shadow: 0 40px 70px -30px rgba(20,10,51,.75), inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone::after {
  content: ""; position: absolute; inset: 11px; border-radius: 34px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 38%);
  z-index: 3;
}
.phone-notch {
  position: absolute; z-index: 4; top: 18px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 14px; background: #0D0725;
}
.screen {
  position: absolute; inset: 11px; border-radius: 34px; overflow: hidden; background: var(--paper);
}
.screen-track {
  height: 500%; display: flex; flex-direction: column;
  animation: screens 17s cubic-bezier(.7,0,.2,1) infinite;
}
@keyframes screens {
  0%,  17%  { transform: translateY(0) }
  22%, 39%  { transform: translateY(-20%) }
  44%, 61%  { transform: translateY(-40%) }
  66%, 83%  { transform: translateY(-60%) }
  88%, 100% { transform: translateY(-80%) }
}
.scr {
  height: 20%; padding: 44px 18px 62px; display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
}
.scr > div:last-child { margin-top: auto; }
.scr-nav {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; height: 54px;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding-bottom: 6px;
}
.scr-nav span {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .58rem; font-weight: 600; color: var(--muted-2);
}
.scr-nav span.on { color: var(--violet); }
.scr-nav svg { width: 16px; height: 16px; }
.scr-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 22px 6px; font-size: .68rem; font-weight: 700; color: var(--ink);
  pointer-events: none;
}
.scr-bar .sig { display: flex; gap: 3px; align-items: flex-end; }
.scr-bar .sig i { width: 3px; background: var(--ink); border-radius: 1px; display: block; }
.scr-title { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.scr-sub { font-size: .72rem; color: var(--muted-2); }

.wallet-card {
  border-radius: 18px; padding: 16px 16px 18px; color: #fff;
  background: linear-gradient(140deg, #4A25CE, #7B5CFF 60%, #5B34E8);
  box-shadow: 0 14px 26px -14px rgba(91,52,232,.9); position: relative; overflow: hidden;
}
.wallet-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 12%, rgba(245,179,60,.35), transparent 55%);
}
.wallet-card .lbl { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.wallet-card .bal { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.wallet-card .foot { font-size: .66rem; opacity: .85; margin-top: 8px; line-height: 1.3; }

.chip-row { display: flex; gap: 6px; }
.chip-row span {
  flex: 1; text-align: center; font-size: .64rem; font-weight: 700; padding: 8px 4px;
  border-radius: 10px; background: var(--violet-050); color: var(--violet-600);
}
.chip-row span.on { background: var(--violet); color: #fff; }

.qr-tile {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.qr-tile svg { width: 28px; height: 28px; color: var(--ink); flex: none; }
.qr-tile strong { display: block; font-size: .72rem; font-family: var(--display); }
.qr-tile span { font-size: .64rem; color: var(--muted-2); }

.tx { display: flex; align-items: center; gap: 9px; font-size: .72rem; padding: 7px 0; border-top: 1px solid var(--line); }
.tx:first-of-type { border-top: 0; }
.tx .ic {
  width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--violet-100); color: var(--violet-600); font-size: .6rem; font-weight: 700;
}
.tx .amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.tx .amt.in { color: #1E9E6A; }

.scr-center { align-items: center; justify-content: center; text-align: center; }
.pay-ok {
  width: 74px; height: 74px; border-radius: 50%; background: var(--violet-100);
  display: grid; place-items: center; color: var(--violet); margin-bottom: 4px;
}
.pay-ok svg { width: 34px; height: 34px; }
.pay-amt { font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.pill-ok {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #E4F6EE; color: #1E9E6A; padding: 5px 11px; border-radius: 999px;
}
.req {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff;
  font-size: .72rem; display: flex; flex-direction: column; gap: 8px;
}
.req .top { display: flex; align-items: center; gap: 8px; }
.req .who { width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: .6rem; font-weight: 700; }
.req .pay { background: var(--violet); color: #fff; text-align: center; border-radius: 9px; padding: 8px; font-weight: 700; font-size: .68rem; }
.perk-tile {
  border-radius: 14px; padding: 12px; font-size: .72rem;
  background: linear-gradient(135deg, var(--gold-100), #fff); border: 1px solid #F3E2C4;
}
.perk-tile strong { display: block; font-family: var(--display); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .scan-plane, .beam, .dev-ring, .dev-ok, .screen-track { animation: none !important; }
  .dev-ok { opacity: 1; }
}

/* ==================================================================
   V5 — APP DOWNLOAD, AMBASSADORS, AFFILIATES
   ================================================================== */

/* ---------- store buttons + QR ---------- */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px; border-radius: var(--radius-pill);
  background: #fff; color: var(--ink); text-decoration: none;
  border: 2px solid transparent; font-weight: 600;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.15; font-size: 1.02rem; }
.store-btn small { font-size: .68rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.store-note { font-size: .88rem; color: #B9B0DC; max-width: 46ch; }
.store-note strong { color: #fff; }

.qr-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 26px; text-align: center;
  max-width: 320px; margin-inline: auto;
}
.qr-frame {
  background: #fff; border-radius: 18px; padding: 14px;
  width: 200px; margin: 0 auto 16px;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.qr-frame svg { display: block; width: 100%; height: auto; }
.qr-card strong { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 4px; }
.qr-card span { font-size: .86rem; color: #B9B0DC; }
.qr-card b { color: #fff; font-weight: 600; }

/* ---------- ambassador / affiliate ---------- */
.perk-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.perk-list li {
  display: flex; gap: 12px; align-items: flex-start; font-size: .96rem;
}
.perk-list li::before {
  content: "★"; flex: none; color: var(--gold); font-size: .9rem; margin-top: 3px;
}
.section-ink .perk-list li { color: #D7CFFA; }

.split-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  background: #fff;
}
.section-ink .split-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

.section-ink 
.section-ink .section-ink 
.field textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: .97rem; min-height: 96px; resize: vertical;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea:focus {
  outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 4px var(--violet-100);
}
.field.invalid textarea { border-color: #C0304A; }

.section-ink .link-arrow { color: var(--gold); }

/* light cards keep dark text even inside ink sections */
.section-ink .mock, .section-ink .flow-step, .section-ink .card.tinted { color: var(--ink); }
.section-ink .flow-step h3, .section-ink .mock strong { color: var(--ink); }

/* ==================================================================
   V7 — SIGNATURE MOTION
   Cursor spotlight on dark sections, aurora drift, magnetic buttons,
   3D pillar tilt, success burst.
   Everything here is desktop-first sugar and is switched off under
   prefers-reduced-motion; nothing here affects layout.
   ================================================================== */

/* ---------- cursor spotlight on ink sections ---------- */
.section-ink, .cta-strip { position: relative; isolation: isolate; overflow: hidden; }
.section-ink::before, .cta-strip::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%),
              rgba(124, 92, 255, .28), transparent 65%);
  opacity: 0; transition: opacity .45s ease;
}
.section-ink.lit::before, .cta-strip.lit::before { opacity: 1; }

/* ---------- slow aurora drift behind dark sections ---------- */
.section-ink::after, .cta-strip::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  left: -12vw; top: -22vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,179,60,.16), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1) }
  50%  { transform: translate3d(28vw, 12vh, 0) scale(1.25) }
  100% { transform: translate3d(58vw, -6vh, 0) scale(.95) }
}

/* ---------- magnetic buttons ---------- */
.btn.magnetic { will-change: transform; }

/* ---------- 3D tilt on the ecosystem pillars ---------- */
.pillar { transform-style: preserve-3d; }
.pillar .icon-badge, .pillar h3 { transform: translateZ(0); }

/* ---------- success burst ---------- */
.burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.burst i {
  position: absolute; left: 50%; top: 34%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: burst .95s cubic-bezier(.2,.7,.3,1) forwards;
}
.burst i:nth-child(3n)   { background: var(--violet); }
.burst i:nth-child(3n+1) { background: #7B5CFF; width: 5px; height: 5px; }
@keyframes burst {
  0%   { opacity: 1; transform: translate(0,0) scale(.4) }
  70%  { opacity: 1 }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1) }
}

/* ---------- split tracker: the PAID chips stamp in ---------- */
.mock .state { opacity: 0; transform: scale(.6); }
.mock.in-view .state { animation: stamp .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.mock.in-view .mock-row:nth-of-type(2) .state { animation-delay: .35s }
.mock.in-view .mock-row:nth-of-type(3) .state { animation-delay: .6s }
.mock.in-view .mock-row:nth-of-type(4) .state { animation-delay: .85s }
@keyframes stamp {
  0%   { opacity: 0; transform: scale(1.9) rotate(-8deg) }
  60%  { opacity: 1; transform: scale(.92) rotate(2deg) }
  100% { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .section-ink::before, .section-ink::after,
  .cta-strip::before, .cta-strip::after { display: none; }
  .burst { display: none; }
  .mock .state { opacity: 1; transform: none; }
  .mock.in-view .state { animation: none; }
}

/* the aurora is desktop-only — no sense burning a phone's GPU for background sugar */
@media (max-width: 900px) {
  .section-ink::after, .cta-strip::after { display: none; }
}

/* ==================================================================
   V8 — FEATURE DECK
   Cards that stack on each other as you scroll: each one is sticky at a
   slightly lower offset, so the ones behind stay visible as a spine.
   ================================================================== */
.deck-wrap { padding: clamp(64px, 9vw, 116px) 0; background: var(--paper); }
.deck { display: block; }

.deck-card {
  position: sticky;
  top: calc(var(--nav-h) + 16px + var(--i) * 16px);
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: min(560px, 78vh);
  margin-bottom: 34px;
  border-radius: var(--radius); overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(20, 10, 51, .45);
  transform-origin: 50% 0;
  will-change: transform;
}
.deck-card:last-child { margin-bottom: 0; }

.deck-body {
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.deck-body h3 {
  font-size: clamp(1.5rem, 3.1vw, 2.3rem); line-height: 1.08; margin-bottom: .35em;
}
.deck-body p { color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.deck-body .btn { align-self: flex-start; margin-top: 14px; }
.deck-body .rail { justify-content: flex-start; margin: 6px 0 4px; }
.deck-tag {
  display: inline-block; width: max-content;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-100);
  padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 16px;
}

.deck-visual {
  display: grid; place-items: center; padding: clamp(22px, 3vw, 40px);
  background: var(--violet-050); position: relative; overflow: hidden;
}
.deck-visual--ink { background: linear-gradient(160deg, #1B0F42, #3A1D8C 60%, #5B34E8); }
.deck-visual--ink .mock { max-width: 340px; }
.deck-visual--gold { background: linear-gradient(150deg, #FFF6E6, #FFE9C7); }
.deck-visual--tint { background: var(--violet-050); }
.deck-visual .phone-stage { width: 100%; }
.deck-visual .phone { width: 240px; }
.deck-visual .mock { width: 100%; }
.deck-visual .perk { padding: 18px 16px; }
.deck-visual .perk p { font-size: .82rem; }
.deck-visual .card { padding: 18px; }
.deck-visual .group-card h3 { font-size: 1rem; }
.deck-visual .group-card p { font-size: .84rem; }

.pay-split { display: grid; gap: 14px; width: 100%; max-width: 300px; }
.pay-tile {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm); padding: 20px; color: #fff; text-align: center;
}
.pay-tile svg { width: 30px; height: 30px; margin-bottom: 10px; }
.pay-tile strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.pay-tile span { font-size: .82rem; color: #C6BEE4; }
.pay-tile.gold { border-color: rgba(245,179,60,.5); color: var(--gold); }
.pay-tile.gold span { color: #EBD9AE; }

@media (max-width: 900px) {
  .deck-card {
    grid-template-columns: 1fr; position: static; min-height: 0;
    margin-bottom: 20px;
  }
  .deck-visual { order: -1; min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-card { position: static; transform: none !important; }
}

/* ==================================================================
   V9 — FLOATING QR + ASSISTANT
   ================================================================== */
.dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* ---------- floating QR ---------- */
.qr-dock { display: none; }
@media (min-width: 901px) { .qr-dock { display: block; } }
.qr-dock-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 26px 50px -24px rgba(20,10,51,.45);
  padding: 14px; width: 186px; text-align: center;
  transform-origin: 100% 100%;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.qr-dock.collapsed .qr-dock-panel {
  opacity: 0; transform: scale(.82) translateY(10px); pointer-events: none;
  position: absolute; right: 0; bottom: 0;
}
.qr-dock-panel svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.qr-dock-panel strong {
  display: block; font-family: var(--display); font-size: .84rem; margin: 10px 0 2px;
}
.qr-dock-panel span { font-size: .72rem; color: var(--muted-2); display: block; line-height: 1.35; }
.qr-dock-toggle {
  position: absolute; right: 0; bottom: 0;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; display: none; place-items: center;
  box-shadow: 0 16px 30px -14px rgba(20,10,51,.7);
}
.qr-dock.collapsed .qr-dock-toggle { display: grid; }
.qr-dock-toggle svg { width: 24px; height: 24px; }
.qr-dock-close {
  position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.qr-dock-wrap { position: relative; }

/* ---------- assistant ---------- */
.bot-btn {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--violet); color: #fff; display: grid; place-items: center;
  box-shadow: 0 18px 34px -14px rgba(91,52,232,.9);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.bot-btn:hover { transform: translateY(-3px) scale(1.04); background: var(--violet-600); }
.bot-btn svg { width: 26px; height: 26px; }
.bot-btn .dot {
  position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold); border: 2px solid #fff;
}
.bot-wrap { position: relative; }

.bot-panel {
  position: absolute; right: 0; bottom: 70px; width: min(360px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 34px 70px -28px rgba(20,10,51,.55);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: 100% 100%; opacity: 0; transform: scale(.9) translateY(12px);
  pointer-events: none; transition: opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1);
  max-height: min(560px, 76vh);
}
.bot-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.bot-head {
  background: linear-gradient(140deg, #1B0F42, #4A25CE);
  color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
.bot-head .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: grid; place-items: center; flex: none;
}
.bot-head .avatar svg { width: 18px; height: 18px; }
.bot-head strong { display: block; font-family: var(--display); font-size: .98rem; }
.bot-head span { font-size: .74rem; color: #C6BEE4; }
.bot-close {
  margin-left: auto; background: none; border: 0; color: #C6BEE4; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px;
}
.bot-close:hover { color: #fff; }

.bot-log { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bot-msg { max-width: 86%; font-size: .88rem; line-height: 1.5; padding: 11px 14px; border-radius: 16px; }
.bot-msg.bot { background: var(--violet-050); color: var(--ink); border-bottom-left-radius: 5px; }
.bot-msg.me { background: var(--violet); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.bot-msg a { color: var(--violet-600); font-weight: 600; }
.bot-msg.me a { color: #fff; }
.bot-typing { display: flex; gap: 4px; padding: 13px 14px; }
.bot-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2);
  animation: botDot 1.1s ease-in-out infinite;
}
.bot-typing i:nth-child(2) { animation-delay: .15s }
.bot-typing i:nth-child(3) { animation-delay: .3s }
@keyframes botDot { 0%,100% { opacity: .3; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }

.bot-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.bot-chips button {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  padding: 7px 12px; border-radius: var(--radius-pill);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bot-chips button:hover { background: var(--violet-050); border-color: var(--violet); color: var(--violet-600); }

.bot-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.bot-form input {
  flex: 1; font: inherit; font-size: .88rem; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink);
}
.bot-form input:focus { outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px var(--violet-100); }
.bot-form button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--violet); color: #fff; display: grid; place-items: center; flex: none;
}
.bot-form button svg { width: 17px; height: 17px; }
.bot-foot { font-size: .68rem; color: var(--muted-2); text-align: center; padding: 0 14px 12px; }

@media (max-width: 760px) {
  .dock { bottom: 86px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bot-panel, .qr-dock-panel { transition: none; }
  .bot-typing i { animation: none; }
}

/* ==================================================================
   V10 — CENTRED HERO
   Colour band, audience toggle, big centred headline, product card.
   ================================================================== */
.hero--center {
  background: #E6E0FF;
  padding: clamp(30px, 4vw, 52px) 0 0;
  text-align: center;
  overflow: hidden;
}
.hero--center .wrap { display: flex; flex-direction: column; align-items: center; }

/* audience toggle */
.seg {
  display: inline-flex; padding: 5px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.5); margin-bottom: clamp(26px, 4vw, 44px);
}
.seg-btn {
  font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-2);
  padding: 11px 30px; border-radius: var(--radius-pill);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.seg-btn.is-on { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(20,10,51,.5); }

.hero--center h1 {
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.035em;
  max-width: 15ch; margin-inline: auto; margin-bottom: .3em;
}
.hero--center .lead {
  max-width: 62ch; margin-inline: auto; color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}
.hero--center .hero-actions { justify-content: center; margin: 26px 0 0; }
.hero-copy[hidden] { display: none; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #241247; }
.hero--center .btn-outline { border-color: var(--ink); background: rgba(255,255,255,.55); }

/* the white product card */
.hero-card {
  width: min(520px, 100%); margin: clamp(30px, 4vw, 44px) auto 0; overflow: hidden;
  background: #fff; border-radius: 28px;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px);
  box-shadow: 0 30px 70px -34px rgba(20,10,51,.45);
}
.hero-card-brand {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.03em; margin-bottom: 18px;
}
.hero-card-brand span { color: var(--violet); }
.hero-card-visual[hidden] { display: none; }
.hero-card-visual .phone-stage { padding-bottom: 0; }


.reader-shot { padding: 0; }
.reader-shot svg { width: min(380px, 100%); height: auto; display: block; margin-inline: auto; }
.reader-shot p { font-size: .86rem; color: var(--muted-2); margin: 6px 0 0; }

/* trust + countdown sit under the card, inside the band */
.hero-foot {
  width: 100%; display: flex; flex-wrap: wrap; gap: 16px 26px;
  align-items: center; justify-content: center;
  padding: clamp(26px, 3vw, 38px) 0 clamp(30px, 4vw, 46px);
}
.hero-foot .trustbar { background: rgba(255,255,255,.66); border-color: rgba(255,255,255,.9); }
.hero-count { display: flex; align-items: center; gap: 12px; }
.hero-count .countdown-head { margin: 0; }
.hero-count .countdown .unit { min-width: 62px; padding: 8px 4px; }
.hero-count .countdown .num { font-size: 1.25rem; }
@media (max-width: 700px) {
  .hero-count { flex-direction: column; gap: 8px; }
  .seg-btn { padding: 10px 22px; font-size: .92rem; }
}

/* nav: quiet help link beside the dark primary action */
.nav-help {
  font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  padding: 6px 4px; margin-right: 8px;
}
.nav-help:hover { color: var(--violet); }
@media (max-width: 900px) { .nav-help { display: none; } }

/* ==================================================================
   V11 — GLASS SURFACES + REAL BUTTON STATES
   Buttons stay where they are and respond to hover, press and keyboard
   focus. Translucent surfaces get a frosted finish with a light rim.
   ================================================================== */
:root {
  --glass:        rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-rim:    rgba(255, 255, 255, .85);
  --glass-dark:   rgba(255, 255, 255, .10);
  --glass-dark-rim: rgba(255, 255, 255, .3);
  --blur: saturate(180%) blur(16px);
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  transition: transform .16s cubic-bezier(.22,.61,.36,1), background .2s ease,
              border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.975); transition-duration: .07s; }
.btn:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}
.section-ink .btn:focus-visible, .cta-strip .btn:focus-visible,
.hero--center .btn:focus-visible { outline-color: var(--gold); }

/* solid buttons get a glass rim so they read as lit, not flat */
.btn-primary {
  background: linear-gradient(180deg, #6C46F0, var(--violet));
  box-shadow: 0 10px 24px -12px rgba(91,52,232,.85),
              inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover { background: linear-gradient(180deg, #5B34E8, var(--violet-600)); }
.btn-dark {
  background: linear-gradient(180deg, #241247, var(--ink));
  box-shadow: 0 10px 24px -14px rgba(20,10,51,.9), inset 0 1px 0 rgba(255,255,255,.18);
}

/* translucent variants: frosted glass */
.btn-outline {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-color: rgba(20,10,51,.22);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}
.btn-outline:hover {
  background: var(--glass-strong); border-color: var(--ink);
  color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -16px rgba(20,10,51,.6);
}
.btn-ghost-light {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-color: var(--glass-dark-rim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.9); color: var(--ink); }
.btn-light {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px -18px rgba(0,0,0,.6);
}

/* ---------- frosted chrome ---------- */
.nav {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(20,10,51,.08);
}
.nav.scrolled { background: rgba(255,255,255,.85); }

.seg {
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 12px 30px -22px rgba(20,10,51,.6);
}
.seg-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.seg-btn.is-on {
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 16px -10px rgba(20,10,51,.5), inset 0 1px 0 #fff;
}

.hero-foot .trustbar {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-color: var(--glass-rim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.rail-chip, .marquee-item {
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

/* floating surfaces */
.qr-dock-panel, .bot-panel {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-color: var(--glass-rim);
}
.bot-chips button {
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bot-btn:focus-visible, .qr-dock-toggle:focus-visible,
.tab:focus-visible, .hub-card:focus-visible, .store-btn:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 3px;
}
.sticky-cta {
  background: rgba(20,10,51,.88);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.14);
}

/* cards inside the ink sections read as glass panes */
.section-ink .card, .section-ink .split-card, .spec {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* keyboard users get a visible target everywhere, not only on buttons */
a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 6px;
}
.section-ink a:focus-visible, .cta-strip a:focus-visible { outline-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- feature / impact table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.feature-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-align: left;
}
.feature-table th, .feature-table td { padding: 20px 24px; vertical-align: top; }
.feature-table thead th {
  font-family: var(--body); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  background: var(--violet-050); border-bottom: 1px solid var(--line);
}
.feature-table tbody th {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink);
  width: 32%; white-space: nowrap;
}
.feature-table tbody td { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.feature-table tbody td strong { color: var(--ink); }
.feature-table tbody tr + tr th, .feature-table tbody tr + tr td { border-top: 1px solid var(--line); }
.feature-table tbody tr:hover th, .feature-table tbody tr:hover td { background: var(--violet-050); }
.ft-ic {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; background: var(--violet-100); color: var(--violet-600);
  margin-right: 10px; vertical-align: -9px;
}
.ft-ic svg { width: 17px; height: 17px; }
@media (max-width: 760px) {
  .feature-table thead { display: none; }
  .feature-table tbody th, .feature-table tbody td { display: block; width: auto; white-space: normal; }
  .feature-table tbody th { padding-bottom: 6px; }
  .feature-table tbody td { padding-top: 0; }
  .feature-table tbody tr + tr th { border-top: 1px solid var(--line); }
  .feature-table tbody tr + tr td { border-top: 0; }
}

/* ---------- enrolment walkthrough ---------- */
.enrol-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .enrol-steps { grid-template-columns: 1fr; } }
.enrol-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 26px 28px; position: relative;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease, opacity .6s ease;
}
.enrol-step:hover {
  transform: translateY(-5px); border-color: rgba(91,52,232,.35);
  box-shadow: 0 26px 44px -28px rgba(20,10,51,.42);
}
.enrol-visual {
  margin: 0 -26px 20px; padding: 22px;
  background: linear-gradient(160deg, #1B0F42, #3A1D8C 65%, #5B34E8);
  border-radius: var(--radius) var(--radius) 0 0;
  display: grid; place-items: center;
}
.enrol-visual svg { width: 100%; max-width: 240px; height: auto; display: block; }
.enrol-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--violet); color: #fff; font-family: var(--display); font-weight: 700;
  font-size: .9rem; margin-bottom: 12px;
}
.enrol-step h3 { font-size: 1.18rem; margin-bottom: .35em; }
.enrol-step p { color: var(--muted); font-size: .95rem; margin: 0; }
.enrol-step p strong { color: var(--ink); }

.enrol-after {
  margin-top: 26px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px clamp(24px, 3vw, 36px);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.enrol-after h3 { font-size: 1.25rem; margin-bottom: .3em; }
.enrol-after p { color: var(--muted); margin: 0; max-width: 62ch; font-size: .96rem; }

/* ==================================================================
   V13 — TIGHTER RHYTHM
   Smaller product visuals and a compact enrolment section that fits
   in one screen.
   ================================================================== */
#enrol { padding-block: clamp(44px, 5vw, 68px); }
#enrol .center { margin-bottom: 28px !important; }
#enrol h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: .3em; }
#enrol .lead { font-size: 1rem; }

.enrol-visual { padding: 16px; }
.enrol-visual svg { max-width: 176px; }
.enrol-step { padding: 0 20px 20px; }
.enrol-step h3 { font-size: 1.06rem; margin-bottom: .3em; }
.enrol-step p { font-size: .9rem; line-height: 1.55; }
.enrol-n { width: 26px; height: 26px; font-size: .82rem; margin-bottom: 9px; }

.enrol-after {
  margin-top: 18px; padding: 16px 22px;
  display: flex; align-items: center; gap: 18px; justify-content: space-between;
}
.enrol-after p { font-size: .93rem; margin: 0; }
.enrol-after .btn { flex: none; }

/* product visuals: a size down across the board */
.deck-card { min-height: min(480px, 70vh); }
.deck-visual .phone { width: 210px; }
.deck-visual--ink .mock { max-width: 300px; }
.hero-card-visual .phone { width: min(248px, 62vw); margin-bottom: 0; }
.device-stage { padding: clamp(16px, 2.2vw, 26px); }
.device-stage svg { max-width: 380px; margin-inline: auto; }
.deck-body p { font-size: .97rem; }
.spec { padding: 13px 14px; }
.spec strong { font-size: .93rem; }
.spec span { font-size: .8rem; }

/* ---------- real product photography (falls back to the render) ---------- */
.device-photo { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.device-stage .device-photo { border-radius: var(--radius-sm); }
.device-stage .device-fallback { display: none; }
.device-stage.no-photo .device-fallback { display: block; }
.enrol-visual--photo { padding: 0; overflow: hidden; }
.enrol-visual--photo .device-photo {
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: 62% 40%;
}
.enrol-visual--photo .device-fallback { display: none; padding: 16px; }
.enrol-visual--photo.no-photo { padding: 16px; }
.enrol-visual--photo.no-photo .device-fallback { display: grid; place-items: center; padding: 0; }
.enrol-visual--photo.no-photo .device-fallback svg { max-width: 176px; }

/* ---------- in-app partner directory note ---------- */
.perk-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--gold-100); border: 1px solid #F3E2C4;
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 4px 0 6px;
}
.perk-note-ic {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: #fff; color: #A8710B;
}
.perk-note-ic svg { width: 16px; height: 16px; }
.perk-note strong { display: block; font-size: .92rem; margin-bottom: 2px; }
.perk-note span { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ---------- countdown: quieter, more precise ---------- */
.countdown { display: inline-flex; align-items: stretch; gap: 0; flex-wrap: nowrap; }
.countdown .unit {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  min-width: 0; padding: 2px 18px; text-align: center;
  border-right: 1px solid var(--line);
}
.countdown .unit:last-child { border-right: 0; padding-right: 0; }
.countdown .unit:first-child { padding-left: 0; }
.countdown .num {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.countdown .lbl {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.countdown-head {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 700; margin-bottom: 8px;
}
.section-ink .countdown .unit { border-right-color: rgba(255,255,255,.18); }
.section-ink .countdown .num { color: #fff; }
.hero-count .countdown .unit { padding: 2px 14px; }
.hero-count .countdown .num { font-size: 1.3rem; }
.countdown .num.tick { animation: tickFade .4s ease; }
@keyframes tickFade { from { opacity: .45 } to { opacity: 1 } }
@media (max-width: 560px) {
  .countdown .unit { padding: 2px 12px; }
  .countdown .num { font-size: 1.25rem; }
}

/* ---------- ecosystem: six pillars around the hub ---------- */
.eco {
  grid-template-columns: 1fr .62fr .62fr 1fr;
  grid-template-areas:
    "p1 hub hub p2"
    "p3 hub hub p4"
    "p5 p5  p6  p6";
}
.eco .pillar:nth-of-type(5) { grid-area: p5; max-width: none; margin-inline: 0; }
.eco .pillar:nth-of-type(6) { grid-area: p6; }
@media (max-width: 900px) {
  .eco {
    grid-template-columns: 1fr;
    grid-template-areas: "hub" "p1" "p2" "p3" "p4" "p5" "p6";
  }
}

/* ---------- virtual card mock ---------- */
.vcard {
  width: min(320px, 100%); aspect-ratio: 1.586;
  border-radius: 18px; padding: 20px;
  background: linear-gradient(135deg, #2A1B58 0%, #5B34E8 55%, #7B5CFF 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 24px 44px -22px rgba(20,10,51,.8);
  position: relative; overflow: hidden;
}
.vcard::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 84% 14%, rgba(245,179,60,.35), transparent 55%);
}
.vcard > * { position: relative; }
.vcard-top { display: flex; align-items: center; justify-content: space-between; }
.vcard-brand { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.vcard-brand span { color: var(--gold); }
.vcard-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.18); padding: 4px 9px; border-radius: 999px;
}
.vcard-num {
  display: flex; gap: 12px; font-family: var(--display); font-size: 1.02rem;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.vcard-foot { display: flex; gap: 26px; font-size: .82rem; font-weight: 600; }
.vcard-foot small {
  display: block; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; font-weight: 700; margin-bottom: 2px;
}

/* keep the card a stable size when the audience toggle swaps its contents */
.hero-card { display: flex; flex-direction: column; min-height: 600px; }
.hero-card-visual { flex: 1; display: grid; place-items: center; }
.hero-card-visual .phone-stage { width: 100%; }
@media (max-width: 700px) { .hero-card { min-height: 0; } }

/* The phone mock is designed at 292px. Squeezing its width crushes the UI
   inside it, so scale the whole thing instead and pull the empty layout
   height back with a negative margin. */
.hero-card-visual .phone,
.deck-visual .phone {
  width: 292px;
  transform-origin: top center;
  margin-bottom: calc(604px * (var(--s) - 1));
  transform: scale(var(--s));
}
.hero-card-visual .phone { --s: .85; }
.deck-visual .phone { --s: .72; }
@media (max-width: 700px) {
  .hero-card-visual .phone { --s: .78; }
}

/* ==================================================================
   V17 — HERO: no card, just the product
   The white panel fought the phone for attention and clipped it. The
   phone now floats on the band over a soft glow, rising in on load and
   drifting gently after — the same restraint PayPal uses.
   ================================================================== */
.hero-card {
  width: auto; max-width: none; min-height: 0; overflow: visible;
  background: transparent; box-shadow: none; border-radius: 0;
  padding: 0; margin: clamp(26px, 3.4vw, 44px) auto 0;
  display: block;
}
.hero-card-brand { display: none; }

.hero-card-visual {
  position: relative; display: grid; place-items: center;
  animation: heroRise .9s cubic-bezier(.22,.61,.36,1) both;
}
.hero-card-visual::before {
  content: ""; position: absolute; z-index: 0;
  width: min(560px, 90vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91,52,232,.26), rgba(91,52,232,0) 70%);
  filter: blur(6px);
}
.hero-card-visual > * { position: relative; z-index: 1; }

.hero-card-visual .phone-stage {
  animation: heroFloat 7s ease-in-out 1.1s infinite;
}
.hero-card-visual .phone {
  --s: .92;
  box-shadow: 0 50px 90px -40px rgba(20, 10, 51, .65), inset 0 0 0 1px rgba(255,255,255,.16);
}
.hero-card-visual .reader-shot { animation: heroFloat 8s ease-in-out 1.1s infinite; }
.hero-card-visual .reader-shot p { color: var(--ink-2); font-weight: 500; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px) }
  to   { opacity: 1; transform: none }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-9px) }
}

/* the band closes just under the phone, so nothing is cut off */
.hero--center { padding-bottom: 0; }
.hero-foot { padding-top: clamp(30px, 3.4vw, 44px); }

@media (max-width: 700px) {
  .hero-card-visual .phone { --s: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card-visual, .hero-card-visual .phone-stage, .hero-card-visual .reader-shot { animation: none; }
}

/* ---------- PayPal-style motion: slower, softer, fewer surprises ---------- */
.btn { transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, color .3s ease, box-shadow .35s ease; }
.btn:hover { transform: translateY(-2px); }

.card, .pillar, .hub-card, .enrol-step, .flow-step, .perk, .deck-card {
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1),
              border-color .4s ease, opacity .7s cubic-bezier(.16,1,.3,1);
}

/* section headings rise as a group, the way PayPal staggers its blocks */
.center.measure > .eyebrow { transition-delay: 0ms; }
.center.measure > h2 { transition-delay: 70ms; }
.center.measure > .lead { transition-delay: 140ms; }

/* the deck stack eases instead of snapping */
.deck-card { will-change: transform; }

/* hero copy enters on load in the same rhythm */
.hero-copy > * { animation: heroRise .85s cubic-bezier(.16,1,.3,1) both; }
.hero-copy > h1 { animation-delay: .05s; }
.hero-copy > .lead { animation-delay: .14s; }
.hero-copy > .hero-actions { animation-delay: .22s; }
.seg { animation: heroRise .7s cubic-bezier(.16,1,.3,1) both; }
.hero-foot { animation: heroRise .9s cubic-bezier(.16,1,.3,1) .3s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .seg, .hero-foot { animation: none; }
}
/* the reader needs more presence now that the card isn't framing it */
.hero-card-visual .reader-shot svg { width: min(460px, 82vw); }
.hero-card-visual .reader-shot p { font-size: .9rem; margin-top: 10px; }

/* ==================================================================
   V18 — SCANNER BANNER
   Full-bleed product photograph with our own copy over it. The
   gradient sits *under* the photo in the same background shorthand, so
   if assets/scanner-terminal.jpg is missing the panel still looks
   deliberate rather than broken.
   ================================================================== */
.scanner-banner {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: clamp(340px, 42vw, 520px);
  display: flex; align-items: center;
  background:
    linear-gradient(105deg, rgba(12,7,34,.94) 0%, rgba(12,7,34,.82) 38%, rgba(12,7,34,.25) 62%, rgba(12,7,34,.1) 100%),
    radial-gradient(120% 100% at 78% 30%, rgba(91,52,232,.55), transparent 60%),
    linear-gradient(160deg, #2A1B58, #0C0722 70%),
    url("assets/scanner-terminal.jpg");
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, 68% 45%;
  background-repeat: no-repeat;
}
.scanner-banner-copy {
  padding: clamp(28px, 4vw, 56px);
  max-width: min(560px, 92%);
}
.scanner-kicker {
  display: block; font-size: clamp(.92rem, 1.5vw, 1.15rem); font-weight: 500;
  color: #D7CFFA; margin-bottom: 6px;
}
.scanner-banner h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; margin-bottom: .28em;
  color: #fff;
}
.scanner-tagline {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.25;
  color: #fff; margin-bottom: 22px;
}
.scanner-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.scanner-chip {
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 10px; padding: 8px 14px; line-height: 1.2;
  font-family: var(--display); font-weight: 700; font-size: .88rem;
}
.scanner-chip small {
  display: block; font-family: var(--body); font-weight: 600;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 1px;
}
.scanner-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) {
  .scanner-banner {
    background-position: center, center, center, 72% 30%;
    min-height: 0;
  }
  .scanner-banner-copy { max-width: 100%; padding: 26px 22px 28px; }
  .scanner-banner::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(12,7,34,.55);
  }
}

/* the cropped product shot is portrait-ish, so sit it on the right at full
   height rather than letting `cover` blow it up and slice the subject */
.scanner-banner {
  background:
    linear-gradient(100deg, rgba(12,7,34,.97) 0%, rgba(12,7,34,.94) 32%,
                    rgba(12,7,34,.72) 48%, rgba(12,7,34,.28) 64%, rgba(12,7,34,.05) 82%),
    url("assets/scanner-terminal.jpg"),
    radial-gradient(110% 100% at 82% 40%, rgba(91,52,232,.5), transparent 62%),
    linear-gradient(160deg, #2A1B58, #0C0722 70%);
  background-size: cover, auto 108%, cover, cover;
  background-position: center, right -2% center, center, center;
  background-repeat: no-repeat;
}
@media (max-width: 820px) {
  .scanner-banner {
    background-size: cover, auto 62%, cover, cover;
    background-position: center, right -8% top 0, center, center;
    padding-top: 34vw;
  }
  .scanner-banner::after { display: none; }
}

/* photo as its own masked layer so its left edge dissolves into the panel
   instead of butting against it with a hard seam */
.scanner-banner {
  background:
    radial-gradient(110% 100% at 82% 40%, rgba(91,52,232,.45), transparent 62%),
    linear-gradient(160deg, #2A1B58, #0C0722 70%);
  background-size: cover, cover;
  background-position: center, center;
}
.scanner-banner::before {
  content: ""; position: absolute; inset: 0 0 0 auto; z-index: 0;
  width: min(62%, 760px);
  background: url("assets/scanner-terminal.jpg") right center / auto 112% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%);
}
.scanner-banner-copy { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .scanner-banner { padding-top: 46vw; }
  .scanner-banner::before {
    inset: 0 0 auto 0; width: 100%; height: 52vw;
    background-position: center 30%; background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 96%);
            mask-image: linear-gradient(180deg, #000 52%, transparent 96%);
  }
}
.scanner-banner-copy { max-width: min(620px, 94%); }
.scanner-actions { gap: 10px 12px; }

/* ---------- wallet comparison band ---------- */
.wallet-compare { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .wallet-compare { grid-template-columns: 1fr; } }
.wallet-col {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
}
.wallet-col h3 { font-size: 1.05rem; margin-bottom: 18px; color: var(--muted); font-family: var(--body); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; }
.wallet-col--plus {
  background: linear-gradient(165deg, #1B0F42, #3A1D8C 70%, #5B34E8);
  border-color: transparent; color: #fff;
  box-shadow: 0 30px 60px -34px rgba(20,10,51,.6);
}
.wallet-col--plus h3 { color: var(--gold); }
.wallet-list { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 12px; }
.wallet-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .96rem; color: var(--muted); line-height: 1.5;
}
.wallet-list li::before {
  content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--violet-100); color: var(--violet-600);
  font-size: .66rem; font-weight: 700; display: grid; place-items: center; margin-top: 2px;
}
.wallet-list--plus li { color: #D7CFFA; }
.wallet-list--plus li strong { color: #fff; }
.wallet-list--plus li::before { background: var(--gold); color: var(--ink); }
.wallet-col--plus .btn { margin-top: 22px; }

/* the audience switch hides whole sections; keep the toggle itself visible */
.seg-btn[hidden] { display: inline-flex !important; }
[data-aud][hidden] { display: none !important; }

/* ---------- send & receive band ---------- */
.send-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .send-grid { grid-template-columns: 1fr; } }
.send-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 26px;
  transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease, opacity .7s ease;
}
.send-card:hover { transform: translateY(-5px); border-color: rgba(245,179,60,.45); }
.send-ic {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: rgba(245,179,60,.16); color: var(--gold); margin-bottom: 16px;
}
.send-ic svg { width: 20px; height: 20px; }
.send-card h3 { font-size: 1.1rem; margin-bottom: .35em; color: #fff; }
.send-card p { color: #B9B0DC; font-size: .94rem; margin: 0; }

/* seven pillars: three rows around the hub, evenly */
.eco {
  grid-template-columns: 1fr .62fr .62fr 1fr;
  grid-template-areas:
    "p1 hub hub p2"
    "p3 hub hub p4"
    "p5 p6  p6  p7";
}
.eco .pillar:nth-of-type(5) { grid-area: p5; max-width: none; margin-inline: 0; }
.eco .pillar:nth-of-type(6) { grid-area: p6; }
.eco .pillar:nth-of-type(7) { grid-area: p7; }
@media (max-width: 900px) {
  .eco {
    grid-template-columns: 1fr;
    grid-template-areas: "hub" "p1" "p2" "p3" "p4" "p5" "p6" "p7";
  }
}

/* the hero now carries the hardware shot */
.hero-card-visual .reader-shot { width: min(560px, 92%); }
.hero-card-visual .reader-shot .device-photo {
  width: 100%; border-radius: 22px;
  box-shadow: 0 40px 80px -34px rgba(20, 10, 51, .7);
}
.hero-card-visual .reader-shot p {
  font-size: .88rem; color: var(--ink-2); margin-top: 12px; font-weight: 500;
}

/* ---------- merchant growth strip ---------- */
.growth-strip {
  margin-top: 22px; background: linear-gradient(150deg, #1B0F42, #3A1D8C 70%, #5B34E8);
  color: #fff; border-radius: var(--radius); padding: clamp(26px, 3.4vw, 38px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center;
}
@media (max-width: 860px) { .growth-strip { grid-template-columns: 1fr; } }
.growth-strip h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: .3em; }
.growth-strip p { color: #D7CFFA; margin: 0; font-size: .96rem; }
.growth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.growth-stats .n { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--gold); display: block; line-height: 1; }
.growth-stats .t { font-size: .8rem; color: #C6BEE4; display: block; margin-top: 6px; line-height: 1.35; }
@media (max-width: 560px) { .growth-stats { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- headline word rotator ----------
   The word rises into a glowing block that resizes around it. The mask
   softens the top and bottom edges so words arrive and leave rather than
   snapping at the boundary. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rot {
  /* the global border-box would make the JS-measured text width include the
     padding, clipping the last letter */
  box-sizing: content-box;
  display: inline-block; overflow: hidden; vertical-align: -.17em;
  height: 1.22em; line-height: 1.22em;
  padding: 0 .2em; border-radius: .2em;
  background: linear-gradient(180deg, rgba(91,52,232,.16), rgba(123,92,255,.09));
  transition: width .78s cubic-bezier(.16, 1, .3, 1);
  will-change: width;
  animation: rotGlow 2.2s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.rot-track {
  display: block;
  /* translate3d keeps this on the compositor — no repaint per frame, which is
     what makes it smooth on a cheap phone */
  transition: transform .78s cubic-bezier(.16, 1, .3, 1), opacity .78s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.rot-track b {
  display: block; width: max-content; font-weight: inherit;
  height: 1.22em; line-height: 1.22em;
  color: var(--violet); white-space: nowrap;
}
@keyframes rotGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(91,52,232,.22), 0 10px 30px -14px rgba(91,52,232,.5); }
  50%      { box-shadow: 0 0 0 1px rgba(123,92,255,.4), 0 16px 44px -14px rgba(91,52,232,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .rot { animation: none; box-shadow: 0 0 0 1px rgba(91,52,232,.25); }
  .rot, .rot-track { transition: none; }
}

/* ---------- partner marks ---------- */
.tb-logo { display: block; width: auto; flex: none; object-fit: contain; }
.tb-logo--opay { height: 20px; }
.tb-logo--sbp  { height: 26px; }
.trustbar--dark .tb-logo--opay {
  /* the wordmark is dark navy — lift it on the ink footer */
  background: #fff; border-radius: 5px; padding: 3px 6px; height: 26px;
}
.trustbar--dark .tb-logo--sbp { background: #fff; border-radius: 50%; padding: 2px; }

@media (max-width: 640px) {
    }

/* ==================================================================
   LOW-DATA / SLOW-CONNECTION MODE
   Set by script.js from navigator.connection (save-data, 2G, slow-2G).
   Decoration stops; everything still reads and works.
   ================================================================== */
html.low-data .rot-track,
html.low-data .rot { transition: none; }
html.low-data .rot { animation: none; box-shadow: 0 0 0 1px rgba(91,52,232,.25); }
html.low-data .screen-track,
html.low-data .marquee-track,
html.low-data .hero-card-visual,
html.low-data .hero-card-visual .phone-stage,
html.low-data .section-ink::after,
html.low-data .cta-strip::after,
html.low-data .scan-plane,
html.low-data .beam,
html.low-data .dev-ring,
html.low-data .dev-ok { animation: none !important; }
html.low-data .section-ink::before,
html.low-data .cta-strip::before { display: none; }
html.low-data .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html.low-data .deck-card { transform: none !important; filter: none !important; }

@media (prefers-reduced-data: reduce) {
  .rot, .rot-track { transition: none; animation: none; }
  .screen-track, .marquee-track { animation: none; }
}

/* ---------- mobile / touch hardening ---------- */
@supports (-webkit-touch-callout: none) {
  /* iOS: avoid the 100vh address-bar jump on anything sized to the viewport */
  .deck-card { min-height: min(480px, 70svh); }
  .prail { height: min(66svh, 560px); }
}
@media (hover: none) {
  /* no sticky :hover state left behind after a tap */
  .btn:hover, .card:hover, .pillar:hover, .hub-card:hover,
  .enrol-step:hover, .flow-step:hover, .perk:hover,
  .send-card:hover, .deck-card:hover { transform: none; }
  .marquee:hover .marquee-track { animation-play-state: running; }
}
@media (max-width: 760px) {
  /* thumb-sized targets and no cramped rows */
  .btn { padding: 15px 26px; }
  .btn-sm { padding: 12px 20px; }
  .seg-btn { padding: 12px 24px; }
  .tab { padding: 14px 10px; }
  .nav-links a { padding: 15px 0; }
  .bot-btn, .qr-dock-toggle { width: 56px; height: 56px; }
  /* 16px minimum or iOS zooms the page on focus — needs to out-specify
     .field input, hence the explicit selectors */
  .field input, .field select, .field textarea,
  .bot-form input, .refer-row input { font-size: 16px; }
}
/* the hamburger needs a 44px touch target, not a 38×32 one */
.nav-toggle { padding: 12px 11px; }

/* ---------- scanner: one compact rotating fact instead of eight tiles ---------- */
.scan-brief { max-width: 780px; margin: clamp(24px, 3vw, 34px) auto 0; text-align: center; }
.scan-brief > p { color: #B9B0DC; font-size: 1rem; line-height: 1.6; margin-bottom: 22px; }
.scan-brief > p strong { color: #fff; }

.fact-rail {
  overflow: hidden; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  height: 96px;
}
.fact-list {
  display: flex; list-style: none; margin: 0; padding: 0; height: 100%;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.fact-list li {
  flex: 0 0 100%; height: 100%; padding: 18px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.fact-list strong { font-family: var(--display); font-size: 1.05rem; color: #fff; }
.fact-list span { font-size: .92rem; color: #B9B0DC; line-height: 1.5; }

.fact-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.fact-dots button {
  width: 22px; height: 5px; border-radius: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.22); transition: background .3s ease, width .3s ease;
}
.fact-dots button[aria-selected="true"] { background: var(--gold); width: 34px; }
.fact-dots button:hover { background: rgba(255,255,255,.45); }

/* no motion / low data: show them all as a compact list instead of rotating */
.fact-rail.is-static { height: auto; background: none; border: 0; }
.fact-rail.is-static .fact-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transform: none !important;
}
.fact-rail.is-static .fact-list li {
  flex: none; padding: 14px 16px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm);
}
.fact-rail.is-static + .fact-dots { display: none; }
@media (max-width: 620px) {
  .fact-rail { height: 118px; }
  .fact-rail.is-static .fact-list { grid-template-columns: 1fr; }
}

/* ==================================================================
   MOBILE: SWIPE INSTEAD OF SCROLL
   The sticky card stack only works with a mouse and a tall viewport, so on
   phones the decks become native horizontal snap carousels — the same
   content, one card at a time, a fraction of the height.
   ================================================================== */
@media (max-width: 900px) {
  .deck, .enrol-steps {
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px 0 14px; margin-inline: -22px; padding-inline: 22px;
    scrollbar-width: none;
  }
  .deck::-webkit-scrollbar, .enrol-steps::-webkit-scrollbar { display: none; }

  .deck-card {
    position: relative; top: auto; transform: none !important;
    flex: 0 0 86%; scroll-snap-align: center;
    margin-bottom: 0; min-height: 0;
    grid-template-columns: 1fr;
  }
  .deck-card .deck-visual { order: -1; min-height: 0; padding: 18px; }
  .deck-visual .phone { --s: .58; }
  .deck-visual--ink .mock { max-width: 100%; }
  .deck-body { padding: 20px 22px 24px; }
  .deck-body h3 { font-size: 1.3rem; }
  .deck-body p { font-size: .93rem; }

  .enrol-step { flex: 0 0 80%; scroll-snap-align: center; }

  /* a swipe needs to look swipeable */
  .swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-2); margin-top: 2px;
  }
  .swipe-hint svg { width: 15px; height: 15px; animation: swipeNudge 1.8s ease-in-out infinite; }
  @keyframes swipeNudge { 0%,100% { transform: translateX(0) } 50% { transform: translateX(5px) } }
}
@media (min-width: 901px) { .swipe-hint { display: none; } }

/* ---------- less of everything on a small screen ---------- */
@media (max-width: 760px) {
  section { padding-block: clamp(38px, 7vw, 58px); }
  .hide-sm { display: none !important; }

  /* the ecosystem reads as a grid of names, not seven paragraphs */
  .eco {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "hub hub" "p1 p2" "p3 p4" "p5 p6" "p7 p7";
    gap: 10px;
  }
  .eco .pillar { padding: 15px 16px; }
  .eco .pillar .icon-badge { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 9px; }
  .eco .pillar .icon-badge svg { width: 16px; height: 16px; }
  .eco .pillar h3 { font-size: .98rem; margin-bottom: .15em; }
  .eco .pillar p { font-size: .84rem; line-height: 1.45; }
  .hub { padding: 22px 18px; }
  .hub-mark { width: 88px; height: 88px; margin-bottom: 10px; }
  .hub h3 { font-size: 1.2rem; }
  .hub p { font-size: .88rem; }

  /* two up instead of one, where the copy is short */
  .why .grid-3, #why .grid-3, #trust .grid-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  #why .grid-3 .card, #trust .grid-3 .card { padding: 18px 16px; }
  #why .grid-3 h3, #trust .grid-3 h3 { font-size: 1rem; }
  #why .grid-3 p, #trust .grid-3 p { font-size: .86rem; line-height: 1.5; }
  .send-grid { gap: 10px; }
  .send-card { padding: 18px 16px; }
  .send-card p { font-size: .88rem; }

  .center.measure { margin-bottom: 26px !important; }
  .lead { font-size: .96rem; }
  h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); }
}
@media (max-width: 760px) {
  /* the comparison collapses to the column that matters */
  .wallet-compare { grid-template-columns: 1fr; }
  /* the FAQ is mostly headings on a phone — tighten it */
  .faq summary { padding: 16px 34px 16px 0; font-size: 1rem; }
  .faq details p { font-size: .92rem; margin-bottom: 16px; padding-right: 8px; }
  .feature-table th, .feature-table td { padding: 14px 16px; }
  .feature-table tbody th { font-size: .98rem; }
  .feature-table tbody td { font-size: .9rem; }
  .enrol-after { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stat-row { gap: 10px; }
  .hero-foot { padding-top: 22px; }
}

/* ==================================================================
   GLASS LAYER
   Translucent surfaces with a specular top edge and a blurred backdrop —
   the "frosted" treatment, applied where a surface floats over content.
   Every rule degrades to a solid colour if backdrop-filter is missing.
   ================================================================== */
:root {
  --glass-tint:  rgba(255, 255, 255, .62);
  --glass-edge:  rgba(255, 255, 255, .75);
  --glass-line:  rgba(20, 10, 51, .08);
  --glass-blur:  saturate(170%) blur(18px);
  --glass-shine: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  /* ---- buttons: frosted body, bright top edge, wet-look press ---- */
  .btn-outline, .btn-light, .btn-ghost-light, .seg, .rail-chip, .scanner-chip {
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .btn-outline {
    background: var(--glass-tint);
    border-color: rgba(20, 10, 51, .18);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 8px 20px -14px rgba(20, 10, 51, .5);
  }
  .btn-outline:hover { background: rgba(255, 255, 255, .82); }
  .btn-ghost-light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .btn-ghost-light:hover { background: rgba(255, 255, 255, .2); }

  /* the specular sheen that reads as glass rather than plastic */
  .btn::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 52%;
    background: var(--glass-shine); opacity: .5;
    border-radius: inherit; pointer-events: none;
  }
  .btn-dark::after, .btn-primary::after { opacity: .16; }
  .btn:active { box-shadow: inset 0 2px 6px rgba(20, 10, 51, .25); }

  /* ---- floating chrome ---- */
  .nav {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom-color: var(--glass-line);
  }
  .seg {
    background: rgba(255, 255, 255, .42);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 26px -18px rgba(20, 10, 51, .5);
  }
  .seg-btn.is-on {
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(20, 10, 51, .5);
  }
  .qr-dock-panel, .bot-panel, .sticky-cta, .form-card {
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .qr-dock-panel, .form-card { background: rgba(255, 255, 255, .78); }
  .sticky-cta { background: rgba(20, 10, 51, .82); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -16px rgba(20,10,51,.65); }
  .bot-btn, .qr-dock-toggle { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 34px -14px rgba(91,52,232,.9); }

  /* ---- glass on dark sections ---- */
  .section-ink .card, .send-card, .spec, .fact-rail, .split-card, .wallet-col--plus {
    -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .scanner-chip { background: rgba(255, 255, 255, .88); box-shadow: inset 0 1px 0 #fff; }
}

/* ---------- scrolling ---------- */
html { scroll-behavior: smooth; }
* { -webkit-overflow-scrolling: touch; }
@media (min-width: 901px) {
  /* a slim glass scrollbar, on the elements that scroll inside the page */
  .bot-log, .sectionbar-links, .table-wrap, .deck, .enrol-steps {
    scrollbar-width: thin; scrollbar-color: rgba(91,52,232,.35) transparent;
  }
  .bot-log::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
  .bot-log::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: transparent; }
  .bot-log::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(91, 52, 232, .3); border-radius: 99px;
    border: 2px solid transparent; background-clip: content-box;
  }
  .bot-log:hover::-webkit-scrollbar-thumb, .table-wrap:hover::-webkit-scrollbar-thumb { background: rgba(91,52,232,.5); background-clip: content-box; }
}

/* ---------- mobile typography: fewer words per line, more air ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; line-height: 1.62; -webkit-text-size-adjust: 100%; }
  p, .lead, li, td { max-width: 40ch; }
  .center p, .center .lead, .center.measure p { margin-inline: auto; }
  h1, h2, h3 { letter-spacing: -.03em; text-wrap: balance; }
  h2 { line-height: 1.12; }
  .hero--center h1 { line-height: 1.05; }
  .card p, .send-card p, .pillar p, .deck-body p { max-width: none; }
}

/* ==================================================================
   V30 — THE FEATURE DECK ON A PHONE
   The carousel worked but each card came out over 1000px tall: the phone
   mock was laid out at full size and only visually scaled, so the visual
   band reserved height nobody could see, and the body ran seven lines of
   copy under it. Now the band is a fixed window the phone peeks into, and
   the second half of each paragraph is hidden on small screens.
   ================================================================== */
.show-sm { display: none; }

@media (max-width: 900px) {
  .show-sm { display: inline; }
  .deck-body .hide-sm { display: none; }

  /* a touch more of the next card showing, so the swipe is discoverable */
  .deck { gap: 14px; scroll-padding-inline: 22px; }
  .deck-card { flex-basis: 88%; }

  /* Cards in a snap carousel are equal height, so the slack goes to the
     visual (decorative, centred) and never above the copy. */
  .deck-card { grid-template-rows: 1fr auto; }

  /* the phone sits at the top of its band and fades out if the band is
     shorter than the mock */
  #wallet .deck-visual {
    padding: 16px 16px 0; align-items: start; overflow: hidden;
  }
  #wallet .deck-visual::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
    background: linear-gradient(180deg, rgba(243,240,255,0), var(--violet-050));
    pointer-events: none;
  }
  /* keep the negative margin that matches the scale — without it the mock
     still reserves its full 604px of layout height */
  #wallet .deck-visual .phone { --s: .66; transform-origin: top center; }
  #wallet .deck-visual .phone-stage::after { display: none; }

  /* the other visuals hold short content — let them size to it */
  .deck-card .deck-visual { min-height: 0; }
  .deck-visual .pay-split { gap: 10px; max-width: 100%; }
  .deck-visual .pay-tile { padding: 14px; }
  .deck-visual .pay-tile svg { width: 24px; height: 24px; margin-bottom: 6px; }

  .deck-body { padding: 18px 20px 22px; gap: 4px; }
  .deck-body .deck-tag { margin-bottom: 10px; }
  .deck-body h3 { font-size: 1.22rem; line-height: 1.16; margin-bottom: .3em; }
  .deck-body p { font-size: .92rem; line-height: 1.55; max-width: none; }
  .deck-body .btn { margin-top: 12px; padding: 11px 18px; font-size: .92rem; }
}

@media (max-width: 900px) {
  /* Each visual is a proof, not a spec sheet — on a phone the label is the
     proof and the supporting sentence inside it is noise. */
  #pay .pay-split { grid-template-columns: 1fr 1fr; }
  #pay .pay-tile strong { font-size: .95rem; }
  #pay .pay-tile span { font-size: .74rem; }

  #split .deck-visual .mock { max-width: 100%; }
  #split .mock-row { padding: 8px 10px; font-size: .8rem; }
  #split .mock-head strong { font-size: .88rem; }
  #split .mock-foot { font-size: .76rem; }

  #groups .deck-visual .grid { gap: 9px; }
  #groups .group-card { padding: 12px 14px; gap: 10px; }
  #groups .group-card p { display: none; }
  #groups .group-card h3 { font-size: .95rem; margin: 0; }

  #perks .deck-visual .perks { gap: 10px; }
  #perks .perk { padding: 12px 10px; }
  #perks .perk p { display: none; }
  #perks .perk h3 { font-size: .84rem; margin: 0; }
  #perks .icon-badge { width: 30px; height: 30px; margin-bottom: 6px; }
  #perks .perk-note { font-size: .82rem; padding: 12px 14px; }
}