/* ── Astera · dual theme (light = classic · dark = Meridian Gold) ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Light theme (classic) — default */
:root {
  color-scheme: light;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius-card: 24px;
  --radius-pill: 999px;

  --gold:      #c9972f;
  --gold-2:    #f3d77f;
  --gold-3:    #8b641c;
  --gold-deep: #8b641c;

  --page-bg:
    radial-gradient(ellipse at 78% 8%,  rgba(243,215,127,0.28) 0%, transparent 38%),
    radial-gradient(ellipse at 10% 18%, rgba(16,40,66,0.08)    0%, transparent 30%),
    linear-gradient(180deg, #fffaf0 0%, #fbf7ef 55%, #f0e6d0 100%);

  --heading: #071728;
  --text:    #151515;
  --muted:   #69655d;
  --line:    rgba(164,126,48,0.22);
  --line-strong: rgba(164,126,48,0.34);
  --shadow:  0 32px 80px rgba(31,25,12,0.16);

  --header-bg:     rgba(251,247,239,0.88);
  --header-border: rgba(201,151,47,0.14);

  --cta-bg:   linear-gradient(135deg, #102842, #071728);
  --cta-text: #fff6dd;
  --cta-shadow: 0 8px 20px rgba(7,23,40,0.18);
  --cta-shadow-hover: 0 12px 28px rgba(7,23,40,0.24);

  --pill-inactive: #7a6a45;

  --eyebrow-bg:     rgba(255,253,248,0.7);
  --eyebrow-border: rgba(201,151,47,0.3);
  --eyebrow-text:   #8b641c;

  --hero-text: #1e1c18;

  --primary-cta-bg:   linear-gradient(135deg, #f3d77f, #c9972f);
  --primary-cta-text: #2a1600;
  --primary-cta-shadow: 0 16px 36px rgba(139,100,28,0.28);
  --primary-cta-shadow-hover: 0 22px 44px rgba(139,100,28,0.35);

  --badge-bg:     linear-gradient(145deg, rgba(23,27,35,0.96), rgba(6,12,22,0.94));
  --badge-text:   #fff6dd;
  --badge-border: rgba(255,246,221,0.18);
  --badge-small:  rgba(255,214,143,0.76);
  --badge-shadow: 0 12px 26px rgba(10,16,26,0.18);
  --badge-op: 0.76;

  --phone-frame-bg:     rgba(255,253,248,0.5);
  --phone-frame-border: rgba(201,151,47,0.28);

  --mock-bg:
    radial-gradient(circle at 88% -4%, rgba(143,113,255,0.07), transparent 11rem),
    radial-gradient(circle at -14% 36%, rgba(35,190,166,0.07), transparent 13rem),
    linear-gradient(180deg, #fffaf0 0%, #fbf7ef 50%, #f3ead8 100%);
  --mock-border: rgba(151,115,48,0.18);
  --mock-notch:  rgba(7,23,40,0.13);
  --ambient-top:  #8f71ff;  --ambient-top-op: 0.07;
  --ambient-left: #23bea6;  --ambient-left-op: 0.07;

  --mock-brand:        #071728;
  --mock-notif-bg:     rgba(255,255,255,0.86);
  --mock-notif-border: rgba(151,115,48,0.3);
  --mock-notif-color:  #071728;
  --mock-notif-shadow: 0 6px 16px rgba(159,112,34,0.1);
  --mock-greeting:     #66758f;

  --card-bg:     linear-gradient(145deg, #102842, #071728 66%, #030e1c);
  --card-border: rgba(199,154,58,0.65);
  --card-gold:   #f0d490;
  --card-shadow: 0 16px 32px rgba(79,53,16,0.22);

  --action-bg:     rgba(255,255,255,0.76);
  --action-border: rgba(151,115,48,0.18);
  --action-text:   #071728;
  --action-shadow: 0 4px 12px rgba(159,112,34,0.08);

  --section-title: #071728;

  --payment-bg:     rgba(255,255,255,0.88);
  --payment-border: rgba(151,115,48,0.18);
  --payment-text:   #071728;
  --payment-meta:   #66758f;
  --payment-divider: rgba(151,115,48,0.1);
  --payment-shadow: 0 10px 24px rgba(159,112,34,0.08);

  --tab-bg:       rgba(255,253,248,0.93);
  --tab-border:   rgba(151,115,48,0.26);
  --tab-inactive: #8a90a0;
  --tab-active:   #8b641c;
  --tab-shadow:   0 10px 28px rgba(159,112,34,0.13);

  --benefit-bg:     rgba(255,253,248,0.82);
  --benefit-shadow: 0 14px 36px rgba(31,25,12,0.07);
  --benefit-shadow-hover: 0 22px 48px rgba(31,25,12,0.11);

  --footer-bg:    #071728;
  --footer-text:  #fff6dd;
  --footer-muted: rgba(255,246,221,0.7);
  --footer-company: rgba(255,246,221,0.78);
  --footer-rule:  rgba(243,215,127,0.18);
  --footer-bottom: rgba(255,246,221,0.48);

  --toast-bg:     #071728;
  --toast-text:   #fff6dd;
  --toast-border: transparent;

  --pending-bg:   rgba(255,253,248,0.8);
  --pending-text: #4e493f;
  --pending-shadow: 0 12px 32px rgba(31,25,12,0.07);

  --switch-bg: rgba(255,253,248,0.7);
}

/* Dark theme — Meridian Gold */
:root[data-theme="dark"] {
  color-scheme: dark;

  --gold:      #cba24c;
  --gold-2:    #f2d488;
  --gold-3:    #e2c06e;
  --gold-deep: #8b641c;

  --page-bg:
    radial-gradient(ellipse at 82% 4%,  rgba(226,192,110,0.12) 0%, transparent 42%),
    radial-gradient(ellipse at 6% 14%,  rgba(40,34,20,0.55)     0%, transparent 40%),
    radial-gradient(ellipse at 50% 120%, rgba(203,162,76,0.06)  0%, transparent 46%),
    linear-gradient(180deg, #16130d 0%, #0d0b07 52%, #070502 100%);

  --heading: #f2ecdb;
  --text:    #e7e1d2;
  --muted:   #97907e;
  --line:    rgba(206,166,86,0.20);
  --line-strong: rgba(206,166,86,0.34);
  --shadow:  0 34px 90px rgba(0,0,0,0.55);

  --header-bg:     rgba(12,10,7,0.82);
  --header-border: rgba(206,166,86,0.14);

  --cta-bg:   linear-gradient(135deg, #f2d488, #cda24a);
  --cta-text: #1c1305;
  --cta-shadow: 0 10px 24px rgba(160,120,40,0.28);
  --cta-shadow-hover: 0 14px 30px rgba(160,120,40,0.4);

  --pill-inactive: #b7a97e;

  --eyebrow-bg:     rgba(26,22,15,0.7);
  --eyebrow-border: rgba(206,166,86,0.32);
  --eyebrow-text:   #e2bd66;

  --hero-text: #cfc7b5;

  --primary-cta-bg:   linear-gradient(135deg, #f2d488, #cda24a);
  --primary-cta-text: #1c1305;
  --primary-cta-shadow: 0 18px 40px rgba(160,120,40,0.34);
  --primary-cta-shadow-hover: 0 24px 50px rgba(160,120,40,0.44);

  --badge-bg:     linear-gradient(145deg, rgba(30,25,16,0.96), rgba(14,11,7,0.94));
  --badge-text:   #f2ecdb;
  --badge-border: rgba(206,166,86,0.24);
  --badge-small:  rgba(242,212,136,0.72);
  --badge-shadow: 0 12px 26px rgba(0,0,0,0.4);
  --badge-op: 0.9;

  --phone-frame-bg:     rgba(26,22,15,0.55);
  --phone-frame-border: rgba(206,166,86,0.3);

  --mock-bg:
    radial-gradient(circle at 88% -4%, rgba(226,192,110,0.08), transparent 11rem),
    radial-gradient(circle at -14% 36%, rgba(40,34,20,0.5), transparent 13rem),
    linear-gradient(180deg, #1a160f 0%, #100d09 52%, #070502 100%);
  --mock-border: rgba(206,166,86,0.16);
  --mock-notch:  rgba(242,236,219,0.16);
  --ambient-top:  #e3c06a;  --ambient-top-op: 0.06;
  --ambient-left: #2a2211;  --ambient-left-op: 0.22;

  --mock-brand:        #f2ecdb;
  --mock-notif-bg:     rgba(30,26,17,0.9);
  --mock-notif-border: rgba(206,166,86,0.28);
  --mock-notif-color:  #f2ecdb;
  --mock-notif-shadow: 0 6px 16px rgba(0,0,0,0.32);
  --mock-greeting:     #9a9078;

  --card-bg:     linear-gradient(145deg, #221c12, #14100a 66%, #080604);
  --card-border: rgba(206,166,86,0.6);
  --card-gold:   #f0d490;
  --card-shadow: 0 18px 36px rgba(0,0,0,0.5);

  --action-bg:     rgba(28,23,15,0.8);
  --action-border: rgba(206,166,86,0.2);
  --action-text:   #f2ecdb;
  --action-shadow: 0 4px 12px rgba(0,0,0,0.3);

  --section-title: #f2ecdb;

  --payment-bg:     rgba(24,20,13,0.86);
  --payment-border: rgba(206,166,86,0.18);
  --payment-text:   #f2ecdb;
  --payment-meta:   #9a9078;
  --payment-divider: rgba(206,166,86,0.1);
  --payment-shadow: 0 10px 24px rgba(0,0,0,0.34);

  --tab-bg:       rgba(16,13,9,0.94);
  --tab-border:   rgba(206,166,86,0.26);
  --tab-inactive: #7c8494;
  --tab-active:   #e2bd66;
  --tab-shadow:   0 10px 28px rgba(0,0,0,0.4);

  --benefit-bg:     linear-gradient(160deg, rgba(28,23,15,0.92), rgba(18,15,10,0.92));
  --benefit-shadow: 0 18px 44px rgba(0,0,0,0.36);
  --benefit-shadow-hover: 0 26px 56px rgba(0,0,0,0.5);

  --footer-bg:    #070502;
  --footer-text:  #f2ecdb;
  --footer-muted: rgba(242,236,219,0.62);
  --footer-company: rgba(242,236,219,0.7);
  --footer-rule:  rgba(242,212,136,0.16);
  --footer-bottom: rgba(242,236,219,0.44);

  --toast-bg:     #14110b;
  --toast-text:   #f2ecdb;
  --toast-border: rgba(206,166,86,0.22);

  --pending-bg:   rgba(24,20,13,0.8);
  --pending-text: #cfc7b5;
  --pending-shadow: 0 14px 34px rgba(0,0,0,0.34);

  --switch-bg: rgba(24,20,13,0.7);
}

*  { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, p { margin-top: 0; }

h1 {
  margin-bottom: 16px;
  color: var(--heading);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.018em;
}

h2 {
  margin-bottom: 10px;
  color: var(--heading);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h3 { color: var(--heading); font-weight: 800; }

p { color: var(--muted); font-size: 16px; line-height: 1.68; }

.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

/* ── Site header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--heading);
  font-weight: 900;
  flex-shrink: 0;
}

.brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--gold-2), var(--gold), var(--gold-deep));
  box-shadow: 0 8px 24px rgba(139,100,28,0.32);
}
.brand__icon svg { display: block; }
.brand__name { font-size: 22px; letter-spacing: -0.02em; }

.site-header__actions { display: flex; align-items: center; gap: 10px; }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--cta-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.header-cta:hover { transform: translateY(-1px); box-shadow: var(--cta-shadow-hover); }

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--switch-bg);
  color: var(--gold-3);
  transition: transform 0.15s, color 0.18s, background 0.18s;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg { display: block; }
.theme-toggle .theme-toggle__moon { display: none; }
.theme-toggle .theme-toggle__sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun  { display: none; }

/* Language switcher */
.language-switcher {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--switch-bg);
}
.language-switcher button {
  min-width: 40px;
  min-height: 30px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--pill-inactive);
  font-size: 12px;
  font-weight: 800;
  transition: background 0.18s, color 0.18s;
}
.language-switcher button.active {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #2a1a05;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: 60px 0 32px; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 1.05fr);
  align-items: center;
  gap: 60px;
}
.hero__copy { position: relative; z-index: 2; max-width: 540px; }
.hero__visual { justify-self: end; width: min(430px, 100%); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--eyebrow-border);
  border-radius: var(--radius-pill);
  background: var(--eyebrow-bg);
  color: var(--eyebrow-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.hero__text {
  max-width: 470px;
  color: var(--hero-text);
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 600;
  line-height: 1.44;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }

.primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--primary-cta-bg);
  color: var(--primary-cta-text);
  font-size: 16px;
  font-weight: 800;
  box-shadow: var(--primary-cta-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.primary-cta:hover { transform: translateY(-2px); box-shadow: var(--primary-cta-shadow-hover); }

.store-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-store-badges { align-items: center; }
.header-store-badges { gap: 7px; flex-wrap: nowrap; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 13px;
  border: 1px solid var(--badge-border);
  border-radius: 15px;
  background: var(--badge-bg);
  color: var(--badge-text);
  box-shadow: var(--badge-shadow);
  opacity: var(--badge-op);
  cursor: not-allowed;
}
.header-store-badges .store-badge {
  min-height: 38px; gap: 7px; padding: 6px 9px; border-radius: 13px;
  box-shadow: 0 8px 18px rgba(10,16,26,0.12);
  opacity: calc(var(--badge-op) - 0.08);
}
.header-store-badges .store-badge__icon { width: 19px; height: 19px; flex-basis: 19px; }
.header-store-badges .store-badge__icon svg { width: 19px; height: 19px; }
.header-store-badges .store-badge small { font-size: 7.5px; letter-spacing: 0.06em; }
.header-store-badges .store-badge strong { font-size: 11px; }
.store-badge:disabled { cursor: not-allowed; }
.store-badge__icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; }
.store-badge__copy { display: grid; gap: 2px; text-align: left; line-height: 1; }
.store-badge small { color: var(--badge-small); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.store-badge strong { color: var(--badge-text); font-size: 13px; font-weight: 900; }

/* ── Phone shell & app mockup ────────────────────────────────────── */
.phone-shell {
  width: min(376px, 100%);
  padding: 8px;
  border: 1px solid var(--phone-frame-border);
  border-radius: 42px;
  background: var(--phone-frame-bg);
  box-shadow: var(--shadow);
}

.app-mockup {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  padding: 20px 18px 78px;
  border: 1px solid var(--mock-border);
  border-radius: 34px;
  background: var(--mock-bg);
}
.app-mockup::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  width: 82px; height: 5px;
  border-radius: 999px;
  background: var(--mock-notch);
  transform: translateX(-50%);
}

.app-mockup__ambient { position: absolute; border-radius: 999px; pointer-events: none; }
.app-mockup__ambient--top  { width:180px; height:180px; top:-72px;  right:-20px; background:var(--ambient-top);  opacity:var(--ambient-top-op); }
.app-mockup__ambient--left { width:220px; height:220px; top:240px;  left:-130px; background:var(--ambient-left); opacity:var(--ambient-left-op); }

.app-home-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.brand-cluster { display: flex; align-items: center; gap: 9px; }
.brand-cluster strong { color: var(--mock-brand); font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }

.mock-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1.4px solid rgba(199,154,58,0.5);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold), var(--gold-deep));
  box-shadow: 0 8px 20px rgba(79,53,16,0.2);
}

.mock-notification {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1.4px solid var(--mock-notif-border);
  border-radius: 14px;
  background: var(--mock-notif-bg);
  box-shadow: var(--mock-notif-shadow);
  color: var(--mock-notif-color);
}

.mock-greeting { position: relative; margin: 10px 0 0; color: var(--mock-greeting); font-size: 16px; font-weight: 600; line-height: 1.35; }
.mock-greeting strong { color: var(--gold-3); font-weight: 900; }

.home-card {
  position: relative;
  display: grid;
  min-height: 178px;
  margin-top: 12px;
  overflow: hidden;
  padding: 17px 18px 15px;
  border: 1.5px solid var(--card-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,255,255,0.09), transparent 11rem),
    var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--card-gold);
}
.home-card__orb { position: absolute; border-radius: 999px; opacity: 0.09; }
.home-card__orb--top    { width:170px; height:170px; right:-18px; top:28px;   background:#fff; }
.home-card__orb--bottom { width:148px; height:148px; right:22px;  bottom:-74px; background:var(--gold-2); }
.home-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-card__top strong { color:var(--card-gold); font-size:24px; font-weight:900; line-height:1.1; letter-spacing:-0.01em; }
.home-card__top span {
  padding: 6px 11px;
  border: 1px solid rgba(233,199,121,0.4);
  border-radius: var(--radius-pill);
  background: rgba(233,199,121,0.1);
  color: var(--card-gold);
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}
.home-card__number { position: relative; margin: 18px 0 0; color: rgba(246,222,166,0.88); font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.home-card__balance { position: relative; margin-top: 12px; }
.home-card__balance span, .home-card__footer span { color: rgba(246,222,166,0.75); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.home-card__balance strong { display: block; margin-top: 3px; color: var(--card-gold); font-size: 32px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.home-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; }

.mock-actions { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mock-action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 54px;
  border: 1px solid var(--action-border);
  border-radius: 18px;
  background: var(--action-bg);
  box-shadow: var(--action-shadow);
  color: var(--action-text);
  font-size: 10px; font-weight: 800; letter-spacing: 0.01em;
}
.mock-action-btn svg { display: block; flex-shrink: 0; }

.mock-section-title { position: relative; margin: 16px 0 8px; color: var(--section-title); font-size: 18px; font-weight: 900; letter-spacing: -0.01em; }

.payment-list {
  position: relative; display: grid;
  border: 1.2px solid var(--payment-border);
  border-radius: 22px;
  background: var(--payment-bg);
  box-shadow: var(--payment-shadow);
  overflow: hidden;
}
.payment-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  min-height: 50px; padding: 0 12px;
  border-bottom: 1px solid var(--payment-divider);
}
.payment-row:last-child { border-bottom: 0; }
.payment-row__info { display: grid; min-width: 0; }
.payment-row strong { color: var(--payment-text); font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payment-row small  { margin-top: 1px; color: var(--payment-meta); font-size: 11px; font-weight: 600; }
.payment-row em     { color: var(--payment-text); font-size: 14px; font-style: normal; font-weight: 800; }
.payment-row__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(240,212,144,0.9), rgba(199,154,58,0.85));
  flex-shrink: 0;
}

.mock-tab-bar {
  position: absolute; left: 5%; right: 5%; bottom: 9px;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; padding: 6px 8px;
  border: 1.4px solid var(--tab-border);
  border-radius: 32px;
  background: var(--tab-bg);
  box-shadow: var(--tab-shadow);
}
.mock-tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; min-width: 0; color: var(--tab-inactive); font-size: 9px; font-weight: 800; letter-spacing: 0.01em; }
.mock-tab-item.active { color: var(--tab-active); }
.mock-tab-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 14px; }
.mock-tab-item.active .mock-tab-icon { background: rgba(199,154,58,0.14); }
.mock-tab-icon svg { display: block; }

/* ── Benefits section ────────────────────────────────────────────── */
.section { padding: 24px 0 52px; }
.section__header { margin-bottom: 28px; }
.section__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--eyebrow-text); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.section__title { margin: 0; color: var(--heading); font-size: clamp(28px, 3.5vw, 40px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.08; }

.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.benefit-card {
  position: relative; min-height: 170px; overflow: hidden; padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--benefit-bg);
  box-shadow: var(--benefit-shadow);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.benefit-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--benefit-shadow-hover); }
.benefit-icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 6px 16px rgba(139,100,28,0.22);
}
.benefit-icon svg { display: block; }
.benefit-card h2 { position: relative; max-width: 260px; margin-bottom: 6px; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.benefit-card p { margin: 0; font-size: 14px; line-height: 1.55; }

.rate-mini { position: relative; margin: 0; color: var(--section-title); font-size: 14px; font-weight: 800; line-height: 1.35; }
.rate-mini--muted { margin-top: 4px; color: var(--gold-3); font-size: 12px; font-weight: 700; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer { padding: 32px 0 20px; border-top: 1px solid var(--header-border); background: var(--footer-bg); color: var(--footer-text); }
.footer .brand { color: var(--footer-text); }
.footer p { color: var(--footer-muted); }
.footer__grid { display: grid; grid-template-columns: minmax(160px, auto) minmax(0, 1fr); gap: 28px; align-items: start; }
.footer__company { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 18px; justify-items: stretch; text-align: left; color: var(--footer-company); font-size: 13px; font-weight: 600; line-height: 1.45; }
.footer__column { display: grid; gap: 6px; align-content: start; }
.footer__column--contact { justify-items: end; text-align: right; }
.footer__company strong { color: var(--footer-text); font-size: 14px; font-weight: 900; }
.footer__company a { color: var(--gold-2); font-weight: 800; transition: color 0.18s; }
.footer__company a:hover { color: var(--footer-text); }
.footer__bottom { display: flex; justify-content: center; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--footer-rule); color: var(--footer-bottom); font-size: 13px; }

/* ── Legal / inner pages ─────────────────────────────────────────── */
.page-main { min-height: 68vh; }
.page-hero { padding: 88px 0 56px; }
.page-hero__inner { max-width: 820px; }
.page-hero h1 { font-size: clamp(40px, 6vw, 68px); }
.pending-note {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--pending-bg);
  box-shadow: var(--pending-shadow);
}
.pending-note__icon { color: var(--gold); flex-shrink: 0; }
.pending-note p { margin: 0; color: var(--pending-text); font-size: 15px; font-weight: 600; line-height: 1.55; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 28px; color: var(--gold-3); font-weight: 800; font-size: 15px; transition: gap 0.18s; }
.back-link:hover { gap: 10px; }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--toast-border);
  background: var(--toast-bg);
  color: var(--toast-text);
  font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 99;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .site-header__inner { flex-wrap: wrap; padding: 12px 0; }
  .hero__grid, .footer__grid { grid-template-columns: 1fr; }
  .hero__visual { justify-self: center; width: min(390px, 100%); }
  .hero__copy { max-width: 620px; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__company { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: stretch; text-align: left; }
  .footer__column--contact { justify-items: start; text-align: left; }
}
@media (max-width: 760px) { .header-store-badges { display: none; } }
@media (max-width: 640px) {
  .shell { width: min(100% - 28px, 1160px); }
  .site-header__actions { width: 100%; justify-content: space-between; }
  .header-cta { flex: 1; justify-content: center; }
  .hero { padding-top: 40px; }
  .hero__grid { gap: 36px; }
  h1 { font-size: 36px; line-height: 1.05; }
  .hero__text { font-size: 17px; line-height: 1.42; }
  .hero-actions { margin-top: 24px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .primary-cta { width: 100%; justify-content: center; }
  .hero-store-badges { justify-content: center; }
  .store-badge { flex: 1 1 132px; justify-content: center; max-width: 168px; }
  .phone-shell  { padding: 7px; border-radius: 38px; }
  .app-mockup   { min-height: 600px; padding: 18px 15px 72px; border-radius: 32px; }
  .brand-cluster strong { font-size: 23px; }
  .home-card { min-height: 170px; padding: 16px 15px 14px; }
  .home-card__balance strong { font-size: 30px; }
  .mock-actions { gap: 6px; }
  .mock-tab-bar { left: 4%; right: 4%; padding-inline: 6px; }
  .mock-tab-item { font-size: 8.8px; }
  .footer__company { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__column--contact { justify-items: center; text-align: center; }
  .footer__bottom { flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }