/* ══════════════════════════════════════════════════════════
   coming-soon-theme.css — aligns coming-soon.html with the
   site-wide "Nebula Glass" theme (see theme.css).
   Loads AFTER coming-soon.css. Pure CSS, no external assets.
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   NEBULA BACKGROUND (matches index.html)
══════════════════════════════════════════ */
body {
    background: #0a0616;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(700px 560px at 10% 6%, rgba(124, 58, 237, .55), transparent 60%),
        radial-gradient(620px 520px at 92% 12%, rgba(255, 157, 66, .30), transparent 62%),
        radial-gradient(680px 620px at 78% 55%, rgba(217, 70, 239, .28), transparent 60%),
        radial-gradient(560px 480px at 6% 60%, rgba(34, 211, 238, .18), transparent 62%),
        radial-gradient(760px 640px at 50% 100%, rgba(139, 92, 246, .40), transparent 65%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, .55) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 12%, rgba(255, 255, 255, .4) 50%, transparent 100%),
        radial-gradient(1px 1px at 80% 70%, rgba(255, 255, 255, .5) 50%, transparent 100%),
        radial-gradient(1px 1px at 35% 82%, rgba(255, 255, 255, .35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 40%, rgba(255, 255, 255, .45) 50%, transparent 100%);
    background-repeat: repeat;
    background-size: 340px 340px;
}

/* Unify accent gradient with the main site (purple → orange) */
span {
    background: linear-gradient(90deg, #9061f9, #ffb366);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════
   FLOATING PILL NAVBAR
══════════════════════════════════════════ */
.cs-navbar {
    margin: 16px 2.5% 0;
    padding: 14px 28px;
    border-radius: 999px;
    background: rgba(20, 12, 40, .55);
    border: 1px solid rgba(196, 181, 253, .16);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 12px 34px rgba(5, 3, 15, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cs-back {
    border-color: rgba(124, 58, 237, .35);
    color: #d3d8e7;
}

.cs-back:hover {
    border-color: rgba(255, 179, 102, .55);
    background: rgba(255, 157, 66, .08);
}

/* ══════════════════════════════════════════
   BADGE + ICON — align to purple/orange
══════════════════════════════════════════ */
.cs-badge {
    color: #ffb366;
    -webkit-text-fill-color: #ffb366;
}

.cs-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(255, 157, 66, .18));
    border: 1px solid rgba(196, 181, 253, .35);
}

.cs-icon i {
    color: #a78bfa;
}

.cs-card h1 #csBotName {
    background: linear-gradient(90deg, #9061f9, #ffb366);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════
   BUTTONS — unify gradient with main site
══════════════════════════════════════════ */
.btn-primary {
    background: linear-gradient(90deg, #7c3aed, #8b5cf6);
    box-shadow: 0 10px 25px rgba(124, 58, 237, .28);
}

.btn-primary:hover {
    background: linear-gradient(90deg, #7c3aed, #ff9d42);
    box-shadow: 0 14px 30px rgba(255, 157, 66, .3);
}

.btn-outline {
    border-color: rgba(196, 181, 253, .3);
}

.btn-outline:hover {
    border-color: rgba(255, 179, 102, .55);
    background: rgba(255, 157, 66, .08);
}

/* ══════════════════════════════════════════
   GLOSSY TRANSPARENT GLASS UPGRADE
   Matches the same treatment used on index.html —
   heavier frost, corner glare + diagonal sheen,
   crisp top/bottom edge lighting, glossy buttons.
══════════════════════════════════════════ */
.cs-card,
.cs-icon {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-color: rgba(255, 255, 255, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 10px 34px rgba(5, 3, 15, .35);
}

.cs-card::before,
.cs-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(140px 100px at 14% 10%, rgba(255, 255, 255, .38), transparent 70%),
        linear-gradient(115deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, .10) 45%,
            rgba(255, 255, 255, .16) 50%,
            rgba(255, 255, 255, .10) 55%,
            rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
}

.cs-navbar {
    backdrop-filter: blur(26px) saturate(200%);
    -webkit-backdrop-filter: blur(26px) saturate(200%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .2),
        0 12px 34px rgba(5, 3, 15, .45);
}

.btn-primary,
.btn-outline {
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -10px 14px rgba(0, 0, 0, .18),
        0 10px 25px rgba(124, 58, 237, .28);
}

.btn-primary::before,
.btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.btn-primary:hover,
.btn-outline:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -10px 16px rgba(0, 0, 0, .16),
        0 16px 34px rgba(255, 157, 66, .3);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 600px) {
    .cs-navbar {
        margin: 0;
        border-radius: 0;
    }
}