/* ==========================================================================
   NOVA · 站点样式表
   改动顺序建议：先改 :root 里的颜色与字体，再改组件
   ========================================================================== */

:root{
  --ink:#10262C;
  --ink-2:#1B3740;
  --muted:#5A6F76;
  --muted-2:#8EA2A8;
  --paper:#FFFFFF;
  --paper-2:#F3F8F8;
  --line:#DDE9EA;
  --accent:#0F8A80;
  --accent-ink:#0A6B63;
  --accent-soft:#E4F3F1;
  --ok:#1F7A5C;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(21,23,28,.06), 0 4px 14px rgba(21,23,28,.05);
  --shadow-md:0 10px 34px rgba(21,23,28,.09);
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{margin:0; line-height:1.18; letter-spacing:-.02em; font-weight:650}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.6rem,3.1vw,2.5rem)}
h3{font-size:1.12rem; letter-spacing:-.01em}
p{margin:0}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink);
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--accent); border-radius:2px}

.lead{font-size:clamp(1rem,1.35vw,1.15rem); color:var(--muted); max-width:56ch}
.section{padding:clamp(4rem,8vw,7rem) 0}
.section--tint{background:var(--paper-2); border-block:1px solid var(--line)}
.section-head{max-width:62ch; display:grid; gap:1rem; margin-bottom:2.75rem}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.35rem; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; line-height:1;
  transition:transform .18s var(--ease), background .18s, box-shadow .18s, border-color .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--ink); color:#fff; box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--ink-2); box-shadow:var(--shadow-md)}
.btn--accent{background:var(--accent); color:#fff}
.btn--accent:hover{background:var(--accent-ink)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:#fff}
.btn--sm{padding:.6rem 1rem; font-size:.88rem}

/* ---------- 页头 ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.header.is-stuck{border-bottom-color:var(--line)}
.header__inner{display:flex; align-items:center; gap:1.5rem; height:72px}

.brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:-.02em; font-size:1.12rem}
.brand__mark{width:30px; height:30px; flex:none}
.brand small{display:block; font-size:.63rem; font-weight:500; letter-spacing:.16em; color:var(--muted-2); text-transform:uppercase}

.nav{display:flex; align-items:center; gap:.35rem; margin-left:auto}
.nav a{
  padding:.5rem .8rem; border-radius:999px; font-size:.94rem; font-weight:500; color:var(--muted);
  transition:color .16s, background .16s;
}
.nav a:hover{color:var(--ink); background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600; background:var(--paper-2)}

.header__cta{display:flex; align-items:center; gap:.5rem; margin-left:auto}

.nav-toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:12px;
  background:#fff; padding:0; place-items:center;
}
.nav-toggle span{display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .22s var(--ease), opacity .16s}
.nav-toggle span + span{margin-top:5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

@media (max-width:860px){
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; align-items:stretch;
    gap:.2rem; padding:1rem 1.25rem 1.6rem; margin:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  }
  .nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:.85rem .9rem; font-size:1rem}
  .nav-toggle{display:grid}
  .header__cta .btn--primary{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(60% 60% at 30% 20%, var(--accent-soft), transparent 70%),
             radial-gradient(50% 50% at 80% 0%, #E8F5F4, transparent 70%);
  pointer-events:none;
}
.hero__grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{margin:1.1rem 0 1.25rem}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero__actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}
.hero__note{margin-top:1.4rem; font-size:.85rem; color:var(--muted-2)}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__visual{order:-1}
}

/* 首页视觉：纯 SVG，无外部图片 */
.hero__visual{position:relative; aspect-ratio:1/.92; max-width:520px; justify-self:end; width:100%}
.hero__visual svg{width:100%; height:100%; filter:drop-shadow(0 18px 40px rgba(21,23,28,.12))}
@media (max-width:900px){ .hero__visual{max-width:420px; justify-self:center} }

/* ---------- 数据条 ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(2.5rem,5vw,4rem); background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.stats div{background:#fff; padding:1.4rem 1.3rem}
.stats b{display:block; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; letter-spacing:-.03em}
.stats span{font-size:.85rem; color:var(--muted)}
@media (max-width:640px){ .stats{grid-template-columns:1fr} }

/* ---------- 卡片 ---------- */
.cards{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.6rem;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#CBE0E1}
.card__icon{
  width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-ink); margin-bottom:1.1rem;
}
.card h3{margin-bottom:.5rem}
.card p{font-size:.94rem; color:var(--muted)}
.card ul{margin:.9rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem}
.card li{font-size:.9rem; color:var(--muted); display:flex; gap:.5rem}
.card li::before{content:"✓"; color:var(--ok); font-weight:700}

/* ---------- 图文分栏 ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.split--flip .split__media{order:2}
@media (max-width:880px){ .split{grid-template-columns:1fr} .split--flip .split__media{order:0} }
.split__media{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(160deg,#F1F7F7,#E6F1F0); aspect-ratio:4/3; display:grid; place-items:center;
}
.split__media svg{width:74%; height:auto}
.split h2{margin-bottom:1rem}
.split p{color:var(--muted)}
.split ul{margin:1.4rem 0 0; padding:0; list-style:none; display:grid; gap:.85rem}
.split li{display:grid; grid-template-columns:26px 1fr; gap:.8rem; font-size:.95rem; color:var(--muted)}
.split li b{display:block; color:var(--ink); font-size:.98rem; margin-bottom:.1rem}
.split li span{display:grid; place-items:start center; color:var(--accent); font-weight:700}

/* ---------- 步骤 ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; counter-reset:s}
.steps article{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.5rem 1.4rem; position:relative}
.steps article::before{
  counter-increment:s; content:"0" counter(s);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; color:var(--accent);
}
.steps h3{margin:.55rem 0 .4rem; font-size:1rem}
.steps p{font-size:.88rem; color:var(--muted)}
@media (max-width:880px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------- 引用 ---------- */
.quote{max-width:60ch; margin-inline:auto; text-align:center}
.quote blockquote{margin:0; font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.45; letter-spacing:-.015em; font-weight:500}
.quote cite{display:block; margin-top:1.3rem; font-style:normal; font-size:.88rem; color:var(--muted)}

/* ---------- CTA 条 ---------- */
.band{
  border-radius:var(--r-lg); padding:clamp(2rem,4vw,3.2rem);
  background:linear-gradient(135deg,var(--ink),#1E3B42); color:#fff;
  display:grid; grid-template-columns:1.4fr auto; gap:1.6rem; align-items:center;
}
.band h2{color:#fff; font-size:clamp(1.4rem,2.6vw,2rem)}
.band p{color:#B7CBCE; font-size:.95rem; margin-top:.55rem}
.band .btn--accent{white-space:nowrap}
@media (max-width:720px){ .band{grid-template-columns:1fr} }

/* ---------- 内页头 ---------- */
.page-head{padding:clamp(3rem,6vw,5rem) 0 0}
.page-head h1{font-size:clamp(1.9rem,4vw,3rem); margin:1rem 0 1rem}
.page-head .lead{max-width:62ch}
.crumbs{font-size:.82rem; color:var(--muted-2); display:flex; gap:.45rem; align-items:center}
.crumbs a:hover{color:var(--ink)}

/* ---------- 价格表 ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:start}
.plan{border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem 1.6rem; background:#fff; display:grid; gap:.9rem}
.plan--featured{border-color:var(--ink); box-shadow:var(--shadow-md); position:relative}
.plan--featured::after{
  content:"推荐"; position:absolute; top:-11px; left:1.6rem;
  background:var(--ink); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.08em;
  padding:.25rem .6rem; border-radius:999px;
}
.plan .price{font-size:2rem; font-weight:700; letter-spacing:-.03em}
.plan .price small{font-size:.85rem; font-weight:500; color:var(--muted)}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.plan li{font-size:.9rem; color:var(--muted); display:flex; gap:.5rem}
.plan li::before{content:"✓"; color:var(--ok); font-weight:700}
@media (max-width:880px){ .plans{grid-template-columns:1fr} }

/* ---------- 时间线 ---------- */
.timeline{display:grid; gap:0; border-left:2px solid var(--line); margin:0; padding:0 0 0 1.6rem; list-style:none}
.timeline li{position:relative; padding:0 0 1.9rem}
.timeline li::before{
  content:""; position:absolute; left:calc(-1.6rem - 6px); top:.5rem;
  width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--accent);
}
.timeline b{display:block; font-size:.78rem; letter-spacing:.1em; color:var(--accent-ink); font-weight:700}
.timeline span{display:block; font-weight:600; margin:.25rem 0 .3rem}
.timeline p{font-size:.92rem; color:var(--muted)}

/* ---------- 表单 ---------- */
.form{display:grid; gap:1.1rem}
.field{display:grid; gap:.45rem}
.field label{font-size:.88rem; font-weight:600}
.field input,.field textarea,.field select{
  width:100%; padding:.8rem .9rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font:inherit; font-size:.95rem; color:var(--ink);
  transition:border-color .16s, box-shadow .16s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(21,23,28,.08);
}
.field textarea{min-height:140px; resize:vertical}
.field .hint{font-size:.8rem; color:var(--muted-2)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }
.form__note{font-size:.82rem; color:var(--muted-2)}
.form__ok{
  display:none; align-items:center; gap:.6rem; padding:.9rem 1rem; border-radius:var(--r-sm);
  background:#EAF6F2; border:1px solid #C6E3D9; color:#14613F; font-size:.9rem;
}
.form__ok.is-on{display:flex}

/* ---------- 联系信息 ---------- */
.info{display:grid; gap:1.1rem; align-content:start}
.info__item{border:1px solid var(--line); border-radius:var(--r-md); padding:1.2rem 1.3rem; background:#fff}
.info__item b{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.35rem}
.info__item span{font-size:1rem; font-weight:600}
.info__item a:hover{color:var(--accent)}

/* ---------- 常见问题 ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:1.15rem 2rem 1.15rem 0; font-weight:600; font-size:1rem;
  list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:1.3rem; font-weight:400; transition:transform .2s;
}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 1.25rem; color:var(--muted); font-size:.94rem; max-width:70ch}

/* ---------- 页脚 ---------- */
.footer{background:var(--paper-2); border-top:1px solid var(--line); padding:3.2rem 0 2rem; margin-top:clamp(3rem,6vw,5rem)}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem}
.footer h4{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin:0 0 .9rem}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.92rem; color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer__brand p{font-size:.9rem; color:var(--muted); max-width:34ch; margin-top:.9rem}
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted-2);
}
@media (max-width:820px){ .footer__grid{grid-template-columns:1fr 1fr} }

/* ---------- 滚动显现（仅在 JS 可用时隐藏，避免脚本失效导致空白） ---------- */
.reveal{opacity:1}
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
}

/* ---------- 商品目录 ---------- */
.cat{margin-top:clamp(2.5rem,5vw,4rem)}
.cat__head{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--line)}
.cat__head h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.cat__head span{font-size:.85rem; color:var(--muted-2)}

.products{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem}
.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.product:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#CBE0E1}
.product__media{display:block; aspect-ratio:1/1; overflow:hidden; background:var(--paper-2)}
.product__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.product:hover .product__media img{transform:scale(1.04)}
.product__body{padding:1.05rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.product__tag{font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.product h3{font-size:1rem; line-height:1.35}
.product__spec{list-style:none; margin:0; padding:0; display:grid; gap:.2rem}
.product__spec li{font-size:.82rem; color:var(--muted)}
.product__foot{margin-top:auto; padding-top:.75rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.product__price{font-weight:700; font-size:.95rem}
.product__price small{font-weight:500; font-size:.72rem; color:var(--muted-2)}
.notice{
  margin-top:2.5rem; padding:1.1rem 1.3rem; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid #CBE4E1; font-size:.88rem; color:var(--accent-ink);
}