/* hero */
#hero-section{position:relative;overflow:hidden;padding:110px 0 0;background:linear-gradient(165deg,#ffffff 0%,#f0f4ff 40%,#e8edf8 70%,#f5f7fa 100%);min-height:540px;text-align:center}
#hero-section .hero-bg-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#hero-section .hero-circle{position:absolute;border-radius:50%}
#hero-section .hero-circle--1{width:600px;height:600px;background:radial-gradient(circle,rgba(var(--rgb-color-primary),.14),rgba(var(--rgb-color-primary),.02));top:-220px;right:-120px;animation:heroFloat 18s ease-in-out infinite}
#hero-section .hero-circle--2{width:420px;height:420px;background:radial-gradient(circle,rgba(var(--rgb-color-primary),.10),rgba(91,141,239,.03));bottom:-140px;left:-100px;animation:heroFloat 22s ease-in-out infinite reverse}
#hero-section .hero-circle--3{width:260px;height:260px;background:radial-gradient(circle,rgba(91,141,239,.12),transparent);top:48%;left:56%;transform:translate(-50%,-50%);animation:heroFloat 15s ease-in-out infinite 3s}
@keyframes heroFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10px,-15px) scale(1.04)}}
#hero-section .hero-circle--3{animation-name:heroFloat3}
@keyframes heroFloat3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-48%,-52%) scale(1.06)}}
#hero-section .hero-badge{display:inline-block;padding:6px 18px;border-radius:20px;font-size:.72rem;font-weight:600;letter-spacing:.5px;color:rgb(var(--rgb-color-primary));background:rgba(var(--rgb-color-primary),.07);margin-bottom:22px;backdrop-filter:blur(4px)}
#hero-section .title{font-size:3.4rem;font-weight:800;line-height:1.18;letter-spacing:-.5px;background:linear-gradient(135deg,#040f42 30%,rgb(var(--rgb-color-primary)) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#hero-section .desc{max-width:580px;margin:12px auto 0;line-height:1.8;color:#8b92a5}
#hero-section .btn-group{justify-content:center;margin:22px auto 0}
#hero-section .hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none}
#hero-section .hero-btn-download{padding:16px 44px;font-size:1.05rem;background:rgb(var(--rgb-color-primary));color:#fff;box-shadow:0 4px 20px rgba(var(--rgb-color-primary),.3)}
#hero-section .hero-btn-download:hover{color:#fff}
#hero-section .hero-btn-download svg{flex-shrink:0}
#hero-section .hero-btn-store{padding:12px 48px 12px 32px;background:#111;color:#fff;gap:12px}
#hero-section .hero-btn-store:hover{background:#222;color:#fff}
#hero-section .hero-btn-store .ms-logo{flex-shrink:0}
#hero-section .hero-btn-store .store-text{display:flex;flex-direction:column;line-height:1.2;text-align:left;font-size:1.05rem;font-weight:700;letter-spacing:.2px}
#hero-section .hero-btn-store .store-text small{font-size:.7rem;font-weight:500;opacity:.85;letter-spacing:.3px}
#hero-section .hero-version{margin-top:22px;font-size:.8rem;color:#b0b5c0;letter-spacing:.2px}
#hero-section .hero-screenshot{width:100%;max-width:700px;margin:36px auto 0;aspect-ratio:700 / 340;overflow:hidden}
#hero-section .hero-screenshot img{width:100%}
@media (max-width:768px){
    #hero-section{padding:70px 0 0;min-height:auto}
    #hero-section .title{font-size:2.2rem;letter-spacing:0;-webkit-text-fill-color:inherit;background:none}
    #hero-section .hero-circle--1{width:300px;height:300px;top:-100px;right:-60px}
    #hero-section .hero-circle--2{width:200px;height:200px}
    #hero-section .hero-circle--3{width:120px;height:120px}
    #hero-section .hero-btn{justify-content:center}
    #hero-section .hero-btn-download{padding:14px 36px}
}

/* intro */
#intro-section{position:relative;overflow:hidden}
#intro-section .intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#intro-section .intro-item{position:relative;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;padding:40px 32px 36px;border:1px solid rgba(var(--rgb-color-primary),.06);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.02),0 6px 24px rgba(0,0,0,.03)}
#intro-section .intro-item::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,rgb(var(--rgb-color-primary)),rgba(var(--rgb-color-primary),.4));opacity:0;transition:opacity .4s;pointer-events:none}
#intro-section .intro-item:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(var(--rgb-color-primary),.04),0 20px 56px rgba(0,0,0,.05);border-color:rgba(var(--rgb-color-primary),.1)}
#intro-section .intro-item:hover::before{opacity:1}
#intro-section .intro-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(var(--rgb-color-primary),.06);color:rgb(var(--rgb-color-primary));margin-bottom:22px;transition:all .35s cubic-bezier(.4,0,.2,1)}
#intro-section .intro-item:hover .intro-icon{background:rgb(var(--rgb-color-primary));color:#fff;box-shadow:0 4px 14px rgba(var(--rgb-color-primary),.2)}
#intro-section .intro-icon svg{width:26px;height:26px}
#intro-section .intro-item h3{font-size:1.18rem;font-weight:700;color:#0f172a;margin:0 0 12px;letter-spacing:-.1px}
#intro-section .intro-item p{font-size:.86rem;line-height:1.8;color:#64748b;margin:0}
@media (max-width:768px){
    #intro-section .intro-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;gap:20px}
    #intro-section .intro-item{padding:32px 24px 28px}
}

/* ai */
#ai-section{position:relative;background:linear-gradient(180deg,#f8faff 0%,#ffffff 40%,#f6f8fc 100%);overflow:hidden}
#ai-section::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.06),transparent 70%);top:-160px;right:-120px;pointer-events:none}
#ai-section::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(var(--rgb-color-primary),.04),transparent 70%);bottom:-80px;left:-100px;pointer-events:none}
#ai-section .section-title{font-size:2.8rem;letter-spacing:-.3px}
#ai-section .section-desc{font-size:1rem;color:#8b92a5;letter-spacing:.5px}
#ai-section .section-body{display:flex;flex-direction:column;gap:32px}
#ai-section .ai-group{background:rgba(255,255,255,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,.6);border-radius:20px;padding:36px 40px;position:relative;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s,border-color .35s;box-shadow:0 1px 3px rgba(0,0,0,.02),0 8px 32px rgba(0,0,0,.03)}
#ai-section .ai-group:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.03),0 16px 48px rgba(59,130,246,.06);border-color:rgba(59,130,246,.12)}
#ai-section .ai-group-title{font-size:1.35rem;font-weight:700;color:#0f172a;margin:0 0 8px;line-height:1.55;letter-spacing:-.2px}
#ai-section .ai-group-title span{display:inline-flex;align-items:center;padding:4px 14px;border-radius:20px;font-size:.68rem;font-weight:600;letter-spacing:.8px;color:#fff;margin-right:14px;vertical-align:middle;position:relative;top:-1px;text-transform:uppercase}
#ai-section .ai-group:nth-child(1) .ai-group-title span{background:linear-gradient(135deg,rgb(251,74,62) 0%,#f06575 100%);box-shadow:0 2px 10px rgba(251,74,62,.2)}
#ai-section .ai-group:nth-child(2) .ai-group-title span{background:linear-gradient(135deg,rgb(147,51,234) 0%,#a855f7 100%);box-shadow:0 2px 10px rgba(147,51,234,.2)}
#ai-section .ai-group:nth-child(3) .ai-group-title span{background:linear-gradient(135deg,rgb(37,99,235) 0%,#60a5fa 100%);box-shadow:0 2px 10px rgba(37,99,235,.2)}
#ai-section .ai-group-desc{font-size:.9rem;color:#64748b;margin:0 0 24px;line-height:1.7}
#ai-section .ai-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
#ai-section .ai-list li{display:flex;flex-direction:column;gap:6px;padding:18px 22px;background:rgba(248,250,252,.8);border:1px solid rgba(226,232,240,.45);border-radius:14px;transition:all .3s cubic-bezier(.4,0,.2,1)}
#ai-section .ai-list li:hover{background:#fff;border-color:rgba(59,130,246,.15);box-shadow:0 4px 16px rgba(59,130,246,.05);transform:translateY(-2px)}
#ai-section .ai-list li h4{font-size:.88rem;font-weight:600;color:#1e293b;margin:0;display:flex;align-items:center;gap:8px}
#ai-section .ai-list li h4::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--rgb-color-primary));flex-shrink:0}
#ai-section .ai-group:nth-child(2) .ai-list li h4::before{background:rgb(147,51,234)}
#ai-section .ai-group:nth-child(3) .ai-list li h4::before{background:rgb(37,99,235)}
#ai-section .ai-list li p{font-size:.82rem;color:#94a3b8;margin:0;line-height:1.6;padding-left:14px}
@media (max-width:1024px){
    #ai-section .ai-group{padding:28px 28px}
    #ai-section .ai-list{gap:10px}
    #ai-section .ai-list li{padding:14px 18px}
}
@media (max-width:768px){
    #ai-section .section-title{font-size:2.2rem}
    #ai-section .ai-list{grid-template-columns:1fr}
    #ai-section .ai-group{padding:24px 20px;border-radius:16px}
    #ai-section .ai-group-title{font-size:1.15rem}
    #ai-section .ai-list li{padding:14px 16px}
}

/* scene */
#scene-section{background:#f5f7fa}
#scene-section .scene-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
#scene-section .scene-item{background:#fff;border-radius:16px;padding:34px 20px;text-align:center;border:1px solid #eef0f3;transition:all .35s cubic-bezier(.4,0,.2,1)}
#scene-section .scene-item:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,.07);border-color:rgba(var(--rgb-color-primary),.12)}
#scene-section .scene-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(var(--rgb-color-primary),.06);color:rgb(var(--rgb-color-primary));margin:0 auto 18px;transition:all .3s}
#scene-section .scene-item:hover .scene-icon{background:rgb(var(--rgb-color-primary));color:#fff;transform:scale(1.05)}
#scene-section .scene-icon svg{width:24px;height:24px}
#scene-section .scene-item h3{font-size:.95rem;font-weight:700;color:#040f42;margin:0 0 8px}
#scene-section .scene-item p{font-size:.8rem;line-height:1.65;color:#6b7280;margin:0}
@media (max-width:1024px){
#scene-section .scene-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
    #scene-section .scene-grid{grid-template-columns:1fr;gap:14px}
    #scene-section .scene-item{padding:24px 16px}
}

/* platform */
#platform-section{background:#fff}
#platform-section .platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#platform-section .platform-card{background:#f9fafb;border-radius:18px;padding:44px 32px;text-align:center;border:2px solid transparent;transition:all .35s cubic-bezier(.4,0,.2,1)}
#platform-section .platform-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.07)}
#platform-section .platform-card--active{border-color:rgb(var(--rgb-color-primary));background:#fff;box-shadow:0 8px 32px rgba(var(--rgb-color-primary),.1)}
#platform-section .platform-icon{width:60px;height:60px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#eef0f3;transition:all .3s}
#platform-section .platform-icon svg{width:30px;height:30px;color:#374151}
#platform-section .platform-card--active .platform-icon{background:rgba(var(--rgb-color-primary),.08)}
#platform-section .platform-card--active .platform-icon svg{color:rgb(var(--rgb-color-primary))}
#platform-section .platform-card h3{font-size:1.3rem;font-weight:700;color:#040f42;margin:0 0 6px}
#platform-section .platform-card p{font-size:.85rem;color:#9ca3af;margin:0 0 26px}
#platform-section .platform-card .default-btn{width:100%;border-radius:22px;padding:12px 0;font-weight:600;transition:all .3s}
#platform-section .platform-card--active .default-btn{box-shadow:0 4px 16px rgba(var(--rgb-color-primary),.25)}
#platform-section .platform-card--active .default-btn:hover{box-shadow:0 8px 24px rgba(var(--rgb-color-primary),.35);transform:translateY(-1px)}
@media (max-width:768px){
    #platform-section .platform-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
}

/* testimonial */
#testimonial-section{background:#f5f7fa}
#testimonial-section .testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#testimonial-section .testimonial-item{background:#fff;border-radius:16px;padding:34px 28px;box-shadow:0 2px 12px rgba(0,0,0,.03);display:flex;flex-direction:column;gap:18px;transition:all .35s cubic-bezier(.4,0,.2,1);border:1px solid transparent;position:relative}
#testimonial-section .testimonial-item:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.06);border-color:rgba(var(--rgb-color-primary),.08)}
#testimonial-section .testimonial-item::before{content:"\201C";position:absolute;top:16px;right:24px;font-size:3.5rem;line-height:1;font-family:Georgia,serif;color:rgba(var(--rgb-color-primary),.08);pointer-events:none}
#testimonial-section .testimonial-head{display:flex;align-items:center;gap:14px}
#testimonial-section .testimonial-avatar{width:46px;height:46px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0;background:linear-gradient(135deg,rgb(var(--rgb-color-primary)),#e85d6f)}
#testimonial-section .testimonial-head h4{font-size:.95rem;font-weight:600;color:#1f2937;margin:0}
#testimonial-section .testimonial-head p{font-size:.78rem;color:#9ca3af;margin:2px 0 0}
#testimonial-section blockquote{font-size:.9rem;line-height:1.8;color:#4b5563;margin:0;font-style:normal}
#testimonial-section .testimonial-stars{display:flex;gap:2px;color:#f59e0b;margin-top:auto}
#testimonial-section .testimonial-stars svg{width:16px;height:16px}
@media (max-width:768px){
    #testimonial-section .testimonial-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
}

/* faq */
#faq-section{background:#fff}
#faq-section .section-body{max-width:800px;margin-left:auto;margin-right:auto}
#faq-section .faq-accordion{display:flex;flex-direction:column;gap:12px}
#faq-section .faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}
#faq-section .faq-item.is-open{border-color:rgba(var(--rgb-color-primary),.2);box-shadow:0 4px 20px rgba(var(--rgb-color-primary),.06)}
#faq-section .faq-trigger{display:flex;align-items:center;gap:16px;width:100%;padding:22px 24px;border:none;background:none;cursor:pointer;text-align:left;transition:background .2s}
#faq-section .faq-trigger:hover{background:#fafafa}
#faq-section .faq-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f3f4f6;color:#6b7280;flex-shrink:0;transition:all .3s}
#faq-section .faq-icon svg{width:16px;height:16px;transition:transform .3s}
#faq-section .faq-item.is-open .faq-icon{background:rgba(var(--rgb-color-primary),.1);color:rgb(var(--rgb-color-primary))}
#faq-section .faq-item.is-open .faq-icon svg line:first-child{transform:rotate(90deg);transform-origin:center;opacity:0}
#faq-section .faq-question{font-size:1.05rem;font-weight:600;color:#1f2937;margin:0;line-height:1.5;flex:1}
#faq-section .faq-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
#faq-section .faq-item.is-open .faq-body{max-height:300px}
#faq-section .faq-answer{padding:0 24px 22px 70px;font-size:.92rem;line-height:1.85;color:#6b7280}
@media (max-width:768px){
    #faq-section .faq-trigger{padding:18px 18px;gap:12px}
    #faq-section .faq-question{font-size:.95rem}
    #faq-section .faq-answer{padding:0 18px 16px 58px;font-size:.875rem}
}

/* cta */
#cta-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 45%,#1e293b 100%);text-align:center}
#cta-section .cta-bg-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#cta-section .cta-circle{position:absolute;border-radius:50%}
#cta-section .cta-circle--1{width:500px;height:500px;background:radial-gradient(circle,rgba(var(--rgb-color-primary),.12),transparent);top:-200px;right:-100px;animation:heroFloat 20s ease-in-out infinite}
#cta-section .cta-circle--2{width:350px;height:350px;background:radial-gradient(circle,rgba(91,141,239,.1),transparent);bottom:-150px;left:-80px;animation:heroFloat 25s ease-in-out infinite reverse}
#cta-section .section-title{color:#fff;font-size:2.4rem}
#cta-section .section-desc{color:rgba(255,255,255,.5);max-width:640px;margin-left:auto;margin-right:auto}
#cta-section .btn-group{justify-content:center}
#cta-section .primary-btn{padding:15px 40px;font-size:1.05rem;border-radius:26px;gap:8px;font-weight:600;transition:all .3s}
@media (max-width:768px){
    #cta-section .section-title{font-size:1.8rem}
    #cta-section .cta-btn{width:100%}
}

/* article */
#article-section{background:#fff}
#article-section .article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#article-section .article-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #eef0f3;text-decoration:none;color:inherit;transition:all .35s cubic-bezier(.4,0,.2,1)}
#article-section .article-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.08);border-color:rgba(var(--rgb-color-primary),.1);color:inherit}
#article-section .article-thumb{position:relative;height:200px;overflow:hidden;background:#f5f7fa}
#article-section .article-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
#article-section .article-card:hover .article-thumb img{transform:scale(1.06)}
#article-section .article-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f0f1f3;color:#c9cdd4}
#article-section .article-thumb-placeholder svg{width:40px;height:40px}
#article-section .article-body{flex:1;display:flex;flex-direction:column;padding:22px 24px 24px}
#article-section .article-title{font-size:1.05rem;font-weight:700;color:#040f42;line-height:1.5;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#article-section .article-excerpt{font-size:.84rem;line-height:1.7;color:#6b7280;margin:0 0 auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:16px}
#article-section .article-meta{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #f0f1f3;font-size:.78rem;color:#9ca3af}
#article-section .article-readmore{color:rgb(var(--rgb-color-primary));font-weight:600;opacity:0;transform:translateX(-8px);transition:all .3s}
#article-section .article-card:hover .article-readmore{opacity:1;transform:translateX(0)}
@media (max-width:1024px){
    #article-section .article-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    #article-section .article-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
    #article-section .article-thumb{height:180px}
}

/* animation */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.fade-up.is-visible{opacity:1;transform:translateY(0)}
.fade-up-d1{transition-delay:.1s}
.fade-up-d2{transition-delay:.2s}
.fade-up-d3{transition-delay:.3s}
.fade-up-d4{transition-delay:.35s}