/* i~Life material polish. Existing typography, spacing and layout stay in style.css.
   Visual reference: https://developer.apple.com/videos/play/wwdc2025/219/
   Highlights affect the surface only, keeping the text sharp. */
.liquid-glass-site {
    --lg-tint: rgba(255, 255, 255, .22);
    --lg-edge: rgba(255, 255, 255, .78);
    --lg-shadow: rgba(35, 39, 48, .10);
    --lg-blur: 18px;
}

.liquid-glass-site :is(.liquid-glass-navbar, .dashboard-card, .floating-card,
    .trust-card, .advisor-box, .career-card, .home-about-glass, .home-reach-glass,
    .profile-hero-card, .profile-info-card, .fin-ref-card, .fin-overview-card,
    .fin-process-glass, .risk-hero-card, .legacy-hero-card) {
    background:
        radial-gradient(ellipse at var(--glass-x, 18%) var(--glass-y, 0%),
            rgba(255, 255, 255, .58), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, .30),
            rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .22));
    border-color: var(--lg-edge) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 1px 0 0 rgba(255, 255, 255, .46),
        inset 0 -1px 0 rgba(80, 86, 97, .10),
        inset -1px 0 0 rgba(255, 255, 255, .34),
        0 12px 32px var(--lg-shadow),
        0 2px 5px rgba(35, 39, 48, .045);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(175%);
    backdrop-filter: blur(var(--lg-blur)) saturate(175%);
}

/* Navigation is a raised, clear layer above the page. */
.liquid-glass-site .liquid-glass-navbar {
    background-color: var(--lg-tint);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 1),
        inset 0 3px 5px rgba(255, 255, 255, .40),
        inset 0 -2px 3px rgba(75, 80, 94, .09),
        inset 2px 0 3px rgba(255, 255, 255, .44),
        inset -2px 0 3px rgba(255, 255, 255, .32),
        0 12px 32px rgba(27, 32, 42, .13),
        0 2px 5px rgba(27, 32, 42, .035);
}

.liquid-glass-site .liquid-glass-navbar::before {
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, .58),
        transparent 24%, transparent 73%, rgba(255, 255, 255, .30));
    opacity: .72;
}

.liquid-glass-site .liquid-glass-navbar::after {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background: radial-gradient(ellipse at var(--glass-x, 22%) var(--glass-y, 0%),
        rgba(255, 255, 255, .70), transparent 55%);
    filter: none;
    opacity: .48;
}

/* Keep the existing moving navigation lens; refine its material. */
.liquid-glass-site #liquidNavLens.liquid-nav-lens {
    background: linear-gradient(135deg, rgba(255, 255, 255, .44),
        rgba(255, 255, 255, .14) 45%, rgba(227, 30, 45, .055)) !important;
    border-color: rgba(255, 255, 255, .90) !important;
    box-shadow:
        inset 0 1.5px 1px rgba(255, 255, 255, .98),
        inset 1.5px 0 2px rgba(255, 255, 255, .80),
        inset -1px -1.5px 2px rgba(100, 72, 80, .13),
        0 4px 12px rgba(65, 42, 48, .12) !important;
    -webkit-backdrop-filter: blur(8px) saturate(185%) !important;
    backdrop-filter: blur(8px) saturate(185%) !important;
}

.liquid-glass-site :is(.sp-language-button, .btn-light-custom, .custom-toggler) {
    background: linear-gradient(135deg, rgba(255, 255, 255, .57),
        rgba(255, 255, 255, .18));
    border-color: rgba(255, 255, 255, .82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 -1px 0 rgba(70, 70, 80, .08),
        0 4px 12px rgba(30, 35, 45, .08);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
}

.liquid-glass-site .sp-language-menu {
    background: linear-gradient(135deg, rgba(255, 255, 255, .95),
        rgba(247, 248, 251, .85)) !important;
    border-color: rgba(255, 255, 255, .95) !important;
    box-shadow: inset 0 1.5px 0 white, 0 15px 40px rgba(30, 35, 45, .15) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
}

/* The information cards use a quieter, more readable version of the glass. */
.liquid-glass-site .services-section .service-card {
    background:
        radial-gradient(ellipse at var(--glass-x, 20%) var(--glass-y, 0%),
            rgba(255, 255, 255, .68), transparent 65%),
        linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .30));
    border-color: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 0 white,
        inset 0 -1px 0 rgba(70, 75, 90, .055),
        0 10px 26px rgba(35, 39, 48, .07);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}

.liquid-glass-site :is(.fin-ref-card, .fin-overview-card, .fin-process-glass,
    .risk-hero-card, .legacy-hero-card, .profile-hero-card, .profile-info-card) {
    background-color: rgba(255, 255, 255, .36);
}

@media (hover: hover) and (pointer: fine) {
    .liquid-glass-site :is(.service-card, .career-card, .advisor-box):hover {
        border-color: white;
        box-shadow: inset 0 1.5px 0 white,
            inset 0 -1px 0 rgba(70, 75, 90, .08),
            0 16px 35px rgba(35, 39, 48, .11);
    }
}

@media (max-width: 991.98px) {
    .liquid-glass-site { --lg-blur: 12px; }

    .liquid-glass-site .hero-section {
        padding-top: calc(124px + env(safe-area-inset-top, 0px));
    }

    .liquid-glass-site .liquid-glass-navbar.menu-open {
        background-color: rgba(248, 249, 251, .86);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        backdrop-filter: blur(22px) saturate(160%);
    }

    .liquid-glass-site .custom-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    .liquid-glass-site #navbar.show,
    .liquid-glass-site #navbar.collapsing {
        max-height: calc(100dvh - 115px);
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: linear-gradient(135deg, rgba(255, 255, 255, .96),
            rgba(246, 247, 250, .93));
        border-color: rgba(255, 255, 255, .94);
        box-shadow: inset 0 1.5px 0 white,
            0 12px 30px rgba(30, 35, 45, .16);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
        backdrop-filter: blur(22px) saturate(165%);
    }

    .liquid-glass-site #navbar .nav-link { min-height: 44px; }
}

/* Leave content and controls usable when blur is unavailable or unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass-site :is(.liquid-glass-navbar, .dashboard-card, .floating-card,
        .trust-card, .advisor-box, .career-card, .home-about-glass, .home-reach-glass,
        .profile-hero-card, .profile-info-card, .fin-ref-card, .fin-overview-card,
        .fin-process-glass, .risk-hero-card, .legacy-hero-card, .service-card) {
        background-color: #f7f8fa;
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .liquid-glass-site :is(.liquid-glass-navbar, .dashboard-card, .floating-card,
        .trust-card, .advisor-box, .career-card, .home-about-glass, .home-reach-glass,
        .profile-hero-card, .profile-info-card, .fin-ref-card, .fin-overview-card,
        .fin-process-glass, .risk-hero-card, .legacy-hero-card, .service-card,
        .sp-language-menu, .sp-language-button, .btn-light-custom, .custom-toggler) {
        background: #f7f8fa !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: #92969f !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .liquid-glass-site .dashboard-card { transform: none !important; }
    .liquid-glass-site :is(.floating-card, .glass-distort-1, .glass-distort-2) {
        animation: none !important;
    }
    .liquid-glass-site #liquidNavLens { transition: none !important; }
    .liquid-glass-site::before, .liquid-glass-site::after { animation: none; }
}