:root{--bg: #08060e;--bg-card: #110e1a;--bg-card-hover: #18142a;--border: rgba(124, 59, 237, .12);--border-hover: rgba(124, 59, 237, .35);--purple: #7c3aed;--purple-light: #a78bfa;--coral: #ff6b6b;--teal: #06d6a0;--text: #e2e0ea;--text-muted: #8b85a0;--text-dim: #5a5470;--radius: 16px;--radius-sm: 10px;--header-h: 72px;--transition: .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}.header{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);background:#08060ebf;border-bottom:1px solid var(--border);height:var(--header-h)}.header-inner{max-width:1400px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:12px;text-decoration:none}.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--purple),#a855f7);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:700}.logo-text{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:20px;color:#fff}.logo-version{color:var(--purple-light);font-size:14px;opacity:.7}.nav-tabs{display:flex;gap:4px;background:#ffffff0a;border:1px solid var(--border);border-radius:12px;padding:4px}.nav-tab{display:flex;align-items:center;gap:8px;padding:8px 20px;border:none;background:transparent;color:var(--text-muted);font-family:Inter,sans-serif;font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;transition:all var(--transition)}.nav-tab .material-icons-round{font-size:18px}.nav-tab .tab-count{font-size:11px;background:#ffffff14;padding:2px 8px;border-radius:20px;font-weight:600}.nav-tab:hover{color:var(--text)}.nav-tab.active{background:var(--purple);color:#fff;box-shadow:0 4px 20px #7c3bed66}.nav-tab.active .tab-count{background:#fff3}.status-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;background:#06d6a01a;border:1px solid rgba(6,214,160,.25);border-radius:20px;font-size:12px;font-weight:600;color:var(--teal)}.status-dot{width:6px;height:6px;background:var(--teal);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.hero{position:relative;padding:calc(var(--header-h) + 80px) 32px 60px;text-align:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 800px 600px at 50% 20%,rgba(124,59,237,.12),transparent),radial-gradient(ellipse 400px 300px at 30% 60%,rgba(255,107,107,.06),transparent),radial-gradient(ellipse 400px 300px at 70% 70%,rgba(6,214,160,.05),transparent);z-index:0}.hero-content{position:relative;z-index:1;max-width:700px;margin:0 auto}.hero-badge{display:inline-block;padding:6px 18px;background:#7c3bed1f;border:1px solid rgba(124,59,237,.3);border-radius:20px;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--purple-light);margin-bottom:24px}.hero-title{font-family:Space Grotesk,sans-serif;font-size:clamp(48px,8vw,72px);font-weight:800;line-height:1.1;color:#fff;margin-bottom:20px}.gradient-text{background:linear-gradient(135deg,var(--purple-light),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:18px;color:var(--text-muted);max-width:520px;margin:0 auto 40px;line-height:1.7}.hero-subtitle strong{color:#fff;font-weight:600}.hero-stats{display:flex;align-items:center;justify-content:center;gap:32px;padding:24px 40px;background:#ffffff08;border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.hero-stat-value{font-family:Space Grotesk,sans-serif;font-size:32px;font-weight:700;color:#fff}.hero-stat-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:500}.hero-stat-divider{width:1px;height:40px;background:var(--border)}.screens-section{padding:40px 32px 80px;max-width:1400px;margin:0 auto}.screens-section.hidden{display:none}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.section-title{font-family:Space Grotesk,sans-serif;font-size:28px;font-weight:700;color:#fff;display:flex;align-items:center;gap:12px}.section-icon{color:var(--purple-light);font-size:28px}.section-subtitle{font-size:15px;color:var(--text-muted);margin-top:6px}.screens-grid{display:grid;gap:24px}.web-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}.mobile-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.screen-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all var(--transition);group:true}.screen-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateY(-4px);box-shadow:0 20px 60px #7c3bed1a,0 4px 16px #0000004d}.screen-card-image-wrap{position:relative;overflow:hidden}.web-grid .screen-card-image-wrap{padding-top:65%}.mobile-grid .screen-card-image-wrap{padding-top:200%}.screen-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.4,0,.2,1)}.screen-card:hover .screen-card-image{transform:scale(1.03)}.screen-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,14,.85) 0%,transparent 50%);opacity:0;transition:opacity var(--transition);display:flex;align-items:flex-end;justify-content:center;padding:24px}.screen-card:hover .screen-card-overlay{opacity:1}.screen-card-expand{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--purple);border-radius:10px;font-size:13px;font-weight:600;color:#fff;border:none;cursor:pointer;transition:all var(--transition)}.screen-card-expand:hover{background:#6d28d9}.screen-card-info{padding:16px 20px;display:flex;align-items:center;justify-content:space-between}.screen-card-title{font-weight:600;font-size:14px;color:#fff}.screen-card-number{font-size:12px;color:var(--text-dim);font-weight:600;background:#ffffff0d;padding:3px 10px;border-radius:20px}.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center}.lightbox.active{display:flex}.lightbox-overlay{position:absolute;inset:0;background:#000000eb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:fadeIn .3s ease}.lightbox-content{position:relative;z-index:1;display:flex;align-items:center;gap:24px;max-width:95vw;max-height:90vh;animation:scaleIn .3s cubic-bezier(.4,0,.2,1)}.lightbox-image-container{max-width:90vw;max-height:82vh;overflow:auto;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}.lightbox-image{display:block;max-width:90vw;max-height:82vh;object-fit:contain;border-radius:var(--radius)}.lightbox-close{position:absolute;top:-48px;right:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;cursor:pointer;font-size:20px;transition:all var(--transition)}.lightbox-close:hover{background:#ffffff26}.lightbox-nav{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#fff;cursor:pointer;transition:all var(--transition);flex-shrink:0}.lightbox-nav:hover{background:var(--purple);border-color:var(--purple)}.lightbox-info{position:absolute;bottom:-56px;left:50%;transform:translate(-50%);text-align:center;white-space:nowrap}.lightbox-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:4px}.lightbox-counter{font-size:13px;color:var(--text-muted)}.footer{padding:40px 32px;border-top:1px solid var(--border);text-align:center}.footer-inner{max-width:1400px;margin:0 auto}.footer p{font-size:14px;color:var(--text-muted)}.footer-meta{margin-top:4px;font-size:12px!important;color:var(--text-dim)!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.fade-up.visible{opacity:1;transform:translateY(0)}@media(max-width:768px){.header-inner{padding:0 16px}.header-meta{display:none}.hero{padding:calc(var(--header-h) + 48px) 20px 40px}.hero-title{font-size:40px}.hero-stats{flex-direction:column;gap:16px;padding:20px}.hero-stat-divider{width:40px;height:1px}.web-grid{grid-template-columns:1fr}.mobile-grid{grid-template-columns:repeat(2,1fr)}.screens-section{padding:24px 16px 60px}.lightbox-nav{display:none}.nav-tab span:not(.material-icons-round):not(.tab-count){display:none}}@media(max-width:480px){.mobile-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto}}