/* ============================================   ????????? Main Stylesheet   ============================================ */:root {
        --primary: #0a1628;    --primary-light: #0f1f3a;    --primary-dark: #060e1a;    --accent-1: #0066ff;    --accent-2: #00c8ff;    --accent-3: #7c3aed;    --gradient-main: linear-gradient(135deg, #0066ff, #00c8ff);    --gradient-warm: linear-gradient(135deg, #0066ff, #7c3aed);    --gradient-hero: linear-gradient(135deg, #0a1628 0%, #0f1f3a 50%, #060e1a 100%);    --text-primary: #ffffff;    --text-secondary: rgba(255,255,255,0.7);    --text-muted: rgba(255,255,255,0.4);    --glass-bg: rgba(255,255,255,0.06);    --glass-border: rgba(255,255,255,0.12);    --glass-hover: rgba(255,255,255,0.16);    --card-bg: rgba(255,255,255,0.05);    --card-border: rgba(255,255,255,0.10);    --radius-sm: 8px;    --radius-md: 16px;    --radius-lg: 24px;    --radius-xl: 32px;    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);    --shadow-md: 0 8px 32px rgba(0,0,0,0.4);    --shadow-lg: 0 16px 64px rgba(0,0,0,0.5);    --shadow-glow: 0 0 40px rgba(0,102,255,0.15);    --font-cn: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;    --font-zh: var(--font-cn);    --font-en: Arial, "Helvetica Neue", sans-serif;    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);    --nav-height: 72px;}
/* ============================================   Base & Reset   ============================================ */*, *::before, *::after {
        margin: 0;    padding: 0;    box-sizing: border-box;}
html {
        scroll-behavior: smooth;    scroll-padding-top: calc(var(--nav-height) + 72px);    font-size: 16px;}
html.instant-service-return body {
        visibility: hidden;}
body {
        font-family: var(--font-cn);    background:         radial-gradient(ellipse at 15% 15%, rgba(0,102,255,0.18) 0%, transparent 50%),        radial-gradient(ellipse at 80% 40%, rgba(124,58,237,0.14) 0%, transparent 50%),        radial-gradient(ellipse at 40% 80%, rgba(0,200,255,0.12) 0%, transparent 45%),        radial-gradient(ellipse at 90% 90%, rgba(0,102,255,0.10) 0%, transparent 40%),        linear-gradient(180deg, #050d17 0%, #0a1628 30%, #0f1f3a 60%, #0a1628 100%);    color: var(--text-primary);    line-height: 1.6;    overflow-x: hidden;    -webkit-font-smoothing: antialiased;}
/* 鈹€鈹€ 姣涚幓鐠冪汗鐞嗗彔鍔犲眰 鈹€鈹€ */body::after {
        content: '';    position: fixed;    inset: 0;    z-index: 3;    pointer-events: none;    opacity: 0.015;    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");    background-size: 200px 200px;}

/* 鈹€鈹€ Content above Aurora canvas 鈹€鈹€ */
.section { position: relative; z-index: 2; }
footer.footer { position: relative; z-index: 2; }
a {
     color: inherit; text-decoration: none; }
ul {
     list-style: none; }
img {
     max-width: 100%; display: block; }
::selection {
        background: var(--accent-1);    color: #fff;}
/* ============================================   Container   ============================================ */.container {
        max-width: 1200px;    margin: 0 auto;    padding: 0 24px;}

/* ============================================   Navigation (PillNav)   ============================================ */.pill-nav-container {
     position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(920px, calc(100% - 72px)); transition: var(--transition); }
.pill-nav {
     --pill-nav-h: 62px; --pill-pad-x: 12px; --pill-gap: 2px; width: 100%; min-height: var(--pill-nav-h); display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 10px 12px 10px 20px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.78); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 18px 54px rgba(20,31,42,0.16); position: relative; overflow: hidden; }
.pill-nav::before {
     content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 120px at 50% -40%, rgba(255,255,255,0.72), transparent 70%), linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); opacity: 0.9; }
.pill-nav-items {
     position: relative; display: flex; align-items: center; height: 100%; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; z-index: 1; }
.navbar.scrolled .pill-nav {
     background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68)); border-color: rgba(255,255,255,0.84); box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 16px 48px rgba(20,31,42,0.18); }
.pill-logo {
     display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; color: rgba(24,28,38,0.92); flex-shrink: 0; transition: var(--transition); position: relative; z-index: 1; }
.pill-logo:hover {
     color: #151923; transform: translateY(-1px); }
.nav-logo-text {
     font-family: var(--font-cn); font-size: clamp(0.98rem, 1.15vw, 1.18rem); font-weight: 800; color: currentColor; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.pill-list {
     list-style: none; display: flex; align-items: stretch; gap: var(--pill-gap); margin: 0; padding: 0; height: 100%; }
.pill-list > li {
     display: flex; height: 100%; }
.pill {
     display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--pill-pad-x); background: transparent; color: rgba(24,28,38,0.54); text-decoration: none; border-radius: 16px; box-sizing: border-box; font-weight: 700; font-size: 0.88rem; line-height: 0; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); }
.pill:hover {
     color: rgba(24,28,38,0.84); background: rgba(255,255,255,0.44); }
.pill.nav-link.active {
     background: transparent; color: rgba(24,28,38,0.92); }
.pill.nav-link.active::after {
     content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(24,28,38,0.52); z-index: 5; }
.pill .hover-circle {
     position: absolute; left: 50%; bottom: 0; border-radius: 50%; background: rgba(255,255,255,0.50); z-index: 1; display: block; pointer-events: none; transform: translateX(-50%) scale(0); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.pill .label-stack {
     position: relative; display: inline-block; line-height: 1; z-index: 2; }
.pill .pill-label {
     position: relative; z-index: 2; display: inline-block; line-height: 1; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.pill .pill-label-hover {
     position: absolute; left: 0; top: 0; color: #151923; z-index: 3; display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(var(--pill-text-drop, 64px)); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease; will-change: transform, opacity; }
.pill:not(.active):hover .hover-circle {
     transform: translateX(-50%) scale(1.2); }
.pill:not(.active):hover .pill-label {
     transform: translateY(calc(var(--pill-text-lift, 60px) * -1)); }
.pill:not(.active):hover .pill-label-hover {
     opacity: 1; transform: translateY(0); }
.pill.nav-cta {
     height: 48px; min-width: 96px; background: rgba(24,26,36,0.94); color: #fff; border-radius: 14px; margin-left: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(20,31,42,0.18); }
.pill.nav-cta .hover-circle {
     background: rgba(18,17,25,0.08); }
.pill.nav-cta .pill-label-hover {
     color: #fff; -webkit-text-fill-color: currentColor; }
.pill.nav-cta.active {
     color: #15141d; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 26px rgba(0,0,0,0.22); }
.desktop-only {
     display: block; }
.mobile-only {
     display: none; }
.mobile-menu-button {
     width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.10); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; position: relative; transition: var(--transition); z-index: 1; }
.mobile-menu-button:hover {
     background: rgba(255,255,255,0.14); }
.pill-logo:focus:not(:focus-visible),.pill:focus:not(:focus-visible),.mobile-menu-button:focus:not(:focus-visible),.mobile-menu-link:focus:not(:focus-visible) {
     outline: none; }
.pill-logo:focus-visible,.pill:focus-visible,.mobile-menu-button:focus-visible,.mobile-menu-link:focus-visible {
     outline: 2px solid rgba(255,255,255,0.62); outline-offset: 3px; }
.hamburger-line {
     width: 18px; height: 2px; background: #fff; border-radius: 1px; transition: all 0.3s ease; transform-origin: center; }
.mobile-menu-button.active .hamburger-line:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-button.active .hamburger-line:nth-child(2) {
     opacity: 0; }
.mobile-menu-button.active .hamburger-line:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu-popover {
     position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: rgba(21,20,29,0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; z-index: 998; opacity: 0; transform-origin: top center; visibility: hidden; transform: translateY(-8px) scaleY(0.96); transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 18px 50px rgba(0,0,0,0.38); }
.mobile-menu-popover.active {
     opacity: 1; visibility: visible; transform: translateY(0) scaleY(1); }
.mobile-menu-list {
     list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-link {
     display: block; padding: 14px 20px; color: var(--text-secondary); text-decoration: none; font-size: 1rem; font-weight: 500; border-radius: 50px; transition: all 0.25s ease; text-align: center; }
.mobile-menu-link:hover,.mobile-menu-link.active {
     background: var(--gradient-main); color: #fff; }
.mobile-menu-link.nav-cta-mobile {
     background: var(--gradient-main); color: #fff; font-weight: 600; }
.hero {
        position: relative;    min-height: 100vh;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;    padding: var(--nav-height) 24px 60px;}
.hero-bg {
        position: absolute;    inset: 0;    background: var(--gradient-hero);    z-index: 0;
}
.hero-grid {
        position: absolute;    inset: 0;    background-image:        linear-gradient(rgba(0,102,255,0.03) 1px, transparent 1px),        linear-gradient(90deg, rgba(0,102,255,0.03) 1px, transparent 1px);    background-size: 60px 60px;    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);}






.hero-content {
        position: relative;    z-index: 1;    text-align: center;    max-width: 900px;}
.hero-badge {
        display: inline-flex;    align-items: center;    gap: 8px;    padding: 8px 20px;    border-radius: 50px;    background: rgba(0,102,255,0.15);    border: 1px solid rgba(0,102,255,0.25);    font-size: 0.85rem;    color: rgba(255,255,255,0.9);    margin-bottom: 2rem;    backdrop-filter: blur(10px);}
.hero-badge i {
     color: var(--accent-1); }
.hero-title {
        font-family: var(--font-cn);    font-size: clamp(2.5rem, 6vw, 4.2rem);    font-weight: 800;    line-height: 1.2;    margin-bottom: 1.2rem;    letter-spacing: -0.02em;}
.gradient-text {
        background: var(--gradient-main);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;}
.hero-subtitle {
        font-size: clamp(1rem, 2vw, 1.2rem);    color: var(--text-secondary);    max-width: 640px;    margin: 0 auto 2.5rem;    line-height: 1.8;}
.hero-actions {
        display: flex;    gap: 16px;    justify-content: center;    flex-wrap: wrap;    margin-bottom: 4rem;}
.btn {
        display: inline-flex;    align-items: center;    gap: 10px;    padding: 14px 32px;    border-radius: 50px;    font-size: 1rem;    font-weight: 600;    cursor: pointer;    transition: var(--transition);    border: none;    font-family: var(--font-cn);}
.btn-primary {
        background: var(--gradient-main);    color: #fff;    box-shadow: var(--shadow-glow);}
.btn-primary:hover {
        transform: translateY(-2px);    box-shadow: 0 0 60px rgba(0,102,255,0.3);}
.btn-outline {
        background: transparent;    color: var(--text-primary);    border: 1.5px solid rgba(255,255,255,0.2);}
.btn-outline:hover {
        border-color: var(--accent-1);    background: rgba(0,102,255,0.1);    transform: translateY(-2px);}
/* Hero Stats */.hero-stats {
        display: flex;    justify-content: center;    gap: 48px;    flex-wrap: wrap;}
.stat-item {
        text-align: center;}
.stat-num {
        display: block;    font-family: var(--font-en);    font-size: 2.2rem;    font-weight: 800;    background: var(--gradient-main);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    line-height: 1.2;}
.stat-label {
        font-size: 0.85rem;    color: var(--text-muted);    margin-top: 4px;    display: block;}
/* Hero Scroll */.hero-scroll {
        position: absolute;    bottom: 30px;    left: 50%;    transform: translateX(-50%);    text-align: center;    z-index: 1;    animation: scrollBounce 2s ease-in-out infinite;}
.hero-scroll span {
        display: block;    font-size: 0.75rem;    color: var(--text-muted);    margin-bottom: 4px;    letter-spacing: 2px;    text-transform: uppercase;}
.scroll-arrow {
        color: var(--text-muted);    font-size: 0.8rem;}
@keyframes scrollBounce {
        0%, 100% {
     transform: translateX(-50%) translateY(0); }
    50% {
     transform: translateX(-50%) translateY(8px); }
}
.hero-orbs {
        position: absolute;    inset: 0;    overflow: hidden;}
.orb {
        position: absolute;    border-radius: 50%;    filter: blur(80px);    opacity: 0.4;    animation: orbFloat 20s ease-in-out infinite;}
.orb-1 {
        width: 500px;    height: 500px;    background: radial-gradient(circle, #0066ff, transparent);    top: -10%;    left: -5%;    animation-delay: 0s;}
.orb-2 {
        width: 400px;    height: 400px;    background: radial-gradient(circle, #00c8ff, transparent);    bottom: -10%;    right: -5%;    animation-delay: -7s;}
.orb-3 {
        width: 300px;    height: 300px;    background: radial-gradient(circle, #7c3aed, transparent);    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    animation-delay: -14s;}
@keyframes orbFloat {
        0%, 100% {
     transform: translate(0, 0) scale(1); }
    33% {
     transform: translate(30px, -30px) scale(1.1); }
    66% {
     transform: translate(-20px, 20px) scale(0.9); }
}
/* ============================================   Sections Common   ============================================ */.section {
        padding: 100px 0;    position: relative;}

.section .container {
    position: relative;
    z-index: 1;
}

.section-header {
        text-align: center;    margin-bottom: 64px;}
.section-tag {
        display: inline-block;    padding: 6px 16px;    border-radius: 50px;    background: rgba(0,102,255,0.1);    border: 1px solid rgba(0,102,255,0.2);    font-size: 0.8rem;    color: var(--accent-2);    margin-bottom: 16px;    letter-spacing: 1px;}
.section-header h2 {
        font-size: clamp(1.8rem, 3.5vw, 2.6rem);    font-weight: 700;    margin-bottom: 12px;    line-height: 1.3;}
.section-desc {
        color: var(--text-muted);    font-size: 1.05rem;    max-width: 500px;    margin: 0 auto;}
/* ============================================   About Section   ============================================ */.about {
        background: linear-gradient(180deg, #0d1b2a 0%, #1b2d4a 100%);
    position: relative;
    z-index: 0;}
.about::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(0,102,255,0.12) 0%, transparent 70%);
}
.about-grid {
        display: grid;    grid-template-columns: 1fr 1fr;    gap: 64px;    align-items: center;}
.about-text {
        color: var(--text-secondary);    line-height: 1.9;    margin-bottom: 20px;    font-size: 1rem;}
.about-text strong {
     color: var(--text-primary); }
.about-highlights {
        display: flex;    flex-direction: column;    gap: 12px;    margin-top: 28px;}
.highlight-item {
        display: flex;    align-items: center;    gap: 12px;    padding: 12px 18px;    background: var(--glass-bg);    border-radius: var(--radius-sm);    border: 1px solid var(--glass-border);}
.highlight-item i {
        width: 36px;    height: 36px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 8px;    background: rgba(0,102,255,0.15);    color: var(--accent-1);    font-size: 1rem;    flex-shrink: 0;}
.highlight-item span {
     font-size: 0.9rem; color: var(--text-secondary); }
.highlight-item span strong {
     color: var(--text-primary); margin-right: 8px; }
.about-card-grid {
        display: grid;    grid-template-columns: 1fr 1fr;    gap: 16px;}
.about-card {
     padding: 32px 20px; background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); text-align: center; transition: var(--transition); position: relative; overflow: hidden; }
.about-card:hover {
     background: rgba(255,255,255,0.10); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(0,102,255,0.5); transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0,102,255,0.30); }
.about-card i {
        font-size: 2rem;    background: var(--gradient-main);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    margin-bottom: 10px;}
.about-card span {
        display: block;    font-size: 0.9rem;    font-weight: 500;    color: var(--text-secondary);}
/* ============================================   Qualifications   ============================================ */.qualifications {
        background: linear-gradient(180deg, #0a1f2e 0%, #0d3b4f 100%);
    position: relative;
    z-index: 0;}
.qualifications::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(0,200,255,0.12) 0%, transparent 70%);
}
.qual-grid {
        display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 24px;}
.qual-card {
     padding: 36px 28px; background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); text-align: center; transition: var(--transition); position: relative; overflow: hidden; }
.qual-card:hover {
     background: rgba(255,255,255,0.10); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(0,102,255,0.5); transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0,102,255,0.30); }
.qual-card-wide {
        grid-column: span 3;    display: flex;    flex-direction: column;    align-items: center;}
.qual-icon {
        width: 56px;    height: 56px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 16px;    background: rgba(0,102,255,0.1);    margin: 0 auto 18px;    font-size: 1.5rem;    color: var(--accent-1);}
.qual-card h3 {
        font-size: 1.05rem;    font-weight: 600;    margin-bottom: 10px;}
.qual-card p {
        font-size: 0.85rem;    color: var(--text-muted);    line-height: 1.6;}
.qual-badge {
        display: inline-block;    margin-top: 14px;    padding: 4px 14px;    border-radius: 50px;    font-size: 0.75rem;    font-weight: 600;    background: rgba(0,102,255,0.15);    color: var(--accent-2);    border: 1px solid rgba(0,102,255,0.2);}


/* ============================================   Certificate Tabs & Cards   ============================================ */
.cert-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}
.cert-tab {
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-family: var(--font-zh);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cert-tab:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(0,102,255,0.3);
    color: #fff;
}
.cert-tab.active {
    background: rgba(0,102,255,0.2);
    border-color: rgba(0,102,255,0.5);
    color: var(--accent-2);
    box-shadow: 0 0 20px rgba(0,102,255,0.15);
}

.cert-panels { position: relative; z-index: 2; }
.cert-panel { display: none; }
.cert-panel.active { display: block; }

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.cert-card {
    padding: 28px 24px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.cert-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
}
.cert-card::after {
    content: '';
    position: absolute;
    top: 0; left: 25%; right: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    pointer-events: none;
    top: 1px;
}
.cert-card:hover {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(0,102,255,0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0,102,255,0.30);
}
.cert-card .cert-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(0,102,255,0.1);
    margin: 0 auto 14px;
    font-size: 1.4rem;
    color: var(--accent-1);
    transition: var(--transition);
}
.cert-card:hover .cert-icon {
    background: rgba(0,102,255,0.2);
    color: var(--accent-2);
}
.cert-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
    word-break: keep-all;
}
.cert-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}
.cert-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(0,102,255,0.12);
    color: var(--accent-2);
    border: 1px solid rgba(0,102,255,0.2);
    transition: var(--transition);
}
.cert-card:hover .cert-badge {
    background: rgba(0,102,255,0.2);
    border-color: rgba(0,102,255,0.4);
}

/* ============================================   Certificate Viewer Modal   ============================================ */
.cert-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cert-modal.active {
    opacity: 1;
    pointer-events: all;
}
.cert-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cert-modal-content {
    position: relative;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    background: rgba(15,30,50,0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}
.cert-modal.active .cert-modal-content {
    transform: scale(1) translateY(0);
}
.cert-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.cert-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.cert-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    line-height: 1;
}
.cert-modal-close:hover {
    background: rgba(255,80,80,0.2);
    border-color: rgba(255,80,80,0.4);
}
.cert-modal-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
    display: grid;
    gap: 14px;
    justify-items: center;
}
.cert-modal-body iframe {
    display: none;
}
.cert-modal-preview {
    width: 100%;
    min-height: 70vh;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(238,234,248,0.96));
    display: grid;
    place-items: center;
    position: relative;
    overflow: auto;
}
.cert-modal-preview canvas {
    max-width: 100%;
    height: auto;
    display: block;
    background: #fff;
    box-shadow: 0 16px 48px rgba(0,0,0,0.24);
}
.cert-modal-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(12,8,24,0.62);
    font-weight: 700;
}
.cert-modal-preview.is-ready .cert-modal-loading {
    display: none;
}
.cert-modal-intro {
    width: min(560px, 100%);
    padding: 28px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.14), transparent 40%),
        rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    border-top-color: rgba(255,255,255,0.22);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 54px rgba(0,0,0,0.22);
}
.cert-modal-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 10px;
    color: #ff9ffc;
    background: rgba(255,159,252,0.10);
    border: 1px solid rgba(255,159,252,0.24);
    font-size: 0.8rem;
    font-weight: 700;
}
.cert-modal-meta {
    max-width: 34rem;
    margin: 0 auto 20px;
    color: rgba(255,255,255,0.68);
    line-height: 1.7;
}
.cert-modal-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 136px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,159,252,0.34);
    background: linear-gradient(135deg, rgba(82,39,255,0.92), rgba(255,159,252,0.84));
    color: #fff;
    font-family: var(--font-cn);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 42px rgba(82,39,255,0.26);
    transition: var(--transition);
}
.cert-modal-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 54px rgba(255,159,252,0.24);
}
.cert-modal-intro[hidden],
.cert-modal-preview[hidden],
.cert-modal-original[hidden] {
    display: none;
}
.cert-modal-original {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 14px;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,159,252,0.13);
    border: 1px solid rgba(255,159,252,0.24);
    font-size: 0.84rem;
    font-weight: 700;
}
.cert-modal-original:hover {
    background: rgba(255,159,252,0.20);
    border-color: rgba(255,159,252,0.42);
}

/* Responsive */
@media (max-width: 768px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }
    .cert-tabs {
        gap: 8px;
    }
    .cert-tab {
        padding: 8px 18px;
        font-size: 0.82rem;
    }
    .cert-modal {
        padding: 10px;
    }
    .cert-modal-content {
        max-height: 95vh;
        border-radius: 12px;
    }
    .cert-modal-preview {
        min-height: 60vh;
    }
}

.ip-stats {
        display: flex;    gap: 40px;    margin: 16px 0;}
.ip-item {
     text-align: center; }
.ip-num {
        font-family: var(--font-en);    font-size: 2.5rem;    font-weight: 800;    background: var(--gradient-main);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    display: block;    line-height: 1.2;}
.ip-label {
        font-size: 0.85rem;    color: var(--text-muted);}
/* ============================================   Services   ============================================ */.services {
        background: linear-gradient(180deg, #0c1628 0%, #13294b 100%);
    position: relative;
    z-index: 0;}
.services::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(0,102,255,0.15) 0%, transparent 70%);
}
.services-grid {
        display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 24px;}
.service-card {
        perspective: 1000px;}
.service-card-inner {
     padding: 36px 28px; background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); height: 100%; transition: var(--transition); position: relative; overflow: hidden; }
.service-card-inner:hover {
     background: rgba(255,255,255,0.10); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(0,102,255,0.5); transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0,102,255,0.30); }
.service-icon {
        width: 52px;    height: 52px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 14px;    background: rgba(0,102,255,0.1);    font-size: 1.4rem;    color: var(--accent-1);    margin-bottom: 20px;}
.service-card h3 {
        font-size: 1.05rem;    font-weight: 600;    margin-bottom: 16px;    line-height: 1.4;}
.service-list {
        margin-bottom: 20px;}
.service-list li {
        position: relative;    padding-left: 18px;    font-size: 0.85rem;    color: var(--text-secondary);    line-height: 1.8;}
.service-list li::before {
        content: '';    position: absolute;    left: 0;    top: 10px;    width: 6px;    height: 6px;    border-radius: 50%;    background: var(--accent-1);}
.service-tags {
        display: flex;    flex-wrap: wrap;    gap: 6px;}
.service-tags span {
        padding: 4px 12px;    border-radius: 50px;    font-size: 0.75rem;    background: rgba(255,255,255,0.04);    border: 1px solid rgba(255,255,255,0.06);    color: var(--text-muted);}
/* ============================================   Team Section   ============================================ */.team {
        background: linear-gradient(180deg, #150a2e 0%, #2a1a4a 100%);
    position: relative;
    z-index: 0;}
.team::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(124,58,237,0.15) 0%, transparent 70%);
}
.team-showcase {
        margin-bottom: 48px;}
.team-certs {
        display: flex;    flex-wrap: wrap;    justify-content: center;    gap: 12px;}
.cert-item {
        display: flex;    align-items: center;    gap: 8px;    padding: 10px 20px;    background: var(--card-bg);    border: 1px solid var(--card-border);    border-radius: 50px;    font-size: 0.85rem;    color: var(--text-secondary);    transition: var(--transition);}
.cert-item:hover {
        border-color: rgba(0,102,255,0.3);    color: var(--text-primary);}
.cert-item i {
     color: var(--accent-1); font-size: 0.9rem; }
.team-roles {
        display: grid;    grid-template-columns: repeat(4, 1fr);    gap: 20px;}
.role-card {
     text-align: center; padding: 32px 20px; background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); transition: var(--transition); position: relative; overflow: hidden; }
.role-card:hover {
     background: rgba(255,255,255,0.10); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(0,102,255,0.5); transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0,102,255,0.30); }
.role-icon {
        width: 48px;    height: 48px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 14px;    background: rgba(0,102,255,0.1);    margin: 0 auto 14px;    color: var(--accent-1);    font-size: 1.2rem;}
.role-card h4 {
        font-size: 1rem;    font-weight: 600;    margin-bottom: 10px;}
.role-card p {
        font-size: 0.82rem;    color: var(--text-muted);    line-height: 1.7;}
/* ============================================   Partners Section   ============================================ */.partners {
        background: linear-gradient(180deg, #081424 0%, #0f2847 100%);
    position: relative;
    z-index: 0;}
.partners::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 40% at 50% 40%, rgba(0,102,255,0.10) 0%, transparent 70%);
}
.partner-groups {
        display: flex;    flex-direction: column;    gap: 40px;}
.partner-group-title {
        font-size: 1rem;    font-weight: 600;    margin-bottom: 18px;    display: flex;    align-items: center;    gap: 8px;    color: var(--text-secondary);}
.partner-group-title i {
     color: var(--accent-1); }
.partner-logos {
        display: flex;    flex-wrap: wrap;    gap: 12px;}
.partner-logo {
     display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 28px; background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); min-width: 100px; transition: var(--transition); position: relative; overflow: hidden; }
.partner-logo:hover {
     background: rgba(255,255,255,0.10); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-color: rgba(0,102,255,0.5); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,102,255,0.30); }
.partner-logo span {
        font-size: 0.9rem;    font-weight: 600;    color: var(--text-primary);}
.partner-logo small {
        font-size: 0.7rem;    color: var(--text-muted);    font-family: var(--font-en);}
/* ============================================   Contact Section   ============================================ */.contact {
        background: linear-gradient(180deg, #0a1a2a 0%, #1a2d42 100%);
    position: relative;
    z-index: 0;}
.contact::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 50% at 30% 60%, rgba(0,150,255,0.12) 0%, transparent 70%);
}
.contact-grid {
        display: grid;    grid-template-columns: 1fr 1fr;    gap: 48px;}
.contact-info {
        display: flex;    flex-direction: column;    gap: 24px;}
.contact-item {
     display: flex; gap: 18px; padding: 20px 24px; background: rgba(255,255,255,0.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); transition: var(--transition); }
.contact-item:hover {
     background: rgba(255,255,255,0.06); border-color: rgba(0,102,255,0.3); box-shadow: 0 4px 20px rgba(0,102,255,0.1); }
.contact-icon {
        width: 44px;    height: 44px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 12px;    background: rgba(0,102,255,0.1);    color: var(--accent-1);    font-size: 1.1rem;    flex-shrink: 0;}
.contact-item h4 {
        font-size: 0.9rem;    font-weight: 600;    margin-bottom: 4px;}
.contact-item p,.contact-item a {
        font-size: 0.88rem;    color: var(--text-muted);}
.contact-item a:hover {
     color: var(--accent-1); }
/* ============================================   Footer   ============================================ */.footer {
     background: rgba(6,14,26,0.60); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.12); padding: 60px 0 0; position: relative; }
.footer-grid {
        display: grid;    grid-template-columns: 2fr 1fr 1fr 1.5fr;    gap: 48px;    padding-bottom: 40px;    border-bottom: 1px solid var(--glass-border);}
.footer-logo {
        font-family: var(--font-en);    font-size: 2rem;    font-weight: 800;    background: var(--gradient-main);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    margin-bottom: 12px;}
.footer-desc {
        font-size: 0.88rem;    color: var(--text-muted);    line-height: 1.7;    margin-bottom: 18px;    max-width: 320px;}
.footer-social {
        display: flex;    gap: 12px;}
.footer-social a {
        width: 38px;    height: 38px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 10px;    background: var(--glass-bg);    border: 1px solid var(--glass-border);    color: var(--text-muted);    transition: var(--transition);}
.footer-social a:hover {
        background: rgba(0,102,255,0.15);    color: var(--accent-1);    border-color: rgba(0,102,255,0.3);}
.footer-links h4,.footer-contact h4 {
        font-size: 0.95rem;    font-weight: 600;    margin-bottom: 18px;}
.footer-links li {
        margin-bottom: 10px;}
.footer-links a {
        font-size: 0.85rem;    color: var(--text-muted);    transition: var(--transition);}
.footer-links a:hover {
     color: var(--accent-1); }
.footer-contact p {
        font-size: 0.85rem;    color: var(--text-muted);    margin-bottom: 10px;    display: flex;    align-items: center;    gap: 8px;}
.footer-contact i {
     color: var(--accent-1); width: 16px; }
.footer-bottom {
        padding: 24px 0;    display: flex;    justify-content: space-between;    align-items: center;    flex-wrap: wrap;    gap: 12px;}
.footer-bottom p {
        font-size: 0.8rem;    color: var(--text-muted);}
.footer-icp a {
     color: var(--text-muted); }
.footer-icp a:hover {
     color: var(--accent-1); }
/* ============================================   Back to Top   ============================================ */.back-to-top {
        position: fixed;    bottom: 30px;    right: 30px;    z-index: 999;    width: 44px;    height: 44px;    border-radius: 12px;    background: rgba(0,102,255,0.2);    border: 1px solid rgba(0,102,255,0.3);    color: #fff;    cursor: pointer;    font-size: 1rem;    display: flex;    align-items: center;    justify-content: center;    opacity: 0;    visibility: hidden;    transform: translateY(20px);    transition: var(--transition);}
.back-to-top.visible {
        opacity: 1;    visibility: visible;    transform: translateY(0);}
.back-to-top:hover {
        background: var(--gradient-main);    box-shadow: var(--shadow-glow);}
/* ============================================   Scroll Animations   ============================================ */[data-aos] {
        opacity: 0;    transform: translateY(30px);    transition: opacity 0.6s ease, transform 0.6s ease;}
[data-aos].aos-animate {
        opacity: 1;    transform: translateY(0);}
[data-aos="fade-right"] {
     transform: translateX(-30px); }
[data-aos="fade-right"].aos-animate {
     transform: translateX(0); }
[data-aos="fade-left"] {
     transform: translateX(30px); }
[data-aos="fade-left"].aos-animate {
     transform: translateX(0); }
[data-aos="flip-up"] {
        opacity: 0;    transform: perspective(400px) rotateX(10deg) translateY(20px);}
[data-aos="flip-up"].aos-animate {
        opacity: 1;    transform: perspective(400px) rotateX(0) translateY(0);}
/* Glass card highlight border */.qual-card::before,.about-card::before,.role-card::before,.service-card-inner::before,.partner-logo::before {
        content: '';    position: absolute;    top: 0; left: 10%; right: 10%;    height: 1px;    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);    pointer-events: none;}
.qual-card::after,.about-card::after,.role-card::after,.service-card-inner::after,.partner-logo::after {
        content: '';    position: absolute;    top: 0; left: 25%; right: 25%;    height: 1px;    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);    pointer-events: none;    top: 1px;}
/* ============================================   Responsive Design   ============================================ */@media (max-width: 1024px) {
        .services-grid {
     grid-template-columns: repeat(2, 1fr); }
    .qual-grid {
     grid-template-columns: repeat(2, 1fr); }
    .qual-card-wide {
     grid-column: span 2; }
    .team-roles {
     grid-template-columns: repeat(2, 1fr); }
    .footer-grid {
     grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
        .pill-nav {
            width: 100%;        justify-content: space-between;        min-height: 68px;        padding: 10px 12px 10px 16px;        border-radius: 22px;    }
    .pill-nav-items.desktop-only {
     display: none; }
    .mobile-only {
     display: block; }
    .mobile-menu-button {
     display: flex; }
    .pill-nav-container {
     top: 14px; left: 12px; right: 12px; transform: none; width: auto; padding: 0; }
    .nav-logo-text {
     font-size: clamp(0.82rem, 3.6vw, 1.02rem); }
    .hero-stats {
     gap: 24px; }
    .stat-num {
     font-size: 1.6rem; }
    .about-grid {
     grid-template-columns: 1fr; gap: 40px; }
    .about-card-grid {
     grid-template-columns: repeat(2, 1fr); }
    .services-grid {
     grid-template-columns: 1fr; }
    .qual-grid {
     grid-template-columns: 1fr; }
    .qual-card-wide {
     grid-column: span 1; }
    .team-roles {
     grid-template-columns: repeat(2, 1fr); }
    .contact-grid {
     grid-template-columns: 1fr; }
    .footer-grid {
     grid-template-columns: 1fr; gap: 32px; }
    .section {
     padding: 60px 0; }
    .section-header {
     margin-bottom: 40px; }
    .partner-logos {
     justify-content: center; }
}
@media (max-width: 480px) {
        .pill-logo {
     gap: 9px; }
    .nav-logo-text {
     font-size: clamp(0.78rem, 3.4vw, 0.9rem); }
        .team-roles {
     grid-template-columns: 1fr; }
    .hero-actions {
     flex-direction: column; align-items: center; }
    .btn {
     width: 100%; justify-content: center; }
}
/* ============================================   Map Placeholder   ============================================ */.map-placeholder {
     height: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); text-align: center; gap: 12px; }
.map-placeholder i {
        font-size: 3rem;    background: var(--gradient-main);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;}
.map-placeholder p {
        font-size: 1rem;    font-weight: 500;}
.map-placeholder small {
        color: var(--text-muted);    font-size: 0.85rem;}

.amap-panel {
    cursor: pointer;
    isolation: isolate;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
}

.amap-panel:focus-visible {
    outline: 2px solid rgba(255,255,255,0.72);
    outline-offset: 4px;
}

.amap-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    pointer-events: none;
    border: 0;
    border-radius: inherit;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(0,200,255,0.16), transparent 42%),
        rgba(8,18,32,0.82);
}

.amap-map-badge {
    width: calc(100% - 28px);
    margin: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(5, 13, 23, 0.76);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 16px 36px rgba(0,0,0,0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: left;
}

.amap-map-badge span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255,255,255,0.94);
}

.amap-map-badge i {
    font-size: 0.95rem;
    color: #ff9ffc;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.amap-map-badge small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    color: rgba(255,255,255,0.64);
}

.amap-nav-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #1767c8;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
    background: linear-gradient(180deg, rgba(250,253,255,0.96), rgba(236,246,255,0.92));
    border: 1px solid rgba(42,126,238,0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        0 8px 18px rgba(42,126,238,0.13);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.amap-nav-entry::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.76rem;
}

.amap-panel:hover .amap-nav-entry,
.amap-panel:focus-visible .amap-nav-entry {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(225,240,255,0.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 10px 22px rgba(42,126,238,0.18);
}

.amap-company-marker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    padding: 3px 7px 3px 4px;
    border-radius: 999px;
    color: #ef4444 !important;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(239,68,68,0.28);
    box-shadow: 0 8px 18px rgba(20,31,42,0.16);
    white-space: nowrap;
}

.amap-company-star {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    color: #ef4444 !important;
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: drop-shadow(0 2px 5px rgba(239,68,68,0.36));
}

.amap-company-name {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #ef4444;
}

.amap-info-window,
.amap-offline {
    color: #fff;
    background: rgba(5, 13, 23, 0.88);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.30);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.amap-info-window {
    width: 250px;
    padding: 14px;
}

.amap-iw-header h4 {
    margin: 0 0 8px;
    font-size: 0.98rem;
}

.amap-iw-body p,
.amap-iw-body small {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.82rem;
    line-height: 1.6;
}

.amap-offline {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
}

.amap-offline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.94);
    color: #111827;
    font-weight: 700;
}

/* ============================================
   Homepage Light Pillar and full-page sections
   ============================================ */
.hero,
.section {
    min-height: 100dvh;
}

.hero {
    isolation: isolate;
    padding-top: calc(var(--nav-height) + 36px);
    padding-bottom: 56px;
}

.hero-bg {
    overflow: hidden;
}

.light-pillar-stage {
    position: absolute;
    inset: -8% -8% 0;
    z-index: 0;
    pointer-events: auto;
    mix-blend-mode: screen;
}

.light-pillar-canvas,
.light-pillar-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.light-pillar-fallback {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(34, 211, 238, 0.34), transparent 42%),
        radial-gradient(ellipse at 50% 70%, rgba(37, 99, 235, 0.28), transparent 52%);
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 43%, transparent 0%, rgba(5, 13, 23, 0.08) 42%, rgba(5, 13, 23, 0.78) 100%),
        linear-gradient(180deg, rgba(5, 13, 23, 0.18), rgba(5, 13, 23, 0.72));
}

.hero-grid,
.hero-orbs {
    z-index: 1;
}

.hero-orbs {
    opacity: 0.32;
}

.hero-content {
    max-width: 980px;
}

.section {
    display: flex;
    align-items: center;
    padding: 96px 0 56px;
}

.section > .container {
    width: 100%;
}

.section-header {
    margin-bottom: 34px;
}

.about-card h4,
.service-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.about-card p,
.service-card p {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.about-img-placeholder,
.contact-map {
    min-height: 360px;
}

.about-img-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(ellipse at 50% 18%, rgba(0,200,255,0.18), transparent 48%),
        rgba(255,255,255,0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.about-img-placeholder i {
    font-size: 4rem;
    color: var(--accent-2);
}

.about-img-placeholder p {
    color: var(--text-secondary);
}

.service-card {
    padding: 30px 26px;
    min-height: 210px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(0,102,255,0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0,102,255,0.30);
}

.qualifications > .container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 128px);
}

.cert-panels {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,200,255,0.55) rgba(255,255,255,0.08);
}

.cert-panels::-webkit-scrollbar {
    width: 8px;
}

.cert-panels::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
}

.cert-panels::-webkit-scrollbar-thumb {
    background: rgba(0,200,255,0.55);
    border-radius: 999px;
}

.cert-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.cert-card {
    padding: 22px 18px;
}

.cert-card .cert-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
}

.partners-content,
.contact-grid,
.services-grid,
.team-roles,
.about-grid {
    align-items: center;
}

@media (max-width: 1024px) {
    .section {
        padding: 84px 0 48px;
    }

    .qualifications > .container {
        max-height: none;
    }

    .cert-panels {
        max-height: 58dvh;
    }
}


@media (max-width: 768px) {
    .hero,
    .section {
        min-height: 100dvh;
    }

    .hero {
        padding: 96px 18px 40px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 12vw, 3.4rem);
    }

    .hero-actions {
        margin-bottom: 2rem;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .section {
        padding: 86px 0 42px;
    }

    .section-header {
        margin-bottom: 28px;
    }

    .section-desc {
        font-size: 0.96rem;
    }

    .about-img-placeholder,
    .contact-map {
        min-height: 280px;
    }

    .cert-panels {
        max-height: 54dvh;
    }
}

/* ============================================
   React Bits LightPillar homepage treatment
   ============================================ */
.hero {
    min-height: 100dvh;
    justify-content: center;
    padding: calc(var(--nav-height) + 42px) 24px 64px;
    background: #e6ebe7;
}

.hero-bg {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 42%, rgba(5,13,23,0.10) 100%),
        image-set(url("../images/hero-mountain-ai-safe-1920.webp") type("image/webp"), url("../images/hero-mountain-ai-safe.png") type("image/png")) center center / 100% 100% no-repeat;
}

.hero-bg::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 28%, rgba(255,255,255,0.10), transparent 36%),
        radial-gradient(ellipse at 50% 100%, rgba(4,20,16,0.10), transparent 58%);
    filter: none;
    opacity: 0.44;
    animation: none;
}

.light-pillar-stage {
    inset: -6% -10% -4%;
    opacity: 0;
    mix-blend-mode: screen;
    display: none;
}

.hero-dynamic-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    display: none;
}

.hero-flow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42vmax;
    height: 78vmax;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.20), transparent 18%),
        radial-gradient(ellipse at 50% 50%, rgba(255,159,252,0.24), transparent 46%),
        radial-gradient(ellipse at 50% 70%, rgba(82,39,255,0.22), transparent 58%);
    filter: blur(48px);
    opacity: 0.32;
    transform: translate(-50%, -50%) rotate(var(--flow-rotate, 0deg)) scale(var(--flow-scale, 1));
    mix-blend-mode: screen;
    animation: heroFlowDrift 18s ease-in-out infinite;
}

.hero-flow-1 {
    --flow-rotate: -16deg;
    --flow-scale: 1.08;
    --flow-scale-strong: 1.16;
    --flow-scale-soft: 1.02;
    margin-left: -18vw;
    animation-duration: 20s;
}

.hero-flow-2 {
    --flow-rotate: 18deg;
    --flow-scale: 0.86;
    --flow-scale-strong: 0.94;
    --flow-scale-soft: 0.80;
    margin-left: 20vw;
    opacity: 0.24;
    animation-duration: 24s;
    animation-delay: -8s;
}

.hero-flow-3 {
    --flow-rotate: 0deg;
    --flow-scale: 0.72;
    --flow-scale-strong: 0.80;
    --flow-scale-soft: 0.68;
    width: 32vmax;
    height: 48vmax;
    top: 62%;
    opacity: 0.20;
    animation-duration: 16s;
    animation-delay: -4s;
}

.hero-noise-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.02;
    display: none;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.62'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: heroNoiseShift 1.6s steps(2) infinite;
}

.hero-light-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5,13,23,0.10) 0%, rgba(5,13,23,0.00) 32%, rgba(5,13,23,0.00) 66%, rgba(5,13,23,0.12) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 52%, rgba(5,13,23,0.18) 100%);
}

.hero-bg::after {
    z-index: 5;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 44%, rgba(5,13,23,0.08) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(5,13,23,0.10));
}

@keyframes heroAtmosphereSpin {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes heroFlowDrift {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(var(--flow-rotate, 0deg)) scale(var(--flow-scale, 1));
    }
    35% {
        transform: translate(calc(-50% + 7vw), calc(-50% - 4vh)) rotate(calc(var(--flow-rotate, 0deg) + 10deg)) scale(var(--flow-scale-strong, 1.08));
    }
    70% {
        transform: translate(calc(-50% - 5vw), calc(-50% + 5vh)) rotate(calc(var(--flow-rotate, 0deg) - 8deg)) scale(var(--flow-scale-soft, 0.94));
    }
}

@keyframes heroNoiseShift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-2%, 1%, 0);
    }
    100% {
        transform: translate3d(1%, -2%, 0);
    }
}

.hero-content {
    width: min(1180px, 100%);
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(28px, 6vw, 90px);
    align-items: end;
    text-align: left;
}

.hero-copy {
    max-width: 760px;
}

.hero-badge {
    border-radius: 10px;
    background: rgba(255,255,255,0.075);
    border-color: rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.hero-badge i {
    color: #ff9ffc;
}

.hero-title {
    font-size: clamp(3.2rem, 8.8vw, 7.7rem);
    line-height: 0.95;
    letter-spacing: 0;
    text-wrap: balance;
    margin-bottom: 1.35rem;
    text-shadow: 0 8px 34px rgba(4,12,18,0.32);
}

.hero .gradient-text {
    background: linear-gradient(90deg, #ffffff 0%, #ff9ffc 42%, #8c6cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitle {
    margin: 0 0 2rem;
    max-width: 620px;
    color: rgba(255,255,255,0.76);
    text-shadow: 0 4px 18px rgba(4,12,18,0.35);
}

.hero-actions {
    justify-content: flex-start;
    margin-bottom: 0;
}

.hero .btn {
    border-radius: 12px;
}

.hero .btn-primary {
    background: linear-gradient(135deg, #5227ff, #ff9ffc);
    box-shadow: 0 18px 60px rgba(82,39,255,0.32);
}

.hero .btn-outline {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
}

.hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    justify-content: stretch;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 70px rgba(0,0,0,0.26);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.stat-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(5,3,13,0.36);
}

.stat-num {
    font-size: 1.85rem;
    background: linear-gradient(90deg, #ff9ffc, #a78bfa);
    -webkit-background-clip: text;
}

.stat-label {
    margin-top: 0;
    color: rgba(255,255,255,0.56);
}

@media (max-width: 900px) {
    .hero {
        padding: 104px 18px 42px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        align-items: center;
        text-align: center;
    }

    .hero-copy {
        margin: 0 auto;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        width: min(520px, 100%);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 auto;
    }

    .stat-item {
        display: block;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .hero-title {
        font-size: clamp(2.7rem, 15vw, 4.1rem);
    }

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
    }

    .stat-item {
        min-height: 74px;
        padding: 10px 8px;
    }

    .stat-num {
        font-size: 1.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg::before,
    .hero-flow,
    .hero-noise-layer {
        animation: none;
    }
}

/* ============================================
   Unified module UI to match homepage
   ============================================ */
:root {
    --primary: #05030d;
    --primary-light: #120a28;
    --primary-dark: #030209;
    --accent-1: #8c6cff;
    --accent-2: #ff9ffc;
    --accent-3: #5227ff;
    --gradient-main: linear-gradient(135deg, #5227ff 0%, #ff9ffc 100%);
    --gradient-warm: linear-gradient(135deg, #8c6cff 0%, #ff9ffc 100%);
    --gradient-hero: linear-gradient(180deg, #080416 0%, #05030d 58%, #030209 100%);
    --glass-bg: rgba(255,255,255,0.07);
    --glass-border: rgba(255,255,255,0.13);
    --glass-hover: rgba(255,255,255,0.12);
    --card-bg: rgba(255,255,255,0.065);
    --card-border: rgba(255,255,255,0.13);
    --shadow-glow: 0 18px 60px rgba(82,39,255,0.28);
    --font-zh: var(--font-cn);
}

body {
    background:
        radial-gradient(circle at 50% 12%, rgba(82,39,255,0.16), transparent 36%),
        radial-gradient(circle at 84% 48%, rgba(255,159,252,0.09), transparent 34%),
        linear-gradient(180deg, #05030d 0%, #070414 42%, #030209 100%);
}

.mobile-menu-link:hover,
.mobile-menu-link.active,
.mobile-menu-link.nav-cta-mobile,
.btn-primary,
.back-to-top:hover {
    background: var(--gradient-main);
}

.btn-primary {
    box-shadow: 0 18px 56px rgba(82,39,255,0.30);
}

.btn-primary:hover {
    box-shadow: 0 18px 68px rgba(255,159,252,0.26);
}

.btn-outline:hover {
    border-color: rgba(255,159,252,0.42);
    background: rgba(255,255,255,0.08);
}

.section {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 42%), rgba(82,39,255,0.22), transparent 38%),
        radial-gradient(circle at calc(var(--glow-x, 50%) + 18%) calc(var(--glow-y, 42%) + 20%), rgba(255,159,252,0.10), transparent 34%),
        linear-gradient(180deg, #070414 0%, #05030d 58%, #030209 100%);
}

.section::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    background:
        conic-gradient(from var(--cone-angle, 115deg) at var(--glow-x, 50%) var(--glow-y, 44%), rgba(82,39,255,0), rgba(82,39,255,0.28), rgba(255,159,252,0.18), rgba(82,39,255,0)),
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 44%), rgba(255,255,255,0.08), transparent 32%);
    filter: blur(42px) saturate(1.08);
    opacity: 0.54;
}

.section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5,3,13,0.72) 0%, rgba(5,3,13,0.12) 42%, rgba(5,3,13,0.74) 100%),
        linear-gradient(180deg, rgba(5,3,13,0.05), rgba(5,3,13,0.62));
}

.section.about {
    --glow-x: 28%;
    --glow-y: 42%;
    --cone-angle: 80deg;
}

.section.qualifications {
    --glow-x: 68%;
    --glow-y: 36%;
    --cone-angle: 140deg;
}

.services {
    --glow-x: 48%;
    --glow-y: 38%;
    --cone-angle: 110deg;
}

.team {
    --glow-x: 54%;
    --glow-y: 58%;
    --cone-angle: 155deg;
}

.partners {
    --glow-x: 42%;
    --glow-y: 44%;
    --cone-angle: 95deg;
}

.contact {
    --glow-x: 30%;
    --glow-y: 58%;
    --cone-angle: 70deg;
}

.section .container {
    z-index: 1;
}

.section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
    column-gap: clamp(28px, 6vw, 90px);
    row-gap: 12px;
    align-items: end;
    text-align: left;
}

.section-tag {
    width: max-content;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.075);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.section-tag::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: #ff9ffc;
    box-shadow: 0 0 18px rgba(255,159,252,0.68);
    vertical-align: 1px;
}

.section-header h2 {
    max-width: 760px;
    font-size: clamp(2.2rem, 4.4vw, 4.9rem);
    line-height: 0.98;
    letter-spacing: 0;
    text-wrap: balance;
}

.section-header .gradient-text,
.gradient-text {
    background: linear-gradient(90deg, #ffffff 0%, #ff9ffc 42%, #8c6cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.section-desc {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 420px;
    margin: 0 0 6px;
    color: rgba(255,255,255,0.60);
    line-height: 1.8;
    text-wrap: pretty;
}

.about-grid,
.contact-grid {
    gap: clamp(26px, 4vw, 54px);
}

.about-text {
    color: rgba(255,255,255,0.72);
}

.about .about-grid {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}

.about-text > p {
    max-width: 100%;
    margin-bottom: 18px;
}

.about-card,
.service-card,
.cert-card,
.role-card,
.partner-logo,
.contact-item,
.map-placeholder,
.about-img-placeholder,
.cert-tab,
.cert-modal-content,
.footer-social a {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12), transparent 38%),
        rgba(255,255,255,0.068);
    border: 1px solid rgba(255,255,255,0.13);
    border-top-color: rgba(255,255,255,0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 54px rgba(0,0,0,0.20);
}

.about-card,
.service-card,
.cert-card,
.role-card,
.partner-logo,
.contact-item,
.map-placeholder,
.about-img-placeholder {
    --card-glow-x: 50%;
    --card-glow-y: 50%;
    --card-glow-intensity: 0;
    --card-glow-radius: 220px;
    position: relative;
    overflow: hidden;
}

.about-card,
.service-card,
.cert-card,
.role-card,
.contact-item,
.map-placeholder,
.about-img-placeholder {
    border-radius: 16px;
}

.partner-logo,
.cert-tab,
.footer-social a {
    border-radius: 12px;
}

.about-card::before,
.service-card::before,
.cert-card::before,
.role-card::before,
.partner-logo::before,
.contact-item::before,
.map-placeholder::before,
.about-img-placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    pointer-events: none;
}

.about-card::after,
.service-card::after,
.cert-card::after,
.role-card::after,
.partner-logo::after,
.contact-item::after,
.map-placeholder::after,
.about-img-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    background:
        radial-gradient(
            var(--card-glow-radius) circle at var(--card-glow-x) var(--card-glow-y),
            rgba(132, 0, 255, calc(var(--card-glow-intensity) * 0.82)) 0%,
            rgba(255, 159, 252, calc(var(--card-glow-intensity) * 0.40)) 34%,
            transparent 64%
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: calc(0.28 + var(--card-glow-intensity) * 0.72);
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.about-card > *,
.service-card > *,
.cert-card > *,
.role-card > *,
.partner-logo > *,
.contact-item > *,
.map-placeholder > *,
.about-img-placeholder > * {
    position: relative;
    z-index: 2;
}

.about-card:hover,
.service-card:hover,
.cert-card:hover,
.role-card:hover,
.partner-logo:hover,
.contact-item:hover,
.footer-social a:hover {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 42%),
        rgba(255,255,255,0.105);
    border-color: rgba(132,0,255,0.80);
    transform: translateY(-4px);
    box-shadow:
        0 18px 58px rgba(82,39,255,0.24),
        0 0 34px rgba(132,0,255,0.20);
}

.contact-item:hover {
    transform: translateY(-2px);
}

.about-card i,
.service-icon,
.role-icon,
.contact-icon,
.cert-card .cert-icon,
.map-placeholder i,
.about-img-placeholder i,
.footer-contact i {
    color: #ff9ffc;
}

.about-card i,
.map-placeholder i {
    background: linear-gradient(90deg, #ff9ffc, #8c6cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-icon,
.role-icon,
.contact-icon,
.cert-card .cert-icon {
    background: rgba(255,255,255,0.075);
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.cert-card:hover .cert-icon {
    background: rgba(255,159,252,0.14);
    color: #fff;
}

.about-card h4,
.service-card h4,
.role-card h4,
.contact-item h4,
.cert-card h4 {
    color: rgba(255,255,255,0.94);
}

.about-card p,
.service-card p,
.role-card p,
.contact-item p,
.contact-item a,
.cert-card p,
.partner-logo small,
.map-placeholder small {
    color: rgba(255,255,255,0.56);
}

.contact-item a:hover,
.footer-links a:hover,
.footer-icp a:hover {
    color: #ff9ffc;
}

.cert-tabs {
    justify-content: flex-start;
    margin-bottom: 22px;
}

.cert-tab {
    border-radius: 12px;
    color: rgba(255,255,255,0.66);
}

.cert-tab:hover,
.cert-tab.active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,159,252,0.42);
    color: #fff;
    box-shadow: 0 14px 42px rgba(82,39,255,0.22);
}

.cert-panels {
    scrollbar-color: rgba(255,159,252,0.62) rgba(255,255,255,0.08);
}

.cert-panels::-webkit-scrollbar-thumb {
    background: rgba(255,159,252,0.62);
}

.cert-badge,
.qual-badge {
    border-radius: 10px;
    background: rgba(255,255,255,0.075);
    color: #ff9ffc;
    border-color: rgba(255,159,252,0.24);
}

.cert-card:hover .cert-badge {
    background: rgba(255,159,252,0.13);
    border-color: rgba(255,159,252,0.42);
}

.services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 238px;
    gap: 16px;
    align-items: stretch;
}

.service-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.service-card h4 {
    margin-top: auto;
}

.service-icon {
    margin-bottom: 42px;
}

.team-roles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.role-card {
    min-height: 206px;
}

.partners-content {
    width: min(980px, 100%);
}

.partner-logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.partner-logo {
    min-width: 0;
    min-height: 128px;
    justify-content: center;
}

.partner-logo-img {
    width: min(148px, 100%);
    height: 54px;
    padding: 8px 12px;
    margin-bottom: 8px;
    display: block;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,255,255,0.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 10px 24px rgba(0,0,0,0.18);
}

.partner-logo span {
    color: rgba(255,255,255,0.90);
}

.contact-info {
    gap: 14px;
}

.contact-item {
    align-items: center;
}

.map-placeholder {
    background:
        radial-gradient(circle at 50% 22%, rgba(255,159,252,0.18), transparent 42%),
        radial-gradient(circle at 50% 74%, rgba(82,39,255,0.16), transparent 48%),
        rgba(255,255,255,0.068);
}

.footer {
    background:
        radial-gradient(circle at 20% 0%, rgba(82,39,255,0.22), transparent 36%),
        rgba(5,3,13,0.82);
    border-top-color: rgba(255,255,255,0.13);
}

.footer-grid {
    border-bottom-color: rgba(255,255,255,0.10);
}

.footer-logo {
    background: linear-gradient(90deg, #ff9ffc, #8c6cff);
    -webkit-background-clip: text;
}

.footer-social a:hover {
    color: #fff;
}

.back-to-top {
    background: rgba(255,255,255,0.075);
    border-color: rgba(255,255,255,0.13);
    border-radius: 12px;
}

.pill.nav-cta,
.pill.nav-cta.active {
    background: rgba(255,255,255,0.96);
    color: #15141d;
}

.pill.nav-cta.active::after {
    display: none;
}

.pill.nav-cta.active .pill-label {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.pill.nav-cta.active .pill-label-hover {
    opacity: 0 !important;
    transform: translateY(64px) !important;
}

.cert-modal-backdrop {
    background: rgba(5,3,13,0.86);
}

.cert-modal-content {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,159,252,0.14), transparent 42%),
        rgba(12,8,24,0.98);
}

.cert-modal-close {
    border-radius: 12px;
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(6) {
        grid-column: auto;
    }

    .partner-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .section-header {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .section-desc {
        grid-column: auto;
        grid-row: auto;
        max-width: 100%;
        margin: 0;
    }

    .section-header h2 {
        font-size: clamp(2rem, 11vw, 3.7rem);
    }

    .cert-tabs {
        justify-content: flex-start;
    }

    .team-roles,
    .partner-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .hero-title {
        font-size: clamp(2.35rem, 12.8vw, 3.35rem);
        line-height: 1.02;
    }

    .hero-title .gradient-text {
        white-space: nowrap;
    }

    .about-card-grid,
    .services-grid,
    .team-roles,
    .partner-logos {
        grid-template-columns: 1fr;
    }

    .cert-tab {
        width: 100%;
    }
}

/* ============================================
   Qualification certificate swap stage
   ============================================ */
.qualifications > .container {
    max-height: none;
}

.qualifications .section-header {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 30px;
}

.qualifications .section-desc,
.qualifications .cert-tabs {
    display: none;
}

.qualification-showcase {
    display: grid;
    grid-template-columns: minmax(400px, 0.86fr) minmax(460px, 1.14fr);
    gap: clamp(28px, 4.5vw, 66px);
    align-items: start;
    position: relative;
    z-index: 1;
}

.qualification-showcase-list {
    grid-template-columns: minmax(0, 1fr);
}

.qualification-showcase-list .qualification-copy {
    width: min(980px, 100%);
}

.qualification-copy {
    min-width: 0;
}

.qualification-copy .cert-panels {
    position: relative;
    z-index: 2;
}

.qualification-copy .cert-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-height: min(50dvh, 520px);
    min-height: min(42dvh, 430px);
    padding: 2px 8px 2px 2px;
}

.qualification-copy .cert-panel,
.qualification-copy .cert-panel.active,
.qualification-copy .cert-grid {
    display: contents;
}

.qualification-copy .cert-card {
    min-height: 132px;
    padding: 18px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    text-align: left;
    align-content: start;
}

.qualification-copy .cert-card .cert-icon {
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
    margin: 0;
}

.qualification-copy .cert-card h4 {
    margin: 0 0 6px;
    font-size: 0.9rem;
    line-height: 1.35;
}

.qualification-copy .cert-card p {
    margin: 0 0 10px;
}

.qualification-copy .cert-card .cert-badge {
    width: max-content;
    align-self: end;
}

.qualification-copy .cert-card h4 {
    overflow-wrap: anywhere;
    word-break: normal;
}

.cert-swap-area {
    position: relative;
    min-height: clamp(420px, 56dvh, 650px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-self: stretch;
    overflow: visible;
}

.cert-swap-caption,
.cert-swap-hint {
    width: min(600px, 100%);
    margin-left: auto;
    position: relative;
    z-index: 4;
}

.cert-swap-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    color: rgba(255,255,255,0.58);
    font-size: 0.84rem;
}

.cert-swap-caption strong {
    color: rgba(255,255,255,0.92);
    font-weight: 700;
}

.cert-swap-stage {
    position: relative;
    width: min(600px, 100%);
    min-height: 100%;
    margin-left: auto;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: visible;
}

.cert-swap-stage::before {
    content: "";
    position: absolute;
    inset: 12% -8% 4% 20%;
    border-radius: 24px;
    background:
        radial-gradient(circle at 44% 34%, rgba(255,159,252,0.22), transparent 36%),
        radial-gradient(circle at 66% 62%, rgba(82,39,255,0.24), transparent 42%);
    filter: blur(24px);
    opacity: 0.9;
    pointer-events: none;
}

.cert-swap-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(500px, 82vw);
    height: clamp(360px, 52dvh, 590px);
    min-height: 0;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.16);
    border-top-color: rgba(255,255,255,0.28);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 36%),
        linear-gradient(180deg, rgba(31,25,50,0.94), rgba(12,8,24,0.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 26px 72px rgba(0,0,0,0.36),
        0 0 42px rgba(82,39,255,0.14);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cert-swap-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
    pointer-events: none;
    z-index: 2;
}

.cert-swap-preview {
    flex: 1;
    min-height: 0;
    margin: 16px 16px 0;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(232,226,248,0.94));
    overflow: hidden;
    position: relative;
}

.cert-swap-canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #f7f4ee;
}

.cert-swap-preview.is-loading .cert-swap-canvas {
    opacity: 0;
}

.cert-swap-preview.is-ready .cert-swap-canvas {
    opacity: 1;
}

.cert-swap-preview-fallback {
    position: absolute;
    inset: 0;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(12,8,24,0.72);
    text-align: center;
    padding: 28px;
}

.cert-swap-preview-fallback i {
    display: block;
    color: #5227ff;
    font-size: 2.2rem;
    margin-bottom: 14px;
}

.cert-swap-preview.is-ready .cert-swap-preview-fallback {
    opacity: 0;
    pointer-events: none;
}

.cert-swap-meta {
    padding: 16px 18px 18px;
    display: grid;
    gap: 10px;
}

.cert-swap-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255,159,252,0.9);
    font-size: 0.76rem;
    font-weight: 700;
}

.cert-swap-index {
    color: rgba(255,255,255,0.48);
    font-family: var(--font-en);
}

.cert-swap-card h3 {
    margin: 0;
    color: rgba(255,255,255,0.94);
    font-size: clamp(1rem, 1.4vw, 1.24rem);
    line-height: 1.35;
    letter-spacing: 0;
}

.cert-swap-card p {
    color: rgba(255,255,255,0.58);
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

.cert-swap-open {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,159,252,0.13);
    border: 1px solid rgba(255,159,252,0.24);
    font-size: 0.78rem;
    font-weight: 700;
}

.cert-swap-hint {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    color: rgba(255,255,255,0.50);
    font-size: 0.82rem;
}

.cert-swap-hint i {
    color: #ff9ffc;
}

.cert-card.is-previewed {
    border-color: rgba(255,159,252,0.58);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 18px 52px rgba(82,39,255,0.28);
}

@media (max-width: 1024px) {
    .qualification-showcase {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .qualification-copy .cert-panels {
        max-height: 44dvh;
        min-height: 0;
    }

    .cert-swap-area {
        min-height: 500px;
    }

    .cert-swap-caption,
    .cert-swap-stage,
    .cert-swap-hint {
        margin-left: 0;
        width: min(560px, 100%);
    }
}

@media (max-width: 768px) {
    .qualification-copy .cert-panels {
        grid-template-columns: 1fr;
        max-height: 42dvh;
    }

    .cert-swap-area {
        min-height: 430px;
    }

    .cert-swap-card {
        width: min(350px, 78vw);
        height: 370px;
    }

    .cert-swap-preview {
        margin: 12px 12px 0;
    }
}

@media (max-width: 560px) {
    .cert-swap-area {
        min-height: 390px;
    }

    .cert-swap-caption,
    .cert-swap-hint {
        display: none;
    }

    .cert-swap-stage {
        width: 100%;
    }

    .cert-swap-card {
        width: min(310px, 76vw);
        height: 340px;
    }

    .cert-swap-card h3 {
        font-size: 0.98rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cert-swap-card {
        transition: none;
    }
}

/* ============================================
   Qualification honors redesign
   ============================================ */
.qualifications {
    padding: clamp(92px, 11vw, 136px) 0 clamp(88px, 10vw, 128px);
    background:
        radial-gradient(circle at 10% 20%, rgba(255,207,109,0.13), transparent 30%),
        radial-gradient(circle at 82% 14%, rgba(0,200,255,0.16), transparent 32%),
        radial-gradient(circle at 76% 78%, rgba(82,39,255,0.18), transparent 34%),
        linear-gradient(180deg, #08131f 0%, #0c2032 52%, #081521 100%);
}

.section.qualifications::before {
    background:
        linear-gradient(115deg, rgba(255,255,255,0.08), transparent 22%, rgba(0,200,255,0.08) 58%, transparent 76%),
        radial-gradient(ellipse 62% 46% at 66% 24%, rgba(0,200,255,0.12), transparent 70%);
}

.qualifications .section-header.qualification-header {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
    align-items: end;
    margin-bottom: 26px;
}

.qualifications .section-header.qualification-header .section-desc {
    display: block;
    color: rgba(255,255,255,0.68);
}

.qualifications [data-aos] {
    opacity: 1;
    transform: none;
}

.qualification-command {
    display: grid;
    grid-template-columns: minmax(340px, 0.95fr) minmax(420px, 1.05fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 24px;
}

.qualification-metrics,
.qualifications .cert-tabs {
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.055)),
        rgba(8,19,31,0.52);
    border: 1px solid rgba(255,255,255,0.14);
    border-top-color: rgba(255,255,255,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 54px rgba(0,0,0,0.20);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.qualification-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: 16px;
}

.qualification-metric {
    min-width: 0;
    padding: 18px 16px;
    background: rgba(255,255,255,0.035);
}

.qualification-metric strong {
    display: block;
    color: #fff;
    font-family: var(--font-en);
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.qualification-metric span {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 0.78rem;
    line-height: 1.35;
}

.qualifications .cert-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border-radius: 16px;
}

.qualifications .cert-tab {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.70);
    font-weight: 700;
    line-height: 1.2;
    transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.qualifications .cert-tab:hover {
    transform: translateY(-1px);
}

.qualifications .cert-tab.active {
    background: linear-gradient(135deg, rgba(255,207,109,0.22), rgba(0,200,255,0.18));
    border-color: rgba(255,207,109,0.40);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0,200,255,0.16);
}

.qualification-showcase,
.qualification-showcase-list,
.qualification-showcase-list .qualification-copy {
    width: 100%;
}

.qualification-showcase-list .qualification-copy {
    width: 100%;
}

.qualification-copy .cert-panels {
    display: block;
    max-height: none;
    min-height: 512px;
    overflow: visible;
    padding: 0;
    scrollbar-width: auto;
    transition: min-height 0.28s ease;
}

.qualification-copy .cert-panel,
.qualification-copy .cert-panel.active,
.qualification-copy .cert-grid {
    display: block;
}

.qualification-copy .cert-panel {
    display: none;
}

.qualification-copy .cert-panel.active {
    display: grid;
    gap: 15px;
    margin-bottom: 22px;
}

.qualification-copy .cert-panels.is-filter-all .cert-panel.active {
    gap: 0;
    margin-bottom: 16px;
}

.qualification-copy .cert-panel.active:last-child {
    margin-bottom: 0;
}

.qualification-copy .cert-panel::before {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    color: rgba(255,255,255,0.76);
    font-size: 0.82rem;
    font-weight: 800;
}

.qualification-copy #tab-high-tech::before {
    content: "浼佷笟璧勮川璁よ瘉";
}

.qualification-copy #tab-patent::before {
    content: "瀹炵敤鏂板瀷涓撳埄";
}

.qualification-copy #tab-software::before {
    content: "杞欢钁椾綔鏉?;
}

.qualification-copy .cert-panels.is-filter-all .cert-panel::before {
    display: none;
}

.qualification-copy .cert-panel.active > .cert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.qualification-copy .cert-card {
    min-height: 160px;
    padding: 20px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 15px;
    align-content: start;
    text-align: left;
    border-radius: 16px;
    background:
        radial-gradient(circle at var(--card-glow-x, 50%) var(--card-glow-y, 0%), rgba(255,207,109,0.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.055)),
        rgba(8,19,31,0.58);
    border-color: rgba(255,255,255,0.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 42px rgba(0,0,0,0.18);
}

.qualification-copy .cert-card[hidden],
.qualification-copy .cert-card.is-paged-out {
    display: none !important;
}

.qualification-copy .cert-card:hover,
.qualification-copy .cert-card.is-previewed {
    border-color: rgba(255,207,109,0.48);
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 22px 56px rgba(0,0,0,0.24),
        0 0 34px rgba(0,200,255,0.13);
}

.qualification-copy .cert-card:focus-visible {
    outline: 2px solid rgba(255,207,109,0.74);
    outline-offset: 3px;
}

.qualification-copy .cert-card .cert-icon {
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,207,109,0.16), rgba(0,200,255,0.10)),
        rgba(255,255,255,0.07);
    color: #ffcf6d;
}

.qualification-copy .cert-card h4 {
    margin: 0 0 8px;
    color: rgba(255,255,255,0.96);
    font-size: 0.98rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.qualification-copy .cert-card p {
    margin: 0 0 14px;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
}

.qualification-copy .cert-card .cert-badge {
    align-self: end;
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 7px 11px;
    border-radius: 10px;
    color: #fff;
    background: rgba(0,200,255,0.10);
    border-color: rgba(0,200,255,0.22);
}

.qualification-copy .cert-card .cert-badge::after {
    content: "\f06e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72rem;
    color: #ffcf6d;
}

.cert-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.080), rgba(255,255,255,0.040)),
        rgba(8,19,31,0.42);
    border: 1px solid rgba(255,255,255,0.115);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 32px rgba(0,0,0,0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cert-pagination[hidden] {
    display: none;
}

.cert-page-status {
    flex: 0 0 auto;
    color: rgba(255,255,255,0.58);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.cert-page-list {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.cert-page-btn {
    min-width: 34px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.055);
    color: rgba(255,255,255,0.72);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.cert-page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255,207,109,0.36);
    color: #fff;
    background: rgba(255,207,109,0.12);
}

.cert-page-btn.active {
    border-color: rgba(255,207,109,0.48);
    color: #fff;
    background: linear-gradient(135deg, rgba(255,207,109,0.22), rgba(0,200,255,0.16));
    box-shadow: 0 10px 26px rgba(0,200,255,0.14);
}

.cert-page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.cert-page-nav {
    min-width: 68px;
}

.cert-modal-content {
    max-width: min(1180px, calc(100vw - 32px));
    max-height: min(92vh, 980px);
    border-radius: 18px;
    background:
        radial-gradient(circle at 14% 0%, rgba(255,207,109,0.14), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(0,200,255,0.16), transparent 38%),
        rgba(9,18,30,0.98);
}

.cert-modal-header {
    min-height: 62px;
    padding: 14px 18px 14px 22px;
}

.cert-modal-title {
    padding-right: 14px;
    font-size: clamp(1rem, 1.8vw, 1.24rem);
    line-height: 1.35;
    text-wrap: balance;
}

.cert-modal-close {
    flex: 0 0 auto;
}

.cert-modal-body {
    overflow: hidden;
    padding: 16px;
    gap: 12px;
    justify-items: stretch;
}

.cert-modal-intro {
    width: 100%;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.055)),
        rgba(255,255,255,0.04);
}

.cert-modal-category {
    flex: 0 0 auto;
    margin: 0;
    color: #ffcf6d;
    background: rgba(255,207,109,0.10);
    border-color: rgba(255,207,109,0.24);
}

.cert-modal-meta {
    max-width: none;
    margin: 0;
    color: rgba(255,255,255,0.66);
    font-size: 0.86rem;
}

.cert-modal-preview {
    width: 100%;
    min-height: min(68vh, 760px);
    max-height: calc(92vh - 158px);
    overflow: auto;
    align-items: start;
    justify-items: center;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #eef3f7, #dfe7ee);
}

.cert-modal-pages {
    width: 100%;
    display: grid;
    gap: 18px;
    justify-items: center;
    padding: clamp(12px, 2.4vw, 24px);
}

.cert-modal-page {
    width: max-content;
    max-width: 100%;
    margin: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(19,31,45,0.24);
    overflow: hidden;
}

.cert-modal-page-canvas {
    max-width: 100%;
    height: auto !important;
    display: block;
    background: #fff;
}

.cert-modal-page-image {
    width: min(100%, 1120px);
    height: auto;
    display: block;
    background: #fff;
}

.cert-modal-page figcaption {
    padding: 8px 12px 10px;
    color: rgba(19,31,45,0.62);
    background: #fff;
    border-top: 1px solid rgba(19,31,45,0.08);
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}

.cert-modal-preview canvas#certModalCanvas {
    display: none;
}

.cert-modal-original {
    justify-self: end;
    background: rgba(255,207,109,0.10);
    border-color: rgba(255,207,109,0.24);
}

@media (max-width: 1024px) {
    .qualifications .section-header.qualification-header,
    .qualification-command {
        grid-template-columns: 1fr;
    }

    .qualification-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .qualifications .cert-tabs {
        justify-content: flex-start;
    }

    .qualification-copy .cert-panel.active > .cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qualification-copy .cert-panels {
        min-height: 824px;
    }
}

@media (max-width: 680px) {
    .qualifications {
        padding-top: 86px;
    }

    .qualification-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qualification-metric {
        padding: 15px 14px;
    }

    .qualifications .cert-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qualifications .cert-tab {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .qualification-copy .cert-panel.active > .cert-grid {
        grid-template-columns: 1fr;
    }

    .qualification-copy .cert-panels {
        min-height: 1424px;
    }

    .qualification-copy .cert-card {
        min-height: 144px;
        padding: 17px;
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .qualification-copy .cert-card .cert-icon {
        width: 42px;
        height: 42px;
    }

    .cert-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .cert-page-list {
        width: 100%;
        justify-content: flex-start;
    }

    .cert-modal {
        padding: 8px;
    }

    .cert-modal-content {
        max-width: calc(100vw - 16px);
        max-height: 94vh;
        border-radius: 14px;
    }

    .cert-modal-header {
        padding: 12px 12px 12px 14px;
    }

    .cert-modal-body {
        padding: 10px;
    }

    .cert-modal-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .cert-modal-preview {
        min-height: 62vh;
        max-height: calc(94vh - 174px);
    }
}

/* ============================================
   Non-home layout and palette refinement
   ============================================ */
.section:not(.hero) {
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 42%), rgba(114,78,255,0.24), transparent 36%),
        radial-gradient(circle at calc(var(--glow-x, 50%) + 18%) calc(var(--glow-y, 42%) + 20%), rgba(255,159,252,0.105), transparent 32%),
        radial-gradient(circle at 10% 88%, rgba(0,200,255,0.055), transparent 32%),
        linear-gradient(180deg, #070414 0%, #05030d 54%, #030209 100%);
}

.section:not(.hero)::before {
    background:
        conic-gradient(from var(--cone-angle, 115deg) at var(--glow-x, 50%) var(--glow-y, 44%), rgba(82,39,255,0), rgba(114,78,255,0.26), rgba(255,159,252,0.16), rgba(82,39,255,0)),
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 44%), rgba(255,255,255,0.075), transparent 30%);
    opacity: 0.48;
}

.section:not(.hero)::after {
    background:
        linear-gradient(90deg, rgba(5,3,13,0.76) 0%, rgba(5,3,13,0.10) 46%, rgba(5,3,13,0.78) 100%),
        linear-gradient(180deg, rgba(5,3,13,0.04), rgba(5,3,13,0.66));
}

.qualifications {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,207,109,0.09), transparent 28%),
        radial-gradient(circle at 84% 16%, rgba(0,200,255,0.10), transparent 30%),
        radial-gradient(circle at 72% 76%, rgba(114,78,255,0.22), transparent 34%),
        linear-gradient(180deg, #070414 0%, #06121f 54%, #030209 100%);
}

.qualifications::before {
    background:
        linear-gradient(115deg, rgba(255,255,255,0.065), transparent 22%, rgba(0,200,255,0.065) 58%, transparent 76%),
        radial-gradient(ellipse 62% 46% at 66% 24%, rgba(114,78,255,0.16), transparent 70%);
}

.section.services {
    background:
        radial-gradient(circle at 16% 18%, rgba(0,200,255,0.08), transparent 28%),
        radial-gradient(circle at 78% 62%, rgba(255,159,252,0.12), transparent 34%),
        linear-gradient(180deg, #060512 0%, #05030d 58%, #030209 100%);
}

.team {
    background:
        radial-gradient(circle at 22% 72%, rgba(255,159,252,0.12), transparent 32%),
        radial-gradient(circle at 78% 26%, rgba(114,78,255,0.18), transparent 34%),
        linear-gradient(180deg, #070414 0%, #05030d 60%, #030209 100%);
}

.contact,
.footer {
    background:
        radial-gradient(circle at 16% 6%, rgba(114,78,255,0.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(255,159,252,0.08), transparent 32%),
        linear-gradient(180deg, #060512 0%, #05030d 74%, #030209 100%);
}

.section-header {
    margin-bottom: clamp(34px, 5vw, 62px);
}

.about .about-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
}

.about-text {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(330px, 0.68fr);
    grid-template-rows: auto auto;
    gap: 22px clamp(28px, 5vw, 76px);
    align-items: stretch;
    position: relative;
}

.about-text::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 100%;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)),
        rgba(10,7,24,0.54);
    border: 1px solid rgba(255,255,255,0.13);
    border-top-color: rgba(255,255,255,0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        0 22px 64px rgba(0,0,0,0.22);
}

.about-text > p {
    grid-column: 1;
    position: relative;
    z-index: 1;
    max-width: 62ch;
    margin: 0;
    padding-inline: clamp(22px, 3vw, 36px);
    color: rgba(255,255,255,0.72);
    font-size: clamp(1rem, 1.3vw, 1.08rem);
    line-height: 1.95;
    text-wrap: pretty;
}

.about-text > p:first-child {
    grid-row: 1;
    align-self: end;
    padding-top: clamp(28px, 3.5vw, 42px);
}

.about-text > p:nth-child(2) {
    grid-row: 2;
    align-self: start;
    padding-bottom: clamp(28px, 3.5vw, 42px);
}

.about-card-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: stretch;
}

.about-card {
    min-height: 164px;
    padding: 26px 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.about-card:nth-child(1),
.about-card:nth-child(4) {
    transform: translateY(18px);
}

.about-card:hover:nth-child(1),
.about-card:hover:nth-child(4) {
    transform: translateY(12px);
}

.about-card i {
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,159,252,0.15), rgba(140,108,255,0.09)),
        rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    -webkit-text-fill-color: currentColor;
}

.about-card h4 {
    margin-bottom: 8px;
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
}

.partners {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,159,252,0.12), transparent 32%),
        radial-gradient(circle at 76% 54%, rgba(114,78,255,0.24), transparent 38%),
        radial-gradient(circle at 22% 88%, rgba(0,200,255,0.06), transparent 28%),
        linear-gradient(180deg, #070414 0%, #05030d 56%, #030209 100%);
}

.partners-content {
    width: 100%;
    display: block;
    position: relative;
}

.partners-content::before {
    display: none;
}

.partners-content::after {
    display: none;
}

.partner-logos {
    grid-column: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-content: stretch;
}

.partner-logo {
    grid-column: span 1;
    min-height: 118px;
    padding: 18px 14px;
}

.partner-logo-img {
    width: min(158px, 100%);
    height: 52px;
    margin-bottom: 12px;
}

.partner-logo[hidden] {
    display: none !important;
}

.partner-pagination[hidden] {
    display: none !important;
}

.partner-pagination {
    width: max-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045)),
        rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 36px rgba(0,0,0,0.18);
}

.partner-page-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.partner-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.76);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.partner-page-btn:hover:not(:disabled),
.partner-page-btn.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255,207,109,0.22), rgba(0,200,255,0.15));
    border-color: rgba(255,207,109,0.42);
    transform: translateY(-1px);
}

.partner-page-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.partner-page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.partner-page-status {
    min-width: 44px;
    color: rgba(255,255,255,0.58);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 1180px) {
    .partners-content {
        grid-template-columns: 1fr;
    }

    .partners-content::before,
    .partners-content::after {
        display: none;
    }

    .partner-logos {
        grid-column: auto;
    }
}

@media (max-width: 1024px) {
    .about-text {
        grid-template-columns: 1fr;
    }

    .about-text::before,
    .about-text > p,
    .about-card-grid {
        grid-column: 1;
    }

    .about-text::before {
        grid-row: 1 / span 2;
    }

    .about-card-grid {
        grid-row: 3;
    }

    .about-card:nth-child(1),
    .about-card:nth-child(4),
    .about-card:hover:nth-child(1),
    .about-card:hover:nth-child(4) {
        transform: none;
    }
}

@media (max-width: 860px) {
    .partner-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partner-logo,
    .partner-logo:nth-child(1),
    .partner-logo:nth-child(2),
    .partner-logo:nth-child(3),
    .partner-logo:nth-child(4),
    .partner-logo:nth-child(5),
    .partner-logo:nth-child(6),
    .partner-logo:nth-child(7),
    .partner-logo:nth-child(n + 8) {
        grid-column: auto;
        min-height: 124px;
    }
}

@media (max-width: 560px) {
    .about-text > p {
        padding-inline: 20px;
    }

    .about-card-grid,
    .partner-logos {
        grid-template-columns: 1fr;
    }

    .partner-logo,
    .partner-logo:nth-child(1),
    .partner-logo:nth-child(2),
    .partner-logo:nth-child(3) {
        min-height: 118px;
    }
}

/* Refined About metric cards */
.about .about-card-grid {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,159,252,0.16), transparent 34%),
        radial-gradient(circle at 88% 78%, rgba(117,88,255,0.16), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 28px 74px rgba(0,0,0,0.24);
    overflow: hidden;
}

.about .about-card-grid::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 20px;
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255,255,255,0.08) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(255,255,255,0.08) 50%, transparent calc(50% + 0.5px));
    pointer-events: none;
}

.about .about-card {
    min-height: 174px;
    padding: 22px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)),
        rgba(8,6,18,0.42);
    border: 1px solid rgba(255,255,255,0.10);
    border-top-color: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    text-align: left;
    justify-content: space-between;
    transform: none;
}

.about .about-card:hover,
.about .about-card:hover:nth-child(1),
.about .about-card:hover:nth-child(4) {
    transform: translateY(-3px);
    border-color: rgba(255,159,252,0.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 18px 46px rgba(102,68,180,0.20);
}

.about .about-card i {
    width: 42px;
    height: 42px;
    margin: 0 0 18px;
    font-size: 1.22rem;
}

.about .about-card h4 {
    margin: 0 0 8px;
    color: rgba(255,255,255,0.94);
    font-size: clamp(1.14rem, 1.75vw, 1.46rem);
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

.about .about-card p {
    margin: 0;
    color: rgba(255,255,255,0.58);
    font-size: 0.92rem;
    line-height: 1.65;
}

@media (max-width: 1024px) {
    .about .about-card-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto;
    }
}

@media (max-width: 560px) {
    .about .about-card-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .about .about-card-grid::before {
        display: none;
    }

    .about .about-card {
        grid-column: auto;
        min-height: 132px;
        padding: 20px;
    }
}

/* ============================================
   Homepage background-toned refinement
   ============================================ */
:root {
    --primary: #11231c;
    --primary-light: #244333;
    --primary-dark: #07130f;
    --accent-1: #2f6f55;
    --accent-2: #f4c36b;
    --accent-3: #d96d28;
    --gradient-main: linear-gradient(135deg, #2f6f55 0%, #f4c36b 100%);
    --gradient-warm: linear-gradient(135deg, #d96d28 0%, #f4c36b 100%);
    --gradient-hero: linear-gradient(180deg, #edf2ee 0%, #f7e8d9 46%, #123b2a 100%);
    --glass-bg: rgba(255,255,255,0.18);
    --glass-border: rgba(255,255,255,0.46);
    --glass-hover: rgba(255,255,255,0.32);
    --card-bg: rgba(255,255,255,0.12);
    --card-border: rgba(255,255,255,0.24);
    --shadow-glow: 0 18px 56px rgba(47,111,85,0.24);
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(244,195,107,0.14), transparent 34%),
        radial-gradient(circle at 78% 22%, rgba(47,111,85,0.16), transparent 36%),
        linear-gradient(180deg, #f3eadf 0%, #10241c 52%, #07130f 100%);
}

.pill-nav-container {
    width: min(1180px, calc(100% - 72px));
}

.pill-nav,
.navbar.scrolled .pill-nav {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.64)),
        rgba(248,244,237,0.58);
    border-color: rgba(255,255,255,0.82);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(90,118,150,0.08),
        0 20px 56px rgba(42,62,86,0.15);
}

.pill-nav::before {
    background:
        radial-gradient(420px 130px at 50% -34%, rgba(255,255,255,0.82), transparent 72%),
        linear-gradient(90deg, transparent, rgba(244,195,107,0.20), transparent);
}

.pill-logo,
.pill,
.pill .pill-label-hover {
    color: rgba(20,36,31,0.82);
}


.pill:hover {
    color: rgba(14,28,23,0.94);
    background: rgba(255,255,255,0.52);
}

.pill.nav-link.active {
    color: rgba(14,28,23,0.98);
}

.pill.nav-link.active::after {
    background: #d96d28;
    box-shadow: 0 0 0 4px rgba(217,109,40,0.12);
}

.pill .hover-circle {
    background: rgba(244,195,107,0.28);
}

.pill.nav-cta {
    color: #18304a;
    background:
        linear-gradient(135deg, #f4f9ff 0%, #dcecff 100%);
    border: 1px solid rgba(135,171,210,0.44);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        0 12px 26px rgba(63,96,132,0.16);
}

.pill.nav-cta .pill-label-hover {
    color: #18304a;
}

.mobile-menu-popover {
    background: rgba(246,250,255,0.96);
    border-color: rgba(255,255,255,0.72);
    box-shadow: 0 18px 48px rgba(42,62,86,0.16);
}

.mobile-menu-link {
    color: rgba(20,36,31,0.72);
}

.mobile-menu-link:hover,
.mobile-menu-link.active,
.mobile-menu-link.nav-cta-mobile {
    color: #18304a;
    background: linear-gradient(135deg, #f4f9ff 0%, #dcecff 100%);
    box-shadow: inset 0 0 0 1px rgba(135,171,210,0.34);
}

.mobile-menu-button {
    background: rgba(255,255,255,0.52);
    border-color: rgba(255,255,255,0.72);
}

.hamburger-line {
    background: #284561;
}

@media (max-width: 768px) {
    .pill-nav-items.desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
    }

    .mobile-menu-button {
        display: flex !important;
    }
}

.hero {
    min-height: 100dvh;
    padding: calc(var(--nav-height) + 66px) 24px 96px;
    background: #edf2ee;
}

.hero-bg {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 42%, rgba(12,38,27,0.10) 100%),
        image-set(url("../images/hero-mountain-ai-safe-1920.webp") type("image/webp"), url("../images/hero-mountain-ai-safe.png") type("image/png")) center center / cover no-repeat;
}

.hero-bg::before {
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 25%, rgba(255,255,255,0.54), rgba(255,255,255,0.16) 34%, transparent 58%),
        radial-gradient(ellipse at 18% 63%, rgba(244,195,107,0.14), transparent 38%),
        radial-gradient(ellipse at 80% 70%, rgba(47,111,85,0.12), transparent 42%);
    opacity: 1;
}

.hero-light-vignette {
    background:
        linear-gradient(90deg, rgba(14,42,31,0.10) 0%, rgba(14,42,31,0.00) 30%, rgba(14,42,31,0.00) 70%, rgba(14,42,31,0.16) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 54%, rgba(8,24,18,0.26) 100%);
}

.hero-bg::after {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 45%, rgba(8,24,18,0.08) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(8,24,18,0.08));
}

.hero-content {
    width: min(1040px, 100%);
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(24px, 4vw, 42px);
    align-items: center;
    text-align: center;
}

.hero-copy {
    max-width: 820px;
    margin: 0 auto;
}

.hero-badge {
    border-radius: 999px;
    padding: 9px 18px;
    color: rgba(20,36,31,0.84);
    background: rgba(255,255,255,0.50);
    border-color: rgba(255,255,255,0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 10px 28px rgba(31,73,52,0.10);
}

.hero-badge i {
    color: #2f6f55;
}

.hero-title {
    color: #111724;
    font-size: clamp(3.3rem, 8.2vw, 7.2rem);
    line-height: 0.96;
    margin-bottom: 1.25rem;
    text-shadow: 0 12px 36px rgba(255,255,255,0.46);
}

.hero .gradient-text {
    background: linear-gradient(90deg, #14241f 0%, #2f6f55 48%, #d96d28 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-subtitle {
    margin: 0 auto 2.2rem;
    max-width: 720px;
    color: rgba(20,30,34,0.78);
    font-weight: 600;
    text-shadow: 0 2px 16px rgba(255,255,255,0.62);
}

.hero-actions {
    justify-content: center;
    margin-bottom: 0;
}

.hero .btn {
    min-height: 56px;
    border-radius: 999px;
    padding: 14px 28px;
}

.hero .btn-primary,
.btn-primary {
    color: #fbf8f1;
    background: linear-gradient(135deg, #183b2b 0%, #2f6f55 100%);
    box-shadow: 0 16px 42px rgba(31,73,52,0.26);
}

.hero .btn-primary:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 54px rgba(31,73,52,0.32);
}

.hero .btn-outline {
    color: #14241f;
    background: rgba(255,255,255,0.48);
    border-color: rgba(255,255,255,0.74);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.78),
        0 12px 32px rgba(31,73,52,0.10);
}

.hero .btn-outline:hover,
.btn-outline:hover {
    color: #10251b;
    border-color: rgba(47,111,85,0.34);
    background: rgba(255,255,255,0.66);
    transform: translateY(-2px);
}

.hero-stats {
    width: min(860px, 100%);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: 24px;
    background: rgba(255,255,255,0.30);
    border: 1px solid rgba(255,255,255,0.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        0 20px 58px rgba(18,48,34,0.16);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.stat-item {
    min-height: 82px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 12px 10px;
    text-align: center;
    border-radius: 17px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.28));
    border: 1px solid rgba(255,255,255,0.38);
}

.stat-num {
    color: #183b2b;
    font-size: 1.9rem;
    background: linear-gradient(90deg, #183b2b, #d96d28);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-label {
    color: rgba(20,36,31,0.62);
    font-weight: 700;
}

.hero-scroll {
    bottom: 26px;
    min-width: 142px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    color: rgba(255,255,255,0.86);
    background: rgba(24,51,38,0.44);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 12px 32px rgba(4,17,12,0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-scroll span {
    margin-bottom: 0;
    color: currentColor;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
}

.hero-scroll .scroll-arrow {
    color: currentColor;
}

@media (max-width: 900px) {
    .hero {
        padding: 104px 18px 88px;
    }

    .hero-title {
        max-width: 100%;
        font-size: clamp(2.8rem, 11vw, 4.6rem);
        overflow-wrap: anywhere;
    }

    .hero-subtitle {
        max-width: 640px;
    }

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(520px, 100%);
    }
}

@media (max-width: 560px) {
    .pill-nav-container {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(calc(100vw - 24px), 366px);
        max-width: 366px;
    }

    .hero {
        padding: 98px 16px 84px;
        justify-content: flex-start;
    }

    .hero-content {
        width: min(100%, 358px);
        max-width: 358px;
        justify-items: stretch;
        margin-right: auto;
    }

    .hero-title {
        font-size: clamp(2.35rem, 10.5vw, 3.15rem);
        line-height: 1.02;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .hero-title .gradient-text {
        display: inline;
        white-space: normal;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.72;
    }

    .hero-actions {
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .hero .btn {
        width: auto;
        min-width: 132px;
        flex: 0 1 auto;
        justify-content: center;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.92rem;
        gap: 8px;
    }

    .hero-stats {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr 1fr;
        border-radius: 18px;
        padding: 8px;
    }

    .stat-item {
        min-height: 78px;
        border-radius: 14px;
    }
}

html.mobile-compat .pill-nav-container {
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100vw - 24px), 640px);
    max-width: 640px;
    padding: 0;
}

html.mobile-compat .pill-nav {
    width: 100%;
    justify-content: space-between;
    min-height: 68px;
    padding: 10px 12px 10px 16px;
    border-radius: 22px;
}

html.mobile-compat .pill-nav-items.desktop-only {
    display: none !important;
}

html.mobile-compat .mobile-only {
    display: block !important;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

html.mobile-compat .mobile-menu-button {
    display: flex !important;
}

/* ============================================
   Continuous nature background for inner sections
   ============================================ */
:root {
    --page-white: #fffdf8;
    --page-cream: #f8f1e4;
    --page-mist: #ecf4ee;
    --page-green: #2f6f55;
    --page-green-deep: #173d2b;
    --page-grass: #78a85f;
    --page-gold: #f4c36b;
    --page-orange: #d96d28;
    --page-ink: #14241f;
    --text-primary: #14241f;
    --text-secondary: rgba(20,36,31,0.72);
    --text-muted: rgba(20,36,31,0.54);
    --glass-bg: rgba(255,255,255,0.66);
    --glass-border: rgba(47,111,85,0.16);
    --glass-hover: rgba(255,255,255,0.82);
    --card-bg: rgba(255,255,255,0.76);
    --card-border: rgba(47,111,85,0.14);
    --shadow-sm: 0 8px 24px rgba(31,73,52,0.08);
    --shadow-md: 0 18px 48px rgba(31,73,52,0.12);
    --shadow-lg: 0 26px 72px rgba(31,73,52,0.16);
    --shadow-glow: 0 20px 56px rgba(47,111,85,0.18);
}

body {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.95), transparent 18%),
        radial-gradient(circle at 74% 28%, rgba(255,255,255,0.88), transparent 20%),
        radial-gradient(circle at 82% 12%, rgba(244,195,107,0.13), transparent 28%),
        linear-gradient(180deg, #edf2ee 0%, var(--page-white) 22%, #fbfff7 58%, #edf7e6 100%);
    color: var(--page-ink);
}

body::after {
    opacity: 0.025;
    mix-blend-mode: multiply;
}

.section:not(.hero),
.footer {
    color: var(--page-ink);
    background:
        radial-gradient(ellipse at 14% 12%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.72) 13%, transparent 30%),
        radial-gradient(ellipse at 84% 18%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.58) 14%, transparent 31%),
        radial-gradient(circle at 76% 18%, transparent 0 25%, rgba(255,125,96,0.16) 25.2% 26.3%, rgba(255,194,83,0.15) 26.5% 27.6%, rgba(112,176,87,0.15) 27.8% 28.9%, rgba(75,145,214,0.13) 29.1% 30.2%, transparent 30.5%),
        linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.98) 46%, rgba(248,253,242,0.98) 74%, rgba(224,242,207,0.92) 100%) fixed !important;
    position: relative;
    overflow: hidden;
}

.section:not(.hero) {
    padding-top: clamp(84px, 9vw, 126px);
    padding-bottom: clamp(96px, 10vw, 142px);
}

.section:not(.hero)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 9% 22%, rgba(255,255,255,0.88) 0 4%, transparent 4.2%),
        radial-gradient(ellipse at 14% 20%, rgba(255,255,255,0.92) 0 6%, transparent 6.2%),
        radial-gradient(ellipse at 20% 23%, rgba(255,255,255,0.82) 0 4.8%, transparent 5%),
        radial-gradient(ellipse at 72% 14%, rgba(255,255,255,0.82) 0 5%, transparent 5.2%),
        radial-gradient(ellipse at 78% 12%, rgba(255,255,255,0.92) 0 7%, transparent 7.2%),
        radial-gradient(ellipse at 86% 15%, rgba(255,255,255,0.78) 0 5%, transparent 5.2%),
        linear-gradient(180deg, transparent 0 70%, rgba(135,177,95,0.10) 100%);
    filter: drop-shadow(0 18px 28px rgba(47,111,85,0.05));
}

.section:not(.hero)::after {
    content: '';
    position: absolute;
    left: -8vw;
    right: -8vw;
    bottom: -1px;
    height: clamp(96px, 13vw, 180px);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 100% at 30% 100%, rgba(106,158,75,0.28) 0 34%, transparent 34.6%),
        radial-gradient(115% 92% at 72% 100%, rgba(78,135,73,0.22) 0 36%, transparent 36.6%),
        linear-gradient(180deg, transparent 0%, rgba(140,187,91,0.16) 58%, rgba(94,151,73,0.24) 100%);
}

.about { --glow-x: 20%; --glow-y: 30%; }
.qualifications { --glow-x: 76%; --glow-y: 24%; }
.services { --glow-x: 30%; --glow-y: 36%; }
.team { --glow-x: 70%; --glow-y: 34%; }
.partners { --glow-x: 50%; --glow-y: 28%; }
.contact { --glow-x: 24%; --glow-y: 38%; }

.section .container,
.footer .container {
    position: relative;
    z-index: 2;
}

.section-header {
    margin-bottom: clamp(42px, 6vw, 72px);
}

.section-tag {
    color: var(--page-green);
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(47,111,85,0.14);
    box-shadow: 0 10px 28px rgba(31,73,52,0.06);
}

.section-tag::before {
    background: var(--page-orange);
}

.section-header h2,
.about-card h4,
.service-card h4,
.role-card h4,
.contact-item h4,
.cert-card h4,
.qualification-copy .cert-card h4,
.footer-links h4,
.footer-contact h4 {
    color: var(--page-ink);
}

.section-header .gradient-text,
.section .gradient-text,
.footer-logo {
    background: linear-gradient(90deg, var(--page-green-deep) 0%, var(--page-green) 48%, var(--page-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-desc,
.about-text,
.about-text > p,
.service-card p,
.role-card p,
.contact-item p,
.contact-item a,
.cert-card p,
.qualification-copy .cert-card p,
.partner-logo small,
.footer-desc,
.footer-contact p,
.footer-bottom p {
    color: rgba(20,36,31,0.68);
}

.about-text {
    max-width: 860px;
    margin: 0 auto 28px;
    padding: clamp(24px, 4vw, 38px);
    border-radius: 28px;
    background: rgba(255,255,255,0.54);
    border: 1px solid rgba(47,111,85,0.12);
    box-shadow: 0 24px 70px rgba(31,73,52,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.about-text::before {
    display: none !important;
}

.about-text > p {
    position: relative;
    z-index: 1;
}

.about .about-card h4,
.about .about-card p {
    color: var(--page-ink);
    -webkit-text-fill-color: currentColor;
}

.about .about-card p {
    color: rgba(20,36,31,0.62);
}

.about-grid,
.services-grid,
.team-roles,
.partner-logos,
.contact-grid,
.qualification-copy .cert-panel.active > .cert-grid {
    position: relative;
    z-index: 2;
}

.about-card,
.service-card,
.cert-card,
.qualification-copy .cert-card,
.role-card,
.partner-logo,
.contact-item,
.map-placeholder,
.qualification-metrics,
.qualifications .cert-tabs,
.qualification-copy .cert-panel {
    background:
        radial-gradient(circle at var(--card-glow-x, 50%) var(--card-glow-y, 0%), rgba(244,195,107, calc(var(--card-glow-intensity, 0) * 0.16)), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.62)) !important;
    border: 1px solid rgba(47,111,85,0.14) !important;
    border-top-color: rgba(255,255,255,0.86) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 18px 48px rgba(31,73,52,0.10) !important;
    color: var(--page-ink);
}

.about-card:hover,
.service-card:hover,
.cert-card:hover,
.qualification-copy .cert-card:hover,
.qualification-copy .cert-card.is-previewed,
.role-card:hover,
.partner-logo:hover,
.contact-item:hover,
.map-placeholder:hover {
    transform: translateY(-5px);
    border-color: rgba(47,111,85,0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 24px 64px rgba(31,73,52,0.16) !important;
}

.about-card::before,
.service-card::before,
.cert-card::before,
.qualification-copy .cert-card::before,
.role-card::before,
.partner-logo::before,
.contact-item::before,
.map-placeholder::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.54), transparent);
}

.about-card::after,
.service-card::after,
.cert-card::after,
.qualification-copy .cert-card::after,
.role-card::after,
.partner-logo::after,
.contact-item::after,
.map-placeholder::after {
    background:
        radial-gradient(var(--card-glow-radius, 220px) circle at var(--card-glow-x) var(--card-glow-y), rgba(47,111,85, calc(var(--card-glow-intensity, 0) * 0.14)), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.10), transparent);
}

.about-card i,
.service-icon,
.role-icon,
.contact-icon,
.cert-card .cert-icon,
.qualification-copy .cert-card .cert-icon,
.footer-contact i {
    color: var(--page-green);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.74), rgba(221,239,204,0.58)) !important;
    border: 1px solid rgba(47,111,85,0.12);
    -webkit-text-fill-color: currentColor;
}

.qualification-command {
    color: var(--page-ink);
}

.qualification-metric {
    background: rgba(255,255,255,0.44);
    border-color: rgba(47,111,85,0.10);
}

.qualification-metric strong {
    color: var(--page-green-deep);
    -webkit-text-fill-color: currentColor;
}

.qualification-metric span,
.qualifications .cert-tab,
.cert-badge,
.qualification-copy .cert-card .cert-badge {
    color: rgba(20,36,31,0.64);
}

.qualifications .cert-tab {
    background: rgba(255,255,255,0.50);
    border-color: rgba(47,111,85,0.14);
}

.qualifications .cert-tab:hover,
.qualifications .cert-tab.active,
.cert-card:hover .cert-badge,
.qualification-copy .cert-card:hover .cert-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--page-green-deep), var(--page-green));
    border-color: rgba(47,111,85,0.30);
}

.qualifications .cert-tab:hover,
.qualifications .cert-tab.active {
    color: var(--page-green-deep) !important;
    background:
        linear-gradient(180deg, rgba(249,253,245,0.98), rgba(226,242,216,0.94)) !important;
    border-color: rgba(47,111,85,0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 10px 24px rgba(47,111,85,0.10) !important;
}

.qualification-copy .cert-panel::before {
    color: rgba(47,111,85,0.09);
}

.partner-logo-img {
    background: rgba(255,255,255,0.98);
    box-shadow: inset 0 0 0 1px rgba(47,111,85,0.08);
}

.partner-logo span {
    color: var(--page-ink);
}

.contact-grid {
    align-items: stretch;
}

.amap-panel.map-placeholder {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

.amap-panel.map-placeholder::before,
.amap-panel.map-placeholder::after {
    display: none;
}

.amap-map-badge {
    background: rgba(255,255,255,0.84);
    border-color: rgba(47,111,85,0.14);
    color: var(--page-ink);
}

.amap-map-badge span {
    color: var(--page-ink);
}

.amap-badge-star {
    display: inline-block;
    color: #ef4444;
    font-size: 1.08rem;
    line-height: 1;
}

.amap-map-badge .amap-badge-star {
    color: #ef4444;
}

.amap-map-badge small {
    color: rgba(20,36,31,0.56);
}

.footer {
    border-top: 1px solid rgba(47,111,85,0.12);
    padding-top: clamp(72px, 8vw, 112px);
}

.footer-grid {
    border-bottom-color: rgba(47,111,85,0.12);
}

.footer-social a {
    color: var(--page-green);
    background: rgba(255,255,255,0.66);
    border-color: rgba(47,111,85,0.16);
}

.footer-social a:hover,
.back-to-top,
.back-to-top:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--page-green-deep), var(--page-green));
    border-color: rgba(47,111,85,0.22);
}

.footer-links a,
.footer-icp a {
    color: rgba(20,36,31,0.62);
}

.footer-links a:hover,
.footer-icp a:hover,
.contact-item a:hover {
    color: var(--page-orange);
}

@media (max-width: 768px) {
    .section:not(.hero),
    .footer {
        background:
            radial-gradient(ellipse at 18% 9%, rgba(255,255,255,0.92), transparent 24%),
            radial-gradient(ellipse at 84% 14%, rgba(255,255,255,0.86), transparent 25%),
            radial-gradient(circle at 78% 12%, transparent 0 20%, rgba(255,125,96,0.14) 20.2% 21.4%, rgba(255,194,83,0.13) 21.6% 22.8%, rgba(112,176,87,0.12) 23% 24.2%, rgba(75,145,214,0.10) 24.4% 25.6%, transparent 25.8%),
            linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.99) 58%, rgba(232,246,217,0.94) 100%) fixed !important;
    }

    .section:not(.hero)::before {
        opacity: 0.68;
    }

    .section:not(.hero)::after {
        height: 92px;
    }

    .about-text {
        padding: 22px;
        border-radius: 22px;
    }
}

/* ============================================
   Inner section tone correction: mostly white, selective rainbow/green
   ============================================ */
.section:not(.hero),
.footer {
    background:
        radial-gradient(ellipse at 12% 10%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.64) 14%, transparent 32%),
        radial-gradient(ellipse at 82% 12%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.58) 13%, transparent 31%),
        linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.98) 56%, rgba(251,254,248,0.98) 100%) !important;
}

.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(130px, 18vh, 220px);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.58) 58%, #ffffff 100%);
}

.hero-content,
.hero-scroll {
    position: relative;
    z-index: 1;
}

.section:not(.hero)::before {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255,255,255,0.86) 0 4.5%, transparent 4.8%),
        radial-gradient(ellipse at 17% 17%, rgba(255,255,255,0.92) 0 6%, transparent 6.3%),
        radial-gradient(ellipse at 23% 19%, rgba(255,255,255,0.76) 0 4.5%, transparent 4.8%),
        radial-gradient(ellipse at 74% 14%, rgba(255,255,255,0.82) 0 5%, transparent 5.3%),
        radial-gradient(ellipse at 80% 13%, rgba(255,255,255,0.90) 0 6.5%, transparent 6.8%),
        radial-gradient(ellipse at 87% 15%, rgba(255,255,255,0.76) 0 4.8%, transparent 5.1%);
    opacity: 0.74;
    filter: none;
}

.section:not(.hero)::after {
    display: none !important;
}

.section:not(.hero) + .section:not(.hero),
.footer {
    margin-top: 0;
    border-top: 0 !important;
}

.section.about {
    background:
        radial-gradient(ellipse at 12% 10%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.64) 14%, transparent 32%),
        radial-gradient(ellipse at 78% 16%, rgba(236,244,238,0.56), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 58%, #fbfff8 100%) !important;
}

.about-text {
    color: rgba(20,36,31,0.76) !important;
    background: rgba(255,255,255,0.72) !important;
}

.about-text,
.about-text > p,
.about .about-card h4,
.about .about-card p {
    -webkit-text-fill-color: currentColor !important;
}

.about-text > p {
    color: rgba(20,36,31,0.76) !important;
}

.about .about-card h4 {
    color: var(--page-ink) !important;
}

.about .about-card p {
    color: rgba(20,36,31,0.62) !important;
}

.section.qualifications .section-desc,
.section.qualifications .cert-card p,
.section.qualifications .qualification-copy .cert-card p,
.section.qualifications .qualification-metric span,
.section.qualifications .cert-tab {
    color: rgba(20,36,31,0.64) !important;
    -webkit-text-fill-color: currentColor !important;
}

.section.qualifications .cert-card h4,
.section.qualifications .qualification-copy .cert-card h4,
.section.qualifications .qualification-metric strong {
    color: var(--page-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

.section.qualifications {
    background:
        radial-gradient(circle at 82% 20%, transparent 0 18%, rgba(255,132,116,0.13) 18.2% 19.4%, rgba(255,202,94,0.13) 19.6% 20.8%, rgba(116,181,96,0.12) 21% 22.2%, rgba(83,150,214,0.10) 22.4% 23.6%, transparent 23.9%),
        radial-gradient(ellipse at 18% 14%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.58) 12%, transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 48%, #fbfff8 100%) !important;
}

.section.qualifications::before {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255,255,255,0.86) 0 4.5%, transparent 4.8%),
        radial-gradient(ellipse at 18% 17%, rgba(255,255,255,0.94) 0 6%, transparent 6.3%),
        radial-gradient(ellipse at 24% 19%, rgba(255,255,255,0.76) 0 4.5%, transparent 4.8%),
        linear-gradient(115deg, transparent 0 58%, rgba(255,132,116,0.08) 58.2% 59%, rgba(255,202,94,0.08) 59.2% 60%, rgba(116,181,96,0.07) 60.2% 61%, rgba(83,150,214,0.06) 61.2% 62%, transparent 62.2%);
    opacity: 0.78;
}

.section.services {
    background:
        radial-gradient(74% 48% at 22% 78%, rgba(134,184,91,0.16) 0 38%, transparent 38.6%),
        radial-gradient(64% 44% at 78% 80%, rgba(83,145,75,0.12) 0 40%, transparent 40.6%),
        radial-gradient(100% 72% at 22% 104%, rgba(134,184,91,0.18) 0 31%, transparent 31.4%),
        radial-gradient(82% 58% at 78% 106%, rgba(83,145,75,0.13) 0 35%, transparent 35.4%),
        radial-gradient(ellipse at 78% 13%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 13%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fefffb 56%, #f2faed 100%) !important;
}

.section.services::before {
    background:
        radial-gradient(ellipse at 73% 16%, rgba(255,255,255,0.84) 0 5%, transparent 5.3%),
        radial-gradient(ellipse at 80% 14%, rgba(255,255,255,0.92) 0 6.8%, transparent 7.1%),
        radial-gradient(ellipse at 88% 17%, rgba(255,255,255,0.76) 0 4.8%, transparent 5.1%),
        radial-gradient(60% 36% at 52% 100%, rgba(124,172,82,0.10) 0 48%, transparent 49%);
    opacity: 0.74;
}

.section.team,
.section.partners,
.section.contact,
.footer {
    background:
        radial-gradient(ellipse at 15% 12%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.58) 12%, transparent 29%),
        radial-gradient(ellipse at 84% 16%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.52) 12%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 60%, #fbfff8 100%) !important;
}

.footer {
    border-top: 0 !important;
}

@media (max-width: 768px) {
    .section:not(.hero),
    .footer {
        background:
            radial-gradient(ellipse at 16% 10%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.58) 16%, transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #fffefa 62%, #fbfff8 100%) !important;
    }

    .section.qualifications {
        background:
            radial-gradient(circle at 88% 14%, transparent 0 15%, rgba(255,132,116,0.12) 15.2% 16.4%, rgba(255,202,94,0.12) 16.6% 17.8%, rgba(116,181,96,0.11) 18% 19.2%, rgba(83,150,214,0.09) 19.4% 20.6%, transparent 20.9%),
            linear-gradient(180deg, #ffffff 0%, #fffefa 60%, #fbfff8 100%) !important;
    }

    .section.services {
        background:
            radial-gradient(100% 46% at 42% 78%, rgba(134,184,91,0.14) 0 40%, transparent 40.6%),
            radial-gradient(120% 58% at 45% 106%, rgba(134,184,91,0.16) 0 32%, transparent 32.5%),
            linear-gradient(180deg, #ffffff 0%, #fefffb 62%, #f2faed 100%) !important;
    }
}

/* ============================================
   Final per-section nature motifs
   ============================================ */
.section:not(.hero),
.footer {
    background:
        radial-gradient(ellipse at 12% 12%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.62) 14%, transparent 32%),
        radial-gradient(ellipse at 86% 16%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.52) 13%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 62%, #fbfff7 100%) !important;
}

.section:not(.hero)::before,
.section:not(.hero)::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.section:not(.hero)::after {
    display: none !important;
}

.section.about {
    background:
        radial-gradient(ellipse at 18% 15%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.62) 16%, transparent 34%),
        radial-gradient(ellipse at 76% 20%, rgba(236,244,238,0.52), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 62%, #fbfff8 100%) !important;
}

.section.about::before,
.section.partners::before,
.section.contact::before {
    inset: 0;
    opacity: 0.76;
    background:
        radial-gradient(ellipse at 70% 22%, rgba(255,255,255,0.88) 0 5%, transparent 5.3%),
        radial-gradient(ellipse at 77% 20%, rgba(255,255,255,0.94) 0 7%, transparent 7.3%),
        radial-gradient(ellipse at 85% 23%, rgba(255,255,255,0.78) 0 5.4%, transparent 5.7%),
        radial-gradient(ellipse at 14% 18%, rgba(255,255,255,0.72) 0 4.2%, transparent 4.5%),
        radial-gradient(ellipse at 20% 17%, rgba(255,255,255,0.86) 0 5.8%, transparent 6.1%),
        radial-gradient(ellipse at 26% 19%, rgba(255,255,255,0.68) 0 4.5%, transparent 4.8%);
}

.section.qualifications {
    background:
        radial-gradient(ellipse at 16% 14%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.58) 14%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 62%, #fbfff7 100%) !important;
}

.section.qualifications::before {
    inset: 0;
    opacity: 0.68;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(255,255,255,0.76) 0 4.6%, transparent 4.9%),
        radial-gradient(ellipse at 18% 17%, rgba(255,255,255,0.88) 0 6.2%, transparent 6.5%),
        radial-gradient(ellipse at 25% 19%, rgba(255,255,255,0.68) 0 4.7%, transparent 5%);
}

.section.qualifications::after {
    display: block !important;
    top: clamp(96px, 14vw, 150px);
    right: max(-120px, -8vw);
    width: min(760px, 58vw);
    height: min(270px, 22vw);
    border-radius: 999px 999px 0 0;
    opacity: 0.78;
    background:
        radial-gradient(ellipse at 50% 100%,
            transparent 0 53%,
            rgba(255,132,116,0.15) 53.4% 55.4%,
            rgba(255,202,94,0.14) 56% 58%,
            rgba(116,181,96,0.13) 58.6% 60.6%,
            rgba(83,150,214,0.11) 61.2% 63.2%,
            transparent 64%);
    transform: rotate(-6deg);
}

.section.services {
    background:
        radial-gradient(76% 44% at 20% 88%, rgba(134,184,91,0.15) 0%, rgba(134,184,91,0.08) 44%, transparent 78%),
        radial-gradient(70% 42% at 78% 88%, rgba(83,145,75,0.11) 0%, rgba(83,145,75,0.06) 48%, transparent 80%),
        radial-gradient(ellipse at 78% 14%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.54) 12%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fefffb 58%, #f4faef 100%) !important;
}

.section.services::before {
    inset: 0;
    opacity: 0.66;
    background:
        radial-gradient(ellipse at 74% 18%, rgba(255,255,255,0.78) 0 5%, transparent 5.3%),
        radial-gradient(ellipse at 81% 16%, rgba(255,255,255,0.90) 0 6.8%, transparent 7.1%),
        radial-gradient(ellipse at 89% 19%, rgba(255,255,255,0.70) 0 4.8%, transparent 5.1%);
}

.section.services::after {
    display: block !important;
    left: -8vw;
    right: -8vw;
    bottom: -6vw;
    height: clamp(180px, 22vw, 310px);
    opacity: 0.66;
    background:
        radial-gradient(70% 86% at 18% 100%, rgba(121,170,84,0.18) 0%, rgba(121,170,84,0.08) 42%, transparent 76%),
        radial-gradient(72% 84% at 55% 100%, rgba(146,191,96,0.14) 0%, rgba(146,191,96,0.07) 44%, transparent 78%),
        radial-gradient(60% 78% at 88% 100%, rgba(80,139,74,0.12) 0%, rgba(80,139,74,0.05) 38%, transparent 74%);
}

.section.team {
    background:
        radial-gradient(circle at 18% 78%, rgba(255,187,126,0.13) 0 2.1%, transparent 2.25%),
        radial-gradient(circle at 21% 76%, rgba(255,143,152,0.10) 0 2.6%, transparent 2.75%),
        radial-gradient(circle at 76% 72%, rgba(244,195,107,0.12) 0 2.2%, transparent 2.35%),
        radial-gradient(circle at 79% 74%, rgba(255,143,152,0.10) 0 2.8%, transparent 3%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 60%, #fff9f3 100%) !important;
}

.section.team::before {
    inset: 0;
    opacity: 0.82;
    background:
        radial-gradient(circle at 17% 75%, rgba(217,109,40,0.18) 0 0.55%, transparent 0.7%),
        radial-gradient(circle at 16% 73%, rgba(255,181,192,0.22) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 18% 73%, rgba(255,181,192,0.20) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 16% 77%, rgba(255,181,192,0.18) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 18% 77%, rgba(255,181,192,0.18) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 78% 72%, rgba(217,109,40,0.16) 0 0.5%, transparent 0.65%),
        radial-gradient(circle at 77% 70%, rgba(255,210,128,0.22) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 79% 70%, rgba(255,210,128,0.20) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 77% 74%, rgba(255,210,128,0.18) 0 1.1%, transparent 1.25%),
        radial-gradient(circle at 79% 74%, rgba(255,210,128,0.18) 0 1.1%, transparent 1.25%);
}

.section.partners {
    background:
        radial-gradient(ellipse at 15% 15%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.56) 14%, transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 60%, #fbfff8 100%) !important;
}

.section.contact {
    background:
        radial-gradient(92% 48% at 88% 102%, rgba(134,184,91,0.10) 0 34%, transparent 35%),
        radial-gradient(ellipse at 16% 18%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.56) 13%, transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fffefa 62%, #fbfff8 100%) !important;
}

/* Contact meadow refinement: illustrated full-page lawn treatment. */
.section.services::after {
    left: auto;
    right: -7vw;
    bottom: -74px;
    width: min(660px, 44vw);
    height: clamp(180px, 18vw, 280px);
    opacity: 0.48;
    background:
        radial-gradient(96% 86% at 78% 100%, rgba(121,170,84,0.20) 0%, rgba(121,170,84,0.08) 46%, transparent 78%),
        radial-gradient(86% 72% at 46% 100%, rgba(146,191,96,0.13) 0%, rgba(146,191,96,0.06) 42%, transparent 74%);
    transform: rotate(-3deg);
}

.section.contact {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.28) 32%, rgba(236,250,222,0.10) 58%, rgba(107,166,72,0.14) 100%),
        image-set(url("../images/hero-mountain-meadow-bg-1920.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center top / cover no-repeat !important;
    min-height: 100vh;
}

.section.contact::before {
    inset: 0;
    opacity: 0.82;
    background:
        radial-gradient(ellipse at 28% 24%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.24) 24%, transparent 48%),
        radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.22) 25%, transparent 52%),
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 42%, rgba(48,117,53,0.08) 100%);
}

.section.contact::after {
    display: block !important;
    inset: auto 0 0 0;
    height: clamp(160px, 18vw, 260px);
    opacity: 0.58;
    background:
        linear-gradient(180deg, transparent 0%, rgba(76,142,54,0.12) 48%, rgba(41,96,42,0.24) 100%);
    filter: none;
}

.section.contact .section-header {
    text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

.section.contact .section-tag {
    background: rgba(255,255,255,0.82);
    border-color: rgba(74,135,61,0.18);
}

.section.contact .section-desc {
    color: rgba(30,54,44,0.76);
    text-shadow: 0 1px 0 rgba(255,255,255,0.70);
}

.section.contact .contact-item,
.section.contact .map-placeholder {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(246,255,238,0.72)) !important;
    border-color: rgba(78,139,64,0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 22px 58px rgba(55,107,47,0.16) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.section.contact .contact-icon {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.82), rgba(220,244,203,0.72)) !important;
}

.section.contact .amap-map-badge {
    background: rgba(255,255,255,0.86);
    border-color: rgba(78,139,64,0.18);
    box-shadow: 0 18px 42px rgba(55,107,47,0.14);
}

.section.qualifications .cert-tab:hover,
.section.qualifications .cert-tab.active {
    color: var(--page-green-deep) !important;
    background:
        linear-gradient(180deg, rgba(249,253,245,0.98), rgba(226,242,216,0.94)) !important;
    border-color: rgba(47,111,85,0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 10px 24px rgba(47,111,85,0.10) !important;
}

.section.qualifications .cert-pagination {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(239,247,233,0.82)),
        rgba(255,255,255,0.76) !important;
    border-color: rgba(47,111,85,0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.90),
        0 16px 36px rgba(31,73,52,0.10) !important;
}

.section.qualifications .cert-page-status {
    color: rgba(20,36,31,0.58) !important;
}

.section.qualifications .cert-page-btn {
    color: rgba(20,36,31,0.66) !important;
    background: rgba(255,255,255,0.58) !important;
    border-color: rgba(47,111,85,0.14) !important;
}

.section.qualifications .cert-page-btn:hover:not(:disabled) {
    color: var(--page-green-deep) !important;
    background: rgba(230,244,220,0.88) !important;
    border-color: rgba(47,111,85,0.22) !important;
}

.section.qualifications .cert-page-btn.active {
    color: var(--page-green-deep) !important;
    background: linear-gradient(180deg, rgba(255,250,228,0.94), rgba(229,243,219,0.94)) !important;
    border-color: rgba(244,195,107,0.62) !important;
    box-shadow: 0 10px 22px rgba(47,111,85,0.10) !important;
}

.contact-grid,
.contact-map,
.contact-info {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .section.qualifications::after {
        top: 108px;
        right: -120px;
        width: 420px;
        height: 170px;
        opacity: 0.58;
    }

    .section.services::after {
        right: -120px;
        bottom: -64px;
        width: 360px;
        height: 170px;
    }

    .section.team::before {
        opacity: 0.58;
    }

    .section.contact::after {
        height: 150px;
        opacity: 0.42;
    }

    .section.contact {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.34) 34%, rgba(236,250,222,0.10) 62%, rgba(107,166,72,0.16) 100%),
            image-set(url("../images/hero-mountain-meadow-bg-960.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center top / cover no-repeat !important;
    }
}

/* Homepage centering calibration */
.hero {
    display: grid;
    place-items: center;
    justify-content: center;
    padding-top: calc(var(--nav-height) + 76px);
    padding-bottom: clamp(92px, 12vh, 138px);
}

.hero-content {
    position: relative;
    left: auto;
    width: min(1080px, calc(100vw - 48px));
    max-width: 1080px;
    grid-template-columns: 1fr;
    gap: 0;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    justify-items: center;
    text-align: center;
}

.hero-copy {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(10px, 2vh, 22px);
}

.hero-badge {
    margin-bottom: clamp(1.4rem, 2.5vh, 2rem);
}

.hero-title {
    margin-bottom: clamp(1rem, 2vh, 1.45rem);
    text-wrap: balance;
}

.hero-subtitle {
    max-width: 780px;
    margin: 0 auto clamp(1.55rem, 3vh, 2.35rem);
}

.hero-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    margin: 0 auto;
    padding: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    border: 1px solid rgba(255,255,255,0.54);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.62),
        0 18px 48px rgba(18,48,34,0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero .btn {
    min-height: 58px;
    padding: 14px 30px;
}

.hero-scroll {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: clamp(28px, 4.5vh, 54px);
    transform: translateX(-50%);
}

@media (max-width: 560px) {
    .hero {
        justify-content: center;
        padding: 104px 16px 92px;
    }

    .hero-content {
        width: min(100%, 358px);
        max-width: 358px;
        left: auto;
        margin-left: 0;
        margin-right: 0;
        transform: none;
        justify-items: center;
    }

    .hero-copy {
        width: 100%;
        padding-top: 0;
    }

    .hero-subtitle {
        margin-bottom: 1.55rem;
    }

    .hero-actions {
        width: 100%;
        padding: 8px;
        gap: 8px;
    }

    .hero .btn {
        min-width: 0;
        flex: 1 1 0;
        min-height: 46px;
        padding: 10px 12px;
    }
}

/* ============================================
   About section B concept: premium command panel
   ============================================ */
.section.about {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-top: clamp(112px, 9vw, 150px);
    padding-bottom: clamp(88px, 8vw, 124px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.92) 42%, rgba(245,252,241,0.98) 100%),
        image-set(url("../images/hero-mountain-meadow-bg-1920.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center 42% / cover no-repeat !important;
}

.section.about::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.76) 42%, rgba(255,255,255,0.58) 100%),
        radial-gradient(720px 360px at 74% 18%, rgba(244,195,107,0.16), transparent 64%),
        linear-gradient(rgba(47,111,85,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,111,85,0.035) 1px, transparent 1px);
    background-size: auto, auto, 42px 42px, 42px 42px;
    opacity: 1;
}

.section.about::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(80px, 10vw, 150px);
    z-index: 0;
    pointer-events: none;
    display: block !important;
    background: linear-gradient(180deg, rgba(251,254,248,0), rgba(251,254,248,0.94) 72%, rgba(255,255,255,0.98) 100%);
}

.about .container {
    width: min(1180px, calc(100% - 48px));
    padding-left: 0;
    padding-right: 0;
}

.about-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.72fr);
    gap: clamp(36px, 6vw, 92px);
    align-items: end;
    text-align: left;
    margin-bottom: clamp(28px, 4.2vw, 54px);
}

.about-heading-copy {
    min-width: 0;
}

.about-header .section-tag {
    margin-bottom: 20px;
}

.about-header h2 {
    max-width: 690px;
    margin: 0;
    font-size: clamp(3.25rem, 7vw, 6.7rem);
    line-height: 0.92;
    letter-spacing: 0;
    font-weight: 900;
}

.about-lead-panel {
    position: relative;
    isolation: isolate;
    padding: 24px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(246,253,242,0.70)) !important;
    border: 1px solid rgba(47,111,85,0.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 26px 70px rgba(31,73,52,0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--page-ink);
}

.about-lead-panel::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--page-green), var(--page-orange));
    opacity: 0.85;
}

.about-lead-panel p {
    margin: 0 0 18px 16px;
    color: rgba(20,36,31,0.72);
    font-size: 1rem;
    line-height: 1.9;
}

.about-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-left: 16px;
}

.about-timeline span {
    min-width: 0;
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(47,111,85,0.10);
    color: rgba(20,36,31,0.58);
    font-size: 0.78rem;
    line-height: 1.35;
}

.about-timeline strong {
    display: block;
    color: var(--page-green-deep);
    font-size: clamp(1.05rem, 1.7vw, 1.42rem);
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.about-lead-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0 16px;
}

.about-lead-facts span,
.about-capability-list span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(242,249,235,0.78);
    border: 1px solid rgba(47,111,85,0.12);
    color: rgba(20,36,31,0.68);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.about .about-showcase {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.78fr);
    gap: clamp(22px, 3.4vw, 42px);
    align-items: stretch;
    justify-content: stretch;
}

.about .about-profile,
.about .about-metrics-panel {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(47,111,85,0.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.90),
        0 28px 76px rgba(31,73,52,0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.about .about-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
    min-height: 420px;
    padding: clamp(34px, 5vw, 58px) !important;
    background:
        radial-gradient(circle at 10% 10%, rgba(244,195,107,0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.68)) !important;
}

.about .about-profile::before {
    display: none !important;
}

.about .about-profile::after {
    content: "";
    position: absolute;
    inset: auto 34px 30px auto;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(47,111,85,0.10);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 49%, rgba(47,111,85,0.10) 50%, transparent 51%),
        linear-gradient(180deg, transparent 49%, rgba(47,111,85,0.10) 50%, transparent 51%);
    opacity: 0.46;
}

.about .about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 22px;
    color: var(--page-green-deep);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
}

.about .about-kicker::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--page-orange);
    box-shadow: 0 0 0 6px rgba(244,195,107,0.18);
}

.about .about-profile > p {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    max-width: 54ch;
    margin: 0;
    padding: 0 !important;
    color: rgba(20,36,31,0.74) !important;
    font-size: clamp(1rem, 1.34vw, 1.12rem);
    line-height: 2.05;
}

.about .about-profile > p + p {
    margin-top: 20px;
}

.about .about-capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    max-width: 620px;
}

.about .about-metrics-panel {
    min-height: 420px;
    padding: clamp(20px, 3vw, 28px);
    background:
        radial-gradient(circle at 18% 12%, rgba(244,195,107,0.18), transparent 34%),
        radial-gradient(circle at 92% 88%, rgba(47,111,85,0.14), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(237,247,229,0.72)) !important;
}

.about .about-metrics-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 18px;
}

.about .about-metrics-title span {
    color: var(--page-ink);
    font-size: 1.05rem;
    font-weight: 900;
}

.about .about-metrics-title strong {
    color: rgba(20,36,31,0.42);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about .about-metrics-panel .about-card-grid {
    height: calc(100% - 46px);
    padding: 0 !important;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.about .about-metrics-panel .about-card-grid::before {
    display: none !important;
}

.about .about-metrics-panel .about-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 164px;
    padding: 22px;
    border-radius: 22px;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62)) !important;
    border: 1px solid rgba(47,111,85,0.13) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 16px 38px rgba(31,73,52,0.09) !important;
    transform: none !important;
}

.about .about-metrics-panel .about-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(47,111,85,0.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 22px 54px rgba(31,73,52,0.14) !important;
}

.about .about-metrics-panel .about-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 0 24px;
    border-radius: 15px;
    color: var(--page-green);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.84), rgba(221,239,204,0.74)) !important;
    border: 1px solid rgba(47,111,85,0.12);
    font-size: 1.08rem;
    -webkit-text-fill-color: currentColor;
}

.about .about-metrics-panel .about-card h4 {
    margin: 0 0 8px;
    color: var(--page-ink) !important;
    font-size: clamp(1.28rem, 2vw, 1.82rem);
    line-height: 1.12;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    -webkit-text-fill-color: currentColor !important;
}

.about .about-metrics-panel .about-card p {
    margin: 0;
    color: rgba(20,36,31,0.58) !important;
    font-size: 0.92rem;
    line-height: 1.5;
    -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 1080px) {
    .about-header,
    .about .about-showcase {
        grid-template-columns: 1fr;
    }

    .about-lead-panel,
    .about-metrics-panel {
        min-width: 0;
    }

    .about-header h2 {
        max-width: 780px;
    }

    .about .about-profile,
    .about .about-metrics-panel {
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .section.about {
        min-height: auto;
        padding-top: 112px;
        padding-bottom: 84px;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.96) 48%, rgba(245,252,241,0.98) 100%),
            image-set(url("../images/hero-mountain-meadow-bg-960.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center top / cover no-repeat !important;
    }

    .about .container {
        width: min(100% - 32px, 680px);
    }

    .about-header {
        gap: 24px;
        margin-bottom: 24px;
    }

    .about-header h2 {
        font-size: clamp(2.6rem, 14vw, 4.45rem);
        line-height: 0.96;
    }

    .about-lead-panel,
    .about .about-profile,
    .about .about-metrics-panel {
        border-radius: 24px;
    }

    .about-timeline {
        grid-template-columns: 1fr;
    }

    .about .about-profile {
        padding: 28px !important;
    }

    .about .about-profile > p {
        font-size: 0.98rem;
        line-height: 1.95;
    }

    .about .about-metrics-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 560px) {
    .about-lead-panel {
        padding: 20px;
    }

    .about-lead-panel p,
    .about-timeline,
    .about-lead-facts {
        margin-left: 12px;
    }

    .about-lead-facts {
        padding-right: 48px;
    }

    .about .about-metrics-panel .about-card-grid {
        grid-template-columns: 1fr;
    }

    .about .about-metrics-panel .about-card {
        min-height: 138px;
    }
}

/* ============================================
   About section B reference remake
   ============================================ */
.section.about {
    min-height: 100dvh;
    display: block;
    overflow: hidden;
    padding: 0 !important;
    color: var(--page-ink);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.99) 0 18.2%, rgba(249,253,249,0.98) 18.2% 100%) !important;
}

.section.about::before {
    content: "";
    position: absolute;
    inset: 0 0 0 18.2%;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.68) 40%, rgba(255,255,255,0.20) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.58) 42%, rgba(237,249,237,0.64) 100%),
        image-set(url("../images/about-mountain-tech-bg-1600.webp") type("image/webp"), url("../images/about-mountain-tech-bg.png") type("image/png")) center right / cover no-repeat;
    opacity: 1;
}

.section.about::after {
    content: "";
    position: absolute;
    inset: auto 0 0 18.2%;
    height: 32%;
    z-index: 0;
    display: block !important;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0), rgba(229,247,229,0.50) 70%, rgba(239,250,236,0.72));
}

.about-b-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: clamp(330px, 24.2vw, 410px) minmax(0, 1fr);
    min-height: 100dvh;
    padding-top: clamp(82px, 6.8vw, 108px);
}

.about-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(54px, 8.4vh, 96px);
    min-height: calc(100dvh - clamp(82px, 6.8vw, 108px));
    padding: 22px clamp(28px, 4vw, 66px);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.82));
    border-right: 1px solid rgba(47,111,85,0.08);
}

.about-rail-line {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: clamp(88px, 6.15vw, 112px);
    width: 1px;
    background: linear-gradient(180deg, rgba(47,111,85,0.06), rgba(47,111,85,0.20), rgba(47,111,85,0.06));
}

.about-rail-item {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.about-rail-icon {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #0b6544, #063f2c);
    border: 1px solid rgba(255,255,255,0.62);
    box-shadow: 0 15px 34px rgba(7,67,46,0.22);
    font-size: 1.1rem;
}

.about-rail-icon-warm {
    background: linear-gradient(145deg, #ea8508, #cf6000);
    box-shadow: 0 15px 34px rgba(218,102,0,0.22);
}

.about-rail-item strong {
    display: block;
    color: var(--page-green-deep);
    font-size: clamp(1.85rem, 2.4vw, 2.55rem);
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.about-rail-item:nth-of-type(3) strong {
    color: #d96f05;
}

.about-rail-item:nth-of-type(4) strong {
    color: var(--page-green-deep);
}

.about-rail-item strong span {
    margin-left: 4px;
    font-size: 0.48em;
}

.about-rail-item p {
    margin: 10px 0 2px;
    color: rgba(20,36,31,0.72);
    font-size: 1rem;
    font-weight: 800;
}

.about-rail-item small {
    color: rgba(20,36,31,0.60);
    font-size: 0.92rem;
    line-height: 1.5;
}

.about .about-b-main {
    position: relative;
    z-index: 2;
    width: min(1520px, calc(100% - 130px));
    max-width: none !important;
    margin: 0 0 0 clamp(106px, 7vw, 132px);
    padding: clamp(26px, 3.8vw, 52px) 0 clamp(30px, 3.8vw, 54px);
}

.about .about-b-main::before {
    display: none;
}

.about .about-b-main .about-header {
    display: block;
    max-width: 760px;
    margin: 0 0 clamp(28px, 4.2vh, 46px);
    text-align: left;
}

.about .about-b-main .section-tag {
    margin-bottom: 18px;
}

.about .about-b-main .about-header h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(4rem, 6.25vw, 6.8rem);
    line-height: 0.96;
    letter-spacing: 0;
    font-weight: 900;
}

.about .about-b-main .about-header .gradient-text {
    background: linear-gradient(90deg, var(--page-green-deep) 0%, var(--page-green) 48%, #cf6b05 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about .about-b-main .section-desc {
    position: relative;
    max-width: 720px;
    margin: 20px 0 0;
    padding-top: 18px;
    color: rgba(20,36,31,0.78);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 600;
    line-height: 1.8;
}

.about .about-b-main .section-desc::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: rgba(47,111,85,0.42);
}

.about-command-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(430px, 0.9fr);
    gap: clamp(28px, 4vw, 58px);
    align-items: center;
    min-height: 390px;
    padding: clamp(32px, 3.6vw, 46px) clamp(36px, 4.2vw, 54px);
    border-radius: 18px;
    border: 1px solid rgba(47,111,85,0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 32px 80px rgba(31,73,52,0.13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.about-command-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 12%, rgba(244,195,107,0.10), transparent 32%),
        radial-gradient(circle at 92% 92%, rgba(47,111,85,0.10), transparent 34%);
}

.about-company-copy,
.about-proof-grid {
    position: relative;
    z-index: 1;
}

.about-company-copy h3 {
    margin: 0;
    color: var(--page-green-deep);
    font-size: clamp(1.62rem, 2.2vw, 2.18rem);
    line-height: 1.2;
    font-weight: 900;
}

.about-title-rule {
    display: block;
    width: 36px;
    height: 2px;
    margin: 18px 0 26px;
    border-radius: 999px;
    background: #cf6b05;
}

.about-company-copy p {
    max-width: 56ch;
    margin: 0;
    color: rgba(20,36,31,0.72);
    font-size: 1.06rem;
    line-height: 2.02;
    font-weight: 500;
}

.about-company-copy p + p {
    margin-top: 14px;
}

.about-more-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: 28px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    color: var(--page-green-deep);
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(47,111,85,0.14);
    font-size: 0.88rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(31,73,52,0.06);
}

.about-more-link i {
    font-size: 0.72rem;
}

.about-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.about-proof-grid .about-proof-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    align-items: center;
    min-height: 170px;
    padding: 26px 28px;
    border-radius: 12px;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70)) !important;
    border: 1px solid rgba(47,111,85,0.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 18px 42px rgba(31,73,52,0.08) !important;
    transform: none !important;
}

.about-proof-grid .about-proof-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(47,111,85,0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 24px 54px rgba(31,73,52,0.13) !important;
}

.about-proof-grid .about-proof-card i {
    grid-row: 1 / span 3;
    width: 66px;
    height: 66px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--page-green-deep);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.84), rgba(219,238,211,0.78)) !important;
    border: 1px solid rgba(47,111,85,0.12);
    font-size: 1.46rem;
    -webkit-text-fill-color: currentColor;
}

.about-proof-grid .about-proof-card span {
    display: block;
    color: rgba(20,36,31,0.56);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.about-proof-grid .about-proof-card h4 {
    margin: 8px 0 0;
    color: var(--page-ink) !important;
    font-size: clamp(1.48rem, 1.9vw, 2rem);
    line-height: 1.14;
    font-weight: 900;
    -webkit-text-fill-color: currentColor !important;
}

.about-proof-grid .about-proof-card small {
    display: block;
    width: 30px;
    height: 2px;
    margin-top: 14px;
    border-radius: 999px;
    background: #cf6b05;
}

@media (max-width: 1180px) {
    .about-b-layout {
        grid-template-columns: 1fr;
    }

    .section.about,
    .section.about::before,
    .section.about::after {
        background-color: #fff;
    }

    .section.about::before {
        inset: 0;
    }

    .section.about::after {
        inset: auto 0 0 0;
    }

    .about-rail {
        display: none;
    }

    .about-b-main {
        width: min(100% - 40px, 980px);
    }

    .about-command-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .about-b-layout {
        padding-top: 104px;
    }

    .section.about::before {
        inset: 0;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.84) 56%, rgba(239,250,236,0.74) 100%),
            image-set(url("../images/about-mountain-tech-bg-900.webp") type("image/webp"), url("../images/about-mountain-tech-bg.png") type("image/png")) right 100px / 760px auto no-repeat;
    }

    .section.about::after {
        inset: auto 0 0 0;
    }

    .about-b-main {
        width: min(100% - 32px, 560px);
        padding-top: 42px;
    }

    .about-b-main::before {
        display: none;
    }

    .about-b-main .about-header {
        margin-bottom: 26px;
    }

    .about-b-main .about-header h2 {
        font-size: clamp(2.75rem, 14vw, 4.7rem);
        line-height: 0.98;
    }

    .about-b-main .section-desc {
        margin-top: 22px;
        padding-top: 18px;
        font-size: 0.98rem;
    }

    .about-command-card {
        padding: 28px;
        border-radius: 16px;
        gap: 30px;
    }

    .about-proof-grid {
        grid-template-columns: 1fr;
    }

    .about-proof-grid .about-proof-card {
        grid-template-columns: 62px minmax(0, 1fr);
        min-height: 128px;
        padding: 22px;
    }

    .about-proof-grid .about-proof-card i {
        width: 56px;
        height: 56px;
        font-size: 1.22rem;
    }
}

@media (max-width: 430px) {
    .about-command-card {
        padding: 22px;
    }

    .about-company-copy p {
        font-size: 0.94rem;
        line-height: 1.9;
    }

    .about-proof-grid .about-proof-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-proof-grid .about-proof-card i {
        grid-row: auto;
    }
}

@media (max-width: 1180px) {
    .about .about-b-main {
        width: min(100% - 40px, 980px);
        margin: 0 auto;
    }
}

@media (max-width: 760px) {
    .about .about-b-main {
        width: min(100% - 32px, 560px);
        margin: 0 auto;
        padding-top: 36px;
    }

    .about .about-b-main .about-header {
        margin-bottom: 28px;
    }

    .about .about-b-main .about-header h2 {
        font-size: clamp(2.85rem, 13vw, 3.95rem);
        line-height: 0.98;
    }

    .about .about-b-main .section-desc {
        margin-top: 22px;
        padding-top: 18px;
        font-size: 0.98rem;
    }

    .about-command-card {
        min-height: 0;
        padding: 26px;
        gap: 30px;
    }

    .about-proof-grid .about-proof-card {
        grid-template-columns: 62px minmax(0, 1fr);
        min-height: 132px;
        padding: 22px;
    }

    .about-proof-grid .about-proof-card i {
        width: 56px;
        height: 56px;
        font-size: 1.22rem;
    }
}

@media (max-width: 430px) {
    .about .about-b-main .about-header h2 {
        font-size: clamp(2.6rem, 12vw, 3.35rem);
    }
}

@media (min-width: 769px) {
    .navbar.scrolled.pill-nav-container {
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
    }

    .navbar.scrolled .pill-nav {
        width: 100%;
        min-height: 78px;
        padding: 0 64px;
        border-radius: 0;
        background: rgba(255,255,255,0.92);
        border: 0;
        border-bottom: 1px solid rgba(20,36,31,0.10);
        box-shadow: 0 14px 38px rgba(20,36,31,0.06);
    }

    .navbar.scrolled .pill-nav::before {
        opacity: 0.28;
    }

    .navbar.scrolled .pill-logo {
        gap: 14px;
    }


    .navbar.scrolled .nav-logo-text {
        font-size: clamp(1.08rem, 1.25vw, 1.28rem);
    }

    .navbar.scrolled .pill-nav-items {
        margin-left: auto;
    }

    .navbar.scrolled .pill-list {
        gap: 22px;
    }

    .navbar.scrolled .pill:not(.nav-cta) {
        height: 58px;
        padding: 0 4px;
        border-radius: 0;
        background: transparent;
        font-size: 1rem;
    }

    .navbar.scrolled .pill.nav-cta {
        min-width: 150px;
        height: 50px;
        margin-left: 18px;
        border-radius: 999px;
        color: #18304a;
        background: linear-gradient(180deg, #f6fbff, #dcecff);
        border: 1px solid rgba(135,171,210,0.46);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.86),
            0 10px 24px rgba(63,96,132,0.14);
    }
}

/* Desktop web default view: approximate a browser 75% zoom level. */
@media (min-width: 769px) {
    :root {
        --desktop-view-scale: 0.75;
        --desktop-page-height: calc(100dvh / var(--desktop-view-scale));
    }

    html {
        font-size: 12px;
    }

    body {
        zoom: var(--desktop-view-scale);
    }

    .hero,
    .section,
    .about-b-layout {
        min-height: var(--desktop-page-height);
    }

    .section.contact {
        min-height: var(--desktop-page-height) !important;
    }

    .section.qualifications .qualification-copy .cert-panels {
        min-height: 352px;
    }

    .section.partners .partner-logos {
        gap: 9px;
    }

    .section.partners .partner-logo {
        min-height: 92px;
        padding: 12px 12px;
    }

    .section.partners .partner-logo-img {
        height: 40px;
        margin-bottom: 7px;
    }
}

/* Requested text-size boost for non-home/about content sections. */
.section:is(.qualifications, .services, .team, .partners, .contact) .section-tag {
    font-size: 0.98rem;
}

.section:is(.qualifications, .services, .team, .partners, .contact) .section-header h2 {
    font-size: clamp(2.58rem, 4.9vw, 5.48rem);
}

.section:is(.qualifications, .services, .team, .partners, .contact) .section-desc {
    font-size: clamp(1.18rem, 1.52vw, 1.34rem);
}

.section.qualifications .qualification-metric strong {
    font-size: clamp(1.74rem, 2.72vw, 2.52rem);
}

.section.qualifications .qualification-metric span,
.section.qualifications .cert-tab,
.section.qualifications .cert-page-status,
.section.qualifications .cert-page-btn {
    font-size: 1rem;
}

.section.qualifications .qualification-copy .cert-card h4 {
    font-size: 1.16rem;
}

.section.qualifications .qualification-copy .cert-card p {
    font-size: 1.04rem;
}

.section.qualifications .qualification-copy .cert-card .cert-badge {
    font-size: 0.94rem;
}

.section.services .service-card h4,
.section.team .role-card h4,
.section.contact .contact-item h4 {
    font-size: 1.24rem;
}

.section.services .service-card p,
.section.team .role-card p,
.section.contact .contact-item p,
.section.contact .contact-item a {
    font-size: 1.12rem;
}

.section.partners .partner-logo span {
    font-size: 1.1rem;
}

.section.partners .partner-logo small {
    font-size: 0.92rem;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 1.04rem;
}

.footer-desc,
.footer-links a,
.footer-contact p {
    font-size: 1rem;
}

.footer-bottom p {
    font-size: 0.92rem;
}

.cert-modal-title {
    font-size: 1.2rem;
}

.cert-modal-category,
.cert-modal-meta,
.cert-modal-original {
    font-size: 0.98rem;
}

@media (min-width: 769px) {
    .section.qualifications .qualification-metric span,
    .section.qualifications .cert-tab,
    .section.qualifications .cert-page-status,
    .section.qualifications .cert-page-btn {
        font-size: 1.08rem;
    }

    .section.qualifications .qualification-copy .cert-card h4 {
        font-size: 1.3rem;
    }

    .section.qualifications .qualification-copy .cert-card p {
        font-size: 1.14rem;
    }

    .section.qualifications .qualification-copy .cert-card .cert-badge {
        font-size: 1rem;
    }

    .section.services .service-card h4,
    .section.team .role-card h4,
    .section.contact .contact-item h4 {
        font-size: 1.38rem;
    }

    .section.services .service-card p,
    .section.team .role-card p,
    .section.contact .contact-item p,
    .section.contact .contact-item a {
        font-size: 1.24rem;
    }

    .section.partners .partner-logo span {
        font-size: 1.22rem;
    }

    .section.partners .partner-logo small {
        font-size: 1rem;
    }

    .footer-desc,
    .footer-links a,
    .footer-contact p {
        font-size: 1.08rem;
    }
}

@media (max-width: 768px) {
    .section:is(.qualifications, .services, .team, .partners, .contact) .section-header h2 {
        font-size: clamp(2.26rem, 12vw, 4.08rem);
    }

    .section:is(.qualifications, .services, .team, .partners, .contact) .section-desc {
        font-size: 1.1rem;
    }

    .section.qualifications .qualification-copy .cert-card h4,
    .section.services .service-card h4,
    .section.team .role-card h4,
    .section.contact .contact-item h4 {
        font-size: 1.14rem;
    }

    .section.services .service-card p,
    .section.team .role-card p,
    .section.contact .contact-item p,
    .section.contact .contact-item a,
    .footer-desc,
    .footer-links a,
    .footer-contact p {
        font-size: 1.04rem;
    }
}

/* ============================================
   Contact background options
   Switch with: <section data-contact-bg="mountain-tech|meadow-clean|topographic-grid">
   ============================================ */
.section.contact[data-contact-bg] {
    --contact-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(247,253,241,0.76));
    --contact-panel-border: rgba(47,111,85,0.16);
    --contact-panel-shadow: 0 24px 64px rgba(35,83,57,0.15);
    --contact-accent: var(--page-green);
    color: var(--page-ink);
    overflow: hidden;
    isolation: isolate;
    min-height: var(--desktop-page-height, 100dvh) !important;
}

.section.contact[data-contact-bg]::before,
.section.contact[data-contact-bg]::after {
    content: "";
    position: absolute;
    z-index: 0;
    display: block !important;
    pointer-events: none;
}

.section.contact[data-contact-bg] .container {
    position: relative;
    z-index: 2;
}

.section.contact[data-contact-bg] .section-header {
    text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

.section.contact[data-contact-bg] .section-tag {
    color: var(--contact-accent);
    background: rgba(255,255,255,0.80);
    border-color: rgba(47,111,85,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
}

.section.contact[data-contact-bg] .section-header h2 {
    color: var(--page-ink);
}

.section.contact[data-contact-bg] .gradient-text {
    background: linear-gradient(90deg, var(--page-green-deep) 0%, var(--page-green) 50%, var(--page-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.section.contact[data-contact-bg] .section-desc,
.section.contact[data-contact-bg] .contact-item p,
.section.contact[data-contact-bg] .contact-item a {
    color: rgba(20,36,31,0.68);
}

.section.contact[data-contact-bg] .contact-item,
.section.contact[data-contact-bg] .map-placeholder {
    background: var(--contact-panel-bg) !important;
    border: 1px solid var(--contact-panel-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        var(--contact-panel-shadow) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.section.contact[data-contact-bg] .contact-item:hover {
    border-color: rgba(47,111,85,0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        0 28px 74px rgba(35,83,57,0.20) !important;
}

.section.contact[data-contact-bg] .contact-icon {
    color: var(--contact-accent);
    background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(226,244,214,0.76)) !important;
    border: 1px solid rgba(47,111,85,0.13);
}

.section.contact[data-contact-bg] .amap-map-badge {
    color: var(--page-ink);
    background: rgba(255,255,255,0.86);
    border-color: rgba(47,111,85,0.16);
    box-shadow: 0 18px 42px rgba(35,83,57,0.14);
}

.section.contact[data-contact-bg] .amap-map-badge span {
    color: var(--page-ink);
}

.section.contact[data-contact-bg] .amap-map-badge small {
    color: rgba(20,36,31,0.56);
}

.section.contact[data-contact-bg="mountain-tech"] {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0 23%, rgba(255,255,255,0.84) 46%, rgba(247,253,241,0.52) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.52) 44%, rgba(233,247,225,0.66) 100%),
        image-set(url("../images/about-mountain-tech-bg-1600.webp") type("image/webp"), url("../images/about-mountain-tech-bg.png") type("image/png")) center right / cover no-repeat !important;
}

.section.contact[data-contact-bg="mountain-tech"]::before {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(47,111,85,0.08) 0 1px, transparent 1px),
        linear-gradient(180deg, rgba(47,111,85,0.06) 0 1px, transparent 1px),
        radial-gradient(ellipse at 16% 18%, rgba(255,255,255,0.88), transparent 28%),
        radial-gradient(ellipse at 78% 18%, rgba(244,195,107,0.16), transparent 32%);
    background-size: 58px 58px, 58px 58px, auto, auto;
    opacity: 0.68;
}

.section.contact[data-contact-bg="mountain-tech"]::after {
    inset: auto 0 0 0;
    height: clamp(150px, 17vw, 248px);
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(231,247,225,0.62) 68%, rgba(246,252,241,0.94) 100%);
}

.section.contact[data-contact-bg="meadow-clean"] {
    --contact-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(249,254,245,0.80));
    --contact-panel-shadow: 0 24px 66px rgba(73,113,54,0.16);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.58) 38%, rgba(245,252,237,0.58) 70%, rgba(226,243,216,0.88) 100%),
        image-set(url("../images/hero-mountain-meadow-bg-1920.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center 46% / cover no-repeat !important;
}

.section.contact[data-contact-bg="meadow-clean"]::before {
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 16%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.32) 24%, transparent 46%),
        radial-gradient(ellipse at 78% 20%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.26) 25%, transparent 48%),
        radial-gradient(ellipse at 72% 88%, rgba(120,168,95,0.18) 0%, transparent 44%);
    opacity: 0.86;
}

.section.contact[data-contact-bg="meadow-clean"]::after {
    inset: auto -6vw -68px -6vw;
    height: clamp(210px, 23vw, 330px);
    background:
        radial-gradient(70% 78% at 20% 100%, rgba(120,168,95,0.24), transparent 68%),
        radial-gradient(68% 76% at 80% 100%, rgba(244,195,107,0.16), transparent 66%),
        linear-gradient(180deg, transparent 0%, rgba(85,142,67,0.15) 56%, rgba(47,111,85,0.22) 100%);
}

.section.contact[data-contact-bg="topographic-grid"] {
    --contact-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(241,250,235,0.72));
    --contact-panel-border: rgba(47,111,85,0.18);
    --contact-panel-shadow: 0 24px 68px rgba(24,54,42,0.13);
    background:
        radial-gradient(ellipse at 14% 12%, rgba(255,255,255,0.96), transparent 31%),
        radial-gradient(ellipse at 88% 16%, rgba(244,195,107,0.20), transparent 29%),
        radial-gradient(ellipse at 72% 86%, rgba(120,168,95,0.22), transparent 38%),
        linear-gradient(180deg, #fffdf8 0%, #fbfff7 58%, #edf7e6 100%) !important;
}

.section.contact[data-contact-bg="topographic-grid"]::before {
    inset: 0;
    background:
        radial-gradient(closest-side at 76% 38%, transparent 0 58%, rgba(47,111,85,0.10) 59% 60%, transparent 61%),
        radial-gradient(closest-side at 76% 38%, transparent 0 44%, rgba(47,111,85,0.08) 45% 46%, transparent 47%),
        radial-gradient(closest-side at 76% 38%, transparent 0 30%, rgba(47,111,85,0.07) 31% 32%, transparent 33%),
        linear-gradient(90deg, rgba(47,111,85,0.08) 0 1px, transparent 1px),
        linear-gradient(180deg, rgba(47,111,85,0.06) 0 1px, transparent 1px);
    background-size: auto, auto, auto, 54px 54px, 54px 54px;
    opacity: 0.72;
}

.section.contact[data-contact-bg="topographic-grid"]::after {
    right: -12vw;
    bottom: -18vw;
    width: min(760px, 56vw);
    height: min(760px, 56vw);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(47,111,85,0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 50% 50%, rgba(47,111,85,0.12) 0%, rgba(47,111,85,0.07) 42%, transparent 68%);
    background-size: 22px 22px, auto;
    opacity: 0.72;
}

@media (max-width: 768px) {
    .section.contact[data-contact-bg="mountain-tech"] {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.76) 48%, rgba(234,247,225,0.86) 100%),
            image-set(url("../images/about-mountain-tech-bg-900.webp") type("image/webp"), url("../images/about-mountain-tech-bg.png") type("image/png")) 58% top / auto 100% no-repeat !important;
    }

    .section.contact[data-contact-bg="meadow-clean"] {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.66) 42%, rgba(232,246,220,0.90) 100%),
            image-set(url("../images/hero-mountain-meadow-bg-960.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center top / cover no-repeat !important;
    }

    .section.contact[data-contact-bg="topographic-grid"]::after {
        width: 420px;
        height: 420px;
        right: -190px;
        bottom: -160px;
    }
}

/* Minimal contact backgrounds
   Switch with: data-contact-bg="warm-paper|soft-meadow|quiet-green" */
.section.contact[data-contact-bg="warm-paper"],
.section.contact[data-contact-bg="soft-meadow"],
.section.contact[data-contact-bg="quiet-green"] {
    --contact-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.68));
    --contact-panel-border: rgba(47,111,85,0.12);
    --contact-panel-shadow: 0 22px 56px rgba(42,73,54,0.10);
    --contact-accent: #2f6f55;
}

.section.contact[data-contact-bg="warm-paper"] {
    background:
        radial-gradient(ellipse at 15% 12%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.58) 24%, transparent 48%),
        radial-gradient(ellipse at 86% 20%, rgba(244,195,107,0.14) 0%, transparent 30%),
        linear-gradient(180deg, #fffdf8 0%, #ffffff 48%, #f5fbef 100%) !important;
}

.section.contact[data-contact-bg="warm-paper"]::before {
    inset: 0;
    opacity: 0.74;
    background:
        radial-gradient(ellipse at 12% 86%, rgba(120,168,95,0.12), transparent 36%),
        radial-gradient(ellipse at 88% 92%, rgba(47,111,85,0.10), transparent 40%);
}

.section.contact[data-contact-bg="warm-paper"]::after {
    inset: auto 0 0 0;
    height: clamp(120px, 14vw, 210px);
    opacity: 0.72;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(233,247,224,0.62) 82%, rgba(246,252,241,0.92));
}

.section.contact[data-contact-bg="soft-meadow"] {
    --contact-panel-shadow: 0 22px 58px rgba(69,103,49,0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.74) 45%, rgba(245,252,238,0.82) 100%),
        image-set(url("../images/hero-mountain-meadow-bg-1920.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center 48% / cover no-repeat !important;
}

.section.contact[data-contact-bg="soft-meadow"]::before {
    inset: 0;
    opacity: 0.82;
    background:
        radial-gradient(ellipse at 22% 16%, rgba(255,255,255,0.84), transparent 38%),
        radial-gradient(ellipse at 78% 18%, rgba(255,255,255,0.72), transparent 36%);
}

.section.contact[data-contact-bg="soft-meadow"]::after {
    inset: auto 0 0 0;
    height: clamp(150px, 16vw, 240px);
    opacity: 0.52;
    background: linear-gradient(180deg, transparent 0%, rgba(122,169,94,0.12) 54%, rgba(70,126,61,0.20) 100%);
}

.section.contact[data-contact-bg="quiet-green"] {
    --contact-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(249,254,244,0.66));
    background:
        radial-gradient(ellipse at 20% 15%, rgba(255,255,255,0.94), transparent 32%),
        radial-gradient(ellipse at 84% 18%, rgba(255,255,255,0.76), transparent 34%),
        radial-gradient(ellipse at 72% 86%, rgba(120,168,95,0.16), transparent 42%),
        linear-gradient(180deg, #fbfff8 0%, #ffffff 46%, #edf7e6 100%) !important;
}

.section.contact[data-contact-bg="quiet-green"]::before {
    inset: 0;
    opacity: 0.62;
    background:
        radial-gradient(ellipse at 18% 72%, rgba(47,111,85,0.08), transparent 38%),
        radial-gradient(ellipse at 88% 78%, rgba(244,195,107,0.10), transparent 36%);
}

.section.contact[data-contact-bg="quiet-green"]::after {
    left: 50%;
    bottom: -180px;
    width: min(760px, 76vw);
    height: min(420px, 42vw);
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: 0.40;
    background: radial-gradient(ellipse, rgba(47,111,85,0.18), transparent 68%);
}

@media (max-width: 768px) {
    .section.contact[data-contact-bg="warm-paper"],
    .section.contact[data-contact-bg="quiet-green"] {
        background:
            radial-gradient(ellipse at 16% 10%, rgba(255,255,255,0.92), transparent 30%),
            linear-gradient(180deg, #fffdf8 0%, #ffffff 50%, #f1faea 100%) !important;
    }

    .section.contact[data-contact-bg="soft-meadow"] {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72) 44%, rgba(239,248,229,0.92)),
            image-set(url("../images/hero-mountain-meadow-bg-960.webp") type("image/webp"), url("../images/hero-mountain-meadow-bg.jpg") type("image/jpeg")) center top / cover no-repeat !important;
    }
}

/* Accessibility and production-readiness refinements */
.skip-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    color: #0a1628;
    font-weight: 700;
    box-shadow: 0 14px 34px rgba(6,14,26,0.20);
    transform: translateY(-160%);
    transition: transform 0.22s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid rgba(0,102,255,0.55);
    outline-offset: 3px;
}

.contact-pending,
.footer-icp > span:not(.footer-record-text),
.footer-police > span:not(.footer-record-text) {
    color: rgba(255,255,255,0.58);
}

.footer-icp > span:not(.footer-record-text),
.footer-police > span:not(.footer-record-text) {
    color: #111;
    font-family: SimHei, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    font-weight: 700;
}

.section.contact[data-contact-bg] .contact-pending {
    color: rgba(20,36,31,0.58);
}

.footer-social-item {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: default;
}

.back-to-top:focus-visible,
.cert-modal-close:focus-visible,
.cert-page-btn:focus-visible,
.cert-tab:focus-visible,
.cert-card:focus-visible,
.btn:focus-visible,
.about-more-link:focus-visible {
    outline: 2px solid rgba(255,255,255,0.66);
    outline-offset: 3px;
}

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

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

/* Mobile inner-page presentation polish moved to css/mobile-inner.css. */

/* ============================================
   Solution Viewer
   ============================================ */
.services-grid .service-card {
    display: flex;
    flex-direction: column;
}

.service-solution-btn {
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(13,69,88,0.34);
    border-radius: 12px;
    background: linear-gradient(135deg, #0b5f74 0%, #0b806f 100%);
    color: #ffffff;
    font-family: var(--font-cn);
    font-size: 0.92rem;
    font-weight: 800;
    text-shadow: 0 1px 1px rgba(0,0,0,0.28);
    cursor: pointer;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
    box-shadow: 0 12px 30px rgba(11,95,116,0.22);
}

.service-solution-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(135,231,255,0.56);
    background: linear-gradient(135deg, #07536d 0%, #08795f 100%);
    box-shadow: 0 16px 38px rgba(8,121,95,0.30);
}

.service-solution-btn:active {
    transform: translateY(0) scale(0.98);
}

.solution-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.solution-modal.active {
    opacity: 1;
    pointer-events: all;
}

.solution-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 28% 12%, rgba(0,200,255,0.20), transparent 36%),
        radial-gradient(ellipse at 82% 86%, rgba(255,159,252,0.14), transparent 38%),
        rgba(3,8,16,0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.solution-modal-content {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: min(88vh, 860px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,0.12), transparent 34%),
        linear-gradient(180deg, #11213a 0%, #071326 100%);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 30px 90px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.14);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-modal.active .solution-modal-content {
    transform: translateY(0) scale(1);
}

.solution-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(12,25,44,0.96);
}

.solution-modal-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: #87e7ff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.solution-modal-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.18;
}

.solution-modal-close {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.solution-modal-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.solution-modal-body {
    min-height: 0;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    overflow: hidden;
}

.solution-category-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-right: 1px solid rgba(255,255,255,0.10);
    background: rgba(9,20,36,0.98);
    overflow-y: auto;
}

.solution-category-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: rgba(255,255,255,0.68);
    font-family: var(--font-cn);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.solution-category-btn i {
    width: 22px;
    color: #87e7ff;
    text-align: center;
}

.solution-category-btn:hover,
.solution-category-btn.active {
    color: #fff;
    border-color: rgba(0,200,255,0.24);
    background: rgba(0,200,255,0.10);
}

.solution-detail {
    min-width: 0;
    padding: 24px;
    overflow-y: auto;
    background: #071326;
}

.solution-detail-hero {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.solution-detail-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background:
        radial-gradient(circle at 40% 20%, rgba(255,255,255,0.18), transparent 44%),
        rgba(0,200,255,0.12);
    border: 1px solid rgba(0,200,255,0.22);
    color: #87e7ff;
    font-size: 1.8rem;
}

.solution-detail-summary {
    max-width: 780px;
    margin: 0 0 14px;
    color: rgba(255,255,255,0.76);
    font-size: 1.02rem;
    line-height: 1.82;
}

.solution-tag-list,
.solution-scenario-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.solution-tag,
.solution-scenario-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 10px;
    background: rgba(255,255,255,0.075);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.74);
    font-size: 0.84rem;
    font-weight: 700;
}

.solution-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.solution-quick-item,
.solution-subpanel,
.solution-architecture-item,
.solution-module-card,
.solution-value-item,
.solution-delivery-step {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.solution-quick-item {
    padding: 14px;
}

.solution-quick-item span,
.solution-value-item span {
    display: block;
    color: rgba(255,255,255,0.50);
    font-size: 0.78rem;
}

.solution-quick-item strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 1.08rem;
}

.solution-section {
    margin-top: 18px;
}

.solution-section h4 {
    margin: 0 0 12px;
    color: rgba(255,255,255,0.94);
    font-size: 1.02rem;
}

.solution-section-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.solution-subpanel {
    padding: 18px;
}

.solution-check-list {
    display: grid;
    gap: 10px;
}

.solution-check-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    color: rgba(255,255,255,0.68);
    font-size: 0.92rem;
    line-height: 1.62;
}

.solution-check-list i {
    margin-top: 5px;
    color: #87e7ff;
    font-size: 0.72rem;
}

.solution-architecture,
.solution-module-grid,
.solution-value-grid {
    display: grid;
    gap: 12px;
}

.solution-architecture {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.solution-module-grid,
.solution-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-architecture-item,
.solution-module-card,
.solution-value-item {
    padding: 16px;
}

.solution-step-number {
    display: inline-flex;
    margin-bottom: 16px;
    color: rgba(135,231,255,0.78);
    font-family: var(--font-en);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.solution-architecture-item strong,
.solution-module-card strong,
.solution-value-item strong {
    display: block;
    color: #fff;
    font-size: 0.96rem;
}

.solution-architecture-item p,
.solution-module-card p {
    margin-top: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 0.86rem;
    line-height: 1.62;
}

.solution-value-item strong {
    margin-bottom: 6px;
    color: #87e7ff;
}

.solution-delivery-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.solution-delivery-step {
    padding: 13px 10px;
    text-align: center;
}

.solution-delivery-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    border-radius: 9px;
    background: rgba(0,200,255,0.13);
    color: #87e7ff;
    font-family: var(--font-en);
    font-size: 0.78rem;
    font-weight: 800;
}

.solution-delivery-step strong {
    display: block;
    color: rgba(255,255,255,0.78);
    font-size: 0.82rem;
}

.solution-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.solution-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.80);
    font-size: 0.9rem;
    font-weight: 800;
    transition: var(--transition);
}

.solution-action.primary {
    border-color: rgba(0,200,255,0.28);
    background: linear-gradient(135deg, rgba(0,102,255,0.92), rgba(0,200,255,0.72));
    color: #fff;
}

.solution-action:hover {
    transform: translateY(-2px);
    border-color: rgba(0,200,255,0.42);
    color: #fff;
}

.service-solution-btn:focus-visible,
.solution-modal-close:focus-visible,
.solution-category-btn:focus-visible,
.solution-action:focus-visible {
    outline: 2px solid rgba(135,231,255,0.72);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .solution-architecture,
    .solution-delivery-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solution-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .solution-modal {
        padding: 12px;
        align-items: stretch;
    }

    .solution-modal-content {
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

    .solution-modal-header {
        padding: 18px;
    }

    .solution-modal-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .solution-category-rail {
        flex-direction: row;
        gap: 8px;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.10);
        overflow-x: auto;
    }

    .solution-category-btn {
        flex: 0 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }

    .solution-detail {
        padding: 16px;
    }

    .solution-detail-hero,
    .solution-section-split,
    .solution-module-grid,
    .solution-value-grid {
        grid-template-columns: 1fr;
    }

    .solution-detail-icon {
        display: none;
    }

    .solution-actions {
        flex-direction: column;
    }
}

/* ============================================
   Standalone Solution Page
   ============================================ */
.solution-page-body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 15% 12%, rgba(47,111,85,0.16), transparent 38%),
        radial-gradient(ellipse at 88% 4%, rgba(244,195,107,0.10), transparent 32%),
        linear-gradient(180deg, #f8fbf5 0%, #eef6e8 100%);
    color: #173127;
}

.solution-page-body::after {
    opacity: 0.025;
}

.solution-page-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1500px, calc(100% - 36px));
    margin: 18px auto 0;
    padding: 12px 14px 12px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(47,111,85,0.12);
    box-shadow: 0 18px 54px rgba(47,111,85,0.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.solution-brand,
.solution-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #173127;
    font-weight: 800;
}

.solution-brand {
    min-width: 0;
}

.solution-brand span {
    white-space: nowrap;
}

.solution-back-link {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #123b30;
    color: #fff;
    box-shadow: 0 12px 28px rgba(18,59,48,0.18);
    transition: var(--transition);
}

.solution-back-link:hover {
    transform: translateY(-2px);
    background: #0f4b3a;
}

.solution-page-shell {
    width: min(1500px, calc(100% - 36px));
    margin: 34px auto 80px;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 28px;
}

.solution-page-footer {
    width: min(1500px, calc(100% - 36px));
    margin: -34px auto 34px;
    position: relative;
    z-index: 2;
}

.solution-page-footer .footer-bottom {
    border-top: 1px solid rgba(20,36,31,0.12);
}

.solution-page-tabs {
    position: sticky;
    top: 102px;
    align-self: start;
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(47,111,85,0.12);
    box-shadow: 0 16px 44px rgba(47,111,85,0.08);
}

.solution-page-tab {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 62px;
    padding: 13px 20px;
    border-radius: 16px;
    color: rgba(23,49,39,0.68);
    font-weight: 800;
    transition: var(--transition);
}

.solution-page-tab i {
    width: 22px;
    color: #2f6f55;
    text-align: center;
}

.solution-page-tab:hover,
.solution-page-tab.active {
    color: #0d2b22;
    background: rgba(47,111,85,0.10);
}

.solution-page-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.solution-slide-header,
.solution-slide-card {
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(47,111,85,0.12);
    box-shadow: 0 18px 52px rgba(47,111,85,0.08);
}

.solution-slide-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 24px;
}

.solution-slide-header h1 {
    margin: 0;
    color: #0f2921;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.solution-slide-count {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(47,111,85,0.10);
    color: #173127;
    font-weight: 900;
}

.solution-slide-list {
    display: grid;
    gap: 34px;
}

.solution-slide-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    scroll-margin-top: 190px;
}

.solution-slide-img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(26,61,47,0.16);
}

.solution-slide-card figcaption {
    position: absolute;
    right: 16px;
    bottom: 14px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: 999px;
    color: rgba(23,49,39,0.68);
    background: rgba(255,255,255,0.78);
    box-shadow: 0 10px 26px rgba(26,61,47,0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.84rem;
    font-weight: 900;
    text-align: center;
}

.solution-page-hero,
.solution-page-section,
.solution-page-metric,
.solution-page-panel,
.solution-page-card,
.solution-page-cta {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(47,111,85,0.12);
    box-shadow: 0 18px 52px rgba(47,111,85,0.08);
}

.solution-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: 30px;
    align-items: center;
    padding: clamp(28px, 5vw, 54px);
    border-radius: 26px;
    overflow: hidden;
    position: relative;
}

.solution-page-hero::before {
    content: "";
    position: absolute;
    inset: auto -14% -46% auto;
    width: min(460px, 44vw);
    height: min(460px, 44vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,111,85,0.12), transparent 66%);
    pointer-events: none;
}

.solution-page-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    color: #2f6f55;
    font-size: 0.9rem;
    font-weight: 900;
}

.solution-page-hero h1 {
    margin: 0;
    color: #0f2921;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    line-height: 1.06;
    letter-spacing: 0;
    text-wrap: balance;
}

.solution-page-hero p {
    max-width: 780px;
    margin: 18px 0 0;
    color: rgba(23,49,39,0.72);
    font-size: 1.08rem;
    line-height: 1.9;
}

.solution-page-hero-icon {
    width: 124px;
    height: 124px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at 38% 20%, rgba(255,255,255,0.74), transparent 42%),
        linear-gradient(135deg, rgba(47,111,85,0.18), rgba(244,195,107,0.14));
    color: #2f6f55;
    font-size: 3rem;
}

.solution-page-tags,
.solution-page-scene-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.solution-page-tags span,
.solution-page-scene-tags span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(47,111,85,0.09);
    color: #173127;
    font-weight: 800;
    font-size: 0.88rem;
}

.solution-page-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.solution-page-metric {
    padding: 18px;
    border-radius: 18px;
}

.solution-page-metric span,
.solution-page-value span {
    display: block;
    color: rgba(23,49,39,0.55);
    font-size: 0.86rem;
    font-weight: 700;
}

.solution-page-metric strong {
    display: block;
    margin-top: 6px;
    color: #0f2921;
    font-size: 1.45rem;
}

.solution-page-section {
    padding: clamp(22px, 3.5vw, 34px);
    border-radius: 24px;
}

.solution-page-section > h2,
.solution-page-cta h2 {
    margin: 0 0 18px;
    color: #0f2921;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.25;
}

.solution-page-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.solution-page-two > h2 {
    grid-column: 1 / -1;
}

.solution-page-panel,
.solution-page-card {
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.68);
}

.solution-page-panel h3,
.solution-page-card h3 {
    margin: 0 0 12px;
    color: #133429;
    font-size: 1.05rem;
}

.solution-page-checks {
    display: grid;
    gap: 11px;
}

.solution-page-checks li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    color: rgba(23,49,39,0.70);
    line-height: 1.72;
}

.solution-page-checks i {
    margin-top: 7px;
    color: #2f6f55;
    font-size: 0.75rem;
}

.solution-page-architecture {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.solution-page-module-grid,
.solution-page-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.solution-page-number {
    display: inline-flex;
    margin-bottom: 24px;
    color: #2f6f55;
    font-family: var(--font-en);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.solution-page-card p {
    margin: 0;
    color: rgba(23,49,39,0.64);
    line-height: 1.72;
}

.solution-page-value {
    padding: 15px;
    border-radius: 14px;
    background: rgba(47,111,85,0.08);
}

.solution-page-value strong {
    display: block;
    margin-bottom: 5px;
    color: #2f6f55;
    font-size: 1rem;
}

.solution-page-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.solution-page-step {
    min-height: 96px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    border-radius: 16px;
    background: rgba(47,111,85,0.08);
    color: #173127;
    text-align: center;
    font-weight: 800;
}

.solution-page-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #2f6f55;
    color: #fff;
    font-family: var(--font-en);
}

.solution-page-cta {
    padding: clamp(24px, 4vw, 42px);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 82% 18%, rgba(244,195,107,0.18), transparent 34%),
        #123b30;
    color: #fff;
}

.solution-page-cta h2 {
    color: #fff;
}

.solution-page-cta p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,0.74);
    line-height: 1.82;
}

.solution-page-primary-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 11px 18px;
    border-radius: 12px;
    background: #ffffff;
    color: #123b30;
    font-weight: 900;
    transition: var(--transition);
}

.solution-page-primary-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

@media (max-width: 980px) {
    .solution-page-shell {
        grid-template-columns: 1fr;
    }

    .solution-page-tabs {
        position: sticky;
        top: 82px;
        z-index: 12;
        display: flex;
        overflow-x: auto;
    }

    .solution-page-tab {
        flex: 0 0 auto;
    }

    .solution-page-architecture,
    .solution-page-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .solution-page-nav {
        width: min(100% - 24px, 560px);
        margin-top: 12px;
        padding: 10px;
        gap: 8px;
    }

    .solution-brand span {
        font-size: clamp(0.72rem, 2.7vw, 0.96rem);
    }

    .solution-back-link {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 0.9rem;
    }

    .solution-page-shell {
        width: min(100% - 24px, 560px);
        margin-top: 24px;
        margin-bottom: 48px;
    }

    .solution-slide-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        border-radius: 18px;
    }

    .solution-slide-count {
        min-height: 34px;
        padding: 7px 11px;
        font-size: 0.86rem;
    }

    .solution-slide-list {
        gap: 18px;
    }

    .solution-slide-card {
        border-radius: 12px;
        scroll-margin-top: 168px;
    }

    .solution-slide-img {
        border-radius: 12px;
    }

    .solution-slide-card figcaption {
        right: 8px;
        bottom: 8px;
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .solution-page-hero {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .solution-page-hero-icon {
        display: none;
    }

    .solution-page-metrics,
    .solution-page-two,
    .solution-page-module-grid,
    .solution-page-value-grid {
        grid-template-columns: 1fr;
    }

    .solution-page-architecture,
    .solution-page-steps {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 0px) {
    body {
        overflow-x: hidden;
    }

    .section:not(.hero) {
        min-height: auto !important;
        padding-top: 72px !important;
        padding-bottom: 86px !important;
        overflow: hidden;
    }

    .section:not(.hero) .container,
    .footer .container {
        width: min(100% - 32px, 560px);
        padding-left: 0;
        padding-right: 0;
    }

    .section:not(.hero) .section-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 28px !important;
        text-align: left;
    }

    .section:not(.hero) .section-tag {
        width: max-content;
        margin-bottom: 2px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 0.78rem !important;
        letter-spacing: 0;
    }

    .section:not(.hero) .section-header h2 {
        margin: 0;
        font-size: clamp(2.05rem, 9.2vw, 2.72rem) !important;
        line-height: 1.06 !important;
        text-wrap: balance;
    }

    .section:not(.hero) .gradient-text {
        background: linear-gradient(90deg, #103428 0%, #2f6f55 52%, #a7541d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .section:not(.hero) .section-desc {
        max-width: 100%;
        margin: 0;
        font-size: 0.98rem !important;
        line-height: 1.78;
        color: rgba(20,36,31,0.66) !important;
    }

    .about-b-layout {
        display: block;
        min-height: auto;
        padding-top: 0 !important;
    }

    .about .about-b-main {
        width: min(100% - 32px, 560px) !important;
        padding-top: 0 !important;
    }

    .about .about-b-main .section-desc {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .about-command-card {
        gap: 22px !important;
        padding: 22px !important;
        border-radius: 18px !important;
    }

    .about-company-copy h3 {
        font-size: 1.18rem;
        line-height: 1.35;
    }

    .about-company-copy p {
        font-size: 0.95rem !important;
        line-height: 1.86 !important;
    }

    .about-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .about-proof-grid .about-proof-card {
        grid-template-columns: 1fr !important;
        justify-items: start;
        min-height: 118px !important;
        padding: 15px 12px !important;
        text-align: left;
    }

    .about-proof-grid .about-proof-card i {
        width: 42px !important;
        height: 42px !important;
        grid-row: auto !important;
        font-size: 1rem !important;
    }

    .about-proof-grid .about-proof-card span {
        font-size: 0.76rem;
    }

    .about-proof-grid .about-proof-card h4 {
        font-size: 1.08rem;
        line-height: 1.24;
    }

    .qualification-command {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .qualification-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 14px !important;
    }

    .qualification-metric {
        padding: 13px 12px !important;
    }

    .qualification-metric strong {
        font-size: 1.72rem !important;
    }

    .qualification-metric span {
        margin-top: 6px;
        font-size: 0.82rem !important;
    }

    .qualifications .cert-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .qualifications .cert-tab {
        width: 100%;
        min-height: 40px;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: 0.82rem !important;
        line-height: 1.25;
        text-align: center;
    }

    .qualification-copy .cert-panels {
        min-height: 0 !important;
    }

    .qualification-copy .cert-panel.active {
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    .qualification-copy .cert-panel.active > .cert-grid {
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    .qualification-copy .cert-card {
        min-height: 0 !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .qualification-copy .cert-card .cert-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }

    .qualification-copy .cert-card h4 {
        margin-bottom: 6px;
        font-size: 1rem !important;
        line-height: 1.36 !important;
    }

    .qualification-copy .cert-card p {
        margin-bottom: 10px;
        font-size: 0.86rem !important;
    }

    .qualification-copy .cert-card .cert-badge {
        padding: 6px 10px;
        font-size: 0.8rem !important;
    }

    .cert-pagination {
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .cert-page-status {
        width: 100%;
        font-size: 0.82rem !important;
    }

    .cert-page-list {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px !important;
    }

    .cert-page-btn {
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 7px 6px !important;
        border-radius: 10px !important;
        font-size: 0.82rem !important;
    }

    .cert-page-nav {
        grid-column: span 2;
    }

    .services-grid,
    .team-roles,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .services-grid {
        grid-auto-rows: auto !important;
    }

    .service-card {
        min-height: 112px !important;
        padding: 18px 18px 18px 76px !important;
        border-radius: 16px !important;
        position: relative;
        display: block !important;
    }

    .service-icon {
        position: absolute;
        top: 18px;
        left: 18px;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        border-radius: 13px !important;
    }

    .service-card h4 {
        margin: 0 0 6px !important;
        font-size: 1.1rem !important;
        line-height: 1.3;
    }

    .service-card p {
        margin: 0;
        font-size: 0.98rem !important;
        line-height: 1.66;
    }

    .role-card {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        align-items: center;
        padding: 18px !important;
        border-radius: 16px !important;
        text-align: left !important;
    }

    .role-icon {
        grid-row: 1 / span 2;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        border-radius: 13px !important;
    }

    .role-card h4 {
        margin: 0 !important;
        font-size: 1.1rem !important;
    }

    .role-card p {
        margin: 0;
        font-size: 0.96rem !important;
        line-height: 1.62;
    }

    .partner-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .partner-logo,
    .partner-logo:nth-child(n) {
        min-width: 0 !important;
        min-height: 116px !important;
        padding: 12px 8px !important;
        border-radius: 14px !important;
        justify-content: center;
    }

    .partner-logo-img {
        width: min(126px, 100%) !important;
        height: 42px !important;
        margin-bottom: 6px !important;
        padding: 7px 8px !important;
        border-radius: 9px !important;
    }

    .partner-logo span {
        max-width: 100%;
        font-size: 0.9rem !important;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .partner-logo small {
        font-size: 0.76rem !important;
        line-height: 1.2;
    }

    .contact-info {
        gap: 10px !important;
    }

    .contact-item {
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .contact-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .contact-item h4 {
        margin-bottom: 3px;
        font-size: 1rem !important;
    }

    .contact-item p,
    .contact-item a {
        font-size: 0.94rem !important;
        line-height: 1.62;
        overflow-wrap: anywhere;
    }

    .section.contact[data-contact-bg] .section-header,
    .section.contact[data-contact-bg] .contact-item {
        text-shadow: none !important;
    }

    .section.contact[data-contact-bg] .section-header h2 .gradient-text {
        background: none !important;
        color: #173d2b !important;
        -webkit-text-fill-color: currentColor !important;
    }

    .contact-map,
    .amap-panel.map-placeholder,
    .amap-container {
        min-height: 278px !important;
    }

    .amap-map-badge {
        width: calc(100% - 24px);
        margin: 12px;
        padding: 12px 13px;
        border-radius: 12px;
    }

    .amap-map-badge span {
        align-items: flex-start;
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .amap-map-badge small {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .footer {
        padding-top: 54px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding-bottom: 28px !important;
    }

    .footer-desc {
        max-width: 100%;
    }

    .footer-links h4,
    .footer-contact h4 {
        margin-bottom: 10px;
    }

    .footer-links ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
    }

    .footer-links li {
        margin: 0;
    }
}

@media (max-width: 0px) {
    .about-proof-grid,
    .partner-logos {
        grid-template-columns: 1fr !important;
    }

    .cert-page-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Keep partner pagination from changing section height on sparse final pages. */
.section.partners .partner-logos {
    grid-auto-rows: minmax(92px, auto);
    min-height: 258px;
}

@media (max-width: 860px) {
    .section.partners .partner-logos {
        grid-auto-rows: minmax(116px, auto);
        min-height: 524px;
    }
}

@media (max-width: 560px) {
    .section.partners .partner-logos {
        grid-auto-rows: minmax(116px, auto);
        min-height: 1001px;
    }
}

/* Certificate modal refinement: make full-page certificates readable at a glance. */
.cert-modal {
    padding: clamp(10px, 1.6vw, 18px);
}

.cert-modal-backdrop {
    background:
        radial-gradient(circle at 50% 0%, rgba(0,200,255,0.18), transparent 34%),
        rgba(3,9,18,0.86);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.cert-modal-content {
    width: min(1120px, calc(100vw - 28px));
    max-width: min(1120px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(18,33,52,0.98), rgba(7,18,32,0.99));
    border: 1px solid rgba(48,65,87,0.74);
    box-shadow:
        0 34px 90px rgba(0,0,0,0.58),
        inset 0 1px 0 rgba(94,115,140,0.18);
}

.cert-modal-header {
    min-height: 58px;
    padding: 12px 14px 12px 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    border-bottom: 1px solid rgba(45,63,84,0.78);
}

.cert-modal-title {
    padding-right: 18px;
    color: rgba(255,255,255,0.96);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 800;
    line-height: 1.35;
}

.cert-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(72,90,113,0.66);
    color: rgba(255,255,255,0.82);
    font-size: 1.25rem;
}

.cert-modal-close:hover {
    color: #fff;
    background: rgba(0,200,255,0.14);
    border-color: rgba(0,200,255,0.34);
    transform: translateY(-1px);
}

.cert-modal-body {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 12px;
}

.cert-modal-intro {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(48,66,89,0.72);
    box-shadow: inset 0 1px 0 rgba(91,111,136,0.12);
    text-align: left;
}

.cert-modal-category {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 9px;
    border-radius: 10px;
    color: #9fefff;
    background: rgba(0,200,255,0.10);
    border-color: rgba(0,200,255,0.22);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.cert-modal-meta {
    max-width: none;
    margin: 0;
    color: rgba(232,244,255,0.68);
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: right;
}

.cert-modal-preview {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: auto;
    align-items: stretch;
    justify-items: stretch;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(70,105,138,0.22), rgba(70,105,138,0) 48%),
        linear-gradient(180deg, rgba(25,39,56,0.96) 0%, rgba(14,25,39,0.98) 100%);
    border: 1px solid rgba(63,83,106,0.56);
    box-shadow:
        inset 0 1px 0 rgba(142,164,190,0.12),
        inset 0 0 42px rgba(2,9,18,0.22);
    overscroll-behavior: contain;
    scrollbar-color: rgba(118,135,154,0.72) rgba(13,24,37,0.96);
    scrollbar-width: thin;
}

.cert-modal-preview::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.cert-modal-preview::-webkit-scrollbar-track {
    background: rgba(13,24,37,0.96);
}

.cert-modal-preview::-webkit-scrollbar-thumb {
    background: rgba(118,135,154,0.72);
    border: 3px solid rgba(13,24,37,0.96);
    border-radius: 999px;
}

.cert-modal-pages {
    width: 100%;
    min-height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: clamp(10px, 1.7vw, 18px);
}

.cert-modal-page {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    background: #fff;
    box-shadow:
        0 18px 44px rgba(20,36,54,0.22),
        0 0 0 1px rgba(19,31,45,0.06);
    overflow: hidden;
}

.cert-modal-page-image,
.cert-modal-page-canvas {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 178px);
    object-fit: contain;
    display: block;
    background: #fff;
}

.cert-modal-page figcaption {
    padding: 7px 10px 9px;
    color: rgba(19,31,45,0.62);
    background: #fff;
    border-top: 1px solid rgba(19,31,45,0.08);
    font-size: 0.74rem;
    font-weight: 800;
    text-align: center;
}

.cert-modal-preview.is-multipage .cert-modal-pages {
    min-height: auto;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.cert-modal-preview.is-multipage .cert-modal-page {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
}

.cert-modal-preview.is-multipage .cert-modal-page-image,
.cert-modal-preview.is-multipage .cert-modal-page-canvas {
    flex: 0 0 auto;
}

.cert-modal-original {
    justify-self: end;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 11px;
    color: #082033;
    background: linear-gradient(135deg, #b7f4ff, #8edfff);
    border: 1px solid rgba(255,255,255,0.44);
    box-shadow: 0 10px 24px rgba(0,200,255,0.16);
    font-size: 0.82rem;
    font-weight: 900;
}

.cert-modal-original:hover {
    color: #061827;
    background: linear-gradient(135deg, #d6fbff, #9ceaff);
    border-color: rgba(255,255,255,0.62);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .cert-modal {
        padding: 8px;
    }

    .cert-modal-content {
        width: min(100%, 430px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 16px;
    }

    .cert-modal-header {
        min-height: 48px;
        padding: 9px 9px 9px 13px;
    }

    .cert-modal-title {
        font-size: 0.96rem;
        line-height: 1.3;
    }

    .cert-modal-close {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .cert-modal-body {
        padding: 8px;
        gap: 8px;
    }

    .cert-modal-intro {
        min-height: 0;
        padding: 8px 9px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    .cert-modal-category {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .cert-modal-meta {
        font-size: 0.72rem;
        line-height: 1.35;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cert-modal-preview {
        border-radius: 12px;
    }

    .cert-modal-pages {
        gap: 10px;
        padding: 9px;
    }

    .cert-modal-page {
        border-radius: 10px;
        box-shadow: 0 10px 26px rgba(20,36,54,0.20);
    }

    .cert-modal-page-image,
    .cert-modal-page-canvas {
        max-height: calc(100dvh - 164px);
    }

    .cert-modal-preview.is-multipage .cert-modal-pages {
        min-height: auto;
        justify-content: flex-start;
    }

    .cert-modal-original {
        width: 100%;
        justify-self: stretch;
        min-height: 36px;
        font-size: 0.76rem;
    }
}

/* Core business option B: compact horizontal service cards. */
.section.services .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto !important;
    gap: 18px;
}

.section.services .service-card {
    min-height: 126px;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 12px;
    align-items: center;
    align-content: center;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    height: auto !important;
}

.section.services .service-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    border-radius: 16px !important;
}

.section.services .service-card h4 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.3;
}

.section.services .service-card p {
    display: none !important;
}

.service-card-tags {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

.service-card-tags span {
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(47,111,85,0.12);
    background: rgba(247,251,242,0.74);
    color: rgba(20,36,31,0.62);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.section.services .service-solution-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    width: auto;
    min-width: 112px;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 18px;
    border-radius: 999px;
    color: #173d2b;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(47,111,85,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
    text-shadow: none;
    font-size: 13px;
}

.section.services .service-solution-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--page-green-deep, #173d2b), var(--page-green, #2f6f55));
    border-color: rgba(47,111,85,0.28);
    box-shadow: 0 12px 28px rgba(47,111,85,0.18);
}

@media (max-width: 980px) {
    .section.services .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .section.services .service-card {
        min-height: 0;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
        padding: 14px 16px !important;
        border-radius: 16px !important;
    }

    .section.services .service-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
    }

    .section.services .service-card h4 {
        font-size: 1.06rem !important;
        line-height: 1.22;
    }

    .section.services .service-card-tags {
        gap: 5px;
    }

    .section.services .service-card-tags span {
        padding: 4px 8px;
        font-size: 0.72rem;
        line-height: 1.12;
    }

    .section.services .service-solution-btn {
        grid-column: 2;
        grid-row: 4;
        justify-self: start;
        min-width: 96px;
        min-height: 34px;
        margin-top: 2px !important;
        padding: 0 14px;
        font-size: 0.8rem;
    }
}

/* Final certificate viewer: light archive panel with scroll-only pages. */
.cert-modal {
    padding: clamp(14px, 2vw, 28px);
}

.cert-modal-backdrop {
    background:
        radial-gradient(circle at 50% -8%, rgba(167,224,205,0.38), transparent 34%),
        linear-gradient(135deg, rgba(248,252,249,0.88), rgba(234,247,241,0.84) 48%, rgba(246,241,232,0.86));
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.cert-modal-content {
    width: min(1480px, calc(100vw - 32px));
    max-width: min(1480px, calc(100vw - 32px));
    height: min(920px, calc(100dvh - 40px));
    max-height: calc(100dvh - 40px);
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cert-modal-sidebar {
    align-self: start;
    min-width: 0;
    min-height: 0;
    display: block;
    padding: clamp(18px, 2vw, 26px);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.78), rgba(226,244,237,0.48));
    border: 1px solid rgba(139,177,163,0.26);
    box-shadow:
        0 30px 80px rgba(101,136,122,0.14),
        inset 0 1px 0 rgba(255,255,255,0.86);
    backdrop-filter: blur(24px) saturate(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    text-align: left;
}

.cert-modal-category {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    margin: 0 0 20px;
    padding: 0 12px;
    border-radius: 12px;
    color: #3f766f;
    background: rgba(219,248,241,0.82);
    border: 1px solid rgba(111,184,166,0.16);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.cert-modal-title {
    margin: 0;
    padding: 0;
    color: #263f36;
    font-size: clamp(1.32rem, 2.2vw, 1.82rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.cert-modal-meta {
    max-width: none;
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.50);
    border: 1px solid rgba(139,177,163,0.16);
    color: #748a82;
    font-size: 0.94rem;
    line-height: 1.75;
    text-align: left;
}

.cert-modal-body {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    padding: 0;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.70), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.58), rgba(220,241,234,0.36));
    border: 1px solid rgba(139,177,163,0.22);
    box-shadow:
        0 32px 88px rgba(101,136,122,0.14),
        inset 0 1px 0 rgba(255,255,255,0.88);
    backdrop-filter: blur(24px) saturate(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.cert-modal-toolbar {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 22px;
    color: #60766e;
    border-bottom: 1px solid rgba(139,177,163,0.16);
    font-size: 0.9rem;
    font-weight: 800;
}

.cert-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cert-modal-close,
.cert-modal-original {
    display: inline-grid;
    place-items: center;
    min-height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(126,153,165,0.24);
    color: #526a61;
    box-shadow: 0 10px 26px rgba(101,132,144,0.12);
    transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease;
}

.cert-modal-original {
    min-width: 68px;
    padding: 0 14px;
    font-size: 0.84rem;
    font-weight: 800;
}

.cert-modal-close {
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.cert-modal-close:hover,
.cert-modal-original:hover {
    color: #294238;
    background: rgba(255,255,255,0.9);
    border-color: rgba(96,154,140,0.34);
    transform: translateY(-1px);
}

.cert-modal-preview {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: auto;
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overscroll-behavior: contain;
    scrollbar-color: rgba(113,150,164,0.48) rgba(255,255,255,0.42);
    scrollbar-width: thin;
}

.cert-modal-preview::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.cert-modal-preview::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.42);
    border-radius: 999px;
}

.cert-modal-preview::-webkit-scrollbar-thumb {
    background: rgba(113,150,164,0.48);
    border: 3px solid rgba(255,255,255,0.42);
    border-radius: 999px;
}

.cert-modal-pages,
.cert-modal-preview.is-multipage .cert-modal-pages {
    width: 100%;
    min-height: auto;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding: 30px 0 48px;
}

.cert-modal-page,
.cert-modal-preview.is-multipage .cert-modal-page {
    flex: 0 0 auto;
    width: min(820px, calc(100% - 56px));
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    border-radius: 12px;
    background: #fff8e9;
    box-shadow:
        0 24px 58px rgba(119,108,85,0.15),
        0 0 0 1px rgba(255,255,255,0.88);
    overflow: hidden;
}

.cert-modal-page-image,
.cert-modal-page-canvas,
.cert-modal-preview.is-multipage .cert-modal-page-image,
.cert-modal-preview.is-multipage .cert-modal-page-canvas {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
    background: #fff8e9;
}

.cert-modal-page figcaption {
    padding: 8px 12px 10px;
    color: #7c857f;
    background: rgba(255,255,255,0.72);
    border-top: 1px solid rgba(175,158,116,0.14);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.cert-modal-loading {
    color: #60766e;
}

@media (min-width: 769px) {
    .cert-modal-content {
        width: min(1974px, calc(100vw - 42px));
        max-width: min(1974px, calc(100vw - 42px));
        height: min(1226px, calc(100dvh - 54px));
        max-height: calc(100dvh - 54px);
    }

    .cert-modal-page,
    .cert-modal-preview.is-multipage .cert-modal-page {
        width: min(1094px, calc(100% - 74px));
    }
}

@media (max-width: 900px) {
    .cert-modal {
        padding: 12px;
    }

    .cert-modal-content {
        width: min(100%, 560px);
        max-width: calc(100vw - 24px);
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    .cert-modal-sidebar {
        padding: 16px 18px;
        border-radius: 22px;
    }

    .cert-modal-category {
        min-height: 28px;
        margin-bottom: 10px;
        font-size: 0.72rem;
    }

    .cert-modal-title {
        font-size: 1.04rem;
    }

    .cert-modal-meta {
        margin-top: 6px;
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .cert-modal-body {
        grid-template-rows: 54px minmax(0, 1fr);
        border-radius: 22px;
    }

    .cert-modal-toolbar {
        padding: 0 12px;
    }

    .cert-modal-pages,
    .cert-modal-preview.is-multipage .cert-modal-pages {
        gap: 18px;
        padding: 18px 0 28px;
    }

    .cert-modal-page,
    .cert-modal-preview.is-multipage .cert-modal-page {
        width: min(100%, 520px);
    }
}

/* Final request overrides. */
.hero-bg,
.hero-bg *,
.hero-bg::before,
.hero-bg::after,
.light-pillar-stage,
.light-pillar-stage * {
    pointer-events: none !important;
}

.hero-content,
.hero-copy,
.hero-actions,
.hero .btn {
    position: relative;
    z-index: 10;
}

.hero .btn {
    touch-action: manipulation;
}

.amap-panel {
    cursor: default !important;
}

.amap-map-badge {
    display: grid;
    gap: 10px;
}

.amap-location-text {
    margin: 0;
    color: rgba(20,36,31,0.86);
    font-size: 1.02rem;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    -webkit-text-fill-color: currentColor !important;
}

.amap-nav-entry {
    position: relative;
    z-index: 3;
    margin-top: 2px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    color: #173d2b !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.06) 38%),
        linear-gradient(135deg, #d9f0e4 0%, #c9e8d8 58%, #f1dcc2 100%) !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.62),
        0 10px 22px rgba(74,122,93,0.16) !important;
    cursor: pointer;
    -webkit-text-fill-color: currentColor !important;
}

.amap-nav-entry:hover,
.amap-nav-entry:focus-visible {
    color: #173d2b !important;
    transform: translateY(-1px);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.56), rgba(255,255,255,0.14) 38%),
        linear-gradient(135deg, #d9f0e4 0%, #c9e8d8 58%, #f1dcc2 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.68),
        0 12px 26px rgba(74,122,93,0.18) !important;
}

.amap-nav-entry:active {
    transform: translateY(0) scale(0.98);
}

.amap-nav-entry:focus-visible {
    outline: 2px solid rgba(47,111,85,0.36);
    outline-offset: 3px;
}

@media (min-width: 769px) {
    .amap-map-badge {
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: center;
        align-items: center;
        justify-items: stretch;
        min-height: 78px;
        padding: 15px 22px;
        gap: 20px;
        background:
            radial-gradient(circle at 50% 100%, rgba(217,240,228,0.52), transparent 38%),
            linear-gradient(135deg, rgba(255,255,255,0.88), rgba(250,253,249,0.70)) !important;
        border-color: rgba(47,111,85,0.13) !important;
    }

    .amap-location-text {
        font-size: 0.98rem;
        line-height: 1.32;
        text-align: left;
    }

    .amap-nav-entry {
        min-width: 210px;
        min-height: 42px;
        padding: 0 20px;
        border-radius: 14px;
        font-size: 0.92rem;
        justify-self: end;
    }
}

@media (max-width: 860px) {
    .section.partners .partner-logos {
        min-height: 344px !important;
    }
}

@media (max-width: 560px) {
    .section.partners .partner-logos {
        min-height: 344px !important;
    }
}

.footer-records {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-right: clamp(28px, 4vw, 72px);
}

.footer-records p {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    font-style: normal;
}

.footer-records a,
.footer-record-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    line-height: inherit;
    font-style: normal;
    transform: none;
}

.footer-records a:hover {
    color: var(--accent-1);
}

.footer-police img {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
}

@media (max-width: 720px) {
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .footer-records {
        justify-content: center;
    }
}