/* ===== Luxurious, eye‑soothing palette (gold‑centric) ===== */
:root {
    --charcoal-900: #0F1216; /* page background */
    --charcoal-800: #151A20; /* section dark */
    --charcoal-700: #1C2229; /* cards dark */
    --ivory: #F7F6F2; /* light section */
    --warm-gray: #B8C0CA; /* light neutral text */
    --muted: #9AA5B1; /* subtle text */
    --gold: #D4AF37; /* primary accent */
    --soft-gold: #E8D18A; /* highlight */
    --deep-gold: #C09A2E; /* hover state */
    --ink: #0B0F14; /* text on gold */
    --gray: #d4d4d4;
    --brown: linear-gradient(45deg, #BF953F, #FCF6BA, #cf9e34, #FBF5B7, #AA771C);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
    color: #EEF2F6;
    background: radial-gradient(1200px 600px at 90% -20%, rgba(232, 209, 138, 0.12), transparent 55%),
    linear-gradient(180deg, var(--charcoal-900), var(--charcoal-800));
}

/* Navbar */
.navbar {
    backdrop-filter: saturate(160%) blur(6px);
    background: linear-gradient(180deg, rgb(8, 71, 46), rgb(22, 168, 107));
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.bg-gray {
    background: var(--gray);
}

.store-badge {
    height: 5rem;       /* tweak to taste */
    width: auto;        /* keep aspect ratio */
    display: block;     /* avoids baseline gaps */
}

.app-phone {
    height: auto;       /* tweak to taste */
    width: 80%;        /* keep aspect ratio */
}

.brand-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff8, transparent 40%), linear-gradient(135deg, var(--soft-gold), var(--gold));
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}

/* Buttons inspired by L&T page */
.btn-gold {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-weight: 700;
    color: var(--ink);
    background: linear-gradient(180deg, var(--soft-gold), var(--gold));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-gold:hover {
    background: linear-gradient(180deg, var(--gold), var(--deep-gold));
    color: var(--ink);
    box-shadow: 0 12px 26px rgba(212, 175, 55, 0.3);
}

.btn-outline-gold {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-weight: 700;
    color: var(--soft-gold);
    background: transparent;
    border: 1.5px solid var(--soft-gold);
    border-radius: 999px;
}

.color-gold {
    color: var(--deep-gold);
}

@media (max-width: 768px) {
    .store-section {
        flex-direction: column;
    }
}

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

/* Section shells */
.section-dark {
    background: linear-gradient(180deg, rgba(21, 26, 32, 0.65), rgba(28, 34, 41, 0.65));
}

.section-light {
    background: var(--ivory);
    color: #141A1F;
}

.kicker {
    color: var(--charcoal-700);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 800;
    font-size: .75rem;
}

.title-xl {
    font-weight: 800;
    line-height: 1.05;
    color: var(--charcoal-900);
}

.price-banner h2 {
    width: fit-content;
    background: var(--brown);
    padding: 8px 36px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: auto;
    position: relative;
    border-radius: 8px;
    background-size: 400% 400%;
    animation: Gradient 3s ease infinite, rocking 3s ease infinite;
    color: #000
}

@keyframes Gradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0);
}

/* Cards / features */
.card-dark {
    background: var(--charcoal-700);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.icon-chip {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--soft-gold);
    font-weight: 800;
}

/* Stats */
.stat {
    text-align: center;
    background: rgba(21, 26, 32, 0.55);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
}

.stat b {
    font-size: clamp(2rem, 4.8vw, 3rem);
    color: var(--soft-gold);
    letter-spacing: -0.5px;
}

/* Roadmap */
.mile {
    background: var(--charcoal-700);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    position: relative;
}

.mile::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1rem;
    width: 12px;
    height: 12px;
    background: var(--soft-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(232, 209, 138, 0.25);
}

/* Forms */
.form-card {
    background: var(--charcoal-700);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
}

.form-card .form-control, .form-card .form-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.form-card .form-control::placeholder {
    color: #b8c3cf;
}

.form-check-label {
    color: #C7D2DA;
}

/* Footer */
footer {
    background: #0D1518;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    color: #cbd5e1;
}