:root {
    --color-bg: #000000;
    --color-bg-alt: #0a0a0a;
    --color-bg-card: rgba(255,255,255,0.04);
    --color-bg-card-hover: rgba(255,255,255,0.07);
    --color-text: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-tertiary: #6e6e73;
    --color-link: #2997ff;
    --color-link-hover: #5eb8ff;
    --color-blue: #2997ff;
    --color-green: #30d158;
    --color-orange: #ff9f0a;
    --color-cyan: #64d2ff;
    --color-purple: #bf5af2;
    --color-pink: #ff375f;
    --color-border: rgba(255,255,255,0.1);
    --color-border-light: rgba(255,255,255,0.06);
    --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --max-width: 980px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --nav-height: 48px;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:var(--font-stack);
    background:var(--color-bg);
    color:var(--color-text);
    line-height:1.47059;
    font-size:17px;
    font-weight:400;
    letter-spacing:-0.022em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--color-link); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:var(--color-link-hover); text-decoration:underline; }

.section-inner { max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.section-eyebrow { font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--color-link); text-align:center; margin-bottom:8px; }
.section-title { font-size:clamp(32px,5vw,48px); font-weight:700; letter-spacing:-0.005em; line-height:1.08349; text-align:center; margin-bottom:12px; }
.section-desc { font-size:clamp(17px,2vw,21px); color:var(--color-text-secondary); text-align:center; max-width:600px; margin:0 auto; line-height:1.381; font-weight:400; letter-spacing:.011em; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-stack); font-size:17px; font-weight:400; line-height:1.17648; letter-spacing:-0.022em; padding:12px 24px; border-radius:980px; border:none; cursor:pointer; transition:all var(--transition-normal); text-decoration:none; white-space:nowrap; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--color-blue); color:#fff; }
.btn-primary:hover { background:var(--color-link-hover); color:#fff; transform:scale(1.02); }
.btn-primary:active { transform:scale(0.98); }
.btn-secondary { background:transparent; color:var(--color-link); border:1px solid var(--color-link); }
.btn-secondary:hover { background:var(--color-link); color:#fff; transform:scale(1.02); }
.btn-secondary:active { transform:scale(0.98); }
.btn-large { padding:16px 36px; font-size:19px; }

[data-reveal] { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease, transform 0.8s ease; }
[data-reveal].revealed { opacity:1; transform:translateY(0); }

/* Nav */
#nav { position:fixed; top:0; left:0; right:0; height:var(--nav-height); z-index:1000; background:rgba(0,0,0,0.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-inner { max-width:var(--max-width); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-brand { display:flex; align-items:center; gap:8px; color:var(--color-text); font-weight:600; font-size:17px; letter-spacing:-0.022em; }
.nav-brand:hover { color:var(--color-text); text-decoration:none; }
.nav-logo-img { width:28px; height:28px; border-radius:7px; }
.nav-links { display:flex; gap:28px; }
.nav-links a { color:var(--color-text-secondary); font-size:12px; font-weight:400; letter-spacing:0; transition:color var(--transition-fast); }
.nav-links a:hover { color:var(--color-text); text-decoration:none; }
.nav-cta { font-size:12px; font-weight:400; color:var(--color-link); padding:6px 16px; border-radius:980px; border:1px solid var(--color-link); transition:all var(--transition-fast); }
.nav-cta:hover { background:var(--color-link); color:#fff; text-decoration:none; }
.lang-switch { font-family:var(--font-stack); font-size:12px; font-weight:500; color:var(--color-text-secondary); background:transparent; border:1px solid var(--color-border-light); border-radius:980px; padding:5px 12px; cursor:pointer; transition:all var(--transition-fast); letter-spacing:0; }
.lang-switch:hover { color:var(--color-text); border-color:var(--color-border); background:rgba(255,255,255,0.04); }

/* Hero */
#hero { position:relative; padding-top:calc(var(--nav-height) + 60px); padding-bottom:60px; background:var(--color-bg); overflow:hidden; }
.hero-glow { position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle, rgba(41,151,255,0.12) 0%, rgba(100,210,255,0.05) 40%, transparent 70%); pointer-events:none; animation:glowPulse 6s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{opacity:0.8;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.08)} }
.hero-content { position:relative; max-width:var(--max-width); margin:0 auto; padding:0 24px; text-align:center; z-index:1; }
.hero-eyebrow { font-size:17px; font-weight:600; color:var(--color-link); letter-spacing:-0.022em; margin-bottom:4px; }
.hero-title { font-size:clamp(40px,7vw,56px); font-weight:700; line-height:1.07143; letter-spacing:-0.005em; margin-bottom:16px; background:linear-gradient(180deg,#f5f5f7 0%,#a1a1a6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:clamp(17px,2.5vw,21px); color:var(--color-text-secondary); max-width:540px; margin:0 auto 28px; line-height:1.381; font-weight:400; letter-spacing:.011em; }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }

/* Fan Carousel - 3D Cover Flow style */
.fan-carousel { margin:48px auto 0; max-width:900px; perspective:1200px; }
.fan-container { position:relative; height:420px; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; }
.fan-item { position:absolute; width:200px; transition:all 0.6s cubic-bezier(0.25,0.1,0.25,1); cursor:pointer; border-radius:20px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.fan-item img { width:100%; height:auto; display:block; pointer-events:none; }
.fan-item.active { transform:translateX(0) translateZ(100px) scale(1.1); z-index:10; box-shadow:0 16px 48px rgba(0,0,0,0.5), 0 0 60px rgba(41,151,255,0.15); }
.fan-item.prev-2 { transform:translateX(-320px) translateZ(-80px) rotateY(35deg) scale(0.85); opacity:0.4; z-index:1; }
.fan-item.prev-1 { transform:translateX(-180px) translateZ(-40px) rotateY(25deg) scale(0.92); opacity:0.6; z-index:3; }
.fan-item.next-1 { transform:translateX(180px) translateZ(-40px) rotateY(-25deg) scale(0.92); opacity:0.6; z-index:3; }
.fan-item.next-2 { transform:translateX(320px) translateZ(-80px) rotateY(-35deg) scale(0.85); opacity:0.4; z-index:1; }
.fan-item.hidden { transform:translateX(0) translateZ(-200px) scale(0.7); opacity:0; z-index:0; pointer-events:none; }
.fan-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.fan-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#f5f5f7; width:40px; height:40px; border-radius:50%; font-size:22px; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; padding:0; }
.fan-btn:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); }
.fan-dots { display:flex; gap:6px; }
.fan-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.3); border:none; cursor:pointer; transition:all 0.3s ease; padding:0; }
.fan-dot.active { background:#fff; width:20px; border-radius:3px; }

/* Features */
#features { padding:100px 0; background:var(--color-bg-alt); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.feature-card { background:var(--color-bg-card); border-radius:var(--radius-lg); padding:28px; border:1px solid var(--color-border-light); transition:all var(--transition-normal); }
.feature-card:hover { transform:translateY(-4px); background:var(--color-bg-card-hover); border-color:var(--color-border); box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.feature-icon { width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:color-mix(in srgb, var(--icon-color,var(--color-blue)) 15%, transparent); color:var(--icon-color,var(--color-blue)); }
.feature-icon svg { width:22px; height:22px; }
.feature-card h3 { font-size:17px; font-weight:600; letter-spacing:-0.022em; margin-bottom:6px; }
.feature-card p { font-size:14px; color:var(--color-text-secondary); line-height:1.42859; letter-spacing:-0.016em; }

/* Specs */
#specs { padding:100px 0; background:var(--color-bg); }
.specs-container { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.spec-group { background:var(--color-bg-card); border-radius:var(--radius-lg); border:1px solid var(--color-border-light); overflow:hidden; transition:all var(--transition-normal); }
.spec-group:hover { border-color:var(--color-border); background:var(--color-bg-card-hover); }
.spec-group-header { display:flex; align-items:center; gap:8px; padding:16px 20px; border-bottom:1px solid var(--color-border-light); font-size:14px; font-weight:600; letter-spacing:-0.016em; color:var(--color-text); }
.spec-group-header svg { color:var(--color-link); flex-shrink:0; }
.spec-items { padding:4px 0; }
.spec-row { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; gap:12px; }
.spec-row:not(:last-child) { border-bottom:1px solid rgba(255,255,255,0.03); }
.spec-label { font-size:14px; color:var(--color-text-secondary); letter-spacing:-0.016em; flex-shrink:0; }
.spec-value { font-size:14px; color:var(--color-text); font-weight:500; letter-spacing:-0.016em; text-align:right; }

/* Scenarios - no images, icon cards */
#scenarios { padding:100px 0; background:var(--color-bg-alt); }
.scenarios-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.scenario-card { background:var(--color-bg-card); border-radius:var(--radius-lg); border:1px solid var(--color-border-light); padding:32px 28px; text-align:center; transition:all var(--transition-normal); }
.scenario-card:hover { transform:translateY(-4px); background:var(--color-bg-card-hover); border-color:var(--color-border); box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.scenario-icon-wrap { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:color-mix(in srgb, var(--accent,var(--color-blue)) 15%, transparent); color:var(--accent,var(--color-blue)); }
.scenario-icon-wrap svg { width:26px; height:26px; }
.scenario-tag { display:inline-block; font-size:12px; font-weight:600; color:var(--color-link); letter-spacing:0; margin-bottom:6px; }
.scenario-card h3 { font-size:17px; font-weight:600; letter-spacing:-0.022em; margin-bottom:8px; }
.scenario-card p { font-size:14px; color:var(--color-text-secondary); line-height:1.42859; letter-spacing:-0.016em; }

/* Reviews */
#reviews { padding:100px 0; background:var(--color-bg); }
.reviews-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.review-en { display:none; }
[data-lang="en"] .review-zh { display:none; }
[data-lang="en"] .review-en { display:block; }
.review-card { background:var(--color-bg-card); border-radius:var(--radius-lg); padding:20px; border:1px solid var(--color-border-light); transition:all var(--transition-normal); }
.review-card:hover { border-color:var(--color-border); background:var(--color-bg-card-hover); }
.review-stars { display:flex; gap:2px; margin-bottom:10px; }
.review-text { font-size:14px; line-height:1.42859; letter-spacing:-0.016em; color:var(--color-text); margin-bottom:12px; }
.review-author { display:flex; align-items:center; gap:8px; }
.review-name { font-size:12px; font-weight:600; color:var(--color-text-secondary); letter-spacing:0; }
.review-date { font-size:11px; color:var(--color-text-tertiary); letter-spacing:0; }

/* CTA */
#cta { padding:100px 0; background:var(--color-bg-alt); position:relative; overflow:hidden; }
.cta-content { text-align:center; position:relative; z-index:1; }
.cta-trust { display:flex; justify-content:center; gap:32px; margin-top:32px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--color-text-tertiary); letter-spacing:0; }
.trust-item svg { color:var(--color-text-tertiary); }

/* Footer */
#footer { padding:40px 0; background:var(--color-bg); border-top:1px solid var(--color-border-light); }
.footer-grid { display:grid; grid-template-columns:1fr 2fr; gap:48px; margin-bottom:32px; }
.footer-brand { display:flex; flex-direction:column; gap:8px; }
.footer-logo-img { width:32px; height:32px; border-radius:8px; }
.footer-name { font-size:17px; font-weight:600; letter-spacing:-0.022em; }
.footer-tagline { font-size:12px; color:var(--color-text-tertiary); letter-spacing:0; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-col h4 { font-size:12px; font-weight:600; color:var(--color-text); letter-spacing:0; margin-bottom:10px; }
.footer-col a { display:block; font-size:12px; color:var(--color-text-secondary); letter-spacing:0; padding:3px 0; transition:color var(--transition-fast); }
.footer-col a:hover { color:var(--color-text); text-decoration:none; }
.footer-bottom { padding-top:20px; border-top:1px solid var(--color-border-light); }
.footer-bottom p { font-size:12px; color:var(--color-text-tertiary); letter-spacing:0; }

/* Responsive */
@media (max-width:1024px) {
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .specs-container { grid-template-columns:repeat(2,1fr); }
    .scenarios-grid { grid-template-columns:repeat(2,1fr); }
    .reviews-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    :root { --nav-height:44px; }
    .nav-links { display:none; }
    .features-grid,.specs-container,.scenarios-grid,.reviews-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:32px; }
    .footer-links { grid-template-columns:repeat(3,1fr); }
    .footer-bottom { text-align:center; }
    .hero-title { font-size:clamp(32px,8vw,44px); }
    .hero-actions { flex-direction:column; align-items:center; }
    .hero-actions .btn { width:100%; max-width:280px; }
    .fan-carousel { max-width:100%; }
    .fan-container { height:320px; }
    .fan-item { width:140px; }
    .fan-item.active { transform:translateX(0) translateZ(60px) scale(1.08); }
    .fan-item.prev-2 { transform:translateX(-200px) translateZ(-60px) rotateY(30deg) scale(0.8); }
    .fan-item.prev-1 { transform:translateX(-110px) translateZ(-30px) rotateY(20deg) scale(0.88); }
    .fan-item.next-1 { transform:translateX(110px) translateZ(-30px) rotateY(-20deg) scale(0.88); }
    .fan-item.next-2 { transform:translateX(200px) translateZ(-60px) rotateY(-30deg) scale(0.8); }
    .cta-trust { gap:20px; }
    section { padding:80px 0 !important; }
}
@media (max-width:480px) {
    .footer-links { grid-template-columns:1fr 1fr; }
    .spec-row { flex-direction:column; align-items:flex-start; gap:2px; }
    .spec-value { text-align:left; }
}