:root {
            --ilfop-navy: #092b4c;
            --ilfop-blue: #0f4f84;
            --ilfop-light-blue: #eaf3fa;
            --ilfop-gold: #d7a932;
            --ilfop-red: #bb1e2d;
            --ilfop-ink: #182431;
            --ilfop-muted: #607080;
            --ilfop-surface: #f6f8fb;
            --header-height: 92px;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--header-height) + 20px);
        }

        body {
            padding-top: var(--header-height);
            color: var(--ilfop-ink);
            background: #fff;
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        a { color: var(--ilfop-blue); }
        a:hover { color: var(--ilfop-navy); }

        .site-header {
            min-height: var(--header-height);
            background: rgba(255, 255, 255, .97);
            border-bottom: 1px solid rgba(9, 43, 76, .12);
            box-shadow: 0 .35rem 1.25rem rgba(9, 43, 76, .08);
            backdrop-filter: blur(14px);
        }

        .brand-logo {
            width: 64px;
            height: 64px;
            object-fit: contain;
        }

        .brand-kicker {
            color: var(--ilfop-blue);
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .brand-name {
            color: var(--ilfop-navy);
            font-size: clamp(1rem, 2.5vw, 1.55rem);
            font-weight: 800;
            line-height: 1.05;
        }

        .hotline-block {
            color: #fff;
            background: linear-gradient(135deg, var(--ilfop-red), #8c1220);
            border-radius: 1rem;
            padding: .7rem 1rem;
            text-decoration: none;
            box-shadow: 0 .5rem 1.25rem rgba(187, 30, 45, .22);
        }

        .hotline-block:hover { color: #fff; transform: translateY(-1px); }
        .hotline-label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .86; }
        .hotline-number { display: block; font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 900; letter-spacing: .03em; }

        .hero {
            position: relative;
            overflow: hidden;
            color: #fff;
            background:
                linear-gradient(105deg, rgba(5, 29, 53, .96) 0%, rgba(9, 43, 76, .93) 52%, rgba(15, 79, 132, .82) 100%),
                url('/_images/MJ/PXL_20210515_130109845-640x400.jpg') center/cover no-repeat;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto -8rem -11rem auto;
            width: 28rem;
            height: 28rem;
            border: 4rem solid rgba(255, 255, 255, .05);
            border-radius: 50%;
        }

        .hero-content { position: relative; z-index: 1; }
        .eyebrow { color: var(--ilfop-gold); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
        .display-title { max-width: 920px; font-size: clamp(2.35rem, 6vw, 5.3rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; }
        .hero-lead { max-width: 760px; color: rgba(255,255,255,.86); font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.7; }

        .section-pad { padding: clamp(4rem, 8vw, 7rem) 0; }
        .section-soft { background: var(--ilfop-surface); }
        .section-dark { color: #fff; background: linear-gradient(145deg, var(--ilfop-navy), #061d33); }
        .section-heading { max-width: 760px; margin-bottom: 2.8rem; }
        .section-heading h2 { color: var(--ilfop-navy); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; letter-spacing: -.035em; }
        .section-dark .section-heading h2 { color: #fff; }
        .section-heading p { color: var(--ilfop-muted); font-size: 1.08rem; line-height: 1.75; }
        .section-dark .section-heading p { color: rgba(255,255,255,.72); }

        .section-icon {
            display: inline-grid;
            width: 2.8rem;
            height: 2.8rem;
            place-items: center;
            color: #fff;
            background: var(--ilfop-blue);
            border-radius: .9rem;
            margin-bottom: 1rem;
            box-shadow: 0 .6rem 1.25rem rgba(15, 79, 132, .18);
        }

        .card-clean {
            position: relative;
            height: 100%;
            overflow: hidden;
            border: 1px solid rgba(9, 43, 76, .09);
            border-radius: 1.25rem;
            background: #fff;
            box-shadow: 0 .65rem 2rem rgba(9, 43, 76, .07);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .card-clean:hover { transform: translateY(-5px); box-shadow: 0 1rem 2.5rem rgba(9, 43, 76, .12); }
        .news-thumb { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
        .image-16x9 { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

        .icon-chip {
            display: inline-grid;
            width: 2.65rem;
            height: 2.65rem;
            place-items: center;
            color: var(--ilfop-blue);
            background: var(--ilfop-light-blue);
            border-radius: .8rem;
        }

        .video-shell {
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 1.4rem;
            box-shadow: 0 1.2rem 3rem rgba(0,0,0,.28);
        }

        .service-card { padding: 1.6rem; }
        .service-card h3 { color: var(--ilfop-navy); font-size: 1.15rem; font-weight: 850; }
        .service-card p { color: var(--ilfop-muted); line-height: 1.65; margin-bottom: 0; }

        .fact-card { text-align: center; padding: 2rem 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1.2rem; background: rgba(255,255,255,.055); }
        .fact-value { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1; }
        .fact-label { color: rgba(255,255,255,.72); font-weight: 700; }

        .contact-card { padding: 1.75rem; }
        .contact-card address { color: var(--ilfop-muted); line-height: 1.8; }

        .resource-list { list-style: none; padding: 0; margin: 0; }
        .resource-list li + li { border-top: 1px solid rgba(9,43,76,.08); }
        .resource-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .82rem 0; color: var(--ilfop-ink); text-decoration: none; }
        .resource-list a:hover { color: var(--ilfop-blue); padding-left: .25rem; }

        .footer-main { color: rgba(255,255,255,.75); background: #05182a; }
        .footer-main h2, .footer-main h3, .footer-main h4 { color: #fff; }
        .footer-main a { color: rgba(255,255,255,.82); text-decoration: none; }
        .footer-main a:hover { color: #fff; }
        .footer-logo { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 .25rem .7rem rgba(0,0,0,.3)); }
        .social-link { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
        .social-link:hover { background: rgba(255,255,255,.1); }

        .footer-hotline {
            color: #fff;
            background: var(--ilfop-red);
            border-radius: 1rem;
            padding: 1rem 1.25rem;
            text-decoration: none;
        }

        @media (max-width: 575.98px) {
            :root { --header-height: 78px; }
            .brand-logo { width: 50px; height: 50px; }
            .brand-kicker { display: none; }
            .hotline-label { display: none; }
            .hotline-block { padding: .6rem .72rem; border-radius: .75rem; }
            .hotline-number { font-size: .88rem; }
            .hero { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { transition: none !important; }
        }

@media (max-width: 575.98px) {
    .site-header > div { padding-left: .65rem !important; padding-right: .65rem !important; }
    .site-header > div > div { gap: .5rem !important; }
    .hotline-block { flex-shrink: 0; }
    .hotline-block > i { display: none; }
    .brand-logo { width: 42px; height: 42px; }
}