/* ── Global ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
    background: #030914;
    color: #fff;
    overflow-x: hidden;
}

/* ── Loader ───────────────────────────────────────────── */
#loader {
    animation: fadeOut .6s ease forwards;
    animation-delay: 1.2s;
    pointer-events: none;
}
@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

/* ── Navbar ────────────────────────────────────────────── */
#navbar {
    background: transparent;
    transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
#navbar.scrolled {
    background: rgba(3, 9, 20, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Mobile Menu ───────────────────────────────────────── */
#mobile-menu.open { opacity: 1 !important; pointer-events: all !important; }
.menu-line { transition: transform .3s ease, opacity .3s ease; }
#mobile-toggle.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
#mobile-toggle.active .menu-line:nth-child(2) { opacity: 0; }
#mobile-toggle.active .menu-line:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); width: 24px; }

/* ── Service Cards ─────────────────────────────────────── */
.service-card {
    background: rgba(11, 29, 58, 0.35);
    backdrop-filter: blur(4px);
    transition: background .4s ease, border-color .4s ease;
}
.service-card:hover {
    background: rgba(11, 29, 58, 0.6);
}

/* ── Scroll Reveal ─────────────────────────────────────── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(28px);
    }
    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Form Inputs ───────────────────────────────────────── */
input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.15);
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(201,168,76,0.6) !important;
}
select option {
    background: #0B1D3A;
    color: #fff;
}

/* ── Selection ─────────────────────────────────────────── */
::selection {
    background: rgba(201,168,76,0.3);
    color: #fff;
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030914; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.5); }