/* ============================================================
   280days 十月怀胎 · 官网样式
   配色取自 App 本身：湖水青 + 奶油米 + 婴儿杏
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root{
  /* 底色 */
  --cream:      #FFFAF3;
  --cream-2:    #FDF4E7;
  --cream-3:    #FBEEDD;
  --card:       #FFFFFF;

  /* 文字 */
  --ink:        #3D3025;
  --ink-2:      #6F6053;
  --ink-3:      #A5947F;

  /* 品牌 */
  --teal:       #00BCCB;
  --teal-deep:  #06909E;
  --teal-dark:  #1D4E53;
  --teal-soft:  #DFF6F8;
  --sand:       #E3C797;
  --sand-soft:  #F7E9D2;
  --apricot:    #FDDFC2;

  /* 点缀 */
  --peach:      #FBA148;
  --pink:       #FB999E;
  --mint:       #7CCCAF;
  --butter:     #FAC909;

  /* 阴影 */
  --sh-sm:  0 2px 8px rgba(120, 92, 58, .06);
  --sh-md:  0 12px 30px -12px rgba(120, 92, 58, .18);
  --sh-lg:  0 30px 60px -24px rgba(120, 92, 58, .26);
  --sh-xl:  0 44px 80px -30px rgba(120, 92, 58, .32);

  /* 圆角 */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;

  --wrap: 1160px;
  --ease: cubic-bezier(.22,.68,.36,1);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink-2);
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC",
              "Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",
              system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.85;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ color:var(--ink); margin:0; line-height:1.35; font-weight:700; letter-spacing:.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
b,strong{ color:var(--ink); font-weight:700; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap-narrow{ max-width:820px; }

/* ---------- 滚动淡入 ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* ============================================================
   按钮
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:.85em 1.9em;
  border:0; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.03em;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-sm{ padding:.6em 1.3em; font-size:14px; }
.btn-lg{ padding:1.05em 2.4em; font-size:16.5px; }

.btn-primary{
  background:linear-gradient(135deg,#12C9D8,#02A3B3);
  color:#fff;
  box-shadow:0 12px 26px -10px rgba(0,150,166,.65);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -12px rgba(0,150,166,.7); }

.btn-ghost{
  background:#fff; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--sand-soft), var(--sh-sm);
}
.btn-ghost:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--sand), var(--sh-md); }

/* ============================================================
   顶部导航
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,250,243,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled{
  background:rgba(255,250,243,.94);
  box-shadow:0 1px 0 rgba(200,175,140,.28), 0 10px 30px -22px rgba(120,92,58,.5);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; gap:20px;
}

.brand{ display:flex; align-items:center; gap:11px; }
.brand-icon{ width:44px; height:44px; border-radius:12px; box-shadow:var(--sh-sm); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:19px; font-weight:800; color:var(--ink); letter-spacing:.02em; }
.brand-text i{ font-style:normal; font-size:11.5px; color:var(--ink-3); letter-spacing:.28em; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav>a{
  padding:.5em .95em; border-radius:999px;
  font-size:14.5px; color:var(--ink-2); font-weight:500;
  transition:color .2s, background .2s;
}
.nav>a:hover{ color:var(--teal-deep); background:var(--teal-soft); }
.nav .nav-cta{ margin-left:8px; color:#fff; }
.nav .nav-cta:hover{ color:#fff; background:linear-gradient(135deg,#12C9D8,#02A3B3); }

.nav-toggle{
  display:none;
  width:42px; height:42px; padding:0;
  background:#fff; border:0; border-radius:12px;
  box-shadow:var(--sh-sm); cursor:pointer;
}
.nav-toggle span{
  display:block; width:19px; height:2px; margin:4px auto;
  background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   首屏
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,7vw,92px) 0 clamp(90px,11vw,140px);
  background:
    radial-gradient(1100px 520px at 78% -8%, #EAF9FB 0%, rgba(234,249,251,0) 62%),
    radial-gradient(820px 500px at 6% 12%, #FFF3E2 0%, rgba(255,243,226,0) 60%),
    var(--cream);
}
.hero-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; }
.hero-blob-a{ width:440px; height:440px; top:-140px; right:-90px; background:#BFEEF3; }
.hero-blob-b{ width:380px; height:380px; bottom:-160px; left:-110px; background:#FFE0BF; }

.bubbles span{
  position:absolute; border-radius:50%;
  background:rgba(0,188,203,.16);
  animation:float 9s ease-in-out infinite;
}
.bubbles span:nth-child(1){ width:14px;height:14px; top:18%; left:8%;  animation-delay:0s; }
.bubbles span:nth-child(2){ width:9px; height:9px;  top:34%; left:15%; animation-delay:1.4s; background:rgba(251,161,72,.2); }
.bubbles span:nth-child(3){ width:20px;height:20px; top:62%; left:5%;  animation-delay:2.6s; }
.bubbles span:nth-child(4){ width:11px;height:11px; top:14%; right:12%;animation-delay:.8s; background:rgba(251,153,158,.22); }
.bubbles span:nth-child(5){ width:16px;height:16px; top:72%; right:8%; animation-delay:3.4s; }
.bubbles span:nth-child(6){ width:8px; height:8px;  top:46%; right:4%; animation-delay:2s; background:rgba(250,201,9,.25); }
@keyframes float{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-22px) scale(1.1); }
}

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:22px; padding:.42em 1.05em;
  background:#fff; border-radius:999px;
  box-shadow:var(--sh-sm), inset 0 0 0 1px rgba(0,188,203,.16);
  font-size:13px; font-weight:600; color:var(--teal-deep); letter-spacing:.04em;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 0 rgba(0,188,203,.55); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(0,188,203,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,188,203,0); }
}

.hero h1{
  font-size:clamp(32px,5.1vw,56px);
  line-height:1.24; letter-spacing:-.01em; font-weight:800;
  margin-bottom:22px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--teal-deep) 10%,var(--teal) 55%,#5FD3AF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .nb{ display:inline-block; }
.lede{ font-size:clamp(15px,1.5vw,17px); max-width:31em; margin-bottom:32px; color:var(--ink-2); }

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }

.trust{ display:flex; flex-wrap:wrap; gap:clamp(20px,3.5vw,44px); }
.trust li{ display:flex; flex-direction:column; }
.trust b{ font-size:24px; font-weight:800; color:var(--ink); line-height:1.2; letter-spacing:-.01em; }
.trust span{ font-size:12.5px; color:var(--ink-3); letter-spacing:.06em; }

/* 手机与浮动卡片 */
.hero-visual{ position:relative; display:flex; justify-content:center; }

.phone{
  position:relative;
  border-radius:30px; overflow:hidden;
  background:#fff;
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(200,175,140,.2);
}
.phone img{ width:100%; }

.phone-hero{
  width:min(100%,330px);
  border-radius:36px;
  box-shadow:var(--sh-xl), 0 0 0 1px rgba(200,175,140,.22);
  animation:bob 6.5s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.float-card{
  position:absolute; z-index:2;
  display:flex; flex-direction:column;
  padding:13px 17px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md), 0 0 0 1px rgba(200,175,140,.16);
  animation:bob 7.5s ease-in-out infinite;
}
.fc-label{ font-size:11px; color:var(--ink-3); letter-spacing:.1em; }
.fc-value{ font-size:22px; font-weight:800; color:var(--ink); line-height:1.25; }
.fc-value i{ font-style:normal; font-size:12px; font-weight:600; color:var(--ink-3); margin-left:3px; }
.fc-emoji{ font-size:17px; line-height:1; margin-bottom:3px; }
.fc-text{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.55; }

.float-week{ top:8%;  left:-6%;  animation-delay:.5s; }
.float-kick{ bottom:16%; right:-8%; animation-delay:1.6s; }
.float-sync{ bottom:-2%; left:-2%;  animation-delay:2.6s; }

/* 波浪分隔 */
.wave{
  position:absolute; bottom:-1px; left:0;
  width:100%; height:clamp(50px,7vw,110px);
  display:block;
}
.wave path{ fill:var(--cream-2); }

/* ============================================================
   通用区块
   ============================================================ */
.section{ padding:clamp(64px,9vw,116px) 0; }

.sec-head{ text-align:center; max-width:660px; margin:0 auto clamp(40px,5.5vw,68px); }
.kicker{
  display:inline-block; margin-bottom:14px;
  padding:.34em 1em; border-radius:999px;
  background:var(--teal-soft); color:var(--teal-deep);
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
}
.sec-head h2{ font-size:clamp(25px,3.4vw,38px); letter-spacing:-.005em; margin-bottom:16px; }
.sec-head .sub{ font-size:clamp(14.5px,1.4vw,16px); color:var(--ink-2); }

/* ============================================================
   核心亮点
   ============================================================ */
.highlights{ background:var(--cream-2); }

.hl-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,26px);
}
.hl-card{
  padding:26px 22px 30px;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hl-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }

.hl-shot{
  margin:0 auto 22px; padding:16px 16px 0;
  background:var(--accent-soft); border-radius:var(--r-md);
}
.hl-shot img{
  width:100%; border-radius:12px 12px 0 0;
  box-shadow:0 -2px 20px -6px rgba(120,92,58,.22);
}
.hl-card h3{
  position:relative; display:inline-block;
  font-size:18px; margin-bottom:10px; padding-bottom:9px;
}
.hl-card h3::after{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:26px; height:3.5px; border-radius:2px; background:var(--accent);
}
.hl-card p{ font-size:14px; color:var(--ink-2); line-height:1.75; }

/* ============================================================
   功能详解
   ============================================================ */
.feat{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,86px); align-items:center;
  margin-bottom:clamp(56px,8vw,112px);
}
.feat:last-child{ margin-bottom:0; }
.feat-rev .feat-text{ order:2; }
.feat-rev .feat-shot{ order:1; }

.feat-num{
  display:block; margin-bottom:12px;
  font-size:44px; font-weight:800; line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(150deg,var(--sand) 0%,#EFDCBB 60%,rgba(227,199,151,.28) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.feat-text h3{ font-size:clamp(21px,2.6vw,29px); margin-bottom:16px; letter-spacing:-.005em; }
.feat-text>p{ font-size:15.5px; color:var(--ink-2); margin-bottom:16px; }

.ticks{ margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.ticks li{
  position:relative; padding-left:31px;
  font-size:14.8px; color:var(--ink-2); line-height:1.7;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:19px; height:19px; border-radius:50%;
  background:var(--teal-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306909E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/11px no-repeat;
}

.note{
  margin-top:22px; padding:14px 18px;
  background:var(--sand-soft); border-left:3px solid var(--sand);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:14px; color:var(--ink-2);
}

.feat-shot{ display:flex; justify-content:center; }
.feat-shot .phone{ width:min(100%,300px); }

.feat-shot-pair{ position:relative; padding-bottom:26px; }
.feat-shot-pair .phone-front{
  width:min(74%,258px); position:relative; z-index:2;
  transform:translate(-9%,16px);
}
.feat-shot-pair .phone-back{
  width:min(64%,224px); position:absolute; z-index:1;
  top:0; right:2%;
  transform:rotate(4deg);
  opacity:.96;
}

/* ============================================================
   为什么选它
   ============================================================ */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,26px);
}
.why-card{
  padding:30px 26px 32px;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm), inset 0 0 0 1px rgba(227,199,151,.28);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.why-ico{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:18px;
  background:var(--teal-soft); border-radius:16px;
  font-size:24px; line-height:1;
}
.why-card h3{ font-size:17.5px; margin-bottom:9px; }
.why-card p{ font-size:14.2px; color:var(--ink-2); line-height:1.78; }

/* ============================================================
   数据带
   ============================================================ */
.stats{
  padding:clamp(46px,6vw,72px) 0;
  background:linear-gradient(135deg,#0FBFCE 0%,#04A2B2 55%,#5CCDB4 100%);
  color:#fff;
}
.stats-inner{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; text-align:center;
}
.stat b{
  display:block; font-size:clamp(30px,4.2vw,46px);
  font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.015em;
}
.stat b i{ font-style:normal; font-size:.46em; font-weight:700; margin-left:2px; opacity:.9; }
.stat span{ font-size:13.5px; color:rgba(255,255,255,.86); letter-spacing:.06em; }

/* ============================================================
   三步开始
   ============================================================ */
.steps{ background:var(--cream-2); }
.step-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,32px);
}
.step-list li{
  position:relative;
  padding:34px 28px 32px;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm), inset 0 0 0 1px rgba(227,199,151,.28);
}
.step-n{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:18px;
  background:linear-gradient(135deg,#12C9D8,#02A3B3);
  border-radius:14px;
  color:#fff; font-size:19px; font-weight:800;
  box-shadow:0 10px 20px -10px rgba(0,150,166,.75);
}
.step-list h3{ font-size:17.5px; margin-bottom:10px; }
.step-list p{ font-size:14.2px; color:var(--ink-2); line-height:1.78; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ display:flex; flex-direction:column; gap:13px; }
.faq-list details{
  background:var(--card); border-radius:var(--r-md);
  box-shadow:var(--sh-sm), inset 0 0 0 1px rgba(227,199,151,.3);
  transition:box-shadow .3s;
}
.faq-list details[open]{ box-shadow:var(--sh-md), inset 0 0 0 1px rgba(0,188,203,.26); }
.faq-list summary{
  position:relative;
  padding:20px 56px 20px 24px;
  font-size:15.8px; font-weight:600; color:var(--ink);
  cursor:pointer; list-style:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:2.2px solid var(--teal-deep);
  border-bottom:2.2px solid var(--teal-deep);
  border-radius:1px;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-list details p{
  padding:0 26px 22px;
  font-size:14.6px; color:var(--ink-2); line-height:1.85;
}

/* ============================================================
   下载
   ============================================================ */
.download{ background:var(--cream-2); }

.dl-card{
  position:relative; overflow:hidden;
  padding:clamp(42px,6vw,76px) clamp(24px,5vw,60px);
  background:linear-gradient(140deg,#FFFDFA 0%,#F2FBFC 55%,#FFF5E9 100%);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg), inset 0 0 0 1px rgba(0,188,203,.16);
  text-align:center;
}
.dl-blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  top:-190px; left:50%; margin-left:-210px;
  background:radial-gradient(circle,rgba(0,188,203,.12),transparent 68%);
}
.dl-icon{
  position:relative;
  width:88px; height:88px; margin:0 auto 22px;
  border-radius:24px; box-shadow:var(--sh-md);
}
.dl-card h2{ position:relative; font-size:clamp(23px,3.2vw,35px); margin-bottom:14px; }
.dl-card>p{ position:relative; font-size:15.5px; color:var(--ink-2); }

.dl-btns{
  position:relative;
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
  margin-top:34px;
}

.store-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 26px;
  background:var(--ink); color:#fff;
  border:0; border-radius:16px;
  font-family:inherit; cursor:pointer; text-align:left;
  box-shadow:0 14px 28px -14px rgba(61,48,37,.75);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.store-btn:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -14px rgba(61,48,37,.8); }
.store-btn-android{ background:linear-gradient(135deg,#12C9D8,#02A3B3); box-shadow:0 14px 28px -14px rgba(0,150,166,.8); }
.store-btn-android:hover{ box-shadow:0 20px 34px -14px rgba(0,150,166,.85); }

.store-txt{ display:flex; flex-direction:column; line-height:1.3; }
.store-txt i{ font-style:normal; font-size:11px; opacity:.72; letter-spacing:.06em; }
.store-txt b{ color:#fff; font-size:16px; font-weight:700; }

.store-ico{
  width:24px; height:28px; flex:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='white'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/></svg>") center/contain no-repeat;
}
.store-ico-android{
  height:26px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'><path d='M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z'/></svg>") center/contain no-repeat;
}

.caret{
  width:0; height:0; margin-left:2px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,.8);
  transition:transform .25s var(--ease);
}
.dropdown{ position:relative; }
.dropdown.open .caret{ transform:rotate(180deg); }

.dropdown-menu{
  position:absolute; left:50%; top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-8px);
  min-width:200px; padding:8px;
  background:#fff; border-radius:var(--r-md);
  box-shadow:var(--sh-lg), inset 0 0 0 1px rgba(227,199,151,.4);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:20;
}
.dropdown.open .dropdown-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-menu a{
  display:block; padding:10px 16px; border-radius:10px;
  font-size:14.5px; color:var(--ink-2); text-align:left;
  transition:background .2s, color .2s;
}
.dropdown-menu a:hover{ background:var(--teal-soft); color:var(--teal-deep); }

.dl-note{
  position:relative;
  margin-top:22px; font-size:13px; color:var(--ink-3);
}

/* ============================================================
   页脚
   ============================================================ */
.site-footer{
  padding:clamp(48px,6vw,72px) 0 34px;
  background:var(--cream-3);
}
.footer-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:40px; padding-bottom:36px;
}
.foot-brand{ display:flex; gap:14px; max-width:320px; }
.foot-brand img{ width:40px; height:40px; border-radius:11px; flex:none; }
.foot-brand b{ display:block; font-size:17px; font-weight:800; color:var(--ink); }
.foot-brand b span{ margin-left:8px; font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.2em; }
.foot-brand p{ margin-top:4px; font-size:13.5px; color:var(--ink-3); }

.foot-links{ display:flex; gap:clamp(36px,6vw,80px); }
.foot-links h4{ margin-bottom:14px; font-size:13.5px; color:var(--ink); letter-spacing:.06em; }
.foot-links a{
  display:block; margin-bottom:9px;
  font-size:13.8px; color:var(--ink-3);
  transition:color .2s;
}
.foot-links a:hover{ color:var(--teal-deep); }

.foot-bottom{
  padding-top:26px;
  border-top:1px solid rgba(200,175,140,.34);
}
.disclaimer{
  margin-bottom:12px;
  font-size:12.5px; color:var(--ink-3); line-height:1.8;
}
.copy{ font-size:12.5px; color:var(--ink-3); }
.copy a{ text-decoration:underline; text-underline-offset:2px; }
.copy a:hover{ color:var(--teal-deep); }

/* 回到顶部 */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  background:#fff; border-radius:50%;
  box-shadow:var(--sh-md), inset 0 0 0 1px rgba(227,199,151,.4);
  color:var(--teal-deep); font-size:19px; font-weight:700;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, visibility .3s, transform .3s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-3px); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1024px){
  .hl-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .float-week{ left:-2%; }
  .float-kick{ right:-3%; }
  .float-sync{ left:0; }
}

@media (max-width:880px){
  html{ scroll-padding-top:70px; }

  .nav{
    position:fixed; inset:64px 14px auto 14px;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px;
    background:#fff; border-radius:var(--r-lg);
    box-shadow:var(--sh-lg);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav>a{ padding:.85em 1em; font-size:15.5px; text-align:center; }
  .nav .nav-cta{ margin:8px 0 0; }
  .nav-toggle{ display:block; }

  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:1; }
  .hero-visual{ order:2; margin-top:8px; }
  .lede{ margin-inline:auto; }
  .hero-cta,.trust{ justify-content:center; }
  .trust li{ align-items:center; }
  .float-week{ top:4%; left:2%; }
  .float-kick{ bottom:20%; right:2%; }
  .float-sync{ display:none; }

  .feat{ grid-template-columns:1fr; gap:34px; }
  .feat-rev .feat-text{ order:1; }
  .feat-rev .feat-shot{ order:2; }

  .stats-inner{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
  .step-list{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .wrap{ padding-inline:18px; }
  .hl-grid{ grid-template-columns:1fr; gap:18px; }
  .hl-card{ display:grid; grid-template-columns:118px 1fr; grid-template-rows:1fr auto 1fr; column-gap:18px; text-align:left; padding:20px; }
  .hl-shot{ grid-row:1 / -1; margin:0; padding:12px 12px 0; align-self:center; }
  .hl-card h3{ grid-row:2; justify-self:start; }
  .hl-card p{ grid-row:3; align-self:start; }
  .hl-card h3::after{ left:0; transform:none; }
  .why-grid{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; gap:32px; }
  .btn-lg{ width:100%; }
  .hero-cta{ flex-direction:column; }
  .store-btn{ width:100%; justify-content:center; }
  .dropdown{ width:100%; }
  .feat-shot-pair .phone-back{ right:0; }
  .to-top{ right:14px; bottom:14px; }
}