/* ─── Lanze Gene — Custom Styles ─────────────────────────────────────────── */

:root {
    --lanze-primary: #1a8cff;
    --lanze-primary-dark: #0f5fb5;
    --lanze-ink: #10243b;
    --lanze-muted: #5f7185;
    --lanze-surface: #ffffff;
    --lanze-surface-soft: #f3f8fe;
    --lanze-line: #d5e9ff;
}

html {
    color-scheme: light;
}

body.site-body {
    background:
        radial-gradient(circle at 8% 2%, rgba(143, 203, 255, 0.18), transparent 25rem),
        #f8fbff;
    color: var(--lanze-ink);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.ui-page-surface {
    background: linear-gradient(180deg, #f3f8fe 0%, #f8fbff 18rem, #fff 100%) !important;
}

.ui-page-header {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
}

.ui-page-title {
    color: var(--lanze-ink) !important;
    font-size: 1.875rem !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em !important;
}

.ui-page-lead {
    max-width: 40rem;
    margin-inline: auto;
    color: var(--lanze-muted) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

.ui-card {
    background: #fff !important;
    border: 1px solid var(--lanze-line) !important;
    box-shadow: 0 10px 30px rgba(15, 95, 181, 0.07) !important;
}

.ui-card:hover {
    box-shadow: 0 16px 42px rgba(15, 95, 181, 0.13) !important;
}

:focus-visible {
    outline: 3px solid rgba(26, 140, 255, 0.38);
    outline-offset: 3px;
}

@media (min-width: 640px) {
    .ui-page-title {
        font-size: 2.25rem !important;
    }

    .ui-page-lead {
        font-size: 1.125rem !important;
    }
}

@media (min-width: 1024px) {
    .ui-page-title {
        font-size: 2.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Bright, glassy navigation based on the supplied brand colour card. */
.site-header {
    box-shadow: 0 1px 0 rgba(26, 140, 255, 0.05);
}

.site-mega-menu,
.site-mobile-menu {
    background-color: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.site-header img {
    max-height: 2rem;
}

.site-mega-menu h4 {
    color: var(--lanze-primary-dark) !important;
    border-color: var(--lanze-line) !important;
}

.site-mega-menu a {
    color: var(--lanze-ink) !important;
}

.site-mega-menu a:hover {
    color: var(--lanze-primary-dark) !important;
}

.site-mega-menu p {
    color: var(--lanze-muted) !important;
}

.site-mega-menu .border-white\/10,
.site-mega-menu .border-white\/20 {
    border-color: var(--lanze-line) !important;
}

/* Mobile navigation becomes a calm stack of pale-blue cards. */
.site-mobile-menu > div > div:not(:last-child),
.site-mobile-menu .border-white\/20,
.site-mobile-menu .border-white\/10 {
    border-color: var(--lanze-line) !important;
}

.site-mobile-menu button,
.site-mobile-menu a,
.site-mobile-menu p,
.site-mobile-menu span {
    color: var(--lanze-ink) !important;
}

.site-mobile-menu a:hover,
.site-mobile-menu button:hover {
    color: var(--lanze-primary-dark) !important;
}

.site-mobile-menu .pt-4.pb-2 a {
    background: var(--lanze-surface-soft) !important;
    border: 1px solid var(--lanze-line);
}

.site-mobile-menu .pt-4.pb-2 a:hover {
    background: #eaf4ff !important;
    border-color: #8fcbff;
}

.site-mobile-menu input,
.desktop-nav input {
    background: var(--lanze-surface-soft) !important;
    color: var(--lanze-ink) !important;
    border: 1px solid var(--lanze-line) !important;
    outline: none;
}

.site-mobile-menu input:focus,
.desktop-nav input:focus {
    background: #fff !important;
    border-color: #8fcbff !important;
    box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.12);
}

::selection {
    background: #b0d8ff;
    color: var(--lanze-ink);
}

/* Lazy-load image progressive reveal */
.img-lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.img-lazy.loaded {
    opacity: 1;
}

/* Blur-up placeholder effect */
.img-blur-up {
    filter: blur(12px);
    transform: scale(1.02);
    transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.img-blur-up.loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Image container with aspect-ratio lock to prevent layout shift */
.img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb; /* gray-200 placeholder */
}

.dark .img-wrapper {
    background-color: #1f2937; /* dark gray-800 placeholder */
}