/* ============================================================
   INDIANEXPRESS · 2026 — PREMIUM FINTECH LANDING
   Apple Wallet × Monzo × Revolut × Arc. White base, soft glass,
   orchid → pink accents, slate ink. Calm, editorial, product-first.
   Palette: #EB9FFF · #FECEE9 · #545677 · white · #F7F7FA · #ECECF2
   The in-phone app keeps its own dark UI (tokens re-asserted on .phone).
   ============================================================ */

/* ---------------- design tokens ---------------- */
:root{
  --bg:#FFFFFF;
  --bg-2:#F7F7FA;
  --bg-3:#ECECF2;

  --orchid:#EB9FFF;          /* primary accent */
  --orchid-deep:#9B45D6;     /* legible orchid for strokes/icons (contrast) */
  --pink:#FECEE9;            /* soft pink */
  --periwinkle:#8E84E6;      /* supporting accent */
  --ink:#4a4c69;             /* slate */
  --ink-strong:#272838;      /* headings — strong contrast */

  --screen:#F6F6FB;
  --card:rgba(255,255,255,.72);
  --card-2:rgba(255,255,255,.9);
  --card-solid:#FFFFFF;
  --line:rgba(60,62,90,.14);
  --line-2:rgba(235,159,255,.34);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);

  --txt:#31324a;
  --txt-2:rgba(49,50,74,.76);
  --txt-3:rgba(49,50,74,.52);

  --pri:#9B45D6;
  --pri-2:#C063EC;
  --pri-d:#7e32c4;

  --grad:linear-gradient(135deg,#EB9FFF 0%,#FECEE9 100%);
  --grad-soft:linear-gradient(120deg,#9B45D6,#C77DFF 55%,#EB9FFF);
  --grad-text:linear-gradient(118deg,#6E27B8 0%,#9B45D6 46%,#C063EC 100%);
  --grad-text-deep:linear-gradient(118deg,#4D1B81 0%,#6C3096 46%,#8645A5 100%);
  --grad-ink:linear-gradient(140deg,#3f4061 0%,#2c2d44 100%);

  --green:#2bbf96;
  --red:#ff6b81;
  --r:28px;

  --shadow-soft:0 30px 70px -40px rgba(84,86,119,.30);
  --shadow-card:0 26px 56px -34px rgba(84,86,119,.28);
}

/* INTERACTIVE APP (inside the phone) — LIGHT MODE, same palette */
.phone{
  --bg:#FFFFFF; --screen:#F5F5F6;
  --card:rgba(255,255,255,.82); --card-2:#FFFFFF; --card-solid:#FFFFFF;
  --line:rgba(60,62,90,.12); --line-2:rgba(155,69,214,.34);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --txt:#272838; --txt-2:rgba(49,50,74,.66); --txt-3:rgba(49,50,74,.46);
  --pri:#9B45D6; --pri-2:#C063EC; --pri-d:#7e32c4;
  --grad:linear-gradient(140deg,#9B45D6 0%,#C063EC 48%,#C77DFF 100%);
  --grad-soft:linear-gradient(140deg,#C77DFF,#EB9FFF);
  --green:#1ba37c; --red:#e5556e;
}

/* ---------------- base canvas: white + 3D blurred colour ---------------- */
body{ background:#FFFFFF !important; color:var(--txt); }
.site::before{
  inset:-16% !important;
  background:
    radial-gradient(38% 32% at 14% 8%, rgba(235,159,255,.16), transparent 62%),
    radial-gradient(34% 30% at 88% 6%, rgba(254,206,233,.21), transparent 64%),
    radial-gradient(44% 38% at 82% 92%, rgba(235,159,255,.11), transparent 64%),
    radial-gradient(40% 34% at 6% 96%, rgba(84,86,119,.06), transparent 64%) !important;
  filter:blur(56px) !important;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
  animation:luxDrift 26s ease-in-out infinite alternate;
}
@keyframes luxDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(1.5%,-2%,0) scale(1.07)} }

.ie-grain{ opacity:.022 !important; mix-blend-mode:multiply !important; }

/* moving 3D blurred orbs + subtle mesh */
.lux-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.lux-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.42; will-change:transform; }
.lux-orb--v{ width:48vw; height:48vw; left:-14vw; top:-12vw;
  background:radial-gradient(circle at 36% 32%, #F4C9FF, #EB9FFF 60%, transparent 72%);
  animation:luxFloatA 28s ease-in-out infinite; }
.lux-orb--p{ width:42vw; height:42vw; right:-12vw; top:4vh; opacity:.38;
  background:radial-gradient(circle at 60% 40%, #FFE3F1, #FECEE9 62%, transparent 74%);
  animation:luxFloatB 32s ease-in-out infinite; }
.lux-orb--s{ width:44vw; height:44vw; right:8vw; bottom:-20vw; opacity:.27;
  background:radial-gradient(circle at 50% 50%, #DDD6EE, #545677 70%, transparent 76%);
  animation:luxFloatA 36s ease-in-out infinite reverse; }
.lux-orb--w{ width:36vw; height:36vw; left:6vw; bottom:-14vw; opacity:.25;
  background:radial-gradient(circle at 44% 44%, #F8DDFF, #EB9FFF 64%, transparent 74%);
  animation:luxFloatB 30s ease-in-out infinite; }
@keyframes luxFloatA{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(4%,-5%)} }
@keyframes luxFloatB{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5%,4%)} }
.lux-mesh{ position:absolute; inset:0;
  background-image:linear-gradient(rgba(84,86,119,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(84,86,119,.03) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0%,#000 20%,transparent 70%);
  mask-image:radial-gradient(110% 70% at 50% 0%,#000 20%,transparent 70%); }

/* subtle floating finance glyphs — deep background, never overlap content */
.finviz{ position:absolute; left:var(--x); top:var(--y); display:grid; place-items:center;
  width:calc(158px * var(--s,1)); height:calc(158px * var(--s,1)); border-radius:38px;
  color:#fff; opacity:.16;
  background:linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.5); box-shadow:none;
  filter:blur(3px);
  will-change:transform;
  animation:finFloat 9s ease-in-out infinite; animation-delay:var(--t,0s); }
.finviz svg{ width:54%; height:54%; stroke-width:1.6; }
@keyframes finFloat{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-14px) rotate(3deg)} }

/* ---------------- top nav: floating glass pill ---------------- */
.nav{ background:transparent !important; padding-top:14px; }
.nav.is-stuck::before, .nav::after{ content:none; }
.nav__brand{ color:var(--ink-strong) !important; }
.nav__logo{ width:38px !important; height:38px !important;
  filter:saturate(1.05) drop-shadow(0 6px 14px rgba(235,159,255,.4)) !important; }
.nav__name{ font-size:17px; }
.nav__name span{ background-image:var(--grad-text) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; }
.nav__links{
  background:rgba(255,255,255,.78) !important; border:1px solid rgba(60,62,90,.08) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.7); backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:0 18px 40px -18px rgba(84,86,119,.4), 0 1px 0 rgba(255,255,255,.9) inset;
  padding:5px; gap:4px;
}
.nav__links a{ color:var(--ink) !important; font-weight:600; padding:9px 19px; letter-spacing:-.005em; }
.nav__links a:hover{ color:var(--ink-strong) !important; }
.nav__links a.is-active{ color:#fff !important; background:var(--grad-ink) !important;
  box-shadow:0 8px 18px -10px rgba(84,86,119,.6) !important; }
.nav__cta{ background:var(--grad-ink) !important; color:#fff !important; font-weight:700 !important;
  box-shadow:0 16px 30px -16px rgba(84,86,119,.65) !important; }
.nav__cta:hover{ box-shadow:0 20px 36px -14px rgba(84,86,119,.8) !important; transform:translateY(-2px); }

/* ---------------- HERO ---------------- */
.hero{
  min-height:100svh;
  background:
    radial-gradient(34% 42% at 10% 28%, rgba(235,159,255,.22), transparent 64%),
    radial-gradient(30% 36% at 90% 20%, rgba(254,206,233,.26), transparent 64%),
    radial-gradient(42% 42% at 72% 94%, rgba(142,132,230,.14), transparent 64%) !important;
}
.hero__inner{ grid-template-columns:1fr 1.04fr; gap:clamp(24px,4vw,64px); }
.hero__copy{ max-width:520px; }
.aurora{ display:none !important; }

.eyebrow{
  color:var(--ink) !important; background:rgba(235,159,255,.14) !important;
  border:1px solid rgba(235,159,255,.32) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.eyebrow__dot{ background:var(--orchid-deep) !important; box-shadow:0 0 0 4px rgba(235,159,255,.2) !important; }

.hero__copy .eyebrow{ margin-top:4px; }
.hero__title{
  color:var(--ink-strong) !important; font-size:clamp(40px,5.2vw,62px) !important;
  letter-spacing:-.035em !important; line-height:.92 !important; white-space:normal !important;
  margin-top:-14px !important; position:relative; z-index:5;
}
/* clean titles — no glow overlay over the hero heading */
.hero__title, .hero__title .hl-w, .hero__title .hero__lead, .hero__title .serif{ text-shadow:none !important; }
.hero__title .serif{ background-image:var(--grad-text-deep) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; font-size:.62em !important;
  display:inline-block; margin-left:.32em; position:relative; top:-1em; z-index:4; }
.hero__title .hero__lead{ background-image:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; font-size:1.9em; display:inline-block;
  line-height:1.05; padding:.04em .04em .14em; margin-top:.12em; overflow:visible; position:relative; z-index:2; }
.hero__title .hl-w{ background-image:var(--grad-text-deep) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; }
/* hero: "that feels effortless." reads as plain black */
.hero__title .serif, .hero__title .serif .hl-w{ background:none !important;
  -webkit-text-fill-color:var(--ink-strong) !important; color:var(--ink-strong) !important; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:-12px; margin-left:14px; }

/* 3D fintech card — hero visual anchor + colour */
.hero__card{ position:relative; width:min(100%,378px); margin-top:40px; aspect-ratio:1.66;
  border-radius:22px; padding:22px 24px; color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#EB9FFF 0%,#C063EC 36%,#7E63C0 70%,#3f4061 100%);
  box-shadow:0 38px 64px -30px rgba(84,86,119,.62), inset 0 1px 0 rgba(255,255,255,.45);
  transform:perspective(1300px) rotateX(7deg) rotateY(-13deg) rotate(-1.5deg);
  transform-style:preserve-3d; transform-origin:left center;
  animation:heroCardFloat 9s ease-in-out infinite; }
.hero__card-sheen{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(125deg,rgba(255,255,255,.5),transparent 26%,transparent 66%,rgba(255,255,255,.22)); }
.hero__card-orb{ position:absolute; z-index:-1; width:220px; height:220px; right:-56px; top:-78px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42), transparent 64%); }
.hero__card-top{ display:flex; align-items:center; justify-content:space-between; }
.hero__card-brand{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.hero__card-brand b{ font-weight:800; }
.hero__card-brand img{ width:22px; height:22px; filter:brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.hero__card-net{ font-size:12.5px; font-weight:800; letter-spacing:.04em; opacity:.94; }
.hero__card-chip{ display:block; width:42px; height:31px; border-radius:8px; margin:clamp(12px,2.2vw,20px) 0 16px;
  background:linear-gradient(135deg,#FCE9A8,#E1B468); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.hero__card-num{ font-family:var(--num); font-size:clamp(16px,1.6vw,19px); font-weight:600; letter-spacing:.14em; }
.hero__card-foot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:16px; }
.hero__card-foot small{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; opacity:.74; margin-bottom:2px; }
.hero__card-foot b{ font-size:13px; font-weight:700; letter-spacing:-.01em; }
.hero__card-growth{ display:none; }
@keyframes heroCardFloat{
  0%,100%{ transform:perspective(1300px) rotateX(7deg) rotateY(-13deg) rotate(-1.5deg) translateY(0); }
  50%{ transform:perspective(1300px) rotateX(6deg) rotateY(-9deg) rotate(-1.5deg) translateY(-8px); } }

/* fanned multi-colour card deck — sits at top of the hero copy column */
.hero__cards{ position:relative; width:min(100%,372px); margin:92px 0 8px; }
.hero__cards .hero__card{ margin-top:0 !important; width:100% !important; position:relative; z-index:3; }
.hcard{ position:absolute; left:0; right:0; top:0; aspect-ratio:1.66; border-radius:22px;
  box-shadow:0 26px 50px -30px rgba(84,86,119,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.hcard--b1{ z-index:2; transform:translate(15px,-14px) rotate(5.5deg);
  background:linear-gradient(135deg,#FECEE9 0%,#EB9FFF 94%); }
.hcard--b2{ z-index:1; transform:translate(29px,-27px) rotate(11deg);
  background:linear-gradient(135deg,#AEB2F2 0%,#6E5BC0 94%); }

/* device column — centered, breathing room, no decoration */
.hero__device{ transform:none !important; }
.hero__watermark{ position:absolute; z-index:0; width:min(116%,560px); top:50%; left:50%;
  transform:translate(-50%,-50%); opacity:.1; filter:blur(2px) saturate(1.1);
  pointer-events:none; animation:luxFloatA 18s ease-in-out infinite; }

/* floating data chips — sit in the gutters, do not cover the phone */
.chip3{ position:absolute; z-index:6; display:flex; align-items:center; gap:11px;
  padding:12px 16px 12px 12px; border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 30px 60px -30px rgba(84,86,119,.45), var(--glass-hi);
  animation:finFloat 6s ease-in-out infinite; }
.chip3 small{ display:block; font-size:10.5px; font-weight:600; color:var(--txt-3); letter-spacing:.01em; }
.chip3 b{ display:block; font-family:var(--num); font-size:14.5px; font-weight:800; color:var(--ink-strong); letter-spacing:-.01em; margin-top:1px; }
.chip3 b em{ font-style:normal; font-size:11px; font-weight:700; color:var(--green); margin-left:3px; }
.chip3__ic{ width:36px; height:36px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff; }
.chip3__ic svg{ width:19px; height:19px; stroke-width:2.1; }
.chip3__ic--up{ background:linear-gradient(140deg,#2bbf96,#1ea37e); }
.chip3__ic--pay{ background:var(--grad-ink); }
.chip3__ic--lock{ background:linear-gradient(140deg,#EB9FFF,#C77DFF); }
.chip3--bal{ top:9%; left:-3%; }
.chip3--upi{ bottom:15%; right:-3%; animation-delay:1.1s; }

/* device frame: product is the hero, no neon, no corners */
.proto-frame{ background:transparent !important; border:none !important; box-shadow:none !important;
  padding:14px !important; animation:luxDeviceFloat 8s ease-in-out infinite; }
.proto-frame::after{ content:none !important; }
.proto-frame__corner{ display:none !important; }
.phone{
  border:1px solid rgba(84,86,119,.12) !important;
  box-shadow:
    0 0 0 5px #ECECF2,
    0 0 0 6px rgba(255,255,255,.92),
    0 0 0 7px rgba(84,86,119,.05),
    0 48px 96px -34px rgba(84,86,119,.38),
    0 20px 50px -26px rgba(235,159,255,.3) !important;
}
@keyframes luxDeviceFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.hero__device:hover .proto-frame{ transform:translateY(-6px); }

/* ---------------- trust bar: light, subtle ---------------- */
.marquee{ margin-top:clamp(52px,9vh,110px) !important; margin-bottom:clamp(52px,9vh,110px) !important; border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:18px 0; }
.marquee__track{ animation-duration:42s; }
.marquee::before, .marquee::after{ content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,#fff,transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,#fff,transparent); }
.marquee__group{ gap:34px; padding-right:34px; }
.marquee__track span{ color:var(--orchid-deep) !important; font-size:14.5px !important; font-weight:700 !important; letter-spacing:-.01em; }
.marquee__track i{ width:6px; height:6px; border-radius:50%; background:var(--ink-strong) !important; display:inline-block; }

/* ---------------- section heads (with small logo mark) ---------------- */
.slide__head{ border-bottom:1px solid var(--line) !important; }
.slide__mark{ display:inline-flex; align-items:center; gap:11px; }
.slide__mark img{ width:26px; height:26px; object-fit:contain; flex:none;
  filter:saturate(1.05) drop-shadow(0 4px 10px rgba(235,159,255,.45)); }
.slide__name{ font-size:clamp(15px,2vw,18px) !important; font-weight:700; color:var(--ink-strong) !important; letter-spacing:-.01em; }
.slide__step{ font-family:var(--num); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--txt-3); }

.slide__title{ color:var(--ink-strong) !important; font-size:clamp(34px,5.4vw,62px) !important;
  letter-spacing:-.04em !important; line-height:1.02 !important; }
.slide__title .serif{ background-image:var(--grad-text) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; font-size:1em !important; }

/* ---------------- 01 · PROBLEM ---------------- */
.slide--problem{ min-height:auto !important; padding-top:clamp(80px,12vh,128px); padding-bottom:clamp(80px,12vh,128px); }
/* single-line heading + crisp, half-lined subheading */
.slide__title--solo{ white-space:nowrap; margin-bottom:14px !important; }
.slide__sub{ display:flex; align-items:center; gap:14px; margin:0 0 clamp(30px,5vh,52px);
  font-size:clamp(15px,1.8vw,19px); font-weight:600; color:var(--txt-2); letter-spacing:-.01em; }
.slide__rule{ flex:none; width:46px; height:3px; border-radius:3px; background:var(--grad-soft); }
.compare{ align-items:stretch; gap:clamp(24px,4vw,56px); max-width:1060px; margin:0 auto; }
.cmp{
  background:rgba(255,255,255,.86) !important; border:1px solid rgba(60,62,90,.1) !important; border-radius:28px !important;
  padding:clamp(28px,3.2vw,42px) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 26px 56px -34px rgba(84,86,119,.45), var(--glass-hi) !important;
}
.cmp:hover{ transform:translateY(-6px); }
/* before card — intentionally muted/flat for contrast */
.cmp:not(.cmp--after){
  background:rgba(247,247,251,.82) !important; border-color:rgba(60,62,90,.08) !important;
  box-shadow:0 18px 44px -38px rgba(84,86,119,.4), var(--glass-hi) !important;
}
/* after card — stronger visual focus */
.cmp--after{
  background:linear-gradient(165deg,rgba(235,159,255,.2),rgba(254,206,233,.12)) !important;
  border-color:rgba(235,159,255,.5) !important;
  box-shadow:0 48px 96px -44px rgba(199,125,255,.6), 0 0 0 1px rgba(235,159,255,.24), var(--glass-hi) !important;
  transform:scale(1.02);
}
.cmp--after:hover{ transform:scale(1.02) translateY(-6px); }
.cmp__tag{ display:inline-flex; align-items:center; gap:9px; font-size:12px !important; font-weight:800 !important;
  letter-spacing:.04em !important; text-transform:none !important; color:var(--ink-strong) !important; margin-bottom:24px !important; }
.cmp__tag--ok{ color:var(--ink-strong) !important; }
.cmp__logo{ width:22px; height:22px; object-fit:contain; }
.cmp__pts{ margin-top:0 !important; padding-top:0 !important; gap:16px !important; }
.cmp__pts li{ font-size:clamp(15px,1.7vw,18px) !important; color:var(--ink-strong) !important; padding-left:30px !important; }
.cmp__pts li::before{ content:""; top:50% !important; transform:translateY(-50%); left:2px !important;
  width:16px; height:2px; border-radius:2px; background:var(--txt-3); }
.cmp__pts--ok li{ color:var(--ink-strong) !important; font-weight:600; }
.cmp__pts--ok li::before{ content:"" !important; width:18px; height:18px; left:0 !important; border-radius:50%;
  background:var(--grad-soft); box-shadow:0 6px 14px -6px rgba(199,125,255,.7); }
.cmp__pts--ok li::after{ content:""; position:absolute; left:5px; top:50%; width:7px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-65%) rotate(-45deg); }
/* good side: each point in its own frosted-glass box cropped to its text width,
   a bit smaller, tick marker kept, centred under the white dashboard box above */
.cmp__pts--ok{ display:flex !important; flex-direction:column; align-items:center; gap:9px !important; }
.cmp__pts--ok li{ position:relative; display:inline-flex; align-items:center; width:fit-content;
  font-size:clamp(12.5px,1.4vw,14.5px) !important; padding:9px 14px 9px 38px !important;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.75); border-radius:12px;
  box-shadow:0 10px 22px -14px rgba(84,86,119,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.cmp__pts--ok li::before{ left:12px !important; }
.cmp__pts--ok li::after{ left:17px !important; }
/* elegant minimal arrow */
.cmp__arrow{ align-self:center; width:54px; height:54px; border-radius:50%; color:var(--ink-strong) !important;
  background:rgba(255,255,255,.78) !important; border:1px solid rgba(235,159,255,.4);
  box-shadow:0 18px 36px -18px rgba(84,86,119,.4), var(--glass-hi) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); animation:arrowpush 2s ease-in-out infinite; }
.cmp__arrow svg{ width:22px; height:22px; stroke-width:2.2; }
@keyframes arrowpush{ 50%{transform:translateX(5px)} }

/* ---------------- 02 · FEATURES ---------------- */
.slide--light{
  background:
    radial-gradient(60% 50% at 86% 0%, rgba(235,159,255,.16), transparent 60%),
    radial-gradient(54% 50% at 0% 100%, rgba(254,206,233,.2), transparent 60%),
    linear-gradient(180deg,#FBFAFE,#F4F2F9) !important;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 50px 110px -64px rgba(84,86,119,.4);
  padding:clamp(40px,5vw,64px) clamp(22px,4vw,52px) !important;
}
.slide--light .slide__head{ border-color:rgba(84,86,119,.1) !important; }
.slide--light .slide__name, .slide--light .slide__title{ color:var(--ink-strong) !important; }
/* breathing room between the trust-bar strip and the Features card below it */
#features{ margin-top:clamp(44px,8vh,96px) !important; }
/* pink keyword inside the feature tile headings (money / rupee / security / goals) */
#features .tile h3 .hl{ color:#C063EC !important; }

.bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:clamp(14px,1.5vw,18px); }
.tile{
  background:rgba(255,255,255,.94) !important; border:1px solid rgba(60,62,90,.09) !important; border-radius:28px !important;
  padding:clamp(22px,2vw,30px) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 24px 50px -32px rgba(84,86,119,.5), 0 2px 6px -3px rgba(84,86,119,.12), var(--glass-hi) !important;
}
.tile:hover{ transform:translateY(-6px); border-color:rgba(155,69,214,.28) !important;
  box-shadow:0 44px 84px -38px rgba(155,69,214,.5), 0 0 0 1px rgba(155,69,214,.1), var(--glass-hi) !important; }
.tile h3{ color:var(--ink-strong) !important; font-weight:800; letter-spacing:-.02em; font-size:clamp(18px,1.7vw,21px); }
.tile p{ color:var(--txt-2) !important; font-size:14px; line-height:1.5; }
.tile__say{ font-size:clamp(20px,2.2vw,28px) !important; font-weight:800 !important; color:var(--ink-strong) !important;
  letter-spacing:-.03em; line-height:1.05; margin-bottom:6px !important; }
.tile__tag{ color:var(--ink-strong) !important; background:rgba(235,159,255,.2) !important; }
.tile__ic{
  background:linear-gradient(135deg,rgba(235,159,255,.26),rgba(254,206,233,.24)) !important;
  color:var(--orchid-deep) !important; border-radius:16px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 12px 24px -14px rgba(199,125,255,.45);
}
.tile--lg .tile__ic{ background:var(--grad-ink) !important; color:#fff !important; }
.tile__metric{ color:var(--orchid-deep) !important; }
.tile__metric::before{ background:var(--grad-soft) !important; }

/* flagship demo + stats */
.tile__demo{ background:linear-gradient(160deg,rgba(248,244,255,.9),#fff) !important; border:1px solid rgba(84,86,119,.07) !important; border-radius:20px !important; }
.bubble{ color:var(--ink-strong) !important; background:#fff !important; border:1px solid rgba(235,159,255,.3) !important;
  box-shadow:0 8px 22px -14px rgba(199,125,255,.5) !important; }
.bubble--ai{ color:#fff !important; background:var(--grad-ink) !important; border:none !important;
  box-shadow:0 12px 26px -14px rgba(84,86,119,.6) !important; }
.tile__wave i{ background:var(--grad-soft) !important; }
.tile__stats div{ background:linear-gradient(160deg,rgba(248,244,255,.9),#fff) !important; border:1px solid rgba(84,86,119,.07) !important; border-radius:16px !important; }
.tile__stats b{ color:var(--ink-strong) !important; font-size:19px; }
.tile__stats small{ color:var(--txt-3) !important; }

/* UPI pay card (supporting tile) */
.tile__pay{ width:100% !important; margin-top:18px; background:linear-gradient(160deg,rgba(248,244,255,.9),#fff) !important;
  border:1px solid rgba(84,86,119,.07) !important; border-radius:18px !important;
  box-shadow:0 16px 32px -24px rgba(199,125,255,.55) !important; }
.tile__payinfo b{ color:var(--ink-strong) !important; }
.tile__payinfo small{ color:var(--txt-3) !important; }
.tile__payamt{ color:var(--ink-strong) !important; }
.tile__paybar{ background:rgba(235,159,255,.2) !important; }
.tile__paybar i{ background:var(--grad-soft) !important; }
.tile__paystatus{ color:var(--green) !important; }

/* insights chart */
.tile__chart i{ background:var(--grad-soft) !important; }
/* security shield */
.tile__shield{ background:var(--grad-ink) !important; color:#fff !important; border-radius:18px !important;
  box-shadow:0 18px 36px -18px rgba(84,86,119,.55) !important; }
/* savings goal */
.tile__goal{ background:rgba(235,159,255,.2) !important; margin-top:10px; }
.tile__goal span{ background:var(--grad-soft) !important; }

/* flagship — more dominant */
.tile--lg{ padding:clamp(26px,2.4vw,38px) !important;
  background:linear-gradient(165deg,#ffffff 0%,#FBF6FF 100%) !important;
  box-shadow:0 34px 72px -38px rgba(84,86,119,.55), 0 2px 8px -3px rgba(84,86,119,.14), var(--glass-hi) !important; }

/* readable micro labels */
.tile__metric{ font-size:12px !important; font-weight:700 !important; letter-spacing:.01em; }

/* micro details — tiny activity / data states (glassy) */
.tile__live{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block;
  box-shadow:0 0 0 4px rgba(43,191,150,.16); animation:livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse{ 50%{ box-shadow:0 0 0 6px rgba(43,191,150,.05); } }
.tile__mini{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:16px;
  padding:11px 14px; border-radius:14px; background:rgba(248,244,255,.72); border:1px solid rgba(84,86,119,.08); }
.tile__mini span{ font-size:11.5px; font-weight:600; color:var(--txt-3); }
.tile__mini b{ font-family:var(--num); font-size:15px; font-weight:800; color:var(--ink-strong); letter-spacing:-.01em; }
.tile__mini em{ font-style:normal; font-size:11px; font-weight:700; color:var(--green); margin-left:4px; }
.tile__shieldrow{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.tile__shieldrow .tile__shield{ margin-top:0 !important; }
.tile__status{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--green);
  background:rgba(43,191,150,.12); border:1px solid rgba(43,191,150,.22); padding:7px 13px; border-radius:20px; }
.tile__status i{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.tile__goalmeta{ display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; }
.tile__goalmeta span{ font-size:12px; font-weight:600; color:var(--txt-3); }
.tile__goalmeta b{ font-family:var(--num); font-size:16px; font-weight:800; color:var(--ink-strong); }

/* ---- bento alignment polish: balanced 2-line titles, no awkward gaps ---- */
.tile h3{ text-wrap:balance; }
/* flagship: anchor the stat trio to the base so the tile fills evenly */
.tile--lg .tile__stats{ margin-top:auto; }
/* goals: tighter spacing for the second bar; keep projection on one line */
.tile__goalmeta + .tile__goal{ margin-top:8px; }
.tile__goal + .tile__goalmeta{ margin-top:14px; }
.uproj{ flex-wrap:nowrap; margin-top:14px; }
.uproj span{ white-space:nowrap; }
.uproj b{ white-space:nowrap; }

/* ---------------- footer ---------------- */
.slide--thanks{ position:relative; overflow:hidden; padding-top:clamp(80px,12vh,150px) !important; }
.thanks__watermark{ position:absolute; z-index:0; left:50%; top:54%; transform:translate(-50%,-50%);
  width:min(80vw,640px); opacity:.08; filter:blur(3px); pointer-events:none; animation:luxFloatB 22s ease-in-out infinite; }
.thanks{ position:relative; z-index:1; }
.thanks__chip{ position:absolute; z-index:2; top:8%; right:11%; display:flex; align-items:center; gap:10px;
  padding:11px 15px 11px 11px; border-radius:16px; text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.68)); border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 28px 56px -30px rgba(84,86,119,.42), var(--glass-hi); animation:finFloat 6.5s ease-in-out infinite; }
.thanks__chip-ic{ width:36px; height:36px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#2bbf96,#1ea37e); }
.thanks__chip-ic svg{ width:19px; height:19px; stroke-width:2.1; }
.thanks__chip small{ display:block; font-size:10.5px; font-weight:600; color:var(--txt-3); }
.thanks__chip b{ display:block; font-family:var(--num); font-size:14.5px; font-weight:800; color:var(--ink-strong); letter-spacing:-.01em; margin-top:1px; }
@media (max-width:980px){ .thanks__chip{ display:none; } }
/* 2× larger, brought in front and slightly overlapping the title below */
.thanks__logo{ width:clamp(192px,24vw,256px) !important; height:auto; position:relative; z-index:3;
  margin-bottom:-26px !important;
  filter:saturate(1.05) drop-shadow(0 26px 50px rgba(235,159,255,.55)) !important; }
.thanks__big{ color:var(--ink-strong) !important; font-size:clamp(52px,9vw,116px) !important; line-height:.96 !important; letter-spacing:-.045em !important; }
.thanks__big .serif{ background-image:var(--grad-text) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; }
.thanks__sub{ color:var(--txt-2) !important; white-space:normal !important; max-width:none; margin-top:24px !important; }
.thanks__cta{ margin-top:34px !important; }
.thanks__card{ margin-top:38px !important; background:rgba(255,255,255,.66) !important; border:1px solid rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-card), var(--glass-hi) !important; }
.thanks__card small{ color:var(--txt-3) !important; }
.thanks__card b{ color:var(--ink-strong) !important; }
.thanks__card b span{ background-image:var(--grad-text) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; }
.thanks__card-arr{ stroke:var(--txt-3) !important; }
.thanks__card:hover .thanks__card-arr{ stroke:var(--orchid-deep) !important; }
/* credit as a black pill button — "Designed by" white, "Shashwat" pink */
.thanks__note{ display:inline-flex; align-items:center; align-self:center; gap:0;
  margin-top:34px !important; padding:11px 22px; border-radius:30px;
  background:linear-gradient(140deg,#26273a,#141420) !important; color:#ffffff !important;
  font-size:14px !important; font-weight:800 !important; letter-spacing:-.005em;
  box-shadow:0 20px 38px -16px rgba(18,16,28,.75), inset 0 1px 0 rgba(255,255,255,.12); }
.thanks__note span{ margin-left:5px; background-image:linear-gradient(120deg,#FECEE9,#EB9FFF) !important;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---------------- buttons ---------------- */
.btn{ padding:14px 24px; }
.btn svg{ width:17px; height:17px; }
/* hero CTA — balanced equal-width pair, nudged right */
.hero__cta .btn{ padding:14px 30px; min-width:152px; justify-content:center; }
.btn--pri{ background:var(--grad-ink) !important; color:#fff !important;
  box-shadow:0 18px 36px -16px rgba(84,86,119,.6), 0 0 0 1px rgba(235,159,255,.12) !important; }
.btn--pri:hover{ transform:translateY(-2px); box-shadow:0 24px 46px -16px rgba(84,86,119,.75) !important; }
.btn--ghost{
  background:rgba(255,255,255,.66) !important; border:1px solid rgba(255,255,255,.9) !important; color:var(--ink-strong) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--glass-hi), 0 14px 30px -22px rgba(84,86,119,.4) !important;
}
.btn--ghost:hover{ border-color:rgba(235,159,255,.5) !important; transform:translateY(-2px); }

/* keep brand mark / dot on palette */
.avatar--me{ background:#b6b8c4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='%23ffffff'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0Z' fill='%23ffffff'/%3E%3C/svg%3E") 50% 60% / 96% no-repeat !important;
  color:transparent !important; font-size:0 !important; overflow:hidden;
  border-radius:50% !important; border:1.5px solid #111 !important; }
/* smaller circular profile pic in the home topbar */
.topbar__user .avatar--me{ width:38px !important; height:38px !important; border-radius:50% !important; }
/* one-line greeting next to the dp */
.topbar__user .hello{ display:inline-flex; align-items:baseline; white-space:nowrap; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.topbar__user .hello__name{ color:#13131a; }
.topbar__user .hello__sub{ color:rgba(28,28,38,.55); font-weight:700; }

/* ---------------- motion polish ---------------- */
.reveal{ transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .chip3--bal{ left:0; top:45%; }
  .chip3--save{ right:0; top:5%; }
}
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ margin:0 auto; }
  .hero__cta, .hero__proof{ justify-content:center; }
  .hero__lead b{ display:inline; }
  .chip3{ display:none !important; }
  .hero__watermark{ width:min(90%,440px); opacity:.08; }
  .compare{ grid-template-columns:1fr; }
  .cmp__arrow{ transform:rotate(90deg); justify-self:center; }
  /* size tiles to their own content once stacked — the desktop `grid-auto-rows:1fr`
     forced every tile to the tallest tile's height, leaving big empty voids. */
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .tile--lg{ grid-column:span 2; grid-row:auto; }
  .nav__links{ display:none; }
  .finviz{ opacity:.1; }
}
@media (max-width:560px){
  .nav{ position:sticky; padding:10px 14px; }
  .hero{ padding-top:96px; }
  .hero__title{ font-size:clamp(38px,12vw,52px) !important; }
  .bento{ grid-template-columns:1fr; }
  .tile--lg{ grid-column:auto; }
  .thanks__cta{ flex-direction:column; align-items:stretch; }
  .thanks__cta .btn{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .ie-grain{ display:none; }
  .site::before, .lux-orb, .finviz, .proto-frame, .chip3, .hero__watermark, .thanks__watermark, .cmp__arrow,
  .hero__card, .lockcard{ animation:none !important; }
  .floater:hover, .tile:hover, .cmp:hover{ transform:none; }
}

/* ============================================================
   IN-PHONE APP — LIGHT MODE OVERRIDES (same palette)
   ============================================================ */
.phone{ color:var(--txt);
  background:var(--screen) !important;
  border:1px solid rgba(155,69,214,.55) !important;
  box-shadow:
    0 0 0 5px #9B45D6,
    0 0 0 6px rgba(199,125,255,.65),
    0 0 0 7px rgba(155,69,214,.3),
    0 48px 96px -34px rgba(155,69,214,.45) !important;
}
.phone__notch{ background:#1c1d2b !important; }
.phone .statusbar{ color:#9B45D6 !important; }
.phone .si{ opacity:1; color:#9B45D6 !important; }

/* soften heavy dark glass shadows for light surfaces */
.phone .txn,.phone .cat,.phone .acctrow,.phone .menu li,.phone .insum,.phone .ovcard,.phone .score,
.phone .spendrings,.phone .paysrc,.phone .actsum>div,.phone .excard,.phone .exmeta,.phone .notif,
.phone .cardctrl__item,.phone .goal,.phone .sendto,.phone .searchbox,.phone .scanbar__id,.phone .rewards,
.phone .fseg,.phone .cmsg--ai,.phone .iconbtn,.phone .networth,.phone .aitip,.phone .suggest,
.phone .ovchips,.phone .chip,.phone .quick__item,.phone .exrate,.phone .chatbar,.phone .acctrow__ic,
.phone .txn__ic,.phone .cat__ic,.phone .notif__ic{
  box-shadow:var(--glass-hi), 0 14px 30px -24px rgba(84,86,119,.4) !important;
}

/* balance card / networth — violet→slate, white text (contrast) */
.balcard{ box-shadow:0 24px 48px -24px rgba(84,86,119,.5) !important; }
.balcard__amount{ color:#fff !important; }
.balcard__meta{ justify-content:flex-end !important; }
.balcard__chip{ color:#fff !important; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.32); padding:5px 12px; border-radius:20px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* linked-account mini cards → colourful, realistic 3D credit cards */
.acct{ color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -12px 24px rgba(0,0,0,.22),
    0 8px 16px -6px rgba(0,0,0,.4),
    0 26px 44px -22px rgba(0,0,0,.5) !important;
  transform:perspective(820px) rotateX(5deg); }
.acct:active{ transform:perspective(820px) rotateX(5deg) scale(.97); }
/* per-bank colour gradient blended with a white gloss */
.acct[data-acct="0"]{ background:
    radial-gradient(42% 40% at 86% 6%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(150deg,#7e32c4 0%,#9B45D6 52%,#C77DFF 100%) !important; }
.acct[data-acct="1"]{ background:
    radial-gradient(42% 40% at 86% 6%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(150deg,#9B45D6 0%,#C063EC 52%,#E0A6F0 100%) !important; }
.acct[data-acct="2"]{ background:
    radial-gradient(42% 40% at 86% 6%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(150deg,#6E4FA8 0%,#9156D8 52%,#C0A6F0 100%) !important; }
/* bank name → glass box (top-left) */
.acct__brand{ align-self:flex-start !important; display:inline-flex; align-items:center;
  font-size:12px !important; font-weight:800 !important; color:#fff !important;
  background:rgba(18,10,38,.3); border:1px solid rgba(255,255,255,.3);
  padding:3px 10px; border-radius:9px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* golden EMV chip → top-right */
.acct__chip{ position:absolute !important; top:14px; right:14px; align-self:auto !important;
  width:34px !important; height:25px !important; border-radius:6px !important;
  background:linear-gradient(135deg,#fbe6a8,#d9b25c 55%,#b8923f) !important;
  box-shadow:inset 0 0 0 1px rgba(120,80,10,.55), inset 0 1px 1px rgba(255,255,255,.55) !important; }
.acct__chip::before{ content:""; position:absolute; inset:0; border-radius:6px;
  background:
    linear-gradient(to right, transparent 46%, rgba(86,58,12,.55) 46% 54%, transparent 54%),
    linear-gradient(to bottom, transparent 42%, rgba(86,58,12,.55) 42% 58%, transparent 58%); }
.acct__chip::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:11px;
  transform:translate(-50%,-50%); border:1px solid rgba(86,58,12,.6); border-radius:3px; }
/* account number → grey */
.acct__foot span:last-child{ font-family:var(--num); letter-spacing:.12em; font-size:11px;
  color:rgba(255,255,255,.6) !important; }
.networth{ box-shadow:0 22px 46px -24px rgba(84,86,119,.5) !important; }

/* white line-icon illustrations -> orchid ink on light */
.phone .txn__ic,.phone .cat__ic,.phone .notif__ic,.phone .goal__ic,.phone .menu__ic,
.phone .rewards__ic,.phone .acctrow__ic--plain{ color:var(--pri) !important; }

/* tabbar — light glass */
.phone .tabbar{ background:rgba(255,255,255,.82) !important; border:1px solid rgba(60,62,90,.1) !important;
  box-shadow:0 18px 40px -16px rgba(84,86,119,.32), var(--glass-hi) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); }
.phone .tab svg{ color:var(--txt-3) !important; }
.phone .tab.is-on{ background:rgba(155,69,214,.14) !important; }
.phone .tab.is-on svg{ color:var(--pri) !important; }

/* linked-account cards -> light */
.phone .acct{ color:var(--txt) !important;
  background:linear-gradient(150deg,#FFFFFF 0%,#F2EFFA 100%) !important;
  border:1px solid rgba(60,62,90,.1) !important;
  box-shadow:var(--glass-hi),0 16px 34px -24px rgba(84,86,119,.32) !important; }
.phone .acct::after{ background:radial-gradient(75% 60% at 88% 6%, rgba(235,159,255,.18), transparent 55%) !important; }
.phone .acct__foot{ color:var(--txt-2) !important; }
.phone .acct__chip{ background:linear-gradient(135deg,#FCE9A8,#E1B468) !important; }
.phone .acct.is-on{ border-color:var(--line-2) !important;
  box-shadow:var(--glass-hi),0 0 0 1px var(--line-2),0 18px 36px -20px rgba(155,69,214,.4) !important; }
.phone .acct.is-on::after{ background:radial-gradient(75% 60% at 88% 6%, rgba(155,69,214,.2), transparent 55%) !important; }

/* bank cards — palette gradients */
.phone .bankcard--violet{ background:linear-gradient(140deg,#C77DFF 0%,#9B45D6 55%,#6E27B8 100%) !important; }
.phone .bankcard--dark{ background:linear-gradient(140deg,#54507f 0%,#3f4061 60%,#2a2b40 100%) !important; }

/* coloured icons / avatars -> palette family */
.phone .acctrow__ic--violet{ background:linear-gradient(140deg,#C77DFF,#9B45D6) !important; }
.phone .acctrow__ic--blue{ background:linear-gradient(140deg,#9aa0f0,#6E5BC0) !important; }
.phone .acctrow__ic--green{ background:linear-gradient(140deg,#37c9a6,#1ba37c) !important; }
.phone .avatar--a{ background:linear-gradient(140deg,#EB9FFF,#C063EC) !important; }
.phone .avatar--b{ background:linear-gradient(140deg,#9aa0f0,#6E5BC0) !important; }
.phone .avatar--c{ background:linear-gradient(140deg,#FECEE9,#EB9FFF) !important; }
.phone .avatar--d{ background:linear-gradient(140deg,#C77DFF,#7E63C0) !important; }
.phone .avatar--e{ background:linear-gradient(140deg,#9B45D6,#6E27B8) !important; }

/* progress / ring tracks visible on light */
.phone .score__ring{ background:conic-gradient(var(--pri) calc(var(--v,78)*1%), #E7E4F0 0) !important; }
.phone .sring__ring{ background:conic-gradient(var(--c,var(--pri)) var(--p), #E7E4F0 0) !important; }
.phone .bars .bar{ background:#E9E6F2 !important; }
.phone .cat__bar,.phone .goal__bar,.phone .tile__paybar{ background:#E9E6F2 !important; }

/* AI tips + unread notifications -> orchid */
.phone .aitip__ic{ background:linear-gradient(140deg,#C77DFF,#9B45D6) !important; border-color:var(--line-2) !important; color:#fff !important;
  display:grid !important; place-items:center !important; }
.phone .aitip__ic svg{ color:#fff !important; display:block; margin:auto; }
.phone .aitip--ghost .aitip__ic{ background:var(--card-2) !important; color:var(--pri) !important; border-color:var(--line) !important; }
.phone .notif.is-unread{ background:linear-gradient(140deg, rgba(235,159,255,.16), var(--card)) !important; }
.phone .notif.is-unread::after{ background:var(--pri-2) !important; }
.phone .suggest__ic,.phone .chat__ai,.phone .chatsend,.phone .exswap{ box-shadow:0 10px 22px -12px rgba(155,69,214,.6); }

/* immersive screens -> light */
.phone .screen--ai{ background:transparent !important; }
.phone .screen--scan{ background:#F2F0FA !important; }
.phone .scanframe{ background:rgba(60,62,90,.04) !important; border-color:rgba(60,62,90,.12) !important; }
/* mock UPI QR sitting inside the scan frame so the target reads as complete */
.phone .scanframe__qr{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; padding:13px; background:#fff; border-radius:18px;
  box-shadow:0 10px 24px -12px rgba(60,40,120,.4), 0 0 0 1px rgba(60,62,90,.06); }
.phone .scanframe__qr svg{ width:100%; height:100%; display:block; }
.phone .scanframe__laser{ z-index:2; }
.phone .back--light{ background:rgba(60,62,90,.06) !important; border-color:rgba(60,62,90,.12) !important; }
.phone .back--light svg{ color:var(--txt) !important; }
.phone .ai__wave{ background:linear-gradient(120deg, rgba(199,125,255,.16), rgba(235,159,255,.08)) !important; }
.phone .ai__say{ color:var(--txt-2) !important; }
.phone .ai__say b{ color:var(--ink-strong) !important; }

/* exchange + chat surfaces */
.phone .exrow{ background:#F2F0FA !important; }
.phone .excur{ background:var(--card-2) !important; }
.phone .exswap{ border:3px solid #fff !important; }
.phone .cmsg--ai{ color:var(--txt) !important; }
.phone .toast{ box-shadow:0 16px 40px -12px rgba(84,86,119,.45) !important; }

/* ----- lock screen: logo + name, then glassy PIN box ----- */
.screen--splash{ background:transparent !important;
  justify-content:center !important; padding:20px 16px 22px !important; gap:0 !important; }
.splash__spark{ display:none !important; }

.lock__brand{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.lock__logo{ width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(84,86,119,.16)); animation:floaty 3.6s ease-in-out infinite; }
.lock__name{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink-strong); margin-top:13px; line-height:1; }
.lock__name span{ background-image:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* flat PIN area — no glass film/effect over the keypad */
.pinpad{ width:100%; margin-top:22px; padding:4px 2px 2px; border-radius:26px;
  background:transparent; border:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none; }

.pin__label{ text-align:center; font-size:12.5px; font-weight:600; color:var(--txt-2); margin:2px 0 14px; }
.pin{ display:flex; justify-content:center; gap:15px; margin-bottom:16px; }
.pin i{ width:14px; height:14px; border-radius:50%; background:transparent; border:2px solid rgba(60,62,90,.3); transition:.2s; }
.pin i.on{ background:var(--pri); border-color:var(--pri); box-shadow:0 6px 14px -6px rgba(155,69,214,.7); transform:scale(1.08); }

/* one frame holding the keypad + Enter — 3D, frosted/blurry */
.pinframe{ padding:12px; border-radius:24px; border:1.5px solid var(--orchid);
  background:#fbfbfc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -8px rgba(0,0,0,.16); }
.keypad--pin{ margin:0 0 12px; gap:9px; }
.keypad--pin button{ font-family:var(--num); font-size:23px; font-weight:600; color:var(--txt); padding:13px 0; border-radius:16px;
  background:#fff; border:1px solid rgba(60,62,90,.1); box-shadow:var(--glass-hi),0 8px 18px -14px rgba(84,86,119,.35); transition:.12s; }
.keypad--pin button:active{ transform:scale(.95); background:#fff; }
.keypad--pin .keypad__face,.keypad--pin .keypad__del{ background:transparent; border:none; box-shadow:none; color:var(--pri); display:grid; place-items:center; }
.keypad--pin .keypad__face svg,.keypad--pin .keypad__del svg{ width:25px; height:25px; }

.pin__enter{ margin-top:0 !important; }

/* glass box wrapping the "Secured · 256-bit encryption" line */
.splash__secure{ color:var(--txt-2) !important; margin-top:18px !important;
  padding:9px 16px !important; border-radius:30px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:var(--glass-hi), 0 10px 24px -18px rgba(84,86,119,.3); }

/* clean: no tint/glow behind the logo + name */
.lock__brand{ position:relative; z-index:1; }
.lock__brand::before{ content:none; }

/* clean, light keypad — no dark shadow film */
.keypad--pin button{ box-shadow:var(--glass-hi), 0 6px 14px -12px rgba(84,86,119,.28) !important; }

/* ============================================================
   ENRICHMENT — product micro-UI, floaters, ambient depth
   ============================================================ */

/* ---- constant moving background: darker pink / near-black glows ---- */
.lux-orb--d{ width:34vw; height:34vw; left:26vw; top:40vh; opacity:.20;
  background:radial-gradient(circle at 50% 50%, #C24B9A, #7E2A6A 60%, transparent 72%);
  animation:luxFloatB 30s ease-in-out infinite; }
.lux-orb--k{ width:30vw; height:30vw; right:16vw; top:56vh; opacity:.15;
  background:radial-gradient(circle at 50% 50%, #46485f, #1b1c28 62%, transparent 74%);
  animation:luxFloatA 38s ease-in-out infinite reverse; }
/* ambient transaction signal dots (fixed, page-wide) */
.signal{ position:absolute; left:var(--x); top:var(--y); width:6px; height:6px; border-radius:50%;
  background:var(--orchid-deep); opacity:.45; box-shadow:0 0 0 4px rgba(155,69,214,.1);
  animation:sigPulse 3.4s ease-in-out infinite; animation-delay:var(--t,0s); }
@keyframes sigPulse{ 0%,100%{ transform:scale(.7); opacity:.2 } 50%{ transform:scale(1.1); opacity:.55 } }

/* glow removed — was overlaying the phone screen as a pink/purple patch */
.hero__device::after{ content:none; }

/* ---- hero floating chips: AI + savings, 4-corner orbit ---- */
/* balance chip — nudged up & left from mid-phone */
.chip3--bal{ top:37%; left:-9%; }
/* MacBook goal chip — moved to the top-right of the phone */
.chip3--save{ top:4%; right:-5%; animation-delay:.6s; }
.chip3__ic--spark{ background:linear-gradient(140deg,#C77DFF,#9B45D6); }
.chip3__ic--spark svg{ fill:#fff; stroke:#fff; }
.chip3__ring{ position:relative; width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--orchid-deep) var(--p), rgba(84,86,119,.16) 0); }
.chip3__ring::before{ content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; }
.chip3__ring b{ position:relative; font-family:var(--num); font-size:9.5px; font-weight:800; color:var(--ink-strong); }
.chip3 b em{ color:var(--txt-3); font-weight:600; }

/* ---- in-phone balance sparkline ---- */
.balspark{ width:100%; height:26px; margin:4px 0 10px; display:block; }
.balspark path{ fill:none; stroke:rgba(255,255,255,.85); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

/* ---- feature micro-UI primitives ---- */
.uchips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.uchip{ font-size:11px; font-weight:700; color:var(--orchid-deep); background:rgba(235,159,255,.14);
  border:1px solid rgba(235,159,255,.3); padding:5px 11px; border-radius:20px; }
.uchip--ok{ color:#178f6c; background:rgba(43,191,150,.12); border-color:rgba(43,191,150,.26); }
.urow{ display:flex; align-items:center; gap:11px; margin-top:12px; padding:10px 12px; border-radius:14px;
  background:rgba(248,244,255,.72); border:1px solid rgba(84,86,119,.08); }
.urow .avatar{ width:34px; height:34px; border-radius:11px; font-size:11px; }
.urow__m{ flex:1; min-width:0; }
.urow__m b{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-strong); letter-spacing:-.01em; }
.urow__m small{ font-size:10.5px; color:var(--txt-3); }
.urow__amt{ font-family:var(--num); font-size:13px; font-weight:800; color:var(--ink-strong); white-space:nowrap; }
.urow__amt.in{ color:#178f6c; }
.urow__ic{ width:34px; height:34px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--orchid-deep); background:rgba(235,159,255,.16); }
.urow__ic svg{ width:18px; height:18px; }
.urow__ok{ width:18px; height:18px; flex:none; color:#178f6c; stroke-width:2.6; }
.ustatus{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ulegend{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.ulegend span{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--txt-2); }
.ulegend i{ width:9px; height:9px; border-radius:3px; background:var(--c); flex:none; }
.ulegend b{ margin-left:auto; font-family:var(--num); font-size:12.5px; font-weight:800; color:var(--ink-strong); }
.bubble__ok{ width:14px; height:14px; display:inline-block; vertical-align:-2px; color:#fff; stroke-width:3; margin-right:1px; }
.bubble--ai em{ font-style:normal; color:#cdffe9; font-weight:700; }
/* savings milestones + projection */
.tile__goal{ position:relative; }
.umile{ position:absolute; top:0; bottom:0; width:2px; z-index:2; background:rgba(84,86,119,.34); }
.umile.is-done{ background:rgba(255,255,255,.85); }
.tile__live--v{ background:var(--orchid-deep); box-shadow:0 0 0 4px rgba(155,69,214,.16); }
.uproj{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.uproj span{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; color:var(--orchid-deep); }
.uproj b{ font-family:var(--num); font-size:10.5px; font-weight:700; color:var(--txt-3); text-align:right; }

/* ---- problem: fragmented (before) vs unified dashboard (after) ---- */
.frag{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:2px 0 22px; }
.frag__app{ position:relative; padding:15px 12px 15px 28px; border-radius:14px; font-size:12px; font-weight:700; color:var(--txt-2);
  background:rgba(247,247,251,.9); border:1px dashed rgba(84,86,119,.24); }
/* mismatched colours per app = fragmented / cluttered banking */
.frag__app::after{ content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:3px; background:currentColor; }
.frag__app--c1{ color:#3a64c8; background:rgba(90,140,255,.14); border-color:rgba(90,140,255,.45); }
.frag__app--c2{ color:#3a64c8; background:rgba(90,140,255,.14); border-color:rgba(90,140,255,.45); }
.frag__app--c3{ color:#3a64c8; background:rgba(90,140,255,.14); border-color:rgba(90,140,255,.45); }
.frag__app--c4{ color:#3a64c8; background:rgba(90,140,255,.14); border-color:rgba(90,140,255,.45); }
.frag__app--off{ opacity:.7; }
.frag__pend{ position:absolute; top:8px; right:8px; font-style:normal; font-size:8px; font-weight:800; letter-spacing:.03em;
  color:#b07d22; background:rgba(240,180,60,.16); border:1px solid rgba(240,180,60,.32); padding:2px 6px; border-radius:9px; }
.frag__dot{ position:absolute; top:11px; right:11px; width:7px; height:7px; border-radius:50%; background:var(--red); }
.udash{ margin:2px 0 22px; padding:16px; border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.68));
  border:1px solid rgba(255,255,255,.92); box-shadow:var(--glass-hi),0 18px 40px -28px rgba(155,69,214,.4); }
.udash__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.udash__top small{ display:block; font-size:10px; font-weight:600; color:var(--txt-3); }
.udash__top b{ display:block; margin-top:3px; font-family:var(--num); font-size:22px; font-weight:800; color:var(--ink-strong); letter-spacing:-.02em; }
.udash__top b em{ font-style:normal; font-size:11px; font-weight:700; color:var(--green); margin-left:5px; }
.udash__ai{ display:inline-flex; align-items:center; gap:6px; flex:none; font-size:10px; font-weight:800; color:#fff; background:var(--grad-soft); padding:5px 11px; border-radius:20px;
  box-shadow:0 10px 22px -12px rgba(155,69,214,.7); }
.udash__ai i{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
/* unified-balance trend line */
.udash__spark{ display:block; width:100%; height:38px; margin:14px 0 4px; }
.udash__sparkline{ fill:none; stroke:var(--orchid-deep); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.udash__acts{ display:flex; gap:8px; margin-top:12px; }
.udash__acts span{ flex:1; text-align:center; font-size:12px; font-weight:700; color:var(--ink-strong); padding:9px 4px; border-radius:11px;
  background:rgba(235,159,255,.14); border:1px solid rgba(235,159,255,.28); }
.udash__ok{ color:#178f6c !important; background:rgba(43,191,150,.12) !important; border-color:rgba(43,191,150,.26) !important;
  display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.udash__ok svg{ width:14px; height:14px; stroke-width:2.6; }

/* ---- footer floaters: growth / security / goal ---- */
.thanks__chip--sec{ top:15%; left:7%; right:auto; bottom:auto; animation-delay:1.2s; }
.thanks__chip--goal{ top:15%; right:7%; left:auto; bottom:auto; animation-delay:.7s; }
.thanks__chip-ic--v{ background:linear-gradient(140deg,#C77DFF,#9B45D6) !important; }
.thanks__chip-ic--p{ background:linear-gradient(140deg,#9B45D6,#6E27B8) !important; }
/* growth-stat chip visuals (sparkline · bars · ring) */
.thanks__spark{ width:52px; height:22px; display:block; flex:none; margin-left:2px; }
.thanks__spark path{ fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.thanks__bars{ display:flex; align-items:flex-end; gap:3px; width:40px; height:30px; flex:none; }
.thanks__bars i{ flex:1; height:var(--h); border-radius:3px; background:linear-gradient(160deg,#C063EC,#EB9FFF); }
.thanks__ring{ position:relative; width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(#C063EC var(--p), rgba(84,86,119,.16) 0); }
.thanks__ring::before{ content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; }
.thanks__ring b{ position:relative; font-family:var(--num); font-size:9.5px; font-weight:800; color:var(--ink-strong); }

/* ============================================================
   HERO · product feature boxes (replace plain stat tiles)
   1 Expense track · 2 Instant payments · 3 Saving help
   ============================================================ */
.hero__feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; max-width:540px; }
.hfeat{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:128px; padding:13px 12px 10px; border-radius:18px;
  background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 20px 44px -30px rgba(84,86,119,.42), var(--glass-hi);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.hfeat:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -30px rgba(155,69,214,.5), var(--glass-hi); }
.hfeat__lbl{ display:block; width:100%; font-size:13.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink-strong); white-space:nowrap; }
.hfeat--center{ align-items:center; text-align:center; }
/* nested frosted panel that holds each box's visual */
.hfeat__box{ width:100%; flex:none; height:78px; display:flex; align-items:center; justify-content:center;
  margin:6px 0 5px; padding:7px; border-radius:13px;
  background:rgba(255,255,255,.46); border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 14px -10px rgba(84,86,119,.28); }

/* 1 · expense graph */
.hfeat__chart{ flex:1; width:100%; display:flex; align-items:flex-end; margin:0; }
.hfeat__graph{ width:100%; height:42px; display:block; overflow:visible; }
.hfeat__down{ font-style:normal; font-size:9.5px; font-weight:800; color:#e5556e; margin-left:4px; }
.hfeat__warnband{ fill:rgba(255,107,129,.16); }
.hfeat__line{ fill:none; stroke:var(--orchid-deep); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.hfeat__warn{ fill:none; stroke:#ff5670; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.hfeat__peak{ fill:#ff5670; stroke:#fff; stroke-width:1.4; animation:peakPulse 1.8s ease-in-out infinite; }
@keyframes peakPulse{ 50%{ opacity:.4; } }
.hfeat__num{ font-family:var(--num); font-size:12.5px; font-weight:800; color:var(--ink-strong); letter-spacing:-.02em; margin-top:6px; }
.hfeat__num--save{ display:inline-flex; align-items:center; justify-content:center; gap:0; color:var(--orchid-deep); font-size:11.5px; }
/* AI-style badge for the savings suggestion */
.hfeat__ai{ font-size:7.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--grad-soft);
  padding:2px 5px; border-radius:6px; margin-right:6px; box-shadow:0 4px 10px -5px rgba(155,69,214,.7); }

/* 2 · blinking QR — crisp SVG, real finder patterns, black + pink accents */
/* square frame hugging a big QR (only the frame is square, not the whole card) */
.hfeat--center .hfeat__box{ aspect-ratio:1/1; height:auto; width:100%; max-width:120px; margin:6px auto 5px; padding:3px; }
.qr{ position:relative; width:100%; height:100%; aspect-ratio:1/1; margin:0; border-radius:11px; background:#fff;
  border:1px solid rgba(39,40,56,.1); padding:5px;
  box-shadow:var(--edge-hi), 0 6px 14px -10px rgba(84,86,119,.35); }
.qr__svg{ width:100%; height:100%; display:block; }
.qr__fo{ fill:none; stroke:#272838; stroke-width:5; }
.qr__fi{ fill:#272838; stroke:none; }
.qr__fo--p{ stroke:#9B45D6; }
.qr__fi--p{ fill:#9B45D6; }
.qr__m rect{ fill:#272838; stroke:none; }
.qr__m--p rect{ fill:#C77DFF; stroke:none; }
@keyframes qrBlink{
  0%,100%{ opacity:1; }
  6%{ opacity:.2; } 12%{ opacity:1; }       /* blink 1 */
  20%{ opacity:.2; } 26%{ opacity:1; }      /* blink 2 */
}
.hfeat__pill{ align-self:center; font-size:10px; font-weight:800; letter-spacing:.02em; color:#fff;
  background:var(--grad-soft); padding:3px 11px; border-radius:20px; }

/* 3 · saving help — unused auto-payments to remove */
.autopays{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; margin:6px 0 5px; }
.autopay{ display:flex; align-items:center; gap:8px; }
.autopay__dot{ width:8px; height:8px; border-radius:3px; flex:none; background:#9B45D6; }
.autopay__dot--2{ background:#3a64c8; }
.autopay__dot--3{ background:#2bbf96; }
.autopay u{ flex:1; height:5px; border-radius:3px; background:rgba(84,86,119,.16); }
.autopay__x{ position:relative; width:13px; height:13px; flex:none; border-radius:50%; background:rgba(255,107,129,.16); }
.autopay__x::before,.autopay__x::after{ content:""; position:absolute; left:50%; top:50%; width:7px; height:1.6px; border-radius:2px; background:#e5556e; }
.autopay__x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.autopay__x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

@media (max-width:980px){ .hero__feats{ margin-inline:auto; } }
@media (max-width:560px){
  .hero__feats{ gap:8px; }
  .hfeat{ min-height:112px; padding:11px 10px; }
  .slide__title--solo{ white-space:normal; }
}

/* ============================================================
   FINAL POLISH PASS — premium refinement layer (no redesign)
   Layered depth · richer glass · unified hover · expensive motion
   Same layout / palette / type / copy. Everything restrained.
   ============================================================ */

/* --- layered, soft floating shadows (close + mid + ambient) + top-edge light --- */
:root{
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.05);
  --elev-card: 0 1px 2px rgba(84,86,119,.04), 0 10px 22px -14px rgba(84,86,119,.16), 0 30px 60px -32px rgba(84,86,119,.34);
  --elev-card-h: 0 2px 4px rgba(84,86,119,.05), 0 18px 34px -16px rgba(155,69,214,.22), 0 48px 92px -38px rgba(155,69,214,.42);
  --elev-float: 0 1px 2px rgba(84,86,119,.05), 0 14px 30px -18px rgba(84,86,119,.2), 0 36px 68px -34px rgba(84,86,119,.4), 0 0 34px -8px rgba(235,159,255,.18);
}

/* richer frosted panels — stronger blur, layered depth, soft top reflection.
   (opacity of surfaces left unchanged) */
.tile{
  -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:var(--edge-hi), var(--elev-card) !important;
}
.tile--lg{ box-shadow:var(--edge-hi), var(--elev-card), 0 0 60px -14px rgba(199,125,255,.2) !important; }
.cmp{
  -webkit-backdrop-filter:blur(14px) saturate(1.45); backdrop-filter:blur(14px) saturate(1.45);
  box-shadow:var(--edge-hi), var(--elev-card) !important;
}
.cmp--after{ box-shadow:var(--edge-hi), var(--elev-card), 0 0 70px -16px rgba(199,125,255,.3) !important; }
.chip3, .hfeat, .thanks__chip{
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:var(--edge-hi), var(--elev-float) !important;
}
.nav__links{
  -webkit-backdrop-filter:blur(16px) saturate(1.8); backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:var(--edge-hi), 0 18px 40px -20px rgba(84,86,119,.4) !important;
}
.marquee{ -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2); }
.pinpad{ box-shadow:var(--edge-hi), 0 26px 54px -30px rgba(84,86,119,.42) !important; }

/* --- unified hover language: lift -4px · scale 1.01 · deeper layered shadow --- */
.tile, .cmp, .hfeat, .btn{
  transition:transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), border-color .42s ease, background .42s ease;
}
.tile:hover{ transform:translateY(-4px) scale(1.01);
  box-shadow:var(--edge-hi), var(--elev-card-h) !important; }
.cmp:hover{ transform:translateY(-4px) scale(1.006);
  box-shadow:var(--edge-hi), var(--elev-card-h) !important; }
.cmp--after:hover{ transform:scale(1.02) translateY(-4px); }
.hfeat:hover{ transform:translateY(-4px) scale(1.01);
  box-shadow:var(--edge-hi), var(--elev-card-h) !important; }
/* floating widgets keep their drift animation — deepen shadow only (no transform clash) */
.chip3:hover, .thanks__chip:hover{
  box-shadow:var(--edge-hi), var(--elev-float), 0 22px 44px -22px rgba(155,69,214,.4) !important; }

/* --- buttons: tactile lift + light sweep --- */
.btn{ position:relative; overflow:hidden; }
.btn--pri::after{ content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg); opacity:0; }
.btn--pri:hover::after{ opacity:1; animation:btnSweep .85s cubic-bezier(.22,1,.36,1); }
@keyframes btnSweep{ 0%{ left:-65%; } 100%{ left:120%; } }
.btn--pri:hover{ transform:translateY(-2px) scale(1.01);
  box-shadow:0 24px 48px -16px rgba(84,86,119,.7), 0 0 0 1px rgba(235,159,255,.16) !important; }
.btn--ghost:hover{ background:rgba(255,255,255,.82) !important; transform:translateY(-2px) scale(1.005); }

/* --- navigation: smooth colour, soft hover bg, underline reveal --- */
.nav__links a{ position:relative; transition:color .3s ease, background .3s ease; }
.nav__links a::after{ content:""; position:absolute; left:18px; right:18px; bottom:5px; height:2px; border-radius:2px;
  background:var(--grad-soft); transform:scaleX(0); transform-origin:center; opacity:0;
  transition:transform .36s cubic-bezier(.22,1,.36,1), opacity .36s ease; }
.nav__links a:hover{ background:rgba(155,69,214,.06) !important; }
.nav__links a:hover::after{ transform:scaleX(1); opacity:.85; }
.nav__links a.is-active::after{ opacity:0; }

/* --- scroll reveal: fade + 20px rise + slight de-blur, calm 0.8s --- */
.reveal{ filter:blur(7px); will-change:transform, opacity, filter;
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1); }
.reveal.is-in{ filter:blur(0); }

/* --- hero entry narrative: glow → cards → phone → heading → buttons → metrics --- */
@keyframes heroRise{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:none; } }
.hero__cards, .hero__title, .hero__cta, .hero__feats, .hero__device{
  animation:heroRise .9s cubic-bezier(.22,1,.36,1) both; }
.hero__cards{ animation-delay:.14s; }
.hero__device{ animation-delay:.24s; }
.hero__title{ animation-delay:.34s; }
.hero__cta{ animation-delay:.46s; }
.hero__feats{ animation-delay:.58s; }
/* floating chips fade in last — opacity-only so finFloat drift is untouched */
.chip3{ animation-name:chipFade, finFloat; animation-duration:.8s, 6s;
  animation-timing-function:ease, ease-in-out; animation-iteration-count:1, infinite;
  animation-fill-mode:both, none; animation-delay:.72s, .72s; }
.chip3--save{ animation-delay:.84s, .84s; }
@keyframes chipFade{ from{ opacity:0; } to{ opacity:1; } }

/* --- ambient particles: slower, gentler, almost imperceptible pulsing --- */
.signal{ animation-duration:5.2s !important; }
.finviz{ animation-duration:11s !important; }
.lux-mesh{ animation:meshPulse 14s ease-in-out infinite; }
@keyframes meshPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }

/* --- hero card stack: physical depth, tiny drift, hover tilt (small values) --- */
/* backwards fill so the settled deck can still respond to hover after entry */
.hero__cards{ animation-fill-mode:backwards; transition:transform .55s cubic-bezier(.22,1,.36,1); }
.hero__cards:hover{ transform:perspective(1000px) rotateY(-4deg) rotateX(2deg); }
/* layered shadow + gentle independent drift on the two backing cards = depth separation */
.hcard{ box-shadow:0 2px 4px rgba(84,86,119,.06), 0 16px 30px -18px rgba(84,86,119,.32), 0 40px 72px -40px rgba(84,86,119,.4); }
.hcard--b1{ animation:hcardDriftA 9.5s ease-in-out infinite; }
.hcard--b2{ animation:hcardDriftB 9.5s ease-in-out infinite .4s; }
@keyframes hcardDriftA{ 0%,100%{ transform:translate(15px,-14px) rotate(5.5deg); } 50%{ transform:translate(17px,-17px) rotate(6.1deg); } }
@keyframes hcardDriftB{ 0%,100%{ transform:translate(29px,-27px) rotate(11deg); } 50%{ transform:translate(32px,-31px) rotate(11.8deg); } }

/* --- phone mockup: subtle hardware reflection / edge light catch --- */
.phone::after{ content:""; position:absolute; inset:0; z-index:40; pointer-events:none; border-radius:46px;
  background:linear-gradient(133deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 88%, rgba(255,255,255,.06) 100%);
  mix-blend-mode:screen; }

/* --- problem: benefits reveal sequentially once each card enters --- */
.cmp__pts li{ opacity:0; transform:translateY(8px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.cmp.is-in .cmp__pts li{ opacity:1; transform:none; }
.cmp.is-in .cmp__pts li:nth-child(1){ transition-delay:.14s; }
.cmp.is-in .cmp__pts li:nth-child(2){ transition-delay:.25s; }
.cmp.is-in .cmp__pts li:nth-child(3){ transition-delay:.36s; }
.cmp.is-in .cmp__pts li:nth-child(4){ transition-delay:.47s; }

/* --- respect reduced motion for everything added here --- */
@media (prefers-reduced-motion:reduce){
  .reveal{ filter:none !important; }
  .hero__cards, .hero__title, .hero__cta, .hero__feats, .hero__device, .chip3, .lux-mesh,
  .hcard--b1, .hcard--b2{ animation:none !important; }
  .hero__cards:hover{ transform:none !important; }
  .btn--pri:hover::after{ animation:none !important; opacity:0 !important; }
  .nav__links a::after{ transition:none; }
  .cmp__pts li{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* =====================================================================
   SOFT EDGE GLOW — a dark halo that hugs the shape (dark on the edge →
   dark pink just outside → fades into the empty space). NO hard outline.
   Applied to the letters AND to every box/element that sits on the bg.
   ===================================================================== */
:root{
  --k:18,9,24;          /* near-black, sits right on the edge */
  --pink-d:120,34,168;  /* dark pink, one step out from the black */
  /* glow that traces each letter and fades into the page */
  --glow-text:
    0 0 1px rgba(var(--k),.30),
    0 1px 2px rgba(var(--k),.22),
    0 0 7px rgba(var(--pink-d),.16),
    0 0 15px rgba(var(--pink-d),.08);
  /* soft halo hugging a box's rounded edge — no hard ring, fades out */
  --glow-box:
    0 1px 3px rgba(var(--k),.14),
    0 0 7px rgba(var(--k),.13),
    0 0 15px rgba(var(--pink-d),.15),
    0 0 28px rgba(var(--pink-d),.07);
  --glow-box-h:
    0 2px 6px rgba(var(--k),.18),
    0 0 10px rgba(var(--k),.16),
    0 0 20px rgba(var(--pink-d),.24),
    0 0 38px rgba(var(--pink-d),.12);
}
/* letters: glow follows each glyph */
.hero__title, .slide__title, .thanks__title,
.tile h3, .tile__say, .cmp__title, .cmp h3,
.hfeat__num, .stat b, .tile__stats b, .balcard__amount,
.nav__name span, .hero__title .hl-w{ text-shadow:var(--glow-text); }

/* Features slide: black text should read crisp — drop the dark glow halo */
#features .slide__title,
#features .tile h3,
#features .tile__say,
#features .tile__stats b{ text-shadow:none !important; }

/* Features: up/down % + profit-loss amounts sit in a soft glass pill */
#features .tile__mini em,
#features .urow__amt,
#features .tile__goalmeta b{
  display:inline-flex; align-items:center; font-style:normal;
  padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(84,86,119,.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 1px 3px rgba(84,86,119,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
/* ↓8% inside the dark AI chat bubble — glass pill tuned for a dark surface */
#features .bubble--ai em{
  display:inline-flex; align-items:center; font-style:normal; margin-left:5px;
  padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* trim tile bottoms for a cleaner fit — inner line alignment unaffected */
#features .tile{ padding-bottom:clamp(15px,1.4vw,20px) !important; }
#features .tile--lg{ padding-bottom:clamp(18px,1.8vw,26px) !important; }
/* flagship tagline in the brand pink */
#features .tile__say{ color:#C063EC !important; }
/* flagship stats: numbers in brand pink, labels in black */
#features .tile__stats b{ color:#C063EC !important; }
#features .tile__stats small{ color:var(--ink-strong) !important; }
/* payments tile: nudge the UPI · Success / 24×7 chips down */
#features .tile[data-d="1"] .uchips{ margin-top:16px !important; }

/* 4 side tiles: equal 2×2, bigger */
#features .bento{ grid-auto-rows:minmax(312px,1fr) !important; }
/* mobile: the equal-height 2×2 grid stretched every tile to the tallest one,
   leaving big empty voids once stacked. Size each tile to its own content. */
@media (max-width:980px){ #features .bento{ grid-auto-rows:auto !important; } }
/* flagship: chips moved up under the tagline */
#features .uchips--top{ margin-top:14px !important; margin-bottom:2px !important; }
/* flagship split in two — content on top, empty white panel below (same tile bg) */
#features .tile--lg .tile__metric{ margin-top:16px !important; }
#features .tile__blank{
  flex:1; min-height:196px; margin-top:12px; border-radius:18px;
  padding:17px 16px 18px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(84,86,119,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  display:flex; flex-direction:column;
}
/* Suggestions panel header inside the flagship tile */
#features .tile__blank .sugg__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid rgba(84,86,119,.1);
}
/* pink panel title */
#features .tile__blank .sugg__lbl{
  font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#C063EC;
}
/* rows sit lower in the panel with a bit more breathing room between them */
#features .sugg__list{
  flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; margin-top:14px;
}
#features .tile__blank .urow{ margin-top:0; padding:13px 14px; }
#features .tile__blank .urow .uchip{ flex:none; }
/* bigger, black text inside each suggestion row */
#features .tile__blank .urow__m b{ font-size:14px; color:var(--ink-strong); }
#features .tile__blank .urow__m small{ font-size:12px; color:#1b1c2b; }

/* Features: each savings goal in its own soft glass box */
#features .goalbox{
  padding:12px 13px 15px; border-radius:14px; margin-top:12px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(84,86,119,.12);
  box-shadow:0 1px 3px rgba(84,86,119,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
#features .goalbox .tile__goalmeta{ margin-top:0; }
#features .goalbox .tile__goal{ margin-bottom:0; }
/* goal amount on its own line, current amount bold */
#features .goal__amt{ font-family:var(--num); font-size:13px; font-weight:600; color:var(--txt-2); margin:4px 0 10px; }
#features .goal__amt b{ font-weight:900; color:var(--ink-strong); font-size:15px; }

/* Spending legend → glass rows */
#features .ulegend span{
  padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(84,86,119,.12);
  box-shadow:0 1px 3px rgba(84,86,119,.07), inset 0 1px 0 rgba(255,255,255,.7);
}
#features .ulegend b{ font-weight:900; }

/* spending mini: keep amount + ▼12% on one line, tighten the box */
#features .tile__mini{ align-items:center !important; padding:9px 13px !important; }
#features .tile__mini b{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }

/* cards / boxes / chips sitting on the page background: soft hugging halo */
.tile, .tile--lg, .cmp, .cmp--after, .hcard, .floater,
.chip3, .hfeat, .thanks__chip{
  box-shadow:var(--edge-hi), var(--glow-box) !important;
}
.tile:hover, .cmp:hover, .floater:hover, .hcard:hover, .chip3:hover{
  box-shadow:var(--edge-hi), var(--glow-box-h) !important;
}
/* phone: keep its light bezel rings, swap the outer glow for the dark edge halo
   (applied to the rounded .phone itself, NOT the rectangular wrapper) */
.phone{
  box-shadow:
    0 0 0 5px #ECECF2,
    0 0 0 6px rgba(255,255,255,.92),
    0 0 0 7px rgba(84,86,119,.05),
    0 0 5px rgba(var(--k),.36),
    0 0 11px rgba(var(--k),.26),
    0 0 18px rgba(var(--pink-d),.18) !important;
}

/* =====================================================================
   BACKGROUND PURGE — page canvas = white + light-pink patches only.
   Strips every non-pink ambient shade (slate orbs, periwinkle washes,
   lavender grids/gradients). Element & shadow colours are untouched.
   ===================================================================== */
/* ambient glow field — drop the slate patch, keep the three pink ones */
.site::before{
  background:
    radial-gradient(38% 32% at 14% 8%, rgba(235,159,255,.16), transparent 62%),
    radial-gradient(34% 30% at 88% 6%, rgba(254,206,233,.22), transparent 64%),
    radial-gradient(44% 38% at 82% 92%, rgba(235,159,255,.12), transparent 64%) !important;
}
/* hero wash — swap the periwinkle patch for light pink */
.hero{
  background:
    radial-gradient(34% 42% at 10% 28%, rgba(235,159,255,.22), transparent 64%),
    radial-gradient(30% 36% at 90% 20%, rgba(254,206,233,.26), transparent 64%),
    radial-gradient(42% 42% at 72% 94%, rgba(254,206,233,.16), transparent 64%) !important;
}
/* features panel — pure white base, keep the pink corner patches */
.slide--light{
  background:
    radial-gradient(60% 50% at 86% 0%, rgba(235,159,255,.16), transparent 60%),
    radial-gradient(54% 50% at 0% 100%, rgba(254,206,233,.20), transparent 60%),
    #ffffff !important;
}
/* recolour the grey/periwinkle floating orb to light pink */
.lux-orb--s{
  background:radial-gradient(circle at 50% 50%, #FFE3F1, #FECEE9 64%, transparent 76%) !important;
  opacity:.22 !important;
}
/* remove the slate mesh grid entirely */
.lux-mesh{ display:none !important; }

/* ============================================================
   CUSTOM CURSOR — circular ₹ coin + fading pink/purple trail
   ============================================================ */
html.cursor-on, html.cursor-on *{ cursor:none !important; }
.cur{ position:fixed; top:0; left:0; z-index:99999; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-family:'Figtree','Plus Jakarta Sans',sans-serif; font-weight:800; font-size:14px; line-height:1; color:#fff;
  background:linear-gradient(140deg,#9B45D6,#C77DFF 60%,#EB9FFF); border:1.5px solid rgba(255,255,255,.8);
  box-shadow:0 6px 16px -4px rgba(155,69,214,.7), inset 0 1px 0 rgba(255,255,255,.4);
  pointer-events:none; transform:translate(-50%,-50%);
  transition:transform .16s cubic-bezier(.22,1,.36,1), opacity .25s, background .2s; }
.cur--big{ transform:translate(-50%,-50%) scale(1.55); background:linear-gradient(140deg,#C063EC,#EB9FFF); }
.cur--down{ transform:translate(-50%,-50%) scale(.82); }
.curtrail{ position:fixed; top:0; left:0; z-index:99998; width:11px; height:11px; border-radius:50%;
  pointer-events:none; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(235,159,255,.9), rgba(199,125,255,.55) 60%, transparent 75%);
  animation:curTrailFade .6s ease forwards; }
@keyframes curTrailFade{
  from{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
  to{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
}

/* =====================================================================
   HERO — smaller feature boxes (QR + chart + save) and title moved up
   ===================================================================== */
.hero__copy .eyebrow{ margin-top:0 !important; }
.hero__title{ margin-top:-26px !important; }
.hero__feats{ max-width:498px; gap:18px; margin-top:20px; }
.hfeat{ min-height:92px !important; padding:9px 8px 7px !important; border-radius:13px; }
.hfeat__box{ height:52px !important; }
.hfeat__lbl{ font-size:11px !important; }
.hfeat__num{ font-size:10px !important; margin-top:4px !important; }
.hfeat__graph{ height:29px !important; }
.hfeat__ai{ font-size:7px !important; padding:2px 4px !important; margin-right:5px !important; }

/* QR (Instant pay) box — keep it SQUARE (my smaller-box height must not flatten it)
   and let the QR pattern fill to the edges */
.hfeat--center .hfeat__box{ height:auto !important; aspect-ratio:1/1 !important; width:100%; max-width:90px; margin:5px auto 4px; padding:3px; }
.hfeat--center .qr{ aspect-ratio:1/1; padding:3px; }

/* =====================================================================
   PROBLEM · realign both compare boxes to equal size + give the left
   "Traditional Banking" card a plain, dated old-HTML treatment
   (Times New Roman · thin · black) with blue circular list bullets.
   ===================================================================== */
/* realign — drop the after-card scale offset so both boxes line up evenly */
.compare{ align-items:stretch !important; }
.cmp--after{ transform:none !important; }
.cmp--after:hover{ transform:translateY(-6px) !important; }

/* left box: old plain-HTML text everywhere — serif, thin, black */
.cmp:not(.cmp--after),
.cmp:not(.cmp--after) *{
  font-family:"Times New Roman", Times, serif !important;
  font-weight:400 !important;
  color:#000 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
/* roomier padding so the dated card breathes */
.cmp:not(.cmp--after){ padding:clamp(34px,3.8vw,52px) !important; }
.cmp:not(.cmp--after) .cmp__tag{ font-size:20px !important; margin-bottom:30px !important; }

/* left box list — bigger, well-spaced thin black serif items with blue circular bullets */
.cmp:not(.cmp--after) .cmp__pts{ gap:22px !important; }
.cmp:not(.cmp--after) .cmp__pts li{
  font-size:22px !important; line-height:1.35 !important; font-weight:400 !important; color:#000 !important;
  padding-left:32px !important;
}
.cmp:not(.cmp--after) .cmp__pts li::before{
  content:"" !important; left:0 !important; top:50% !important; transform:translateY(-50%) !important;
  width:12px !important; height:12px !important; border-radius:50% !important;
  background:#000 !important; box-shadow:none !important;
}
.cmp:not(.cmp--after) .cmp__pts li::after{ content:none !important; }

/* frag apps — flat old-web blue boxes: square corners, solid blue, black text */
.cmp:not(.cmp--after) .frag__app,
.cmp:not(.cmp--after) .frag__app--c1,
.cmp:not(.cmp--after) .frag__app--c2,
.cmp:not(.cmp--after) .frag__app--c3,
.cmp:not(.cmp--after) .frag__app--c4{
  background:#000 !important; border:none !important; border-radius:0 !important;
  color:#fff !important; opacity:1 !important; padding:16px 14px !important; font-size:15px !important;
}
.cmp:not(.cmp--after) .frag__app::after,
.cmp:not(.cmp--after) .frag__dot,
.cmp:not(.cmp--after) .frag__pend{ display:none !important; }

/* =====================================================================
   QA FINAL PASS — mobile phone sizing fix + subtle guarded micro-motion
   ===================================================================== */
/* ≤560: the hero prototype phone collapsed to a sliver because
   .phone{width:min(392px,100%)} resolved 100% against a max-content
   .proto-frame. Give the frame + stage a real width so the phone sizes
   correctly and stays centered (fixes clipped lock-screen brand). */
@media (max-width:560px){
  .proto-frame{ width:100% !important; max-width:392px !important; margin-inline:auto !important; }
  .stage{ width:100%; }
  .phone{ width:100% !important; max-width:360px !important; margin-inline:auto !important; }
}

/* subtle, consistent micro-interactions — calm/premium, hover-only */
.thanks__note{ transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease; }
.thanks__note:hover{ transform:translateY(-2px);
  box-shadow:0 26px 46px -16px rgba(18,16,28,.85), inset 0 1px 0 rgba(255,255,255,.16); }
.slide__mark img{ transition:transform .38s cubic-bezier(.22,1,.36,1); }
.slide__mark:hover img{ transform:rotate(-6deg) scale(1.08); }
.uchip{ transition:transform .22s ease, background .22s ease, border-color .22s ease; }
.uchip:hover{ transform:translateY(-1px); background:rgba(235,159,255,.22); border-color:rgba(235,159,255,.45); }

@media (prefers-reduced-motion:reduce){
  .thanks__note:hover, .uchip:hover{ transform:none !important; }
  .slide__mark:hover img{ transform:none !important; }
}

/* ---------------- render performance ----------------
   Skip layout/paint of the below-fold slides until they scroll near the
   viewport. `auto` in contain-intrinsic-size remembers each slide's real
   height after first render, so the scrollbar stays stable. Hero + phone
   prototype are left untouched (they are the fold). */
.slide--light{ content-visibility:auto; contain-intrinsic-size:auto 1400px; }
.slide--problem{ content-visibility:auto; contain-intrinsic-size:auto 1000px; }
.slide--thanks{ content-visibility:auto; contain-intrinsic-size:auto 800px; }

/* =====================================================================
   MOBILE SIMPLIFY & HORIZONTAL-OVERFLOW GUARD
   Loaded last so it wins. Small screens hide decorative / secondary /
   paint-heavy visuals so the phone version stays clean, light and never
   overflows sideways. Everything is HIDDEN (display:none) — no DOM/content
   is removed. Desktop (>600px) is fully untouched.
   ===================================================================== */
/* belt-and-suspenders sideways clip (in addition to .site{overflow-x:hidden}) */
html, body{ overflow-x:hidden; max-width:100vw; }

/* =====================================================================
   PHONE-ONLY APP MODE (≤600px)
   On phones the website IS the app: show only the prototype UI, full-
   screen like a real phone — no nav, no landing copy, no buttons, no
   sections. Nothing is removed from the DOM; the landing is only hidden.
   ===================================================================== */
@media (max-width:600px){
  /* hide the entire landing shell — everything except the phone itself */
  .nav, .marquee, #features, #problem, #thanks, .site-foot,
  .ie-grain, .lux-bg, .aurora,
  .hero__copy, .hero__cards, .hero__watermark, .chip3,
  .signal, .finviz, .proto-frame__corner{ display:none !important; }

  html, body, .site{ margin:0 !important; padding:0 !important; height:100% !important;
    min-height:0 !important; overflow:hidden !important; background:#0d0b14 !important; }

  /* collapse the hero → device chain into one full-viewport app surface */
  .hero{ min-height:0 !important; height:100vh !important; height:100dvh !important;
    padding:0 !important; margin:0 !important; display:block !important; }
  .hero__inner{ display:block !important; height:100vh !important; height:100dvh !important;
    max-width:none !important; margin:0 !important; padding:0 !important; gap:0 !important; }
  .hero__device{ display:block !important; height:100vh !important; height:100dvh !important;
    margin:0 !important; padding:0 !important; transform:none !important; perspective:none !important; }
  .proto-frame{ width:100% !important; max-width:none !important; height:100vh !important; height:100dvh !important;
    margin:0 !important; padding:0 !important; border:none !important; border-radius:0 !important;
    background:transparent !important; box-shadow:none !important; }
  .stage{ width:100% !important; height:100vh !important; height:100dvh !important; }

  /* the phone fills the screen edge-to-edge, shown as-is (status bar, notch,
     screens, floating tab bar) — just without the outer device bezel.
     position:fixed + inset:0 pins it to the viewport, immune to any parent
     width / padding / centering, so the app never shifts or overflows. */
  .phone{ position:fixed !important; top:0 !important; left:0 !important; right:auto !important; bottom:auto !important;
    width:100vw !important; min-width:0 !important; max-width:100vw !important;
    height:100vh !important; height:100dvh !important; margin:0 !important;
    border:none !important; border-radius:0 !important; box-shadow:none !important; z-index:1 !important; }
}