/* ============================================================
   ZORAN — zrtpcb.com  rebuild
   Design system: industrial-editorial. Data first, decoration last.
   ============================================================ */

:root{
  --ink:        #0b1521;
  --ink-2:      #1c2b3a;
  --ink-3:      #46586b;
  --muted:      #6c7d8e;
  --line:       #dfe5eb;
  --line-2:     #eef2f6;
  --bg:         #ffffff;
  --bg-soft:    #f6f8fa;
  --bg-dark:    #0b1521;
  --accent:     #c2410c;   /* copper */
  --accent-2:   #d97706;
  --teal:       #0f766e;
  --radius:     3px;
  --maxw:       1180px;
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:       ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.015em; line-height:1.2}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
@media(max-width:720px){ .wrap{padding:0 20px} }

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--accent);
}
.eyebrow.muted{color:var(--muted)}
.section{padding:86px 0}
.section--soft{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-head{max-width:760px; margin-bottom:44px}
.section-head h2{font-size:34px; margin:12px 0 14px}
.section-head p{color:var(--ink-3); font-size:16.5px; line-height:1.7}
@media(max-width:720px){
  .section{padding:56px 0}
  .section-head h2{font-size:26px}
  .section-head{margin-bottom:30px}
}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; font-size:14.5px; font-weight:600;
  border-radius:var(--radius); border:1px solid transparent;
  transition:.16s ease; cursor:pointer; white-space:nowrap;
}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:#a33509}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:#16283c}
.btn--ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#fff; color:var(--ink)}
.btn--outline-light{border-color:rgba(255,255,255,.34); color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.1)}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:34px; height:70px}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.brand img{height:30px; width:auto}
.brand span{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); border-left:1px solid var(--line); padding-left:11px;
  line-height:1.3; font-weight:600;
}
.nav{display:flex; gap:26px; margin-left:auto; font-size:14px; font-weight:550; color:var(--ink-2)}
.nav a{padding:6px 0; border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.header-actions{display:flex; align-items:center; gap:14px}
.header-tel{font-size:13.5px; color:var(--ink-2); font-weight:550}
.header-tel span{display:block; font-size:10.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
@media(max-width:1020px){ .nav,.header-tel{display:none} .header-actions{margin-left:auto} }

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--bg-dark); color:#fff; overflow:hidden;
  padding:78px 0 0;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(194,65,12,.22), transparent 62%),
    linear-gradient(180deg, rgba(11,21,33,0) 58%, rgba(11,21,33,.9) 100%);
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center;
  padding-bottom:70px;
}
.hero h1{font-size:52px; line-height:1.1; letter-spacing:-.028em; margin:16px 0 20px}
.hero h1 em{font-style:normal; color:#f0a06a}
.hero-sub{color:#b9c6d3; font-size:17px; max-width:520px; line-height:1.7}
.hero-cta{display:flex; gap:13px; margin-top:32px; flex-wrap:wrap}
.hero-note{
  margin-top:26px; font-size:12.5px; color:#8296a9;
  display:flex; align-items:center; gap:8px;
}
.hero-media{position:relative}
.hero-media img{
  width:100%; height:400px; object-fit:cover; border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
}
.hero-badge{
  position:absolute; left:-18px; bottom:-22px;
  background:#fff; color:var(--ink); padding:16px 20px; border-radius:4px;
  box-shadow:0 18px 44px rgba(0,0,0,.34); min-width:190px;
}
.hero-badge b{display:block; font-size:24px; line-height:1.1; color:var(--accent)}
.hero-badge span{font-size:11px; color:var(--muted); letter-spacing:.05em}

/* stat strip sits under hero, overlapping */
.stats{
  position:relative; z-index:3; margin-top:-1px;
  background:rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.13);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stats div{padding:26px 28px; border-right:1px solid rgba(255,255,255,.1)}
.stats div:last-child{border-right:none}
.stats b{
  display:block; font-size:30px; line-height:1.1; font-weight:650; letter-spacing:-.02em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.stats b small{font-size:14px; font-weight:500; color:#9fb1c1; margin-left:3px}
.stats span{display:block; font-size:12px; color:#8296a9; margin-top:5px; letter-spacing:.02em}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:34px; padding-bottom:48px}
  .hero h1{font-size:36px}
  .hero-media img{height:260px}
  .hero-badge{left:auto; right:14px; bottom:-16px; padding:12px 15px}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:none}
  .stats div:nth-child(1),.stats div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1)}
  .stats b{font-size:24px}
}

/* ---------- capability cards ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){ .cap-grid{grid-template-columns:1fr} }
.cap-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:#fff; transition:.18s ease; display:flex; flex-direction:column;
}
.cap-card:hover{border-color:#b9c6d3; box-shadow:0 10px 30px rgba(11,21,33,.07); transform:translateY(-2px)}
.cap-card figure{margin:0; position:relative; aspect-ratio:16/10; overflow:hidden; background:#eef2f6}
.cap-card figure img{width:100%; height:100%; object-fit:cover; transition:.4s}
.cap-card:hover figure img{transform:scale(1.035)}
.cap-card .body{padding:20px 22px 22px; flex:1; display:flex; flex-direction:column}
.cap-card h3{font-size:17.5px; margin-bottom:7px}
.cap-card p{font-size:13.8px; color:var(--ink-3); line-height:1.62; flex:1}
.cap-card .meta{
  margin-top:15px; padding-top:13px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:10px;
}
.cap-card .meta b{color:var(--ink); font-weight:600}

/* ---------- spec table ---------- */
.spec-wrap{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
}
.spec-head{
  display:grid; grid-template-columns:1.35fr 1fr 1fr; background:var(--ink); color:#fff;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
}
.spec-head div{padding:13px 20px}
.spec-head div+div{border-left:1px solid rgba(255,255,255,.13)}
.spec-row{
  display:grid; grid-template-columns:1.35fr 1fr 1fr; font-size:14px;
  border-bottom:1px solid var(--line-2);
}
.spec-row:last-child{border-bottom:none}
.spec-row:nth-child(odd){background:#fbfcfd}
.spec-row div{padding:12px 20px}
.spec-row div+div{border-left:1px solid var(--line-2); color:var(--ink-2)}
.spec-row div:first-child{color:var(--ink-3)}
.spec-row .best{color:var(--accent); font-weight:600}
@media(max-width:720px){
  .spec-head,.spec-row{grid-template-columns:1.2fr .9fr .9fr; font-size:12.5px}
  .spec-head div,.spec-row div{padding:10px 12px}
}

/* ---------- process rail ---------- */
.process{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.process div{background:#fff; padding:20px 18px}
.process b{
  display:block; font-size:11px; color:var(--accent); font-variant-numeric:tabular-nums;
  letter-spacing:.1em; margin-bottom:8px;
}
.process h4{font-size:14.5px; margin-bottom:5px}
.process p{font-size:12.5px; color:var(--muted); line-height:1.5}
@media(max-width:900px){ .process{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .process{grid-template-columns:1fr} }

/* ---------- facilities ---------- */
.fac-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){ .fac-grid{grid-template-columns:1fr} }
.fac{border-top:2px solid var(--ink); padding-top:18px}
.fac .role{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600}
.fac h3{font-size:21px; margin:8px 0 4px}
.fac .addr{font-size:13px; color:var(--muted); line-height:1.55; min-height:44px}
.fac .cap{
  margin-top:14px; display:flex; align-items:baseline; gap:6px;
  font-variant-numeric:tabular-nums;
}
.fac .cap b{font-size:26px; letter-spacing:-.02em}
.fac .cap span{font-size:12.5px; color:var(--muted)}
.fac ul{margin-top:12px; font-size:13.5px; color:var(--ink-2)}
.fac li{padding:5px 0 5px 16px; position:relative}
.fac li::before{content:""; position:absolute; left:0; top:13px; width:5px; height:5px; background:var(--accent); border-radius:50%}

/* ---------- lead time ---------- */
.lt{font-size:14px}
.lt th{
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:11px 14px; border-bottom:1.5px solid var(--ink);
}
.lt td{padding:11px 14px; border-bottom:1px solid var(--line-2); color:var(--ink-2)}
.lt tr:hover td{background:#fbfcfd}
.lt td:first-child{color:var(--ink); font-weight:600}
.lt .fast{color:var(--teal); font-weight:600}

/* ---------- industries ---------- */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:900px){ .ind-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .ind-grid{grid-template-columns:1fr} }
.ind{position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:#e9eef3}
.ind img{width:100%; height:100%; object-fit:cover; transition:.5s}
.ind:hover img{transform:scale(1.045)}
.ind::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,21,33,0) 42%, rgba(11,21,33,.86) 100%);
}
.ind-txt{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; z-index:2; color:#fff}
.ind-txt b{display:block; font-size:16px; font-weight:600}
.ind-txt span{font-size:12px; color:#c4d1dd}

/* ---------- certs ---------- */
.cert-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
@media(max-width:900px){ .cert-grid{grid-template-columns:1fr 1fr} }
.cert{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; background:#fff;
  text-align:center;
}
.cert b{display:block; font-size:16px; letter-spacing:.01em}
.cert span{display:block; font-size:12px; color:var(--muted); margin-top:5px; line-height:1.45}
.cert .yr{font-size:11px; color:var(--accent); margin-top:8px; letter-spacing:.06em}

/* ---------- CTA ---------- */
.cta{background:var(--bg-dark); color:#fff; padding:74px 0}
.cta-grid{display:grid; grid-template-columns:1fr .95fr; gap:64px; align-items:center}
@media(max-width:900px){ .cta-grid{grid-template-columns:1fr; gap:36px} }
.cta h2{font-size:34px; margin-bottom:14px; letter-spacing:-.02em}
.cta p{color:#a8b8c7; font-size:16px}
.quote-card{background:#fff; border-radius:4px; padding:26px 26px 24px; color:var(--ink)}
.quote-card h3{font-size:17px; margin-bottom:4px}
.quote-card .sub{font-size:12.5px; color:var(--muted); margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:5px; font-weight:550}
.field input,.field select,.field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:3px;
  font-family:inherit; font-size:14px; color:var(--ink); background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,65,12,.1);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* ---------- footer ---------- */
.footer{background:#08111b; color:#8ea0b1; padding:56px 0 26px; font-size:13.5px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
@media(max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px} }
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr} }
.footer h4{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:14px}
.footer li{padding:4px 0}
.footer a:hover{color:#fff}
.footer .ent{color:#a9bac9; line-height:1.6; font-size:12.8px}
.footer .ent b{color:#fff; display:block; margin-bottom:4px; font-size:13.5px}
.foot-bottom{
  margin-top:42px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; font-size:12px; color:#65798c; flex-wrap:wrap;
}

/* ---------- responsive patches ---------- */
@media(max-width:900px){
  .q2{grid-template-columns:1fr !important; gap:26px !important}
  .q2 img{order:-1}
}
@media(max-width:560px){
  .hero-cta .btn{width:100%; justify-content:center}
  .field-row{grid-template-columns:1fr}
}

/* ============================================================
   SUBPAGE SYSTEM — product / quality / facilities / contact
   ============================================================ */

.crumb{
  font-size:12px; color:var(--muted); padding:18px 0 0; letter-spacing:.02em;
}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 7px; color:#c3cdd7}

.phero{border-bottom:1px solid var(--line); padding-bottom:0}
.phero-in{
  display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:end;
  padding:36px 0 0;
}
.phero h1{font-size:44px; line-height:1.12; letter-spacing:-.025em; margin:14px 0 18px}
.phero .lead{font-size:17px; color:var(--ink-3); line-height:1.7; max-width:560px}
.phero-img{position:relative}
.phero-img img{
  width:100%; height:330px; object-fit:cover; border-radius:3px; border:1px solid var(--line);
}
.phero-kpis{display:flex; gap:0; margin:30px 0 34px; border-top:1px solid var(--line)}
.phero-kpis div{padding:16px 22px 0 0; margin-right:22px; border-right:1px solid var(--line-2)}
.phero-kpis div:last-child{border-right:none; margin-right:0}
.phero-kpis b{display:block; font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.phero-kpis span{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}
@media(max-width:900px){
  .phero-in{grid-template-columns:1fr; gap:26px; padding-top:22px}
  .phero h1{font-size:30px}
  .phero-img img{height:220px; order:-1}
  .phero-kpis div{padding:12px 14px 0 0; margin-right:14px}
  .phero-kpis b{font-size:18px}
}

/* facts box — GEO: extractable summary */
.facts{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:3px; padding:22px 26px; margin:0 0 8px;
}
.facts h2{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:12px}
.facts ul{display:grid; gap:8px}
.facts li{font-size:14.5px; color:var(--ink-2); line-height:1.6; padding-left:16px; position:relative}
.facts li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--accent); border-radius:50%}

/* feature grid */
.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px 44px}
@media(max-width:760px){ .feat-grid{grid-template-columns:1fr; gap:24px} }
.feat h3{font-size:16.5px; margin-bottom:7px}
.feat p{font-size:14.2px; color:var(--ink-3); line-height:1.68}
.feat .idx{
  font-size:11px; color:var(--accent); letter-spacing:.1em; font-weight:600;
  display:block; margin-bottom:6px;
}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{
  font-size:16px; font-weight:600; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:20px; color:var(--accent); font-weight:400; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:12px; font-size:14.5px; color:var(--ink-3); line-height:1.72; max-width:820px}

/* dark spec strip */
.strip{background:var(--bg-dark); color:#fff; padding:52px 0}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
@media(max-width:860px){ .strip-grid{grid-template-columns:1fr 1fr} }
.strip h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8ea3b6; margin-bottom:8px}
.strip p{font-size:14px; color:#d5dfe8; line-height:1.6}
.strip b{color:#fff}

/* two-col content */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
@media(max-width:900px){ .cols{grid-template-columns:1fr; gap:28px} }
.cols h3{font-size:20px; margin-bottom:12px}
.cols p{font-size:15px; color:var(--ink-3); line-height:1.72}
.cols ul{margin-top:14px; font-size:14px; color:var(--ink-2)}
.cols li{padding:6px 0 6px 18px; position:relative; border-bottom:1px solid var(--line-2)}
.cols li::before{content:""; position:absolute; left:0; top:14px; width:5px; height:5px; background:var(--accent); border-radius:50%}

/* cert table on quality page */
.cert-table td{padding:14px 16px; border-bottom:1px solid var(--line-2); font-size:14px}
.cert-table td:first-child{font-weight:600}
.cert-table code{
  font-family:var(--mono); font-size:13px; background:#eef2f6; padding:2px 7px; border-radius:2px;
}
.cert-table tr:last-child td{border-bottom:none}

/* equipment list */
.eq{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:860px){ .eq{grid-template-columns:1fr 1fr} }
.eq div{background:#fff; padding:14px 16px; font-size:13.5px; color:var(--ink-2)}
.eq div b{display:block; font-size:11px; color:var(--accent); letter-spacing:.08em; margin-bottom:3px}

/* contact page */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:32px} }
.contact-card{border:1px solid var(--line); border-radius:3px; padding:24px 26px; margin-bottom:16px}
.contact-card h3{font-size:15px; margin-bottom:6px}
.contact-card p{font-size:13.8px; color:var(--ink-3); line-height:1.65}
.contact-card .k{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}

/* ---------- nav dropdown ---------- */
.nav-drop{position:relative; display:flex; align-items:center; height:70px}
.nav-drop > a{display:flex; align-items:center; gap:5px}
.nav-menu{
  position:absolute; top:calc(100% - 10px); left:-14px; z-index:70;
  background:#fff; border:1px solid var(--line); border-radius:3px;
  box-shadow:0 14px 34px rgba(11,21,33,.11); padding:7px; min-width:208px;
  opacity:0; visibility:hidden; transform:translateY(5px); transition:.15s ease;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu{opacity:1; visibility:visible; transform:none}
.nav-menu a{
  display:block; padding:8px 12px; border-radius:2px; border-bottom:none;
  font-size:13.5px; color:var(--ink-2); white-space:nowrap;
}
.nav-menu a:hover{background:var(--bg-soft); color:var(--accent); border-bottom:none}

/* ---------- brand lockup ---------- */
.brand-mark{height:28px; width:auto; flex-shrink:0}
.brand-text{
  font-size:15px; font-weight:700; letter-spacing:.09em; color:var(--ink);
  border-left:1px solid var(--line); padding-left:12px; line-height:1.15;
}
.brand-text small{
  display:block; font-size:8.5px; letter-spacing:.14em; color:var(--muted);
  font-weight:600; margin-top:2px;
}
@media(max-width:420px){ .brand-text small{display:none} }

/* ---------- layout refinements ---------- */
.phero-in{align-items:center; padding:34px 0 42px}
.phero-kpis{margin:26px 0 0}
.phero-img img{box-shadow:0 16px 44px rgba(11,21,33,.10)}
.phero + .section{padding-top:56px}
.hero-media img{box-shadow:0 26px 64px rgba(0,0,0,.42)}
.stats b small{margin-left:2px}
@media(max-width:900px){
  .phero-in{padding:20px 0 28px}
  .phero + .section{padding-top:40px}
}