/* main.css · 开锁网站 · 极简科技冷银
   风格旋钮（主色 / 强调色 / 圆角 / 字体 / 密度）全部落在 :root 段 */
:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --primary:#1d4ed8;
  --accent:#10b981;
  --line:#e5e8ef;
  --radius:10px;
  --gap:24px;
  --font-heading:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 辅助令牌：冷银层次用的圆角梯度与阴影 */
  --radius-lg:14px;
  --radius-xl:18px;
  --shadow-sm:0 1px 3px rgba(17,24,39,.08);
  --shadow-md:0 10px 26px rgba(17,24,39,.10);
  --shadow-lg:0 18px 40px rgba(17,24,39,.12);
  --dark:#111827;
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background-color:var(--bg);
  background-image:radial-gradient(880px 420px at 50% -160px, #e6eeff 0%, rgba(230,238,255,0) 72%);
  background-repeat:no-repeat;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; color:var(--text); font-family:var(--font-heading); font-weight:700; letter-spacing:-.3px; line-height:1.3; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--primary); text-decoration:none; transition:color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
img{ max-width:100%; height:auto; }
svg{ max-width:100%; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 布局容器 ---------- */
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px 88px; }
.section{ margin-top:76px; }
.section-tight{ margin-top:36px; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 20px;
  border:1px solid transparent; border-radius:var(--radius);
  font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.2;
  cursor:pointer; transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(29,78,216,.22); }
.btn-primary:hover{ background:#1a45c2; box-shadow:0 10px 22px rgba(29,78,216,.28); }
.btn-ghost{ background:var(--card); color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:rgba(29,78,216,.5); color:var(--primary); }
.btn-block{ width:100%; }

/* ---------- 页头 ---------- */
.site-head{
  position:sticky; top:0; z-index:30;
  background:rgba(245,247,250,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{ max-width:1120px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:16px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); font-family:var(--font-heading); font-weight:700; font-size:16.5px; letter-spacing:-.3px; }
.brand .mark{
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:9px; background:linear-gradient(135deg,#1d4ed8,#2563eb); color:#fff;
  font-size:15px; font-weight:700;
}
.brand .name{ white-space:nowrap; }
.site-head .menu{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.menu a{ display:inline-flex; align-items:center; min-height:40px; padding:0 4px; font-size:14px; color:var(--muted); }
.menu a:hover{ color:var(--primary); }
.menu a.is-active{ color:var(--primary); font-weight:700; }
.site-head .menu a{ padding:0 12px; border-radius:8px; }
.site-head .menu a:hover{ color:var(--text); background:#eef2f9; }
.site-head .menu a.is-active{ color:var(--primary); background:rgba(29,78,216,.10); }
.nav-toggle{ display:none; }
.nav-btn{ display:none; }

/* ---------- 首屏 ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:48px; align-items:center;
  padding-top:48px;
}
.hero-copy{ min-width:0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:999px;
  background:rgba(29,78,216,.08); border:1px solid rgba(29,78,216,.18);
  color:var(--primary); font-size:12.5px; font-weight:600;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.16); }
.hero-title{ margin-top:20px; font-size:clamp(30px,4vw,44px); line-height:1.18; }
.hero-title .hl{ color:var(--primary); }
.hero-desc{ margin-top:18px; max-width:54ch; font-size:15.5px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-facts{ display:flex; flex-wrap:wrap; gap:36px; margin-top:34px; padding-top:22px; border-top:1px dashed var(--line); }
.hero-facts li{ display:flex; flex-direction:column; }
.hero-facts strong{ font-family:var(--font-heading); font-size:26px; line-height:1.2; letter-spacing:-.3px; color:var(--text); }
.hero-facts span{ font-size:13px; color:var(--muted); }

/* ---------- 询价卡 ---------- */
.quote-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:26px; box-shadow:var(--shadow-lg);
}
.quote-title{ font-size:19px; }
.quote-sub{ margin-top:8px; font-size:13.5px; }
.quote-form{ display:grid; gap:14px; margin-top:20px; }
.field{ display:grid; gap:6px; }
.field-label{ font-size:12.5px; font-weight:600; color:var(--text); }
.input{
  width:100%; min-height:44px; padding:10px 12px;
  font-family:inherit; font-size:14.5px; color:var(--text);
  background:#f8fafc; border:1px solid var(--line); border-radius:var(--radius);
  appearance:none; -webkit-appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.input::placeholder{ color:#9aa4b2; }
.input:focus{ outline:none; background:#fff; border-color:var(--primary); box-shadow:0 0 0 3px rgba(29,78,216,.14); }
select.input{
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234b5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.quote-note{ font-size:12px; color:var(--muted); text-align:center; }
.quote-urgent{
  display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 14px;
  background:#f4f7fe; border:1px solid rgba(29,78,216,.16); border-radius:var(--radius);
}
.quote-urgent .ic{ flex:none; color:var(--primary); }
.quote-urgent p{ font-size:12.5px; }
.quote-urgent strong{ display:block; font-family:var(--font-heading); font-size:15px; letter-spacing:-.2px; color:var(--text); }

/* ---------- 保障条 ---------- */
.trust-list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.trust-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.trust-item .ic{ flex:none; margin-top:2px; color:var(--primary); }
.trust-item h3{ font-size:14.5px; }
.trust-item p{ margin-top:4px; font-size:12.5px; }

/* ---------- 区块标题 ---------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.sec-kicker{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }
.sec-title{ margin-top:8px; font-size:clamp(21px,2.2vw,27px); }
.sec-lead{ margin-top:8px; max-width:62ch; font-size:14px; }
.sec-more{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; white-space:nowrap; }
.sec-more:hover{ color:#1a45c2; text-decoration:underline; }

/* ---------- 栅格与卡片 ---------- */
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.card{
  display:block; padding:22px; color:var(--muted);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-link:hover{ border-color:rgba(29,78,216,.42); box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ---------- 开锁服务 ---------- */
.svc-icon{
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px;
  border-radius:11px; background:#f1f5fd; border:1px solid var(--line); color:var(--primary);
}
.svc-icon .ic{ width:21px; height:21px; }
.svc-title{ font-size:16.5px; }
.svc-text{ margin-top:8px; font-size:13.5px; }
.svc-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.svc-price{ font-family:var(--font-heading); font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; }
.svc-arrow{ font-size:13px; font-weight:600; color:var(--primary); }

/* ---------- 服务流程 ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.step{ position:relative; padding-top:20px; border-top:2px solid var(--line); }
.step::before{ content:""; position:absolute; top:-2px; left:0; width:34px; height:2px; background:var(--primary); }
.step-no{ font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--primary); }
.step h3{ margin-top:10px; font-size:15.5px; }
.step p{ margin-top:6px; font-size:13.5px; }

/* ---------- 服务价格 ---------- */
.price-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:var(--gap); align-items:start; }
.price-box{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:6px 24px; box-shadow:var(--shadow-sm); }
.price-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px dashed var(--line); }
.price-row:last-child{ border-bottom:0; }
.price-name{ font-size:15.5px; }
.price-desc{ margin-top:4px; font-size:12.5px; }
.price-tag{ text-align:right; font-family:var(--font-heading); font-size:20px; font-weight:700; letter-spacing:-.3px; color:var(--primary); white-space:nowrap; }
.price-tag span{ display:block; font-family:var(--font-body); font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); }
.rule-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }
.rule-title{ font-size:15.5px; }
.rule-list{ margin-top:14px; }
.rule-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.rule-list li:last-child{ border-bottom:0; }
.rule-k{ color:var(--muted); }
.rule-v{ font-family:var(--font-heading); font-weight:600; color:var(--text); white-space:nowrap; }
.rule-note{ margin-top:14px; font-size:12.5px; }
.rule-card .btn{ margin-top:18px; }

/* ---------- 服务区域 ---------- */
.area-card{ padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.area-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.area-name{ font-size:15.5px; }
.area-meta{ margin-top:10px; font-size:12.5px; }
.status{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap;
  background:#f1f5f9; border:1px solid var(--line); color:#64748b;
}
.status i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.is-on{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.32); color:#0d8f68; }

/* ---------- 开锁知识 ---------- */
.post-card{ display:flex; flex-direction:column; }
.post-tag{
  align-self:flex-start; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; color:var(--primary);
  background:rgba(29,78,216,.08); border:1px solid rgba(29,78,216,.16);
}
.post-title{ margin-top:14px; font-size:16.5px; line-height:1.45; }
.post-text{ margin-top:8px; font-size:13.5px; flex:1; }
.post-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.post-more{ font-weight:600; color:var(--primary); }

/* ---------- 关于我们 ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:32px; align-items:center; }
.about-text{ margin-top:14px; max-width:62ch; font-size:14.5px; }
.check-list{ margin-top:20px; display:grid; gap:12px; }
.check-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
.check-list .ic{ flex:none; width:17px; height:17px; margin-top:3px; color:var(--accent); }
.about-main .btn{ margin-top:24px; }
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.stat{ padding:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.stat strong{ display:block; font-family:var(--font-heading); font-size:28px; line-height:1.2; letter-spacing:-.3px; color:var(--text); }
.stat span{ display:block; margin-top:6px; font-size:12.5px; }

/* ---------- 联系我们 CTA ---------- */
.cta{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px; align-items:center; padding:44px;
  border-radius:var(--radius-xl); background:var(--dark); color:#c7d0dd;
  box-shadow:0 24px 50px rgba(17,24,39,.20);
}
.cta::after{
  content:""; position:absolute; top:-120px; right:-80px; width:320px; height:320px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(29,78,216,.75) 0%, rgba(29,78,216,0) 68%);
}
.cta-kicker{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.cta-title{ margin-top:12px; font-size:clamp(22px,2.4vw,30px); color:#fff; }
.cta-text{ margin-top:12px; max-width:48ch; font-size:14px; }
.cta-side{ position:relative; }
.cta-phone{ display:block; font-family:var(--font-heading); font-weight:700; font-size:clamp(26px,3vw,34px); letter-spacing:-.3px; color:#fff; }
.cta-phone:hover{ color:#a9c2ff; }
.cta-lines{ display:grid; gap:6px; margin:14px 0 20px; font-size:13px; }
.cta .btn-primary{ background:#fff; color:var(--dark); box-shadow:none; }
.cta .btn-primary:hover{ background:#e8eeff; color:var(--primary); }

/* ---------- 页脚 ---------- */
.site-foot{ border-top:1px solid var(--line); background:#eef1f6; }
.foot-inner{
  max-width:1120px; margin:0 auto; padding:48px 24px 32px;
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr); gap:40px;
}
.brand-foot{ font-size:15.5px; }
.foot-desc{ margin-top:14px; max-width:38ch; font-size:13.5px; }
.foot-status{ margin-top:16px; }
.foot-title{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.foot-col .menu{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:12px; }
.foot-col .menu a{ min-height:38px; font-size:13.5px; }
.foot-list{ margin-top:12px; display:grid; gap:10px; }
.foot-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px dashed rgba(17,24,39,.08); font-size:13.5px; }
.foot-list li:last-child{ padding-bottom:0; border-bottom:0; }
.foot-list span{ color:var(--muted); }
.foot-list strong,.foot-list a{ font-weight:600; color:var(--text); }
.foot-list a:hover{ color:var(--primary); }
.foot-bar{
  max-width:1120px; margin:0 auto; padding:16px 24px 28px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  border-top:1px solid var(--line); font-size:12.5px; color:#8b95a5;
}

/* ---------- 平板 ---------- */
@media (max-width:1024px){
  .wrap{ padding:0 20px 72px; }
  .head-inner{ padding:10px 20px; }
  .site-head .menu a{ padding:0 10px; font-size:14px; }
  .section{ margin-top:60px; }
  .section-tight{ margin-top:30px; }
  .hero{ grid-template-columns:minmax(0,1fr); gap:32px; padding-top:36px; }
  .hero-desc{ max-width:none; }
  .grid-2,.grid-3,.grid-4,.trust-list,.steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .price-grid,.about-grid,.cta{ grid-template-columns:minmax(0,1fr); }
  .cta{ gap:26px; padding:36px; }
  .foot-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
}

/* ---------- 小屏：导航收成纯 CSS 折叠面板 ---------- */
@media (max-width:860px){
  .nav-btn{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:44px; height:44px; margin-left:auto; padding:0 11px;
    border:1px solid var(--line); border-radius:10px; background:var(--card);
    box-shadow:var(--shadow-sm); cursor:pointer;
  }
  .nav-btn span{ display:block; height:1.5px; border-radius:2px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
  .nav-toggle:checked ~ .nav-btn span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-btn span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-btn span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
  .head-inner .menu{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin-left:0;
    padding:8px 16px 14px; background:var(--card);
    border-bottom:1px solid var(--line); box-shadow:0 18px 32px rgba(17,24,39,.10);
  }
  .nav-toggle:checked ~ .menu{ display:flex; }
  .site-head .menu a{ width:100%; min-height:48px; padding:0 12px; font-size:15px; border-radius:8px; }
  .foot-col .menu a{ min-height:44px; }
}

/* ---------- 手机 ---------- */
@media (max-width:720px){
  .wrap{ padding:0 16px 56px; }
  .head-inner{ padding:8px 16px; gap:12px; }
  .brand{ font-size:15.5px; }
  .section{ margin-top:48px; }
  .section-tight{ margin-top:26px; }
  .hero{ padding-top:26px; gap:26px; }
  .hero-title{ font-size:27px; }
  .hero-desc{ font-size:14.5px; }
  .hero-actions{ margin-top:22px; gap:10px; }
  .hero-actions .btn{ flex:1 1 160px; }
  .hero-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px; padding-top:18px; }
  .hero-facts strong{ font-size:21px; }
  .quote-card{ padding:20px; }
  .grid-2,.grid-3,.grid-4,.trust-list,.steps{ grid-template-columns:minmax(0,1fr); }
  .sec-head{ margin-bottom:18px; }
  .sec-more{ min-height:40px; }
  .card{ padding:18px; }
  .price-box{ padding:2px 18px; }
  .price-row{ padding:14px 0; gap:10px; }
  .price-tag{ font-size:18px; }
  .stats{ gap:14px; }
  .stat{ padding:18px; }
  .stat strong{ font-size:24px; }
  .cta{ padding:26px 20px; }
  .cta::after{ display:none; }
  .foot-inner{ grid-template-columns:minmax(0,1fr); gap:28px; padding:36px 16px 22px; }
  .foot-bar{ flex-direction:column; padding:14px 16px 24px; }
}