:root {
  --navy: #071827;
  --cobalt: #0b2a48;
  --copper: #c97a3d;
  --ivory: #f3efe6;
  --paper: #faf8f2;
  --blue: #5bb9d8;
  --steel: #8fa3b2;
  --ink: #101c24;
  --line-dark: rgba(243, 239, 230, .18);
  --line-light: rgba(16, 28, 36, .18);
  --header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif; line-height: 1.6; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
section { position: relative; scroll-margin-top: var(--header-h); }

.skip-link { position: fixed; z-index: 999; left: 16px; top: -60px; padding: 10px 16px; background: var(--ivory); color: var(--navy); }
.skip-link:focus { top: 12px; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 4vw, 68px); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(3,14,24,.86), rgba(3,14,24,.52)); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 260px; }
.brand-mark { width: 48px; height: 48px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.brand-mark .core { fill: var(--copper); stroke: var(--copper); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .08em; }
.brand small { color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .17em; }
.primary-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); font-size: 14px; }
.primary-nav a { position: relative; color: rgba(255,255,255,.78); white-space: nowrap; }
.primary-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--copper); transition: right .25s ease; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; }
.primary-nav .nav-cta { padding: 11px 18px; color: #fff; border: 1px solid rgba(255,255,255,.42); }
.menu-toggle { display: none; color: #fff; background: none; border: 0; width: 46px; height: 46px; padding: 10px; }
.menu-toggle span { display: block; height: 1px; margin: 5px 0; background: currentColor; }
.menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.hero { min-height: 100svh; color: #fff; overflow: hidden; background: var(--navy); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center; transform: scale(1.015); }
.hero-shade { background: linear-gradient(90deg, rgba(3,14,24,.88) 0%, rgba(3,14,24,.55) 42%, rgba(3,14,24,.12) 76%), linear-gradient(180deg, rgba(3,14,24,.24), rgba(3,14,24,.12) 58%, rgba(3,14,24,.78)); }
.hero-rings { position: absolute; width: min(62vw, 840px); aspect-ratio: 1; right: -18vw; top: 12vh; border: 1px solid rgba(91,185,216,.18); border-radius: 50%; box-shadow: 0 0 0 9vw rgba(91,185,216,.035), 0 0 0 18vw rgba(91,185,216,.025); }
.hero-copy { position: relative; z-index: 2; width: min(800px, 85vw); padding: clamp(170px, 22vh, 250px) 0 180px clamp(24px, 7vw, 120px); }
.eyebrow { margin: 0 0 24px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow.dark { color: #8f552b; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(52px, 7.5vw, 112px); font-weight: 500; line-height: .98; letter-spacing: -.055em; }
.hero-lead { width: min(520px, 100%); margin: 34px 0 0; color: rgba(255,255,255,.72); font-size: clamp(17px, 1.55vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--copper); color: #fff; }
.button-ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.hero-facts { position: absolute; z-index: 2; right: clamp(24px, 5vw, 80px); bottom: 48px; display: flex; margin: 0; border-top: 1px solid rgba(255,255,255,.24); }
.hero-facts div { min-width: 130px; padding: 18px 24px 0 0; }
.hero-facts dt { font-size: 27px; color: var(--ivory); }
.hero-facts dd { margin: 3px 0 0; color: rgba(255,255,255,.56); font-size: 12px; }
.scroll-cue { position: absolute; z-index: 2; left: clamp(24px, 7vw, 120px); bottom: 42px; color: rgba(255,255,255,.58); font-size: 11px; letter-spacing: .12em; }
.scroll-cue span { display: inline-block; width: 42px; height: 1px; margin: 0 0 3px 14px; background: rgba(255,255,255,.4); }

.light-section { background: var(--paper); }
.dark-section { background: var(--navy); color: var(--ivory); }
.section-index { position: absolute; top: 84px; left: clamp(24px, 4vw, 68px); color: #8b8e8d; font-size: 11px; letter-spacing: .16em; }
.intro { display: grid; grid-template-columns: 1.5fr .7fr; gap: 8vw; align-items: end; min-height: 70vh; padding: 150px clamp(24px, 7vw, 120px) 110px; }
.intro h2, .section-heading h2, .manufacturing h2, .contact h2 { margin: 0; font-size: clamp(42px, 5.5vw, 82px); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }
.intro-note { margin: 0 0 8px; padding-top: 26px; border-top: 1px solid var(--line-light); color: #53606a; font-size: 16px; }

.product-system { padding: 0 clamp(24px, 7vw, 120px) 150px; }
.product-image-wrap { position: relative; margin: 0 calc(clamp(24px, 7vw, 120px) * -1); overflow: hidden; }
.product-image-wrap img { width: 100%; max-height: 650px; object-fit: cover; }
.radial-key { position: absolute; left: 7vw; bottom: 30px; width: 110px; aspect-ratio: 1; border: 1px solid rgba(201,122,61,.5); border-radius: 50%; }
.radial-key i { position: absolute; inset: 18%; border: 1px solid rgba(201,122,61,.38); border-radius: 50%; }
.radial-key i:nth-child(2) { inset: 35%; }
.radial-key i:nth-child(3) { inset: 48%; background: var(--copper); }
.section-heading { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; margin: 95px 0 50px; }
.section-heading h2 { max-width: 860px; }
.product-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.product-lines li { display: grid; grid-template-columns: 70px minmax(180px, .55fr) 1fr; gap: 24px; align-items: center; min-height: 104px; border-bottom: 1px solid var(--line-light); transition: padding .25s ease, color .25s ease; }
.product-lines li:hover { padding-left: 18px; color: #8f552b; }
.product-lines span { color: #9a9e9d; font-size: 11px; }
.product-lines strong { font-size: clamp(21px, 2vw, 29px); font-weight: 500; }
.product-lines p { margin: 0; color: #65717a; font-size: 14px; }

.structure { padding: 160px clamp(24px, 7vw, 120px); overflow: hidden; }
.structure .section-index { color: rgba(255,255,255,.44); }
.structure-copy { display: grid; grid-template-columns: .7fr 1.25fr .65fr; gap: 5vw; align-items: end; margin-bottom: 90px; }
.structure-copy .eyebrow { align-self: start; }
.structure h2, .applications h2, .development h2 { margin: 0; font-size: clamp(43px, 5.8vw, 86px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }
.structure-copy > p:last-child { margin: 0 0 8px; color: rgba(255,255,255,.62); }
.structure-visual { display: grid; grid-template-columns: 1.6fr .75fr; min-height: 620px; }
.structure-visual > img { width: 100%; height: 100%; object-fit: cover; }
.layer-list { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0 0 0 40px; list-style: none; border-left: 1px solid var(--line-dark); }
.layer-list li { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line-dark); }
.layer-list b { color: var(--copper); font-size: 11px; }
.layer-list span, .layer-list strong { display: block; }
.layer-list strong { color: #fff; font-size: 17px; font-weight: 500; }
.layer-list span { color: rgba(255,255,255,.54); font-size: 13px; }
.data-cable { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 6vw; margin-top: 120px; }
.data-cable img { width: 100%; max-height: 560px; object-fit: cover; }
.data-cable h3 { margin: 0 0 18px; font-size: clamp(32px, 4vw, 58px); font-weight: 500; line-height: 1.08; }
.data-cable p:last-child { color: rgba(255,255,255,.6); }

.applications { min-height: 88vh; display: flex; flex-direction: column; justify-content: space-between; padding: 140px clamp(24px, 7vw, 120px) 50px; color: #fff; overflow: hidden; }
.applications > img, .application-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.applications > img { object-fit: cover; }
.application-overlay { background: linear-gradient(180deg, rgba(3,14,24,.78), rgba(3,14,24,.08) 48%, rgba(3,14,24,.78)); }
.application-heading { position: relative; z-index: 2; max-width: 920px; }
.application-track { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.38); }
.application-track li { padding: 20px 16px 0 0; font-size: 14px; }
.application-track span { display: block; margin-bottom: 8px; color: var(--blue); font-size: 10px; }

.manufacturing { padding: 170px clamp(24px, 7vw, 120px); }
.manufacturing-heading { display: grid; grid-template-columns: .65fr 1.35fr; margin-bottom: 80px; }
.process-film { position: relative; margin: 0 calc(clamp(24px, 7vw, 120px) * -1); }
.process-film img { width: 100%; min-height: 440px; object-fit: cover; }
.process-caption { position: absolute; left: clamp(24px, 7vw, 120px); bottom: 26px; display: flex; align-items: center; gap: 24px; padding: 14px 18px; background: rgba(250,248,242,.88); backdrop-filter: blur(12px); }
.process-caption span { color: #8d5a35; font-size: 11px; }
.process-caption strong { font-weight: 500; }
.process-rail { display: grid; grid-template-columns: repeat(9, 1fr); margin: 54px 0; border-top: 1px solid var(--line-light); }
.process-rail span { position: relative; padding: 22px 8px 0 0; color: #53606a; font-size: 12px; }
.process-rail span::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
.process-film-dark .process-caption { color: #fff; background: rgba(7,24,39,.86); }

.development { min-height: 1050px; padding: 155px clamp(24px, 7vw, 120px) 100px; overflow: hidden; }
.development-image, .development-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.development-image { object-fit: cover; }
.development-shade { background: linear-gradient(90deg, rgba(3,14,24,.92), rgba(3,14,24,.55) 58%, rgba(3,14,24,.2)), linear-gradient(180deg, rgba(3,14,24,.45), rgba(3,14,24,.12) 45%, rgba(3,14,24,.8)); }
.development-copy, .timeline { position: relative; z-index: 2; }
.development-copy { max-width: 980px; }
.timeline { width: min(760px, 100%); margin: 190px 0 0 auto; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.32); }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.timeline time { color: var(--copper); font-size: 24px; }
.timeline strong { font-size: 18px; font-weight: 500; }
.timeline p { margin: 8px 0 0; color: rgba(255,255,255,.58); font-size: 13px; }

.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; padding: 160px clamp(24px, 7vw, 120px); }
.contact-copy > p:not(.eyebrow) { max-width: 540px; color: #5a6670; }
.contact address { display: grid; gap: 8px; margin-top: 50px; font-style: normal; }
.contact address a { width: fit-content; font-size: 20px; }
.contact address span { margin-top: 12px; color: #68737b; font-size: 13px; }
.inquiry-form { align-self: start; padding-top: 12px; }
.inquiry-form label { display: grid; gap: 10px; margin-bottom: 25px; color: #56616a; font-size: 12px; letter-spacing: .05em; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { width: 100%; padding: 14px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #a8aba8; border-radius: 0; outline: 0; }
.inquiry-form textarea { resize: vertical; }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { border-color: var(--copper); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.button-submit { min-width: 180px; color: #fff; background: var(--navy); }
.form-status { min-height: 25px; margin: 16px 0 0; color: #81502d; font-size: 13px; }

.site-footer { display: grid; grid-template-columns: 1.5fr 1fr .7fr auto; gap: 40px; align-items: center; padding: 60px clamp(24px, 5vw, 80px); color: rgba(255,255,255,.65); background: #03101b; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand strong { font-size: 14px; }
.footer-brand span { color: rgba(255,255,255,.45); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.site-footer p { margin: 0; }
.back-top { color: var(--blue); }

.reveal { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  :root { --header-h: 74px; }
  .site-header { padding-inline: 22px; }
  .brand { min-width: 0; }
  .brand strong { font-size: 15px; }
  .brand small { display: none; }
  .menu-toggle { display: block; }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; height: calc(100dvh - var(--header-h)); padding: 36px 24px; overflow-y: auto; background: rgba(3,16,27,.98); transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); }
  .primary-nav.is-open { transform: none; }
  .primary-nav a { padding: 16px 4px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 20px; }
  .primary-nav .nav-cta { margin-top: 24px; text-align: center; }
  .hero-facts { right: 24px; }
  .intro, .contact { gap: 6vw; }
  .structure-copy { grid-template-columns: .45fr 1.3fr; }
  .structure-copy > p:last-child { grid-column: 2; }
  .structure-visual { grid-template-columns: 1.35fr .85fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .brand-mark { width: 40px; height: 40px; }
  .hero { min-height: 920px; }
  .hero-image { object-position: 46% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(3,14,24,.58), rgba(3,14,24,.28) 30%, rgba(3,14,24,.92) 72%); }
  .hero-copy { width: 100%; padding: 420px 22px 220px; }
  .hero h1 { font-size: clamp(50px, 15vw, 72px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .button { padding-inline: 14px; }
  .hero-facts { left: 22px; right: 22px; bottom: 74px; justify-content: space-between; }
  .hero-facts div { min-width: 0; padding-right: 12px; }
  .hero-facts dt { font-size: 21px; }
  .hero-facts dd { max-width: 76px; }
  .scroll-cue { left: 22px; bottom: 28px; }
  .section-index { top: 50px; left: 22px; }
  .intro { display: block; min-height: auto; padding: 130px 22px 90px; }
  .intro h2, .section-heading h2, .manufacturing h2, .contact h2, .structure h2, .applications h2, .development h2 { font-size: clamp(38px, 11.5vw, 54px); }
  .intro-note { margin-top: 52px; }
  .product-system { padding: 0 22px 110px; }
  .product-image-wrap, .process-film { margin-inline: -22px; }
  .product-image-wrap img { min-height: 400px; object-fit: cover; object-position: 58% center; }
  .section-heading { display: block; margin: 64px 0 34px; }
  .section-heading .eyebrow { margin-bottom: 16px; }
  .product-lines li { grid-template-columns: 38px 1fr; gap: 12px; padding: 23px 0; }
  .product-lines strong { font-size: 21px; }
  .product-lines p { grid-column: 2; }
  .structure { padding: 130px 22px 110px; }
  .structure-copy { display: block; margin-bottom: 55px; }
  .structure-copy > p:last-child { margin-top: 30px; }
  .structure-visual { display: block; min-height: 0; }
  .structure-visual > img { min-height: 390px; object-position: 62% center; }
  .layer-list { padding: 20px 0 0; border-left: 0; }
  .data-cable { display: flex; flex-direction: column; margin-top: 80px; }
  .data-cable img { min-height: 390px; object-fit: cover; object-position: 68% center; }
  .applications { min-height: 920px; padding: 120px 22px 34px; }
  .applications > img { object-position: 36% center; }
  .application-track { grid-template-columns: 1fr; }
  .application-track li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .application-track span { margin: 0; }
  .manufacturing { padding: 130px 22px 110px; }
  .manufacturing-heading { display: block; margin-bottom: 52px; }
  .process-film img { min-height: 420px; object-position: center; }
  .process-caption { left: 14px; right: 14px; bottom: 14px; gap: 14px; }
  .process-rail { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
  .development { min-height: 1120px; padding: 120px 22px 70px; }
  .development-image { object-position: 52% center; }
  .development-shade { background: linear-gradient(180deg, rgba(3,14,24,.84), rgba(3,14,24,.35) 46%, rgba(3,14,24,.92)); }
  .timeline { margin-top: 240px; }
  .timeline li { grid-template-columns: 68px 1fr; gap: 18px; }
  .timeline time { font-size: 18px; }
  .contact { display: block; padding: 120px 22px 100px; }
  .contact address { margin-bottom: 70px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .site-footer { grid-template-columns: 1fr; padding: 50px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}