.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero::before { content: ""; position: absolute; top: 0; right: 8%; width: 27vw; height: 100%; max-width: 360px; background: repeating-linear-gradient(135deg, transparent 0 17px, rgba(184,230,46,.09) 17px 20px); transform: skewX(-14deg); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .45fr); min-height: 660px; align-items: end; gap: 50px; padding: clamp(62px, 9vw, 130px) 0 72px; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 940px; margin: 0 0 26px; font: 900 clamp(4rem,10.7vw,10rem)/.82 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-lede { max-width: 580px; margin: 0 0 32px; color: #cbd1c9; font-size: clamp(1rem,1.8vw,1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { align-self: end; position: relative; z-index: 1; border-top: 4px solid var(--lime); padding-top: 18px; }
.hero-note strong { display: block; color: var(--lime); font: 900 clamp(2.8rem,6vw,5.4rem)/.84 var(--display); }
.hero-note span { display: block; margin-top: 9px; color: #b3bdb5; font: 700 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ticker { display: flex; overflow: hidden; border-top: 4px solid var(--orange); border-bottom: 4px solid var(--ink); background: var(--lime); white-space: nowrap; }
.ticker-track { display: flex; flex: none; gap: 42px; padding: 13px 20px; animation: ticker 28s linear infinite; font: 900 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ticker-track span::before { content: "✳"; margin-right: 14px; color: var(--orange); }
@keyframes ticker { to { transform: translateX(-50%); } }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.stat { padding: 26px 20px; border-right: 2px solid var(--ink); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font: 900 clamp(2rem,4vw,4rem)/.9 var(--display); }
.stat span { display: block; margin-top: 10px; color: var(--muted); font: 700 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card { position: relative; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid var(--ink); border-radius: 2px; padding: 24px; background: var(--cream); box-shadow: var(--shadow); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.service-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hover); }
.service-card:nth-child(2n) { background: var(--orange); }
.service-card:nth-child(3n) { background: var(--lime); }
.service-card .card-num { color: var(--orange-dark); font: 900 3.4rem/.8 var(--display); }
.service-card h3 { max-width: 240px; margin: 15px 0 6px; font: 900 clamp(1.6rem,3vw,2.6rem)/.9 var(--display); text-transform: uppercase; }
.service-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.service-card:nth-child(2n) p, .service-card:nth-child(3n) p { color: var(--ink-soft); }
.card-arrow { align-self: end; display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 2px solid var(--ink); }
.feature-panel { border: 2px solid var(--ink); border-radius: 2px; padding: clamp(24px,4vw,45px); background: var(--cream); box-shadow: var(--shadow); }
.feature-panel h3 { margin: 0 0 14px; font: 900 clamp(2rem,4vw,4rem)/.88 var(--display); text-transform: uppercase; }
.feature-panel p { margin: 0 0 20px; color: var(--muted); }
.route-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.route-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ink); font-weight: 900; }
.route-item small { color: var(--muted); font: 700 .72rem/1 var(--mono); }
.route-item svg { color: var(--orange); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 4px solid var(--paper); border-bottom: 4px solid var(--paper); }
.process-step { min-height: 230px; padding: 24px 20px; border-right: 1px solid #607067; }
.process-step:last-child { border-right: 0; }
.process-step b { display: block; color: var(--orange); font: 900 4rem/.8 var(--display); }
.process-step h3 { margin: 25px 0 8px; font-size: 1.1rem; }
.process-step p { margin: 0; color: #b3bdb5; font-size: .88rem; }
.cta-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 38px 0; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.cta-band h2 { margin: 0; font: 900 clamp(2rem,5vw,4.7rem)/.88 var(--display); text-transform: uppercase; }
.cta-band p { margin: 10px 0 0; color: var(--muted); }
.form-shell { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 0; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.form-intro { padding: clamp(24px,4vw,48px); background: var(--ink); color: var(--paper); }
.form-intro h2 { margin: 0 0 16px; font: 900 clamp(2.5rem,5vw,5rem)/.85 var(--display); text-transform: uppercase; }
.form-intro p { color: #b3bdb5; }
.form-fields { padding: clamp(24px,4vw,48px); background: var(--cream); }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 800 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; border: 2px solid var(--ink); border-radius: 0; padding: 12px 13px; background: var(--paper); color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.form-status { min-height: 1.5em; margin: 14px 0 0; color: var(--orange-dark); font-weight: 800; }
.query-box { display: grid; grid-template-columns: 1fr auto; gap: 0; border: 2px solid var(--ink); background: var(--cream); }
.query-box input { min-width: 0; border: 0; border-right: 2px solid var(--ink); border-radius: 0; padding: 16px; background: transparent; }
.query-box .btn { margin: 4px; }
.route-table { width: 100%; border-collapse: collapse; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); background: var(--cream); }
.route-table th, .route-table td { padding: 14px 12px; border-bottom: 1px solid var(--ink); text-align: left; }
.route-table th { background: var(--ink); color: var(--paper); font: 800 .76rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.route-table tr:last-child td { border-bottom: 0; }
.route-table td:first-child { font-weight: 900; }
.tab-list { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--ink); }
.tab-button { border: 2px solid var(--ink); border-bottom: 0; border-radius: 0; padding: 12px 16px; background: transparent; font-weight: 900; }
.tab-button.is-active { background: var(--ink); color: var(--paper); }
.tab-panel { padding: 22px 0 0; }
.tab-panel[hidden] { display: none; }
.estimate-output { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin-top: 18px; padding-top: 16px; border-top: 2px solid #607067; }
.estimate-output span { color: #b3bdb5; font-size: .78rem; }
.estimate-output strong { grid-column: 1 / -1; color: var(--lime); font: 900 2.45rem/.9 var(--display); }
.estimate-output span:last-child { grid-column: 1 / -1; }
.estimate-output span b { color: var(--paper); }

.service-rail { position: fixed; z-index: 40; top: 50%; right: 0; display: grid; transform: translateY(-50%); border: 2px solid var(--ink); background: var(--orange); box-shadow: 5px 5px 0 var(--ink); }
.service-rail button, .service-rail a { display: grid; min-width: 62px; gap: 5px; place-items: center; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 11px 7px; background: transparent; color: var(--ink); font: 800 .66rem/1 var(--mono); }
.service-rail button:hover, .service-rail button:focus-visible, .service-rail a:hover, .service-rail a:focus-visible { background: var(--lime); }
.service-rail button:last-child { border-bottom: 0; }
.service-rail .icon { width: 21px; height: 21px; }
.service-panel { position: fixed; z-index: 39; top: 50%; right: 82px; width: min(390px, calc(100vw - 30px)); max-height: min(680px, calc(100vh - 30px)); overflow: auto; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: var(--shadow); transform: translate(25px, -50%); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease); }
.service-panel.is-open { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--ink); color: var(--paper); border-bottom: 4px solid var(--orange); }
.panel-head strong { font: 900 .9rem/1 var(--mono); letter-spacing: .08em; }
.panel-head button { border: 0; background: transparent; color: var(--paper); padding: 4px; }
.service-panel > form, .service-panel > p, .service-panel > .qr-placeholder, .service-panel > .wechat-number, .service-panel > .chat-log, .service-panel > .quick-questions, .service-panel > .chat-form, .service-panel > .panel-result, .service-panel > .panel-actions { margin-right: 20px; margin-left: 20px; }
.service-panel form { display: grid; gap: 14px; padding-top: 20px; }
.service-panel label { display: grid; gap: 7px; font: 800 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.service-panel input, .service-panel select, .service-panel textarea { width: 100%; border: 2px solid var(--ink); border-radius: 0; padding: 11px; background: var(--paper); color: var(--ink); }
.service-panel textarea { min-height: 88px; resize: vertical; }
.panel-result { display: grid; gap: 5px; min-height: 68px; margin-top: 16px; padding: 14px; border-left: 5px solid var(--lime); background: var(--paper-deep); }
.panel-result span, .panel-result small { color: var(--muted); font-size: .82rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0; }
.panel-actions .btn { flex: 1; font-size: .73rem; padding: 10px; }
.qr-placeholder { display: grid; width: 160px; height: 160px; margin-top: 22px; place-items: center; border: 8px solid var(--ink); background: repeating-linear-gradient(45deg, var(--paper) 0 8px, var(--ink) 8px 12px); color: var(--orange); }
.qr-placeholder span { display: grid; width: 74px; height: 74px; place-items: center; border: 3px solid var(--ink); background: var(--lime); color: var(--ink); font: 900 1.5rem/1 var(--display); }
.wechat-number { display: block; margin-top: 18px; font: 900 1.25rem/1 var(--display); }
.service-panel > p { color: var(--muted); }
.chat-log { display: grid; gap: 9px; max-height: 230px; overflow: auto; margin-top: 18px; padding: 5px 0; }
.chat-msg { max-width: 88%; padding: 10px 12px; font-size: .85rem; }
.chat-msg--agent { border-left: 4px solid var(--orange); background: var(--paper-deep); }
.chat-msg--user { justify-self: end; border-right: 4px solid var(--lime); background: var(--ink); color: var(--paper); }
.chat-disclaimer { margin-top: 4px !important; margin-bottom: 10px !important; color: var(--orange-dark) !important; font-size: .76rem; font-weight: 800; }
.quick-questions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.quick-questions button { border: 1px solid var(--ink); border-radius: 0; padding: 7px 9px; background: transparent; color: var(--ink); font-size: .75rem; }
.quick-questions button:hover { background: var(--lime); }
.chat-form { display: grid !important; grid-template-columns: 1fr auto; gap: 0 !important; padding: 20px 0 !important; }
.chat-form input { min-width: 0; border-right: 0; }
.chat-form .btn { padding: 9px 12px; }

@media (max-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: 0; }
  .process-step:nth-child(-n+2) { border-bottom: 1px solid #607067; }
  .form-shell { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 78px 0 54px; }
  .hero h1 { font-size: clamp(3.55rem, 17vw, 6.5rem); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .service-grid, .process-grid { grid-template-columns: 1fr; }
  .process-step, .process-step:nth-child(2) { border-right: 0; border-bottom: 1px solid #607067; }
  .process-step:last-child { border-bottom: 0; }
  .cta-band { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .query-box { grid-template-columns: 1fr; }
  .query-box input { border-right: 0; border-bottom: 2px solid var(--ink); }
}

.mobile-contact-bar { display: none; }
.contact-copy-status { position: fixed; z-index: 65; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 18px; max-width: 480px; margin: 0 auto; padding: 14px 18px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: var(--shadow); font-size: .9rem; }
@media (min-width: 768px) {
  .service-rail .rail-phone { min-height: 110px; }
  .service-rail .rail-phone span { writing-mode: vertical-rl; font-size: .75rem; letter-spacing: .08em; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .service-rail { top: auto; right: 0; bottom: 0; left: 0; grid-template-columns: repeat(5, 1fr); width: 100%; transform: none; border-width: 2px 0 0; box-shadow: 0 -4px 0 var(--ink); }
  .service-rail button, .service-rail a { min-width: 0; padding: 8px 3px; border-right: 1px solid var(--ink); border-bottom: 0; }
  .service-rail button:last-child { border-right: 0; }
  .service-rail .rail-phone { min-height: 57px; background: var(--ink); color: var(--lime); border-inline: 2px solid var(--ink); transform: translateY(-8px); }
  .service-rail .rail-phone .icon { width: 24px; height: 24px; }
  .service-rail .rail-top { position: fixed; right: 16px; bottom: 70px; min-width: 44px; width: 44px; height: 44px; padding: 8px; border: 2px solid var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--ink); }
  .service-rail .rail-top span { display: none; }
  .service-panel { top: auto; right: 0; bottom: 61px; width: 100%; max-height: calc(100vh - 80px); transform: translateY(25px); }
  .service-panel.is-open { transform: translateY(0); }
  .service-rail { display: none; }
  .mobile-contact-bar { position: fixed; z-index: 40; bottom: 0; right: 0; left: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-top: 2px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); background: var(--ink); }
  .mobile-contact-bar a, .mobile-contact-bar button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 0; min-height: 64px; border: 0; border-right: 1px solid var(--ink); border-radius: 0; padding: 8px 4px; background: var(--cream); color: var(--ink); font-size: .8rem; font-weight: 800; }
  .mobile-contact-bar a:first-child { background: var(--ink); color: var(--lime); }
  .mobile-contact-bar a:last-child { background: var(--orange); border-right: 0; }
  .mobile-contact-bar .icon { width: 22px; height: 22px; }
}

/* 轻量卡片与柔和层次，沿用后台登录页的工作台语言 */
.hero { background: linear-gradient(135deg, #dceee6 0%, #eef7f2 62%, #d2e9df 100%); color: var(--ink); }
.hero::before { background: repeating-linear-gradient(135deg, transparent 0 17px, rgba(29,128,107,.07) 17px 20px); }
.hero h1 em { color: #1d806b; }
.hero-lede { color: #566b62; }
.hero-note { border-top-color: #1d806b; }
.hero-note strong { color: #1d806b; }
.hero-note span { color: #566b62; }
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #d8ebe2; }
.ticker-track span::before { color: #d46439; }
.stat-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { border-right-color: var(--line); }
.stat span { color: var(--muted); }
.service-card, .feature-panel, .national-search-form, .national-search-result { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.service-card { min-height: 230px; background: #fff; }
.service-card:nth-child(2n), .service-card:nth-child(3n) { background: #f7fbf8; }
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.service-card .card-num { color: #1d806b; }
.service-card h3, .feature-panel h3 { text-transform: none; }
.service-card p, .service-card:nth-child(2n) p, .service-card:nth-child(3n) p { color: var(--muted); }
.card-arrow { border: 1px solid var(--line); border-radius: 9px; color: #1d806b; }
.route-list { border-top-color: var(--line); }
.route-item { border-bottom-color: var(--line); }
.route-item svg { color: #1d806b; }
.process-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step { border-right-color: #547267; }
.process-step b { color: #e99573; }
.cta-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.form-shell, .route-table, .data-bar, .side-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.form-intro { background: #17352d; }
.form-fields { background: #fff; }
.field input, .field select, .field textarea, .query-box, .query-box input { border-color: var(--line); border-radius: 9px; background: #f8fbf9; }
.route-table { overflow: hidden; }
.route-table th { background: #17352d; }
.service-rail { border: 1px solid var(--line); border-radius: 12px 0 0 12px; background: #fff; box-shadow: 0 8px 24px rgba(24,70,54,.12); }
.service-rail button, .service-rail a { border-bottom-color: var(--line); color: #36705e; }
.service-rail button:hover, .service-rail button:focus-visible, .service-rail a:hover, .service-rail a:focus-visible { background: #d8ebe2; }
.service-panel { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.panel-head { background: #17352d; border-bottom: 2px solid #d46439; }
.service-panel input, .service-panel select, .service-panel textarea { border: 1px solid var(--line); border-radius: 9px; background: #f8fbf9; }
.panel-result { border-left-color: #1d806b; background: #eaf1ed; }
.chat-msg--agent { border-left-color: #d46439; background: #eaf1ed; }
.chat-msg--user { border-right-color: #1d806b; background: #17352d; }
.mobile-contact-bar { background: #17352d; }
.mobile-contact-bar a, .mobile-contact-bar button { background: #fff; color: var(--ink); }
.mobile-contact-bar a:first-child { background: #17352d; color: #cfe8dc; }
.mobile-contact-bar a:last-child { background: #d46439; }