/* =============================================
   星途·强基AI - 设计系统 v3
   极致科技感 + 未来感 · 暗色主题
   Linear/Vercel/Stripe/OpenAI Inspired
   ============================================= */

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');

/* === CSS Variables === */
:root {
  --bg: #020617;
  --bg-card: rgba(15,23,42,.8);
  --bg-elevated: rgba(30,41,59,.6);
  --border: rgba(255,255,255,.06);
  --border-light: rgba(255,255,255,.04);
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #1d4ed8;
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-dark: #d97706;
  --success: #10b981;
  --success-light: #34d399;
  --text: rgba(255,255,255,.92);
  --text-secondary: rgba(255,255,255,.6);
  --text-muted: rgba(255,255,255,.38);
  --glass-bg: rgba(255,255,255,.03);
  --glass-border: rgba(255,255,255,.06);
  --glass-hover: rgba(255,255,255,.08);
  --glow-blue: rgba(59,130,246,.15);
  --glow-purple: rgba(139,92,246,.1);
  --glow-accent: rgba(245,158,11,.1);
  --font-serif: 'Space Grotesk', 'Noto Serif SC', serif;
  --font-sans: 'Inter', 'Noto Sans SC', sans-serif;
  --font-mono: 'SF Mono', 'Space Grotesk', 'Noto Sans SC', monospace;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --max-width: 1200px;
  --section-gap: 140px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  --shadow-xl: 0 16px 64px rgba(0,0,0,.6);
  --shadow-glow: 0 0 30px rgba(59,130,246,.15);
  --shadow-glow-lg: 0 0 60px rgba(59,130,246,.2);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --gray-100: rgba(255,255,255,.05);
  --gray-200: rgba(255,255,255,.08);
  --gray-300: rgba(255,255,255,.12);
  --gray-400: rgba(255,255,255,.2);
  --gray-500: rgba(255,255,255,.3);
  --gray-700: rgba(255,255,255,.6);
  --gray-900: rgba(255,255,255,.9);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);background:#020617;color:var(--text);line-height:1.7;min-height:100vh;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");background-size:256px 256px}
img{max-width:100%;height:auto}
a{color:var(--primary-light);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
@keyframes pageReveal{from{opacity:0;transform:scale(.98) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
body>*:first-child{animation:pageReveal .6s var(--ease-out) both}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.container-narrow{max-width:960px;margin:0 auto;padding:0 24px}

.section{padding:clamp(60px,10vw,var(--section-gap)) 0;position:relative}
.section::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;max-width:800px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent)}
.section-dark{background:rgba(15,23,42,.5);color:#fff;position:relative}
.section-dark::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.06),transparent 70%);pointer-events:none}
.section-accent{background:linear-gradient(180deg,rgba(30,27,75,.3),rgba(15,23,42,.4),rgba(30,27,75,.2));position:relative}
.section-accent::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,var(--glow-blue),transparent 60%),radial-gradient(ellipse at 80% 70%,var(--glow-purple),transparent 60%);pointer-events:none}
.section-title{font-family:var(--font-serif);font-size:clamp(28px,4vw,44px);font-weight:700;text-align:center;margin-bottom:16px;letter-spacing:-.5px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-subtitle{font-size:clamp(14px,1.5vw,17px);color:var(--text-secondary);text-align:center;max-width:600px;margin:0 auto 48px;line-height:1.8}
.section-dark .section-title{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.75));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-dark .section-subtitle{color:rgba(255,255,255,.55)}
.divider{width:60px;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--accent));margin:12px auto 0;border-radius:2px}
.badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;letter-spacing:.5px}
.badge-primary{background:rgba(245,158,11,.15);color:var(--accent-light)}
.badge-success{background:rgba(16,185,129,.15);color:var(--success-light)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:all .3s var(--ease);font-family:var(--font-sans);white-space:nowrap;text-decoration:none;position:relative}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 4px 20px rgba(59,130,246,.3)}
.btn-primary:hover{box-shadow:0 6px 30px rgba(59,130,246,.5),0 0 60px rgba(59,130,246,.15)}
.btn-secondary{background:var(--glass-bg);color:var(--text-secondary);border:1px solid var(--glass-border);backdrop-filter:blur(12px)}
.btn-secondary:hover{background:var(--glass-hover);color:var(--text);border-color:rgba(255,255,255,.12)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(12px)}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);box-shadow:0 0 20px rgba(255,255,255,.05)}
.btn-dark{background:linear-gradient(135deg,#1e293b,#334155);color:#fff;border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.btn-dark:hover{background:linear-gradient(135deg,#334155,#475569);box-shadow:0 6px 30px rgba(59,130,246,.2)}
.btn-lg{padding:16px 40px;font-size:17px;border-radius:var(--radius-lg)}
.btn-block{width:100%}
.btn-sm{padding:8px 18px;font-size:13px;border-radius:var(--radius-sm)}

.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow);border:1px solid var(--border);transition:all .4s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow),var(--shadow-lg);transform:translateY(-4px)}
.card-gold{border:1px solid rgba(245,158,11,.2);background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(245,158,11,.03))}
.card-gold:hover{border-color:var(--accent);box-shadow:0 8px 32px rgba(245,158,11,.15)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(59,130,246,.4)}50%{opacity:.85;box-shadow:0 0 0 10px rgba(59,130,246,0)}}
@keyframes pulse-subtle{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes slideDown{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
.animate-in{animation:fadeInUp .6s var(--ease) both}
.animate-in:nth-child(2){animation-delay:.1s}
.animate-in:nth-child(3){animation-delay:.2s}
.animate-in:nth-child(4){animation-delay:.3s}
.animate-in:nth-child(5){animation-delay:.4s}
.animate-in:nth-child(6){animation-delay:.5s}
.reveal{opacity:0;transform:translateY(30px);transition:all .7s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,.95);color:#fff;padding:12px 28px;border-radius:28px;font-size:14px;z-index:2000;animation:fadeInUp .3s var(--ease);pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);backdrop-filter:blur(20px)}
.back-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(15,23,42,.8);color:#fff;border:1px solid rgba(255,255,255,.1);font-size:18px;font-weight:700;cursor:pointer;z-index:999;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s,transform .2s;box-shadow:0 4px 16px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px)}
.back-to-top.visible{opacity:.85;visibility:visible}
.back-to-top.visible:hover{opacity:1;transform:translateY(-3px);border-color:rgba(59,130,246,.4);box-shadow:0 0 20px rgba(59,130,246,.2)}
.text-center{text-align:center}
.text-sm{font-size:13px;color:var(--text-muted)}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}

/* =============================================
   BRAND LOGO
   ============================================= */
.brand-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;vertical-align:middle}
.brand-logo svg{flex-shrink:0;display:block}
.brand-logo-text{font-family:var(--font-serif);font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.nav-brand .brand-logo-text{color:inherit}
.nav-brand .brand-logo svg{filter:drop-shadow(0 0 6px rgba(59,130,246,.4))}
.footer-logo .brand-logo-text{color:#fff}
.footer-logo .brand-logo svg{filter:drop-shadow(0 0 6px rgba(59,130,246,.3))}
.top-navbar .nav-logo .brand-logo-text{color:var(--primary-light)}
.top-navbar .nav-logo .brand-logo svg{filter:drop-shadow(0 0 4px rgba(59,130,246,.3))}
.login-logo .brand-logo-text{color:var(--accent-light)}
.login-logo .brand-logo svg{filter:drop-shadow(0 0 6px rgba(245,158,11,.4))}
.mp-logo-icon{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;font-size:28px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(7,193,96,.15);flex-shrink:0;backdrop-filter:blur(8px)}

/* =============================================
   INDEX PAGE - Hero Section
   ============================================= */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 15% 10%,rgba(59,130,246,.15) 0%,transparent 55%),radial-gradient(ellipse at 85% 75%,rgba(139,92,246,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 40%,rgba(59,130,246,.08) 0%,transparent 60%),radial-gradient(ellipse at 50% 90%,rgba(245,158,11,.05) 0%,transparent 50%),linear-gradient(180deg,#020617 0%,#0f172a 40%,#1e1b4b 100%);position:relative;overflow:hidden;text-align:center;color:#fff;padding:100px 24px}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(45deg,transparent 49.5%,rgba(255,255,255,.01) 49.5%,rgba(255,255,255,.01) 50.5%,transparent 50.5%);background-size:80px 80px,80px 80px,160px 160px;z-index:0;pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 50px,rgba(255,255,255,.02) 50px,rgba(255,255,255,.02) 51px),repeating-linear-gradient(90deg,transparent,transparent 150px,rgba(59,130,246,.02) 150px,rgba(59,130,246,.02) 151px);background-size:100% 51px,151px 100%;animation:dataFlow 6s linear infinite;z-index:0;pointer-events:none}
@keyframes dataFlow{from{background-position:0 0,0 0}to{background-position:0 51px,151px 0}}

.hero-geo{position:absolute;pointer-events:none;z-index:0}
.hero-geo-block{position:absolute;border:1px solid rgba(255,255,255,.03);background:rgba(255,255,255,.01);transform:rotate(45deg);pointer-events:none;z-index:0}
.hero-geo-lg{width:500px;height:500px;top:-120px;right:-100px}
.hero-geo-sm{width:280px;height:280px;bottom:-60px;left:-80px}
.hero-hex{position:absolute;width:160px;height:90px;pointer-events:none;z-index:0}
.hero-hex::before{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.03);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);background:rgba(255,255,255,.008)}
.hero-hex-1{top:8%;right:10%;transform:rotate(15deg)}
.hero-hex-2{bottom:22%;left:6%;transform:rotate(-10deg)}
.hero-hex-3{top:55%;right:22%;transform:rotate(25deg)}
.hero-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero-glow-1{width:400px;height:400px;top:-8%;left:8%;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);animation:glowRotate 20s linear infinite}
.hero-glow-2{width:280px;height:280px;bottom:12%;right:12%;background:radial-gradient(circle,rgba(139,92,246,.08) 0%,transparent 70%);animation:glowRotate 25s linear infinite reverse}
@keyframes glowRotate{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}

.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-particles::before{content:'';position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:40px 30px 0 rgba(255,255,255,.4),120px 60px 0 rgba(255,255,255,.35),200px 100px 0 rgba(255,255,255,.3),280px 40px 0 rgba(255,255,255,.45),350px 80px 0 rgba(255,255,255,.28),420px 150px 0 rgba(255,255,255,.35),500px 90px 0 rgba(255,255,255,.25),580px 200px 0 rgba(255,255,255,.3),650px 70px 0 rgba(255,255,255,.4),720px 180px 0 rgba(255,255,255,.22),800px 50px 0 rgba(255,255,255,.35),880px 160px 0 rgba(255,255,255,.28),940px 100px 0 rgba(255,255,255,.3),100px 200px 0 rgba(255,255,255,.25),180px 280px 0 rgba(255,255,255,.32),260px 220px 0 rgba(255,255,255,.2),340px 300px 0 rgba(255,255,255,.35),420px 350px 0 rgba(255,255,255,.28),500px 280px 0 rgba(255,255,255,.22),580px 380px 0 rgba(255,255,255,.3),660px 320px 0 rgba(255,255,255,.18),740px 420px 0 rgba(255,255,255,.25),820px 350px 0 rgba(255,255,255,.2),900px 400px 0 rgba(255,255,255,.28),60px 380px 0 rgba(255,255,255,.2),150px 450px 0 rgba(255,255,255,.22),250px 420px 0 rgba(255,255,255,.18),340px 500px 0 rgba(255,255,255,.25),440px 450px 0 rgba(255,255,255,.15),540px 520px 0 rgba(255,255,255,.2),640px 480px 0 rgba(255,255,255,.18),740px 540px 0 rgba(255,255,255,.12),840px 500px 0 rgba(255,255,255,.2),900px 480px 0 rgba(255,255,255,.15),70px 90px 0 rgba(59,130,246,.5),300px 130px 0 rgba(59,130,246,.4),520px 60px 0 rgba(59,130,246,.45),750px 140px 0 rgba(59,130,246,.35),880px 220px 0 rgba(59,130,246,.3),160px 320px 0 rgba(59,130,246,.35),400px 260px 0 rgba(59,130,246,.3),620px 370px 0 rgba(59,130,246,.28),800px 310px 0 rgba(59,130,246,.22),180px 480px 0 rgba(59,130,246,.25),500px 430px 0 rgba(59,130,246,.2),780px 460px 0 rgba(59,130,246,.18),130px 50px 0 rgba(139,92,246,.4),450px 110px 0 rgba(139,92,246,.35),680px 30px 0 rgba(139,92,246,.3),850px 110px 0 rgba(139,92,246,.25),220px 360px 0 rgba(139,92,246,.22),560px 410px 0 rgba(139,92,246,.18),720px 500px 0 rgba(139,92,246,.15),350px 550px 0 rgba(139,92,246,.15),90px 150px 0 rgba(245,158,11,.35),380px 170px 0 rgba(245,158,11,.28),600px 250px 0 rgba(245,158,11,.22),820px 270px 0 rgba(245,158,11,.18),140px 400px 0 rgba(245,158,11,.15),480px 370px 0 rgba(245,158,11,.12);animation:particleFloat 8s ease-in-out infinite}
.hero-particles::after{content:'';position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:50px 120px 0 rgba(255,255,255,.3),150px 70px 0 rgba(255,255,255,.35),280px 190px 0 rgba(255,255,255,.25),390px 70px 0 rgba(255,255,255,.3),510px 160px 0 rgba(255,255,255,.2),630px 100px 0 rgba(255,255,255,.28),760px 220px 0 rgba(255,255,255,.2),870px 80px 0 rgba(255,255,255,.25),110px 370px 0 rgba(255,255,255,.18),310px 440px 0 rgba(255,255,255,.22),470px 360px 0 rgba(255,255,255,.15),590px 440px 0 rgba(255,255,255,.2),710px 390px 0 rgba(255,255,255,.12),830px 460px 0 rgba(255,255,255,.18),44px 40px 0 rgba(59,130,246,.35),240px 20px 0 rgba(59,130,246,.3),690px 50px 0 rgba(139,92,246,.25),820px 140px 0 rgba(245,158,11,.2);animation:particleFloat 10s ease-in-out infinite .8s}
@keyframes particleFloat{0%,100%{transform:translateY(0) translateX(0)}25%{transform:translateY(-15px) translateX(5px)}50%{transform:translateY(-8px) translateX(-4px)}75%{transform:translateY(-20px) translateX(3px)}}

@media(max-width:768px){.hero-geo-lg{width:300px;height:300px;top:-80px;right:-60px}.hero-geo-sm{width:160px;height:160px;bottom:-40px;left:-40px}.hero-hex-1{width:100px;height:58px;top:5%;right:5%}.hero-hex-2{width:90px;height:52px;bottom:18%;left:3%}.hero-hex-3{width:80px;height:46px;top:45%;right:15%}.hero-glow-1{width:250px;height:250px}.hero-glow-2{width:160px;height:160px}}

.hero-content{position:relative;z-index:1;max-width:900px}
.hero h1{font-family:var(--font-serif);font-size:clamp(36px,7vw,72px);font-weight:700;line-height:1.15;margin-bottom:24px;letter-spacing:-1px;background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.85) 50%,rgba(147,197,253,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}
.hero .hero-subtitle{font-size:clamp(15px,2vw,20px);color:rgba(255,255,255,.65);margin-bottom:48px;line-height:1.8;font-weight:300}
.hero .hero-cta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;align-items:center}
.btn-accent{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 4px 24px rgba(245,158,11,.35)}
.btn-accent:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 8px 36px rgba(245,158,11,.5);transform:translateY(-2px) scale(1.02)}
.hero-link-more{color:rgba(255,255,255,.55);font-size:15px;font-weight:500;text-decoration:none;padding:8px 4px;transition:all .3s var(--ease);border-bottom:2px solid transparent}
.hero-link-more:hover{color:#fff;border-bottom-color:rgba(59,130,246,.5)}
.hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.hero-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:6px 16px;border-radius:20px;backdrop-filter:blur(8px)}
.hero-uni-line{font-size:11px;color:rgba(255,255,255,.2);letter-spacing:3px;margin-top:28px;font-weight:300}
.hero .hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);animation:pulse-subtle 2.5s ease-in-out infinite;z-index:1}
.hero .hero-scroll span{display:block;width:20px;height:20px;border-right:2px solid rgba(255,255,255,.4);border-bottom:2px solid rgba(255,255,255,.4);transform:rotate(45deg);transition:all .3s var(--ease)}
.hero .hero-scroll:hover span{border-color:rgba(255,255,255,.8)}


/* =============================================
   INDEX PAGE - Top Navigation Bar
   ============================================= */
.top-nav{position:sticky;top:0;z-index:1000;background:transparent;backdrop-filter:none;transition:all .35s var(--ease);padding:0 24px;border-bottom:1px solid transparent}
.top-nav.nav-fixed{background:rgba(2,6,23,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 1px 12px rgba(0,0,0,.3)}
.top-nav-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-brand{font-family:var(--font-serif);font-size:18px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.3px;transition:color .35s var(--ease)}
.top-nav.nav-fixed .nav-brand{color:rgba(255,255,255,.9)}
.top-nav-links{display:flex;align-items:center;gap:24px}
.top-nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s,text-shadow .2s}
.top-nav-links a:hover{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.3)}
.top-nav.nav-fixed .top-nav-links a{color:rgba(255,255,255,.65)}
.top-nav.nav-fixed .top-nav-links a:hover{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.3)}
.nav-cta-link{display:inline-flex;align-items:center;padding:6px 16px;border:1.5px solid rgba(255,255,255,.3);border-radius:var(--radius);font-weight:600;transition:all .2s}
.nav-cta-link:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.top-nav.nav-fixed .nav-cta-link{border-color:rgba(59,130,246,.4);color:rgba(255,255,255,.85)!important}
.top-nav.nav-fixed .nav-cta-link:hover{background:rgba(59,130,246,.1);border-color:var(--primary)}
.user-center-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 16px;border:1.5px solid rgba(255,255,255,.4);border-radius:20px;font-size:14px;font-weight:500;color:#fff;text-decoration:none;transition:all .2s}
.user-center-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.top-nav.nav-fixed .user-center-btn{color:rgba(255,255,255,.85)!important;border-color:rgba(59,130,246,.4)}
.top-nav.nav-fixed .user-center-btn:hover{background:rgba(59,130,246,.1)}
.nav-login-btn{display:inline-flex;align-items:center;padding:6px 16px;border:1.5px solid rgba(255,255,255,.4);border-radius:20px;font-size:14px;font-weight:500;color:#fff;text-decoration:none;transition:all .2s}
.nav-login-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.top-nav.nav-fixed .nav-login-btn{color:rgba(255,255,255,.85)!important;border-color:rgba(59,130,246,.4)}
.top-nav.nav-fixed .nav-login-btn:hover{background:rgba(59,130,246,.1)}

/* =============================================
   INDEX PAGE - Stats Cards
   ============================================= */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}
.stat-card{background:var(--bg-card);border:1px solid rgba(59,130,246,.15);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;transition:all .4s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(59,130,246,.05),transparent 70%);opacity:0;transition:opacity .4s}
.stat-card:hover::before{opacity:1}
.stat-card:hover{border-color:rgba(59,130,246,.4);box-shadow:var(--shadow-glow),var(--shadow-lg);transform:translateY(-4px)}
.stat-card .stat-num{font-family:var(--font-mono);font-size:clamp(36px,5vw,52px);font-weight:900;background:linear-gradient(135deg,var(--primary-light),var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:8px}
.stat-card .stat-label{font-size:15px;color:var(--text-secondary);font-weight:500}

/* =============================================
   Policy Text
   ============================================= */
.policy-text{background:rgba(59,130,246,.06);border-left:3px solid var(--primary);padding:24px 28px;border-radius:0 var(--radius) var(--radius) 0;max-width:800px;margin:32px auto 0;line-height:1.9;font-size:15px;color:var(--text-secondary)}

/* =============================================
   Process Steps
   ============================================= */
.process-steps{max-width:1000px;margin:0 auto}
.process-step-row{display:flex;justify-content:center;gap:0;margin-bottom:24px}
.process-step-row:last-child{margin-bottom:0}
@media(max-width:767px){.process-steps{display:flex;flex-direction:column;align-items:center;gap:16px}.process-step-row{flex-direction:column;align-items:center;gap:16px;margin-bottom:0}}
.process-step{flex:1;min-width:140px;text-align:center;padding:24px 16px;position:relative;transition:all .3s}
.process-step:hover{transform:translateY(-4px)}
.process-step .step-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 14px;background:var(--glass-bg);border:1px solid rgba(255,255,255,.06);transition:all .3s;backdrop-filter:blur(8px)}
.process-step:hover .step-icon{border-color:var(--primary);background:rgba(59,130,246,.08);box-shadow:0 0 20px rgba(59,130,246,.15)}
.process-step .step-num{position:absolute;top:8px;right:50%;transform:translateX(50%);width:26px;height:26px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:50%;font-size:12px;font-weight:700;line-height:26px;box-shadow:0 2px 8px rgba(59,130,246,.3);animation:pulse 2.5s ease-in-out infinite}
.process-step h4{font-family:var(--font-serif);font-size:16px;font-weight:700;margin-bottom:6px;color:var(--text)}
.process-step p{font-size:13px;color:var(--text-muted);line-height:1.5}
.process-arrow{display:flex;align-items:center;color:var(--primary-light);font-size:24px;flex-shrink:0;padding:0 4px}
@media(max-width:767px){.process-arrow{transform:rotate(90deg)}}

/* =============================================
   Advantage Cards
   ============================================= */
.advantage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
@media(max-width:900px){.advantage-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.advantage-grid{grid-template-columns:1fr}}
.advantage-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;border:1px solid var(--border);transition:all .4s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.advantage-card:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow),var(--shadow-lg);transform:translateY(-6px)}
.advantage-card .adv-icon{font-size:40px;margin-bottom:16px;display:block}
.advantage-card h4{font-family:var(--font-serif);font-size:17px;font-weight:700;margin-bottom:8px;color:var(--text)}
.advantage-card p{font-size:14px;color:var(--text-secondary);line-height:1.7}

/* =============================================
   Data Numbers
   ============================================= */
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:900px;margin:0 auto}
@media(max-width:768px){.data-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.data-grid{grid-template-columns:1fr}}
.data-item{text-align:center}
.data-item .data-num{font-family:var(--font-mono);font-size:clamp(42px,6vw,64px);font-weight:900;background:linear-gradient(135deg,var(--primary-light),var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.data-item .data-label{font-size:15px;color:var(--text-secondary);margin-top:8px;font-weight:500}
.data-note{text-align:center;font-size:11px;color:rgba(255,255,255,.2);margin-top:24px;font-style:italic}


/* =============================================
   FAQ
   ============================================= */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--bg-card);transition:all .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.faq-item.open{border-color:rgba(59,130,246,.4);box-shadow:var(--shadow-glow),var(--shadow)}
.faq-question{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;font-size:16px;font-family:var(--font-sans);color:var(--text);user-select:none;transition:color .2s}
.faq-question:hover{color:var(--primary-light)}
.faq-question .faq-arrow{font-size:14px;transition:transform .35s var(--ease);color:var(--text-muted)}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--primary)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .45s var(--ease),padding .45s}
.faq-item.open .faq-answer{max-height:300px;padding:0 24px 20px}
.faq-answer p{font-size:14px;color:var(--text-secondary);line-height:1.8}

/* =============================================
   Footer
   ============================================= */
.footer{background:#020617;color:rgba(255,255,255,.6);padding:60px 0 30px;border-top:1px solid rgba(255,255,255,.04);position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.15),transparent)}
.footer-logo{text-align:center;font-family:var(--font-serif);font-size:22px;font-weight:700;color:#fff;margin-bottom:32px;letter-spacing:-.3px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:var(--max-width);margin:0 auto;padding:0 24px}
@media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr);text-align:left}.footer-col:nth-child(3){grid-column:1 / -1;text-align:center}}
.footer-col h4{font-family:var(--font-serif);font-size:17px;font-weight:700;color:#fff;margin-bottom:16px}
.footer-col a{display:block;color:rgba(255,255,255,.5);font-size:14px;padding:4px 0;transition:color .2s}
.footer-col a:hover{color:var(--primary-light)}
.footer-bottom{text-align:center;padding-top:32px;margin-top:40px;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:rgba(255,255,255,.35)}
.footer-bottom .legal-links{margin-top:8px}
.footer-bottom .legal-links a{color:rgba(255,255,255,.35);font-size:12px;margin:0 10px;text-decoration:none;transition:color .2s}
.footer-bottom .legal-links a:hover{color:var(--primary-light)}

/* =============================================
   PRODUCT PAGE - Top Navbar
   ============================================= */
.top-navbar{background:rgba(2,6,23,.85);border-bottom:1px solid rgba(255,255,255,.06);padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 1px 12px rgba(0,0,0,.3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.top-navbar .nav-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px}
.top-navbar .nav-logo{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--primary-light);display:flex;align-items:center;gap:8px;text-decoration:none}
.top-navbar .nav-links{display:flex;align-items:center;gap:20px}
.top-navbar .nav-links a{font-size:14px;color:var(--text-secondary);font-weight:500;text-decoration:none;transition:color .2s}
.top-navbar .nav-links a:hover{color:var(--primary-light)}
.top-navbar .nav-links .nav-back{display:flex;align-items:center;gap:4px;color:var(--accent-light);font-weight:600}
.top-navbar .nav-links .nav-back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--primary-light);font-weight:600;font-size:13px;text-decoration:none;padding:6px 14px;border:1.5px solid rgba(59,130,246,.3);border-radius:var(--radius);transition:all .2s;background:rgba(59,130,246,.06)}
.top-navbar .nav-links .nav-back-btn:hover{background:rgba(59,130,246,.12);border-color:var(--primary);color:var(--primary-light)}
.top-navbar .nav-user{display:flex;align-items:center;gap:10px}
.top-navbar .nav-user .user-avatar{width:32px;height:32px;border-radius:50%;background:rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--primary-light)}
.top-navbar .nav-user .user-name{font-size:14px;font-weight:500;color:var(--text)}
.top-navbar .nav-user .btn-logout{font-size:12px;color:var(--text-muted);cursor:pointer;background:none;border:none;font-family:var(--font-sans);padding:4px 8px;transition:color .2s}
.top-navbar .nav-user .btn-logout:hover{color:#ef4444}


/* =============================================
   PRODUCT PAGE - App Header
   ============================================= */
.app-header{text-align:center;padding:24px 0 8px}
.app-header .logo{font-family:var(--font-serif);font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--primary-light),rgba(255,255,255,.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}
.app-header .subtitle{font-size:14px;color:var(--text-muted);margin-top:4px}
.app-header .badge{display:inline-block;margin-top:6px;font-size:12px;background:rgba(59,130,246,.12);color:var(--primary-light);padding:3px 12px;border-radius:12px}

/* =============================================
   PRODUCT PAGE - User Bar
   ============================================= */
.user-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border-radius:var(--radius);padding:10px 16px;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.user-bar-left{display:flex;align-items:center;gap:10px;cursor:pointer}
.user-bar-avatar{width:36px;height:36px;border-radius:50%;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--primary-light);flex-shrink:0}
.user-bar-info{line-height:1.3}
.user-bar-name{font-size:14px;font-weight:600;color:var(--text)}
.user-bar-kid{font-size:11px;color:var(--text-muted)}
.user-bar-right{display:flex;align-items:center;gap:8px}
.user-bar-right button{background:var(--gray-100);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;cursor:pointer;font-size:12px;font-family:var(--font-sans);color:var(--text-secondary);transition:all .2s;white-space:nowrap}
.user-bar-right button:hover{background:var(--gray-200);color:var(--text)}
.user-bar-right .btn-logout{color:#ef4444}
.user-bar-right .btn-logout:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}

/* =============================================
   PRODUCT PAGE - Step Indicator
   ============================================= */
.step-indicator-new{display:flex;justify-content:center;gap:0;margin:24px 0 36px;flex-wrap:wrap;position:sticky;top:66px;z-index:50;background:var(--bg);padding:8px 0;border-bottom:1px solid var(--border)}
.step-indicator-new .step-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;transition:all .3s var(--ease);flex-shrink:0;border:2px solid transparent;backdrop-filter:blur(8px)}
.step-indicator-new .step-dot.done{background:var(--success);color:#fff;border-color:var(--success)}
.step-indicator-new .step-dot.active{background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;border-color:var(--primary);box-shadow:0 0 0 5px rgba(59,130,246,.15);transform:scale(1.1)}
.step-indicator-new .step-dot.future{background:var(--gray-100);color:var(--text-muted);border-color:var(--border)}
.step-indicator-new .step-dot.locked{background:var(--gray-100);color:var(--text-muted);border-color:var(--border)}
.step-indicator-new .step-line{width:36px;height:2px;background:var(--border);margin:0 4px;flex-shrink:0}
.step-indicator-new .step-line.done{background:var(--success)}
.step-dot-label{font-size:10px;color:var(--text-muted);display:block;text-align:center;margin-top:2px}

/* =============================================
   PRODUCT PAGE - Login / KYC / Kids
   ============================================= */
.login-wrapper{max-width:420px;margin:40px auto 0;text-align:center}
.login-brand{margin-bottom:32px}
.login-brand .login-logo{font-family:var(--font-serif);font-size:36px;font-weight:900;color:var(--accent-light);letter-spacing:-.5px;margin-bottom:8px}
.login-brand .login-sub{font-size:14px;color:var(--text-muted)}
.login-tabs{display:flex;gap:0;margin-bottom:28px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.login-tab{flex:1;padding:12px 0;font-size:15px;font-weight:500;cursor:pointer;background:var(--bg-card);color:var(--text-muted);border:none;font-family:var(--font-sans);transition:all .2s;backdrop-filter:blur(8px)}
.login-tab.active{background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff}
.login-tab:first-child{border-right:1px solid var(--border)}
.login-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-lg);border:1px solid var(--border);text-align:left;animation:fadeInUp .4s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.login-footer-info{margin-top:20px;text-align:center;font-size:12px;color:var(--text-muted)}

/* WeChat QR */
.wechat-qr-wrap{text-align:center;padding:16px 0}
.qr-box{width:180px;height:180px;margin:0 auto 16px;background:rgba(255,255,255,.03);border:2px solid var(--border);border-radius:var(--radius);position:relative;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;overflow:hidden;backdrop-filter:blur(8px)}
.qr-box:hover{border-color:var(--accent);box-shadow:0 0 20px rgba(245,158,11,.1)}
.qr-box.scanned{border-color:var(--success)}
.qr-box .qr-pattern{position:absolute;inset:0}
.qr-pattern-inner{width:100%;height:100%;position:relative}
.qr-corner{position:absolute;width:36px;height:36px;border:5px solid rgba(255,255,255,.6);background:rgba(2,6,23,.5)}
.qr-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none}
.qr-corner.tr{top:12px;right:12px;border-left:none;border-bottom:none}
.qr-corner.bl{bottom:12px;left:12px;border-right:none;border-top:none}
.qr-dots{position:absolute;inset:16px 40px 40px 16px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px}
.qr-dot{background:rgba(255,255,255,.3);border-radius:2px}
.qr-dot.empty{background:transparent}
.qr-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:rgba(2,6,23,.8);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px}
.qr-check{position:absolute;font-size:48px;color:var(--success);animation:bounce .5s var(--ease);z-index:2}
.qr-label{font-size:13px;color:var(--text-muted);margin-top:8px}
.qr-scanned-text{font-size:14px;color:var(--success);font-weight:600;margin-top:8px;animation:fadeInUp .3s}

/* Phone Input */
.phone-input-group{margin-bottom:16px}
.phone-input-group label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}
.phone-input-row{display:flex;gap:10px}
.phone-input-row input{flex:1;padding:12px 14px;border:2px solid var(--border);border-radius:var(--radius);font-size:15px;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);transition:border-color .2s}
.phone-input-row input:focus{border-color:var(--primary);outline:none}
.phone-input-row .btn-send-code{padding:12px 16px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-family:var(--font-sans);white-space:nowrap;transition:all .2s;min-width:110px}
.phone-input-row .btn-send-code:hover{box-shadow:0 4px 16px rgba(59,130,246,.3)}
.phone-input-row .btn-send-code:disabled{background:var(--gray-200);cursor:not-allowed;box-shadow:none}
.login-phone-btn{display:block;width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .2s;margin-top:8px}
.login-phone-btn:hover{box-shadow:0 4px 20px rgba(59,130,246,.3);transform:translateY(-1px)}
.login-phone-btn:disabled{background:var(--gray-200);cursor:not-allowed;transform:none;box-shadow:none}
.verify-code-wrap{margin-bottom:16px}
.verify-code-wrap label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}
.verify-code-wrap input{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:var(--radius);font-size:15px;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);text-align:center;letter-spacing:6px;transition:border-color .2s}
.verify-code-wrap input:focus{border-color:var(--primary);outline:none}


/* =============================================
   PRODUCT PAGE - KYC
   ============================================= */
.kyc-wrapper{max-width:560px;margin:30px auto 0}
.kyc-title{text-align:center;margin-bottom:24px}
.kyc-title h2{font-family:var(--font-serif);font-size:26px;font-weight:700;margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kyc-title p{font-size:14px;color:var(--text-muted)}
.kyc-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-lg);border:1px solid var(--border);animation:fadeInUp .4s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.kyc-card .form-section-title{font-size:13px;color:var(--primary-light);font-weight:600;letter-spacing:.5px;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid rgba(59,130,246,.12)}
.kyc-radio-group{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.kyc-radio{flex:1;min-width:80px;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;font-size:14px;font-weight:500;background:var(--bg-card);transition:all .2s;color:var(--text-secondary);font-family:var(--font-sans)}
.kyc-radio:hover{border-color:var(--accent)}
.kyc-radio.selected{border-color:var(--primary);background:rgba(59,130,246,.1);color:var(--primary-light);font-weight:600}
.kyc-back-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;font-family:var(--font-sans);margin-bottom:12px;padding:4px 0;transition:color .2s}
.kyc-back-btn:hover{color:var(--text-secondary)}

/* =============================================
   PRODUCT PAGE - Kids Management
   ============================================= */
.kids-wrap{max-width:680px;margin:20px auto 0}
.kids-header{text-align:center;margin-bottom:24px}
.kids-header h2{font-family:var(--font-serif);font-size:26px;font-weight:700;margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kids-header p{font-size:14px;color:var(--text-muted)}
.kid-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:12px;transition:all .3s;display:flex;align-items:center;gap:14px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.kid-card:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow)}
.kid-card.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.kid-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.kid-avatar.boy{background:rgba(59,130,246,.15);color:var(--primary-light)}
.kid-avatar.girl{background:rgba(236,72,153,.15);color:#ec4899}
.kid-avatar.unknown{background:var(--gray-100);color:var(--text-muted)}
.kid-info{flex:1;min-width:0}
.kid-info .kid-name{font-size:16px;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:6px;color:var(--text)}
.kid-info .kid-name .active-badge{background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:500}
.kid-info .kid-meta{font-size:13px;color:var(--text-muted)}
.kid-info .kid-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.kid-info .kid-tag{background:rgba(59,130,246,.1);color:var(--primary-light);padding:2px 8px;border-radius:8px;font-size:11px}
.kid-card-actions{display:flex;gap:6px;flex-shrink:0}
.kid-card-actions button{background:var(--gray-100);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;cursor:pointer;font-size:13px;transition:all .2s;font-family:var(--font-sans);color:var(--text-secondary)}
.kid-card-actions button:hover{background:var(--gray-200);color:var(--text)}
.kid-card-actions .btn-delete:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#ef4444}
.add-kid-btn{display:block;width:100%;padding:16px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:transparent;color:var(--text-muted);font-size:15px;font-weight:500;cursor:pointer;transition:all .2s;font-family:var(--font-sans);text-align:center;margin-top:8px}
.add-kid-btn:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(59,130,246,.05)}

/* Kid Modal */
.kid-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s;backdrop-filter:blur(4px)}
.kid-modal{background:var(--bg-card);border-radius:var(--radius-lg);padding:28px 24px;max-width:460px;width:90%;box-shadow:var(--shadow-xl);animation:fadeInUp .3s;max-height:85vh;overflow-y:auto;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.kid-modal h3{font-family:var(--font-serif);font-size:20px;text-align:center;margin-bottom:20px;color:var(--text)}
.kid-modal .form-group{margin-bottom:14px}
.kid-modal .form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--text-secondary)}
.kid-modal .form-group input,.kid-modal .form-group select,.kid-modal .form-group textarea{width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:var(--radius);font-size:14px;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);transition:border-color .2s}
.kid-modal .form-group input:focus,.kid-modal .form-group select:focus,.kid-modal .form-group textarea:focus{border-color:var(--primary);outline:none}
.kid-modal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kid-modal .btn-row{display:flex;gap:10px;margin-top:16px}
.kid-modal .btn-row button{flex:1;padding:12px;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .2s}
.kid-modal .btn-save{background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff}
.kid-modal .btn-save:hover{box-shadow:0 4px 16px rgba(59,130,246,.3)}
.kid-modal .btn-cancel{background:var(--gray-100);color:var(--text-secondary)}
.kid-modal .btn-cancel:hover{background:var(--gray-200)}
.enter-main-btn{display:block;width:100%;padding:16px;background:linear-gradient(135deg,var(--success),#059669);color:#fff;border:none;border-radius:var(--radius-lg);font-size:17px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .2s;margin-top:16px}
.enter-main-btn:hover{box-shadow:0 4px 20px rgba(16,185,129,.3);transform:translateY(-1px)}
.enter-main-btn:disabled{background:var(--gray-200);cursor:not-allowed;transform:none;box-shadow:none}

/* Switch Kid Modal */
.switch-kid-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s;backdrop-filter:blur(4px)}
.switch-kid-modal{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;max-width:360px;width:90%;box-shadow:var(--shadow-xl);animation:fadeInUp .3s;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.switch-kid-modal h4{font-family:var(--font-serif);font-size:17px;text-align:center;margin-bottom:14px;color:var(--text)}
.switch-kid-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-bottom:8px;transition:all .2s;background:var(--bg-card)}
.switch-kid-item:hover{border-color:var(--accent);background:rgba(245,158,11,.05)}
.switch-kid-item.selected{border-color:var(--primary);background:rgba(59,130,246,.08)}
.switch-kid-close{display:block;margin:12px auto 0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;font-family:var(--font-sans)}


/* =============================================
   PRODUCT PAGE - Step Content
   ============================================= */
.step-content{animation:fadeInUp .4s var(--ease)}
.step-title{font-family:var(--font-serif);font-size:24px;font-weight:700;text-align:center;margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.step-desc{text-align:center;color:var(--text-muted);font-size:14px;margin-bottom:24px}
.card{margin-bottom:16px}
.quiz-progress{text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:16px}
.quiz-progress span{color:var(--accent-light);font-weight:700}
.quiz-question{font-family:var(--font-serif);font-size:18px;font-weight:600;margin-bottom:16px;text-align:center;color:var(--text)}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{display:block;width:100%;padding:14px 18px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-card);cursor:pointer;font-size:15px;text-align:left;transition:all .2s;font-family:var(--font-sans);color:var(--text-secondary)}
.quiz-option:hover{border-color:var(--accent);background:rgba(245,158,11,.05)}
.quiz-option.selected{border-color:var(--primary);background:rgba(59,130,246,.08);font-weight:500;color:var(--primary-light)}
.quiz-option:disabled{cursor:default;opacity:.5}

/* Result */
.result-card{text-align:center}
.result-score{font-family:var(--font-serif);font-size:56px;font-weight:900;background:linear-gradient(135deg,var(--accent-light),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.result-score-label{color:var(--text-muted);font-size:14px}
.result-level{display:inline-block;padding:6px 20px;border-radius:20px;font-size:16px;font-weight:600;margin:12px 0}
.result-level.star{background:rgba(245,158,11,.15);color:var(--accent-light)}
.result-level.good{background:rgba(16,185,129,.15);color:var(--success-light)}
.result-level.space{background:rgba(59,130,246,.1);color:var(--primary-light)}
.result-level.guide{background:var(--gray-100);color:var(--text-secondary)}
.result-dims{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:16px 0}
.result-dim{text-align:center}
.result-dim-value{font-size:22px;font-weight:700;color:var(--accent-light)}
.result-dim-label{font-size:12px;color:var(--text-muted)}
.radar-svg{display:block;margin:16px auto}

/* Interest Grid */
.interest-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.interest-grid{grid-template-columns:1fr 1fr}}
.interest-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:16px 14px;transition:all .3s}
.interest-card.checked{border-color:var(--primary);background:rgba(59,130,246,.05)}
.interest-card h4{font-family:var(--font-serif);font-size:16px;margin-bottom:8px;color:var(--text)}
.interest-signal{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--text-secondary);cursor:pointer}
.interest-signal input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px}
.interest-bar-wrap{margin-top:8px;background:var(--gray-100);border-radius:6px;height:8px;overflow:hidden}
.interest-bar{height:100%;border-radius:6px;transition:width .4s}
.interest-count{font-size:12px;color:var(--text-muted);text-align:right;margin-top:2px}

/* Bar Chart */
.bar-chart{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.bar-item{display:flex;align-items:center;gap:12px}
.bar-label{width:100px;font-size:13px;text-align:right;flex-shrink:0;color:var(--text-secondary)}
.bar-track{flex:1;background:var(--gray-100);border-radius:6px;height:24px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:8px;font-size:12px;font-weight:600;color:#fff;transition:width .6s;min-width:30px}

/* Direction Cards */
.dir-card{border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:all .3s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dir-card:hover{border-color:rgba(59,130,246,.2)}
.dir-card-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:16px 20px;background:var(--gray-100)}
.dir-card-header h3{font-family:var(--font-serif);font-size:17px;color:var(--text)}
.dir-card-header .arrow{font-size:18px;transition:transform .3s;color:var(--text-muted)}
.dir-card-header .arrow.open{transform:rotate(180deg)}
.dir-card-body{max-height:0;overflow:hidden;transition:max-height .4s,padding .4s}
.dir-card-body.open{max-height:900px;padding:16px 20px 20px}
.dir-section{margin-bottom:14px}
.dir-section h5{font-size:12px;color:var(--primary-light);margin-bottom:4px;letter-spacing:.5px;font-weight:600}
.dir-roadmap{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.dir-roadmap-stage{background:rgba(59,130,246,.1);padding:5px 10px;border-radius:16px;font-size:12px;color:var(--primary-light);font-weight:500}
.dir-roadmap-arrow{color:var(--border);font-size:14px;margin:0 2px}

/* Tags */
.tag{display:inline-block;background:var(--gray-100);padding:3px 10px;border-radius:10px;font-size:12px;margin:2px;color:var(--text-secondary)}
.tag.accent{background:rgba(245,158,11,.1);color:var(--accent-light)}

/* Form */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:var(--radius);font-size:15px;font-family:var(--font-sans);background:var(--bg-card);color:var(--text);transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);outline:none}
.form-row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.form-row{grid-template-columns:1fr 1fr}}

/* Matrix */
.matrix-wrap{overflow-x:auto;margin:16px 0}
.matrix-table{width:100%;border-collapse:collapse;font-size:13px}
.matrix-table th,.matrix-table td{padding:10px 8px;text-align:center;border:1px solid var(--border)}
.matrix-table th{background:var(--gray-100);font-weight:600;color:var(--text-secondary);font-size:12px}
.matrix-table td.current-stage{background:rgba(59,130,246,.08)}
.matrix-cell{width:54px;height:34px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;transition:all .3s}
.matrix-cell.l0{background:rgba(255,255,255,.03);color:var(--text-muted);border:1px solid var(--border)}
.matrix-cell.l1{background:rgba(59,130,246,.15);color:var(--primary-light)}
.matrix-cell.l2{background:rgba(59,130,246,.35);color:#fff}
.matrix-cell.l3{background:var(--primary);color:#fff}

/* Paywall */
.paywall-card{border:2px dashed rgba(245,158,11,.3);background:rgba(245,158,11,.04);text-align:center;padding:32px 24px;border-radius:var(--radius-lg);margin-top:16px}
.paywall-card h3{font-family:var(--font-serif);font-size:20px;margin-bottom:8px;color:var(--accent-light)}
.paywall-card .price-tag{font-family:var(--font-serif);font-size:40px;font-weight:900;color:var(--accent)}
.paywall-card .features{display:inline-block;text-align:left;margin:16px 0}
.paywall-card .features li{list-style:none;font-size:14px;color:var(--text-secondary);padding:4px 0}
.paywall-card .features li::before{content:'✅ '}


/* Brief Plan */
.brief-plan{background:var(--gray-100);border-radius:var(--radius);padding:20px;margin-top:16px}
.brief-plan h4{font-family:var(--font-serif);margin-bottom:12px;color:var(--primary-light)}
.brief-goal{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:14px}
.brief-goal-num{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.brief-goal p{color:var(--text-secondary)}

/* Locked */
.locked-wrap{position:relative;overflow:hidden}
.locked-content{filter:blur(6px);opacity:.4;pointer-events:none;user-select:none}
.locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;backdrop-filter:blur(2px)}
.locked-badge{font-size:40px;margin-bottom:8px}
.locked-msg{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px}
.locked-sub{font-size:13px;color:var(--text-muted);margin-bottom:16px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s;backdrop-filter:blur(4px)}
.modal-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:var(--shadow-xl);animation:fadeInUp .3s;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.modal-card h3{font-family:var(--font-serif);font-size:22px;margin-bottom:8px;color:var(--text)}
.modal-price{font-family:var(--font-serif);font-size:48px;font-weight:900;color:var(--accent);margin:12px 0}
.modal-features{text-align:left;margin:16px 0;font-size:14px;color:var(--text-secondary)}
.modal-features li{list-style:none;padding:4px 0}
.modal-features li::before{content:'✅ '}
.pay-btns{display:flex;gap:12px;margin-top:20px}
.pay-btn{flex:1;padding:14px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-card);cursor:pointer;font-size:15px;font-weight:600;transition:all .2s;font-family:var(--font-sans)}
.pay-btn:hover{border-color:var(--accent);background:rgba(245,158,11,.05)}
.pay-btn.wechat{color:#10b981;border-color:#10b981}
.pay-btn.wechat:hover{background:rgba(16,185,129,.08)}
.pay-btn.alipay{color:#3b82f6;border-color:#3b82f6}
.pay-btn.alipay:hover{background:rgba(59,130,246,.08)}
.modal-close-btn{display:block;margin:12px auto 0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;font-family:var(--font-sans)}
.modal-close-btn:hover{color:var(--text-secondary)}
.pay-loading{display:flex;flex-direction:column;align-items:center;gap:12px}
.pay-success-icon{font-size:56px;animation:bounce .6s}

/* Bottom Nav */
.bottom-nav{display:flex;justify-content:center;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}

/* PDF Button */
.pdf-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--success),#059669);color:#fff;padding:12px 24px;border-radius:var(--radius);cursor:pointer;font-weight:600;font-size:15px;border:none;font-family:var(--font-sans);transition:all .2s}
.pdf-btn:hover{box-shadow:0 4px 20px rgba(16,185,129,.3);transform:translateY(-1px)}

/* Plan Sections */
.plan-section{margin-bottom:20px}
.plan-section h4{font-family:var(--font-serif);font-size:17px;color:var(--primary-light);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid rgba(59,130,246,.12)}
.plan-stage{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:8px}
.plan-stage h5{font-family:var(--font-serif);font-size:15px;margin-bottom:6px;color:var(--text)}
.plan-stage ul{padding-left:18px}
.plan-stage li{font-size:13px;color:var(--text-secondary);margin-bottom:3px}

/* Policy Box */
.policy-box{background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.12);border-radius:var(--radius);padding:16px;margin-top:12px}
.policy-box h5{color:var(--primary-light);margin-bottom:8px;font-size:14px}
.policy-box p,.policy-box li{font-size:13px;color:var(--text-secondary)}

/* School Card */
.school-card{border-left:3px solid var(--primary);background:var(--bg-card);padding:14px 16px;margin-bottom:10px;border-radius:0 var(--radius) var(--radius) 0}
.school-card h4{font-family:var(--font-serif);margin-bottom:4px;font-size:15px;color:var(--text)}
.school-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* Coach Grid */
.coach-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:600px){.coach-grid{grid-template-columns:repeat(3,1fr)}}
.coach-card{text-align:center;padding:24px 16px;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .3s}
.coach-card:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow)}
.coach-card .coach-icon{font-size:40px;margin-bottom:8px}
.coach-card h4{font-family:var(--font-serif);font-size:16px;margin-bottom:6px;color:var(--text)}
.coach-card p{font-size:13px;color:var(--text-muted)}

/* Calendar */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px;max-width:320px;margin-left:auto;margin-right:auto}
.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:11px;font-weight:500}
.calendar-day.checked{background:var(--success);color:#fff}
.calendar-day.unchecked{background:var(--gray-100);color:var(--text-muted)}
.calendar-day.header{font-weight:700;color:var(--text-muted);font-size:10px;background:none}

/* Resource Link */
.resource-link{display:inline-flex;align-items:center;gap:4px;color:var(--primary-light);text-decoration:none;font-size:13px;font-weight:500;padding:4px 10px;background:rgba(59,130,246,.08);border-radius:12px;margin:2px}
.resource-link:hover{background:rgba(59,130,246,.15);color:var(--primary-light)}

/* Price Select */
.price-select-row{display:flex;gap:12px;margin:16px 0}
.price-card{flex:1;border:2px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;cursor:pointer;transition:all .3s;position:relative;background:var(--bg-card)}
.price-card:hover{border-color:var(--accent)}
.price-card.selected{border-color:var(--primary);background:rgba(59,130,246,.06);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.price-card.recommended{border-color:var(--accent);background:rgba(245,158,11,.04)}
.price-card-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:11px;font-weight:700;padding:2px 12px;border-radius:10px}
.price-card-header{font-size:13px;color:var(--text-muted);margin-bottom:4px}
.price-card-price{font-family:var(--font-serif);font-size:28px;font-weight:900;color:var(--accent)}
.price-card-unit{font-size:13px;color:var(--text-muted);font-weight:400}
.price-card-desc{font-size:12px;color:var(--text-muted);margin-top:4px}

/* Trial Badge */
.trial-badge-modal{display:inline-block;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;font-size:13px;font-weight:700;padding:4px 16px;border-radius:16px;margin-bottom:8px;animation:pulse 2s infinite}
.btn-trial{background:linear-gradient(135deg,#ef4444,#f97316)!important;color:#fff!important;font-weight:700}
.btn-trial:hover{box-shadow:0 6px 24px rgba(239,68,68,.4)!important;transform:translateY(-2px)!important}

/* Share Button */
.share-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:12px 24px;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(99,102,241,.4)}


/* Poster Modal */
.poster-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1001;animation:fadeIn .2s;backdrop-filter:blur(4px)}
.poster-modal{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;max-width:420px;width:90%;box-shadow:var(--shadow-xl);animation:fadeInUp .3s;text-align:center;max-height:90vh;overflow-y:auto;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.poster-modal h4{font-family:var(--font-serif);font-size:18px;margin-bottom:12px;color:var(--text)}
.poster-canvas-wrap{margin:12px 0;display:flex;justify-content:center}
.poster-canvas-wrap canvas{border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:100%;height:auto}
.poster-actions{display:flex;gap:10px;margin-top:16px}
.poster-actions button{flex:1;padding:12px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .2s}
.btn-save-poster{background:linear-gradient(135deg,var(--success),#059669);color:#fff}
.btn-save-poster:hover{box-shadow:0 4px 16px rgba(16,185,129,.3)}

/* WeChat MP Card */
.wechat-mp-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(15,23,42,.6));border:1px solid rgba(16,185,129,.15);border-radius:var(--radius);padding:16px;margin:12px 0}
.wechat-mp-qr{width:60px;height:60px;border-radius:8px;border:1px solid rgba(16,185,129,.3);display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(255,255,255,.03);flex-shrink:0}
.wechat-mp-info{flex:1}
.wechat-mp-name{font-weight:700;color:#10b981;font-size:14px;margin-bottom:2px}
.wechat-mp-desc{font-size:12px;color:var(--text-muted)}

/* Community Card */
.community-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(245,158,11,.04),rgba(15,23,42,.6));border:1px solid rgba(245,158,11,.2);border-radius:var(--radius);padding:16px;margin:12px 0}
.community-qr{width:60px;height:60px;border-radius:8px;border:1px solid rgba(245,158,11,.3);display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(255,255,255,.03);flex-shrink:0}

/* Daily Question */
.daily-question-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1001;animation:fadeIn .2s;backdrop-filter:blur(4px)}
.daily-question-modal{background:var(--bg-card);border-radius:var(--radius-lg);padding:28px 24px;max-width:480px;width:90%;box-shadow:var(--shadow-xl);animation:fadeInUp .3s;border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.daily-question-modal h4{font-family:var(--font-serif);font-size:18px;margin-bottom:16px;color:var(--primary-light)}
.daily-question-modal .question-text{font-size:16px;font-weight:600;margin-bottom:16px;line-height:1.8;color:var(--text)}
.daily-question-modal .answer-input{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:var(--radius);font-size:16px;font-family:var(--font-sans);margin-bottom:12px;transition:border-color .2s;background:var(--bg-card);color:var(--text)}
.daily-question-modal .answer-input:focus{border-color:var(--primary);outline:none}
.daily-question-modal .answer-feedback{padding:12px;border-radius:var(--radius);margin:8px 0;font-size:14px;display:none}
.daily-question-modal .answer-feedback.correct{background:rgba(16,185,129,.1);color:var(--success-light);display:block}
.daily-question-modal .answer-feedback.wrong{background:rgba(239,68,68,.1);color:#ef4444;display:block}
.daily-question-btn-row{display:flex;gap:8px;margin-top:12px}

/* Countdown */
.countdown-card{background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(59,130,246,.02));border:1px solid rgba(59,130,246,.1);border-radius:var(--radius);padding:16px;text-align:center;margin-bottom:12px}
.countdown-card h5{font-family:var(--font-serif);color:var(--primary-light);margin-bottom:8px}
.countdown-days{font-family:var(--font-serif);font-size:36px;font-weight:900;color:var(--accent)}
.countdown-label{font-size:13px;color:var(--text-muted)}

/* Plan Table */
.plan-table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.plan-table th,.plan-table td{padding:8px 10px;text-align:left;border:1px solid var(--border)}
.plan-table th{background:var(--gray-100);font-weight:600;color:var(--text-secondary);font-size:12px}

/* Compare Table */
.compare-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.compare-table th,.compare-table td{padding:8px 10px;text-align:center;border:1px solid var(--border)}
.compare-table th{background:var(--gray-100);font-weight:600;color:var(--text-secondary);font-size:12px}
.compare-bar-track{height:8px;background:var(--gray-100);border-radius:4px;overflow:hidden;width:100%}
.compare-bar-fill{height:100%;border-radius:4px;transition:width .4s}

/* Home Return Link */
.home-return-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:10px 24px;background:var(--gray-100);color:var(--primary-light);border-radius:var(--radius);font-size:14px;font-weight:600;text-decoration:none;transition:all .2s;border:1px solid var(--border)}
.home-return-link:hover{background:rgba(59,130,246,.1);border-color:var(--primary);transform:translateY(-1px)}

/* Legal Footer */
.legal-footer{text-align:center;padding:12px 16px;margin-top:8px}
.legal-footer a{color:var(--text-muted);font-size:12px;text-decoration:none;margin:0 8px;transition:color .2s}
.legal-footer a:hover{color:var(--accent-light)}
.legal-footer .legal-disclaimer{display:block;font-size:11px;color:var(--text-muted);margin-top:6px}

/* Time Estimate */
.time-estimate{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,.08);color:var(--success-light);padding:6px 14px;border-radius:16px;font-size:13px;font-weight:600;margin-top:8px}
.time-estimate .clock-icon{font-size:16px}

/* =============================================
   INDEX PAGE - About Section
   ============================================= */
.about-text{max-width:760px;margin:32px auto 0;font-size:16px;line-height:2;color:var(--text-secondary);text-align:center;padding:0 16px}

/* =============================================
   RESPONSIVE (Top Nav adjustments)
   ============================================= */
@media(max-width:768px){
  .top-nav-links{gap:12px}
  .top-nav-links a{font-size:12px}
  .nav-cta-link,.user-center-btn,.nav-login-btn{padding:4px 10px;font-size:12px}
  .nav-brand{font-size:15px}
}
@media(max-width:480px){
  .top-nav-links{gap:6px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .top-nav-links a{font-size:11px}
  .top-nav-inner{height:48px}
  .nav-brand{font-size:14px;flex-shrink:0}
}

/* =============================================
   RESPONSIVE (base)
   ============================================= */
@media(max-width:768px){
  .hero h1{font-size:28px}
  .hero .hero-subtitle{font-size:14px}
  .hero .hero-cta{flex-direction:column;align-items:center}
  .section{padding:48px 0}
  .app-header .logo{font-size:22px}
  .step-title{font-size:20px}
  .step-dot{width:30px;height:30px;font-size:12px}
  .modal-card{padding:24px}
  .matrix-table{font-size:11px}
  .matrix-table th,.matrix-table td{padding:6px 4px}
  .kid-card-actions{flex-direction:column}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .hero{padding:60px 16px}
}


/* =============================================
   核心能力矩阵 (Capabilities)
   ============================================= */
.cap-tabs{display:flex;justify-content:center;gap:12px;margin-bottom:40px;flex-wrap:wrap}
.cap-tab{padding:10px 28px;border:1px solid var(--border);border-radius:100px;background:var(--bg-card);font-size:15px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .25s var(--ease);font-family:var(--font-sans);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cap-tab:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(59,130,246,.05)}
.cap-tab.active{background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;border-color:transparent;box-shadow:0 4px 20px rgba(59,130,246,.3)}

.cap-panel{display:none}
.cap-panel.active{display:block;animation:fadeInUp .5s var(--ease) both}

.cap-group{margin-bottom:40px}
.cap-group:last-child{margin-bottom:0}
.cap-group-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.cap-group-header h3{font-family:var(--font-serif);font-size:20px;color:var(--primary-light);margin:0}

.cap-badge{display:inline-flex;align-items:center;padding:4px 14px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.5px;font-family:var(--font-sans)}
.cap-badge-p0{background:rgba(16,185,129,.12);color:#34d399}
.cap-badge-p1{background:rgba(59,130,246,.12);color:#60a5fa}
.cap-badge-p2{background:rgba(139,92,246,.12);color:#a78bfa}

.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all .3s var(--ease);position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cap-item:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
.cap-icon{font-size:24px;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--gray-100);border-radius:10px}
.cap-body{flex:1;min-width:0}
.cap-body h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px;font-family:var(--font-sans)}
.cap-body p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:0}

.cap-prio{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;margin-top:6px;letter-spacing:.5px}
.cap-prio-p1{background:rgba(59,130,246,.12);color:#60a5fa}
.cap-prio-p2{background:rgba(139,92,246,.12);color:#a78bfa}

.api-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.api-card{padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;transition:all .3s var(--ease);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.api-card:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow),var(--shadow-lg);transform:translateY(-4px)}
.api-icon{font-size:36px;margin-bottom:12px}
.api-card h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 8px;font-family:var(--font-sans)}
.api-card p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin:0 0 14px}
.api-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 12px;border-radius:100px;background:var(--gray-100);color:var(--text-muted)}
.api-tag-builtin{background:rgba(16,185,129,.1);color:#34d399}

/* =============================================
   客户群体 (Customers)
   ============================================= */
.customer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.customer-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .4s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.customer-card:hover{border-color:rgba(59,130,246,.3);box-shadow:var(--shadow-glow),var(--shadow-lg);transform:translateY(-4px)}
.customer-card-inner{padding:32px 24px;text-align:center}
.customer-icon-wrap{width:72px;height:72px;margin:0 auto 16px;background:linear-gradient(135deg,var(--primary),#6366f1);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(59,130,246,.2)}
.customer-icon{font-size:32px;filter:brightness(1.2)}
.customer-card h3{font-family:var(--font-serif);font-size:20px;font-weight:700;color:var(--text);margin:0 0 4px}
.customer-role{font-size:13px;color:var(--accent-light);font-weight:600;margin:0 0 20px;letter-spacing:1px;text-transform:uppercase}
.customer-features{text-align:left;margin-bottom:20px}
.customer-feature{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.customer-feature:last-child{border-bottom:none}
.cf-icon{font-size:20px;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--gray-100);border-radius:8px}
.customer-feature strong{display:block;font-size:13px;color:var(--text);margin-bottom:2px}
.customer-feature p{font-size:12px;color:var(--text-muted);margin:0;line-height:1.5}
.customer-products{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cp-tag{display:inline-block;padding:4px 10px;font-size:11px;font-weight:600;border-radius:100px;background:rgba(59,130,246,.1);color:var(--primary-light)}
.cp-tag-b{background:rgba(245,158,11,.1);color:var(--accent-light)}
.cp-tag-api{background:rgba(139,92,246,.1);color:#a78bfa}

/* =============================================
   能力矩阵 & 客户群体 - 响应式
   ============================================= */
@media(max-width:900px){
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .customer-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto}
}
@media(max-width:600px){
  .cap-grid{grid-template-columns:1fr}
  .api-grid{grid-template-columns:1fr}
  .cap-tabs{gap:8px}
  .cap-tab{padding:8px 18px;font-size:13px}
  .cap-group-header h3{font-size:17px}
}

/* =============================================
   THEME TOGGLE BUTTON
   ============================================= */
.theme-toggle-btn{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .25s var(--ease);flex-shrink:0;padding:0;line-height:1}
.theme-toggle-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:scale(1.1)}
.top-nav.nav-fixed .theme-toggle-btn{border-color:rgba(255,255,255,.12)}

/* =============================================
   LIGHT THEME - CSS Variables Override
   ============================================= */
body[data-theme="light"] {
  --bg: #ffffff;
  --bg-card: rgba(255,255,255,.9);
  --bg-elevated: rgba(248,248,248,.9);
  --border: rgba(0,0,0,.08);
  --border-light: rgba(0,0,0,.04);
  --primary: #1a3a5c;
  --primary-light: #2d5f8a;
  --primary-dark: #0f2440;
  --accent: #c9a84c;
  --accent-light: #d4b96a;
  --accent-dark: #a88a2e;
  --success: #10b981;
  --success-light: #34d399;
  --text: rgba(0,0,0,.87);
  --text-secondary: rgba(0,0,0,.6);
  --text-muted: rgba(0,0,0,.4);
  --glass-bg: rgba(0,0,0,.02);
  --glass-border: rgba(0,0,0,.06);
  --glass-hover: rgba(0,0,0,.05);
  --glow-blue: rgba(26,58,92,.08);
  --glow-purple: rgba(139,92,246,.05);
  --glow-accent: rgba(201,168,76,.08);
  --gray-100: rgba(0,0,0,.03);
  --gray-200: rgba(0,0,0,.06);
  --gray-300: rgba(0,0,0,.1);
  --gray-400: rgba(0,0,0,.15);
  --gray-500: rgba(0,0,0,.25);
  --gray-700: rgba(0,0,0,.55);
  --gray-900: rgba(0,0,0,.85);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
  --shadow-xl: 0 16px 64px rgba(0,0,0,.12);
  --shadow-glow: 0 0 30px rgba(26,58,92,.1);
  --shadow-glow-lg: 0 0 60px rgba(26,58,92,.15);
}

body[data-theme="light"] { background: #ffffff; }
body[data-theme="light"]::before { opacity: 0; }

/* Light theme overrides */
body[data-theme="light"] .section-accent { background: linear-gradient(180deg, #f8f6f0, #fafaf9, #f8f6f0); }
body[data-theme="light"] .section-accent::before { background: radial-gradient(ellipse at 20% 30%, rgba(26,58,92,.05), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,168,76,.03), transparent 60%); }
body[data-theme="light"] .hero { background: radial-gradient(ellipse at 15% 10%, rgba(26,58,92,.08) 0%, transparent 55%), radial-gradient(ellipse at 85% 75%, rgba(201,168,76,.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 40%, rgba(26,58,92,.04) 0%, transparent 60%), linear-gradient(180deg, #f0f4f8 0%, #ffffff 40%, #f8f6f0 100%); color: #1a3a5c; }
body[data-theme="light"] .hero::before { background-image: linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), linear-gradient(90deg,rgba(0,0,0,.02) 1px, transparent 1px); }
body[data-theme="light"] .hero::after { background: repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(26,58,92,.015) 50px, rgba(26,58,92,.015) 51px); }
body[data-theme="light"] .hero .hero-subtitle { color: rgba(0,0,0,.55); }
body[data-theme="light"] .hero h1 { background: linear-gradient(180deg, #1a3a5c 0%, #2d5f8a 50%, #c9a84c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body[data-theme="light"] .hero-geo-block { border-color: rgba(0,0,0,.04); background: rgba(0,0,0,.01); }
body[data-theme="light"] .hero-hex::before { border-color: rgba(0,0,0,.04); background: rgba(0,0,0,.005); }
body[data-theme="light"] .hero-link-more { color: rgba(0,0,0,.45); }
body[data-theme="light"] .hero-link-more:hover { color: #1a3a5c; border-bottom-color: rgba(26,58,92,.4); }
body[data-theme="light"] .hero-badge { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); color: rgba(0,0,0,.5); }
body[data-theme="light"] .hero-uni-line { color: rgba(0,0,0,.15); }
body[data-theme="light"] .hero .hero-scroll span { border-color: rgba(0,0,0,.3); }
body[data-theme="light"] .hero .hero-scroll:hover span { border-color: rgba(0,0,0,.6); }
body[data-theme="light"] .hero-glow { opacity: .6; }
body[data-theme="light"] .hero-glow-1 { background: radial-gradient(circle, rgba(26,58,92,.05) 0%, transparent 70%); }
body[data-theme="light"] .hero-glow-2 { background: radial-gradient(circle, rgba(201,168,76,.04) 0%, transparent 70%); }
body[data-theme="light"] .hero-particles::before { opacity: .2; }
body[data-theme="light"] .hero-particles::after { opacity: .15; }
body[data-theme="light"] .top-nav { background: transparent; }
body[data-theme="light"] .top-nav.nav-fixed { background: rgba(255,255,255,.8); border-bottom-color: rgba(0,0,0,.06); box-shadow: 0 1px 12px rgba(0,0,0,.05); }
body[data-theme="light"] .nav-brand { color: #1a3a5c; }
body[data-theme="light"] .top-nav.nav-fixed .nav-brand { color: #1a3a5c; }
body[data-theme="light"] .top-nav-links a { color: rgba(0,0,0,.65); }
body[data-theme="light"] .top-nav-links a:hover { color: #1a3a5c; text-shadow: none; }
body[data-theme="light"] .top-nav.nav-fixed .top-nav-links a { color: rgba(0,0,0,.55); }
body[data-theme="light"] .top-nav.nav-fixed .top-nav-links a:hover { color: #1a3a5c; text-shadow: none; }
body[data-theme="light"] .nav-cta-link { border-color: rgba(0,0,0,.25); color: #1a3a5c !important; }
body[data-theme="light"] .nav-cta-link:hover { background: rgba(26,58,92,.06); border-color: #1a3a5c; }
body[data-theme="light"] .top-nav.nav-fixed .nav-cta-link { border-color: rgba(26,58,92,.3); }
body[data-theme="light"] .top-nav.nav-fixed .nav-cta-link:hover { background: rgba(26,58,92,.08); }
body[data-theme="light"] .user-center-btn, body[data-theme="light"] .nav-login-btn { border-color: rgba(0,0,0,.3); color: #1a3a5c !important; }
body[data-theme="light"] .user-center-btn:hover, body[data-theme="light"] .nav-login-btn:hover { background: rgba(26,58,92,.08); border-color: #1a3a5c; }
body[data-theme="light"] .top-nav.nav-fixed .user-center-btn, body[data-theme="light"] .top-nav.nav-fixed .nav-login-btn { border-color: rgba(26,58,92,.3); }
body[data-theme="light"] .theme-toggle-btn { border-color: rgba(0,0,0,.15); }
body[data-theme="light"] .theme-toggle-btn:hover { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.25); }
body[data-theme="light"] .section-title { background: linear-gradient(180deg, #1a3a5c, #2d5f8a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body[data-theme="light"] .stat-card { border-color: rgba(26,58,92,.1); }
body[data-theme="light"] .stat-card::before { background: radial-gradient(ellipse at 50% 50%, rgba(26,58,92,.03), transparent 70%); }
body[data-theme="light"] .stat-card:hover { border-color: rgba(26,58,92,.3); box-shadow: 0 0 30px rgba(26,58,92,.08), 0 8px 32px rgba(0,0,0,.08); }
body[data-theme="light"] .stat-card .stat-num { background: linear-gradient(135deg, #1a3a5c, #c9a84c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body[data-theme="light"] .policy-text { background: rgba(26,58,92,.04); border-left-color: #1a3a5c; }
body[data-theme="light"] .btn-accent { background: linear-gradient(135deg, #c9a84c, #a88a2e); }
body[data-theme="light"] .btn-accent:hover { background: linear-gradient(135deg, #d4b96a, #c9a84c); }
body[data-theme="light"] .btn-primary { background: linear-gradient(135deg, #1a3a5c, #2d5f8a); }
body[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 30px rgba(26,58,92,.3); }
body[data-theme="light"] .btn-dark { background: linear-gradient(135deg, #e8e8e8, #d0d0d0); color: #1a3a5c; border-color: rgba(0,0,0,.08); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
body[data-theme="light"] .btn-dark:hover { background: linear-gradient(135deg, #dcdcdc, #c5c5c5); box-shadow: 0 6px 30px rgba(26,58,92,.1); }
body[data-theme="light"] .section-dark { background: rgba(248,248,248,.5); color: #1a3a5c; }
body[data-theme="light"] .section-dark::before { background: radial-gradient(ellipse at 50% 0%, rgba(26,58,92,.03), transparent 70%); }
body[data-theme="light"] .section-dark .section-title { background: linear-gradient(180deg, #1a3a5c, #2d5f8a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body[data-theme="light"] .footer { background: #f0f0f0; border-top-color: rgba(0,0,0,.06); color: rgba(0,0,0,.55); }
body[data-theme="light"] .footer::before { background: linear-gradient(90deg, transparent, rgba(26,58,92,.1), transparent); }
body[data-theme="light"] .footer-col h4 { color: #1a3a5c; }
body[data-theme="light"] .footer-col a { color: rgba(0,0,0,.45); }
body[data-theme="light"] .footer-col a:hover { color: #1a3a5c; }
body[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,.06); color: rgba(0,0,0,.35); }
body[data-theme="light"] .footer-bottom .legal-links a { color: rgba(0,0,0,.35); }
body[data-theme="light"] .footer-bottom .legal-links a:hover { color: #1a3a5c; }
body[data-theme="light"] .back-to-top { background: rgba(255,255,255,.85); color: #1a3a5c; border-color: rgba(0,0,0,.1); }
body[data-theme="light"] .toast { background: rgba(255,255,255,.95); color: #1a3a5c; border-color: rgba(0,0,0,.06); }
body[data-theme="light"] .faq-item { background: rgba(255,255,255,.8); }
body[data-theme="light"] .top-navbar { background: rgba(255,255,255,.85); border-bottom-color: rgba(0,0,0,.06); box-shadow: 0 1px 12px rgba(0,0,0,.05); }
body[data-theme="light"] .top-navbar .nav-logo { color: #1a3a5c; }
body[data-theme="light"] .top-navbar .nav-links a { color: rgba(0,0,0,.55); }
body[data-theme="light"] .top-navbar .nav-links a:hover { color: #1a3a5c; }
body[data-theme="light"] .top-navbar .nav-links .nav-back-btn { border-color: rgba(26,58,92,.2); color: #1a3a5c; background: rgba(26,58,92,.04); }
body[data-theme="light"] .app-header .logo { background: linear-gradient(135deg, #1a3a5c, rgba(0,0,0,.7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body[data-theme="light"] .app-header .badge { background: rgba(26,58,92,.08); color: #1a3a5c; }
body[data-theme="light"] .user-bar { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.06); }
body[data-theme="light"] .user-bar-avatar { background: rgba(26,58,92,.08); color: #1a3a5c; }
body[data-theme="light"] .user-bar-right button { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); color: rgba(0,0,0,.55); }
body[data-theme="light"] .user-bar-right button:hover { background: rgba(0,0,0,.06); color: #1a3a5c; }
body[data-theme="light"] .card { background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.06); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
body[data-theme="light"] .card:hover { border-color: rgba(26,58,92,.2); box-shadow: 0 0 20px rgba(26,58,92,.06); }

/* =============================================
   PROCESS STEPS V2 (Index Page)
   ============================================= */
.process-steps-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1050px;margin:0 auto}
@media(max-width:767px){.process-steps-v2{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:480px){.process-steps-v2{grid-template-columns:1fr;max-width:340px}}

.process-card{text-align:center;padding:36px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .4s var(--ease);cursor:default;position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.process-card:hover{transform:translateY(-6px);box-shadow:0 0 40px rgba(59,130,246,.12),0 8px 32px rgba(0,0,0,.15);border-color:rgba(59,130,246,.3)}
.process-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(ellipse at 50% 30%,rgba(59,130,246,.06),transparent 70%)}
.process-card:hover::before{opacity:1}

.process-card-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:36px;position:relative;z-index:1;transition:all .3s var(--ease)}
.process-card:hover .process-card-icon{transform:scale(1.08);box-shadow:0 0 24px rgba(59,130,246,.2)}

.process-icon-g1{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(99,102,241,.1));border:1px solid rgba(59,130,246,.2)}
.process-icon-g2{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(52,211,153,.1));border:1px solid rgba(16,185,129,.2)}
.process-icon-g3{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(251,191,36,.1));border:1px solid rgba(245,158,11,.2)}
.process-icon-g4{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(167,139,250,.1));border:1px solid rgba(139,92,246,.2)}
.process-icon-g5{background:linear-gradient(135deg,rgba(236,72,153,.15),rgba(244,114,182,.1));border:1px solid rgba(236,72,153,.2)}
.process-icon-g6{background:linear-gradient(135deg,rgba(20,184,166,.15),rgba(45,212,191,.1));border:1px solid rgba(20,184,166,.2)}

.process-card h4{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--text);margin-bottom:10px;position:relative;z-index:1}
.process-card p{font-size:14px;color:var(--text-secondary);line-height:1.7;max-width:240px;margin:0 auto;position:relative;z-index:1}

/* =============================================
   STEP INDICATOR V2 - Wide Cards (Product Page)
   ============================================= */
.step-cards-v2{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;-webkit-overflow-scrolling:touch;margin:24px 0 36px}
.step-cards-v2::-webkit-scrollbar{height:4px}
.step-cards-v2::-webkit-scrollbar-track{background:transparent}
.step-cards-v2::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.step-card-v2{flex:0 0 160px;min-width:140px;padding:16px 12px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--bg-card);text-align:center;cursor:pointer;transition:all .3s var(--ease);position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.step-card-v2:hover{border-color:rgba(59,130,246,.3);transform:translateY(-2px)}
.step-card-v2 .step-card-icon{display:block;font-size:28px;margin-bottom:6px}
.step-card-v2 .step-card-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.step-card-v2 .step-card-check{position:absolute;top:6px;right:8px;font-size:14px;color:var(--success)}
.step-card-v2 .step-card-lock{position:absolute;top:6px;right:8px;font-size:14px}

.step-card-v2.active{border-color:var(--primary);background:rgba(59,130,246,.08);box-shadow:0 0 20px rgba(59,130,246,.15),0 0 0 3px rgba(59,130,246,.06)}
.step-card-v2.active .step-card-label{color:var(--primary-light)}
.step-card-v2.done{border-color:var(--success);background:rgba(16,185,129,.04)}
.step-card-v2.done .step-card-label{color:var(--success)}
.step-card-v2.locked{border-color:var(--border);opacity:.55}
.step-card-v2.future{border-color:var(--border);opacity:.6}

@media(max-width:768px){.step-card-v2{flex:0 0 130px;min-width:110px;padding:12px 8px}.step-card-v2 .step-card-icon{font-size:22px}}

/* =============================================
   MAIN LAYOUT WITH SIDEBAR (Product Page)
   ============================================= */
.main-layout{display:flex;gap:24px;margin-top:16px}

.sidebar{flex:0 0 220px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);align-self:flex-start;position:sticky;top:74px;transition:all .3s}
.sidebar-header{display:none;padding:14px 16px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);user-select:none}
.sidebar-toggle-icon{font-size:12px;transition:transform .3s}
.sidebar-open .sidebar-toggle-icon{transform:rotate(180deg)}
.sidebar-body{padding:20px 16px}

.sidebar-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(99,102,241,.06));display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 12px;border:2px solid rgba(59,130,246,.15)}
.sidebar-name{font-family:var(--font-serif);font-size:18px;font-weight:700;text-align:center;color:var(--text);margin-bottom:4px}
.sidebar-realname{font-size:12px;color:var(--text-muted);text-align:center;margin-bottom:8px}
.sidebar-meta{display:flex;flex-direction:column;gap:4px;text-align:center;margin-bottom:20px;font-size:13px;color:var(--text-secondary)}
.sidebar-meta span{display:block}

.sidebar-menu{margin-top:8px}
.sidebar-menu-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;margin-top:20px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.sidebar-menu-title:first-child{margin-top:0}
.sidebar-progress{margin-bottom:16px}
.sidebar-progress-bar{height:8px;background:var(--gray-100);border-radius:4px;overflow:hidden;margin-bottom:6px}
.sidebar-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:4px;transition:width .5s var(--ease)}
.sidebar-progress span{font-size:13px;color:var(--text-secondary);font-weight:500}

.sidebar-menu-list{list-style:none;padding:0;margin:0}
.sidebar-menu-item{padding:4px 0}
.sidebar-menu-item a{display:block;padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);text-decoration:none;transition:all .2s;font-weight:500}
.sidebar-menu-item a:hover{background:var(--gray-100);color:var(--primary-light)}
.sidebar-menu-item.active a{background:rgba(59,130,246,.1);color:var(--primary-light);font-weight:600}
.sidebar-menu-item .text-muted{font-size:12px;color:var(--text-muted);padding:8px 10px;display:block;opacity:.5}

.main-content{flex:1;min-width:0}

/* Mobile sidebar */
@media(max-width:768px){
  .main-layout{flex-direction:column;gap:12px}
  .sidebar{flex:0 0 auto;position:static;border-radius:var(--radius)}
  .sidebar-header{display:flex}
  .sidebar-body{display:none;padding:16px}
  .sidebar-open .sidebar-body{display:block}
  .sidebar-avatar{width:56px;height:56px;font-size:28px}
}

/* =============================================
   ENHANCED RESULT - Dimension Readings
   ============================================= */
.result-dim-readings{max-width:520px;margin:16px auto;text-align:left}
.dim-reading{margin-bottom:12px;padding:10px 14px;background:var(--gray-100);border-radius:var(--radius);border:1px solid transparent;transition:border-color .2s}
.dim-reading:hover{border-color:rgba(59,130,246,.15)}
.dim-reading-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dim-reading-name{font-size:14px;font-weight:700;color:var(--text)}
.dim-reading-score{font-size:13px;font-weight:700;color:var(--accent-light)}
.dim-reading-bar{height:8px;background:var(--gray-200);border-radius:4px;overflow:hidden;margin-bottom:6px}
.dim-reading-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;transition:width .6s var(--ease);min-width:4px}
.dim-reading-desc{font-size:12px;color:var(--text-muted);line-height:1.5}

/* Next Steps Box */
.next-steps-box{background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(16,185,129,.04));border:1px solid rgba(59,130,246,.12);border-radius:var(--radius);padding:20px;margin-top:16px;text-align:left}
.next-steps-box h4{font-family:var(--font-serif);font-size:16px;color:var(--primary-light);margin-bottom:12px}
.next-steps-box ul{padding-left:20px}
.next-steps-box li{font-size:14px;color:var(--text-secondary);margin-bottom:6px;line-height:1.6}
.next-steps-box li::marker{color:var(--accent)}

/* =============================================
   HISTORY REPORTS
   ============================================= */
.report-list{display:flex;flex-direction:column;gap:10px}
.report-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s}
.report-card:hover{border-color:rgba(59,130,246,.2);box-shadow:var(--shadow-glow)}
.report-card-header{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;transition:background .2s}
.report-card-header:hover{background:var(--gray-100)}
.report-card-left{flex:1;min-width:0}
.report-date{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.report-kid-name{font-size:12px;color:var(--text-muted)}
.report-card-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.report-score{font-size:20px;font-weight:900;color:var(--accent);font-family:var(--font-serif)}
.report-level-badge{font-size:12px;color:var(--text-secondary);background:var(--gray-100);padding:3px 10px;border-radius:12px;white-space:nowrap}
.report-arrow{font-size:14px;color:var(--text-muted);transition:transform .3s;flex-shrink:0}
.report-arrow.open{transform:rotate(180deg)}
.report-card-body{padding:0 18px 16px;border-top:1px solid var(--border)}
.report-dims-bars{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.report-dim-row{display:flex;align-items:center;gap:10px}
.report-dim-label{width:80px;font-size:12px;color:var(--text-secondary);text-align:right;flex-shrink:0}
.report-dim-bar{flex:1;height:22px;background:var(--gray-100);border-radius:6px;overflow:hidden}
.report-dim-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:6px;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:600;color:#fff;min-width:28px;transition:width .4s}
.report-actions{margin-top:12px;text-align:right}
.report-actions .btn-delete{background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.15)}
.report-actions .btn-delete:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3)}

/* =============================================
   GROWTH CURVE
   ============================================= */
.growth-section{padding:20px}
.growth-section h4{font-family:var(--font-serif);font-size:16px;color:var(--primary-light);margin-bottom:16px}
.chart-container{overflow-x:auto;padding:8px 0}
.growth-line-chart{display:block;margin:0 auto}

/* Bar Chart Multi */
.bar-chart-multi{overflow-x:auto;padding-bottom:8px}
.bar-group{transition:transform .2s}
.bar-group:hover{transform:scale(1.02)}
.bar-col{transition:height .5s var(--ease)}

/* Timeline */
.timeline-list{padding:8px 0 8px 20px}
.timeline-item{display:flex;align-items:flex-start;gap:14px;position:relative;padding-bottom:8px}
.timeline-item.latest{}
.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--border);flex-shrink:0;margin-top:4px;z-index:1;transition:all .3s}
.timeline-dot.active{background:var(--primary);box-shadow:0 0 8px rgba(59,130,246,.4)}
.timeline-item.latest .timeline-dot{background:var(--accent);box-shadow:0 0 10px rgba(245,158,11,.4)}
.timeline-line{width:2px;height:20px;background:var(--border);margin-left:6px;margin-top:-4px;margin-bottom:2px}
.timeline-content{flex:1;padding:6px 12px;background:var(--gray-100);border-radius:var(--radius-sm)}
.timeline-date{font-size:13px;font-weight:600;color:var(--text)}
.timeline-score{font-size:16px;font-weight:700;color:var(--accent);margin-top:2px}
.timeline-level{font-size:12px;color:var(--text-muted)}

/* Light theme overrides for new components */
body[data-theme="light"] .next-steps-box{background:rgba(26,58,92,.03);border-color:rgba(26,58,92,.08)}
body[data-theme="light"] .dim-reading{background:rgba(0,0,0,.02)}
body[data-theme="light"] .report-dim-bar{background:rgba(0,0,0,.04)}
body[data-theme="light"] .timeline-content{background:rgba(0,0,0,.02)}
body[data-theme="light"] .step-indicator-new{background:var(--bg)}