/* 2026 蓝色科技主题：只调整视觉，不改页面交互与数据选择器。 */

body { background: #f9fbff; }

.site-header {
  border-bottom: 1px solid rgba(138, 186, 255, .28);
  background: rgba(249, 252, 255, .94);
  box-shadow: 0 8px 28px rgba(8, 26, 66, .05);
}
.brand__name { color: var(--c-brand-900); }
.nav__link { border-radius: 10px; }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-brand-500); }

.btn { border-radius: 12px; font-weight: var(--fw-semi); }
.btn--primary {
  color: var(--c-white);
  background: linear-gradient(115deg, #1749b1 0%, #3279ec 65%, #4aa8f4 100%);
  box-shadow: 0 10px 24px rgba(32, 94, 208, .24);
}
.btn--primary:hover:not(:disabled) {
  color: var(--c-white);
  background: linear-gradient(115deg, #123c98 0%, #2868d5 65%, #3395e3 100%);
  box-shadow: 0 16px 32px rgba(32, 94, 208, .3);
}
.btn--accent {
  color: #082551;
  background: linear-gradient(115deg, #8cdeff, #58c0fb);
  box-shadow: 0 10px 24px rgba(61, 188, 244, .2);
}
.btn--accent:hover:not(:disabled) {
  color: #082551;
  background: linear-gradient(115deg, #b3ebff, #74ceff);
}
.btn--outline { border-color: var(--c-brand-200); background: rgba(255,255,255,.72); }
.btn--outline:hover:not(:disabled) { background: var(--c-brand-50); }

.section--subtle {
  background: linear-gradient(180deg, #f4f8ff 0%, #f7fbff 100%);
}
.section-head h2, .delivery-story__copy h2 { letter-spacing: -.03em; }
.eyebrow { color: var(--c-brand-600); }

/* 首屏：深蓝渐变与轻量 Canvas 粒子地球。 */
.hero {
  isolation: isolate;
  color: var(--c-white);
  padding-block: clamp(68px, 8vw, 116px) clamp(82px, 9vw, 124px);
  background:
    radial-gradient(680px 500px at 78% 48%, rgba(59, 149, 249, .32), transparent 72%),
    radial-gradient(620px 440px at 5% 92%, rgba(41, 107, 224, .24), transparent 70%),
    linear-gradient(123deg, #061535 0%, #0a2662 48%, #0e4eaa 100%);
}
.hero::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(169, 215, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 215, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 95%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(58vw, 900px);
  aspect-ratio: 1;
  right: -18%;
  top: -48%;
  border-radius: 50%;
  border: 1px solid rgba(153, 211, 255, .11);
  box-shadow: 0 0 0 78px rgba(162, 215, 255, .025), 0 0 0 156px rgba(162, 215, 255, .018);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__copy { position: relative; z-index: 2; }
.hero__title {
  color: var(--c-white);
  max-width: 13ch;
  font-size: clamp(2.8rem, 2.1rem + 2.6vw, 4.7rem);
  line-height: 1.13;
  letter-spacing: -.045em;
}
.hero__title em {
  color: #8bdfff;
  background: linear-gradient(105deg, #a4eaff, #59b5ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub { color: rgba(237, 247, 255, .78); max-width: 47ch; }
.hero__note { color: rgba(226, 242, 255, .62); }
.hero .badge--brand { color: #d6edff; border-color: rgba(180, 220, 255, .26); background: rgba(255,255,255,.09); }
.hero .badge--gold { color: #ffe4a9; border-color: rgba(233, 192, 110, .42); background: rgba(213, 163, 68, .13); }
.hero .btn--primary { background: linear-gradient(110deg, #81d5ff, #54aaff); color: #082551; }
.hero .btn--primary:hover:not(:disabled) { background: linear-gradient(110deg, #ade7ff, #79bfff); color: #082551; }
.hero .btn--outline { color: var(--c-white); border-color: rgba(225, 242, 255, .48); background: rgba(255,255,255,.06); }
.hero .btn--outline:hover:not(:disabled) { color: var(--c-white); border-color: #a4eaff; background: rgba(255,255,255,.14); }

.orbital-stage {
  position: relative;
  width: 100%;
  max-width: 610px;
  margin-inline: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(178, 223, 255, .2);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(79, 185, 255, .16), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 75px rgba(2, 13, 45, .3);
}
.orbital-stage::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(161, 220, 255, .18);
  border-radius: 50%;
}
.orbital-stage__sphere {
  position: absolute;
  top: 50%; left: 50%;
  width: 69%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, rgba(100, 205, 255, .22), rgba(22, 81, 172, .25) 47%, rgba(3, 20, 58, .75) 75%);
  box-shadow: inset -28px -23px 58px rgba(2, 12, 40, .5), inset 6px 5px 35px rgba(155, 224, 255, .2), 0 0 66px rgba(69, 173, 255, .28);
}
.orbital-stage__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 90%; height: 52%;
  border: 1px solid rgba(152, 215, 255, .25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-27deg);
  box-shadow: 0 0 25px rgba(77, 179, 255, .07);
}
.orbital-stage__ring--inner { width: 78%; height: 38%; transform: translate(-50%, -50%) rotate(34deg); opacity: .65; }
.orbital-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbital-stage__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid rgba(199, 233, 255, .28);
  border-radius: 12px;
  color: #f2faff;
  background: rgba(8, 35, 88, .7);
  box-shadow: 0 14px 35px rgba(2, 13, 45, .23);
  backdrop-filter: blur(12px);
  font-size: 12px;
  animation: chip-drift 6s ease-in-out infinite;
}
.orbital-stage__chip span { color: #72d6ff; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.orbital-stage__chip strong { font-weight: 600; }
.orbital-stage__chip--top { top: 12%; left: 6%; }
.orbital-stage__chip--right { top: 43%; right: 3%; animation-delay: -2s; }
.orbital-stage__chip--bottom { bottom: 17%; left: 8%; animation-delay: -4s; }
.orbital-stage__caption {
  position: absolute;
  bottom: 5%; left: 50%;
  display: flex; align-items: center; gap: 9px;
  transform: translateX(-50%);
  color: rgba(226, 244, 255, .72);
  font-size: 11px;
  white-space: nowrap;
  letter-spacing: .09em;
}
.orbital-stage__caption i { width: 7px; height: 7px; border-radius: 50%; background: #6cdbff; box-shadow: 0 0 0 5px rgba(108, 219, 255, .12); }
@keyframes chip-drift { 50% { transform: translateY(-7px); } }

/* 首屏后的路径导航：把三个最常用入口放在同一层。 */
.route-section { padding-block: clamp(60px, 7vw, 94px); background: linear-gradient(180deg, #f2f7ff, #fff); }
.route-section__head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 32px; }
.route-section__head h2 { margin: 0; letter-spacing: -.03em; }
.route-section__head > p { max-width: 35ch; color: var(--c-text-muted); font-size: var(--fs-sm); }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.route-card {
  position: relative;
  min-height: 218px;
  display: flex; flex-direction: column;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #dce9fb;
  border-radius: 22px;
  background: linear-gradient(150deg, #fff, #f7faff);
  box-shadow: 0 12px 32px rgba(16, 51, 118, .07);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.route-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #2471e8, #8cdeff); }
.route-card:hover { transform: translateY(-7px); border-color: #9fc9fb; box-shadow: 0 22px 46px rgba(16, 51, 118, .14); }
.route-card__index { color: var(--c-brand-600); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.route-card h3 { margin: 20px 0 10px; color: var(--c-brand-900); font-size: 1.26rem; }
.route-card p { max-width: 31ch; margin: 0; color: var(--c-ink-600); font-size: var(--fs-sm); }
.route-card__arrow { position: absolute; right: 25px; top: 25px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #e8f2ff; color: var(--c-brand-600); font-size: 19px; transition: transform .28s var(--ease); }
.route-card:hover .route-card__arrow { transform: translate(3px, -3px); }

/* 深蓝信任条、卡片层次和内容分隔。 */
.trust-strip { background: linear-gradient(95deg, #071a42, #123b83); }
.trust-strip__inner { background: transparent; }
.trust-strip__lead, .trust-strip__item, .trust-strip__link { background: transparent; }
.trust-strip__link { color: #a9e8ff; }
.trust-seal { color: #ffe2a3 !important; }
.scene-row, .product-card, .article-card, .card, .qualification-showcase {
  border-color: #dce8f8;
  border-radius: 22px;
  box-shadow: var(--sh-1);
}
.scene-row:hover, .product-card:hover, .article-card:hover, .card:hover { border-color: #a7caf8; box-shadow: var(--sh-2); }
.scene-visual { background: linear-gradient(140deg, #e5f2ff, #f7fbff); }
.scene-visual--knowledge { background: linear-gradient(140deg, #e9efff, #e6f7ff); }
.scene-visual--data { background: linear-gradient(140deg, #e5f6ff, #f3f8ff); }
.artifact-board { background: linear-gradient(145deg, #071a42, #16459a 65%, #0f74ac); }
.case-feature-section { background: linear-gradient(120deg, #071a42, #0c3278 66%, #0d4c99); }
.delivery-section { background: linear-gradient(rgba(55, 132, 235, .045) 1px, transparent 1px) 0 0 / 42px 42px, #fbfdff; }
.delivery-section .step { border-color: #dce8f8; border-radius: 18px; box-shadow: var(--sh-1); }
.delivery-section .step::before { background: linear-gradient(135deg, #1749b1, #53a8fa); box-shadow: 0 8px 18px rgba(32, 94, 208, .2); }
.qualification-showcase { background: linear-gradient(140deg, #fff, #edf6ff); }

/* 内页保持同一视觉语言，同时提高表单和后台信息层级。 */
.page-head {
  padding-block: clamp(48px, 5vw, 72px);
  border-bottom: 0;
  background: radial-gradient(600px 250px at 90% 20%, rgba(123, 210, 255, .24), transparent 70%), linear-gradient(112deg, #071a42, #174caa);
}
.page-head .eyebrow { color: #a9e8ff; }
.page-head__title { color: var(--c-white); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); letter-spacing: -.025em; }
.page-head__desc { color: rgba(234, 247, 255, .76); font-size: 1rem; }
.contact-details, .form-card, .auth-card, .panel {
  border-color: #dce8f8;
  border-radius: 22px;
  box-shadow: var(--sh-1);
}
.contact-details, .form-card { border-top: 3px solid var(--c-brand-500); }
.form-card__title { color: var(--c-brand-900); font-size: 1.45rem; }
.info-item__icon { border-radius: 12px; background: linear-gradient(145deg, #e2f2ff, #eff7ff); color: var(--c-brand-600); }
.form-input, .form-select, .form-textarea { border-color: #cadbf0; border-radius: 11px; background: #fbfdff; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--c-brand-500); background: var(--c-white); }
.auth-wrap { background: radial-gradient(650px 380px at 88% 10%, #dceeff, transparent 70%), linear-gradient(135deg, #f1f7ff, #fbfdff); }
.auth-aside { max-width: none; padding: clamp(30px, 4vw, 50px); border: 1px solid rgba(203, 230, 255, .2); border-radius: 26px; color: var(--c-white); background: linear-gradient(138deg, #071a42, #1551ae); box-shadow: var(--sh-3); }
.auth-aside__title { color: var(--c-white); }
.auth-aside .lead, .auth-aside .feature-list li { color: rgba(238, 248, 255, .82); }
.auth-aside .alert--info { border-color: rgba(180, 225, 255, .22); background: rgba(255,255,255,.1); color: #e4f6ff; }
.auth-card { box-shadow: var(--sh-3); }
.tabs { border-radius: 12px; background: #eaf2ff; }
.tab { border-radius: 9px; }
.tab[aria-selected="true"] { color: var(--c-brand-700); box-shadow: 0 3px 10px rgba(16, 51, 118, .1); }
.side-nav__link { border-radius: 11px; }
.side-nav__link.is-active { background: linear-gradient(110deg, #1749b1, #3279ec); box-shadow: 0 7px 18px rgba(32, 94, 208, .17); }
.panel__head { background: linear-gradient(100deg, #f5f9ff, #edf5ff); }
.mini-stat { border-color: #dce8f8; border-radius: 14px; box-shadow: var(--sh-1); }
.site-footer { background: linear-gradient(135deg, #061534, #0b2e6b); }

@media (max-width: 1023px) {
  .hero__inner { gap: 48px; }
  .hero__title { max-width: none; }
  .hero__visual { width: 100%; max-width: 580px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .hero { padding-block: 62px 72px; }
  .hero__title { font-size: clamp(2.35rem, 7.5vw, 3.4rem); }
  .hero__sub { font-size: 1rem; }
  .hero__cta .btn { width: 100%; }
  .orbital-stage { border-radius: 23px; }
  .orbital-stage__chip { padding: 8px 10px; font-size: 10px; }
  .orbital-stage__chip--right { right: 1%; }
  .orbital-stage__caption { bottom: 4%; font-size: 9px; }
  .route-section__head { display: block; }
  .route-section__head > p { margin-top: 14px; }
  .route-grid { grid-template-columns: 1fr; }
  .route-card { min-height: 172px; padding: 24px; }
  .tabs .tab { padding-inline: 4px; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 430px) {
  .orbital-stage__chip--top { top: 8%; left: 3%; }
  .orbital-stage__chip--bottom { bottom: 12%; left: 3%; }
  .orbital-stage__chip--right { top: 45%; }
}