/* ══ 定稿 · 清爽 + 活力 + 真实人像 ══ */
:root{
  --bg:#fafbfb;            /* 干净中性白 */
  --ink:#22342c;           /* 深炭绿 */
  --ink-soft:#5a6b62;      /* 次级 */
  --ink-dim:#98a69d;       /* 弱化 */
  --primary:#1fa87a;       /* 生机青绿 —— 主强调 */
  --primary-soft:#8fd3b8;  /* 浅青绿 */
  --primary-deep:#148a62;  /* 深青绿 hover */
  --blue:#3f8cc9;          /* 清爽蓝(装饰点) */
  --line:#e4ece8;          /* 中性浅线 */

  /* 字阶 —— 收敛，只留清晰梯度 */
  --fs-hero:5.2rem;
  --fs-h2:3rem;
  --fs-h3:2rem;
  --fs-lead:1.9rem;
  --fs-body:1.75rem;
  --fs-small:1.5rem;
  --fs-label:1.3rem;
  --fs-num:4.2rem;

  /* 字体 —— 只留黑体(主)+等宽(数据/标签) */
  --font-hei:'HarmonyOS Sans SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei','Hiragino Sans GB',system-ui,sans-serif;
  --font-mono:'Ubuntu Mono','DejaVu Sans Mono','JetBrains Mono',monospace;
  --font-body:var(--font-hei);

  /* 间距 —— 8px 梯度基准 */
  --sp-1:1rem;
  --sp-2:1.6rem;
  --sp-3:2.4rem;
  --sp-4:3.2rem;
  --sp-5:4rem;
  --sp-sm:1.4rem;     /* 正文段落间距 */
  --sp-md:1.8rem;     /* 卡片内小间距 */
  --sp-lg:2.6rem;     /* 区块内较大间距 */
  --sp-xl:3.6rem;     /* 区块头到内容 */
  --sp-section:9rem;  /* 区块上下 */

  --container:104rem;
  --container-narrow:72rem;
  --section-py:var(--sp-section);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:var(--fs-body);color:var(--ink);background:var(--bg);line-height:1.75;word-break:break-word;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 3rem}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 3rem}

/* ══ 导航 ══ */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,252,249,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:1.7rem 3rem;display:flex;align-items:center;gap:3rem}
.nav-logo{font-size:var(--fs-h3);font-weight:700;letter-spacing:.18em;color:var(--ink)}
.nav-links{display:flex;gap:2.8rem;margin-left:auto;list-style:none}
.nav-links li{list-style:none}
.nav-links a{font-size:var(--fs-small);color:var(--ink-soft);padding:.6rem 0;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a.act{color:var(--ink);font-weight:700}
.nav-links a.act::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--primary)}

/* ══ 区块头 ══ */
.section-label{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--primary);letter-spacing:.16em;margin-bottom:var(--sp-sm);text-transform:uppercase;font-weight:600}
.section-title{font-family:var(--font-hei);font-weight:600;font-size:var(--fs-h2);line-height:1.3;letter-spacing:.01em;color:var(--ink)}
.section-subtitle{font-size:var(--fs-body);color:var(--ink-soft);margin-top:var(--sp-sm);max-width:52ch;word-break:keep-all;overflow-wrap:break-word}
.about-section-head{margin-bottom:var(--sp-xl)}

/* ══ Hero ══ */
.home-hero{position:relative;padding:0;overflow:hidden;background:
  radial-gradient(58% 90% at 82% 20%,rgba(143,211,184,.20) 0%,rgba(143,211,184,0) 55%),
  linear-gradient(180deg,#f7fcf9 0%,#00804012 100%)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.9fr 1fr;gap:5rem;align-items:center;max-width:var(--container);margin:0 auto;padding:8rem 3rem 13rem}
.hero-content{position:relative;z-index:1}
.hero-eyebrow{font-family:var(--font-body);font-size:var(--fs-lead);color:var(--ink-soft);margin-bottom:var(--sp-lg);letter-spacing:.02em}
.hero-title{font-family:var(--font-hei);font-weight:600;font-size:var(--fs-hero);line-height:1.35;letter-spacing:.01em;color:var(--ink);margin-bottom:var(--sp-4)}
.hero-title .hl{color:var(--primary);font-weight:700}
.hero-sub{font-size:var(--fs-lead);color:var(--ink-soft);max-width:46ch;line-height:1.9}
.hero-sub b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:var(--sp-xl);margin-top:var(--sp-5);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1.5rem 3.2rem;font-size:var(--fs-body);font-weight:700;border-radius:999px;letter-spacing:.03em;transition:transform .2s,box-shadow .2s,background .2s;line-height:1}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(31,168,122,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,168,122,.36);background:var(--primary-deep)}
.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(34,48,58,.04)}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--primary)}
/* 说明文字：独立的辅助行，放按钮下方，不再塞进按钮 */
.cta-item{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-sm)}
.btn-note{font-size:var(--fs-small);color:var(--ink-dim);line-height:1.5;margin:0}

/* hero 人像 —— 干净圆形 + 叠加装饰元素 */
.hero-portrait{position:relative;z-index:1;justify-self:center;max-width:30rem;width:100%}
.hero-portrait .pic{position:relative;z-index:2;border-radius:50%;overflow:hidden;box-shadow:0 16px 40px rgba(34,48,58,.14);aspect-ratio:1/1}
.hero-portrait img{display:block;width:100%;height:100%;object-fit:cover}
/* 装饰：小圆点点缀 — 轻巧，不抢照片主体，带呼吸效果 */
.hero-portrait .deco{position:absolute;z-index:2;pointer-events:none}
.hero-portrait .deco-dot1{right:1rem;top:-1.4rem;width:2rem;height:2rem;border-radius:50%;background:var(--primary);box-shadow:0 0 0 .7rem rgba(143,211,184,.28);--base:.8;animation:breathe 3.6s ease-in-out infinite}
.hero-portrait .deco-dot2{left:2rem;top:1.5rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--blue);--base:.55;animation:breathe 3.6s ease-in-out infinite;animation-delay:1.2s}
.hero-portrait .deco-dot3{left:-1.6rem;bottom:4rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--primary-soft);--base:.7;animation:breathe 3.6s ease-in-out infinite;animation-delay:2.4s}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:var(--base)}
  50%{transform:scale(1.26);opacity:calc(var(--base) * .35)}
}
/* hero 底部柔化 — 由英雄区渐变自然过渡到正文白底 */

/* ══ 子页 hero（/ai/ /about/ 统一开场）══ */
.page-intro{position:relative;padding:var(--section-py) 0;overflow:hidden}
.page-intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(56% 96% at 84% 12%,rgba(31,168,122,.34) 0%,rgba(31,168,122,0) 58%),
  linear-gradient(180deg,rgba(31,168,122,.13) 0%,rgba(31,168,122,0) 46%);
  transform-origin:84% 12%;animation:intro-glow 6s ease-in-out infinite}
@keyframes intro-glow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.5}}
.page-intro .container-narrow{position:relative;z-index:1}
.page-intro .hero-title{margin-bottom:var(--sp-lg)}
.page-intro .hero-sub{max-width:52ch}

/* ══ 核心观点 ══ */
/* 用统一细分隔线划分 section（取代背景色跳跃） */
.insight{padding:var(--section-py) 0;position:relative}
.insight::before,.about-services::before,.trust::before,.pricing::before,.cta::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(52rem,80%);height:1px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}
.about-services,.trust,.pricing,.cta{position:relative}
.claim-body p{font-size:var(--fs-body);color:var(--ink-soft);max-width:64ch;margin-bottom:var(--sp-sm);text-align:justify;text-justify:inter-character}
/* 通用 section 分隔线 —— 顶部一条细渐变线（/ai/ /about/ 子页区块共用） */
.block-sep{position:relative}
.block-sep::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(52rem,80%);height:1px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}

/* ══ 三条服务线 ══ */
.about-services{padding:var(--section-py) 0}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);align-items:stretch}
.service-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:var(--sp-lg) var(--sp-lg);display:flex;flex-direction:column;box-shadow:0 4px 16px rgba(34,48,58,.05);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,168,122,.10);border-color:var(--primary-soft)}
.service-icon{width:4.6rem;height:4.6rem;border-radius:14px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-md)}
.service-icon svg{width:2.3rem;height:2.3rem;stroke:var(--primary-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-body{flex:1;min-width:0}
.service-card h3{font-family:var(--font-hei);font-weight:700;font-size:var(--fs-h3);color:var(--ink);margin-bottom:var(--sp-sm);line-height:1.3}
.service-card>p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.8}
.service-card>p:last-child{margin-top:auto}

/* ══ Trust ══ */
.trust{padding:var(--section-py) 0}
.trust-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat-item{text-align:center;padding:var(--sp-lg) 1.5rem;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.stat-item:hover{transform:translateY(-4px);border-color:var(--primary-soft);box-shadow:0 10px 24px rgba(31,168,122,.10)}
.stat-num{font-family:var(--font-mono);font-size:var(--fs-num);font-weight:700;color:var(--primary);line-height:1.1;letter-spacing:-.02em}
.stat-label{font-size:var(--fs-small);color:var(--ink-soft);margin-top:.8rem}

/* ══ 收费 ══ */
.pricing{padding:var(--section-py) 0}
.pricing-grid{max-width:72rem}
.pricing-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pricing-row{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:2rem;padding:1.35rem 2rem;border-bottom:1px solid var(--line);font-size:var(--fs-body);color:var(--ink-soft);align-items:center}
.pricing-row:last-child{border-bottom:none}
.pricing-row-head{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.06em;color:var(--ink-dim);text-transform:uppercase;border-bottom:1px solid var(--line)}
.pricing-price{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-body);color:var(--ink);text-align:right}
.pricing-row-head .pricing-price{color:var(--ink-dim);font-size:var(--fs-small);font-weight:400;text-align:right}

/* ══ CTA ══ */
.cta{padding:var(--section-py) 0;position:relative;text-align:center;background:
  radial-gradient(70% 120% at 50% 0%,rgba(143,211,184,.18) 0%,rgba(143,211,184,0) 60%),
  linear-gradient(180deg,var(--primary) 0%,var(--primary-deep) 100%);color:#fff}
.cta .section-title,.cta .section-subtitle{color:#fff}
.cta .section-subtitle{opacity:.85;margin-left:auto;margin-right:auto}
.cta>*{position:relative;z-index:1}
.cta .about-section-head{text-align:center}
.cta-actions{display:flex;gap:var(--sp-xl);flex-wrap:wrap;justify-content:center}
.cta .btn-primary{background:#fff;color:var(--primary-deep);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.cta .btn-primary:hover{background:#f3f8f5;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.cta .btn-secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
.cta .btn-secondary:hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.12)}
.cta .btn-note{color:rgba(255,255,255,.8)}
.wechat-btn-wrapper{position:relative;display:inline-block}
.wechat-btn-wrapper .wechat-qr{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translateX(-50%);width:30rem;height:auto;border:4px solid #fff;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s}
.wechat-btn-wrapper.open .wechat-qr{opacity:1;pointer-events:auto}

/* ══ Footer ══ */
.footer{background:var(--ink);color:var(--bg);padding:3.8rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem}
.footer-brand{font-size:var(--fs-small);letter-spacing:.12em}
.footer-links{display:flex;gap:2.4rem;list-style:none}
.footer-links li{list-style:none}
.footer-links a{font-size:var(--fs-small);color:rgba(246,251,255,.68);border-bottom:1px solid rgba(246,251,255,.18);padding-bottom:.2rem}
.footer-links a:hover{color:var(--bg);border-bottom-color:var(--primary)}

@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;text-align:left;gap:3rem}
  .hero-portrait{max-width:28rem;margin:0 auto}
  .services-grid,.trust-stats{grid-template-columns:1fr 1fr}
  .hero-title{font-size:4.2rem}
}
@media (max-width:640px){
  .services-grid,.trust-stats{grid-template-columns:1fr}
  .hero-title{font-size:3.6rem}
  .pricing-row{grid-template-columns:1fr;gap:.6rem}
  .pricing-price{text-align:left}
}