/* ============================================================
   front.css —— 前端公开页视觉（仿 daiban.zeauo.cn/guanwang）
   田野绿主色设计系统，仅供前端公开页加载（用户中心/后台仍用 style.css）
   位于 style.css 之后加载，覆盖前端公开页核心类
   ============================================================ */
:root{
  /* —— 品牌色：田野绿主 + 清透蓝辅 + 琥珀强调 —— */
  --brand:#12b76a; --brand-dark:#0a8f52; --brand-deep:#076b3d;
  --brand-50:#eafaf1; --brand-100:#d3f2e2;
  --sky:#0ea5e9; --sky-dark:#0284c7; --sky-50:#e6f5fd;
  --amber:#f59e0b; --amber-dark:#d97706; --amber-50:#fef4e2;
  --danger:#e5484d; --danger-50:#fdecec;
  /* —— 中性色 —— */
  --ink:#0d1f16; --ink-2:#33473c; --ink-3:#5b6f63; --muted:#7a8c82;
  --line:rgba(13,31,22,.09); --line-soft:rgba(13,31,22,.05);
  --surface:#ffffff; --surface-alt:#f5faf7; --surface-sink:#eef5f1;
  /* —— 深色面板 —— */
  --dark:#0f2a1e; --dark-2:#123a4a; --mint:#6ef0ad;
  /* —— 字体 —— */
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  /* —— 字号 —— */
  --fs-display:clamp(38px,5vw,58px); --fs-h2:clamp(27px,3vw,40px);
  --fs-h3:clamp(17px,1.6vw,20px); --fs-lead:clamp(15px,1.2vw,17px);
  --fs-body:14.5px; --fs-sm:13px; --fs-xs:12px;
  /* —— 圆角 / 阴影 —— */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(13,31,22,.05);
  --sh-sm:0 6px 18px -10px rgba(13,31,22,.18);
  --sh-md:0 14px 34px -16px rgba(13,31,22,.22);
  --sh-lg:0 30px 70px -28px rgba(13,31,22,.30);
  --sh-brand:0 12px 26px -12px rgba(18,183,106,.85);
  --nav-h:68px; --wrap:1220px;
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:.2s; --t:.28s;
}

/* ============ 全局背景（渐变光晕 + 极淡网格） ============ */
body{
  font-family:var(--font); color:var(--ink); background:var(--surface-alt);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(18,183,106,.13), transparent 65%),
    radial-gradient(760px 460px at 6% 8%,  rgba(14,165,233,.10), transparent 62%),
    radial-gradient(900px 600px at 50% 110%, rgba(245,158,11,.08), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(13,31,22,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,31,22,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}
::selection{background:var(--brand); color:#fff}
h1,h2,h3,h4{line-height:1.24; font-weight:800; letter-spacing:-.6px}
h1{font-size:var(--fs-display)} h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3); letter-spacing:-.3px}

/* ============ 顶部导航（固定 + 毛玻璃） ============ */
.container{max-width:var(--wrap)}
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:150; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line); box-shadow:0 6px 24px -20px rgba(13,31,22,.5);
}
.header-inner{display:flex; align-items:center; height:var(--nav-h); gap:24px}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0}
.logo img{height:38px; width:auto}
.logo-text{
  display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800;
  color:var(--ink); letter-spacing:-.4px; line-height:1.1;
}
.logo-text::before{
  content:""; width:34px; height:34px; border-radius:11px; flex:none;
  background:linear-gradient(140deg, var(--brand), #0bb3a0 55%, var(--sky));
  box-shadow:0 6px 16px -6px rgba(18,183,106,.7);
}
.main-nav{flex:1}
.main-nav .nav{display:flex; gap:2px}
.main-nav .nav>li{position:relative}
.main-nav .nav>li>a{
  display:block; padding:8px 13px; border-radius:var(--r-sm); font-size:14.5px;
  color:var(--ink-2); font-weight:500; transition:var(--t-fast);
}
.main-nav .nav>li>a:hover,.main-nav .nav>li.active>a{
  color:var(--brand-dark); background:var(--brand-50); font-weight:600;
}
.caret{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;margin-left:5px;vertical-align:2px;font-size:0}
.main-nav .nav .dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:176px; padding:7px;
  border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.98);
  box-shadow:var(--sh-md); z-index:170;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:var(--t);
}
.has-child:hover>.dropdown,.has-child:focus-within>.dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.main-nav .nav .dropdown li a{display:block; white-space:nowrap; padding:8px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--ink-2)}
.main-nav .nav .dropdown li a:hover{background:var(--brand-50); color:var(--brand-dark)}
.header-actions{display:flex; gap:10px; flex-shrink:0; align-items:center}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:4px; padding:8px}
.nav-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px; border-radius:12px; font-size:14px; font-weight:600;
  white-space:nowrap; cursor:pointer; border:1px solid transparent; text-align:center;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t), border-color var(--t), color var(--t);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff;
  box-shadow:var(--sh-brand);
}
.btn-primary:hover{box-shadow:0 18px 34px -12px rgba(18,183,106,.95)}
.btn-ghost{background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:var(--sh-xs)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-dark)}
.btn-light{background:#fff; color:var(--brand-dark); border-color:var(--brand)}
.btn-light:hover{background:var(--brand-50)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--brand-deep)}
.btn-lg{padding:13px 26px; border-radius:15px; font-size:15.5px}
.btn-sm{padding:6px 13px; border-radius:var(--r-sm); font-size:13px}
.btn-block{display:flex; width:100%}
.btn-green{background:var(--brand); color:#fff}
.btn-red{background:var(--danger); color:#fff}
.btn-ghost-sm{background:#fff; border:1px solid var(--line); color:var(--ink-2); padding:5px 12px; font-size:13px; border-radius:8px; cursor:pointer; box-shadow:var(--sh-xs)}
.btn-ghost-sm:hover{border-color:var(--brand); color:var(--brand-dark)}

/* ============ Hero（浅色 + 绿光晕，参考站风） ============ */
.hero{
  padding:calc(var(--nav-h) + 40px) 0 70px; position:relative; overflow:hidden;
  background:transparent; color:var(--ink);
}
.hero::before{content:""; position:absolute; left:-140px; top:10%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(18,183,106,.16), transparent 70%); pointer-events:none}
.hero::after{content:""; position:absolute; right:-120px; bottom:-160px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,233,.13), transparent 70%); pointer-events:none}
.hero-inner{position:relative; z-index:2; max-width:820px}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:600;
  color:var(--brand-dark); box-shadow:var(--sh-xs); margin-bottom:20px; letter-spacing:.3px;
}
.hero-badge::before{content:""; width:6px; height:6px; border-radius:99px; background:var(--brand); box-shadow:0 0 0 4px rgba(18,183,106,.18)}
.hero h1{font-size:var(--fs-display); letter-spacing:-1px; line-height:1.16; color:var(--ink); margin-bottom:18px}
.hero p{font-size:var(--fs-lead); color:var(--muted); max-width:600px; line-height:1.8; margin-bottom:28px}
.hero .btn{margin-right:12px}

/* ============ 通用区块 ============ */
.section{padding:72px 0; position:relative}
.section-head{max-width:780px; text-align:center; margin:0 auto 48px}
.section-head .eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:600;
  color:var(--brand-dark); box-shadow:var(--sh-xs); letter-spacing:.3px; margin-bottom:14px;
}
.section-head .eyebrow::before{content:""; width:6px; height:6px; border-radius:99px; background:var(--brand); box-shadow:0 0 0 4px rgba(18,183,106,.18)}
.section-head h2{font-size:var(--fs-h2); font-weight:800; margin-bottom:12px; letter-spacing:-.6px}
.section-head p{color:var(--muted); font-size:var(--fs-lead); max-width:600px; margin:0 auto; line-height:1.7}

/* ============ 卡片网格 ============ */
.grid{display:grid; gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--sh-xs);
  transition:transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:rgba(18,183,106,.28)}
.card-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--brand-50); color:var(--brand-dark); margin-bottom:16px; font-size:24px;
}
.card h3{font-size:18px; font-weight:700; margin-bottom:8px; color:var(--ink)}
.card p{font-size:14px; color:var(--ink-2); line-height:1.7}

/* ============ 统计条（参考站 tile 风格） ============ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  background:transparent; border:0; border-radius:0; padding:0; box-shadow:none;
}
.stat{
  border:1px solid var(--line-soft); border-radius:var(--r-md); padding:20px;
  background:var(--surface-alt); text-align:center; border-right:1px solid var(--line-soft);
}
.stat .num{font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-1px; line-height:1.15}
.stat .lab{font-size:12.5px; color:var(--muted); margin-top:4px}

/* ============ 产品套餐 ============ */
.product-cats{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:0 0 34px}
.cat-btn{border:2px solid var(--line); background:#fff; color:var(--ink-3); border-radius:999px; padding:13px 40px; font-size:17px; font-weight:700; cursor:pointer; transition:.22s; box-shadow:0 2px 8px rgba(13,31,22,.05)}
.cat-btn:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}
.cat-btn.active{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 10px 22px rgba(18,183,106,.28)}
@media(max-width:520px){.cat-btn{padding:11px 26px; font-size:15px}}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.price-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px 26px; box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
}
.price-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md)}
.price-card.featured{border:2px solid var(--brand); box-shadow:var(--sh-brand)}
.price-card.featured::before{
  content:attr(data-badge); position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff;
  font-size:12px; font-weight:700; padding:4px 16px; border-radius:var(--r-pill); white-space:nowrap;
}
.price-name{font-size:19px; font-weight:800; color:var(--ink)}
.price-sub{font-size:13px; color:var(--muted); margin:6px 0 16px}
.price-val{font-size:34px; font-weight:800; color:var(--brand-dark); margin-bottom:18px; font-family:var(--font-mono); letter-spacing:-1px}
.price-val small{font-size:14px; font-weight:400; color:var(--muted); font-family:var(--font)}
.price-list{margin-bottom:24px; flex:1}
.price-list li{display:flex; gap:10px; font-size:14px; color:var(--ink-2); padding:7px 0; line-height:1.6}
.price-list li::before{content:"✓"; color:var(--brand); font-weight:700; flex-shrink:0}

/* ============ 页面标题条 ============ */
.page-hero{padding:calc(var(--nav-h) + 26px) 0 40px; background:transparent; border-bottom:1px solid var(--line); text-align:center}
.page-hero h1{font-size:32px; font-weight:800; color:var(--ink); margin-bottom:8px}
.page-hero p{color:var(--ink-3); font-size:15px}

/* 前端公开页：页脚固定在底部（内容不足一屏时页脚贴底） */
body.has-gnav{min-height:100vh;display:flex;flex-direction:column}
body.has-gnav .site-main{flex:1}

/* ============ 帮助中心 ============ */
.help-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px}
.help-cat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 20px;
  text-align:center; cursor:pointer; transition:var(--t);
}
.help-cat:hover,.help-cat.active{border-color:var(--brand); background:var(--brand-50); transform:translateY(-3px); box-shadow:var(--sh-sm)}
.help-cat .ico{font-size:28px; margin-bottom:10px}
.help-cat .t{font-weight:700; font-size:15px; color:var(--ink)}
.help-cat .n{font-size:12px; color:var(--muted); margin-top:3px}
.article-list .article-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; margin-bottom:14px; transition:var(--t);
}
.article-item:hover{box-shadow:var(--sh-sm); border-color:var(--brand); transform:translateY(-2px)}
.article-item a{color:var(--ink); font-size:16px; font-weight:600; display:block; margin-bottom:6px}
.article-item a:hover{color:var(--brand-dark)}
.article-item .meta{font-size:13px; color:var(--muted)}
.article-view{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; box-shadow:var(--sh-xs)}
.article-view h1{font-size:26px; margin-bottom:12px; color:var(--ink)}
.article-view .meta{color:var(--muted); font-size:13px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:22px}
.article-body{font-size:15px; color:var(--ink-2); line-height:1.9}
.article-body h2,.article-body h3,.article-body h4{margin:20px 0 10px; color:var(--ink)}
.article-body p{margin:10px 0}
.article-body ul,.article-body ol{margin:10px 0 10px 24px}
.article-body img{border-radius:var(--r-md); margin:14px 0}
.article-body code{background:var(--brand-50); padding:2px 6px; border-radius:5px; font-size:13px; color:var(--brand-dark)}
.article-body blockquote{border-left:4px solid var(--brand); background:var(--brand-50); padding:12px 16px; border-radius:0 8px 8px 0; margin:14px 0; color:var(--ink-2)}

/* ============ FAQ ============ */
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; transition:var(--t)}
.faq-item:hover{border-color:rgba(18,183,106,.35)}
.faq-q{padding:16px 20px; cursor:pointer; font-weight:600; font-size:15px; display:flex; justify-content:space-between; align-items:center; color:var(--ink)}
.faq-q::after{content:"＋"; color:var(--brand); font-size:18px; transition:var(--t)}
.faq-item.open .faq-q::after{content:"－"}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--ink-2); font-size:14px}
.faq-a-inner{padding:0 20px 18px}

/* ============ 表单（登录/注册/找回） ============ */
.auth-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 30px) 20px 70px}
.auth-card{
  width:100%; max-width:440px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:36px 34px;
}
.auth-card h1{font-size:24px; text-align:center; margin-bottom:6px; color:var(--ink)}
.auth-sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:26px}
.form-group{margin-bottom:16px}
.form-label{display:block; font-size:13px; color:var(--ink-2); font-weight:600; margin-bottom:7px}
.form-input{
  width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:14px;
  font-size:14px; transition:var(--t); background:#fbfdff; color:var(--ink);
}
.form-input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(18,183,106,.12); background:#fff}
textarea.form-input{resize:vertical; min-height:90px}
select.form-input{appearance:auto}
.input-row{display:flex; gap:10px}
.input-row .form-input{flex:1}
.captcha-img{height:44px; border:1px solid var(--line); border-radius:12px; cursor:pointer; width:120px}
.form-tip{font-size:12px; color:var(--muted); margin-top:5px}
.form-actions{margin-top:22px}
.auth-links{display:flex; justify-content:space-between; margin-top:14px; font-size:13px}
.auth-links a{color:var(--brand-dark)}

/* ============ 页脚（深绿） ============ */
.site-footer{background:var(--ink); color:rgba(255,255,255,.7); margin-top:40px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:60px 20px 36px}
.footer-brand .footer-logo{font-size:20px; font-weight:800; color:#fff; margin-bottom:10px}
.footer-desc{font-size:13.5px; opacity:.6; max-width:340px; line-height:1.7}
.footer-col h4{color:#fff; font-size:14px; margin-bottom:16px}
.footer-col ul li{margin-bottom:10px}
.footer-col a{color:rgba(255,255,255,.55); font-size:13px; transition:var(--t-fast)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:12px; color:rgba(255,255,255,.4)}
.footer-bottom .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px}
.footer-bottom a{color:rgba(255,255,255,.5)}
.footer-bottom a:hover{color:#fff}

/* ============ 空状态 / 提示 / 分页 / 步骤 / 标签 ============ */
.empty{text-align:center; padding:60px 20px; color:var(--muted)}
.empty .ico{font-size:52px; margin-bottom:12px; opacity:.5}
.empty p{font-size:14px}
.alert{padding:12px 16px; border-radius:12px; font-size:14px; margin-bottom:16px}
.alert-green{background:#ecfdf5; color:#047857; border:1px solid #a7f3d0}
.alert-red{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca}
.alert-blue{background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe}
.alert-amber{background:#fffbeb; color:#b45309; border:1px solid #fde68a}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:24px}
.pagination a,.pagination span{
  display:inline-block; min-width:38px; padding:8px 12px; border-radius:10px;
  background:#fff; border:1px solid var(--line); font-size:14px; text-align:center; color:var(--ink-2);
}
.pagination a:hover{border-color:var(--brand); color:var(--brand-dark)}
.pagination .current{background:var(--brand); border-color:var(--brand); color:#fff}
.stepper{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:26px}
.step{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px}
.step .no{width:28px; height:28px; border-radius:50%; background:var(--surface-sink); color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-weight:700}
.step.active{color:var(--brand-dark); font-weight:600}
.step.active .no{background:var(--brand); color:#fff}
.step-line{width:46px; height:2px; background:var(--line)}
.tag{display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:600}
.tag-green{background:var(--brand-50); color:var(--brand-dark)}
.tag-red{background:var(--danger-50); color:var(--danger)}
.tag-gray{background:var(--surface-sink); color:var(--ink-3)}
.tag-blue{background:var(--sky-50); color:var(--sky-dark)}
.tag-amber{background:var(--amber-50); color:var(--amber-dark)}

/* ============ 首页增强组件（参考站） ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:600;
  color:var(--brand-dark); box-shadow:var(--sh-xs); letter-spacing:.3px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:99px; background:var(--brand); box-shadow:0 0 0 4px rgba(18,183,106,.18)}
.icon-box{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none; font-size:22px}
.icon-box--green{background:var(--brand-50); color:var(--brand-dark)}
.icon-box--sky{background:var(--sky-50); color:var(--sky-dark)}
.icon-box--amber{background:var(--amber-50); color:var(--amber-dark)}
.icon-box--sink{background:var(--surface-sink); color:var(--ink-3)}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill)}
.badge--green{background:var(--brand-50); color:var(--brand-dark)}
.badge--sky{background:var(--sky-50); color:var(--sky-dark)}
.badge--amber{background:var(--amber-50); color:var(--amber-dark)}
.badge--red{background:var(--danger-50); color:var(--danger)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); transition:var(--t-fast)}
.chip:hover{border-color:var(--brand); color:var(--brand-dark); background:var(--brand-50); transform:translateY(-2px)}
.win-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:linear-gradient(180deg,#fbfdfc,#f3f7f4); border-bottom:1px solid var(--line-soft)}
.win-bar i{width:8px; height:8px; border-radius:99px}
.win-bar b{font-size:12.5px; margin-left:5px; color:var(--ink-2)}
.win-bar--dark{background:rgba(255,255,255,.06); border-bottom-color:rgba(255,255,255,.1)}
.win-bar--dark b{color:#fff}
.get-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:44px}
.get-step{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; position:relative; transition:var(--t) var(--ease)}
.get-step:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.get-step__no{position:absolute; top:18px; right:22px; font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--brand-100)}
.get-step h3{font-size:17px; margin-top:14px; color:var(--ink)}
.get-step p{margin-top:8px; color:var(--muted); font-size:14px; line-height:1.7}
.cta{
  background:linear-gradient(150deg,#0f2a1e 0%,#123a4a 100%); border-radius:34px;
  padding:64px 52px; color:#fff; text-align:center; position:relative; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(13,31,22,.8);
}
.cta::before{content:""; position:absolute; width:520px; height:520px; border-radius:99px; right:-140px; top:-190px; background:radial-gradient(circle, rgba(110,240,173,.22), transparent 68%)}
.cta__dots{position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size:26px 26px}
.cta > *:not(.cta__dots){position:relative; z-index:1}
.cta h2{color:#fff; font-size:clamp(26px,3.2vw,40px); margin-bottom:14px}
.cta p{color:rgba(255,255,255,.66); margin:0 auto 26px; max-width:520px; font-size:16px}

/* ============ 响应式 ============ */
@media(max-width:992px){
  .g4,.stats{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr; max-width:480px; margin:0 auto}
  .help-cats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .get-steps{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero h1{font-size:30px}
  .hero{padding:calc(var(--nav-h) + 24px) 0 46px}
  .section{padding:48px 0}
  .g3,.g2,.g4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .nav-toggle{display:flex}
  .main-nav{position:absolute; top:var(--nav-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--line); display:none; padding:10px 20px 16px}
  .main-nav.open{display:block}
  .main-nav .nav{flex-direction:column}
  .main-nav .nav .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:3px solid var(--brand-50); margin-left:16px; min-width:0}
  .header-actions{display:none}
  .cta{padding:48px 26px; border-radius:24px}
}