@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        body { font-family: 'Inter', 'Microsoft YaHei', sans-serif; scroll-behavior: smooth; }
        .hero-bg {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background: #0f172a;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
        }
        .hero-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background: url('../images/hero-bg-digital-orthopedics1.png') center center / cover no-repeat;
            z-index: -2;
        }
        @media (max-width: 1023px) {
            .hero-bg::before {
                background-position: 32% 18%;
            }
        }
        .hero-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(62% 58% at 78% 34%, rgba(125, 211, 252, 0.1) 0%, rgba(14, 165, 233, 0) 68%),
                linear-gradient(95deg, rgba(2, 6, 23, 0.32) 0%, rgba(15, 23, 42, 0.16) 48%, rgba(15, 23, 42, 0.08) 100%);
            z-index: -1;
        }
        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
        .site-brand { text-decoration: none; }
        .site-emblem {
            flex-shrink: 0;
            height: 2.35rem;
            width: auto;
            max-width: 7.5rem;
            object-fit: contain;
        }
        @media (min-width: 640px) {
            .site-emblem { height: 2.65rem; max-width: 8.75rem; }
        }
        .site-logo {
            flex-shrink: 0;
            filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.35));
            transition: transform 0.25s ease, filter 0.25s ease;
        }
        .site-brand:hover .site-logo {
            transform: scale(1.06) rotate(-2deg);
            filter: drop-shadow(0 4px 10px rgba(14, 165, 233, 0.45));
        }
        .site-name {
            background: linear-gradient(120deg, #0f172a 0%, #0369a1 42%, #0ea5e9 58%, #0f172a 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.04em;
            line-height: 1.2;
            min-width: 0;
            font-size: 1.125rem;
        }
        @media (min-width: 640px) {
            .site-name {
                font-size: 1.25rem;
            }
        }
        .site-name-short {
            display: none;
        }
        body.lang-en .site-name-full {
            display: none;
        }
        body.lang-en .site-name-short {
            display: none;
        }
        @media (max-width: 1023px) {
            body.lang-en .site-name-short {
                display: inline-flex;
                flex: 1 1 auto;
                align-items: center;
                justify-content: center;
                min-width: 0;
                font-size: 1.15rem;
                letter-spacing: 0.08em;
                white-space: nowrap;
                line-height: 1;
                position: static;
                transform: none;
            }
            body.lang-en .site-brand {
                flex: 0 0 auto;
                margin-right: 0;
            }
        }
        @media (min-width: 640px) and (max-width: 1023px) {
            body.lang-en .site-name-short {
                font-size: 1.25rem;
            }
        }
        @media (min-width: 1024px) {
            body.lang-en .site-name-full {
                display: inline;
                font-size: 0.95rem;
                letter-spacing: 0;
                white-space: nowrap;
            }
            body.lang-en .site-name-short {
                display: none;
            }
        }
        @media (min-width: 1280px) {
            body.lang-en .site-name-full {
                font-size: 1.05rem;
            }
        }
        body.lang-en nav > div {
            padding-left: 0.75rem;
        }
        @media (min-width: 640px) {
            body.lang-en nav > div {
                padding-left: 1rem;
            }
        }
        @media (min-width: 1024px) {
            body.lang-en nav > div {
                padding-left: 1.25rem;
            }
        }
        body.lang-en .site-brand {
            gap: 0.45rem;
        }
        body.lang-en .site-emblem {
            max-width: 6.25rem;
        }
        .site-brand:hover .site-name { background-position: right center; }
        .hero-title {
            background: linear-gradient(135deg, #ffffff 0%, #bae6fd 38%, #ffffff 72%, #7dd3fc 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.08em;
            text-shadow: none;
        }
        .hero-copy {
            width: 100%;
        }
        @media (min-width: 1024px) {
            .hero-copy {
                max-width: 42rem;
            }
        }
        .footer-brand {
            background: linear-gradient(90deg, #ffffff, #7dd3fc, #ffffff);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.08em;
        }
        .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 80vw; max-width: 320px; background: #fff; z-index: 60; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); box-shadow: -10px 0 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
        .mobile-drawer.open { transform: translateX(0); }
        .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 55; opacity: 0; visibility: hidden; transition: all 0.3s; }
        .drawer-overlay.open { opacity: 1; visibility: visible; }
        .tab-btn { color: #64748b; font-weight: 600; }
        .tab-btn.active { color: #0ea5e9; border-bottom: 3px solid #0ea5e9; font-weight: 700; }
        .tab-scrollbar-hide::-webkit-scrollbar { display: none; }
        .tab-scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }
        .stat-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
        .stat-card:hover { box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.25); transform: translateY(-2px); }
        .stat-modality-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
        .stat-modality-card:hover { box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.2); transform: translateY(-2px); }
        .stat-num { letter-spacing: -0.02em; }
        .img-gallery { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
        .img-gallery > * { scroll-snap-align: start; flex-shrink: 0; }
        .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; padding: 1rem; }
        .lightbox.open { display: flex; }
        .lightbox img, .lightbox video { max-width: 95vw; max-height: 90vh; object-fit: contain; }
        .team-profile-modal { position: fixed; inset: 0; z-index: 110; background: rgba(15,23,42,0.55); display: none; align-items: center; justify-content: center; padding: 1rem; }
        .team-profile-modal.open { display: flex; }
        .team-profile-panel { width: min(100%, 34rem); max-height: min(90vh, 40rem); overflow: auto; background: #fff; border-radius: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35); }
        .zoomable { cursor: zoom-in; }
        .paragraph-indent { text-indent: 2em; }
        .media-card figcaption { min-height: 3.5rem; }
        .back-to-top {
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: all 0.25s ease;
        }
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .back-to-top-btn {
            width: 3.25rem;
            height: 3.25rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
            border: 1px solid rgba(255, 255, 255, 0.25);
            box-shadow: 0 12px 26px -10px rgba(14, 165, 233, 0.8), 0 8px 16px -8px rgba(2, 132, 199, 0.65);
        }
        .back-to-top-btn:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 16px 30px -12px rgba(14, 165, 233, 0.9), 0 12px 20px -10px rgba(2, 132, 199, 0.75);
        }
        .back-to-top-btn:active { transform: translateY(0) scale(0.98); }
        .back-to-top-label {
            font-size: 10px;
            line-height: 1;
            font-weight: 700;
            letter-spacing: 0.04em;
            margin-top: -2px;
            color: rgba(255, 255, 255, 0.96);
        }
        @media (min-width: 640px) {
            .back-to-top-btn {
                width: 3.5rem;
                height: 3.5rem;
            }
            .back-to-top-label { font-size: 11px; }
        }
        .nav-active { color: #0ea5e9 !important; font-weight: 700; }
        .nav-link.nav-active { position: relative; }
        .nav-link.nav-active::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -6px;
            height: 2px;
            background: #0ea5e9;
            border-radius: 1px;
        }
        #hardware, #team, #clinical, #data, #research { scroll-margin-top: 5.5rem; }