:root {
  --ink:#20343f; --navy:#11232d; --deep:#0b1922; --muted:#637079;
  --line:#d9dedc; --paper:#f1f2ee; --orange:#b46637; --light-orange:#d7a07b;
  --shell:1280px; font-family:Arial,"Microsoft YaHei",sans-serif; color:var(--ink);
  background:#fff; font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0}
h1,h2,h3,p{margin:0}
button{font:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
.shell{max-width:var(--shell);width:calc(100% - 112px);margin:auto}
.skip-link{position:fixed;left:20px;top:-100px;z-index:20;background:#fff;padding:14px}
.skip-link:focus{top:20px}
.eyebrow{text-transform:uppercase;color:var(--orange);font-size:12px;letter-spacing:1.6px;font-weight:500;margin-bottom:20px}
h1,h2,h3{font-weight:400;letter-spacing:-1.2px}
h2{font-size:36px;line-height:1.25}
p{font-size:16px;line-height:1.8}
.site-header{background:var(--navy);color:#fff}
.header-inner{height:88px;display:flex;align-items:center;gap:30px}
.brand{width:224px;flex-shrink:0}
#navigation{display:flex;align-items:center;justify-content:flex-end;gap:26px;flex:1}
#navigation a{font-size:14px;white-space:nowrap;color:#d4dce1;padding:10px 0;border-bottom:1px solid transparent}
#navigation a:hover,#navigation [aria-current]{color:#fff;border-bottom-color:var(--light-orange)}
.language{display:flex;align-items:center;gap:7px;font-size:12px;color:#8ca0ad}
.language button{background:none;border:0;color:#a6b1b8;padding:8px 2px;font-size:13px}
.language [aria-pressed=true]{color:#fff}
.menu-toggle{display:none}

/* 1 — Team and company. */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-inner{position:relative;min-height:610px;display:flex;align-items:center}
.hero-copy{position:relative;z-index:2;width:53%;padding:70px 0 56px}
.hero h1{font-size:clamp(42px,4.2vw,62px);line-height:1.1;letter-spacing:-2.1px;margin-bottom:28px}
.hero .eyebrow{color:#ddb798;margin-bottom:26px}
.hero-description{max-width:470px;color:#d5dfe4;font-size:16px;line-height:1.9}
.hero-image{position:absolute;inset:0;background:var(--navy)}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.65)}
.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,24,33,.85) 0%,rgba(10,24,33,.68) 30%,rgba(10,24,33,.24) 57%,rgba(10,24,33,.04) 82%),linear-gradient(0deg,rgba(10,24,33,.36),transparent 34%)}
.hero-image>span{position:absolute;bottom:23px;right:32px;z-index:1;color:#e1e7e9;font-size:12px;letter-spacing:.8px;text-shadow:0 1px 5px #000}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:33px}
.primary-link{display:inline-flex;gap:34px;justify-content:space-between;align-items:center;color:#132b36;background:#e0b28b;padding:15px 20px;font-size:14px;font-weight:500}
.primary-link:hover{background:#efc29e}
.text-link{display:inline-flex;gap:23px;font-size:14px;border-bottom:1px solid #80949f;padding-bottom:8px;color:#e0e7eb}
.text-link span:last-child{color:var(--light-orange)}
.hero-signature{font-size:12px;letter-spacing:2px;color:#b0c0c9;margin-top:43px}

/* 2 — Technical directions and interactive principles. */
.section{padding:72px 0}
.section-heading{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:60px;margin-bottom:33px}
.section-heading>p{max-width:395px;margin:0 0 3px auto;color:var(--muted);font-size:16px}
.tech-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tech-tabs button{border:0;border-bottom:2px solid transparent;background:none;text-align:left;display:flex;gap:12px;align-items:center;padding:22px 15px 20px;color:#596871;font-size:14px;line-height:1.5;min-width:0}
.tech-tabs button>span:last-child{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.tab-number{font-family:Consolas,monospace;font-size:12px;color:#7a898f}
.tech-tabs button:hover{background:#f7f8f5}
.tech-tabs [aria-selected=true]{color:var(--ink);border-bottom-color:var(--orange);background:#f4f5f1}
.tech-tabs [aria-selected=true] .tab-number{color:var(--orange)}
.technical-panel{display:grid;grid-template-columns:33% 67%;background:var(--paper);min-height:420px}
.technical-copy{padding:32px 28px 28px;display:flex;flex-direction:column}
.technical-kicker{font-family:Consolas,"Microsoft YaHei",monospace;letter-spacing:1px;font-size:12px;color:#995027;margin-bottom:20px;line-height:1.5}
.technical-copy h3{font-size:31px;line-height:1.22;margin-bottom:19px;letter-spacing:-1px}
.technical-copy>p:not(.technical-kicker){font-size:16px;line-height:1.75;color:var(--muted)}
.technical-copy .tech-tags{font-size:12px!important;line-height:1.8!important;margin-top:20px;color:#52636c!important}
.visual-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:25px}
.visual-controls button{border:1px solid #b8c2c4;padding:9px 11px;background:transparent;font-size:13px;color:var(--ink)}
.visual-controls button:hover{border-color:var(--ink)}
.visual-controls [aria-pressed=true]{color:#fff;background:var(--ink);border-color:var(--ink)}
.diagram{min-width:0;display:flex;flex-direction:column;background:var(--navy);color:#b1c1c9;overflow:hidden}
.diagram-header,.diagram-footer{padding:18px 24px;display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:12px;letter-spacing:.5px;font-family:Consolas,"Microsoft YaHei",monospace;line-height:1.5}
.diagram-label{color:#adbdc5;font-size:12px}
.diagram-header{border-bottom:1px solid #ffffff0c}
.diagram-footer{border-top:1px solid #ffffff0c;letter-spacing:0;margin-top:auto}
.diagram-footer span:last-child{color:#a1b0b8}
canvas{display:block;width:100%;height:310px;touch-action:pan-y;outline:none}
canvas.is-rotatable{cursor:grab}
canvas.is-rotatable:active{cursor:grabbing}
.technical-note,.project-note{font-size:12px;line-height:1.7;color:#69767c;margin-top:14px}

/* 3 — Selected projects, followed by a compact contact invitation. */
.applications{background:var(--paper);padding-bottom:0}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.project-card{min-width:0}
.project-card>img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;filter:saturate(.65)}
.project-copy{padding-top:21px}
.project-number{font-family:Consolas,monospace;font-size:12px;color:#8f562f;display:block;margin-bottom:11px}
.project-card h3{font-size:22px;letter-spacing:-.45px;line-height:1.45;margin-bottom:8px}
.project-card p{color:var(--muted);font-size:16px;line-height:1.7;max-width:350px}
.project-note{margin-top:23px}
.contact-strip{border-top:1px solid #c9d0ce;margin-top:43px;padding:34px 0 38px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.contact-strip>p{font-size:25px;line-height:1.5;letter-spacing:-.5px}
.contact-links{display:flex;align-items:center;gap:30px;font-size:14px;white-space:nowrap}
.contact-email{display:flex;align-items:center;gap:22px;font-size:19px;border-bottom:1px solid #9daaaa;padding:6px 0}
.contact-email span{color:var(--orange)}
.site-footer{background:var(--deep);color:#a3b4be;padding:35px 0}
.footer-inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;align-items:start}
.footer-inner img{width:170px;opacity:.9;margin-bottom:18px}
.footer-inner p{font-size:12px;line-height:1.8}
.footer-legal{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:13px 22px;font-size:12px}
.footer-legal span{width:100%;text-align:right;color:#91a5af;margin-top:5px}
html[lang=zh-CN] h1,html[lang=zh-CN] h2,html[lang=zh-CN] h3{letter-spacing:-.5px}
html[lang=zh-CN] .hero h1{line-height:1.3}
html[lang=zh-CN] .hero-description{max-width:445px;line-height:2}
html[lang=zh-CN] .technical-copy h3{line-height:1.4}
html[lang=zh-CN] .technical-copy>p{line-height:1.9}

@media(max-width:1150px){
  .shell{width:calc(100% - 64px)}.header-inner{gap:22px}.brand{width:192px}#navigation{gap:18px}
  #navigation a{font-size:13px}.hero-copy{width:56%}.hero h1{font-size:49px}
  .hero-description{max-width:420px}.hero-inner{min-height:580px}
  .section-heading{gap:40px}.tech-tabs button{gap:9px;padding-inline:10px;font-size:13px}
  .technical-panel{grid-template-columns:36% 64%}.technical-copy{padding:29px 23px}.technical-copy h3{font-size:29px}
  .project-grid{gap:23px}.project-card h3{font-size:20px}.contact-strip>p{font-size:22px}
  .contact-links{gap:23px}.contact-email{font-size:17px}
}
@media(max-width:900px){
  .header-inner{height:76px;position:relative;gap:25px}.brand{width:205px}
  .menu-toggle{display:flex;align-items:center;gap:13px;margin-left:auto;background:none;border:0;color:#dce3e6;font-size:14px;padding:10px 0}
  .menu-toggle span:last-child{font-size:19px}
  #navigation{display:none;position:absolute;left:-32px;right:-32px;top:76px;background:var(--navy);z-index:5;padding:22px 32px 30px;border-top:1px solid #334650;box-shadow:0 15px 20px #0002}
  #navigation.is-open{display:flex;align-items:flex-start;flex-direction:column;gap:12px}
  #navigation a{font-size:14px}.hero-inner{min-height:560px}.hero-copy{width:67%;padding:55px 0}
  .hero h1{font-size:43px}.hero-image img{object-position:61% center}.hero-image:after{background:linear-gradient(90deg,rgba(10,24,33,.92),rgba(10,24,33,.68) 42%,rgba(10,24,33,.08))}
  .hero-description{max-width:380px}.section{padding:57px 0}
  .section-heading{gap:30px}.section-heading h2{font-size:32px}
  .technical-panel{grid-template-columns:1fr}.technical-copy{display:grid;grid-template-columns:1fr 1.2fr;column-gap:32px;padding:30px}
  .technical-kicker{grid-column:1/-1;margin-bottom:16px}
  .technical-copy h3{grid-column:1;grid-row:2/4;margin:0}
  .technical-copy #tech-description{grid-column:2;grid-row:2}
  .technical-copy #tech-tags{grid-column:2;grid-row:3;margin-top:12px}
  .visual-controls{grid-column:1/-1;padding-top:22px;margin:0}
  .diagram canvas{height:330px}.project-grid{gap:20px}.project-card h3{font-size:18px}
  .project-card p{font-size:15px}.applications{padding-bottom:0}
  .contact-strip{align-items:flex-start;gap:25px}.contact-strip>p{font-size:22px;max-width:320px}
  .contact-links{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-inner{grid-template-columns:1.1fr 1fr}
  .footer-legal{grid-column:1/-1;justify-content:flex-start;border-top:1px solid #263c49;padding-top:20px}
  .footer-legal span{width:auto;margin:0 0 0 auto}
}
@media(max-width:600px){
  .shell{width:calc(100% - 40px)}.header-inner{height:70px;gap:20px}.brand{width:160px}
  .menu-toggle span:first-child{display:none}
  #navigation{left:-20px;right:-20px;top:70px;padding:22px 20px}.language{gap:5px}.language button{font-size:12px}
  .hero{display:flex;flex-direction:column}.hero-inner{min-height:0;order:0}.hero-copy{width:100%;padding:44px 0 28px}
  .hero h1{font-size:38px;letter-spacing:-1.4px;margin-bottom:22px}.hero .eyebrow{font-size:12px;letter-spacing:1px;margin-bottom:23px}
  .hero-description{font-size:16px;max-width:390px}.hero-actions{gap:24px;margin-top:26px;flex-wrap:wrap}
  .primary-link{font-size:14px;padding:14px 15px;gap:21px}.hero .text-link{font-size:14px;gap:13px}
  .hero-signature{font-size:12px;letter-spacing:1.5px;margin-top:29px}
  .hero-image{position:relative;inset:auto;order:1;width:100%;height:270px}
  .hero-image img{object-position:84% center}
  .hero-image:after{background:linear-gradient(180deg,var(--navy),rgba(17,35,45,.03) 30%,rgba(17,35,45,.15))}
  .hero-image>span{font-size:12px;right:20px;bottom:16px;letter-spacing:.2px}
  .section{padding:44px 0}.section-heading{display:block;margin-bottom:27px}
  .section-heading h2{font-size:30px}.section-heading .eyebrow{margin-bottom:15px;font-size:12px}
  .section-heading>p{max-width:390px;margin:15px 0 0;font-size:16px}
  .tech-tabs{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0}
  .tech-tabs button{padding:16px 9px;font-size:14px;border-bottom:1px solid #cbd3d2;min-height:57px}
  .tech-tabs [aria-selected=true]{border-bottom:2px solid var(--orange)}
  .technical-copy{display:block;padding:28px 22px}
  .technical-kicker{font-size:12px;margin-bottom:18px}.technical-copy h3{font-size:28px;margin-bottom:17px}
  .technical-copy #tech-tags{font-size:12px!important;margin-top:16px}
  .visual-controls{padding-top:22px}.diagram canvas{height:245px}
  .diagram-header,.diagram-footer{padding:15px;gap:12px;font-size:12px;flex-wrap:wrap}
  .diagram-label{font-size:12px}.technical-note{font-size:12px;line-height:1.65}
  .applications{padding-bottom:0}.project-grid{grid-template-columns:1fr;gap:30px}
  .project-copy{padding-top:17px}.project-number{margin-bottom:8px}
  .project-card h3{font-size:22px;margin-bottom:6px}.project-card p{font-size:16px;max-width:none}
  .project-note{margin-top:24px}.contact-strip{display:block;padding:28px 0 33px;margin-top:30px}
  .contact-strip>p{font-size:23px;max-width:330px}.contact-links{margin-top:19px;gap:16px;font-size:14px}
  .contact-email{font-size:20px;gap:35px}
  .footer-inner{grid-template-columns:1fr;gap:24px}.footer-inner img{width:158px;margin-bottom:14px}
  .site-footer{padding:30px 0}.footer-legal{gap:15px}.footer-legal span{margin:0;width:100%;text-align:left}
  html[lang=zh-CN] .hero h1{font-size:37px}html[lang=zh-CN] .hero-description{max-width:390px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}