:root {
  --bg: #f5f6fa;
  --bg2: #ffffff;
  --bg3: #ffffff;
  --ink: #15171e;
  --ink2: #545a6b;
  --ink3: #9499aa;
  --accent: #ff3d67;
  --accent2: #ff7c54;
  --accent3: #00c9a7;
  --accent4: #7c6df0;
  --line: rgba(20,24,40,0.08);
  --line2: rgba(20,24,40,0.14);
  --grad: linear-gradient(120deg, #ff3d67, #ff7c54);
  --grad-cool: linear-gradient(120deg, #7c6df0, #00c9a7);
  --radius: 14px;
  --radius-lg: 22px;
  --max: 1180px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --shadow-sm: 0 6px 20px rgba(20,24,40,0.06);
  --shadow-md: 0 16px 40px rgba(20,24,40,0.10);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); -webkit-text-size-adjust:100%; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; background:linear-gradient(180deg,#f7f8fc 0%, #eef1f8 100%); background-attachment:fixed; color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button,input,select { font:inherit; }
button { border:0; background:none; cursor:pointer; color:inherit; }
i,em { font-style:normal; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ink3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink2); }

.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
@media (max-width:768px) { .container { padding:0 18px; } }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad); z-index:200; transition:width .12s linear; }

/* ============ SECTION ============ */
.section { padding:96px 0; }
@media (max-width:768px) { .section { padding:60px 0; } }
.section-head { text-align:center; margin-bottom:54px; }
.section-head .eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:3px; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:12px; }
.section-head h2 { font-size:clamp(26px,4.4vw,40px); font-weight:800; letter-spacing:-0.02em; margin-bottom:10px; color:var(--ink); }
.section-head p { color:var(--ink2); font-size:16px; max-width:480px; margin:0 auto; }

/* ============ BUTTONS ============ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; border-radius:999px; transition:all .25s var(--ease); white-space:nowrap; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(255,61,103,0.28); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,61,103,0.42); }
.btn-ghost { border:1px solid var(--line2); background:rgba(255,255,255,0.6); color:var(--ink); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px rgba(255,61,103,0.1); }
.btn-lg { padding:15px 32px; font-size:15px; }
.btn-md { padding:12px 26px; font-size:14px; }
.btn-sm { padding:9px 18px; font-size:13px; }

/* ============ TOPBAR ============ */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100; background:transparent; transition:background .3s var(--ease),box-shadow .3s var(--ease); }
.topbar.scrolled { background:rgba(255,255,255,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--line); }
.nav { display:flex; align-items:center; height:100%; gap:36px; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900; flex-shrink:0; color:var(--ink); }
.brand img { width:32px; height:32px; border-radius:9px; object-fit:contain; box-shadow:var(--shadow-sm); }
.brand em { color:var(--accent); }
.nav-links { display:flex; gap:4px; margin:0 auto; }
.nav-links a { padding:8px 16px; border-radius:10px; font-size:14px; font-weight:500; color:var(--ink2); transition:all .2s var(--ease); }
.nav-links a:hover { color:var(--ink); background:rgba(20,24,40,0.05); }
.nav-links a.active { color:var(--accent); background:rgba(255,61,103,0.08); }
.nav-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav-toggle { display:none; flex-direction:column; gap:5px; width:26px; padding:4px; }
.nav-toggle span { height:2px; background:var(--ink); border-radius:2px; transition:all .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:880px) {
  .nav-links { position:fixed; top:var(--nav-h); left:0; right:0; background:rgba(255,255,255,0.96); backdrop-filter:blur(20px); flex-direction:column; gap:0; padding:12px; border-bottom:1px solid var(--line); transform:translateY(-110%); opacity:0; transition:all .35s var(--ease); pointer-events:none; }
  .nav-links.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a { padding:14px 16px; font-size:15px; color:var(--ink); }
  .nav-toggle { display:flex; }
  .nav-actions .btn-sm { display:none; }
}

/* ============ HERO ============ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:104px 0 72px; }
.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bg-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(20,24,40,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,24,40,0.04) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%); }
.bg-mesh { position:absolute; inset:-25%; filter:blur(64px); background:radial-gradient(circle at 22% 32%, rgba(255,61,103,0.20), transparent 45%), radial-gradient(circle at 80% 68%, rgba(124,109,240,0.18), transparent 48%), radial-gradient(circle at 55% 52%, rgba(0,201,167,0.14), transparent 50%); animation:meshShift 18s ease-in-out infinite alternate; }
.bg-glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.6; }
.glow-a { width:520px; height:520px; top:-120px; right:-80px; background:radial-gradient(circle, rgba(255,61,103,0.30), transparent 70%); animation:drift 14s ease-in-out infinite; }
.glow-b { width:480px; height:480px; bottom:-140px; left:-120px; background:radial-gradient(circle, rgba(124,109,240,0.26), transparent 70%); animation:drift 18s ease-in-out infinite reverse; }
.glow-c { width:360px; height:360px; top:32%; left:42%; background:radial-gradient(circle, rgba(255,124,84,0.20), transparent 70%); animation:drift 16s ease-in-out infinite; }
.glow-d { width:300px; height:300px; bottom:8%; right:24%; background:radial-gradient(circle, rgba(0,201,167,0.18), transparent 70%); animation:drift 20s ease-in-out infinite reverse; }
@keyframes meshShift { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(3%,-2%) scale(1.06);} 100%{transform:translate(-2%,3%) scale(1.1);} }
@keyframes drift { 0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,-30px);} }
.hero-inner { position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 15px; border-radius:999px; font-size:12px; font-weight:600; background:rgba(255,61,103,0.1); color:var(--accent); border:1px solid rgba(255,61,103,0.22); margin-bottom:20px; }
.hero-copy h1 { font-size:clamp(38px,5.4vw,64px); font-weight:900; line-height:1.12; letter-spacing:-0.03em; margin-bottom:20px; color:var(--ink); }
.hero-copy h1 span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-lead { font-size:clamp(15px,1.5vw,18px); line-height:1.65; color:var(--ink2); max-width:480px; margin-bottom:30px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-stats { display:flex; gap:36px; }
.hero-stats li { position:relative; }
.hero-stats b { display:block; font-size:30px; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-0.02em; }
.hero-stats span { font-size:13px; color:var(--ink3); display:block; margin-top:3px; }
.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; will-change:transform; }
.phone-phone { position:relative; display:flex; justify-content:center; }

/* Premium phone mockup */
.phone-frame { position:relative; width:clamp(240px,50vw,300px); aspect-ratio:9/20; background:#0e1014; border-radius:44px; padding:10px; box-shadow:0 40px 90px rgba(255,61,103,0.22), 0 18px 40px rgba(20,24,40,0.18); animation:floatPhone 5s ease-in-out infinite; overflow:visible; }
.phone-frame .screen, .showcase-frame .swiper { width:100%; height:100%; border-radius:34px; overflow:hidden; position:relative; background:#000; }
.phone-frame .screen img { width:100%; height:100%; object-fit:cover; }
.dynamic-island { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:88px; height:22px; background:#0e1014; border-radius:14px; z-index:6; pointer-events:none; }
.phone-glare { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(150deg, rgba(255,255,255,0.20), transparent 42%); pointer-events:none; z-index:5; }
.phone-reflection { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); width:72%; height:36px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,61,103,0.28), transparent 70%); filter:blur(10px); z-index:-1; }
@keyframes floatPhone { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.float-chip { position:absolute; padding:9px 16px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border:1px solid var(--line); display:flex; align-items:center; gap:7px; box-shadow:var(--shadow-sm); animation:float 3.4s ease-in-out infinite; }
.chip-1 { top:10%; right:-8%; color:var(--accent); animation-delay:0s; }
.chip-2 { bottom:22%; left:-10%; color:var(--accent3); animation-delay:1.6s; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.scroll-hint { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); animation:bounce 2s infinite; }
.scroll-hint span { display:block; width:13px; height:13px; border-right:2px solid var(--ink3); border-bottom:2px solid var(--ink3); transform:rotate(45deg); }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);} }
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; gap:48px; text-align:center; }
  .hero-lead { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-stats { justify-content:center; }
  .float-chip { display:none; }
}
@media (max-width:480px) {
  .hero-stats { gap:22px; }
  .hero-stats b { font-size:24px; }
  .phone-frame { width:230px; border-radius:38px; padding:9px; }
  .phone-frame .screen, .showcase-frame .swiper { border-radius:30px; }
}

/* ============ TICKER ============ */
.ticker { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,0.6); padding:14px 0; }
.ticker-track { display:flex; gap:46px; width:max-content; animation:ticker 26s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track span { font-size:15px; font-weight:600; color:var(--ink2); position:relative; }
.ticker-track span::after { content:"✦"; position:absolute; right:-28px; color:var(--ink3); font-size:11px; }
@keyframes ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (max-width:768px) { .ticker-track { gap:32px; } .ticker-track span { font-size:13px; } }

/* ============ FEATURES ============ */
.features { background:var(--bg2); }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-card { background:var(--bg3); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 26px; transition:all .3s var(--ease); }
.feature-card:hover { transform:translateY(-6px); border-color:rgba(255,61,103,0.45); box-shadow:var(--shadow-md); }
.feature-icon { width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px; }
.i-pink { background:rgba(255,61,103,0.12); color:var(--accent); }
.i-orange { background:rgba(255,124,84,0.12); color:var(--accent2); }
.i-teal { background:rgba(0,201,167,0.12); color:var(--accent3); }
.i-violet { background:rgba(124,109,240,0.12); color:var(--accent4); }
.feature-card h3 { font-size:18px; font-weight:700; margin-bottom:9px; color:var(--ink); }
.feature-card p { color:var(--ink2); font-size:14px; line-height:1.65; }
@media (max-width:1024px) { .features-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .features-grid { grid-template-columns:1fr; } }

/* ============ SHOWCASE ============ */
.showcase { background:linear-gradient(180deg,#eef1f8 0%, #f5f6fa 100%); }
.showcase-stage { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.showcase-phone { display:flex; flex-direction:column; align-items:center; }
.showcase-frame { animation:floatPhone 5s ease-in-out infinite; }
.showcase-phone .swiper { width:100%; height:100%; border-radius:34px; overflow:hidden; }
.showcase-phone .swiper-wrapper { width:100%; height:100%; }
.showcase-phone .swiper-slide { width:100%; height:100%; position:relative; }
.showcase-phone .swiper-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.showcase-dots { display:flex; gap:8px; justify-content:center; margin-top:22px; }
.showcase-dots .dot { width:9px; height:9px; border-radius:50%; background:var(--ink3); opacity:0.5; transition:all .3s var(--ease); }
.showcase-dots .dot.active { background:var(--accent); opacity:1; width:22px; border-radius:5px; }
.showcase-caption .eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; display:block; }
.showcase-caption h3 { font-size:clamp(24px,3vw,30px); font-weight:800; margin-bottom:14px; letter-spacing:-0.02em; color:var(--ink); }
.showcase-caption > p { color:var(--ink2); font-size:15px; line-height:1.7; margin-bottom:22px; }
.showcase-caption ul { display:flex; flex-direction:column; gap:11px; }
.showcase-caption li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink2); }
.showcase-caption li i { color:var(--accent3); font-size:16px; }
@media (max-width:880px) {
  .showcase-stage { grid-template-columns:1fr; gap:44px; text-align:center; }
  .showcase-caption ul { align-items:center; }
}

/* ============ DOWNLOAD ============ */
.download { background:var(--bg); }
.download-inner { position:relative; background:var(--grad); border-radius:28px; padding:60px; display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; overflow:hidden; box-shadow:0 30px 70px rgba(255,61,103,0.25); }
.download-inner::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18), transparent 40%); pointer-events:none; }
.download-copy { position:relative; }
.download-copy .eyebrow { font-size:11px; font-weight:700; letter-spacing:3px; color:rgba(255,255,255,0.8); margin-bottom:10px; display:block; }
.download-copy h2 { font-size:clamp(26px,3.6vw,38px); font-weight:800; margin-bottom:12px; letter-spacing:-0.02em; color:#fff; }
.download-copy > p { color:rgba(255,255,255,0.88); font-size:15px; line-height:1.7; margin-bottom:26px; max-width:440px; }
.download-buttons { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.download-buttons .btn-primary { background:#fff; color:var(--accent); box-shadow:0 10px 26px rgba(20,24,40,0.18); }
.download-buttons .btn-primary:hover { box-shadow:0 16px 36px rgba(20,24,40,0.25); }
.download-buttons .btn-ghost { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.4); color:#fff; }
.download-buttons .btn-ghost:hover { background:rgba(255,255,255,0.22); border-color:#fff; box-shadow:none; }
.download-note { display:flex; gap:22px; flex-wrap:wrap; }
.download-note li { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.85); }
.download-note i { color:#fff; font-size:14px; }
.download-card { position:relative; background:#fff; border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; align-items:center; gap:14px; width:240px; box-shadow:var(--shadow-md); }
.qr-box { width:128px; height:128px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; border:1px solid #eee; }
.qr-box img { width:100%; height:100%; object-fit:contain; }
.download-card-copy { text-align:center; }
.download-card-copy .mini-logo img { width:34px; height:34px; border-radius:8px; margin:0 auto 8px; }
.download-card-copy h3 { font-size:18px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.download-card-copy p { font-size:12px; color:var(--ink3); margin-bottom:6px; }
.version { font-size:11px; font-weight:600; color:var(--accent); background:rgba(255,61,103,0.1); padding:3px 10px; border-radius:999px; }
@media (max-width:880px) {
  .download-inner { grid-template-columns:1fr; text-align:center; gap:40px; padding:40px 24px; }
  .download-copy > p { margin-left:auto; margin-right:auto; }
  .download-buttons { justify-content:center; }
  .download-note { justify-content:center; }
  .download-card { margin:0 auto; }
}

/* ============ FAQ ============ */
.faq { background:var(--bg2); }
.faq-inner { max-width:760px; }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--bg3); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.faq-item[open] { border-color:rgba(255,61,103,0.45); box-shadow:var(--shadow-sm); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink); -webkit-user-select:none; user-select:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary i { font-size:12px; color:var(--ink3); transition:transform .3s var(--ease); }
.faq-item[open] summary i { transform:rotate(180deg); }
.faq-answer { padding:0 22px 20px; }
.faq-answer p { color:var(--ink2); font-size:14px; line-height:1.75; }

/* ============ FOOTER ============ */
.footer { background:var(--bg3); border-top:1px solid var(--line); padding:56px 0 0; position:relative; }
.footer::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--grad); opacity:0.55; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-brand img { width:38px; height:38px; border-radius:9px; box-shadow:var(--shadow-sm); }
.footer-brand strong { display:block; font-size:16px; font-weight:800; color:var(--ink); }
.footer-brand span { font-size:12px; color:var(--ink3); }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a { font-size:14px; color:var(--ink2); transition:color .2s; }
.footer-links a:hover { color:var(--accent); }
.footer-social { display:flex; gap:14px; }
.footer-social a { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(20,24,40,0.05); color:var(--ink2); font-size:18px; transition:all .2s var(--ease); }
.footer-social a:hover { background:var(--grad); color:#fff; transform:translateY(-3px); }
.footer-bottom { margin-top:40px; padding:20px 0; border-top:1px solid var(--line); }
.footer-bottom p { text-align:center; font-size:12px; color:var(--ink3); }
@media (max-width:640px) {
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-links { justify-content:center; }
  .footer-social { justify-content:center; }
}