/* ==========================================================================
   RupeeBiz — Design System
   Brand palette derived from the RupeeBiz logo:
     mint/aqua  #5FE3D0   cyan  #38BDF8   violet  #7C3AED   magenta  #C026D3
   Base is midnight navy; dark and light sections alternate for readability.
   ========================================================================== */

:root {
  /* Core brand */
  --rb-mint:      #5FE3D0;
  --rb-aqua:      #2DD4BF;
  --rb-cyan:      #38BDF8;
  --rb-blue:      #4F7DF3;
  --rb-violet:    #7C3AED;
  --rb-purple:    #8B5CF6;
  --rb-magenta:   #C026D3;

  /* Dark surfaces */
  --rb-navy-950:  #05081C;
  --rb-navy-900:  #080D26;
  --rb-navy-850:  #0B1233;
  --rb-navy-800:  #111A45;
  --rb-navy-700:  #1B2560;

  /* Light surfaces */
  --rb-white:     #FFFFFF;
  --rb-off:       #F6F8FE;
  --rb-mist:      #ECF1FB;

  /* Ink */
  --rb-ink:       #0B1233;
  --rb-ink-soft:  #46508A;
  /* Was #6B76A8 — 4.39:1 on white, just under the 4.5:1 AA floor for body text.
     Darkened to 5.0:1 on white / 4.7:1 on the off-white surface. */
  --rb-ink-mute:  #626D9E;

  /* Signature gradients */
  --rb-grad-cta:  linear-gradient(100deg, #7C3AED 0%, #4F7DF3 55%, #38BDF8 100%);
  --rb-grad-text: linear-gradient(96deg, #5FE3D0 0%, #38BDF8 45%, #A78BFA 100%);
  --rb-grad-glow: radial-gradient(closest-side, rgba(124,58,237,.45), transparent 70%);

  --rb-ring:      rgba(95, 227, 208, .35);
  --rb-hair:      rgba(255, 255, 255, .10);

  --rb-shadow-lg: 0 24px 60px -18px rgba(5, 8, 28, .75);
  --rb-shadow-cta:0 14px 34px -12px rgba(124, 58, 237, .75);
}

/* --------------------------------------------------------------- base --- */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background: var(--rb-navy-900);
  color: #E6EAFB;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(124, 58, 237, .55); color: #fff; }

/* Scrollbar (desktop only) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--rb-navy-950); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--rb-violet), var(--rb-cyan));
    border-radius: 99px; border: 2px solid var(--rb-navy-950);
  }
}

/* ------------------------------------------------------------ sections --- */

.sec-dark  { background: var(--rb-navy-900); color: #E6EAFB; }
.sec-dark2 { background: var(--rb-navy-950); color: #E6EAFB; }
.sec-light { background: var(--rb-off);      color: var(--rb-ink); }
.sec-white { background: var(--rb-white);    color: var(--rb-ink); }

.sec-light .muted, .sec-white .muted { color: var(--rb-ink-soft); }
.dark-muted { color: #9FA9D4; }

/* Seam between a dark and a light section */
.seam-top    { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.hairline    { border-color: var(--rb-hair); }

/* ------------------------------------------------------------- surface --- */

.glass {
  background: linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-hover { transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s; }
.glass-hover:hover {
  transform: translateY(-5px);
  border-color: var(--rb-ring);
  box-shadow: 0 22px 48px -22px rgba(56,189,248,.55);
}

.card-light {
  background: #fff;
  border: 1px solid #E1E8F7;
  box-shadow: 0 2px 4px rgba(11,18,51,.04);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.card-light:hover {
  transform: translateY(-5px);
  border-color: #C5D3F5;
  box-shadow: 0 26px 50px -26px rgba(11,18,51,.30);
}

/* Gradient hairline border on a dark card */
.grad-border { position: relative; }
.grad-border::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(95,227,208,.7), rgba(124,58,237,.6), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ----------------------------------------------------------- typography --- */

.grad-text {
  background: var(--rb-grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.eyebrow {
  font-size: .70rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
/* Fluid display type.
   The old scale jumped in fixed Tailwind steps (text-3xl → sm:text-4xl →
   lg:[2.75rem]), so at the widths just past a breakpoint a long headline was
   suddenly far too big for its column and collided with the line below.
   clamp() removes the jumps; `text-wrap: balance` distributes the words evenly
   instead of leaving one orphan; line-height 1.08 was too tight for anything
   that wraps to three lines. Utility classes on the element still win, so a
   page can override — see .h-display-lg / -md for the two homepage sizes. */
.h-display {
  font-weight: 800; letter-spacing: -.022em;
  line-height: 1.14;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Hero — 360px … 1440px+ */
.h-display-lg { font-size: clamp(1.95rem, 1.05rem + 3.9vw, 3.65rem); line-height: 1.1; }
/* Section headings */
.h-display-md { font-size: clamp(1.65rem, 1.02rem + 2.7vw, 2.75rem); }
/* Closing CTA headline */
.h-display-sm { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem); }

/* Forced <br> in a headline is a desktop-only device: below 1024px it produces
   a stranded short line. Mark the break with .br-lg and it collapses on small
   screens, letting text-wrap: balance choose the break instead. */
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: .95rem; line-height: 1;
  padding: 1rem 1.6rem; border-radius: .85rem;
  transition: transform .25s, box-shadow .25s, background-color .25s, border-color .25s, color .25s;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: var(--rb-grad-cta); color: #fff;
  box-shadow: var(--rb-shadow-cta);
  background-size: 160% 100%; background-position: 0% 50%;
}
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 18px 42px -12px rgba(56,189,248,.7); }

.btn-ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28);
}
.btn-ghost:hover { border-color: var(--rb-mint); background: rgba(95,227,208,.08); transform: translateY(-2px); }

.btn-outline-ink {
  background: transparent; color: var(--rb-ink); border: 1px solid #C9D5F1;
}
.btn-outline-ink:hover { border-color: var(--rb-violet); color: var(--rb-violet); transform: translateY(-2px); }

.btn-link {
  padding: 0; background: none; color: var(--rb-mint); font-weight: 700;
}
.btn-link .arrow { transition: transform .25s; }
.btn-link:hover .arrow { transform: translateX(5px); }

.btn-sm { padding: .7rem 1.15rem; font-size: .875rem; border-radius: .7rem; }

/* --------------------------------------------------------------- chips --- */

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid rgba(95,227,208,.30);
  background: rgba(95,227,208,.08); color: var(--rb-mint);
}
.chip-ink {
  border-color: #D5DFF7; background: #EEF3FE; color: var(--rb-violet);
}

/* ---------------------------------------------------------- decoration --- */

.glow {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
  opacity: .55; z-index: 0;
}
.glow-violet { background: rgba(124,58,237,.55); }
.glow-cyan   { background: rgba(56,189,248,.40); }
.glow-mint   { background: rgba(95,227,208,.32); }

.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}

/* ------------------------------------------------------- scroll reveal --- */

/* Hidden-by-default ONLY when JS is confirmed running (.js-on is set inline in
   the head). Without it the content paints normally — no permanently blank
   sections if a script fails, is blocked, or the observer never fires. */
.js-on [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0ms);
}
.js-on [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- animations --- */

@keyframes rb-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes rb-pulse   { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes rb-spin    { to { transform: rotate(360deg); } }
@keyframes rb-dash    { to { stroke-dashoffset: 0; } }
@keyframes rb-shimmer { 0% { background-position: -220% 0; } 100% { background-position: 220% 0; } }
@keyframes rb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rb-trail   { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

.anim-float  { animation: rb-float 6s ease-in-out infinite; }
.anim-pulse  { animation: rb-pulse 3.4s ease-in-out infinite; }
.anim-spin-slow { animation: rb-spin 34s linear infinite; }

.marquee-track { display: flex; width: max-content; animation: rb-marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* A dot travelling along an SVG path — used in the hero journeys */
.trail-dot { animation: rb-trail 4s linear infinite; offset-rotate: 0deg; }

/* ------------------------------------------------ needs wheel / loop ---- */

.wheel-node {
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s, filter .5s;
}
.wheel.is-flipped .wheel-face-a { opacity: 0; transform: rotateY(90deg); }
.wheel.is-flipped .wheel-face-b { opacity: 1; transform: rotateY(0); }
.wheel-face-b { opacity: 0; transform: rotateY(-90deg); transition: opacity .5s, transform .5s; }
.wheel-face-a { transition: opacity .5s, transform .5s; }

/* ------------------------------------------------------ before / after --- */

.ba-wrap { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
/* Split the comparison down the middle: Before content hugs the left half,
   After content hugs the right half, so both read cleanly at a 50% handle. */
@media (min-width: 640px) {
  .ba-limit { padding-right: 50%; }
  .ba-shift { padding-left: 52.5%; }
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: linear-gradient(var(--rb-mint), var(--rb-violet));
  cursor: ew-resize; z-index: 5;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--rb-grad-cta); display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(5,8,28,.55), var(--rb-shadow-cta);
}

/* ------------------------------------------------------------ tabs ------ */

.tab-btn {
  transition: background-color .3s, color .3s, border-color .3s, transform .3s;
  border: 1px solid transparent;
}
.tab-btn[aria-selected="true"] {
  background: var(--rb-grad-cta); color: #fff; box-shadow: var(--rb-shadow-cta);
}
.tab-btn[aria-selected="false"]:hover { background: rgba(255,255,255,.07); }
.tab-panel[hidden] { display: none; }

/* ------------------------------------------------------------ accordion -- */

.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.3,1); }
.acc-body > div { overflow: hidden; }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-item.is-open .acc-icon { transform: rotate(45deg); }
.acc-icon { transition: transform .35s; }

/* ------------------------------------------------------------ timeline --- */

.tl-rail { position: relative; }
/* The rail sits at the centre of the 16px dots, not the centre of the block */
.tl-rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px;
  background: rgba(11,18,51,.12);
}
.tl-rail::after {
  content: ''; position: absolute; left: 0; top: 7px; height: 2px; width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--rb-mint), var(--rb-violet));
  transition: width .8s cubic-bezier(.2,.7,.3,1);
}
.sec-dark .tl-rail::before, .sec-dark2 .tl-rail::before { background: rgba(255,255,255,.12); }

/* -------------------------------------------------------------- forms ---- */

/* The Tailwind CDN injects the forms plugin's reset after this file, so these
   rules carry an element selector to out-specify `[type='text']` and friends. */
input.field, select.field, textarea.field {
  width: 100%; padding: .85rem 1rem; border-radius: .75rem;
  background-color: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: .95rem; transition: border-color .25s, background-color .25s;
}
input.field::placeholder, textarea.field::placeholder { color: #7A85B8; }
input.field:focus, select.field:focus, textarea.field:focus {
  outline: none; border-color: var(--rb-mint); background-color: rgba(95,227,208,.06);
  box-shadow: none;
}
select.field option { background: var(--rb-navy-850); color: #fff; }

input.field-ink, select.field-ink, textarea.field-ink {
  background-color: #fff; border-color: #D9E2F6; color: var(--rb-ink);
}
input.field-ink::placeholder, textarea.field-ink::placeholder { color: var(--rb-ink-mute); }
input.field-ink:focus, select.field-ink:focus, textarea.field-ink:focus {
  border-color: var(--rb-violet); background-color: #fff;
}
select.field-ink option { background: #fff; color: var(--rb-ink); }
.field-label { font-size: .8rem; font-weight: 600; color: #A9B3DC; margin-bottom: .4rem; display: block; }
.sec-light .field-label, .sec-white .field-label { color: var(--rb-ink-soft); }

.field-err { border-color: #F87171 !important; }
.err-msg { color: #FCA5A5; font-size: .75rem; margin-top: .3rem; }

/* Form-level error banner (submission failed — distinct from per-field errors) */
.form-error {
  border: 1px solid rgba(248,113,113,.4); background: rgba(248,113,113,.08);
  color: #FCA5A5; border-radius: .9rem; padding: .9rem 1.1rem; font-size: .85rem;
  line-height: 1.5;
}
.sec-light .form-error, .sec-white .form-error, .card-light .form-error { color: #B91C1C; }

/* Honeypot — kept in the DOM for bots, removed from view, tab order and a11y.
   Not display:none (some bots skip hidden fields); pushed far off-screen. */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Segmented option pills used across the advisor / simulator / register form */
.opt {
  display: block; cursor: pointer; padding: .8rem 1rem; border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  font-size: .9rem; font-weight: 600; transition: all .25s; text-align: left;
}
.opt:hover { border-color: rgba(95,227,208,.5); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.is-picked, .opt:has(input:checked) {
  border-color: var(--rb-mint); background: rgba(95,227,208,.12);
  box-shadow: 0 0 0 3px rgba(95,227,208,.12);
}

/* --------------------------------------------------------- sticky CTA ---- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  transform: translateY(110%); transition: transform .4s cubic-bezier(.2,.7,.3,1);
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(8,13,38,.92); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.sticky-cta.is-up { transform: translateY(0); }
@media (min-width: 1280px) { .sticky-cta { display: none; } }

/* ---------------------------------------- floating prompt coordination --- */
/* Three persistent prompts used to compete for the bottom-right corner. They
   are now tiered by assets/js/site.js, which sets these two classes on <html>:
     .rb-bar-up      the sticky CTA bar is showing → the float lifts above it
     .rb-modal-open  the exit dialog is open       → bar and float step aside  */

.wa-float { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .25s; }
.rb-bar-up .wa-float { transform: translateY(-4.25rem); }

.rb-modal-open .sticky-cta { transform: translateY(110%) !important; }
.rb-modal-open .wa-float   { opacity: 0; pointer-events: none; }
/* The dialog owns the page while it is open. */
.rb-modal-open .scroll-rail { opacity: 0; }

/* --------------------------------------------------------------- nav ----- */

.nav-shell { transition: background-color .35s, border-color .35s, backdrop-filter .35s; }
.nav-shell.is-stuck {
  background: rgba(6,10,30,.88); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.dropdown { transition: opacity .22s, transform .22s, visibility .22s; }
.nav-item:hover .dropdown, .dropdown:hover, .dropdown.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* Nav dropdown panels live inside .nav-shell, which gets its own
   backdrop-filter once stuck (see §6). A nested backdrop-filter can't see the
   page behind a backdrop-filtered ancestor, so the panel's blur collapses on
   scroll and the near-transparent .glass gradient shows straight through. Give
   these panels a solid navy base — keeping the glass tint as a top layer — so
   they read identically whether the header is stuck or not. */
.dropdown .glass {
  background:
    linear-gradient(158deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(9,14,38,.98);
}

/* ------------------------------------------------------- anchor offset --- */
/* The nav is fixed, so an in-page jump used to land with the heading hidden
   underneath it. `.sec-anchor` was already being applied in the markup but was
   never defined — any section with an id gets the offset now. */
section[id], .sec-anchor { scroll-margin-top: 6.5rem; }

/* ------------------------------------------------------------- a11y ----- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rb-mint); outline-offset: 3px; border-radius: 6px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--rb-mint); color: var(--rb-navy-950); padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js-on [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------- legal pages --- */
/* Tailwind's typography plugin is not loaded, so the legal documents in
   legal/*.html style their prose through this single scoped block. Wrap the
   document body in `.legal` and write plain semantic HTML inside it. */

.legal { color: var(--rb-ink-soft); font-size: .95rem; line-height: 1.75; }

.legal > section + section { margin-top: 2.75rem; }

.legal h2 {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
  color: var(--rb-ink); margin-bottom: .9rem;
  padding-bottom: .6rem; border-bottom: 1px solid #E1E8F7;
}
.legal h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--rb-ink);
  margin-top: 1.6rem; margin-bottom: .5rem;
}
.legal p { margin-bottom: 1rem; }
.legal p:last-child { margin-bottom: 0; }

.legal ul, .legal ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: .45rem; padding-left: .2rem; }
.legal li::marker { color: var(--rb-violet); }

.legal a { color: var(--rb-violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--rb-magenta); }

.legal strong { color: var(--rb-ink); font-weight: 700; }

.legal table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .875rem; }
.legal th, .legal td { border: 1px solid #E1E8F7; padding: .6rem .75rem; text-align: left; vertical-align: top; }
.legal th { background: var(--rb-off); color: var(--rb-ink); font-weight: 700; }

/* Draft-status banner shown at the top of every legal document */
.legal-notice {
  border: 1px solid #F5D48A; background: #FEF8EC; border-radius: 1rem;
  padding: 1.15rem 1.35rem; color: #6B4E12; font-size: .875rem; line-height: 1.7;
}
.legal-notice strong { color: #6B4E12; }
.legal-notice + section { margin-top: 2.5rem; }

/* Contact card closing each document */
.legal-contact {
  border: 1px solid #E1E8F7; background: var(--rb-off); border-radius: 1rem;
  padding: 1.4rem 1.5rem;
}
.legal-contact a { color: var(--rb-violet); }

/* Sticky table of contents */
.legal-toc { font-size: .85rem; }
.legal-toc a {
  display: block; padding: .4rem .75rem; border-left: 2px solid #E1E8F7;
  color: var(--rb-ink-mute); transition: color .2s, border-color .2s, background-color .2s;
}
.legal-toc a:hover { color: var(--rb-violet); border-left-color: var(--rb-violet); background: var(--rb-off); }

@media (min-width: 1024px) {
  .legal-toc-wrap { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; }
}

/* ------------------------------------------------- resource articles ---- */
/* Long-form prose for resource/*.html articles. Same no-typography-plugin
   approach as .legal; wrap the article body in `.article-prose`. Drop a real
   article by duplicating resources/article-template.html — see that file. */
.article-prose { color: var(--rb-ink-soft); font-size: 1.02rem; line-height: 1.8; }
.article-prose > * + * { margin-top: 1.15rem; }
.article-prose h2 {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
  color: var(--rb-ink); margin-top: 2.4rem;
}
.article-prose h3 {
  font-size: 1.15rem; font-weight: 700; color: var(--rb-ink);
  margin-top: 1.8rem;
}
.article-prose ul, .article-prose ol { padding-left: 1.35rem; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin-bottom: .5rem; padding-left: .2rem; }
.article-prose li::marker { color: var(--rb-violet); }
.article-prose a { color: var(--rb-violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-prose a:hover { color: var(--rb-magenta); }
.article-prose strong { color: var(--rb-ink); font-weight: 700; }

.article-lead { font-size: 1.2rem; line-height: 1.65; color: var(--rb-ink); font-weight: 500; }
.article-meta { color: var(--rb-ink-mute); font-size: .85rem; }
.article-meta > * + *::before { content: "·"; margin: 0 .55rem; color: #C7D4F0; }

.article-quote {
  border-left: 3px solid var(--rb-violet); padding: .35rem 0 .35rem 1.25rem;
  font-size: 1.2rem; line-height: 1.6; font-weight: 600; color: var(--rb-ink);
}
.article-takeaways {
  border: 1px solid #E1E8F7; background: var(--rb-off); border-radius: 1rem;
  padding: 1.5rem 1.6rem;
}
.article-takeaways h2 { margin-top: 0; font-size: 1.1rem; border: 0; }
.article-figure {
  border: 1px dashed #C7D4F0; background: #fff; border-radius: 1rem;
  padding: 2.5rem 1.5rem; text-align: center; color: var(--rb-ink-mute); font-size: .85rem;
}

/* ---------------------------------------------------- typewriter caret -- */
/* Blinking caret for the typewriter effect (site.js initTypewriter fills the
   text). Currently used by the hero phone's "Your Platform" brand overlay
   (.phone-brand, styled inline in index.html); reusable anywhere a
   [data-typewriter] + .tw-caret pair is placed. */
.tw-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: currentColor; vertical-align: -.12em;
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { animation: none; } }

/* -------------------------------------------------------------- print --- */
@media print {
  .nav-shell, .sticky-cta, .wa-float, .tx-ticker { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------- language switcher --- */
/* Our own dropdown UI (design-system styled), driven by the hidden Google
   Translate widget. Reuses `.dropdown` for the open/close transition and
   `.dropdown .glass` for the stuck-header solid base — see the nav section.
   Width/max-height live here, not as Tailwind utilities, so no CSS rebuild is
   needed. See assets/js/langswitch.js and PROJECT_FLOW.md §6. */
.lang-menu { width: 12rem; z-index: 55; }
.lang-menu > .glass { max-height: min(70vh, 26rem); overflow-y: auto; }

.lang-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border-radius: .75rem; padding: .55rem 1rem; text-align: left;
  font-size: .875rem; color: rgba(255,255,255,.8);
  transition: background-color .2s, color .2s;
}
.lang-opt:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-opt[aria-current="true"] { color: var(--rb-mint); font-weight: 600; }
.lang-opt[aria-current="true"]::after { content: '✓'; margin-left: .75rem; font-size: .8rem; }

/* First-run language chooser. Shown once per browser (localStorage flag) the
   first time someone lands with no saved choice; the pick is written to
   `googtrans` + localStorage and the page reloads. Built entirely in
   assets/js/langswitch.js — the markup carries `notranslate` so the native
   language names are never themselves translated. Styling lives here (not as
   Tailwind utilities) so no CSS rebuild is needed. See PROJECT_FLOW.md §6. */
.lang-gate {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(5,8,28,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s ease;
}
.lang-gate.is-open { opacity: 1; }
.lang-gate__card {
  width: 100%; max-width: 30rem; max-height: 88vh; overflow-y: auto;
  border-radius: 1.25rem; padding: 1.6rem;
  transform: translateY(10px); transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.lang-gate.is-open .lang-gate__card { transform: translateY(0); }
.lang-gate__eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rb-mint);
}
.lang-gate__title { margin-top: .4rem; font-size: 1.35rem; font-weight: 700; color: #fff; }
.lang-gate__sub  { margin-top: .35rem; font-size: .85rem; color: rgba(255,255,255,.62); }
.lang-gate__grid {
  margin-top: 1.15rem; display: grid; gap: .55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lang-gate__opt {
  border-radius: .8rem; padding: .7rem .9rem; text-align: left;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  font-size: .95rem; color: rgba(255,255,255,.88);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.lang-gate__opt:hover {
  background: rgba(255,255,255,.09); border-color: var(--rb-ring);
  transform: translateY(-2px); color: #fff;
}
.lang-gate__foot { margin-top: 1.15rem; text-align: center; }
@media (max-width: 380px) { .lang-gate__grid { grid-template-columns: 1fr; } }

/* Hidden mount for Google's widget. Kept in the DOM — the widget reads the
   googtrans cookie on load and translates the page — but off-screen and inert
   so Google's own UI never shows. */
#google_translate_element {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Suppress every piece of Google's stock chrome: the banner frame (which shoves
   the whole page down), tooltips, the balloon, and the translated-span
   highlight. `body { top: 0 }` undoes the offset the banner sets inline. */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
.goog-tooltip, .goog-tooltip:hover,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; }

/* ==========================================================================
   MOTION LAYER
   Paired with assets/js/motion.js. Every effect here degrades to nothing
   under prefers-reduced-motion (see the block at the end of this file).
   ========================================================================== */

/* ------------------------------------------------- scroll progress ------ */

.scroll-rail {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80;
  pointer-events: none; background: rgba(255,255,255,.06);
}
.scroll-rail > span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--rb-mint), var(--rb-cyan) 45%, var(--rb-violet));
  box-shadow: 0 0 14px rgba(56,189,248,.65);
}

/* ------------------------------------------------------- aurora --------- */

.aurora {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 75%);
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: .30; will-change: transform;
}
.aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: -8vw; top: -14vw;
  background: radial-gradient(circle, rgba(124,58,237,.85), transparent 68%);
  animation: aurora-a 26s ease-in-out infinite;
}
.aurora i:nth-child(2) {
  width: 40vw; height: 40vw; right: -6vw; top: 14%;
  background: radial-gradient(circle, rgba(56,189,248,.70), transparent 68%);
  animation: aurora-b 32s ease-in-out infinite;
}
.aurora i:nth-child(3) {
  width: 34vw; height: 34vw; left: 34%; bottom: -14vw;
  background: radial-gradient(circle, rgba(95,227,208,.55), transparent 68%);
  animation: aurora-c 38s ease-in-out infinite;
}
@keyframes aurora-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(9vw,6vh,0) scale(1.14); }
  66%     { transform: translate3d(4vw,-5vh,0) scale(.92); }
}
@keyframes aurora-b {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  40%     { transform: translate3d(-11vw,7vh,0) scale(1.18); }
  75%     { transform: translate3d(-3vw,-6vh,0) scale(.9); }
}
@keyframes aurora-c {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(7vw,-9vh,0) scale(1.22); }
}

/* The field sits with the decorative orbs at the back of the stacking context.
   Section content already carries `relative` and comes later in the DOM, so it
   paints above without needing a z-index — do NOT force position on children
   here, it would drag the absolutely-positioned orbs back into the flow. */

/* --------------------------------------------------------- grain -------- */

/* Sits BEHIND all content (z-index -1) with no blend mode. A fixed, full-viewport
   `mix-blend-mode: overlay` layer above the page forces the entire document into
   one blending stacking context — that is what produced the black bands while
   scrolling. Texture is now purely additive and costs the compositor nothing. */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- headline reveal ------ */

/* Per-word blur is dropped: a filter on dozens of inline layers is the second
   compositor cost that made scrolling stutter. Opacity + translate only, and the
   stagger is capped by --i-max so a 14-word headline still lands inside ~500ms. */
.js-on .split-head .w {
  display: inline-block;
  opacity: 0; transform: translateY(.32em);
  transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(min(var(--i), 12) * 30ms);
}
.js-on .split-head.is-lit .w { opacity: 1; transform: none; }

/* Word spans carry no background of their own, so the gradient stays clipped to
   the whole .grad-text line rather than restarting on every word. */

/* ------------------------------------------------------ spotlight ------- */

.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, -999px) var(--my, -999px),
              rgba(95,227,208,.16), transparent 62%);
  opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 0;
}
.spot:hover::after { opacity: 1; }
.card-light.spot::after {
  background: radial-gradient(320px circle at var(--mx, -999px) var(--my, -999px),
              rgba(124,58,237,.10), transparent 62%);
}

/* ---------------------------------------------------- cursor halo ------- */

.halo {
  position: absolute; top: 0; left: 0; width: 520px; height: 520px;
  border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  transition: opacity .5s;
  background: radial-gradient(circle, rgba(124,58,237,.20), rgba(56,189,248,.10) 42%, transparent 68%);
}

/* ------------------------------------------------ magnetic buttons ------ */

.btn-primary {
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-position .45s;
}
.btn-primary:hover { transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) - 2px), 0); }

/* A light sweep crossing the button on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .75s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary > * { position: relative; z-index: 1; }

/* ------------------------------------------ animated gradient border ---- */

.grad-border::before {
  background: conic-gradient(from var(--ang, 0deg),
    rgba(95,227,208,.85), rgba(56,189,248,.55), rgba(124,58,237,.85),
    rgba(192,38,211,.45), rgba(95,227,208,.85));
  animation: rb-rotate 9s linear infinite;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rb-rotate { to { --ang: 360deg; } }

/* --------------------------------------------------------- orbs --------- */
/* No will-change and no scroll-driven transform. A 90px-blurred layer that is
   re-rastered every scroll frame is expensive enough to drop frames and flash
   black on GPU compositing; the orbs are decorative and read fine when static.
   The parallax pass in motion.js was removed for the same reason. */

/* ----------------------------------------------------- chip shimmer ----- */

.chip { position: relative; overflow: hidden; }
.chip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%);
  background-size: 220% 100%;
  animation: rb-shimmer 5.5s ease-in-out infinite;
}

/* --------------------------------------- live transaction ticker -------- */
/* Fabricated live counter pinned to the bottom on every page (mounted from the
   footer partial). Base 37,15,89,768 at IST midnight 2026-07-23, +2,50,000/day,
   ticked live in assets/js/txcount.js. Conflicts with FLOW §8 (no unverified
   transaction volumes) — kept on explicit client instruction. */

body { padding-bottom: 2.75rem; }   /* reserve space so the fixed bar never hides the footer's last line */

.tx-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,28,.70), rgba(5,8,28,.95));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(95,227,208,.20);
  box-shadow: 0 -14px 42px -20px rgba(56,189,248,.55), inset 0 1px 0 rgba(255,255,255,.05);
  padding-bottom: env(safe-area-inset-bottom);
}
.tx-ticker::before {                 /* animated gradient hairline along the top edge */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rb-mint), var(--rb-cyan), var(--rb-violet), transparent);
  background-size: 220% 100%;
  animation: tx-sheen 6s linear infinite;
}
.tx-ticker-inner {
  display: flex; align-items: center; justify-content: center;
  gap: .55rem; padding: .5rem 1rem;
}
.tx-ticker-dot {
  flex: none; width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--rb-mint); box-shadow: 0 0 0 0 rgba(95,227,208,.55);
  animation: tx-pulse 1.8s ease-out infinite;
}
.tx-ticker-label {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .62rem; font-weight: 700; color: rgba(214,224,255,.60);
}
.tx-ticker-count {
  font-weight: 800; font-size: 1.02rem; letter-spacing: .015em; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  background: linear-gradient(90deg, var(--rb-mint), var(--rb-cyan) 55%, #fff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(56,189,248,.22);
  transform-origin: center;
}
.tx-ticker-count.is-bump { animation: tx-bump .5s ease; }
.tx-ticker-ecg {
  flex: none; width: 4.5rem; height: 1.25rem; overflow: visible;
  transform-origin: center;
  /* the whole trace throbs vertically in a lub-dub heartbeat rhythm */
  animation: tx-beat 1.4s ease-in-out infinite;
}
.tx-ticker-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tx-ecg-base  { stroke: rgba(95,227,208,.22); stroke-width: 1.4; }
.tx-ecg-pulse {                     /* a bright band that sweeps the heartbeat line, loader-style */
  stroke: var(--rb-mint); stroke-width: 1.9;
  /* 40 + 60 = 100 (= pathLength) so the dash tiles the path exactly and the
     sweep loops seamlessly with no visible jump. */
  stroke-dasharray: 40 60; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(95,227,208,.85));
  animation: tx-ecg 1.6s linear infinite;
}

/* keep the WhatsApp float and sticky CTA clear of the ticker */
.wa-float { bottom: 3.9rem !important; }
@media (min-width: 1024px) { .wa-float { bottom: 4.4rem !important; } }
.sticky-cta { bottom: 2.75rem; }

@keyframes tx-sheen { to { background-position: -220% 0; } }
@keyframes tx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(95,227,208,.55); }
  70%  { box-shadow: 0 0 0 .5rem rgba(95,227,208,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,227,208,0); }
}
@keyframes tx-bump {
  40%  { transform: translateY(-1px) scale(1.02); filter: brightness(1.3); }
  100% { transform: none; }
}
@keyframes tx-ecg { to { stroke-dashoffset: -100; } }
@keyframes tx-beat {                 /* lub-dub — two quick amplitude spikes, then rest */
  0%, 45%, 100% { transform: scaleY(1); }
  8%            { transform: scaleY(1.4); }   /* lub */
  16%           { transform: scaleY(1); }
  26%           { transform: scaleY(1.22); }  /* dub */
  34%           { transform: scaleY(1); }
}

@media (max-width: 380px) { .tx-ticker-label { display: none; } }

/* ------------------------------------------------ reduced motion -------- */

@media (prefers-reduced-motion: reduce) {
  .aurora, .grain, .halo { display: none !important; }
  .js-on .split-head .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .chip::after, .btn-primary::after { display: none; }
  .grad-border::before { animation: none; }
  .tx-ticker::before, .tx-ticker-dot, .tx-ticker-count.is-bump { animation: none !important; }
  /* The heartbeat IS the "live" signal, so it keeps beating even under reduced
     motion — just gentler: a slower sweep, no glow flicker, and a softer throb.
     `!important` here is required to beat the global reduced-motion reset above
     (`* { animation-duration:.001ms; animation-iteration-count:1 }`), which would
     otherwise freeze it after a single instant tick. */
  .tx-ticker-ecg {
    animation-duration: 1.8s !important; animation-iteration-count: infinite !important;
  }
  .tx-ecg-pulse {
    animation-duration: 4.5s !important; animation-iteration-count: infinite !important;
    filter: none;
  }
}