@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

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

html {
    scroll-behavior: smooth;
}

body {
    background: #05060b;
    color: #f2f4f8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ---------- Layers ---------- */

.bg-base {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(125, 216, 255, 0.08), transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(180, 139, 255, 0.08), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 139, 208, 0.06), transparent 60%),
        #05060b;
}

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

.content {
    position: relative;
    z-index: 10;
}

/* ---------- Nav ---------- */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5vw;
    background: rgba(5, 6, 11, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

.logo {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    background: linear-gradient(100deg, #ffffff 0%, #a9e6ff 35%, #c9b3ff 65%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#buy_now_link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: #05060b;
    background: linear-gradient(100deg, #9be8ff, #c9b3ff);
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

#buy_now_link:hover,
#buy_now_link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(155, 232, 255, 0.35);
    outline: none;
}

/* ---------- Hero ---------- */

.hero {
    padding: 14vh 6vw 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8fd7ff;
    margin-bottom: 22px;
    opacity: 0.85;
}

h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

h1 .line {
    display: block;
}

h1 .accent {
    background: linear-gradient(100deg, #9be8ff, #c9b3ff 50%, #ffb3e6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero p.sub {
    margin-top: 28px;
    max-width: 680px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #a9b1c4;
}

/* ---------- Cards ---------- */

.cards {
    padding: 4vh 6vw 10vh;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: 38px 34px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.card:hover {
    transform: translateY(-6px);
    border-color: rgba(180, 200, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.card .mark {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(100deg, #9be8ff, #c9b3ff);
    margin-bottom: 20px;
}

.card h3 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    color: #f2f4f8;
}

.card p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #b7bed0;
}

/* ---------- CTA ---------- */

.cta {
    padding: 10vh 6vw 16vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    margin-bottom: 16px;
}

.cta .cta-lead {
    max-width: 560px;
    color: #a9b1c4;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 52px;
}

.cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.signal-status {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7be6b0;
}

.signal-status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7be6b0;
    box-shadow: 0 0 10px #7be6b0;
    margin-right: 10px;
    vertical-align: middle;
}

#buy_now_bottom {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: #05060b;
    background: linear-gradient(100deg, #9be8ff, #c9b3ff 55%, #ffb3e6);
    padding: 20px 52px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 12px 40px rgba(155, 232, 255, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: inline-block;
}

#buy_now_bottom:hover,
#buy_now_bottom:focus-visible {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 18px 50px rgba(200, 179, 255, 0.35);
    outline: none;
}

.signal-sub {
    font-size: 0.85rem;
    color: #8890a8;
}

/* ---------- Footer (served via SSI from /_footer.html) ---------- */
/*
   The footer markup is injected after our content by layout_end.html and
   renders as a plain, non-positioned element. Because .bg-base and
   #currentCanvas are fixed and cover the full viewport at every scroll
   position, an unpositioned footer would be painted underneath them. Lift
   it into its own stacking context above the animation layer and give it
   a solid backdrop so its text stays legible regardless of what the
   canvas is drawing behind it.
*/
footer {
    position: relative;
    z-index: 10;
    background: rgba(5, 6, 11, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #8890a8;
    font-size: 0.8rem;
    line-height: 1.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
    nav {
        padding: 16px 5vw;
    }

    .logo {
        font-size: 1.15rem;
    }

    #buy_now_link {
        padding: 8px 16px;
        font-size: 0.78rem;
    }

    .hero {
        padding: 12vh 6vw 8vh;
    }

    .hero p.sub {
        font-size: 0.95rem;
    }

    .cards {
        padding: 2vh 6vw 8vh;
        gap: 18px;
    }

    .card {
        padding: 30px 26px;
    }

    #buy_now_bottom {
        padding: 17px 38px;
        font-size: 1rem;
        width: 100%;
    }

    .cta {
        padding: 8vh 6vw 12vh;
    }
}

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