/* ============================================================
   SITE-WIDE SHARED STYLES — injected sub-pages
   Precision Industrial Minimalism (matches homepage design system)
   ============================================================ */
:root{
  --bg:        #FFFFFF;
  --bg-alt:    #F5F5F4;
  --text:      #18181B;
  --text-sub:  #52525B;
  --line:      #E4E4E7;
  --accent:    #0F766E;
  --accent-dk: #0B5F59;
  --radius:    4px;
  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --container: 1200px;
  --pad-x: 24px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.2;
}
h1{ font-size:clamp(32px,4vw,44px); font-weight:700; }
h2{ font-size:clamp(24px,3vw,32px); font-weight:600; }
h3{ font-size:clamp(17px,2vw,20px); }
.mono,.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:15px; font-weight:500;
  padding:13px 28px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  text-decoration:none !important;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-dk); border-color:var(--accent-dk); }
.btn--outline{ background:transparent; color:var(--text); border-color:var(--text); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); }

.tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-sub);
  border:1px solid var(--line); border-radius:var(--radius); padding:2px 8px;
}

/* ============================================================
   HEADER / STICKY NAV (injected)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.nav-logo{
  font-family:var(--font-head); font-weight:600; font-size:18px; letter-spacing:-0.02em;
  color:var(--text); text-decoration:none !important; white-space:nowrap;
}
.nav-logo span{ color:var(--accent); }
.nav-logo{ display:inline-flex; align-items:center; }
.nav-logo-img{ height:48px; width:192px; flex-shrink:0; display:block; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links > li > a{ font-size:14px; color:var(--text); text-decoration:none !important; }
.nav-links > li > a:hover{ color:var(--accent); }

.has-dropdown{ position:relative; }
.has-dropdown > a::after{
  content:""; display:inline-block; margin-left:6px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; vertical-align:middle;
}
.dropdown{
  position:absolute; top:100%; left:0; min-width:200px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  list-style:none; padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{ display:block; padding:8px 16px; font-size:14px; color:var(--text); text-decoration:none !important; }
.dropdown li a:hover{ background:var(--bg-alt); color:var(--accent); }
.dropdown .dropdown-note{ padding:4px 16px 8px; font-family:var(--font-mono); font-size:11px; color:var(--text-sub); }

.nav-cta{ flex-shrink:0; }
.nav-cta .btn{ padding:9px 20px; font-size:14px; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:44px; min-width:44px; height:44px; min-height:44px; cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  flex-shrink:0; /* never let logo/CTA squeeze the button */
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--text); }

/* ============================================================
   PAGE BODY SCAFFOLD (injected)
   ============================================================ */
.page-head{ padding:48px 0 20px; }
.page-head h1{ margin-bottom:12px; color:#294d40; }
.page-head .sub{ font-size:17px; color:var(--text-sub); max-width:640px; }

.breadcrumb{
  padding-top:24px; font-size:13px; color:var(--text-sub);
}
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:8px; color:var(--line); }
.breadcrumb a{ color:var(--text-sub); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb li[aria-current="page"]{ color:var(--text); }

/* Sub-category jump grid (the "跳转界面") */
.jump-section{ padding:48px 0 80px; }
.jump-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;
  margin-top:32px;
}
.jump-card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 20px; background:var(--bg);
  display:flex; flex-direction:column; text-decoration:none !important; color:var(--text);
  transition:border-color .15s ease;
}
.jump-card:hover{ border-color:var(--accent); }
.jump-card .j-num{
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
  display:block; margin-bottom:12px;
}
.jump-card h3{ font-size:16px; font-weight:600; margin-bottom:6px; }
.jump-card p{ font-size:13px; color:var(--text-sub); line-height:1.5; }
.jump-card .arrow{ margin-top:16px; font-size:14px; font-weight:500; color:var(--accent); }

.placeholder-note{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:20px 24px; background:var(--bg-alt);
  font-size:14px; color:var(--text-sub); margin-top:32px;
}
.placeholder-note .mono{ font-size:12px; color:var(--text); }

/* ---------- legacy simple hero (kept for backward-compat) ---------- */
.site-main{ max-width:960px; margin:0 auto; padding:40px 24px; }
.hero h2{ font-size:24px; margin-bottom:12px; }
.hero p{ color:var(--text-sub); }

/* ============================================================
   FOOTER (injected)
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:48px; margin-bottom:48px; }
.footer-col h4{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-sub); margin-bottom:16px;
}
.footer-col ul{ list-style:none; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ font-size:14px; color:var(--text); text-decoration:none !important; }
.footer-col ul li a:hover{ color:var(--accent); }
.footer-col p{ font-size:14px; color:var(--text-sub); }
.footer-col p .mono{ font-size:13px; color:var(--text); display:block; }
.cert-list{ display:flex; gap:8px; flex-wrap:wrap; }
.cert-list .tag{ background:var(--bg); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--text-sub);
}
.footer-bottom .mono{ font-size:12px; }
.social-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; }
.social-links a{ font-size:13px; color:var(--text-sub); text-decoration:none !important; }
.social-links a:hover{ color:var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Collapsed nav: <= 1024px — hide inline links/CTA, show hamburger.
   Full collapsed panel layout + .open state must live in this SAME breakpoint
   so the menu actually opens across 769-1024px (previously a dead zone). */
@media (max-width: 1024px){
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; } /* Hide CTA to prevent overflow */
  .nav-links{
    position:absolute; top:76px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 16px;
    display:none; /* hidden until toggled */
  }
  .nav-links.open{ display:flex; }
  .nav-links > li > a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-links > li:last-child > a{ border-bottom:none; }
  .has-dropdown > a::after{ float:right; margin-top:8px; }
  .dropdown{
    position:static; border:none; border-left:1px solid var(--line); border-radius:0;
    margin-left:8px; opacity:1; visibility:visible; transform:none; display:none; padding:0 0 8px;
  }
  .has-dropdown.open .dropdown{ display:block; }
}

/* Mobile: <= 768px — layout refinements (nav panel already handled above) */
@media (max-width: 768px){
  .nav-toggle{ display:flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .jump-grid{ grid-template-columns:1fr 1fr; }
}

/* Small mobile: <= 480px — single column layouts */
@media (max-width: 480px){
  .footer-grid{ grid-template-columns:1fr; }
  .jump-grid{ grid-template-columns:1fr; }
  .nav-logo-img{ height:36px; width:144px; } /* Smaller logo on very small screens */
}


/* ===== content page components (added by final-repair) ===== */
.section{ padding:48px 0; }
main>.page-head+.section{ padding-top:16px; }
.section h2,.section h3{ color:#294d40; }
.section .btn,.cta-band .btn{ border-radius:4px; white-space:normal; text-align:center; }
.section .btn--primary{ background:#294d40; border-color:#294d40; color:#fffefa; }
.section .btn--primary:hover{ background:#173b2e; border-color:#173b2e; }
.section-head{ max-width:720px; margin-bottom:32px; }
.section-head h2{ font-size:clamp(24px,3vw,32px); margin-bottom:12px; }
.section-head .sub{ color:var(--muted,#71717a); font-size:16px; }
.section--alt{ background:#f5f4ed; }
.prose{ max-width:720px; }
.prose p{ font-size:16px; color:var(--text-sub,#3f3f46); margin-bottom:16px; line-height:1.7; }
.prose h3{ margin:28px 0 12px; }
.prose a{ font-weight:500; }
.spec-list{ list-style:none; padding:0; margin:0; max-width:640px; }
.spec-list li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line,#e4e4e7); font-size:15px; }
.spec-list .k{ color:var(--text-sub,#3f3f46); }
.spec-list .v{ font-weight:500; text-align:right; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.info-card{ background:#fff; border:1px solid var(--line,#e4e4e7); border-radius:12px; padding:24px; }
.info-card h3{ font-size:17px; margin:8px 0 8px; }
.info-card p{ font-size:14px; color:var(--text-sub,#3f3f46); line-height:1.55; margin:0; }
.info-card .c-num{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent,#b45309); }
.cta-band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; background:#223f32; border-radius:12px; padding:40px 48px; }
.cta-band h2{ color:#fff; font-size:clamp(22px,2.6vw,28px); margin-bottom:8px; }
.cta-band p{ color:#d4dfd0; font-size:15px; margin:0; }
.cta-band .direct{ font-size:13px; color:#d4dfd0; margin-top:12px; }
.cta-band .direct a{ color:#fff; }
.cta-band .btn--primary{ background:#e9d9ab; border-color:#e9d9ab; color:#253e2e; }
.cta-band .btn--primary:hover{ background:#f6e8bd; border-color:#f6e8bd; }
.faq details{ border:1px solid var(--line,#e4e4e7); border-radius:10px; padding:0 20px; margin-bottom:12px; background:#fff; }
.faq summary{ padding:16px 0; font-weight:500; cursor:pointer; font-size:16px; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .faq-a{ padding:0 0 16px; margin:0; font-size:15px; color:var(--text-sub,#3f3f46); line-height:1.65; }

@media (max-width:640px){ .section{ padding:36px 0; } .cta-band{ padding:32px 24px; } }