:root { --navy:#071d41; --blue:#123566; --gold:#c79325; --cream:#f7f5ef; --ink:#101d2e; --muted:#8090a6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans","Noto Sans SC",sans-serif; }
a { color:inherit; text-decoration:none; }
.page-shell { overflow:hidden; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1380px; margin:auto; padding:24px 5vw; position:relative; z-index:5; }
.brand { display:block; }
.brand-wordmark { display:grid; justify-items:center; gap:5px; line-height:1; white-space:nowrap; }
.brand-wordmark strong { color:var(--navy); font-family:"DM Sans",sans-serif; font-size:20px; font-weight:700; letter-spacing:-.055em; }
.brand-wordmark strong span { color:var(--gold); }
.brand-wordmark small { width:100%; color:#718095; font-size:12px; font-weight:700; letter-spacing:.22em; text-align:center; }
.desktop-nav { display:flex; gap:36px; margin-left:auto; margin-right:48px; font-size:11px; letter-spacing:.16em; font-weight:700; color:#5b6b81; }
.desktop-nav a:hover, .header-link:hover { color:var(--gold); }
.header-link { color:var(--navy); font-size:11px; font-weight:700; letter-spacing:.16em; }
.header-link span, .button span { color:var(--gold); font-size:16px; margin-left:8px; }
.language-link { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.12em; }
.hero { min-height:700px; max-width:1380px; margin:auto; padding:70px 5vw 90px; display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:5vw; }
.hero-copy { max-width:650px; position:relative; z-index:2; }
.eyebrow { margin:0 0 28px; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:100%; background:var(--gold); box-shadow:0 0 0 5px rgba(199,147,37,.13); }
h1, h2, h3, p { margin-top:0; }
h1 { max-width:670px; margin-bottom:28px; color:var(--navy); font-family:"Noto Sans SC","DM Sans",sans-serif; font-size:clamp(42px,5.2vw,78px); font-weight:900; letter-spacing:-.08em; line-height:1.14; }
h1 em { color:var(--gold); font-style:normal; }
.hero-intro { max-width:490px; color:#5a6a80; font-size:16px; line-height:1.9; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:40px; }
.button { display:inline-flex; align-items:center; padding:16px 22px; font-size:11px; font-weight:700; letter-spacing:.14em; transition:transform .25s ease, background .25s ease; }
.button:hover { transform:translateY(-3px); }
.button-primary { color:white; background:var(--navy); box-shadow:0 14px 30px rgba(7,29,65,.18); }
.button-primary:hover { background:var(--blue); }
.button-quiet { color:var(--navy); padding-left:0; }
.button-quiet span { color:var(--navy); }
.hero-art { min-height:500px; position:relative; display:grid; place-items:center; isolation:isolate; }
.hero-logo { position:relative; z-index:2; width:min(100%, 510px); height:auto; mix-blend-mode:multiply; filter:drop-shadow(0 24px 30px rgba(7,29,65,.08)); transition:transform .5s ease; }
.hero-art:hover .hero-logo { transform:translateY(-7px); }
.art-glow { position:absolute; z-index:-1; width:430px; height:430px; border-radius:50%; background:radial-gradient(circle, rgba(199,147,37,.20), rgba(199,147,37,0) 68%); filter:blur(4px); }
.art-orbit { position:absolute; z-index:0; border:1px solid rgba(7,29,65,.13); border-radius:50%; transform:rotate(-22deg); }
.orbit-one { width:86%; height:49%; }
.orbit-two { width:66%; height:76%; transform:rotate(31deg); border-color:rgba(199,147,37,.22); }
.art-note { position:absolute; z-index:3; right:4%; bottom:4%; margin:0; color:#7c8ba0; font-size:9px; letter-spacing:.18em; }
.journey-strip { max-width:1380px; margin:auto; padding:30px 5vw 80px; }
.journey-strip .eyebrow { color:var(--muted); margin-bottom:16px; }
.journey-line { width:100%; height:1px; background:#d8d7d0; }
.journey-items { display:flex; justify-content:space-between; padding-top:18px; color:#8e9aaa; font-size:12px; }
.journey-items span { display:flex; gap:9px; align-items:center; }
.journey-items b { font-size:10px; font-weight:500; color:#b3b7bc; }
.journey-items .active { color:var(--navy); font-weight:700; }.journey-items .active b { color:var(--gold); }
.vision-mission { display:grid; grid-template-columns: minmax(330px,.9fr) minmax(380px,1.15fr) minmax(300px,.85fr); gap:4vw; align-items:center; padding:125px 7vw; background:#eeece5; }
.section-heading h2, .first-stage h2 { margin:0; color:var(--navy); font-family:"Noto Sans SC",sans-serif; font-size:clamp(42px,4.6vw,68px); letter-spacing:-.08em; line-height:1.18; }.section-heading h2 { white-space:nowrap; }.section-heading h2 span, .first-stage h2 em { color:var(--gold); font-style:normal; }.vision-copy h3 { margin:0 0 10px; color:var(--navy); font-size:22px; }.vision-copy p { margin:0; color:#596b80; line-height:1.9; }.gold-rule { width:45px; height:2px; margin:28px 0; background:var(--gold); }.mission-pillars { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }.mission-pillars span { padding:8px 10px; border:1px solid rgba(199,147,37,.45); color:#846426; font-size:11px; }.vision-image { width:100%; max-height:510px; object-fit:cover; object-position:top; mix-blend-mode:multiply; }
.first-stage { display:grid; grid-template-columns: .9fr 1.1fr; min-height:680px; background:#f7f5ef; }.first-stage-copy { padding:105px 7vw; }.first-stage-copy > p:not(.eyebrow):not(.first-stage-lead) { max-width:410px; color:#68788a; line-height:1.8; }.first-stage-lead { margin:30px 0 8px; color:var(--navy); font-family:"Noto Sans SC",sans-serif; font-size:27px; letter-spacing:-.05em; }.stage-timeline { margin:38px 0; border-left:1px solid rgba(199,147,37,.6); }.stage-timeline div { display:flex; gap:22px; padding:0 0 25px 22px; }.stage-timeline b { min-width:78px; color:var(--navy); font-size:14px; }.stage-timeline span { color:#68788a; font-size:13px; line-height:1.6; }.stage-image-wrap { min-height:680px; overflow:hidden; }.stage-image-wrap img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.statement { background:var(--navy); color:white; padding:110px 10vw; }
.statement .eyebrow { color:var(--gold); }
.statement h2, .connect h2 { max-width:900px; margin-bottom:30px; font-family:"Noto Sans SC",sans-serif; font-size:clamp(36px,5vw,72px); letter-spacing:-.07em; line-height:1.18; }
.statement h2 span, .connect h2 span { color:#a9b7cb; }
.statement > p:last-child { max-width:480px; margin-bottom:0; color:#bac5d4; line-height:1.9; }
.network-note { display:grid; grid-template-columns:120px 1fr 60px; gap:30px; align-items:center; max-width:1160px; margin:auto; padding:100px 5vw; }
.section-number { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.14em; }.network-note h3 { margin-bottom:12px; color:var(--navy); font-size:28px; }.network-note p { margin:0; max-width:620px; color:#6e7c8e; line-height:1.8; }.round-arrow { display:grid; place-items:center; width:52px; height:52px; border:1px solid #d2d4cf; border-radius:50%; font-size:20px; color:var(--gold); }
.connect { padding:115px 10vw; background:var(--gold); color:var(--navy); }.connect .eyebrow { color:var(--navy); opacity:.65; }.connect h2 span { color:rgba(7,29,65,.55); }.button-light { color:var(--navy); border:1px solid rgba(7,29,65,.35); }.button-light span { color:var(--navy); }
.site-footer { display:flex; justify-content:space-between; padding:24px 5vw; color:#8591a0; background:var(--cream); font-size:10px; letter-spacing:.14em; }
@media (max-width:760px) { .site-header { padding:18px 22px; }.brand { width:126px; }.desktop-nav { display:none; }.header-link { font-size:9px; }.hero { display:block; min-height:auto; padding:65px 22px 20px; }.hero-intro { font-size:14px; }.hero-actions { gap:18px; flex-wrap:wrap; margin-top:28px; }.button-primary { padding:14px 16px; }.hero-art { min-height:340px; margin-top:25px; }.hero-logo { width:min(100%, 390px); }.art-orbit { opacity:.65; }.art-note { right:2%; bottom:0; font-size:8px; }.journey-strip { padding:10px 22px 58px; overflow:hidden; }.journey-items { min-width:620px; gap:22px; justify-content:flex-start; }.vision-mission { display:block; padding:75px 22px; }.section-heading { margin-bottom:45px; }.vision-copy { margin-bottom:35px; }.vision-image { max-height:350px; }.first-stage { display:block; }.first-stage-copy { padding:75px 22px; }.stage-image-wrap { min-height:430px; }.statement { padding:75px 22px; }.network-note { grid-template-columns:45px 1fr; padding:70px 22px; gap:15px; }.round-arrow { grid-column:2; }.network-note h3 { font-size:22px; }.connect { padding:75px 22px; }.site-footer { padding:22px; font-size:8px; gap:12px; flex-direction:column; } }

/* Web-native brand sections: the supplied reference boards guide the art direction, but are not used as page imagery. */
.vision-diagram { min-height:330px; position:relative; display:grid; place-items:center; }
.diagram-orbit { width:285px; height:285px; border:1px solid rgba(199,147,37,.35); border-radius:50%; }
.diagram-core { position:absolute; display:grid; place-items:center; width:122px; height:122px; border-radius:50%; color:white; background:var(--navy); box-shadow:0 0 0 13px rgba(199,147,37,.12); }
.diagram-core span { font-size:9px; letter-spacing:.18em; color:#d7b86d; }.diagram-core strong { font-family:"Noto Sans SC",sans-serif; font-size:24px; }
.diagram-node { position:absolute; display:flex; align-items:center; gap:7px; color:var(--navy); font-size:12px; font-weight:700; }.diagram-node span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:9px; }.node-call { top:15%; left:4%; }.node-equip { top:3%; right:5%; }.node-send { bottom:10%; left:8%; }.node-field { bottom:3%; right:2%; }.diagram-path { position:absolute; width:74%; height:54%; border-bottom:1px solid var(--gold); border-right:1px solid rgba(7,29,65,.2); border-radius:0 0 100% 0; transform:rotate(-28deg); }
.stage-preview { min-height:680px; position:relative; overflow:hidden; }.stage-preview-image { background:#1b1b1b url("./assets/home-path-field.png") center/cover no-repeat; }.stage-preview-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,29,65,.52),rgba(7,29,65,.06) 65%),linear-gradient(0deg,rgba(7,29,65,.24),transparent 55%); }.preview-label { position:absolute; z-index:1; left:10%; top:13%; display:grid; gap:15px; color:#fffaf0; text-shadow:0 2px 18px rgba(0,0,0,.28); }.preview-label small { letter-spacing:.2em; color:#f0cc75; }.preview-label strong { font-family:"Noto Sans SC",sans-serif; font-size:48px; line-height:1.18; letter-spacing:-.1em; }
.stage-page { background:var(--cream); }.stage-header { border-bottom:1px solid rgba(7,29,65,.08); }.stage-hero { min-height:680px; padding:80px 7vw 100px; align-items:center; }.stage-hero-image { display:flex; background:#eee7d6 url("./assets/camp-door-text-bg-16x9.png") center/cover no-repeat; position:relative; }.stage-hero-image:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,245,239,.94) 0%,rgba(247,245,239,.76) 35%,rgba(247,245,239,.08) 72%); }.stage-hero-copy { position:relative; z-index:1; max-width:530px; }.stage-hero h1 { margin-bottom:18px; }.stage-hero h1 em { color:var(--gold); font-style:normal; }.stage-hero-lead { margin:25px 0 7px; color:var(--navy); font-family:"Noto Sans SC",sans-serif; font-size:25px; letter-spacing:-.06em; line-height:1.65; }.stage-hero-body { max-width:460px; color:#627286; line-height:1.9; }
.stage-intro { display:grid; grid-template-columns:1fr 1fr; gap:10vw; padding:100px 12vw; background:var(--navy); color:white; }.stage-intro h2,.stage-flow h2,.stage-cta h2 { margin:0; font-family:"Noto Sans SC",sans-serif; font-size:clamp(35px,4.5vw,65px); letter-spacing:-.08em; line-height:1.18; }.stage-intro h2 span,.stage-cta h2 span { color:#b4c0d1; }.stage-intro>p { align-self:end; margin:0; color:#b8c4d3; line-height:2; }.stage-flow { display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; padding:120px 12vw; }.flow-list article { display:grid; grid-template-columns:50px 1fr; gap:25px; padding:0 0 35px; border-bottom:1px solid #deddd5; margin-bottom:35px; }.flow-list article>span { color:var(--gold); font-size:12px; font-weight:700; }.flow-list h3 { margin:0 0 12px; color:var(--navy); font-family:"Noto Sans SC",sans-serif; font-size:23px; }.flow-list h3 small { margin-left:12px; color:var(--gold); font-family:"DM Sans",sans-serif; font-size:10px; letter-spacing:.16em; }.flow-list p { margin:0; color:#657589; line-height:1.9; }.stage-outcomes { padding:90px 12vw; background:#ece9df; }.outcome-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:40px; border-top:1px solid #c9a963; border-bottom:1px solid #c9a963; }.outcome-grid div { display:grid; gap:10px; padding:28px 20px; border-right:1px solid #d2c9b1; }.outcome-grid div:last-child { border-right:0; }.outcome-grid b { color:var(--navy); font-family:"Noto Sans SC",sans-serif; font-size:20px; }.outcome-grid span { color:#758396; font-size:12px; line-height:1.6; }.stage-cta { padding:120px 12vw; background:var(--gold); color:var(--navy); }.stage-cta .eyebrow { color:var(--navy); opacity:.65; }.stage-cta>p:not(.eyebrow) { max-width:430px; color:rgba(7,29,65,.68); line-height:1.8; }.stage-cta .button { margin-top:15px; }.stage-page .site-footer { background:var(--navy); color:#b4c0d1; }
@media (max-width:760px) { .brand-wordmark strong { font-size:16px; }.brand-wordmark small { font-size:10px; letter-spacing:.18em; }.vision-mission { padding:80px 22px; }.section-heading h2 { white-space:normal; }.vision-diagram { min-height:300px; }.first-stage { display:block; }.stage-preview { min-height:430px; }.stage-hero { display:block; padding:60px 22px 0; }.stage-hero-copy { padding-bottom:60px; }.stage-visual { min-height:430px; margin:0 -22px; }.stage-intro,.stage-flow { display:block; padding:75px 22px; }.stage-intro>p { margin-top:35px; }.flow-heading { margin-bottom:55px; }.stage-outcomes { padding:75px 22px; }.outcome-grid { grid-template-columns:1fr 1fr; }.outcome-grid div:nth-child(2) { border-right:0; }.stage-cta { padding:75px 22px; } }

/* Unified CTA palette: navy foundation, gold accents, warm light type. */
.stage-cta { background:var(--navy); color:#fffaf0; }
.stage-cta .eyebrow { color:var(--gold); opacity:1; }
.stage-cta h2 { color:#fffaf0; }
.stage-cta h2 span { color:var(--gold); }
.stage-cta > p:not(.eyebrow) { max-width:500px; color:#b8c4d3; }
.stage-cta .button-light { color:var(--navy); background:var(--gold); border-color:var(--gold); }
.stage-cta .button-light span { color:var(--navy); }

/* Keep the footer brand consistent on every language/page variant. */
.site-footer span:first-child { font-size:0; }
.site-footer span:first-child::after { content:"LumenNet.Work / 路门网络"; font-size:12px; }