/* ───────────────────────────────────────────────────────────────
   GYMEX — "Night Summit" theme layer (v2, amplified)
   Loaded after each page's inline styles; overrides the shared
   token set and core components site-wide. Pre-dawn alpine vibe:
   cold graphite sky, moon, glacier-blue horizon, triple ridgeline,
   falling snow.
   ─────────────────────────────────────────────────────────────── */

:root {
    --bg: #04070d;
    --bg-mid: #0c1828;
    --surface: rgba(15, 25, 40, 0.62);
    --surface-hover: rgba(20, 32, 51, 0.85);
    --border: rgba(214, 232, 255, 0.10);
    --border-highlight: rgba(214, 232, 255, 0.20);
    --text: #f2f6fb;
    --text-muted: #8a9cb5;
    --accent: #9fd8ff;
    --accent-dim: rgba(159, 216, 255, 0.10);
    --accent-glow: rgba(159, 216, 255, 0.18);
    --accent2: #8aa6c9;
    --accent2-dim: rgba(138, 166, 201, 0.12);
    --glass: rgba(214, 232, 255, 0.04);
    --ink: #06121f;
}

/* ── The mountain scene ──
   Painted on html/body pseudo-elements so no page markup changes
   are needed. body::before layer order (top→bottom): stars, moon,
   summit glow, fog, near ridge, mid ridge, far ridge, sky. */
body {
    background: var(--bg);
}
body::before {
    content: '';
    position: fixed; inset: 0;
    z-index: 0; pointer-events: none;
    background-image:
        /* sparse stars */
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7), transparent 100%),
        radial-gradient(1px 1px at 38% 8%, rgba(255,255,255,0.5), transparent 100%),
        radial-gradient(1.5px 1.5px at 64% 14%, rgba(255,255,255,0.6), transparent 100%),
        radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,0.4), transparent 100%),
        radial-gradient(1px 1px at 51% 24%, rgba(255,255,255,0.35), transparent 100%),
        radial-gradient(1.5px 1.5px at 7% 38%, rgba(255,255,255,0.45), transparent 100%),
        radial-gradient(1px 1px at 27% 30%, rgba(255,255,255,0.3), transparent 100%),
        radial-gradient(1px 1px at 72% 6%, rgba(255,255,255,0.45), transparent 100%),
        /* moon + halo, upper right */
        radial-gradient(circle at 81% 12%, rgba(236, 246, 255, 0.95) 0, rgba(236, 246, 255, 0.9) 22px, rgba(236, 246, 255, 0.12) 26px, transparent 30px),
        radial-gradient(circle at 81% 12%, rgba(208, 232, 255, 0.20) 0, transparent 120px),
        /* pre-dawn glow breaking over the summit line */
        radial-gradient(ellipse 100% 44% at 50% 104%, rgba(125, 196, 255, 0.30), rgba(159, 216, 255, 0.10) 45%, transparent 70%),
        /* drifting fog band above the ridges */
        linear-gradient(180deg, transparent 52%, rgba(159, 216, 255, 0.05) 62%, rgba(159, 216, 255, 0.09) 72%, transparent 86%),
        /* near ridge (darkest, jagged, snow-capped) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'%3E%3Cpath fill='%23040810' d='M0 280 L0 190 L110 128 L200 168 L320 76 L410 140 L540 48 L640 118 L760 78 L900 158 L1040 70 L1170 156 L1300 108 L1440 170 L1440 280 Z'/%3E%3Cpath fill='%23e6f2ff' opacity='0.85' d='M320 76 L348 106 L292 106 Z'/%3E%3Cpath fill='%23e6f2ff' opacity='0.95' d='M540 48 L574 86 L506 86 Z'/%3E%3Cpath fill='%23e6f2ff' opacity='0.7' d='M1040 70 L1068 100 L1012 100 Z'/%3E%3Cpath fill='%23e6f2ff' opacity='0.5' d='M760 78 L780 100 L740 100 Z'/%3E%3C/svg%3E"),
        /* mid ridge */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%230a1525' opacity='0.95' d='M0 300 L0 170 L140 105 L280 165 L430 70 L560 150 L700 55 L840 140 L990 80 L1140 160 L1280 95 L1440 150 L1440 300 Z'/%3E%3Cpath fill='%23cfe6ff' opacity='0.5' d='M430 70 L452 96 L408 96 Z'/%3E%3Cpath fill='%23cfe6ff' opacity='0.6' d='M700 55 L726 86 L674 86 Z'/%3E%3Cpath fill='%23cfe6ff' opacity='0.4' d='M1280 95 L1300 118 L1260 118 Z'/%3E%3C/svg%3E"),
        /* far ridge, soft in haze */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23152843' opacity='0.8' d='M0 320 L0 200 L130 140 L270 195 L420 100 L570 175 L720 75 L880 165 L1040 105 L1200 180 L1340 130 L1440 165 L1440 320 Z'/%3E%3C/svg%3E"),
        /* sky: graphite high, cold blue band at the horizon */
        linear-gradient(180deg, #03060b 0%, #081323 34%, #102036 58%, #18304e 78%, #122742 92%, #0c1b30 100%);
    background-repeat: no-repeat;
    background-size:
        100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh,
        100% 60vh, 100% 60vh,
        100% 100%,
        100% 100%,
        100% min(30vh, 340px),
        100% min(40vh, 440px),
        100% min(50vh, 540px),
        100% 100%;
    background-position:
        top, top, top, top, top, top, top, top,
        top, top,
        bottom, top,
        bottom, bottom, bottom,
        top;
}

/* Falling snow — two layers (near = body::after, far = html::after),
   seamless vertical loops on repeating tiles, transform-only. */
body::after, html::after {
    content: '';
    position: fixed; left: 0; right: 0;
    z-index: 1; pointer-events: none;
    will-change: transform;
}
body::after {
    top: -300px; bottom: -300px;
    opacity: 0.8;
    background-image:
        radial-gradient(2.5px 2.5px at 17% 21%, rgba(238, 247, 255, 0.95), transparent 100%),
        radial-gradient(1.5px 1.5px at 63% 9%, rgba(238, 247, 255, 0.7), transparent 100%),
        radial-gradient(3px 3px at 84% 47%, rgba(238, 247, 255, 0.55), transparent 100%),
        radial-gradient(1.5px 1.5px at 39% 58%, rgba(238, 247, 255, 0.75), transparent 100%),
        radial-gradient(2px 2px at 9% 79%, rgba(238, 247, 255, 0.6), transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 86%, rgba(238, 247, 255, 0.65), transparent 100%),
        radial-gradient(2.5px 2.5px at 49% 35%, rgba(238, 247, 255, 0.5), transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 68%, rgba(238, 247, 255, 0.55), transparent 100%);
    background-size: 300px 300px;
    animation: snowfall-near 13s linear infinite;
}
html::after {
    top: -460px; bottom: -460px;
    opacity: 0.45;
    background-image:
        radial-gradient(1.5px 1.5px at 24% 14%, rgba(222, 238, 255, 0.7), transparent 100%),
        radial-gradient(1px 1px at 56% 38%, rgba(222, 238, 255, 0.55), transparent 100%),
        radial-gradient(1.5px 1.5px at 81% 61%, rgba(222, 238, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 11% 52%, rgba(222, 238, 255, 0.6), transparent 100%),
        radial-gradient(1px 1px at 67% 82%, rgba(222, 238, 255, 0.45), transparent 100%),
        radial-gradient(1.5px 1.5px at 41% 91%, rgba(222, 238, 255, 0.4), transparent 100%);
    background-size: 460px 460px;
    animation: snowfall-far 30s linear infinite;
}
@keyframes snowfall-near {
    from { transform: translateY(-300px); }
    to   { transform: translateY(0); }
}
@keyframes snowfall-far {
    from { transform: translateY(-460px); }
    to   { transform: translateY(0); }
}

/* Retire the old tech-grid backdrop and orbs entirely */
.grid-bg, .bg-gradient, .orb { display: none; }

/* ── Full-bleed frosted nav bar ── */
nav {
    position: sticky; top: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    padding: 12px max(32px, env(safe-area-inset-right)) 12px max(32px, env(safe-area-inset-left));
    border-radius: 0;
}
.nav-bg {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(214, 232, 255, 0.16);
    background: linear-gradient(180deg, rgba(214, 232, 255, 0.06), rgba(8, 14, 24, 0.62) 60%);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav-links {
    border: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}
.nav-link { border-radius: 999px; }
.nav-link.active {
    color: var(--ink);
    background: linear-gradient(135deg, #e2f2ff, var(--accent));
    border-color: transparent;
    font-weight: 700;
}

/* ── Type: icy headlines everywhere, wide-tracked alpine labels ── */
h1, .section-title {
    background: linear-gradient(180deg, #ffffff 26%, #cfe6ff 68%, #9fd8ff 105%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-label {
    letter-spacing: 0.32em;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}
.section-label-line {
    width: 34px; height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}
.section-title { letter-spacing: -0.02em; }

/* ── Buttons: glacier ── */
.btn { border-radius: 12px; }
.btn-primary {
    color: var(--ink);
    background: linear-gradient(135deg, #e6f4ff, var(--accent) 55%, #7cc4f8);
    box-shadow: 0 4px 24px rgba(159, 216, 255, 0.35), 0 0 70px rgba(159, 216, 255, 0.12);
}
.btn-primary:hover {
    box-shadow: 0 10px 40px rgba(159, 216, 255, 0.5), 0 0 100px rgba(159, 216, 255, 0.2);
}
.btn-secondary {
    background: rgba(214, 232, 255, 0.06);
    border-color: rgba(214, 232, 255, 0.22);
}

/* ── Frosted cards: icy sheen on the top edge ── */
.feature-card, .why-card, .stat-card, .positioning, .cta-box,
.vs-card, .faq-item, .matrix-wrap, .plan-card, .tier-card, .contact-card {
    background-image: linear-gradient(180deg, rgba(214, 232, 255, 0.07), rgba(214, 232, 255, 0.015) 80px, transparent 140px);
    border-color: rgba(214, 232, 255, 0.14);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── Hero (homepage) ── */
.hero h1 {
    background: linear-gradient(180deg, #ffffff 22%, #cfe6ff 64%, #9fd8ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeUp 0.7s ease-out 0.1s both;
}

/* Stage floor reads as moonlit snowfield */
.stage-floor {
    background: radial-gradient(ellipse at center, rgba(214, 235, 255, 0.22), rgba(138, 166, 201, 0.06) 45%, transparent 70%);
}

/* ── Manifesto strip (homepage) ── */
.manifesto { text-align: center; }
.manifesto .manifesto-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.38em; text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 22px;
}
.manifesto h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(34px, 1.6rem + 4.5vw, 64px);
    font-weight: 800; line-height: 1.06; letter-spacing: -0.025em;
    background: linear-gradient(180deg, #ffffff 30%, #9fb8d8 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 22px;
}
.manifesto p {
    color: var(--text-muted);
    max-width: 520px; margin: 0 auto;
    font-size: 16px; line-height: 1.8;
}
.manifesto strong { color: var(--text); font-weight: 600; }

/* ── Compare page: capability matrix as frosted slab ── */
.matrix thead th.col-gymex {
    background: linear-gradient(180deg, rgba(159, 216, 255, 0.16), rgba(159, 216, 255, 0.06));
}
.matrix tbody td.col-gymex { background: rgba(159, 216, 255, 0.06); }

/* ── Footer: quiet basecamp ── */
footer { border-top: 1px solid var(--border); }

/* ── Comfort & small screens ── */
@media (max-width: 700px) {
    html::after { display: none; }          /* one snow layer on phones */
    body::after { opacity: 0.55; }
    body::before {
        background-size:
            100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh, 100% 50vh,
            100% 60vh, 100% 60vh,
            100% 100%,
            100% 100%,
            100% min(24vh, 240px),
            100% min(32vh, 320px),
            100% min(40vh, 400px),
            100% 100%;
    }
}
@media (max-width: 560px) {
    nav { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body::after, html::after { animation: none; display: none; }
}