:root{
  --brand:#D2452E; --brand-d:#B93A25;
  --ink:#12151A; --dim:#6B7280; --hair:#E5E7EB; --soft:#F8F9FB; --paper:#FFFFFF;
  --fb:'Inter',system-ui,sans-serif; --fc:'Noto Sans SC',system-ui,sans-serif;
  --mw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:var(--fc);
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--brand); color:#fff}
a{color:inherit; text-decoration:none}
.w{max-width:var(--mw); margin:0 auto; padding:0 28px}
img,svg{display:block; max-width:100%}

:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:2px}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav .w{height:68px; display:flex; align-items:center; justify-content:space-between}
.nav .brand-mark{height:26px; width:auto}
.nav nav{display:flex; align-items:center; gap:30px}
.nav nav a.navlink{
  font-family:var(--fb); font-size:13px; font-weight:500; color:var(--ink);
  position:relative; padding:4px 0;
}
.nav nav a.navlink::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--brand);
  transition:right .22s ease;
}
.nav nav a.navlink:hover::after{right:0}
.nav nav a.navlink.active{color:var(--brand)}
.nav nav a.navlink.active::after{right:0}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fb); font-size:13px; font-weight:600;
  padding:10px 20px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:var(--brand)}
.btn-ghost{border-color:var(--hair); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- hero (home) ---------- */
.hero{padding:88px 0 64px; overflow:hidden}
.hero .w{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--brand)}
h1.headline{
  font-size:clamp(38px,5.4vw,64px); font-weight:900; letter-spacing:.01em; line-height:1.16;
  margin-bottom:8px; color:var(--ink);
}
.headline-en{
  font-family:var(--fb); font-size:14px; font-weight:500; color:var(--dim);
  letter-spacing:.02em; margin-bottom:26px;
}
.lead{
  max-width:480px; font-size:15.5px; color:#3A4048; margin-bottom:34px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px}
.hero-strip{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  font-family:var(--fb); font-size:11.5px; color:var(--dim);
  border-top:1px solid var(--hair); padding-top:18px; max-width:520px;
}
.hero-strip span{display:inline-flex; align-items:center; gap:7px}
.hero-strip span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brand)}

/* ---------- hero graphic (blueprint) ---------- */
.hero-graphic{position:relative}
.hero-graphic svg{width:100%; height:auto}
.bp-ring{fill:none; stroke:var(--hair); stroke-width:1}
.bp-ring.dash{stroke-dasharray:2 5}
.bp-tick{stroke:var(--hair); stroke-width:1}
.bp-cross{stroke:#D8DBE0; stroke-width:1}
.bp-label{font-family:var(--fb); font-size:6.4px; fill:var(--dim); letter-spacing:.03em}
.bp-mark{transform-origin:120px 120px}

@media (prefers-reduced-motion: no-preference){
  .bp-mark{animation:mark-in .9s cubic-bezier(.2,.7,.2,1) both}
  .bp-ring{animation:ring-in 1s ease-out both}
  .bp-ring.pulse{animation:ring-in 1s ease-out both, pulse 5s ease-in-out 1.1s infinite}
  .bp-tick,.bp-label,.bp-cross{animation:fade-in .7s ease-out both}
  .bp-label{animation-delay:.5s}
  .bp-tick,.bp-cross{animation-delay:.35s}
  .bp-ring:nth-of-type(2){animation-delay:.08s}
  .bp-ring:nth-of-type(3){animation-delay:.16s}
}
@keyframes mark-in{from{opacity:0; transform:scale(.82)} to{opacity:1; transform:scale(1)}}
@keyframes ring-in{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)}}
@keyframes fade-in{from{opacity:0} to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:1; transform:scale(1.015)}}

/* ---------- sub-page hero ---------- */
.page-hero{padding:64px 0 12px}
.page-hero h1{
  font-size:clamp(30px,4.4vw,46px); font-weight:900; letter-spacing:.01em; line-height:1.22;
  margin-bottom:14px; color:var(--ink); max-width:640px;
}
.page-hero .lead{margin-bottom:0; max-width:600px}
nav.breadcrumb{
  font-family:var(--fb); font-size:12px; color:var(--dim); padding:22px 0 0;
}
nav.breadcrumb a:hover{color:var(--brand)}
nav.breadcrumb .sep{margin:0 8px; color:var(--hair)}

/* ---------- section shell ---------- */
section{padding:84px 0}
.section-soft{background:var(--soft); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.section-head{max-width:620px; margin-bottom:44px}
.eb-num{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fb); font-weight:700; font-size:11px; color:#fff; background:var(--brand);
  border-radius:4px; padding:3px 9px; margin-bottom:16px;
}
h2.h2{font-size:clamp(24px,3.2vw,34px); font-weight:900; letter-spacing:.01em; margin-bottom:12px}
.section-lead{font-size:14.5px; color:var(--dim); max-width:520px}

/* ---------- card grid (services / about pillars) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--paper); border:1px solid var(--hair); border-radius:14px; padding:30px 26px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--brand); box-shadow:0 16px 32px -20px rgba(18,21,26,.25)}
.card-no{font-family:var(--fb); font-size:12px; font-weight:700; color:var(--brand); letter-spacing:.08em; margin-bottom:18px}
.card-title{font-size:17px; font-weight:700; margin-bottom:4px}
.card-title-en{font-family:var(--fb); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:14px}
.card-desc{font-size:13.5px; color:#4B5563; line-height:1.75}
.card-points{margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); list-style:none}
.card-points li{
  font-size:12.5px; color:var(--dim); line-height:1.7; padding-left:14px; position:relative; margin-bottom:5px;
}
.card-points li::before{content:""; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background:var(--brand)}
.card-points li:last-child{margin-bottom:0}
.more-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:34px;
  font-family:var(--fb); font-size:13px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:2px; transition:color .18s ease, border-color .18s ease;
}
.more-link:hover{color:var(--brand); border-color:var(--brand)}

/* ---------- model grid (home) ---------- */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.model-card{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--paper); border:1px solid var(--hair); border-radius:14px; padding:24px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.model-card:hover{transform:translateY(-4px); border-color:var(--brand); box-shadow:0 16px 32px -20px rgba(18,21,26,.25)}
.model-mark{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-bottom:16px; border-radius:10px;
  background:var(--ink); color:#fff; font-family:var(--fb); font-weight:800; font-size:15px;
  transition:background .22s ease;
}
.model-card:hover .model-mark{background:var(--brand)}
.model-name{font-family:var(--fb); font-size:16px; font-weight:700; color:var(--ink)}
.model-sub{font-size:12.5px; color:var(--dim); margin-top:2px}

/* ---------- prose (about) ---------- */
.prose{max-width:680px; font-size:14.5px; color:#374151}
.prose p{margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}

/* ---------- contact ---------- */
.contact .w{max-width:720px; text-align:center}
.contact .section-head{margin:0 auto 34px; text-align:center}
.contact .section-lead{margin:0 auto}
.contact-email{
  display:inline-block; font-family:var(--fb); font-weight:700;
  font-size:clamp(24px,4.2vw,38px); color:var(--ink); border-bottom:2px solid var(--brand);
  padding-bottom:6px; margin:8px 0 18px; transition:color .18s ease;
  word-break:break-all;
}
.contact-email:hover{color:var(--brand)}
.contact-sub{font-size:13px; color:var(--dim)}
.contact-facts{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--hair);
  font-family:var(--fb); font-size:12.5px; color:var(--dim);
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair); padding:30px 0}
footer .w{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer .f-mark{height:16px; width:auto; opacity:.85}
footer .f-meta{font-family:var(--fb); font-size:11.5px; color:var(--dim); display:flex; flex-direction:column; align-items:flex-end; gap:4px}
footer .f-beian{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end}
footer .f-beian a{color:var(--dim); transition:color .18s ease}
footer .f-beian a:hover{color:var(--brand)}
footer .f-beian-police{display:inline-flex; align-items:center; gap:4px; white-space:nowrap; vertical-align:middle}
footer .f-beian-police img{width:14px; height:16px; display:inline-block; flex-shrink:0; vertical-align:middle}

@media (max-width:640px){
  footer .w{justify-content:center; text-align:center}
  footer .f-meta{align-items:center}
  footer .f-beian{justify-content:center}
}

@media (max-width:860px){
  .hero .w{grid-template-columns:1fr; gap:52px}
  .hero-graphic{max-width:220px; margin:36px auto 0}
  .card-grid{grid-template-columns:1fr}
  .card-grid.cols-2{grid-template-columns:1fr}
  .model-grid{grid-template-columns:repeat(2,1fr)}
  .nav nav a.navlink{display:none}
  section{padding:64px 0}
}