/* ── Base & Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* ── Selection ── */
::selection { background: rgba(52,211,153,0.3); color: #0A2342; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A2342; }
::-webkit-scrollbar-thumb { background: #34D399; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6EE7B7; }

/* ── Navbar ── */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ── Mobile Menu ── */
#mobile-menu.open {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ── Button / Link focus ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #34D399;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Hero decorative shapes ── */
.hero-shape {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

/* ── Service card tilt ── */
.service-card {
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.service-card:hover {
    transform: translateY(-4px);
}

/* ── Form select arrow ── */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A2342' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Smooth section transitions ── */
section {
    position: relative;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .service-card:hover { transform: none; }
    * { transition: none !important; animation: none !important; }
}