/* ═══════════════════════════════════════════════════════════════
   柔姿恒™抗皱紧致面膜 · 官网首页样式（移动端长图）
   调性：轻奢淡青蓝 ｜ 主色 #48A8A8 ｜ 浅底 #E6F4F7 ｜ 文字 #222222 ｜ 白 #FFFFFF
   说明：本文件只作用于首页，不覆盖 css/hls.css 的内页样式。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --r-main:#48A8A8;
  --r-deep:#2C6B6B;
  --r-dark:#1F5C5C;
  --r-bg:#E6F4F7;
  --r-bg-2:#F3FAFB;
  --r-ink:#222222;
  --r-muted:#6B7B7B;
  --r-line:rgba(44,107,107,.13);
  --r-gold:#B9954F;
  --r-r-sm:10px; --r-r-md:16px; --r-r-lg:22px; --r-r-pill:999px;
  --r-sh-1:0 4px 14px rgba(44,107,107,.09);
  --r-sh-2:0 10px 30px rgba(44,107,107,.15);
}

html,body{max-width:100%;overflow-x:hidden;}
body.rh-body{
  margin:0;background:#DCEAEC;color:var(--r-ink);
  font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  letter-spacing:.02em;line-height:1.7;-webkit-text-size-adjust:100%;
  word-break:break-word;text-align:left;
}
/* 链接只做基础重置；用元素选择器，保证后续 .类 能覆盖它（写成 body.rh-body a 会反过来压住按钮色） */
a{color:inherit;text-decoration:none;}
body.rh-body img{max-width:100%;border:0;display:block;}
.rh-wrap{
  max-width:520px;margin:0 auto;background:var(--r-bg);
  min-height:100vh;position:relative;overflow-x:hidden;
}
/* 底部空间改由 .rh-final 自己的下内距提供：
   否则 hls.css 的 .has-bnav(body padding-bottom) 会在深色收尾区下面留一条浅色缝 */
body.rh-body.has-bnav{padding-bottom:0;}

/* ── 顶部品牌栏（固定）──────────────────────────── */
.rh-head{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(230,244,247,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--r-line);
}
.rh-head-in{
  max-width:520px;margin:0 auto;height:48px;padding:0 16px;
  display:flex;align-items:center;gap:9px;
}
.rh-mark{width:24px;height:24px;flex:none;}
.rh-mark svg{display:block;width:24px;height:24px;}
.rh-head-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:7px;}
.rh-head-t b{font-size:16px;font-weight:800;color:var(--r-deep);letter-spacing:.06em;}
.rh-head-t span{font-size:9px;letter-spacing:.18em;color:#8FAFAF;}
.rh-head-cta{
  flex:none;font-size:12.5px;font-weight:700;color:#fff;background:var(--r-main);
  padding:0 15px;height:29px;line-height:29px;border-radius:var(--r-pill);
  box-shadow:0 3px 10px rgba(72,168,168,.35);
}
/* 首屏顶部占位，避开固定栏 */
.rh-hero{padding-top:48px;}

/* ── 通用区块 ───────────────────────────────────── */
.rh-sec{padding:38px 18px;position:relative;background:var(--r-bg);}
.rh-sec-white{background:#FFFFFF;}
.rh-sec::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:44px;height:1px;background:var(--r-line);
}
.rh-sec:last-of-type::after{display:none;}

.rh-h2{
  margin:0;font-size:23px;line-height:1.45;font-weight:800;color:var(--r-deep);
  letter-spacing:.03em;text-align:center;
}
.rh-h2 small{display:block;font-size:14px;font-weight:500;color:var(--r-muted);margin-top:9px;letter-spacing:.16em;}
.rh-h2 .rh-num{font-size:30px;font-style:italic;font-weight:900;margin-right:2px;}
.rh-h2 .u{
  display:inline-block;
  background:linear-gradient(180deg,transparent 60%,rgba(72,168,168,.20) 60%);
  padding:0 2px;
}
.rh-lead{margin:20px 0 0;text-align:center;font-size:13.5px;color:var(--r-muted);letter-spacing:.04em;}
.rh-big{
  margin:10px 0 0;text-align:center;font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(92deg,var(--r-main),#6FC2C2);
  border-radius:var(--r-pill);padding:11px 14px;letter-spacing:.1em;
  box-shadow:0 6px 18px rgba(72,168,168,.28);
}
.rh-fine{font-size:11px;color:#8FA6A6;line-height:1.85;margin:14px 0 0;text-align:center;}

/* ── 屏1：首屏 ──────────────────────────────────── */
.rh-hero{
  position:relative;overflow:hidden;padding-bottom:34px;
  background:
    radial-gradient(26rem 15rem at 118% 4%,rgba(72,168,168,.20),transparent 62%),
    radial-gradient(20rem 12rem at -18% 42%,rgba(72,168,168,.13),transparent 60%),
    linear-gradient(170deg,#F1FAFB 0%,#E6F4F7 46%,#DCEEF1 100%);
}
.rh-hero-k{
  margin:24px 0 0;text-align:center;font-size:11.5px;letter-spacing:.34em;
  color:var(--r-main);font-weight:700;
}
.rh-hero h1{
  margin:14px 0 26px;text-align:center;font-size:29px;line-height:1.42;
  font-weight:800;color:var(--r-deep);letter-spacing:.05em;
}
.rh-hero h1 em{font-style:normal;color:var(--r-main);}
.rh-faces{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -18px;padding:4px 18px 10px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rh-faces::-webkit-scrollbar{display:none;}
.rh-faces figure{
  flex:none;width:43%;max-width:186px;margin:0;scroll-snap-align:center;
  border-radius:16px;overflow:hidden;background:#DCEAEC;
  box-shadow:var(--r-sh-2);border:2px solid rgba(255,255,255,.85);
}
.rh-faces img{width:100%;display:block;}
.rh-faces-hint{
  text-align:center;font-size:11px;color:#93AAAA;letter-spacing:.14em;margin-top:2px;
}
.rh-hero-note{
  margin:24px 0 0;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-md);padding:16px 18px;text-align:center;
  box-shadow:var(--r-sh-1);backdrop-filter:blur(4px);
}
.rh-hero-note p{margin:0;font-size:15.5px;line-height:1.85;font-weight:600;color:#2F4F4F;letter-spacing:.03em;}
.rh-cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:22px auto 0;width:fit-content;max-width:100%;
  background:linear-gradient(96deg,var(--r-main),#5FB8B8);color:#fff;
  font-size:15.5px;font-weight:800;letter-spacing:.08em;
  padding:13px 34px;border-radius:var(--r-pill);
  box-shadow:0 10px 24px rgba(72,168,168,.36);
  box-sizing:border-box;
}
.rh-cta:active{transform:scale(.97);}

/* ── 屏2：6 大因素 ──────────────────────────────── */
.rh-factors{margin:24px 0 0;display:flex;flex-direction:column;gap:8px;}
.rh-factors img{width:100%;border-radius:10px;box-shadow:var(--r-sh-1);}

/* ── 屏3：年龄感 + 产品 ─────────────────────────── */
.rh-tags{
  margin:24px 0 0;display:flex;flex-wrap:wrap;gap:9px 16px;
  justify-content:center;align-items:baseline;
}
.rh-tags span{font-size:15px;color:#9FBCBC;letter-spacing:.04em;line-height:1.5;}
.rh-tags .mid{font-size:19px;color:#7BA8A8;}
.rh-tags .big{font-size:25px;font-weight:800;color:var(--r-deep);letter-spacing:.06em;}
.rh-prodcard{
  margin:26px 0 0;background:#fff;border-radius:var(--r-lg);
  padding:20px 18px 18px;box-shadow:var(--r-sh-2);text-align:center;
  border:1px solid rgba(255,255,255,.9);
}
.rh-prodcard img{
  width:74%;max-width:250px;margin:0 auto;border-radius:var(--r-md);
}
.rh-prodcard .say{
  margin:16px 0 0;font-size:20px;font-weight:800;color:var(--r-deep);
  line-height:1.55;letter-spacing:.04em;
}
.rh-prodcard .say b{color:var(--r-main);}
.rh-prodcard .nm{
  margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--r-line);
  font-size:13.5px;font-weight:700;color:#3A5B5B;letter-spacing:.03em;
}
.rh-prodcard .nm small{display:block;font-weight:400;font-size:11.5px;color:var(--r-muted);margin-top:5px;letter-spacing:.06em;}
.rh-prodcard .rh-prices{
  margin:12px 0 0;font-size:15px;font-weight:800;color:var(--r-main);
  letter-spacing:.02em;line-height:1.7;
}

/* ── 屏4：4 大核心（圆点连接线）────────────────── */
.rh-core{
  list-style:none;margin:26px 0 0;padding:0 0 0 28px;position:relative;
}
.rh-core::before{
  content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,rgba(72,168,168,.75),rgba(72,168,168,.18));
}
.rh-core li{position:relative;padding:13px 0;}
.rh-core li::before{
  content:"";position:absolute;left:-28px;top:21px;width:10px;height:10px;border-radius:50%;
  background:var(--r-main);box-shadow:0 0 0 4px rgba(72,168,168,.15);
}
.rh-core li b{
  display:block;font-size:11.5px;font-weight:500;color:#8FAEAE;
  letter-spacing:.2em;margin-bottom:3px;
}
.rh-core li span{font-size:18px;font-weight:800;color:var(--r-ink);letter-spacing:.03em;line-height:1.45;}

/* ── 屏5：天然原料 ──────────────────────────────── */
.rh-qc{
  margin:22px 0 0;background:rgba(255,255,255,.9);border-radius:var(--r-md);
  padding:16px 16px 14px;box-shadow:var(--r-sh-1);
}
.rh-qc p{margin:0 0 9px;font-size:13px;line-height:1.9;color:#3E5A5A;}
.rh-qc p:last-child{margin-bottom:0;}
.rh-qc .hl{color:var(--r-deep);font-weight:700;}
.rh-ings{margin:16px 0 0;display:flex;flex-direction:column;gap:9px;}
.rh-ings img{width:100%;border-radius:12px;box-shadow:var(--r-sh-1);}
.rh-banner{
  margin:20px 0 0;text-align:center;font-size:17px;font-weight:800;color:#fff;
  letter-spacing:.14em;padding:15px 12px;border-radius:var(--r-md);
  background:linear-gradient(96deg,var(--r-main),#6FC2C2);
  box-shadow:0 8px 22px rgba(72,168,168,.3);
}

/* ── 屏6：核心活性成分 ──────────────────────────── */
.rh-sec-mol{
  background:
    radial-gradient(22rem 14rem at 8% 12%,rgba(72,168,168,.16),transparent 60%),
    radial-gradient(20rem 13rem at 104% 88%,rgba(72,168,168,.18),transparent 62%),
    linear-gradient(178deg,#EAF7F8,#E1F1F4);
}
.rh-mol{margin:22px 0 0;position:relative;}
.rh-mol-deco{
  position:absolute;border-radius:50%;opacity:.5;pointer-events:none;z-index:0;
}
.rh-mol-deco.a{width:45%;top:-14px;left:-14px;}
.rh-mol-deco.b{width:40%;bottom:26px;right:-16px;}
.rh-act{
  position:relative;z-index:2;background:rgba(255,255,255,.94);border-radius:var(--r-md);
  padding:15px 16px 14px;margin-bottom:11px;box-shadow:var(--r-sh-1);
  border-left:3px solid var(--r-main);
}
.rh-act h4{
  margin:0;font-size:15.5px;font-weight:800;color:var(--r-deep);letter-spacing:.03em;line-height:1.5;
}
.rh-act p{margin:6px 0 0;font-size:13px;color:#4C6E6E;line-height:1.8;}
.rh-act .tg{
  display:inline-block;font-size:10.5px;color:var(--r-main);letter-spacing:.14em;
  border:1px solid rgba(72,168,168,.35);border-radius:var(--r-pill);
  padding:2px 9px;margin-bottom:8px;
}

/* ── 屏7：七大功效（气泡弧）─────────────────────── */
.rh-eff{margin:22px 0 0;position:relative;min-height:330px;}
.rh-orb{
  position:absolute;right:-6%;top:2%;width:76%;max-width:300px;
  border-radius:50%;opacity:.8;pointer-events:none;
}
.rh-bubbles{list-style:none;margin:0;padding:0;position:relative;z-index:2;}
.rh-bubbles li{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:74px;height:74px;border-radius:50%;margin-bottom:6px;
  background:rgba(255,255,255,.86);border:1px solid rgba(72,168,168,.22);
  box-shadow:0 6px 16px rgba(72,168,168,.18), inset 0 -6px 14px rgba(72,168,168,.10);
  font-size:15px;font-weight:800;color:var(--r-deep);letter-spacing:.04em;
  backdrop-filter:blur(3px);
}
.rh-bubbles li i{
  font-style:normal;font-size:11px;font-weight:700;color:var(--r-main);opacity:.85;
}

/* ── 屏8：7 维淡纹 ──────────────────────────────── */
.rh-sec-face{
  background:
    radial-gradient(24rem 16rem at 50% -6%,rgba(72,168,168,.16),transparent 64%),
    #E6F4F7;
}
.rh-face7{
  width:100%;margin:20px 0 0;border-radius:var(--r-md);
  box-shadow:var(--r-sh-2);
}

/* ── 屏9：收尾转化 ──────────────────────────────── */
.rh-final{
  background:linear-gradient(178deg,#2C6B6B 0%,#357C7C 58%,#3E8C8C 100%);
  color:#fff;text-align:center;padding:44px 18px 92px;   /* 下内距给固定底栏留位 */
}
.rh-final::after{display:none;}
.rh-final-t{margin:0;font-size:22px;font-weight:800;letter-spacing:.06em;color:#fff;}
.rh-final-s{
  margin:12px auto 0;font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.85);
  max-width:16em;letter-spacing:.04em;
}
.rh-final-btns{display:flex;gap:12px;margin:26px 0 0;}
.rh-final-price{
  margin:16px 0 0;font-size:15px;font-weight:800;color:#fff;letter-spacing:.04em;
  line-height:1.8;opacity:.95;
}
.rh-final-btns a{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:46px;border-radius:var(--r-pill);font-size:15px;font-weight:800;
  letter-spacing:.08em;box-sizing:border-box;
}
.rh-btn-ghost{border:1.5px solid rgba(255,255,255,.65);color:#fff;}
.rh-btn-ghost:active{background:rgba(255,255,255,.14);}
.rh-btn-main{background:#fff;color:var(--r-deep);box-shadow:0 8px 20px rgba(0,0,0,.18);}
.rh-btn-main:active{transform:scale(.97);}
.rh-footer{
  margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;
}
.rh-footer a{font-size:12px;color:rgba(255,255,255,.78);letter-spacing:.04em;}
.rh-footer a::after{content:"｜";margin-left:12px;color:rgba(255,255,255,.3);}
.rh-footer a:last-child::after{display:none;}
.rh-copy{
  margin:20px 0 0;font-size:11px;line-height:1.9;color:rgba(255,255,255,.55);letter-spacing:.06em;
}

/* ── 预约页 ─────────────────────────────────────── */
.rh-back{
  flex:none;width:28px;height:28px;line-height:26px;text-align:center;
  font-size:22px;color:var(--r-deep);border-radius:50%;background:rgba(72,168,168,.10);
}
.rh-yy-top{padding-bottom:22px;}
.rh-yy-prod{
  margin:20px 18px 0;background:#fff;border-radius:var(--r-md);
  padding:12px;display:flex;align-items:center;gap:12px;box-shadow:var(--r-sh-1);
}
.rh-yy-prod img{width:76px;height:76px;flex:none;border-radius:var(--r-sm);object-fit:cover;}
.rh-yy-prod-t{min-width:0;}
.rh-yy-prod-t b{display:block;font-size:15px;font-weight:800;color:var(--r-deep);line-height:1.5;}
.rh-yy-prod-t span{display:block;font-size:11.5px;color:var(--r-muted);margin-top:5px;letter-spacing:.04em;}
.rh-yy-tip{
  margin:18px 20px 0;text-align:center;font-size:13.5px;line-height:1.9;
  color:#3E5A5A;letter-spacing:.03em;
}

.rh-form{display:block;}
.rh-fld{display:block;margin-bottom:14px;}
.rh-fld > span{
  display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:700;
  color:var(--r-deep);margin-bottom:7px;letter-spacing:.06em;
}
.rh-fld > span small{font-weight:400;font-size:11px;color:#9AAFaf;letter-spacing:.02em;}
.rh-fld input,.rh-fld textarea{
  width:100%;box-sizing:border-box;border:1.5px solid var(--r-line);
  background:#fff;border-radius:var(--r-sm);padding:0 13px;height:48px;
  font-size:15px;color:var(--r-ink);outline:none;font-family:inherit;
  transition:border-color .18s,box-shadow .18s;
}
.rh-fld textarea{height:auto;min-height:84px;padding:12px 13px;line-height:1.7;resize:vertical;}
.rh-fld input::placeholder,.rh-fld textarea::placeholder{color:#AEC2C2;}
.rh-fld input:focus,.rh-fld textarea:focus{
  border-color:var(--r-main);box-shadow:0 0 0 3px rgba(72,168,168,.14);
}
.rh-submit{
  width:100%;height:50px;margin-top:6px;border:none;border-radius:var(--r-pill);
  background:linear-gradient(96deg,var(--r-main),#5FB8B8);color:#fff;
  font-size:16px;font-weight:800;letter-spacing:.14em;cursor:pointer;
  font-family:inherit;box-shadow:0 10px 24px rgba(72,168,168,.34);
}
.rh-submit:active{transform:scale(.98);}
.rh-priv{
  margin:14px 2px 0;font-size:11px;line-height:1.85;color:#8FA6A6;letter-spacing:.02em;
}
.rh-priv a{color:var(--r-main);text-decoration:underline;}
.rh-err{
  margin:0 0 16px;background:#FFF1F0;border:1px solid #F5C6C6;color:#B23A36;
  border-radius:var(--r-sm);padding:11px 13px;font-size:13px;line-height:1.7;
}

.rh-done{text-align:center;}
.rh-done-ico{
  width:72px;height:72px;margin:8px auto 0;border-radius:50%;
  background:rgba(72,168,168,.12);display:flex;align-items:center;justify-content:center;
}
.rh-done-ico svg{width:36px;height:36px;}
.rh-done h2{margin:18px 0 0;font-size:21px;font-weight:800;color:var(--r-deep);letter-spacing:.06em;}
.rh-done > p{margin:10px 0 0;font-size:13.5px;color:var(--r-muted);line-height:1.9;}
.rh-done-info{
  margin:22px 0 0;background:#fff;border-radius:var(--r-md);padding:16px;
  box-shadow:var(--r-sh-1);display:grid;grid-template-columns:auto 1fr;
  gap:12px 16px;text-align:left;
}
.rh-done-info span{font-size:13px;color:var(--r-muted);}
.rh-done-info b{font-size:14px;color:var(--r-ink);font-weight:700;text-align:right;}
.rh-done-btns{display:flex;gap:12px;margin:24px 0 0;}
.rh-done-btns a{
  flex:1;display:flex;align-items:center;justify-content:center;height:46px;
  border-radius:var(--r-pill);font-size:14.5px;font-weight:700;letter-spacing:.06em;
  box-sizing:border-box;
}
.rh-btn-line{border:1.5px solid rgba(72,168,168,.55);color:var(--r-deep);}
.rh-btn-solid{background:var(--r-main);color:#fff;box-shadow:0 8px 20px rgba(72,168,168,.3);}

/* ── 底部导航在桌面端居中 ───────────────────────── */
@media (min-width:560px){
  #bottomNav{max-width:520px;left:50%;transform:translateX(-50%);border-radius:0;}
}

/* ── 入场动画 ───────────────────────────────────── */
.rh-anim{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out;}
.rh-anim.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rh-anim{opacity:1;transform:none;transition:none;}
}