@charset "UTF-8";

/* 颜色按用途分层，品牌金仅用于主要操作和少量状态提示。 */
:root {
  --bg: #111110;
  --panel: #191918;
  --surface-hover: #242422;
  --text: #f1f0eb;
  --muted: #b5b3aa;
  --subtle: #97958c;
  --accent: #d6bd8a;
  --accent-hover: #e4cfa7;
  --accent-ink: #292319;
  --line: #ffffff24;
  --paper: #eeede7;
  --paper-text: #292a26;
  --paper-muted: #62635a;
}

.site-header {
  background: linear-gradient(180deg, #111110eb, #11111045);
  border-bottom-color: #ffffff12;
}
.brand small, .desktop-nav, .portal-link { color: var(--muted); }
.desktop-nav, .portal-link { font-size: 14px; }
.brand strong { letter-spacing: .17em; }
.button { border-radius: 5px; font-size: 15px; font-weight: 500; }
.button:hover { transform: translateY(-2px); }
.button-accent { background: var(--accent); color: var(--accent-ink); }
.button-accent:hover { background: var(--accent-hover); box-shadow: 0 5px 20px #0002; }
.button-small { font-size: 13px; }
.header-actions .button-accent { background: #ffffff05; border-color: #d6bd8a66; color: var(--accent); }
.header-actions .button-accent:hover { background: #d6bd8a14; }
.mobile-nav { background: var(--panel); }
.menu-toggle { min-height: 40px; }

/* 恢复海洋与航线的颜色；光晕限于主视觉，左侧遮罩继续保护文字。 */
.hero-art img {
  filter: saturate(1.65) brightness(1.2) contrast(1.06);
  object-position: center;
  animation: none;
}
/* 航线与底图共用裁切和浮动容器，手机与桌面均保持相同坐标。 */
.earth-scene {
  position: absolute;
  inset: 0;
  transform-origin: 72% 48%;
  animation: earth-float 22s ease-in-out infinite alternate;
}
.earth-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.route-flow {
  fill: none;
  stroke: #ffe3a1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 98;
  filter: drop-shadow(0 0 4px #ffc65a);
  animation: route-travel var(--route-duration) linear var(--route-delay) infinite;
}
.hero-outside .earth-scene, .hero-outside .route-flow { animation-play-state: paused; }
@keyframes route-travel {
  0% { stroke-dashoffset: 0; opacity: 0; }
  8%, 85% { opacity: .95; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .earth-routes { display: none; } }
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 74% 43%, #ffce7838 0%, transparent 34%),
    radial-gradient(ellipse at 62% 23%, #73b9dd20 0%, transparent 30%);
  mix-blend-mode: screen;
  animation: earth-glow 8s ease-in-out infinite;
}
.hero-outside .hero-art::after { animation-play-state: paused; }
@keyframes earth-float {
  from { transform: scale(1) translate3d(0, 0, 0) rotate(-.2deg); }
  to { transform: scale(1.055) translate3d(-.6%, .6%, 0) rotate(.35deg); }
}
@keyframes earth-glow {
  0%, 100% { opacity: .25; transform: scale(.98); }
  50% { opacity: .7; transform: scale(1.025); }
}
.hero-shade {
  background: linear-gradient(90deg, #111110 0%, #111110f5 12%, #111110d6 29%, #11111042 55%, #11111005 82%),
    linear-gradient(0deg, #111110 0%, transparent 23%, transparent 78%, #11111045 100%),
    linear-gradient(125deg, transparent 48%, #ae93611a 100%);
}
.hero h1 { font-size: clamp(46px, 4.65vw, 68px); font-weight: 500; line-height: 1.29; letter-spacing: -.035em; }
.hero .accent-text { color: inherit; }
.hero-eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .12em; }
.signal { box-shadow: 0 0 12px #d6bd8a40; }
.hero-description { font-size: 16px; color: var(--muted); line-height: 1.95; max-width: 520px; }
.hero-actions { gap: 30px; margin-top: 36px; }
.hero-actions .text-button { font-size: 14px; color: var(--text); }
.hero-note { color: var(--subtle); font-size: 11px; }
.hairline { background: #d6bd8a70; }
.globe-caption { border-color: #d6bd8a65; background: #11111080; color: var(--text); }
.globe-caption small, .hero-bottom, .motion-toggle { color: var(--muted); }
.scroll-track, .motion-toggle { border-color: #ffffff50; }
.business-strip { background: #161615; }
.strip-grid small { color: var(--subtle); font-size: 10px; }
.strip-grid strong { font-size: 20px; font-weight: 500; }
.strip-grid .icon { color: var(--muted); }

.section-top .eyebrow { font-size: 11px; color: var(--accent); }
.section-meta { color: var(--subtle); font-size: 12px; }
.section-heading h2 { font-weight: 450; letter-spacing: -.025em; }
.section-heading p { font-size: 15px; max-width: 400px; }
.muted { color: var(--muted); }
.service-workspace { border-radius: 8px; min-height: 438px; }
.service-tabs { background: #151514; }
.service-tabs button { transition: background .25s, box-shadow .25s; }
.service-tabs strong { font-size: 21px; font-weight: 500; }
.service-tabs small, .service-tabs button>span:first-child, .service-tabs .icon { color: var(--subtle); }
.service-tabs small { font-size: 10px; }
.service-tabs [aria-selected="true"] { background: #262520; color: var(--text); box-shadow: inset 3px 0 var(--accent); }
.service-tabs [aria-selected="true"] small, .service-tabs [aria-selected="true"]>span:first-child,
.service-tabs [aria-selected="true"] .icon { color: var(--accent); }
.service-tabs [aria-selected="false"]:hover { background: var(--surface-hover); }
.service-panel { background: var(--panel); padding: 34px 44px; }
.service-label { color: var(--subtle); font-size: 11px; }
.service-number { color: #ffffff07; }
.service-panel h3 { font-size: 34px; margin-top: 30px; }
.service-panel>p { color: var(--muted); font-size: 15px; }
.service-tags li { font-size: 12px; border-color: var(--line); color: #c8c6bd; }
.service-panel-bottom>span { color: var(--subtle); font-size: 12px; }
.service-panel-bottom .text-button { font-size: 13px; }

/* 流程区用中性浅色形成阅读节奏，避免主色铺满整段内容。 */
.flow-section { background: var(--paper); color: var(--paper-text); }
.flow-section .eyebrow, .flow-section .section-meta, .flow-section .section-heading p { color: var(--paper-muted); }
.flow-steps { border-color: #292a2630; }
.flow-steps button { color: var(--paper-muted); }
.flow-steps button::after { background: var(--paper-text); }
.flow-steps [aria-selected="true"] { color: var(--paper-text); }
.flow-steps button>span { border-color: #292a2660; }
.flow-steps [aria-selected="true"]>span { background: var(--paper-text); color: var(--paper); border-color: var(--paper-text); }
.flow-steps small { font-size: 10px; }
.flow-index { color: var(--paper-muted); font-size: 11px; }
.flow-index span { color: var(--paper-text); }
.flow-panel>div>p:last-child { color: var(--paper-muted); font-size: 14px; }
.flow-detail { border-color: #292a2624; }
.flow-detail>span { color: var(--paper-muted); font-size: 12px; }
.flow-detail p { font-size: 14px; }
.flow-next { color: var(--paper-text); border-color: #292a2650; }
.flow-next:hover { background: #deddd5; }
.flow-section :focus-visible { outline-color: #65502a; }

#digital { padding-block: 88px; }
#digital .section-heading h2 { font-size: 36px; }
#digital .section-heading p { font-size: 14px; }
.digital-links>a { padding-block: 26px; }
.digital-links small { color: var(--subtle); font-size: 11px; }
.digital-links h3 { font-size: 23px; }
.digital-links p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.round-link { color: var(--muted); border-color: #ffffff40; }
.digital-links>a:hover { background: var(--panel); }
.digital-links>a:hover .round-link { color: var(--text); background: #ffffff12; border-color: #ffffff70; }
.system-note { color: var(--subtle); font-size: 12px; line-height: 1.8; }

.contact-section { background: var(--panel); color: var(--text); border: 1px solid #d6bd8a38; border-radius: 8px; padding: 46px 46px 28px; }
.contact-top .eyebrow { color: var(--accent); font-size: 11px; }
.location-label, .contact-bottom>span, .contact-phone>span { color: var(--muted); font-size: 12px; }
.contact-main { margin-block: 36px; }
.contact-main h2 { font-weight: 450; font-size: clamp(36px, 4vw, 56px); }
.contact-button { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.contact-button:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-3px); }
.contact-bottom { border-color: var(--line); }
.contact-phone>a { color: var(--accent); font-size: 26px; }
.contact-section :focus-visible { outline-color: var(--accent); }
.footer-brand small, .site-footer>div a, .back-top { color: var(--subtle); }
.site-footer>div a { font-size: 11px; }

dialog { background: var(--panel); border-color: #d6bd8a4d; }
dialog::backdrop { background: #080807c9; }
.dialog-head .eyebrow { color: var(--accent); }
.dialog-close { border-color: #ffffff38; color: var(--text); }
.dialog-close:hover { background: var(--surface-hover); }
.dialog-intro, dialog label, .dialog-phone>span:first-child, #copy-status { color: var(--muted); }
.dialog-intro { font-size: 13px; }
dialog label>span { color: var(--subtle); }
dialog select, dialog textarea { background: #111110; border-color: #ffffff40; color: var(--text); }
dialog textarea::placeholder { color: var(--subtle); }
.dialog-phone { background: #24221d; border-color: #d6bd8a38; }
.portal-link { display: flex; border: 0; padding: 10px 0; background: none; }
.portal-link:hover { color: var(--accent); }
.mobile-nav button[data-staff] { display: block; width: 100%; padding: 17px 0; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; font-size: 15px; }
#contact { margin-top: 88px; }
#staff-dialog { width: min(560px, calc(100% - 32px)); }
#staff-dialog .dialog-intro { margin-bottom: 24px; }
.staff-links { border-top: 1px solid var(--line); }
.staff-links>a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 8px; border-bottom: 1px solid var(--line); transition: background .2s; }
.staff-links>a:hover { background: var(--surface-hover); }
.staff-links small { font: 10px monospace; letter-spacing: .12em; color: var(--accent); }
.staff-links h3 { margin: 8px 0; font-size: 22px; font-weight: 500; }
.staff-links p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.staff-links .round-link { flex: none; }
#staff-dialog .system-note { font-size: 12px; line-height: 1.8; margin-bottom: 0; }
@keyframes signal-breathe { 50% { opacity: .6; box-shadow: 0 0 3px #d6bd8a25; } }

@media (max-width: 1199px) {
  .desktop-nav { gap: 22px; font-size: 13px; }
  .hero h1 { font-size: 58px; }
  .service-tabs strong { font-size: 18px; }
  .service-tabs small { font-size: 9px; }
  .service-panel { padding: 30px; }
  .digital-links>a>div { grid-template-columns: 140px 205px 1fr; }
}
@media (max-width: 800px) {
  .portal-link { display: none; }
  .hero h1 { font-size: 52px; }
  .hero-shade { background: linear-gradient(90deg, #111110 0%, #111110cc 20%, #11111040 80%), linear-gradient(0deg, #111110 0%, transparent 45%); }
  .section-heading { align-items: flex-start; }
  .section-heading p { font-size: 13px; max-width: 250px; }
  .service-tabs strong { font-size: 15px; }
  .service-tabs [aria-selected="true"] { box-shadow: inset 0 -3px var(--accent); }
  .service-panel { min-height: 425px; }
  .service-panel-bottom>span { font-size: 11px; }
  .digital-links>a>div { grid-template-columns: 1fr 1fr; }
  .digital-links p { font-size: 12px; }
  #digital { padding-block: 72px; }
  .contact-section { padding: 34px; }
}
@media (max-width: 540px) {
  #contact { margin-top: 64px; }
  .staff-links>a { padding: 18px 0; }
  .staff-links h3 { font-size: 20px; }
  .staff-links p { font-size: 11px; }
  .header-actions .button-small { min-height: 38px; }
  .hero { height: 800px; }
  .hero h1 { font-size: clamp(31px, 8.7vw, 45px); line-height: 1.35; letter-spacing: -.03em; }
  .hero-eyebrow { font-size: 10px; }
  .hero-description { font-size: 13px; max-width: 355px; }
  .hero-actions { gap: 18px; margin-top: 27px; }
  .hero-actions .text-button { font-size: 12px; }
  .hero-note { font-size: 10px; }
  .hero-art { top: 300px; }
  .hero-shade { background: linear-gradient(180deg, #111110 0%, #111110 32%, #111110eb 44%, #11111020 66%, #11111020 83%, #111110 100%); }
  .globe-caption { background: #11111090; }
  .strip-grid small { font-size: 8px; }
  .strip-grid strong { font-size: 13px; }
  .section-top .eyebrow, .section-meta { font-size: 9px; }
  .section-heading h2 { font-size: 31px; }
  .section-heading p { font-size: 14px; max-width: none; }
  .service-tabs strong { font-size: 12px; }
  .service-panel { padding: 24px; min-height: 460px; }
  .service-panel h3 { font-size: 28px; }
  .service-panel>p { font-size: 14px; }
  .service-label { font-size: 10px; }
  .service-tags li { font-size: 11px; }
  .service-panel-bottom>span { font-size: 11px; }
  .service-panel-bottom .text-button { font-size: 12px; }
  .flow-steps small { font-size: 8px; }
  .flow-panel { min-height: 375px; }
  .flow-panel>div>p:last-child, .flow-detail p { font-size: 13px; }
  #digital { padding-block: 66px; }
  #digital .section-heading h2 { font-size: 30px; }
  .digital-links>a>div { grid-template-columns: 1fr; width: calc(100% - 60px); }
  .digital-links small { font-size: 10px; }
  .digital-links h3 { font-size: 22px; }
  .digital-links p, .system-note { font-size: 12px; }
  .contact-section { padding: 28px 24px 24px; }
  .contact-main h2 { font-size: 32px; }
  .contact-main { margin-block: 28px; }
  .contact-button:hover { transform: none; }
  .contact-top .eyebrow { font-size: 9px; }
  .location-label { font-size: 10px; }
  .contact-bottom>span { font-size: 11px; }
  .site-footer>div a { font-size: 10px; }
  .dialog-intro { font-size: 12px; }
}
@media (max-width: 360px) {
  .hero-description { font-size: 12px; }
  .hero-actions { gap: 12px; }
  .hero-actions>.button { padding-inline: 12px; gap: 10px; }
  .hero-actions .text-button { font-size: 11px; }
  .section-top .eyebrow, .section-meta { font-size: 8px; }
}

/* 咨询联系方式和提交反馈延续首页的暖金配色。 */
#consult-dialog { width: min(620px, calc(100% - 32px)); }
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
#consult-form input:not([type="checkbox"]) { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: #111110; color: var(--text); font: inherit; font-size: 14px; }
#consult-form input:focus, #consult-form textarea:focus, #consult-form select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.consult-phone { display: inline-block; color: var(--accent); font-size: 13px; margin: 2px 0 8px; }
.field-hint { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 10px 0; }
#consult-form .consent-label { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0; font-size: 12px; line-height: 1.7; cursor: pointer; }
.consent-label input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); }
.consent-label span { color: var(--muted); }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-error { color: #ffb5a8; line-height: 1.7; font-size: 13px; }
#submit-consult:disabled { opacity: .6; cursor: wait; }
#consult-result { padding: 30px 0 12px; }
#consult-result h3 { font-size: 28px; margin: 18px 0; }
#consult-result>p { color: var(--muted); line-height: 1.8; }
#consult-result .button { margin-top: 20px; }
.success-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 26px; }
.staff-admin-link { display: flex; justify-content: space-between; color: var(--accent); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; font-size: 13px; }
@media(max-width:540px) { .consult-grid { grid-template-columns: 1fr; gap: 14px; } #consult-form input:not([type="checkbox"]) { font-size: 16px; } #consult-dialog { padding: 24px 20px; } }