:root {
    --bg-body: #050505;
    --bg-surface: #0f1012;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --primary-accent: #1070FF;
    --secondary-accent: #3B8BFF;
    --border-color: rgba(255,255,255,0.08);
    --border-highlight: rgba(255,255,255,0.15);
    --border-subtle: rgba(255,255,255,0.04);
    --container-width: 1200px;
    --header-height: 70px;
    --radius-md: 16px;
    --radius-lg: 24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{background:var(--bg-body);color:var(--text-primary);font-family:'Inter','Noto Sans SC',sans-serif;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit;transition:color .2s}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
.ambient-light{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 10%,rgba(16,112,255,.07) 0%,transparent 40%),radial-gradient(circle at 80% 90%,rgba(59,139,255,.06) 0%,transparent 40%)}
.container{max-width:var(--container-width);margin:0 auto;padding:0 24px}
.center-text{text-align:center}

.navbar{position:fixed;top:0;left:0;width:100%;height:var(--header-height);z-index:1000;transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.navbar.scrolled{background:rgba(5,5,5,.95);border-bottom:1px solid var(--border-color)}
.nav-container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-left{display:flex;align-items:center;flex-shrink:0;width:160px}
.nav-center{flex:1;display:flex;justify-content:center}
.nav-right{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;width:200px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;white-space:nowrap}
.logo-icon{width:32px;height:32px;border-radius:8px;object-fit:contain}
.nav-menu{display:flex;gap:8px;background:rgba(255,255,255,.03);padding:6px;border-radius:100px;border:1px solid var(--border-color)}
.nav-menu li{display:flex;align-items:center}
.nav-menu a{font-size:.9rem;color:var(--text-secondary);font-weight:500;padding:6px 16px;border-radius:100px;transition:all .2s;white-space:nowrap}
.nav-menu a:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}
.nav-actions{display:flex;align-items:center;gap:16px}
.btn-text{font-size:.9rem;color:var(--text-secondary);font-weight:500;white-space:nowrap}
.btn-text:hover{color:var(--text-primary)}
.btn-primary{background:var(--primary-accent);color:#fff;padding:8px 20px;border-radius:100px;font-size:.9rem;font-weight:600;transition:transform .2s,background .2s;white-space:nowrap}
.btn-primary:hover{transform:translateY(-1px);background:var(--secondary-accent)}
.btn-lg{padding:14px 36px;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.btn-secondary{background:rgba(255,255,255,.03);color:var(--text-primary);border:1px solid var(--border-color);border-radius:100px;font-weight:500;transition:background .2s}
.btn-secondary:hover{background:rgba(255,255,255,.08)}

.hero{padding-top:160px;padding-bottom:120px}
.hero-container{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(255,255,255,.03);border:1px solid var(--border-color);border-radius:100px;font-size:.8rem;color:var(--text-secondary);margin-bottom:32px}
.pulse-dot{width:6px;height:6px;background:#22c55e;border-radius:50%;box-shadow:0 0 8px rgba(34,197,94,.6)}
.hero-title{font-size:5rem;line-height:1.05;font-weight:800;margin-bottom:24px;letter-spacing:-.04em}
.text-gradient{background:linear-gradient(135deg,#fff 0%,#94a3b8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-description{font-size:1.25rem;color:var(--text-secondary);max-width:640px;margin-bottom:48px;line-height:1.6}
.hero-actions{display:flex;gap:16px;margin-bottom:100px}

.hero-visual-wrapper{width:100%;max-width:1080px;perspective:1200px}
.interface-mockup{background:#0f1012;border:1px solid var(--border-color);border-radius:16px;box-shadow:0 0 0 1px #000,0 40px 100px -20px rgba(0,0,0,.5);overflow:hidden;transform:rotateX(2deg)}
.mockup-header{height:44px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 20px;gap:20px}
.traffic-lights{display:flex;gap:8px}
.traffic-lights span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.1)}
.mockup-tabs{display:flex;gap:24px;margin-left:20px}
.mockup-tabs span{font-size:.8rem;color:var(--text-tertiary)}
.mockup-tabs span.active{color:var(--text-primary)}
.mockup-body{height:420px;display:flex;flex-direction:column;background:#080808;padding:32px;gap:20px}
.m-progress-area{display:flex;flex-direction:column;gap:16px}
.m-task{display:flex;align-items:center;gap:16px;padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:12px}
.m-task-icon{width:36px;height:36px;border-radius:8px;background:rgba(16,112,255,.15);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.m-task-info{flex:1;display:flex;flex-direction:column;gap:4px}
.m-task-name{font-size:.85rem;color:var(--text-primary)}
.m-task-meta{font-size:.7rem;color:var(--text-tertiary)}
.m-task-bar{height:4px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin-top:2px}
.m-task-fill{height:100%;border-radius:4px;background:var(--primary-accent)}
.m-task-speed{font-size:.75rem;color:#22c55e;white-space:nowrap;font-weight:600}
.m-stats-row{display:flex;gap:16px;margin-top:auto}
.m-stat-card{flex:1;padding:16px;background:rgba(255,255,255,.02);border:1px solid var(--border-subtle);border-radius:12px;text-align:center}
.m-stat-val{font-size:1.3rem;font-weight:700;color:var(--text-primary)}
.m-stat-lbl{font-size:.7rem;color:var(--text-tertiary);margin-top:4px}

.stats-bar{display:flex;justify-content:center;gap:80px;padding:80px 0;border-bottom:1px solid var(--border-subtle)}
.stat-item{text-align:center}
.stat-number{font-size:3rem;font-weight:800;color:#fff;line-height:1;margin-bottom:8px}
.stat-label{font-size:.85rem;color:var(--text-tertiary)}
.trusted-brands{margin-top:80px}
.trusted-brands p{font-size:.8rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.2em;margin-bottom:32px}
.brand-grid{display:flex;gap:60px;justify-content:center;flex-wrap:wrap;opacity:.4;font-weight:800;font-size:1.3rem}

.section{padding:120px 0}
.section-header{margin-bottom:80px}
.section-title{font-size:3rem;font-weight:700;margin-bottom:20px;color:#fff}
.section-subtitle{font-size:1.1rem;color:var(--text-secondary)}
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,320px);gap:24px}
.bento-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s}
.bento-card:hover{transform:translateY(-4px);border-color:var(--border-highlight)}
.bento-card.span-2{grid-column:span 2}
.card-content{padding:40px;height:100%;display:flex;flex-direction:column;position:relative;z-index:2}
.card-content h3{font-size:1.5rem;margin-bottom:16px}
.card-content p{color:var(--text-secondary);line-height:1.7}
.card-icon{font-size:2rem;margin-bottom:24px;width:60px;height:60px;background:rgba(16,112,255,.08);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--primary-accent)}
.feature-tags{display:flex;gap:12px;margin-top:auto;flex-wrap:wrap}
.feature-tags li{padding:6px 14px;background:rgba(255,255,255,.03);border-radius:100px;font-size:.85rem;border:1px solid var(--border-color)}

.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.sol-tabs{display:flex;flex-direction:column;gap:4px}
.sol-btn{text-align:left;padding:16px 24px;color:var(--text-secondary);font-size:1.1rem;border-left:2px solid transparent;width:100%;background:none;font-family:inherit}
.sol-btn.active{color:var(--text-primary);border-left-color:var(--primary-accent);background:linear-gradient(90deg,rgba(16,112,255,.1),transparent)}
.solution-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:48px}
.card-header{display:flex;justify-content:space-between;margin-bottom:24px;align-items:center}
.card-header h3{font-size:1.8rem}
.badge{background:rgba(16,112,255,.15);color:var(--primary-accent);padding:6px 14px;border-radius:100px;font-size:.8rem;font-weight:600}
.data-points{display:flex;gap:60px;padding-top:40px;border-top:1px solid var(--border-color);margin-top:40px}
.point strong{display:block;font-size:2.5rem;color:#fff;line-height:1;margin-bottom:8px}
.point span{font-size:.85rem;color:var(--text-tertiary)}

.cta-section{padding:140px 0;overflow:hidden}
.cta-title{font-size:4rem;line-height:1.1;margin-bottom:24px}
.cta-desc{font-size:1.25rem;color:var(--text-secondary)}
.download-options{display:flex;gap:24px;justify-content:center;margin-top:60px;flex-wrap:wrap}
.dl-card{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.03);border:1px solid var(--border-color);padding:24px 32px;border-radius:20px;min-width:280px;text-align:left;transition:all .2s;color:var(--text-primary);cursor:pointer}
.dl-card:hover{background:rgba(255,255,255,.08);border-color:var(--border-highlight);transform:translateY(-4px)}
.dl-icon{width:40px;height:40px;color:var(--text-primary);flex-shrink:0}
.dl-info{display:flex;flex-direction:column;flex:1}
.os-name{font-size:1.1rem;font-weight:600;margin-bottom:4px}
.os-ver{font-size:.8rem;color:var(--text-tertiary)}
.dl-arrow{color:var(--text-tertiary);font-size:1.2rem}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:32px;transition:all .2s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--border-highlight)}
.blog-date{font-size:.85rem;color:var(--text-tertiary);margin-bottom:12px}
.blog-card h3{font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:12px;line-height:1.4}
.blog-card p{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-link{font-size:.9rem;color:var(--primary-accent);font-weight:500;transition:color .2s}
.blog-link:hover{color:var(--secondary-accent)}

.seo-section{padding:120px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:rgba(255,255,255,.01)}
.seo-section .section-title{font-size:2.6rem}
.seo-articles{display:grid;gap:28px}
.seo-article{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:40px}
.seo-article h1{font-size:1.9rem;margin-bottom:16px;color:var(--text-primary)}
.seo-article h2{font-size:1.3rem;margin-top:24px;margin-bottom:8px;color:var(--text-primary)}
.seo-article h3{font-size:1.05rem;margin-top:14px;margin-bottom:6px;color:var(--text-secondary)}
.seo-article p{color:var(--text-secondary);margin-bottom:10px;line-height:1.75}
.key-points,.steps-list{margin:8px 0 14px;padding-left:18px;color:var(--text-secondary)}
.key-points{list-style:disc}.steps-list{list-style:decimal}
.key-points li,.steps-list li{margin-bottom:6px}
.faq-list{margin-top:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;background:rgba(255,255,255,.02)}
.faq-list dt{font-weight:600;color:var(--text-primary);margin-top:10px}
.faq-list dd{color:var(--text-secondary);margin:6px 0 10px}

.site-footer{border-top:1px solid var(--border-color);padding:100px 0 60px;color:var(--text-tertiary)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:80px;flex-wrap:wrap;gap:40px}
.footer-brand p{margin-top:12px;font-size:.9rem}
.footer-nav-wrapper{display:flex;gap:80px;flex-wrap:wrap}
.footer-col h4{color:#fff;margin-bottom:24px;font-size:1rem}
.footer-col ul li{margin-bottom:12px}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--border-color);padding-top:30px;font-size:.85rem;text-align:center}

@media(max-width:1024px){.nav-center{display:none}.mobile-menu-toggle{display:block}.hero-title{font-size:3.5rem}}
@media(max-width:900px){.hero-title{font-size:3rem}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto}.bento-card.span-2{grid-column:span 1}.split-layout{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr}.stats-bar{flex-direction:column;gap:40px;align-items:center}.footer-top{flex-direction:column}.footer-nav-wrapper{gap:40px;width:100%}.interface-mockup{transform:none}}
@media(max-width:600px){.hero-title{font-size:2.5rem}.hero{padding-top:120px;padding-bottom:80px}.footer-nav-wrapper{flex-direction:column}.dl-card{width:100%}.download-options{flex-direction:column;align-items:center}.data-points{flex-direction:column;gap:24px}}
.mobile-menu-toggle{display:none;cursor:pointer;width:24px;height:24px;position:relative}
.mobile-menu-toggle span{display:block;width:100%;height:2px;background:var(--text-primary);position:absolute;left:0;transition:all .3s}
.mobile-menu-toggle span:first-child{top:6px}
.mobile-menu-toggle span:last-child{bottom:6px}