/* ============================================================
   颐家乐 · 移动端 H5 品牌页
   移动优先，最大宽度 480px 居中；仅用于手机 / 微信内浏览
   ============================================================ */

:root{
  --ink:#0B0B0C;
  --ink-2:#16161A;
  --ink-3:#1F1F24;
  --paper:#FFFFFF;
  --paper-warm:#F7F5F1;
  --paper-warm-2:#EFEBE3;
  --gold:#C6A15B;
  --gold-deep:#A8823C;
  --gold-light:#E4CD97;
  --muted:#6E6E73;
  --muted-2:#8E8E93;
  --line:rgba(11,11,12,.10);
  --line-gold:rgba(198,161,91,.34);
  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --top-h:56px;
  --bar-h:62px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#111114;color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.h5{
  position:relative;max-width:480px;margin:0 auto;overflow:hidden;
  background:var(--paper);min-height:100vh;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));
  box-shadow:0 0 80px rgba(0,0,0,.5);
}

/* ---------- 顶部固定栏 ---------- */
.h5-top{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;height:var(--top-h);z-index:80;
  display:flex;align-items:center;gap:10px;padding:0 16px;
  background:rgba(11,11,12,0);border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.h5-top.is-stuck{background:rgba(11,11,12,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.08)}
.h5-top img{height:30px;width:auto;border-radius:4px}
.h5-top .brand-txt{display:flex;flex-direction:column;line-height:1;color:#fff}
.h5-top .brand-txt b{font-family:var(--font-display);font-size:15px;letter-spacing:.24em;font-weight:600}
.h5-top .brand-txt span{font-size:8px;letter-spacing:.3em;color:rgba(255,255,255,.5);margin-top:4px}
.h5-top .top-call{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line-gold);color:var(--gold-light);
  font-size:12px;letter-spacing:.06em;padding:7px 13px;border-radius:100px;
  background:rgba(198,161,91,.08);
}
.h5-top .top-call svg{width:13px;height:13px;flex:0 0 auto}

/* ---------- 通用板块 ---------- */
.s{position:relative;padding:64px 20px}
.s--dark{background:var(--ink);color:#fff}
.s--warm{background:var(--paper-warm)}
.s--line{border-top:1px solid var(--line)}
.eyebrow{
  display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:14px;
}
.s--dark .eyebrow{color:var(--gold)}
.s-title{font-family:var(--font-display);font-size:23px;line-height:1.5;letter-spacing:.02em}
.s-sub{color:var(--muted);font-size:13.5px;line-height:1.9;margin-top:14px}
.s--dark .s-sub{color:rgba(255,255,255,.6)}
.s-head{margin-bottom:32px}
.rule{width:44px;height:1px;background:var(--gold);margin:20px 0 0}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;color:#fff;overflow:hidden;
  padding:calc(var(--top-h) + 24px) 20px calc(56px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(circle 340px at 82% 6%,rgba(198,161,91,.16),transparent 70%),
    radial-gradient(circle 300px at 0% 96%,rgba(198,161,91,.1),transparent 70%),
    var(--ink);
}
.hero::after{
  content:"";position:absolute;left:20px;right:20px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.25),transparent);
}
.hero__in{position:relative;z-index:2}
.hero__logo{width:min(240px,62%);border-radius:8px;margin-bottom:28px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.hero__tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.16em;color:var(--gold-light);
  border:1px solid var(--line-gold);border-radius:100px;padding:6px 13px;
  background:rgba(198,161,91,.1);margin-bottom:18px;
}
.hero__tag i{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.hero h1{font-family:var(--font-display);font-size:30px;line-height:1.35;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__lead{color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.95;margin-top:16px}
.hero__since{
  display:flex;align-items:baseline;gap:10px;margin-top:26px;
  border-left:2px solid var(--gold);padding-left:14px;
}
.hero__since b{font-family:var(--font-display);font-size:24px;color:var(--gold);letter-spacing:.04em}
.hero__since span{font-size:11.5px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.scroll-tip{
  position:relative;z-index:2;display:flex;align-items:center;gap:9px;
  margin-top:34px;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.45);text-transform:uppercase;
}
.scroll-tip i{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--gold),transparent);animation:drop 2s infinite}
@keyframes drop{0%{transform:translateY(-8px);opacity:0}40%{opacity:1}100%{transform:translateY(8px);opacity:0}}

/* ---------- 滚动跑马灯 ---------- */
.strip{background:var(--ink-2);color:rgba(255,255,255,.62);overflow:hidden;padding:15px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.strip__row{display:flex;gap:26px;white-space:nowrap;animation:marquee 26s linear infinite;font-size:12px;letter-spacing:.12em}
.strip__row span{display:inline-flex;align-items:center;gap:26px}
.strip__row span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 实拍横幅 ---------- */
.photo-banner{position:relative;height:236px;overflow:hidden;background:var(--ink)}
.photo-banner img{width:100%;height:100%;object-fit:cover;object-position:center 74%}
.photo-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.5),rgba(11,11,12,.05) 40%,rgba(11,11,12,.82) 100%);
}
.photo-banner .cap{
  position:absolute;left:20px;bottom:18px;z-index:2;color:#fff;
}
.photo-banner .cap b{font-family:var(--font-display);font-size:15px;letter-spacing:.06em;display:block}
.photo-banner .cap span{font-size:10.5px;letter-spacing:.2em;color:var(--gold-light);text-transform:uppercase}

/* ---------- 数据 ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.09)}
.stats div{background:var(--ink);padding:24px 18px}
.stats b{font-family:var(--font-display);font-size:27px;color:#fff;letter-spacing:.02em}
.stats b i{font-style:normal;font-size:13px;color:var(--gold);margin-left:2px}
.stats p{margin-top:6px;font-size:12px;color:rgba(255,255,255,.55)}
.stats em{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.34);margin-top:8px;line-height:1.7}

/* ---------- 理念卡片 ---------- */
.pillars{display:flex;flex-direction:column;gap:14px}
.pillar{border:1px solid var(--line-gold);background:#fff;padding:24px 20px;border-radius:6px}
.pillar b.no{display:block;font-size:10px;letter-spacing:.22em;color:var(--gold-deep);margin-bottom:12px}
.pillar h3{font-family:var(--font-display);font-size:18px;letter-spacing:.03em}
.pillar p{color:var(--muted);font-size:13.5px;line-height:1.9;margin-top:10px}

/* ---------- 品牌故事 ---------- */
.story p{color:var(--muted);font-size:14px;line-height:2.05;margin-bottom:14px}
.story p:last-child{margin-bottom:0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.fact{background:var(--paper-warm);padding:20px 14px;text-align:center}
.fact b{display:block;font-family:var(--font-display);font-size:22px;color:var(--gold-deep);letter-spacing:.02em}
.fact span{display:block;font-size:11.5px;color:var(--muted-2);letter-spacing:.1em;margin-top:6px}

/* ---------- 时间轴 ---------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--gold),rgba(198,161,91,.16))}
.tl__item{position:relative;padding-bottom:28px}
.tl__item:last-child{padding-bottom:0}
.tl__item::before{
  content:"";position:absolute;left:-26px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:1px solid var(--gold);
}
.tl__item em{display:block;font-style:normal;font-family:var(--font-display);font-size:12.5px;letter-spacing:.08em;color:var(--gold)}
.tl__item h4{font-size:15px;letter-spacing:.02em;margin-top:4px}
.tl__item p{color:var(--muted);font-size:13px;line-height:1.85;margin-top:8px}

/* ---------- 产品横滑 ---------- */
.swipe{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:2px 20px 22px;margin:0 -20px;
  scrollbar-width:none;
}
.swipe::-webkit-scrollbar{display:none}
.pcard{
  flex:0 0 76%;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:22px 18px;display:flex;flex-direction:column;
}
.pcard em{font-style:normal;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.pcard h3{font-family:var(--font-display);font-size:18px;margin-top:10px;letter-spacing:.02em}
.pcard p{color:var(--muted);font-size:13px;line-height:1.85;margin-top:10px;flex:1}
.pcard .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.pcard .tags span{font-size:10.5px;letter-spacing:.08em;color:var(--gold-deep);border:1px solid var(--line-gold);border-radius:100px;padding:4px 10px}
.swipe-hint{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted-2);letter-spacing:.12em;margin-top:-6px}
.swipe-hint i{width:22px;height:1px;background:var(--gold);display:block}

/* ---------- 掌门人 ---------- */
.founder{background:var(--ink-2);border-radius:8px;padding:26px 22px;color:#fff}
.founder q{display:block;font-family:var(--font-display);font-size:17px;line-height:1.8;color:var(--gold-light)}
.founder .by{margin-top:14px;font-size:11.5px;letter-spacing:.14em;color:rgba(255,255,255,.5)}
.founder p{color:rgba(255,255,255,.62);font-size:13px;line-height:1.9;margin-top:18px}

/* ---------- 案例 ---------- */
.case{border-top:1px solid var(--line);padding:22px 0}
.case:first-of-type{border-top:0;padding-top:0}
.case em{font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--gold-deep)}
.case h4{font-family:var(--font-display);font-size:17px;margin-top:8px}
.case .kv{display:flex;gap:26px;margin-top:12px}
.case .kv b{font-family:var(--font-display);font-size:20px;color:var(--gold-deep)}
.case .kv span{display:block;font-size:11px;color:var(--muted-2);letter-spacing:.06em;margin-top:2px}
.case p{color:var(--muted);font-size:13px;line-height:1.85;margin-top:12px}

/* ---------- 二维码 ---------- */
.qr-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 20px;
}
.qr-card img{width:172px;height:172px;border-radius:6px}
.qr-card b{font-family:var(--font-display);font-size:17px;letter-spacing:.06em;margin-top:18px}
.qr-card p{color:var(--muted);font-size:12.5px;line-height:1.85;margin-top:8px}
.qr-card .hold-tip{margin-top:14px;font-size:11.5px;color:var(--gold-deep);letter-spacing:.08em}

/* ---------- 页脚 ---------- */
.h5-foot{background:var(--ink);color:rgba(255,255,255,.45);padding:36px 20px 40px;font-size:12px;line-height:1.9}
.h5-foot h4{color:#fff;font-family:var(--font-display);font-size:15px;letter-spacing:.06em;margin-bottom:14px}
.h5-foot .row{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px}
.h5-foot .row svg{width:14px;height:14px;margin-top:4px;flex:0 0 auto;color:var(--gold)}
.h5-foot .base{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.32)}
.h5-foot a{color:rgba(255,255,255,.4)}

/* ---------- 底部固定操作栏 ---------- */
.h5-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:90;
  display:flex;align-items:center;gap:10px;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(11,11,12,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(198,161,91,.22);
}
.h5-bar .btn-call{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:#141414;font-size:14.5px;font-weight:500;letter-spacing:.04em;
  height:44px;border-radius:100px;
}
.h5-bar .btn-call svg{width:16px;height:16px}
.h5-bar .ico{
  width:44px;height:44px;border-radius:100px;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;
}
.h5-bar .ico svg{width:19px;height:19px}
.h5-bar .ico:active{background:rgba(255,255,255,.08)}

/* ---------- 弹层 ---------- */
.modal{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(6,6,7,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal.is-open{display:flex}
.modal__card{
  background:#fff;border-radius:12px;padding:28px 22px;text-align:center;width:100%;max-width:320px;
  animation:pop .32s var(--ease-out);
}
@keyframes pop{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.modal__card b{display:block;font-family:var(--font-display);font-size:17px;letter-spacing:.06em}
.modal__card img{width:196px;height:196px;margin:18px auto 0;border-radius:6px}
.modal__card p{color:var(--muted);font-size:12.5px;line-height:1.8;margin-top:14px}
.modal__close{margin-top:18px;font-size:13px;color:var(--gold-deep);letter-spacing:.08em}
.share-guide{color:#fff;text-align:right;width:100%;max-width:480px;padding:8px 20px}
.share-guide .arrow{margin-left:auto;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:44px solid var(--gold);transform:rotate(38deg);margin-bottom:14px;margin-right:52px}
.share-guide b{display:block;font-size:16px;font-family:var(--font-display);letter-spacing:.04em;line-height:1.7}
.share-guide p{color:rgba(255,255,255,.6);font-size:12.5px;margin-top:10px;line-height:1.8}
.modal--share{align-items:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 26px)}

/* ---------- 滚动渐显 ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* 顶部返回/回顶 */
.to-top{
  position:fixed;right:calc(50% - 240px + 14px);bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 14px);
  z-index:85;width:40px;height:40px;border-radius:100px;
  background:rgba(11,11,12,.72);border:1px solid rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.to-top.is-on{opacity:1;pointer-events:auto}
.to-top svg{width:16px;height:16px}
@media (max-width:520px){.to-top{right:14px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
}