@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
    --bg-deep:#0c0a1f;
    --bg-mid:#241a3f;
    --bg-low:#5a2f45;
    --horizon-1:#a94a5a;
    --horizon-2:#e08a5a;
    --horizon-3:#f5c177;
    --text-light:#f6f1ea;
    --text-muted:rgba(246,241,234,0.82);
    --text-faint:rgba(246,241,234,0.65);
    --gold:#f2b56b;
    --gold-soft:#f7cf9a;
    --card-bg:rgba(18,13,32,0.72);
    --card-border:rgba(255,222,180,0.22);
    --nav-h:76px;
}

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

html{
    scroll-behavior:smooth;
}

body, html{
    font-family:'Manrope', sans-serif;
    color:var(--text-light);
    background:var(--bg-deep);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
}

h1, h2, h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
}

a{
    color:inherit;
    text-decoration:none;
}

/* ===================== BACKGROUND LAYERS ===================== */

.bg-gradient{
    position:fixed;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90,50,90,0.55), transparent 60%),
        linear-gradient(180deg,
            var(--bg-deep) 0%,
            var(--bg-mid) 38%,
            var(--bg-low) 62%,
            var(--horizon-1) 80%,
            var(--horizon-2) 92%,
            var(--horizon-3) 100%);
    pointer-events:none;
}

.bg-gradient::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 70% 40% at 50% 100%, rgba(247,207,154,0.35), transparent 70%);
}

#bg-canvas{
    position:fixed;
    inset:0;
    z-index:1;
    width:100vw;
    height:100vh;
    pointer-events:none;
}

/* ===================== NAV ===================== */

nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:20;
    height:var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5vw;
    background:rgba(12,10,31,0.5);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,222,180,0.12);
}

.wordmark{
    font-family:'Fraunces', serif;
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--text-light);
    display:flex;
    align-items:baseline;
    gap:2px;
}

.wordmark span.dot{
    color:var(--gold);
    font-size:1.7rem;
    line-height:0;
}

#buy_now_link{
    display:inline-flex;
    align-items:center;
    padding:11px 22px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    color:#241407;
    font-weight:700;
    font-size:0.92rem;
    letter-spacing:0.01em;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:0 4px 18px rgba(242,181,107,0.25);
}

#buy_now_link:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(242,181,107,0.4);
}

#buy_now_link:focus-visible{
    outline:2px solid var(--gold-soft);
    outline-offset:3px;
}

/* ===================== MAIN / SECTIONS ===================== */

main{
    position:relative;
    z-index:10;
}

section{
    position:relative;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding-left:5vw;
    padding-right:5vw;
}

/* ===================== HERO ===================== */

.hero{
    padding-top:calc(var(--nav-h) + 12vh);
    padding-bottom:8vh;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero .eyebrow{
    font-size:0.78rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold-soft);
    margin-bottom:22px;
    font-weight:700;
}

.hero h1{
    font-size:clamp(2rem, 6vw, 5rem);
    line-height:1.08;
    max-width:920px;
    color:var(--text-light);
    text-shadow:0 2px 30px rgba(0,0,0,0.45);
}

.hero h1 em{
    font-style:italic;
    color:var(--gold-soft);
}

.hero p.sub{
    margin-top:28px;
    max-width:680px;
    font-size:1.08rem;
    line-height:1.7;
    color:var(--text-muted);
}

.hero .hero-cta{
    margin-top:40px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
}

.btn-ghost{
    padding:13px 26px;
    border-radius:999px;
    border:1px solid rgba(246,241,234,0.35);
    color:var(--text-light);
    font-weight:600;
    font-size:0.95rem;
    transition:background 0.2s ease, transform 0.2s ease;
}

.btn-ghost:hover{
    background:rgba(246,241,234,0.1);
    transform:translateY(-2px);
}

/* ===================== CARDS ===================== */

.cards{
    padding-top:6vh;
    padding-bottom:8vh;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:24px;
}

.card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:38px 35px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,222,180,0.45);
    box-shadow:0 16px 40px rgba(0,0,0,0.4);
}

.card .num{
    font-family:'Fraunces', serif;
    font-size:0.85rem;
    color:var(--gold-soft);
    letter-spacing:0.08em;
    margin-bottom:16px;
    display:block;
}

.card h3{
    font-size:1.3rem;
    margin-bottom:14px;
    color:var(--text-light);
}

.card p{
    font-size:0.98rem;
    line-height:1.65;
    color:var(--text-muted);
}

.section-heading{
    text-align:center;
    margin-bottom:48px;
}

.section-heading h2{
    font-size:clamp(1.5rem, 3vw, 2.2rem);
    color:var(--text-light);
}

.section-heading p{
    margin-top:12px;
    color:var(--text-muted);
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
}

/* ===================== CTA ===================== */

.cta{
    padding-top:10vh;
    padding-bottom:14vh;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.cta-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:24px;
    padding:60px 40px;
    max-width:640px;
    width:100%;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.signal-status{
    font-size:0.8rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold-soft);
    font-weight:700;
}

.signal-status::before{
    content:"● ";
    color:#7ee787;
}

#buy_now_bottom.signal-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:19px 46px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    color:#241407;
    font-weight:800;
    font-size:1.1rem;
    letter-spacing:0.01em;
    box-shadow:0 10px 30px rgba(242,181,107,0.3);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

#buy_now_bottom.signal-cta:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 14px 38px rgba(242,181,107,0.45);
}

#buy_now_bottom.signal-cta:focus-visible{
    outline:2px solid var(--gold-soft);
    outline-offset:4px;
}

.signal-sub{
    font-size:0.88rem;
    color:var(--text-faint);
}

/* ===================== FOOTER ===================== */

footer{
    position:relative;
    z-index:10;
    text-align:center;
    padding:32px 5vw 48px;
    color:var(--text-muted);
    font-size:0.85rem;
    background:rgba(10,8,26,0.82);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,222,180,0.14);
}

footer a{
    color:var(--gold-soft);
    text-decoration:underline;
}

footer a:hover{
    color:var(--gold);
}

/* ===================== MOTION ===================== */

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; transition:none !important; }
}

/* ===================== SMALL SCREENS ===================== */

@media (max-width:480px){
    :root{ --nav-h:64px; }
    nav{ padding:0 20px; }
    .wordmark{ font-size:1.2rem; }
    #buy_now_link{ padding:9px 16px; font-size:0.82rem; }
    .hero{ padding-top:calc(var(--nav-h) + 10vh); padding-bottom:6vh; }
    .hero p.sub{ font-size:0.98rem; }
    .cards{ padding-top:4vh; padding-bottom:6vh; }
    .card{ padding:30px 24px; }
    .cta-panel{ padding:42px 24px; border-radius:20px; width:100%; }
    #buy_now_bottom.signal-cta{ padding:16px 34px; font-size:1rem; width:100%; }
}