:root{
  --bg:#0b0b0f; --panel:#12131a; --muted:#8a8fa3; --text:#e9ecf1;
  --brand:#8b5cf6; /* violet */
  --brand2:#22d3ee; /* cyan */
  --accent:#f8a91c; /* optional gold micro accents */
  --radius:16px; --max:1040px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
img{max-width:100%;display:block}
a{color:#c7d2fe;text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.875rem;color:var(--muted)}
.lede{font-size:1.125rem;color:#cfd3e6}

.site-header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(1.2) blur(8px);background:linear-gradient(180deg, rgba(11,11,15,.9), rgba(11,11,15,.6) 60%, rgba(11,11,15,0));border-bottom:1px solid #1a1b22}
.site-header,.site-footer{padding:14px 20px}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:700}
.brand span{letter-spacing:.2px}
.site-nav{display:flex;gap:18px}
.site-nav a{padding:8px 10px;border-radius:10px}
.site-nav a.active,.site-nav a:hover{background:#1a1b26}
.nav-toggle{display:none;margin-left:auto;background:#1a1b26;border:0;color:#fff;padding:8px 10px;border-radius:10px}
@media (max-width:840px){
  .nav-toggle{display:block}
  .site-nav{display:none;flex-direction:column;position:absolute;right:20px;top:56px;background:#12131a;border:1px solid #1f2130;padding:10px;border-radius:12px}
  .site-nav.open{display:flex}
}

.hero{position:relative;overflow:hidden;padding:72px 20px}
.hero-inner{max-width:var(--max);margin:0 auto;text-align:center}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:.2rem 0 .5rem}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.hero-art{
  position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:radial-gradient(60% 60% at 60% 40%, rgba(139,92,246,.45), transparent 60%),
             radial-gradient(40% 40% at 30% 60%, rgba(34,211,238,.35), transparent 60%);
  filter:saturate(1.2) blur(40px);opacity:.8;pointer-events:none;
}

.section-title{max-width:var(--max);margin:40px auto 16px;padding:0 20px;font-size:1.25rem}
.subtle{opacity:.9}

.apps{padding:10px 0 24px}
.app-card{max-width:var(--max);margin:0 auto 12px;padding:16px 18px;display:grid;grid-template-columns:96px 1fr;gap:16px;background:#11121a;border:1px solid #1f2130;border-radius:var(--radius)}
.app-card .cta-row{margin-top:10px}
.app-icon{border-radius:22%}

.coming-grid{max-width:var(--max);margin:0 auto;padding:0 20px 10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.coming-card{padding:14px 14px;background:#11121a;border:1px solid #1f2130;border-radius:12px;color:#cbd5e1}
.tag{margin-left:8px;font-size:.75rem;padding:3px 8px;border-radius:999px;background:#1a1b26;color:#c7d2fe}

.values{padding:16px 20px 36px}
.value-list{max-width:var(--max);margin:0 auto;padding-left:18px}

.newsletter{text-align:center;padding:28px 20px 50px}

.btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:12px;padding:10px 14px;font-weight:600;border:1px solid transparent}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#080810;border:0}
.btn-secondary{background:#1a1b26;border-color:#283046}
.btn-outline{border-color:#283046}
.btn-ghost{background:transparent;border-color:#283046}

.product .product-hero{max-width:var(--max);margin:28px auto;padding:0 20px;display:grid;grid-template-columns:128px 1fr;gap:18px;align-items:center}
.app-icon-xl{border-radius:26%}
.feature-grid{max-width:var(--max);margin:16px auto;padding:0 20px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feature{background:#11121a;border:1px solid #1f2130;border-radius:14px;padding:16px 14px}
.faq{max-width:var(--max);margin:10px auto 24px;padding:0 20px}
details{background:#11121a;border:1px solid #1f2130;border-radius:12px;margin:8px 0;padding:10px 12px}
details>summary{cursor:pointer;font-weight:600}

.cta-wide{text-align:center;padding:28px 20px 52px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

.legal-page,.support{max-width:860px;margin:22px auto;padding:0 20px 40px}
.site-footer{border-top:1px solid #1a1b22}
.footer-grid{max-width:var(--max);margin:0 auto;display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr;align-items:start}
.footer-grid nav,.footer-grid .social{display:flex;flex-direction:column;gap:8px}
.site-footer .legal{text-align:center;margin-top:16px}
.compact{text-align:center}
/* ===== Screens: 竖图网格，PC 居中，多列自适应 ===== */
.screens { margin-block: 3rem 4rem; }

/* 居中关键：固定列宽范围 + justify-content:center */
.screens .screens-track {
  display: grid;
  gap: 1.25rem;
  /* 生成尽可能多的列；列宽在 240–360px 之间；多余空间用来居中对齐 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  justify-content: center;                /* 水平整体居中列 */
  align-content: start;
  padding-inline: 0.5rem;
}

/* 单个“手机框”卡片：适配竖图比例并保持居中 */
.screen.phone {
  width: clamp(240px, 26vw, 360px);       /* 列宽同步约束，确保整齐 */
  aspect-ratio: 9 / 19.5;                 /* 竖屏优先比例 */
  border-radius: 20px;
  background: radial-gradient(90% 120% at 50% 10%, #101418, #080a0d);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;                              /* figure 默认外边距清零，避免错位 */
}

.screen.phone img {
  width: 100%;
  height: 100%;
  object-fit: contain;                     /* 不裁切竖图，完整展示 */
  border-radius: 14px;
  background: #0b0f14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

/* 移动端：自动一列（仍然居中） */
@media (max-width: 600px) {
  .screens .screens-track {
    grid-template-columns: 1fr;
    justify-content: center;
  }
  .screen.phone { width: min(420px, 96vw); }
}