/* ============================================================
   PayMyBill - style.css
   ============================================================ */

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

:root {
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --brand-light: #eef2ff;
  --accent: #10b981;
  --danger: #ef4444;
  --warn: #f59e0b;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(79,70,229,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 0 32px; height: 64px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__logo { display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;color:var(--brand);text-decoration:none; }
.nav__logo-icon { font-size:1.3rem; }
.nav__links { display:flex;gap:20px;margin-left:auto; }
.nav__links a { color:var(--text-muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s; }
.nav__links a:hover { color:var(--brand); }
.nav__new { background:var(--brand);color:#fff;font-size:.6rem;padding:1px 5px;border-radius:4px;vertical-align:middle;margin-left:3px; }
.nav__cta { display:flex;gap:8px; }
.nav__burger { display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text); }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:8px;border:none;
  font-size:.875rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .2s;text-decoration:none;
  white-space:nowrap;
}
.btn--lg { padding:14px 28px;font-size:1rem; }
.btn--sm { padding:7px 14px;font-size:.8rem; }
.btn--primary { background:var(--brand);color:#fff; }
.btn--primary:hover { background:var(--brand-dark);transform:translateY(-1px); }
.btn--outline { background:transparent;color:var(--brand);border:2px solid var(--brand); }
.btn--outline:hover { background:var(--brand-light); }
.btn--ghost { background:#f1f5f9;color:var(--text); }
.btn--ghost:hover { background:#e2e8f0; }
.btn--surprise { background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff; }
.btn--surprise:hover { opacity:.9;transform:translateY(-1px); }
.btn--white { background:#fff;color:var(--brand); }
.btn--white:hover { background:#f8fafc; }
.btn--outline-white { background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5); }
.btn--outline-white:hover { background:rgba(255,255,255,.1); }
.btn--funded { background:#e2e8f0;color:var(--text-muted);cursor:not-allowed; }

/* ===== HERO ===== */
.hero {
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  padding:80px 64px;max-width:1280px;margin:0 auto;align-items:center;
}
.hero__pill {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-light);color:var(--brand);
  font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;margin-bottom:20px;
}
.hero__pill-dot { width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }
.hero__headline { font-size:3rem;font-weight:900;line-height:1.15;color:var(--text);margin-bottom:16px; }
.hero__sub { font-size:1.1rem;color:var(--text-muted);margin-bottom:28px;max-width:480px; }
.hero__actions { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px; }
.hero__metrics { display:flex;align-items:center;gap:0;flex-wrap:wrap;gap:12px; }
.metric { text-align:center; }
.metric__val { display:block;font-size:1.4rem;font-weight:800;color:var(--brand); }
.metric__label { font-size:.75rem;color:var(--text-muted);font-weight:500; }
.metric__divider { width:1px;height:40px;background:var(--border); }

/* ===== DASH CARD ===== */
.dash-card {
  background:#fff;border-radius:16px;padding:24px;
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
}
.dash-card__header { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.dash-card__title { font-weight:700;font-size:1rem; }
.dash-card__dot {
  display:flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:#22c55e;
}
.dash-card__dot::before { content:'';width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite; }
.dash-feed { display:flex;flex-direction:column;gap:10px; }
.dash-row {
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:8px;background:#f8fafc;
  animation:slideIn .4s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.dash-row--pool { background:#f0fdf4; }

.dash-row__icon { font-size:1.2rem;width:28px;text-align:center; }
.dash-row__info { flex:1;min-width:0; }
.dash-row__name { display:block;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.dash-row__sub { display:block;font-size:.75rem;color:var(--text-muted); }
.dash-row__amount { font-size:.85rem;font-weight:700;white-space:nowrap; }
.dash-row__amount--green { color:#16a34a; }
.dash-row__amount--blue  { color:#2563eb; }
.dash-row__amount--purple{ color:#7c3aed; }

/* ===== SECTION SHELL ===== */
.section-pill {
  display:inline-block;background:var(--brand-light);color:var(--brand);
  font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px;margin-bottom:12px;
}
section h2 { font-size:2rem;font-weight:800;margin-bottom:8px; }
section p { color:var(--text-muted); }

/* ===== HOW IT WORKS ===== */
.how { padding:80px 64px;background:#fff; }
.how__inner { max-width:900px;margin:0 auto; }
.how__header { text-align:center;margin-bottom:36px; }
.how__tabs { display:flex;gap:8px;justify-content:center;margin-bottom:28px; }
.how-tab {
  padding:10px 24px;border-radius:999px;border:2px solid var(--border);
  background:#fff;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.how-tab.active { background:var(--brand);color:#fff;border-color:var(--brand); }
.how__steps { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.step {
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;background:var(--bg);border-radius:var(--radius);
}
.step__num {
  width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;
  font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step__body h3 { font-size:1rem;font-weight:700;margin-bottom:4px; }
.step__body p  { font-size:.875rem;color:var(--text-muted); }
.hidden { display:none !important; }

/* ===== FEES ===== */
.fees { margin-top:48px; }
.fees__title { text-align:center;font-size:1.3rem;font-weight:700;margin-bottom:20px; }
.fees__cards { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.fee-card {
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;text-align:center;transition:box-shadow .2s,transform .2s;
  cursor:default;
}
.fee-card:hover { box-shadow:var(--shadow);transform:translateY(-3px); }
.fee-card__icon { font-size:1.6rem;margin-bottom:8px; }
.fee-card__label { font-size:.8rem;color:var(--text-muted);font-weight:500;margin-bottom:4px; }
.fee-card__price { font-size:1.1rem;font-weight:800;color:var(--brand); }
.fee-card__explain { font-size:.78rem;color:var(--text-muted);margin-top:8px;line-height:1.5; }
.fee-card__who { font-size:.72rem;color:#94a3b8;margin-top:6px; }

/* ===== BILLS SECTION ===== */
.bills-section { padding:80px 64px; }
.bills-section__inner { max-width:1280px;margin:0 auto; }
.bills-section__header { display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px;flex-wrap:wrap; }
.bills-section__controls { display:flex;gap:12px;align-items:center;flex-wrap:wrap; }
.search-input,.filter-select {
  padding:9px 14px;border:1px solid var(--border);border-radius:8px;
  font-size:.875rem;font-family:inherit;background:#fff;color:var(--text);
  outline:none;transition:border-color .2s;
}
.search-input:focus,.filter-select:focus { border-color:var(--brand); }
.search-input { width:220px; }

.bills-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px; }
.bill-card {
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;transition:box-shadow .2s,transform .2s;
}
.bill-card:hover { box-shadow:var(--shadow);transform:translateY(-2px); }
.bill-card__top { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.bill-card__avatar { font-size:1.6rem;width:40px;text-align:center; }
.bill-card__name { font-weight:700;font-size:.95rem; }
.bill-card__loc { font-size:.78rem;color:var(--text-muted); }
.bill-card__type { font-size:.8rem;font-weight:600;color:var(--brand);margin-bottom:8px; }
.bill-card__note { font-size:.85rem;color:var(--text-muted);font-style:italic;margin-bottom:12px;line-height:1.5; }
.bill-card__footer { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.bill-card__amount { font-size:1.3rem;font-weight:800;color:var(--text); }
.bill-card__actions { display:flex;gap:8px; }
.bill-card__actions .btn { flex:1;justify-content:center; }

.bills-section__more { text-align:center;margin-top:28px; }

/* ===== BADGES ===== */
.badge { font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:999px;margin-left:auto;white-space:nowrap; }
.badge--urgent { background:#fef2f2;color:#dc2626; }
.badge--hot    { background:#fff7ed;color:#ea580c; }
.badge--new    { background:#f0fdf4;color:#16a34a; }
.badge--funded { background:#e0e7ff;color:#4338ca; }

/* ===== COUNTDOWN ===== */
.countdown { font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:6px; }
.countdown--red    { background:#fef2f2;color:#dc2626; }
.countdown--orange { background:#fff7ed;color:#ea580c; }
.countdown--yellow { background:#fefce8;color:#ca8a04; }
.countdown--green  { background:#f0fdf4;color:#16a34a; }
.countdown--overdue{ background:#fef2f2;color:#991b1b;text-decoration:line-through; }

/* ===== POOLS ===== */
.pools-section { padding:80px 64px;background:#fff; }
.pools-section__inner { max-width:1280px;margin:0 auto; }
.pools-section__header { text-align:center;margin-bottom:36px; }
.pools-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px; }
.pool-card {
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;transition:box-shadow .2s,transform .2s;
}
.pool-card:hover { box-shadow:var(--shadow);transform:translateY(-2px); }
.pool-card--funded { border-color:#a5b4fc;background:#f5f3ff; }
.pool-card__top { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.pool-card__avatar { font-size:1.6rem;width:40px;text-align:center; }
.pool-card__name { font-weight:700;font-size:.95rem; }
.pool-card__loc { font-size:.78rem;color:var(--text-muted); }
.pool-card__type { font-size:.8rem;font-weight:600;color:var(--brand);margin-bottom:8px; }
.pool-card__note { font-size:.85rem;color:var(--text-muted);font-style:italic;margin-bottom:12px; }
.pool-card__progress-labels { display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-muted);margin-bottom:6px; }
.pool-card__progress-bar { background:#e2e8f0;border-radius:999px;height:8px;overflow:hidden;margin-bottom:10px; }
.pool-card__progress-fill { background:linear-gradient(90deg,var(--brand),var(--accent));height:100%;border-radius:999px;transition:width .6s ease; }
.pool-card__contrib { display:flex;align-items:center;gap:4px;margin-bottom:12px;flex-wrap:wrap; }
.pool-avatar {
  width:26px;height:26px;border-radius:50%;background:var(--brand-light);color:var(--brand);
  font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;margin-left:-4px;
}
.pool-avatar:first-child { margin-left:0; }
.pool-card__contrib-count { font-size:.78rem;color:var(--text-muted);margin-left:6px; }
.pool-card__footer { display:flex;justify-content:space-between;align-items:center; }

/* ===== CONTRIBUTOR LEADERBOARD ===== */
.leaders-section { padding:64px 20px;background:#fff; }
.leaders-section__inner { max-width:820px;margin:0 auto; }
.leaders-section__header { text-align:center;margin-bottom:28px; }
.leaders-section__header h2 { margin:8px 0; }
.leaders-section__header p, .leaderboard-status { color:var(--text-muted);font-size:.9rem; }
.leaderboard-status { text-align:center;margin:0 0 16px; }
.leaderboard-list { list-style:none;display:flex;flex-direction:column;gap:10px; }
.leaderboard-row {
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
}
.leaderboard-row__rank { min-width:36px;font-size:1.05rem;font-weight:800;color:var(--brand); }
.leaderboard-row__name { flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere; }
.leaderboard-row__count { color:var(--text-muted);font-size:.85rem; }

/* ===== STORIES ===== */
.stories-section { padding:80px 64px;background:#fff; }
.stories-section__inner { max-width:1100px;margin:0 auto; }
.stories-section__header { text-align:center;margin-bottom:36px; }
.stories-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.story-card {
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  position:relative;transition:box-shadow .2s;
}
.story-card:hover { box-shadow:var(--shadow); }
.story-card--featured { border-color:var(--brand);background:var(--brand-light); }
.story-card__quote { font-size:.95rem;font-style:italic;line-height:1.6;margin-bottom:16px;color:var(--text); }
.story-card__person { display:flex;align-items:center;gap:10px;margin-bottom:8px; }
.story-card__avatar { font-size:1.6rem; }
.story-card__person strong { display:block;font-size:.9rem; }
.story-card__person small { font-size:.78rem;color:var(--text-muted); }
.story-card__bill { font-size:.78rem;font-weight:600;color:var(--brand); }

/* ===== FAQ ===== */
.faq-section { padding:80px 64px; }
.faq-section__inner { max-width:720px;margin:0 auto; }
.faq-section__header { text-align:center;margin-bottom:36px; }
.accordion { display:flex;flex-direction:column;gap:8px; }
.accordion__item { background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.accordion__q {
  width:100%;padding:16px 20px;background:none;border:none;text-align:left;
  font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;transition:background .2s;
}
.accordion__q:hover { background:var(--bg); }
.accordion__q.open { color:var(--brand); }
.acc-icon { font-size:1.2rem;font-weight:300;transition:transform .3s; }
.accordion__q.open .acc-icon { transform:rotate(45deg); }
.accordion__a {
  max-height:0;overflow:hidden;padding:0 20px;
  font-size:.9rem;color:var(--text-muted);line-height:1.6;
  transition:max-height .4s ease,padding .4s;
}
.accordion__a.visible { max-height:200px;padding:12px 20px 16px; }

/* ===== CTA ===== */
.cta-section { padding:80px 64px;background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.cta-section__inner { max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap; }
.cta-section__left h2 { color:#fff;font-size:1.8rem;margin-bottom:8px; }
.cta-section__left p  { color:rgba(255,255,255,.75);margin-bottom:20px; }
.cta-section__btns { display:flex;gap:12px;flex-wrap:wrap; }
.cta-section__right { display:flex;gap:28px; }
.cta-stat { text-align:center; }
.cta-stat span { display:block;font-size:1.8rem;font-weight:800;color:#fff; }
.cta-stat small { font-size:.78rem;color:rgba(255,255,255,.7); }

/* ===== FOOTER ===== */
.footer { background:#0f172a;color:#94a3b8;padding:48px 64px 24px; }
.footer__inner { max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 2fr;gap:48px;margin-bottom:36px; }
.footer__brand .footer__logo { font-size:1.1rem;font-weight:800;color:#fff;display:block;margin-bottom:8px; }
.footer__brand p { font-size:.85rem;line-height:1.6; }
.footer__socials { display:flex;gap:12px;margin-top:12px; }
.footer__socials a { color:#94a3b8;text-decoration:none;font-size:1rem;transition:color .2s; }
.footer__socials a:hover { color:#fff; }
.footer__links { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.footer__col { display:flex;flex-direction:column;gap:8px; }
.footer__col strong { color:#fff;font-size:.85rem;margin-bottom:4px; }
.footer__col a { color:#94a3b8;text-decoration:none;font-size:.82rem;transition:color .2s; }
.footer__col a:hover { color:#fff; }
.footer__bottom {
  max-width:1100px;margin:0 auto;padding-top:20px;
  border-top:1px solid #1e293b;display:flex;justify-content:space-between;
  font-size:.78rem;flex-wrap:wrap;gap:8px;
}

/* ===== MODALS ===== */
.modal-overlay {
  position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);
  z-index:200;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-overlay.open { opacity:1;pointer-events:all; }
.modal {
  background:#fff;border-radius:16px;padding:0;max-width:580px;width:90%;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);
  transform:scale(.96);transition:transform .3s;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal__header {
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:1;
}
.modal__header h2 { font-size:1.1rem;font-weight:700; }
.modal__close { background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--text-muted);padding:4px; }
.modal__body { padding:24px; }
.modal__actions { padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px; }

/* ===== BROWSE OPTIONS ===== */
.browse-options { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.browse-opt {
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:24px 16px;border:2px solid var(--border);border-radius:var(--radius);
  background:#fff;cursor:pointer;font-family:inherit;transition:all .2s;
}
.browse-opt:hover { border-color:var(--brand);background:var(--brand-light);transform:translateY(-2px); }
.browse-opt__icon { font-size:2rem;margin-bottom:10px; }
.browse-opt__title { font-size:.95rem;font-weight:700;margin-bottom:6px; }
.browse-opt__desc { font-size:.8rem;color:var(--text-muted);line-height:1.5; }

/* ===== FORM ===== */
.form-grid { display:flex;flex-direction:column;gap:14px; }
.form-row { display:flex;flex-direction:column;gap:4px; }
.form-row--half { flex:1; }
.form-label { font-size:.85rem;font-weight:600;color:var(--text); }
.form-input {
  padding:10px 14px;border:1px solid var(--border);border-radius:8px;
  font-size:.9rem;font-family:inherit;color:var(--text);
  outline:none;transition:border-color .2s;width:100%;
}
.form-input:focus { border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.1); }

.country-picker { position:relative; }
.country-picker__btn {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid var(--border); border-radius:8px;
  background:#fff; font-family:inherit; font-size:16px; font-weight:600;
  color:var(--text); cursor:pointer; text-align:left;
}
.country-picker__btn:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.1); outline:none; }
.country-flag { width:28px; height:20px; object-fit:cover; border-radius:3px; border:1px solid var(--border); flex-shrink:0; }
.country-picker__panel {
  margin-top:8px; border:1px solid var(--border); border-radius:8px;
  background:#fff; overflow:hidden;
}
.country-picker__search { border:none; border-bottom:1px solid var(--border); border-radius:0; }
.country-picker__list { max-height:240px; overflow-y:auto; }
.country-option {
  width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px;
  padding:10px 14px; border:none; border-bottom:1px solid var(--border);
  background:#fff; font-family:inherit; cursor:pointer; text-align:left;
}
.country-option:last-child { border-bottom:none; }
.country-option:hover, .country-option:focus { background:var(--brand-light); outline:none; }
.country-option__name { font-size:.95rem; font-weight:600; color:var(--text); }
.country-picker__empty { padding:14px; font-size:.85rem; color:var(--text-muted); }
.pool-extra { background:var(--bg);border-radius:8px;padding:14px;border:1px solid var(--border); }

/* ===== PAY SUMMARY ===== */
.pay-summary { background:var(--bg);border-radius:var(--radius);padding:16px; }
.pay-summary__row { display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:.9rem; }
.pay-summary__row:last-child { border-bottom:none; }
.pay-summary__row--total strong { font-size:1.1rem;color:var(--brand); }

/* ===== SURPRISE ME ===== */
.surprise-overlay {
  position:fixed;inset:0;background:rgba(79,70,229,.85);backdrop-filter:blur(8px);
  z-index:300;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.surprise-overlay.active { opacity:1;pointer-events:all; }
.surprise-spinner { text-align:center; }
.surprise-spinner__emoji { font-size:4rem;animation:spinFast .15s linear infinite; }
@keyframes spinFast { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.surprise-spinner__text { color:#fff;font-size:1.2rem;font-weight:600;margin-top:16px; }

/* ===== APP TOAST ===== */
.app-toast {
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:#1e293b;color:#fff;padding:12px 20px;border-radius:999px;
  font-size:.875rem;font-weight:500;z-index:500;opacity:0;
  transition:all .3s;white-space:nowrap;
}
.app-toast.show { transform:translateX(-50%) translateY(0);opacity:1; }
.app-toast--success { background:#059669; }
.app-toast--error   { background:#dc2626; }
.app-toast--info    { background:#2563eb; }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position:fixed;inset:0;background:#fff;z-index:150;
  display:flex;flex-direction:column;padding:24px;gap:16px;
  transform:translateX(100%);transition:transform .3s;
}
.mobile-menu.open { transform:translateX(0); }
.mobile-menu__close { align-self:flex-end;background:none;border:none;font-size:1.4rem;cursor:pointer; }
.mobile-menu a { font-size:1.1rem;font-weight:600;color:var(--text);text-decoration:none; }

.form-split { display:flex; gap:12px; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; padding:48px 32px; gap:32px; }
  .how__steps { grid-template-columns:1fr; }
  .fees__cards { grid-template-columns:repeat(2,1fr); }
  .stories-grid { grid-template-columns:repeat(2,1fr); }
  .footer__inner { grid-template-columns:1fr; gap:32px; }
}

@media (max-width:768px) {
  .nav { padding:0 16px; gap:12px; height:56px; }
  .nav__links, .nav__cta { display:none; }
  .nav__burger {
    display:flex; align-items:center; justify-content:center;
    margin-left:auto; width:44px; height:44px; font-size:1.5rem;
  }
  .hero { padding:32px 20px 40px; }
  .hero__headline { font-size:2.1rem; }
  .hero__sub { font-size:1rem; }
  .hero__actions .btn { flex:1 1 140px; justify-content:center; }
  .how, .bills-section, .pools-section, .leaders-section, .stories-section, .faq-section, .cta-section { padding:48px 20px; }
  .footer { padding:36px 20px 20px; }
  section h2 { font-size:1.6rem; }
  .fees__cards { grid-template-columns:1fr 1fr; }
  .stories-grid { grid-template-columns:1fr; }
  .browse-options { grid-template-columns:1fr; }
  .cta-section__inner { flex-direction:column; align-items:flex-start; }
  .cta-section__left h2 { font-size:1.5rem; }
  .cta-section__right { width:100%; justify-content:flex-start; gap:20px; }
  .bills-section__header { flex-direction:column; }
  .bills-section__controls { width:100%; }
  .search-input, .filter-select { width:100%; min-height:44px; font-size:16px; }
  .how__tabs { flex-wrap:wrap; }
  .how-tab { flex:1; min-height:44px; }
  .mobile-menu { padding:20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .mobile-menu .btn { width:100%; justify-content:center; min-height:48px; }
  .mobile-menu a { padding:8px 0; min-height:44px; display:flex; align-items:center; }
  .modal { width:100%; max-height:100dvh; border-radius:16px 16px 0 0; margin-top:auto; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal__actions { flex-wrap:wrap; }
  .modal__actions .btn { flex:1; justify-content:center; min-height:44px; }
  .form-input, .form-input:focus { font-size:16px; }
  .pool-card__footer, .bill-card__footer { flex-wrap:wrap; gap:8px; }
  .bill-card__actions { flex-wrap:wrap; }
  .bill-card__actions .btn { min-height:44px; }
  .app-toast { width:calc(100% - 32px); white-space:normal; text-align:center; border-radius:12px; }
  .footer__bottom { flex-direction:column; }
  body.menu-open { overflow:hidden; }
}

@media (max-width:480px) {
  .hero { padding:24px 16px 32px; }
  .hero__headline { font-size:1.75rem; }
  .hero__actions { flex-direction:column; }
  .hero__actions .btn { width:100%; }
  .hero__metrics { justify-content:space-between; width:100%; }
  .metric__divider { display:none; }
  .how, .bills-section, .pools-section, .leaders-section, .stories-section, .faq-section, .cta-section { padding:40px 16px; }
  .footer { padding:32px 16px 16px; }
  .fees__cards { grid-template-columns:1fr; }
  .footer__links { grid-template-columns:1fr 1fr; gap:20px; }
  .cta-section__btns { flex-direction:column; }
  .cta-section__btns .btn { width:100%; justify-content:center; }
  .cta-section__right { flex-wrap:wrap; }
  .form-split { flex-direction:column; }
  .dash-card { padding:16px; }
  .accordion__q { align-items:flex-start; gap:12px; }
  .pools-grid, .bills-grid { grid-template-columns:1fr; }
}

/* ===== POLISHED VISUAL LAYER ===== */
:root {
  --brand: #5145e5;
  --brand-dark: #3f35c9;
  --brand-light: #eeedff;
  --border: #e6e8f0;
  --bg: #f7f8fc;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(31, 41, 92, .08);
  --shadow-lg: 0 24px 64px rgba(25, 30, 75, .16);
}

body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nav {
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 24px rgba(15,23,42,.04);
}

.nav__logo { letter-spacing: -.03em; }
.nav__links a { padding: 8px 0; }
.nav__links a:hover { color: var(--brand); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: none;
  padding: clamp(52px, 8vw, 100px) max(24px, calc((100vw - 1280px) / 2));
  background:
    radial-gradient(ellipse at 86% 20%, rgba(119,106,255,.42), transparent 34%),
    radial-gradient(ellipse at 12% 100%, rgba(14,165,233,.16), transparent 36%),
    linear-gradient(125deg, #171747 0%, #272477 52%, #4338a9 100%);
}

.hero::after {
  position: absolute;
  z-index: -1;
  right: -120px;
  bottom: -240px;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.02);
  content: "";
  pointer-events: none;
}

.hero__pill {
  background: rgba(255,255,255,.12);
  color: #e1e2ff;
  border: 1px solid rgba(255,255,255,.16);
}

.hero__headline {
  max-width: 720px;
  color: #fff;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero__sub { color: #d7d8f1; }
.hero__actions .btn--outline { color: #fff; border-color: rgba(255,255,255,.55); }
.hero__actions .btn--outline:hover { background: rgba(255,255,255,.12); }
.hero__actions .btn--primary { background: #fff; color: #38318f; }
.hero__actions .btn--primary:hover { background: #f0efff; }
.hero__metrics { gap: 20px; }
.metric__val { color: #fff; }
.metric__label { color: #c8c9e8; }
.metric__divider { background: rgba(255,255,255,.24); }

.dash-card {
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 28px 70px rgba(10,12,48,.28);
}

section h2 { letter-spacing: -.035em; text-wrap: balance; }
.how, .pools-section, .stories-section { background: #fff; }
.how__header, .pools-section__header, .leaders-section__header, .stories-section__header,
.faq-section__header { margin-bottom: 40px; }

.step, .fee-card, .bill-card, .pool-card, .story-card, .leaderboard-row,
.accordion__item {
  border-radius: 18px;
}

.step {
  border: 1px solid transparent;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-3px); border-color: #dedcff; box-shadow: var(--shadow); }
.step__num { box-shadow: 0 6px 14px rgba(81,69,229,.2); }

.fee-card {
  border-color: #ececf4;
  box-shadow: 0 6px 20px rgba(15,23,42,.035);
}
.fee-card:hover { border-color: #d9d6ff; }

.bills-section {
  background: linear-gradient(180deg, #f7f8fc 0%, #f0f2fb 100%);
}
.bills-section__header { align-items: flex-end; }
.search-input, .filter-select {
  min-height: 44px;
  border-color: #dfe2ec;
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(15,23,42,.025);
}
.search-input:focus, .filter-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(81,69,229,.11);
}

.bill-card, .pool-card {
  border-color: #e8eaf2;
  box-shadow: 0 6px 20px rgba(15,23,42,.035);
}
.bill-card:hover, .pool-card:hover {
  border-color: #d9d6ff;
  box-shadow: 0 18px 38px rgba(40,38,100,.12);
  transform: translateY(-4px);
}
.bill-card__avatar, .pool-card__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--brand-light);
}
.bill-card__note, .pool-card__note { line-height: 1.65; }
.pool-card__progress-bar { height: 10px; background: #e8e9f2; }

.leaders-section {
  background:
    radial-gradient(ellipse at 50% 0, rgba(81,69,229,.08), transparent 60%),
    #f7f8fc;
}
.leaderboard-row {
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 14px rgba(15,23,42,.035);
  transition: transform .2s ease, box-shadow .2s ease;
}
.leaderboard-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.leaderboard-row:first-child { border-color: #e7d59b; background: #fffdf6; }
.leaderboard-row:first-child .leaderboard-row__rank { color: #a46b08; }

.story-card {
  border-color: #ececf4;
  box-shadow: 0 6px 20px rgba(15,23,42,.035);
}
.story-card--featured { border-color: #c9c4ff; }
.accordion__item { box-shadow: 0 4px 14px rgba(15,23,42,.025); }

.cta-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(120deg, #3930a3, #5145e5 70%, #675cf0);
}
.cta-section__left h2 { letter-spacing: -.035em; }
.footer { background: #11152b; }
.footer__bottom { border-color: rgba(255,255,255,.12); }

.btn { border-radius: 11px; }
.btn:focus-visible, .nav a:focus-visible, .nav button:focus-visible,
.mobile-menu a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .country-picker__btn:focus-visible {
  outline: 3px solid rgba(81,69,229,.42);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .hero { padding: 56px 32px; }
}

@media (max-width: 768px) {
  .hero { padding: 44px 20px; }
  .hero__headline { letter-spacing: -.04em; }
  .hero__metrics { justify-content: flex-start; }
  .hero__actions .btn { flex: initial; min-height: 48px; }
  .bills-section__header { align-items: stretch; }
  .bills-section__controls { gap: 8px; }
}

@media (max-width: 480px) {
  .hero { padding: 36px 16px; }
  .hero__metrics { gap: 14px; }
  .metric__val { font-size: 1.2rem; }
  .leaderboard-row { gap: 10px; padding: 12px; }
  .leaderboard-row__count { font-size: .75rem; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.launch-checklist { display:flex;flex-direction:column;gap:12px; }
.launch-checklist > div { display:flex;align-items:center;gap:12px;padding:12px 14px;background:#f8fafc;border:1px solid var(--border);border-radius:12px;font-size:.88rem;font-weight:600; }
.launch-checklist__icon { display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef2ff;color:var(--brand);font-weight:800; }
.dash-card__dot { color:var(--brand); }
.dash-card__dot::before { background:var(--brand); }
.hero__pill-dot { background:#fbbf24;animation:none; }
.empty-state { grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 24px;text-align:center;background:#fff;border:1px dashed #cbd0df;border-radius:18px; }
.empty-state strong { color:var(--text);font-size:1rem; }
.empty-state span { max-width:540px;color:var(--text-muted);font-size:.875rem; }
.story-card:only-child { grid-column:1/-1;max-width:680px;margin:0 auto;width:100%; }
.fees__notice { margin:18px auto 0;max-width:760px;text-align:center;font-size:.82rem; }