.hero{position:relative;padding:8rem 0 10rem;overflow:hidden;background:transparent} .hero-bg-glow{position:absolute;top:-10%;left:10%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,123,255,0.15) 0%,rgba(0,0,0,0) 60%);z-index:0;pointer-events:none} .hero-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:4rem} .hero-text{flex:1.2} .hero-visual{flex:1;perspective:1000px} .visual-wrapper{position:relative;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-surface);padding:8px;box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 40px rgba(0,123,255,0.1);transform-style:preserve-3d;transition:transform 0.1s ease-out;will-change:transform} #tilt-wrapper{aspect-ratio:1920 / 1052} .visual-wrapper:not(:hover){transition:transform 0.5s ease-out} .visual-wrapper img{width:100%;height:auto;border-radius:8px;display:block} .hero-slogan{font-size:1.1rem;text-transform:uppercase;letter-spacing:3px;color:var(--gold);text-shadow:0 0 15px rgba(245,176,65,0.4);margin-bottom:1rem} .hero-title{font-size:clamp(2.5rem,4vw,3.8rem);line-height:1.1;margin-bottom:2rem;font-weight:700} .hero-pills-container{display:flex;flex-wrap:wrap;gap:0.8rem;margin-bottom:2.5rem;max-width:95%} .hero-pill{display:flex;align-items:center;gap:8px;padding:0.5rem 1.1rem;border-radius:30px;font-size:0.85rem;font-weight:500;color:var(--text-muted);background:rgba(255,255,255,0.02);border:1px solid var(--border-color);transition:all 0.3s cubic-bezier(0.16,1,0.3,1);cursor:default} .hero-pill iconify-icon{font-size:1.2rem;transition:color 0.3s ease} .hero-pill:hover,.hero-pill.active{color:#fff;border-color:var(--primary);background:rgba(0,123,255,0.1);box-shadow:0 0 15px var(--primary-glow),inset 0 0 10px rgba(0,123,255,0.1);transform:translateY(-2px)} .hero-pill:hover iconify-icon,.hero-pill.active iconify-icon{color:var(--primary);filter:drop-shadow(0 0 5px var(--primary))} .hero-buttons .btn-lg{padding:0.9rem 2.2rem;font-size:1.05rem} .main-features-overlap{margin-top:-6rem;position:relative;z-index:10;padding-bottom:4rem} .main-features-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem} .feature-card-main{background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;overflow:hidden;transition:all 0.3s ease;box-shadow:0 15px 35px rgba(0,0,0,0.5);cursor:default} .feature-card-main:hover{transform:translateY(-8px);border-color:rgba(0,123,255,0.4);box-shadow:0 25px 45px rgba(0,0,0,0.7),0 5px 20px var(--primary-glow)} .feature-card-main img{width:100%;height:120px;object-fit:cover;border-bottom:1px solid var(--border-color)} .card-info{padding:1.25rem} .card-info h4{font-size:0.95rem;margin-bottom:0.5rem;color:#fff;transition:color 0.3s} .feature-card-main:hover .card-info h4{color:var(--primary)} .card-info p{font-size:0.8rem;color:var(--text-muted);margin:0;line-height:1.5} .tech-ticker-section{padding:3.5rem 0;background:var(--bg-base);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:2rem;overflow:hidden;position:relative} .tech-ticker-section::before,.tech-ticker-section::after{content:'';position:absolute;top:0;width:150px;height:100%;z-index:2;pointer-events:none} .tech-ticker-section::before{left:0;background:linear-gradient(to right,var(--bg-base),transparent)} .tech-ticker-section::after{right:0;background:linear-gradient(to left,var(--bg-base),transparent)} .ticker-wrapper{display:flex;width:100%;overflow:visible} .ticker-track{display:flex;align-items:center;flex-shrink:0;gap:1.5rem;padding-right:1.5rem;will-change:transform} .tech-ticker-section:hover .ticker-track{animation-play-state:paused} .ticker-left .ticker-track{animation:scrollLeft 50s linear infinite} .ticker-right .ticker-track{animation:scrollRight 50s linear infinite} @keyframes scrollLeft{0%{transform:translateX(0)} 100%{transform:translateX(-100%)}} @keyframes scrollRight{0%{transform:translateX(-100%)} 100%{transform:translateX(0)}} .ticker-left .ticker-track,.ticker-right .ticker-track{min-width:max-content} .ticker-pill{display:inline-flex;align-items:center;gap:8px;padding:0.5rem 1.2rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:40px;font-size:0.85rem;font-weight:500;color:rgba(255,255,255,0.6);white-space:nowrap;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);cursor:default} .ticker-pill iconify-icon{font-size:1.3rem;color:var(--brand);filter:grayscale(70%) opacity(0.7);transition:transform 0.3s ease,filter 0.3s ease} .ticker-pill:hover{background:rgba(255,255,255,0.05);border-color:var(--brand,rgba(255,255,255,0.3));color:#fff;transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,0.4)} .ticker-pill:hover iconify-icon{filter:grayscale(0%) opacity(1) drop-shadow(0 0 8px var(--brand,rgba(255,255,255,0.4)));transform:scale(1.15)} .awesome-banner{background:var(--bg-surface);padding:5rem 0;border-bottom:1px solid var(--border-color);position:relative;overflow:hidden} .banner-glass-card{background:rgba(5,6,8,0.4);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(0,123,255,0.2);border-radius:16px;padding:4rem 2rem;max-width:800px;margin:0 auto;position:relative;box-shadow:inset 0 0 40px rgba(0,123,255,0.05),0 20px 40px rgba(0,0,0,0.5)} .banner-glass-card h2{font-size:2.5rem;margin-bottom:1rem;letter-spacing:-1px} .banner-glass-card p{font-size:1.1rem;color:#cbd5e1;margin:0;line-height:1.7} .banner-glow-line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);box-shadow:0 0 15px var(--primary)} .capabilities-section{background:transparent;position:relative;z-index:5} .floating-rocket{font-size:3rem;color:var(--primary);margin-bottom:1rem;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 10px 15px rgba(0,123,255,0.4))} @keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)}} .cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .cap-card{background:rgba(13,17,22,0.8);backdrop-filter:blur(8px);border:1px solid var(--border-color);padding:2rem;border-radius:12px;transition:all 0.3s ease;position:relative;overflow:hidden} .cap-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease} .cap-card:hover{transform:translateY(-5px);border-color:rgba(0,123,255,0.4);box-shadow:0 10px 30px rgba(0,0,0,0.5),0 0 20px rgba(0,123,255,0.1)} .cap-card:hover::after{transform:scaleX(1)} .cap-card iconify-icon{font-size:2.5rem;color:var(--primary);margin-bottom:1rem;display:block} .cap-card h4{font-size:1.1rem;margin-bottom:0.5rem} .cap-card p{font-size:0.85rem;margin:0;color:var(--text-muted)} .launchboost-hero{position:relative;padding:6rem 0;overflow:hidden;background:var(--bg-base);border-bottom:1px solid var(--border-color);display:flex;align-items:center} .lb-bg{position:absolute;right:-10%;top:-20%;width:50%;height:140%;background:radial-gradient(ellipse,rgba(0,123,255,0.1) 0%,transparent 70%);transform:rotate(-15deg);pointer-events:none} .lb-content{display:flex;align-items:center;gap:4rem;position:relative;z-index:2} .lb-text{flex:1} .lb-text h2{font-size:2.5rem} .lb-visual{flex:1;text-align:right} .lb-visual img{width:100%;max-width:500px;border-radius:12px;border:1px solid var(--border-hover);box-shadow:0 0 30px var(--primary-glow)} .bg-surface{background:var(--bg-surface)} .objects-flex{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;max-width:900px;margin:0 auto} .obj-pill{padding:1rem 1.5rem;background:var(--bg-base);border:1px solid var(--border-color);border-radius:8px;font-weight:500;display:flex;align-items:center;gap:10px;transition:all 0.3s ease;cursor:default} .obj-pill iconify-icon{color:var(--primary);font-size:1.5rem} .obj-pill:hover{background:rgba(0,123,255,0.05);border-color:var(--primary);transform:scale(1.05)} .plugins-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem} .plugin-card{background:var(--bg-surface);padding:2rem 1rem;border:1px solid var(--border-color);border-radius:12px;transition:all 0.3s ease;text-align:center;cursor:default} .plugin-card:hover{transform:translateY(-5px);border-color:rgba(0,123,255,0.4);box-shadow:0 10px 20px rgba(0,0,0,0.4)} .plugin-card iconify-icon{font-size:3rem;margin-bottom:1rem} .plugin-card h4{font-size:0.9rem;margin:0;color:#fff} .audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem} .audience-card{padding:3rem;border-radius:16px;border:1px solid var(--border-color);position:relative;overflow:hidden;background:var(--bg-surface)} .audience-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.4s ease;z-index:0} .audience-card:hover::before{opacity:1} .audience-card>*{position:relative;z-index:1} .aud-icon{width:60px;height:60px;background:rgba(0,0,0,0.3);border-radius:12px;display:flex;justify-content:center;align-items:center;font-size:2rem;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,0.1)} .gamers-card:hover{border-color:#f97316} .gamers-card::before{background:radial-gradient(circle at top right,rgba(249,115,22,0.1) 0%,transparent 60%)} .gamers-card .aud-icon iconify-icon{color:#f97316} .devs-card:hover{border-color:var(--primary)} .devs-card::before{background:radial-gradient(circle at top right,rgba(0,123,255,0.1) 0%,transparent 60%)} .devs-card .aud-icon iconify-icon{color:var(--primary)} .community-section{padding:6rem 0;background:transparent} .discord-split{display:flex;align-items:center;gap:4rem;background:rgba(13,17,22,0.8);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:16px;padding:4rem;box-shadow:0 20px 50px rgba(0,0,0,0.5)} .discord-text{flex:1.2} .discord-logo-huge{font-size:4rem;color:#5865F2;margin-bottom:1rem;filter:drop-shadow(0 0 20px rgba(88,101,242,0.4))} .discord-text h2{font-size:2.2rem;margin-bottom:1rem} .discord-text p{font-size:1.05rem;margin-bottom:2rem;color:var(--text-muted)} .discord-perks{margin-bottom:2rem} .discord-perks li{display:flex;align-items:center;gap:10px;margin-bottom:0.8rem;font-weight:500;color:#e2e8f0} .discord-perks iconify-icon{color:#5865F2;font-size:1.2rem} .discord-widget{flex:1} .discord-widget iframe{border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.05)} @media(max-width:1200px){.main-features-grid{grid-template-columns:repeat(3,1fr)} .plugins-grid{grid-template-columns:repeat(3,1fr)} .hero-content{flex-direction:column;text-align:center} .hero-pills-container{justify-content:center} .discord-split{flex-direction:column;padding:2rem} .discord-widget iframe{height:350px}} @media(max-width:992px){.cap-grid{grid-template-columns:repeat(2,1fr)} .audience-grid{grid-template-columns:1fr} .lb-content{flex-direction:column;text-align:center} .lb-visual{margin-top:2rem}} @media(max-width:768px){.main-features-grid{grid-template-columns:1fr} .plugins-grid{grid-template-columns:repeat(2,1fr)} .cap-grid{grid-template-columns:1fr} .main-features-overlap{margin-top:2rem} .hero{padding:6rem 0} .banner-glass-card{padding:3rem 1.5rem}} .mt-5{margin-top:4rem} .object-category-title{font-size:1.4rem;color:#fff;margin:2rem 0 1.5rem;padding-bottom:0.8rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:12px;font-weight:600} .object-category-title iconify-icon{color:var(--primary);font-size:1.6rem;filter:drop-shadow(0 0 8px rgba(0,123,255,0.4))} .objects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem} .object-card{background:rgba(13,17,22,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden} .object-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:background 0.3s ease} .object-card:hover{background:rgba(13,17,22,0.8);transform:translateY(-4px);border-color:rgba(0,123,255,0.3);box-shadow:0 15px 30px rgba(0,0,0,0.4),inset 0 0 20px rgba(0,123,255,0.05)} .object-card:hover::before{background:linear-gradient(90deg,transparent,var(--primary),transparent)} .obj-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.2rem} .obj-icon{width:45px;height:45px;border-radius:10px;background:rgba(0,123,255,0.1);border:1px solid rgba(0,123,255,0.2);display:flex;align-items:center;justify-content:center;transition:all 0.3s ease} .obj-icon iconify-icon{font-size:1.5rem;color:var(--primary)} .object-card:hover .obj-icon{background:var(--primary);box-shadow:0 0 15px var(--primary-glow)} .object-card:hover .obj-icon iconify-icon{color:#fff} .object-card h4{font-size:1.1rem;margin-bottom:0.5rem;color:#fff;letter-spacing:0.5px} .object-card p{font-size:0.85rem;color:var(--text-muted);margin:0;line-height:1.5} .object-card.dev-tier::before{background:linear-gradient(90deg,transparent,rgba(168,85,247,0.2),transparent)} .object-card.dev-tier:hover{border-color:rgba(168,85,247,0.4);box-shadow:0 15px 30px rgba(0,0,0,0.4),inset 0 0 20px rgba(168,85,247,0.08)} .object-card.dev-tier:hover::before{background:linear-gradient(90deg,transparent,#a855f7,transparent)} .object-card.dev-tier .obj-icon{background:rgba(168,85,247,0.1);border-color:rgba(168,85,247,0.2)} .object-card.dev-tier .obj-icon iconify-icon{color:#a855f7} .object-card.dev-tier:hover .obj-icon{background:#a855f7;box-shadow:0 0 15px rgba(168,85,247,0.4)} .object-card.dev-tier:hover .obj-icon iconify-icon{color:#fff} .dev-badge{display:inline-flex;align-items:center;gap:4px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:20px;background:rgba(168,85,247,0.05);color:#c084fc;border:1px solid rgba(168,85,247,0.3);box-shadow:0 0 10px rgba(168,85,247,0.1)} .object-card{--accent:var(--primary);background:rgba(13,17,22,0.4);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:12px;padding:1.25rem;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden;display:flex;flex-direction:column} .object-card.dev-tier{--accent:#a855f7} .object-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.15);box-shadow:0 15px 30px rgba(0,0,0,0.4),inset 0 0 20px rgba(255,255,255,0.02);background:rgba(13,17,22,0.8)} .object-card h4{font-size:1.1rem;margin-top:1rem;margin-bottom:0.5rem;color:#fff} .object-card p{font-size:0.85rem;color:var(--text-muted);margin:0;line-height:1.5} .dev-badge{position:absolute;top:12px;right:12px;z-index:10;display:inline-flex;align-items:center;gap:4px;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:20px;background:rgba(168,85,247,0.1);color:#c084fc;border:1px solid rgba(168,85,247,0.3);backdrop-filter:blur(4px)} .obj-visual{height:110px;background:#050608;border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,0.5);transition:border-color 0.3s ease} .object-card:hover .obj-visual{border-color:rgba(255,255,255,0.1)} .obj-visual::before{content:'';position:absolute;width:100px;height:100px;background:var(--accent);filter:blur(50px);opacity:0.1;transition:opacity 0.3s ease} .object-card:hover .obj-visual::before{opacity:0.25} .mock-text{font-family:monospace;font-size:1.2rem;font-weight:bold;color:#fff;text-shadow:0 0 8px var(--accent);letter-spacing:2px} .mock-image{width:60px;height:40px;border:1px dashed var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);color:var(--accent);font-size:1.5rem} .mock-gif{border-style:solid;animation:pulseBorder 2s infinite} .mock-gif span{font-size:0.7rem;font-weight:bold;letter-spacing:1px} .mock-video{width:80px;height:45px;background:#111;border:1px solid #333;border-radius:4px;position:relative;display:flex;align-items:center;justify-content:center} .mock-play-btn{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--accent);filter:drop-shadow(0 0 5px var(--accent))} .mock-video-bar{position:absolute;bottom:4px;left:4px;right:4px;height:2px;background:rgba(255,255,255,0.2)} .mock-video-bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:40%;background:var(--accent)} .mock-ticker{width:80%;height:20px;background:#111;border-left:2px solid var(--accent);border-right:2px solid var(--accent);overflow:hidden;display:flex;align-items:center} .ticker-text{white-space:nowrap;font-size:0.6rem;color:var(--accent);animation:mockScroll 5s linear infinite} .mock-button{padding:6px 16px;background:var(--accent);color:#fff;font-size:0.7rem;font-weight:bold;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:transform 0.2s} .object-card:hover .mock-button{transform:scale(1.05);box-shadow:0 0 15px var(--accent)} .mock-input{width:70%;height:24px;background:#111;border:1px solid #333;border-radius:4px;color:#888;font-size:0.7rem;display:flex;align-items:center;padding:0 8px;font-family:monospace} .object-card:hover .mock-input{border-color:var(--accent)} .mock-cursor{display:inline-block;width:2px;height:10px;background:var(--accent);margin-left:2px;animation:blink 1s infinite} .mock-context{width:70%;height:45px;background:#111;border:1px solid #333;border-radius:4px;padding:6px;position:relative;display:flex;flex-direction:column;gap:4px} .object-card:hover .mock-context{border-color:var(--accent)} .mock-line{height:4px;background:rgba(255,255,255,0.1);border-radius:2px} .mock-scrollbar{position:absolute;right:2px;top:2px;bottom:2px;width:4px;background:#222;border-radius:2px} .mock-scrollbar::after{content:'';position:absolute;top:2px;right:1px;width:2px;height:15px;background:var(--accent);border-radius:2px} .mock-progress-container{width:70%;height:8px;background:#222;border-radius:4px;overflow:hidden} .mock-progress-fill{height:100%;width:0%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:mockFill 3s ease-in-out infinite} .mock-checkbox-group{display:flex;align-items:center;gap:8px} .mock-checkbox{width:16px;height:16px;border:2px solid #555;border-radius:3px;display:flex;align-items:center;justify-content:center;color:transparent;font-size:0.8rem;transition:all 0.3s} .object-card:hover .mock-checkbox{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 10px var(--accent)} .mock-check-label{font-size:0.7rem;color:#888} .mock-slider-track{width:70%;height:4px;background:#333;border-radius:2px;position:relative} .mock-slider-fill{width:60%;height:100%;background:var(--accent);border-radius:2px} .mock-slider-thumb{position:absolute;top:50%;left:60%;transform:translate(-50%,-50%);width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 0 8px var(--accent)} .mock-toggle{width:36px;height:20px;background:#333;border-radius:10px;position:relative;transition:background 0.3s} .mock-toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform 0.3s} .object-card:hover .mock-toggle{background:var(--accent);box-shadow:0 0 10px rgba(168,85,247,0.4)} .object-card:hover .mock-toggle-knob{transform:translateX(16px)} .mock-slider{width:80px;height:45px;background:#111;border:1px solid #333;border-radius:4px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 4px} .mock-arrow{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent} .mock-arrow.left{border-right:6px solid #555} .mock-arrow.right{border-left:6px solid #555} .mock-slide{width:40px;height:25px;border:1px dashed var(--accent);border-radius:2px} .mock-dots{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:3px} .mock-dots span{width:3px;height:3px;background:#555;border-radius:50%} .mock-dots span.active{background:var(--accent)} @keyframes mockScroll{0%{transform:translateX(100%)} 100%{transform:translateX(-150%)}} @keyframes blink{0%,100%{opacity:1} 50%{opacity:0}} @keyframes mockFill{0%{width:0%} 50%{width:80%} 100%{width:0%}} @keyframes pulseBorder{0%,100%{border-color:rgba(0,123,255,0.2)} 50%{border-color:var(--accent);box-shadow:0 0 10px inset rgba(0,123,255,0.2)}} .mock-image-button{position:relative;width:80px;height:35px;border-radius:6px;overflow:hidden} .ib-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:0.6rem;font-weight:bold;transition:opacity 0.3s} .ib-idle{background:rgba(255,255,255,0.05);border:1px dashed #555;color:#888} .ib-hover{background:rgba(0,123,255,0.15);border:1px solid var(--accent);color:var(--accent);opacity:0;box-shadow:inset 0 0 10px var(--accent)} .object-card:hover .ib-idle{opacity:0} .object-card:hover .ib-hover{opacity:1} .mock-listbox{width:70%;height:55px;background:#111;border:1px solid #333;border-radius:4px;padding:4px;position:relative;display:flex;flex-direction:column;gap:2px} .object-card:hover .mock-listbox{border-color:var(--accent)} .mock-list-item{font-size:0.55rem;color:#888;padding:2px 4px;border-radius:2px} .mock-list-item.active{background:var(--accent);color:#fff;box-shadow:0 0 5px var(--accent)} .mock-webview{width:80px;height:50px;background:#111;border:1px solid #333;border-radius:4px;display:flex;flex-direction:column;overflow:hidden} .object-card:hover .mock-webview{border-color:var(--accent);box-shadow:0 0 10px rgba(0,123,255,0.2)} .mock-browser-top{height:10px;background:#222;display:flex;align-items:center;gap:3px;padding-left:4px} .mock-browser-top span{width:4px;height:4px;border-radius:50%;background:#555} .object-card:hover .mock-browser-top span:nth-child(1){background:#ff5f56} .object-card:hover .mock-browser-top span:nth-child(2){background:#ffbd2e} .object-card:hover .mock-browser-top span:nth-child(3){background:#27c93f} .mock-browser-content{flex:1;background:rgba(255,255,255,0.02)} .mock-update-check{position:relative;font-size:2rem;color:#555;transition:color 0.3s;display:flex;align-items:center;justify-content:center} .object-card:hover .mock-update-check{color:var(--accent);text-shadow:0 0 15px var(--accent)} .mock-sync-ring{position:absolute;inset:-5px;border:1px dashed transparent;border-radius:50%;transition:all 0.3s} .object-card:hover .mock-sync-ring{border-color:var(--accent);animation:rotateSync 4s linear infinite} @keyframes rotateSync{100%{transform:rotate(360deg)}} .mock-query{font-family:monospace;font-size:0.65rem;color:#888;background:#111;padding:4px 8px;border-radius:4px;border:1px solid #333} .mock-query .method{color:#27c93f;font-weight:bold;margin-right:4px} .object-card:hover .mock-query{border-color:var(--accent);box-shadow:0 0 10px rgba(0,123,255,0.1)} .mock-json{font-family:monospace;font-size:0.65rem;color:#888;display:flex;flex-direction:column} .json-indent{padding-left:10px;color:#fff} .json-val{color:var(--accent);text-shadow:0 0 5px var(--accent)} .object-card:hover .mock-json{transform:scale(1.05)} .launchboost-integration{position:relative;padding:7rem 0;background:var(--bg-base);border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);overflow:hidden} .lb-glow-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(0,123,255,0.08) 0%,transparent 60%);pointer-events:none;z-index:0} .lb-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:40px 40px;opacity:0.5;z-index:0;mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%)} .lb-header{text-align:center;max-width:800px;margin:0 auto 3rem} .lb-brand-logo{max-width:280px;margin-bottom:1.5rem;filter:drop-shadow(0 0 20px rgba(0,123,255,0.3))} .lb-header h2{font-size:2.8rem;margin-bottom:1rem} .lb-lead{font-size:1.1rem;color:var(--text-muted);line-height:1.6} .lb-requirements{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem} .req-badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 18px;border-radius:30px;font-size:0.85rem;font-weight:600;background:rgba(13,17,22,0.8);backdrop-filter:blur(10px);border:1px solid var(--border-color);box-shadow:0 4px 15px rgba(0,0,0,0.3);white-space:nowrap} .req-badge iconify-icon{font-size:1.2rem} .lb-free-badge{color:#10b981;border-color:rgba(16,185,129,0.3)} .lb-sub-badge{color:var(--primary);border-color:rgba(0,123,255,0.3)} .lb-dev-badge{color:#a855f7;border-color:rgba(168,85,247,0.4)} .lb-patch-highlight{max-width:850px;margin:0 auto 4rem auto;text-align:center;background:linear-gradient(180deg,rgba(0,123,255,0.08) 0%,rgba(13,17,22,0.4) 100%);border:1px solid rgba(0,123,255,0.2);border-radius:16px;padding:2.5rem;box-shadow:inset 0 0 30px rgba(0,123,255,0.05),0 10px 30px rgba(0,0,0,0.3);backdrop-filter:blur(8px);position:relative;overflow:hidden} .lb-patch-highlight::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent)} .highlight-icon{font-size:3rem;color:var(--primary);margin-bottom:1rem;filter:drop-shadow(0 0 15px var(--primary-glow))} .lb-patch-highlight h3{font-size:1.8rem;color:#fff;margin-bottom:0.8rem} .lb-patch-highlight p{font-size:1.05rem;color:var(--text-muted);margin:0;line-height:1.6} .lb-patch-highlight strong{color:#fff;background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,0.1)} .lb-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:5rem} .lb-step-card{background:rgba(13,17,22,0.5);border:1px solid var(--border-color);border-radius:12px;padding:2.5rem 2rem;position:relative;overflow:hidden;transition:all 0.3s ease} .lb-step-card:hover{background:rgba(13,17,22,0.9);border-color:rgba(0,123,255,0.4);box-shadow:0 10px 30px rgba(0,123,255,0.1);transform:translateY(-5px)} .step-number{position:absolute;top:-10px;right:10px;font-size:6rem;font-weight:800;color:rgba(255,255,255,0.03);line-height:1;transition:color 0.3s ease} .lb-step-card:hover .step-number{color:rgba(0,123,255,0.08)} .lb-step-card h4{font-size:1.2rem;color:#fff;margin-bottom:0.8rem;position:relative;z-index:2} .lb-step-card p{font-size:0.9rem;margin:0;position:relative;z-index:2} .lb-advanced-panel{display:flex;align-items:center;gap:4rem;background:linear-gradient(145deg,rgba(13,17,22,0.8) 0%,rgba(5,6,8,0.9) 100%);border:1px solid rgba(255,255,255,0.05);border-radius:16px;padding:4rem;box-shadow:inset 0 0 40px rgba(0,123,255,0.03),0 20px 40px rgba(0,0,0,0.5)} .lb-advanced-text{flex:1.1} .lb-advanced-visual{flex:1;display:flex;justify-content:flex-end} .lb-feature-tag{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem} .lb-advanced-text h3{font-size:2.2rem;margin-bottom:1.5rem} .lb-feature-list{margin-top:2rem} .lb-feature-list li{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem} .lb-feature-list iconify-icon{color:var(--primary);font-size:1.5rem;margin-top:2px;filter:drop-shadow(0 0 8px rgba(0,123,255,0.5))} .lb-feature-list strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:4px} .lb-feature-list span{display:block;font-size:0.9rem;color:var(--text-muted)} .electric-code{background:rgba(0,123,255,0.1);color:#60a5fa;padding:2px 6px;border-radius:4px;border:1px solid rgba(0,123,255,0.2);font-family:monospace;font-size:0.85rem} .tcp-mockup-card{width:100%;max-width:450px;display:flex;flex-direction:column;align-items:center} .tcp-process{width:100%;background:#0d1116;border:1px solid #30363d;border-radius:10px;padding:1.5rem;position:relative;box-shadow:0 10px 30px rgba(0,0,0,0.5)} .tcp-header{font-size:0.65rem;font-weight:700;letter-spacing:1px;color:#8b949e;text-transform:uppercase;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center} .tcp-header::after{content:'';flex:1;height:1px;background:#30363d;margin-left:10px} .top-process .tcp-code{font-family:monospace;font-size:1.1rem;color:#fff;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:1rem} .pulsing-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:pulse 1.5s infinite} .top-process .tcp-status{font-family:monospace;font-size:0.8rem;color:#8b949e;line-height:1.6} .tcp-stream-line{height:60px;width:2px;background:rgba(0,123,255,0.3);margin:10px 0;position:relative;display:flex;align-items:center;justify-content:center} .tcp-stream-line span{position:absolute;left:15px;font-size:0.65rem;font-weight:700;color:var(--primary);letter-spacing:1px} .stream-dot{width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 10px #fff,0 0 20px var(--primary);animation:streamDown 2s linear infinite} .bottom-process{border-color:rgba(0,123,255,0.3);box-shadow:0 0 30px rgba(0,123,255,0.05)} .ui-mockup-bar{margin-bottom:1.5rem} .ui-bar-text{display:flex;justify-content:space-between;font-size:0.85rem;color:#fff;margin-bottom:8px} .ui-bar-text span:last-child{color:var(--primary);font-weight:bold} .ui-bar-track{width:100%;height:6px;background:#21262d;border-radius:3px;overflow:hidden} .ui-bar-fill{width:45%;height:100%;background:var(--primary);box-shadow:0 0 10px var(--primary)} .ui-mockup-bind{font-size:0.8rem;color:#8b949e} @keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.3}} @keyframes streamDown{0%{transform:translateY(-30px);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translateY(30px);opacity:0}} @media(max-width:992px){.lb-steps-grid{grid-template-columns:1fr;gap:1rem} .lb-advanced-panel{flex-direction:column;padding:2.5rem} .lb-advanced-visual{width:100%;justify-content:center;margin-top:2rem}} .interactive-plugins-section{position:relative;padding:1rem 0;overflow:hidden;border-top:1px solid var(--border-color)} .plugins-showcase-wrapper{display:flex;gap:2.5rem;max-width:1150px;margin:0 auto;background:rgba(13,17,22,0.4);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,0.5)} .plugins-nav{flex:0 0 260px;display:flex;flex-direction:column;gap:0.5rem;max-height:600px;overflow-y:auto;padding-right:10px} .plugins-nav::-webkit-scrollbar{width:6px} .plugins-nav::-webkit-scrollbar-track{background:rgba(255,255,255,0.02);border-radius:4px} .plugins-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px} .plugins-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)} .plugin-nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);background:rgba(255,255,255,0.01);position:relative;overflow:hidden} .plugin-nav-item:hover:not(.disabled){background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)} .plugin-nav-item.active{background:linear-gradient(90deg,rgba(255,255,255,0.03) 0%,transparent 100%);border-color:var(--brand);box-shadow:inset 4px 0 0 var(--brand),inset 0 0 20px rgba(255,255,255,0.02)} .plugin-nav-item.disabled{opacity:0.5;cursor:not-allowed;filter:grayscale(100%)} .nav-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--text-muted);transition:all 0.3s} .plugin-nav-item.active .nav-icon{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 15px var(--brand)} .nav-info h4{font-size:0.95rem;margin:0 0 3px 0;color:#fff} .plugin-nav-item.active .nav-info h4{color:var(--brand);text-shadow:0 0 10px rgba(255,255,255,0.2)} .plugins-display{flex:1;position:relative;background:#050608;border-radius:12px;border:1px solid rgba(255,255,255,0.04);overflow:hidden} .plugin-pane{position:absolute;inset:0;padding:2.5rem;opacity:0;visibility:hidden;transform:translateY(15px);transition:all 0.4s cubic-bezier(0.16,1,0.3,1);display:flex;flex-direction:column} .plugin-pane.active{opacity:1;visibility:visible;transform:translateY(0);position:relative} .pane-header,.pane-body{position:relative;z-index:2} .plugin-pane::before{content:'';position:absolute;top:-50px;right:-50px;width:300px;height:300px;background:var(--brand);filter:blur(120px);opacity:0.15;pointer-events:none;z-index:0} .plugin-pane::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,6,8,0.2) 0%,rgba(5,6,8,0.8) 90%,#050608 100%),var(--pane-bg) no-repeat;background-size:cover;background-position:center 20%;opacity:0.4;filter:blur(2px);z-index:0;pointer-events:none} .pane-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,0.05)} .pane-icon-large{width:65px;height:65px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--brand);box-shadow:inset 0 0 20px var(--brand-glow)} .pane-header h3{font-size:1.8rem;margin:0 0 4px 0;color:#fff} .pane-header p{margin:0;color:var(--brand);font-weight:500;letter-spacing:0.5px} .pane-lead{font-size:1.05rem;color:#cbd5e1;line-height:1.7;margin-bottom:2.5rem;max-width:90%} .pane-features{display:grid;grid-template-columns:1fr 1fr;gap:2rem;list-style:none;padding:0;margin:0} .pane-features li{display:flex;align-items:flex-start;gap:12px;font-size:0.95rem;color:var(--text-muted);line-height:1.6} .pane-features iconify-icon{color:var(--brand);font-size:1.4rem;margin-top:3px;flex-shrink:0} .pane-features strong{color:#fff;display:block;margin-bottom:4px;font-size:1rem} @media(max-width:992px){.plugins-showcase-wrapper{flex-direction:column} .plugins-nav{flex:none;max-height:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding-right:0} .pane-features{grid-template-columns:1fr;gap:1.5rem} .pane-lead{max-width:100%}} @media(max-width:768px){.plugins-nav{grid-template-columns:1fr}} .editor-showcase-section{position:relative;padding:8rem 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);overflow:hidden} .showcase-header-split{display:flex;justify-content:space-between;align-items:flex-end;max-width:1050px;margin:0 auto 5rem;gap:4rem;text-align:left} .showcase-header-left{flex:1.3} .showcase-header-right{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;padding-bottom:0.5rem} .electric-badge{display:inline-flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--primary);background:rgba(0,123,255,0.1);border:1px solid rgba(0,123,255,0.3);padding:6px 14px;border-radius:30px;margin-bottom:1.5rem;box-shadow:0 0 15px rgba(0,123,255,0.15)} .electric-badge iconify-icon{font-size:1.1rem} .showcase-title{font-size:clamp(2.5rem,4vw,3.8rem);line-height:1.1;letter-spacing:-1px;margin-bottom:0} .showcase-subtitle{font-size:1.05rem;color:var(--text-muted);line-height:1.7;margin:0} .showcase-btn{padding:0.8rem 1.8rem;font-size:0.95rem;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.01) 100%);border:1px solid rgba(255,255,255,0.1);color:#fff;transition:all 0.3s ease} .showcase-btn:hover{background:var(--primary);border-color:var(--primary);box-shadow:0 10px 25px var(--primary-glow);transform:translateY(-2px)} @media(max-width:992px){.showcase-header-split{flex-direction:column;align-items:flex-start;gap:2rem;margin-bottom:4rem}} .editor-workspace{position:relative;max-width:900px;margin:0 auto;perspective:1200px;transform-style:preserve-3d} .workspace-main-img{width:100%;height:auto;aspect-ratio:1920 / 1052;display:block;border-radius:12px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 30px 80px rgba(0,0,0,0.8),0 0 40px rgba(0,123,255,0.2);position:relative;z-index:2} .floating-panel{position:absolute;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.15);box-shadow:0 20px 40px rgba(0,0,0,0.7),0 0 20px rgba(0,123,255,0.1);z-index:3;animation:floatPanel 6s ease-in-out infinite;background:#0a0c10} .floating-panel img{display:block;width:100%;height:auto} .float-left{top:-10%;left:-15%;width:350px} .float-right{bottom:-15%;right:-10%;width:400px;z-index:4} .float-top-right{top:15%;right:-20%;width:200px;z-index:1;filter:brightness(0.7)} .delay-1{animation-delay:0s} .delay-2{animation-delay:-2s} .delay-3{animation-delay:-4s} @keyframes floatPanel{0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)}} @media(max-width:1100px){.float-left{left:-5%;width:280px} .float-right{right:-5%;width:320px} .float-top-right{right:-10%}} @media(max-width:768px){.floating-panel{display:none} .editor-workspace{max-width:90%}} .bento-features-section{position:relative;padding:8rem 0;background:var(--bg-base);border-top:1px solid var(--border-color)} .inline-badge{margin-bottom:1.5rem;display:inline-flex} .bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto} .bento-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:16px;padding:2.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)} .bento-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,0.15);box-shadow:0 20px 40px rgba(0,0,0,0.5),inset 0 0 20px rgba(255,255,255,0.02)} .bento-content{position:relative;z-index:2;flex:1} .bento-icon{width:50px;height:50px;border-radius:12px;background:rgba(0,123,255,0.1);border:1px solid rgba(0,123,255,0.2);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--primary);margin-bottom:1.5rem} .bento-card h3{font-size:1.3rem;margin-bottom:0.8rem;color:#fff;letter-spacing:-0.5px} .bento-card p{font-size:0.95rem;color:var(--text-muted);line-height:1.6;margin:0} .bento-list{display:flex;flex-direction:column;gap:0.5rem} .bento-list li{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:#cbd5e1} .bento-list iconify-icon{color:var(--primary)} .bento-square{grid-column:span 1} .bento-wide{grid-column:span 2;display:flex;flex-direction:row;gap:2rem;padding:0} .bento-wide .bento-content{padding:2.5rem;flex:1} .bento-visual{flex:1;position:relative;background:rgba(0,0,0,0.2);border-left:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;overflow:hidden} .bento-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:background 0.3s} .bento-card:hover::before{background:linear-gradient(90deg,transparent,var(--primary),transparent)} .bento-dev::before{background:linear-gradient(90deg,transparent,rgba(168,85,247,0.2),transparent)} .bento-dev:hover::before{background:linear-gradient(90deg,transparent,#a855f7,transparent)} .bento-dev .bento-icon{background:rgba(168,85,247,0.1);border-color:rgba(168,85,247,0.2);color:#a855f7} .abstract-visual{background:radial-gradient(circle at center,rgba(0,123,255,0.08) 0%,transparent 70%);display:flex;justify-content:center;align-items:center} .layer-stack{position:relative;width:200px;height:140px;transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-45deg);transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)} .bento-canvas:hover .layer-stack{transform:rotateX(50deg) rotateZ(-40deg)} .layer{position:absolute;inset:0;background:rgba(13,17,22,0.7);border:1px solid rgba(255,255,255,0.05);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.9rem;font-weight:600;color:var(--text-muted);backdrop-filter:blur(8px);transition:all 0.5s cubic-bezier(0.16,1,0.3,1)} .layer-3{transform:translateZ(-30px);opacity:0.4} .layer-2{transform:translateZ(0px);opacity:0.7;border-color:rgba(255,255,255,0.1)} .layer-1{transform:translateZ(30px);background:rgba(0,123,255,0.15);border-color:rgba(0,123,255,0.4);color:#fff;box-shadow:-15px 15px 30px rgba(0,123,255,0.15)} .layer-1 iconify-icon{color:var(--primary)} .bento-canvas:hover .layer-1{transform:translateZ(50px) translateX(-5px) translateY(5px);box-shadow:-20px 20px 40px rgba(0,123,255,0.2)} .bento-canvas:hover .layer-3{transform:translateZ(-50px) translateX(5px) translateY(-5px)} .mock-hash-check{display:flex;align-items:center;gap:1.5rem} .lock-icon{font-size:3rem;color:var(--primary);filter:drop-shadow(0 0 15px rgba(0,123,255,0.4))} .hash-lines{display:flex;flex-direction:column;gap:8px;width:150px} .hash-lines .line{height:6px;background:#30363d;border-radius:3px;overflow:hidden;position:relative} .hash-lines .line::after{content:'';position:absolute;top:0;left:0;height:100%;width:40%;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:mockScan 2s ease-in-out infinite} .delay-1::after{animation-delay:0.3s} .delay-2::after{animation-delay:0.6s} @keyframes mockScan{0%{transform:translateX(-100%)} 100%{transform:translateX(300%)}} @media(max-width:992px){.bento-grid{grid-template-columns:repeat(2,1fr)} .bento-wide{grid-column:span 2}} @media(max-width:768px){.bento-grid{grid-template-columns:1fr} .bento-square,.bento-wide{grid-column:span 1} .bento-wide{flex-direction:column} .bento-wide .bento-visual{padding:2rem 0;border-left:none;border-top:1px solid var(--border-color)}} .showcase-gallery-section{position:relative;padding:7rem 0;background:#030405;border-top:1px solid var(--border-color)} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto} .gallery-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16 / 9;cursor:pointer;border:1px solid rgba(255,255,255,0.05);background:#0a0c10;box-shadow:0 10px 20px rgba(0,0,0,0.5);transform:translateZ(0);transition:all 0.3s cubic-bezier(0.16,1,0.3,1)} .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)} .gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,123,255,0.6) 0%,rgba(13,17,22,0.4) 100%);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease} .gallery-overlay iconify-icon{font-size:3rem;color:#fff;filter:drop-shadow(0 0 15px rgba(255,255,255,0.5));transform:scale(0.5);transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275)} .gallery-item:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:0 15px 30px rgba(0,0,0,0.8),0 0 20px rgba(0,123,255,0.2);z-index:2} .gallery-item:hover img{transform:scale(1.05)} .gallery-item:hover .gallery-overlay{opacity:1} .gallery-item:hover .gallery-overlay iconify-icon{transform:scale(1)} .lightbox-modal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease} .lightbox-modal.active{opacity:1;pointer-events:all} .lightbox-backdrop{position:absolute;inset:0;background:rgba(3,4,5,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .lightbox-close{position:absolute;top:30px;right:40px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#fff;font-size:2rem;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:all 0.2s} .lightbox-close:hover{background:rgba(255,59,48,0.2);border-color:#ff3b30;color:#ff3b30;transform:scale(1.1) rotate(90deg)} .lightbox-content-wrapper{position:relative;z-index:1;max-width:90vw;max-height:90vh;transform:scale(0.95);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275)} .lightbox-modal.active .lightbox-content-wrapper{transform:scale(1)} .lightbox-image{max-width:100%;max-height:90vh;border-radius:12px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 30px 80px rgba(0,0,0,0.8),0 0 50px rgba(0,123,255,0.2);display:block} @media(max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr)} .lightbox-close{top:15px;right:15px;width:40px;height:40px;font-size:1.5rem}} @media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}