/* 黄豆短剧落地页 —— 手机端专属视觉（暖珊瑚落日 · 紧凑版 v4） */
:root{
  --cream:#FFF5EF;
  --ink:#2A1C18;
  --muted:#A38A80;
  --coral:#F2603C;
  --coral-deep:#CF4327;
  --line:#F3E2D8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--cream);color:var(--ink);overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* 手机窄列：超宽屏也只居中显示一列，专注手机端 */
.app{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;position:relative;background:var(--cream)}

/* ══════════ Hero（压紧，给下面广告腾地方）══════════ */
.hero{
  position:relative;overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 26px) 20px 36px;
  background:radial-gradient(132% 90% at 50% -12%, #FFE0C9 0%, #FFBE97 38%, #FF9B70 68%, #F97D57 100%);
  color:#fff;isolation:isolate;
}
.glow{position:absolute;border-radius:50%;filter:blur(44px);opacity:.5;z-index:0;pointer-events:none}
.glow-a{width:200px;height:200px;top:-64px;left:-56px;background:radial-gradient(#FFE9D6,transparent 70%)}
.glow-b{width:180px;height:180px;top:30px;right:-64px;background:radial-gradient(#FF9E7A,transparent 70%);opacity:.45}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

.logo{width:72px;height:72px;border-radius:21px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#FFF3EB 0%,#FFC7A8 100%);overflow:hidden;
  box-shadow:0 10px 24px rgba(160,60,40,.32), inset 0 2px 3px rgba(255,255,255,.9), inset 0 -6px 12px rgba(190,70,45,.18);
  animation:pop .55s cubic-bezier(.2,.9,.3,1.3) both}
.logo img{width:100%;height:100%;object-fit:cover}
.logo-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 2px 2px rgba(150,60,40,.25))}
/* 品牌字母（大 H）：珊瑚渐变、超粗 */
.logo-letter{font-size:46px;font-weight:900;line-height:1;letter-spacing:-1px;
  font-family:"Arial Black",Arial,-apple-system,sans-serif;
  background:linear-gradient(150deg,#FF7A45,#D8433C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(150,60,40,.22))}

.hero-title{margin-top:12px;font-size:26px;font-weight:800;letter-spacing:1.5px;
  text-shadow:0 2px 12px rgba(150,50,40,.26);animation:rise .45s .05s ease both}
.hero-desc{margin-top:9px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.92);
  max-width:290px;animation:rise .45s .1s ease both}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:11px;animation:rise .45s .1s ease both}
.chip{font-size:11.5px;font-weight:600;color:#fff;padding:4px 11px;border-radius:20px;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* 两个主入口（更紧凑）*/
.cta{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:20px;animation:rise .45s .16s ease both}
.btn{position:relative;display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:17px;
  transition:transform .14s ease;overflow:hidden}
.btn:active{transform:scale(.975)}
.btn-ico{flex:0 0 42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.btn-txt{flex:1;display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0}
.btn-txt b{font-size:17px;font-weight:800;letter-spacing:.5px}
.btn-txt i{font-style:normal;font-size:12px;opacity:.7}
.btn-arrow{font-size:24px;opacity:.35;font-weight:400}

.btn-primary{background:#fff;color:var(--coral-deep);
  box-shadow:0 12px 26px rgba(150,55,35,.26), inset 0 -2px 0 rgba(0,0,0,.03)}
.btn-primary .btn-ico{color:#fff;background:linear-gradient(150deg,#FF9C6E,#F05630);
  box-shadow:0 4px 9px rgba(230,80,40,.4)}
.btn-primary .btn-txt i{color:var(--muted);opacity:1}
.btn-primary .btn-arrow{color:var(--coral)}

/* 次按钮：同样实心白卡（不再半透明糊背景），靠绿色图标区分 */
.btn-ghost{background:#fff;color:var(--ink);
  box-shadow:0 10px 24px rgba(150,70,45,.18), inset 0 -2px 0 rgba(0,0,0,.03)}
.btn-ghost .btn-ico{color:#fff;background:linear-gradient(150deg,#5AC77C,#2E9E52);
  box-shadow:0 4px 9px rgba(40,150,70,.35)}
.btn-ghost .btn-txt i{color:var(--muted);opacity:1}
.btn-ghost .btn-arrow{color:#cbb9af}

/* ══════════ 上浮内容面板 ══════════ */
.sheet{position:relative;z-index:2;flex:1;
  margin-top:-20px;padding:22px 18px calc(env(safe-area-inset-bottom) + 30px);
  background:var(--cream);border-radius:24px 24px 0 0;
  box-shadow:0 -8px 22px rgba(150,70,40,.10);
  animation:rise .45s .2s ease both}

.promo-title{display:flex;align-items:center;gap:12px;margin:2px 0 18px;color:var(--muted)}
.promo-title::before,.promo-title::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.promo-title span{font-size:13.5px;font-weight:700;letter-spacing:1px;white-space:nowrap}

.promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 8px}
.promo-item{display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .12s ease}
.promo-item:active{transform:scale(.92)}
.promo-icon{position:relative;width:58px;height:58px;filter:drop-shadow(0 5px 11px rgba(160,80,50,.20))}
.promo-icon img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.7)}
.promo-badge{position:absolute;top:-6px;right:-6px;font-style:normal;
  font-size:10px;font-weight:700;color:#fff;padding:2px 7px;border-radius:10px;
  background:linear-gradient(135deg,#FF5A5F,#E5322F);
  box-shadow:0 3px 7px rgba(220,50,50,.45);transform:scale(.92)}
.promo-name{font-size:12px;color:var(--ink);text-align:center;line-height:1.25;font-weight:500;
  max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.foot{margin-top:28px;text-align:center;color:var(--muted);font-size:12px;line-height:1.9}
.foot-brand{margin-top:10px;font-weight:800;letter-spacing:3px;font-size:13px;
  color:transparent;background:linear-gradient(90deg,#FF8A5B,#E24A34);
  -webkit-background-clip:text;background-clip:text;opacity:.95}

@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}