@font-face{font-family:system;src:local("-apple-system"),local("BlinkMacSystemFont"),local("Segoe UI"),local("PingFang SC"),local("Hiragino Sans GB"),local("Microsoft YaHei");}
:root{
  --bg: #f6f8fb;
  --text: #0b0b0f;
  --text-secondary: #3b3f45;
  --glass-bg: rgba(255,255,255,0.18);
  --glass-stroke: rgba(255,255,255,0.35);
  --shadow: 0 20px 40px rgba(13,15,26,0.12);
  --radius-2: 12px;
  --radius-3: 24px;
  --accent-1: #7c3aed;
  --accent-2: #22d3ee;
  --accent-3: #10b981;
  --btn-grad: linear-gradient(135deg,var(--accent-1),var(--accent-2));
  --btn-grad-2: linear-gradient(135deg,#64748b,#94a3b8);
  --bg-gradient: radial-gradient(900px 600px at 50% -120px,#c7f5ff 0%,#e9d8ff 32%,#fef3f3 60%,#eef2ff 100%),linear-gradient(#f6f8fb,#f6f8fb);
  --aurora-a: #7c3aed;
  --aurora-b: #22d3ee;
  --aurora-c: #10b981;
  --aurora-d: #fb7185;
  --aurora-e: #f59e0b;
}
.theme-dark{
  --bg: #0b0b0f;
  --text: #e7e9ee;
  --text-secondary: #a0a6b2;
  --glass-bg: rgba(13,15,26,0.42);
  --glass-stroke: rgba(255,255,255,0.08);
  --shadow: 0 20px 40px rgba(0,0,0,0.35);
  --bg-gradient: radial-gradient(900px 600px at 50% -120px,#191b2a 0%,#141624 40%,#0c0e18 100%),linear-gradient(#0b0b0f,#0b0b0f);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg-gradient);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.glass{
  background:
    linear-gradient(180deg,rgba(255,255,255,0.35),rgba(255,255,255,0.08)) ,
    var(--glass-bg);
  backdrop-filter:saturate(120%) blur(28px);
  -webkit-backdrop-filter:saturate(120%) blur(28px);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-3);
  box-shadow:var(--shadow);
}
.glass.soft{background:var(--glass-bg)}
.dynamic-island{
  position:fixed;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  height:36px;
  padding:0 16px;
  display:flex;
  align-items:center;
  border-radius:18px;
  background:rgba(0,0,0,0.75);
  color:#fff;
  z-index:50;
}
.island-content{display:flex;gap:12px;align-items:center;font-size:12px}
.island-title{font-weight:600}
.signal{width:8px;height:8px;border-radius:50%;background:#22d3ee;display:inline-block}
.battery{padding:4px 8px;border-radius:12px;background:rgba(255,255,255,0.12)}
.app-header{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 24px 16px;
  z-index:40;
}
.header-scrolled{
  backdrop-filter:saturate(120%) blur(16px);
  -webkit-backdrop-filter:saturate(120%) blur(16px);
  background:rgba(255,255,255,0.5);
  border-bottom:1px solid var(--glass-stroke);
}
.theme-dark .header-scrolled{
  background:rgba(13,15,26,0.45);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;display:grid;place-items:center}
.logo.small{width:22px;height:22px}
.brand-name{font-weight:700;font-size:18px}
.nav{display:flex;gap:16px;align-items:center}
.nav-link{padding:10px 12px;border-radius:14px;transition:transform .2s ease,background .2s ease}
.nav-link:hover{background:rgba(0,0,0,0.06);transform:translateY(-1px)}
.nav-link.active{background:rgba(0,0,0,0.08)}
.menu-toggle{
  width:36px;height:28px;border-radius:14px;border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,0.75);
  display:none;place-items:center;color:var(--text);cursor:pointer;
}
.lang-select{
  height:32px;border-radius:14px;border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,0.75);padding:0 10px;color:var(--text);
}
.mode-toggle{
  width:40px;height:28px;border-radius:16px;
  background:linear-gradient(135deg,#111827,#374151);
  color:#fff;border:none;cursor:pointer;
  position:relative;
}
.mode-toggle::before{
  content:"";
  position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:10px;background:#fff;transition:left .25s ease;
}
.theme-dark .mode-toggle{background:linear-gradient(135deg,#94a3b8,#334155)}
.theme-dark .mode-toggle::before{left:16px;background:#0b0b0f}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:18px;font-weight:600;
  transition:transform .2s ease,opacity .2s ease;
}
.btn-glass{
  background:rgba(255,255,255,0.18);
  border:1px solid var(--glass-stroke);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  color:var(--text);
}
.btn-glass:hover{transform:translateY(-1px);background:rgba(255,255,255,0.24)}
.btn-primary{background:var(--btn-grad);color:#fff}
.btn-secondary{background:var(--btn-grad-2);color:#fff}
.btn:hover{transform:translateY(-1px)}
.hero{
  position:relative;
  min-height:82vh;
  padding:32px 24px 64px;
  display:grid;
  gap:24px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(460px 280px at 10% 10%,rgba(124,58,237,.25),transparent 60%),
    radial-gradient(420px 260px at 90% 20%,rgba(34,211,238,.25),transparent 60%),
    radial-gradient(520px 320px at 50% 80%,rgba(16,185,129,.2),transparent 60%);
  filter:saturate(120%);
  z-index:-1;
}
.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after{
  content:"";position:absolute;inset:auto;
  width:60vmax;height:60vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,58,237,.35),transparent 70%);
  filter:blur(60px);
  animation:float1 16s ease-in-out infinite;
}
.aurora::after{
  background:radial-gradient(closest-side,rgba(34,211,238,.35),transparent 70%);
  animation:float2 18s ease-in-out infinite;
}
@keyframes float1{0%{transform:translate(-30%, -20%)}50%{transform:translate(20%, -10%)}100%{transform:translate(-30%, -20%)}}
@keyframes float2{0%{transform:translate(40%, 20%)}50%{transform:translate(-10%, 30%)}100%{transform:translate(40%, 20%)}}
.hero-content{
  max-width:980px;margin:0 auto;padding:32px 28px;display:grid;gap:12px;text-align:center;
}
.clock{display:grid;gap:4px;justify-items:center}
.clock-time{font-size:84px;line-height:1;font-weight:700;letter-spacing:-2px}
.clock-date{font-size:16px;color:var(--text-secondary)}
.title{margin:8px 0 0 0;font-size:36px;letter-spacing:-0.4px;line-height:1.25}
.subtitle{margin:6px 0 18px 0;font-size:18px;color:var(--text-secondary)}
.cta{display:flex;justify-content:center;gap:12px;margin-top:8px}
.hero-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:12px auto 0}
.widget{padding:18px;border-radius:20px}
.widget.glass{background:
  linear-gradient(180deg,rgba(255,255,255,0.35),rgba(255,255,255,0.08)),
  var(--glass-bg)}
.widget-title{font-weight:700;margin-bottom:10px}
.widget-body{display:grid;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}
.dot-primary{background:#7c3aed}
.dot-secondary{background:#22d3ee}
.task{display:flex;align-items:center;gap:8px}
.track{display:flex;align-items:center;gap:12px}
.art{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#22d3ee)}
.meta .name{font-weight:600}
.meta .artist{font-size:12px;color:var(--text-secondary)}
.progress{height:6px;border-radius:6px;background:rgba(0,0,0,0.08)}
.progress .bar{height:100%;width:42%;border-radius:6px;background:linear-gradient(90deg,#22d3ee,#7c3aed)}
.section{padding:56px 24px}
.section-title{text-align:center;font-size:26px;font-weight:700;margin-bottom:22px}
.section p{max-width:760px;margin:0 auto;color:var(--text-secondary)}
.features-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{padding:20px;border-radius:22px;display:grid;gap:8px}
.feature-icon{width:34px;height:34px}
.feature-name{font-weight:700;font-size:16px}
.feature-desc{color:var(--text-secondary);font-size:14px}
.showcase-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.screen{padding:16px;border-radius:26px}
.screen-top{height:18px;display:grid;place-items:center}
.pill{width:62px;height:12px;border-radius:8px;background:rgba(0,0,0,0.35)}
.screen-body{display:grid;gap:10px;min-height:260px}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cell{height:64px;border-radius:16px;background:rgba(255,255,255,0.35)}
.cell.wide{grid-column:span 2}
.dock{display:flex;justify-content:center;gap:8px;margin-top:8px}
.icn{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,0.35)}
.home-indicator{width:64px;height:6px;border-radius:4px;background:rgba(0,0,0,0.35);margin:12px auto 0}
.pricing-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{padding:22px;border-radius:22px;text-align:center;position:relative}
.price-card.glass{background:
  linear-gradient(180deg,rgba(255,255,255,0.35),rgba(255,255,255,0.08)),
  var(--glass-bg)}
.featured{transform:scale(1.02)}
.badge{position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#22d3ee);color:#fff;font-size:12px}
.price-name{font-weight:700;margin-bottom:8px}
.price-value{font-size:28px;font-weight:700;margin-bottom:10px}
.price-list{list-style:none;padding:0;margin:0 0 12px 0;display:grid;gap:6px;color:var(--text-secondary)}
.download-card{max-width:720px;margin:0 auto;padding:22px;border-radius:22px;text-align:center}
.download-card.glass{background:
  linear-gradient(180deg,rgba(255,255,255,0.35),rgba(255,255,255,0.08)),
  var(--glass-bg)}
.download-form{display:flex;gap:10px;justify-content:center}
.input{flex:1;min-width:240px;padding:12px 14px;border-radius:14px;border:1px solid var(--glass-stroke);background:rgba(255,255,255,0.75);color:var(--text)}
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  padding:12px 16px;border-radius:14px;background:rgba(0,0,0,0.85);color:#fff;z-index:60;
}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:280px;transform:translateX(100%);
  background:var(--glass-bg);backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);border-left:1px solid var(--glass-stroke);
  z-index:70;padding:16px 14px;display:grid;gap:10px;
}
.mobile-menu.open{transform:translateX(0);transition:transform .25s ease}
.menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.25);z-index:65;opacity:0;pointer-events:none;
}
.menu-backdrop.show{opacity:1;pointer-events:auto;transition:opacity .2s ease}
.app-footer{padding:32px 24px}
.footer-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-inner .links a{font-size:14px}
.links{display:flex;gap:14px}
.links a{padding:10px 12px;border-radius:14px}
.links a:hover{background:rgba(0,0,0,0.06)}
.copyright{color:var(--text-secondary);font-size:12px}
.reveal{opacity:0;transform:translateY(12px);animation:reveal .6s ease forwards}
@keyframes reveal{to{opacity:1;transform:none}}
@media (max-width:1024px){
  .features-grid,.showcase-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
  .hero-widgets{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .nav .nav-link{display:none}
  .menu-toggle{display:block}
  .hero{min-height:75vh}
  .clock-time{font-size:62px}
  .features-grid,.showcase-grid,.pricing-grid,.hero-widgets{grid-template-columns:1fr}
  .download-form{flex-direction:column}
  .cta{flex-direction:column}
}