/*
Theme Name: ZXAZER Precision
Theme URI: http://starc.l-langji.com/
Author: ZXAZER
Description: Multilingual OEM/ODM website for precision optical and electronic products.
Version: 1.0.4
Text Domain: zxazer
*/

:root {
  --ink: #071827;
  --navy: #061b2a;
  --navy-2: #082638;
  --panel: #0b2d40;
  --lime: #a9ef4d;
  --green: #63c93f;
  --teal: #18a9a8;
  --mist: #eef4f5;
  --white: #ffffff;
  --muted: #a9bac5;
  --line: rgba(255,255,255,.2);
  --shadow: 0 18px 50px rgba(4,24,38,.16);
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans JP", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-shell { overflow: hidden; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }

.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(2,19,31,.84), rgba(2,19,31,.45));
  backdrop-filter: blur(10px);
}
.admin-bar .site-header { top: 32px; }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 38px; }
.brand { display: inline-flex; align-items: center; flex: none; font-size: 29px; line-height: 1; font-weight: 900; letter-spacing: .08em; }
.brand-x { display: inline-block; color: #fff; position: relative; letter-spacing: -.12em; margin: 0 -.03em; }
.brand-x::after { content: ""; position: absolute; width: .24em; height: .24em; border-radius: 1px; background: var(--lime); transform: rotate(45deg); left: .4em; top: .36em; }
.brand-sub { margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.28); color: #c7d3da; font-size: 10px; letter-spacing: .12em; font-weight: 600; white-space: nowrap; }
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.primary-nav a { display: block; padding: 30px 0 25px; color: #e8f0f3; font-size: 13px; font-weight: 650; border-bottom: 2px solid transparent; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: #fff; border-color: var(--lime); }
.lang-menu { position: relative; flex: none; }
.lang-toggle { border: 0; background: transparent; color: #fff; font: inherit; font-size: 12px; cursor: pointer; padding: 10px; }
.lang-toggle::after { content: "⌄"; margin-left: 6px; color: var(--lime); }
.lang-list { position: absolute; right: 0; top: 100%; min-width: 132px; padding: 8px; margin: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: rgba(4,25,39,.98); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-2px); transition: .2s ease; }
.lang-menu:hover .lang-list, .lang-menu:focus-within .lang-list { opacity: 1; pointer-events: auto; transform: none; }
.lang-list a { display: block; padding: 8px 11px; border-radius: 5px; font-size: 12px; color: #dce7ec; }
.lang-list a:hover, .lang-list .active { color: var(--lime); background: rgba(255,255,255,.06); }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: transparent; color: white; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; display: block; width: 20px; height: 2px; margin: 5px auto; background: currentColor; transition: .2s; }

.hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  color: white;
  background: #061927 center/cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,17,27,.9) 0%, rgba(2,17,27,.62) 42%, rgba(2,17,27,.1) 72%), linear-gradient(0deg, rgba(2,17,27,.4), transparent 55%); }
.hero-content { position: relative; z-index: 2; max-width: 920px; padding-top: 90px; }
.eyebrow { display: block; color: var(--lime); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.hero h1, .page-hero h1 { margin: 0 0 20px; font-size: clamp(44px, 4.2vw, 68px); line-height: .99; letter-spacing: -.035em; text-transform: uppercase; }
.hero p { max-width: 590px; margin: 0 0 30px; color: #f2f7f8; font-size: 18px; line-height: 1.55; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 11px; padding: 12px 22px; border: 1px solid var(--lime); border-radius: 3px; color: var(--ink); background: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; transition: .2s ease; }
.btn::after { content: "→"; font-size: 15px; }
.btn:hover { color: var(--ink); background: #c0ff71; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(169,239,77,.2); }
.btn-outline { color: #fff; background: transparent; }
.btn-outline:hover { color: var(--ink); background: var(--lime); }
.section-light .btn-outline, .content-block.alt .btn-outline { color: var(--ink); }

.trust-strip { color: white; background: #051c2a; border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.trust-item { min-height: 148px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-content: center; padding: 26px; border-right: 1px solid var(--line); }
.trust-item:first-child { border-left: 1px solid var(--line); }
.trust-item > p { display: none; }
.trust-item > .icon { grid-column: 1; grid-row: 1; }
.trust-item > div { grid-column: 2; grid-row: 1; min-width: 0; }
.icon { width: 32px; height: 32px; color: var(--lime); }
.trust-item strong { display: block; font-size: 14px; line-height: 1.35; }
.trust-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.section { padding: 92px 0; }
.section-dark { color: #fff; background: var(--navy); }
.section-light { background: #f4f8f9; }
.section-head { max-width: 720px; margin-bottom: 42px; }
.section h2, .content-block h2 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -.025em; text-transform: uppercase; }
.section p { margin: 0 0 20px; }
.section-dark p { color: #c8d5dc; }
.tech-layout { display: grid; grid-template-columns: .9fr 1.15fr 1.1fr; align-items: stretch; gap: 24px; }
.tech-copy { align-self: center; padding-right: 15px; }
.tech-image { min-height: 410px; border-radius: 8px; background: center/cover no-repeat; box-shadow: var(--shadow); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.feature-card { min-height: 128px; padding: 20px; border: 1px solid rgba(158,192,209,.4); border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,0)); }
.feature-card strong { display: block; margin: 12px 0 4px; font-size: 13px; }
.feature-card small { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }

.process-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; align-items: end; margin-bottom: 42px; }
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 38px; }
.process-step { position: relative; padding: 22px 30px 22px 20px; border-top: 1px solid #b9c9d0; }
.process-step::after { content: "→"; position: absolute; right: 10px; top: 48px; color: #7e939e; }
.process-step:last-child::after { display: none; }
.process-step b { display: block; color: var(--green); font-size: 12px; }
.process-step strong { display: block; margin-top: 20px; font-size: 13px; line-height: 1.4; }
.manufacturing-media { min-height: 390px; border-radius: 8px; background: center/cover no-repeat; box-shadow: var(--shadow); }
.micro-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 20px; }
.micro-card { padding: 18px 0; border-top: 3px solid var(--green); }
.micro-card strong { font-size: 14px; }
.micro-card p { margin: 6px 0 0; color: #58707d; font-size: 12px; }

.markets-section { position: relative; min-height: 560px; display: flex; align-items: center; color: white; background: #041725 center/cover no-repeat; }
.markets-section::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(3,22,34,.94) 0%,rgba(3,22,34,.88) 28%,rgba(3,22,34,.08) 60%); }
.markets-copy { position: relative; width: 36%; max-width: 440px; }
.market-labels { position: absolute; z-index: 2; left: 39%; right: 4%; bottom: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.market-labels strong { display:block; padding-top: 10px; border-top: 2px solid var(--lime); font-size: 15px; }
.market-labels small { color: #dce8eb; font-size: 11px; }

.cta-banner { position: relative; color: white; background: #062034 center 52%/cover no-repeat; }
.cta-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,22,35,.92),rgba(3,22,35,.45)); }
.cta-inner { position:relative; z-index:1; min-height: 390px; display:flex; align-items:center; justify-content:space-between; gap: 60px; }
.cta-copy { max-width: 680px; }
.cta-copy h2 { margin-bottom: 18px; }
.cta-mark { text-align:center; }
.cta-mark .brand { font-size: 42px; }

.page-hero { position:relative; min-height: 480px; display:flex; align-items:flex-end; color:white; background:#061b2a center/cover no-repeat; }
.page-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,20,32,.94),rgba(3,20,32,.35)),linear-gradient(0deg,rgba(3,20,32,.62),transparent); }
.page-hero-inner { position:relative; z-index:1; max-width: 900px; padding: 170px 0 78px; }
.page-hero h1 { font-size: clamp(38px, 5vw, 66px); }
.page-hero p { max-width: 760px; margin: 0; color:#dce7ec; font-size:18px; }
.content-block { padding: 86px 0; }
.content-block.alt { background:#f1f6f7; }
.content-block.dark { color:#fff; background:var(--navy); }
.content-block.dark p { color:#c8d5dc; }
.intro-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; }
.cards-2, .cards-3, .cards-4 { display:grid; gap:18px; }
.cards-2 { grid-template-columns:repeat(2,1fr); }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-4 { grid-template-columns:repeat(4,1fr); }
.info-card { padding:30px; border:1px solid #ced9de; border-radius:8px; background:#fff; box-shadow:0 10px 25px rgba(5,35,52,.06); }
.dark .info-card { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); box-shadow:none; }
.info-card .icon { margin-bottom:20px; }
.info-card h3 { margin:0 0 12px; font-size:19px; line-height:1.25; }
.info-card p { margin:0; color:#5a6e79; font-size:14px; }
.dark .info-card p { color:#b9c9d1; }
.number-list { display:grid; gap:0; counter-reset:steps; border-top:1px solid #c9d6dc; }
.number-item { counter-increment:steps; display:grid; grid-template-columns:78px .75fr 1.25fr; gap:24px; padding:28px 0; border-bottom:1px solid #c9d6dc; }
.number-item::before { content:counter(steps, decimal-leading-zero); color:var(--green); font-weight:900; font-size:20px; }
.number-item strong { font-size:16px; }
.number-item p { margin:0; color:#60737e; }
.media-panel { min-height:440px; border-radius:10px; background:center/cover no-repeat; box-shadow:var(--shadow); }
.platform-card { overflow:hidden; border-radius:9px; background:#fff; box-shadow:var(--shadow); }
.platform-visual { height:210px; background:var(--navy) center/cover no-repeat; }
.platform-body { padding:25px; }
.platform-body h3 { margin:0 0 10px; }
.platform-body p { margin:0 0 18px; color:#5c707b; font-size:13px; }
.text-link { color:#2c7d20; font-size:12px; font-weight:800; text-transform:uppercase; }
.text-link::after { content:" →"; }
.check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; }
.check-item { padding:18px; border-left:3px solid var(--lime); background:rgba(255,255,255,.055); }

.inquiry-wrap { display:grid; grid-template-columns:.65fr 1.35fr; gap:70px; align-items:start; }
.inquiry-wrap > *, .form-grid > * { min-width: 0; }
.inquiry-form { width:100%; min-width:0; padding:36px; border-radius:10px; background:#fff; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field-full { grid-column:1/-1; }
.inquiry-form label { display:block; margin-bottom:6px; color:#2c4654; font-size:12px; font-weight:800; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { width:100%; min-height:48px; border:1px solid #c8d5db; border-radius:4px; padding:11px 13px; color:var(--ink); background:#fbfdfd; font:inherit; font-size:14px; }
.inquiry-form select { min-width:0; max-width:100%; }
.inquiry-form textarea { min-height:145px; resize:vertical; }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { outline:2px solid rgba(99,201,63,.25); border-color:var(--green); }
.form-note { color:#667983; font-size:11px; }
.form-status { padding:14px 18px; margin-bottom:22px; border-radius:4px; color:#215d16; background:#e9f8df; }
.form-status.error { color:#8a2d2d; background:#fdeaea; }

.site-footer { color:#d6e1e6; background:#03131f; border-top:1px solid rgba(255,255,255,.12); }
.footer-main { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start; padding:60px 0 42px; }
.footer-brand p { max-width:430px; margin:18px 0 0; color:#8fa5b1; font-size:13px; }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-nav h3 { margin:0 0 12px; color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.footer-nav ul { margin:0; padding:0; list-style:none; }
.footer-nav li { margin:7px 0; }
.footer-nav a { color:#9fb1bb; font-size:12px; }
.footer-nav a:hover { color:var(--lime); }
.footer-bottom { display:flex; justify-content:space-between; gap:25px; padding:22px 0; border-top:1px solid rgba(255,255,255,.1); color:#718995; font-size:11px; }

@media (max-width: 1100px) {
  .brand-sub { display:none; }
  .primary-nav ul { gap:17px; }
  .primary-nav a { font-size:12px; }
  .trust-grid { grid-template-columns:repeat(3,1fr); }
  .trust-item:nth-child(4), .trust-item:nth-child(5) { border-top:1px solid var(--line); }
  .tech-layout { grid-template-columns:1fr 1.3fr; }
  .feature-grid { grid-column:1/-1; grid-template-columns:repeat(3,1fr); }
  .cards-4 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 820px) {
  .admin-bar .site-header { top:46px; }
  .container { width:min(calc(100% - 34px), var(--max)); }
  .header-inner { min-height:70px; }
  .brand { font-size:24px; }
  .nav-toggle { display:block; }
  .primary-nav { position:fixed; top:70px; right:0; width:min(88vw,380px); height:calc(100vh - 70px); margin:0; padding:20px 28px 100px; overflow:auto; background:#031a29; transform:translateX(105%); transition:.25s ease; box-shadow:-20px 30px 50px rgba(0,0,0,.28); }
  .nav-open .primary-nav { transform:none; }
  .primary-nav ul { display:block; }
  .primary-nav a { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:15px; }
  .lang-menu { margin-left:4px; }
  .hero { min-height:700px; align-items:flex-end; background-position:65% center; }
  .hero::before { background:linear-gradient(0deg,rgba(2,17,27,.96),rgba(2,17,27,.28) 72%),linear-gradient(90deg,rgba(2,17,27,.5),transparent); }
  .hero-content { padding:150px 0 68px; }
  .hero h1 { font-size:clamp(40px,12vw,64px); }
  .hero p { font-size:16px; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-item { min-height:120px; padding:20px; }
  .section { padding:68px 0; }
  .tech-layout, .process-head, .intro-grid, .inquiry-wrap, .footer-main { grid-template-columns:1fr; gap:35px; }
  .tech-image { min-height:320px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:1fr; }
  .process-step { display:grid; grid-template-columns:50px 1fr; align-items:center; padding:14px 0; }
  .process-step::after { display:none; }
  .process-step strong { margin:0; }
  .manufacturing-media { min-height:300px; }
  .micro-grid, .cards-3, .check-grid { grid-template-columns:1fr 1fr; }
  .markets-section { min-height:680px; align-items:flex-start; background-position:64% center; }
  .markets-section::before { background:linear-gradient(180deg,rgba(3,22,34,.96) 0%,rgba(3,22,34,.76) 45%,rgba(3,22,34,.25)); }
  .markets-copy { width:100%; max-width:580px; padding-top:70px; }
  .market-labels { left:17px; right:17px; bottom:28px; gap:12px; }
  .cta-inner { min-height:470px; align-items:flex-start; flex-direction:column; justify-content:center; }
  .cta-mark { display:none; }
  .cards-2 { grid-template-columns:1fr; }
  .number-item { grid-template-columns:55px 1fr; }
  .number-item p { grid-column:2; }
  .footer-nav { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 540px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .hero h1, .page-hero h1 { font-size:38px; }
  .button-row .btn { width:100%; }
  .trust-grid, .feature-grid, .micro-grid, .cards-4, .cards-3, .check-grid { grid-template-columns:1fr; }
  .trust-item, .trust-item:first-child { border-left:0; border-right:0; border-bottom:1px solid var(--line); }
  .feature-card { min-height:110px; }
  .market-labels { grid-template-columns:1fr; }
  .market-labels div:nth-child(n+2) { display:none; }
  .page-hero-inner { padding:140px 0 60px; }
  .form-grid { grid-template-columns:1fr; }
  .field-full { grid-column:auto; }
  .inquiry-form { padding:22px; }
  .footer-main { padding-top:45px; }
  .footer-nav { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; }
}