/* Figma official home / 8:2, verified through the local bridge on 2026-09-14.
   Load after page-specific styles; layout and interaction rules remain in their owners. */
:root {
    --site-ink: #191919;
    --site-muted: #666;
    --site-paper: #fff;
    --site-soft: #f4f4f4;
    --site-line: #e5e5e5;
    --site-dark: #0d0d0d;
    --site-radius: 14px;
    --site-font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    --site-width: 1400px;
    --site-gutter: clamp(20px, 5vw, 94px);
}
body { font-family: var(--site-font); color: var(--site-ink); }
button, input, select, textarea { font-family: inherit; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid #147aff; outline-offset: 4px; }
section[id] { scroll-margin-top: 96px; }
.content-section { color: var(--site-ink); }
.content-container { max-width: calc(var(--site-width) + 2 * var(--site-gutter)); padding-inline: var(--site-gutter); }
.content-section h2, .seo-content h2 { color: var(--site-ink); }
.section-description { font-size: 16px; line-height: 1.65; color: var(--site-muted); }

/* Navigation keeps its existing dropdown and mobile-menu behavior. */
@media (min-width: 1025px) {
    body .navbar { min-height: 73px; box-shadow: none; }
    body .navbar nav .nav-mobile-contact { display: none; }
    body .navbar .dropdown-menu { display: none; }
    body .navbar .nav-dropdown:hover .dropdown-menu { display: grid; }
    body .navbar nav {
        min-height: 49px; padding: 3px; gap: 4px;
        border: 1px solid rgba(255,255,255,.46); border-radius: 999px;
        background: linear-gradient(174deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 52%, rgba(255,255,255,.1)), rgba(0,0,0,.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.54), 2px 2px 3px rgba(15,23,42,.1);
        backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px);
    }
    body .navbar nav > a, body .navbar .dropdown-toggle {
        min-height: 36px; padding: 0 clamp(14px, 1.3vw, 24px); border-radius: 999px;
        line-height: 36px; font-size: 14.72px; font-weight: 700; color: rgba(255,255,255,.88);
    }
    body .navbar nav > a[aria-current="page"], body .navbar nav a:hover {
        color: #111827; background: linear-gradient(#ffffffe0, #ffffff9e);
        box-shadow: inset 0 1px 0 #ffffffbf, 0 4px 14px #0f172a14;
    }
    body .navbar.scrolled { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--site-line); }
    body .navbar.scrolled nav { background: #f4f4f4b3; border-color: #dedede; }
    body .navbar.scrolled nav > a, body .navbar.scrolled .dropdown-toggle { color: #444; }
    body .navbar.scrolled nav > a[aria-current="page"], body .navbar.scrolled nav > a:hover { background: #fff; color: #111; }
    body .navbar .cta-button-nav, body .navbar.scrolled .cta-button-nav {
        min-height: 44px; padding: 0 30px !important; display: inline-flex; align-items: center;
        justify-content: center; background: #08080af0; box-shadow: 2px 2px 7px #0000003d;
    }
    body .navbar .nav-dropdown:focus-within .dropdown-menu { display: grid; opacity: 1; visibility: visible; transform: translateX(-50%); }
}

body .navbar, body .navbar nav, body .navbar .dropdown-menu, body .navbar .dropdown-toggle, body .navbar nav a, body .menu-toggle span { transition-duration: 100ms; transition-delay: 0ms; }

/* Homepage: match the reference proportions without fixing content to the viewport. */
.home-page .hero-section { height: 100vh; height: 100dvh; max-height: none; }
.home-page .video-container { position: absolute; }
.home-page .hero-content {
    position: absolute; top: 27.42%; bottom: auto; width: min(720px, 90%); max-width: 720px;
}
.home-page .hero-brand-icon { width: clamp(130px, 12.06vw, 225px); height: clamp(130px, 12.06vw, 225px); border-radius: 0; margin-bottom: 26px; overflow: visible; box-shadow: none; }
.home-page .hero-brand-icon img { opacity: 1; object-fit: contain; filter: drop-shadow(3px 3px 7.8px #0000006e); }
.home-page .hero-content h1 { width: min(620px, 100%); font-size: clamp(52px, 4.38vw, 81.6px); line-height: .98; text-shadow: 2px 2px 4.6px #00000082; }
.home-page .hero-content h1::after { width: min(337px, 72%); margin-top: 14px; }
.home-page .hero-content p { margin: 0; font-size: 16px; font-weight: 400; letter-spacing: 1.12px; line-height: 1.6875; text-shadow: 1px 1px 1.2px #000000a6; }
.home-page .hero-btn-group { gap: 26px; margin-top: clamp(30px, 4.24vw, 79px); }
.home-page .hero-btn-group .primary-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: hidden; width: 292px; min-width: 292px; height: 74px; min-height: 74px; padding: 9px 18px; font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: .8px; color: #ffffffe6; border: .5px solid #ffffff; border-radius: 999px; background: #06142b; box-shadow: none; }
.home-page .hero-btn-group .secondary-btn { display: inline-flex; align-items: center; justify-content: center; width: 191px; min-width: 191px; height: 60px; min-height: 60px; padding: 4px 20px; font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: .8px; border: 0; border-radius: 999px; background: #ffffffed; color: #191919; backdrop-filter: blur(40px); box-shadow: 2px 2px 4.5px #0000004a; }
.home-page .hero-trust-strip { position: absolute; left: 50%; right: auto; transform: translateX(-50%); bottom: 22px; width: min(1040px, 76%); }
.home-page .hero-trust-strip p { font-weight: 300; }
.home-page .video-controls { position: absolute; bottom: 40px; right: 28px; }
.home-page .hero-video-play { top: auto; bottom: 24px; left: 24px; transform: none; }
.home-page #works, .home-page #gallery { background: #fff; }
.home-page .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.home-page .stat-box { min-width: 0; }
.home-page .stat-label { color: #fff; }
.home-page #contact .content-container { max-width: 1586px; padding-bottom: 33px; }
.home-page #contact h2 { margin-bottom: 0; }
.home-page #contact .section-description { padding-block: 13px; line-height: 29px; }
.home-page #contact .contact-card-grid { margin-top: 53px; }
.home-page #contact .contact-primary-button { min-height: 92px; padding: 10px 28px; border: .67px solid #ffffff63; background: #141414; font-size: 36px; font-weight: 700; }
.home-page #contact .contact-primary-button span { color: #00fff2; background: linear-gradient(90deg, #00fff2, #2563ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-page #contact .contact-primary-button:hover { background: #222; border-color: #ffffff99; }
.home-page #services .content-container { max-width: 1726px; }
.home-page .service-card { border-radius: 10px; }
.home-page #gallery .grid-item { margin: 10px; }

/* Inner pages retain their information architecture and reading widths. */
.subpage-hero, .service-page .subpage-hero, .portfolio-library-hero { background: var(--site-soft); color: var(--site-ink); }
.subpage-hero h1, .portfolio-library-hero h1 { color: var(--site-ink); letter-spacing: -.025em; line-height: 1.3; }
.subpage-hero p, .portfolio-library-hero p { color: var(--site-muted); }
.seo-content { overflow-wrap: anywhere; }
.seo-content h2 { line-height: 1.45; }
.breadcrumb a, .service-inquiry h2 { color: var(--site-ink); }
.seo-content a:hover, .breadcrumb a:hover { text-decoration: underline; }
.read-more-link, .service-subnav a, .service-qr-button { border-radius: 999px; }
.service-inquiry { border-color: var(--site-line); border-radius: var(--site-radius); background: var(--site-soft); color: var(--site-ink); }
.subpage-hero .service-inquiry p, .service-inquiry p, .service-inquiry .service-inquiry-note { color: var(--site-muted); }
.service-case-card, .team-card, .news-card, .portfolio-library-card, .case-index-card, .seo-card, .related-card { border: 1px solid var(--site-line); border-radius: var(--site-radius); box-shadow: 0 4px 16px #00000006; }
.seo-card a, .service-link { color: var(--site-ink); }
.team-avatar { background: #242424; }
.service-qr-button { background: #fff; color: #191919; border-color: #d1d1d1; }
.service-inquiry .wechat-copy-button { background: #191919; border-color: #191919; color: #fff; }
.subpage-main .cta-button, .service-inquiry .cta-button { background: #191919; color: #fff; border-color: #191919; border-radius: 999px; }
.seo-summary, .seo-cta, .wechat-contact-panel, .geo-answer-box { background: var(--site-soft); border-color: var(--site-line); box-shadow: none; }
.geo-answer-kicker { color: var(--site-muted); }
.service-contact-dock a { background: #191919; }
.navbar.scrolled .menu-toggle span { background: #191919 !important; }
.full-width-footer.dark-footer, .main-footer { background: var(--site-dark); color: #999; }
.main-footer a { color: #ccc; }
.footer-column ul li a:hover, .privacy-links a:hover { color: #fff; }

/* The publication tools share the same palette, typography and navigation. */
:root {
    --jr-ink: var(--site-ink); --jr-muted: var(--site-muted); --jr-line: var(--site-line);
    --jr-soft: var(--site-soft); --jr-page: var(--site-paper);
}
body.jr-page { padding: 0; font-family: var(--site-font); }
.jr-app-shell { max-width: none; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.jr-global-header { min-height: 74px; padding-inline: clamp(20px, 3.65vw, 68px); gap: 20px; }
.jr-brand img { width: 138px; }
.jr-contact-link { background: #08080a; border-radius: 999px; color: #fff; }
.jr-footer { background: var(--site-dark); color: #aaa; }
.jr-footer a { color: #ccc; }
.jr-footer .jr-operator-note { color: #aaa; }
.jr-folder-front { background: linear-gradient(145deg, #fff, #f4f4f4); }
@media (min-width: 1101px) {
    .jr-main-nav { align-self: center; gap: 4px; padding: 3px; border: 1px solid #dedede; border-radius: 999px; background: #f4f4f4b3; }
    .jr-main-nav a { min-height: 36px; height: auto; padding: 0 14px; border-radius: 999px; font-size: 14px; }
    .jr-main-nav a.is-active, .jr-main-nav a:hover { background: #fff; color: #191919; box-shadow: 0 4px 14px #00000008; }
    .jr-main-nav a.is-active::after { display: none; }
}
@media (min-width: 1025px) and (max-width: 1600px) {
    .home-page .hero-content { top: 24%; }
}
@media (max-width: 1024px) {
    .home-page .hero-content { top: 24%; }
    .home-page .hero-btn-group { margin-top: 46px; }
    .home-page .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .home-page .video-controls { bottom: 24px; }
    .home-page .hero-trust-strip { display: block; bottom: 100px; width: 90%; }
}
@media (max-width: 768px) {
    .content-container { padding: 48px 20px; }
    .content-container h2 { font-size: 26px; }
    .home-page .hero-content { top: 14%; width: 92%; }
    .home-page .hero-brand-icon { width: 110px; height: 110px; margin-bottom: 18px; }
    .home-page .hero-content h1 { font-size: 48px !important; }
    .home-page .hero-content p { font-size: 13px !important; letter-spacing: .4px; line-height: 1.7; }
    .home-page .hero-btn-group { gap: 18px; margin-top: 24px; }
    .home-page .hero-btn-group .primary-btn { width: 234px; min-width: 234px; height: 59px; min-height: 59px; font-size: 28px; }
    .home-page .hero-btn-group .secondary-btn { width: 153px; min-width: 153px; height: 48px; min-height: 48px; padding-inline: 12px; font-size: 28px; }
    .home-page #contact .contact-primary-button { min-height: 64px; font-size: 28px; }
    .home-page .hero-trust-marquee { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .home-page .hero-trust-column:nth-child(n+4) { display: none; }
    .home-page .hero-trust-column span { font-size: 14px; }
    .home-page .hero-trust-strip p { font-size: 13px; }
    .home-page .hero-trust-strip { bottom: 160px; }
    .home-page .hero-video-play { bottom: 82px; left: 50%; transform: translateX(-50%); min-height: 44px; padding: 10px 18px; font-size: 13px; }
    .home-page .video-controls { bottom: 24px; right: auto; left: 50%; transform: translateX(-50%); }
    .home-page .stat-box { padding: 24px 10px; }
    .home-page .stat-proof { font-size: 26px; }
    .home-page .stat-label { font-size: 13px; line-height: 1.6; }
    .home-page #gallery .image-grid-container { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .home-page #gallery .grid-item { margin: 0; }
    .home-page #contact .content-container, .home-page #services .content-container { padding: 64px 20px; }
    .home-page #services .services-list { grid-template-columns: 1fr; }
    .jr-global-header { min-height: 74px; }
    .team-grid, .value-grid { grid-template-columns: minmax(0,1fr); }
}
/* Compress the content, rather than extending the hero beyond short viewports. */
@media (max-height: 850px) and (min-width: 769px) {
    .home-page .hero-content { top: 18%; }
    .home-page .hero-brand-icon { width: 110px; height: 110px; margin-bottom: 18px; }
    .home-page .hero-content h1 { font-size: clamp(42px, 7vh, 64px); }
    .home-page .hero-btn-group { margin-top: 24px; gap: 18px; }
}
@media (max-height: 740px) and (max-width: 768px) {
    .home-page .hero-content { top: 90px; }
    .home-page .hero-brand-icon { width: 56px; height: 56px; margin-bottom: 14px; }
    .home-page .hero-content h1 { font-size: 40px !important; }
    .home-page .hero-content h1::after { margin-top: 10px; }
    .home-page .hero-content p { margin-top: 12px; }
    .home-page .hero-btn-group { margin-top: 20px; gap: 12px; }
    .home-page .hero-btn-group .primary-btn, .home-page .hero-btn-group .secondary-btn { padding-block: 4px; font-size: 28px; }
    .home-page .hero-trust-strip { bottom: 142px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero-trust-column { animation: none !important; transform: none !important; }
}