/* MIXBAR 官网 · 共享样式（首页与各产品页共用）
 * 字体：品牌字标用衬线体，其余一律系统无衬线（SF / 苹方）
 * 动效：统一缓动 --ease 与三档时长；首屏依次浮现、滚动淡入、卡片悬停上浮 + 光标高光 */

:root{
  --bg:#0B0906;
  --text:#F5F1E8; --text-2:rgba(245,241,232,.62); --text-3:rgba(245,241,232,.38);
  --gold:#E8B96A; --gold-2:#F3D3A0; --gold-deep:#B8904C; --gold-rgb:232,185,106;
  --green:#7FC79C; --red:#E3262F; --red-rgb:227,38,47;
  --line:rgba(245,241,232,.10); --line-2:rgba(245,241,232,.16);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  --brand-font:Georgia,"Songti SC","Noto Serif SC",serif;
  --ease:cubic-bezier(.28,.11,.32,1);
  --t-fast:.25s; --t-mid:.6s; --t-slow:1s;
  --pad:clamp(20px,5vw,40px);
  --glass-fill:linear-gradient(160deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 45%,rgba(255,255,255,.01) 100%);
  --glass-blur:blur(22px) saturate(175%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.07);
  --nav-h:52px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{color:var(--text);font-family:var(--font);font-size:17px;line-height:1.5;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* —— 字号层级 —— */
.eyebrow{font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.04em}
h1,h2,.h1,.h2{font-weight:700;letter-spacing:-.035em;line-height:1.08}
h1,h2,h3,.h1,.h2{text-wrap:balance}
/* 标题、导语、说明行：中文只在标点和空格处换行，不把一个词拆到两行；实在放不下才强行断 */
h1,h2,h3,.h1,.h2,.lede,.meta,.eyebrow,.prod-for,li{word-break:keep-all;overflow-wrap:anywhere}
.ln{display:inline-block;text-wrap:balance}      /* 标题的一个短语：整体换行（site.js 按 <br> 包上） */
p,li,.lede{text-wrap:pretty}                   /* 段落最后一行不留孤字（中文另由 site.js 的 .nob 兜底） */
.nob{white-space:nowrap}
.h1{font-size:clamp(44px,8vw,96px)}
.h2{font-size:clamp(34px,5.4vw,64px)}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.25}
.lede{font-size:clamp(19px,2.2vw,24px);color:var(--text-2);line-height:1.45;max-width:30em}
.body{font-size:17px;color:var(--text-2)}
.fine{font-size:13px;color:var(--text-3)}
.gold-text{background:linear-gradient(180deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.money,.num{font-variant-numeric:tabular-nums}

/* —— 按钮 —— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 26px;border-radius:980px;font-size:17px;font-weight:500;color:#1A1308;
  background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px rgba(var(--gold-rgb),.25);
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn.ghost{color:var(--text);background:rgba(255,255,255,.07);box-shadow:var(--glass-edge);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.btn.sm{height:32px;padding:0 16px;font-size:14px}
.link{color:var(--gold);font-size:17px}
.link::after{content:" ›";transition:margin var(--t-fast) var(--ease)}
.link:hover::after{margin-left:3px}

/* —— 环境光与颗粒 —— */
.ambient{position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(40px);
  background:
    radial-gradient(36% 30% at 20% 12%,rgba(var(--gold-rgb),.20),transparent 70%),
    radial-gradient(30% 26% at 85% 30%,rgba(var(--accent2,var(--gold-rgb)),.12),transparent 72%),
    radial-gradient(40% 36% at 50% 100%,rgba(var(--gold-rgb),.10),transparent 70%);
  animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{50%{transform:translate3d(3%,-2%,0) scale(1.05)}100%{transform:translate3d(-2%,2%,0) scale(1.02)}}
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* —— 玻璃卡片：悬停上浮 + 跟随光标的高光（位置由 site.js 写入 --mx/--my）—— */
.glass{position:relative;isolation:isolate;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 24px 60px rgba(0,0,0,.40);transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.12),transparent 62%)}
.glass:hover::after{opacity:1}
@media (hover:hover){ a.glass:hover,.glass.lift:hover{transform:translateY(-6px);box-shadow:var(--glass-edge),0 32px 70px rgba(0,0,0,.5)} }

/* —— 全站导航（与苹果官网同构：产品 → 悬停展开分类面板）—— */
/* 注意：毛玻璃放在 ::before 上，不放在 .gnav 本身——backdrop-filter 会让元素成为 fixed 子元素的定位参照，手机菜单就铺不满全屏了 */
.gnav{position:sticky;top:0;z-index:100;height:var(--nav-h)}
.gnav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,9,6,.55);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.gnav.open::before{background:rgba(11,9,6,.92)}
body.has-local .gnav{position:relative}      /* 产品页：全站导航随页面滚走，产品导航吸顶 */
.gnav .in{max-width:1120px;height:100%;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand svg{width:20px;height:20px;color:var(--gold)}
.brand b{font-family:var(--brand-font);font-size:17px;font-weight:700;letter-spacing:.08em}
.brand b i{font-style:normal;color:var(--gold)}
.gnav .items{display:flex;align-items:center;gap:30px;margin-left:auto;height:100%}
.gi{position:static;height:100%;display:flex;align-items:center}
.gi > a{font-size:14px;color:var(--text-2);transition:color var(--t-fast) var(--ease)}
.gi:hover > a,.gi > a.on,.gi.open > a{color:var(--text)}
/* 展开面板：整条玻璃，内容左对齐 */
.fly{position:absolute;left:0;right:0;top:100%;opacity:0;visibility:hidden;transform:translateY(-8px);
  background:rgba(14,11,8,.94);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px rgba(0,0,0,.5);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.gi:hover .fly,.gi.open .fly,.gi:focus-within .fly{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
/* 面板展开时，下方页面变暗变模糊，让注意力集中在面板上 */
.fly::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;pointer-events:none;background:rgba(0,0,0,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fly .in{max-width:1120px;margin:0 auto;padding:30px var(--pad) 38px;display:flex;gap:70px}
.fly h6{font-size:12px;font-weight:400;color:var(--text-3);letter-spacing:.02em;margin-bottom:12px}
.fly ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fly .big a{font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--text)}
.fly .small a{font-size:14px;color:var(--text-2)}
.fly a{transition:color var(--t-fast) var(--ease)}
.fly a:hover{color:var(--gold)}
.fly li{opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.gi:hover .fly li,.gi.open .fly li,.gi:focus-within .fly li{opacity:1;transform:none}
.fly li:nth-child(2){transition-delay:.03s} .fly li:nth-child(3){transition-delay:.06s} .fly li:nth-child(4){transition-delay:.09s}
.lang-btn{order:9;flex:none;height:28px;margin-left:-14px;padding:0 12px;border:0;border-radius:980px;font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;
  color:var(--text-2);background:rgba(255,255,255,.07);box-shadow:var(--glass-edge);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.lang-btn:hover{color:var(--text);background:rgba(255,255,255,.12)}
.menu-btn{display:none;width:36px;height:36px;margin-left:auto;align-items:center;justify-content:center}
.menu-btn i{position:relative;width:18px;height:1.5px;background:var(--text);transition:background var(--t-fast)}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text);transition:transform .35s var(--ease)}
.menu-btn i::before{transform:translateY(-6px)} .menu-btn i::after{transform:translateY(6px)}
.gnav.open .menu-btn i{background:transparent}
.gnav.open .menu-btn i::before{transform:rotate(45deg)} .gnav.open .menu-btn i::after{transform:rotate(-45deg)}
@media (max-width:760px){
  .menu-btn{display:flex;margin-left:6px}
  .lang-btn{order:0;margin-left:auto}
  .gnav .items{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;margin:0;height:auto;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--pad) 40px;overflow-y:auto;
    background:rgba(11,9,6,.92);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
  .gnav.open .items{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .gi{height:auto;flex-direction:column;align-items:stretch;padding:10px 0;border-bottom:1px solid var(--line)}
  .gi > a{font-size:28px;font-weight:600;color:var(--text);letter-spacing:-.03em}
  .fly{position:static;opacity:1;visibility:visible;transform:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .fly::after{display:none}
  .fly .in{padding:8px 0 4px;gap:0;flex-direction:column;margin:0;max-width:none}
  .fly h6,.fly .small{display:none}
  .fly .big ul{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .fly .big a{font-size:15px;font-weight:400;color:var(--text-2)}
  .fly li{opacity:1;transform:none}
}

/* —— 产品导航（产品页吸顶）—— */
.lnav{position:sticky;top:0;z-index:90;height:52px;background:rgba(11,9,6,.6);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.lnav .in{max-width:1120px;height:100%;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:24px}
.lnav .title{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.lnav a.l{font-size:13px;color:var(--text-2);transition:color var(--t-fast) var(--ease);white-space:nowrap}
.lnav a.l:hover,.lnav a.l.on{color:var(--text)}
@media (max-width:560px){ .lnav a.l{display:none} .lnav .title{font-size:17px} }

/* —— 首屏依次浮现 —— */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.intro > *{animation:rise var(--t-slow) var(--ease) backwards}
.intro > :nth-child(2){animation-delay:.08s} .intro > :nth-child(3){animation-delay:.16s}
.intro > :nth-child(4){animation-delay:.24s} .intro > :nth-child(5){animation-delay:.32s}

/* —— 滚动淡入（无 JS 时照常显示）—— */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
.stagger > .reveal:nth-child(2){transition-delay:.1s} .stagger > .reveal:nth-child(3){transition-delay:.2s}
.stagger > .reveal:nth-child(4){transition-delay:.3s} .stagger > .reveal:nth-child(5){transition-delay:.4s} .stagger > .reveal:nth-child(6){transition-delay:.5s}

/* —— 缓慢浮动（设备模型等）—— */
@keyframes float{50%{transform:translateY(-12px)}}
.float{animation:float 8s ease-in-out infinite}

/* —— 页脚 —— */
footer{box-shadow:inset 0 1px 0 var(--line);padding:30px 0 50px;font-size:13px;color:var(--text-3)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer nav{display:flex;gap:20px}
footer a:hover{color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none}
}