:root {
  --ink: #10151d;
  --muted: #647184;
  --line: #e6eaf0;
  --surface: #ffffff;
  --soft: #f5f7fa;
  --navy: #06111e;
  --navy-2: #0a1b2c;
  --cyan: #05bed1;
  --cyan-deep: #0098ad;
  --shadow: 0 20px 55px rgba(10, 25, 45, 0.12);
  --radius: 18px;
  --container: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }

.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(225,230,237,.9);
  backdrop-filter: blur(14px);
}
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 175px; }
.brand-crop { position: relative; width: 56px; height: 52px; overflow: hidden; flex: 0 0 auto; }
.brand-crop img { position: absolute; width: 168px; max-width: none; left: -56px; top: -56px; }
.brand-text { font-weight: 800; font-size: 21px; letter-spacing: .12em; color: #242932; }
.main-nav { display: flex; align-items: stretch; height: 100%; gap: 34px; }
.main-nav > a, .dropdown-trigger {
  display: flex; align-items: center; height: 100%; font-size: 13px; font-weight: 700; letter-spacing: .07em; color: #2f3742; position: relative;
}
.main-nav > a::after, .dropdown-trigger::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--cyan); transition: .25s ease; }
.main-nav > a:hover::after, .dropdown-trigger:hover::after { right: 0; }
.dropdown-trigger span { font-size: 14px; margin-left: 6px; color: #8993a0; }
.nav-dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% - 1px); left: -20px; width: 225px; background: white; border: 1px solid var(--line); box-shadow: 0 16px 45px rgba(23,33,48,.14); border-radius: 0 0 12px 12px; padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s ease;
}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: #485462; font-size: 13px; }
.dropdown-menu a:hover { background: #f1f5f8; color: var(--cyan-deep); }
.menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: #25303b; margin: 6px 0; transition: .25s; }

.hero {
  min-height: 660px;
  display: grid;
  align-items: center;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 77% 42%, rgba(3,191,212,.23), transparent 24%),
    radial-gradient(circle at 22% 25%, rgba(37,76,118,.35), transparent 35%),
    linear-gradient(118deg, #02060c 0%, #07111f 48%, #09192a 100%);
  color: #fff;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to top, #000, transparent 72%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; gap: 54px; align-items: center; }
.eyebrow { color: #8de9f1; text-transform: uppercase; letter-spacing: .22em; font-weight: 700; font-size: 12px; }
.hero h1 { margin: 16px 0 18px; font-weight: 300; line-height: 1.06; letter-spacing: -.035em; font-size: clamp(48px, 6vw, 78px); }
.hero h1 strong { font-weight: 700; display: block; }
.hero-copy p { margin: 0 0 30px; max-width: 600px; color: #bbc8d5; font-size: 17px; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 4px; border: 1px solid transparent; font-weight: 700; font-size: 13px; letter-spacing: .055em; text-transform: uppercase; cursor: pointer; transition: .2s ease; }
.btn-primary { background: var(--cyan); color: #031218; }
.btn-primary:hover { background: #35d3e2; transform: translateY(-1px); }
.btn-ghost { border-color: rgba(255,255,255,.36); color: white; }
.btn-ghost:hover { border-color: white; background: rgba(255,255,255,.07); }
.hero-visual { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.hero-orbit { position: absolute; width: 470px; height: 470px; border: 1px solid rgba(85,230,242,.25); border-radius: 50%; box-shadow: 0 0 0 56px rgba(6,188,210,.025), 0 0 100px rgba(0,185,208,.14); }
.hero-orbit::after { content: ""; position: absolute; inset: 44px; border: 1px dashed rgba(123,220,230,.22); border-radius: 50%; }
.hero-product { position: relative; z-index: 2; width: min(100%, 580px); filter: drop-shadow(0 28px 24px rgba(0,0,0,.42)); animation: float 5.8s ease-in-out infinite; mix-blend-mode: screen; }
.hero-product img { width: 100%; border-radius: 12px; }
.hero-badge { position: absolute; right: 20px; bottom: 18px; z-index: 3; width: 160px; padding: 14px; background: rgba(3,14,24,.76); border: 1px solid rgba(85,230,242,.24); backdrop-filter: blur(10px); }
.hero-badge small { display:block; color:#8de9f1; text-transform:uppercase; letter-spacing:.15em; }
.hero-badge b { display:block; margin-top:4px; font-size:16px; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.section { padding: 86px 0; }
.section-soft { background: var(--soft); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-title small { display: block; color: var(--cyan-deep); font-weight: 800; letter-spacing: .18em; font-size: 11px; margin-bottom: 7px; }
.section-title h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 300; letter-spacing: -.025em; }
.section-title h2 strong { font-weight: 700; }
.section-head > p { max-width: 520px; margin: 0; color: var(--muted); }

.category-strip { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
.category-link { min-height: 150px; padding: 30px; border-right: 1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.category-link:last-child { border-right:0; }
.category-link .num { position:absolute; right:20px; top:13px; font-size:52px; font-weight:800; color:#f0f2f4; }
.category-link span { color: var(--cyan-deep); text-transform: uppercase; font-weight: 800; font-size:11px; letter-spacing:.18em; }
.category-link h3 { margin:4px 0 0; font-size:19px; }
.category-link:hover { background:#071523; color:white; }
.category-link:hover .num { color:rgba(255,255,255,.06); }

.product-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.product-card { background:white; border:1px solid var(--line); border-radius: 12px; overflow:hidden; cursor:pointer; transition:.25s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(15,29,47,.12); border-color:#d3dce5; }
.product-image { height: 250px; padding: 20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(#fff,#fbfcfd); overflow:hidden; }
.product-image img { width:100%; height:100%; object-fit:contain; transition:transform .35s ease; }
.product-card:hover .product-image img { transform:scale(1.035); }
.product-placeholder { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#eef4f6,#dfe8eb); color:#81909a; font-size:13px; letter-spacing:.14em; }
.product-body { padding:20px 22px 22px; border-top:1px solid #f0f2f4; }
.product-kicker { text-transform:uppercase; color:var(--cyan-deep); letter-spacing:.12em; font-size:10px; font-weight:800; }
.product-body h3 { margin:5px 0 7px; font-size:19px; line-height:1.35; }
.product-body p { margin:0; color:var(--muted); font-size:14px; }
.text-link { display:inline-block; color:var(--cyan-deep); font-weight:800; font-size:12px; letter-spacing:.06em; margin-top:13px; }

.about-preview { display:grid; grid-template-columns: .9fr 1.1fr; gap:58px; align-items:center; }
.about-preview-image { min-height:430px; position:relative; border-radius:12px; overflow:hidden; background:var(--navy); }
.about-preview-image img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:64% center; }
.about-preview-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,8,16,.72),transparent 60%); }
.stat-block { position:absolute; z-index:2; left:24px; bottom:24px; color:white; }
.stat-block strong { display:block; font-size:56px; line-height:1; color:#75e6ef; }
.stat-block span { display:block; margin-top:8px; max-width:190px; font-size:13px; color:#dae3eb; }
.about-copy h2 { font-size:42px; margin:0 0 18px; font-weight:300; }
.about-copy h2 strong { font-weight:700; }
.about-copy p { color:var(--muted); margin:0 0 20px; }
.mini-points { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0 30px; }
.mini-point { padding:16px; border-left:3px solid var(--cyan); background:#f7f9fb; font-weight:650; font-size:13px; }

.page-hero { position:relative; min-height:430px; overflow:hidden; background:#050b14; color:#fff; }
.page-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.04) 58%); }
.page-hero-content { min-height:430px; position:relative; z-index:2; display:flex; align-items:center; }
.page-hero-title { max-width:690px; }
.page-hero-title .en { display:block; font-size:clamp(35px,5vw,58px); font-weight:300; letter-spacing:-.02em; line-height:1.15; }
.page-hero-title .cn { display:block; font-size:28px; margin-top:8px; font-weight:400; }
.page-hero.company::before { content:""; position:absolute; z-index:1; left:0; top:0; bottom:0; width:52%; background:linear-gradient(90deg,rgba(3,7,12,.96) 0%,rgba(3,8,15,.83) 62%,rgba(3,8,15,.1) 100%); }
.page-hero.embedded-title::after { background:none; }

.breadcrumb { background:#f6f8fa; border-bottom:1px solid var(--line); }
.breadcrumb-inner { min-height:54px; display:flex; align-items:center; gap:8px; font-size:12px; color:#85909d; }
.breadcrumb a { color:#566270; }

.content-card { max-width:980px; margin:0 auto; }
.prose-lead { font-size:24px; line-height:1.5; font-weight:300; color:#263443; margin:0 0 28px; }
.prose { color:#5e6c79; font-size:16px; line-height:1.9; }
.prose p { margin:0 0 18px; }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.feature-box { border:1px solid var(--line); padding:24px; background:white; }
.feature-box b { display:block; font-size:28px; color:var(--cyan-deep); margin-bottom:5px; }
.feature-box span { color:#687584; font-size:13px; }

.products-page-top { padding:66px 0 36px; background:#f7f9fb; border-bottom:1px solid var(--line); }
.products-page-top h1 { margin:0; font-size:48px; font-weight:300; }
.products-page-top p { margin:10px 0 0; color:var(--muted); }
.filter-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.filter-tab { border:1px solid #dce2e8; background:white; color:#4f5b68; padding:10px 16px; border-radius:30px; cursor:pointer; font-size:12px; font-weight:750; letter-spacing:.04em; }
.filter-tab.active, .filter-tab:hover { border-color:#081827; background:#081827; color:#fff; }
.empty-state { grid-column:1/-1; min-height:250px; display:grid; place-items:center; background:#f7f9fb; border:1px dashed #d9e0e6; color:#7a8794; text-align:center; padding:30px; }

.contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; }
.contact-cards { display:grid; gap:16px; }
.contact-card { padding:24px; border:1px solid var(--line); background:#fff; border-radius:10px; }
.contact-card small { display:block; color:var(--cyan-deep); text-transform:uppercase; letter-spacing:.15em; font-weight:800; font-size:10px; }
.contact-card h3 { margin:6px 0 3px; font-size:20px; }
.contact-card a { color:#596675; }
.contact-form { padding:34px; background:#071523; color:#fff; border-radius:12px; }
.contact-form h2 { margin:0 0 8px; font-size:30px; font-weight:400; }
.contact-form > p { margin:0 0 24px; color:#a9b7c5; font-size:14px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:11px; font-weight:700; color:#c9d5df; letter-spacing:.06em; }
.field input,.field textarea { width:100%; border:1px solid #314458; background:#0c2032; color:#fff; border-radius:5px; padding:12px 13px; outline:none; }
.field textarea { min-height:135px; resize:vertical; }
.field input:focus,.field textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(5,190,209,.1); }
.form-status { min-height:24px; margin-top:14px; font-size:13px; color:#8de9f1; }

.site-footer { background:#050b12; color:#d4dbe2; padding:56px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.35fr; gap:40px; }
.footer-brand { font-weight:800; letter-spacing:.12em; font-size:24px; color:#fff; }
.footer-grid p { color:#7f8b97; font-size:13px; max-width:330px; }
.footer-grid h4 { color:#fff; font-size:12px; letter-spacing:.1em; margin:0 0 15px; }
.footer-grid a { display:block; color:#8f9aa6; font-size:13px; margin:8px 0; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { margin-top:42px; padding-top:20px; border-top:1px solid #17212c; color:#6f7b87; font-size:12px; }

.modal-backdrop { position:fixed; z-index:2000; inset:0; background:rgba(2,7,13,.72); display:none; align-items:center; justify-content:center; padding:24px; }
.modal-backdrop.open { display:flex; }
.modal { position:relative; width:min(960px,100%); max-height:min(760px,92vh); overflow:auto; background:#fff; border-radius:14px; box-shadow:0 34px 100px rgba(0,0,0,.4); }
.modal-close { position:absolute; right:14px; top:12px; z-index:3; border:0; background:rgba(255,255,255,.86); border-radius:50%; width:38px; height:38px; font-size:25px; cursor:pointer; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; min-height:500px; }
.modal-media { background:#f7f9fb; display:grid; place-items:center; padding:34px; }
.modal-media img { width:100%; max-height:420px; object-fit:contain; }
.modal-detail { padding:50px 42px; }
.modal-detail small { color:var(--cyan-deep); font-weight:800; letter-spacing:.14em; }
.modal-detail h2 { margin:8px 0 10px; font-size:32px; line-height:1.2; }
.modal-detail > p { color:var(--muted); }
.spec-list { list-style:none; padding:0; margin:24px 0 0; }
.spec-list li { padding:9px 0 9px 20px; border-bottom:1px solid #eef1f4; position:relative; font-size:14px; color:#4d5966; }
.spec-list li::before { content:""; position:absolute; left:0; top:17px; width:7px; height:7px; background:var(--cyan); border-radius:50%; }

.loading { min-height:60vh; display:grid; place-items:center; color:#7b8793; }
.error-box { margin:80px auto; width:min(calc(100% - 40px),800px); padding:28px; border:1px solid #f0cccc; background:#fff6f6; color:#8a3c3c; }

@media (max-width: 960px) {
  .menu-toggle { display:block; }
  .main-nav { display:none; position:absolute; top:82px; left:0; right:0; height:auto; background:white; border-top:1px solid var(--line); padding:12px 20px 20px; flex-direction:column; gap:0; box-shadow:0 20px 40px rgba(20,30,45,.12); }
  .main-nav.open { display:flex; }
  .main-nav > a,.dropdown-trigger { height:auto; min-height:46px; }
  .nav-dropdown { width:100%; }
  .dropdown-menu { position:static; opacity:1; visibility:visible; transform:none; width:100%; box-shadow:none; border:0; border-radius:0; padding:0 0 8px 14px; }
  .dropdown-menu a { padding:7px 12px; }
  .hero { min-height:730px; padding:70px 0; }
  .hero-grid { grid-template-columns:1fr; gap:30px; }
  .hero-copy { max-width:700px; }
  .hero-visual { min-height:300px; }
  .hero-orbit { width:330px; height:330px; }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .about-preview { grid-template-columns:1fr; }
  .about-preview-image { min-height:360px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .contact-layout { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .container { width:min(calc(100% - 28px),var(--container)); }
  .header-inner { height:70px; }
  .brand-text { font-size:18px; }
  .brand-crop { width:48px; height:46px; }
  .brand-crop img { width:148px; left:-50px; top:-50px; }
  .main-nav { top:70px; }
  .hero { min-height:680px; padding:56px 0; }
  .hero h1 { font-size:44px; }
  .hero-visual { min-height:250px; }
  .hero-orbit { width:260px; height:260px; }
  .hero-badge { width:140px; right:0; bottom:0; }
  .section { padding:62px 0; }
  .section-head { display:block; }
  .section-head > p { margin-top:14px; }
  .category-strip { grid-template-columns:1fr; }
  .category-link { border-right:0; border-bottom:1px solid var(--line); min-height:112px; }
  .category-link:last-child { border-bottom:0; }
  .product-grid { grid-template-columns:1fr; }
  .product-image { height:235px; }
  .feature-row,.mini-points { grid-template-columns:1fr; }
  .page-hero,.page-hero-content { min-height:310px; }
  .page-hero.company::before { width:78%; }
  .page-hero-title .en { font-size:36px; }
  .page-hero-title .cn { font-size:24px; }
  .products-page-top h1 { font-size:38px; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:1; }
  .contact-form { padding:26px 20px; }
  .footer-grid { grid-template-columns:1fr; }
  .modal-grid { grid-template-columns:1fr; }
  .modal-media { min-height:280px; }
  .modal-detail { padding:28px 24px 36px; }
}