/* ==========================================================================
   优雅的宇宙 / Thematic Contexts — IMMERSIVE LAYER (wow.css)
   Layered on top of the editorial design system. Adds a rendered deep-space
   masthead, instrument-grade HUD, capability star map and physical micro-
   interactions. No copy, data or feature is changed or invented here.
   Progressive enhancement: every effect degrades cleanly.
   ========================================================================== */

:root{
  --wow-void:#050F16;
  --wow-deep:#071A24;
  --wow-mist:#EDF6F7;
  --wow-mist-2:#A9C2C9;
  --wow-mist-3:#6F8E98;
  --wow-cyan:#5FD3DA;
  --wow-blue:#4EA6C4;
  --wow-amber:#E9A45C;
  --wow-ember:#E0654A;
  --wow-line:rgba(159,205,214,.16);
  --wow-ease:cubic-bezier(.22,1,.36,1);
  --wow-layer-1:#6FD1D8;
  --wow-layer-2:#4EA6C4;
  --wow-layer-3:#2C7C9B;
  --wow-layer-4:#C0432F;
}

html{overflow-x:clip}
body{overflow-x:clip}
.grain{opacity:.16;mix-blend-mode:soft-light}

/* --------------------------------------------------------------------------
   1. Deep-space stage : WebGL canvas is measured to the masthead height
   -------------------------------------------------------------------------- */
main#top{position:relative}
.cosmos{
  position:absolute;top:0;left:0;right:0;height:var(--cosmos-h,100vh);
  z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 90% at 72% 32%,#123A4B 0%,#0A2230 40%,#050F16 82%);
}
.cosmos canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cosmos-grid{
  position:absolute;inset:0;opacity:.38;
  background-image:
    linear-gradient(to right,rgba(159,205,214,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(159,205,214,.07) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(90% 80% at 55% 42%,#000 10%,transparent 88%);
  mask-image:radial-gradient(90% 80% at 55% 42%,#000 10%,transparent 88%);
}
.cosmos-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(85% 75% at 50% 42%,transparent 34%,rgba(3,10,15,.52) 100%),
    linear-gradient(to bottom,rgba(5,15,22,.40) 0%,transparent 16%,transparent 76%,rgba(18,58,75,.48) 100%);
}
.cosmos-horizon{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,rgba(95,211,218,.5) 50%,transparent 96%);
  box-shadow:0 0 26px rgba(95,211,218,.45);
}
/* a clean, deliberate cut into the paper section rather than a muddy fade */
#faculties{
  background:linear-gradient(to bottom,rgba(226,238,242,.52),rgba(247,249,247,0) 140px);
}
.mast{position:relative;z-index:1}
.sec{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   2. Masthead : inverted, luminous, cinematic
   -------------------------------------------------------------------------- */
.mast{padding-bottom:clamp(64px,7vw,104px)}
.mast .mast-meta{color:var(--wow-mist-2);border-bottom-color:var(--wow-line)}
.mast .mast-meta b{color:var(--wow-mist)}
.mast .mast-meta .dot{color:var(--wow-ember);text-shadow:0 0 12px rgba(224,101,74,.8)}
.mast-grid{padding-block:clamp(52px,7vw,96px)}

.mast .mast-copy h1{
  font-size:clamp(40px,5.1vw + 20px,84px);line-height:1.24;letter-spacing:-.012em;
  color:#F4FBFC;max-width:15em;text-wrap:balance;
  text-shadow:0 2px 34px rgba(95,211,218,.16),0 18px 60px rgba(0,0,0,.36);
}
.mast .mast-copy h1 mark{
  background:linear-gradient(transparent 70%,rgba(95,211,218,.24) 70%);
  color:#DFF9FB;font-weight:700;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-shadow:0 0 28px rgba(95,211,218,.5);
}
.mast .mast-copy .lede{
  color:var(--wow-mist-2);font-size:var(--fs-md);line-height:1.95;max-width:40em;
  text-shadow:0 1px 12px rgba(0,0,0,.3);
}
.mast .mast-trust{color:var(--wow-mist-3)}
.mast .mast-trust::before{background:var(--wow-ember);box-shadow:0 0 12px rgba(224,101,74,.7)}

.mast .mast-cta .btn{
  transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0);
  transition:background .3s var(--wow-ease),border-color .3s var(--wow-ease),
             box-shadow .3s var(--wow-ease),transform .34s var(--wow-ease);
}
.mast .mast-cta .btn:hover{
  transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0) translateY(-3px);
}
.mast .mast-cta .btn-primary{
  background:linear-gradient(135deg,#E2674B 0%,#BE3B2B 100%);
  border-color:rgba(255,196,168,.32);color:#FFF7F2;
  box-shadow:0 12px 38px rgba(224,101,74,.32),inset 0 1px 0 rgba(255,255,255,.24);
}
.mast .mast-cta .btn-primary:hover{
  background:linear-gradient(135deg,#EE7356 0%,#C84532 100%);
  box-shadow:0 18px 52px rgba(224,101,74,.46),inset 0 1px 0 rgba(255,255,255,.3);
}
.mast .mast-cta .btn-ghost{
  color:var(--wow-mist);border-color:rgba(169,194,201,.4);
  background:rgba(255,255,255,.045);
}
.mast .mast-cta .btn-ghost:hover{
  background:rgba(255,255,255,.1);border-color:rgba(95,211,218,.6);color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}
.mast .mast-cta .btn:focus-visible{box-shadow:0 0 0 4px rgba(95,211,218,.5)}
.nav-cta .btn{
  transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0);
  transition:background .3s var(--wow-ease),box-shadow .3s var(--wow-ease),transform .34s var(--wow-ease);
}
.nav-cta .btn:hover{
  transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0) translateY(-2px);
}

/* lunar disc : orbital rings + atmospheric bloom */
.mast .mast-moon{animation:float 9s ease-in-out infinite}
.mast .disc{
  box-shadow:
    0 0 0 1px rgba(169,194,201,.34),
    0 0 0 10px rgba(8,28,38,.72),
    0 0 60px 14px rgba(95,211,218,.17),
    0 0 140px 40px rgba(18,58,75,.34),
    0 44px 96px rgba(0,0,0,.6);
}
.mast .mast-moon:hover .disc{
  box-shadow:
    0 0 0 1px rgba(95,211,218,.6),
    0 0 0 10px rgba(8,28,38,.78),
    0 0 80px 20px rgba(95,211,218,.26),
    0 0 160px 48px rgba(18,58,75,.4),
    0 50px 104px rgba(0,0,0,.64);
}
.mast .disc img{filter:contrast(1.08) brightness(.94) saturate(.9)}
.mast .disc::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),
             inset -22px -32px 64px rgba(2,10,16,.62),
             inset 14px 16px 46px rgba(95,211,218,.1);
}
.mast .mast-moon::before{
  inset:-26px;border-color:rgba(169,194,201,.26);animation:spin 64s linear infinite;
}
.mast .mast-moon::after{
  content:"";position:absolute;inset:-52px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(95,211,218,.13);
  border-left-color:rgba(224,101,74,.62);border-bottom-color:rgba(95,211,218,.32);
  transform:rotate(-22deg);animation:spin 38s linear infinite reverse;
  box-shadow:0 0 34px rgba(95,211,218,.06);
}
.mast .seal{
  background:linear-gradient(140deg,#C8452F,#9E2E23);color:#FFF1EA;
  box-shadow:0 10px 30px rgba(192,67,47,.5),0 0 26px rgba(224,101,74,.28);
}
.mast .mast-moon figcaption{color:var(--wow-mist-3)}
.mast .vert{color:var(--wow-mist-2)}

/* ledger : instrument glass */
.mast .ledger{
  border-block:1px solid var(--wow-line);border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.mast .ledger .cell{border-left:1px solid var(--wow-line)}
.mast .ledger .cell:hover{background:rgba(95,211,218,.075)}
.mast .ledger .num-v{
  color:var(--wow-mist);text-shadow:0 0 30px rgba(95,211,218,.38);
}
.mast .ledger .num-v .unit{color:var(--wow-ember)}
.mast .ledger dt{color:var(--wow-mist-2)}

/* staged entrance (transform-free for the floating moon) */
.mast .mast-copy h1,.mast .mast-copy .lede,.mast .mast-cta,
.mast .mast-trust,.mast .ledger{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--wow-ease),transform .95s var(--wow-ease);
}
.mast .mast-moon{opacity:0;filter:blur(16px);
  transition:opacity 1.35s var(--wow-ease),filter 1.35s var(--wow-ease)}
html.wow-ready .mast .mast-copy h1,
html.wow-ready .mast .mast-copy .lede,
html.wow-ready .mast .mast-cta,
html.wow-ready .mast .mast-trust,
html.wow-ready .mast .ledger{opacity:1;transform:none}
html.wow-ready .mast .mast-moon{opacity:1;filter:none}
html.wow-ready .mast .mast-copy h1{transition-delay:.06s}
html.wow-ready .mast .mast-copy .lede{transition-delay:.18s}
html.wow-ready .mast .mast-cta{transition-delay:.3s}
html.wow-ready .mast .mast-trust{transition-delay:.4s}
html.wow-ready .mast .mast-moon{transition-delay:.12s}
html.wow-ready .mast .ledger{transition-delay:.46s}

/* --------------------------------------------------------------------------
   3. Chrome in dark state : nav, dock, progress
   -------------------------------------------------------------------------- */
.nav.on-dark,.nav.on-dark.scrolled{
  background:rgba(6,20,28,.74);border-bottom-color:var(--wow-line);box-shadow:none;
}
.nav.on-dark .brand-zh{color:#F4FBFC}
.nav.on-dark .brand-en{color:var(--wow-mist-2)}
.nav.on-dark .nav-links a{color:var(--wow-mist-2)}
.nav.on-dark .nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav.on-dark .nav-links a.active{color:var(--wow-cyan)}
.nav.on-dark .nav-links a.active::after{background:var(--wow-cyan)}
.nav.on-dark .nav-qq{color:var(--wow-mist-2)}
.nav.on-dark .nav-cta .btn-primary{
  background:linear-gradient(135deg,#E2674B,#BE3B2B);color:#FFF7F2;
  box-shadow:0 6px 22px rgba(224,101,74,.28);
}
.nav.on-dark .burger span{background:var(--wow-mist)}
.nav.on-dark .burger:hover{background:rgba(255,255,255,.1)}
.nav.on-dark .mobile-menu{
  background:rgba(6,20,28,.97);border-bottom-color:var(--wow-line);
}
.nav.on-dark .mobile-menu a{color:var(--wow-mist);border-bottom-color:var(--wow-line)}
.nav.on-dark .mobile-menu .mm-contact{color:var(--wow-mist-2)}

html.wow-dark .dock{
  background:rgba(8,26,35,.78);border-color:var(--wow-line);
  box-shadow:0 18px 60px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
}
html.wow-dark .dock-loc,html.wow-dark .dock-price{color:var(--wow-mist-2)}
html.wow-dark .dock-links a{color:var(--wow-mist-2)}
html.wow-dark .dock-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
html.wow-dark .dock-links a.active{color:#071A24;background:var(--wow-cyan);font-weight:700}
html.wow-dark .dock-cta{
  background:linear-gradient(135deg,#E2674B,#BE3B2B);color:#FFF7F2;
}
html.wow-dark .to-top{
  background:rgba(8,26,35,.8);border-color:var(--wow-line);color:var(--wow-mist);
}
.read-progress i{
  background:linear-gradient(90deg,var(--wow-cyan),var(--wow-blue) 55%,var(--wow-ember));
  box-shadow:0 0 12px rgba(95,211,218,.6);
}

/* --------------------------------------------------------------------------
   4. Instrument HUD (decorative, hidden from assistive tech)
   -------------------------------------------------------------------------- */
.wow-hud{
  position:fixed;right:var(--gutter);bottom:22px;z-index:100;
  display:flex;align-items:center;gap:10px;pointer-events:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  color:var(--wow-mist-3);opacity:.85;
  transition:opacity .5s var(--wow-ease);
}
.wow-hud.gone{opacity:0}
.wh-dot{width:6px;height:6px;border-radius:50%;background:var(--wow-cyan);
  box-shadow:0 0 12px var(--wow-cyan);animation:hudPulse 2.4s ease-in-out infinite}
@keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.35}}
.wh-sep{width:18px;height:1px;background:var(--wow-line)}
html:not(.wow-dark) .wow-hud{color:var(--fg-3)}
html:not(.wow-dark) .wh-dot{background:var(--seal);box-shadow:0 0 10px rgba(173,56,42,.6)}

.wow-rail{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:100;
  display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--fg-3);
}
.wr-line{position:relative;width:1px;height:210px;background:var(--line-strong);overflow:hidden}
.wr-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform:scaleY(0);
  transform-origin:0 0;background:linear-gradient(to bottom,var(--wow-cyan),var(--wow-ember));
  box-shadow:0 0 10px rgba(95,211,218,.6)}
.wr-ticks{position:absolute;inset:0}
.wr-ticks i{position:absolute;left:-2px;width:5px;height:1px;background:var(--line-strong);
  transition:background .3s,box-shadow .3s}
.wr-ticks i.on{background:var(--wow-ember);box-shadow:0 0 8px rgba(224,101,74,.8)}
html.wow-dark .wow-rail{color:var(--wow-mist-3)}
html.wow-dark .wr-line,html.wow-dark .wr-ticks i{background:var(--wow-line)}

.wow-cursor{
  position:fixed;top:0;left:0;width:460px;height:460px;border-radius:50%;
  pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(circle,rgba(95,211,218,.11),rgba(78,166,196,.05) 42%,transparent 68%);
  transform:translate3d(-50%,-50%,0);
  transition:opacity .5s var(--wow-ease);
}
html.wow-dark .wow-cursor.on{opacity:1}
html:not(.wow-dark) .wow-cursor.on{opacity:.42}

/* --------------------------------------------------------------------------
   5. Section orchestration : oversized section numerals + stagger
   -------------------------------------------------------------------------- */
.sec-head::before{
  content:var(--sec-no,"");position:absolute;right:2px;top:-.52em;z-index:0;
  font-family:var(--font-mono);font-size:clamp(64px,7.4vw,116px);font-weight:700;
  line-height:1;letter-spacing:-.08em;color:var(--primary);opacity:.052;
  pointer-events:none;user-select:none;
}
.sec-head > *{position:relative;z-index:1}
.reveal{transition-delay:var(--reveal-delay,0ms)}

/* --------------------------------------------------------------------------
   6. Capability star map : driven by the real list in the DOM
   -------------------------------------------------------------------------- */
.starmap{
  position:relative;height:clamp(300px,32vw,420px);margin-bottom:56px;
  border:1px solid var(--line-strong);border-radius:var(--radius-lg,16px);
  background:
    radial-gradient(80% 120% at 50% 50%,rgba(226,238,242,.7),transparent 78%),
    linear-gradient(180deg,#FFFFFF,#F4F8F6);
  overflow:hidden;
}
.starmap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(27,82,104,.2) .8px,transparent .8px);
  background-size:22px 22px;opacity:.55;
}
.starmap canvas{position:relative;display:block;width:100%;height:100%}
.starmap-legend{
  position:absolute;right:22px;top:18px;display:flex;flex-wrap:wrap;gap:8px 16px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--fg-2);
  pointer-events:none;
}
.starmap-legend span{display:inline-flex;align-items:center;gap:6px}
.starmap-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.starmap-hud{
  position:absolute;left:24px;bottom:20px;right:24px;pointer-events:none;
  border-left:2px solid var(--seal);padding-left:14px;
}
.starmap-hud .sm-kicker{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--fg-3);text-transform:uppercase;
}
.starmap-hud .sm-title{
  display:block;margin-top:6px;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(18px,1.6vw,24px);color:var(--fg-strong);line-height:1.3;
}
.starmap-hud .sm-note{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:64ch;margin-top:3px;font-size:var(--fs-sm);color:var(--fg-2);line-height:1.7;
}
.starmap-hud.focus{border-left-color:var(--wow-cyan)}

/* --------------------------------------------------------------------------
   7. Physical micro-interactions
   -------------------------------------------------------------------------- */
.letter.tilt,.rate-card.tilt{
  transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .4s var(--wow-ease),box-shadow .4s var(--wow-ease),border-color .4s;
}
.letter.tilt:hover{
  transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-6px);
}
.letter.tilt::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(300px circle at var(--glare-x,50%) var(--glare-y,50%),
             rgba(95,211,218,.16),transparent 62%);
  transition:opacity .4s var(--wow-ease);
}
.letter.tilt:hover::before{opacity:1}

.rate-card{position:relative;overflow:hidden}
.rate-card::after{
  content:"";position:absolute;left:0;right:0;top:-24%;height:18%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(95,211,218,.075),transparent);
  animation:wowScan 9s linear infinite;
}
@keyframes wowScan{to{top:118%}}
.rate-table tr.row:hover .cell-price{
  color:var(--seal);text-shadow:0 0 20px rgba(173,56,42,.22);
}
.rate-table tr.row:hover .pname b{color:var(--primary-strong)}

.band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 24%,#fff 99%,transparent),
    radial-gradient(1px 1px at 28% 68%,#fff 99%,transparent),
    radial-gradient(1.5px 1.5px at 47% 18%,#fff 99%,transparent),
    radial-gradient(1px 1px at 63% 78%,#fff 99%,transparent),
    radial-gradient(1px 1px at 82% 36%,#fff 99%,transparent),
    radial-gradient(1.5px 1.5px at 92% 72%,#fff 99%,transparent);
}
.band blockquote{text-shadow:0 4px 40px rgba(0,0,0,.6)}
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 80% at 82% 0%,rgba(95,211,218,.1),transparent 70%),
    radial-gradient(46% 70% at 8% 100%,rgba(224,101,74,.07),transparent 72%);
}

/* --------------------------------------------------------------------------
   8. Responsive / motion / print
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .wow-rail{display:none}
  .starmap{height:340px}
}
@media (max-width:900px){
  .wow-hud,.wow-cursor{display:none}
  .mast{padding-bottom:120px}
  .mast .mast-copy h1{font-size:clamp(42px,7.2vw,60px)}
  .starmap{height:320px}
  .starmap-legend{right:16px;top:12px;gap:6px 12px}
  .starmap-hud{left:16px;bottom:14px}
  .rate-card::after{display:none}
}
@media (max-width:600px){
  .mast-grid{padding-block:40px}
  .mast .mast-moon::after{inset:-30px}
  .mast .mast-moon::before{inset:-18px}
  .mast .ledger{grid-template-columns:repeat(2,1fr)}
  .mast .ledger .cell{padding:16px}
  .mast .ledger .cell:first-child{padding-left:16px}
  .mast .ledger .cell:nth-child(3){border-left:0}
  .starmap{height:260px;margin-bottom:36px}
  .starmap-hud .sm-note{display:none}
  .sec-head::before{font-size:64px;opacity:.045}
  .cosmos-grid{background-size:56px 56px}
}
@media (prefers-reduced-motion:reduce){
  .cosmos-horizon,.wh-dot,.mast .mast-moon,.mast .mast-moon::before,
  .mast .mast-moon::after,.rate-card::after{animation:none!important}
  .mast .mast-copy h1,.mast .mast-copy .lede,.mast .mast-cta,
  .mast .mast-trust,.mast .ledger,.mast .mast-moon{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important;
  }
  .reveal{transition-delay:0ms!important}
  .wow-cursor{display:none}
  .letter.tilt,.letter.tilt:hover,.rate-card.tilt{transform:none!important}
}
@media print{
  .cosmos,.wow-hud,.wow-rail,.wow-cursor,.starmap,
  .mast .mast-moon::after,.rate-card::after,.band::before,.foot::before{display:none!important}
  .mast .mast-copy h1,.mast .mast-copy .lede,.mast .mast-trust,
  .mast .ledger .num-v,.mast .ledger dt,.mast .mast-meta{color:#11222A!important;text-shadow:none!important}
  .mast .mast-cta .btn-primary{background:#1B5268!important;color:#fff!important}
  .sec-head::before{display:none}
}