/* /Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-nhy4rk0xb1] {
    padding: 16px 0;
    color: rgba(255, 255, 255, 0.72);
    background: var(--public-canvas, #080d0f);
    border-top: 1px solid var(--public-line, rgba(255, 255, 255, 0.09));
}

.footer-content[b-nhy4rk0xb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
}

.footer-content[b-nhy4rk0xb1]  .copyright {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.78rem;
    letter-spacing: 0.035em;
    line-height: 1.35;
}

.footer-content[b-nhy4rk0xb1]  .recaptcha-notice {
    max-width: 520px;
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 0.68rem;
    text-align: right;
    line-height: 1.4;
}

.footer-content[b-nhy4rk0xb1]  .recaptcha-notice a {
    color: rgba(255, 255, 255, 0.62) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 760px) {
    .footer-content[b-nhy4rk0xb1] {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .site-footer[b-nhy4rk0xb1] {
        padding: 7px 0;
    }

    .footer-content[b-nhy4rk0xb1]  .recaptcha-notice {
        line-height: 1.32;
        text-align: left;
    }
}
/* /Components/Layout/Header.razor.rz.scp.css */
.header-container[b-fgslpyz4mf] {
    --header-height: 82px;
    --header-cut: 24px;
    position: relative;
    width: 100%;
}

.header-container[b-fgslpyz4mf]  .top-bar {
    height: var(--header-height) !important;
    padding: 0 !important;
    z-index: 1100 !important;
    color: #f1f6f8 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header-container[b-fgslpyz4mf]  .top-bar::before {
    position: absolute;
    z-index: 0;
    inset: 0 0 calc(-1 * var(--header-cut));
    content: '';
    background: linear-gradient(90deg, rgba(var(--public-line-rgb,183,199,205),.022) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--public-canvas-rgb,10,15,18),.90), rgba(var(--public-frame-rgb,17,24,28),.84));
    background-size: 72px 100%, auto;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--header-cut)), 0 100%);
    box-shadow: 0 18px 40px rgba(0,8,16,.16);
    -webkit-backdrop-filter: blur(16px) saturate(98%);
    backdrop-filter: blur(16px) saturate(98%);
    pointer-events: none;
}

.header-container[b-fgslpyz4mf]  .top-bar::after {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: calc(-1 * var(--header-cut));
    left: 0;
    height: calc(var(--header-cut) + 2px);
    content: '';
    background: linear-gradient(90deg, var(--ks-primary-light), rgba(var(--ks-primary-rgb),.62), transparent 74%);
    clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 2px, 0 100%);
    box-shadow: 0 0 16px rgba(var(--ks-primary-rgb),.26);
    pointer-events: none;
}

/* 内页的斜切层使用预混合材质，避免 clip-path 与实时背景模糊叠加时重建合成层。 */
.header-container:not(.with-carousel)[b-fgslpyz4mf]  .top-bar::before {
    background: linear-gradient(90deg, rgba(var(--public-line-rgb,183,199,205),.02) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--public-canvas-rgb,10,15,18),.98), rgba(var(--public-frame-rgb,17,24,28),.96));
    background-size: 72px 100%, auto;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header-container:not(.with-carousel)[b-fgslpyz4mf]  .top-bar::after {
    box-shadow: none;
}

.header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar,
.header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar-gutters {
    position: relative;
    z-index: 1;
    width: min(100%, 1440px);
    height: 100% !important;
    margin: 0 auto;
    padding: 0 32px !important;
}

.header-container[b-fgslpyz4mf]  .logo-title,
.header-container[b-fgslpyz4mf]  .mud-nav-link,
.header-container[b-fgslpyz4mf]  .lang-button { color: #f1f6f8 !important; }
.header-container[b-fgslpyz4mf]  .logo-subtitle { color: #cfdee5 !important; opacity: .8; }
.header-container[b-fgslpyz4mf]  .mud-nav-link:hover,
.header-container[b-fgslpyz4mf]  .mud-nav-link.active,
.header-container[b-fgslpyz4mf]  .mud-nav-link.dropdown-active { color: #fff !important; }
.header-container[b-fgslpyz4mf]  .lang-button,
.header-container[b-fgslpyz4mf]  .mobile-actions .menu-button { color:var(--public-ink,#f2f5f6) !important; background:var(--public-glass-soft,rgba(29,42,48,.72)) !important; border-color:rgba(var(--public-line-rgb,183,199,205),.22) !important; }
.header-container.with-carousel[b-fgslpyz4mf] { min-height: 0; }
.header-container:not(.with-carousel)[b-fgslpyz4mf] { min-height: var(--header-height); }
.header-container[b-fgslpyz4mf]  .desktop-nav { display:flex; align-items:center; height:100%; }
.header-container[b-fgslpyz4mf]  .mobile-actions { display:none; align-items:center; gap:6px; }
.header-container[b-fgslpyz4mf]  .mobile-actions .menu-button { min-width:44px; width:44px; height:44px; margin-left:4px; padding:0; border:1px solid; border-radius:3px; }
.header-container[b-fgslpyz4mf]  .mobile-actions .menu-button .ks-icon { width:22px; height:22px; }
.header-container[b-fgslpyz4mf]  .mobile-quote-cta { display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:42px;padding:0 11px;color:var(--public-silver-ink,#11181c);background:linear-gradient(180deg,var(--public-silver-top,#d9e2e5) 0%,var(--public-silver-bottom,#bbc8cd) 100%);border:1px solid rgba(232,239,241,.76);box-shadow:0 6px 14px rgba(0,0,0,.24),inset 0 -1px rgba(52,63,68,.22);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);font:700 .90625rem/1 var(--ks-font-public);letter-spacing:.015em;text-decoration:none;white-space:nowrap;transition:color .18s ease,background .22s ease,border-color .18s ease,box-shadow .22s ease,filter .18s ease}
.header-container[b-fgslpyz4mf]  .mobile-quote-cta:hover,.header-container[b-fgslpyz4mf]  .mobile-quote-cta.active{color:var(--public-silver-ink,#0a0f12);background:linear-gradient(180deg,var(--public-silver-top,#d9e2e5) 0%,var(--public-silver-bottom,#bbc8cd) 100%);filter:brightness(1.08);border-color:rgba(242,247,248,.92);box-shadow:0 7px 16px rgba(0,0,0,.28),inset 0 -1px rgba(52,63,68,.18)}
.header-container[b-fgslpyz4mf]  .mobile-quote-cta:focus-visible{outline:2px solid #d9f2fc;outline-offset:3px}
.header-container[b-fgslpyz4mf]  .mobile-quote-cta .ks-icon{flex:0 0 auto;width:17px;height:17px;color:#26353b}

.header-container[b-fgslpyz4mf]  .mobile-drawer {
    display:flex !important;
    flex-direction:column;
    width:clamp(236px,74vw,272px) !important;
    color:#f1f6f8 !important;
    background:rgba(10,15,18,.97) !important;
    border-left:1px solid rgba(183,199,205,.18);
    -webkit-backdrop-filter:blur(18px) saturate(96%);
    backdrop-filter:blur(18px) saturate(96%);
}
.header-container[b-fgslpyz4mf]  .drawer-header { min-height:76px; padding:14px 16px !important; background:rgba(17,24,28,.96); border-bottom:2px solid var(--ks-primary); }
.header-container[b-fgslpyz4mf]  .drawer-header .close-button { min-width:44px; height:44px; color:#fff !important; }
.header-container[b-fgslpyz4mf]  .drawer-nav { flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 10px !important; }
.header-container[b-fgslpyz4mf]  .drawer-language{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;flex:0 0 auto;min-height:68px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(17,24,28,.94);border-top:1px solid rgba(183,199,205,.18)}
.header-container[b-fgslpyz4mf]  .drawer-language-label{display:flex;align-items:center;gap:8px;color:#cfdee5;font:600 .875rem/1 var(--ks-font-public)}
.header-container[b-fgslpyz4mf]  .drawer-language-label .ks-icon{color:#9dc8db}
.header-container[b-fgslpyz4mf]  .drawer-language .language-switcher{margin:0}
.header-container[b-fgslpyz4mf]  .drawer-language .lang-button{min-height:44px!important;padding:6px 9px!important}
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link,
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link { display:block; min-height:50px; margin:2px 0 !important; padding:11px 14px !important; color:#cfdee5 !important; background:transparent !important; font-size:.9375rem !important; font-weight:600 !important; text-decoration:none; border-left:3px solid transparent; border-radius:0 !important; }
.header-container[b-fgslpyz4mf]  .drawer-link-content,
.header-container[b-fgslpyz4mf]  .drawer-subnav-label,
.header-container[b-fgslpyz4mf]  .drawer-category-toggle { display:grid; grid-template-columns:21px minmax(0,1fr) 16px; align-items:center; gap:13px; width:100%; min-width:0; }
.header-container[b-fgslpyz4mf]  .drawer-link-content .ks-icon,
.header-container[b-fgslpyz4mf]  .drawer-subnav-label>.ks-icon { width:21px; height:21px; color:#aac1cb; }
.header-container[b-fgslpyz4mf]  .drawer-row-end { width:16px; height:16px; justify-self:end; }
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link:hover,
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link.active,
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link:has(.drawer-link-content.active),
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link:hover,
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link:focus-visible,
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link.active { color:#fff !important; background:rgba(var(--ks-primary-rgb),.12) !important; border-left-color:var(--ks-primary); outline:none; }
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link:hover .ks-icon,
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link.active .ks-icon,
.header-container[b-fgslpyz4mf]  .drawer-nav .mud-nav-link:has(.drawer-link-content.active) .ks-icon,
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link:hover .ks-icon,
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link:focus-visible .ks-icon,
.header-container[b-fgslpyz4mf]  .drawer-nav .drawer-nav-link.active .ks-icon { color:#61c5fa; }
.header-container[b-fgslpyz4mf]  .drawer-section-toggle{display:block;width:100%;min-height:50px;margin:2px 0;padding:11px 14px;border:0;border-left:3px solid transparent;background:transparent;color:#cfdee5;font:600 .9375rem var(--ks-font-public);text-align:left;cursor:pointer}.header-container[b-fgslpyz4mf]  .drawer-section-toggle.active,.header-container[b-fgslpyz4mf]  .drawer-section-toggle:hover,.header-container[b-fgslpyz4mf]  .drawer-section-toggle:focus-visible{border-left-color:var(--ks-primary);background:rgba(var(--ks-primary-rgb),.12);color:#fff;outline:none}.header-container[b-fgslpyz4mf]  .drawer-row-end.ks-icon{transition:transform .24s ease}.header-container[b-fgslpyz4mf]  .drawer-row-end.ks-icon.rotated{transform:rotate(180deg)}
.header-container[b-fgslpyz4mf]  .drawer-subnav{margin:0 0 8px 35px;border-left:1px solid rgba(97,197,250,.34)}
.header-container[b-fgslpyz4mf]  .drawer-subnav .mud-nav-link,
.header-container[b-fgslpyz4mf]  .drawer-subnav .drawer-nav-link{min-height:44px!important;padding:9px 12px!important;font-size:.875rem!important;line-height:1.35!important;white-space:normal!important}
.header-container[b-fgslpyz4mf]  .drawer-subnav .mud-nav-link.active,
.header-container[b-fgslpyz4mf]  .drawer-subnav .drawer-nav-link.active{border-left-color:#61c5fa!important;background:rgba(21,157,235,.12)!important;color:#fff!important}
.header-container[b-fgslpyz4mf]  .drawer-service-subnav{margin-left:0;padding-left:50px;border-left:0}
.header-container[b-fgslpyz4mf]  .drawer-service-subnav>.mud-nav-link,
.header-container[b-fgslpyz4mf]  .drawer-service-subnav>.drawer-nav-link{margin-left:0!important;border-left:1px solid rgba(97,197,250,.34)!important}
.header-container[b-fgslpyz4mf]  .drawer-category-toggle{min-height:46px;padding:8px 10px;border:0;border-left:1px solid rgba(97,197,250,.34);background:transparent;color:#cfdee5;font:600 .875rem/1.35 var(--ks-font-public);text-align:left;cursor:pointer}
.header-container[b-fgslpyz4mf]  .drawer-category-toggle:hover,.header-container[b-fgslpyz4mf]  .drawer-category-toggle:focus-visible,.header-container[b-fgslpyz4mf]  .drawer-category-toggle.expanded{background:rgba(21,157,235,.1);color:#fff;outline:none}
.header-container[b-fgslpyz4mf]  .drawer-category-toggle .menu-category-line-icon{width:21px;height:21px;color:#74c9f5;stroke-width:1.8}
.header-container[b-fgslpyz4mf]  .drawer-service-items{margin-left:21px;border-left:1px solid rgba(174,201,213,.17)}
.header-container[b-fgslpyz4mf]  .drawer-service-items .mud-nav-link,
.header-container[b-fgslpyz4mf]  .drawer-service-items .drawer-nav-link{min-height:44px!important;margin:0!important;padding:8px 9px!important;font-size:.84375rem!important}
.header-container[b-fgslpyz4mf]  .drawer-service-link{display:grid;grid-template-columns:21px minmax(0,1fr);align-items:center;gap:9px;width:100%;min-width:0}
.header-container[b-fgslpyz4mf]  .drawer-service-link .service-line-icon{width:21px;height:21px;color:#9dc8db;stroke-width:1.8}
.header-container[b-fgslpyz4mf]  .drawer-service-link>span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .header-container[b-fgslpyz4mf]  .top-bar::before { background:var(--public-frame,#11181c); }
    .header-container[b-fgslpyz4mf]  .mobile-drawer { background:var(--public-frame,#11181c) !important; }
}

@media (max-width:1024px) {
    .header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar,
    .header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar-gutters { padding:0 20px !important; }
}
@media (max-width:959.95px) {
    .header-container[b-fgslpyz4mf] { --header-height:68px; --header-cut:12px; }
    .header-container[b-fgslpyz4mf]  .desktop-nav { display:none !important; }
    .header-container[b-fgslpyz4mf]  .mobile-actions { display:flex !important; }
    .header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar,
    .header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar-gutters { padding:0 14px !important; }
}
@media (max-width:360px) {
    .header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar,
    .header-container[b-fgslpyz4mf]  .top-bar .mud-toolbar-gutters { padding:0 8px !important; }
    .header-container[b-fgslpyz4mf]  .logo-link { gap:7px; }
    .header-container[b-fgslpyz4mf]  .mobile-actions { gap:2px; }
    .header-container[b-fgslpyz4mf]  .mobile-quote-cta{height:40px;padding:0 5px;font-size:.84375rem}
    .header-container[b-fgslpyz4mf]  .mobile-quote-cta .ks-icon{display:none}
}
/* /Components/Layout/HeroCarousel.razor.rz.scp.css */
.hero-section[b-3709wi6fr9] {
    --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hero-state-duration: 820ms;
    --hero-image-scale: 1.03;
    --hero-scrim-opacity: 0.94;
    --hero-scrim-scale: 1;
    --hero-copy-opacity: 1;
    --hero-copy-x: 0px;
    --hero-copy-y: 0px;
    --hero-accent-width: 72px;
    --hero-title-shadow: 0 14px 42px rgba(0, 0, 0, 0.26);
    --hero-tagline-color: rgba(255, 255, 255, 0.82);
    position: relative;
    display: grid;
    min-height: 640px;
    height: min(78vh, 780px);
    height: min(78svh, 780px);
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #0a0f12;
}

.hero-media[b-3709wi6fr9] {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-image-stage[b-3709wi6fr9] {
    position: absolute;
    inset: 0;
    transform-origin: 58% 50%;
    animation: hero-image-settle-b-3709wi6fr9 1.8s var(--hero-ease) both;
}

.hero-image[b-3709wi6fr9] {
    position: absolute;
    inset: 0;
    background-color: #0a0f12;
    background-position: 56% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(var(--hero-image-scale));
    transform-origin: 58% 50%;
    transition: transform var(--hero-state-duration) var(--hero-ease);
    will-change: transform;
}

.hero-overlay[b-3709wi6fr9] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-overlay[b-3709wi6fr9]::before,
.hero-overlay[b-3709wi6fr9]::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.hero-overlay[b-3709wi6fr9]::before {
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 15, 18, 0.08) 0%,
        rgba(10, 15, 18, 0.02) 48%,
        rgba(10, 15, 18, 0.34) 100%);
}

.hero-overlay[b-3709wi6fr9]::after {
    inset: 0 8% 0 0;
    background: linear-gradient(90deg,
        rgba(10, 15, 18, 0.86) 0%,
        rgba(17, 24, 28, 0.62) 30%,
        rgba(23, 33, 38, 0.18) 58%,
        rgba(17, 24, 28, 0) 100%);
    opacity: var(--hero-scrim-opacity);
    transform: scaleX(var(--hero-scrim-scale));
    transform-origin: left center;
    transition:
        opacity var(--hero-state-duration) var(--hero-ease),
        transform var(--hero-state-duration) var(--hero-ease);
    will-change: opacity, transform;
}

.hero-media-focus-zone[b-3709wi6fr9] {
    position: absolute;
    z-index: 2;
    inset: 0 0 0 60%;
    display: none;
    pointer-events: none;
}

.hero-content[b-3709wi6fr9] {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 64px), 1240px);
    margin: 0 auto;
    padding: 122px 0 76px;
    text-align: left;
    pointer-events: none;
}

.hero-copy[b-3709wi6fr9] {
    width: min(700px, 56%);
    max-width: none;
    opacity: var(--hero-copy-opacity);
    transform: translate3d(var(--hero-copy-x), var(--hero-copy-y), 0);
    transition:
        opacity var(--hero-state-duration) var(--hero-ease),
        transform var(--hero-state-duration) var(--hero-ease);
    pointer-events: auto;
    will-change: opacity, transform;
}

.hero-accent[b-3709wi6fr9] {
    width: var(--hero-accent-width);
    height: 4px;
    margin-bottom: 24px;
    background: var(--ks-primary);
    transform-origin: left center;
    animation: hero-accent-in-b-3709wi6fr9 620ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: width var(--hero-state-duration) var(--hero-ease);
}

.hero-copy[b-3709wi6fr9]  .hero-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-copy-in-b-3709wi6fr9 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-copy[b-3709wi6fr9]  .hero-title {
    max-width: 800px;
    margin: 0 0 16px !important;
    color: #ffffff !important;
    font-size: clamp(3rem, 4.8vw, 4.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
    text-shadow: var(--hero-title-shadow);
    text-wrap: balance;
    animation-delay: 180ms;
    transition: text-shadow var(--hero-state-duration) var(--hero-ease);
}

.hero-section.is-chinese .hero-copy[b-3709wi6fr9]  .hero-title {
    white-space: nowrap;
}

.hero-section.is-english .hero-copy[b-3709wi6fr9]  .hero-title {
    max-width: 940px;
    font-size: clamp(2.7rem, 4.25vw, 4.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
}

.hero-copy[b-3709wi6fr9]  .hero-subtitle {
    max-width: 760px;
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.075em !important;
    text-wrap: balance;
    animation-delay: 270ms;
}

.hero-copy[b-3709wi6fr9]  .hero-tagline {
    max-width: 720px;
    margin: 0 0 34px !important;
    color: var(--hero-tagline-color) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.035em !important;
    text-wrap: balance;
    animation-delay: 360ms;
    transition: color var(--hero-state-duration) var(--hero-ease);
}

.hero-actions[b-3709wi6fr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    animation-delay: 450ms !important;
}

.hero-actions[b-3709wi6fr9]  .hero-btn-primary,
.hero-actions[b-3709wi6fr9]  .hero-btn-secondary {
    min-height: 52px;
    padding: 0 26px !important;
    border-radius: var(--ks-radius-sm) !important;
    box-shadow: none !important;
    font-size: 0.96875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    transition:
        color var(--ks-transition-normal),
        border-color var(--ks-transition-normal),
        background var(--ks-transition-normal),
        transform var(--ks-transition-normal),
        box-shadow var(--hero-state-duration) var(--hero-ease) !important;
}

.hero-actions[b-3709wi6fr9]  .hero-button-icon {
    margin-right: 9px;
}

.hero-actions[b-3709wi6fr9]  .hero-btn-primary {
    color: var(--public-silver-ink, #11181c) !important;
    background: linear-gradient(180deg, var(--public-silver-top, #d9e2e5) 0%, var(--public-silver-bottom, #bbc8cd) 100%) !important;
    border: 1px solid rgba(232, 239, 241, 0.76) !important;
}

.hero-actions[b-3709wi6fr9]  .hero-btn-primary:hover {
    color: var(--public-silver-ink, #0a0f12) !important;
    background: linear-gradient(180deg, var(--public-silver-top, #d9e2e5) 0%, var(--public-silver-bottom, #bbc8cd) 100%) !important;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.hero-actions[b-3709wi6fr9]  .hero-btn-secondary {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
}

.hero-actions[b-3709wi6fr9]  .hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

.hero-actions[b-3709wi6fr9]  .hero-btn-primary:focus-visible,
.hero-actions[b-3709wi6fr9]  .hero-btn-secondary:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.88);
    outline-offset: 3px;
}

@keyframes hero-image-settle-b-3709wi6fr9 {
    from {
        opacity: 0.72;
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hero-accent-in-b-3709wi6fr9 {
    from {
        opacity: 0;
        transform: scaleX(0.25);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes hero-copy-in-b-3709wi6fr9 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 901px) {
    .hero-section:has(.hero-copy:focus-within)[b-3709wi6fr9] {
        --hero-state-duration: 560ms;
        --hero-image-scale: 1.04;
        --hero-scrim-opacity: 1;
        --hero-scrim-scale: 1.04;
        --hero-copy-opacity: 1;
        --hero-copy-y: -4px;
        --hero-accent-width: 104px;
        --hero-title-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
        --hero-tagline-color: rgba(255, 255, 255, 0.94);
    }

    .hero-section:has(.hero-copy:focus-within) .hero-actions[b-3709wi6fr9]  .hero-btn-primary,
    .hero-section:has(.hero-copy:focus-within) .hero-actions[b-3709wi6fr9]  .hero-btn-secondary {
        box-shadow: 0 10px 28px rgba(2, 18, 31, 0.22) !important;
    }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .hero-media-focus-zone[b-3709wi6fr9] {
        display: block;
        pointer-events: auto;
    }

    .hero-section:has(.hero-media-focus-zone:hover)[b-3709wi6fr9] {
        --hero-state-duration: 700ms;
        --hero-image-scale: 1.01;
        --hero-scrim-opacity: 0.68;
        --hero-scrim-scale: 0.78;
        --hero-copy-opacity: 0.78;
        --hero-copy-x: -5px;
        --hero-accent-width: 56px;
    }

    .hero-section:has(.hero-copy:hover)[b-3709wi6fr9],
    .hero-section:has(.hero-copy:focus-within)[b-3709wi6fr9] {
        --hero-state-duration: 560ms;
        --hero-image-scale: 1.04;
        --hero-scrim-opacity: 1;
        --hero-scrim-scale: 1.04;
        --hero-copy-opacity: 1;
        --hero-copy-x: 0px;
        --hero-copy-y: -4px;
        --hero-accent-width: 104px;
        --hero-title-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
        --hero-tagline-color: rgba(255, 255, 255, 0.94);
    }

    .hero-section:has(.hero-copy:hover) .hero-actions[b-3709wi6fr9]  .hero-btn-primary,
    .hero-section:has(.hero-copy:hover) .hero-actions[b-3709wi6fr9]  .hero-btn-secondary,
    .hero-section:has(.hero-copy:focus-within) .hero-actions[b-3709wi6fr9]  .hero-btn-primary,
    .hero-section:has(.hero-copy:focus-within) .hero-actions[b-3709wi6fr9]  .hero-btn-secondary {
        box-shadow: 0 10px 28px rgba(2, 18, 31, 0.22) !important;
    }
}

@media (max-width: 1100px) {
    .hero-content[b-3709wi6fr9] {
        width: calc(100% - 48px);
    }

    .hero-section.is-english .hero-copy[b-3709wi6fr9]  .hero-title {
        max-width: 820px;
        font-size: clamp(2.55rem, 5vw, 4rem) !important;
    }
}

@media (max-width: 900px) {
    .hero-section[b-3709wi6fr9] {
        --hero-image-scale: 1.02;
        --hero-scrim-opacity: 1;
        --hero-scrim-scale: 1;
        --hero-copy-opacity: 1;
        --hero-copy-x: 0px;
        --hero-copy-y: 0px;
        --hero-accent-width: 72px;
        min-height: 620px;
        height: min(76vh, 720px);
        height: min(76svh, 720px);
    }

    .hero-content[b-3709wi6fr9] {
        width: calc(100% - 40px);
        padding: 108px 0 64px;
        pointer-events: auto;
    }

    .hero-copy[b-3709wi6fr9] {
        width: 100%;
        max-width: 940px;
    }

    .hero-image[b-3709wi6fr9] {
        background-position: 60% 50%;
    }

    .hero-overlay[b-3709wi6fr9]::before {
        background: linear-gradient(180deg,
            rgba(3, 22, 34, 0.10) 0%,
            rgba(3, 22, 34, 0.04) 46%,
            rgba(3, 22, 34, 0.46) 100%);
    }

    .hero-overlay[b-3709wi6fr9]::after {
        inset: 0;
        background: linear-gradient(90deg,
            rgba(3, 28, 45, 0.84) 0%,
            rgba(3, 30, 48, 0.62) 64%,
            rgba(4, 31, 48, 0.26) 100%);
    }
}

@media (max-width: 600px) {
    .hero-section[b-3709wi6fr9] {
        min-height: 610px;
        height: min(82vh, 700px);
        height: min(82svh, 700px);
    }

    .hero-image[b-3709wi6fr9] {
        background-position: 62% 50%;
        transform-origin: 62% 50%;
    }

    .hero-content[b-3709wi6fr9] {
        width: calc(100% - 32px);
        padding: 96px 0 50px;
    }

    .hero-accent[b-3709wi6fr9] {
        --hero-accent-width: 48px;
        height: 3px;
        margin-bottom: 18px;
    }

    .hero-copy[b-3709wi6fr9]  .hero-title {
        max-width: none;
        margin-bottom: 14px !important;
        font-size: clamp(2rem, 10.5vw, 2.8rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
    }

    .hero-section.is-english .hero-copy[b-3709wi6fr9]  .hero-title {
        max-width: 360px;
        font-size: clamp(2.1rem, 10vw, 2.75rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.03em !important;
    }

    .hero-copy[b-3709wi6fr9]  .hero-subtitle {
        margin-bottom: 12px !important;
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
        letter-spacing: 0.04em !important;
    }

    .hero-copy[b-3709wi6fr9]  .hero-tagline {
        margin-bottom: 30px !important;
        font-size: 0.9375rem !important;
        line-height: 1.65 !important;
        letter-spacing: 0.02em !important;
    }

    .hero-actions[b-3709wi6fr9] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-3709wi6fr9]  .hero-btn-primary,
    .hero-actions[b-3709wi6fr9]  .hero-btn-secondary {
        width: 100% !important;
        min-height: 50px;
    }
}

@media (max-width: 360px) {
    .hero-section[b-3709wi6fr9] {
        min-height: 600px;
    }

    .hero-content[b-3709wi6fr9] {
        width: calc(100% - 28px);
        padding: 92px 0 42px;
    }

    .hero-copy[b-3709wi6fr9]  .hero-title {
        font-size: clamp(1.88rem, 10vw, 2.25rem) !important;
    }

    .hero-section.is-english .hero-copy[b-3709wi6fr9]  .hero-title {
        font-size: clamp(1.95rem, 10vw, 2.25rem) !important;
    }

    .hero-copy[b-3709wi6fr9]  .hero-tagline {
        margin-bottom: 26px !important;
    }
}
/* /Components/Layout/LogoBar.razor.rz.scp.css */
.logo-bar-container[b-iijdyclcat],
.logo-link[b-iijdyclcat],
.logo-wrapper[b-iijdyclcat] {
    display: flex;
    align-items: center;
}

.logo-link[b-iijdyclcat] {
    gap: 13px;
    color: inherit;
    text-decoration: none;
}

.logo-wrapper[b-iijdyclcat] {
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
}

.logo-wrapper[b-iijdyclcat]  .logo-image,
.logo-wrapper[b-iijdyclcat]  .logo-image img {
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    transition: transform var(--ks-transition-normal);
}

.logo-link:hover .logo-wrapper[b-iijdyclcat]  .logo-image {
    transform: translateY(-1px);
}

.logo-text[b-iijdyclcat] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.logo-text[b-iijdyclcat]  .logo-title {
    margin: 0 !important;
    color: #f1f6f8 !important;
    font-family: var(--ks-font-public, 'Noto Sans HK Variable', 'Microsoft JhengHei', sans-serif) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
}

.logo-text[b-iijdyclcat]  .logo-subtitle {
    margin: 0 !important;
    color: #cfdee5 !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.115em !important;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .logo-wrapper[b-iijdyclcat],
    .logo-wrapper[b-iijdyclcat]  .logo-image,
    .logo-wrapper[b-iijdyclcat]  .logo-image img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        flex-basis: 50px;
    }

    .logo-text[b-iijdyclcat]  .logo-title {
        font-size: 1.03rem !important;
    }

    .logo-text[b-iijdyclcat]  .logo-subtitle {
        font-size: 0.6875rem !important;
    }
}

@media (max-width: 959.95px) {
    .logo-link[b-iijdyclcat] {
        gap: 9px;
    }

    .logo-wrapper[b-iijdyclcat],
    .logo-wrapper[b-iijdyclcat]  .logo-image,
    .logo-wrapper[b-iijdyclcat]  .logo-image img {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px;
    }

    .logo-text[b-iijdyclcat]  .logo-title {
        font-size: 1rem !important;
    }

    .logo-text[b-iijdyclcat]  .logo-subtitle {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.public-theme-root[b-jmqnzreflz] {
    min-height: 100vh;
    color: var(--public-ink);
    background: var(--public-canvas);
}

.parallax-bg[b-jmqnzreflz],
.parallax-overlay[b-jmqnzreflz] {
    position: fixed;
    inset: 0;
    display: block;
    pointer-events: none;
}

.parallax-bg[b-jmqnzreflz] {
    z-index: 0;
    background-image: url('/images/bg-hongkong.webp');
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: cover;
    filter: saturate(var(--public-bg-saturation, 0.58)) contrast(1.02) brightness(var(--public-bg-brightness, 0.82));
}

.parallax-overlay[b-jmqnzreflz] {
    z-index: 1;
    background: linear-gradient(145deg, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.38) 0%, rgba(var(--public-frame-rgb, 17, 24, 28), 0.30) 48%, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.36) 100%);
}

body:has(.home-page-shell) .parallax-overlay[b-jmqnzreflz] {
    background: linear-gradient(145deg, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.52) 0%, rgba(var(--public-frame-rgb, 17, 24, 28), 0.44) 48%, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.50) 100%);
}

.parallax-overlay[b-jmqnzreflz]  ~ .mud-layout-root {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background: transparent;
}

.parallax-overlay[b-jmqnzreflz]  ~ .mud-layout-root .mud-main-content-flex {
    background: transparent;
}

@media (max-width: 700px) {
    .parallax-bg[b-jmqnzreflz] {
        background-position: 52% 68%;
    }

    .parallax-overlay[b-jmqnzreflz] {
        background: linear-gradient(145deg, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.44) 0%, rgba(var(--public-frame-rgb, 17, 24, 28), 0.36) 48%, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.42) 100%);
    }

    body:has(.home-page-shell) .parallax-overlay[b-jmqnzreflz] {
        background: linear-gradient(145deg, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.58) 0%, rgba(var(--public-frame-rgb, 17, 24, 28), 0.50) 50%, rgba(var(--public-canvas-rgb, 10, 15, 18), 0.56) 100%);
    }
}

#blazor-error-ui[b-jmqnzreflz] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1600;
    display: none;
    padding: 0.75rem 1.25rem;
    color: #522;
    background: #fff4d6;
    border-top: 1px solid #ead8a0;
}

#blazor-error-ui .dismiss[b-jmqnzreflz] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}
/* /Components/Layout/NavBar.razor.rz.scp.css */
.nav-bar-container[b-f8dhs7tjmz] {
    display: flex;
    align-items: stretch;
    height: 82px;
    background: transparent;
}

.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    height: 82px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    color: #f1f6f8 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: var(--ks-font-public, 'Noto Sans HK Variable', 'Microsoft JhengHei', sans-serif) !important;
    font-size: 0.96875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.035em;
    white-space: nowrap !important;
    transition: color var(--ks-transition-fast) !important;
}

.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link::after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 0;
    left: 15px;
    height: 3px;
    background: var(--ks-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ks-transition-normal);
}

.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link:hover,
.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link.active,
.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link.dropdown-active {
    color: #ffffff !important;
}

.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link:hover::after,
.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link.active::after,
.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link.dropdown-active::after {
    transform: scaleX(1);
}

.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link .mud-list-item-expand-icon,
.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link .mud-nav-link-icon {
    display: none !important;
}

.nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link .mud-nav-link-text,
.nav-bar-container[b-f8dhs7tjmz]  .nav-text,
.nav-bar-container[b-f8dhs7tjmz]  .nav-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.nav-bar-container[b-f8dhs7tjmz]  .nav-content {
    gap: 7px;
}

.nav-dropdown-wrapper[b-f8dhs7tjmz] {
    position: relative;
}

.nav-bar-container[b-f8dhs7tjmz]  .dropdown-arrow {
    margin-left: 2px;
    width: 14px;
    height: 14px;
    transition: transform var(--ks-transition-fast) !important;
}

.nav-bar-container[b-f8dhs7tjmz]  .dropdown-arrow.rotated {
    transform: rotate(180deg);
}

.nav-bar-container .language-switcher[b-f8dhs7tjmz] {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.quote-nav-cta[b-f8dhs7tjmz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    min-width: 132px;
    height: 44px;
    margin-left: 10px;
    padding: 0 16px;
    gap: 8px;
    overflow: hidden;
    color: var(--public-silver-ink, #11181c);
    background: linear-gradient(180deg, var(--public-silver-top, #d9e2e5) 0%, var(--public-silver-bottom, #bbc8cd) 100%);
    border: 1px solid rgba(237, 246, 248, 0.72);
    box-shadow: 0 6px 14px rgba(0, 8, 16, 0.2), inset 0 -1px rgba(52, 74, 84, 0.18);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    font-family: var(--ks-font-public, 'Noto Sans HK Variable', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, background 220ms ease, border-color 180ms ease, box-shadow 220ms ease, filter 180ms ease;
}

.quote-nav-cta:hover[b-f8dhs7tjmz],
.quote-nav-cta.active[b-f8dhs7tjmz] {
    color: var(--public-silver-ink, #0a0f12);
    background: linear-gradient(180deg, var(--public-silver-top, #d9e2e5) 0%, var(--public-silver-bottom, #bbc8cd) 100%);
    filter: brightness(1.08);
    border-color: rgba(248, 252, 252, 0.9);
    box-shadow: 0 7px 16px rgba(0, 8, 16, 0.24), inset 0 -1px rgba(52, 74, 84, 0.16);
}

.quote-nav-cta:focus-visible[b-f8dhs7tjmz] {
    outline: 2px solid #aee5ff;
    outline-offset: 3px;
}

.quote-nav-cta[b-f8dhs7tjmz]  .ks-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: #26353b;
}

@media (max-width: 1180px) {
    .nav-bar-container[b-f8dhs7tjmz]  .mud-nav-link {
        padding: 0 10px !important;
        font-size: 0.90625rem !important;
    }

    .quote-nav-cta[b-f8dhs7tjmz] {
        width: 108px;
        min-width: 108px;
        height: 42px;
        margin-left: 6px;
        padding: 0 10px;
        gap: 6px;
        font-size: 0.875rem;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.section-title-line[b-ck19lbiqmo] {
    width: 52px;
    height: 3px;
    margin: 18px 0 22px;
    background: var(--ks-primary);
}

.about-intro[b-ck19lbiqmo],
.about-why-us[b-ck19lbiqmo],
.about-services[b-ck19lbiqmo] {
    padding: 44px 0;
    color: var(--ks-text-primary);
    background: transparent;
}

.about-intro[b-ck19lbiqmo] {
    padding-top: 52px;
}

.about-services[b-ck19lbiqmo] {
    padding-bottom: 64px;
}

.about-panel[b-ck19lbiqmo] {
    width: 100%;
    padding: clamp(34px, 4.4vw, 58px) !important;
    color: var(--public-ink, #f1f6f8);
    background: var(--public-glass, rgba(8, 30, 43, 0.58));
    border: 1px solid var(--public-line, rgba(174, 201, 213, 0.2));
    border-radius: var(--ks-radius-sm);
    box-shadow: 0 20px 52px rgba(5, 18, 25, 0.13);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(0.92);
    backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(0.92);
}

.section-header[b-ck19lbiqmo] {
    margin-bottom: 38px;
    text-align: left;
}

.section-header[b-ck19lbiqmo]  .section-title {
    margin: 0 !important;
    color: var(--public-ink, #f1f6f8) !important;
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
}

.section-header[b-ck19lbiqmo]  .section-subtitle {
    max-width: 660px;
    margin: 0 !important;
    color: var(--public-muted, #cfdfE6) !important;
    line-height: 1.75;
}

.intro-content[b-ck19lbiqmo] {
    max-width: 920px;
    margin: 0;
    padding-left: 28px;
    border-left: 3px solid var(--ks-primary);
}

.intro-content[b-ck19lbiqmo]  .mud-typography {
    color: var(--public-muted, #cfdfE6);
    font-size: 1.02rem;
    line-height: 1.95;
    text-align: left;
}

.why-us-card[b-ck19lbiqmo] {
    position: relative;
    height: 100%;
    padding: 18px 14px 20px;
    overflow: hidden;
    background: rgba(248, 250, 250, 0.82) !important;
    border: 1px solid var(--ks-border) !important;
    border-top: 3px solid transparent !important;
    border-radius: var(--ks-radius-sm) !important;
    box-shadow: none !important;
    transition: transform var(--ks-transition-normal), border-color var(--ks-transition-normal), box-shadow var(--ks-transition-normal);
}

.why-us-card:hover[b-ck19lbiqmo] {
    border-top-color: var(--ks-primary) !important;
    box-shadow: var(--ks-shadow-md) !important;
    transform: translateY(-4px);
}

.card-icon[b-ck19lbiqmo] {
    display: grid;
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    place-items: center;
    color: var(--ks-primary-dark);
    background: rgba(var(--ks-primary-rgb), 0.09);
    border: 1px solid rgba(var(--ks-primary-rgb), 0.2);
    border-radius: var(--ks-radius-sm);
}

.card-icon .why-us-icon[b-ck19lbiqmo] {
    color: var(--ks-primary-dark);
    font-size: 1.05rem;
}

.why-us-card[b-ck19lbiqmo]  .card-title {
    margin: 0 0 10px !important;
    color: var(--public-ink, #f1f6f8) !important;
    font-weight: 700 !important;
}

.why-us-card[b-ck19lbiqmo]  .card-desc {
    color: var(--public-muted, #cfdfE6) !important;
    line-height: 1.65;
}

.services-chips[b-ck19lbiqmo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--ks-border);
    border-bottom: 1px solid var(--ks-border);
}

.services-chips[b-ck19lbiqmo]  .service-chip {
    width: 100%;
    min-height: 62px;
    margin: 0;
    color: var(--public-ink, #f1f6f8) !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--ks-border) !important;
    border-radius: 0 !important;
    font-size: 0.9375rem;
    font-weight: 700;
    transition: color var(--ks-transition-fast), background var(--ks-transition-fast);
}

.services-chips[b-ck19lbiqmo]  .service-chip:last-child {
    border-right: 0 !important;
}

.services-chips[b-ck19lbiqmo]  .service-chip:hover {
    color: #fff !important;
    background: rgba(var(--ks-primary-rgb), 0.14) !important;
}

.services-chips[b-ck19lbiqmo]  .service-chip:focus-visible {
    color: #fff !important;
    background: rgba(var(--ks-primary-rgb), 0.16) !important;
    outline: 2px solid var(--ks-primary-light);
    outline-offset: -3px;
}

@media (max-width: 760px) {
    .about-intro[b-ck19lbiqmo],
    .about-why-us[b-ck19lbiqmo],
    .about-services[b-ck19lbiqmo] {
        padding: 18px 0;
    }

    .about-intro[b-ck19lbiqmo] {
        padding-top: 28px;
    }

    .about-services[b-ck19lbiqmo] {
        padding-bottom: 36px;
    }

    .about-panel[b-ck19lbiqmo] {
        width: 100%;
        padding: 28px 20px !important;
        background: var(--ks-glass-dark-strong, rgba(12, 24, 32, 0.82));
        -webkit-backdrop-filter: blur(10px) saturate(0.92);
        backdrop-filter: blur(10px) saturate(0.92);
    }

    .intro-content[b-ck19lbiqmo] {
        padding-left: 18px;
    }

    .services-chips[b-ck19lbiqmo] {
        grid-template-columns: 1fr 1fr;
    }

    .services-chips[b-ck19lbiqmo]  .service-chip:nth-child(2) {
        border-right: 0 !important;
    }

    .services-chips[b-ck19lbiqmo]  .service-chip:nth-child(-n+2) {
        border-bottom: 1px solid var(--ks-border) !important;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .about-panel[b-ck19lbiqmo] {
        background: #f8fafa;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* ============================================
   联系我们页面 (Contact.razor) - 左右分栏布局
   全局毛玻璃和内边距由 components.css 处理
   ============================================ */

/* ----------------------------------------
   左右分栏布局
   ---------------------------------------- */
.contact-layout[b-vgmrr3savs] {
    display: flex;
    gap: 0;
    align-items: flex-start; /* 顶部对齐 */
}

.contact-left[b-vgmrr3savs] {
    flex: 0 0 42%;
    max-width: 42%;
}

.contact-right[b-vgmrr3savs] {
    flex: 1;
    min-width: 0;
}

/* ----------------------------------------
   信息卡片 - 专业稳重风格
   ---------------------------------------- */
.contact-layout[b-vgmrr3savs]  .contact-card,
.contact-layout[b-vgmrr3savs]  .map-card,
.contact-layout[b-vgmrr3savs]  .form-card {
    padding: var(--ks-space-xl) !important;
    border-radius: var(--ks-radius-lg);
    color: var(--ks-glass-ink-light, #15242b);
    background: var(--ks-glass-light-strong, rgba(248, 250, 250, 0.92)) !important;
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32)) !important;
    box-shadow: 0 18px 48px rgba(5, 18, 25, 0.12);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(0.92);
    backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(0.92);
    transition: box-shadow var(--ks-transition-normal);
}

.contact-layout[b-vgmrr3savs]  .contact-card:hover,
.contact-layout[b-vgmrr3savs]  .form-card:hover {
    box-shadow: var(--ks-shadow-sm);
}

.contact-layout[b-vgmrr3savs]  .section-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--ks-text-primary);
    margin-bottom: var(--ks-space-lg) !important;
}

/* ----------------------------------------
   联系信息项 - 增加间距
   ---------------------------------------- */
.contact-item[b-vgmrr3savs] {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-gap-md);
    padding: var(--ks-space-md) 0;
}

.contact-icon[b-vgmrr3savs] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-background-gray);
    border-radius: var(--ks-radius-md);
    flex-shrink: 0;
    color: var(--ks-primary);
}

/* FontAwesome 联系图标样式 */
.contact-fa-icon[b-vgmrr3savs] {
    font-size: 1.25rem;
}

.contact-icon.whatsapp[b-vgmrr3savs] {
    background: var(--ks-whatsapp);
    color: white;
}

.contact-content[b-vgmrr3savs] {
    flex-grow: 1;
    min-width: 0;
}

.contact-layout[b-vgmrr3savs]  .contact-link {
    display: inline-block;
    transition: color var(--ks-transition-fast);
}

.contact-layout[b-vgmrr3savs]  .contact-link:hover {
    color: var(--ks-primary) !important;
}

/* ----------------------------------------
   地图容器 - 增加顶部间距
   ---------------------------------------- */
.contact-layout[b-vgmrr3savs]  .map-card {
    margin-top: var(--ks-space-lg) !important;
}

.map-container[b-vgmrr3savs] {
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    background: var(--ks-background-gray);
}

.map-link[b-vgmrr3savs] {
    display: block;
    position: relative;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
}

.map-image[b-vgmrr3savs] {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform var(--ks-transition-normal);
}

.map-link:hover .map-image[b-vgmrr3savs] {
    transform: scale(1.02);
}

.map-overlay[b-vgmrr3savs] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--ks-space-sm) var(--ks-space-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ks-space-xs);
    font-size: var(--ks-font-size-sm);
    opacity: 0;
    transition: opacity var(--ks-transition-normal);
}

.map-link:hover .map-overlay[b-vgmrr3savs] {
    opacity: 1;
}

/* ----------------------------------------
   表单样式
   ---------------------------------------- */
.contact-layout[b-vgmrr3savs]  .form-card {
    height: fit-content;
}

.contact-layout[b-vgmrr3savs]  .form-card .mud-input-outlined {
    background: rgba(252, 253, 253, 0.96);
    border-radius: 10px;
}

.contact-layout[b-vgmrr3savs]  .form-card .mud-input-outlined-border {
    border-color: var(--ks-glass-border-light, rgba(150, 170, 180, 0.42));
}

.contact-layout[b-vgmrr3savs]  .submit-button {
    height: 48px;
    font-size: var(--ks-font-size-md);
    font-weight: 600;
    border-radius: var(--ks-radius-md);
}

/* ----------------------------------------
   快速联系区域
   ---------------------------------------- */
.quick-contact[b-vgmrr3savs] {
    text-align: center;
}

.quick-buttons[b-vgmrr3savs] {
    display: flex;
    gap: var(--ks-gap-md);
    flex-wrap: wrap;
    justify-content: center;
}

.contact-layout[b-vgmrr3savs]  .quick-btn {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
}

.contact-layout[b-vgmrr3savs]  .whatsapp-btn {
    background-color: var(--ks-whatsapp) !important;
}

.contact-layout[b-vgmrr3savs]  .whatsapp-btn:hover {
    background-color: var(--ks-whatsapp-dark) !important;
}

/* ----------------------------------------
   附件上传区域
   ---------------------------------------- */
.contact-layout[b-vgmrr3savs]  .attachment-upload {
    width: 100%;
}

.uploaded-files[b-vgmrr3savs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ks-space-xs);
}

.uploaded-files[b-vgmrr3savs]  .mud-chip {
    height: auto;
    padding: 4px 8px;
}

/* ----------------------------------------
   响应式设计
   ---------------------------------------- */

/* 平板端 */
@media (max-width: 960px) {
    .contact-layout[b-vgmrr3savs] {
        flex-direction: column;
        gap: var(--ks-space-xl);
    }

    .contact-left[b-vgmrr3savs],
    .contact-right[b-vgmrr3savs] {
        flex: none;
        max-width: 100%;
    }

    .contact-info-section[b-vgmrr3savs] {
        margin-bottom: 0;
    }

    .quick-buttons[b-vgmrr3savs] {
        flex-direction: column;
    }

    .contact-layout[b-vgmrr3savs]  .quick-btn {
        max-width: none;
    }
}

/* 手机端 */
@media (max-width: 600px) {
    .contact-layout[b-vgmrr3savs]  .contact-card,
    .contact-layout[b-vgmrr3savs]  .map-card,
    .contact-layout[b-vgmrr3savs]  .form-card {
        padding: var(--ks-space-lg);
        border-radius: var(--ks-radius-md);
        background: rgba(248, 250, 250, 0.96) !important;
        -webkit-backdrop-filter: blur(10px) saturate(0.92);
        backdrop-filter: blur(10px) saturate(0.92);
    }

    .contact-item[b-vgmrr3savs] {
        padding: var(--ks-space-sm) 0;
    }

    .contact-icon[b-vgmrr3savs] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .map-image[b-vgmrr3savs] {
        height: 200px;
    }

    .contact-layout[b-vgmrr3savs]  .submit-button {
        height: 48px;
    }

    .quick-buttons[b-vgmrr3savs] {
        gap: var(--ks-space-sm);
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .contact-layout[b-vgmrr3savs]  .contact-card,
    .contact-layout[b-vgmrr3savs]  .map-card,
    .contact-layout[b-vgmrr3savs]  .form-card {
        background: #f8fafa !important;
    }
}

/* 超小屏幕 */
@media (max-width: 400px) {
    .contact-layout[b-vgmrr3savs]  .contact-card,
    .contact-layout[b-vgmrr3savs]  .map-card,
    .contact-layout[b-vgmrr3savs]  .form-card {
        padding: var(--ks-space-md);
    }

    .contact-item[b-vgmrr3savs] {
        gap: var(--ks-space-sm);
    }

    .contact-icon[b-vgmrr3savs] {
        width: 36px;
        height: 36px;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page-shell[b-vdpmckpjmi]  .error-page {
    min-height: calc(100vh - 76px);
}

.error-page-shell[b-vdpmckpjmi]  .error-card {
    color: var(--ks-glass-ink-light, #15242b);
    background: var(--ks-glass-light-strong, rgba(248, 250, 250, 0.92)) !important;
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32));
    border-top: 4px solid var(--ks-primary);
    border-radius: var(--ks-radius-sm) !important;
    box-shadow: 0 24px 64px rgba(7, 18, 25, 0.16) !important;
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(92%);
    backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(92%);
}

@media (max-width: 600px) {
    .error-page-shell[b-vdpmckpjmi]  .error-page {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .error-page-shell[b-vdpmckpjmi]  .error-card {
        background: rgba(248, 250, 250, 0.95) !important;
        -webkit-backdrop-filter: blur(10px) saturate(92%);
        backdrop-filter: blur(10px) saturate(92%);
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .error-page-shell[b-vdpmckpjmi]  .error-card {
        background: #f8fafa !important;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-page-shell[b-zhxig3zkfq] {
    --home-ink: var(--ks-glass-ink-dark, #f1f6f8);
    --home-muted: var(--ks-glass-muted-dark, #cfdfe6);
    --home-line: rgba(138, 204, 239, 0.16);
    --home-line-strong: rgba(138, 204, 239, 0.3);
    --home-glass: rgba(8, 30, 43, 0.44);
    --home-glass-strong: rgba(6, 25, 38, 0.68);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--home-ink);
    background:
        radial-gradient(circle at 82% 9%, rgba(var(--ks-primary-rgb), 0.15), transparent 25%),
        radial-gradient(circle at 10% 58%, rgba(97, 197, 250, 0.07), transparent 30%);
}

.home-page-shell[b-zhxig3zkfq]::before,
.home-page-shell[b-zhxig3zkfq]::after {
    position: absolute;
    z-index: -1;
    content: '';
    pointer-events: none;
}

.home-page-shell[b-zhxig3zkfq]::before {
    top: 9%;
    right: -14%;
    width: 62vw;
    height: 62vw;
    max-width: 900px;
    max-height: 900px;
    border: 1px solid rgba(97, 197, 250, 0.07);
    transform: rotate(32deg);
    box-shadow:
        inset 0 0 0 72px rgba(97, 197, 250, 0.018),
        inset 0 0 0 144px rgba(97, 197, 250, 0.014);
}

.home-page-shell[b-zhxig3zkfq]::after {
    right: 8%;
    bottom: 6%;
    width: min(44vw, 620px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(97, 197, 250, 0.24));
    transform: rotate(-18deg);
    transform-origin: right center;
}

.section-header[b-zhxig3zkfq] {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 52px;
    text-align: left;
}

.section-header[b-zhxig3zkfq]  .section-title {
    position: relative;
    margin: 0 !important;
    padding-top: 18px;
    color: var(--home-ink) !important;
    font-size: clamp(1.9rem, 3.4vw, 3.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.section-header[b-zhxig3zkfq]  .section-title::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, var(--ks-primary-light), var(--ks-primary));
    box-shadow: 0 0 22px rgba(var(--ks-primary-rgb), 0.38);
}

.section-header[b-zhxig3zkfq]  .section-subtitle {
    max-width: 640px;
    margin: 0 !important;
    color: var(--home-muted) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

.section-footer[b-zhxig3zkfq] {
    margin-top: 42px;
    text-align: left;
}

.section-footer[b-zhxig3zkfq]  .mud-button-root,
.about-text[b-zhxig3zkfq]  .mud-button-root {
    min-height: 46px;
    padding: 0 22px !important;
    color: var(--home-ink) !important;
    background: rgba(10, 37, 52, 0.34) !important;
    border-width: 1px !important;
    border-color: rgba(138, 204, 239, 0.38) !important;
    border-radius: var(--ks-radius-sm) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    font-weight: 700 !important;
}

.section-footer[b-zhxig3zkfq]  .mud-button-root:hover,
.about-text[b-zhxig3zkfq]  .mud-button-root:hover {
    color: #ffffff !important;
    background: rgba(var(--ks-primary-rgb), 0.18) !important;
    border-color: var(--ks-primary-light) !important;
}

.service-list-section[b-zhxig3zkfq],
.about-section[b-zhxig3zkfq],
.projects-section[b-zhxig3zkfq],
.cta-section[b-zhxig3zkfq] {
    position: relative;
    border-top: 1px solid var(--home-line);
}

.service-list-section[b-zhxig3zkfq] {
    z-index: 5;
    padding: 104px 0 112px;
    background: transparent;
}

.service-list-grid[b-zhxig3zkfq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--ks-glass-dark, rgba(17, 29, 36, 0.46));
    border: 1px solid var(--ks-glass-border-dark, rgba(174, 201, 213, 0.2));
    box-shadow:
        0 28px 70px rgba(0, 8, 15, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
    backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
}

.service-card[b-zhxig3zkfq] {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: rgba(13, 42, 57, 0.32);
    border-right: 1px solid var(--home-line);
    transition:
        background 420ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card[b-zhxig3zkfq]::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, var(--ks-primary-light), var(--ks-primary));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card[b-zhxig3zkfq]::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 54px;
    content: '';
    background: linear-gradient(135deg, transparent 49%, rgba(97, 197, 250, 0.15) 50%, transparent 52%);
    pointer-events: none;
}

.service-card:last-child[b-zhxig3zkfq] {
    border-right: 0;
}

.service-card:hover[b-zhxig3zkfq],
.service-card:focus-within[b-zhxig3zkfq] {
    z-index: 1;
    background: rgba(18, 57, 76, 0.68);
    box-shadow: 0 26px 54px rgba(0, 9, 16, 0.3);
    transform: translateY(-5px);
}

.service-card:hover[b-zhxig3zkfq]::before,
.service-card:focus-within[b-zhxig3zkfq]::before {
    transform: scaleX(1);
}

.card-header[b-zhxig3zkfq] {
    position: relative;
    display: flex;
    min-height: 166px;
    flex-direction: column;
    padding: 28px 22px 24px;
    background: transparent;
}

.service-heading[b-zhxig3zkfq] {
    display: grid;
    width: 100%;
    min-height: 110px;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: center;
    gap: 14px;
}

.service-mark[b-zhxig3zkfq] {
    position: relative;
    display: grid;
    width: 88px;
    height: 96px;
    place-items: center;
    justify-self: end;
    color: var(--ks-primary-light);
    filter: drop-shadow(0 12px 20px rgba(0, 10, 18, 0.25));
    transition: color var(--ks-transition-normal), filter var(--ks-transition-normal);
}

.service-card:hover .service-mark[b-zhxig3zkfq],
.service-card:focus-within .service-mark[b-zhxig3zkfq] {
    color: #8fd8ff;
    filter: drop-shadow(0 14px 24px rgba(var(--ks-primary-rgb), 0.18));
}

.card-header[b-zhxig3zkfq]  .card-title {
    margin: 0 !important;
    color: var(--home-ink) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.018em !important;
    transition: color var(--ks-transition-fast), transform var(--ks-transition-normal);
}

.service-card:hover .card-header[b-zhxig3zkfq]  .card-title,
.service-card:focus-within .card-header[b-zhxig3zkfq]  .card-title {
    color: #ffffff !important;
    transform: translateX(3px);
}

.card-body[b-zhxig3zkfq] {
    flex: 1;
    padding: 0 22px 24px;
}

.service-item[b-zhxig3zkfq] {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: var(--home-muted);
    border-top: 1px solid var(--home-line);
    text-decoration: none;
    transition:
        color var(--ks-transition-fast),
        padding var(--ks-transition-normal),
        background var(--ks-transition-normal);
}

.service-item:hover[b-zhxig3zkfq],
.service-item:focus-visible[b-zhxig3zkfq] {
    padding-right: 6px;
    padding-left: 6px;
    color: #ffffff;
    background: rgba(var(--ks-primary-rgb), 0.08);
    outline: none;
}

.item-label[b-zhxig3zkfq] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.item-label[b-zhxig3zkfq]  .item-line-icon {
    --service-line-icon-size: 26px;
    --service-line-icon-stroke: 1.75;
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    color: var(--ks-primary-light);
    opacity: 0.68;
    transition: opacity var(--ks-transition-normal), transform var(--ks-transition-normal);
}

.service-item:hover .item-label[b-zhxig3zkfq]  .item-line-icon,
.service-item:focus-visible .item-label[b-zhxig3zkfq]  .item-line-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.service-item .item-text[b-zhxig3zkfq] {
    min-width: 0;
    font-size: 0.90625rem;
    line-height: 1.35;
}

.service-item[b-zhxig3zkfq]  .item-arrow {
    flex: 0 0 auto;
    color: var(--ks-primary-light);
    opacity: 0.38;
    transition: opacity var(--ks-transition-fast), transform var(--ks-transition-fast);
}

.service-item:hover[b-zhxig3zkfq]  .item-arrow,
.service-item:focus-visible[b-zhxig3zkfq]  .item-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.section-footer[b-zhxig3zkfq]  .section-button-icon,
.about-text[b-zhxig3zkfq]  .section-button-icon,
.cta-actions[b-zhxig3zkfq]  .cta-button-icon {
    margin-left: 9px;
}

.cta-actions[b-zhxig3zkfq]  .cta-button-icon {
    margin-right: 9px;
    margin-left: 0;
}

.about-section[b-zhxig3zkfq] {
    overflow: hidden;
    padding: 112px 0;
    color: #ffffff;
    background: transparent;
    border-bottom: 1px solid var(--home-line);
}

.about-section[b-zhxig3zkfq]::before {
    position: absolute;
    top: -120px;
    right: 7%;
    width: 1px;
    height: 440px;
    content: '';
    background: linear-gradient(transparent, rgba(97, 197, 250, 0.34), transparent);
    transform: rotate(38deg);
}

.about-section[b-zhxig3zkfq]::after {
    position: absolute;
    top: 0;
    right: 8%;
    width: 28%;
    height: 4px;
    content: '';
    background: linear-gradient(90deg, transparent, var(--ks-primary));
}

.about-content[b-zhxig3zkfq] {
    box-sizing: border-box;
    width: 64%;
    max-width: none;
    margin: 0;
    padding: 42px 46px;
    text-align: left;
    color: var(--ks-glass-ink-dark, #f1f6f8);
    background: var(--ks-glass-dark, rgba(17, 29, 36, 0.46));
    border: 1px solid var(--ks-glass-border-dark, rgba(174, 201, 213, 0.2));
    border-left: 3px solid var(--ks-primary);
    box-shadow:
        0 28px 70px rgba(0, 8, 15, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
    backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
}

.about-text[b-zhxig3zkfq]  .section-title {
    margin: 0 0 24px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 3.5vw, 3.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
}

.about-text[b-zhxig3zkfq]  .about-description {
    max-width: 760px;
    margin: 0 0 34px !important;
    color: var(--ks-glass-muted-dark, #cfdfe6) !important;
    font-size: 1.04rem !important;
    line-height: 1.9 !important;
}

.projects-section[b-zhxig3zkfq] {
    padding: 112px 0;
    background: transparent;
}

.projects-glass[b-zhxig3zkfq] {
    padding: 20px;
    background: var(--ks-glass-dark, rgba(17, 29, 36, 0.46));
    border: 1px solid var(--ks-glass-border-dark, rgba(174, 201, 213, 0.2));
    box-shadow:
        0 26px 64px rgba(0, 8, 15, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
    backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
}

.projects-glass[b-zhxig3zkfq]  .gallery-card {
    background: rgba(5, 20, 30, 0.76);
    border: 1px solid rgba(138, 204, 239, 0.18);
    border-radius: var(--ks-radius-sm);
    box-shadow: 0 16px 36px rgba(0, 7, 12, 0.25);
}

.projects-glass[b-zhxig3zkfq]  .scroller-fade-left {
    background: linear-gradient(90deg, rgba(8, 29, 42, 0.9), transparent);
}

.projects-glass[b-zhxig3zkfq]  .scroller-fade-right {
    background: linear-gradient(270deg, rgba(8, 29, 42, 0.9), transparent);
}

.projects-glass[b-zhxig3zkfq]  .scroller-bullet {
    background-color: rgba(224, 240, 248, 0.28);
}

.projects-glass[b-zhxig3zkfq]  .scroller-bullet.active {
    background-color: var(--ks-primary-light);
}

.cta-section[b-zhxig3zkfq] {
    overflow: hidden;
    padding: 96px 0;
    text-align: left;
    background: transparent;
}

.cta-section[b-zhxig3zkfq]::before {
    position: absolute;
    top: 0;
    left: 0;
    width: min(36vw, 520px);
    height: 5px;
    content: '';
    background: linear-gradient(90deg, var(--ks-primary), var(--ks-primary-light), transparent);
}

.cta-section[b-zhxig3zkfq]::after {
    position: absolute;
    top: 0;
    right: -6%;
    width: 38%;
    height: 100%;
    content: '';
    background: linear-gradient(135deg, transparent 46%, rgba(var(--ks-primary-rgb), 0.1) 46.2%, transparent 46.7%);
    pointer-events: none;
}

.cta-panel[b-zhxig3zkfq] {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 46px 48px;
    color: var(--ks-glass-ink-dark, #f1f6f8);
    background: var(--ks-glass-dark-strong, rgba(12, 24, 32, 0.64));
    border: 1px solid var(--ks-glass-border-dark, rgba(174, 201, 213, 0.2));
    border-left: 3px solid var(--ks-primary);
    box-shadow:
        0 30px 72px rgba(0, 8, 15, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
    backdrop-filter: blur(var(--ks-glass-blur-dark, 16px));
}

.cta-section[b-zhxig3zkfq]  .cta-title {
    max-width: 780px;
    margin: 0 0 14px !important;
    color: #ffffff !important;
    font-size: clamp(1.8rem, 3.4vw, 3.1rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
}

.cta-section[b-zhxig3zkfq]  .cta-subtitle {
    max-width: 700px;
    margin: 0 0 32px !important;
    color: var(--ks-glass-muted-dark, #cfdfe6) !important;
    line-height: 1.75 !important;
}

.cta-actions[b-zhxig3zkfq] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-actions[b-zhxig3zkfq]  .cta-btn {
    min-height: 50px;
    padding: 0 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--ks-radius-sm) !important;
    box-shadow: 0 14px 30px rgba(0, 8, 14, 0.22) !important;
    font-weight: 700 !important;
}

.cta-actions[b-zhxig3zkfq]  .cta-btn.whatsapp {
    background: var(--ks-whatsapp) !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .service-list-grid[b-zhxig3zkfq],
    .about-content[b-zhxig3zkfq],
    .projects-glass[b-zhxig3zkfq],
    .cta-panel[b-zhxig3zkfq] {
        background: #102630;
    }
}

@media (max-width: 1100px) {
    .service-list-grid[b-zhxig3zkfq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card:nth-child(2)[b-zhxig3zkfq] {
        border-right: 0;
    }

    .service-card:nth-child(-n+2)[b-zhxig3zkfq] {
        border-bottom: 1px solid var(--home-line);
    }
}

@media (max-width: 700px) {
    .home-page-shell[b-zhxig3zkfq] {
        background:
            radial-gradient(circle at 82% 9%, rgba(var(--ks-primary-rgb), 0.12), transparent 28%),
            radial-gradient(circle at 10% 58%, rgba(97, 197, 250, 0.055), transparent 34%);
    }

    .section-header[b-zhxig3zkfq] {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 34px;
    }

    .service-list-section[b-zhxig3zkfq],
    .about-section[b-zhxig3zkfq],
    .projects-section[b-zhxig3zkfq] {
        padding: 72px 0;
    }

    .service-list-grid[b-zhxig3zkfq] {
        grid-template-columns: 1fr;
        background: rgba(12, 24, 32, 0.82);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .service-card[b-zhxig3zkfq],
    .service-card:nth-child(2)[b-zhxig3zkfq] {
        border-right: 0;
        border-bottom: 1px solid var(--home-line);
    }

    .service-card:last-child[b-zhxig3zkfq] {
        border-bottom: 0;
    }

    .service-card:hover[b-zhxig3zkfq] {
        transform: none;
    }

    .card-header[b-zhxig3zkfq] {
        min-height: 0;
        gap: 14px;
        padding: 22px 20px 20px;
    }

    .service-heading[b-zhxig3zkfq] {
        min-height: 88px;
        grid-template-columns: minmax(0, 1fr) 72px;
        gap: 18px;
    }

    .service-mark[b-zhxig3zkfq] {
        width: 72px;
        height: 78px;
    }

    .card-body[b-zhxig3zkfq] {
        padding: 0 20px 22px;
    }

    .service-card:hover .card-header[b-zhxig3zkfq]  .card-title,
    .service-card:focus-within .card-header[b-zhxig3zkfq]  .card-title {
        transform: none;
    }

    .about-content[b-zhxig3zkfq] {
        width: 100%;
        padding: 30px 24px;
        background: rgba(12, 24, 32, 0.82);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .projects-glass[b-zhxig3zkfq] {
        margin-right: -8px;
        margin-left: -8px;
        padding: 12px;
        background: rgba(12, 24, 32, 0.82);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .section-footer[b-zhxig3zkfq] {
        margin-top: 30px;
    }

    .cta-section[b-zhxig3zkfq] {
        padding: 72px 0;
    }

    .cta-panel[b-zhxig3zkfq] {
        padding: 34px 24px;
        background: rgba(12, 24, 32, 0.86);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .cta-actions[b-zhxig3zkfq] {
        align-items: stretch;
        flex-direction: column;
    }

    .cta-actions[b-zhxig3zkfq]  .cta-btn {
        width: 100%;
    }
}

@media (hover: none) {
    .service-card:hover[b-zhxig3zkfq],
    .service-card:focus-within[b-zhxig3zkfq] {
        background: rgba(13, 42, 57, 0.52);
        box-shadow: none;
        transform: none;
    }

    .service-card:hover[b-zhxig3zkfq]::before,
    .service-card:focus-within[b-zhxig3zkfq]::before {
        transform: scaleX(0);
    }
}
/* /Components/Pages/News.razor.rz.scp.css */
/* ============================================
   新闻页面 (News.razor) - MudTimeline 布局
   ============================================ */

/* ----------------------------------------
   时间轴容器 - 毛玻璃效果
   ---------------------------------------- */
.timeline-wrapper[b-fy9shxi6qi] {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(248, 250, 250, 0.76);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-lg);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32));
}

/* ----------------------------------------
   年份标记
   ---------------------------------------- */
.year-header[b-fy9shxi6qi] {
    margin-bottom: var(--ks-space-md);
    margin-top: var(--ks-space-lg);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    padding-left: 7px; /* 与时间线中部对齐 */
}

.year-header:first-child[b-fy9shxi6qi] {
    margin-top: 0;
}

.year-header[b-fy9shxi6qi]  .mud-chip {
    font-weight: 600;
    font-size: var(--ks-font-size-md);
    padding: 0 var(--ks-space-md);
    transition: all var(--ks-transition-fast);
}

.year-header:hover[b-fy9shxi6qi]  .mud-chip {
    transform: scale(1.02);
    box-shadow: var(--ks-shadow-sm);
}

.year-header[b-fy9shxi6qi]  .expand-icon {
    margin-left: var(--ks-space-xs);
    opacity: 0.8;
}

/* ----------------------------------------
   时间轴折叠动画
   ---------------------------------------- */
.timeline-collapse[b-fy9shxi6qi] {
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.timeline-collapse.expanded[b-fy9shxi6qi] {
    max-height: 10000px;
    opacity: 1;
}

.timeline-collapse.collapsed[b-fy9shxi6qi] {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

/* ----------------------------------------
   MudTimeline 样式覆盖
   ---------------------------------------- */
.news-timeline[b-fy9shxi6qi]  .mud-timeline-item {
    padding-bottom: var(--ks-space-sm);
}

/* 时间轴线渐变 */
.news-timeline[b-fy9shxi6qi]  .mud-timeline::before {
    background: linear-gradient(
        to bottom,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-primary-lighten) 50%,
        var(--mud-palette-lines-default) 100%
    ) !important;
}

/* ----------------------------------------
   新闻画廊卡片
   ---------------------------------------- */

/* 卡片底部内容 */
.news-card-footer[b-fy9shxi6qi] {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-xs);
}

/* 摘要文字 - 限制2行，超出显示省略号，保留换行 */
.news-card-footer[b-fy9shxi6qi]  .news-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
    white-space: pre-line; /* 保留换行符 */
}

.news-card-footer .news-meta[b-fy9shxi6qi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-card-footer .category-chip[b-fy9shxi6qi] {
    padding: 0;
    height: auto;
    font-size: 0.90625rem;
}

.news-card-footer .read-more-btn[b-fy9shxi6qi] {
    padding: 0;
    min-width: auto;
    font-size: 0.90625rem;
}

/* ----------------------------------------
   响应式设计
   ---------------------------------------- */

/* 手机端 */
@media (max-width: 600px) {
    .timeline-wrapper[b-fy9shxi6qi] {
        max-width: 100%;
    }

    .year-header[b-fy9shxi6qi]  .mud-chip {
        font-size: var(--ks-font-size-sm);
        padding: 0 0.90625rem;
    }

    .news-gallery-card[b-fy9shxi6qi] {
        aspect-ratio: 4 / 3;
    }
}

/* ----------------------------------------
   懒加载相关
   ---------------------------------------- */
.load-more-trigger[b-fy9shxi6qi] {
    height: 1px;
    visibility: hidden;
}

.loading-indicator[b-fy9shxi6qi] {
    display: flex;
    justify-content: center;
    padding: var(--ks-space-xl) 0;
}

.end-of-list[b-fy9shxi6qi] {
    text-align: center;
    padding: var(--ks-space-lg) 0;
    color: var(--mud-palette-text-secondary);
    font-size: var(--ks-font-size-sm);
}

/* ----------------------------------------
   内容整理中提示 - 毛玻璃效果
   ---------------------------------------- */
.news-page-scope[b-fy9shxi6qi]  .content-notice {
    background: rgba(248, 250, 250, 0.78);
    border: 1px solid rgba(30, 136, 229, 0.2);
    border-radius: var(--ks-radius-lg);
    border-left: 4px solid var(--ks-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.notice-content[b-fy9shxi6qi] {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-lg);
}

.notice-icon[b-fy9shxi6qi] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--ks-primary-light), var(--ks-primary));
    border-radius: var(--ks-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: var(--ks-shadow-sm);
}

.notice-text[b-fy9shxi6qi] {
    flex: 1;
}

.notice-title[b-fy9shxi6qi] {
    color: var(--ks-primary-dark);
    font-weight: 600;
}

.notice-title i[b-fy9shxi6qi] {
    color: var(--ks-primary);
}

/* 移动端适配 */
@media (max-width: 599px) {
    .notice-content[b-fy9shxi6qi] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .notice-icon[b-fy9shxi6qi] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}
/* /Components/Pages/NewsDetail.razor.rz.scp.css */
/* ============================================
   新闻详情页 (NewsDetail.razor)
   ============================================ */

/* ----------------------------------------
   页面容器
   ---------------------------------------- */
.news-detail-shell[b-75cw7n8u0x]  .news-detail-page {
    max-width: 800px;
}

/* ----------------------------------------
   内容卡片（毛玻璃背景）
   ---------------------------------------- */
.content-card[b-75cw7n8u0x] {
    color: var(--ks-glass-ink-light, #15242b);
    background: var(--ks-glass-light-strong, rgba(248, 250, 250, 0.92));
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(92%);
    backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(92%);
    border-radius: var(--ks-radius-lg);
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32));
    box-shadow: 0 24px 64px rgba(7, 18, 25, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    padding: var(--ks-space-lg);
}

/* ----------------------------------------
   未找到页面图标
   ---------------------------------------- */
.not-found-icon[b-75cw7n8u0x] {
    text-align: center;
}

.not-found-icon i[b-75cw7n8u0x] {
    font-size: 3rem;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------
   顶部导航
   ---------------------------------------- */
.detail-header[b-75cw7n8u0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.news-detail-shell[b-75cw7n8u0x]  .back-button {
    margin-left: -0.75rem;
}

/* ----------------------------------------
   主要内容卡片
   ---------------------------------------- */
.news-detail-shell[b-75cw7n8u0x]  .detail-card {
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* 标签区 */
.detail-tags[b-75cw7n8u0x] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* 标题 */
.news-detail-shell[b-75cw7n8u0x]  .detail-card .detail-title {
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
    color: var(--ks-glass-ink-light, #15242b) !important;
}

/* 特色图片 */
.detail-image-wrapper[b-75cw7n8u0x] {
    margin-bottom: 2rem;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
}

.detail-image-wrapper[b-75cw7n8u0x]  .detail-image {
    width: 100%;
    height: 400px;
    border-radius: var(--ks-radius-md);
    background: var(--ks-background-gray);
}

/* 正文内容 */
.detail-content[b-75cw7n8u0x] {
    line-height: 1.9;
}

.content-paragraph[b-75cw7n8u0x] {
    margin-bottom: 1.25rem;
    color: var(--ks-glass-ink-light, #15242b);
    text-align: justify;
}

.content-paragraph:last-child[b-75cw7n8u0x] {
    margin-bottom: 0;
}

/* ----------------------------------------
   分享区域
   ---------------------------------------- */
.share-section[b-75cw7n8u0x] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.news-detail-shell[b-75cw7n8u0x]  .share-label {
    white-space: nowrap;
}

.share-buttons[b-75cw7n8u0x] {
    display: flex;
    gap: 0.25rem;
}

/* ----------------------------------------
   相关新闻
   ---------------------------------------- */
.related-section[b-75cw7n8u0x] {
    margin-top: 3rem;
}

.news-detail-shell[b-75cw7n8u0x]  .related-title {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.news-detail-shell[b-75cw7n8u0x]  .related-card {
    cursor: pointer;
    transition: all var(--ks-transition-normal);
    border-radius: var(--ks-radius-md);
    height: 100%;
}

.news-detail-shell[b-75cw7n8u0x]  .related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-md);
}

.news-detail-shell[b-75cw7n8u0x]  .related-card .mud-card-media {
    border-radius: var(--ks-radius-md) var(--ks-radius-md) 0 0;
}

.news-detail-shell[b-75cw7n8u0x]  .related-card-title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* ----------------------------------------
   底部导航
   ---------------------------------------- */
.bottom-nav[b-75cw7n8u0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ----------------------------------------
   404 页面
   ---------------------------------------- */
.news-detail-shell[b-75cw7n8u0x]  .not-found-card {
    text-align: center;
    border-radius: var(--ks-radius-lg);
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32));
    background: var(--ks-glass-light-strong, rgba(248, 250, 250, 0.92));
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(92%);
    backdrop-filter: blur(var(--ks-glass-blur-light, 18px)) saturate(92%);
    box-shadow: 0 24px 64px rgba(7, 18, 25, 0.16);
}

.news-detail-shell[b-75cw7n8u0x]  .not-found-card .mud-icon-root {
    font-size: var(--ks-font-size-4xl);
    opacity: 0.5;
}

/* ----------------------------------------
   响应式设计
   ---------------------------------------- */

/* 平板端 */
@media (max-width: 900px) {
    .news-detail-shell[b-75cw7n8u0x]  .detail-card {
        padding: 1.5rem;
    }

    .detail-image-wrapper[b-75cw7n8u0x]  .detail-image {
        height: 300px;
    }
}

/* 手机端 */
@media (max-width: 600px) {
    .news-detail-shell[b-75cw7n8u0x]  .news-detail-page {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .content-card[b-75cw7n8u0x],
    .news-detail-shell[b-75cw7n8u0x]  .not-found-card {
        background: rgba(248, 250, 250, 0.95);
        -webkit-backdrop-filter: blur(10px) saturate(92%);
        backdrop-filter: blur(10px) saturate(92%);
    }

    .detail-header[b-75cw7n8u0x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news-detail-shell[b-75cw7n8u0x]  .detail-card {
        padding: 1.25rem;
    }

    .news-detail-shell[b-75cw7n8u0x]  .detail-card .detail-title {
        font-size: var(--ks-font-size-xl) !important;
    }

    .detail-image-wrapper[b-75cw7n8u0x]  .detail-image {
        height: 200px;
    }

    .share-section[b-75cw7n8u0x] {
        flex-direction: column;
        align-items: flex-start;
    }

    .bottom-nav[b-75cw7n8u0x] {
        flex-direction: column;
    }

    .bottom-nav[b-75cw7n8u0x]  .mud-button-root {
        width: 100%;
    }

    .news-detail-shell[b-75cw7n8u0x]  .related-card:hover {
        transform: none;
    }
}

/* 超小屏幕 */
@media (max-width: 400px) {
    .news-detail-shell[b-75cw7n8u0x]  .detail-card {
        padding: 1rem;
    }

    .news-detail-shell[b-75cw7n8u0x]  .detail-card .detail-title {
        font-size: var(--ks-font-size-lg) !important;
    }

    .detail-image-wrapper[b-75cw7n8u0x]  .detail-image {
        height: 160px;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .content-card[b-75cw7n8u0x],
    .news-detail-shell[b-75cw7n8u0x]  .not-found-card {
        background: #f8fafa;
    }
}
/* /Components/Pages/ProjectDetail.razor.rz.scp.css */
/* Project detail: unified gunmetal engineering surface. */

.project-detail-shell[b-i3tmgjzykd]  .project-detail-page {
    min-height: 100vh;
}

.project-breadcrumb[b-i3tmgjzykd] {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 18px;
    color: var(--public-muted, #d5e2e7);
    background: rgba(6, 25, 38, 0.82);
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-left: 3px solid var(--ks-primary);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    box-shadow: 0 12px 34px rgba(0, 10, 18, 0.2);
    -webkit-backdrop-filter: blur(14px) saturate(100%);
    backdrop-filter: blur(14px) saturate(100%);
    overflow: hidden;
}

.project-breadcrumb[b-i3tmgjzykd]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    height: 1px;
    background: var(--ks-primary-light);
    transform: rotate(45deg);
    transform-origin: right top;
    opacity: 0.72;
}

.project-breadcrumb ol[b-i3tmgjzykd] {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0;
    padding: 0 30px 0 15px;
    list-style: none;
    white-space: nowrap;
}

.project-breadcrumb li[b-i3tmgjzykd] { display: inline-flex; align-items: center; min-width: 0; }

.breadcrumb-link[b-i3tmgjzykd],
.breadcrumb-current[b-i3tmgjzykd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    color: inherit;
    font-size: 0.91rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.breadcrumb-link:hover[b-i3tmgjzykd],
.breadcrumb-link:focus-visible[b-i3tmgjzykd] { color: var(--ks-primary-light); }

.breadcrumb-link:focus-visible[b-i3tmgjzykd] { outline: 2px solid var(--ks-primary-light); outline-offset: 3px; }

.breadcrumb-current[b-i3tmgjzykd] {
    max-width: min(34vw, 390px);
    color: var(--public-ink, #f1f6f8);
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-separator[b-i3tmgjzykd] { margin: 0 8px; color: rgba(97, 197, 250, 0.62); }

.content-card[b-i3tmgjzykd] {
    position: relative;
    padding: clamp(22px, 3.5vw, 44px);
    color: var(--public-ink, #f1f6f8);
    background:
        linear-gradient(rgba(97, 197, 250, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 197, 250, 0.024) 1px, transparent 1px),
        var(--public-glass-strong, rgba(6, 25, 38, 0.76));
    background-size: 56px 56px, 56px 56px, auto;
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-top: 3px solid var(--ks-primary);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: 0 24px 64px rgba(0, 10, 18, 0.26);
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark, 16px)) saturate(100%);
    backdrop-filter: blur(var(--ks-glass-blur-dark, 16px)) saturate(100%);
}

.content-card[b-i3tmgjzykd]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: clamp(22px, 3.5vw, 44px);
    width: 72px;
    height: 3px;
    background: var(--ks-primary-light);
}

.detail-content-wrapper[b-i3tmgjzykd] { overflow: hidden; }

.project-detail-shell[b-i3tmgjzykd]  .image-section { height: 100%; background: transparent; }

.project-detail-shell[b-i3tmgjzykd]  .main-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(360px, 34vw, 470px) !important;
    object-fit: cover;
    border: 1px solid rgba(184, 208, 218, 0.28);
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: 0 18px 38px rgba(0, 8, 16, 0.32) !important;
}

.project-detail-shell[b-i3tmgjzykd]  .info-section {
    height: 100%;
    padding: clamp(4px, 1vw, 12px) clamp(2px, 1vw, 10px);
    color: var(--public-ink, #f1f6f8);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.project-detail-shell[b-i3tmgjzykd]  .project-title {
    margin: 0 0 clamp(22px, 3vw, 32px);
    color: var(--public-ink, #f1f6f8) !important;
    font-size: clamp(1.7rem, 2.5vw, 2.35rem) !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.info-grid[b-i3tmgjzykd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.info-item[b-i3tmgjzykd] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    min-height: 72px;
    padding: 12px 13px;
    color: var(--public-muted, #d5e2e7);
    background: rgba(5, 22, 34, 0.52);
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-left: 2px solid rgba(var(--ks-primary-rgb), 0.58);
}

.info-icon[b-i3tmgjzykd] { margin-top: 2px; color: var(--ks-primary-light); }
.info-label[b-i3tmgjzykd], .info-value[b-i3tmgjzykd] { margin: 0; }

.info-label[b-i3tmgjzykd] {
    color: rgba(207, 223, 230, 0.82);
    font-size: 0.91rem;
    font-weight: 600 !important;
    line-height: 1.35;
}

.info-value[b-i3tmgjzykd] {
    margin-top: 3px;
    color: var(--public-ink, #f1f6f8);
    font-size: 1.03rem;
    font-weight: 600 !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.project-copy-section[b-i3tmgjzykd] { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--public-line, rgba(138, 204, 239, 0.2)); }

.project-copy-title[b-i3tmgjzykd] {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    color: var(--public-muted, #d5e2e7);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.4;
}

.project-description[b-i3tmgjzykd],
.customer-review-text[b-i3tmgjzykd] {
    color: var(--public-muted, #d5e2e7);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.78;
}

.project-description[b-i3tmgjzykd]  > :first-child,
.customer-review-text[b-i3tmgjzykd]  > :first-child { margin-top: 0; }
.project-description[b-i3tmgjzykd]  > :last-child,
.customer-review-text[b-i3tmgjzykd]  > :last-child { margin-bottom: 0; }

.customer-review-card[b-i3tmgjzykd] {
    position: relative;
    margin: 0;
    padding: 18px 20px 18px 44px;
    background: rgba(5, 22, 34, 0.52);
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-left: 3px solid var(--ks-primary);
}

.customer-review-card[b-i3tmgjzykd]::before {
    content: "“";
    position: absolute;
    top: 7px;
    left: 13px;
    color: var(--ks-primary-light);
    font: 700 2.6rem/1 Georgia, serif;
    opacity: 0.56;
}

.action-section[b-i3tmgjzykd] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
}

.share-buttons[b-i3tmgjzykd] { display: flex; align-items: center; }

.gallery-section[b-i3tmgjzykd],
.related-section[b-i3tmgjzykd] {
    position: relative;
    padding: clamp(24px, 3vw, 36px);
    color: var(--public-ink, #f1f6f8);
    background: linear-gradient(90deg, rgba(97, 197, 250, 0.025) 1px, transparent 1px), rgba(5, 22, 34, 0.76);
    background-size: 58px 58px, auto;
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-left: 3px solid rgba(97, 197, 250, 0.64);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.gallery-section[b-i3tmgjzykd]  .gallery-title,
.related-section[b-i3tmgjzykd]  .related-title {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    color: var(--public-ink, #f1f6f8) !important;
    font-weight: 700 !important;
}

.masonry-gallery[b-i3tmgjzykd] { column-count: 3; column-gap: 12px; }

.masonry-item[b-i3tmgjzykd] {
    position: relative;
    break-inside: avoid;
    margin-bottom: 12px;
    border: 1px solid rgba(184, 208, 218, 0.28);
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.masonry-item:hover[b-i3tmgjzykd],
.masonry-item:focus-within[b-i3tmgjzykd] {
    border-color: var(--ks-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 8, 16, 0.28);
}

.masonry-item[b-i3tmgjzykd]  img { display: block; width: 100%; height: auto; transition: transform 260ms ease; }
.masonry-item:hover[b-i3tmgjzykd]  img { transform: scale(1.025); }

.masonry-overlay[b-i3tmgjzykd] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(3, 15, 24, 0.42);
    opacity: 0;
    transition: opacity 200ms ease;
}

.masonry-item:hover .masonry-overlay[b-i3tmgjzykd] { opacity: 1; }
.masonry-zoom-icon[b-i3tmgjzykd] { color: #fff; }

.project-detail-shell[b-i3tmgjzykd]  .related-card {
    height: 100%;
    color: var(--public-ink, #f1f6f8);
    background: rgba(7, 27, 40, 0.72);
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.project-detail-shell[b-i3tmgjzykd]  .related-card:hover {
    background: rgba(16, 54, 72, 0.82);
    border-color: rgba(97, 197, 250, 0.62);
    transform: translateY(-3px);
}

.related-card-header[b-i3tmgjzykd] { display: flex; justify-content: space-between; align-items: center; }

.project-detail-shell[b-i3tmgjzykd]  .related-card-title {
    display: -webkit-box !important;
    color: var(--public-ink, #f1f6f8) !important;
    font-weight: 650 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-sequence-nav[b-i3tmgjzykd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "previous list next";
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;
    padding: 12px;
    color: var(--public-ink, #f1f6f8);
    background: var(--public-glass-strong, rgba(6, 25, 38, 0.76));
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-top: 2px solid rgba(var(--ks-primary-rgb), 0.72);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    -webkit-backdrop-filter: blur(12px) saturate(100%);
    backdrop-filter: blur(12px) saturate(100%);
}

.project-sequence-link[b-i3tmgjzykd],
.project-list-link[b-i3tmgjzykd] {
    min-height: 62px;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 190ms ease, background-color 190ms ease, border-color 190ms ease, transform 190ms ease;
}

.project-sequence-link[b-i3tmgjzykd] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
}

.project-sequence-previous[b-i3tmgjzykd] { grid-area: previous; }
.project-sequence-next[b-i3tmgjzykd] { grid-area: next; grid-template-columns: minmax(0, 1fr) 22px; text-align: right; }
.project-sequence-copy[b-i3tmgjzykd] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.project-sequence-copy strong[b-i3tmgjzykd] {
    color: var(--public-ink, #f1f6f8);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-sequence-label[b-i3tmgjzykd] { color: var(--public-muted, #d5e2e7); font-size: 0.84rem; font-weight: 600; }

.project-list-link[b-i3tmgjzykd] {
    grid-area: list;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    color: var(--public-ink, #f1f6f8);
    font-size: 0.94rem;
    font-weight: 650;
    white-space: nowrap;
    border-color: var(--public-line, rgba(138, 204, 239, 0.2));
}

.project-sequence-link:hover[b-i3tmgjzykd],
.project-sequence-link:focus-visible[b-i3tmgjzykd],
.project-list-link:hover[b-i3tmgjzykd],
.project-list-link:focus-visible[b-i3tmgjzykd] {
    color: #fff;
    background: rgba(var(--ks-primary-rgb), 0.16);
    border-color: rgba(97, 197, 250, 0.52);
    transform: translateY(-1px);
}

.project-sequence-link:focus-visible[b-i3tmgjzykd],
.project-list-link:focus-visible[b-i3tmgjzykd] { outline: 2px solid var(--ks-primary); outline-offset: 2px; }

.lightbox-overlay[b-i3tmgjzykd] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 10, 0.97);
    animation: fadeIn-b-i3tmgjzykd 0.2s ease-out;
}

@keyframes fadeIn-b-i3tmgjzykd { from { opacity: 0; } to { opacity: 1; } }

.lightbox-container[b-i3tmgjzykd] { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 16px; box-sizing: border-box; }
.lightbox-header[b-i3tmgjzykd] { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; color: #fff; }

.lightbox-content[b-i3tmgjzykd] {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px 60px;
}

.lightbox-image[b-i3tmgjzykd] { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid rgba(184, 208, 218, 0.28); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55); }

.lightbox-nav[b-i3tmgjzykd] {
    position: absolute;
    top: 50%;
    color: #fff !important;
    background: rgba(29, 42, 48, 0.86) !important;
    border: 1px solid rgba(183, 199, 205, 0.28) !important;
    border-radius: 0 !important;
    transform: translateY(-50%);
}

.lightbox-prev[b-i3tmgjzykd] { left: 16px; }
.lightbox-next[b-i3tmgjzykd] { right: 16px; }
.lightbox-thumbnails[b-i3tmgjzykd] { display: flex; justify-content: center; gap: 8px; max-width: 100%; padding-top: 16px; overflow-x: auto; }

.lightbox-thumb[b-i3tmgjzykd] {
    flex-shrink: 0;
    width: 60px;
    height: 45px;
    border: 2px solid transparent;
    opacity: 0.52;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 180ms ease, border-color 180ms ease;
}

.lightbox-thumb:hover[b-i3tmgjzykd] { opacity: 0.82; }
.lightbox-thumb.active[b-i3tmgjzykd] { opacity: 1; border-color: var(--ks-primary-light); }
.lightbox-thumb img[b-i3tmgjzykd] { width: 100%; height: 100%; object-fit: cover; }
.not-found-icon[b-i3tmgjzykd] { color: var(--public-muted, #d5e2e7); text-align: center; }

.project-detail-shell[b-i3tmgjzykd]  .not-found-card {
    color: var(--public-ink, #f1f6f8);
    background: var(--public-glass-strong, rgba(6, 25, 38, 0.76));
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-top: 3px solid var(--ks-primary);
    border-radius: 0;
    box-shadow: 0 24px 64px rgba(7, 18, 25, 0.2);
}

@media (max-width: 960px) {
    .info-grid[b-i3tmgjzykd] { grid-template-columns: 1fr; }
    .masonry-gallery[b-i3tmgjzykd] { column-count: 2; }
}

@media (max-width: 700px) {
    .project-detail-shell[b-i3tmgjzykd]  .project-detail-page { padding-right: 12px !important; padding-left: 12px !important; }
    .project-breadcrumb[b-i3tmgjzykd] { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .project-breadcrumb[b-i3tmgjzykd]::-webkit-scrollbar { display: none; }
    .project-breadcrumb ol[b-i3tmgjzykd] { width: max-content; min-width: 100%; min-height: 44px; padding-right: 26px; }
    .breadcrumb-link[b-i3tmgjzykd], .breadcrumb-current[b-i3tmgjzykd] { min-height: 40px; font-size: 0.86rem; }
    .breadcrumb-current[b-i3tmgjzykd] { max-width: 180px; }

    .content-card[b-i3tmgjzykd] {
        padding: 22px 16px;
        background-color: rgba(6, 25, 38, 0.88);
        -webkit-backdrop-filter: blur(10px) saturate(100%);
        backdrop-filter: blur(10px) saturate(100%);
    }

    .content-card[b-i3tmgjzykd]::before { left: 16px; }
    .project-detail-shell[b-i3tmgjzykd]  .main-image { height: 260px !important; }
    .project-detail-shell[b-i3tmgjzykd]  .info-section { padding: 6px 0 0; }
    .project-detail-shell[b-i3tmgjzykd]  .project-title { margin-top: 8px; font-size: clamp(1.55rem, 8vw, 1.9rem) !important; }
    .info-item[b-i3tmgjzykd] { min-height: 68px; }
    .gallery-section[b-i3tmgjzykd], .related-section[b-i3tmgjzykd] { padding: 20px 16px; }
    .masonry-gallery[b-i3tmgjzykd] { column-count: 1; }

    .project-sequence-nav[b-i3tmgjzykd] {
        grid-template-columns: 1fr;
        grid-template-areas: "previous" "list" "next";
    }

    .project-sequence-next[b-i3tmgjzykd] { text-align: left; }
    .project-sequence-copy strong[b-i3tmgjzykd] { white-space: normal; }
    .project-list-link[b-i3tmgjzykd] { min-height: 52px; }
    .lightbox-content[b-i3tmgjzykd] { padding: 8px 40px; }
    .lightbox-prev[b-i3tmgjzykd] { left: 4px; }
    .lightbox-next[b-i3tmgjzykd] { right: 4px; }
    .lightbox-thumb[b-i3tmgjzykd] { width: 50px; height: 38px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .content-card[b-i3tmgjzykd], .project-sequence-nav[b-i3tmgjzykd] { background: #102630; }
    .project-breadcrumb[b-i3tmgjzykd] { background: #102630; }
}
/* /Components/Pages/Projects.razor.rz.scp.css */
/* ============================================
   项目案例页 (Projects.razor) - Tab + 画廊墙布局
   ============================================ */

/* ----------------------------------------
   自定义 Tab 筛选区（支持 FontAwesome）- 毛玻璃效果
   ---------------------------------------- */
.project-tabs-container[b-j46ynno33r] {
    background: rgba(248, 250, 250, 0.72);
    border-radius: var(--ks-radius-md);
    padding: var(--ks-space-xs);
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--public-line-rgb, 183, 199, 205), .34) rgba(var(--public-canvas-rgb, 10, 15, 18), .56);
}

.project-tabs-container[b-j46ynno33r]::-webkit-scrollbar { height: 4px; }
.project-tabs-container[b-j46ynno33r]::-webkit-scrollbar-track { background: rgba(var(--public-canvas-rgb, 10, 15, 18), .56); }
.project-tabs-container[b-j46ynno33r]::-webkit-scrollbar-thumb { background: rgba(var(--public-line-rgb, 183, 199, 205), .34); }

.project-tabs-wrapper[b-j46ynno33r] {
    display: flex;
    justify-content: center;
    gap: 0;
}

.project-tab[b-j46ynno33r] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ks-space-xs);
    padding: var(--ks-space-sm) var(--ks-space-md);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.90625rem;
    font-weight: 600;
    color: var(--ks-text-secondary);
    transition: color var(--ks-transition-fast), background-color var(--ks-transition-fast);
    border-radius: var(--ks-radius-sm);
    white-space: nowrap;
    flex: 1;
    max-width: 180px;
}

.project-tab:hover[b-j46ynno33r] {
    color: var(--ks-primary);
    background-color: rgba(30, 136, 229, 0.04);
}

.project-tab.active[b-j46ynno33r] {
    color: var(--ks-primary);
}

/* 选中状态的下划线指示器 */
.project-tab.active[b-j46ynno33r]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--ks-primary);
    border-radius: 2px;
}

.project-tab .tab-icon[b-j46ynno33r] {
    font-size: 1rem;
}

.project-tab .tab-text[b-j46ynno33r] {
    display: inline;
}

/* ----------------------------------------
   项目卡片网格
   ---------------------------------------- */
.projects-grid[b-j46ynno33r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ks-gap-lg);
}

/* ----------------------------------------
   分页信息
   ---------------------------------------- */
.pagination-info[b-j46ynno33r] {
    text-align: center;
    margin-top: var(--ks-space-lg);
    padding: var(--ks-space-sm) 0;
}

/* ----------------------------------------
   懒加载触发器
   ---------------------------------------- */
.load-more-trigger[b-j46ynno33r] {
    height: 1px;
    visibility: hidden;
}

/* ----------------------------------------
   画廊墙 - 图片网格
   ---------------------------------------- */
.gallery-wall[b-j46ynno33r] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ks-gap-md);
}

/* 单个画廊项 - 专业风格 */
.gallery-item[b-j46ynno33r] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    border: 1px solid var(--ks-border);
    transition: transform var(--ks-transition-normal), box-shadow var(--ks-transition-normal);
}

.gallery-item:hover[b-j46ynno33r] {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-md);
}

/* 画廊图片 */
.gallery-item[b-j46ynno33r]  .gallery-image {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}

.gallery-item:hover[b-j46ynno33r]  .gallery-image {
    transform: scale(1.08);
}

/* 悬停遮罩层 */
.gallery-overlay[b-j46ynno33r] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    padding: var(--ks-space-md);
}

.gallery-item:hover .gallery-overlay[b-j46ynno33r] {
    opacity: 1;
}

/* 遮罩层内容 */
.overlay-content[b-j46ynno33r] {
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.gallery-item:hover .overlay-content[b-j46ynno33r] {
    transform: translateY(0);
}

/* 需要 ::deep 穿透 MudText 覆盖默认 margin */
.overlay-content[b-j46ynno33r]  .gallery-title {
    font-weight: 600;
    margin-bottom: 0.25rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gallery-subtitle[b-j46ynno33r] {
    opacity: 0.9;
    font-size: var(--ks-font-size-sm);
}

/* 放大图标 */
.overlay-icon[b-j46ynno33r] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    transition: all 0.3s ease;
    background: rgba(12, 24, 32, 0.56);
    border-radius: 50%;
    padding: 1rem;
}

.gallery-item:hover .overlay-icon[b-j46ynno33r] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ----------------------------------------
   详情弹窗
   ---------------------------------------- */
.dialog-title[b-j46ynno33r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dialog-content[b-j46ynno33r] {
    display: flex;
    flex-direction: column;
    gap: var(--ks-gap-lg);
}

.dialog-content[b-j46ynno33r]  .dialog-image {
    width: 100%;
    height: 300px;
    border-radius: var(--ks-radius-md);
    background: var(--ks-background-gray);
}

.dialog-info[b-j46ynno33r] {
    padding: 0 var(--ks-space-sm);
}

.info-row[b-j46ynno33r] {
    display: flex;
    align-items: center;
    gap: var(--ks-space-sm);
    margin-bottom: var(--ks-space-sm);
}

.dialog-description[b-j46ynno33r] {
    line-height: 1.8;
    color: var(--ks-text-secondary);
}

/* ----------------------------------------
   响应式设计
   ---------------------------------------- */

/* 平板端 - 3列 */
@media (max-width: 1200px) {
    .gallery-wall[b-j46ynno33r] {
        grid-template-columns: repeat(3, 1fr);
    }
    .projects-grid[b-j46ynno33r] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ks-gap-md);
    }
}

/* 小平板 - 2列 */
@media (max-width: 900px) {
    .gallery-wall[b-j46ynno33r] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ks-space-sm);
    }
    .projects-grid[b-j46ynno33r] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ks-gap-md);
    }

    .gallery-item[b-j46ynno33r] {
        border-radius: var(--ks-radius-sm);
    }

    .gallery-overlay[b-j46ynno33r] {
        padding: var(--ks-space-sm);
    }
}

/* 手机端 - 2列紧凑 */
@media (max-width: 600px) {
    .gallery-wall[b-j46ynno33r] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ks-space-xs);
    }
    .projects-grid[b-j46ynno33r] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ks-gap-sm);
    }

    .gallery-item[b-j46ynno33r] {
        border-radius: var(--ks-radius-sm);
    }

    /* 手机端始终显示标题 */
    .gallery-overlay[b-j46ynno33r] {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            transparent 60%
        );
        padding: var(--ks-space-xs);
    }

    .overlay-content[b-j46ynno33r] {
        transform: translateY(0);
    }

    .overlay-icon[b-j46ynno33r] {
        display: none;
    }

    .overlay-content[b-j46ynno33r]  .gallery-title {
        font-size: var(--ks-font-size-sm);
    }

    .overlay-content[b-j46ynno33r]  .gallery-subtitle {
        font-size: var(--ks-font-size-xs);
    }

    /* Tab 响应式 - 只显示图标 */
    .project-tab[b-j46ynno33r] {
        padding: var(--ks-space-sm);
        min-width: 48px;
        max-width: none;
    }

    .project-tab .tab-text[b-j46ynno33r] {
        display: none;
    }

    .project-tab .tab-icon[b-j46ynno33r] {
        font-size: 1.125rem;
    }

    .dialog-content[b-j46ynno33r]  .dialog-image {
        height: 200px;
    }
}

/* 超小屏幕 - 单列 */
@media (max-width: 400px) {
    .gallery-wall[b-j46ynno33r] {
        grid-template-columns: 1fr;
    }
    .projects-grid[b-j46ynno33r] {
        grid-template-columns: 1fr;
    }

    .gallery-item[b-j46ynno33r] {
        aspect-ratio: 16 / 10;
    }
}

/* ----------------------------------------
   内容整理中提示 - 毛玻璃效果
   ---------------------------------------- */
.projects-page-scope[b-j46ynno33r]  .content-notice {
    background: rgba(248, 250, 250, 0.78);
    border: 1px solid rgba(30, 136, 229, 0.2);
    border-radius: var(--ks-radius-lg);
    border-left: 4px solid var(--ks-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.notice-content[b-j46ynno33r] {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-lg);
}

.notice-icon[b-j46ynno33r] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--ks-primary-light), var(--ks-primary));
    border-radius: var(--ks-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: var(--ks-shadow-sm);
}

.notice-text[b-j46ynno33r] {
    flex: 1;
}

.notice-title[b-j46ynno33r] {
    color: var(--ks-primary-dark);
    font-weight: 600;
}

.notice-title i[b-j46ynno33r] {
    color: var(--ks-primary);
}

/* 移动端适配 */
@media (max-width: 599px) {
    .notice-content[b-j46ynno33r] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .notice-icon[b-j46ynno33r] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}
/* /Components/Pages/ServiceDetail.razor.rz.scp.css */
/* Service detail: mineral reading surface framed by gunmetal navigation and CTA modules. */

.service-detail-shell[b-rz5lfk9ru7]  .service-detail-page {
    padding-top: 0;
    padding-bottom: clamp(48px, 6vw, 88px);
}

.service-detail-shell[b-rz5lfk9ru7]  .service-detail-state {
    margin-top: clamp(28px, 4vw, 56px);
    margin-bottom: 64px;
}

/* Breadcrumb rail */
.service-breadcrumb[b-rz5lfk9ru7] {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 18px;
    color: var(--public-muted, #d5e2e7);
    background: rgba(6, 25, 38, 0.82);
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-left: 3px solid var(--ks-primary);
    -webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    -webkit-backdrop-filter: blur(14px) saturate(100%);
    backdrop-filter: blur(14px) saturate(100%);
    box-shadow: 0 12px 34px rgba(0, 10, 18, 0.2);
    overflow: hidden;
}

.service-breadcrumb[b-rz5lfk9ru7]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    height: 1px;
    background: var(--ks-primary-light);
    transform: rotate(45deg);
    transform-origin: right top;
    opacity: 0.72;
    pointer-events: none;
}

.service-breadcrumb ol[b-rz5lfk9ru7] {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0;
    padding: 0 30px 0 15px;
    list-style: none;
    white-space: nowrap;
}

.service-breadcrumb li[b-rz5lfk9ru7] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.breadcrumb-link[b-rz5lfk9ru7],
.breadcrumb-current[b-rz5lfk9ru7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    color: inherit;
    font-size: 0.91rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.breadcrumb-link[b-rz5lfk9ru7] {
    transition: color 180ms ease, background-color 180ms ease;
}

.breadcrumb-link:hover[b-rz5lfk9ru7],
.breadcrumb-link:focus-visible[b-rz5lfk9ru7] {
    color: var(--ks-primary-light);
}

.breadcrumb-link:focus-visible[b-rz5lfk9ru7] {
    outline: 2px solid var(--ks-primary-light);
    outline-offset: 3px;
}

.breadcrumb-current[b-rz5lfk9ru7] {
    max-width: min(28vw, 300px);
    color: var(--public-ink, #f1f6f8);
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-separator[b-rz5lfk9ru7] {
    margin: 0 8px;
    color: rgba(97, 197, 250, 0.62);
}

/* Main information panel */
.content-card[b-rz5lfk9ru7] {
    position: relative;
    padding: clamp(24px, 4vw, 52px);
    color: var(--public-ink, #f1f6f8) !important;
}

.content-card[b-rz5lfk9ru7]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: clamp(24px, 4vw, 52px);
    width: 74px;
    height: 3px;
    background: var(--ks-primary-light);
}

.page-header[b-rz5lfk9ru7] {
    margin-bottom: 26px;
    text-align: left;
}

.service-detail-shell[b-rz5lfk9ru7]  .page-title {
    margin-bottom: 6px;
    color: var(--public-ink, #f1f6f8) !important;
    font-weight: 700;
    text-wrap: balance;
}

.service-detail-shell[b-rz5lfk9ru7]  .page-subtitle {
    color: var(--public-muted, #d5e2e7) !important;
    font-weight: 500;
    letter-spacing: 0.025em;
}

.content-sections[b-rz5lfk9ru7] {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 44px);
}

.service-detail-shell .content-section[b-rz5lfk9ru7],
.service-gallery-section[b-rz5lfk9ru7] {
    position: relative;
}

.service-detail-shell[b-rz5lfk9ru7]  .section-heading {
    margin-bottom: 0;
    color: var(--public-ink, #f1f6f8) !important;
    font-weight: 700;
}

.section-title-line[b-rz5lfk9ru7] {
    width: 56px;
    height: 2px;
    margin: 10px 0 24px;
    background: linear-gradient(90deg, var(--ks-primary-light), rgba(97, 197, 250, 0.08));
}

.section-text[b-rz5lfk9ru7],
.section-text-wrapper[b-rz5lfk9ru7] {
    color: var(--public-muted, #d5e2e7) !important;
    font-size: 1rem;
    line-height: 1.82;
}

.service-detail-shell[b-rz5lfk9ru7]  .section-body-grid {
    align-items: stretch;
}

.section-images-wrapper[b-rz5lfk9ru7] {
    position: relative;
    width: 100%;
}

.section-text-wrapper[b-rz5lfk9ru7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 12px 0;
}

.service-gallery-section[b-rz5lfk9ru7] {
    margin-top: clamp(30px, 5vw, 54px);
}

/* Gallery launch rail: keep photos neutral, controls use the engineering system. */
.service-detail-shell[b-rz5lfk9ru7]  .image-scroll-container {
    background: rgba(4, 18, 28, 0.74) !important;
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    border-radius: 0 !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.service-detail-shell[b-rz5lfk9ru7]  .image-scroll-track {
    gap: 10px;
    padding: 10px;
}

.service-detail-shell[b-rz5lfk9ru7]  .scroll-image-item {
    border: 1px solid rgba(184, 208, 218, 0.32);
    border-radius: 0 !important;
    box-shadow: none !important;
}

.service-detail-shell[b-rz5lfk9ru7]  .scroll-image-item:hover,
.service-detail-shell[b-rz5lfk9ru7]  .scroll-image-item:focus-within {
    border-color: var(--ks-primary-light);
    box-shadow: 0 12px 26px rgba(0, 8, 16, 0.28) !important;
}

.service-detail-shell[b-rz5lfk9ru7]  .image-label {
    color: #263b45;
    background: rgba(241, 246, 248, 0.94);
    border-top-color: rgba(91, 120, 133, 0.28);
}

.service-detail-shell[b-rz5lfk9ru7]  .image-counter {
    color: var(--public-muted, #d5e2e7);
    font-weight: 500;
}

/* Shared heading pattern for lower-page modules. */
.detail-section-header[b-rz5lfk9ru7] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 22px;
}

.detail-section-kicker[b-rz5lfk9ru7] {
    color: var(--ks-primary-light);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-detail-shell .related-section[b-rz5lfk9ru7] {
    position: relative;
    margin-top: 22px;
    padding: clamp(24px, 3vw, 36px) !important;
    background:
        linear-gradient(90deg, rgba(97, 197, 250, 0.025) 1px, transparent 1px),
        rgba(5, 22, 34, 0.74) !important;
    background-size: 58px 58px, auto !important;
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2)) !important;
    border-left: 3px solid rgba(97, 197, 250, 0.64) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.service-detail-shell[b-rz5lfk9ru7]  .related-title {
    margin: 0;
    color: var(--public-ink, #f1f6f8) !important;
    font-weight: 700;
}

.related-grid[b-rz5lfk9ru7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.related-service-card[b-rz5lfk9ru7] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 15px;
    color: var(--public-ink, #f1f6f8);
    background: rgba(14, 42, 56, 0.64);
    border: 1px solid var(--public-line, rgba(138, 204, 239, 0.2));
    text-decoration: none;
    -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.related-service-card:hover[b-rz5lfk9ru7],
.related-service-card:focus-visible[b-rz5lfk9ru7] {
    color: #fff;
    background: rgba(21, 65, 85, 0.82);
    border-color: rgba(97, 197, 250, 0.62);
    transform: translateY(-2px);
}

.related-service-card:focus-visible[b-rz5lfk9ru7] {
    outline: 2px solid var(--ks-primary-light);
    outline-offset: 3px;
}

.related-service-icon[b-rz5lfk9ru7] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ks-primary-light);
    background: rgba(97, 197, 250, 0.08);
    border: 1px solid rgba(97, 197, 250, 0.24);
}

.related-service-icon[b-rz5lfk9ru7]  svg {
    width: 28px;
    height: 28px;
}

.related-service-copy[b-rz5lfk9ru7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.related-service-copy strong[b-rz5lfk9ru7] {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.related-service-copy small[b-rz5lfk9ru7] {
    color: var(--public-muted, #d5e2e7);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
}

.related-service-arrow[b-rz5lfk9ru7] {
    color: rgba(97, 197, 250, 0.66);
    transition: transform 200ms ease, color 200ms ease;
}

.related-service-card:hover .related-service-arrow[b-rz5lfk9ru7],
.related-service-card:focus-visible .related-service-arrow[b-rz5lfk9ru7] {
    color: var(--ks-primary-light);
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .service-detail-shell[b-rz5lfk9ru7]  .service-detail-page {
        padding-right: 12px;
        padding-left: 12px;
    }

    .service-detail-shell[b-rz5lfk9ru7]  .service-detail-state {
        box-sizing: border-box;
        width: calc(100% - 24px);
        margin-right: 12px;
        margin-left: 12px;
    }

    .service-breadcrumb[b-rz5lfk9ru7] {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .service-breadcrumb[b-rz5lfk9ru7]::-webkit-scrollbar {
        display: none;
    }

    .service-breadcrumb ol[b-rz5lfk9ru7] {
        width: max-content;
        min-width: 100%;
        min-height: 44px;
        padding-right: 26px;
    }

    .breadcrumb-link[b-rz5lfk9ru7],
    .breadcrumb-current[b-rz5lfk9ru7] {
        min-height: 40px;
        font-size: 0.86rem;
    }

    .breadcrumb-current[b-rz5lfk9ru7] {
        max-width: 180px;
    }

    .content-card[b-rz5lfk9ru7] {
        padding: 22px 16px;
    }

    .content-card[b-rz5lfk9ru7]::before {
        left: 16px;
    }

    .content-sections[b-rz5lfk9ru7] {
        gap: 26px;
    }

    .section-text-wrapper[b-rz5lfk9ru7] {
        padding: 8px 0;
    }

    .service-detail-shell .content-section[b-rz5lfk9ru7],
    .service-gallery-section[b-rz5lfk9ru7],
    .service-detail-shell .related-section[b-rz5lfk9ru7] {
        padding: 20px 16px !important;
    }

    .related-grid[b-rz5lfk9ru7] {
        grid-template-columns: 1fr;
    }

    .related-service-card[b-rz5lfk9ru7] {
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        min-height: 70px;
        padding: 10px 12px;
    }

    .related-service-icon[b-rz5lfk9ru7] {
        width: 40px;
        height: 40px;
    }

}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .service-breadcrumb[b-rz5lfk9ru7] {
        background: #102630;
    }
}
/* /Components/Pages/Services.razor.rz.scp.css */
/* ============================================
   服务项目页 (Services.razor) - 组件隔离样式
   ============================================ */

/* ----------------------------------------
   手机端服务导航 - MudChipSet
   ---------------------------------------- */
.mobile-service-nav[b-zyxiv194bf] {
    display: none; /* 默认隐藏 */
    margin-bottom: var(--ks-space-lg);
    position: sticky;
    top: 68px;
    z-index: 100;
    background: transparent;
    padding: 0;
    margin-left: calc(-1 * var(--ks-space-md));
    margin-right: calc(-1 * var(--ks-space-md));
    box-shadow: none;
}

.mobile-service-nav[b-zyxiv194bf]  .service-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--ks-space-xs);
    padding: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile-service-nav[b-zyxiv194bf]  .service-chips::-webkit-scrollbar {
    display: none;
}

.mobile-service-nav[b-zyxiv194bf]  .service-chip {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    height: 46px;
    padding: 0 !important;
    font-size: .875rem !important;
}

.mobile-service-nav[b-zyxiv194bf]  .service-chip .mud-chip-content {
    padding: 0 12px !important;
    white-space: nowrap;
}

.mobile-service-nav[b-zyxiv194bf]  .service-chip .mud-icon-root {
    color: var(--ks-primary) !important;
    font-size: 1rem !important;
}

/* 侧栏隐藏时使用顶部可横滚分类栏。 */
@media (max-width: 1199.95px) {
    .mobile-service-nav[b-zyxiv194bf] {
        display: block;
    }
}

@media (max-width: 959.95px) {
    .mobile-service-nav[b-zyxiv194bf] {
        margin-right: 0;
        margin-left: 0;
    }

    .mobile-service-nav[b-zyxiv194bf]  .service-chips {
        scroll-padding-inline: 8px;
    }
}

@media (max-width: 768px) {
    .service-cards-container[b-zyxiv194bf] {
        display: none;
    }
}

/* ----------------------------------------
   服务卡片区 - 四个大类选择（大屏幕）
   ---------------------------------------- */
.service-cards-container[b-zyxiv194bf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ks-gap-lg);
    margin-bottom: var(--ks-space-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.service-card[b-zyxiv194bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1; /* 保持正方形 */
    padding: clamp(0.5rem, 8%, 1rem);
    border-radius: var(--ks-radius-lg);
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    box-shadow: none;
    cursor: pointer;
    transition: all var(--ks-transition-normal);
    container-type: inline-size; /* 启用容器查询 */
}

.service-card:hover[b-zyxiv194bf] {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-sm);
    border-color: var(--ks-primary-light);
}

.service-card.selected[b-zyxiv194bf] {
    border-color: var(--ks-primary);
    background: var(--ks-background-gray);
    box-shadow: var(--ks-shadow-sm);
}

.service-card.selected .service-icon[b-zyxiv194bf] {
    color: var(--ks-primary);
}

.service-icon[b-zyxiv194bf] {
    margin-bottom: 0.5rem;
    color: var(--ks-primary);
    opacity: 0.7;
    transition: all var(--ks-transition-normal);
}

.service-card:hover .service-icon[b-zyxiv194bf],
.service-card.selected .service-icon[b-zyxiv194bf] {
    opacity: 1;
}

/* FontAwesome 图标大小 - 使用固定大小配合媒体查询 */
.service-icon i[b-zyxiv194bf] {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .service-icon i[b-zyxiv194bf] {
        font-size: 1.5rem;
    }
}

/* 手机端 Chip 图标样式 */
.chip-icon[b-zyxiv194bf] {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.service-card[b-zyxiv194bf]  .service-title {
    text-align: center !important;
    font-weight: 500 !important;
    font-size: 0.90625rem !important;
    line-height: 1.2 !important;
}

/* ----------------------------------------
   详情区域 - 100% 宽度，无圆角
   ---------------------------------------- */
.service-detail-area[b-zyxiv194bf] {
    background: transparent;
    width: 100%;
    margin-top: var(--ks-space-md);
    animation: fadeIn-b-zyxiv194bf var(--ks-transition-normal);
}

@keyframes fadeIn-b-zyxiv194bf {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ----------------------------------------
   小类块 - 图片网格 + 标题 + 介绍
   ---------------------------------------- */
.service-item-block[b-zyxiv194bf] {
    margin-bottom: var(--ks-space-md);
    background: var(--ks-glass-light-strong, rgba(248, 250, 250, 0.92));
    border-radius: var(--ks-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--ks-glass-border-light, rgba(150, 170, 180, 0.32));
}

.service-item-block:last-of-type[b-zyxiv194bf] {
    margin-bottom: 0;
}

/* Flexbox 布局：图片自适应宽度，文字填充剩余空间 */
.service-item-layout[b-zyxiv194bf] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* ----------------------------------------
   图片网格 - 特色主图 + 缩略图（右侧）
   ---------------------------------------- */
.item-gallery-col[b-zyxiv194bf] {
    flex-shrink: 0; /* 不压缩 */
}

.image-gallery[b-zyxiv194bf] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ks-space-sm);
    padding: var(--ks-space-sm);
    background: rgba(245, 247, 250, 0.6);
    height: 100%;
}

/* ----------------------------------------
   纯文字区块 - 无图片时的替代展示
   宽度与图片区域一致：主图(370px) + 间距(8px) + 缩略图(90px) + padding(16px) = 484px
   ---------------------------------------- */
.text-only-block[b-zyxiv194bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ks-space-xl);
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
    min-height: calc(90px * 3 + var(--ks-space-xs) * 2); /* 与图片高度一致 */
    /* 宽度 = 主图 + 间距 + 缩略图 + 两侧padding */
    width: calc(370px + var(--ks-space-sm) + 90px + var(--ks-space-sm) * 2);
    flex-shrink: 0;
}

.text-block-icon[b-zyxiv194bf] {
    font-size: 3rem;
    color: var(--ks-primary);
    opacity: 0.6;
    margin-bottom: var(--ks-space-lg);
}

.text-only-block[b-zyxiv194bf]  .text-block-title {
    font-size: var(--ks-font-size-xl);
    font-weight: 700;
    color: var(--ks-primary-dark);
    text-align: center;
    margin-bottom: var(--ks-space-xs);
}

.text-only-block[b-zyxiv194bf]  .text-block-subtitle {
    font-size: var(--ks-font-size-md);
    color: var(--ks-text-secondary);
    text-align: center;
    margin-bottom: var(--ks-space-lg);
}

.text-block-badge[b-zyxiv194bf] {
    display: inline-flex;
    align-items: center;
    padding: var(--ks-space-xs) var(--ks-space-md);
    background: var(--ks-primary-light);
    color: white;
    border-radius: var(--ks-radius-lg);
    font-size: var(--ks-font-size-sm);
    opacity: 0.9;
}

/* ----------------------------------------
   单图布局 - 只有1张图片时占满整个区域
   ---------------------------------------- */
.image-gallery.single-image[b-zyxiv194bf] {
    /* 宽度与 text-only-block 一致 */
    width: calc(370px + var(--ks-space-sm) + 90px + var(--ks-space-sm) * 2);
}

.gallery-main-single[b-zyxiv194bf] {
    position: relative;
    width: 100%;
    height: calc(90px * 3 + var(--ks-space-xs) * 2);
    border-radius: var(--ks-radius-sm);
    overflow: hidden;
    cursor: pointer;
}

.gallery-main-single[b-zyxiv194bf]  .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.gallery-main-single:hover[b-zyxiv194bf]  .gallery-image {
    transform: scale(1.05);
}

.gallery-main-single .gallery-overlay[b-zyxiv194bf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

.gallery-main-single:hover .gallery-overlay[b-zyxiv194bf] {
    opacity: 1;
}

/* ----------------------------------------
   1+3 布局 - 主图区域
   ---------------------------------------- */
.gallery-main[b-zyxiv194bf] {
    position: relative;
    flex-shrink: 0;
    /* 高度 = 3个小图(90px*3) + 2个间距(4px*2) = 278px */
    width: 370px; /* 4:3 比例 */
    height: calc(90px * 3 + var(--ks-space-xs) * 2);
    border-radius: var(--ks-radius-sm);
    overflow: hidden;
    cursor: pointer;
}

.gallery-main[b-zyxiv194bf]  .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 填满容器 */
    object-position: center; /* 居中裁剪 */
    transition: transform 0.3s ease;
}

.gallery-main:hover[b-zyxiv194bf]  .gallery-image {
    transform: scale(1.05);
}

.gallery-overlay[b-zyxiv194bf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

.gallery-main:hover .gallery-overlay[b-zyxiv194bf] {
    opacity: 1;
}

/* 缩略图网格 - 右侧竖排1列，保持正方形比例 */
.gallery-thumbs[b-zyxiv194bf] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 从顶部开始排列，不拉伸 */
    gap: var(--ks-space-xs);
    width: 90px; /* 固定宽度 */
    flex-shrink: 0;
}

.thumb-item[b-zyxiv194bf] {
    position: relative;
    width: 100%;
    aspect-ratio: 1; /* 保持正方形 */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.thumb-item[b-zyxiv194bf]  .thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 填满容器 */
    object-position: center; /* 居中裁剪 */
    background: linear-gradient(135deg, var(--mud-palette-secondary-lighten), var(--mud-palette-secondary));
    transition: transform 0.3s ease;
}

.thumb-item:hover[b-zyxiv194bf]  .thumb-image {
    transform: scale(1.1);
}

/* 更多图片提示 */
.thumb-item.has-more .thumb-more[b-zyxiv194bf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: var(--ks-font-size-sm);
    font-weight: 600;
}

/* 内容列 - 占用剩余空间 */
.item-content-col[b-zyxiv194bf] {
    flex: 1; /* 填充剩余空间 */
    min-width: 0;
    display: flex;
    align-items: center;
}

.item-content[b-zyxiv194bf] {
    padding: var(--ks-space-lg) var(--ks-space-xl);
    width: 100%;
}

/* 标题区域 - 带左侧装饰条 */
.item-content[b-zyxiv194bf]  .item-title {
    display: block;
    font-weight: 700;
    color: var(--ks-primary-dark);
    margin-bottom: var(--ks-space-sm);
    font-size: var(--ks-font-size-2xl);
    padding-left: var(--ks-space-md);
    border-left: 4px solid var(--ks-primary);
}

.item-content[b-zyxiv194bf]  .item-title-en {
    display: block;
    font-size: var(--ks-font-size-md);
    letter-spacing: 0.02em;
    color: var(--ks-text-secondary);
    font-weight: 400;
    padding-left: var(--ks-space-md);
    margin-left: var(--ks-space-xs);
}

.item-content[b-zyxiv194bf]  .item-description {
    line-height: 1.8;
    color: var(--ks-text-secondary);
    margin-top: var(--ks-space-md);
    padding-left: var(--ks-space-md);
    margin-left: var(--ks-space-xs);
}

/* ----------------------------------------
   底部操作区
   ---------------------------------------- */
.detail-actions[b-zyxiv194bf] {
    display: flex;
    justify-content: center;
    padding: var(--ks-space-xl);
    background: var(--ks-background-gray);
}

/* ----------------------------------------
   响应式设计 - 移动端适配
   ---------------------------------------- */

/* 大屏幕优化 */
@media (min-width: 1400px) {
    .gallery-main[b-zyxiv194bf] {
        width: 400px;
        height: calc(100px * 3 + var(--ks-space-xs) * 2);
    }
    .gallery-thumbs[b-zyxiv194bf] {
        width: 100px;
    }
    .image-gallery.single-image[b-zyxiv194bf] {
        width: calc(400px + var(--ks-space-sm) + 100px + var(--ks-space-sm) * 2);
    }
    .gallery-main-single[b-zyxiv194bf] {
        height: calc(100px * 3 + var(--ks-space-xs) * 2);
    }
    .text-only-block[b-zyxiv194bf] {
        /* 宽度 = 主图(400px) + 间距 + 缩略图(100px) + padding */
        width: calc(400px + var(--ks-space-sm) + 100px + var(--ks-space-sm) * 2);
        min-height: calc(100px * 3 + var(--ks-space-xs) * 2);
    }
}

@media (max-width: 960px) {
    .item-content[b-zyxiv194bf] {
        padding: var(--ks-space-md);
    }

    .gallery-main[b-zyxiv194bf] {
        width: 300px;
        height: calc(75px * 3 + var(--ks-space-xs) * 2);
    }

    .gallery-thumbs[b-zyxiv194bf] {
        width: 75px;
    }

    .image-gallery.single-image[b-zyxiv194bf] {
        width: calc(300px + var(--ks-space-sm) + 75px + var(--ks-space-sm) * 2);
    }
    .gallery-main-single[b-zyxiv194bf] {
        height: calc(75px * 3 + var(--ks-space-xs) * 2);
    }

    .text-only-block[b-zyxiv194bf] {
        /* 宽度 = 主图(300px) + 间距 + 缩略图(75px) + padding */
        width: calc(300px + var(--ks-space-sm) + 75px + var(--ks-space-sm) * 2);
        min-height: calc(75px * 3 + var(--ks-space-xs) * 2);
    }
}

@media (max-width: 700px) {
    /* 中等屏幕：隐藏卡片，显示 ChipSet 导航 */
    .service-cards-container[b-zyxiv194bf] {
        display: none;
    }

    /* 切换为垂直布局 */
    .service-item-layout[b-zyxiv194bf] {
        flex-direction: column;
    }

    .item-gallery-col[b-zyxiv194bf] {
        width: 100%;
    }

    .image-gallery[b-zyxiv194bf] {
        width: 100%;
        justify-content: center;
    }

    .gallery-main[b-zyxiv194bf] {
        width: 280px;
        height: calc(70px * 3 + var(--ks-space-xs) * 2);
    }

    .gallery-thumbs[b-zyxiv194bf] {
        width: 70px;
    }

    .image-gallery.single-image[b-zyxiv194bf] {
        width: calc(280px + var(--ks-space-sm) + 70px + var(--ks-space-sm) * 2);
    }
    .gallery-main-single[b-zyxiv194bf] {
        height: calc(70px * 3 + var(--ks-space-xs) * 2);
    }

    .text-only-block[b-zyxiv194bf] {
        /* 宽度 = 主图(280px) + 间距 + 缩略图(70px) + padding */
        width: calc(280px + var(--ks-space-sm) + 70px + var(--ks-space-sm) * 2);
        min-height: calc(70px * 3 + var(--ks-space-xs) * 2);
    }

    .service-item-block[b-zyxiv194bf] {
        margin-bottom: var(--ks-space-sm);
    }
}

@media (max-width: 520px) {
    /* 小屏幕：图片改为垂直布局 */
    .service-cards-container[b-zyxiv194bf] {
        display: none;
    }

    .image-gallery[b-zyxiv194bf] {
        flex-direction: column;
        width: 100%;
    }

    .image-gallery.single-image[b-zyxiv194bf] {
        width: 100%;
    }

    .gallery-main[b-zyxiv194bf] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: 45vh;
    }

    .gallery-main-single[b-zyxiv194bf] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        max-height: 45vh;
    }

    .gallery-thumbs[b-zyxiv194bf] {
        width: 100%;
        flex-direction: row;
    }

    .thumb-item[b-zyxiv194bf] {
        flex: 1;
        aspect-ratio: 1;
    }

    .text-only-block[b-zyxiv194bf] {
        width: 100%;
        min-height: 160px;
        padding: var(--ks-space-lg) var(--ks-space-md);
    }

    .text-block-icon[b-zyxiv194bf] {
        font-size: 2.5rem;
        margin-bottom: var(--ks-space-md);
    }

    .item-content[b-zyxiv194bf] {
        padding: var(--ks-space-md);
    }
}

@media (max-width: 360px) {
    .service-cards-container[b-zyxiv194bf] {
        display: none;
    }

    .gallery-main[b-zyxiv194bf] {
        max-height: 40vh;
    }

    .text-only-block[b-zyxiv194bf] {
        min-height: 180px;
    }
}
/* /Components/Shared/CallConfirmDialog.razor.rz.scp.css */
/* CallConfirmDialog 样式 */
.dialog-title[b-uz8slcwnh1] {
    display: flex;
    align-items: center;
}

/* 对话框标题图标 */
.dialog-title-icon[b-uz8slcwnh1] {
    color: var(--mud-palette-primary);
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.dialog-content[b-uz8slcwnh1] {
    text-align: center;
    padding: 16px 0;
}

.phone-number[b-uz8slcwnh1] {
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px;
    background: var(--mud-palette-primary-lighten);
    border-radius: var(--ks-radius-md);
    margin-top: 8px;
}
/* /Components/Shared/DetailContactPanel.razor.rz.scp.css */
.detail-contact-panel[b-4b92g7d0en] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    margin-top: 22px;
    padding: clamp(28px, 4vw, 48px);
    color: var(--public-ink, #f1f6f8);
    background:
        linear-gradient(115deg, var(--public-panel-hover, rgba(23, 33, 38, 0.94)), var(--public-glass-strong, rgba(10, 15, 18, 0.86))),
        var(--public-glass-strong, rgba(10, 15, 18, 0.86));
    border: 1px solid var(--public-line, rgba(183, 199, 205, 0.18));
    border-top: 3px solid var(--ks-primary);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: 0 24px 58px rgba(0, 9, 17, 0.3);
    -webkit-backdrop-filter: blur(16px) saturate(100%);
    backdrop-filter: blur(16px) saturate(100%);
}

.detail-contact-panel[b-4b92g7d0en]::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 0;
    width: 1px;
    height: 54px;
    background: linear-gradient(var(--ks-primary-light), transparent);
}

.detail-contact-copy[b-4b92g7d0en] {
    min-width: 0;
}

.detail-contact-kicker[b-4b92g7d0en] {
    color: var(--ks-primary-light);
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.detail-contact-title[b-4b92g7d0en] {
    margin: 7px 0 8px;
    color: var(--public-ink, #f1f6f8);
    font-size: clamp(1.65rem, 2.4vw, 2.15rem);
    font-weight: 700;
    line-height: 1.22;
    text-wrap: balance;
}

.detail-contact-subtitle[b-4b92g7d0en] {
    max-width: 680px;
    margin: 0;
    color: var(--public-muted, #d5e2e7);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
}

.detail-contact-actions[b-4b92g7d0en] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-contact-button[b-4b92g7d0en] {
    display: inline-grid;
    grid-template-columns: 20px auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: color 190ms ease, background-color 190ms ease, border-color 190ms ease, transform 190ms ease;
}

.detail-contact-button-primary[b-4b92g7d0en] {
    grid-template-columns: 20px auto 18px;
    color: var(--public-silver-ink, #11181c);
    background: linear-gradient(180deg, var(--public-silver-top, #d9e2e5), var(--public-silver-bottom, #bbc8cd));
    border-color: rgba(232, 239, 241, 0.78);
    box-shadow: 0 10px 24px rgba(0, 8, 15, 0.25);
}

.detail-contact-button-secondary[b-4b92g7d0en] {
    color: var(--public-ink, #f1f6f8);
    background: var(--public-raised, #1d2a30);
    border-color: rgba(var(--public-line-rgb, 183, 199, 205), 0.28);
}

.detail-contact-button:hover[b-4b92g7d0en],
.detail-contact-button:focus-visible[b-4b92g7d0en] {
    transform: translateY(-2px);
}

.detail-contact-button-primary:hover[b-4b92g7d0en],
.detail-contact-button-primary:focus-visible[b-4b92g7d0en] {
    color: var(--public-silver-ink, #0a0f12);
    background: linear-gradient(180deg, var(--public-silver-top, #d9e2e5), var(--public-silver-bottom, #bbc8cd));
    filter: brightness(1.08);
}

.detail-contact-button-secondary:hover[b-4b92g7d0en],
.detail-contact-button-secondary:focus-visible[b-4b92g7d0en] {
    color: #fff;
    background: var(--public-panel-hover, #27373e);
    border-color: rgba(var(--public-line-rgb, 183, 199, 205), 0.48);
}

.detail-contact-button:focus-visible[b-4b92g7d0en] {
    outline: 2px solid var(--ks-primary-light);
    outline-offset: 3px;
}

.detail-contact-button-arrow[b-4b92g7d0en] {
    opacity: 0.7;
    transition: transform 190ms ease;
}

.detail-contact-button-primary:hover .detail-contact-button-arrow[b-4b92g7d0en],
.detail-contact-button-primary:focus-visible .detail-contact-button-arrow[b-4b92g7d0en] {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .detail-contact-panel[b-4b92g7d0en] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .detail-contact-actions[b-4b92g7d0en] {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .detail-contact-panel[b-4b92g7d0en] {
        padding: 26px 18px;
    }

    .detail-contact-actions[b-4b92g7d0en] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .detail-contact-button[b-4b92g7d0en] {
        width: 100%;
        min-height: 50px;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .detail-contact-panel[b-4b92g7d0en] {
        background: var(--public-frame, #11181c);
    }
}
/* /Components/Shared/FloatingContact.razor.rz.scp.css */
.floating-contact[b-ne5c4oh6cq] {
    --tool-size: 48px;
    --tool-step: 56px;
    --tool-cut: 10px;
    position: fixed;
    right: 24px;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1000;
    width: var(--tool-size);
    height: var(--tool-size);
}

.contact-tool-stack[b-ne5c4oh6cq] {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    justify-items: end;
    gap: 8px;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.floating-contact.scroll-top-visible .contact-tool-stack[b-ne5c4oh6cq] {
    transform: translateY(calc(-1 * var(--tool-step)));
}

.contact-options[b-ne5c4oh6cq] {
    display: grid;
    gap: 6px;
    padding: 5px;
    opacity: 0;
    pointer-events: none;
    background: var(--public-glass-strong, rgba(10, 15, 18, 0.90));
    border: 1px solid rgba(var(--public-line-rgb, 183, 199, 205), 0.22);
    box-shadow: 0 18px 38px rgba(0, 10, 18, 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(100%);
    backdrop-filter: blur(14px) saturate(100%);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transform: translateY(12px);
    transition: opacity 240ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.floating-contact.expanded .contact-options[b-ne5c4oh6cq] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.contact-fab[b-ne5c4oh6cq],
.contact-main-fab[b-ne5c4oh6cq],
.scroll-to-top-btn[b-ne5c4oh6cq] {
    position: relative;
    display: grid;
    width: var(--tool-size);
    height: var(--tool-size);
    padding: 0;
    place-items: center;
    color: #eaf4f7;
    background: rgba(var(--public-raised-rgb, 29, 42, 48), 0.96);
    border: 1px solid rgba(var(--public-line-rgb, 183, 199, 205), 0.24);
    border-left: 2px solid var(--ks-primary);
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(0, 10, 18, 0.24);
    cursor: pointer;
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - var(--tool-cut)) 0, 100% var(--tool-cut), 100% 100%, var(--tool-cut) 100%, 0 calc(100% - var(--tool-cut)));
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.contact-fab:hover[b-ne5c4oh6cq],
.contact-main-fab:hover[b-ne5c4oh6cq],
.scroll-to-top-btn:hover[b-ne5c4oh6cq] {
    color: #fff;
    background: var(--public-panel-hover, #27373e);
    border-color: rgba(var(--public-line-rgb, 183, 199, 205), 0.42);
    transform: translateY(-1px);
}

.contact-fab:focus-visible[b-ne5c4oh6cq],
.contact-main-fab:focus-visible[b-ne5c4oh6cq],
.scroll-to-top-btn:focus-visible[b-ne5c4oh6cq] {
    outline: 2px solid var(--ks-primary-light);
    outline-offset: 2px;
}

.contact-fab.whatsapp[b-ne5c4oh6cq] {
    color: #69df95;
}

.contact-fab.whatsapp[b-ne5c4oh6cq]::after {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 5px;
    height: 5px;
    content: '';
    background: #25d366;
    border-radius: 50%;
}

.contact-main-fab[b-ne5c4oh6cq] {
    color: #fff;
    background: linear-gradient(145deg, var(--public-raised, #26363d), var(--public-frame, #151e22));
    border-color: rgba(var(--public-line-rgb, 183, 199, 205), 0.32);
}

.scroll-to-top-btn[b-ne5c4oh6cq] {
    position: absolute;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: visibility 0s linear 320ms, opacity 220ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.floating-contact.scroll-top-visible .scroll-to-top-btn[b-ne5c4oh6cq] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.contact-fab[b-ne5c4oh6cq]  .ks-icon,
.contact-main-fab[b-ne5c4oh6cq]  .ks-icon,
.scroll-to-top-btn[b-ne5c4oh6cq]  .ks-icon,
.contact-fab[b-ne5c4oh6cq]  .mud-icon-root {
    flex: 0 0 auto;
}

.floating-contact.expanded .contact-main-fab[b-ne5c4oh6cq]  .ks-icon {
    transform: rotate(90deg);
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 600px) {
    .floating-contact[b-ne5c4oh6cq] {
        --tool-size: 44px;
        --tool-step: 52px;
        --tool-cut: 9px;
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    .contact-fab[b-ne5c4oh6cq],
    .contact-main-fab[b-ne5c4oh6cq],
    .scroll-to-top-btn[b-ne5c4oh6cq] { width: var(--tool-size); height: var(--tool-size); }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .contact-options[b-ne5c4oh6cq],
    .contact-fab[b-ne5c4oh6cq],
    .contact-main-fab[b-ne5c4oh6cq],
    .scroll-to-top-btn[b-ne5c4oh6cq] {
        background: var(--public-frame, #11181c);
    }
}
/* /Components/Shared/FloatingServiceNav.razor.rz.scp.css */
.floating-service-nav[b-k2wm2k98lb] { display:none; }

@media (min-width:1200px) {
    .floating-service-nav[b-k2wm2k98lb] {
        position:fixed;
        z-index:1020;
        top:50%;
        left:0;
        display:block;
        transform:translateY(-50%);
        animation:none !important;
    }

    .floating-service-nav[b-k2wm2k98lb]  .nav-card {
        display:flex;
        width:48px;
        max-height:min(78vh,720px);
        overflow:hidden;
        color:#f1f6f8;
        background:rgba(10,27,37,.94) !important;
        border:1px solid rgba(138,204,239,.22);
        border-left:0;
        border-radius:0 3px 3px 0 !important;
        box-shadow:0 20px 48px rgba(0,8,16,.26) !important;
        -webkit-backdrop-filter:blur(16px) saturate(96%);
        backdrop-filter:blur(16px) saturate(96%);
        transition:width 420ms cubic-bezier(.22,1,.36,1) 120ms;
    }

    .floating-service-nav:hover[b-k2wm2k98lb]  .nav-card,
    .floating-service-nav:focus-within[b-k2wm2k98lb]  .nav-card { width:304px; transition-delay:0s; }

    .nav-tab[b-k2wm2k98lb] {
        display:flex;
        width:48px;
        min-width:48px;
        align-items:center;
        justify-content:center;
        color:#61c5fa;
        border-right:1px solid rgba(138,204,239,.18);
    }

    .nav-tab[b-k2wm2k98lb]  .nav-tab-icon { width:24px; height:24px; }

    .nav-panel[b-k2wm2k98lb] {
        min-width:255px;
        max-height:min(78vh,720px);
        overflow-y:auto;
        opacity:0;
        transform:translateX(-8px);
        transition:opacity 220ms ease 120ms,transform 300ms cubic-bezier(.22,1,.36,1) 120ms;
    }

    .floating-service-nav:hover .nav-panel[b-k2wm2k98lb],
    .floating-service-nav:focus-within .nav-panel[b-k2wm2k98lb] { opacity:1; transform:none; }

    .floating-service-nav[b-k2wm2k98lb]  .nav-menu { padding:10px 0 !important; }
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-group { margin:0 !important; }
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-group > .mud-collapse-container { background:rgba(3,17,26,.28); }
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-link {
        min-height:48px !important;
        align-items:center !important;
        padding:8px 14px !important;
        color:#d5e2e7 !important;
        border-left:3px solid transparent;
        border-radius:0 !important;
        font-size:.9375rem !important;
        font-weight:650 !important;
    }
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-link-text {
        display:flex !important;
        min-width:0;
        align-items:center;
        white-space:nowrap;
    }
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-link-text > span {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-link:hover,
    .floating-service-nav[b-k2wm2k98lb]  .mud-nav-link.active { color:#fff !important; background:rgba(var(--ks-primary-rgb),.1) !important; border-left-color:var(--ks-primary); }
    .floating-service-nav[b-k2wm2k98lb]  .nav-category-icon { width:28px; height:28px; flex:0 0 28px; margin-right:10px; color:#61c5fa; }
    .floating-service-nav[b-k2wm2k98lb]  .sub-item { min-height:42px !important; padding:7px 12px 7px 24px !important; font-size:.875rem !important; font-weight:500 !important; color:#c5d6dd !important; }
    .floating-service-nav[b-k2wm2k98lb]  .nav-service-icon { width:22px; height:22px; flex:0 0 22px; margin-right:9px; color:#61c5fa; stroke-width:1.8; }
    .nav-panel[b-k2wm2k98lb]::-webkit-scrollbar { width:4px; }
    .nav-panel[b-k2wm2k98lb]::-webkit-scrollbar-thumb { background:rgba(138,204,239,.28); }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    @media (min-width:1200px) { .floating-service-nav[b-k2wm2k98lb]  .nav-card { background:#102630 !important; } }
}
/* /Components/Shared/GalleryCard.razor.rz.scp.css */
/* ============================================
   GalleryCard - 画廊叠层式卡片
   专业风格：无边框、轻阴影、图片全覆盖
   ============================================ */

.gallery-card[b-91a1uvv9w6] {
    position: relative;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--ks-background-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform var(--ks-transition-normal), box-shadow var(--ks-transition-normal);
}

.gallery-card:hover[b-91a1uvv9w6] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ---- 主体区域（图片 + 遮罩） ---- */
.gallery-card-main[b-91a1uvv9w6] {
    position: relative;
    aspect-ratio: 4 / 3;
}

/* 有 footer 时的主体区域 - 更扁平 */
.gallery-card.has-footer .gallery-card-main[b-91a1uvv9w6] {
    aspect-ratio: 21 / 9;
}

/* ---- 图片区域 ---- */
.gallery-card-image[b-91a1uvv9w6] {
    position: absolute;
    inset: 0;
}

.gallery-card-image[b-91a1uvv9w6]  .lazy-image-wrapper {
    width: 100%;
    height: 100%;
}

.gallery-card-image[b-91a1uvv9w6]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-card-image[b-91a1uvv9w6]  img {
    transform: scale(1.05);
}

/* ---- 类型标签 - 左上角 ---- */
.gallery-card-badge[b-91a1uvv9w6] {
    position: absolute;
    top: var(--ks-space-sm);
    left: var(--ks-space-sm);
    padding: 4px 10px;
    border-radius: var(--ks-radius-sm);
    font-size: var(--ks-font-size-xs);
    font-weight: 600;
    color: white;
    background: var(--ks-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* 标签颜色变体 */
.gallery-card-badge.drilling[b-91a1uvv9w6] {
    background: var(--ks-primary);
}
.gallery-card-badge.renovation[b-91a1uvv9w6] {
    background: var(--mud-palette-success);
}
.gallery-card-badge.maintenance[b-91a1uvv9w6] {
    background: var(--mud-palette-warning);
}
.gallery-card-badge.miscellaneous[b-91a1uvv9w6] {
    background: var(--mud-palette-info);
}

/* ---- 精选图标 - 右上角 ---- */
.gallery-card-featured[b-91a1uvv9w6] {
    position: absolute;
    top: var(--ks-space-sm);
    right: var(--ks-space-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-warning);
    border-radius: 50%;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.gallery-card-featured[b-91a1uvv9w6]  .mud-icon-root {
    font-size: 1rem !important;
}

/* ---- 底部渐变遮罩 ---- */
.gallery-card-overlay[b-91a1uvv9w6] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.2) 50%,
        transparent 75%
    );
    padding: var(--ks-space-md);
    z-index: 1;
}

/* ---- 卡片内容 ---- */
.gallery-card-content[b-91a1uvv9w6] {
    transform: translateY(4px);
    transition: transform var(--ks-transition-normal);
}

.gallery-card:hover .gallery-card-content[b-91a1uvv9w6] {
    transform: translateY(0);
}

.gallery-card-header[b-91a1uvv9w6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ks-space-sm);
}

.gallery-card-title[b-91a1uvv9w6] {
    flex: 1;
    font-size: 1rem;
    font-weight: 650;
    color: white;
    margin: 0 0 4px 0;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* 限制两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-date[b-91a1uvv9w6] {
    flex-shrink: 0;
    font-size: 0.90625rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    padding-top: 2px;
}

.gallery-card-subtitle[b-91a1uvv9w6] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ks-font-size-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gallery-card-subtitle[b-91a1uvv9w6]  .mud-icon-root {
    font-size: 0.96875rem !important;
    opacity: 0.9;
}

/* ---- 悬停时显示的额外内容 ---- */
.gallery-card-hover-content[b-91a1uvv9w6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--ks-transition-normal);
    z-index: 3;
}

.gallery-card:hover .gallery-card-hover-content[b-91a1uvv9w6] {
    opacity: 1;
}

/* ---- 底部内容区域（图片下方） ---- */
.gallery-card-footer[b-91a1uvv9w6] {
    padding: var(--ks-space-sm) var(--ks-space-md);
    background: var(--mud-palette-surface);
}

/* ---- 响应式 ---- */
@media (max-width: 600px) {
    .gallery-card[b-91a1uvv9w6] {
        border-radius: var(--ks-radius-sm);
    }

    .gallery-card-overlay[b-91a1uvv9w6] {
        padding: var(--ks-space-sm);
    }

    .gallery-card-title[b-91a1uvv9w6] {
        font-size: 0.96875rem;
    }

    .gallery-card-subtitle[b-91a1uvv9w6] {
        font-size: 0.90625rem;
    }

    .gallery-card-badge[b-91a1uvv9w6] {
        font-size: 0.90625rem;
        padding: 2px 6px;
    }

    .gallery-card-featured[b-91a1uvv9w6] {
        width: 22px;
        height: 22px;
    }
}
/* /Components/Shared/HorizontalCardScroller.razor.rz.scp.css */
/* ============================================
   HorizontalCardScroller - 横向滚动卡片组件
   ============================================ */

.horizontal-scroller[b-jsynshi98u] {
    position: relative;
    width: 100%;
}

/* ---- 滚动轨道 ---- */
.scroller-track[b-jsynshi98u] {
    display: flex;
    gap: var(--scroller-gap, var(--ks-gap-lg));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--ks-space-sm) 0;

    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroller-track[b-jsynshi98u]::-webkit-scrollbar {
    display: none;
}

/* ---- 单个卡片项 ---- */
.scroller-item[b-jsynshi98u] {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* ---- 左右渐变遮罩 ---- */
.scroller-fade[b-jsynshi98u] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 2;
}

.scroller-fade-left[b-jsynshi98u] {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--ks-transition-normal);
}

.scroller-fade-left.visible[b-jsynshi98u] {
    opacity: 1;
}

.scroller-fade-right[b-jsynshi98u] {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.7) 0%, transparent 100%);
}

/* ---- Bullets 导航 ---- */
.scroller-bullets[b-jsynshi98u] {
    display: flex;
    justify-content: center;
    gap: var(--ks-space-sm);
    margin-top: var(--ks-space-lg);
}

.scroller-bullet[b-jsynshi98u] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: var(--ks-border);
    cursor: pointer;
    padding: 0;
    transition: all var(--ks-transition-fast);
}

.scroller-bullet:hover[b-jsynshi98u] {
    background-color: var(--ks-primary-light);
}

.scroller-bullet.active[b-jsynshi98u] {
    width: 12px;
    height: 12px;
    background-color: var(--ks-primary);
}

/* ---- 响应式 ---- */
@media (max-width: 600px) {
    .scroller-fade[b-jsynshi98u] {
        width: 30px;
    }
}
/* /Components/Shared/ImageLightboxDialog.razor.rz.scp.css */
/* ============================================
   ImageLightboxDialog - 图片灯箱样式
   注意：MudDialog 是 Portal 组件，大部分样式
   需要写在 lightbox.css 全局样式中
   ============================================ */

/* 此文件保留为空，所有样式在 lightbox.css 中 */
/* /Components/Shared/ImageScrollGallery.razor.rz.scp.css */
/* ============================================
   ImageScrollGallery - 横向滚动图片画廊组件
   ============================================ */

/* 外层包装器 */
.image-scroll-wrapper[b-ch10cs8he6] {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-xs);
}

/* 容器 */
.image-scroll-container[b-ch10cs8he6] {
    position: relative;
    width: 100%;
    border-radius: var(--ks-radius-lg);
    overflow: hidden;
    background: var(--ks-background-gray);
}

/* 滚动轨道 */
.image-scroll-track[b-ch10cs8he6] {
    display: flex;
    gap: var(--ks-space-sm);
    padding: var(--ks-space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* 隐藏 Webkit 滚动条 */
.image-scroll-track[b-ch10cs8he6]::-webkit-scrollbar {
    display: none;
}

/* 图片项 */
.scroll-image-item[b-ch10cs8he6] {
    position: relative;
    flex: 0 0 auto;
    width: 200px;
    height: 260px;
    cursor: pointer;
    border-radius: var(--ks-radius-md);
    overflow: hidden;
    background: var(--ks-background-gray);
    box-shadow: var(--ks-shadow-sm);
    /* 创建独立层叠上下文，避免重影 */
    isolation: isolate;
    /* 确保内容不溢出 */
    contain: layout paint;
}

/* 只在 hover 时启用过渡，避免初次加载时的重影 */
.scroll-image-item:hover[b-ch10cs8he6] {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 图片样式 - 需要 ::deep 穿透 MudImage */
.scroll-image-item[b-ch10cs8he6]  .scroll-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: var(--ks-background-gray);
    /* 防止图片加载时的闪烁和重影 */
    content-visibility: auto;
}

/* 确保 img 标签本身也有正确样式 */
.scroll-image-item[b-ch10cs8he6]  .scroll-image img,
.scroll-image-item[b-ch10cs8he6]  img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: var(--ks-background-gray);
}

/* 图片放大覆盖层 */
.image-zoom-overlay[b-ch10cs8he6] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--ks-transition-normal);
    color: white;
    pointer-events: none;
}

.scroll-image-item:hover .image-zoom-overlay[b-ch10cs8he6] {
    opacity: 1;
}

/* 图片编号标签 */
.image-label[b-ch10cs8he6] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--ks-space-xs) 0;
    background: var(--ks-glass-light-strong, rgba(29, 42, 48, 0.92));
    text-align: center;
    font-size: 0.90625rem;
    color: var(--ks-text-primary);
    font-weight: 500;
    border-top: 1px solid var(--ks-border-light, #eee);
}

/* 渐变遮罩（暗示可滚动）- 基础样式 */
.scroll-fade-overlay[b-ch10cs8he6] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ks-transition-fast), opacity var(--ks-transition-fast);
    z-index: 10;
}

/* 右侧遮罩 */
.scroll-fade-right[b-ch10cs8he6] {
    right: 0;
    background: linear-gradient(to right, transparent, rgba(var(--ks-background-gray-rgb, 245, 245, 245), 0.95) 60%);
    cursor: e-resize; /* 向右滚动光标 */
}

.scroll-fade-right:hover[b-ch10cs8he6] {
    background: linear-gradient(to right, transparent, rgba(var(--ks-primary-rgb, 30, 136, 229), 0.15) 60%);
}

/* 右侧遮罩内容容器 - 箭头和徽章垂直排列 */
.scroll-hint-content[b-ch10cs8he6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 隐藏数量徽章 */
.hidden-count-badge[b-ch10cs8he6] {
    background: var(--ks-primary);
    color: white;
    font-size: 0.90625rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: var(--ks-shadow-sm);
    animation: pulse-badge-b-ch10cs8he6 2s ease-in-out infinite;
}

@keyframes pulse-badge-b-ch10cs8he6 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.scroll-fade-overlay:hover .hidden-count-badge[b-ch10cs8he6] {
    animation: none;
    transform: scale(1.1);
}

/* 左侧遮罩 */
.scroll-fade-left[b-ch10cs8he6] {
    left: 0;
    background: linear-gradient(to left, transparent, rgba(var(--ks-background-gray-rgb, 245, 245, 245), 0.95) 60%);
    cursor: w-resize; /* 向左滚动光标 */
}

.scroll-fade-left:hover[b-ch10cs8he6] {
    background: linear-gradient(to left, transparent, rgba(var(--ks-primary-rgb, 30, 136, 229), 0.15) 60%);
}

/* 滚动提示图标 */
.scroll-hint-icon[b-ch10cs8he6] {
    color: var(--ks-text-secondary);
    opacity: 0.6;
    transition: opacity var(--ks-transition-fast), color var(--ks-transition-fast);
}

/* 右侧图标动画 */
.scroll-fade-right .scroll-hint-icon[b-ch10cs8he6] {
    animation: bounce-right-b-ch10cs8he6 1.5s ease-in-out infinite;
}

/* 左侧图标动画 */
.scroll-fade-left .scroll-hint-icon[b-ch10cs8he6] {
    animation: bounce-left-b-ch10cs8he6 1.5s ease-in-out infinite;
}

.scroll-fade-overlay:hover .scroll-hint-icon[b-ch10cs8he6] {
    opacity: 1;
    color: var(--ks-primary);
    animation: none;
}

/* 右弹动画 */
@keyframes bounce-right-b-ch10cs8he6 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

/* 左弹动画 */
@keyframes bounce-left-b-ch10cs8he6 {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-6px);
    }
}

/* ============ 响应式 ============ */
@media (max-width: 600px) {
    .scroll-image-item[b-ch10cs8he6] {
        width: 150px;
        height: 200px;
    }

    .scroll-fade-overlay[b-ch10cs8he6] {
        width: 50px;
    }

    .hidden-count-badge[b-ch10cs8he6] {
        font-size: 0.90625rem;
        padding: 2px 6px;
    }

    .image-counter[b-ch10cs8he6] {
        font-size: 0.90625rem;
    }
}

/* ============ 底部计数条 ============ */
.image-counter[b-ch10cs8he6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ks-space-xs);
    padding: var(--ks-space-xs) var(--ks-space-sm);
    font-size: 0.90625rem;
    color: var(--ks-text-secondary);
}

.image-counter .counter-icon[b-ch10cs8he6] {
    opacity: 0.7;
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* ============================================
   LanguageSwitcher 组件隔离样式
   带国旗图标和切换动画效果
   ============================================ */

/* 语言切换按钮容器 */
.language-switcher[b-sanm4hnl7t] {
    margin-right: 32px;
    display: flex;
    align-items: center;
    transition: opacity var(--ks-transition-fast), transform var(--ks-transition-fast);
}

/* 切换动画状态 */
.language-switcher.transitioning[b-sanm4hnl7t] {
    opacity: 0.6;
    transform: scale(0.95);
}

/* 语言切换按钮样式 - 透明玻璃效果 */
.language-switcher[b-sanm4hnl7t]  .lang-button {
    min-height: 40px !important;
    color: #f1f6f8 !important;
    background-color: rgba(12, 24, 32, 0.58) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(174, 201, 213, 0.26) !important;
    border-radius: 2px !important;
    padding: 6px 11px !important;
    min-width: unset !important;
    text-transform: none !important;
    font-family: var(--ks-font-public, 'IBM Plex Sans Variable', 'Noto Sans HK Variable', 'Microsoft JhengHei', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.90625rem !important;
    box-shadow: none;
    transition: all var(--ks-transition-fast);
}

.language-switcher[b-sanm4hnl7t]  .lang-button:hover {
    background-color: rgba(21, 157, 235, 0.14) !important;
    color: #fff !important;
    border-color: var(--ks-primary-light) !important;
}

.language-switcher[b-sanm4hnl7t]  .lang-button:focus-visible {
    outline: 2px solid var(--ks-primary-light);
    outline-offset: 2px;
}

/* 国旗/图标 - 使用 Flag Icons 库 */
.language-switcher .lang-flag[b-sanm4hnl7t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    line-height: 1;
    transition: transform var(--ks-transition-fast);
}

/* Flag Icons 库的国旗图标样式 */
.language-switcher .lang-flag.fi[b-sanm4hnl7t] {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background-size: 20px 15px;
}

.language-switcher[b-sanm4hnl7t]  .lang-icon {
    width: 20px;
    height: 20px;
    color: var(--ks-primary-light);
}

.language-switcher:hover .lang-flag[b-sanm4hnl7t] {
    transform: scale(1.1);
}

/* 语言文字 */
.language-switcher .lang-text[b-sanm4hnl7t] {
    font-size: 0.90625rem;
    font-weight: 600;
    transition: color var(--ks-transition-fast);
}

/* 下拉箭头 */
.language-switcher[b-sanm4hnl7t]  .lang-arrow {
    width: 14px;
    height: 14px;
    margin-left: 2px !important;
    opacity: 0.7;
    transition: transform var(--ks-transition-fast);
}

.language-switcher[b-sanm4hnl7t]  .lang-button:hover .lang-arrow {
    transform: translateY(2px);
}

/* 菜单项国旗/图标 */
.menu-flag[b-sanm4hnl7t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    line-height: 1;
}

/* Flag Icons 库的国旗图标样式 */
.menu-flag.fi[b-sanm4hnl7t] {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background-size: 22px 16px;
}

.language-switcher[b-sanm4hnl7t]  .menu-icon {
    width: 22px;
    height: 22px;
    color: var(--ks-primary);
}

/* 选中状态的勾选图标 */
.language-switcher[b-sanm4hnl7t]  .check-icon {
    margin-left: auto !important;
    color: var(--ks-primary);
}

/* 当前选中的菜单项 */
.language-switcher[b-sanm4hnl7t]  .lang-item-active {
    background-color: rgba(30, 136, 229, 0.08) !important;
}

/* ============================================
   响应式设计
   ============================================ */

/* 移动端简化显示 */
@media (max-width: 480px) {
    .language-switcher[b-sanm4hnl7t] {
        margin-right: 16px;
    }

    .language-switcher[b-sanm4hnl7t]  .lang-button {
        min-height: 44px !important;
        padding: 7px 9px !important;
    }

    .language-switcher .lang-flag[b-sanm4hnl7t] {
        margin-right: 4px;
    }

    .language-switcher[b-sanm4hnl7t]  .lang-arrow {
        display: none !important;
    }
}

/* ============================================
   注意：MudMenu 下拉菜单是 Portal 组件，
   渲染到 body 外部，样式已移至 app.css
   ============================================ */
/* /Components/Shared/LazyImage.razor.rz.scp.css */
/* LazyImage 组件样式 */

.lazy-image-wrapper[b-ig6b8dvf0a] {
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-background-grey);
    width: 100%;
    height: 100%;
}

/* 图片保护模式 - 禁用右键、拖拽、选择 */
.lazy-image-wrapper.protected[b-ig6b8dvf0a] {
    -webkit-user-select: none;
    user-select: none;
}

.lazy-image-wrapper.protected .lazy-image[b-ig6b8dvf0a] {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: auto; /* 保持点击事件 */
}

/* 图片样式 */
.lazy-image[b-ig6b8dvf0a] {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded[b-ig6b8dvf0a] {
    opacity: 1;
}

/* 占位符 - 骨架屏效果 */
.lazy-placeholder[b-ig6b8dvf0a] {
    position: absolute;
    inset: 0;
    background-color: var(--mud-palette-background-grey);
    overflow: hidden;
}

/* 闪光动画 */
.placeholder-shimmer[b-ig6b8dvf0a] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: shimmer-b-ig6b8dvf0a 1.5s infinite;
}

@keyframes shimmer-b-ig6b8dvf0a {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 加载失败状态 - 可点击重试 */
.lazy-error[b-ig6b8dvf0a] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.lazy-error:hover[b-ig6b8dvf0a] {
    background-color: var(--mud-palette-action-hover);
}

.lazy-retry-icon[b-ig6b8dvf0a] {
    font-size: 1.5rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.lazy-error:hover .lazy-retry-icon[b-ig6b8dvf0a] {
    opacity: 1;
    transform: rotate(90deg);
}

/* 深色模式适配 */
[b-ig6b8dvf0a] .mud-theme-dark .lazy-placeholder {
    background-color: var(--mud-palette-surface);
}

[b-ig6b8dvf0a] .mud-theme-dark .placeholder-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
}

[b-ig6b8dvf0a] .mud-theme-dark .lazy-error {
    background-color: var(--mud-palette-surface);
}
/* /Components/Shared/MenuCategoryIcon.razor.rz.scp.css */
.menu-category-line-icon[b-5y2yiqbv8y] {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: visible;
    stroke-width: var(--menu-category-icon-stroke, 1.75);
}

.menu-category-line-icon *[b-5y2yiqbv8y] {
    vector-effect: non-scaling-stroke;
}
/* /Components/Shared/PageLoading.razor.rz.scp.css */
/* PageLoading 组件样式 */

.ks-page-loading[b-b9hysy569s] {
    position: relative;
    min-height: 200px;
}

.ks-page-loading-content[b-b9hysy569s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ks-space-xl);
    min-height: 200px;
}

/* 骨架屏容器 */
.ks-skeleton-container[b-b9hysy569s] {
    width: 100%;
    max-width: 800px;
}

/* Logo 加载器（页面内版本） */
.ks-logo-loader[b-b9hysy569s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ks-space-md);
}

.ks-logo-loader .ks-loader-logo[b-b9hysy569s] {
    width: 80px;
    height: 80px;
}

.ks-logo-loader .ks-loader-spinner[b-b9hysy569s] {
    width: 50px;
    height: 50px;
}

.ks-logo-loader .ks-spinner-ring:nth-child(1)[b-b9hysy569s] {
    width: 50px;
    height: 50px;
    border-top-color: var(--ks-primary);
}

.ks-logo-loader .ks-spinner-ring:nth-child(2)[b-b9hysy569s] {
    width: 38px;
    height: 38px;
    top: 6px;
    left: 6px;
    border-right-color: var(--ks-primary-light);
}

.ks-logo-loader .ks-spinner-ring:nth-child(3)[b-b9hysy569s] {
    width: 26px;
    height: 26px;
    top: 12px;
    left: 12px;
    border-bottom-color: var(--ks-primary-dark);
}
/* /Components/Shared/PublicPageMasthead.razor.rz.scp.css */
.public-page-masthead[b-mpuar4f9dm] {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: clamp(230px, 20vw, 272px);
    overflow: hidden;
    color: var(--ks-glass-ink-dark);
    background: var(--public-frame, #11181c);
    border-bottom: 1px solid var(--ks-glass-border-dark);
}

.masthead-image[b-mpuar4f9dm] {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: url('/images/bg-hongkong.webp');
    background-repeat: no-repeat;
    background-position: center 56%;
    background-size: cover;
    filter: saturate(var(--public-bg-saturation, 0.58)) contrast(1.02) brightness(var(--public-bg-brightness, 0.82));
}

.masthead-panel[b-mpuar4f9dm] {
    position: relative;
    z-index: 1;
    display: flex;
    width: calc(46% + 24px);
    height: 100%;
    align-items: center;
    color: var(--ks-glass-ink-dark);
    background-color: var(--public-glass-strong, rgba(10, 15, 18, 0.86));
    background-image: linear-gradient(90deg, rgba(174, 201, 213, 0.024) 1px, transparent 1px);
    background-size: 64px 100%;
    border-left: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    backface-visibility: hidden;
}

.masthead-copy[b-mpuar4f9dm] {
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    padding: 22px 70px 22px max(32px, calc((100vw - 1440px) / 2 + 32px));
}

.masthead-copy h1[b-mpuar4f9dm] {
    max-width: 14ch;
    margin: 0;
    color: var(--ks-glass-ink-dark);
    font-family: var(--ks-font-public, 'Noto Sans HK Variable', 'PingFang HK', 'Microsoft JhengHei', sans-serif);
    font-size: clamp(2.35rem, 3.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 7, 12, 0.26);
}

.masthead-copy h1[b-mpuar4f9dm]::after {
    display: block;
    width: 72px;
    height: 2px;
    margin-top: 18px;
    content: '';
    background: linear-gradient(90deg, var(--ks-primary-light), rgba(var(--ks-primary-rgb), 0.18));
}

.masthead-copy p[b-mpuar4f9dm] {
    max-width: 42ch;
    margin: 14px 0 0;
    color: var(--ks-glass-muted-dark);
    font-size: clamp(.98rem, 1.2vw, 1.0625rem);
    line-height: 1.65;
    text-wrap: balance;
}

@media (min-width: 960px) and (max-width: 1179.98px) {
    .masthead-panel[b-mpuar4f9dm] {
        width: calc(52% + 24px);
    }

    .masthead-copy[b-mpuar4f9dm] {
        padding-right: 58px;
        padding-left: 28px;
    }
}

@media (max-width: 959.95px) {
    .public-page-masthead[b-mpuar4f9dm] {
        display: grid;
        height: 220px;
        grid-template-rows: 96px 124px;
    }

    .masthead-image[b-mpuar4f9dm] {
        position: relative;
        inset: auto;
        grid-row: 1;
        background-position: 52% 68%;
    }

    .masthead-panel[b-mpuar4f9dm] {
        width: 100%;
        height: 124px;
        grid-row: 2;
        clip-path: none;
        background-color: var(--public-glass-strong, rgba(10, 15, 18, 0.88));
        background-image: none;
        border-top: 1px solid var(--ks-glass-border-dark);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .masthead-copy[b-mpuar4f9dm] {
        max-width: none;
        padding: 14px 24px 16px;
    }

    .masthead-copy h1[b-mpuar4f9dm] {
        max-width: none;
        font-size: clamp(1.9rem, 6.5vw, 2.15rem);
        line-height: 1.12;
    }

    .masthead-copy h1[b-mpuar4f9dm]::after {
        width: 56px;
        margin-top: 10px;
    }

    .masthead-copy p[b-mpuar4f9dm] {
        max-width: 60ch;
        margin-top: 8px;
        font-size: .96875rem;
        line-height: 1.5;
    }
}

@media (max-width: 600px) {
    .masthead-copy[b-mpuar4f9dm] {
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 360px) {
    .masthead-copy[b-mpuar4f9dm] {
        padding: 8px 16px 10px;
    }

    .masthead-copy h1[b-mpuar4f9dm] {
        font-size: clamp(1.72rem, 7.25vw, 1.9rem);
        line-height: 1.08;
    }

    .masthead-copy h1[b-mpuar4f9dm]::after {
        width: 48px;
        margin-top: 6px;
    }

    .masthead-copy p[b-mpuar4f9dm] {
        margin-top: 5px;
        font-size: .875rem;
        line-height: 1.4;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .masthead-panel[b-mpuar4f9dm] {
        background: var(--public-frame, #11181c);
    }
}
/* /Components/Shared/ServiceLineIcon.razor.rz.scp.css */
.service-line-icon[b-f5ja692wsf] {
    display: block;
    width: var(--service-line-icon-size, 24px);
    height: var(--service-line-icon-size, 24px);
    flex: 0 0 var(--service-line-icon-size, 24px);
    overflow: visible;
    color: inherit;
    stroke-width: var(--service-line-icon-stroke, 1.75);
}

.service-line-icon *[b-f5ja692wsf] {
    vector-effect: non-scaling-stroke;
}
/* /Components/Shared/ServiceMechanicalIcon.razor.rz.scp.css */
.service-mechanical-icon[b-5lq8x75t05] {
    position: relative;
    display: block;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    color: inherit;
    contain: layout size;
}

.service-motion-canvas[b-5lq8x75t05],
.service-motion-fallback[b-5lq8x75t05] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.service-mechanical-icon--static .service-motion-fallback[b-5lq8x75t05] {
    opacity: 1;
    transition: color 240ms ease, opacity 180ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.service-motion-canvas[b-5lq8x75t05] {
    z-index: 2;
    opacity: 0;
    transition: opacity 180ms ease-out;
}

.service-motion-fallback[b-5lq8x75t05] {
    z-index: 1;
    overflow: visible;
    opacity: 1;
    transition: opacity 140ms ease-out;
}

.service-motion-fallback *[b-5lq8x75t05] {
    vector-effect: non-scaling-stroke;
}

.service-motion-fallback .surface[b-5lq8x75t05] {
    fill: currentColor;
    fill-opacity: 0.08;
    stroke: none;
}

.service-motion-fallback .relief[b-5lq8x75t05] {
    fill: currentColor;
    fill-opacity: 0.12;
}

.service-motion-fallback .deep[b-5lq8x75t05],
.service-motion-fallback .interior[b-5lq8x75t05] {
    fill: currentColor;
    fill-opacity: 0.2;
}

.service-motion-fallback .detail[b-5lq8x75t05] {
    opacity: 0.55;
}

.service-motion-fallback .pipe[b-5lq8x75t05],
.service-motion-fallback .rebar[b-5lq8x75t05] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.72;
}

.service-motion-fallback .fastener[b-5lq8x75t05] {
    fill: currentColor;
    stroke: none;
    opacity: 0.72;
}

.service-mechanical-icon.is-ready .service-motion-canvas[b-5lq8x75t05],
.service-mechanical-icon.service-icon-ready .service-motion-canvas[b-5lq8x75t05] {
    opacity: 1;
}

.service-mechanical-icon.is-ready .service-motion-fallback[b-5lq8x75t05],
.service-mechanical-icon.service-icon-ready .service-motion-fallback[b-5lq8x75t05] {
    opacity: 0;
}

@media (max-width: 700px) {
    .service-mechanical-icon[b-5lq8x75t05] {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }
}