/* Corporate visual layer — aligned with the Zhongzao main site. */
:root {
  --paper: #020711;
  --white: #07172a;
  --ink: #eef7ff;
  --muted: #8da4ba;
  --line: rgba(117, 188, 255, 0.17);
  --red: #55dcff;
  --red-dark: #2d7dff;
  --night: #030b17;
  --panel: #08182c;
  --panel-2: #0b1f38;
  --blue: #2d7dff;
  --cyan: #55dcff;
  --gold: #efb95f;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  --serif: var(--font);
  --margin: clamp(24px, 5vw, 84px);
  color-scheme: dark;
}

html {
  overflow-x: clip;
  background: var(--paper);
  scrollbar-color: var(--blue) var(--paper);
}

body {
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 18%, rgba(45, 125, 255, 0.12), transparent 24%),
    radial-gradient(circle at 91% 44%, rgba(85, 220, 255, 0.07), transparent 23%),
    linear-gradient(180deg, #020711 0%, #04101f 54%, #020711 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(91, 154, 229, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 154, 229, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

::selection { color: #00101c; background: var(--cyan); }
.serif { color: #9deeff; font-family: var(--font); font-weight: 560; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--cyan);
}
.skip { color: #00101c; background: var(--cyan); }

/* Header and the official corporate mark — intentionally unboxed. */
.header {
  height: 88px;
  padding: 0 max(var(--margin), calc((100vw - 1440px) / 2));
  gap: 28px;
  color: var(--ink);
  background: rgba(2, 7, 17, 0.96);
  border: 0;
  isolation: isolate;
}
.header::after {
  position: absolute;
  right: max(var(--margin), calc((100vw - 1440px) / 2));
  bottom: 0;
  left: max(var(--margin), calc((100vw - 1440px) / 2));
  height: 1px;
  background: linear-gradient(90deg, rgba(85, 220, 255, 0.48), rgba(91, 154, 229, 0.08) 35%, rgba(91, 154, 229, 0.08) 72%, rgba(239, 185, 95, 0.36));
  content: "";
  pointer-events: none;
}
.brand { min-width: 0; gap: 12px; flex: 0 1 auto; }
.brand-seal {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  color: inherit;
  background: none;
  filter: none;
}
.brand-seal::before, .brand-seal::after { display: none; }
.brand-seal img {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(54, 145, 255, 0.32));
}
.brand-cn { min-width: 0; font-size: 0; letter-spacing: 0; line-height: 1; }
.brand-cn strong, .brand-cn small { display: block; white-space: nowrap; }
.brand-cn strong { font-size: 14px; line-height: 1.25; letter-spacing: .045em; }
.brand-cn small {
  margin-top: 5px;
  color: #6e849b;
  font: 7px/1 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .14em;
}
.desktop-nav { margin: 0 0 0 auto; gap: 32px; }
.desktop-nav a { padding: 34px 0 31px; color: rgba(233, 244, 255, .74); letter-spacing: .06em; }
.desktop-nav a::after {
  right: 50%;
  bottom: 21px;
  left: 50%;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transition: right .18s ease, left .18s ease;
}
.desktop-nav a:hover, .desktop-nav a.current { color: #fff; }
.desktop-nav a:hover::after, .desktop-nav a.current::after { right: 0; left: 0; }
.nav-contact {
  min-height: 44px;
  padding: 0;
  gap: 12px;
  color: #dcedfa;
  border: 0;
}
.nav-contact { background-image: linear-gradient(90deg, var(--cyan), rgba(85,220,255,.04)); background-position: 0 100%; background-repeat: no-repeat; background-size: calc(100% - 31px) 1px; }
.nav-contact span { color: var(--cyan); font-size: 18px; }
.menu-toggle { color: #d9efff; }
#mobile-nav {
  top: 100%;
  padding: 14px var(--margin) 24px;
  color: var(--ink);
  background: #030b17;
  border-bottom-color: var(--line);
}
#mobile-nav a { position: relative; padding-left: 14px; border-bottom-color: var(--line); }
#mobile-nav a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 20px;
  background: repeating-linear-gradient(180deg, var(--cyan) 0 3px, transparent 3px 7px);
  content: "";
  opacity: .62;
  transform: translateY(-50%);
}

/* Hero */
.hero {
  position: relative;
  z-index: 0;
  padding-top: 48px;
  isolation: isolate;
}
.hero::before {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  left: 20%;
  height: 610px;
  background:
    linear-gradient(90deg, #020711 0%, rgba(2,7,17,.82) 27%, rgba(2,7,17,.2) 76%, #020711 100%),
    linear-gradient(180deg, rgba(2,7,17,.12) 0%, rgba(2,7,17,.62) 70%, #020711 100%),
    url("assets/hero.webp") center 38% / cover no-repeat;
  content: "";
  opacity: .86;
}
.hero::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -8%;
  left: 33%;
  height: 570px;
  background-image:
    linear-gradient(rgba(85, 220, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 220, 255, .055) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 52px 52px;
  content: "";
  opacity: .52;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 82%, transparent);
  animation: grid-drift 18s linear infinite;
}
.hero-top { color: #aac2d7; }
.hero-top p { color: #d6efff; font: 10px/1 Arial, sans-serif; letter-spacing: .18em; }
.hero-top p::before { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.hero-top > span { color: #7f9ab2; }
.hero-title-row { margin-top: 35px; }
.hero h1 {
  color: #f3f8ff;
  font-size: clamp(62px, 8.1vw, 132px);
  line-height: 1.23;
  font-weight: 650;
  letter-spacing: -.055em;
  text-shadow: 0 8px 42px rgba(0, 0, 0, .42);
}
.hero h1 .serif { letter-spacing: -.065em; }
.hero-arrow { color: var(--cyan); text-shadow: 0 0 28px rgba(85, 220, 255, .28); }
.hero-sub { margin-top: 22px; }
.hero-sub > p { color: #d4e3ef; }
.under-link { color: #d7e8f5; border-color: rgba(131, 198, 242, .5); }
.under-link > span { color: var(--cyan); }
.under-link:hover { color: var(--cyan); }

.hero-stage { position: relative; grid-template-columns: 37% 63%; min-height: 365px; }
.hero-stage::before {
  position: absolute;
  z-index: 4;
  top: -1px;
  left: 0;
  width: 104px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 10px rgba(85, 220, 255, .4);
  content: "";
}
.capacity-panel {
  position: relative;
  overflow: hidden;
  color: #effaff;
  background:
    linear-gradient(rgba(85, 220, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 220, 255, .05) 1px, transparent 1px),
    linear-gradient(145deg, rgba(17, 77, 142, .9), rgba(5, 20, 38, .98) 72%);
  background-size: 34px 34px, 34px 34px, auto;
  border: 1px solid rgba(85, 220, 255, .24);
  border-right: 0;
}
.capacity-panel::after {
  position: absolute;
  right: -42px;
  bottom: -66px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(85, 220, 255, .23);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(45,125,255,.035), 0 0 0 54px rgba(45,125,255,.025);
  content: "";
}
.capacity-top, .capacity-bottom, .capacity-value { position: relative; z-index: 1; }
.capacity-cross { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.capacity-value > span {
  color: #fff;
  background: linear-gradient(110deg, #fff 0%, #a9efff 62%, #68c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.capacity-bottom { border-color: rgba(148, 218, 255, .24); }
.capacity-bottom a { color: #9deeff; }
.floorplan {
  position: relative;
  overflow: hidden;
  color: #dcecff;
  background:
    radial-gradient(circle at 78% 18%, rgba(45,125,255,.14), transparent 30%),
    linear-gradient(135deg, rgba(8, 27, 50, .97), rgba(3, 12, 25, .99));
  border: 1px solid rgba(117,188,255,.19);
}
.floorplan::after {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(85,220,255,.72), transparent);
  box-shadow: 0 0 16px rgba(85,220,255,.32);
  content: "";
  pointer-events: none;
  animation: scan-line 6s ease-in-out infinite;
}
.plan-top, .plan-bottom { position: relative; z-index: 3; color: #7894ad; }
.plan-top { color: #c2dded; }
.plan-svg { position: relative; z-index: 1; }
.plan-svg [stroke="#c6c4bd"] { stroke: rgba(91, 164, 216, .35); }
.plan-svg [stroke="#282923"] { stroke: #58b4ee; }
.plan-svg [stroke="#73756c"] { stroke: #6f98b6; }
.plan-svg [stroke="#949b86"], .plan-svg [stroke="#a2ae92"] { stroke: #55dcff; }
.plan-svg [fill="#ae3526"] { fill: #55dcff; }
.plan-svg [fill="#5d6058"], .plan-svg [fill="#777b71"] { fill: #91aec2; }
.plan-svg [fill="url(#hatch)"] { opacity: .5; }
.hero-foot { color: #7892a9; border-color: var(--line); }
.hero-foot a { color: #bdd8eb; }
.hero-foot a > span { color: var(--cyan); }

/* Content sections */
.section { position: relative; }
.section::before {
  position: absolute;
  top: 0;
  right: var(--margin);
  left: var(--margin);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(85,220,255,.11), transparent);
  content: "";
}
.section-rail { border-color: var(--line); }
.section-id { color: #c4dcee; }
.section-id::before { width: 20px; height: 1px; display: inline-block; margin: 0 10px 3px 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); content: ""; }
.rail-en { color: #6f8ca5; }
h2 { color: #eef7ff; }
.company-name, .about-copy > p, .heading-pair p, .delivery-intro > p, .faq-list details > p { color: var(--muted); }
.about-copy .lead { color: #dbeaf5; }
.facts-line { border-color: var(--line); }
.facts-line > div { position: relative; min-height: 72px; padding-left: 17px; }
.facts-line > div::before { position: absolute; top: 2px; bottom: 0; left: 0; width: 1px; background: linear-gradient(180deg, var(--cyan), rgba(85,220,255,.05)); content: ""; }
.facts-line span { color: #718ca5; }
.facts-line strong { color: #d5e8f4; }

.service-list { border-color: rgba(135,202,246,.36); }
.service-detail { border-color: var(--line); }
.service-detail summary { position: relative; }
.service-detail summary::before { position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent); content: ""; transition: width .3s ease; }
.service-detail[open] summary::before, .service-detail summary:hover::before { width: 42%; }
.service-index { color: var(--cyan); font-family: Arial, sans-serif; text-shadow: 0 0 14px rgba(85,220,255,.2); }
.service-summary, .service-description p, .service-scope dt { color: var(--muted); }
.service-detail h3, .service-scope dd { color: #dcecf7; }
.service-detail summary:hover h3 { color: #9eeaff; }
.plus { color: var(--cyan); }
.service-scope > div { border-color: var(--line); }

.scene-section {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 18%, rgba(45,125,255,.13), transparent 26%),
    linear-gradient(180deg, #061224, #030b17);
  overflow: hidden;
}
.scene-section::before {
  position: absolute;
  right: -140px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(85,220,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(45,125,255,.018), 0 0 0 140px rgba(45,125,255,.012);
  content: "";
}
.scene-section .section-rail, .scene-workbench, .scene-selector, .scene-tab { border-color: var(--line); }
.scene-section .rail-en, .scene-heading p { color: #839fb7; }
.scene-selector { position: relative; z-index: 1; }
.scene-tab { color: #6f8aa2; }
.scene-tab.active, .scene-tab:hover { color: #f1f8ff; }
.scene-tab.active > span:last-child { color: var(--cyan); text-shadow: 0 0 12px rgba(85,220,255,.28); }
.scene-tab.active strong { color: #a4efff; }
.scene-selector > p { color: #68839b; }
.scene-graphic {
  min-height: 280px;
  background:
    linear-gradient(rgba(85,220,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,220,255,.045) 1px, transparent 1px),
    linear-gradient(145deg, rgba(7,27,50,.98), rgba(3,12,25,.98));
  background-size: 34px 34px, 34px 34px, auto;
  border-color: rgba(117,188,255,.23);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.scene-code { color: #80dff7; }
.task-zone { color: #c5ddeb; background: rgba(8,31,57,.76); border-color: #4d9dcc; }
.task-zone > span, .task-reset b { color: #8db2c9; background: #071a30; }
.task-zone i { border-color: #55dcff; }
.zone-one i { background: rgba(45,125,255,.14); }
.task-path { color: #9deeff; }
.task-reset { color: #7296ad; border-color: rgba(85,220,255,.32); }
.graphic-note, .scene-info p, .scene-spec dt { color: #7793aa; }
.scene-info h3, .scene-spec dd { color: #dcecf7; }
.inverse { border-color: rgba(85,220,255,.55); }
.inverse span, .inverse:hover { color: var(--cyan); }

.delivery-list li, .boundary, .faq-list, .faq-list details { border-color: var(--line); }
.delivery-note { border-color: var(--cyan); }
.delivery-note > span, .delivery-list p, .delivery-list small { color: var(--muted); }
.delivery-list li > span, .boundary p, .faq-list summary > span { color: var(--cyan); }
.delivery-list h3, .boundary > div > span, .faq-list summary { color: #dcebf6; }
.delivery-list li { position: relative; transition: padding-left .22s ease, background .22s ease; }
.delivery-list li:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(45,125,255,.08), transparent 70%); }

/* Contact and form */
.contact-section {
  position: relative;
  padding-top: 78px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 28%, rgba(45,125,255,.13), transparent 25%),
    linear-gradient(135deg, #07172a, #030b17 68%);
  overflow: hidden;
}
.contact-section::before {
  position: absolute;
  right: -8%;
  bottom: -22%;
  width: 55%;
  height: 88%;
  background-image:
    linear-gradient(rgba(85,220,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,220,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  transform: perspective(700px) rotateX(57deg) rotateZ(-9deg);
  transform-origin: center bottom;
  pointer-events: none;
}
.contact-section .section-rail, .contact-company { border-color: var(--line); }
.contact-copy > p, .contact-company > span, .form-topline span:last-child { color: #829eb5; }
.contact-company p { color: #d8eaf6; }
.form-topline { color: #dcecf8; border-color: rgba(117,188,255,.3); }
.contact-form-box { position: relative; padding-left: 34px; border-left: 1px solid rgba(85,220,255,.19); }
.contact-form-box::before { position: absolute; top: 0; left: -1px; width: 1px; height: 72px; background: var(--cyan); box-shadow: 0 0 10px rgba(85,220,255,.5); content: ""; }
.contact-form-box label, .form-scenes legend { color: #a9c4d6; }
.form-scenes legend > span, .contact-form-box .consent, .form-mode { color: #6f8aa0; }
.contact-form-box input:not([type=checkbox]), .contact-form-box select, .contact-form-box textarea {
  color: #edf8ff;
  background: transparent;
  border-color: rgba(117,188,255,.32);
  outline-color: var(--cyan);
}
.contact-form-box input::placeholder, .contact-form-box textarea::placeholder { color: #607b91; }
.contact-form-box select { color-scheme: dark; }
.choice-chips span { color: #829eb2; border-color: rgba(117,188,255,.26); background: rgba(5,20,38,.28); }
.choice-chips input:checked + span { color: #00111f; background: var(--cyan); border-color: var(--cyan); }
.consent input { accent-color: var(--cyan); }
.button {
  color: #00111f;
  font-weight: 650;
  background: linear-gradient(90deg, #55dcff, #78e8ff);
  box-shadow: 0 12px 32px rgba(39,142,196,.16);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.button:hover { color: #fff; background: linear-gradient(90deg, #2d7dff, #55dcff); }
.form-message { color: #9cecc7; background: rgba(32,123,88,.18); border: 1px solid rgba(87,224,172,.24); }
.form-message.error { color: #ffb3a8; background: rgba(148,54,43,.18); border-color: rgba(255,128,111,.22); }

/* Footer and overlays */
.footer { color: var(--ink); background: #020711; }
.footer-logo { display: inline-flex; align-items: center; gap: 11px; letter-spacing: 0; }
.footer-logo > img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 13px rgba(54,145,255,.25)); }
.footer-logo > span, .footer-logo strong, .footer-logo small { display: block; }
.footer-logo strong { color: #cfe2f0; font-size: 13px; letter-spacing: .08em; }
.footer-logo small { margin-top: 5px; color: #688199; font: 7px/1 Arial, sans-serif; letter-spacing: .14em; }
.footer-main > p { color: #9bb9cc; font-family: var(--font); }
.back-top { color: var(--cyan); }
.footer-bottom { color: #647f96; border-color: var(--line); }
.modal-backdrop { background: rgba(1,5,12,.86); }
.modal { color: var(--ink); background: #07172a; border: 1px solid rgba(117,188,255,.24); box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.modal-label, .modal-close { color: var(--cyan); }
.modal-label { border-color: var(--line); }
.modal p { color: var(--muted); }
.modal pre { color: #b9daed; background: #030c18; border: 1px solid var(--line); }
.toast { color: #00111f; background: var(--cyan); }
.noscript-notice { color: #c5dbea; background: #07172a; border-color: var(--line); }

/* Clear entrance motion: opacity + geometry only, never blur. */
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .72s cubic-bezier(.2,.72,.25,1), transform .72s cubic-bezier(.2,.72,.25,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ready .reveal.reveal-left { transform: translate3d(-32px, 0, 0); }
.motion-ready .reveal.reveal-right { transform: translate3d(32px, 0, 0); }
.motion-ready .reveal.reveal-scale { transform: translate3d(0, 22px, 0) scale(.985); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

@keyframes grid-drift { to { background-position: 52px 52px; } }
@keyframes scan-line { 0%, 100% { top: 9%; opacity: .18; } 50% { top: 88%; opacity: .78; } }

@media (max-width: 1180px) {
  .brand-cn small { display: none; }
  .brand-cn strong { max-width: 235px; overflow: hidden; text-overflow: ellipsis; }
  .desktop-nav { gap: 22px; }
}

@media (max-width: 980px) {
  .header { height: 76px; }
  .desktop-nav { display: none; }
  .nav-contact { margin-left: auto; }
  .menu-toggle { display: block; }
  .brand-seal { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-seal img { width: 38px; height: 38px; }
  .hero { padding-top: 38px; }
}

@media (max-width: 640px) {
  :root { --margin: 20px; }
  .header { height: 68px; padding-inline: 18px; background: #020711; }
  .header::after { right: 18px; left: 18px; }
  .brand { gap: 9px; }
  .brand-seal { width: 36px; height: 36px; flex-basis: 36px; }
  .brand-seal img { width: 36px; height: 36px; }
  .brand-cn strong { max-width: 205px; font-size: 11px; text-overflow: ellipsis; }
  .nav-contact { display: none; }
  .hero { padding-top: 27px; }
  .hero::before { left: 0; height: 510px; opacity: .62; }
  .hero::after { right: -30%; left: 14%; height: 500px; background-size: 42px 42px; }
  .hero-top p { font-size: 8px; }
  .hero h1 { font-size: clamp(52px, 14vw, 79px); line-height: 1.2; letter-spacing: -.045em; }
  .hero h1 .serif { letter-spacing: -.055em; }
  .hero-arrow { font-size: 55px; }
  .hero-stage { grid-template-columns: 1fr; }
  .capacity-panel { border-right: 1px solid rgba(85,220,255,.24); border-bottom: 0; }
  .floorplan { min-height: 220px; }
  .section::before { right: var(--margin); left: var(--margin); }
  .facts-line > div { min-height: 58px; }
  .scene-tab.active { border-bottom-color: var(--cyan); }
  .scene-graphic { min-height: 224px; }
  .contact-form-box { padding-left: 0; border-left: 0; }
  .contact-form-box::before { display: none; }
  .contact-section::before { width: 100%; opacity: .72; }
  .footer-logo > img { width: 36px; height: 36px; }
  .footer-main > p { color: #86a5b9; }
  .motion-ready .reveal.reveal-left, .motion-ready .reveal.reveal-right { transform: translate3d(0, 24px, 0); }
  .motion-ready .reveal.is-visible { transform: translate3d(0,0,0) scale(1); }
}

@media (max-width: 380px) {
  .brand-cn strong { max-width: 175px; font-size: 10px; }
  .menu-toggle { width: 33px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after, .floorplan::after { animation: none; }
  .motion-ready .reveal, .motion-ready .reveal.reveal-left,
  .motion-ready .reveal.reveal-right, .motion-ready .reveal.reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .motion-ready .reveal { opacity: 1; transform: none; }
}