:root { --ink:#102032; --muted:#667384; --line:#dce4ea; --paper:#fff; --soft:#f4f7f7; --navy:#102f45; --teal:#0c7a78; --teal-dark:#075c61; --gold:#c99131; --gold-soft:#f8ead1; --shadow:0 16px 40px rgba(11,35,48,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,"Microsoft YaHei",sans-serif; color:var(--ink); background:var(--soft); line-height:1.58; }
a { color:inherit; text-decoration:none; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px; padding:12px clamp(18px,5vw,56px); background:rgba(255,255,255,.95); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; flex-direction:column; min-width:160px; line-height:1.22; }
.brand strong { color:var(--navy); font-size:23px; letter-spacing:0; }
.brand span { color:var(--muted); font-size:12px; }
.nav,.lang,.actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.nav a,.lang button { min-height:36px; border:1px solid transparent; background:transparent; color:var(--ink); border-radius:6px; padding:7px 10px; font:inherit; font-size:13px; cursor:pointer; }
.nav a:hover,.lang button:hover { background:#edf4f4; }
.lang { padding-left:8px; border-left:1px solid var(--line); }
.lang button { min-width:42px; border-color:var(--line); background:#fff; }
.lang button.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.hero { position:relative; min-height:590px; display:flex; align-items:end; color:#fff; overflow:hidden; background:var(--navy); }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(7,24,37,.82) 0%,rgba(7,24,37,.54) 44%,rgba(7,24,37,.26) 100%),var(--hero-image); background-size:cover; background-position:center; }
.hero-inner { position:relative; z-index:1; width:min(1160px,calc(100% - 36px)); margin:0 auto; padding:110px 0 72px; }
.eyebrow,.section-kicker,.tag { display:inline-flex; align-items:center; width:fit-content; color:var(--gold); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0; }
.section-kicker { margin-bottom:8px; color:var(--teal-dark); }
.section-kicker.light { color:#f5c76f; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { max-width:850px; margin:12px 0 18px; font-size:clamp(36px,5vw,66px); line-height:1.05; letter-spacing:0; }
.hero p { max-width:720px; margin:0 0 26px; color:rgba(255,255,255,.88); font-size:18px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--gold); border-radius:6px; padding:10px 16px; background:var(--gold); color:#101820; font-weight:700; line-height:1.2; }
.button:hover { transform:translateY(-1px); }
.button.secondary { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34); }
.section { width:min(1160px,calc(100% - 36px)); margin:0 auto; padding:54px 0; }
.intro-panel { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(280px,1fr); gap:28px; align-items:center; }
.intro-panel p { margin:0; color:var(--muted); font-size:17px; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
h2 { margin:0; color:var(--navy); font-size:clamp(25px,3vw,36px); line-height:1.18; letter-spacing:0; }
.section-title p { max-width:590px; margin:0; color:var(--muted); }
.category-grid,.factory-grid,.feature-grid,.product-grid { display:grid; gap:16px; }
.category-grid,.factory-grid,.feature-grid { grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.product-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.category-card,.factory-card,.feature,.product-card,.contact-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.category-card,.factory-card,.product-card { display:flex; flex-direction:column; min-width:0; }
.category-card:hover,.factory-card:hover,.product-card:hover { border-color:rgba(12,122,120,.45); box-shadow:var(--shadow); transform:translateY(-2px); }
.category-image,.factory-card .cover,.product-image { background-color:#e7edf0; background-size:cover; background-position:center; }
.category-image,.factory-card .cover { aspect-ratio:16/9; }
.product-image { display:grid; place-items:center; aspect-ratio:4/3; padding:16px; color:var(--muted); text-align:center; font-size:13px; }
.category-body,.factory-card .body,.product-body,.feature { padding:16px; }
.category-card strong,.factory-card strong,.product-card strong { display:block; color:var(--navy); font-size:17px; line-height:1.28; margin-bottom:7px; }
.category-card span,.factory-card .body > span:not(.tag),.product-body p,.feature p { color:var(--muted); margin:0; font-size:14px; }
.tag { margin-bottom:8px; padding:4px 7px; border-radius:4px; background:var(--gold-soft); color:#7a4f0e; }
.product-meta { display:flex; flex-wrap:wrap; gap:7px; margin:13px 0 12px; }
.chip { display:inline-flex; max-width:100%; padding:4px 8px; border-radius:4px; background:#edf4f4; color:#31505c; font-size:12px; line-height:1.35; }
.chip.strong { background:var(--gold-soft); color:#74501b; font-weight:700; }
.text-link { display:inline-flex; color:var(--teal-dark); font-weight:700; font-size:14px; }
.feature { min-height:142px; }
.feature h3 { margin:0 0 8px; color:var(--navy); font-size:18px; line-height:1.25; }
.contact-band { background:var(--navy); color:#fff; }
.contact-band h2 { color:#fff; }
.contact-band p { max-width:680px; color:rgba(255,255,255,.82); }
.contact-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,380px); gap:24px; align-items:center; }
.contact-card { display:grid; gap:10px; padding:18px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.contact-card .button { width:100%; }
.contact-lines { display:grid; gap:6px; margin-top:4px; color:rgba(255,255,255,.82); font-size:14px; }
.contact-lines strong { color:#fff; }
.footer { padding:24px 18px; text-align:center; color:var(--muted); background:#fff; border-top:1px solid var(--line); font-size:13px; }
@media (max-width:820px) { .topbar,.section-title,.intro-panel,.contact-layout { align-items:flex-start; grid-template-columns:1fr; } .topbar { position:static; } .nav { width:100%; } .lang { width:100%; padding-left:0; border-left:0; } .hero { min-height:520px; } .hero-inner { padding:88px 0 54px; } h1 { font-size:40px; } }
@media (max-width:480px) { .topbar,.section { width:auto; } .section { padding:42px 0; } .nav a,.lang button { min-height:34px; padding:6px 8px; } .actions,.actions .button,.button { width:100%; } h1 { font-size:34px; } }