:root { --navy:#071750; --navy-deep:#040c2e; --red:#e53832; --ink:#111629; --paper:#f1f2f4; --warm:#f5f3ee; --line:#d9dce4; --muted:#646b7d; --white:#fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: white; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid #f08a86; outline-offset: 4px; }
[id] { scroll-margin-top: 88px; }
img { display: block; max-width: 100%; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.header { position: sticky; top: 0; z-index: 40; height: 80px; display: grid; grid-template-columns: 290px 1fr 150px; align-items: stretch; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(7,23,80,.09); backdrop-filter: blur(13px); }
.header-logo { display: flex; align-items: center; padding-left: max(28px, calc((100vw - 1440px)/2)); }
.header-logo > a { display: flex; align-items: center; gap: 13px; }
.logo-symbol { width: 48px; height: 48px; display: grid; place-items: center; color: white; background: var(--navy); font: 800 18px/1 Georgia, serif; letter-spacing: -.08em; }
.header-logo a > span:last-child { display: grid; }
.header-logo strong { font-size: 18px; letter-spacing: .13em; }
.header-logo small { margin-top: 3px; color: #7b8090; font: 700 8px/1 Arial, sans-serif; letter-spacing: .17em; }
.nav { display: flex; align-items: stretch; justify-content: center; gap: 34px; }
.nav a { position: relative; display: flex; align-items: center; font-size: 13px; font-weight: 700; }
.nav a::after { position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; content:""; background: var(--red); transition: right .25s ease; }
.nav a:hover::after { right: 0; }
.header-contact { padding: 0 23px; display: flex; align-items: center; justify-content: space-between; color: white; background: var(--navy); font: 700 11px/1 Arial, sans-serif; letter-spacing: .1em; }
.header-contact:hover { background: #10266b; }
.menu { display: none; position: relative; align-self: center; justify-self: end; margin-right: 18px; }
.menu summary { width: 46px; height: 46px; display: grid; place-items:center; list-style:none; background: var(--paper); cursor:pointer; }
.menu summary::-webkit-details-marker { display:none; }
.menu nav { position:absolute; right:0; top:56px; min-width:220px; padding:12px; display:grid; background:white; box-shadow:0 20px 50px rgba(4,12,46,.18); }
.menu nav a { padding:12px 10px; border-bottom:1px solid var(--line); }
.hero { position:relative; height:clamp(520px,38vw,620px); min-height:520px; max-height:620px; display:grid; grid-template-columns:minmax(400px,.96fr) minmax(500px,1.04fr); color:white; background:var(--navy); overflow:hidden; }
.hero::before { position:absolute; inset:0 50% 0 0; content:""; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:70px 70px; }
.hero-side { position:absolute; left:22px; top:50%; z-index:2; color:#7a89bc; font:700 9px/1 Arial,sans-serif; letter-spacing:.22em; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); }
.hero-copy { position:relative; z-index:2; width:100%; min-width:0; align-self:center; padding:54px clamp(34px,3.2vw,64px) 66px max(36px, calc((100vw - 1180px)/2)); }
.kicker,.section-label { margin:0 0 24px; color:#7b92d5; font:700 11px/1 Arial,sans-serif; letter-spacing:.19em; }
.hero-copy h1 { width:min(100%,560px); margin:0; font-size:clamp(40px,3.2vw,58px); line-height:1.18; letter-spacing:-.045em; word-break:keep-all; overflow-wrap:normal; }
.hero-copy h1 span { color:#7e96dd; }
.hero-copy > p:not(.kicker) { max-width:540px; margin:27px 0 0; color:#bac4e2; font-size:15px; line-height:1.95; }
.text-link { display:inline-flex; align-items:center; gap:22px; margin-top:36px; padding-bottom:9px; border-bottom:1px solid #6f7fb2; font-size:14px; font-weight:700; }
.text-link svg { color:#9fb0e3; transition:transform .2s ease; }
.text-link:hover svg { transform:translateX(5px); }
.hero-images { position:relative; min-width:0; margin:34px 46px 34px 0; overflow:visible; background:#e8ebf1; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.hero-main-image { position:absolute; inset:0; overflow:hidden; }
.hero-main-image::after,.hero-sub-image::after { position:absolute; inset:0; content:""; background:linear-gradient(to top,rgba(4,12,46,.55),transparent 55%); }
.hero-main-image img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-main-image > span,.hero-sub-image > span { position:absolute; z-index:2; left:25px; bottom:23px; color:white; font:700 10px/1 Arial,sans-serif; letter-spacing:.2em; }
.hero-sub-image { position:absolute; left:-34px; bottom:22px; z-index:3; width:36%; height:40%; border:7px solid var(--navy); overflow:hidden; box-shadow:0 16px 35px rgba(0,0,0,.25); }
.hero-sub-image img { width:100%; height:100%; object-fit:cover; }
.hero-code { position:absolute; z-index:4; right:18px; top:18px; width:132px; height:132px; padding:20px; display:grid; align-content:center; color:var(--navy); background:white; box-shadow:0 12px 30px rgba(4,12,46,.16); }
.hero-code svg { color:var(--red); }
.hero-code strong { margin-top:11px; font:800 23px/1 Arial,sans-serif; }
.hero-code small { margin-top:7px; color:#747b8e; font:700 7px/1.3 Arial,sans-serif; letter-spacing:.12em; }
.scroll { position:absolute; left:50%; bottom:24px; z-index:5; display:flex; align-items:center; gap:10px; color:#c8d0e6; font:700 8px/1 Arial,sans-serif; letter-spacing:.18em; }
.scroll i { width:42px; height:1px; background:#c8d0e6; }
.category-strip { min-height:104px; display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid var(--line); }
.category-strip a { padding:23px 18px; display:grid; align-content:center; text-align:center; border-right:1px solid var(--line); font-size:13px; font-weight:700; }
.category-strip a:hover { color:white; background:var(--navy); }
.category-strip span { margin-bottom:8px; color:var(--red); font:700 9px/1 Arial,sans-serif; }
.category-strip small { margin-top:6px; color:#8b91a0; font:700 7px/1 Arial,sans-serif; letter-spacing:.11em; }
.intro { padding:110px 0; background:var(--warm); }
.intro-grid { display:grid; grid-template-columns:230px 1fr; gap:80px; }
.intro .section-label { color:var(--red); padding-top:12px; }
.intro h2,.title-row h2,.production-heading h2,.company h2,.contact h2 { margin:0; font-size:clamp(38px,4vw,58px); line-height:1.25; letter-spacing:-.045em; }
.intro-grid > div > p { max-width:780px; margin:27px 0 0; color:var(--muted); font-size:15px; line-height:2; }
.intro-points { display:flex; flex-wrap:wrap; gap:14px 32px; margin-top:35px; padding-top:25px; border-top:1px solid #d4d2cc; }
.intro-points span { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.intro-points svg { color:var(--red); }
.products { padding:126px 0; background:white; }
.title-row { display:grid; grid-template-columns:1fr .7fr; align-items:end; gap:70px; margin-bottom:62px; }
.title-row .section-label { color:var(--red); margin-bottom:20px; }
.title-row > p { max-width:430px; margin:0 0 5px; color:var(--muted); font-size:14px; line-height:1.9; }
.category-list { border-top:1px solid var(--line); }
.category-card { position:relative; display:grid; grid-template-columns:42% 1fr; min-height:340px; border-bottom:1px solid var(--line); }
.category-card:nth-child(even) { grid-template-columns:1fr 42%; }
.category-card:nth-child(even) .category-image { order:2; }
.category-card:nth-child(even) .category-copy { order:1; padding-left:0; padding-right:70px; }
.category-image { position:relative; overflow:hidden; background:#e7eaf0; }
.category-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.86); transition:transform .5s ease; }
.category-card:hover .category-image img { transform:scale(1.035); }
.category-image > span { position:absolute; left:0; top:0; width:52px; height:52px; display:grid; place-items:center; color:white; background:var(--red); font:700 10px/1 Arial,sans-serif; }
.category-copy { align-self:center; padding:52px 90px 52px 70px; }
.category-copy > p:first-child { margin:0 0 10px; color:#7a82a1; font:700 10px/1 Arial,sans-serif; letter-spacing:.17em; }
.category-copy h3 { margin:0; font-size:31px; letter-spacing:.02em; }
.category-copy > strong { display:block; margin-top:17px; color:var(--navy); font-size:13px; }
.category-description { max-width:600px; margin:15px 0 19px; color:var(--muted); font-size:13px; line-height:1.85; }
.category-copy a { display:inline-flex; align-items:center; gap:11px; color:var(--navy); font-size:12px; font-weight:700; }
.category-copy a svg { color:var(--red); }
.category-index { position:absolute; right:18px; bottom:12px; color:#eceef2; font:800 56px/1 Arial,sans-serif; pointer-events:none; }
.category-card:nth-child(even) .category-index { right:auto; left:18px; }
.samples { padding:126px 0; color:white; background:var(--navy-deep); }
.light-title .section-label { color:#8298df; }
.light-title > p { color:#a9b2d0; }
.sample-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); }
.sample-card { display:block; background:#071543; transition:background .25s ease, transform .25s ease; }
.sample-image { height:245px; overflow:hidden; background:#f7f8fa; }
.sample-image img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s ease; }
.sample-card:hover { background:#0c205c; transform:translateY(-3px); }
.sample-card:hover .sample-image img { transform:scale(1.04); }
.sample-copy { min-height:118px; padding:25px 23px; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:16px; }
.sample-copy > span { color:#7284bd; font:700 9px/1 Arial,sans-serif; }
.sample-copy h3 { margin:0; font-size:17px; }
.sample-copy p { margin:8px 0 0; color:#9fa9c7; font-size:11px; }
.sample-copy > svg { color:#7187cb; }
.production { padding:126px 0; background:var(--paper); }
.production-heading { display:grid; grid-template-columns:220px 1fr .7fr; gap:55px; align-items:end; margin-bottom:60px; }
.production-heading .section-label { color:var(--red); align-self:start; padding-top:14px; }
.production-heading > p:last-child { margin:0 0 5px; color:var(--muted); font-size:14px; line-height:1.9; }
.production-grid { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:repeat(2,245px); gap:12px; }
.production-grid article { position:relative; overflow:hidden; }
.production-grid article::after { position:absolute; inset:0; content:""; background:linear-gradient(to top,rgba(4,12,46,.67),transparent 58%); }
.production-grid article > img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.production-grid article:hover > img { transform:scale(1.035); }
.production-large { grid-row:1 / span 2; }
.production-grid article > div { position:absolute; z-index:2; left:27px; right:27px; bottom:24px; display:flex; align-items:center; gap:15px; color:white; }
.production-grid article > div span { display:grid; gap:6px; }
.production-grid small { color:#c4cce2; font:700 8px/1 Arial,sans-serif; letter-spacing:.16em; }
.production-grid strong { font-size:19px; }
.flow { margin-top:70px; padding:43px 45px; background:white; }
.flow h3 { margin:0 0 30px; font-size:21px; }
.flow > div { display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.flow > div span { position:relative; min-height:105px; padding:23px 18px; display:grid; align-content:center; gap:13px; border-right:1px solid var(--line); }
.flow > div span:last-child { border-right:0; }
.flow i { color:var(--red); font:700 9px/1 Arial,sans-serif; font-style:normal; }
.flow strong { font-size:13px; }
.flow > p { margin:18px 0 0; color:#9096a4; font-size:10px; }
.company { padding:118px 0; color:white; background:var(--navy); }
.company-grid { display:grid; grid-template-columns:360px 1fr; gap:100px; align-items:center; }
.company-mark { height:300px; display:grid; place-items:center; align-content:center; border:1px solid rgba(255,255,255,.18); background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:50px 50px; }
.company-mark span { font:italic 800 90px/1 Georgia,serif; letter-spacing:-.12em; }
.company-mark small { margin-top:18px; color:#91a0cd; font:700 9px/1 Arial,sans-serif; letter-spacing:.2em; }
.company .section-label { color:#7f95dc; }
.company-grid > div:last-child > p:not(.section-label) { max-width:650px; margin:25px 0 0; color:#bbc4df; font-size:14px; line-height:2; }
.company-grid .demo-note { color:#8996bd !important; font-size:11px !important; }
.outline-link { display:inline-flex; align-items:center; gap:25px; margin-top:30px; padding:15px 20px; border:1px solid rgba(255,255,255,.35); font-size:13px; font-weight:700; }
.outline-link svg { color:#99abe0; }
.contact { padding:90px 0; background:var(--warm); }
.contact-box { position:relative; min-height:320px; padding:60px 80px; display:grid; grid-template-columns:1fr .75fr; align-items:center; gap:60px; color:white; background:var(--red); }
.contact .section-label { color:#ffd0ce; }
.contact-box > div:first-child > p:last-child { margin:20px 0 0; color:#ffe2df; font-size:14px; }
.contact-detail { display:grid; padding-left:45px; border-left:1px solid rgba(255,255,255,.35); }
.contact-detail span { margin:14px 0 5px; color:#ffd4d2; font-size:10px; }
.contact-detail a { font:700 20px/1.5 Arial,"Microsoft YaHei",sans-serif; }
.contact-detail small { margin-top:10px; color:#ffd0cd; font-size:9px; }
.contact-arrow { position:absolute; right:0; bottom:0; width:72px; height:72px; display:grid; place-items:center; color:var(--red); background:white; }
footer { color:#a7aec5; background:#030922; }
.footer-main { min-height:155px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo { display:flex; align-items:center; gap:15px; }
.footer-logo > span { color:white; font:italic 800 34px/1 Georgia,serif; letter-spacing:-.11em; }
.footer-logo strong { display:grid; color:white; font-size:16px; letter-spacing:.1em; }
.footer-logo small { margin-top:4px; color:#707a9d; font:700 7px/1 Arial,sans-serif; letter-spacing:.14em; }
.footer-main > div { display:flex; gap:30px; font-size:11px; }
.footer-main > div a:hover { color:white; }
.footer-bottom { min-height:64px; display:flex; align-items:center; justify-content:space-between; font-size:9px; }
@media (max-width:1050px) {
  .header { grid-template-columns:250px 1fr 136px; }
  .nav { gap:18px; }
  .hero { grid-template-columns:1fr 1fr; }
  .hero-copy { padding-left:48px; }
  .hero-copy h1 { font-size:clamp(36px,4.4vw,48px); }
  .hero-images { margin-right:28px; }
  .category-strip { grid-template-columns:repeat(3,1fr); }
  .category-strip a { border-bottom:1px solid var(--line); }
  .category-card,.category-card:nth-child(even) { grid-template-columns:44% 1fr; }
  .category-card:nth-child(even) .category-image { order:0; }
  .category-card:nth-child(even) .category-copy { order:0; padding:45px 55px; }
  .category-card:nth-child(even) .category-index { left:auto; right:18px; }
  .category-copy { padding:45px 55px; }
  .production-heading { grid-template-columns:1fr 1fr; }
  .production-heading .section-label { grid-column:1/-1; }
}

@media (max-width:780px) {
  .wrap { width:min(100% - 32px,1180px); }
  .header { height:72px; grid-template-columns:1fr auto; }
  .header-logo { padding-left:17px; }
  .logo-symbol { width:42px; height:42px; }
  .nav,.header-contact { display:none; }
  .menu { display:block; }
  .hero { height:auto; min-height:0; max-height:none; grid-template-columns:1fr; padding-bottom:0; }
  .hero-side { display:none; }
  .hero-copy { min-height:460px; padding:66px 25px 82px; }
  .hero-copy h1 { font-size:clamp(36px,10vw,42px); }
  .hero-images { min-height:320px; margin:0 16px 46px; }
  .hero-main-image { inset:0; }
  .hero-sub-image { left:-8px; bottom:16px; width:40%; height:38%; border-width:5px; }
  .hero-code { top:14px; right:14px; width:112px; height:112px; padding:16px; }
  .hero-code strong { font-size:20px; }
  .scroll { display:none; }
  .category-strip { grid-template-columns:repeat(2,1fr); }
  .category-strip a { min-height:100px; }
  .intro,.products,.samples,.production { padding:88px 0; }
  .intro-grid { grid-template-columns:1fr; gap:22px; }
  .intro h2,.title-row h2,.production-heading h2,.company h2,.contact h2 { font-size:38px; }
  .intro-points { align-items:flex-start; flex-direction:column; }
  .title-row,.production-heading { grid-template-columns:1fr; gap:25px; margin-bottom:44px; }
  .category-card,.category-card:nth-child(even) { grid-template-columns:1fr; }
  .category-card:nth-child(even) .category-image { order:0; }
  .category-image { height:230px; }
  .category-copy,.category-card:nth-child(even) .category-copy { padding:34px 25px 46px; }
  .category-index { display:none; }
  .sample-grid { grid-template-columns:1fr; }
  .sample-image { height:260px; }
  .production-grid { grid-template-columns:1fr; grid-template-rows:repeat(3,260px); }
  .production-large { grid-row:auto; }
  .flow { padding:34px 25px; }
  .flow > div { grid-template-columns:repeat(2,1fr); }
  .flow > div span { border-bottom:1px solid var(--line); }
  .company { padding:86px 0; }
  .company-grid { grid-template-columns:1fr; gap:50px; }
  .company-mark { height:230px; }
  .contact { padding:70px 0; }
  .contact-box { padding:44px 28px 78px; grid-template-columns:1fr; gap:35px; }
  .contact-detail { padding:30px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.35); }
  .contact-detail a { font-size:16px; }
  .footer-main { padding:38px 0; align-items:flex-start; flex-direction:column; gap:28px; }
  .footer-main > div { flex-wrap:wrap; gap:16px 24px; }
  .footer-bottom { padding:20px 0; align-items:flex-start; flex-direction:column; gap:8px; }
}