/* ══════════════════════════════════════════════════════════
   theme.css — Solworxs "Nebula Glass" theme overrides
   Loads AFTER style.css. Pure CSS, no external assets/frameworks.
   Adds: saturated nebula background, floating pill navbar,
   glass hero plaque, gradient feature icons, solid gradient
   bot CTAs, pill-shaped form fields, flat footer social links.
══════════════════════════════════════════════════════════ */

:root {
    --nebula-magenta: #d946ef;
    --nebula-teal: #22d3ee;
    --nebula-pink: #ff6ec7;
}

/* ══════════════════════════════════════════
   1. NEBULA BACKGROUND
   Richer, more saturated color bleeding through
   the whole page (not just faint corner glows).
══════════════════════════════════════════ */
body::before {
    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%),
        radial-gradient(900px 900px at 50% 40%, rgba(21, 10, 46, .0), rgba(5, 3, 12, .55) 85%);
    opacity: 1;
}

/* Starfield layer + gentle grain for cosmic depth */
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%),
        radial-gradient(1px 1px at 50% 55%, rgba(255, 255, 255, .3) 50%, transparent 100%),
        radial-gradient(1px 1px at 10% 90%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    background-repeat: repeat;
    background-size: 340px 340px;
}

/* ══════════════════════════════════════════
   2. FLOATING PILL NAVBAR
   Desktop-only. On mobile the navbar becomes a
   fixed, full-width bar (see mobile override
   below) — the pill/floating look doesn't apply
   there, and must not fight style.css's fixed
   positioning at the same breakpoint.
══════════════════════════════════════════ */
@media (min-width: 769px) {
    .navbar {
        top: 16px;
        margin: 0 2.5%;
        width: auto;
        border-radius: 999px;
        background: rgba(20, 12, 40, .55);
        border: 1px solid rgba(196, 181, 253, .16);
        box-shadow: 0 12px 34px rgba(5, 3, 15, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
    }
}

.navbar.scrolled {
    background: rgba(20, 12, 40, .82);
    border-color: rgba(196, 181, 253, .24);
}

/* ══════════════════════════════════════════
   3. HERO GLASS PLAQUE
   Wraps the first line of the headline in a
   frosted glass panel. See .hero-plaque markup.
══════════════════════════════════════════ */
.hero-plaque {
    display: inline-block;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 16px;
    padding: 4px 22px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    box-shadow:
        0 10px 30px rgba(5, 3, 15, .35),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ══════════════════════════════════════════
   4. FEATURE ICONS — solid gradient tiles
══════════════════════════════════════════ */
.feature-card i {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-500), var(--nebula-magenta));
    box-shadow: 0 10px 24px rgba(124, 58, 237, .35);
}

.feature-card:hover i {
    background: linear-gradient(135deg, var(--purple-500), var(--orange-500));
    color: #fff;
    box-shadow: 0 12px 28px rgba(255, 157, 66, .35);
}

/* ══════════════════════════════════════════
   5. BOT CARD CTAs — solid gradient buttons
   (was ghost/outline .bot-link)
══════════════════════════════════════════ */
.bot-link {
    background: linear-gradient(90deg, var(--purple-500), var(--orange-500));
    border: none;
    color: #fff;
    box-shadow: 0 12px 28px rgba(124, 58, 237, .28);
}

.bot-link:hover {
    background: linear-gradient(90deg, var(--purple-400), var(--orange-400));
    color: #fff;
    border: none;
    box-shadow: 0 16px 34px rgba(255, 157, 66, .32);
    transform: translateY(-3px);
}

/* ══════════════════════════════════════════
   6. CONTACT FORM — pill-shaped fields
══════════════════════════════════════════ */
#contact-form input {
    border-radius: 999px;
    padding: 16px 24px;
}

#contact-form textarea {
    border-radius: 28px;
    padding: 16px 24px;
}

.full-btn {
    border-radius: 999px;
}

/* ══════════════════════════════════════════
   7. FOOTER SOCIAL LINKS — circular icon chips
   White icon on a soft glass circle by default;
   fills solid orange on hover.
══════════════════════════════════════════ */
.social-icons li a i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: all .3s ease;
}

.social-icons li a:hover i {
    background: linear-gradient(135deg, var(--orange-500), var(--orange-400));
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 10px 22px rgba(255, 157, 66, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.social-icons li a span {
    background: none;
    -webkit-text-fill-color: var(--orange-400);
    color: var(--orange-400);
    transition: color .3s ease;
}

.social-icons li a:hover span {
    -webkit-text-fill-color: var(--orange-300);
    color: var(--orange-300);
}

/* ══════════════════════════════════════════
   8. GLOSSY TRANSPARENT GLASS UPGRADE
   Heavier blur/saturation, lower fill opacity,
   a diagonal sheen streak + corner glare on every
   glass surface, crisper top/bottom edge lighting,
   and glossy (not flat) buttons. Pure CSS additions,
   nothing structural changes.
══════════════════════════════════════════ */

:root {
    /* stronger frost + more see-through fill */
    --glass-blur: blur(28px) saturate(200%);
    --glass-bg: rgba(255, 255, 255, .05);
    --glass-bg-hover: rgba(255, 255, 255, .08);
    --glass-border: rgba(255, 255, 255, .22);
    --glass-border-hover: rgba(255, 179, 102, .6);

    --sheen-streak: 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%);
    --sheen-glare: radial-gradient(140px 100px at 14% 10%, rgba(255, 255, 255, .38), transparent 70%);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .25), inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(0, 0, 0, .12);
}

/* Shared glossy-glass treatment: a sheen layer riding on top of
   every frosted panel. pointer-events:none keeps all buttons,
   inputs, and links beneath fully clickable. */
.feature-card,
.bot-card,
.stat-box,
.badge,
.hero-plaque,
.contact-container,
#contact-form input,
#contact-form textarea {
    position: relative;
    overflow: hidden;
    box-shadow: var(--glass-edge), 0 10px 34px rgba(5, 3, 15, .35);
}

.feature-card::before,
.bot-card::before,
.stat-box::before,
.badge::before,
.hero-plaque::before,
.contact-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--sheen-glare), var(--sheen-streak);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
}

/* Cards get a touch more fill so the sheen has something to sit on,
   while staying clearly see-through */
.feature-card,
.bot-card,
.stat-box {
    background: rgba(255, 255, 255, .045);
}

.feature-card:hover,
.bot-card:hover,
.stat-box:hover {
    background: rgba(255, 157, 66, .06);
}

/* Contact form pill fields — glass, not flat fill */
#contact-form input,
#contact-form textarea {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid var(--glass-border);
}

#contact-form input:focus,
#contact-form textarea:focus {
    background: rgba(255, 157, 66, .07);
}

/* Navbar: keep it a stable click target, just brighten the glass edge */
.navbar {
    backdrop-filter: blur(26px) saturate(200%);
    -webkit-backdrop-filter: blur(26px) saturate(200%);
    box-shadow: var(--glass-edge), 0 12px 34px rgba(5, 3, 15, .45);
}

/* ══════════════════════════════════════════
   GLOSSY BUTTONS — light-catches-the-top look
   instead of a flat gradient fill
══════════════════════════════════════════ */
.btn-primary,
.btn-bots,
.bot-link {
    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, .3);
}

.btn-primary::before,
.btn-bots::before,
.bot-link::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-bots: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, .32);
}

.bot-link {
    background: linear-gradient(90deg, var(--purple-500), var(--orange-500));
}

.bot-link: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, .32);
}

/* ══════════════════════════════════════════
   RESPONSIVE — keep navbar full-bleed on small screens.
   Matches style.css's 768px mobile breakpoint exactly
   (was 600px, causing a 601–768px zone where the pill
   navbar and the fixed mobile navbar fought each other).
   left/right/width are set explicitly so the fixed navbar
   can't shrink-wrap to its content once #mobileMenu is
   pulled out of flow (position: fixed) on mobile.
══════════════════════════════════════════ */
@media (max-width: 768px) {
    .navbar {
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 100%;
        border-radius: 0;
    }
}