/* ------------ */
/* Base sizing  */
/* ------------ */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}


/* Navbar brand logo */
.brand-logo {
    height: 60px; /* safe navbar size */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* Keep space for the footer */
body {
    margin-bottom: 60px;
    position: relative;
    min-height: 100vh;
    color: var(--ink-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

/* Focus styles */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ------------- */
/* Design tokens */
/* ------------- */

:root {
    --bg-main: #050816; /* deep cosmic navy */
    --bg-elevated: #0b1020; /* panels / cards */
    --accent: #8b5cf6; /* neon purple */
    --accent-soft: #22d3ee; /* cyan highlight */
    --ink-main: #f9fafb; /* main text */
    --ink-muted: #9ca3af; /* muted text */
    --border-soft: #1f2933;
    --radius-lg: 1.25rem;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.75);
}

/* ------------------------------- */
/* Full-screen animated background */
/* ------------------------------- */

.cosmic-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    /* Base gradient backdrop (same colors, more motion) */
    background: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.18) 0, transparent 55%), radial-gradient(circle at 80% 0%, rgba(129, 140, 248, 0.22) 0, transparent 60%), radial-gradient(circle at 0% 80%, rgba(236, 72, 153, 0.14) 0, transparent 55%), #020617;
    background-size: 200% 200%;
    animation: cosmicGradientShift 35s ease-in-out infinite alternate;
}

    /* -------------------------------------------------- */
    /* Randomized starfield using multi-noise pseudo-stars */
    /* -------------------------------------------------- */

    .cosmic-bg::before,
    .cosmic-bg::after {
        content: "";
        position: absolute;
        inset: -80px;
        pointer-events: none;
    }

    /* Near stars (bright, small, many, random pattern) */
    .cosmic-bg::before {
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
        /* Different sizes to break the grid */
        background-size: 170px 220px, 240px 190px, 200px 260px;
        /* Offsets shift the repeated patterns so they don't align */
        background-position: 0px 0px, 60px -40px, -30px 70px;
        opacity: 0.7;
        animation: starDriftFast 35s linear infinite, starTwinkleFast 3s ease-in-out infinite alternate;
    }

    /* Far stars (soft, sparse, slightly larger) */
    .cosmic-bg::after {
        background-image: radial-gradient(circle, rgba(180, 200, 255, 0.5) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(200, 220, 255, 0.3) 1.5px, transparent 1.5px);
        background-size: 300px 340px, 260px 380px;
        background-position: 20px -30px, -50px 60px;
        opacity: 0.35;
        animation: starDriftSlow 65s linear infinite reverse, starTwinkleSlow 6s ease-in-out infinite alternate;
    }

/* Gradient shift – slow parallax-style movement */
@keyframes cosmicGradientShift {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%, 50% 50%;
    }

    50% {
        background-position: 10% 10%, 90% 5%, 5% 90%, 40% 60%;
    }

    100% {
        background-position: 0% 20%, 80% 10%, 10% 80%, 60% 40%;
    }
}

/* Star drift – parallax layers */
@keyframes starDriftFast {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-140px, -180px, 0);
    }
}

@keyframes starDriftSlow {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(120px, -120px, 0);
    }
}

/* Twinkling – subtle brightness pulsing */
@keyframes starTwinkleFast {
    0% {
        opacity: 0.4;
    }

    40% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.4;
    }
}

@keyframes starTwinkleSlow {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.2;
    }
}

/* ---------------- */
/* Section layout   */
/* ---------------- */

.section-cosmic {
    padding: 4rem 0;
}

    .section-cosmic + .section-cosmic {
        border-top: 1px solid rgba(148, 163, 184, 0.1);
    }

/* --------------- */
/* Container cards */
/* --------------- */

.cosmic-card {
    background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.15), rgba(15, 23, 42, 0.98));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

/* --------- */
/* Headings  */
/* --------- */

.cosmic-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.8rem;
    color: var(--accent-soft);
    margin-bottom: 0.75rem;
}

.cosmic-title {
    font-size: clamp(2.4rem, 3vw, 3rem);
    font-weight: 700;
}

.cosmic-subtitle {
    font-size: 1.1rem;
    color: var(--ink-muted);
}

/* -------- */
/* Buttons  */
/* -------- */

.btn-cosmic-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    border: none;
    color: #0b1020;
    font-weight: 600;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.75);
    transition: transform 120ms ease-out, filter 120ms ease-out;
}

    .btn-cosmic-primary:hover {
        filter: brightness(1.09);
        transform: translateY(-1px);
    }

.btn-cosmic-ghost {
    background: transparent;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: var(--ink-muted);
    padding: 0.75rem 1.6rem;
    transition: border-color 120ms ease-out, color 120ms ease-out;
}

    .btn-cosmic-ghost:hover {
        border-color: var(--accent-soft);
        color: var(--accent-soft);
    }

/* -------------- */
/* Pills / badges */
/* -------------- */

.cosmic-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: var(--ink-muted);
    font-size: 0.75rem;
}
/* ------------------------- */
/* Cosmic pill hover polish */
/* ------------------------- */

.cosmic-pill {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* Hover effect (desktop only) */
@media (hover: hover) {
    .cosmic-pill:hover {
        transform: translateY(-2px);
        border-color: var(--accent-soft);
        background-color: rgba(15, 23, 42, 0.98);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 12px rgba(34, 211, 238, 0.25); /* subtle cyan glow */
    }
}

/* Optional: icon nudge for extra polish */
.cosmic-pill span:first-child {
    transition: transform 160ms ease;
}

@media (hover: hover) {
    .cosmic-pill:hover span:first-child {
        transform: translateY(-1px);
    }
}

/* ---------------------- */
/* Generic list styling   */
/* ---------------------- */

.cosmic-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .cosmic-list li {
        position: relative;
        padding-left: 1.3rem; /* space for diamond */
    }

        /* Draw a diamond using a rotated square – no special characters */
        .cosmic-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.5rem; /* adjust vertically to align with text */
            width: 0.5rem;
            height: 0.5rem;
            background-color: var(--accent-soft);
            transform: rotate(45deg); /* turn square into diamond */
            border-radius: 2px; /* slightly rounded corners for a smooth look */
        }

/* --------------------- */
/* Modal (contact form)  */
/* --------------------- */

.modal-content {
    background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.15), #0b1020);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: var(--shadow-soft);
}