:root {
  --c-bg: #1a1a2e;
  --c-surface: #16213e;
  --c-surface-elevated: #1f2942;
  --c-input-fill: #2a2a3c;
  --c-accent: #7c6ff5;
  --c-accent-dim: #5b50d9;
  --c-accent-strong: #6a5fe0;
  --c-accent-text: #9085f7;
  --c-text-soft: #9a9ab0;
  --c-ok: #2ed573;
  --c-warning: #ffa502;
  --c-error: #ff6b6b;
  --c-recording: #ff4757;
  --c-text: #e0e0e8;
  --c-text-muted: #8888a0;
  --c-text-faint: #555568;
  --c-border: #2a2a44;
  --c-divider: #24243a;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --fs-display: 30px;
  --fs-title-large: 24px;
  --fs-title-medium: 18px;
  --fs-title-small: 16px;
  --fs-body: 14px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-micro: 10px;

  --d-fast: 150ms;
  --d-medium: 250ms;
  --d-slow: 400ms;

  --maxw: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background:
    radial-gradient(900px 620px at 10% -10%, rgba(124, 111, 245, 0.18), transparent 60%),
    radial-gradient(1100px 760px at 96% 6%, rgba(91, 80, 217, 0.14), transparent 62%),
    var(--c-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(124, 111, 245, 0.38); color: #fff; }

a { color: var(--c-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-xxl); }
.container.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-accent); color: #fff; padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-sm); z-index: 100;
}
.skip-link:focus { left: var(--sp-lg); top: var(--sp-lg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-xxl);
  border-radius: var(--r-pill);
  font-size: var(--fs-title-small);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast), box-shadow var(--d-medium), text-decoration var(--d-fast);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--c-accent-strong); color: #fff; }
.btn-primary:hover { background: var(--c-accent-dim); box-shadow: 0 10px 32px rgba(106, 95, 224, 0.45); }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { border-color: var(--c-accent); color: var(--c-text); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 26, 46, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-divider);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 111, 245, 0.5), transparent);
  pointer-events: none;
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-lg); height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-sm); color: var(--c-text); font-weight: 600; font-size: var(--fs-title-medium); }
.brand:hover { text-decoration: none; }
.brand-mark { border-radius: var(--r-sm); }
.nav-links { display: flex; gap: var(--sp-lg); margin-left: auto; }
.nav-links a { color: var(--c-text-muted); font-size: var(--fs-label); font-weight: 500; }
.nav-links a:hover { color: var(--c-text); text-decoration: none; }
.lang-select {
  margin-left: var(--sp-lg);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--c-surface-elevated);
  color: var(--c-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%238888a0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 6px 26px 6px 14px;
  font-size: var(--fs-label);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color var(--d-fast);
}
.lang-select:hover { border-color: var(--c-accent); }
.lang-select:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }

.hero { padding: var(--sp-xxxl) 0 calc(var(--sp-xxxl) * 2); text-align: center; }
.hero-inner { max-width: 760px; margin: 0 auto; }
.eyebrow {
  display: inline-block; color: var(--c-accent-text); font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--sp-lg);
}
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  border-radius: 2px; vertical-align: middle; margin-right: 12px;
  transform: translateY(-2px);
}
.hero-title { font-size: clamp(40px, 7vw, 64px); line-height: 1.05; font-weight: 700; margin: 0 0 var(--sp-lg); letter-spacing: -.02em; text-shadow: 0 0 48px rgba(124, 111, 245, 0.30); }
.hero-sub { font-size: var(--fs-title-medium); color: var(--c-text-muted); margin: 0 auto var(--sp-xxl); max-width: 620px; }
.hero-cta { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }
.hero-fineprint { color: var(--c-text-muted); font-size: var(--fs-caption); margin-top: var(--sp-lg); }

.section { padding: clamp(72px, 11vh, 132px) 0; }
.section-alt { background: var(--c-surface); }
.section-title { font-size: clamp(var(--fs-title-large), 4vw, var(--fs-display)); font-weight: 700; margin: 0 0 var(--sp-md); letter-spacing: -.01em; }
.section-lead { color: var(--c-text-muted); font-size: var(--fs-title-medium); margin: 0 0 var(--sp-xxxl); }

.feature-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-xl);
  grid-template-columns: repeat(4, 1fr);
}
.feature {
  background: var(--c-surface-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl);
  transition: transform var(--d-medium), border-color var(--d-medium), box-shadow var(--d-medium);
}
.feature:hover { transform: translateY(-5px); border-color: var(--c-accent); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(124, 111, 245, 0.2); }
.feature-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dim));
  color: #fff; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-lg);
  box-shadow: 0 10px 28px rgba(124, 111, 245, 0.4);
}
.feature h3 { font-size: var(--fs-title-medium); margin: 0 0 var(--sp-sm); }
.feature p { margin: 0; color: var(--c-text-soft); font-size: var(--fs-label); }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-xxxl); align-items: center; }
.split-text h2 { margin-bottom: var(--sp-lg); }
.split-text p { color: var(--c-text-muted); }
.desk-cta { display: flex; gap: var(--sp-md); flex-wrap: wrap; align-items: center; }
.bullets { list-style: none; padding: 0; margin: var(--sp-xl) 0 var(--sp-xxl); }
.bullets li { position: relative; padding-left: var(--sp-xxl); margin-bottom: var(--sp-md); color: var(--c-text-muted); }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }

.split-visual { display: flex; justify-content: center; }
.device-card {
  width: 100%; max-width: 360px;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-xxl);
  box-shadow: 0 28px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(124, 111, 245, 0.16);
}
.device-row { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.rec { background: var(--c-recording); box-shadow: 0 0 0 0 rgba(255,71,87,.6); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,71,87,.5); } 70% { box-shadow: 0 0 0 12px rgba(255,71,87,0); } 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); } }
.device-label { font-size: var(--fs-label); color: var(--c-text-muted); }
.device-wave { display: flex; align-items: center; gap: 4px; height: 48px; margin-bottom: var(--sp-lg); }
.device-wave span { flex: 1; background: var(--c-accent); border-radius: var(--r-pill); opacity: .55; animation: bar 1.1s ease-in-out infinite; }
.device-wave span:nth-child(1) { animation-delay: -1.0s; }
.device-wave span:nth-child(2) { animation-delay: -0.9s; }
.device-wave span:nth-child(3) { animation-delay: -0.8s; }
.device-wave span:nth-child(4) { animation-delay: -0.7s; }
.device-wave span:nth-child(5) { animation-delay: -0.6s; }
.device-wave span:nth-child(6) { animation-delay: -0.5s; }
.device-wave span:nth-child(7) { animation-delay: -0.4s; }
.device-wave span:nth-child(8) { animation-delay: -0.3s; }
.device-wave span:nth-child(9) { animation-delay: -0.2s; }
.device-wave span:nth-child(10) { animation-delay: -0.1s; }
@keyframes bar { 0%,100% { height: 8px; } 50% { height: 40px; } }
.device-typed { font-size: var(--fs-title-small); color: var(--c-text); line-height: 1.5; }
.device-cursor { display: inline-block; width: 2px; height: var(--fs-title-small); background: var(--c-accent); animation: blink 1s steps(2) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

.dl-group { margin-bottom: var(--sp-xxxl); }
.dl-group-title { font-size: var(--fs-title-medium); margin: 0 0 var(--sp-lg); color: var(--c-text); }
.dl-buttons { display: flex; gap: var(--sp-md); flex-wrap: wrap; }
.dl-btn { min-width: 180px; }
.dl-btn-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.dl-btn-name { font-size: var(--fs-title-medium); font-weight: 700; }
.dl-btn-meta { font-size: var(--fs-micro); font-weight: 500; }
.dl-note { color: var(--c-text-muted); font-size: var(--fs-caption); margin: var(--sp-md) 0 0; max-width: 560px; }
.dl-note a { color: var(--c-text-muted); }
.dl-note a:hover { color: var(--c-accent-text); }

.privacy-body h3 { font-size: var(--fs-title-small); margin: var(--sp-xxl) 0 var(--sp-sm); }
.privacy-body p { color: var(--c-text-muted); margin: 0 0 var(--sp-md); }
.privacy-body .eyebrow { margin-bottom: var(--sp-sm); }

.footer { border-top: 1px solid var(--c-divider); padding: var(--sp-xxl) 0; background: var(--c-bg); }
.footer-inner { display: flex; align-items: center; gap: var(--sp-xl); flex-wrap: wrap; }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-sm); font-weight: 600; }
.footer-links { display: flex; gap: var(--sp-lg); margin-left: auto; flex-wrap: wrap; }
.footer-links a { color: var(--c-text-muted); font-size: var(--fs-label); }
.footer-links a:hover { color: var(--c-text); text-decoration: none; }
.footer-copy { color: var(--c-text-muted); font-size: var(--fs-caption); }

@media (max-width: 880px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .split-visual { order: -1; }
}
@media (max-width: 560px) {
  .nav-links { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .hero { padding: var(--sp-xxl) 0 var(--sp-xxxl); }
  .section { padding: var(--sp-xxxl) 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}