.page-suihua {
  --sh-night: #071b21;
  --sh-deep: #0c2d2d;
  --sh-green: #166a52;
  --sh-mint: #50e2ae;
  --sh-cyan: #61d7e3;
  --sh-gold: #f2b84b;
  --sh-cream: #f7f3e9;
  --sh-paper: #eef4ef;
  --sh-ink: #102527;
  --sh-muted: #607274;
  --sh-line: rgba(16, 52, 52, .15);
  background: var(--sh-paper);
  color: var(--sh-ink);
}
.page-suihua .city-eyebrow { color: var(--sh-green); }
.page-suihua .reveal { transform: translateY(24px); transition-duration: .68s; }
.page-suihua .reveal.is-visible { transform: none; }
.sh-hero { position: relative; min-height: 730px; overflow: hidden; background: var(--sh-night); color: #fff; }
.sh-hero-media,
.sh-hero-overlay { position: absolute; inset: 0; }
.sh-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-hero-overlay {
  background:
    linear-gradient(90deg, rgba(4, 21, 25, .94) 0%, rgba(4, 24, 26, .82) 46%, rgba(4, 23, 24, .28) 79%, rgba(4, 18, 20, .46) 100%),
    linear-gradient(0deg, rgba(4, 19, 23, .82), transparent 55%);
}
.sh-hero-overlay::after {
  position: absolute;
  right: 6%;
  bottom: 15%;
  width: min(43vw, 610px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sh-cyan), transparent);
  box-shadow: 0 0 18px rgba(97, 215, 227, .78);
  content: "";
}
.sh-hero-shell { position: relative; min-height: 730px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(350px, .65fr); grid-template-rows: auto auto 1fr; column-gap: 72px; }
.sh-crumb { grid-column: 1 / -1; padding-top: 26px; color: rgba(255,255,255,.58); }
.sh-crumb strong { color: rgba(255,255,255,.9); }
.sh-route-label { grid-column: 1 / -1; align-self: start; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.68); font-size: 11px; letter-spacing: .18em; }
.sh-route-label b { color: var(--sh-mint); font-weight: 800; }
.sh-hero-copy { align-self: center; padding: 48px 0 70px; }
.sh-hero .city-eyebrow { color: var(--sh-cyan); }
.sh-hero h1 { max-width: 760px; margin: 0; font-size: clamp(51px, 5.3vw, 60px); line-height: 1.07; letter-spacing: -.055em; }
.sh-hero h1 span { display: block; color: var(--sh-mint); }
.sh-lead { max-width: 700px; margin: 27px 0 0; color: rgba(255,255,255,.77); font-size: 17px; line-height: 1.9; }
.sh-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.sh-hero-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 23px; border: 1px solid rgba(255,255,255,.32); text-decoration: none; font-size: 14px; font-weight: 850; }
.sh-hero-actions a:first-child { border-color: var(--sh-gold); background: var(--sh-gold); color: #1c2e2d; }
.sh-hero-actions a:hover { border-color: var(--sh-mint); }
.sh-boundary { max-width: 720px; margin: 18px 0 0; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.7; }
.sh-live-panel { align-self: center; min-width: 0; margin: 42px 0 70px; padding: 23px; border: 1px solid rgba(97,215,227,.34); background: rgba(3, 25, 27, .72); box-shadow: 0 30px 75px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.sh-live-head { display: grid; grid-template-columns: 14px 1fr; gap: 5px 11px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.sh-signal { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--sh-mint); box-shadow: 0 0 0 7px rgba(80,226,174,.09), 0 0 22px var(--sh-mint); animation: sh-pulse 2s ease-in-out infinite; }
.sh-live-head small { color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .2em; }
.sh-live-head strong { font-size: 16px; }
.sh-route-switch { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 25px 0; }
.sh-route-switch::before { position: absolute; top: 18px; left: 12%; right: 12%; height: 1px; background: rgba(97,215,227,.3); content: ""; }
.sh-route-switch button { position: relative; appearance: none; padding: 0; border: 0; background: none; color: rgba(255,255,255,.54); cursor: pointer; font: inherit; }
.sh-route-switch button i { position: relative; z-index: 1; display: grid; width: 37px; height: 37px; margin: 0 auto 10px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: #0b2a2d; font-style: normal; font-size: 10px; }
.sh-route-switch button span { font-size: 12px; }
.sh-route-switch button.is-active { color: #fff; }
.sh-route-switch button.is-active i { border-color: var(--sh-gold); background: var(--sh-gold); color: var(--sh-night); box-shadow: 0 0 22px rgba(242,184,75,.4); }
.sh-price-signal { display: grid; gap: 10px; padding: 17px; background: rgba(255,255,255,.07); }
.sh-price-signal span { display: flex; justify-content: space-between; align-items: baseline; color: rgba(255,255,255,.63); font-size: 12px; }
.sh-price-signal b { color: #fff; font-size: 18px; }
.sh-price-signal p { margin: 2px 0 0; color: rgba(255,255,255,.45); font-size: 11px; line-height: 1.65; }
@keyframes sh-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.sh-first-ad { background: #dfe9e1; }
.sh-first-ad .city-ad-inner,
.sh-final-ad .city-ad-inner { border-radius: 12px; }

.sh-line-section { overflow: hidden; background: var(--sh-cream); }
.sh-section-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); gap: 65px; align-items: end; margin-bottom: 54px; }
.sh-section-head h2,
.sh-matrix-head h2,
.sh-platform-head h2,
.sh-faq-head h2 { margin: 0; font-size: clamp(43px, 4.2vw, 47px); line-height: 1.1; letter-spacing: -.045em; }
.sh-section-head > p { margin: 0; color: var(--sh-muted); font-size: 15px; line-height: 1.85; }
.sh-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sh-track-line { position: absolute; top: 29px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--sh-green), var(--sh-cyan), var(--sh-gold)); }
.sh-track-line::before,
.sh-track-line::after,
.sh-track-line span { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border: 3px solid var(--sh-cream); border-radius: 50%; background: var(--sh-mint); box-shadow: 0 0 0 2px var(--sh-green); content: ""; }
.sh-track-line::before { left: 14%; }
.sh-track-line span { left: 50%; }
.sh-track-line::after { left: 86%; background: var(--sh-gold); }
.sh-station { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--sh-line); background: rgba(255,255,255,.72); box-shadow: 0 22px 60px rgba(19,62,52,.08); }
.sh-station > header { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; height: 59px; padding: 0 19px; background: var(--sh-deep); color: #fff; }
.sh-station > header b { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--sh-mint); border-radius: 50%; color: var(--sh-mint); font-size: 11px; }
.sh-station > header span { color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .15em; }
.sh-station > header i { color: var(--sh-gold); font-style: normal; font-size: 13px; font-weight: 850; }
.sh-station figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: #183b36; }
.sh-station figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sh-station:hover figure img { transform: scale(1.025); }
.sh-station figure figcaption { position: absolute; right: 11px; bottom: 11px; left: 11px; padding: 8px 10px; background: rgba(5, 25, 25, .76); color: #fff; font-size: 11px; backdrop-filter: blur(8px); }
.sh-station > div { padding: 26px; }
.sh-station h3 { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: -.025em; }
.sh-station > div > p { min-height: 150px; margin: 17px 0; color: var(--sh-muted); font-size: 14px; line-height: 1.85; }
.sh-station ul,
.sh-station ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sh-station li { padding: 9px 11px; border-left: 2px solid var(--sh-mint); background: #edf5ef; color: #3f5554; font-size: 12px; }
.sh-station ol li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; }
.sh-station ol li b { color: var(--sh-green); }
.sh-station nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sh-station nav > a { padding: 10px 12px; border: 1px solid var(--sh-line); background: #fff; color: var(--sh-green); text-decoration: none; font-size: 12px; font-weight: 800; }
.sh-product-links { display: grid !important; grid-template-columns: repeat(2, 1fr); }
.sh-product-links a { display: grid; gap: 4px; padding: 13px !important; }
.sh-product-links small { color: #879694; font-size: 9px; letter-spacing: .15em; }
.sh-product-links b { color: var(--sh-ink); font-size: 13px; }
.sh-product-links span { color: var(--sh-green); font-size: 10px; }

.sh-matrix-section { background: var(--sh-night); color: #fff; }
.sh-matrix-layout { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.25fr); gap: 75px; align-items: center; }
.sh-matrix-head .city-eyebrow { color: var(--sh-cyan); }
.sh-matrix-head p { margin: 24px 0; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.9; }
.sh-matrix-head a { display: inline-flex; padding-bottom: 5px; border-bottom: 1px solid var(--sh-mint); color: var(--sh-mint); text-decoration: none; font-size: 13px; }
.sh-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; border: 1px solid rgba(97,215,227,.3); background: rgba(255,255,255,.04); box-shadow: 0 25px 80px rgba(0,0,0,.28); }
.sh-matrix-axis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 4px; background: rgba(255,255,255,.1); }
.sh-matrix-axis span { padding: 10px 5px; background: #0d292d; color: rgba(255,255,255,.52); text-align: center; font-size: 10px; }
.sh-matrix button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; min-height: 84px; padding: 15px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; text-align: left; font: inherit; transition: border-color .2s ease, background .2s ease; }
.sh-matrix button b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: rgba(80,226,174,.12); color: var(--sh-mint); font-size: 11px; }
.sh-matrix button span { font-size: 13px; font-weight: 800; }
.sh-matrix button i { color: rgba(255,255,255,.43); font-style: normal; font-size: 10px; }
.sh-matrix button.is-active { border-color: var(--sh-gold); background: rgba(242,184,75,.1); }
.sh-matrix button.is-active b { background: var(--sh-gold); color: var(--sh-night); }
.sh-matrix output { grid-column: 1 / -1; display: block; min-height: 68px; padding: 18px; border-left: 3px solid var(--sh-cyan); background: #102f32; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.8; }

.sh-pricing { background: #edf3ee; }
.sh-price-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sh-line); }
.sh-price-track::before { position: absolute; top: -20px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sh-green), var(--sh-mint), var(--sh-gold)); content: ""; }
.sh-price-track article { position: relative; min-height: 350px; padding: 33px; background: #fff; }
.sh-price-track article::before { position: absolute; top: -27px; left: 32px; width: 12px; height: 12px; border: 4px solid #edf3ee; border-radius: 50%; background: var(--sh-green); box-shadow: 0 0 0 2px var(--sh-green); content: ""; }
.sh-price-track article.is-main { background: var(--sh-deep); color: #fff; }
.sh-price-track article.is-main::before { background: var(--sh-gold); box-shadow: 0 0 0 2px var(--sh-gold); }
.sh-price-track article > span { color: var(--sh-green); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.sh-price-track article.is-main > span { color: var(--sh-mint); }
.sh-price-track h3 { margin: 42px 0 13px; font-size: 22px; }
.sh-price-track strong { display: block; color: var(--sh-green); font-size: 42px; line-height: 1; }
.sh-price-track .is-main strong { color: var(--sh-gold); }
.sh-price-track strong small { margin-left: 5px; font-size: 12px; }
.sh-price-track p { margin: 22px 0; color: var(--sh-muted); font-size: 13px; line-height: 1.85; }
.sh-price-track .is-main p { color: rgba(255,255,255,.62); }
.sh-price-track footer { position: absolute; right: 33px; bottom: 27px; left: 33px; padding-top: 15px; border-top: 1px solid var(--sh-line); color: #7b8989; font-size: 11px; }
.sh-price-track .is-main footer { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.45); }
.sh-price-note { margin: 18px 0 0; color: #728380; font-size: 12px; }

.sh-articles { background: #f8f5ed; }
.sh-feed { border-top: 1px solid var(--sh-line); }
.sh-feed a { display: grid; grid-template-columns: 68px 1fr auto; gap: 24px; align-items: center; padding: 24px 8px; border-bottom: 1px solid var(--sh-line); text-decoration: none; }
.sh-feed a > i { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--sh-line); border-radius: 50%; color: var(--sh-green); font-style: normal; font-size: 11px; transition: background .2s ease, color .2s ease; }
.sh-feed a:hover > i { background: var(--sh-green); color: #fff; }
.sh-feed span { color: #8b9895; font-size: 11px; }
.sh-feed h3 { margin: 6px 0 0; font-size: 18px; line-height: 1.45; }
.sh-feed a > b { color: var(--sh-green); font-size: 12px; }

.sh-platform { overflow: hidden; background: #dfe9e1; }
.sh-platform::before { position: absolute; right: -10vw; bottom: -24vw; width: 54vw; height: 54vw; border: 1px solid rgba(22,106,82,.16); border-radius: 50%; box-shadow: 0 0 0 70px rgba(22,106,82,.03), 0 0 0 140px rgba(22,106,82,.025); content: ""; }
.sh-platform-layout { position: relative; display: grid; grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); gap: 46px 60px; align-items: end; }
.sh-platform-head > p { margin: 23px 0; color: #536967; font-size: 15px; line-height: 1.9; }
.sh-platform-head > div { display: flex; align-items: center; gap: 14px; color: #5e7570; font-size: 10px; letter-spacing: .14em; }
.sh-platform-head > div b { padding: 8px 10px; background: var(--sh-deep); color: var(--sh-mint); font-size: 11px; }
.sh-platform-figure { position: relative; margin: 0; padding: 12px; background: var(--sh-night); box-shadow: 0 28px 75px rgba(17,55,49,.2); }
.sh-platform-figure img { display: block; width: 100%; height: auto; }
.sh-platform-figure figcaption { padding: 11px 4px 1px; color: rgba(255,255,255,.5); font-size: 10px; }
.sh-workspaces { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(12,45,45,.14); }
.sh-workspaces article { display: grid; grid-template-columns: 35px 1fr; gap: 12px; min-height: 142px; padding: 24px; background: rgba(255,255,255,.68); }
.sh-workspaces i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--sh-green); color: #fff; font-style: normal; font-size: 10px; }
.sh-workspaces h3 { margin: 3px 0 8px; font-size: 17px; }
.sh-workspaces p { margin: 0; color: #627571; font-size: 12px; line-height: 1.75; }

.sh-faq { background: var(--sh-night); color: #fff; }
.sh-faq-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(500px, 1.28fr); gap: 80px; }
.sh-faq-head { position: sticky; top: 130px; align-self: start; }
.sh-faq-head .city-eyebrow { color: var(--sh-cyan); }
.sh-faq-head p { margin: 24px 0 0; color: rgba(255,255,255,.57); font-size: 14px; line-height: 1.85; }
.sh-faq-list details { border-color: rgba(255,255,255,.14); }
.sh-faq-list summary { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; color: #fff; font-size: 17px; line-height: 1.55; }
.sh-faq-list summary span { color: var(--sh-mint); font-size: 10px; }
.sh-faq-list summary b { color: var(--sh-gold); font-size: 22px; }
.sh-faq-list details[open] summary b { transform: rotate(45deg); }
.sh-faq-list details p { margin: -4px 56px 24px; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.9; }

.sh-final-ad { background: #06171c; }
.sh-final { background: #eff4ee; color: var(--sh-ink); }
.sh-final-inner { display: grid; grid-template-columns: .42fr 1.12fr .76fr; gap: 34px; align-items: center; }
.sh-final span { color: var(--sh-green); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.sh-final h2 { margin: 0; font-size: 36px; line-height: 1.15; letter-spacing: -.04em; }
.sh-final p { margin: 0; color: var(--sh-muted); font-size: 14px; line-height: 1.8; }

@media (max-width: 1050px) {
  .sh-hero-shell { grid-template-columns: 1fr minmax(310px, .58fr); gap: 38px; }
  .sh-track { grid-template-columns: 1fr 1fr; }
  .sh-track-line { display: none; }
  .sh-station-growth { grid-column: 1 / -1; display: grid; grid-template-columns: .85fr 1.15fr; }
  .sh-station-growth > header { grid-column: 1 / -1; }
  .sh-station-growth figure { height: 100%; aspect-ratio: auto; }
  .sh-matrix-layout { grid-template-columns: 1fr; }
  .sh-platform-layout { grid-template-columns: 1fr; }
  .sh-workspaces { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .sh-hero { min-height: 776px; }
  .sh-hero-overlay { background: linear-gradient(0deg, rgba(3,20,23,.97) 0%, rgba(4,24,26,.77) 63%, rgba(4,24,26,.28) 100%); }
  .sh-hero-overlay::after { right: 8%; bottom: 40%; width: 80vw; }
  .sh-hero-shell { min-height: 776px; display: block; }
  .sh-crumb { padding-top: 14px; }
  .sh-route-label { margin-top: 0; font-size: 9px; }
  .sh-hero-copy { padding: 38px 0 22px; }
  .sh-hero h1 { font-size: 39px; line-height: 1.08; }
  .sh-lead { margin-top: 17px; font-size: 14px; line-height: 1.75; }
  .sh-hero-actions { margin-top: 19px; }
  .sh-hero-actions a { min-height: 42px; padding: 0 15px; font-size: 12px; }
  .sh-boundary { margin-top: 13px; font-size: 10px; }
  .sh-live-panel { margin: 0 0 24px; padding: 15px; }
  .sh-live-head { padding-bottom: 12px; }
  .sh-route-switch { margin: 15px 0; }
  .sh-route-switch::before { top: 15px; }
  .sh-route-switch button i { width: 31px; height: 31px; margin-bottom: 5px; }
  .sh-price-signal { grid-template-columns: 1fr 1fr; gap: 7px 12px; padding: 10px; }
  .sh-price-signal span { display: block; font-size: 10px; }
  .sh-price-signal b { display: block; font-size: 14px; }
  .sh-price-signal p { grid-column: 1 / -1; }
  .sh-section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .sh-section-head h2,
  .sh-matrix-head h2,
  .sh-platform-head h2,
  .sh-faq-head h2 { font-size: 31px; line-height: 1.14; }
  .sh-track { display: grid; grid-template-columns: 1fr; gap: 17px; }
  .sh-station-growth { grid-column: auto; display: block; }
  .sh-station > div { padding: 22px; }
  .sh-station h3 { font-size: 22px; }
  .sh-station > div > p { min-height: 0; }
  .sh-matrix-layout { gap: 38px; }
  .sh-matrix { grid-template-columns: 1fr; padding: 9px; }
  .sh-matrix-axis { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
  .sh-matrix button { min-height: 70px; }
  .sh-matrix output { grid-column: auto; }
  .sh-price-track { grid-template-columns: 1fr; gap: 10px; background: none; }
  .sh-price-track::before,
  .sh-price-track article::before { display: none; }
  .sh-price-track article { min-height: 300px; padding: 26px; }
  .sh-price-track h3 { margin-top: 28px; }
  .sh-price-track footer { right: 26px; left: 26px; }
  .sh-feed a { grid-template-columns: 42px 1fr; gap: 14px; padding: 20px 0; }
  .sh-feed a > i { width: 36px; height: 36px; }
  .sh-feed h3 { font-size: 15px; }
  .sh-feed a > b { grid-column: 2; }
  .sh-platform-layout { gap: 35px; }
  .sh-workspaces { grid-template-columns: 1fr; }
  .sh-workspaces article { min-height: 112px; }
  .sh-faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .sh-faq-head { position: static; }
  .sh-faq-list summary { grid-template-columns: 30px 1fr auto; gap: 10px; font-size: 15px; }
  .sh-faq-list details p { margin: -4px 40px 23px; font-size: 13px; }
  .sh-final-inner { grid-template-columns: 1fr; gap: 15px; }
  .sh-final h2 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-suihua .sh-signal { animation: none; }
  .page-suihua .sh-station figure img,
  .page-suihua .reveal { transition: none; }
}