/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* ── Selection ── */
::selection { background: #ff5a3a; color: #fff; }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid #ff5a3a; outline-offset: 2px; }

/* ── Nav transition ── */
#nav.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

/* ── Button hover lift ── */
a[href="#contact"], button[type="submit"] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a[href="#contact"]:hover, button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(255,90,58,0.3);
}

/* ── Image hover container ── */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* ── Mobile menu animation ── */
#mobileMenu {
    animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .group:hover .group-hover\:scale-105,
    img { transition: none; }
    #mobileMenu { animation: none; }
}