/* app2 - App Showcase with centered mockup + floating bubbles + bento grid */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;background:#0a0a1a;color:#e2e8f0;font-size:14px;line-height:1.7}
a{color:#818cf8;text-decoration:none;transition:.3s}a:hover{color:#a5b4fc}
img{max-width:100%;height:auto}
ul,ol{list-style:none;padding:0;margin:0}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.ab-header{position:fixed;top:0;left:0;right:0;z-index:999;background:rgba(10,10,26,0.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06)}
.ab-btn{display:inline-block;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:.3s;border:none;white-space:nowrap}
.ab-btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
.ab-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(99,102,241,0.4);color:#fff}
.ab-btn-lg{padding:16px 40px;font-size:17px;border-radius:14px}

.ab-hero{position:relative;padding:160px 0 100px;text-align:center;overflow:hidden}
.ab-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(99,102,241,0.15),transparent 60%),radial-gradient(circle at 80% 80%,rgba(139,92,246,0.1),transparent 50%)}
.ab-hero .h-badge{display:inline-block;padding:6px 16px;background:rgba(99,102,241,0.2);border-radius:20px;color:#a5b4fc;font-size:13px;font-weight:600;margin-bottom:20px}
.ab-hero h1{font-size:52px;font-weight:800;margin-bottom:16px;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ab-hero .h-desc{font-size:17px;color:#94a3b8;max-width:550px;margin:0 auto 30px}
.ab-hero .h-mockup{position:relative;margin-top:50px}
.ab-hero .h-mockup img{max-width:280px;margin:0 auto;border-radius:24px;box-shadow:0 30px 80px rgba(99,102,241,0.3)}
.ab-hero .h-bubble{position:absolute;border-radius:50%;background:rgba(99,102,241,0.15);animation:float 6s ease-in-out infinite}
.ab-hero .h-bubble:nth-child(1){width:60px;height:60px;top:20%;left:15%}
.ab-hero .h-bubble:nth-child(2){width:40px;height:40px;top:50%;right:12%;animation-delay:-2s}
.ab-hero .h-bubble:nth-child(3){width:80px;height:80px;bottom:20%;left:20%;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

.ab-section{padding:80px 0}
.ab-section .sec-hd{text-align:center;margin-bottom:50px}
.ab-section .sec-hd .tag{display:inline-block;padding:4px 14px;background:rgba(99,102,241,0.15);color:#a5b4fc;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:12px}
.ab-section .sec-hd h2{font-size:32px;font-weight:700;color:#f1f5f9;margin-bottom:8px}
.ab-section .sec-hd p{color:#64748b;font-size:15px}

.ab-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:16px}
.ab-bento .b-item{background:rgba(30,41,59,0.6);border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:28px;transition:.3s;backdrop-filter:blur(8px)}
.ab-bento .b-item:hover{border-color:rgba(99,102,241,0.3);transform:translateY(-3px)}
.ab-bento .b-item.span2{grid-column:span 2}
.ab-bento .b-item .b-icon{width:56px;height:56px;border-radius:14px;margin-bottom:14px;overflow:hidden;background:rgba(99,102,241,0.1)}
.ab-bento .b-item .b-icon img{width:100%;height:100%;object-fit:cover}
.ab-bento .b-item h4{font-size:17px;font-weight:600;color:#f1f5f9;margin-bottom:6px}
.ab-bento .b-item p{font-size:13px;color:#94a3b8;line-height:1.5}

.ab-screenshots{overflow:hidden;padding:20px 0}
.ab-ss-track{display:flex;gap:20px;animation:ss-scroll 25s linear infinite;width:fit-content}
.ab-ss-track:hover{animation-play-state:paused}
.ab-ss-item{flex-shrink:0;width:200px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.ab-ss-item img{width:100%;height:240px;object-fit:cover}
@keyframes ss-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.ab-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ab-news-card{background:rgba(30,41,59,0.6);border:1px solid rgba(255,255,255,0.04);border-radius:12px;overflow:hidden;transition:.3s}
.ab-news-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,0.2)}
.ab-news-card .n-img{height:150px;overflow:hidden;background:rgba(0,0,0,0.2)}
.ab-news-card .n-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.ab-news-card:hover .n-img img{transform:scale(1.06)}
.ab-news-card .n-info{padding:16px}
.ab-news-card .n-info h4{font-size:15px;font-weight:600;color:#e2e8f0;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-news-card .n-info .n-time{font-size:12px;color:#64748b}

.ab-partner-wrap{overflow:hidden}
.ab-partner-track{display:flex;animation:p-scroll 20s linear infinite;width:fit-content;gap:24px}
.ab-partner-track:hover{animation-play-state:paused}
.ab-partner-item{flex-shrink:0;background:rgba(30,41,59,0.6);border:1px solid rgba(255,255,255,0.04);border-radius:12px;padding:20px 28px;display:flex;align-items:center;min-width:150px}
.ab-partner-item img{height:110px;width:auto;object-fit:contain}
@keyframes p-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.ab-faq{max-width:700px;margin:0 auto}
.ab-faq .faq-item{background:rgba(30,41,59,0.6);border:1px solid rgba(255,255,255,0.04);border-radius:10px;margin-bottom:8px;overflow:hidden}
.ab-faq .faq-item .q{padding:16px 20px;font-weight:600;color:#e2e8f0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.ab-faq .faq-item .q::after{content:'+';color:#818cf8;font-size:18px}
.ab-faq .faq-item.open .q::after{content:'−'}
.ab-faq .faq-item .a{padding:0 20px;max-height:0;overflow:hidden;transition:.3s;color:#94a3b8;font-size:14px}
.ab-faq .faq-item.open .a{padding:0 20px 16px;max-height:240px}

.ab-footer{background:#060612;border-top:1px solid rgba(255,255,255,0.05);padding:50px 0 30px}

.ab-detail{padding-top:80px}
.ab-row{display:flex;flex-wrap:wrap;margin:0-15px}
.ab-main{flex:0 0 66.66%;max-width:66.66%;padding:0 15px}
.ab-side{flex:0 0 33.33%;max-width:33.33%;padding:0 15px}
.ab-card{background:rgba(30,41,59,0.6);border:1px solid rgba(255,255,255,0.04);border-radius:12px;margin-bottom:20px;overflow:hidden}
.ab-card-hd{padding:18px 24px;border-bottom:1px solid rgba(255,255,255,0.04)}.ab-card-hd h2,.ab-card-hd h3{margin:0;font-size:17px;font-weight:700;color:#e2e8f0}
.ab-card-bd{padding:24px}
.ab-bread{padding:16px 0;font-size:13px;color:#64748b}.ab-bread a{color:#94a3b8}.ab-bread a:hover{color:#818cf8}
.ab-art-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.03)}.ab-art-item:last-child{border-bottom:none}
.ab-art-item .art-t{width:180px;height:120px;border-radius:8px;overflow:hidden;flex-shrink:0;background:rgba(0,0,0,0.2)}
.ab-art-item .art-t img{width:100%;height:100%;object-fit:cover;transition:.4s}
.ab-art-item .art-t:hover img{transform:scale(1.06)}
.ab-art-item .art-i{flex:1;min-width:0}.ab-art-item .art-i h4{font-size:15px;font-weight:600;margin-bottom:6px}.ab-art-item .art-i h4 a{color:#e2e8f0}.ab-art-item .art-i h4 a:hover{color:#818cf8}
.ab-art-item .art-i .art-d{font-size:13px;color:#64748b;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px}
.ab-art-item .art-i .art-m{font-size:12px;color:#475569}
.ab-list-i{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.02)}.ab-list-i:last-child{border-bottom:none}.ab-list-i a{color:#94a3b8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.ab-list-i a:hover{color:#818cf8}.ab-list-i .lt{font-size:12px;color:#475569;margin-top:2px}
.ab-tags{display:flex;flex-wrap:wrap;gap:6px}.ab-tags a{padding:5px 12px;background:rgba(99,102,241,0.1);color:#94a3b8;border-radius:6px;font-size:12px;transition:.2s}.ab-tags a:hover{background:rgba(99,102,241,0.2);color:#a5b4fc}
.ab-pag{display:flex;justify-content:center;gap:6px;padding:24px 0 10px}.ab-pag a,.ab-pag span{padding:7px 13px;border-radius:6px;background:rgba(30,41,59,0.6);color:#94a3b8;font-size:13px;border:1px solid rgba(255,255,255,0.04)}.ab-pag a:hover{background:rgba(99,102,241,0.2);color:#a5b4fc}.ab-pag .active span{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
.ab-dbody{font-size:15px;line-height:1.9;color:#cbd5e1}.ab-dbody img{max-width:100%;border-radius:8px;margin:16px 0}.ab-dbody a{color:#818cf8}
.ab-meta{display:flex;gap:16px;font-size:13px;color:#64748b;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.04);margin-bottom:18px}
.ab-pn{display:flex;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,0.04);margin-top:24px}.ab-pn>div{flex:1}.ab-pn .lbl{font-size:12px;color:#475569;margin-bottom:3px}.ab-pn a{color:#94a3b8;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
.ab-404{text-align:center;padding:100px 20px}.ab-404 .code{font-size:120px;font-weight:900;color:rgba(99,102,241,0.2);line-height:1}.ab-404 .msg{color:#94a3b8;margin:16px 0 28px}
.ab-sh{position:fixed;top:0;left:0;right:0;background:rgba(10,10,26,0.95);z-index:998;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(12px)}.ab-sm{padding-top:60px}
.ab-th{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.04)}.ab-th .t-icon{width:44px;height:44px;background:rgba(99,102,241,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#818cf8}.ab-th h2{font-size:18px;margin:0;color:#e2e8f0}.ab-th p{font-size:13px;color:#64748b;margin:0}
.ab-cbody{font-size:15px;line-height:1.8;color:#cbd5e1}
@media(max-width:992px){.ab-bento{grid-template-columns:1fr 1fr}.ab-bento .b-item.span2{grid-column:span 1}.ab-news-grid{grid-template-columns:1fr 1fr}.ab-main,.ab-side{flex:0 0 100%;max-width:100%}.ab-hero h1{font-size:36px}}
@media(max-width:576px){.ab-hero h1{font-size:28px}.ab-bento,.ab-news-grid{grid-template-columns:1fr}}