@keyframes ring-pulse{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.07);opacity:.35}}
@keyframes bar-grow{from{width:0}to{width:var(--w,80%)}}

#hero-section{background:#0f1923;padding:90px 0 0;position:relative;overflow:hidden}
#hero-section .hero-glow{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(42,171,238,.14) 0%,transparent 70%);pointer-events:none}
#hero-section .container{position:relative;z-index:1}
#hero-section .hero-text{text-align:center;max-width:720px;margin:0 auto 56px}
#hero-section .hero-tag{display:inline-block;background:rgba(42,171,238,.1);border:1px solid rgba(42,171,238,.22);color:rgba(255,255,255,.65);font-size:.78rem;padding:6px 16px;border-radius:20px;text-decoration:none;margin-bottom:28px;transition:all .2s}
#hero-section .hero-tag:hover{background:rgba(42,171,238,.18);color:rgba(255,255,255,.85);border-color:rgba(42,171,238,.4)}
#hero-section .hero-title{font-size:4rem;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#fff;margin-bottom:20px}
#hero-section .hero-title span{background:linear-gradient(120deg,#fff 20%,#2aabee 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#hero-section .hero-desc{font-size:1.05rem;color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:24px}
#hero-section .btn-group{justify-content:center}
#hero-section .btn-group .primary-btn{padding:14px 32px;font-size:1.2rem;font-weight:600}
#hero-section .hero-platforms{font-size:.78rem;color:rgba(255,255,255,.3);margin-top:24px;letter-spacing:.04em}
#hero-section .hero-window{max-width:800px;height:300px;margin:0 auto;overflow:hidden;font-size:0}
#hero-section .hero-window img{width:100%;height:auto;display:block}
@media (max-width:768px){
    #hero-section{padding:70px 0 0}
    #hero-section .hero-title{font-size:2.75rem}
    #hero-section .hero-desc{font-size:.95rem}
    #hero-section .hero-window{border-radius:10px 10px 0 0}
}
@media (max-width:480px){
    #hero-section .hero-title{font-size:2.25rem}
}


#features-section{background:#fff}
#features-section .section-title{color:#0f1923}
#features-section .section-desc{color:#6b7280}
#features-section .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#features-section .feat-card{padding:28px;border:1px solid #e8f3fb;border-radius:14px;background:#f8fbfe;transition:all .2s ease}
#features-section .feat-card:hover{border-color:rgba(42,171,238,.3);box-shadow:0 8px 32px rgba(42,171,238,.08);transform:translateY(-3px)}
#features-section .feat-icon{width:52px;height:52px;border-radius:14px;background:rgba(var(--c,42,171,238),.1);display:flex;align-items:center;justify-content:center;color:var(--c,#2aabee);margin-bottom:16px}
#features-section .feat-title{font-size:1.05rem;font-weight:700;color:#0f1923;margin-bottom:8px}
#features-section .feat-desc{font-size:.85rem;color:#6b7280;line-height:1.7;margin-bottom:14px}
#features-section .feat-link{font-size:.82rem;font-weight:600;color:#2aabee;text-decoration:none}
#features-section .feat-link:hover{text-decoration:underline}
@media (max-width:900px){
    #features-section .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
    #features-section .features-grid{grid-template-columns:1fr}
}


#stats-section{background:#0f1923;padding:5rem 0}
#stats-section .stats-row{display:flex;align-items:center;border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden}
#stats-section .stat-item{flex:1;text-align:center;padding:48px 24px}
#stats-section .stat-sep{width:1px;height:80px;background:rgba(255,255,255,.07);flex-shrink:0}
#stats-section .stat-item strong{display:block;font-size:3.75rem;font-weight:900;line-height:1;letter-spacing:-.025em;background:linear-gradient(135deg,#fff 20%,#2aabee 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}
#stats-section .stat-item strong span{font-size:.6em}
#stats-section .stat-item strong sup{font-size:.4em;vertical-align:super}
#stats-section .stat-item>span{font-size:.85rem;color:rgba(255,255,255,.4)}
@media (max-width:768px){
    #stats-section .stats-row{flex-direction:column;border-radius:12px}
    #stats-section .stat-sep{width:80%;height:1px}
    #stats-section .stat-item{padding:32px 20px}
    #stats-section .stat-item strong{font-size:3rem}
}


#detail-section{background:#f4f9ff}
#detail-section .section-title{color:#0f1923}
#detail-section .section-desc{color:#6b7280}
#detail-section .detail-list{display:flex;flex-direction:column;gap:80px}
#detail-section .detail-item{display:flex;align-items:center;gap:64px}
#detail-section .detail-item-rev{flex-direction:row-reverse}
#detail-section .detail-visual{flex:1;border-radius:20px;overflow:hidden;background:#17212b;min-height:360px;display:flex;align-items:center;justify-content:center}
#detail-section .dv-inner{position:relative;width:100%;height:100%;min-height:360px;display:flex;align-items:center;justify-content:center}
#detail-section .dv-privacy{background:linear-gradient(135deg,#0c1525 0%,#17212b 100%)}
#detail-section .dv-rings{position:absolute;display:flex;align-items:center;justify-content:center;inset:0}
#detail-section .dvr{position:absolute;border-radius:50%;border:1px solid rgba(42,171,238,.2);animation:ring-pulse 3s ease-in-out infinite}
#detail-section .dvr.dvr1{width:80px;height:80px}
#detail-section .dvr.dvr2{width:140px;height:140px;animation-delay:.6s;border-color:rgba(42,171,238,.12)}
#detail-section .dvr.dvr3{width:200px;height:200px;animation-delay:1.2s;border-color:rgba(42,171,238,.07)}
#detail-section .dv-icon-center{width:64px;height:64px;border-radius:50%;background:rgba(42,171,238,.12);display:flex;align-items:center;justify-content:center;z-index:1}
#detail-section .dv-groups{background:linear-gradient(135deg,#1a1230 0%,#17212b 100%)}
#detail-section .dv-group-preview{width:100%;max-width:340px;padding:0 28px}
#detail-section .dg-header{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:12px}
#detail-section .dg-header div{display:flex;flex-direction:column}
#detail-section .dg-header b{font-size:.82rem;font-weight:700;color:#fff}
#detail-section .dg-header small{font-size:.65rem;color:rgba(255,255,255,.35)}
#detail-section .dg-msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
#detail-section .dg-msg{font-size:.75rem;color:rgba(255,255,255,.55);line-height:1.5}
#detail-section .dg-name{font-weight:700;margin-right:6px}
#detail-section .dg-poll{background:rgba(255,255,255,.04);border-radius:10px;padding:12px 14px}
#detail-section .dg-poll-title{display:block;font-size:.75rem;color:rgba(255,255,255,.7);margin-bottom:10px}
#detail-section .dg-poll-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#detail-section .dg-poll-bar div{height:6px;border-radius:3px;background:rgba(42,171,238,.6);flex-shrink:0;animation:bar-grow 1.5s ease forwards}
#detail-section .dg-poll-bar span{font-size:.65rem;color:rgba(255,255,255,.35)}
#detail-section .detail-content{flex:1}
#detail-section .detail-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2aabee;margin-bottom:12px}
#detail-section .detail-title{font-size:2.25rem;font-weight:800;color:#0f1923;line-height:1.2;margin-bottom:16px}
#detail-section .detail-desc{font-size:.95rem;color:#6b7280;line-height:1.75;margin-bottom:24px}
#detail-section .detail-points{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:32px}
#detail-section .detail-points li{font-size:.88rem;color:#374151;padding-left:20px;position:relative;line-height:1.5}
#detail-section .detail-points li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:#2aabee}
@media (max-width:900px){
    #detail-section .detail-item,#detail-section .detail-item-rev{flex-direction:column;gap:40px}
    #detail-section .detail-visual{width:100%;min-height:280px}
    #detail-section .detail-title{font-size:1.75rem}
}
@media (max-width:768px){
    #detail-section .detail-list{gap:56px}
    #detail-section .dv-group-preview{padding:0 20px}
}


#platform-section{background:#fff}
#platform-section .section-title{color:#0f1923}
#platform-section .section-desc{color:#6b7280}
#platform-section .platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#platform-section .platform-card{display:flex;align-items:center;justify-content:space-between;padding:22px 20px;border:1px solid #e8f3fb;border-radius:12px;background:#f8fbfe;text-decoration:none;color:#0f1923;gap:14px;transition:all .2s ease}
#platform-section .platform-card:hover{border-color:#2aabee;box-shadow:0 6px 24px rgba(42,171,238,.1);transform:translateY(-2px);color:#0f1923}
#platform-section .pc-web{background:#eef7fd;border-color:rgba(42,171,238,.2)}
#platform-section .pc-icon{width:50px;height:50px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#2aabee;flex-shrink:0;box-shadow:0 2px 8px rgba(42,171,238,.1)}
#platform-section .pc-info{flex:1}
#platform-section .pc-info strong{display:block;font-size:.9rem;font-weight:700;color:#0f1923;margin-bottom:2px}
#platform-section .pc-info span{font-size:.75rem;color:#9ca3af}
#platform-section .pc-dl{font-size:.78rem;font-weight:600;color:#2aabee;white-space:nowrap;flex-shrink:0}
@media (max-width:900px){
    #platform-section .platform-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:500px){
    #platform-section .platform-grid{grid-template-columns:1fr}
}


#blog-section .section-title{color:#0f1923}
#blog-section .section-desc{color:#6b7280}
#blog-section .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#blog-section .blog-card{background:#fff;border-radius:14px;overflow:hidden;border:1px solid #e8f3fb;display:flex;flex-direction:column;transition:all .25s ease}
#blog-section .blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(42,171,238,.09)}
#blog-section .blog-img{display:block;height:190px;overflow:hidden;background:#eef7fd;text-decoration:none;flex-shrink:0}
#blog-section .blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
#blog-section .blog-card:hover .blog-img img{transform:scale(1.04)}
#blog-section .blog-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#blog-section .blog-body{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
#blog-section .blog-cat{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2aabee;width:fit-content}
#blog-section .blog-title{font-size:1rem;font-weight:700;color:#0f1923;line-height:1.45;flex:1}
#blog-section .blog-title a{color:inherit;text-decoration:none}
#blog-section .blog-title a:hover{color:#2aabee}
#blog-section .blog-exc{font-size:.82rem;color:#6b7280;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#blog-section .blog-foot{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:#9ca3af;padding-top:12px;border-top:1px solid #f0f4f8;margin-top:auto}
#blog-section .blog-more{color:#2aabee;font-weight:700;text-decoration:none}
#blog-section .blog-more:hover{text-decoration:underline}
#blog-section .blog-empty{grid-column:1/-1;text-align:center;color:#9ca3af;padding:48px}
#blog-section .blog-cta{text-align:center;margin-top:40px}
@media (max-width:900px){
    #blog-section .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
    #blog-section .blog-grid{grid-template-columns:1fr}
}


#cta-section{background:#0f1923;text-align:center}
#cta-section .cta-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
#cta-section .cta-logo{width:62px;height:62px;margin-bottom:8px}
#cta-section .cta-title{font-size:2.75rem;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.02em}
#cta-section .cta-desc{font-size:.95rem;color:rgba(255,255,255,.45);line-height:1.75}
#cta-section .cta-dl-btn{background:#2aabee;border-color:#2aabee;color:#fff;gap:7px;padding:14px 32px;border-radius:10px;font-size:1rem;font-weight:600}
#cta-section .cta-dl-btn:hover{filter:brightness(1.1);color:#fff}
#cta-section .cta-web-btn{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6);padding:14px 28px;border-radius:10px;font-size:1rem;background:transparent}
#cta-section .cta-web-btn:hover{border-color:rgba(255,255,255,.35);color:#fff}
@media (max-width:768px){
    #cta-section .cta-title{font-size:2.25rem}
    #cta-section .btn-group{flex-direction:column;align-items:center;width:100%}
    #cta-section .cta-dl-btn,#cta-section .cta-web-btn{width:100%;max-width:300px;justify-content:center}
}