:root{
  --ink:#0A0A0A;
  --ink-2:#5B5B5F;
  --line:#E6E6E3;
  --paper:#FFFFFF;
  --paper-2:#F6F5F1;
  --accent:#0A0A0A;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Helvetica Neue","Microsoft YaHei",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.8;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

/* HEADER */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:32px;height:70px}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:30px;margin-left:8px}
.nav a{color:var(--ink-2);font-size:15px;transition:color .2s}
.nav a:hover{color:var(--ink)}
.pill{display:inline-block;padding:10px 20px;border-radius:999px;font-size:14.5px;font-weight:600;border:1px solid var(--ink);transition:.2s}
.hdr .pill{margin-left:auto}
.pill:hover{background:var(--ink);color:#fff}
.pill.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill.solid:hover{opacity:.85}
.pill.line{background:transparent}
.pill.lg{padding:15px 34px;font-size:16px}

/* HERO */
.hero{padding:84px 0 0;text-align:center}
h1{font-size:78px;line-height:1.02;font-weight:800;letter-spacing:-2px}
h1 .thin{display:inline-block;margin-top:14px;font-size:30px;font-weight:400;letter-spacing:-.5px;color:var(--ink-2)}
.lead{max-width:680px;margin:30px auto 0;font-size:18px;color:#3C3C40}
.actions{display:flex;gap:14px;justify-content:center;margin:34px 0 64px}
.bleed{margin:0 auto;max-width:1320px;padding:0 16px}
.bleed img{width:100%;border-radius:18px;aspect-ratio:16/9;object-fit:cover;filter:saturate(.96) contrast(1.02)}

/* SECTIONS */
.sec{padding:96px 0;border-top:1px solid var(--line)}
.sec.alt{background:var(--paper-2)}
.kick{display:inline-block;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
h2{font-size:44px;line-height:1.12;font-weight:800;letter-spacing:-1px;margin-bottom:20px}
.sub{font-size:18px;color:var(--ink-2);max-width:640px;margin-bottom:8px}
h3{font-size:23px;font-weight:700;letter-spacing:-.3px;margin:26px 0 8px}
h4{font-size:17px;font-weight:700;margin:0 0 6px}
.sec p{color:#3C3C40;max-width:70ch}

/* FEATURES GRID */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:44px}
.grid3 article{padding-top:0}
.grid3 .thumb{margin:0 0 18px;border-radius:14px;overflow:hidden;aspect-ratio:16/11;background:var(--paper-2)}
.grid3 .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.grid3 article:hover .thumb img{transform:scale(1.06);filter:saturate(1.04) contrast(1.02)}
.grid3 h3{margin-top:0}
.grid3 p{font-size:15.5px}

/* MODELS SPLIT */
.split-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-img img{width:100%;border-radius:16px;aspect-ratio:5/4;object-fit:cover;filter:saturate(.94) contrast(1.03)}
.split-text h3:first-of-type{margin-top:18px}

/* STEPS */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:48px;counter-reset:s}
.steps li{border-top:1px solid var(--line);padding-top:18px}
.steps .n{font-size:14px;font-weight:700;color:var(--ink-2);letter-spacing:1px}
.steps h4{margin:14px 0 6px;font-size:18px}
.steps p{font-size:14.5px;color:var(--ink-2)}

/* PRICING */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.plan{border:1px solid var(--line);border-radius:18px;padding:36px 32px;background:var(--paper)}
.plan h3{margin-top:0}
.plan.hot{border-color:var(--ink);box-shadow:0 20px 50px -28px rgba(0,0,0,.4)}
.plan p{font-size:15.5px}

/* TAGS */
.tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.tags h4{font-weight:600;font-size:15px;padding:9px 20px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}

/* FAQ */
#faq h3{border-top:1px solid var(--line);padding-top:24px;margin-top:30px}
#faq h3:first-of-type{border-top:none;padding-top:8px}

/* CTA */
.cta{background:var(--ink);color:#fff;text-align:center;padding:110px 0}
.cta h2{font-size:52px;margin-bottom:14px}
.cta p{color:#B9B9BC;margin:0 auto 32px;max-width:46ch}
.cta .pill.solid{background:#fff;color:var(--ink);border-color:#fff}
.cta .pill.solid:hover{opacity:.85}

/* FOOTER */
.ft{padding:48px 0;border-top:1px solid var(--line)}
.ft-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ft img{height:30px;width:auto}
.ft p{font-size:13.5px;color:var(--ink-2);max-width:none}

/* RESPONSIVE */
@media (max-width:920px){
  h1{font-size:52px}
  h1 .thin{font-size:24px}
  h2{font-size:34px}
  .cta h2{font-size:38px}
  .grid3,.grid2,.steps{grid-template-columns:1fr}
  .split-in{grid-template-columns:1fr;gap:36px}
  .nav{display:none}
  .sec{padding:64px 0}
}
@media (max-width:560px){
  h1{font-size:40px;letter-spacing:-1px}
  .hdr .pill{display:none}
}

/* ============ MOTION & MICRO-INTERACTIONS ============ */

/* 链接/按钮焦点可达性 */
a:focus-visible,.pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* 图片悬停：轻微推近，营造影像在动的错觉 */
.bleed,.split-img,.grid3 article figure{overflow:hidden;border-radius:18px}
.bleed img,.split-img img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bleed:hover img,.split-img:hover img{transform:scale(1.035)}

/* 卡片/方案悬停 */
.grid3 article{transition:border-color .3s,transform .3s}
.grid3 article:hover{transform:translateY(-4px)}
.plan{transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(0,0,0,.45)}
.tags h4{transition:background .25s,color .25s,border-color .25s}
.tags h4:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 首屏入场动画（一次性，结束即停在可见态，全浏览器安全） */
.hero h1{animation:rise .9s .05s both cubic-bezier(.2,.7,.2,1)}
.hero .lead{animation:rise .9s .20s both cubic-bezier(.2,.7,.2,1)}
.hero .actions{animation:rise .9s .34s both cubic-bezier(.2,.7,.2,1)}
.hero .bleed{animation:rise 1.1s .46s both cubic-bezier(.2,.7,.2,1)}

/* 滚动驱动渐入：仅在支持的浏览器生效，不支持则正常显示（不影响 SEO/可读性） */
@supports (animation-timeline: view()){
  .sec .kick,.sec h2,.sec .sub,
  .grid3>article,.split-text,.split-img,
  .steps>li,.grid2>.plan,.tags,
  #faq h3,#faq p,.bleed.soft,.cta h2,.cta p,.cta .pill{
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 22%;
  }
  /* 网格元素错落进场 */
  .grid3>article:nth-child(2),.grid2>.plan:nth-child(2),.steps>li:nth-child(2){animation-range:entry 6% cover 28%}
  .steps>li:nth-child(3){animation-range:entry 10% cover 30%}
  .steps>li:nth-child(4){animation-range:entry 14% cover 32%}
}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* 尊重系统“减少动态效果”偏好 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}