/* ══ H.OS 一页式 · 舞台系统（2026-09-03）══
   首屏之后每一屏都站在这套舞台上。三种版式、两种底色、一个金色。
   规矩：一屏一件事；字大话少；底色只有近白/近黑；图就是真界面；一屏只动一样东西。
   各屏自己的样式写在 hos/screens/NN-*.css，类名以 .sNN- 开头，别改这里。 */

:root{
  /* 舞台色：白从产品米色往白推两步，黑就是产品左侧栏那个深棕黑 */
  --s-white:#F8F6F1; --s-black:#1A1614;
  --s-ink:#1A1614; --s-ink-d:#F6F3EC;
  --s-mute:rgba(26,22,20,.62); --s-mute-d:rgba(246,243,236,.64);
  --s-line:rgba(26,22,20,.1); --s-line-d:rgba(246,243,236,.12);
  /* 唯一的金色（产品橙金与官网金统一到这一个） */
  --s-gold:#B48B4C; --s-gold-d:#C9A66B;
  /* 产品界面色（画真界面用，照真 H.OS 取的） */
  --ui-bg:#F2ECE0; --ui-bg-2:#EDE5D6; --ui-card:#E8DFCF; --ui-card-2:#F6F1E7; --ui-dark:#2A2320; --ui-side:#1C1917;
  --ui-ink:#1F1B18; --ui-mute:#7A7068; --ui-line:rgba(31,27,24,.08);
  --ui-accent:#B8672F; --ui-sage:#7F8F63; --ui-sage-2:#A8B58F; --ui-pink:#F4D9CC; --ui-orange:#F2C7A0; --ui-red:#C4573A;
  --ui-font:var(--tevo-cjk);
  /* 字号阶 */
  --t-h2:clamp(2.5rem,5.4vw,5.5rem);
  --t-lead:clamp(1.2rem,1.9vw,1.75rem);
  --t-big:clamp(6rem,17vw,15rem);
  --t-cap:clamp(.95rem,1.1vw,1.05rem);
  --s-pad:clamp(6rem,14vh,10rem);
  --s-radius:20px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── 屏基座 ── */
.scr{position:relative;padding:var(--s-pad) var(--lp);min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.scr--light{background:var(--s-white);color:var(--s-ink)}
.scr--dark{background:var(--s-black);color:var(--s-ink-d)}
.scr .wrap{width:100%;max-width:76rem;margin:0 auto;padding:0}

/* 标题组：一屏一句 */
.scr-head{max-width:40rem;margin:0 0 clamp(2.5rem,6vh,4.5rem)}
.scr-head--center{margin-left:auto;margin-right:auto;text-align:center}
.scr-h2{font-family:var(--tevo-cjk);font-size:var(--t-h2);line-height:1.08;font-weight:500;letter-spacing:.005em;margin:0 0 .6em;text-wrap:balance}
.scr-lead{font-family:var(--tevo-cjk);font-size:var(--t-lead);line-height:1.5;margin:0;color:var(--s-mute);text-wrap:pretty}
.scr--dark .scr-lead{color:var(--s-mute-d)}
.scr-cap{font-size:var(--t-cap);color:var(--s-mute);margin:1.6rem 0 0;line-height:1.6}
.scr--dark .scr-cap{color:var(--s-mute-d)}

/* ── 版式 A：满图屏（标题居中在上，下面一整块产品界面） ── */
.scr--full .scr-head{margin-left:auto;margin-right:auto;text-align:center}
.scr--full .stage{width:100%;max-width:74rem;margin:0 auto}
/* story.css 里有全局 .stage{display:flex}（旧首屏用的），这里压回块级 */
.scr .stage{display:block;position:static;height:auto;inset:auto}

/* ── 版式 B：大数字屏 ── */
.scr--num .big{
  font-family:"Cinzel",Georgia,var(--tevo-cjk);font-size:var(--t-big);line-height:.95;font-weight:500;letter-spacing:-.01em;margin:0;
  color:var(--s-ink)
}
.scr--dark.scr--num .big{color:var(--s-ink-d)}
.scr--num .big sup{font-size:.32em;vertical-align:.9em;margin-right:.08em;color:var(--s-gold)}
.scr--dark.scr--num .big sup{color:var(--s-gold-d)}
.scr--num .big small{font-size:.28em;color:var(--s-mute);margin-left:.15em;font-family:var(--tevo-cjk);font-weight:400}
.scr--dark.scr--num .big small{color:var(--s-mute-d)}
.scr--num .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}

/* ── 版式 C：窄图配一句话（左文右图；.scr--split-r 反过来） ── */
.scr--split .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.scr--split-r .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.scr--split-r .grid>.scr-head{order:2}
.scr--split .scr-head{margin-bottom:0}

/* ── 产品画框：所有界面同一种摆法（同圆角、同投影、同比例） ── */
.frame{
  position:relative;border-radius:var(--s-radius);overflow:hidden;background:var(--ui-bg);color:var(--ui-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 30px 80px -30px rgba(0,0,0,.45),0 12px 30px -18px rgba(0,0,0,.35);
  font-family:var(--ui-font);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.scr--dark .frame{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 50px 120px -40px rgba(0,0,0,.9),0 20px 40px -20px rgba(0,0,0,.7)}
.frame--wide{aspect-ratio:16/10}
.frame--narrow{max-width:34rem;margin:0 auto}
.frame--tall{max-width:30rem;margin:0 auto;aspect-ratio:3/4}
.frame *{box-sizing:border-box}

/* 手机：拍板类界面用。内容区 390×844 的比例，随宽度缩放 */
.phone{
  position:relative;width:min(20.5rem,78vw);aspect-ratio:390/844;margin:0 auto;border-radius:3.1rem;padding:.6rem;
  background:#0d0c0b;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.8),0 25px 50px -25px rgba(0,0,0,.6);
}
.phone .screen{position:absolute;inset:.6rem;border-radius:2.5rem;overflow:hidden;background:var(--ui-bg);color:var(--ui-ink);font-family:var(--ui-font);font-size:13px;line-height:1.45}
.phone .notch{position:absolute;top:.85rem;left:50%;width:7rem;height:1.75rem;transform:translateX(-50%);background:#0d0c0b;border-radius:999px;z-index:2}

/* ── 真界面公用零件（照真 H.OS 画的） ── */
.ui{font-family:var(--ui-font);color:var(--ui-ink)}
.ui-shell{display:grid;grid-template-columns:13.5rem 1fr;min-height:100%}
.ui-side{background:var(--ui-side);color:#EDE6DA;padding:1.4rem 1rem;font-size:13px}
.ui-side .brand{font-size:14px;margin-bottom:1.6rem}.ui-side .brand b{color:#D08A4E;font-weight:600}
.ui-side .grp{font-size:10.5px;color:rgba(237,230,218,.45);margin:1rem 0 .35rem;letter-spacing:.04em}
.ui-side .it{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:.7rem;color:rgba(237,230,218,.82)}
.ui-side .it.on{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.ui-side .it i{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;opacity:.7;flex:none}
.ui-side .it.on i{border-color:#D08A4E;opacity:1}
.ui-main{padding:1.6rem 1.8rem;background:var(--ui-bg)}
.ui-card{background:var(--ui-card);border-radius:1rem;padding:1rem 1.2rem}
.ui-card--2{background:var(--ui-card-2)}
.ui-card--dark{background:var(--ui-dark);color:#F1EBE0}
.ui-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:11.5px;background:var(--ui-card-2);color:var(--ui-ink)}
.ui-chip--sage{background:#DCE3CB;color:#4F5E38}.ui-chip--pink{background:var(--ui-pink);color:#8C3A22}.ui-chip--orange{background:var(--ui-orange);color:#7A3E12}.ui-chip--dark{background:var(--ui-dark);color:#F1EBE0}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.1rem;border-radius:999px;background:var(--ui-accent);color:#fff;font-weight:600;font-size:13px;border:0}
.ui-btn--ghost{background:transparent;border:1px solid rgba(31,27,24,.18);color:var(--ui-ink)}
.ui-btn--tan{background:#C9A88A;color:#fff}
.ui-btn--sage{background:var(--ui-sage);color:#fff}
.ui-num{font-family:var(--ui-font);font-weight:700;letter-spacing:-.02em}
.ui-mute{color:var(--ui-mute)}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-radius:.8rem;background:var(--ui-card)}
.ui-bar{height:.55rem;border-radius:999px;background:rgba(31,27,24,.1);overflow:hidden}
.ui-bar>i{display:block;height:100%;background:var(--ui-sage);border-radius:999px}
.ui-toggle{width:2.4rem;height:1.35rem;border-radius:999px;background:#D9CDB9;position:relative;flex:none;transition:background .35s var(--ease)}
.ui-toggle::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.ui-toggle.on{background:var(--ui-sage)}.ui-toggle.on::after{transform:translateX(1.05rem)}
.ui-check{width:1.1rem;height:1.1rem;border-radius:50%;border:1.5px solid rgba(31,27,24,.3);display:inline-block;vertical-align:middle;position:relative;flex:none;transition:background .3s,border-color .3s}
.ui-check.on{background:var(--ui-sage);border-color:var(--ui-sage)}
.ui-check.on::after{content:"";position:absolute;left:.32rem;top:.13rem;width:.3rem;height:.55rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── 动效契约：screens.js 给进入视口的 .scr 加 .in；一屏只动一样 ── */
[data-reveal]{opacity:1;transform:translateY(12px);transition:transform .65s var(--ease)}
.in [data-reveal]{opacity:1;transform:none}
[data-stagger]>*{opacity:1;transform:translateY(10px);transition:transform .65s var(--ease);transition-delay:calc(var(--i,0)*var(--step,50ms))}
.in [data-stagger]>*{opacity:1;transform:none}
.scr-head [data-reveal]:nth-child(2){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger]>*{opacity:1;transform:none;transition:none}
}

/* ── 手机 ── */
@media (max-width:900px){
  .scr{min-height:auto;padding:clamp(4rem,12vh,6rem) var(--lp)}
  .scr--num .grid,.scr--split .grid,.scr--split-r .grid{grid-template-columns:1fr}
  .scr--split-r .grid>.scr-head{order:0}
  .scr-head{margin-bottom:2rem}
  .ui-shell{grid-template-columns:1fr}.ui-side{display:none}
  .frame{font-size:12px}.ui-main{padding:1.1rem}
}

/* 页脚跟着舞台的黑走；手机上首屏那张 fixed 的环境图会从静态页脚底下透出来，抬到普通层之上 */
.hos .ft{position:relative;z-index:1;background:var(--s-black);color:rgba(248,246,241,.42)}
.hos .ft .wrap{border-top-color:rgba(248,246,241,.1)}