/* ============================================================
   VYRE · The Corridor
   Obsidian world · violet light · Satoshi
   ============================================================ */

:root {
  --obsidian: #0D0D0F;
  --obsidian-2: #101014;
  --graphite: #1E1E24;
  --white: #F5F5F7;
  --grey-1: #C0C2CA;
  --grey-2: #8E9098;
  --line: #2C2C34;
  --violet: #7B5CFF;
  --violet-dim: rgba(123, 92, 255, 0.14);
  --gold: #E7B94E;
  --green: #34D399;
  --font: 'Satoshi', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 4.5vw, 72px);
  --max: 1440px;
}

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

html {
  background: var(--obsidian);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--grey-1);
  background: var(--obsidian);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { color: var(--white); margin: 0; font-weight: 900; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

::selection { background: var(--violet); color: var(--white); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  background: var(--violet); color: var(--white);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ---------- the violet thread (scroll spine) ---------- */
.thread {
  position: fixed; top: 0; left: max(calc((100vw - var(--max)) / 2 - 40px), 18px);
  width: 1px; height: 100vh; z-index: 90;
  background: var(--line);
  pointer-events: none;
}
.thread__fill {
  position: absolute; top: 0; left: -0.5px; width: 2px; height: 100%;
  background: linear-gradient(to bottom, var(--violet), rgba(123, 92, 255, 0.35));
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
.thread__head {
  position: absolute; left: -3.5px; top: calc(var(--progress, 0) * 100%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 12px 2px rgba(123, 92, 255, 0.8);
}
@media (max-width: 900px) { .thread { display: none; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad);
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.nav.is-scrolled {
  background: rgba(13, 13, 15, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 12px;
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: 34px; width: auto; transition: height 0.4s; }
.nav.is-scrolled .nav__logo img { height: 28px; }
@media (max-width: 640px) { .nav__logo img { height: 28px; } }
.nav__links {
  display: flex; gap: clamp(18px, 2.5vw, 36px);
  list-style: none; margin: 0; padding: 0;
}
.nav__links a {
  position: relative;
  text-decoration: none; color: var(--grey-1);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  transition: color 0.25s;
}
.nav__links a:hover { color: var(--white); }
.nav__links a.is-current { color: var(--white); }
.nav__links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  border-radius: 2px; background: var(--violet);
  box-shadow: 0 0 8px rgba(123, 92, 255, 0.7);
}
@media (max-width: 900px) { .nav__links { display: none; } }
/* anchor offset so linked sections land clear of the fixed nav */
#send, #how, #everyday, #grow, #family, #business, #offerings, #faq, #waitlist, #demo { scroll-margin-top: 92px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px;
  font-family: var(--font); font-size: 1.17rem; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.btn--primary {
  background: var(--violet); color: var(--white);
  box-shadow: 0 4px 28px rgba(123, 92, 255, 0.35);
}
.btn--primary:hover {
  background: #8d71ff;
  box-shadow: 0 6px 36px rgba(123, 92, 255, 0.5);
}
.btn--ghost {
  background: transparent; color: var(--white);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--grey-2); }
.btn--small { padding: 9px 20px; font-size: 0.9rem; }

/* ---------- kickers & chapter labels ---------- */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--violet);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.kicker--plain { color: var(--grey-2); }

/* ---------- layout helpers ---------- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { position: relative; padding-block: clamp(90px, 14vh, 180px); }

.display {
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.6rem, 1rem + 7vw, 7rem); }
.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
  color: var(--grey-1); line-height: 1.6;
  max-width: 34em; text-wrap: pretty;
}
.accent-v { color: var(--violet); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: clip;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 40%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(13,13,15,0.62) 0%, rgba(13,13,15,0.26) 38%, transparent 62%),
    linear-gradient(to top, var(--obsidian) 0%, transparent 44%, rgba(13,13,15,0.10) 100%),
    radial-gradient(120% 55% at 50% 100%, rgba(13,13,15,0.42) 0%, transparent 55%);
}
.hero__content {
  position: relative; z-index: 1;
  padding-bottom: clamp(90px, 13vh, 150px);
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(245, 245, 247, 0.18);
  background: rgba(13, 13, 15, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 9px 18px; border-radius: 999px;
  margin-bottom: clamp(24px, 3.5vh, 40px);
}
.hero__kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 10px 1px rgba(123, 92, 255, 0.9);
}
.hero__title { max-width: 11em; }
.hero__title .line { display: block; overflow: clip; }
.hero__sub {
  margin-top: clamp(20px, 3vh, 30px);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--grey-1); max-width: 30em;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 4vh, 44px);
}
.hero__scroll {
  position: absolute; right: var(--pad); bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--grey-2);
}
.hero__scroll::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--grey-2), transparent);
  animation: scrollhint 2.2s var(--ease) infinite;
}
@keyframes scrollhint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* ---------- hero phone (photoreal Samsung render + app UI) ---------- */
.phone {
  position: absolute; z-index: 2;
  right: clamp(20px, 6vw, 128px); bottom: 6vh;
  height: clamp(480px, 68vh, 760px); width: auto;
  animation: phonefloat 7s ease-in-out infinite alternate;
}
.phone__img {
  display: block; height: 100%; width: auto;
  filter: drop-shadow(0 48px 90px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 80px rgba(123, 92, 255, 0.2));
}
@keyframes phonefloat {
  from { transform: translateY(0); }
  to { transform: translateY(-16px); }
}
@media (max-width: 1199px) { .phone { display: none; } }
@media (min-width: 1200px) {
  .hero__content { padding-right: clamp(400px, 37vw, 580px); }
  .hero .display--xl { font-size: clamp(3.4rem, 5.4vw, 6.2rem); }
}
/* (Removed the old CSS-mockup hero-phone rules: .phone__screen / .phone__notch /
   .phone__status / .p-*; the hero phone is now an <img class="phone__img">.
   The interactive #demo prototype below still uses its own .demo-phone* rules.) */

/* floating UI chips over imagery */
.img-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(16, 16, 20, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 245, 247, 0.14);
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 0.8rem; font-weight: 700; color: var(--white);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  animation: chipfloat 6s ease-in-out infinite alternate;
}
.img-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 8px rgba(123, 92, 255, 0.9);
}
.img-chip--green { color: var(--green); }
.img-chip--green::before { background: var(--green); box-shadow: 0 0 8px rgba(52, 211, 153, 0.8); }
.img-chip small { color: var(--grey-2); font-weight: 500; }
@keyframes chipfloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* big editorial marquee band */
.bigmarquee {
  overflow: clip;
  border-block: 1px solid var(--line);
  background: var(--obsidian-2);
  padding-block: clamp(28px, 4vh, 44px);
}
.bigmarquee__track {
  display: flex; gap: 0.6em; width: max-content;
  animation: ticker 30s linear infinite;
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  font-weight: 900; letter-spacing: -0.02em;
  color: var(--white); text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.bigmarquee__track .o {
  color: transparent;
  -webkit-text-stroke: 1px #4a4a56;
}
.bigmarquee__track i { color: var(--violet); font-style: normal; }
@media (prefers-reduced-motion: reduce) {
  .bigmarquee__track { animation: none; }
  .phone { animation: none; }
  .img-chip { animation: none; }
}

/* ---------- bento (the everyday product) ---------- */
.bento {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(48px, 7vh, 84px);
}
.btile {
  background: var(--obsidian-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 40px);
  position: relative; overflow: clip;
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.btile:hover { border-color: rgba(123, 92, 255, 0.4); transform: translateY(-3px); }
.btile h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.01em;
}
.btile p { color: var(--grey-2); font-size: 0.92rem; margin-top: 10px; }
.btile--wide { grid-column: span 2; }
.btile--tall { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; }
.btile--violet {
  background: var(--violet); border-color: var(--violet);
}
.btile--violet h3 {
  color: var(--white);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.08;
  max-width: 12em;
}
.btile--violet p { color: rgba(245, 245, 247, 0.82); font-size: 1rem; }
.btile--violet:hover { border-color: var(--violet); }
.btile p.btile__big {
  font-size: clamp(2.6rem, 2rem + 2.5vw, 4.2rem);
  font-weight: 900; color: var(--white); line-height: 1;
  letter-spacing: -0.03em; margin-bottom: 14px;
}
.btile__big span { color: var(--violet); }
.btile--tall img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.92;
}
.btile--tall::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 13, 15, 0.88) 8%, transparent 55%);
}
.btile--tall h3, .btile--tall p { position: relative; z-index: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 0.8rem; font-weight: 700;
  color: var(--grey-1); background: var(--obsidian);
}
.chips span.hot { color: var(--violet); border-color: rgba(123, 92, 255, 0.45); }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .btile--wide { grid-column: span 2; }
  .btile--tall { grid-row: auto; min-height: 320px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .btile--wide { grid-column: auto; }
}

/* corridor ticker */
.ticker {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(245,245,247,0.09);
  background: rgba(13,13,15,0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: clip;
  padding-block: 14px;
}
.ticker__track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker span {
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey-2); white-space: nowrap;
}
.ticker span b { color: var(--white); font-weight: 700; }
.ticker span i { color: var(--violet); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================
   CHAPTER 01 · THE WEIGHT
   ============================================================ */
.weight { background: var(--obsidian); }
.weight__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 100px); align-items: center;
}
.weight__img {
  position: relative; border-radius: 20px; overflow: clip;
  aspect-ratio: 4 / 5;
}
.weight__img img {
  width: 100%; height: 112%; object-fit: cover;
}
.weight__img::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(245,245,247,0.07);
  border-radius: 20px;
}
@media (max-width: 900px) {
  .weight__grid { grid-template-columns: 1fr; }
  .weight__img { order: -1; max-width: 480px; }
}

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
  margin-top: clamp(60px, 9vh, 110px);
}
.stat {
  background: var(--obsidian);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
}
.stat__num {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  font-weight: 900; color: var(--white); letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat__num .accent-v { color: var(--violet); }
.stat__label { margin-top: 10px; color: var(--grey-2); font-size: 0.92rem; }
.stat__src { margin-top: 6px; color: var(--grey-2); opacity: 0.6; font-size: 0.72rem; letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

/* ============================================================
   CHAPTER 02 · THE SEND (scroll-scrubbed journey)
   ============================================================ */
.send {
  position: relative;
  background: var(--obsidian-2);
  border-block: 1px solid var(--line);
  overflow: clip;
}
.send__bg {
  position: absolute; inset: 0; opacity: 0.62; pointer-events: none;
}
.send__bg img { width: 100%; height: 100%; object-fit: cover; }
.send__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 95% at 50% 44%, transparent 55%, var(--obsidian-2) 97%);
}
.send__head { position: relative; text-align: center; max-width: 780px; margin-inline: auto; }
.send__head .kicker { justify-content: center; }

.journey {
  position: relative;
  max-width: 760px; margin-inline: auto;
  margin-top: clamp(60px, 9vh, 110px);
  padding-block: 10px;
}
.journey__line {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-0.5px);
  width: 1px; background: var(--line);
}
.journey__line-fill {
  position: absolute; inset: 0; width: 100%;
  background: linear-gradient(to bottom, var(--violet) 80%, var(--green));
  transform-origin: top; transform: scaleY(var(--draw, 0));
  box-shadow: 0 0 14px rgba(123, 92, 255, 0.55);
}
.checkpoint {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  padding-block: clamp(34px, 6vh, 64px);
}
.checkpoint__dot {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--obsidian); border: 2px solid var(--line);
  transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
.checkpoint.is-lit .checkpoint__dot {
  border-color: var(--violet); background: var(--violet);
  box-shadow: 0 0 16px 2px rgba(123, 92, 255, 0.75);
}
.checkpoint--arrive.is-lit .checkpoint__dot {
  border-color: var(--green); background: var(--green);
  box-shadow: 0 0 16px 2px rgba(52, 211, 153, 0.6);
}
.checkpoint__card { grid-column: 1; text-align: right; padding-right: clamp(10px, 2vw, 0px); }
.checkpoint:nth-child(even) .checkpoint__card { grid-column: 2; text-align: left; }
.checkpoint__time {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em;
  color: var(--violet); text-transform: uppercase;
}
.checkpoint--arrive .checkpoint__time { color: var(--green); }
.checkpoint__title {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700; letter-spacing: -0.01em; margin-top: 6px;
}
.checkpoint__desc { color: var(--grey-2); font-size: 0.95rem; margin-top: 8px; max-width: 26em; }
.checkpoint__card, .checkpoint__dot { opacity: 0.35; transition: opacity 0.5s var(--ease); }
.checkpoint.is-lit .checkpoint__card, .checkpoint.is-lit .checkpoint__dot { opacity: 1; }
.checkpoint:nth-child(odd) .checkpoint__desc { margin-left: auto; }

.receipt-chip {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--green);
  font-weight: 700; font-size: 0.95rem;
  padding: 10px 18px; border-radius: 12px;
}
.receipt-chip svg { flex: none; }

.send__note {
  position: relative; text-align: center;
  color: var(--grey-2); font-size: 0.85rem;
  max-width: 46em; margin: clamp(50px, 7vh, 80px) auto 0;
}

/* interactive send calculator */
.sendcalc {
  position: relative; max-width: 460px;
  margin: clamp(46px, 7vh, 80px) auto 0;
  background: #14141a; border: 1px solid #26262e; border-radius: 22px;
  padding: clamp(22px, 2.8vw, 30px);
}
.sendcalc__h {
  color: var(--violet); font-weight: 700; font-size: 0.72rem; text-align: center;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px;
}
.sendcalc__tabs {
  display: flex; gap: 5px; background: #0e0e13; border: 1px solid #26262e;
  border-radius: 12px; padding: 4px; margin-bottom: 22px;
}
.sendcalc__tab {
  flex: 1; padding: 9px 4px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--grey-2); font-family: var(--font);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em; white-space: nowrap;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.sendcalc__tab.is-active { background: var(--violet); color: #fff; box-shadow: 0 4px 14px rgba(123, 92, 255, 0.35); }
.sendcalc__tab:not(.is-active):hover { color: var(--white); }
.sendcalc__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sendcalc__lbl { color: var(--grey-2); font-size: 0.9rem; }
.sendcalc__amt { color: var(--white); font-size: 2.1rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.sendcalc__slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--violet) var(--pct, 40%), #2a2a33 var(--pct, 40%));
  outline: none; cursor: pointer; margin: 8px 0 22px;
}
.sendcalc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--violet);
  box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45); cursor: grab;
}
.sendcalc__slider::-webkit-slider-thumb:active { cursor: grabbing; }
.sendcalc__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--violet);
  box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.22); cursor: grab;
}
.sendcalc__slider::-moz-range-track { background: transparent; }
.sendcalc__slider:focus-visible { box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.4); }
.sendcalc__rows { display: grid; gap: 2px; }
.sendcalc__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid #22222a; font-size: 0.92rem; color: var(--grey-2);
}
.sendcalc__row b { color: var(--white); font-weight: 700; }
.sendcalc__out { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.sendcalc__out span { color: var(--grey-1); font-size: 0.95rem; }
.sendcalc__out b {
  color: var(--green); font-size: 1.55rem; font-weight: 900; letter-spacing: -0.02em;
  transition: transform 0.18s var(--ease);
}
.sendcalc__out b.pulse { transform: scale(1.05); }
.sendcalc__note { color: var(--grey-2); font-size: 0.76rem; line-height: 1.5; margin: 16px 0 0; text-align: center; }

/* trust / safeguarding section */
.trust__head { text-align: center; max-width: 720px; margin: 0 auto; }
.trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(40px, 6vh, 72px);
}
.trustcard {
  background: #14141a; border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(22px, 2.4vw, 32px);
}
.trustcard__ic {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--violet-dim); color: var(--violet); margin-bottom: 16px;
}
.trustcard__ic svg { width: 23px; height: 23px; }
.trustcard h3 { color: var(--white); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.trustcard p { color: var(--grey-1); line-height: 1.6; font-size: 0.95rem; }
@media (max-width: 720px) { .trust__grid { grid-template-columns: 1fr; } }

/* hero app-store "coming soon" badges */
.hero__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.appbadge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--grey-1);
  font-size: 0.82rem; font-weight: 600; opacity: 0.72;
}
.appbadge svg { width: 15px; height: 15px; }
.hero__apps-soon {
  color: var(--violet); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

@media (max-width: 720px) {
  .journey__line { left: 8px; }
  .checkpoint { grid-template-columns: 1fr; padding-left: 36px; }
  .checkpoint__dot { left: 8px; }
  .checkpoint__card, .checkpoint:nth-child(even) .checkpoint__card {
    grid-column: 1; text-align: left;
  }
  .checkpoint:nth-child(odd) .checkpoint__desc { margin-left: 0; }
}

/* ============================================================
   CHAPTER 03 · ARRIVAL
   ============================================================ */
.arrival {
  position: relative; min-height: 92svh;
  display: grid; place-items: center;
  overflow: clip; text-align: center;
}
.arrival__media { position: absolute; inset: 0; }
.arrival__media img {
  width: 100%; height: 116%; object-fit: cover; object-position: center 30%;
}
.arrival__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--obsidian) 0%, transparent 26%, transparent 70%, var(--obsidian) 100%),
    rgba(13, 13, 15, 0.22);
}
.arrival__content { position: relative; z-index: 1; padding-block: 16vh; }
.arrival__sub { margin-top: 20px; color: var(--grey-1); max-width: 36em; margin-inline: auto; }

/* ============================================================
   CHAPTER 04 · GROW (halal / gold)
   ============================================================ */
.grow { background: var(--obsidian); }
.grow__banner {
  position: relative; width: 100%;
  min-height: clamp(480px, 70vh, 820px);
  display: flex; align-items: center;
  overflow: clip;
  margin-bottom: clamp(48px, 8vh, 96px);
}
.grow__banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
.grow__banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--obsidian) 0%, rgba(11, 10, 16, 0.82) 34%, rgba(11, 10, 16, 0.28) 62%, transparent 100%);
}
.grow__banner-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-inline: var(--pad);
}
.grow__banner-inner .kicker { color: var(--violet); }
.grow__banner-inner .display { margin-top: 14px; max-width: 14ch; }
.grow__banner-lede {
  color: var(--grey-1); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  line-height: 1.6; max-width: 34em; margin-top: 22px;
}
@media (max-width: 720px) {
  .grow__banner { min-height: clamp(440px, 66vh, 580px); align-items: flex-end; padding-bottom: 40px; }
  .grow__banner::after { background: linear-gradient(180deg, rgba(11, 10, 16, 0.3) 0%, rgba(11, 10, 16, 0.55) 50%, rgba(11, 10, 16, 0.92) 100%); }
}
.pillars { margin-top: clamp(36px, 5vh, 56px); display: grid; gap: 0; }
.pillar {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding-block: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--violet-dim);
  border: 1px solid rgba(123, 92, 255, 0.28);
  color: var(--violet);
}
.pillar h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }
.pillar p { color: var(--grey-2); font-size: 0.95rem; margin-top: 6px; }
.smallprint { margin-top: 22px; font-size: 0.78rem; color: var(--grey-2); letter-spacing: 0.02em; }
.pillars--3 { margin-top: 0; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 46px); }
.pillars--3 .pillar { grid-template-columns: 1fr; gap: 0; border-top: none; padding-block: 0; }
.pillars--3 .pillar:last-child { border-bottom: none; }
.pillars--3 .pillar__icon { margin-bottom: 16px; }
@media (max-width: 800px) {
  .pillars--3 { grid-template-columns: 1fr; gap: 0; }
  .pillars--3 .pillar { grid-template-columns: auto 1fr; gap: 20px; border-top: 1px solid var(--line); padding-block: clamp(20px, 3vh, 30px); }
  .pillars--3 .pillar:last-child { border-bottom: 1px solid var(--line); }
  .pillars--3 .pillar__icon { margin-bottom: 0; }
}

/* ============================================================
   CHAPTER 05 · FAMILY
   ============================================================ */
.family { background: var(--obsidian-2); border-block: 1px solid var(--line); }
.family__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 110px); align-items: center;
}
.family__img {
  position: relative; border-radius: 20px; overflow: clip;
  aspect-ratio: 4 / 5;
}
.family__img img { width: 100%; height: 112%; object-fit: cover; }
.family__img::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(245,245,247,0.07);
}
@media (max-width: 900px) {
  .family__grid { grid-template-columns: 1fr; }
  .family__img { order: -1; max-width: 480px; }
}
.family__points { margin-top: 28px; display: grid; gap: 14px; padding: 0; list-style: none; }
.family__points li {
  display: flex; gap: 14px; align-items: flex-start;
  color: var(--grey-1); font-size: 1rem;
}
.family__points svg { flex: none; margin-top: 5px; color: var(--violet); }

/* ============================================================
   CHAPTER 06 · TOMORROW (business / branch)
   ============================================================ */
.tomorrow { position: relative; overflow: clip; }
.tomorrow__bg { position: absolute; inset: 0; opacity: 0.5; }
.tomorrow__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tomorrow__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--obsidian) 4%, rgba(13,13,15,0.62) 50%, var(--obsidian) 96%);
}
.tomorrow .wrap { position: relative; z-index: 1; }
.tomorrow__cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(48px, 7vh, 80px);
}
.tcard {
  background: rgba(19, 19, 23, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.tcard:hover { border-color: rgba(123, 92, 255, 0.45); transform: translateY(-4px); }
.tcard__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-dim);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.tcard h3 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem); font-weight: 700; }
.tcard p { color: var(--grey-2); margin-top: 12px; }
@media (max-width: 800px) { .tomorrow__cards { grid-template-columns: 1fr; } }

/* ============================================================
   CHAPTER · VYRE BUSINESS
   ============================================================ */
.business { background: var(--obsidian); }
.business__banner {
  position: relative; width: 100%;
  min-height: clamp(480px, 70vh, 820px);
  display: flex; align-items: center;
  overflow: clip;
  margin-bottom: clamp(48px, 8vh, 96px);
}
.business__banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
}
.business__banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--obsidian) 0%, rgba(11, 10, 16, 0.82) 34%, rgba(11, 10, 16, 0.28) 62%, transparent 100%);
}
.business__banner-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-inline: var(--pad);
}
.business__banner-inner .kicker { color: var(--violet); }
.business__banner-inner .display { margin-top: 14px; max-width: 14ch; }
.business__banner-lede {
  color: var(--grey-1); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
  line-height: 1.6; max-width: 34em; margin-top: 22px;
}
@media (max-width: 720px) {
  .business__banner { min-height: clamp(440px, 66vh, 580px); align-items: flex-end; padding-bottom: 40px; }
  .business__banner::after { background: linear-gradient(180deg, rgba(11, 10, 16, 0.3) 0%, rgba(11, 10, 16, 0.55) 50%, rgba(11, 10, 16, 0.92) 100%); }
  .business__banner .img-chip { display: none; }
}
.business__status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; font-size: 0.85rem; font-weight: 600;
  color: var(--grey-1); letter-spacing: 0.02em;
}
.business__status span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 9px 1px rgba(123, 92, 255, 0.85);
}
.bfeatures {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(48px, 7vh, 80px);
}
.bfeature {
  background: var(--obsidian-2);
  border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 2.6vw, 34px);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.bfeature:hover { border-color: rgba(123, 92, 255, 0.4); transform: translateY(-3px); }
.bfeature__ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--violet-dim); color: var(--violet);
  border: 1px solid rgba(123, 92, 255, 0.28);
}
.bfeature h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; }
.bfeature p { color: var(--grey-2); font-size: 0.93rem; margin-top: 9px; }
.smallprint { margin-top: 22px; font-size: 0.78rem; color: var(--grey-2); letter-spacing: 0.02em; }
@media (max-width: 860px) { .bfeatures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bfeatures { grid-template-columns: 1fr; } }

/* ---------- grow markets (what you can hold) ---------- */
.grow__markets { margin-top: clamp(52px, 8vh, 96px); }
.markets__head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vh, 40px);
}
.markets__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.1;
}
.markets__lead { color: var(--grey-1); font-size: 1rem; line-height: 1.6; }
@media (max-width: 800px) { .markets__head { grid-template-columns: 1fr; } }


.stockspanel {
  background: var(--obsidian-2); border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(24px, 3vw, 40px);
}
.stockspanel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 28px);
}
.stockspanel__head h4 {
  color: var(--white); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 800; letter-spacing: -0.01em;
}
.stockspanel__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-dim);
  border: 1px solid rgba(123, 92, 255, 0.35); border-radius: 999px; padding: 8px 15px;
}
.stockspanel__badge svg { flex: none; }
.holdcats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 14px); margin-bottom: clamp(18px, 2.2vw, 26px);
}
.holdcat {
  display: flex; align-items: center; gap: 13px;
  background-image: linear-gradient(180deg, #272333 0%, #1a1824 100%);
  border: 1px solid #38334a; border-radius: 14px; padding: 14px 16px;
}
.holdcat__ic {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--violet-dim); color: var(--violet);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, 0.25);
}
.holdcat__t b { display: block; color: var(--white); font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
.holdcat__t small { color: var(--grey-2); font-size: 0.76rem; }
.holdlabel {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  color: var(--white); font-weight: 700; font-size: 0.95rem;
  margin: 0 0 14px; padding-top: clamp(8px, 1.4vw, 16px);
  border-top: 1px solid var(--line);
}
.holdlabel span { color: var(--grey-2); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.02em; }
@media (max-width: 720px) { .holdcats { grid-template-columns: 1fr; } }
.stocks__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.2vw, 14px);
}
.stock {
  background: var(--obsidian); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 15px;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.stock:hover { border-color: rgba(123, 92, 255, 0.4); transform: translateY(-3px); }
.stock__tk {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 900; font-size: 0.95rem; color: var(--white); letter-spacing: 0.04em;
}
.stock__tk em {
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 8px 1px rgba(123, 92, 255, 0.6); flex: none;
}
.stock__logo {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 0.82rem; line-height: 1;
  margin-bottom: 13px; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.stock__logo.has-logo { background: #fff !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.stock__logo-img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.stock__nm { color: var(--grey-1); font-size: 0.85rem; margin-top: 8px; font-weight: 500; }
.stock__sec { color: var(--grey-2); font-size: 0.74rem; margin-top: 3px; }
@media (max-width: 900px) { .stocks__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .stocks__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   OFFERINGS ROADMAP
   ============================================================ */
.offerings { background: var(--obsidian-2); border-block: 1px solid var(--line); }
.offerings__head { max-width: 760px; }
.roadmap {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(48px, 7vh, 80px);
}
.phase {
  background: var(--obsidian);
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(26px, 2.8vw, 38px);
  position: relative; overflow: clip;
}
.phase::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--line);
}
.phase:nth-child(1)::before { background: linear-gradient(to right, var(--violet), transparent); }
.phase:nth-child(2)::before { background: linear-gradient(to right, rgba(123,92,255,0.5), transparent); }
.phase:nth-child(3)::before { background: linear-gradient(to right, var(--grey-2), transparent); opacity: 0.4; }
.phase__head { margin-bottom: 22px; }
.phase__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 12px;
}
.phase__tag--live { color: var(--violet); background: var(--violet-dim); border: 1px solid rgba(123,92,255,0.4); }
.phase__tag--soon { color: var(--grey-1); background: rgba(245,245,247,0.05); border: 1px solid var(--line); }
.phase__tag--horizon { color: var(--grey-2); background: transparent; border: 1px solid var(--line); }
.phase__sub { color: var(--grey-1); font-size: 0.95rem; font-weight: 500; }
.phase__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.phase__list li {
  color: var(--grey-2); font-size: 0.92rem; line-height: 1.5;
  padding-left: 20px; position: relative;
}
.phase__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet); opacity: 0.7;
}
.phase:nth-child(3) .phase__list li::before { background: var(--grey-2); opacity: 0.5; }
.phase__list b { color: var(--white); font-weight: 700; }
@media (max-width: 860px) { .roadmap { grid-template-columns: 1fr; } }

/* ============================================================
   INTERACTIVE DEMO
   ============================================================ */
.demo { background: var(--obsidian-2); border-block: 1px solid var(--line); overflow: clip; }
.demo__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px); align-items: center;
}
.demo__note {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; font-size: 0.84rem; font-weight: 600; color: var(--grey-1);
}
.demo__note span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 9px 1px rgba(123,92,255,0.85);
}
.demo__steps {
  margin: 26px 0 0; padding: 0; list-style: none;
  counter-reset: dstep; display: grid; gap: 12px;
}
.demo__steps li {
  counter-increment: dstep; position: relative; padding-left: 40px;
  color: var(--grey-1); font-size: 0.98rem; line-height: 1.5;
}
.demo__steps li::before {
  content: counter(dstep); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--violet-dim); color: var(--violet);
  border: 1px solid rgba(123,92,255,0.35);
  font-size: 0.8rem; font-weight: 800;
}
.demo__stage { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .demo__grid { grid-template-columns: 1fr; }
  .demo__stage { order: -1; }
}

.demo-phone {
  position: relative;
  width: min(322px, 84vw);
  aspect-ratio: 322 / 664;
  border-radius: 52px;
  background: linear-gradient(150deg, #3c3c45 0%, #1b1b21 24%, #0f0f13 58%, #24242b 100%);
  padding: 10px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -3px 4px rgba(0, 0, 0, 0.5),
    0 44px 100px rgba(0,0,0,0.7), 0 0 70px rgba(123,92,255,0.12);
}
.demo-phone::before, .demo-phone::after {
  content: ""; position: absolute; border-radius: 3px;
}
.demo-phone::before { left: -2px; top: 25%; width: 3px; height: 70px; background: linear-gradient(to right, #38383f, #131317); }
.demo-phone::after { right: -2px; top: 31%; width: 3px; height: 52px; background: linear-gradient(to left, #38383f, #131317); }
.demo-phone__notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 30px; border-radius: 999px; background: #000; z-index: 8;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.demo-phone__notch::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #46587e 0%, #141826 55%, #05060a 100%);
  box-shadow: inset 0 0 2px rgba(130, 160, 230, 0.6);
}
.demo-phone__screen {
  position: relative; width: 100%; height: 100%;
  background: radial-gradient(130% 80% at 50% 0%, #101016 0%, #08080c 60%);
  border-radius: 42px; overflow: hidden;
  box-shadow: inset 0 0 0 2.5px #000;
}
.dscreen {
  position: absolute; inset: 0; z-index: 1;
  padding: 52px 20px 22px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateX(42px) scale(0.955);
  transition: opacity 0.5s var(--ease), transform 0.72s cubic-bezier(0.16, 0.86, 0.22, 1.12), visibility 0.5s;
  overflow-y: auto;
}
.dscreen.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.dscreen--center { justify-content: center; align-items: center; text-align: center; }
.dscreen:focus-visible { outline: none; }

.dstatus {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; font-weight: 700; color: var(--grey-2);
  letter-spacing: 0.12em; margin-bottom: 22px;
}
.dhome__hi { color: var(--grey-1); font-size: 0.92rem; margin-bottom: 14px; }
.dhome__bal {
  background: #14141a; border: 1px solid #26262e; border-radius: 18px;
  padding: 18px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px;
}
.dhome__bal-label { font-size: 0.72rem; color: var(--grey-2); letter-spacing: 0.08em; text-transform: uppercase; }
.dhome__bal-amt { font-size: 1.7rem; font-weight: 900; color: var(--white); letter-spacing: -0.02em; }
.dhome__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.dhome__recent { margin-bottom: auto; }
.dhome__recent-h { font-size: 0.7rem; color: var(--grey-2); letter-spacing: 0.09em; text-transform: uppercase; margin: 2px 0 8px; }
.drow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #1c1c24; }
.drow:last-child { border-bottom: none; }
.drow__meta { display: flex; flex-direction: column; gap: 1px; }
.drow__meta b { color: var(--white); font-weight: 700; font-size: 0.84rem; }
.drow__meta small { color: var(--grey-2); font-size: 0.68rem; }
.drow__amt { margin-left: auto; color: var(--grey-1); font-weight: 700; font-size: 0.84rem; white-space: nowrap; }
.drow__amt--in { color: var(--green); }
.dtile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 4px; border-radius: 14px; background: #14141a; border: 1px solid #26262e;
  font-size: 0.72rem; font-weight: 600; color: var(--grey-2);
}
.dtile svg { width: 20px; height: 20px; }
.dtile--on { color: var(--violet); border-color: rgba(123,92,255,0.4); background: var(--violet-dim); }

.dtitle { color: var(--white); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 18px; }
.dback {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--grey-1); font-size: 1.3rem; line-height: 1; padding: 2px 6px 8px 0;
}
.dback:hover { color: var(--white); }

.drecip {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #14141a; border: 1px solid #26262e; border-radius: 16px;
  padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.drecip:hover { border-color: rgba(123,92,255,0.45); }
.drecip__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 900; font-size: 1rem;
  background: var(--violet-dim); color: var(--violet);
}
.drecip__meta { display: flex; flex-direction: column; }
.drecip__meta b { color: var(--white); font-weight: 700; font-size: 0.95rem; }
.drecip__meta small { color: var(--grey-2); font-size: 0.75rem; }
.drecip__chev { margin-left: auto; color: var(--grey-2); font-size: 1.3rem; }

.damt { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 14px 0 6px; }
.damt__cur { color: var(--grey-1); font-size: 1.7rem; font-weight: 700; }
.damt__val { color: var(--white); font-size: 3rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.damt__conv { text-align: center; color: var(--green); font-weight: 700; font-size: 0.98rem; margin-bottom: 18px; }
.damt__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: auto; }
.damt__chips button {
  background: #14141a; border: 1px solid #26262e; border-radius: 12px;
  padding: 11px 4px; cursor: pointer; color: var(--grey-1); font-weight: 700; font-size: 0.88rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.damt__chips button:hover { border-color: var(--grey-2); }
.damt__chips button.is-sel { color: var(--violet); border-color: var(--violet); background: var(--violet-dim); }
.damt__rate { color: var(--grey-2); font-size: 0.74rem; text-align: center; margin: 14px 0; line-height: 1.4; }

.drev { display: grid; gap: 2px; margin-bottom: auto; }
.drev__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid #22222a; font-size: 0.9rem; color: var(--grey-2);
}
.drev__row b { color: var(--white); font-weight: 700; }
.drev__row--total { border-bottom: none; margin-top: 4px; }
.drev__row--total span { color: var(--grey-1); }
.drev__row--total b { color: var(--green); font-size: 1.15rem; }

.dtrack { width: 100%; margin: 26px 0 18px; }
.dtrack__line { position: relative; height: 3px; background: #26262e; border-radius: 3px; margin: 0 6px 12px; }
.dtrack__line i {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: linear-gradient(to right, var(--violet), var(--green));
  border-radius: 3px; transition: width 0.6s var(--ease);
}
.dtrack__pts { display: flex; justify-content: space-between; }
.dtrack__pt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 0.64rem; color: var(--grey-2); font-weight: 600; flex: 1;
}
.dtrack__pt em {
  width: 11px; height: 11px; border-radius: 50%; background: #26262e;
  transition: background 0.3s, box-shadow 0.3s;
}
.dtrack__pt.is-lit { color: var(--white); }
.dtrack__pt.is-lit em { background: var(--violet); box-shadow: 0 0 10px 1px rgba(123,92,255,0.7); }
.dtrack__pt--home.is-lit em { background: var(--green); box-shadow: 0 0 10px 1px rgba(52,211,153,0.7); }
.dsending__note { color: var(--grey-2); font-size: 0.86rem; }

.ddone__check { color: var(--green); margin-bottom: 18px; }
.ddone__check svg { width: 60px; height: 60px; }
.ddone__amt { color: var(--white); font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; }
.ddone__msg { color: var(--grey-1); font-size: 0.95rem; margin-top: 6px; }
.ddone__msg b { color: var(--white); }
.ddone__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 26px; }

.dbtn {
  margin-top: 14px; width: 100%; text-align: center;
  padding: 14px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font); font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: none; display: block;
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
}
.dbtn:active { transform: scale(0.98); }
.dbtn--primary { background: var(--violet); color: var(--white); box-shadow: 0 6px 24px rgba(123,92,255,0.3); }
.dbtn--primary:hover { background: #8d71ff; }
.dbtn--ghost { background: transparent; color: var(--white); border-color: #33333c; margin-top: 0; }
.dbtn--ghost:hover { border-color: var(--grey-2); }
.ddone__actions .dbtn { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .dscreen { transition: opacity 0.01s, visibility 0.01s; transform: none; }
  .dtrack__line i { transition: width 0.01s; }
}

/* ============================================================
   CHAPTER 07 · BOARDING (cards + waitlist)
   ============================================================ */
.boarding {
  position: relative; text-align: center; overflow: clip;
  padding-bottom: clamp(110px, 16vh, 200px);
}
.boarding__glow {
  position: absolute; left: 50%; top: 46%;
  width: min(900px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(123, 92, 255, 0.16) 0%, transparent 60%);
  pointer-events: none;
}
.cardfan {
  position: relative; z-index: 1;
  height: clamp(280px, 40vw, 440px);
  margin-top: clamp(50px, 7vh, 90px);
  perspective: 1600px;
}

/* ---------- the VYRE card (code-built) ---------- */
.vcard {
  position: absolute; left: 50%; top: 0;
  width: clamp(310px, 46vw, 600px);
  aspect-ratio: 1.585 / 1;
  border-radius: 5.2% / 8.2%;
  overflow: clip;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.65s var(--ease), box-shadow 0.5s;
  transform-style: preserve-3d;
  color: var(--white);
  isolation: isolate;
  background-size: cover; background-position: center;
}
.vcard::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.vcard--obsidian { background-image: url(/assets/img/card-tex-obsidian.webp); }
.vcard--violet   { background-image: url(/assets/img/card-tex-violet.webp); }
.vcard--offwhite { background-image: url(/assets/img/card-tex-offwhite.webp); color: #0D0D0F; }
.vcard--offwhite::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }

/* darkening scrim so text/marks read on any texture */
.vcard--violet::before, .vcard--obsidian::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 100% at 20% 15%, transparent 40%, rgba(0,0,0,0.28) 100%);
}

/* moving holographic sheen */
@property --sheen { syntax: '<number>'; inherits: true; initial-value: -0.6; }
.cardfan { --sheen: -0.6; animation: sheenAuto 5.5s ease-in-out infinite; }
.cardfan:hover { animation-play-state: paused; }
@keyframes sheenAuto { 0%, 100% { --sheen: -0.7; } 50% { --sheen: 0.7; } }
.vcard__sheen {
  position: absolute; inset: -40%; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.24) 44%, rgba(255,255,255,0.66) 50%, rgba(255,255,255,0.24) 56%, transparent 68%);
  transform: translateX(calc(var(--sheen, -0.6) * 64%)); opacity: 0.85;
  transition: transform 0.25s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .cardfan { animation: none; } }

.vcard__inner {
  position: absolute; inset: 0; z-index: 2;
  padding: 7.5% 7.5% 7%;
  display: grid; grid-template-rows: auto 1fr auto;
}
.vcard__wordmark { height: clamp(13px, 1.5vw, 20px); width: auto; }
.vcard__mark {
  position: absolute; right: 7%; top: 50%; transform: translateY(-46%);
  height: 40%; width: auto; opacity: 0.95; z-index: 2;
}
.vcard--offwhite .vcard__mark { opacity: 0.9; }
.vcard__midrow { display: flex; align-items: center; gap: 4%; align-self: center; }
.vcard__chip {
  width: 15%; aspect-ratio: 4 / 3; border-radius: 16%;
  background:
    linear-gradient(135deg, #f6d98a 0%, #b8912f 30%, #f3d885 52%, #9c7a28 74%, #e9cd7a 100%);
  position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.vcard__chip::before, .vcard__chip::after {
  content: ""; position: absolute; inset: 14%;
  border: 0.9px solid rgba(80, 55, 10, 0.55); border-radius: 8%;
}
.vcard__chip::after {
  inset: 0; border: none;
  background:
    linear-gradient(to right, transparent 46%, rgba(80,55,10,0.5) 47%, rgba(80,55,10,0.5) 53%, transparent 54%),
    linear-gradient(to bottom, transparent 30%, rgba(80,55,10,0.45) 31%, rgba(80,55,10,0.45) 33%, transparent 34%, transparent 66%, rgba(80,55,10,0.45) 67%, rgba(80,55,10,0.45) 69%, transparent 70%);
}
.vcard__wave { width: 6.5%; height: auto; opacity: 0.85; }
.vcard--offwhite .vcard__wave path { stroke: #0D0D0F; }
.vcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8%; }
.vcard__number {
  font-size: clamp(0.62rem, 1.3vw, 0.92rem); font-weight: 600;
  letter-spacing: 0.14em; opacity: 0.92; margin-bottom: 3%;
  font-variant-numeric: tabular-nums;
}
.vcard__holder {
  font-size: clamp(0.56rem, 1.1vw, 0.82rem); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9;
}
.vcard__tier {
  font-size: clamp(0.48rem, 0.9vw, 0.66rem); font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.62; margin-bottom: 4px;
}
.vcard__scheme { display: flex; align-items: center; }
.vcard__scheme span {
  width: clamp(14px, 2vw, 26px); aspect-ratio: 1; border-radius: 50%;
  border: 1.4px solid currentColor; opacity: 0.85;
}
.vcard__scheme span:last-child { margin-left: -34%; }

/* fan positions */
.vcard--c1 { transform: translateX(-90%) rotate(-9deg) rotateY(9deg); z-index: 1; }
.vcard--c2 { transform: translateX(-50%) translateY(-5%) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); z-index: 3; transition: transform 0.25s var(--ease), box-shadow 0.5s; }
.vcard--c3 { transform: translateX(-10%) rotate(9deg) rotateY(-9deg); z-index: 2; }
.cardfan:hover .vcard--c1 { transform: translateX(-102%) translateY(-3%) rotate(-13deg) rotateY(12deg); }
.cardfan:hover .vcard--c2 { transform: translateX(-50%) translateY(-11%) scale(1.02) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); }
.cardfan:hover .vcard--c3 { transform: translateX(2%) translateY(-3%) rotate(13deg) rotateY(-12deg); }
.boarding__actions {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: clamp(44px, 6vh, 70px);
}
.boarding__note { margin-top: 20px; color: var(--grey-2); font-size: 0.85rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--obsidian-2);
  padding: clamp(44px, 6vh, 64px) 0 26px;
  font-size: 0.9rem; color: var(--grey-2);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vh, 44px);
}
.footer__brand img { height: 26px; width: auto; margin-bottom: 16px; }
.footer__brand p { color: var(--grey-1); margin-bottom: 14px; }
.footer__mail {
  color: #9d84ff; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid transparent; transition: border-color 0.25s;
}
.footer__mail:hover { border-color: #9d84ff; }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__col h3 {
  color: var(--white); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px;
}
.footer__col a {
  color: var(--grey-2); text-decoration: none; font-size: 0.92rem;
  width: fit-content; transition: color 0.22s;
}
.footer__col a:hover { color: var(--white); }
.footer__status p { color: var(--grey-2); font-size: 0.86rem; line-height: 1.55; }
.footer__badge {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--grey-1); font-weight: 600; font-size: 0.86rem; margin-bottom: 6px;
}
.footer__badge span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 9px 1px rgba(123, 92, 255, 0.85);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  align-items: baseline; justify-content: space-between;
  font-size: 0.76rem; line-height: 1.55;
}
.footer__legal p { max-width: 62ch; margin: 0; }
.footer__copy { white-space: nowrap; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer__links a { color: var(--grey-1); text-decoration: none; }
.footer__links a:hover { color: var(--white); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .footer__badge span { animation: none; } }
@media (max-width: 780px) {
  .footer { padding: clamp(34px, 5vh, 52px) 0 22px; }
  .footer__grid {
    grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-bottom: 24px;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand img { margin-bottom: 12px; }
  .footer__brand p { margin-bottom: 10px; }
  .footer__status { grid-column: 1 / -1; }
  .footer__col { gap: 9px; }
  .footer__legal { gap: 8px 24px; padding-top: 18px; }
}

/* ============================================================
   404
   ============================================================ */
.page-404 {
  min-height: 100svh; display: grid; place-items: center;
  position: relative; text-align: center; overflow: clip;
}
.page-404__bg { position: absolute; inset: 0; opacity: 0.4; }
.page-404__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-404__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 50%, transparent 20%, var(--obsidian) 85%);
}
.page-404__content { position: relative; z-index: 1; padding: var(--pad); }
.page-404__code {
  font-size: clamp(5rem, 16vw, 11rem); font-weight: 900;
  color: var(--white); letter-spacing: -0.04em; line-height: 1;
}
.page-404__code span { color: var(--violet); }

/* ============================================================
   Reveal states (only applied when JS + motion OK)
   ============================================================ */
html.js-motion [data-reveal] {
  opacity: 0; transform: translateY(54px) scale(0.955); filter: blur(13px);
}
html.js-motion [data-reveal].is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 0.7s var(--ease),
              transform 1.05s cubic-bezier(0.16, 0.86, 0.22, 1.14),
              filter 0.65s var(--ease);
}
html.js-motion [data-reveal-delay="1"].is-in { transition-delay: 0.12s; }
html.js-motion [data-reveal-delay="2"].is-in { transition-delay: 0.24s; }
html.js-motion [data-reveal-delay="3"].is-in { transition-delay: 0.36s; }

/* ---- money packet travelling down the Send corridor ---- */
.journey__packet {
  position: absolute; left: 50%; top: calc(var(--draw, 0) * 100%);
  width: 24px; height: 24px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, #c9b8ff 34%, var(--violet) 54%, rgba(123, 92, 255, 0) 74%);
  box-shadow: 0 0 26px 7px rgba(123, 92, 255, 1), 0 0 70px 20px rgba(123, 92, 255, 0.55);
  opacity: 0; transition: opacity 0.35s var(--ease); z-index: 3; pointer-events: none;
}
.journey__packet::before {
  content: ""; position: absolute; left: 50%; bottom: 60%; transform: translateX(-50%);
  width: 5px; height: 120px; border-radius: 5px;
  background: linear-gradient(to top, rgba(123, 92, 255, 0.85), rgba(123, 92, 255, 0));
}
.journey.is-travelling .journey__packet { opacity: 1; animation: packetPulse 1.3s ease-in-out infinite; }
@keyframes packetPulse {
  0%, 100% { box-shadow: 0 0 26px 7px rgba(123, 92, 255, 1), 0 0 70px 20px rgba(123, 92, 255, 0.55); }
  50% { box-shadow: 0 0 34px 11px rgba(123, 92, 255, 1), 0 0 92px 28px rgba(123, 92, 255, 0.7); }
}
.checkpoint__card { transition: opacity 0.5s var(--ease), transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1.35); }
.checkpoint.is-lit .checkpoint__card { transform: translateY(-3px) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .journey.is-travelling .journey__packet { animation: none; } }

/* ---- hover lift on content tiles (pointer devices) ---- */
@media (hover: hover) and (pointer: fine) {
  .btile, .trustcard, .holdcat {
    transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.4s;
  }
  .btile:hover, .trustcard:hover, .holdcat:hover {
    transform: translateY(-9px) scale(1.012);
    border-color: rgba(123, 92, 255, 0.6);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(123, 92, 255, 0.28), 0 10px 40px rgba(123, 92, 255, 0.24);
  }
}

html.js-motion .hero__title .line > span {
  display: block; transform: translateY(110%);
  animation: heroline 1.1s var(--ease) forwards;
}
html.js-motion .hero__title .line:nth-child(2) > span { animation-delay: 0.12s; }
html.js-motion .hero__kicker, html.js-motion .hero__sub,
html.js-motion .hero__cta, html.js-motion .hero__scroll {
  opacity: 0; animation: herofade 1.1s var(--ease) forwards;
}
html.js-motion .hero__sub { animation-delay: 0.35s; }
html.js-motion .hero__cta { animation-delay: 0.5s; }
html.js-motion .hero__scroll { animation-delay: 0.9s; }
@keyframes heroline { to { transform: none; } }
@keyframes herofade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; }
  .hero__scroll::after { animation: none; }
  .cardfan .vcard, .vcard__sheen, .tcard, .btn { transition: none; }
  .business__status span { animation: none; }
}

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */
.nav__end { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(245, 245, 247, 0.05); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  color: var(--grey-2); font-family: var(--font); font-weight: 700;
  font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; line-height: 1;
  transition: color 0.2s, background 0.2s;
}
.lang-toggle button[lang="ur"] { font-size: 0.92rem; }
.lang-toggle button.is-active { color: var(--white); background: var(--violet); }
@media (max-width: 400px) { .lang-toggle button { padding: 6px 9px; } }

/* ============================================================
   WAITLIST FORM
   ============================================================ */
.waitlist {
  position: relative; z-index: 2;
  display: flex; gap: 10px; max-width: 480px;
  margin: clamp(44px, 6vh, 70px) auto 0;
}
.waitlist input[type="email"] {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  border-radius: 999px; padding: 15px 22px; color: var(--white);
  font-family: var(--font); font-size: 1rem;
  transition: border-color 0.25s, background 0.25s;
}
.waitlist input[type="email"]::placeholder { color: var(--grey-2); }
.waitlist input[type="email"]:focus {
  outline: none; border-color: var(--violet); background: rgba(123, 92, 255, 0.06);
}
.waitlist button { flex: none; }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist__msg {
  position: relative; z-index: 2; min-height: 1.4em;
  margin-top: 16px; font-size: 0.95rem; font-weight: 600; color: var(--grey-2);
}
.waitlist__msg.is-ok { color: var(--green); }
.waitlist__msg.is-err { color: #ff6b6b; }
@media (max-width: 520px) {
  .waitlist { flex-direction: column; }
  .waitlist button { width: 100%; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--obsidian); }
.faq__head { max-width: 720px; margin-bottom: clamp(32px, 5vh, 52px); }
.faq__list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.6vw, 28px) 4px;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem); font-weight: 700; color: var(--white);
  transition: color 0.2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; font-weight: 300; font-size: 1.7rem; color: var(--violet);
  line-height: 1; transition: transform 0.3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--violet); }
.faq__body { padding: 0 4px clamp(20px, 2.6vw, 28px); }
.faq__body p { color: var(--grey-1); font-size: 1rem; line-height: 1.65; max-width: 64ch; }

/* ============================================================
   MOBILE HERO: remove the empty top gap
   ============================================================ */
@media (max-width: 700px) {
  .hero { justify-content: center; }
  .hero__content { padding-block: 96px 44px; }
  .ticker { position: absolute; left: 0; right: 0; bottom: 0; }
}

/* ============================================================
   URDU / RTL
   ============================================================ */
html.lang-ur body { font-family: 'Noto Naskh Arabic', var(--font); }
html.lang-ur .display, html.lang-ur h1, html.lang-ur h2, html.lang-ur h3,
html.lang-ur .markets__title, html.lang-ur .faq__item summary, html.lang-ur .display--xl {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', var(--font);
  letter-spacing: normal; line-height: 1.9; font-weight: 700;
}
html.lang-ur .kicker { text-transform: none; letter-spacing: 0.02em; }
html.lang-ur .hero__kicker, html.lang-ur .stockspanel__badge,
html.lang-ur .tcard__tag, html.lang-ur .phase__tag, html.lang-ur .vcard__tier {
  text-transform: none; letter-spacing: 0.02em;
}
html.lang-ur .lede, html.lang-ur p { line-height: 1.9; }

/* directional mirrors */
html[dir="rtl"] .thread { left: auto; right: max(calc((100vw - var(--max)) / 2 - 40px), 18px); }
html[dir="rtl"] .phase__list li { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .phase__list li::before { left: auto; right: 0; }
html[dir="rtl"] .demo__steps li { padding-left: 0; padding-right: 40px; }
html[dir="rtl"] .demo__steps li::before { left: auto; right: 0; }
html[dir="rtl"] .phase::before,
html[dir="rtl"] .phase:nth-child(1)::before { background: linear-gradient(to left, var(--violet), transparent); }
html[dir="rtl"] .journey__line-fill { box-shadow: 0 0 14px rgba(123, 92, 255, 0.55); }
@media (min-width: 1200px) {
  html[dir="rtl"] .hero__content { padding-right: var(--pad); padding-left: clamp(360px, 30vw, 480px); }
  html[dir="rtl"] .phone { right: auto; left: clamp(24px, 6vw, 120px); }
}
html[dir="rtl"] .demo__note span, html[dir="rtl"] .business__status span { margin-left: 0; }

/* ============================================================
   WARMTH LAYER: dimensional graphite surfaces, ambient violet
   life and more breathing room. Keeps the obsidian identity
   but makes the dark feel warm and welcoming rather than flat.
   ============================================================ */
/* soft violet ambience over the flat-colour sections */
.weight, .everyday, .grow, .business, .offerings, .faq, .boarding {
  background:
    radial-gradient(72% 42% at 82% -4%, rgba(123, 92, 255, 0.06), transparent 60%),
    #0e0d12;
}
.family {
  background:
    radial-gradient(72% 42% at 18% -4%, rgba(123, 92, 255, 0.055), transparent 60%),
    #100e15;
}
/* raised, dimensional graphite cards (graphite is the brand panel colour) */
.btile:not(.btile--violet), .bfeature, .tcard, .phase {
  background-image: linear-gradient(180deg, #221f2c 0%, #16141d 100%);
  border-color: #332f43;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 38px rgba(0, 0, 0, 0.24);
  border-radius: 24px;
}
.stockspanel {
  background-image: linear-gradient(180deg, #1c1926 0%, #131119 100%);
  border-color: #2f2b3d; border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 38px rgba(0, 0, 0, 0.24);
}
.stock { background-image: linear-gradient(180deg, #272333 0%, #1a1824 100%); border-color: #38334a; }
.stock:hover { border-color: rgba(123, 92, 255, 0.5); }
.faq__list { border-color: #2f2b3d; }
.faq__item { border-color: #2a2735; }
.stat, .drecip, .dhome__bal, .dtile {
  background-image: linear-gradient(180deg, #201d29 0%, #16141c 100%); border-color: #302c3d;
}
/* brighter violet energy */
.kicker { color: #9d86ff; }
.pillar__icon, .bfeature__ico {
  background: rgba(123, 92, 255, 0.15); border-color: rgba(123, 92, 255, 0.34);
}
/* a touch more breathing room */
.section { padding-block: clamp(100px, 15vh, 190px); }

/* ---------- How it works (3 steps) ---------- */
.howit {
  background:
    radial-gradient(72% 42% at 18% -4%, rgba(123, 92, 255, 0.06), transparent 60%),
    #0e0d12;
}
.steps3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(40px, 6vh, 70px);
}
.step3 {
  background-image: linear-gradient(180deg, #221f2c 0%, #16141d 100%);
  border: 1px solid #332f43; border-radius: 24px;
  padding: clamp(28px, 3vw, 40px); position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 38px rgba(0, 0, 0, 0.24);
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.step3:hover { border-color: rgba(123, 92, 255, 0.45); transform: translateY(-3px); }
.step3__n {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--violet); color: #fff; font-weight: 900; font-size: 1.2rem;
  margin-bottom: 20px; box-shadow: 0 6px 20px rgba(123, 92, 255, 0.4);
}
.step3 h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); font-weight: 700; letter-spacing: -0.01em; }
.step3 p { color: var(--grey-1); margin-top: 10px; font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 800px) { .steps3 { grid-template-columns: 1fr; max-width: 480px; } }

/* ============================================================
   03b · Every currency, one home  (multi-currency wallet)
   ============================================================ */
.mc__grid { display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center; }
@media (max-width:900px){ .mc__grid { grid-template-columns:1fr; gap:56px; } }
.mc__verbs { margin-top:30px; font-size:clamp(1.3rem,2.2vw,1.8rem); letter-spacing:-0.02em; color:var(--grey-2); }
.mc__verbs b { font-weight:900; color:var(--white); margin-right:14px; }
.mc__verbs b:first-child { color:var(--violet); }
.mc__note { margin-top:14px; font-size:0.75rem; color:var(--grey-2); }
.mc__stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:480px; }
.mc__stage::before { content:""; position:absolute; width:480px; height:480px; max-width:100%;
  border-radius:50%; background:radial-gradient(circle, rgba(123,92,255,0.16), transparent 65%);
  pointer-events:none; }
.mcw { position:relative; z-index:2; width:min(400px,92%); border:1px solid var(--line); border-radius:26px;
  padding:26px 26px 20px; background:linear-gradient(160deg,#15151b,#0f0f13);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(123,92,255,0.06), 0 0 80px -30px rgba(123,92,255,0.35); }
.mcw__top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.mcw__label { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--grey-2); font-weight:700; }
.mcw__total { font-size:clamp(1.6rem,2.3vw,2rem); font-weight:900; color:var(--white); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.mcw__fx { font-size:0.8rem; color:var(--grey-2); margin-bottom:18px; font-variant-numeric:tabular-nums; }
.mcw__fx b { color:var(--green); font-weight:700; }
.mcw__row { display:flex; align-items:center; justify-content:space-between; padding:13px 2px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.mcw__cc { display:flex; align-items:center; gap:12px; font-weight:700; color:var(--white); font-size:0.95rem; }
.mcw__dot { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:var(--white); }
.mcw__amt { color:var(--grey-1); font-weight:500; }