/* ============================================================
   MELODEX — Premium design system
   Brand: electric blue #0251B0 · neon lime #D1FF42 ·
          blue-gray #C7D1DD · deep navy #020817 · white
   ============================================================ */

:root {
    --blue: #0251B0;
    --blue-600: #1d64c8;
    --blue-700: #04479d;
    --blue-800: #033a82;
    --lime: #D1FF42;
    --lime-600: #c0ef2e;
    --gray: #C7D1DD;
    /* Body copy on the dark landing/phone surfaces. This token was
       referenced in 11 rules but never defined, so every paragraph fell
       back to the dark ink colour and read as near-invisible text. */
    --bluegray: #C7D1DD;
    --navy: #020817;
    --navy-800: #0a1226;
    --navy-700: #101c36;
    --white: #FFFFFF;
    --ink: #172033;
    --muted: #5b6b82;
    --bg: #F4F7FB;
    --card: #FFFFFF;
    --line: #E4EAF2;
    --soft: #F1F5FB;        /* subtle fill on cards: ghost buttons, inputs, chips */
    --soft-2: #FBFCFE;      /* even lighter panel fill */
    --row-hover: #F7FAFE;   /* table row hover */
    --link: #0251B0;        /* inline brand-blue text on a light card */
    --link-strong: #033A82; /* deeper brand-blue text (labels on lime) */
    --hover-soft: #E7EDF6;  /* hover fill for ghost buttons */
    --hover-info: #EEF4FF;  /* hover fill for outlined buttons */
    --on-danger: #FFFFFF;   /* text on a solid danger button */
    --success: #067647;
    --success-bg: #ECFDF3;
    --warning: #B54708;
    --warning-bg: #FFFAEB;
    --danger: #B42318;
    --danger-bg: #FEF3F2;
    --info: #0251B0;
    --info-bg: #EFF6FF;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 3px rgba(16, 28, 54, 0.08);
    --shadow: 0 8px 24px rgba(16, 28, 54, 0.10);
    --shadow-lg: 0 18px 44px rgba(2, 8, 23, 0.22);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* ============================================================
   DARK THEME
   Applies when the user chose Dark, or chose nothing and their phone
   prefers dark. Only tokens change, so every component follows. Brand
   colours are untouched: lime stays lime, and the app surface moves from
   electric blue to deep navy so white cards become navy cards.
   `--white` is deliberately NOT overridden: it is used for text on blue
   and navy, which must stay white in both themes.
   ============================================================ */
:root[data-theme="dark"] {
    color-scheme: dark;
    --link-strong: #BBD3FF;
    --hover-soft: #1F3157;
    --hover-info: #162A52;
    --on-danger: #1A0B0A;
    --ink: #E6ECF5;
    --muted: #93A4BC;
    --bg: #060D1F;
    --card: #101C36;
    --line: #223152;
    --soft: #172745;
    --soft-2: #13203D;
    --row-hover: #172745;
    --link: #8FB9FF;
    --success: #4ADE80;
    --success-bg: rgba(74, 222, 128, 0.12);
    --warning: #FBBF24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --danger: #FF8A80;
    --danger-bg: rgba(255, 138, 128, 0.12);
    --info: #8FB9FF;
    --info-bg: rgba(143, 185, 255, 0.12);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --link-strong: #BBD3FF;
        --hover-soft: #1F3157;
        --hover-info: #162A52;
        --on-danger: #1A0B0A;
        --ink: #E6ECF5;
        --muted: #93A4BC;
        --bg: #060D1F;
        --card: #101C36;
        --line: #223152;
        --soft: #172745;
        --soft-2: #13203D;
        --row-hover: #172745;
        --link: #8FB9FF;
        --success: #4ADE80;
        --success-bg: rgba(74, 222, 128, 0.12);
        --warning: #FBBF24;
        --warning-bg: rgba(251, 191, 36, 0.12);
        --danger: #FF8A80;
        --danger-bg: rgba(255, 138, 128, 0.12);
        --info: #8FB9FF;
        --info-bg: rgba(143, 185, 255, 0.12);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
    }
}

/* The logged-in surface is electric blue in light mode and deep navy in dark. */
:root[data-theme="dark"] body.app-body {
    background:
        radial-gradient(900px 420px at 85% -8%, rgba(209, 255, 66, 0.08), transparent 55%),
        linear-gradient(178deg, #0B1530 0%, #070F24 45%, #050B1C 100%);
    background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.app-body {
        background:
            radial-gradient(900px 420px at 85% -8%, rgba(209, 255, 66, 0.08), transparent 55%),
            linear-gradient(178deg, #0B1530 0%, #070F24 45%, #050B1C 100%);
        background-attachment: fixed;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
}

/* =========================
   APP SCREEN BACKGROUND
   Reference: vibrant electric-blue dashboard surface (#0251B0)
   with a subtle depth gradient; white content cards float on top.
   ========================= */
body.app-body {
    background:
        radial-gradient(900px 420px at 85% -8%, rgba(209, 255, 66, 0.10), transparent 55%),
        linear-gradient(178deg, #0A5AC5 0%, var(--blue) 42%, #034899 100%);
    background-attachment: fixed;
    color: var(--ink);
    min-height: 100dvh;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
    body.app-body { padding-bottom: 48px; }
}

/* Headings that sit directly on the blue surface stay white. */
body.app-body .hero-greeting,
body.app-body .hero-sub,
body.app-body .hero-title {
    color: var(--white);
}

/* Bare section headings rendered directly on the blue surface. */
body.app-body main > h2,
body.app-body .screen > h2 {
    color: var(--white);
    font-size: 19px;
    font-weight: 800;
    margin: 26px 0 12px;
}

/* Page titles and their one-line subtitles sit directly on the blue/navy
   surface (not on a card), so they must be light. They were inheriting the
   dark ink, which measured 2.5:1 for the title and 1.2:1 for the subtitle. */
body.app-body main > h1.fw-bold,
body.app-body main > h1.fw-bold + p.muted {
    color: var(--white);
}
body.app-body main > h1.fw-bold + p.muted { opacity: 0.88; }

/* Profile page: line the welcome block up with the text inside the cards.
   The hero had no rules, so "Hello, Melody!" sat at the very edge of the
   content while "Account Profile" and the field labels sat a card-padding
   (20px plus its 1px border) further in. The cards also ran edge to edge on a phone. Give the
   page a side gutter, and inset the welcome block by the cards' own padding
   so every left edge is the same. */
body.app-body main.screen {
    padding: 18px 16px calc(96px + var(--safe-bottom));
}
body.app-body main.screen > .hero {
    /* 20px card padding + 1px card border = where the card's own text starts */
    padding: 4px 21px 14px;
}
body.app-body main.screen > .hero .hero-hello { margin: 0; font-size: 17px; opacity: 0.92; color: var(--white); }
body.app-body main.screen > .hero .hero-title { margin: 2px 0 0; }
body.app-body main.screen > .hero .hero-sub { margin: 6px 0 0; }
@media (min-width: 900px) {
    body.has-sidebar.app-body main.screen { max-width: 940px; margin: 0 auto; padding: 30px 36px 56px; }
}

/* Small "See All" links on blue stay lime for contrast. */
body.app-body main .see-all,
body.app-body .see-all {
    color: var(--lime);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

body.auth-body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(2, 81, 176, 0.35), transparent 60%),
        linear-gradient(160deg, var(--navy) 0%, #06182f 55%, #02214a 100%);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

img { max-width: 100%; }
a { color: var(--link); }

/* ---------- Typography ---------- */
h1, h2, h3 { line-height: 1.2; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   TOP APP BAR (logged-in customer pages)
   ============================================================ */
.appbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-800) 100%);
    color: var(--white);
    padding: calc(14px + var(--safe-top)) 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow);
}

.appbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--white);
    text-decoration: none;
}

.appbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    position: relative;
}

.appbar-avatar .online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    background: #12b76a;
    border: 2px solid var(--blue-800);
    border-radius: 50%;
}

.appbar-phone {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appbar-phone .chev { opacity: 0.75; font-size: 12px; margin-left: 4px; }

.appbar-actions { display: flex; align-items: center; gap: 10px; }

.appbar .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.appbar .icon-btn:hover { background: rgba(255, 255, 255, 0.24); }

/* ============================================================
   LAYOUT
   ============================================================ */
.page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 16px calc(96px + var(--safe-bottom));
}

.page-narrow { max-width: 640px; }

@media (min-width: 900px) {
    .page { padding: 32px 32px 48px; }
    .page-narrow { padding: 40px 24px 48px; }
}

/* ============================================================
   HERO HEADER (phone number + greeting)
   ============================================================ */
.hero-head {
    background:
        radial-gradient(900px 320px at 85% -60%, rgba(209, 255, 66, 0.16), transparent 65%),
        linear-gradient(150deg, var(--blue) 0%, var(--blue-800) 78%, var(--navy-700) 100%);
    color: var(--white);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 26px 22px 30px;
    margin: -20px -16px 22px;
}

@media (min-width: 900px) {
    .hero-head { margin: -32px -32px 28px; padding: 34px 36px 38px; border-radius: 0 0 28px 28px; }
}

.hero-greeting { font-size: 17px; opacity: 0.92; }
.hero-title { font-size: 24px; font-weight: 800; margin-top: 2px; }
.hero-title .brand-accent { color: var(--lime); }
.hero-sub { font-size: 14px; opacity: 0.85; margin-top: 6px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    padding: 20px;
}

.card + .card { margin-top: 16px; }

.card-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 26px 0 12px;
}

.section-head h2 { font-size: 17px; }
.section-head a { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--lime); }

/* ---------- Balance card (neon lime) ---------- */
.balance-card {
    background: linear-gradient(120deg, var(--lime) 0%, #b6f030 100%);
    color: var(--navy);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 14px 34px rgba(209, 255, 66, 0.28);
    display: flex;
    align-items: center;
    gap: 14px;
}

.balance-card .wallet-chip {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(2, 81, 176, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.balance-main { flex: 1; min-width: 0; }
.balance-label { font-size: 13px; font-weight: 600; color: var(--blue-800); }
.balance-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; word-break: break-all; }

.balance-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.balance-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2, 81, 176, 0.35); }

/* ---------- Data usage card ---------- */
.data-usage {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.data-usage-main { flex: 1; min-width: 170px; }
.data-usage .figure { font-size: 30px; font-weight: 800; }
.data-usage .figure small { font-size: 15px; color: var(--muted); font-weight: 600; }
.data-usage .bar {
    height: 10px;
    border-radius: 999px;
    background: var(--gray);
    margin-top: 10px;
    overflow: hidden;
}
.data-usage .bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), #57a8ff);
}

.donut {
    --p: 90;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--gray) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.donut::before {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--card);
}

.donut { position: relative; }
.donut .donut-label {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--link-strong);
    line-height: 1.25;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
}
/* Provider pill on mixed-provider plan cards (buy-data) */
.pill-provider {
    background: rgba(2, 81, 176, 0.10);
    color: var(--link);
    border: 1px solid rgba(2, 81, 176, 0.25);
}

/* ---------- Services grid ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.service-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 8px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    font: inherit;
}

.service-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.service-tile .tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--info-bg);
}

.service-tile .tile-icon.lime { background: var(--lime); }
.service-tile .tile-icon svg { width: 24px; height: 24px; }
.service-tile .tile-label { font-size: 13.5px; font-weight: 700; }
.service-tile .tile-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    background: var(--soft);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ---------- Wide link card (Data Plans) ---------- */
.link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    width: 100%;
    font: inherit;
    text-align: left;
}

.link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.link-card .lc-icon {
    width: 44px; height: 44px; border-radius: 13px;
    background: linear-gradient(135deg, var(--blue), var(--blue-600));
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.link-card .lc-body { flex: 1; min-width: 0; }
.link-card .lc-title { font-weight: 700; font-size: 15px; }
.link-card .lc-sub { font-size: 13px; color: var(--muted); }
.link-card .lc-arrow {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 6px 16px rgba(2, 81, 176, 0.28); }
.btn-primary:hover { background: var(--blue-600); }

.btn-lime { background: var(--lime); color: var(--navy); box-shadow: 0 6px 16px rgba(209, 255, 66, 0.30); }
.btn-lime:hover { background: var(--lime-600); }

.btn-outline {
    background: transparent;
    color: var(--link);
    border: 2px solid var(--link);
}
.btn-outline:hover { background: var(--info-bg); }

.btn-ghost { background: var(--soft); color: var(--ink); }
.btn-ghost:hover { background: var(--hover-soft); }

.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger-soft { background: var(--danger-bg); color: var(--danger); }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 24px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; }

/* ============================================================
   FORMS
   ============================================================ */
.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink);
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    font-family: var(--font);
    background: var(--card);
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(2, 81, 176, 0.12);
}

.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.form-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecdca;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
}

.form-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid #abefc6;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* ---------- Choice chips (network select) ---------- */
.chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    border: 2px solid var(--line);
    background: var(--card);
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chip:hover { border-color: var(--blue-600); }
.chip.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(2, 81, 176, 0.3);
}

.chip.active .chip-dot { background: var(--lime); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray); }

/* ---------- Amount buttons ---------- */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.amount-grid .amount-btn {
    border: 2px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-sm);
    padding: 12px 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
}

.amount-grid .amount-btn:hover { border-color: var(--blue-600); }
.amount-grid .amount-btn.active { border-color: var(--link); background: var(--info-bg); color: var(--link-strong); }

/* ============================================================
   PLAN CARDS
   ============================================================ */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.plan-card {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.plan-card:hover { border-color: var(--blue-600); box-shadow: var(--shadow); transform: translateY(-2px); }
.plan-card.unavailable { opacity: 0.55; }

.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-network {
    font-size: 12px;
    font-weight: 800;
    color: var(--blue-800);
    background: var(--info-bg);
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.plan-size { font-size: 19px; font-weight: 800; }
.plan-validity { font-size: 13px; color: var(--muted); }
.plan-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.plan-price { font-size: 18px; font-weight: 800; color: var(--blue-800); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px;
}

.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-failed { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }

/* ============================================================
   TRANSACTION LIST
   ============================================================ */
.tx-list { display: flex; flex-direction: column; }

.tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

.tx-row:last-child { border-bottom: none; }

.tx-icon {
    width: 42px; height: 42px;
    border-radius: 13px;
    background: var(--info-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.tx-icon.lime { background: var(--lime); }
.tx-icon.lime svg, .tx-icon.lime span { color: var(--navy); }

.tx-body { flex: 1; min-width: 0; }
/* Long lines wrap to a second line instead of squeezing the amount;
   anything beyond two lines is cut with an ellipsis (full text lives
   in the transaction detail modal). */
.tx-title {
    font-weight: 700;
    font-size: 14.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.tx-meta {
    font-size: 12.5px;
    color: var(--muted);
    display: block;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* Amount and status badge stack in a fixed right column so they never
   wrap inline or push the body text. */
.tx-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.tx-amount { font-weight: 800; font-size: 15px; white-space: nowrap; }
.tx-amount.credit { color: var(--success); }
.tx-amount.debit { color: var(--ink); }

/* ---------- Filters bar ---------- */
.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filter-chip {
    border: 1.5px solid var(--line);
    background: var(--card);
    color: var(--muted);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
}

.filter-chip.active { background: var(--navy); border-color: var(--navy); color: var(--lime); }

/* ============================================================
   STATES
   ============================================================ */
.state-box { text-align: center; padding: 34px 18px; color: var(--muted); }
.state-box .state-emoji { font-size: 34px; margin-bottom: 8px; }
.state-box h3 { color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.state-box p { font-size: 13.5px; }

.skeleton {
    border-radius: 10px;
    background: linear-gradient(90deg, #EDF1F7 25%, #F7FAFD 45%, #EDF1F7 65%);
    background-size: 200% 100%;
    animation: shimmer 1.3s infinite linear;
    height: 72px;
    margin-bottom: 10px;
}

@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
    width: 22px; height: 22px;
    border: 3px solid rgba(2, 81, 176, 0.2);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue-800) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    justify-content: space-around;
    padding: 8px 8px calc(8px + var(--safe-bottom));
    box-shadow: 0 -6px 24px rgba(2, 8, 23, 0.25);
}

.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 2px;
    border-radius: 12px;
    transition: color 0.15s, background 0.15s;
}

.bottom-nav a svg { width: 22px; height: 22px; }

.bottom-nav a.active {
    color: var(--navy);
    background: var(--lime);
    box-shadow: 0 4px 14px rgba(209, 255, 66, 0.35);
}

@media (min-width: 900px) {
    .bottom-nav { display: none; }
    .desktop-tabs {
        display: flex;
        gap: 6px;
        margin: 0 0 22px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 6px;
        box-shadow: var(--shadow-sm);
        width: fit-content;
    }
    .desktop-tabs a {
        text-decoration: none;
        color: var(--muted);
        font-weight: 700;
        font-size: 14px;
        padding: 9px 18px;
        border-radius: 999px;
    }
    .desktop-tabs a.active { background: var(--blue); color: var(--white); }
}

.desktop-tabs { display: none; }

/* ============================================================
   DESKTOP SHELL (laptops and desktops, >= 900px)
   Every feature is reachable from the sidebar, each with its icon,
   and the content column widens to use the extra space.
   ============================================================ */
.app-sidebar { display: none; }

@media (min-width: 900px) {
    body.app-body.has-sidebar {
        padding-left: 252px;
    }

    .app-sidebar {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: fixed;
        inset: 0 auto 0 0;
        width: 252px;
        z-index: 60;
        padding: 20px 14px 18px;
        background: linear-gradient(180deg, #06306c 0%, #032250 55%, var(--navy) 100%);
        border-right: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 12px 0 40px rgba(2, 8, 23, .28);
        overflow-y: auto;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 6px 10px 18px;
        text-decoration: none;
        color: var(--white);
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .02em;
    }

    .sidebar-brand .logo-mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: var(--lime);
        color: var(--navy);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
    }

    .sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
    .sidebar-brand-text small { font-size: 9.5px; letter-spacing: .22em; opacity: .62; font-weight: 700; }

    .sidebar-nav { display: flex; flex-direction: column; gap: 3px; }

    .sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 13px;
        border-radius: 12px;
        color: rgba(255, 255, 255, .78);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: background .16s ease, color .16s ease, transform .16s ease;
    }

    .sidebar-nav a svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .92; }

    .sidebar-nav a:hover,
    .sidebar-nav a:focus-visible {
        background: rgba(255, 255, 255, .10);
        color: var(--white);
        transform: translateX(2px);
        outline: none;
    }

    .sidebar-nav a.active {
        background: var(--lime);
        color: var(--navy);
        box-shadow: 0 8px 20px rgba(209, 255, 66, .22);
    }

    .sidebar-nav a.active svg { opacity: 1; }

    .sidebar-foot {
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .12);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sidebar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 12px;
        text-decoration: none;
        color: var(--white);
        transition: background .16s ease;
    }

    .sidebar-user:hover { background: rgba(255, 255, 255, .10); }
    /* On the Profile page the account chip carries the "you are here" highlight
       that the removed Profile menu item used to have. */
    .sidebar-user.active {
        background: var(--lime);
        color: var(--navy);
        box-shadow: 0 8px 20px rgba(209, 255, 66, .22);
    }
    .sidebar-user.active small { opacity: .8; }
    .sidebar-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .sidebar-user-text strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar-user-text small { font-size: 11.5px; opacity: .68; }

    .sidebar-signout {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgba(255, 255, 255, .72);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        transition: background .16s ease, color .16s ease;
    }

    .sidebar-signout svg { width: 17px; height: 17px; }
    .sidebar-signout:hover { background: rgba(255, 92, 92, .16); color: #ffd7d7; }

    /* The pill tab row is redundant once the sidebar lists everything. */
    body.has-sidebar .desktop-tabs { display: none; }

    /* Use the wider canvas instead of a phone-width column. */
    body.has-sidebar .page { max-width: 1180px; margin: 0 auto; padding: 30px 36px 56px; }
    body.has-sidebar .page.page-narrow { max-width: 940px; }
    body.has-sidebar .appbar { padding-left: 36px; padding-right: 36px; }

    body.has-sidebar .services-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
    body.has-sidebar .service-tile { align-items: flex-start; text-align: left; padding: 18px 16px; }

    /* Mouse users get clearer affordances. */
    body.has-sidebar .card,
    body.has-sidebar .service-tile,
    body.has-sidebar .plan-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    body.has-sidebar .service-tile:hover,
    body.has-sidebar .plan-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 34px rgba(2, 8, 23, .14);
        border-color: rgba(2, 81, 176, .35);
    }
    body.has-sidebar .btn:hover { transform: translateY(-1px); }
    body.has-sidebar .btn:active { transform: translateY(0); }
}

/* Two columns for the dashboard on wide screens. */
@media (min-width: 1150px) {
    body.has-sidebar .dash-columns {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 22px;
        align-items: start;
    }
}

/* ============================================================
   PRINTING
   Customers print receipts and transaction details. Drop the chrome,
   keep the numbers, and stop the coloured surfaces from eating ink.
   ============================================================ */
@media print {
    .appbar, .bottom-nav, .app-sidebar, .desktop-tabs,
    .boot-loading, #boot-loading, .toast, .modal-backdrop,
    .install-banner, .no-print { display: none !important; }

    body, body.app-body, body.app-body.has-sidebar {
        background: #fff !important;
        padding: 0 !important;
    }

    .page { margin: 0 !important; padding: 0 !important; max-width: none !important; }

    .card, .balance-card, .receipt {
        box-shadow: none !important;
        border: 1px solid #d0d5dd !important;
        break-inside: avoid;
    }

    .balance-card, .hero-head { background: #fff !important; color: #101828 !important; }
    .balance-amount, .hero-title, .hero-greeting { color: #101828 !important; }

    a[href]::after { content: ""; }
    a { color: #101828 !important; text-decoration: none; }
}

/* ============================================================
   KEYBOARD FOCUS
   Pointer users never see this; keyboard users depend on it. The
   sidebar and the app bar sit on dark surfaces, so the ring uses the
   lime accent rather than the browser's default blue.
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
    border-radius: 6px;
}

.app-sidebar :is(a, button):focus-visible,
.appbar :is(a, button):focus-visible {
    outline-color: var(--lime);
}

/* The input's own border already indicates focus; a second ring is noise. */
.input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 1px;
}

/* ============================================================
   MODALS / DIALOGS
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 23, 0.55);
    z-index: 90;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.modal-backdrop.open { display: flex; }

.modal {
    background: var(--card);
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 22px 20px calc(22px + var(--safe-bottom));
    animation: slideUp 0.22s ease-out;
}

@keyframes slideUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }

@media (min-width: 640px) {
    .modal-backdrop { align-items: center; padding: 24px; }
    .modal { border-radius: 22px; }
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.modal-head h3 { font-size: 17px; }

.modal-close {
    width: 34px; height: 34px;
    border: none;
    background: var(--soft);
    border-radius: 50%;
    font-size: 17px;
    color: var(--muted);
    cursor: pointer;
}

/* ---------- Confirm sheet rows ---------- */
.confirm-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}

.confirm-row:last-of-type { border-bottom: none; }
.confirm-row .k { color: var(--muted); }
.confirm-row .v { font-weight: 700; text-align: right; }

/* ============================================================
   TOASTS (in-app notifications)
   ============================================================ */
.toast-stack {
    position: fixed;
    top: calc(14px + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    width: min(430px, calc(100% - 28px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--navy);
    color: var(--white);
    border-radius: 14px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.25s ease-out;
    border-left: 4px solid var(--blue);
    pointer-events: auto;
}

.toast.success { border-left-color: #12b76a; }
.toast.error { border-left-color: #f97066; }
.toast.pending { border-left-color: var(--lime); }

@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   RECEIPT
   ============================================================ */
.receipt {
    border: 1.5px dashed var(--gray);
    border-radius: var(--radius);
    padding: 18px;
    background: var(--soft-2);
}

.receipt-head {
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1.5px dashed var(--gray);
}

.receipt-head .brand { font-weight: 800; color: var(--link); font-size: 17px; letter-spacing: 0.3px; }
.receipt-head .tag { font-size: 12px; color: var(--muted); }

.receipt .confirm-row { font-size: 13.5px; }
.receipt .receipt-total { text-align: center; font-size: 15px; font-weight: 800; margin-top: 10px; color: var(--blue-800); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-shell {
    width: 100%;
    max-width: 420px;
    color: var(--white);
}

.auth-brand {
    text-align: center;
    margin-bottom: 26px;
}

.auth-brand .brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 16px;
    background: var(--blue);
    color: var(--lime);
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 10px 26px rgba(2, 81, 176, 0.45);
    margin-bottom: 12px;
}

.auth-brand h1 { font-size: 21px; letter-spacing: 0.3px; }
.auth-brand h1 span { color: var(--lime); }
.auth-brand p { font-size: 13.5px; opacity: 0.75; margin-top: 4px; }

.auth-card {
    background: var(--card);
    color: var(--ink);
    border-radius: 20px;
    padding: 24px 22px;
    box-shadow: var(--shadow-lg);
}

.auth-card h2 { font-size: 19px; margin-bottom: 4px; }
.auth-card .auth-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }

.auth-alt {
    text-align: center;
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--muted);
}

.auth-alt a { color: var(--blue-700); font-weight: 700; }
.auth-alt a:hover { color: var(--blue-800); text-decoration: underline; }

.auth-back {
    display: inline-block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13.5px;
}

/* ============================================================
   ADMIN (brand tokens applied to the existing admin surface)
   ============================================================ */
.admin-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 18px 60px;
}

.admin-topbar {
    background: linear-gradient(135deg, var(--blue), var(--blue-800));
    color: var(--white);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.admin-topbar .brand { font-weight: 800; letter-spacing: 0.3px; }
.admin-topbar .brand span { color: var(--lime); }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat-card .stat-value { font-size: 21px; font-weight: 800; margin-top: 3px; color: var(--blue-800); }

/* ---------- Tables (admin + wallet) ---------- */
.table-wrap { overflow-x: auto; }

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

table.data-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}

table.data-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

table.data-table tr:hover td { background: var(--row-hover); }

/* ============================================================
   UTILITIES
   ============================================================ */
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 14px; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; }

.divider { height: 1px; background: var(--line); margin: 14px 0; border: none; }

/* ============================================================
   RESPONSIVE FINE-TUNING
   ============================================================ */
@media (max-width: 520px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .amount-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-title { font-size: 21px; }
    .balance-amount { font-size: 24px; }
    .data-usage { flex-direction: column; align-items: flex-start; }
    .donut { align-self: center; }
    .page { padding-bottom: calc(104px + var(--safe-bottom)); }
}

/* =========================
   AUTH + LANDING PAGES
   ========================= */
.auth-body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(120% 90% at 50% 0%, #0A5FCC 0%, #0251B0 38%, #020817 100%);
    color: var(--ink);
}

/* ---------- ambient premium layers ---------- */
.aurora {
    position: fixed;
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    filter: blur(90px);
    opacity: .4;
}

.aurora-1 {
    background: conic-gradient(from 20deg at 30% 30%, transparent 0deg, rgba(2, 81, 176, .5) 90deg, transparent 180deg, rgba(209, 255, 66, .1) 270deg, transparent 360deg);
    animation: auroraSpin 42s linear infinite;
}

.aurora-2 {
    background: conic-gradient(from 200deg at 70% 70%, transparent 0deg, rgba(10, 95, 204, .45) 100deg, transparent 200deg, rgba(209, 255, 66, .08) 300deg, transparent 360deg);
    animation: auroraSpin 55s linear infinite reverse;
    opacity: .5;
}

@keyframes auroraSpin {
    to { transform: rotate(360deg); }
}

.auth-body.landing::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(199, 209, 221, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(199, 209, 221, .055) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(75% 62% at 50% 34%, #000 0%, transparent 78%);
    mask-image: radial-gradient(75% 62% at 50% 34%, #000 0%, transparent 78%);
}

.spotlight {
    position: fixed;
    left: 0; top: 0;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209, 255, 66, .075), rgba(2, 81, 176, .05) 40%, transparent 62%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .6s ease;
}

body.spotlight-on .spotlight { opacity: 1; }

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px clamp(20px, 6vw, 64px);
    position: sticky;
    top: 0;
    z-index: 20;
    transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}

.landing-nav.scrolled {
    background: rgba(2, 8, 23, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px rgba(2, 8, 23, .45);
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
    color: var(--white);
    text-decoration: none;
}

.landing-logo .logo-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--blue-800));
    color: var(--lime);
    font-size: 20px;
    box-shadow: 0 8px 24px rgba(2, 81, 176, .55), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.landing-nav-links { display: flex; align-items: center; gap: 22px; }
.landing-nav-links a { font-size: 14px; }
.landing-nav-links a:hover { opacity: 1; }

/* Back-to-home link on auth pages */
.landing-nav .back-home {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(199, 209, 221, .35);
    background: rgba(10, 34, 66, .75);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.landing-nav .back-home:hover {
    color: var(--lime);
    border-color: rgba(209, 255, 66, .45);
    background: rgba(209, 255, 66, .08);
}

@media (max-width: 560px) {
    .landing-nav .back-home span,
    .landing-nav .back-home { gap: 5px; font-size: 12.5px; padding: 7px 12px; }
}

@media (max-width: 560px) {
    /* one-row nav: hero, CTA and footer all carry Sign in already */
    .landing-nav-links .btn-outline { display: none; }
    .landing-nav { flex-wrap: nowrap; gap: 8px; }
    .landing-logo { font-size: 13px; }
    .logo-mark { width: 30px; height: 30px; font-size: 15px; }
}

/* ============================================================
   HERO
   ============================================================ */
.landing-hero {
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(36px, 7vw, 76px) clamp(20px, 6vw, 64px) 90px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lime);
    background: rgba(209, 255, 66, .1);
    border: 1px solid rgba(209, 255, 66, .32);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.hero-eyebrow .pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(209, 255, 66, .7);
    animation: pulse 2.2s infinite;
}

@keyframes pulse {
    70% { box-shadow: 0 0 0 12px rgba(209, 255, 66, 0); }
    100% { box-shadow: 0 0 0 0 rgba(209, 255, 66, 0); }
}

@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px) rotateX(7deg); }
    to { opacity: 1; transform: none; }
}

.hero-pop {
    animation: heroRise .85s cubic-bezier(.2, .7, .25, 1) backwards;
    animation-delay: var(--d, 0s);
}

.landing-hero h1 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--white);
    text-wrap: balance;
}

.landing-hero h1 span {
    background: linear-gradient(90deg, var(--lime), #9ee725 60%, var(--lime));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(209, 255, 66, .28));
}

.landing-hero .lead {
    margin: 20px 0 30px;
    color: var(--bluegray);
    font-size: 17px;
    line-height: 1.75;
    max-width: 490px;
    text-wrap: pretty;
}

.landing-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.landing-cta .btn-primary {
    box-shadow: 0 14px 34px rgba(2, 81, 176, .55);
    transform: translateY(0);
    transition: transform .25s ease, box-shadow .25s ease;
}

.landing-cta .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(2, 81, 176, .65);
}

.landing-cta .btn {
    position: relative;
    overflow: hidden;
}

.landing-cta .btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
}

.landing-cta .btn:hover::after { left: 130%; }
.landing-cta .btn:focus-visible::after { left: 130%; }

.magnetic { will-change: transform; }

.hero-trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    color: var(--bluegray);
    font-size: 12.5px;
    font-weight: 600;
}

.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--lime); flex-shrink: 0; }

/* ---------- 3D hero scene ---------- */
.landing-art {
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1300px;
    perspective-origin: 50% 40%;
}

.scene {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}

.scene-glow {
    position: absolute;
    inset: -14% -22%;
    background:
        radial-gradient(42% 34% at 60% 40%, rgba(209, 255, 66, .22), transparent 70%),
        radial-gradient(50% 46% at 40% 60%, rgba(2, 81, 176, .5), transparent 72%);
    filter: blur(8px);
    transform: translateZ(-140px);
    animation: glowDrift 9s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes glowDrift {
    from { transform: translateZ(-140px) scale(1); opacity: .85; }
    to { transform: translateZ(-140px) scale(1.12); opacity: 1; }
}

.scene-ring {
    position: absolute;
    inset: -8%;
    border: 1px solid rgba(199, 209, 221, .16);
    border-radius: 50%;
    transform: translateZ(-90px);
    animation: ringSpin 26s linear infinite;
    pointer-events: none;
}

.scene-ring::after {
    content: "";
    position: absolute;
    top: 8%;
    left: 12%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 18px rgba(209, 255, 66, .9);
}

@keyframes ringSpin {
    from { transform: translateZ(-90px) rotate(0deg); }
    to { transform: translateZ(-90px) rotate(360deg); }
}

@keyframes phoneIn {
    from { opacity: 0; transform: rotateY(-42deg) rotateX(14deg) translateY(48px) scale(.93); }
    to { opacity: 1; transform: rotateY(-13deg) rotateX(5deg); }
}

.phone-in { animation: phoneIn 1.1s cubic-bezier(.16, .8, .3, 1) .25s backwards; }

.phone-shadow {
    position: absolute;
    left: 12%; right: 12%;
    bottom: -34px;
    height: 44px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(2, 8, 23, .55), transparent 70%);
    filter: blur(6px);
    animation: shadowPulse 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shadowPulse {
    0%, 100% { transform: scaleX(1); opacity: .8; }
    50% { transform: scaleX(.92); opacity: .55; }
}

.landing-phone {
    width: min(296px, 82%);
    border-radius: 40px;
    background: linear-gradient(160deg, #0A5FCC, #0251B0 55%, #04479d);
    box-shadow:
        0 46px 90px rgba(2, 8, 23, .6),
        0 18px 40px rgba(2, 8, 23, .4),
        inset 0 0 0 8px rgba(255, 255, 255, .1);
    padding: 12px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-13deg) rotateX(5deg);
    transition: transform .18s ease-out;
}

.phone-screen {
    background: var(--navy);
    border-radius: 30px;
    padding: 20px 16px 24px;
    min-height: 460px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.phone-screen::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: skewX(-16deg);
    animation: screenSheen 6.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes screenSheen {
    0%, 55% { left: -60%; }
    85%, 100% { left: 120%; }
}

.screen-head { display: flex; align-items: center; justify-content: space-between; }

.screen-hello { font-size: 11.5px; color: var(--bluegray); }
.screen-hello strong { display: block; font-size: 15px; color: var(--white); margin-top: 2px; }

.screen-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--navy);
    font-weight: 800;
    display: grid; place-items: center;
    font-size: 15px;
    transform: translateZ(30px);
}

.screen-balance {
    background: linear-gradient(135deg, var(--lime), #b8ef4f);
    border-radius: 20px;
    padding: 16px 18px;
    color: var(--navy);
    transform: translateZ(46px);
    box-shadow: 0 20px 40px rgba(2, 8, 23, .5);
}

.screen-balance .label { font-size: 11px; font-weight: 700; opacity: .75; }
.screen-balance .amount { font-size: 26px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }
.screen-balance .topup {
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 800;
    background: var(--navy);
    color: var(--lime);
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-block;
}

.screen-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.screen-tile {
    background: var(--navy-800);
    border: 1px solid rgba(199, 209, 221, .12);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bluegray);
    transform: translateZ(24px);
}

.screen-tile svg { color: var(--lime); flex-shrink: 0; }

.screen-plan {
    margin-top: auto;
    background: var(--navy-800);
    border: 1px solid rgba(199, 209, 221, .12);
    border-radius: 16px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    transform: translateZ(30px);
}

.screen-plan .p-name { color: var(--white); font-weight: 700; }
.screen-plan .p-meta { color: var(--bluegray); font-size: 10.5px; margin-top: 3px; }
.screen-plan .p-price { color: var(--lime); font-weight: 800; }

.float-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    background: rgba(10, 34, 66, .62);
    border: 1px solid rgba(199, 209, 221, .22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 9px 15px;
    white-space: nowrap;
    box-shadow: 0 18px 40px rgba(2, 8, 23, .45);
    transform-style: preserve-3d;
    animation: chipFloat 7s ease-in-out infinite;
    animation-delay: var(--fd, 0s);
}

.float-chip svg { color: var(--lime); flex-shrink: 0; }

.float-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .18), transparent 40%);
    opacity: .5;
    pointer-events: none;
}
.float-chip.lime { background: rgba(209, 255, 66, .92); color: var(--navy); border-color: transparent; }
.float-chip.lime svg { color: var(--navy); }

@keyframes chipFloat {
    0%, 100% { transform: translateZ(var(--z, 80px)) translateY(0); }
    50% { transform: translateZ(var(--z, 80px)) translateY(-14px); }
}

.chip-a { top: -6%; left: -14%; --z: 120px; }
.chip-b { bottom: 16%; left: -20%; --z: 70px; }
.chip-c { top: 26%; right: -16%; --z: 150px; }
.chip-d { bottom: -4%; right: -8%; --z: 100px; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
    perspective: 700px;
    overflow: hidden;
    padding: 26px 0 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    gap: 48px;
    width: max-content;
    transform: rotateX(16deg);
    animation: marquee 26s linear infinite;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .22em;
    color: rgba(199, 209, 221, .55);
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee-track em { font-style: normal; color: var(--lime); }

@keyframes marquee {
    from { transform: rotateX(16deg) translateX(0); }
    to { transform: rotateX(16deg) translateX(-50%); }
}

/* ============================================================
   FEATURES (3D tilt cards)
   ============================================================ */
.section-head {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 560px;
    margin: 10px auto 6px;
}

.section-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 10px;
}

.section-head h2 {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--white);
}

.section-head p { margin-top: 12px; color: var(--bluegray); font-size: 15px; line-height: 1.7; }

.landing-features {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px clamp(20px, 6vw, 64px) 70px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    perspective: 900px;
    position: relative;
    z-index: 1;
}

.landing-feature {
    position: relative;
    border-radius: 22px;
    padding: 26px 24px;
    background: linear-gradient(180deg, rgba(10, 34, 66, .55), rgba(2, 8, 23, .55));
    border: 1px solid rgba(199, 209, 221, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform-style: preserve-3d;
    transition: transform .2s ease-out, border-color .3s ease, box-shadow .3s ease;
    will-change: transform;
}

.landing-feature:hover {
    border-color: rgba(209, 255, 66, .45);
    box-shadow: 0 30px 70px rgba(2, 8, 23, .5);
}

.landing-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(209, 255, 66, .16), transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.landing-feature:hover::after { opacity: 1; }

.feature-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: rgba(2, 81, 176, .35);
    border: 1px solid rgba(199, 209, 221, .18);
    color: var(--lime);
    margin-bottom: 16px;
    transform: translateZ(34px);
}

.landing-feature h3 { font-size: 17px; margin-bottom: 10px; color: var(--white); transform: translateZ(26px); }
.landing-feature p { font-size: 14px; color: var(--bluegray); line-height: 1.65; transform: translateZ(14px); }

/* ============================================================
   PEOPLE (3D photo cards)
   ============================================================ */
.landing-people {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(20px, 6vw, 64px) 80px;
    position: relative;
    z-index: 1;
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    perspective: 900px;
}

.people-card {
    position: relative;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(199, 209, 221, .14);
    background: var(--navy-800);
    transform-style: preserve-3d;
    transition: transform .2s ease-out, border-color .3s ease, box-shadow .3s ease;
    will-change: transform;
}

.people-card:nth-child(2) { margin-top: 26px; }

.people-card:hover {
    border-color: rgba(209, 255, 66, .45);
    box-shadow: 0 30px 70px rgba(2, 8, 23, .55);
}

.people-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2, .7, .25, 1);
}

.people-card:hover img { transform: scale(1.06); }

.people-card figcaption {
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(2, 8, 23, .68);
    border: 1px solid rgba(199, 209, 221, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateZ(30px);
}

.pc-name { font-size: 12.5px; font-weight: 800; color: var(--white); }
.pc-note { font-size: 11.5px; color: var(--lime); font-weight: 600; }

/* ============================================================
   MOBILE FITNESS (Android / iOS)
   ============================================================ */
.auth-body.landing {
    display: block; /* override the auth-card flex column: flex items
                        shrink-to-fit wide children (the marquee track)
                        and blow the page sideways on phones */
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
}

.marquee { width: 100%; box-sizing: border-box; }

.landing-nav { padding-top: max(18px, env(safe-area-inset-top)); }
.landing-footer { padding-bottom: max(42px, env(safe-area-inset-bottom)); }

@media (max-width: 900px) {
    /* one-row nav on phones: hero + CTA carry the sign-in entry points */
    .landing-nav-links a:not(.btn) { display: none; }
    .landing-nav-links { gap: 10px; }
    /* balanced hero: bigger mock, tighter rhythm */
    .landing-hero { gap: 36px; padding-bottom: 56px; }
    .landing-phone { width: min(300px, 88vw); }
    .phone-screen { min-height: 420px; }
    .landing-art { overflow: hidden; padding-bottom: 26px; }
    .scene-glow { inset: -8% -6%; }
    .hero-trust { gap: 12px 18px; }
    .orb, .aurora { filter: blur(60px); }
    .aurora { opacity: .3; animation-duration: 80s; }
    .orb-lime { width: 240px; height: 240px; }
    .orb-blue { width: 320px; height: 320px; }
    .phone-shadow { bottom: -20px; height: 34px; }
    .landing-people { padding-bottom: 56px; }
    .people-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 2px 6px;
    }
    .people-grid::-webkit-scrollbar { display: none; }
    .people-card { flex: 0 0 74%; scroll-snap-align: center; }
    .people-card:nth-child(2) { margin-top: 0; }
}

@media (max-width: 420px) {
    .float-chip { font-size: 11px; padding: 7px 11px; }
    .chip-a { left: 0; }
    .chip-b { left: 2%; bottom: 8%; }
    .chip-c { right: 0; }
    .chip-d { right: 2%; }
    .hero-eyebrow { font-size: 11px; letter-spacing: .08em; }
    .landing-nav { padding-left: 14px; padding-right: 14px; gap: 10px; flex-wrap: nowrap; min-width: 0; }
    .landing-logo { font-size: 12px; gap: 7px; }
    .logo-mark { width: 26px; height: 26px; font-size: 13px; }
    .landing-cta { flex-direction: column; }
    .landing-cta .btn { width: 100%; justify-content: center; }
    .landing-nav-links { gap: 12px; }
}

@media (pointer: coarse) {
    .landing-nav .btn-sm { min-height: 42px; }
    .landing-cta .btn { min-height: 48px; }
    .people-card:hover img { transform: none; }
}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band {
    max-width: 1080px;
    margin: 0 auto 70px;
    padding: 0 clamp(20px, 6vw, 64px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
    z-index: 1;
}

.stat {
    text-align: center;
    padding: 22px 12px;
    border-radius: 18px;
    border: 1px solid rgba(199, 209, 221, .12);
    background: rgba(10, 34, 66, .35);
}

.stat b {
    display: block;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--lime);
    letter-spacing: -.02em;
}

.stat span { font-size: 12.5px; color: var(--bluegray); font-weight: 600; }

.stat { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }

.stat:hover {
    transform: translateY(-4px);
    border-color: rgba(209, 255, 66, .4);
    box-shadow: 0 22px 50px rgba(2, 8, 23, .45);
}

/* ============================================================
   CTA
   ============================================================ */
.landing-cta-card {
    max-width: 860px;
    margin: 0 auto 80px;
    padding: 0 clamp(20px, 6vw, 64px);
    position: relative;
    z-index: 1;
}

.cta-glass {
    position: relative;
    text-align: center;
    padding: clamp(36px, 6vw, 56px) 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(10, 34, 66, .5), rgba(2, 8, 23, .6));
    border: 1px solid rgba(209, 255, 66, .28);
    box-shadow: 0 40px 90px rgba(2, 8, 23, .55);
    overflow: hidden;
}

.cta-glass::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--border-angle, 0deg), rgba(209, 255, 66, .75), rgba(2, 81, 176, .35) 25%, transparent 50%, rgba(2, 81, 176, .35) 75%, rgba(209, 255, 66, .75));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: borderSpin 6s linear infinite;
    pointer-events: none;
}

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes borderSpin {
    to { --border-angle: 360deg; }
}

.cta-glass::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(2, 81, 176, .55), transparent 75%);
    pointer-events: none;
}

.cta-glass h2 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    position: relative;
    color: var(--white);
}

.cta-glass p { color: var(--bluegray); margin: 14px auto 26px; max-width: 460px; font-size: 15px; line-height: 1.7; position: relative; }
.cta-glass .landing-cta { justify-content: center; position: relative; }

.landing-footer {
    text-align: center;
    color: var(--bluegray);
    font-size: 13px;
    padding: 26px 20px 42px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ============================================================
   AMBIENT ORBS + REVEAL MOTION
   ============================================================ */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
    opacity: .5;
}

.orb-lime {
    width: 340px; height: 340px;
    background: rgba(209, 255, 66, .14);
    top: -90px; right: -110px;
    animation: orbFloat 14s ease-in-out infinite alternate;
}

.orb-blue {
    width: 460px; height: 460px;
    background: rgba(2, 81, 176, .5);
    bottom: -160px; left: -160px;
    animation: orbFloat 18s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(60px, 50px, 0); }
}

.reveal {
    opacity: 0;
    transform: translateY(30px) rotateX(9deg);
    transform-origin: 50% 100%;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .25, 1);
    transition-delay: var(--d, 0s);
}

.reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .landing-hero { grid-template-columns: 1fr; text-align: center; gap: 60px; }
    .landing-hero .lead { margin-inline: auto; }
    .landing-cta, .hero-trust { justify-content: center; }
    .landing-art { order: -1; }
    .float-chip.chip-a { left: 2%; }
    .float-chip.chip-b { left: 0; bottom: 10%; }
    .float-chip.chip-c { right: 2%; }
    .float-chip.chip-d { right: 0; }
    .landing-features { grid-template-columns: 1fr; }
    .stats-band { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .float-chip, .scene-glow, .scene-ring, .marquee-track, .orb,
    .hero-eyebrow .pulse-dot, .aurora, .phone-in, .hero-pop,
    .phone-shadow, .spotlight { animation: none !important; }
    .cta-glass::after { animation: none !important; }
    .phone-screen::before { animation: none !important; }
    .landing-phone { transition: none; }
}

/* The desktop shell moves things on hover; respect a reduced-motion request
   the same way the landing page does. */
@media (prefers-reduced-motion: reduce) {
    body.has-sidebar .sidebar-nav a,
    body.has-sidebar .service-tile,
    body.has-sidebar .plan-card,
    body.has-sidebar .btn {
        transition: none !important;
    }
    body.has-sidebar .sidebar-nav a:hover,
    body.has-sidebar .sidebar-nav a:focus-visible,
    body.has-sidebar .service-tile:hover,
    body.has-sidebar .plan-card:hover,
    body.has-sidebar .btn:hover,
    body.has-sidebar .btn:active {
        transform: none !important;
    }
}

/* =========================
   FAVORITE CHIPS
   ========================= */
.chip-wrap { display: inline-flex; align-items: center; }
.chip-remove {
    border: none;
    background: transparent;
    color: var(--danger, #B42318);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: -6px;
    border-radius: 999px;
    line-height: 1;
}
.chip-remove:hover { background: rgba(180, 35, 24, .12); }

/* =========================
   PROFILE PICTURE
   ========================= */
.avatar-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.appbar-avatar .avatar-photo { border: 2px solid rgba(255, 255, 255, 0.85); }

.avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 0 14px;
}

.avatar-big {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar-big .avatar-photo { border: none; }
.avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.avatar-hint { font-size: 12px; color: var(--muted); margin: 0; }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ============================================================
   PROFILE PAGE COMPONENTS (purchase-pin.html)
   ============================================================ */
body.app-body .hero { padding: 6px 2px 18px; }
.hero-compact { padding-bottom: 14px; }
.hero-hello { font-size: 17px; color: var(--white); opacity: 0.94; }
body.app-body .hero-title.compact { font-size: 26px; margin-top: 2px; }
body.app-body .hero-title.compact span { color: var(--lime); }

.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px;
    background: var(--success-bg);
    color: var(--success);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 22px;
    margin: 0;
}

.profile-item dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-item dd { margin: 3px 0 0; font-weight: 600; color: var(--ink); }

.form-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    color: var(--ink);
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(2, 81, 176, 0.15);
}

.pin-input {
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 20px;
    font-weight: 700;
}

.pin-form { max-width: 420px; }

.pin-state { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

.message {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
}

.message.error { background: var(--danger-bg); color: var(--danger); }
.message.success { background: var(--success-bg); color: var(--success); }

.btn-secondary {
    background: var(--card);
    color: var(--link);
    border: 1.5px solid var(--link);
}

.btn-secondary:hover { background: var(--hover-info); }

.content-pad { height: 20px; }

.section-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.install-steps {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.7;
}
.install-steps b { color: var(--link); }
.install-help { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(2, 81, 176, .08); border: 1px solid rgba(2, 81, 176, .25); color: #10243e; font-size: 13.5px; line-height: 1.55; }
.install-help.hidden { display: none; }
/* Continue with Google (login + registration) */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-soft, #C7D1DD); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(199, 209, 221, .3); }
.google-btn-wrap { display: flex; justify-content: center; }


/* ---------- Cold-start boot indicator ---------- */
.boot-loading {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    background: rgba(2, 8, 23, 0.92); color: #fff; font-size: 13px; font-weight: 500;
    box-shadow: 0 12px 32px rgba(2, 8, 23, 0.35);
    border: 1px solid rgba(199, 209, 221, 0.18);
}
.boot-loading .spin {
    width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
    border: 2px solid rgba(199, 209, 221, 0.25); border-top-color: #D1FF42;
    animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* First-time setup: the "add a profile picture" step after creating a PIN. */
.onboarding-photo .onboarding-avatar { display: flex; justify-content: center; margin: 18px 0 16px; }
.onboarding-photo .avatar-big { width: 120px; height: 120px; font-size: 40px; }
.onboarding-photo .btn + .btn, .onboarding-photo .btn + input + .btn { margin-top: 10px; }

/* Deposit fee breakdown on the fund page. Reuses .confirm-row so it follows the
   app's spacing and the dark theme without extra colour rules. */
#confirm-message { white-space: pre-line; }
.fee-notice { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--lime, #D1FF42); color: #10243e; font-size: 14px; line-height: 1.5; font-weight: 500; }
.fee-notice b, .fee-notice strong { font-weight: 800; }
.fee-breakdown { margin: 4px 0 14px; padding: 6px 14px; border-radius: 14px; background: rgba(2, 81, 176, .07); border: 1px solid rgba(2, 81, 176, .18); }
.fee-breakdown .fee-total .k { color: inherit; font-weight: 700; }
.fee-breakdown .fee-total .v { font-size: 16px; }


/* ---------- Auth pages: one centred column ----------
   Login, Create account, Forgot and Reset password share the same markup:
   nav, hero heading, card. The card and hero had no width of their own, so
   each sized itself to its content. A form with more fields (Create account)
   therefore stretched across a whole laptop screen while Login looked fine.
   Pin all three to the same column so every auth page lines up identically.
   Scoped away from the landing page, which is a different layout. */
body.auth-body:not(.landing) {
    justify-content: flex-start;
    padding: 0 16px max(32px, env(safe-area-inset-bottom));
}

body.auth-body:not(.landing) .landing-nav,
body.auth-body:not(.landing) .auth-hero,
body.auth-body:not(.landing) .auth-card {
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

body.auth-body:not(.landing) .landing-nav { padding-left: 0; padding-right: 0; }

body.auth-body:not(.landing) .auth-hero {
    text-align: center;
    padding: 18px 4px 22px;
    color: #fff;
}

body.auth-body:not(.landing) .auth-hero h1 {
    font-size: clamp(24px, 6.2vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.18;
    margin: 0 0 8px;
}

body.auth-body:not(.landing) .auth-hero p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gray, #C7D1DD);
}

.auth-accent { color: var(--lime, #D1FF42); }

body.auth-body:not(.landing) .auth-card { padding: 26px 24px 22px; }
body.auth-body:not(.landing) .auth-card .form-label { font-size: 18px; font-weight: 800; margin-bottom: 14px; }