/* Shared visual system for the seven Juxing Alliance pages. */
@font-face {
  font-family: 'Juxing Sans';
  src: url('fonts/juxing-sans.woff2?v=20261112-visual-2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ui-ink: #102b3e;
  --ui-muted: #617381;
  --ui-blue: #17445b;
  --ui-line: #dce5eb;
  --ui-paper: #f4f7f9;
  --default-font: 'Juxing Sans', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --accent-font: var(--default-font);
  --primary-color: #081e2d;
  --accent-color: var(--ui-blue);
  --bg-color: var(--ui-paper);
  --text-color: #536775;
  --dark-divider-color: #20394b;
}
html { scroll-padding-top: 32px; }
body { background: var(--ui-paper); font-family: var(--default-font); font-size: 15px; line-height: 1.85; color: var(--ui-muted); -webkit-font-smoothing: antialiased; }
body.page-services { padding: 0; }
h1, h2, h3, h4 { color: var(--ui-ink); line-height: 1.4; letter-spacing: -.025em; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-weight: 650; }
p { text-wrap: pretty; }
a { text-decoration: none; }
:is(h1, h2, h3, h4, p, span, figure, img) { cursor: auto; }
a, a *, button, button * { cursor: pointer; }
::selection { color: #fff; background: #2459e8; }
:focus-visible { outline: 3px solid #6592ff !important; outline-offset: 5px; }
.container { max-width: 1284px; }
.btn-default { padding: 15px 62px 15px 22px; font-size: 14px; font-weight: 550; letter-spacing: .025em; box-shadow: 0 7px 20px #102b3e12; }
.btn-default::before { right: 7px; }
.btn-default:hover { box-shadow: 0 10px 26px #102b3e24; }
.btn-default.btn-highlighted { background-color: var(--ui-blue); }
.btn-default.btn-highlighted:hover { background-color: #0b2b3d; }
.main-header .navbar { padding-block: 21px; }
.main-header .navbar > .container { gap: 28px; }
.juxing-brand { gap: 11px; font-size: 23px; font-weight: 650; letter-spacing: .06em; }
.juxing-brand .juxing-logo { display: block; width: 224px; height: auto; max-width: 100%; object-fit: contain; background: transparent; border-radius: 0; }
.main-header .juxing-brand { flex: 0 0 224px; }
.main-footer .footer-logo .juxing-logo { width: 250px; }
.main-header .navbar { padding-block: 11px; }
.page-home .main-header .navbar { padding-block: 10px; }
.juxing-wordmark { display: flex; flex-direction: column; gap: 5px; line-height: 1.25; }
.juxing-wordmark small { color: #c1d1dd; font: 500 9px/1.3 var(--default-font); letter-spacing: .25em; }
.juxing-nav .navbar-nav { gap: clamp(16px, 2vw, 30px); }
.main-menu.juxing-nav ul li a.nav-link { padding: 11px 0; font-size: 14px; font-weight: 450; letter-spacing: .015em; }
.main-menu.juxing-nav ul li a[aria-current='page'] { color: #fff; box-shadow: inset 0 -2px #86aaff; }
.header-btn .btn-default { padding-top: 13px; padding-bottom: 13px; }
.column-page .main-header, .contact-page .main-header {
  background: #0b2435;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid #ffffff13;
}
.column-hero {
  padding-block: 54px 66px;
  background: #102f46;
  overflow: hidden;
}
.column-breadcrumb { gap: 12px; margin-bottom: 30px; font-size: 12px; letter-spacing: .035em; color: #a4b8c7; }
.column-breadcrumb a { text-decoration: none; color: #b8cbd9; }
.column-breadcrumb a:hover { color: #fff; }
.column-hero h1 { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.3; letter-spacing: -.025em; }
.column-hero p { color: #b9ccda; line-height: 1.9; font-size: 16px; }
.column-jump { gap: 10px; margin-top: 28px; }
.column-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 17px; background: #17394f; border-color: #345266; backdrop-filter: none; transition: background .2s, border-color .2s, transform .2s; }
.column-jump a:hover { background: #24475e; border-color: #58758a; transform: translateY(-2px); }
.column-content { padding-top: 70px; padding-bottom: 88px; }
.column-content p, .column-content li { line-height: 1.9; }
.column-content h2 { font-weight: 620; line-height: 1.5; }
.column-content h3 { line-height: 1.6; }
.column-card { box-shadow: 0 10px 32px #17304704; }
.main-footer { margin-top: 0; padding-top: 76px; background: #0b2435; }
.main-footer .footer-logo h2 { font-size: 28px; letter-spacing: .1em; }
.main-footer .about-footer-content { max-width: 310px; }
.main-footer .about-footer-content p { color: #a5bac9; font-size: 13px; line-height: 1.9; }
.main-footer .about-footer-content p:first-child { margin-bottom: 13px; color: #ecf3f9; font-size: 16px; letter-spacing: .08em; }
.main-footer .footer-links h2 { margin-bottom: 22px; font-size: 15px; font-weight: 550; }
.main-footer .footer-links ul li { margin-bottom: 0; }
.main-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #a5bac9; }
.main-footer .footer-links a:hover { color: #fff; }
.main-footer .footer-info-box { padding: 28px 0; margin-top: 45px; border-block: 1px solid #ffffff16; gap: 28px 60px; }
.main-footer .footer-newsletter-form-box h2 { font-size: 22px; }
.main-footer .footer-contact-item-content h3 { font-size: 16px; }
.main-footer .footer-contact-item-content p { font-size: 12px; }
.main-footer .footer-contact-item .icon-box img { filter: brightness(0) invert(1); }
.main-footer .footer-copyright-text { padding-block: 24px; margin-top: 0; border: 0; }
.main-footer .footer-copyright-text p { color: #9bafbd; font-size: 12px; letter-spacing: .06em; }
.back-to-top { position: fixed; right: 26px; bottom: 26px; z-index: 80; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #13334b; backdrop-filter: none; border: 1px solid #476174; box-shadow: 0 5px 20px #071e2c24; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top img { width: 18px; height: 18px; transform: rotate(-90deg); filter: brightness(0) invert(1); }
.back-to-top:hover { background: var(--ui-blue); }

/* Homepage: solid surfaces with the established composition. */
.page-home .main-header { top: 32px; inset-inline: 32px; }
.page-home .header-sticky { max-width: 1320px; margin-inline: auto; background: #0b2435; backdrop-filter: none; border: 1px solid #274454; border-radius: 15px; }
.page-home .main-header .navbar { padding: 17px 20px; }
.page-home .hero { min-height: 100vh; min-height: 100svh; height: auto; margin: 0; border-radius: 0; padding-bottom: 78px; }
.page-home .hero::before { background: linear-gradient(0deg,#071c2bed 0%,#071c2b18 75%),linear-gradient(90deg,#071c2bc9 0%,#071c2b35 65%,#071c2b10); }
.page-home .hero-content .section-title h1 { font-size: clamp(48px,5.3vw,76px); font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }
.page-home .hero-content .section-title { margin-bottom: 30px; }
.page-home .hero-content .section-title p { max-width: 30em; color: #e0eaf2; font-size: 17px; }
.page-home .hero-content .section-sub-title { margin-bottom: 25px; letter-spacing: .12em; }
.page-home .hero-btn { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.hero-secondary-link { color: #e3ecf3; border-bottom: 1px solid #bcd1e66b; padding: 8px 0; font-size: 14px; }
.hero-secondary-link:hover { color: #fff; border-bottom-color: #fff; }
.page-home .hero-support-box { max-width: 318px; padding: 28px; border: 1px solid #345266; background: #153247; backdrop-filter: none; box-shadow: none; border-radius: 18px; }
.page-home .hero-support-box > .icon-box { margin-bottom: 22px; }
.page-home .hero-support-box .icon-box img { width: 32px; height: 32px; }
.hero-support-kicker { display: block; margin-bottom: 14px; font-size: 11px; letter-spacing: .18em; color: #c4d6e5; }
.page-home .hero-support-box-content h2 { font-size: 23px; line-height: 1.65; letter-spacing: 0; }
.page-home .hero-support-box-content ul { padding-top: 20px; margin-top: 23px; border-top: 1px solid #ffffff25; }
.page-home .hero-support-box-content ul li a { font-size: 14px; font-weight: 500; }
.home-directory { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 25px; padding: 0; border: 1px solid var(--ui-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 35px #12304705; overflow: hidden; }
.home-directory a { display: grid; grid-template-columns: 35px 1fr 18px; gap: 15px; align-items: center; padding: 27px 24px; color: var(--ui-ink); transition: background .2s; }
.home-directory a + a { border-left: 1px solid var(--ui-line); }
.home-directory a:hover { background: #edf3ff; }
.home-directory .directory-number { color: #8397a5; font: 400 13px var(--default-font); }
.home-directory strong { display: block; font-size: 15px; font-weight: 550; margin-bottom: 4px; }
.home-directory small { display: block; color: var(--ui-muted); font-size: 11px; }
.home-directory img { width: 16px; height: 16px; opacity: .65; }
.page-home :is(.about-us,.why-choose-us,.our-projects,.our-pricing,.our-faqs,.our-blog) { padding-block: 92px; }
.page-home :is(.our-services,.intro-video,.our-expertise,.cta-box) { padding-block: 88px; }
.page-home .section-title h2 { font-size: clamp(30px,3.25vw,46px); line-height: 1.45; font-weight: 620; }
.page-home .section-title .section-sub-title { font-size: 12px; letter-spacing: .08em; }
.page-home .dark-section .section-footer-text a { color: #a9c5ff; }
.page-home .section-title p { margin-top: 24px; line-height: 1.9; }
.page-home .section-row { margin-bottom: 45px; }
.page-home .about-us-body, .page-home .about-us-counter-box { box-shadow: 0 18px 40px #102c3e09; }
.page-home .about-us-counter-body h2 { font-weight: 500; letter-spacing: -.06em; }
.page-home .service-item { padding: 23px; border: 1px solid #345266; border-radius: 18px; background: #153247; backdrop-filter: none; transition: background .25s,border-color .25s,transform .25s; }
.page-home .service-item:hover { background: #1d3d53; border-color: #58758a; transform: translateY(-4px); }
.page-home .service-item-title h2 { font-size: 21px; font-weight: 550; line-height: 1.5; }
.page-home .service-item-content p { color: #b9cbd9; font-size: 14px; line-height: 1.85; }
.page-home .service-item-image figure { border-radius: 12px; }
.page-home .service-item-image figure img { aspect-ratio: 1.5; }
.page-home .project-item { border: 1px solid var(--ui-line); border-radius: 19px; overflow: hidden; background: #fff; transition: transform .25s,box-shadow .25s; }
.page-home .project-item:hover { transform: translateY(-5px); box-shadow: 0 18px 35px #18385014; }
.page-home .project-item-content { border-radius: 12px; background: #fff; backdrop-filter: none; border: 1px solid #dce5eb; padding: 22px; }
.page-home .project-item-content h2 { font-size: 22px; }
.page-home .pricing-item { border: 1px solid var(--ui-line); padding: 10px; border-radius: 18px; transition: box-shadow .25s,transform .25s; }
.page-home .pricing-item:hover { transform: translateY(-5px); box-shadow: 0 16px 36px #1733440d; }
.page-home .pricing-item-header { border-radius: 12px; padding: 28px; background: #eef3f8; }
.page-home .pricing-item-content h2 { font-size: 24px; }
.page-home .pricing-item-content p { font-size: 14px; }
.page-home .pricing-item-list h3 { font-size: 14px; color: var(--ui-muted); }
.page-home .pricing-item-list ul li { font-size: 14px; }
.expertise-item-content ul li::before,
.pricing-item-list ul li::before,
.faq-info-box ul li::before {
  content: '';
  width: 18px;
  height: 18px;
  top: 5px;
  background: url('../svg/check.svg') center / 17px no-repeat;
  font-family: var(--default-font);
}
.page-home .cta-box { background: #102c41; }
.page-home .cta-box .contact-us-form { padding: 38px; background: #17384e; border: 1px solid #345266; backdrop-filter: none; }
.page-home .cta-box .contact-us-form .section-title h2 { font-size: 28px; }
.page-home .cta-box .contact-form .form-control { min-height: 49px; padding: 13px 15px; background: #102c41; border: 1px solid #345266; border-radius: 9px; font-size: 14px; color: #fff; }
.page-home .cta-box .contact-form .form-control:focus { border-color: #84a9ff; box-shadow: 0 0 0 3px #5e8cff1c; }
.page-home .cta-box .contact-form .form-control::placeholder { color: #a8bdce; opacity: 1; }
.page-home .cta-box .form-label { font-size: 13px; }
.page-home .cta-box .form-text { font-size: 12px; }
.page-home .faq-accordion .accordion-item { border: 1px solid var(--ui-line); border-radius: 12px; margin-bottom: 13px; }
.page-home .faq-accordion .accordion-button { line-height: 1.7; font-size: 16px; font-weight: 550; }
.page-home .faq-accordion .accordion-body { font-size: 14px; line-height: 1.9; }
.faq-accordion .accordion-button:focus-visible, .help-accordion .accordion-button:focus-visible { outline-offset: -4px; }
.page-home .post-item { border: 1px solid var(--ui-line); box-shadow: 0 8px 24px #15304403; transition: border-color .2s,box-shadow .2s; }
.page-home .post-item:hover { border-color: #a5bbed; box-shadow: 0 10px 24px #15304409; }
.page-home .post-item-content h2 { font-size: 23px; line-height: 1.65; }
.page-home .post-item-body p { font-size: 14px; }
.post-category { display: inline-flex; padding: 3px 10px; border: 1px solid #d5e2ed; border-radius: 20px; color: #5c7b93; font-size: 11px; letter-spacing: .06em; margin-bottom: 13px; }

@media (max-width: 1199px) {
  .main-header .navbar > .container { gap: 20px; }
  .juxing-brand { font-size: 21px; }
  .main-header .juxing-brand { flex-basis: 195px; }
  .juxing-brand .juxing-logo { width: 195px; }
  .juxing-nav .navbar-nav { gap: 18px; }
  .main-menu.juxing-nav ul li a.nav-link { font-size: 13px; }
  .page-home .main-header .navbar { padding-inline: 10px; }
  .page-home .main-header .navbar > .container { gap: 16px; }
  .page-home .juxing-nav .navbar-nav { gap: 14px; }
  .page-home .juxing-wordmark small { letter-spacing: .16em; font-size: 8px; }
  .page-home .hero { padding-top: 220px; }
  .page-home .hero-support-box { max-width: 440px; margin-left: 0; padding: 20px 24px; }
  .page-home .hero-support-box > .icon-box { display: none; }
  .page-home .hero-support-box-content h2 br { display: none; }
  .page-home .hero-support-box-content ul { padding-top: 14px; margin-top: 14px; }
  .home-directory a { gap: 10px; padding: 23px 18px; grid-template-columns: 24px 1fr 16px; }
}
@media (max-width: 991px) {
  .column-page .main-header, .contact-page .main-header { border-radius: 0; }
  .main-header .navbar { padding-block: 17px; }
  .main-header .navbar { padding-block: 8px; }
  .main-header .navbar > .container { padding-inline: 24px; }
  .juxing-wordmark small { font-size: 8px; }
  .juxing-nav.main-menu { inset-inline: 16px; top: calc(100% + 12px); padding: 20px; background: #0b2537; backdrop-filter: none; box-shadow: 0 12px 24px #06152226; }
  .main-menu.juxing-nav ul li a.nav-link { padding: 13px 8px; font-size: 15px; }
  .main-menu.juxing-nav ul li a[aria-current='page'] { background: #1d3d53; box-shadow: none; border-radius: 6px; }
  .juxing-menu-toggle { width: 42px; height: 42px; background: #213c50; border: 1px solid #476174; border-radius: 10px; }
  .page-home .main-header { inset-inline: 24px; top: 24px; }
  .page-home .main-header .navbar { padding: 14px 0; }
  .page-home .main-header .navbar > .container { padding-inline: 17px; }
  .column-content { padding-top: 48px; padding-bottom: 60px; }
  .column-hero { padding-block: 35px 48px; }
  .column-hero p { font-size: 15px; }
  .column-breadcrumb { margin-bottom: 25px; }
  .home-directory { grid-template-columns: repeat(2,minmax(0,1fr)); width: calc(100% - 48px); }
  .home-directory a:nth-child(3) { border-left: none; }
  .home-directory a:nth-child(n+3) { border-top: 1px solid var(--ui-line); }
  .page-home :is(.about-us,.why-choose-us,.our-projects,.our-pricing,.our-faqs,.our-blog,.our-services,.intro-video,.our-expertise,.cta-box) { padding-block: 64px; }
  .main-footer { padding-top: 55px; }
}
@media (max-width: 575px) {
  body { font-size: 14px; }
  .container { padding-inline: 23px; }
  .juxing-brand { font-size: 20px; }
  .main-header .juxing-brand { flex-basis: 174px; }
  .juxing-brand .juxing-logo { width: 174px; }
  .main-footer .footer-logo .juxing-logo { width: 214px; }
  .juxing-mark { width: 36px; height: 36px; }
  .juxing-mark img { width: 131px; left: -9px; top: -4px; }
  .juxing-wordmark { gap: 4px; }
  .main-header .navbar > .container { padding-inline: 22px; }
  .column-hero { padding-bottom: 42px; }
  .column-hero h1 { font-size: 36px; }
  .column-hero p { font-size: 14px; }
  .column-jump { gap: 8px; }
  .column-jump a { padding: 8px 13px; font-size: 13px; }
  .column-content { padding-top: 38px; }
  .page-home .main-header { inset-inline: 14px; top: 16px; }
  .page-home .main-header .navbar { padding-block: 12px; }
  .page-home .main-header .navbar > .container { padding-inline: 13px; }
  .page-home .hero { padding: 190px 0 42px; }
  .page-home .hero::before { background: linear-gradient(0deg,#061c2cee,#061c2c30 90%),linear-gradient(90deg,#071c2ba8,#071c2b30); }
  .page-home .hero-content .section-title h1 { font-size: clamp(36px,9.6vw,48px); }
  .page-home .hero-content .section-title p { font-size: 15px; max-width: 23em; }
  .page-home .hero-content .section-sub-title { margin-bottom: 18px; }
  .page-home .hero-btn { gap: 20px; }
  .page-home .hero-support-box { margin-top: 32px; padding: 20px 22px; }
  .hero-support-kicker { margin-bottom: 9px; font-size: 10px; }
  .page-home .hero-support-box-content h2 { font-size: 18px; }
  .home-directory { width: calc(100% - 40px); margin-top: 20px; border-radius: 12px; }
  .home-directory a { display: block; padding: 18px; position: relative; }
  .home-directory .directory-number { display: block; margin-bottom: 8px; font-size: 10px; }
  .home-directory strong { font-size: 14px; }
  .home-directory small { font-size: 10px; }
  .home-directory img { position: absolute; right: 16px; top: 18px; width: 13px; }
  .page-home .section-row { margin-bottom: 32px; }
  .page-home .section-title h2 { font-size: 29px; }
  .page-home .service-item { padding: 21px; }
  .page-home .cta-box .contact-us-form { padding: 25px 21px; }
  .page-home .pricing-item-header { padding: 24px; }
  .page-home .post-item-content h2 { font-size: 21px; }
  .main-footer .footer-info-box { margin-top: 30px; }
  .back-to-top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* The site uses opaque surfaces; suppress remaining template frost effects. */
body, body *, body *::before, body *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.page-home .dark-section .section-sub-title { background: #20394b; }

/* Brand details shared by the revised content pages. */
.main-menu.juxing-nav ul li a[aria-current='page'] { box-shadow: inset 0 -2px #d8b578; }
.main-menu.juxing-nav ul li a:hover { color: #e2c18a; }
.main-footer { width: 100%; max-width: none; border-radius: 0; padding-top: 64px; }
.main-footer .footer-links ul { list-style: none; padding-left: 0; }
.main-footer .footer-copyright-text { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 38px; padding-block: 25px; border-top: 1px solid #345064; text-align: left; }
.main-footer .footer-copyright-text p { margin: 0; }
.main-footer .footer-copyright-text nav { display: flex; flex-wrap: wrap; gap: 10px 25px; }
.main-footer .footer-copyright-text a { display: inline-flex; align-items: center; min-height: 44px; color: #bacbd6; font-size: 12px; }
.main-footer .footer-copyright-text a:hover { color: #e2c18a; }
details > summary { cursor: pointer; }
details:target { scroll-margin-top: 28px; }
@media (max-width:991px) {
  .main-menu.juxing-nav ul li a[aria-current='page'] { box-shadow: none; }
}
@media (max-width:575px) {
  .main-footer { padding-top: 48px; }
  .main-footer .footer-copyright-text { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 25px; }
}