:root {
  --ink:#16213e;
  --brand:#0f766e;
  --accent:#ffb703;
  --soft:#f3faf8;
  --muted:#5f6675;
  --line:#e5e7eb;
  --white:#fff;
  --shadow:0 18px 45px rgba(15,23,42,.12)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:#171923;
  font-family:Arial,"Microsoft YaHei",sans-serif;
  line-height:1.74;
  background:#fff
}
a {
  text-decoration:none;
  color:inherit
}
img {
  max-width:100%;
  display:block
}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px)
}
.topline {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:8px max(18px,calc((100% - 1180px)/2));
  color:#fff;
  background:linear-gradient(90deg,var(--ink),var(--brand));
  font-size:14px
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:min(1180px,calc(100% - 36px));
  margin:auto
}
.logo {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  font-weight:900
}
.logo-mark {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--accent))
}
.logo small {
  display:block;
  color:var(--muted);
  font-size:11px
}
.nav ul {
  display:flex;
  gap:3px;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto
}
.nav a {
  display:block;
  padding:10px 9px;
  border-radius:6px;
  font-weight:800;
  font-size:14px
}
.nav a[aria-current=page],.nav a:hover {
  background:var(--soft);
  color:var(--brand)
}
.hero {
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(320px,.74fr);
  align-items:center;
  gap:42px;
  padding:64px max(18px,calc((100% - 1180px)/2));
  color:#fff;
  background:radial-gradient(circle at 82% 18%, color-mix(in srgb,var(--accent),transparent 40%), transparent 30%),linear-gradient(135deg,var(--ink),var(--brand))
}
.hero h1 {
  margin:0 0 18px;
  font-size:clamp(36px,5.2vw,66px);
  line-height:1.08
}
.hero p {
  color:rgba(255,255,255,.86);
  font-size:18px
}
.symbol-strip {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0 6px
}
.symbol-strip span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 15px;
  border:2px solid var(--accent);
  border-radius:6px;
  background:#fff;
  color:#111827;
  font-size:18px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.18)
}
.section-symbol {
  font-size:22px;
  margin-right:8px
}
.eyebrow {
  margin:0 0 12px;
  color:var(--accent);
  font-weight:900
}
.hero-card {
  padding:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  border-radius:8px;
  box-shadow:var(--shadow)
}
.hero-card img {
  border-radius:6px
}
.btns {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:10px 18px;
  border-radius:6px;
  font-weight:900
}
.btn.primary {
  background:var(--accent);
  color:#111827
}
.btn.ghost {
  border:1px solid rgba(255,255,255,.4);
  color:#fff
}
main>section:not(.hero) {
  width:min(1180px,calc(100% - 36px));
  margin:auto
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:50px 0
}
.metrics article,.panel,.cards article,.case-wall article,.news article,.faq details,.contact-box {
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.08)
}
.metrics article {
  padding:22px
}
.metrics strong {
  display:block;
  color:var(--brand);
  font-size:30px
}
.split,.contact-grid {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(280px,.52fr);
  gap:30px;
  padding:68px 0
}
.split aside,.panel {
  padding:28px;
  background:var(--soft)
}
.cards,.case-wall,.product-grid,.service-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}
.cards article,.product-grid article,.service-grid article {
  padding:24px;
  border-radius:6px;
  background:var(--soft);
  border:1px solid var(--line)
}
.timeline,.story,.product-section,.service-section,.news,.faq,.cta,.table-section {
  padding:68px 0
}
.timeline ol {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:0;
  list-style:none
}
.timeline li {
  padding:22px;
  border-left:5px solid var(--brand);
  background:var(--soft)
}
.matrix {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  padding:68px 0
}
.matrix article {
  padding:30px;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--ink))
}
.case-wall article,.news article,.faq details,.contact-box {
  padding:22px
}
.table-section table {
  width:100%;
  border-collapse:collapse
}
.table-section th,.table-section td {
  padding:13px;
  border:1px solid var(--line);
  text-align:left
}
.quote-band {
  padding:46px max(18px,calc((100% - 1180px)/2));
  background:var(--ink);
  color:#fff
}
.quote-band div {
  width:min(1180px,100%);
  margin:auto
}
.site-footer {
  padding:46px max(18px,calc((100% - 1180px)/2));
  color:rgba(255,255,255,.82);
  background:#111827
}
.site-footer h2 {
  color:#fff
}
.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:18px 0
}
@media(max-width:920px) {
  .topline,.nav {
  align-items:flex-start;
  flex-direction:column
}
.hero,.split,.matrix,.contact-grid {
  grid-template-columns:1fr
}
.metrics,.cards,.case-wall,.product-grid,.service-grid,.timeline ol {
  grid-template-columns:1fr
}
.hero {
  min-height:auto
}
.nav ul {
  width:100%
}

}