/* Interaction layer — shared controls, then homepage modules. */
:root { --motion-fast: 160ms; --motion-ui: 260ms; --motion-ease: cubic-bezier(.22,1,.36,1); }
html { scrollbar-gutter: stable; }
html.overlay-open, html.overlay-open body { overflow: hidden; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(button,a,input,summary):focus-visible { outline: 2px solid #bd3828; outline-offset: 5px; }
:where(h2,section,[role="tabpanel"])[tabindex="-1"]:focus { outline: none; }

/* Buttons have a distinct arrow target and consistent press feedback. */
.button { position: relative; border-radius: 9px; gap: 24px; transition: background var(--motion-fast), box-shadow var(--motion-ui), transform var(--motion-ui) var(--motion-ease); }
.button .button-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #ffffff19; transition: background var(--motion-ui), transform var(--motion-ui) var(--motion-ease); }
.button .button-icon .icon { width: 16px; height: 16px; }
.button-white .button-icon, .button-outline .button-icon { background: #20212409; }
.button:hover { transform: none; box-shadow: none; }
.button:hover .icon { transform: none; }
.button:active { transform: scale(.975); transition-duration: 90ms; }
.button-small { padding-block: 8px; min-height: 44px; }
.button-small .button-icon { flex-basis: 24px; width: 24px; height: 24px; }
.text-link { min-height: 44px; }
.text-link .icon { transition: transform var(--motion-ui) var(--motion-ease); }

/* Header: one disclosure on desktop, an in-flow accordion on mobile. */
.header { transition: background var(--motion-ui), border-color var(--motion-ui), box-shadow var(--motion-ui); }
.header.scrolled { background: #fffffffa; box-shadow: 0 4px 24px #25241c05; }
.nav-service { display: contents; }
.nav-service > button { display: flex; align-items: center; gap: 7px; padding: 14px 0; font-size: 14px; font-weight: 500; white-space: nowrap; position: relative; }
.nav-service > button.current, .nav-service > button[aria-expanded="true"] { color: #b93325; }
.nav-service > button > .icon { width: 14px; transition: transform var(--motion-ui) var(--motion-ease); }
.nav-service > button[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.nav > a::after { width: 100%; transform: scaleX(0); transform-origin: left; height: 1px; transition: transform var(--motion-ui) var(--motion-ease); }
.nav > a[aria-current]::after, .nav > a:hover::after { transform: scaleX(1); }
.city-toggle { min-height: 44px; padding-inline: 8px; border-radius: 7px; transition: background var(--motion-fast), color var(--motion-fast); }
.city-toggle .icon { color: #888a86; }
.mega-menu { border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px #2423190a; }
.mega-links a { border: 1px solid transparent; transition: background var(--motion-ui), border-color var(--motion-ui); }
.mega-links a > span { transition: background var(--motion-ui), color var(--motion-ui); }
.mega-links a > svg { transition: transform var(--motion-ui) var(--motion-ease); }
.mega-intro a { min-height: 44px; }
.nav-scrim { position: fixed; inset: 0; z-index: 48; background: #1d211d26; animation: scrim-in 200ms ease both; }
.menu-toggle { border-radius: 7px; min-width: 44px; min-height: 44px; }

/* First screen: restrained depth, no continuous motion. */
.hero-visual { border-radius: 12px; animation: hero-frame-in 850ms var(--motion-ease) both; }
.hero-visual > img { animation: none; transform: translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.035); transition: transform 750ms var(--motion-ease); }
.hero-visual.is-tracking > img { transition-duration: 180ms; }
.hero-copy > * { animation-duration: 750ms; }
.hero-actions .button { min-height: 56px; padding: 12px 17px 12px 23px; gap: 28px; }
.hero-actions > .text-link { gap: 13px; position: relative; }
.hero-actions > .text-link::after { content: ''; height: 1px; position: absolute; left: 0; right: 31px; bottom: 5px; background: currentColor; transform: scaleX(.4); transform-origin: left; opacity: .25; transition: transform var(--motion-ui), opacity var(--motion-ui); }
.hero-assurance { color: #747779; }
.proof-line > a .icon { transition: transform var(--motion-ui) var(--motion-ease); }

/* Native dialogs remain open through a short exit transition. */
dialog { overscroll-behavior: contain; box-shadow: 0 25px 100px #15171326; }
dialog[open] { animation: dialog-enter 260ms var(--motion-ease) both; }
dialog::backdrop { background: #1a201e7a; backdrop-filter: blur(5px); }
dialog[open]::backdrop { animation: scrim-in 220ms ease both; }
dialog.is-closing { animation: dialog-exit 160ms ease both; pointer-events: none; }
dialog.is-closing::backdrop { animation: scrim-out 160ms ease both; }
.dialog-close { width: 44px; height: 44px; top: 10px; right: 10px; color: #606762; transition: background var(--motion-fast), transform var(--motion-ui) var(--motion-ease); }
.dialog-close:active { transform: scale(.9); }
.contact-copy { background: #f5f5f1; }
.contact-copy h2 { letter-spacing: -.035em; }
.contact-code .qr-window { border-radius: 12px; box-shadow: 0 0 0 1px #e7eae4; }
.wechat-id { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; padding: 6px 0; letter-spacing: 0; }
.wechat-id > span { user-select: all; font-size: 15px; font-variant-numeric: tabular-nums; }
.wechat-id > button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 112px; min-height: 44px; padding: 8px 10px; border-radius: 6px; background: #f2f4ef; color: #3a4940; font-size: 12px; transition: background var(--motion-fast), color var(--motion-fast); }
.wechat-id > button .icon { width: 15px; height: 15px; }
[data-copy][data-copy-state="success"] { color: #087c48; }
[data-copy][data-copy-state="success"] > .icon { stroke-width: 2; }
.copy-link { min-height: 44px; }
.save-qr { min-height: 44px; margin-top: 3px; border-radius: 5px; padding-inline: 10px; }
.copy-status { min-height: 20px; margin-top: 4px; text-align: center; }
.copy-status.error { color: #a33123; }
.city-options button { min-height: 46px; transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); }
.city-options button:active { transform: scale(.97); }
.city-options button[aria-pressed="true"] { border-color: #bd3828; background: #fcf1ee; color: #a73224; }
.city-options button[aria-pressed="true"] .icon { color: #a73224; }
#city-results { max-height: 36dvh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#city-results > p { font-size: 14px; color: var(--muted); padding-block: 12px; }
.city-result { border-radius: 5px; padding-inline: 10px; transition: background var(--motion-fast); }
.city-result:focus-visible { outline-offset: -2px; }

@media (hover:hover) and (pointer:fine) {
 .button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px #8b302414; }
 .button:hover .button-icon { background: #ffffff2e; }
 .button:hover .button-icon .icon { transform: translate(1.5px,-1.5px); }
 .button-white:hover .button-icon, .button-outline:hover .button-icon { background: #20212410; }
 .button:active { transform: scale(.975); box-shadow: none; }
 .text-link:hover .icon, .proof-line > a:hover .icon { transform: translateX(4px); }
 .hero-actions > .text-link:hover::after { transform: scaleX(1); opacity: .6; }
 .city-toggle:hover { background: #f4f4f1; color: #a73224; }
 .mega-links a:hover { border-color: #e5e7df; background: #f8f8f5; }
 .mega-links a:hover > span { color: #b63828; background: #f4eae4; }
 .mega-links a:hover > svg { transform: translate(2px,-2px); }
 .wechat-id > button:hover { background: #e7ede3; }
 .save-qr:hover, .city-result:hover { background: #f5f6f1; }
}
@media (max-width:680px) {
 .header-inner { gap: 10px; }
 .header-actions { gap: 5px; }
 .city-toggle { font-size: 13px; padding-inline: 6px; }
 .nav { top: 100%; padding: 12px 20px 24px; max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 25px #25251d0d; }
 .nav-service { display: block; }
 .nav-service > button { width: 100%; justify-content: space-between; font-size: 16px; padding: 15px 0; min-height: 58px; border-bottom: 1px solid #f0f1eb; text-align: left; }
 .mega-menu { position: static; top: auto; max-height: none; overflow: visible; box-shadow: none; border: 0; }
 .mega-inner { width: 100%; padding-block: 12px 18px; }
 .mega-links { grid-template-columns: 1fr; gap: 4px; }
 .mega-links a { padding: 12px; min-height: 63px; gap: 12px; align-items: center; background: #f8f8f5; }
 .mega-links a > span { display: grid; place-items: center; padding: 8px; }
 .mega-links a > span .icon { width: 20px; }
 .mega-links a > svg { display: block; width: 15px; }
 .mega-links small { font-size: 12px; }
 .mega-intro a { font-size: 14px; padding-inline: 2px; }
 .hero { padding-top: 33px; }
 .hero-actions { gap: 24px; }
 .hero-actions .button { min-height: 52px; padding: 10px 12px 10px 18px; gap: 18px; }
 .hero-actions > .text-link { gap: 9px; }
 .hero-visual { border-radius: 9px; }
 .hero-visual > img { transform: scale(1.015); }
 .contact-dialog[open] { width: 390px; }
 .contact-copy { padding: 28px 25px 22px; }
 .contact-copy h2 { font-size: 25px; padding-right: 18px; }
 .contact-code { padding: 24px 24px 22px; }
 .contact-code .qr-window { width: min(185px,52vw); }
 .wechat-id { margin-top: 12px; gap: 14px; }
 .wechat-id > button { font-size: 12px; }
 .scan-label, .save-qr, .copy-status { font-size: 13px; }
 .mobile-contact .button { min-height: 46px; padding: 8px 12px 8px 18px; gap: 18px; }
 .city-dialog .search-field input { font-size: 16px; }
}
@media (max-width:360px) {
 .hero-actions { gap: 16px; }
 .hero-actions .button { gap: 12px; padding-left: 14px; }
 .hero-actions > .text-link { gap: 6px; }
 .hero-assurance span + span::before { margin-inline: 10px; }
 .wechat-id { gap: 8px; }
 .wechat-id > span { font-size: 14px; }
 .wechat-id > button { min-width: 105px; }
}
@keyframes hero-frame-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.987); } to { opacity: 1; transform: none; } }
@keyframes dialog-exit { to { opacity: 0; transform: translateY(7px) scale(.992); } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-out { to { opacity: 0; } }
@media (prefers-reduced-motion:reduce) {
 .hero-visual > img { transform: none; }
 *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}

/* Service categories: a moving underline and stationary, readable rows. */
.service-tabs, .flow-tabs { position: relative; isolation: isolate; }
.service-tabs > button, .flow-tabs > button { position: relative; z-index: 1; transition: color 180ms ease; }
.service-tabs > button::after { display: none; }
.service-tabs.tabs-ready::after { content: ''; position: absolute; bottom: -1px; left: 0; width: var(--tab-width,0px); height: 2px; background: #c53b29; transform: translateX(var(--tab-x,0px)); transition: transform 320ms var(--motion-ease), width 320ms var(--motion-ease); }
.service-tabs > button { color: #666d67; }
.service-tabs > button[aria-selected="true"] { color: #a63224; }
.service-panels, .flow-panels, .network-panels { position: relative; }
.service-spotlight { gap: 56px; }
.spotlight-copy { border-radius: 10px; background: #f5f5f1; }
.spotlight-icon { color: #b73a29; }
.spotlight-links > a { position: relative; transition: color var(--motion-ui); gap: 24px; padding-right: 2px; }
.spotlight-links > a:hover { padding-left: 0; }
.spotlight-links > a > .icon { flex: 0 0 42px; width: 42px; height: 42px; padding: 12px; border: 1px solid #e7e9e2; border-radius: 50%; color: #5c655c; transition: transform var(--motion-ui) var(--motion-ease), border-color var(--motion-ui), color var(--motion-ui), background var(--motion-ui); }
.spotlight-links > a::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: #c9553d; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--motion-ease); }
.spotlight-links > a:last-child::after { display: none; }
.spotlight-links > a:focus-visible { border-radius: 4px; }

/* Process switching: one sliding selection, quiet step-by-step entry. */
.flow-tabs { background: #f7f7f4; border-color: #ebebe4; gap: 3px; }
.flow-tabs.tabs-ready::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; border-radius: 5px; width: var(--tab-width,0px); transform: translateX(var(--tab-x,0px)); background: #292e29; box-shadow: 0 2px 5px #17241812; transition: transform 280ms var(--motion-ease), width 280ms var(--motion-ease); }
.flow-tabs.tabs-ready > button[aria-selected="true"] { background: transparent; }
.flow-tabs > button { min-height: 42px; }
.flow-inline > li > span { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e2e5dc; border-radius: 50%; background: #fafbf8; font-size: 12px; color: #777f72; margin-bottom: 14px; }
.flow-inline > li:first-child > span { background: #f8ece5; border-color: #f0dbce; color: #ac3824; }
.flow-inline { border-top-color: #e4e6df; }
.assurance-grid > div { padding-right: 10px; }

/* City selection and conversion retain the same control language. */
.network-tabs > button { transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.network-tabs > button[aria-selected="true"] { background: #f5f7ef; color: #26352a; border-color: #f5f7ef; box-shadow: 0 3px 10px #0c18080c; }
.network-tabs > button:active { transform: scale(.96); }
.network-card { border-radius: 12px; }
.network-card-footer a, .network-card-footer button { min-height: 44px; }
.network-card-footer .icon { transition: transform var(--motion-ui) var(--motion-ease); }
.network-card-footer button { border-radius: 6px; padding-inline: 12px; margin-right: -12px; transition: background var(--motion-fast); }
.floating-contact, .mobile-contact { transition: transform 260ms var(--motion-ease), opacity 200ms ease, visibility 200ms; }
.floating-contact.quick-contact-hidden { transform: translateY(12px); opacity: 0; visibility: hidden; pointer-events: none; }
.mobile-contact.quick-contact-hidden { transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; }
.floating-contact button { transition: transform var(--motion-ui) var(--motion-ease), box-shadow var(--motion-ui); }
.floating-contact button:active { transform: scale(.96); }
.back-top { min-width: 52px; min-height: 44px; }
.back-top .icon { transition: transform var(--motion-ui) var(--motion-ease); }
[data-reveal] { transition-duration: 650ms; }
.motion-ready [data-reveal].reveal-pending { transform: translateY(14px); }
.menu-lines { position: relative; width: 22px; height: 16px; }
.menu-lines::before, .menu-lines::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform var(--motion-ui) var(--motion-ease), top var(--motion-ui) var(--motion-ease); }
.menu-lines::before { top: 4px; }
.menu-lines::after { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { top: 8px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { top: 8px; transform: rotate(-45deg); }
@media (hover:hover) and (pointer:fine) {
 .service-tabs > button:hover { color: #a63224; }
 .spotlight-links > a:hover > .icon { background: #b63a28; border-color: #b63a28; color: white; transform: rotate(45deg); }
 .spotlight-links > a:hover::after { transform: scaleX(1); }
 .network-card-footer a:hover .icon { transform: translate(2px,-2px); }
 .network-card-footer button:hover { background: #edf0e7; }
 .network-card-footer button:hover .icon { transform: translateX(3px); }
 .floating-contact button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #1d2e1d18; }
 .back-top:hover .icon { transform: translateY(-3px); }
}
@media (max-width:1100px) {
 .service-spotlight { gap: 36px; }
}
@media (max-width:680px) {
 .service-tabs { margin-bottom: 0; margin-right: 0; padding-right: 0; overflow-y: hidden; scroll-padding-inline: 12px; }
 .service-tabs > button { padding-inline: 2px; }
 .service-tabs.tabs-ready::after { bottom: 0; }
 .spotlight-copy { border-radius: 8px; }
 .spotlight-links > a > .icon { flex-basis: 36px; width: 36px; height: 36px; padding: 10px; }
 .flow-tabs { max-width: 100%; }
 .flow-tabs > button { padding-inline: 14px; }
 .network-card { border-radius: 9px; }
 .network-card-footer { gap: 7px 14px; }
 .network-card-footer a, .network-card-footer button { font-size: 13px; }
 .network-card-footer button { margin-right: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion:reduce) {
 .motion-ready [data-reveal].reveal-pending { opacity: 1; transform: none; }
}
.closing [data-copy][data-copy-state="success"] { color: #c1edc7; }