/* ============================================================
   样范儿集 · 官方网站
   品牌色沿用小程序原型设计变量：--brand:#225E55 / 金 --gold
   ============================================================ */
:root{
  --brand:#225E55;          /* 主品牌墨绿 */
  --brand-deep:#173F39;
  --brand-soft:#EAF1EE;
  --gold:#B08D2E;           /* 正文可用金 */
  --gold-bright:#C9A227;    /* 图形/描边金 */
  --gold-soft:#F1E6C8;
  --ink:#202A35;
  --sub:#556575;
  --line:#E3E7E9;
  --paper:#F7F5F0;          /* 暖米白背景 */
  --surface:#FFFFFF;
  --platform:#2456B8;

  --serif:Georgia,"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(23,63,57,.08);
  --shadow-lg:0 24px 60px rgba(23,63,57,.14);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}

/* ---------------- 顶部导航 ---------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,245,240,.88);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:72px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:38px;height:38px;border-radius:10px}
.brand .bn{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.06em;color:var(--brand-deep)}
.brand .bs{font-size:11px;color:var(--sub);letter-spacing:.16em;margin-top:-2px}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{font-size:15px;color:var(--sub);transition:.18s;position:relative}
.nav a:hover{color:var(--brand)}
.nav a.on{color:var(--brand-deep);font-weight:600}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:2px;background:var(--gold-bright)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 22px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:.02em;transition:.18s;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{border:1px solid var(--brand);color:var(--brand)}
.btn-ghost:hover{background:var(--brand-soft)}
.btn-gold{background:var(--gold-bright);color:#3A2E10}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-lg{height:52px;padding:0 30px;font-size:16px}
.nav .btn{margin-left:4px}

.menu-toggle{display:none;margin-left:auto;font-size:24px;color:var(--brand)}

/* ---------------- 通用版块 ---------------- */
section{padding:88px 0}
.eyebrow{
  font-family:var(--serif);font-size:13px;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;margin-bottom:14px;
}
.h1{font-family:var(--serif);font-size:52px;line-height:1.24;font-weight:600;color:var(--brand-deep);letter-spacing:.01em}
.h2{font-family:var(--serif);font-size:36px;line-height:1.3;font-weight:600;color:var(--brand-deep)}
.h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--brand-deep)}
.lead{font-size:18px;color:var(--sub);max-width:720px}
.muted{color:var(--sub)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:48px}

.divider{width:52px;height:2px;background:var(--gold-bright);margin:18px 0 26px}
.center .divider{margin:18px auto 26px}

/* ---------------- 首屏 ---------------- */
.hero{padding:76px 0 72px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 460px at 84% 12%,rgba(201,162,39,.12),transparent 62%),
             radial-gradient(700px 420px at 6% 88%,rgba(34,94,85,.10),transparent 60%);
  pointer-events:none;
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-stats{display:flex;gap:44px;margin-top:52px;flex-wrap:wrap}
.hero-stats .st b{font-family:var(--serif);font-size:30px;color:var(--brand);display:block;line-height:1.2}
.hero-stats .st span{font-size:14px;color:var(--sub)}
.hero-visual{position:relative}
.hero-visual img{width:100%;border-radius:20px;box-shadow:var(--shadow-lg)}
.hero-badge{
  position:absolute;left:-16px;bottom:34px;background:var(--surface);
  border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;display:flex;gap:11px;align-items:center;
}
.hero-badge .dotline{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);font-weight:700}
.hero-badge b{font-size:14px;display:block}
.hero-badge span{font-size:12px;color:var(--sub)}

/* ---------------- 卡片网格 ---------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:.2s;
}
.card:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-3px)}
.card .ic{
  width:48px;height:48px;border-radius:12px;background:var(--brand-soft);
  display:grid;place-items:center;color:var(--brand);margin-bottom:18px;
}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:19px;font-weight:600;color:var(--brand-deep);margin-bottom:9px}
.card p{font-size:15px;color:var(--sub);line-height:1.72}
.card .tag{
  display:inline-block;font-size:12px;color:var(--gold);border:1px solid var(--gold-soft);
  background:linear-gradient(0deg,#FBF7EA,#FBF7EA);border-radius:999px;padding:3px 11px;margin-bottom:14px;letter-spacing:.04em;
}

/* ---------------- 流程图 ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{position:relative;padding-top:16px}
.step .no{
  font-family:var(--serif);font-size:15px;font-weight:600;color:#fff;background:var(--brand);
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;margin-bottom:16px;
}
.step h3{font-size:17px;font-weight:600;color:var(--brand-deep);margin-bottom:8px}
.step p{font-size:14px;color:var(--sub)}
.step::after{
  content:"";position:absolute;top:33px;right:-10px;width:20px;height:1px;background:var(--gold-bright);opacity:.6;
}
.steps .step:last-child::after{display:none}

/* ---------------- 图文交替 ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .txt{order:2}
.split.solo{grid-template-columns:1fr;max-width:820px}
.split img{border-radius:18px;box-shadow:var(--shadow)}
.split ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px}
.split li{display:flex;gap:12px;font-size:15px;color:var(--sub);line-height:1.6}
.split li::before{
  content:"";flex-shrink:0;width:20px;height:20px;margin-top:3px;
  border-radius:999px;background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23225E55' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.split li b{color:var(--ink);font-weight:600}

/* ---------------- 深色强调带 ---------------- */
.band{background:var(--brand-deep);color:#EAF1EE}
.band .h2,.band .h3{color:#fff}
.band .eyebrow{color:var(--gold-bright)}
.band .lead,.band .muted{color:#BFD2CC}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.band .card:hover{border-color:var(--gold-bright);background:rgba(255,255,255,.09)}
.band .card h3{color:#fff}
.band .card p{color:#BFD2CC}
.band .card .ic{background:rgba(201,162,39,.18);color:var(--gold-bright)}

/* ---------------- 价格/服务包 ---------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column}
.plan.hi{border-color:var(--gold-bright);box-shadow:var(--shadow-lg);position:relative}
.plan.hi::before{
  content:"推荐";position:absolute;top:-13px;left:30px;background:var(--gold-bright);color:#3A2E10;
  font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;letter-spacing:.08em;
}
.plan h3{font-family:var(--serif);font-size:21px;color:var(--brand-deep);margin-bottom:6px}
.plan .desc{font-size:14px;color:var(--sub);margin-bottom:20px}
.plan .price{font-family:var(--serif);font-size:34px;color:var(--brand);margin-bottom:4px}
.plan .price small{font-size:14px;color:var(--sub);font-family:var(--sans)}
.plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.plan li{font-size:14.5px;color:var(--sub);display:flex;gap:10px}
.plan li::before{content:"·";color:var(--gold-bright);font-weight:700}
.plan .btn{width:100%;justify-content:center}

/* ---------------- 案例 ---------------- */
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.case:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.case .cover{aspect-ratio:4/3;overflow:hidden;background:var(--brand-soft)}
.case .cover img{width:100%;height:100%;object-fit:cover}
.case .bd{padding:22px 24px 26px}
.case .bd .cat{font-size:12px;color:var(--gold);letter-spacing:.1em}
.case .bd h3{font-size:18px;font-weight:600;color:var(--brand-deep);margin:8px 0 8px}
.case .bd p{font-size:14px;color:var(--sub)}

/* ---------------- 文本备注 ---------------- */
.note{font-size:13px;color:var(--sub);margin-top:14px}

/* 联系方式信息块 */
.ci{display:flex;gap:14px;align-items:flex-start}
.ci .ic{width:42px;height:42px;border-radius:11px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);flex-shrink:0}
.ci b{font-size:15px;display:block}
.ci span{font-size:14px;color:var(--sub)}

/* ---------------- 关于我们 ---------------- */
.about-hero{background:var(--brand-soft);border-radius:20px;padding:52px 56px}
.factlist{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.fact b{display:block;font-size:14px;color:var(--sub);font-weight:500;margin-bottom:6px}
.fact span{font-size:17px;color:var(--brand-deep);font-weight:600}
.tl{list-style:none;border-left:2px solid var(--line);padding-left:26px;display:flex;flex-direction:column;gap:26px}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-33px;top:7px;width:12px;height:12px;border-radius:999px;background:var(--gold-bright);border:2px solid var(--paper)}
.tl b{font-family:var(--serif);color:var(--brand-deep);font-size:15px;letter-spacing:.06em}
.tl p{font-size:14.5px;color:var(--sub)}

/* ---------------- 法律页 ---------------- */
.legal{padding:60px 0 90px}
.legal .doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:52px 56px;max-width:900px;margin:0 auto}
.legal h1{font-family:var(--serif);font-size:34px;color:var(--brand-deep);margin-bottom:8px}
.legal .upd{font-size:13px;color:var(--sub);margin-bottom:34px}
.legal h2{font-size:19px;font-weight:600;color:var(--brand-deep);margin:30px 0 10px}
.legal p,.legal li{font-size:15px;color:var(--sub);line-height:1.85}
.legal ul{padding-left:22px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.legal .hl{background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:14px 18px;margin:18px 0;font-size:14.5px;color:var(--brand-deep)}

/* ---------------- CTA 收尾 ---------------- */
.cta{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);border-radius:22px;padding:60px 56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta h2{font-family:var(--serif);font-size:32px;color:#fff;line-height:1.3}
.cta p{color:#C8DCD6;margin-top:10px;font-size:16px}
.cta .btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------- 页脚 ---------------- */
.site-footer{background:var(--brand-deep);color:#AFC5BF;padding:64px 0 30px;margin-top:0}
.site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .top > .brand{display:block}
.site-footer .brand .bn{color:#fff}
.site-footer .fdesc{font-size:14px;color:#AFC5BF;margin-top:16px;max-width:320px;line-height:1.75}
.site-footer h4{font-size:14px;color:#fff;margin-bottom:16px;font-weight:600;letter-spacing:.04em}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer ul a,.site-footer ul li{font-size:14px;color:#AFC5BF;transition:.16s}
.site-footer ul a:hover{color:var(--gold-bright)}
.site-footer .bottom{padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#8FA9A3}
.site-footer .bottom a:hover{color:var(--gold-bright)}
.site-footer .lic{display:flex;gap:18px;flex-wrap:wrap}

/* ---------------- 响应式 ---------------- */
@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .hero-visual{max-width:560px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev .txt{order:0}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px}
  .step::after{display:none}
  .site-footer .top{grid-template-columns:1fr 1fr}
}
/* ---------------- 产品示例图 ---------------- */
.imgcap{font-size:12.5px;color:var(--sub);margin-top:12px;line-height:1.6}
.imgcol{display:flex;flex-direction:column;align-items:center}
.imgcol img{width:auto;max-width:264px}
.shot-duo{display:flex;gap:20px;justify-content:center;align-items:flex-start}
.shot-duo img{width:44%;max-width:248px;border-radius:16px;box-shadow:var(--shadow-lg)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.shot{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 26px;text-align:center;transition:.2s}
.shot:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-3px)}
.shot .ph{margin:0 auto 16px;width:200px}
.shot .ph img{width:100%;border-radius:12px;box-shadow:var(--shadow)}
.shot h3{font-size:17px;font-weight:600;color:var(--brand-deep);margin-bottom:8px}
.shot p{font-size:14px;color:var(--sub);line-height:1.7}
.shot .tag{display:inline-block;font-size:12px;color:var(--gold);border:1px solid var(--gold-soft);background:#FBF7EA;border-radius:999px;padding:3px 11px;margin-bottom:12px;letter-spacing:.04em}

/* ---------------- 服务范围清单 ---------------- */
.incl{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.incl li{display:flex;gap:11px;font-size:15px;color:var(--sub);line-height:1.62}
.incl li::before{
  content:"";flex-shrink:0;width:19px;height:19px;margin-top:3px;border-radius:999px;background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23225E55' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.incl li.no::before{
  background:#F2E4E4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A05A5A' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.plan .quote{font-family:var(--serif);font-size:20px;color:var(--brand);margin-bottom:4px;line-height:1.5}
.h1.sub{font-size:44px}

@media(max-width:1024px){
  .shots{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  section{padding:60px 0}
  .h1{font-size:36px}
  .h1.sub{font-size:32px}
  .h2{font-size:28px}
  .lead{font-size:16px}
  .g2,.g3,.g4,.plans,.factlist,.shots{grid-template-columns:1fr}
  .shot-duo{gap:14px}
  .imgcol img{max-width:210px}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--surface);flex-direction:column;align-items:flex-start;gap:0;padding:10px 24px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav.open a{padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav.open a.on::after{display:none}
  .nav.open .btn{margin:14px 0 0}
  .menu-toggle{display:block}
  .hero-stats{gap:28px}
  .cta{padding:40px 28px}
  .about-hero{padding:32px 26px}
  .legal .doc{padding:32px 24px}
  .site-footer .top{grid-template-columns:1fr}
}

/* 上线补充：保持原视觉，补齐可访问性与渐进增强。 */
img{height:auto}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:5px;border-radius:4px}
.skip-link{position:fixed;top:8px;left:16px;z-index:1000;padding:8px 14px;background:var(--surface);color:var(--brand-deep);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.service-note{padding-top:20px;padding-bottom:20px;font-size:14px;color:var(--sub)}
.service-note p{padding:16px 20px;background:var(--brand-soft);border-left:3px solid var(--brand);border-radius:0 8px 8px 0}
.service-note strong{color:var(--brand-deep)}
.ci a,.site-footer a[href^="mailto:"]{overflow-wrap:anywhere}
main:focus{outline:none}
@media(max-width:760px){
  .site-header .wrap{height:auto;min-height:72px;flex-wrap:wrap;gap:12px;padding-top:14px;padding-bottom:14px}
  .nav{display:flex;width:100%;margin-left:0;flex-wrap:wrap;gap:12px 22px;padding-bottom:6px}
  .nav a.on::after{display:none}
  .menu-toggle{display:none;min-width:44px;min-height:44px}
  .nav-ready .menu-toggle{display:block}
  .nav-ready .nav{display:none}
  .nav-ready .nav.open{display:flex;top:100%;max-height:calc(100dvh - 80px);overflow-y:auto;flex-wrap:nowrap;width:auto;padding:10px 24px 20px}
  .nav-ready .site-header .wrap{flex-wrap:nowrap;min-height:72px;height:72px;padding-top:0;padding-bottom:0}
  .service-note{padding-top:14px;padding-bottom:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}