/* 算数-TMS · 客户介绍页 */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
 --ink: #071018;
 --ink-2: #0f1c28;
 --steel: #173247;
 --fog: #d7e2ea;
 --amber: #e8a317;
 --amber-deep: #c4860a;
 --mint: #2fbfa6;
 --text: #e8eef3;
 --muted: #8aa0b3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: "Noto Sans SC", sans-serif;
 background: var(--ink);
 color: var(--text);
 line-height: 1.6;
 overflow-x: clip;
}

.intro-nav {
 position: fixed;
 inset: 0 0 auto;
 z-index: 20;
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: .85rem 5vw;
 background: linear-gradient(180deg, rgba(7,16,24,.96), rgba(7,16,24,.45) 72%, rgba(7,16,24,0));
}
.intro-nav .nav-top { display: contents; }
.intro-nav .brand {
 display: inline-flex;
 align-items: center;
 gap: .55rem;
 order: 0;
 font-family: "Noto Sans SC", sans-serif;
 font-weight: 900;
 letter-spacing: .02em;
 font-size: 1.05rem;
 color: #fff;
 text-decoration: none;
 min-width: 0;
}
.intro-nav .nav-logo {
 height: 36px;
 width: auto;
 display: block;
 flex-shrink: 0;
}
.intro-nav .brand span {
 font-family: "Archivo Black", "Noto Sans SC", sans-serif;
 color: var(--amber);
 letter-spacing: .06em;
 white-space: nowrap;
}
.intro-nav .actions {
 display: flex;
 gap: .5rem;
 flex-shrink: 0;
 order: 2;
}
.intro-nav .nav-links {
 display: flex;
 align-items: center;
 gap: 1.1rem;
 flex: 1;
 justify-content: center;
 padding: 0 1rem;
 min-width: 0;
 order: 1;
}
.intro-nav .nav-links a {
 color: rgba(232,238,243,.78);
 text-decoration: none;
 font-size: .9rem;
 font-weight: 600;
 white-space: nowrap;
}
.intro-nav .nav-links a:hover,
.intro-nav .nav-links a.is-on { color: #fff; }
.intro-nav .nav-links a.is-on {
 box-shadow: inset 0 -2px 0 var(--amber);
 padding-bottom: .15rem;
}
.nav-link-roles {
 color: var(--amber) !important;
 border: 1px solid rgba(232,163,23,.55);
 padding: .35rem .75rem;
 border-radius: 4px;
 background: rgba(232,163,23,.12);
 box-shadow: none !important;
}
.intro-nav .nav-link-roles:hover {
 background: rgba(232,163,23,.22);
 border-color: var(--amber);
}
.roles-callout {
 margin: 0 0 1.25rem;
 padding: .85rem 1rem;
 border-left: 3px solid var(--amber);
 background: rgba(232,163,23,.08);
 color: var(--fog);
 font-size: .92rem;
}
#roles {
 scroll-margin-top: 5.5rem;
}
.btn-intro {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 2.6rem;
 padding: .7rem 1.25rem;
 border-radius: 4px;
 text-decoration: none;
 font-weight: 700;
 font-size: .92rem;
 border: 1px solid transparent;
 transition: .2s ease;
 -webkit-tap-highlight-color: transparent;
}
.btn-intro.primary { background: var(--amber); color: #1a1200; }
.btn-intro.primary:hover { background: var(--amber-deep); }
.btn-intro.ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn-intro.ghost:hover { border-color: #fff; }

/* 全貌多页 Banner */
.hero-deck {
 position: relative;
 min-height: 100vh;
 min-height: 100svh;
 min-height: 100dvh;
 overflow: hidden;
 background: var(--ink);
}
.hero-track { position: absolute; inset: 0; }
.hero-slide {
 position: absolute;
 inset: 0;
 display: grid;
 align-items: end;
 padding: 7rem 5vw 7.5rem;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .65s ease, visibility .65s ease;
}
.hero-slide.is-active {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 z-index: 1;
}
.hero-media {
 position: absolute;
 inset: 0;
 z-index: 0;
}
.hero-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transform: scale(1.04);
}
.hero-slide.is-active .hero-media img {
 animation: heroDrift 18s ease-in-out infinite alternate;
}
.hero-veil {
 position: absolute;
 inset: 0;
 background:
 linear-gradient(90deg, rgba(7,16,24,.88) 0%, rgba(7,16,24,.55) 48%, rgba(7,16,24,.28) 100%),
 linear-gradient(180deg, rgba(7,16,24,.25) 0%, rgba(7,16,24,.82) 100%);
}
@keyframes heroDrift {
 from { transform: scale(1.02) translate3d(0,0,0); }
 to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
.hero-inner { position: relative; z-index: 1; max-width: 720px; }
.hero-brand {
 font-family: "Archivo Black", "Noto Sans SC", sans-serif;
 font-size: clamp(3.2rem, 9vw, 6.2rem);
 line-height: .92;
 letter-spacing: .02em;
 margin: 0 0 .4rem;
 color: #fff;
}
.hero-brand span {
 display: block;
 color: var(--amber);
 font-size: .28em;
 letter-spacing: .22em;
 margin-bottom: .65rem;
 font-family: "Noto Sans SC", sans-serif;
 font-weight: 700;
}
.hero-slide h2 {
 margin: 0 0 1rem;
 font-size: clamp(1.4rem, 3vw, 2.1rem);
 font-weight: 900;
 color: var(--fog);
}
.hero-slide p {
 margin: 0 0 2rem;
 max-width: 34rem;
 color: #b7c7d4;
 font-size: 1.05rem;
}
.hero-cta {
 display: flex;
 flex-wrap: wrap;
 gap: .75rem;
}
.hero-slide.is-active .hero-brand,
.hero-slide.is-active h2,
.hero-slide.is-active p,
.hero-slide.is-active .hero-cta {
 animation: riseIn .75s ease both;
}
.hero-slide.is-active h2 { animation-delay: .06s; }
.hero-slide.is-active p { animation-delay: .1s; }
.hero-slide.is-active .hero-cta { animation-delay: .16s; }
@keyframes riseIn {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: none; }
}

.hero-chrome {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 z-index: 3;
 padding: 0 5vw 1.35rem;
}
.hero-progress {
 height: 2px;
 background: rgba(255,255,255,.12);
 margin-bottom: 1rem;
 overflow: hidden;
}
.hero-progress i {
 display: block;
 height: 100%;
 width: 0;
 background: var(--amber);
}
.hero-controls {
 display: flex;
 align-items: center;
 gap: .85rem;
 flex-wrap: wrap;
}
.hero-nav-btn {
 width: 2.4rem;
 height: 2.4rem;
 border-radius: 4px;
 border: 1px solid rgba(255,255,255,.28);
 background: rgba(7,16,24,.45);
 color: #fff;
 font-size: 1.35rem;
 line-height: 1;
 cursor: pointer;
 transition: .18s ease;
}
.hero-nav-btn:hover {
 border-color: var(--amber);
 color: var(--amber);
}
.hero-dots {
 display: flex;
 gap: .45rem;
 flex: 1;
 min-width: 0;
 overflow-x: auto;
 scrollbar-width: none;
}
.hero-dots::-webkit-scrollbar { display: none; }
.hero-dot {
 display: flex;
 align-items: baseline;
 gap: .4rem;
 padding: .55rem .75rem;
 border: 1px solid rgba(255,255,255,.14);
 background: rgba(7,16,24,.4);
 color: var(--muted);
 border-radius: 4px;
 cursor: pointer;
 white-space: nowrap;
 font: inherit;
 transition: .18s ease;
}
.hero-dot em {
 font-style: normal;
 font-family: "Archivo Black", sans-serif;
 font-size: .78rem;
 color: rgba(232,163,23,.65);
}
.hero-dot span { font-size: .82rem; font-weight: 600; }
.hero-dot:hover { border-color: rgba(255,255,255,.35); color: #fff; }
.hero-dot.is-active {
 border-color: var(--amber);
 color: #fff;
 background: rgba(232,163,23,.14);
}
.hero-dot.is-active em { color: var(--amber); }
.hero-index {
 font-family: "Archivo Black", sans-serif;
 letter-spacing: .04em;
 color: #fff;
 font-size: .95rem;
 min-width: 3.5rem;
 text-align: right;
}
.hero-index span { color: var(--muted); font-weight: 400; margin-left: .15rem; }

@media (prefers-reduced-motion: reduce) {
 .hero-slide,
 .hero-slide.is-active .hero-media img,
 .hero-slide.is-active .hero-brand,
 .hero-slide.is-active h2,
 .hero-slide.is-active p,
 .hero-slide.is-active .hero-cta {
 animation: none !important;
 transition: none !important;
 }
}

.section { padding: 5rem 5vw; }
.section.alt {
 background:
 radial-gradient(ellipse 60% 50% at 10% 0%, rgba(232,163,23,.08), transparent 55%),
 linear-gradient(180deg, var(--ink-2), var(--ink));
}
.section-head {
 max-width: 680px;
 margin-bottom: 2.5rem;
}
.section-head.center {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}
.section-head .eyebrow {
 color: var(--amber);
 font-size: .8rem;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
 margin-bottom: .6rem;
}
.section-head h3 {
 margin: 0 0 .75rem;
 font-size: clamp(1.6rem, 3vw, 2.2rem);
 font-weight: 900;
}
.section-head p { margin: 0; color: var(--muted); }

.screen-board {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1rem;
 margin-bottom: 2rem;
 padding: 1.25rem;
 border: 1px solid rgba(255,255,255,.1);
 background: linear-gradient(135deg, rgba(23,50,71,.85), rgba(15,28,40,.9));
 border-radius: 10px;
}
.screen-board-6 {
 grid-template-columns: repeat(6, 1fr);
}
.metric {
 padding: .75rem 1rem;
 border-left: 3px solid var(--amber);
}
.metric b {
 display: block;
 font-family: "Archivo Black", sans-serif;
 font-size: clamp(1.6rem, 3vw, 2.2rem);
 color: #fff;
 line-height: 1.1;
}
.metric span { color: var(--muted); font-size: .85rem; }

.gallery {
 display: grid;
 grid-template-columns: 1.3fr 1fr 1fr;
 gap: 1rem;
}
.gallery figure {
 margin: 0;
 position: relative;
 overflow: hidden;
 border-radius: 8px;
 min-height: 220px;
 background: #122333;
}
.gallery img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 min-height: 220px;
 transition: transform .6s ease;
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 1.1rem 1rem .9rem;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
 color: #fff;
 font-size: .9rem;
 font-weight: 600;
}

.flow {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 0;
 border-top: 1px solid rgba(255,255,255,.1);
}
.flow-step {
 padding: 1.5rem 1rem 1.5rem 0;
 border-right: 1px solid rgba(255,255,255,.08);
}
.flow-step:last-child { border-right: 0; }
.flow-step .num {
 font-family: "Archivo Black", sans-serif;
 color: var(--amber);
 font-size: 1.4rem;
 margin-bottom: .5rem;
}
.flow-step h4 { margin: 0 0 .4rem; font-size: 1rem; }
.flow-step p { margin: 0; color: var(--muted); font-size: .88rem; }
.freight-flow .num { color: var(--mint); }

.dual {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
}
.dual.triple {
 grid-template-columns: repeat(3, 1fr);
}
.dual-block {
 padding: 2rem 0;
 border-top: 2px solid var(--amber);
}
.dual-block h4 {
 margin: 0 0 .75rem;
 font-size: 1.35rem;
 font-weight: 900;
}
.dual-block ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.dual-block li {
 padding: .55rem 0;
 border-bottom: 1px solid rgba(255,255,255,.07);
 color: var(--fog);
 font-size: .95rem;
}
.dual-block li::before {
 content: "▸ ";
 color: var(--mint);
}

.portal-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: .85rem;
}
.portal {
 display: block;
 text-decoration: none;
 color: inherit;
 padding: 1.1rem 1rem;
 border: 1px solid rgba(255,255,255,.12);
 background: rgba(15,28,40,.55);
 border-radius: 8px;
 transition: .18s ease;
 min-height: 118px;
}
.portal:hover {
 border-color: var(--amber);
 transform: translateY(-3px);
 background: rgba(232,163,23,.1);
}
.portal strong { display: block; color: #fff; font-size: 1.05rem; }
.portal span {
 display: block;
 margin: .35rem 0;
 color: var(--amber);
 font-family: ui-monospace, Consolas, monospace;
 font-size: .82rem;
}
.portal em {
 display: block;
 font-style: normal;
 color: var(--muted);
 font-size: .82rem;
}

.site-footer {
 margin-top: 1rem;
 padding: 0 5vw 2rem;
 color: var(--muted);
 font-size: .85rem;
 background:
 radial-gradient(ellipse 70% 80% at 88% 18%, rgba(232,163,23,.08), transparent 55%),
 radial-gradient(ellipse 55% 70% at 8% 90%, rgba(47,191,166,.06), transparent 50%),
 linear-gradient(180deg, rgba(7,16,24,0) 0%, rgba(10,22,34,.85) 28%, #050d14 100%);
}
.site-footer a { color: var(--fog); text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.footer-panel {
 max-width: 1120px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(240px, 280px);
 gap: 1.75rem 2.5rem;
 align-items: stretch;
 padding: 1.85rem 1.75rem 1.65rem;
 border: 1px solid rgba(232,163,23,.22);
 border-radius: 14px;
 background:
 linear-gradient(135deg, rgba(232,163,23,.07), transparent 42%),
 linear-gradient(165deg, rgba(23,50,71,.72), rgba(7,16,24,.88));
 box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.footer-lead {
 display: flex;
 flex-direction: column;
 gap: .95rem;
 min-width: 0;
}
.footer-brand strong {
 display: block;
 color: var(--amber);
 font-family: "Archivo Black", "Noto Sans SC", sans-serif;
 letter-spacing: .06em;
 font-size: 1.35rem;
 line-height: 1.15;
 margin-bottom: .35rem;
}
.footer-brand span {
 display: block;
 color: rgba(215,226,234,.78);
 font-size: .9rem;
}
.footer-pitch {
 margin: 0;
 max-width: 36rem;
 color: var(--muted);
 font-size: .92rem;
 line-height: 1.65;
}
.footer-phone {
 display: grid;
 grid-template-columns: auto 1fr;
 grid-template-rows: auto auto;
 column-gap: .85rem;
 row-gap: .1rem;
 align-items: baseline;
 width: fit-content;
 max-width: 100%;
 padding: .85rem 1.1rem;
 border-radius: 10px;
 border: 1px solid rgba(255,255,255,.1);
 background: rgba(5,13,20,.45);
 transition: border-color .2s, background .2s;
}
.footer-phone:hover {
 border-color: rgba(232,163,23,.45);
 background: rgba(232,163,23,.08);
 color: inherit;
}
.footer-phone em {
 grid-row: 1 / 3;
 align-self: center;
 font-style: normal;
 writing-mode: vertical-rl;
 letter-spacing: .18em;
 font-size: .72rem;
 color: var(--amber);
 border-right: 1px solid rgba(232,163,23,.35);
 padding-right: .75rem;
}
.footer-phone span {
 font-family: "Archivo Black", "Noto Sans SC", sans-serif;
 font-size: 1.45rem;
 letter-spacing: .04em;
 color: #fff;
 line-height: 1.1;
}
.footer-phone small {
 color: var(--muted);
 font-size: .8rem;
}
.footer-links {
 display: flex;
 flex-wrap: wrap;
 gap: .55rem .35rem;
 margin-top: .15rem;
}
.footer-links a {
 position: relative;
 padding: .2rem .75rem .2rem 0;
 color: rgba(215,226,234,.82);
 font-size: .88rem;
}
.footer-links a:not(:last-child)::after {
 content: "";
 position: absolute;
 right: .12rem;
 top: 50%;
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: rgba(138,160,179,.55);
 transform: translateY(-50%);
}
.footer-qr {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: .7rem;
 padding: 1rem 1rem 1.05rem;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.12);
 background:
 linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
 rgba(5,13,20,.55);
 text-align: center;
}
.footer-qr-label {
 display: flex;
 flex-direction: column;
 gap: .15rem;
}
.footer-qr-label span {
 font-size: .72rem;
 letter-spacing: .22em;
 text-transform: uppercase;
 color: var(--amber);
}
.footer-qr-label strong {
 color: var(--fog);
 font-size: 1rem;
 letter-spacing: .04em;
}
.footer-qr-frame {
 margin: 0 auto;
 padding: .45rem;
 width: fit-content;
 border-radius: 10px;
 background: #fff;
 box-shadow: 0 0 0 1px rgba(232,163,23,.35), 0 10px 28px rgba(0,0,0,.35);
}
.footer-qr-frame img {
 display: block;
 width: 9.5rem;
 height: 9.5rem;
 object-fit: cover;
 border-radius: 4px;
}
.footer-qr-cap {
 margin: 0;
 color: var(--muted);
 font-size: .78rem;
 line-height: 1.45;
}
.footer-bar {
 max-width: 1120px;
 margin: .95rem auto 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: .45rem 1.25rem;
 padding: 0 .35rem;
 font-size: .78rem;
 color: rgba(138,160,179,.85);
}

.module-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem;
}
.module-card {
 padding: 1.25rem 1.15rem;
 border: 1px solid rgba(255,255,255,.1);
 background: linear-gradient(160deg, rgba(23,50,71,.55), rgba(7,16,24,.35));
 border-radius: 8px;
 min-height: 160px;
}
.module-card em {
 display: block;
 font-style: normal;
 color: var(--amber);
 font-family: "Archivo Black", sans-serif;
 letter-spacing: .08em;
 font-size: .85rem;
 margin-bottom: .45rem;
}
.module-card h4 { margin: 0 0 .55rem; color: #fff; font-size: 1.12rem; }
.module-card p { margin: 0; color: var(--muted); font-size: .9rem; }

#ecosystem { scroll-margin-top: 5.5rem; }
.eco-note {
 display: flex;
 flex-wrap: wrap;
 gap: .55rem 1rem;
 align-items: baseline;
 margin: 0 0 1.35rem;
 padding: .95rem 1.1rem;
 border-left: 3px solid var(--mint);
 background: rgba(13, 148, 136, .08);
 border-radius: 0 8px 8px 0;
 color: var(--fog);
 font-size: .92rem;
 line-height: 1.6;
}
.eco-note strong {
 color: var(--mint);
 letter-spacing: .04em;
 font-size: .82rem;
 text-transform: uppercase;
}
.eco-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1rem;
}
.eco-card {
 padding: 1.35rem 1.25rem 1.2rem;
 border: 1px solid rgba(255,255,255,.1);
 background: linear-gradient(155deg, rgba(23,50,71,.7), rgba(7,16,24,.4));
 border-radius: 10px;
 min-height: 100%;
}
.eco-card header {
 margin-bottom: .85rem;
 padding-bottom: .75rem;
 border-bottom: 1px solid rgba(255,255,255,.08);
}
.eco-card header em {
 display: block;
 font-style: normal;
 color: var(--amber);
 font-size: .78rem;
 letter-spacing: .1em;
 font-family: "Archivo Black", sans-serif;
 margin-bottom: .35rem;
}
.eco-card header h4 {
 margin: 0;
 color: #fff;
 font-size: 1.2rem;
 font-weight: 800;
}
.eco-card ul {
 margin: 0 0 1rem;
 padding: 0;
 list-style: none;
}
.eco-card li {
 padding: .48rem 0;
 border-bottom: 1px solid rgba(255,255,255,.06);
 color: var(--fog);
 font-size: .9rem;
 line-height: 1.55;
}
.eco-card li:last-child { border-bottom: 0; }
.eco-card li b { color: #fff; font-weight: 650; }
.eco-tags {
 display: flex;
 flex-wrap: wrap;
 gap: .4rem;
}
.eco-tags span {
 display: inline-block;
 padding: .22rem .55rem;
 border-radius: 4px;
 font-size: .75rem;
 color: var(--mint);
 background: rgba(13, 148, 136, .12);
 border: 1px solid rgba(13, 148, 136, .28);
}
.eco-foot {
 margin-top: 1.5rem;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: .75rem 1rem;
 padding-top: 1.25rem;
 border-top: 1px solid rgba(255,255,255,.08);
}
.eco-foot p {
 flex: 1 1 280px;
 margin: 0;
 color: var(--muted);
 font-size: .9rem;
 line-height: 1.55;
}

.portal-guide {
 border-color: rgba(232,163,23,.45) !important;
 background: rgba(232,163,23,.08) !important;
}

/* 系统说明页 · 可读性增强 */
.guide-page { padding-top: 0; }
.guide-page .section,
.guide-page .guide-panel,
.guide-page #flow-tms,
.guide-page #flow-freight,
.guide-page #flow-cold { scroll-margin-top: 5.5rem; }

.guide-hero {
 padding: 6.8rem 0 1.75rem;
 background:
 radial-gradient(ellipse 70% 60% at 15% 20%, rgba(232,163,23,.18), transparent 55%),
 linear-gradient(180deg, #0c1822 0%, var(--ink) 100%);
 border-bottom: 1px solid rgba(255,255,255,.06);
}
.guide-frame {
 width: 100%;
 max-width: 1100px;
 margin: 0 auto;
 padding-left: 5vw;
 padding-right: 5vw;
 box-sizing: border-box;
}
.guide-hero h1 {
 margin: .3rem 0 .65rem;
 font-size: clamp(1.7rem, 3.6vw, 2.3rem);
 color: #fff;
 font-weight: 900;
 letter-spacing: .02em;
 line-height: 1.25;
}
.guide-hero-lead {
 color: var(--fog);
 font-size: 1.02rem;
 line-height: 1.7;
 margin: 0 0 .9rem;
 max-width: 40rem;
}
.guide-read-tip {
 display: flex;
 flex-wrap: wrap;
 gap: .4rem .75rem;
 align-items: baseline;
 margin: 0 0 1.1rem;
 padding: .75rem .95rem;
 border: 1px solid rgba(47,191,166,.32);
 border-left: 3px solid var(--mint);
 background: rgba(47,191,166,.08);
 border-radius: 0 8px 8px 0;
 color: var(--fog);
 font-size: .9rem;
 line-height: 1.6;
 max-width: 40rem;
}

.guide-shell {
 display: grid;
 grid-template-columns: 168px minmax(0, 1fr);
 gap: 1.25rem 1.5rem;
 max-width: 1100px;
 margin: 0 auto;
 padding-top: 1.25rem;
 padding-bottom: 2.75rem;
 align-items: start;
}
.guide-toc {
 position: sticky;
 top: 4.75rem;
 z-index: 12;
 display: flex;
 flex-direction: column;
 gap: .08rem;
 padding: .85rem .55rem;
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 10px;
 background: rgba(12, 24, 34, .92);
 backdrop-filter: blur(8px);
}
.guide-toc-title {
 font-size: .7rem;
 letter-spacing: .12em;
 color: var(--muted);
 font-weight: 700;
 margin: 0 .4rem .4rem;
 text-transform: uppercase;
}
.guide-toc a {
 display: grid;
 grid-template-columns: 2.55rem minmax(0, 1fr);
 align-items: center;
 column-gap: .35rem;
 color: #a8bbc9;
 text-decoration: none;
 font-size: .86rem;
 font-weight: 600;
 line-height: 1.3;
 padding: .4rem .4rem;
 border-radius: 6px;
}
.guide-toc a em {
 font-style: normal;
 color: rgba(232,163,23,.75);
 font-family: "Archivo Black", "Noto Sans SC", sans-serif;
 font-size: .7rem;
 letter-spacing: .02em;
 text-align: right;
 font-variant-numeric: tabular-nums;
}
.guide-toc a.is-sub {
 color: #8aa0b3;
 font-weight: 500;
 font-size: .82rem;
}
.guide-toc a.is-sub em::before {
 content: "·";
 color: rgba(138,160,179,.8);
}
.guide-toc a span { min-width: 0; }
.guide-toc a:hover { color: #fff; background: rgba(255,255,255,.04); }
.guide-toc a.is-active {
 color: #fff;
 background: rgba(232,163,23,.14);
}
.guide-toc a.is-active em { color: var(--amber); }

.guide-read-tip strong {
 color: var(--mint);
 font-size: .78rem;
 letter-spacing: .06em;
}
.guide-main { min-width: 0; }
.guide-page .guide-section {
 padding: 0 0 1.65rem;
 margin: 0 0 1.25rem;
 border-bottom: 1px solid rgba(255,255,255,.08);
 background: transparent;
}
.guide-page .guide-section.alt { background: transparent; }
.guide-page .guide-section:last-child {
 border-bottom: 0;
 margin-bottom: 0;
 padding-bottom: 0;
}
.guide-page .section-head {
 max-width: none;
 margin-bottom: .95rem;
}
.guide-page .section-head h3 {
 font-size: clamp(1.28rem, 2.4vw, 1.55rem);
 line-height: 1.3;
}
.guide-page .section-head p {
 color: #c5d4e0;
 font-size: .96rem;
 line-height: 1.7;
 max-width: 40rem;
}

.guide-panel {
 margin: 0 0 .9rem;
 padding: 1rem 1.05rem 1.05rem;
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 10px;
 background: rgba(15, 28, 40, .55);
}
.guide-panel-head {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: .85rem 1rem;
 margin-bottom: 1rem;
 align-items: start;
}
.guide-panel-num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2.6rem;
 height: 2.6rem;
 border-radius: 8px;
 background: rgba(232,163,23,.16);
 border: 1px solid rgba(232,163,23,.35);
 color: var(--amber);
 font-family: "Archivo Black", "Noto Sans SC", sans-serif;
 font-size: .95rem;
}
.guide-panel-head h4 {
 margin: 0 0 .35rem;
 color: #fff;
 font-size: 1.12rem;
}
.guide-sub {
 margin: 0 0 .85rem;
 color: #fff;
 font-size: 1.05rem;
 line-height: 1.35;
}
.guide-ul {
 margin: 0;
 padding-left: 1.2rem;
 color: #c5d4e0;
 line-height: 1.8;
 font-size: .96rem;
}
.guide-ul li { margin: .4rem 0; }
.guide-ul strong { color: #fff; font-weight: 700; }
.guide-ol {
 margin: 0;
 padding-left: 1.25rem;
 color: #c5d4e0;
 line-height: 1.75;
 font-size: .95rem;
}
.guide-ol li { margin: .45rem 0; padding-left: .15rem; }
.guide-ul code,
.guide-lead code,
.manual-table code,
.guide-ol code {
 font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
 font-size: .86em;
 color: #f0c15a;
 background: rgba(232,163,23,.12);
 padding: .08rem .35rem;
 border-radius: 4px;
}
.guide-lead {
 color: #c5d4e0;
 margin: 0;
 font-size: .96rem;
 line-height: 1.7;
}
.guide-note {
 margin: 1rem 0 0;
 padding: .9rem 1rem;
 border-left: 3px solid var(--mint);
 background: rgba(47,191,166,.1);
 color: #e8eef3;
 font-size: .92rem;
 line-height: 1.7;
 border-radius: 0 8px 8px 0;
}
.guide-link { color: var(--amber); text-decoration: none; font-weight: 600; }
.guide-link:hover { text-decoration: underline; }
.guide-acc {
 display: inline-block;
 font-family: ui-monospace, Consolas, monospace;
 font-size: .86em;
 font-weight: 700;
 color: #1a1200;
 background: var(--amber);
 padding: .08rem .4rem;
 border-radius: 4px;
 line-height: 1.4;
}
.guide-chip-row {
 display: flex;
 flex-wrap: wrap;
 gap: .35rem;
 align-items: center;
}
.guide-chip-row-sub { margin-top: .4rem; }
.guide-chip {
 display: inline-block;
 padding: .22rem .5rem;
 border-radius: 999px;
 font-size: .78rem;
 font-weight: 700;
 color: #e8eef3;
 background: rgba(47,191,166,.16);
 border: 1px solid rgba(47,191,166,.35);
 white-space: nowrap;
}
.guide-chip.accent {
 color: #1a1200;
 background: var(--amber);
 border-color: var(--amber);
}
.guide-chip.soft {
 color: #c5d4e0;
 background: rgba(255,255,255,.06);
 border-color: rgba(255,255,255,.14);
 font-weight: 600;
}
.guide-metrics { margin: 0 !important; }
.guide-cards .dual-block {
 background: rgba(7,16,24,.35);
}
.guide-path-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem;
 margin-bottom: 1.1rem;
}
.guide-path-card {
 padding: 1.1rem 1.15rem 1.2rem;
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 10px;
 background: linear-gradient(180deg, rgba(232,163,23,.1), rgba(15,28,40,.55));
}
.guide-path-meta {
 display: flex;
 justify-content: space-between;
 gap: .5rem;
 margin-bottom: .45rem;
 font-size: .78rem;
 font-weight: 700;
}
.guide-path-meta span { color: var(--amber); letter-spacing: .04em; }
.guide-path-meta em { font-style: normal; color: var(--muted); }
.guide-path-card h4 {
 margin: 0 0 .7rem;
 color: #fff;
 font-size: 1.08rem;
}
.guide-page .flow {
 margin: 0 0 1rem;
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid rgba(255,255,255,.1);
}
.guide-page .flow-step {
 padding: .9rem .85rem;
 background: rgba(7,16,24,.35);
}
.guide-page .flow-step p { color: #b7c8d6; line-height: 1.5; }

.arch-stack { display: flex; flex-direction: column; gap: .65rem; }
.arch-layer {
 display: grid;
 grid-template-columns: 96px 1fr;
 gap: .75rem;
 align-items: center;
 padding: .8rem .95rem;
 border: 1px solid rgba(255,255,255,.1);
 border-radius: 8px;
 background: rgba(7,16,24,.4);
}
.arch-tag {
 color: var(--amber);
 font-weight: 800;
 font-size: .85rem;
}
.arch-tiles {
 display: flex;
 flex-wrap: wrap;
 gap: .4rem;
}
.arch-tiles b {
 font-weight: 600;
 font-size: .8rem;
 padding: .32rem .55rem;
 border-radius: 4px;
 background: rgba(47,191,166,.12);
 border: 1px solid rgba(47,191,166,.28);
 color: var(--fog);
}
.manual-table-wrap {
 overflow-x: auto;
 border: 1px solid rgba(255,255,255,.12);
 border-radius: 8px;
 margin-top: .15rem;
}
.manual-table {
 width: 100%;
 border-collapse: collapse;
 font-size: .9rem;
 line-height: 1.55;
}
.manual-table th,
.manual-table td {
 padding: .8rem .95rem;
 text-align: left;
 border-bottom: 1px solid rgba(255,255,255,.08);
 vertical-align: top;
}
.manual-table th {
 position: sticky;
 top: 0;
 background: #173247;
 color: #e8eef3;
 font-weight: 700;
 white-space: nowrap;
}
.manual-table td { color: #c5d4e0; }
.manual-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.manual-table tbody tr:hover td { background: rgba(232,163,23,.06); }
.manual-table td:first-child {
 color: #fff;
 font-weight: 700;
 white-space: nowrap;
}
.manual-table td:first-child .guide-acc { white-space: nowrap; }
.contact-card {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 1rem;
 padding: 1.35rem;
 border: 1px solid rgba(232,163,23,.35);
 border-radius: 10px;
 background: rgba(232,163,23,.07);
}
.contact-card-with-qr {
 grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
 align-items: center;
}
.contact-qr {
 display: flex;
 align-items: center;
 gap: .85rem;
}
.contact-qr img {
 width: 6.75rem;
 height: 6.75rem;
 object-fit: cover;
 border-radius: 8px;
 background: #fff;
 padding: .25rem;
 flex-shrink: 0;
}
.contact-label { color: var(--muted); font-size: .8rem; margin-bottom: .35rem; }
.contact-value { color: #fff; font-weight: 700; font-size: 1.02rem; line-height: 1.45; }
.contact-value a { color: var(--amber); text-decoration: none; }

@media (max-width: 1100px) {
 .portal-grid { grid-template-columns: repeat(3, 1fr); }
 .gallery { grid-template-columns: 1fr; }
 .screen-board { grid-template-columns: repeat(2, 1fr); }
 .dual.triple { grid-template-columns: 1fr 1fr; }
 .module-grid { grid-template-columns: 1fr 1fr; }
 .eco-grid { grid-template-columns: 1fr; }
 .footer-panel { grid-template-columns: 1fr; }
 .footer-qr {
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-start;
 text-align: left;
 gap: .85rem 1.1rem;
 }
 .footer-qr-label { flex: 1 1 8rem; }
 .footer-qr-cap { flex: 1 1 100%; }
 .contact-card,
 .contact-card-with-qr { grid-template-columns: 1fr 1fr; }
 .contact-qr { grid-column: 1 / -1; }
 .arch-layer { grid-template-columns: 1fr; }
}

/* 平板 / 窄屏 */
@media (max-width: 960px) {
 .guide-shell {
 grid-template-columns: 1fr;
 padding-top: 0;
 padding-bottom: 2.25rem;
 }
 .guide-frame {
 padding-left: 4vw;
 padding-right: 4vw;
 }
 .guide-toc {
 position: sticky;
 top: 6.4rem;
 z-index: 14;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 gap: .3rem;
 border-radius: 0;
 margin: 0 -4vw .85rem;
 padding: .55rem 4vw;
 border: 0;
 border-bottom: 1px solid rgba(255,255,255,.1);
 background: rgba(7, 16, 24, .96);
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 }
 .guide-toc::-webkit-scrollbar { display: none; }
 .guide-toc-title { display: none; }
 .guide-toc a {
 display: inline-flex;
 flex: 0 0 auto;
 grid-template-columns: none;
 align-items: center;
 gap: .28rem;
 font-size: .8rem;
 padding: .4rem .65rem;
 background: rgba(255,255,255,.04);
 }
 .guide-toc a em { text-align: left; min-width: auto; }
 .guide-toc a.is-sub em::before { content: none; }
 .guide-path-grid { grid-template-columns: 1fr; }
 .guide-hero { padding: 7.2rem 0 1.35rem; }
 .guide-panel { padding: .9rem .85rem .95rem; }
 .guide-panel-head { grid-template-columns: 1fr; gap: .55rem; }
 .guide-panel-num { min-width: 2.2rem; height: 2.2rem; font-size: .85rem; }
}

@media (max-width: 900px) {
 .section { padding: 3.25rem 4vw; }
 .flow { grid-template-columns: 1fr; }
 .flow-step {
 border-right: 0;
 border-bottom: 1px solid rgba(255,255,255,.08);
 padding: 1.1rem .2rem 1.1rem 0;
 }
 .dual, .dual.triple { grid-template-columns: 1fr; }
 .portal-grid { grid-template-columns: repeat(2, 1fr); }
 .module-grid { grid-template-columns: 1fr; }
 .eco-grid { grid-template-columns: 1fr; }
 .eco-note { flex-direction: column; gap: .35rem; }
 .hero-slide {
 padding: 6.5rem 4vw 9rem;
 align-items: flex-end;
 }
 .hero-brand { font-size: clamp(2.35rem, 12vw, 3.4rem); }
 .hero-slide h2 { font-size: clamp(1.2rem, 4.5vw, 1.55rem); }
 .hero-slide p { font-size: .95rem; line-height: 1.65; }
 .hero-cta { gap: .55rem; }
 .hero-cta .btn-intro {
 flex: 1 1 auto;
 min-width: calc(50% - .3rem);
 }
 .hero-chrome { padding: 0 4vw calc(.9rem + env(safe-area-inset-bottom, 0px)); }
 .hero-dot { padding: .5rem .65rem; min-height: 2.5rem; }
 .hero-dot span { display: none; }
 .hero-index { min-width: auto; font-size: .85rem; }

 /* 导航：上排品牌+按钮，下排横向可滑菜单（不再隐藏链接） */
 .intro-nav {
 flex-direction: column;
 align-items: stretch;
 gap: .35rem;
 padding: .55rem 4vw .45rem;
 padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
 background: rgba(7, 16, 24, .94);
 backdrop-filter: blur(10px);
 }
 .intro-nav .nav-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: .65rem;
 width: 100%;
 }
 .intro-nav .brand { order: 0; font-size: .95rem; }
 .intro-nav .nav-logo { height: 30px; }
 .intro-nav .actions { order: 0; gap: .4rem; }
 .intro-nav .actions .btn-intro {
 min-height: 2.35rem;
 padding: .45rem .8rem;
 font-size: .84rem;
 }
 .intro-nav .nav-links {
 order: 0;
 width: 100%;
 justify-content: flex-start;
 gap: .15rem .7rem;
 padding: .15rem 0 .2rem;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 }
 .intro-nav .nav-links::-webkit-scrollbar { display: none; }
 .intro-nav .nav-links a { font-size: .84rem; }
 .nav-link-roles { padding: .28rem .6rem; }

 .manual-table { font-size: .84rem; }
 .manual-table th,
 .manual-table td { padding: .7rem .7rem; }
 .manual-table td:first-child { white-space: normal; }
 .manual-table-wrap {
 margin-left: -.25rem;
 margin-right: -.25rem;
 -webkit-overflow-scrolling: touch;
 }
 .manual-table-wrap::after {
 content: "左右滑动看全表";
 display: block;
 padding: .45rem .7rem .55rem;
 color: var(--muted);
 font-size: .75rem;
 border-top: 1px solid rgba(255,255,255,.06);
 }
 .guide-page .section,
 .guide-page .guide-panel,
 .guide-page #flow-tms,
 .guide-page #flow-freight,
 .guide-page #flow-cold,
 #roles, #modules, #ecosystem, #flow, #mobile, #screen {
 scroll-margin-top: 7.2rem;
 }
 .footer { padding: 2rem 4vw 2.4rem; }
 .footer-panel { padding: 1.35rem 1.15rem 1.25rem; }
 .footer-phone span { font-size: 1.25rem; }
 .footer-qr { flex-direction: column; text-align: center; align-items: center; }
 .footer-bar { justify-content: flex-start; }
}

@media (max-width: 560px) {
 .portal-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
 .screen-board { grid-template-columns: 1fr 1fr; }
 .contact-card,
 .contact-card-with-qr { grid-template-columns: 1fr; }
 .hero-cta .btn-intro {
 flex: 1 1 100%;
 width: 100%;
 }
 .hero-slide { padding-bottom: 9.5rem; }
 .portal {
 min-height: 5.4rem;
 padding: .95rem .85rem;
 }
 .guide-read-tip {
 flex-direction: column;
 gap: .25rem;
 font-size: .88rem;
 }
 .guide-chip { font-size: .74rem; padding: .18rem .42rem; }
 .guide-acc { font-size: .8em; }
 .dual-block { padding: 1.35rem 0; }
 .metric b { font-size: clamp(1.35rem, 7vw, 1.8rem); }
}