/* ══════════════════════════════════════════════════════════
   同城客流 · 落地页  —  Apple 设计语言实装
   规范来源：./DESIGN-来源规范.md（"white room with a single blue switch"）
   铁律：① 无卡片容器 ② 无投影 ③ 按钮圆角 980px
        ④ #0071e3 只做按钮填充，绝不做文字/边框/装饰
        ⑤ 全出血 section，文字块内部居中 980px
   ⚠️ 该配色与本项目品牌规范（禁蓝紫）冲突，此版供效果评估
   ══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── 中文适配：SF Pro 无中文字形，回落苹方（同源设计，衔接最自然）── */
:root{
  --cn:"PingFang SC","苹方-简","Hiragino Sans GB","Microsoft YaHei";
  --fd:var(--font-sf-pro-display),var(--cn),sans-serif;
  --ft:var(--font-sf-pro-text),var(--cn),sans-serif;
  --ease:cubic-bezier(.28,.11,.32,1);       /* Apple 官网常用缓动 */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.9s;
  --edge:max(22px,env(safe-area-inset-left));
}

body{
  background:var(--color-frost);
  color:var(--color-carbon);
  font-family:var(--ft);
  font-size:var(--text-body);            /* 17px */
  line-height:var(--leading-body);
  letter-spacing:-.016em;                 /* 负字距＝Apple 精确感的来源 */
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
}

/* ── 布局：全出血，仅文字块内部居中 ── */
.bleed{width:100%}
.inner{max-width:980px;margin:0 auto;padding-inline:var(--edge)}
.inner-wide{max-width:1440px;margin:0 auto;padding-inline:var(--edge)}
section{padding-block:clamp(64px,9vw,120px)}
.surface-frost{background:var(--color-frost)}
.surface-white{background:#fff}
.surface-ice{background:var(--color-ice)}
.surface-dark{background:var(--color-carbon);color:var(--color-frost)}

/* ── 排版 ── */
.display{
  font-family:var(--fd);font-weight:600;
  font-size:clamp(34px,6.4vw,56px);
  line-height:var(--leading-display);letter-spacing:.011em;
}
.heading{
  font-family:var(--fd);font-weight:600;
  font-size:clamp(28px,4.6vw,40px);
  line-height:var(--leading-heading);letter-spacing:.011em;
}
.heading-sm{font-family:var(--fd);font-weight:600;font-size:clamp(22px,3vw,28px);
  line-height:var(--leading-heading-sm);letter-spacing:.007em}
/* weight 300 ＝ Apple 的「低语声」，专给副标题 */
.tagline{
  font-family:var(--ft);font-weight:300;
  font-size:clamp(19px,2.6vw,26px);line-height:1.4;letter-spacing:-.011em;
  color:var(--color-carbon);
}
.subhead{font-family:var(--ft);font-weight:300;font-size:var(--text-subheading);
  line-height:var(--leading-subheading);letter-spacing:-.005em}
.body-sm{font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:-.022em}
.muted{color:var(--color-ash)}
.center{text-align:center}

/* ── 按钮：980px 圆角不可协商；填充蓝必配描边蓝 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius-buttons);        /* 980px */
  padding:11px 21px;font-size:var(--text-body);font-weight:400;
  letter-spacing:-.016em;line-height:1.3;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .45s var(--ease-out);
}
.btn-fill{background:var(--color-apple-blue);color:var(--color-ice)}
.btn-fill:hover{background:#0077ed;transform:scale(1.015)}
.btn-fill:active{background:#006edb;transform:scale(.99)}
.btn-line{border:1px solid var(--color-link-blue);color:var(--color-link-blue)}
.btn-line:hover{background:rgba(0,102,204,.06);transform:scale(1.015)}
.btn-link{color:var(--color-link-blue);padding:11px 4px}
.btn-link:hover{text-decoration:underline}
.btn .chev{transition:transform .45s var(--ease-out)}
.btn:hover .chev{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}

/* ── 全局导航：发丝线，无投影 ── */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(245,245,247,.72);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav .in{max-width:1440px;margin:0 auto;padding:8px var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px}
.nav .mk svg{height:26px;width:auto}
.nav .links{display:flex;align-items:center;gap:26px}
.nav .links a{font-size:var(--text-caption);font-weight:400;letter-spacing:-.022em;
  color:var(--color-carbon);opacity:.86;transition:opacity .25s var(--ease)}
.nav .links a:hover{opacity:1}

/* ── ① 首屏 ── */
.hero{padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,88px);text-align:center}
.hero .eyebrow{
  font-size:var(--text-caption);font-weight:600;letter-spacing:.02em;
  color:var(--color-ash);margin-bottom:14px;
}
.hero .display{margin-bottom:16px}
.hero .tagline{margin:0 auto 30px;max-width:24ch}
.hero .trust{margin-top:38px;display:flex;justify-content:center;gap:0;flex-wrap:wrap;
  font-size:var(--text-body-sm);color:var(--color-ash);letter-spacing:-.022em}
.hero .trust span{padding:0 18px;position:relative}
.hero .trust span + span::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:var(--color-pebble);
}

/* ── ② 三种试法：全出血分栏，无卡片 ── */
.tries{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(38px,5vw,58px)}
.try{padding:0 clamp(14px,2.6vw,32px);position:relative}
.try + .try::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--color-pebble)}
.try .n{font-family:var(--fd);font-size:var(--text-caption);font-weight:600;
  color:var(--color-mist);letter-spacing:.08em;margin-bottom:12px}
.try h3{font-family:var(--fd);font-weight:600;font-size:var(--text-subheading);
  letter-spacing:-.005em;margin-bottom:8px}
.try p{color:var(--color-graphite);font-size:var(--text-body-sm);line-height:1.6}
.verdict{margin-top:clamp(44px,6vw,72px);text-align:center}
.verdict .heading{max-width:24ch;margin:0 auto;text-wrap:balance;line-break:strict}
/* 中文排版：只约束标点不落行首（避头尾）。
   ⚠️ 不能用 word-break:keep-all —— 中文会被当成一整个词，长句撑出横向滚动 */
.heading,.display,.tagline{line-break:strict;overflow-wrap:break-word}
/* 窄屏放开：手机上强制不换行会撑出横向滚动 */
@media (min-width:700px){ .nowrap{white-space:nowrap} }

/* ── ③ 四件事：全出血色洗，滚动切换 ── */
.steps{margin-top:clamp(40px,5vw,60px);display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px)}
.step .ico{width:34px;height:34px;margin-bottom:16px}
.step .ico svg{width:100%;height:100%}
.step h3{font-family:var(--fd);font-weight:600;font-size:var(--text-subheading);
  letter-spacing:-.005em;margin-bottom:8px}
.step p{color:var(--color-graphite);font-size:var(--text-body-sm);line-height:1.6}
.loopline{margin-top:clamp(40px,5vw,56px);text-align:center;font-size:var(--text-body-sm);
  color:var(--color-ash);letter-spacing:-.022em}

/* ── ④ 漏斗：滚动驱动逐级点亮 ── */
.funnel-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(34px,6vw,80px);align-items:center;margin-top:clamp(40px,5vw,60px)}
.funnel{max-width:400px;margin:0 auto;width:100%}
.funnel .cap{margin-top:18px;text-align:center;font-size:var(--text-body-sm);
  color:var(--color-ash);line-height:1.6}
.fn-row{opacity:0;transform:translateY(10px) scale(.985)}
.in .fn-row{opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.in .fn-row:nth-of-type(2){transition-delay:.1s}
.in .fn-row:nth-of-type(3){transition-delay:.22s}
.in .fn-row:nth-of-type(4){transition-delay:.34s}
.in .fn-row:nth-of-type(5){transition-delay:.46s}
.in .fn-row:nth-of-type(6){transition-delay:.58s}
.fn-edge{stroke-dasharray:420;stroke-dashoffset:420}
.in .fn-edge{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .1s}

.goods{display:grid;gap:0}
.good{padding:clamp(20px,2.6vw,28px) 0;border-bottom:1px solid var(--color-pebble)}
.good:first-child{border-top:1px solid var(--color-pebble)}
.good .k{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:7px}
.good h3{font-family:var(--fd);font-weight:600;font-size:var(--text-subheading);letter-spacing:-.005em}
.good .freq{font-size:var(--text-caption);color:var(--color-ash);white-space:nowrap;letter-spacing:-.022em}
.good p{color:var(--color-graphite);font-size:var(--text-body-sm);line-height:1.6}
.dims{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.dims span{font-size:var(--text-caption);letter-spacing:-.022em;padding:4px 11px;
  border-radius:var(--radius-tags);background:var(--color-pebble);color:var(--color-graphite)}

/* ── FAQ：发丝线分隔，无卡片 ── */
.faq{margin-top:clamp(38px,5vw,52px);border-top:1px solid var(--color-pebble)}
.q{border-bottom:1px solid var(--color-pebble)}
.q summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;
  align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--fd);font-weight:600;font-size:clamp(17px,2.2vw,21px);letter-spacing:-.005em}
.q summary::-webkit-details-marker{display:none}
.q summary:focus{outline:none}
.q summary:focus-visible{outline:2px solid var(--color-apple-blue);outline-offset:4px;border-radius:4px}
.q summary:hover .plus::before,.q summary:hover .plus::after{background:var(--color-carbon)}
.q .plus{position:relative;flex:none;width:14px;height:14px}
.q .plus::before,.q .plus::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--color-graphite);
  transition:transform .45s var(--ease-out),opacity .45s var(--ease-out);
}
.q .plus::before{width:14px;height:1.5px}
.q .plus::after{width:1.5px;height:14px}
.q[open] .plus::after{transform:rotate(90deg);opacity:0}
.q .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.q[open] .ans{grid-template-rows:1fr}
.q .ans>div{overflow:hidden}
.q .ans p{padding-bottom:24px;color:var(--color-graphite);max-width:66ch}

/* ── ⑤ 转化：ice 色洗全出血，表单无卡片 ── */
.start-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);margin-top:clamp(36px,4.6vw,52px);text-align:left}
.offer{list-style:none;margin-top:20px}
.offer li{padding:12px 0;border-bottom:1px solid var(--color-pebble);
  color:var(--color-graphite);font-size:var(--text-body-sm);line-height:1.6}
.offer li:first-child{border-top:1px solid var(--color-pebble)}
.kicker{margin-top:22px;font-family:var(--fd);font-weight:600;
  font-size:clamp(19px,2.4vw,24px);line-height:1.35;letter-spacing:-.005em}

form{display:grid;gap:12px}
.field label{display:block;font-size:var(--text-caption);color:var(--color-ash);
  letter-spacing:-.022em;margin-bottom:6px}
.field input{
  width:100%;padding:13px 15px;border-radius:var(--radius-inputs);   /* 8px */
  border:1px solid #d2d2d7;background:#fff;color:var(--color-carbon);
  font-family:var(--ft);font-size:var(--text-body);letter-spacing:-.016em;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input::placeholder{color:var(--color-mist)}
.field input:focus{outline:none;border-color:var(--color-apple-blue);
  box-shadow:0 0 0 3px rgba(0,113,227,.18)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-caption);
  color:var(--color-ash);line-height:1.6;letter-spacing:-.022em}
.consent input{margin-top:3px;flex:none;width:15px;height:15px;accent-color:var(--color-apple-blue)}
.consent a{color:var(--color-link-blue)}
.consent a:hover{text-decoration:underline}
.submit{width:100%;margin-top:2px}
.submit:disabled{background:var(--color-pebble);color:var(--color-mist);
  cursor:default;transform:none}
.msg{display:none;font-size:var(--text-body-sm);line-height:1.55;padding:12px 14px;
  border-radius:var(--radius-cards)}
.msg.on{display:block;background:#fff;border:1px solid var(--color-pebble);color:var(--color-carbon)}
.msg.err{display:block;background:#fff;border:1px solid #d2d2d7;color:#b3261e}
.fnote{font-size:var(--text-caption);color:var(--color-ash);letter-spacing:-.022em}

.ways{margin-top:26px;padding-top:24px;border-top:1px solid var(--color-pebble);
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr .ph{width:124px;height:124px;border:1px solid #d2d2d7;border-radius:var(--radius-images);
  display:grid;place-items:center;text-align:center;background:#fff;
  color:var(--color-mist);font-size:var(--text-caption);line-height:1.7;
  transition:border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.qr img{width:124px;height:124px;border-radius:var(--radius-images)}
.qr.pop .ph,.qr.pop img{border-color:var(--color-apple-blue);transform:scale(1.03)}

/* ── 页脚：扁平、纯排版 ── */
footer{background:var(--color-frost);border-top:1px solid var(--color-pebble);
  padding-block:clamp(40px,5vw,56px)}
footer .mk svg{height:30px;margin-bottom:18px}
footer .ft{font-size:var(--text-body-sm);color:var(--color-graphite);letter-spacing:-.022em}
footer .fl{font-size:var(--text-caption);color:var(--color-ash);margin-top:4px;letter-spacing:-.022em}
footer .legal{margin-top:26px;padding-top:22px;border-top:1px solid var(--color-pebble);
  font-size:var(--text-caption);color:var(--color-ash);line-height:1.9;letter-spacing:-.022em}
footer .legal b{color:var(--color-graphite);font-weight:600}
footer .legal a{color:var(--color-link-blue)}
footer .legal a:hover{text-decoration:underline}

/* ── 吸底 ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px var(--edge) calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,245,247,.82);backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,.08);
  transform:translateY(102%);transition:transform .6s var(--ease-out)}
.dock.show{transform:none}
.dock .in{max-width:980px;margin:0 auto;display:flex;gap:10px;align-items:center}
.dock .btn-fill{flex:1}

/* ══ 动效 ══════════════════════════════════════════════ */
/* 1) 首屏字距收拢 —— Apple 招牌：字从松到紧「落位」 */
@keyframes settle{
  from{opacity:0;letter-spacing:.14em;transform:translateY(16px)}
  to  {opacity:1;letter-spacing:.011em;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero .display,.hero .tagline,.hero .actions,.hero .trust{opacity:0}
.hero.in .eyebrow{animation:rise .8s var(--ease-out) .05s both}
.hero.in .display{animation:settle 1.15s var(--ease-out) .14s both}
.hero.in .tagline{animation:rise .9s var(--ease-out) .42s both}
.hero.in .actions{animation:rise .9s var(--ease-out) .56s both}
.hero.in .trust  {animation:rise .9s var(--ease-out) .68s both}

/* 2) 滚动揭示 */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(18px)}
.stg.in>*{opacity:1;transform:none;
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.stg.in>*:nth-child(1){transition-delay:.04s}
.stg.in>*:nth-child(2){transition-delay:.12s}
.stg.in>*:nth-child(3){transition-delay:.2s}
.stg.in>*:nth-child(4){transition-delay:.28s}

/* 3) 滚动驱动（Chrome 115+ 原生，无 JS）：区块随进入视口缩放落位 */
@supports (animation-timeline: view()){
  @keyframes zoom-settle{
    from{opacity:0;transform:scale(.965) translateY(24px)}
    to  {opacity:1;transform:none}
  }
  .sd{animation:zoom-settle linear both;animation-timeline:view();
      animation-range:entry 8% cover 34%}
  .sd.rv{opacity:1;transform:none;transition:none}   /* 交给滚动驱动，撤掉 JS 版 */
}

/* 4) 大标题随滚动微视差 */
@supports (animation-timeline: view()){
  @keyframes drift{from{transform:translateY(22px)}to{transform:translateY(-22px)}}
  .parallax{animation:drift linear both;animation-timeline:view();animation-range:cover}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.stg>*,.fn-row,.hero .eyebrow,.hero .display,.hero .tagline,
  .hero .actions,.hero .trust{opacity:1!important;transform:none!important}
  .fn-edge{stroke-dashoffset:0}
}

/* ── 响应式：适配而非截肢 ── */
@media (max-width:900px){
  .funnel-wrap{grid-template-columns:1fr;gap:36px}
  .start-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .tries{grid-template-columns:1fr;gap:0}
  .try{padding:22px 0}
  .try + .try{border-top:1px solid var(--color-pebble)}
  .try + .try::before{display:none}
  .nav .links{display:none}
  .hero .trust{flex-direction:column;gap:6px}
  .hero .trust span{padding:0}
  .hero .trust span + span::before{display:none}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
}


/* ══ 天天播 · 产品卖点（Apple「Typography-Only CTA Block」手法）══ */
.product{text-align:center}
.product .pname{
  font-family:var(--fd);font-weight:600;
  font-size:clamp(34px,5.6vw,56px);line-height:1.05;letter-spacing:.011em;
}
.product .pname em{
  font-style:italic;font-weight:400;color:var(--color-signal-blue);
  font-size:.62em;letter-spacing:-.005em;margin-left:.12em;
}
.product .ptag{margin:14px auto 0;max-width:30ch}
.specs{
  margin-top:clamp(44px,5.6vw,68px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border-top:1px solid var(--color-pebble);
}
.spec{padding:clamp(24px,3vw,34px) clamp(12px,2vw,26px);position:relative;text-align:left}
.spec + .spec::before{
  content:"";position:absolute;left:0;top:clamp(24px,3vw,34px);bottom:clamp(24px,3vw,34px);
  width:1px;background:var(--color-pebble);
}
.spec .sn{
  font-size:var(--text-caption);font-weight:600;letter-spacing:.06em;
  color:var(--color-signal-blue);margin-bottom:10px;
}
.spec h3{font-family:var(--fd);font-weight:600;font-size:var(--text-subheading);
  letter-spacing:-.005em;margin-bottom:8px}
.spec p{color:var(--color-graphite);font-size:var(--text-body-sm);line-height:1.6}
.product .note{
  margin-top:clamp(34px,4vw,46px);padding-top:22px;border-top:1px solid var(--color-pebble);
  font-size:var(--text-body-sm);color:var(--color-ash);letter-spacing:-.022em;
}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,40px)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .spec:nth-child(3)::before,.spec:nth-child(1)::before{display:none}
  .spec:nth-child(3),.spec:nth-child(4){border-top:1px solid var(--color-pebble)}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:22px 0;border-top:1px solid var(--color-pebble)}
  .step:first-child{border-top:none}
  .specs{grid-template-columns:1fr}
  .spec{padding-inline:0;border-top:1px solid var(--color-pebble)}
  .spec:first-child{border-top:none}
  .spec + .spec::before{display:none}
}