@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Nunito:wght@400;600;700;800&family=Outfit:wght@500;600;700;800&display=swap");html,body{margin:0;padding:0;width:100%;min-height:100%}:root{color-scheme:light dark;--bg-primary: #F8F9FA;--bg-secondary: #fff;--bg-gradient-start: #74b9ff;--bg-gradient-end: #a29bfe;--text-primary: #2D3436;--text-secondary: #636E72;--primary-color: #6C5CE7;--secondary-color: #00CEC9;--accent-color: #FD79A8;--card-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);--card-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.15)}@media (prefers-color-scheme: dark){:root{--bg-primary: #1A1A2E;--bg-secondary: #16213E;--bg-gradient-start: #0F3460;--bg-gradient-end: #533483;--text-primary: #DFE6E9;--text-secondary: #B2BEC3;--card-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);--card-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.4)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%, 100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%, 100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.typin-showcase{background:linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));background-attachment:fixed;min-height:100vh;position:relative}.typin-showcase::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%, rgba(108,92,231,0.1) 0%, transparent 50%),radial-gradient(circle at 80% 80%, rgba(0,206,201,0.1) 0%, transparent 50%),radial-gradient(circle at 40% 20%, rgba(253,121,168,0.05) 0%, transparent 40%);pointer-events:none}.typin-showcase>*{position:relative;z-index:1}.hero{display:grid;grid-template-columns:1fr 1fr;gap:4rem;padding:4rem 2rem;min-height:80vh;align-items:center;max-width:1400px;margin:0 auto}@media (max-width: 900px){.hero{grid-template-columns:1fr;text-align:center;padding:3rem 1.5rem}}.hero-content{animation:slideInLeft 0.8s ease-out}.hero-content .app-title{font-family:"Outfit","Nunito","Segoe UI",sans-serif;font-size:clamp(2.5rem, 5vw, 4rem);font-weight:800;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;animation:gradientShift 5s ease infinite}@media (max-width: 900px){.hero-content .app-title{margin-bottom:1.5rem}}.hero-content .app-tagline{font-size:1.25rem;color:var(--text-primary);margin-bottom:2rem;line-height:1.6}.hero-content .app-badges{display:flex;gap:1rem;flex-wrap:wrap}@media (max-width: 900px){.hero-content .app-badges{justify-content:center}}.hero-content .app-badges img{height:48px;transition:transform 0.3s ease}.hero-content .app-badges img:hover{transform:scale(1.05)}.hero-visual{display:flex;justify-content:center;align-items:center;animation:float 6s ease-in-out infinite}.hero-visual img,.hero-visual .phone-mockup{max-width:100%;border-radius:2rem;box-shadow:0 30px 60px rgba(0,0,0,0.3)}.lang-switcher{display:flex;justify-content:center;flex-wrap:wrap;gap:0.5rem;margin:2rem 0;padding:1rem}.lang-switcher ul{display:flex;flex-wrap:wrap;row-gap:0.75rem;column-gap:0.5rem;list-style:none;padding:0;margin:0;justify-content:center;align-items:center}.lang-switcher li{display:flex;align-items:center}.lang-switcher a{display:inline-block;line-height:1.2;padding:0.5rem 1rem;border-radius:2rem;background:var(--bg-secondary);color:var(--text-primary);text-decoration:none;font-size:0.875rem;font-weight:600;transition:all 0.3s ease;border:2px solid transparent;white-space:nowrap}.lang-switcher a:hover{border-color:var(--primary-color);transform:translateY(-2px)}.lang-switcher a.active{background:var(--primary-color);color:white}.features-intro{text-align:center;padding:3rem 2rem;max-width:800px;margin:0 auto}.features-intro h2{font-family:"Outfit","Nunito","Segoe UI",sans-serif;font-size:clamp(2rem, 4vw, 3rem);color:var(--text-primary);margin-bottom:1rem}.features-intro p{font-size:1.125rem;color:var(--text-secondary);line-height:1.6}.feature-category{margin-bottom:4rem;padding:0 2rem}.feature-category h2{font-family:"Outfit","Nunito","Segoe UI",sans-serif;font-size:clamp(2rem, 4vw, 3rem);color:var(--primary-color);text-align:center;margin-bottom:3rem;position:relative}.feature-category h2::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg, var(--primary-color), var(--secondary-color));margin:1rem auto 0;border-radius:2px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:2rem;padding:2rem;max-width:1200px;margin:0 auto 4rem}.feature-card{background:var(--bg-secondary);border-radius:1rem;padding:2rem;box-shadow:var(--card-shadow);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);animation:fadeInUp 0.6s ease-out backwards}.feature-card:nth-child(1){animation-delay:.08s}.feature-card:nth-child(2){animation-delay:.16s}.feature-card:nth-child(3){animation-delay:.24s}.feature-card:nth-child(4){animation-delay:.32s}.feature-card:nth-child(5){animation-delay:.4s}.feature-card:nth-child(6){animation-delay:.48s}.feature-card:nth-child(7){animation-delay:.56s}.feature-card:nth-child(8){animation-delay:.64s}.feature-card:nth-child(9){animation-delay:.72s}.feature-card:nth-child(10){animation-delay:.8s}.feature-card:nth-child(11){animation-delay:.88s}.feature-card:nth-child(12){animation-delay:.96s}.feature-card:nth-child(13){animation-delay:1.04s}.feature-card:nth-child(14){animation-delay:1.12s}.feature-card:nth-child(15){animation-delay:1.2s}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover)}.feature-card .feature-icon{width:3rem;height:3rem;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.5rem;flex-shrink:0}.feature-card .feature-icon svg{width:1.5rem;height:1.5rem;fill:white}.feature-card h3{font-family:"Outfit","Nunito","Segoe UI",sans-serif;color:var(--primary-color);margin-bottom:0.75rem;font-size:1.375rem;font-weight:700}.feature-card p{color:var(--text-secondary);line-height:1.6;margin:0}.cta{text-align:center;padding:6rem 2rem;background:var(--bg-secondary);margin-top:4rem;box-shadow:0 -10px 40px rgba(0,0,0,0.05)}.cta h2{font-family:"Outfit","Nunito","Segoe UI",sans-serif;font-size:clamp(2rem, 4vw, 3rem);color:var(--primary-color);margin-bottom:1rem}.cta p{font-size:1.125rem;color:var(--text-secondary);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}.download-btn{display:inline-block;padding:1rem 2.5rem;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));background-size:200% 200%;color:white;text-decoration:none;border-radius:3rem;font-weight:700;font-size:1.125rem;box-shadow:0 10px 30px rgba(108,92,231,0.3);transition:all 0.3s ease;animation:pulse 2s infinite}.download-btn:hover{transform:scale(1.05);box-shadow:0 15px 40px rgba(108,92,231,0.4)}.floating-anchor-btn{position:fixed;bottom:2rem;right:2rem;width:3.5rem;height:3.5rem;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));background-size:200% 200%;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(108,92,231,0.4);cursor:pointer;text-decoration:none;z-index:1000;animation:gradientShift 5s ease infinite, float 4s ease-in-out infinite;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);opacity:0;pointer-events:none}.floating-anchor-btn svg{width:1.75rem;height:1.75rem;fill:white;transition:transform 0.3s ease}.floating-anchor-btn:hover{transform:scale(1.1);box-shadow:0 12px 32px rgba(108,92,231,0.5)}.floating-anchor-btn:hover svg{transform:translateY(0.25rem)}.floating-anchor-btn:active{transform:scale(0.95)}.floating-anchor-btn.visible{opacity:1;pointer-events:auto}.mobile-download-banner{display:none;position:sticky;top:0;z-index:1000;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));background-size:200% 200%;animation:gradientShift 5s ease infinite;box-shadow:0 2px 12px rgba(0,0,0,0.15);opacity:0;pointer-events:none;transition:opacity 0.3s ease}.mobile-download-banner.visible{opacity:1;pointer-events:auto}.mobile-banner-link{display:block;text-decoration:none;color:white;padding:0.75rem 1rem}.mobile-banner-link:active{opacity:0.8}.banner-content{display:flex;align-items:center;gap:0.75rem}.banner-icon{flex-shrink:0}.banner-icon svg{width:1.5rem;height:1.5rem;fill:white}.banner-text{display:flex;flex-direction:column;gap:0.125rem;color:white !important;min-width:0}.banner-title{font-weight:700;font-size:0.95rem;line-height:1.2;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;white-space:nowrap;overflow:visible}.banner-subtitle{font-weight:500;font-size:0.75rem;opacity:0.9;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;white-space:nowrap;overflow:visible}.banner-cta{display:flex;align-items:center;gap:0.375rem;margin-left:auto;padding-left:0.75rem}.cta-text{font-weight:600;font-size:0.8rem;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;white-space:nowrap}.cta-arrow{width:1.125rem;height:1.125rem;fill:#FFFFFF !important;transition:transform 0.3s ease;animation:bounceDown 1.5s ease-in-out infinite}@keyframes bounceDown{0%, 100%{transform:translateY(0)}50%{transform:translateY(3px)}}.mobile-banner-link:active .cta-arrow{transform:translateY(2px);animation:none}.mobile-banner-link span{color:#FFFFFF !important}.typin-footer{text-align:center;padding:3rem 2rem;background:var(--bg-secondary);border-top:1px solid rgba(0,0,0,0.1)}.typin-footer p{color:var(--text-secondary);margin-bottom:1rem}.typin-footer nav{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.typin-footer nav a{color:var(--text-primary);text-decoration:none;font-weight:600;transition:color 0.3s ease}.typin-footer nav a:hover{color:var(--primary-color)}@media (max-width: 600px){.lang-switcher ul{gap:0.375rem}.lang-switcher a{padding:0.375rem 0.75rem;font-size:0.8rem}.features-grid{grid-template-columns:1fr;gap:1.5rem}.cta{padding:4rem 1.5rem}.download-btn{padding:0.875rem 2rem;font-size:1rem}.floating-anchor-btn{display:none}.mobile-download-banner{display:block}}.wechat-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn 0.3s ease}.wechat-overlay[hidden]{display:none}.wechat-overlay-content{background:var(--bg-secondary);border-radius:1.5rem;padding:2.5rem 2rem;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:slideUp 0.3s ease;color:var(--text-primary)}.wechat-overlay-icon{width:4rem;height:4rem;margin:0 auto 1.5rem;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius:1rem;display:flex;align-items:center;justify-content:center}.wechat-overlay-icon svg{width:2.5rem;height:2.5rem;fill:white}.wechat-overlay-title{font-family:"Outfit","Nunito","Segoe UI",sans-serif;font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.wechat-overlay-message{font-size:1rem;color:var(--text-secondary);line-height:1.6;margin-bottom:2rem}.wechat-overlay-steps{text-align:left;margin-bottom:2rem;padding:1.5rem;background:var(--bg-primary);border-radius:1rem}.step-item{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.step-item:last-child{margin-bottom:0}.step-number{flex-shrink:0;width:2rem;height:2rem;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.875rem}.step-item span:not(.step-number){color:var(--text-primary);font-size:0.95rem}.wechat-overlay-close{width:100%;padding:1rem 2rem;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:white;border:none;border-radius:2rem;font-weight:700;font-size:1rem;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.wechat-overlay-close:hover{transform:scale(1.02);box-shadow:0 10px 30px rgba(108,92,231,0.3)}.wechat-overlay-close:active{transform:scale(0.98)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}