/* ============================================================
   KoiPay — shared stylesheet (all pages)
   Design system: "Frosted glass cathedral at midnight"
   Midnight canvas · frosted-glass surfaces · blueprint grid ·
   luminous blue-white type · one violet CTA accent
   ============================================================ */

:root{
  /* Core tokens */
  --color-midnight-canvas:#05060f;
  --color-fog-veil:#9da7ba;
  --color-moon-mist:#c7d3ea;
  --color-frost-glow:#d1e4fa;
  --color-ice-highlight:#d8ecf8;
  --gradient-ice-highlight:linear-gradient(0deg,#98c0ef 0%,#d8ecf8 100%);
  --color-pure-white:#ffffff;
  --color-void-violet:#663af3;
  --color-blueprint-blue:#b6d9fc;
  --color-glass-edge:rgba(186,215,247,0.12);
  --color-luminous-fill:rgba(199,211,234,0.12);

  /* Secondary accents (used sparingly: pips, KPI values, bars, badges) */
  --accent-teal:#34b8a0;
  --accent-teal-deep:#1f8a76;
  --accent-teal-bright:#4ed3b8;
  --accent-amber:#e8955c;
  --accent-amber-deep:#c06a35;
  --accent-blue:#4ea2f0;
  --accent-teal-soft:rgba(52,184,160,0.14);

  /* Surfaces */
  --surface-frosted-glass:rgba(186,214,247,0.03);
  --surface-frost-wash:rgba(186,214,247,0.06);
  --surface-input:rgba(199,211,234,0.06);
  --surface-deep-glass:rgba(5,6,15,0.97);

  /* Elevation */
  --elev-card:inset 0 1px 1px rgba(199,211,234,0.12),inset 0 24px 48px rgba(199,211,234,0.05),0 24px 32px rgba(6,6,14,0.7);
  --elev-modal:inset 0 1px 1px rgba(216,236,248,0.2),inset 0 24px 48px rgba(168,216,245,0.06),0 16px 32px rgba(0,0,0,0.3);
  --shadow-subtle:rgba(186,215,247,0.12) 0px 0px 0px 1px inset;
  --glow-halo:0 0 6px rgba(186,207,247,0.32),0 0 12px rgba(238,186,247,0.24);

  /* Typography */
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Layout */
  --page-max-width:1200px;
  --card-padding:24px;

  /* Radii */
  --radius-cards:16px;
  --radius-badges:6px;
  --radius-inputs:6px;
  --radius-buttons:999px;
  --radius-icons:9999px;

  /* ---- Legacy aliases (still referenced by sub-page inline styles) ---- */
  --border:var(--color-glass-edge);
  --border-hover:rgba(186,215,247,0.28);
  --text:var(--color-frost-glow);
  --text-2:var(--color-moon-mist);
  --text-3:var(--color-fog-veil);
  --neon:var(--color-blueprint-blue);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;color-scheme:dark}
html,body{background:var(--color-midnight-canvas);color:var(--color-frost-glow);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-height:1.5;letter-spacing:-0.01em}
body{overflow-x:hidden}
::selection{background:var(--color-void-violet);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:normal;line-height:1.16;text-wrap:balance}
p{text-wrap:pretty;max-width:62ch}
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px}
section{padding:120px 0;position:relative}
@media (max-width:768px){section{padding:64px 0}}

/* Bilingual toggle visibility */
html[data-lang="en"] [lang="hi"]{display:none}
html[data-lang="hi"] [lang="en"]{display:none}
/* Hindi swaps the font tokens themselves, so every var()-based rule follows */
html[lang="hi"]{
  --font-body:'Noto Sans Devanagari',ui-sans-serif,system-ui,sans-serif;
  --font-display:'Noto Sans Devanagari','Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Noto Sans Devanagari',ui-monospace,monospace;
}

/* ---- Ambient atmosphere: spotlight halo + blueprint grid ---- */
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ambient::before{content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);width:1400px;height:900px;background:radial-gradient(ellipse at 50% 0%,rgba(124,145,182,0.28) 0%,rgba(124,145,182,0.10) 35%,transparent 70%);filter:blur(30px)}
.ambient::after{content:"";position:absolute;left:50%;bottom:-300px;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse,rgba(102,58,243,0.10),transparent 70%);filter:blur(60px)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(186,215,247,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(186,215,247,0.06) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);pointer-events:none;z-index:0}

/* ---- Nav ---- */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(5,6,15,0.78);border-bottom:1px solid var(--color-glass-edge)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1280px;margin:0 auto;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--color-ice-highlight)}
.logo-mark{width:34px;height:34px;border-radius:var(--radius-icons);background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);display:grid;place-items:center}
.logo-mark img{width:26px;height:26px;object-fit:contain;display:block}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--color-moon-mist)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--color-pure-white)}
.nav-cta{display:flex;gap:12px;align-items:center}
.lang-toggle{display:inline-flex;gap:0;font-family:var(--font-mono);font-size:12px;border-radius:var(--radius-buttons);box-shadow:var(--shadow-subtle);overflow:hidden}
.lang-toggle button{padding:6px 12px;color:var(--color-fog-veil);transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.lang-toggle button.active{background:var(--surface-frost-wash);color:var(--color-ice-highlight)}
.lang-toggle button:hover{color:var(--color-frost-glow)}
.flag{width:19px;height:13px;border-radius:2px;flex-shrink:0;display:inline-block;vertical-align:middle;opacity:.85}
@media (max-width:860px){.nav-links{display:none}}
/* Mobile nav */
.nav-toggle{display:none;width:40px;height:40px;border-radius:var(--radius-buttons);box-shadow:var(--shadow-subtle);color:var(--color-frost-glow);align-items:center;justify-content:center;flex-shrink:0}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mobile-nav{display:none;flex-direction:column;padding:8px 24px 20px;border-bottom:1px solid var(--color-glass-edge);background:var(--surface-deep-glass);backdrop-filter:blur(18px)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:13px 2px;font-size:16px;color:var(--color-moon-mist);border-bottom:1px solid var(--color-glass-edge)}
.mobile-nav a:active{color:var(--color-pure-white)}
.mobile-nav .lang-toggle{margin-top:16px;align-self:flex-start}
@media (max-width:860px){.nav-toggle{display:inline-flex}.nav-cta>.lang-toggle{display:none}}
@media (min-width:861px){.mobile-nav{display:none!important}.nav-toggle{display:none!important}}

/* ---- Buttons: every button is a pill ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-buttons);font-weight:500;font-size:14px;transition:all .2s ease;white-space:nowrap}
.btn-primary{background:var(--color-void-violet);color:#fff;box-shadow:inset 0 1px 1px rgba(216,236,248,0.2),0 8px 24px rgba(102,58,243,0.35)}
.btn-primary:hover{background:#7550f5;transform:translateY(-1px);box-shadow:inset 0 1px 1px rgba(216,236,248,0.25),0 12px 32px rgba(102,58,243,0.45)}
.btn-secondary{background:var(--surface-frost-wash);color:var(--color-pure-white);box-shadow:var(--shadow-subtle)}
.btn-secondary:hover{background:rgba(186,214,247,0.12)}
/* Role-colored CTAs: Trader goes teal; Agent keeps the violet primary; the
   hero Profit-calculator link gets an amber outline. */
.btn-primary[data-apply="trader"]{background:var(--accent-teal-deep);box-shadow:inset 0 1px 1px rgba(216,236,248,0.2),0 8px 24px rgba(31,138,118,0.35)}
.btn-primary[data-apply="trader"]:hover{background:var(--accent-teal);box-shadow:inset 0 1px 1px rgba(216,236,248,0.25),0 12px 32px rgba(52,184,160,0.45)}
.btn-secondary[href$="calculator.html"]{color:var(--accent-amber);background:rgba(232,149,92,0.08);box-shadow:rgba(232,149,92,0.35) 0px 0px 0px 1px inset}
.btn-secondary[href$="calculator.html"]:hover{background:rgba(232,149,92,0.15)}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-lg{padding:13px 26px;font-size:15px}
.tg-icon{width:18px;height:18px;display:inline-block;flex-shrink:0}

/* ---- Section heads: centered eyebrow flanked by fading lines ---- */
.eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-moon-mist);font-weight:400;margin-bottom:20px;font-feature-settings:"tnum" on}
.eyebrow::before,.eyebrow::after{content:"";height:1px;flex:1;max-width:120px}
.eyebrow::before{background:linear-gradient(90deg,transparent,var(--color-glass-edge))}
.eyebrow::after{background:linear-gradient(90deg,var(--color-glass-edge),transparent)}
.sec-head{max-width:720px;margin:0 auto 64px;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head h1,.sec-head h2{font-size:clamp(30px,3.8vw,44px);font-family:var(--font-display);font-weight:500;line-height:1.16;color:var(--color-ice-highlight);text-wrap:balance}
.sec-head h1 .accent,.sec-head h2 .accent{background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{margin:18px auto 0;color:var(--color-moon-mist);font-size:17px;line-height:1.6;max-width:640px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--radius-badges);background:var(--color-luminous-fill);box-shadow:var(--shadow-subtle);font-size:13px;font-weight:500;color:var(--color-frost-glow);margin-bottom:28px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-teal);box-shadow:0 0 12px var(--accent-teal);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- Glass cards ---- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.cards-3{grid-template-columns:1fr}}
.card{background:var(--surface-frosted-glass);border-radius:var(--radius-cards);padding:var(--card-padding);box-shadow:var(--elev-card);transition:all .3s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden}
.card:hover{background:rgba(186,214,247,0.05);transform:translateY(-3px)}
.card .icon,.ic-tile{width:56px;height:56px;border-radius:var(--radius-icons);background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);display:grid;place-items:center;color:var(--color-frost-glow);margin-bottom:22px;font-family:var(--font-display);font-weight:500;font-size:19px}
.card .icon svg,.ic-tile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--font-display);font-size:20px;font-weight:500;margin-bottom:10px;line-height:1.2;color:var(--color-ice-highlight)}
.card p{color:var(--color-moon-mist);font-size:14px;line-height:1.6}
.req-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:860px){.req-grid{grid-template-columns:1fr}}

/* Trial offer note inside a card */
.trial-note{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:12px 14px;border-radius:var(--radius-badges);background:var(--accent-teal-soft);box-shadow:rgba(52,184,160,0.25) 0px 0px 0px 1px inset;font-size:13.5px;line-height:1.55;color:var(--color-moon-mist)}
.trial-note strong{color:var(--accent-teal)}
.trial-badge{flex-shrink:0;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:#05060f;background:var(--accent-teal);border-radius:var(--radius-badges);padding:3px 7px;margin-top:2px}

/* ---- Steps: circular icon tiles on a thin timeline ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps::before{content:"";position:absolute;top:32px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--color-glass-edge) 15%,var(--color-glass-edge) 85%,transparent);z-index:0}
.step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.step .node{position:relative;width:64px;height:64px;border-radius:var(--radius-icons);display:grid;place-items:center;background:#0a0c18;box-shadow:var(--elev-modal);color:var(--color-frost-glow);transition:all .35s cubic-bezier(.22,.61,.36,1);margin-bottom:22px}
.step .node svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step .num{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-badges);background:var(--color-luminous-fill);box-shadow:var(--shadow-subtle);color:var(--color-ice-highlight);font-family:var(--font-mono);font-size:11px;display:grid;place-items:center;font-feature-settings:"tnum" on}
.step:hover .node{transform:translateY(-4px);box-shadow:var(--elev-modal),var(--glow-halo)}
.step h4{font-family:var(--font-display);font-size:17px;font-weight:500;margin-bottom:8px;color:var(--color-ice-highlight)}
.step p{color:var(--color-moon-mist);font-size:14px;line-height:1.6;max-width:240px;margin:0 auto}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:40px 24px}.steps::before{display:none}}
@media (max-width:540px){.steps{grid-template-columns:1fr;gap:18px}.step{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;text-align:left;grid-template-areas:"node title" "node desc"}.step .node{grid-area:node;margin-bottom:0;width:56px;height:56px}.step .node svg{width:22px;height:22px}.step h4{grid-area:title;margin:0 0 3px}.step p{grid-area:desc;max-width:none;margin:0}}

/* ---- Comparison table ---- */
.compare{border-radius:var(--radius-cards);overflow:hidden;background:var(--surface-frosted-glass);box-shadow:var(--elev-card)}
.cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:18px 28px;border-bottom:1px solid rgba(186,215,247,0.08);align-items:center;font-size:15px;color:var(--color-moon-mist)}
.cmp-row:last-child{border-bottom:none}
.cmp-row.head{background:var(--surface-frost-wash);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-fog-veil)}
.cmp-row.head .us{color:var(--color-ice-highlight)}
.cmp-row .us{color:var(--color-ice-highlight);font-weight:500;font-family:var(--font-mono);font-size:14px}
.cmp-row .them{color:var(--color-fog-veil);font-family:var(--font-mono);font-size:14px}
@media (max-width:700px){.cmp-row{padding:14px 16px;font-size:13px;grid-template-columns:1.4fr .9fr .9fr}}

/* ---- FAQ ---- */
.faq{max-width:820px;margin:0 auto}
.q{border-bottom:1px solid var(--color-glass-edge);padding:22px 0}
.q summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-size:18px;font-weight:500;list-style:none;gap:16px;color:var(--color-ice-highlight);transition:color .2s ease}
.q summary:hover{color:var(--color-pure-white)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-family:var(--font-body);font-size:24px;color:var(--color-moon-mist);font-weight:400;flex-shrink:0}
.q[open] summary::after{content:"−"}
.q p{color:var(--color-moon-mist);margin-top:14px;font-size:15px;line-height:1.7;max-width:68ch}

/* ---- Final CTA ---- */
.final{text-align:center;padding:160px 0;position:relative;overflow:hidden}
.final h2{font-size:clamp(34px,4.6vw,48px);max-width:820px;margin:0 auto;font-family:var(--font-display);font-weight:500;line-height:1.17;color:var(--color-ice-highlight);text-wrap:balance}
.final h2 .accent{background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent}
.final p{margin:20px auto 0;color:var(--color-moon-mist);font-size:17px}
.final .ctas{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.final .micro{margin-top:22px;font-size:13px;color:var(--color-fog-veil);font-family:var(--font-mono)}
.final-glow{position:absolute;left:50%;top:0;transform:translateX(-50%);width:1200px;height:700px;background:radial-gradient(ellipse at 50% 0%,rgba(124,145,182,0.22),transparent 65%);pointer-events:none}

/* ---- Footer ---- */
footer{border-top:1px solid var(--color-glass-edge);padding:56px 0 32px;color:var(--color-fog-veil);font-size:13px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-col h6{color:var(--color-frost-glow);font-family:var(--font-mono);font-weight:400;font-size:12px;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px}
.foot-col a{display:block;padding:6px 0;color:var(--color-fog-veil);transition:color .2s}
.foot-col a:hover{color:var(--color-frost-glow)}
.foot-bottom{border-top:1px solid var(--color-glass-edge);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---- Prose (legal / blog articles) ---- */
.prose{max-width:740px;color:var(--color-moon-mist);font-size:16px;line-height:1.8}
.prose h2{font-family:var(--font-display);color:var(--color-ice-highlight);font-size:24px;font-weight:500;margin:40px 0 14px;line-height:1.2}
.prose h3{font-family:var(--font-display);color:var(--color-ice-highlight);font-size:19px;font-weight:500;margin:28px 0 10px}
.prose p{margin-bottom:16px;max-width:740px}
.prose ul{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--color-frost-glow);text-decoration:underline;text-decoration-color:var(--color-glass-edge);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--color-frost-glow)}
.prose strong{color:var(--color-frost-glow)}
.page-meta{font-family:var(--font-mono);font-size:13px;color:var(--color-fog-veil);margin-bottom:32px}

/* ---- Inputs ---- */
input[type=text],input[type=email],input[type=number],input[type=tel],select,textarea{font-family:var(--font-body);border-radius:var(--radius-inputs);background:var(--surface-input);color:var(--color-pure-white);box-shadow:var(--shadow-subtle);border:none;padding:10px 12px;font-size:14px;outline:none;transition:box-shadow .2s}
input:focus,select:focus,textarea:focus{box-shadow:rgba(186,215,247,0.24) 0px 0px 0px 1px inset}
::placeholder{color:rgba(199,211,234,0.6)}

/* Custom select: frost chevron instead of the native arrow */
select{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c7d3ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
select:hover{background-color:rgba(199,211,234,0.1)}
select option{background:#0a0c18;color:var(--color-frost-glow)}

/* Number inputs: hide native spinners (custom steppers are added per-page) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Custom number stepper */
.num-wrap{position:relative;display:flex;flex:1;min-width:0}
.num-wrap input{flex:1;min-width:0;padding-right:34px}
.num-steps{position:absolute;top:4px;right:4px;bottom:4px;width:24px;display:flex;flex-direction:column;gap:2px}
.num-steps button{flex:1;display:grid;place-items:center;border-radius:4px;background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);color:var(--color-moon-mist);padding:0;transition:all .15s;cursor:pointer}
.num-steps button:hover{background:rgba(186,214,247,0.14);color:var(--color-ice-highlight)}
.num-steps button:active{background:rgba(186,214,247,0.2)}
.num-steps svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ============================================================
   Landing-specific components (index.html)
   ============================================================ */

/* ---- Hero ---- */
.hero{padding:96px 0 80px;position:relative;overflow:hidden;text-align:center}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{justify-content:center;margin-bottom:28px}
.hero h1{font-size:clamp(40px,6vw,72px);font-family:var(--font-display);font-weight:500;line-height:1.1;max-width:900px;background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.hero .sub{margin:26px auto 0;font-size:17px;line-height:1.6;color:var(--color-moon-mist);max-width:600px}
.hero-ctas{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;justify-content:center}
.hero-trust{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--color-moon-mist);font-family:var(--font-mono)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:15px;height:15px;color:var(--accent-teal);flex-shrink:0}

/* Floating glass rates card */
.hero-term{position:relative;margin:64px auto 0;max-width:560px;width:100%;background:var(--surface-deep-glass);border-radius:var(--radius-cards);padding:32px;box-shadow:var(--elev-modal);text-align:left;z-index:1}
.hero-live{padding:28px}
.live-head{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.16em;color:var(--color-moon-mist);margin-bottom:18px}
.live-head .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-teal);box-shadow:0 0 12px var(--accent-teal);animation:pulse 2s ease-in-out infinite}
.live-head .live-count{margin-left:auto;color:var(--color-fog-veil);letter-spacing:0.1em}
.rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.rate-card{padding:20px 16px;border-radius:var(--radius-cards);background:var(--surface-frosted-glass);box-shadow:inset 0 1px 1px rgba(216,236,248,0.2),inset 0 24px 48px rgba(168,216,245,0.06);text-align:center;transition:all .3s cubic-bezier(.22,.61,.36,1)}
.rate-card:hover{background:rgba(186,214,247,0.05)}
.rate-card .pct{font-family:var(--font-display);font-weight:500;font-size:clamp(42px,5vw,56px);line-height:1;background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent}
.rate-card .lbl{margin-top:10px;font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--color-frost-glow)}
.rate-card .sub{margin-top:3px;font-family:var(--font-mono);font-size:11px;color:var(--color-fog-veil);letter-spacing:0.04em}
.income-anchor{padding-top:18px;border-top:1px solid var(--color-glass-edge);text-align:center;margin-bottom:18px}
.income-anchor .pre{font-family:var(--font-mono);font-size:11px;color:var(--color-moon-mist);letter-spacing:0.12em;text-transform:uppercase}
.income-anchor .big{margin-top:6px;font-family:var(--font-display);font-weight:500;font-size:clamp(32px,4.2vw,42px);color:var(--color-ice-highlight);line-height:1.05}
.income-anchor .big .cur{color:var(--color-moon-mist)}
.income-anchor .big .unit{font-size:0.55em;color:var(--color-moon-mist);font-weight:400;margin-left:4px}
.income-anchor .post{margin-top:6px;font-family:var(--font-mono);font-size:11px;color:var(--color-fog-veil);letter-spacing:0.04em}
.trust-strip{font-family:var(--font-mono);font-size:12px;color:var(--color-fog-veil);text-align:center;letter-spacing:0.04em}
@media (max-width:540px){.rate-card .pct{font-size:40px}.income-anchor .big{font-size:30px}}

/* ---- Avatars ---- */
.av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-icons);background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);color:var(--color-frost-glow);font-family:var(--font-display);font-weight:500;font-size:13px;flex-shrink:0}
.av.lg{width:56px;height:56px;font-size:22px}

/* ---- Requirements strip (top-of-page echo of #requirements) ---- */
.req-strip{padding:0 0 8px}
.req-strip-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-radius:var(--radius-cards);background:var(--surface-frosted-glass);box-shadow:var(--elev-card)}
.req-strip-label{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-fog-veil);white-space:nowrap}
.req-strip-label .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-amber);box-shadow:0 0 12px var(--accent-amber);animation:pulse 2s ease-in-out infinite}
.req-chip{flex:1;min-width:250px;display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:12px;background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);transition:all .25s cubic-bezier(.22,.61,.36,1)}
.req-chip:hover{box-shadow:rgba(186,215,247,0.28) 0px 0px 0px 1px inset;transform:translateY(-1px)}
.req-ic{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--neon);background:rgba(182,217,252,0.08);box-shadow:var(--shadow-subtle)}
.req-body{min-width:0}
.req-body strong{display:block;font-size:14.5px;font-weight:600;color:var(--color-frost-glow);line-height:1.35}
.req-body em{font-style:normal;font-size:12.5px;color:var(--color-fog-veil);line-height:1.4}
.req-more{font-size:13px;font-weight:500;color:var(--neon);white-space:nowrap;margin-left:auto;transition:opacity .15s}
.req-more:hover{opacity:0.75}
@media (max-width:900px){.req-strip-label{width:100%}.req-more{width:100%;margin-left:0;text-align:right}}

/* ---- Proof bar ---- */
.proof-bar{padding:36px 0;background:var(--surface-frosted-glass);border-top:1px solid var(--color-glass-edge);border-bottom:1px solid var(--color-glass-edge)}
.proof-bar .wrap{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.proof-stack{display:flex;align-items:center}
.av-stack{display:flex}
.av-stack .av{margin-left:-12px;box-shadow:var(--shadow-subtle),0 0 0 2px var(--color-midnight-canvas)}
.av-stack .av:first-child{margin-left:0}
.proof-plus{margin-left:14px;font-family:var(--font-mono);font-size:13px;color:var(--color-moon-mist);letter-spacing:0.05em}
.proof-text{font-size:15px;color:var(--color-moon-mist)}
.proof-text .accent{color:var(--color-ice-highlight);font-weight:500}
.proof-sep{width:1px;height:28px;background:var(--color-glass-edge)}
@media (max-width:600px){.proof-bar .wrap{flex-direction:column;gap:14px;text-align:center}.proof-sep{display:none}}

/* Trustpilot widget */
.trustpilot{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--color-moon-mist)}
.trustpilot:hover .tp-name{color:var(--color-pure-white)}
.tp-logo{display:inline-flex;align-items:center;gap:5px}
.tp-logo .tp-star{width:19px;height:19px;flex-shrink:0}
.tp-name{font-family:var(--font-display);font-weight:500;color:var(--color-ice-highlight);font-size:16px}
.tp-stars{display:inline-flex;gap:3px}
.tp-stars svg{width:19px;height:19px;display:block}
.tp-score{font-family:var(--font-mono);font-size:12px;color:var(--color-fog-veil)}
.tp-score strong{color:var(--color-frost-glow);font-weight:500}

/* ---- Stats bar ---- */
.stats-bar{border-top:1px solid var(--color-glass-edge);border-bottom:1px solid var(--color-glass-edge);background:var(--surface-frosted-glass)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-cell{padding:40px 24px;text-align:center;border-right:1px solid var(--color-glass-edge)}
.stat-cell:last-child{border-right:none}
.stat-cell .v{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.4vw,40px);background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-cell .l{margin-top:10px;font-size:12px;color:var(--color-moon-mist);font-family:var(--font-mono);letter-spacing:0.04em}
@media (max-width:760px){.stats-grid{grid-template-columns:1fr 1fr}.stat-cell:nth-child(2){border-right:none}.stat-cell:nth-child(1),.stat-cell:nth-child(2){border-bottom:1px solid var(--color-glass-edge)}}

/* ---- Earn block ---- */
.earn-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.earn-wrap{grid-template-columns:1fr;gap:36px}}
.earn-card{background:var(--surface-deep-glass);border-radius:var(--radius-cards);padding:40px;box-shadow:var(--elev-modal)}
.earn-card .lbl{font-family:var(--font-mono);font-size:11px;color:var(--color-fog-veil);text-transform:uppercase;letter-spacing:0.14em}
.earn-card .big{font-family:var(--font-display);font-weight:500;font-size:clamp(44px,6vw,72px);line-height:1;background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:10px}
.earn-card .big .u{font-size:0.5em}
.earn-rows{margin-top:28px;border-top:1px solid var(--color-glass-edge);padding-top:18px}
.earn-row{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:var(--color-moon-mist)}
.earn-row .v{font-family:var(--font-mono);color:var(--color-frost-glow);font-weight:500}
.earn-row .v.hl{color:var(--accent-teal)}
.earn-card .note{margin-top:20px;font-size:13px;color:var(--color-fog-veil);font-family:var(--font-mono);line-height:1.6}
.earn-card .calc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-family:var(--font-mono);font-size:13px;color:var(--color-frost-glow);border-radius:var(--radius-buttons);box-shadow:var(--shadow-subtle);background:var(--surface-frost-wash);padding:10px 18px;transition:all .2s}
.earn-card .calc-cta:hover{background:rgba(186,214,247,0.12)}
.earn-aside h3{font-family:var(--font-display);font-size:26px;font-weight:500;line-height:1.2;margin-bottom:16px;color:var(--color-ice-highlight)}
.earn-aside p{color:var(--color-moon-mist);font-size:16px;margin-bottom:24px}

/* ---- Banks ---- */
.upi-line{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:28px;font-family:var(--font-mono);font-size:12px;color:var(--color-fog-veil);letter-spacing:0.04em}
.upi-logo{height:28px;width:auto;display:block;opacity:.9}
.upi-line .sep{width:1px;height:20px;background:var(--color-glass-edge)}
.banks-best{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media (max-width:760px){.banks-best{grid-template-columns:1fr}}
.bank-best{position:relative;background:var(--surface-frosted-glass);border-radius:var(--radius-cards);padding:28px;display:flex;align-items:center;gap:18px;box-shadow:var(--elev-modal)}
.bank-best .badge-best{position:absolute;top:14px;right:14px;background:var(--color-luminous-fill);box-shadow:var(--shadow-subtle);color:var(--color-ice-highlight);font-family:var(--font-mono);font-size:10px;padding:4px 9px;border-radius:var(--radius-badges);letter-spacing:0.1em}
.bank-best .mark{flex-shrink:0;width:56px;height:56px;border-radius:var(--radius-icons);background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);display:grid;place-items:center;font-family:var(--font-display);font-weight:500;color:var(--color-frost-glow);font-size:18px}
.bank-best .body h4{font-family:var(--font-display);font-size:17px;font-weight:500;margin-bottom:4px;color:var(--color-ice-highlight)}
.bank-best .body p{font-size:13px;color:var(--color-moon-mist);font-family:var(--font-mono)}
.banks-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:900px){.banks-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.banks-grid{grid-template-columns:repeat(2,1fr)}}
.bank-cell{background:var(--surface-frosted-glass);box-shadow:var(--shadow-subtle);border-radius:var(--radius-cards);padding:14px 16px;display:flex;align-items:center;gap:12px;transition:background .2s}
.bank-cell:hover{background:rgba(186,214,247,0.06)}
.bank-cell .mark-sm{flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-icons);background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);display:grid;place-items:center;font-family:var(--font-mono);color:var(--color-frost-glow);font-size:10px;letter-spacing:0}
.bank-cell .name{font-size:13px;color:var(--color-moon-mist);font-family:var(--font-mono)}
.mark.brand,.mark-sm.brand{color:var(--color-frost-glow)}
.banks-foot{margin-top:24px;font-size:13px;color:var(--color-fog-veil);text-align:center;font-family:var(--font-mono)}

/* ---- Quiz bridge & affiliate panels ---- */
.quiz-bridge{background:var(--surface-frosted-glass);border-radius:var(--radius-cards);padding:48px;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--elev-card)}
@media (max-width:900px){.quiz-bridge{grid-template-columns:1fr;padding:32px}}
.quiz-bridge h3{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:500;line-height:1.16;color:var(--color-ice-highlight)}
.quiz-bridge h3 .accent{background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent}
.quiz-bridge p{margin-top:14px;color:var(--color-moon-mist);font-size:16px}
.quiz-meta{display:flex;flex-direction:column;gap:14px;font-family:var(--font-mono);font-size:13px;color:var(--color-moon-mist);position:relative;z-index:1}
.quiz-meta .row{display:flex;align-items:center;gap:10px}
.quiz-meta .row .k{color:var(--color-fog-veil);width:90px;flex-shrink:0}
.quiz-meta .row .v{color:var(--color-ice-highlight)}
.aff{background:var(--surface-frosted-glass);border-radius:var(--radius-cards);padding:56px;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--elev-card)}
@media (max-width:900px){.aff{grid-template-columns:1fr;padding:36px}}
.aff h2{font-size:clamp(26px,3.2vw,36px);font-family:var(--font-display);font-weight:500;line-height:1.16;color:var(--color-ice-highlight)}
.aff h2 .accent{background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent}
.aff p{margin-top:16px;color:var(--color-moon-mist);font-size:16px}
.aff-stats{display:grid;gap:14px;position:relative;z-index:1}
.aff-stat{padding:20px;background:var(--surface-deep-glass);border-radius:var(--radius-cards);box-shadow:var(--elev-modal)}
.aff-stat .v{font-family:var(--font-display);font-size:26px;font-weight:500;background:var(--gradient-ice-highlight);-webkit-background-clip:text;background-clip:text;color:transparent}
.aff-stat .l{font-size:13px;color:var(--color-moon-mist);margin-top:4px}

/* ---- Testimonials ---- */
.testimonial{background:var(--surface-frosted-glass);border-radius:var(--radius-cards);padding:var(--card-padding);box-shadow:var(--elev-card);transition:all .3s cubic-bezier(.22,.61,.36,1)}
.testimonial:hover{background:rgba(186,214,247,0.05);transform:translateY(-3px)}
.testimonial .t-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.testimonial .t-meta{display:flex;flex-direction:column;gap:2px;flex:1}
.testimonial .t-name{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--color-ice-highlight)}
.testimonial .t-city{font-size:13px;color:var(--color-fog-veil)}
.testimonial .t-earn{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent-teal);padding:4px 10px;border-radius:var(--radius-badges);background:var(--accent-teal-soft);box-shadow:var(--shadow-subtle);white-space:nowrap}
.testimonial .t-quote{font-size:15px;color:var(--color-moon-mist);line-height:1.65}

/* ---- Live payouts ticker ---- */
.payouts{border-radius:var(--radius-cards);background:var(--surface-frosted-glass);box-shadow:var(--elev-card);overflow:hidden;margin-bottom:40px}
.payouts-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid rgba(186,215,247,0.08);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.16em;color:var(--color-moon-mist)}
.payouts-head .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-teal);box-shadow:0 0 12px var(--accent-teal);animation:pulse 2s ease-in-out infinite}
.payouts-head .meta{margin-left:auto;color:var(--color-fog-veil);letter-spacing:0.1em}
.payouts-feed{position:relative;height:52px;overflow:hidden}
.payout-item{display:flex;align-items:center;gap:12px;padding:0 20px;height:52px;font-size:14px;color:var(--color-moon-mist);position:absolute;inset:0;opacity:0;transform:translateY(100%);transition:opacity .5s ease,transform .5s ease}
.payout-item.show{opacity:1;transform:translateY(0)}
.payout-item.leave{opacity:0;transform:translateY(-100%)}
.payout-item .pi-check{width:20px;height:20px;border-radius:50%;background:var(--accent-teal-soft);box-shadow:var(--shadow-subtle);display:grid;place-items:center;color:var(--accent-teal);flex-shrink:0}
.payout-item .pi-check svg{width:11px;height:11px}
.payout-item .pi-name{color:var(--color-frost-glow);font-weight:500}
.payout-item .pi-amt{font-family:var(--font-mono);color:var(--accent-teal);font-weight:500;margin-left:auto}
.payout-item .pi-ago{font-family:var(--font-mono);font-size:12px;color:var(--color-fog-veil);flex-shrink:0;min-width:64px;text-align:right}
@media (max-width:560px){.payout-item .pi-ago{display:none}}

/* ---- Leaderboard ---- */
.lb{border-radius:var(--radius-cards);overflow:hidden;background:var(--surface-frosted-glass);box-shadow:var(--elev-card)}
.lb-row{display:grid;grid-template-columns:48px 1.6fr 1fr 1.1fr 0.9fr 1.2fr;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid rgba(186,215,247,0.08);transition:background .2s ease}
.lb-row:last-child{border-bottom:none}
.lb-row:not(.head):hover{background:rgba(186,214,247,0.04)}
.lb-row.head{background:var(--surface-frost-wash);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--color-fog-veil)}
.lb-rank{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--color-fog-veil);text-align:center}
.lb-rank.medal{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-icons);font-size:13px;margin:0 auto;color:var(--color-midnight-canvas)}
.lb-rank.g1{background:linear-gradient(135deg,#ffd75e,#e6a700);box-shadow:0 0 16px rgba(255,200,40,0.4)}
.lb-rank.g2{background:linear-gradient(135deg,#e4ecf2,#a7b4c0);box-shadow:0 0 14px rgba(200,215,230,0.3)}
.lb-rank.g3{background:linear-gradient(135deg,#e8a56b,#b86a33);box-shadow:0 0 14px rgba(210,130,70,0.3)}
.lb-trader{display:flex;align-items:center;gap:12px;min-width:0}
.lb-trader .t-name{font-family:var(--font-display);font-weight:500;font-size:15px;line-height:1.1;color:var(--color-ice-highlight)}
.lb-trader .t-city{font-size:12px;color:var(--color-fog-veil);font-family:var(--font-mono)}
.lb-joined{font-family:var(--font-mono);font-size:13px;color:var(--color-moon-mist)}
.lb-earned{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--accent-teal)}
.lb-refs{font-family:var(--font-mono);font-size:14px;color:var(--color-frost-glow)}
.lb-refs .ic{color:var(--color-fog-veil);margin-right:5px}
.lb-tg{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:13px;color:var(--color-moon-mist);background:var(--surface-frost-wash);box-shadow:var(--shadow-subtle);border-radius:var(--radius-badges);padding:5px 10px;cursor:default;position:relative}
.lb-tg .lock{width:12px;height:12px;color:var(--color-fog-veil);flex-shrink:0}
.lb-tg .verified{width:13px;height:13px;color:var(--color-frost-glow);flex-shrink:0}
.lb-tg[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:0;white-space:nowrap;background:var(--surface-deep-glass);box-shadow:var(--elev-modal);color:var(--color-moon-mist);font-size:11px;padding:6px 10px;border-radius:var(--radius-badges);z-index:5}
.lb-foot{margin-top:20px;text-align:center;font-size:13px;color:var(--color-fog-veil);font-family:var(--font-mono)}
@media (max-width:820px){
  .lb-row.head{display:none}
  .lb-row{grid-template-columns:42px 1fr;grid-template-areas:"rank trader" "rank earned" "rank refs" "rank tg";gap:8px 14px;padding:18px}
  .lb-rank{grid-area:rank;align-self:start}
  .lb-trader{grid-area:trader}
  .lb-joined{display:none}
  .lb-earned{grid-area:earned}
  .lb-refs{grid-area:refs}
  .lb-tg{grid-area:tg;justify-self:start}
}