/* ========================================
   Premium UI layer — depth, glass, motion (loads after style.css)
   ======================================== */

:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --shadow-elevated:
        0 4px 6px -1px rgba(15, 23, 42, 0.06),
        0 24px 48px -12px rgba(15, 23, 42, 0.14);
    --shadow-card-hover:
        0 12px 40px rgba(30, 58, 95, 0.14),
        0 4px 12px rgba(15, 23, 42, 0.08);
    --glass-light: rgba(255, 255, 255, 0.72);
    --glass-dark: rgba(15, 23, 42, 0.45);
    --radius-floating: 22px;
}

html {
    scroll-padding-top: 96px;
}

body.site-premium {
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(243, 156, 18, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
}

/* ——— Navigation: frosted bar ——— */
#header.scrolled {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(30, 58, 95, 0.08);
    box-shadow:
        0 4px 24px rgba(15, 23, 42, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* ——— Hero: depth & vignette ——— */
.hero {
    perspective: 1400px;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 55% at 50% 100%, rgba(0, 0, 0, 0.42) 0%, transparent 58%),
        radial-gradient(ellipse 70% 50% at 85% 20%, rgba(243, 156, 18, 0.08) 0%, transparent 45%);
}

.hero .slide-overlay {
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.88) 0%,
        rgba(30, 58, 95, 0.72) 42%,
        rgba(21, 42, 69, 0.82) 100%
    );
}

.hero-content {
    z-index: 10;
}

.hero-title {
    text-shadow:
        0 2px 24px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-stats {
    flex-wrap: wrap;
    gap: clamp(24px, 5vw, 48px);
    padding: 28px 32px;
    margin-top: 8px;
    border-radius: var(--radius-floating);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ——— Service cards: subtle 3D tilt ——— */
.services-grid {
    perspective: 1400px;
}

.service-card {
    border-radius: var(--radius-floating);
    transform-style: preserve-3d;
    transition:
        transform 0.45s var(--ease-out-expo),
        box-shadow 0.45s ease,
        border-color 0.3s ease;
    border: 1px solid rgba(30, 58, 95, 0.06);
    box-shadow: var(--shadow-sm);
}

.service-card:not([data-tilt-ready]):hover {
    transform: translateY(-12px) rotateX(5deg) rotateY(-2deg);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(243, 156, 18, 0.25);
}

.service-card[data-tilt-ready]:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(243, 156, 18, 0.25);
}

.service-card .service-icon {
    transition: transform 0.45s var(--ease-out-expo);
}

.service-card:not([data-tilt-ready]):hover .service-icon {
    transform: translateZ(12px) scale(1.05);
}

.service-card[data-tilt-ready]:hover .service-icon {
    transform: translateZ(12px) scale(1.05);
}

/* ——— Expertise cards ——— */
.expertise-grid {
    perspective: 1200px;
}

.expertise-card {
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(30, 58, 95, 0.06);
}

.expertise-card:not([data-tilt-ready]):hover {
    transform: translateY(-8px) translateZ(8px);
    box-shadow: var(--shadow-elevated);
}

.expertise-card[data-tilt-ready]:hover {
    box-shadow: var(--shadow-elevated);
}

/* ——— Section rhythm ——— */
.section-padding {
    padding: clamp(72px, 12vw, 110px) 0;
}

.bg-light.site-bg-mesh {
    background:
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(30, 58, 95, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(243, 156, 18, 0.05) 0%, transparent 45%),
        var(--off-white);
}

/* ——— Feature boxes (service pages) ——— */
.features-list {
    perspective: 1200px;
}

.feature-box {
    transform-style: preserve-3d;
    transition:
        transform 0.4s var(--ease-out-expo),
        box-shadow 0.4s ease;
}

.feature-box:not([data-tilt-ready]):hover {
    transform: translateY(-10px) rotateX(3deg);
}

.feature-box[data-tilt-ready]:hover {
    box-shadow: var(--shadow-lg);
}

/* ——— Buttons: accessible focus ——— */
.btn:focus-visible,
.nav-link:focus-visible,
.social-link:focus-visible,
.back-to-top:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
}

.btn-primary:hover {
    box-shadow: 0 8px 28px rgba(30, 58, 95, 0.35);
}

.btn-secondary:hover {
    box-shadow: 0 8px 28px rgba(243, 156, 18, 0.35);
}

/* ——— Footer polish ——— */
.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15);
}

/* ——— Back to top ——— */
.back-to-top {
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, opacity 0.3s ease;
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
    .service-card:not([data-tilt-ready]):hover,
    .expertise-card:not([data-tilt-ready]):hover,
    .feature-box:not([data-tilt-ready]):hover {
        transform: translateY(-6px);
    }

    .service-card:not([data-tilt-ready]):hover .service-icon {
        transform: none;
    }

    .hero::after {
        background: none;
    }

    .hero-stats {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

}