.demo4-root{--primary:#ff3b3b;--primary-glow:#ff3b3b80;--secondary:#ffc107;--dark-bg:#0a0a0a;--card-bg:#141414;--text-main:#fff;--text-muted:#aaa;--transition-smooth:all .3s cubic-bezier(.25, .8, .25, 1);background-color:var(--dark-bg);color:var(--text-main);scroll-behavior:smooth;min-height:100vh;font-family:Segoe UI,system-ui,sans-serif;overflow-x:hidden}.demo4-root *{box-sizing:border-box}.demo4-root h1,.demo4-root h2,.demo4-root h3,.demo4-root h4,.demo4-root p{margin:0}.demo4-root ul{margin:0;padding:0}.demo4-root header{z-index:1000;width:100%;transition:var(--transition-smooth);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0a0a0a4d;justify-content:space-between;align-items:center;padding:20px 5%;display:flex;position:fixed;top:0}.demo4-root header.scrolled{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#0a0a0af2;border-bottom:1px solid #ff3b3b33;padding:15px 5%;box-shadow:0 5px 20px #00000080}.demo4-root .logo h1{color:var(--text-main);letter-spacing:2px;cursor:pointer;font-size:2rem}.demo4-root .logo h1 span{color:var(--primary)}.demo4-root nav ul{gap:30px;list-style:none;display:flex}.demo4-root nav a{color:var(--text-main);padding-bottom:5px;font-weight:500;text-decoration:none;transition:color .3s;position:relative}.demo4-root nav a:after{content:"";background-color:var(--primary);width:0%;height:2px;transition:width .3s;position:absolute;bottom:0;left:0}.demo4-root nav a:hover,.demo4-root nav a.active{color:var(--primary)}.demo4-root nav a.active:after{width:100%}.demo4-root .hero{text-align:center;background:linear-gradient(#0a0a0acc,#0a0a0ae6),url(https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80) 50%/cover;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:0 20px;display:flex}.demo4-root .hero h2{text-transform:uppercase;color:var(--text-main);text-shadow:2px 2px 10px #000c;opacity:0;margin-bottom:15px;font-size:5vw;font-weight:800;animation:1s .5s forwards demo4FadeInUp;transform:translateY(30px)}.demo4-root .hero h2 span{color:var(--primary)}.demo4-root .hero p{color:#ddd;opacity:0;max-width:700px;margin-bottom:40px;font-size:1.2rem;animation:1s .8s forwards demo4FadeInUp;transform:translateY(30px)}.demo4-root .pulse-btn{background-color:var(--primary);color:#fff;box-shadow:0 0 15px var(--primary-glow);transition:var(--transition-smooth);opacity:0;border-radius:50px;padding:15px 35px;font-size:1.2rem;font-weight:700;text-decoration:none;animation:1s 1.1s forwards demo4FadeInUp,2s 2s infinite demo4Pulse;display:inline-block}.demo4-root .pulse-btn:hover{box-shadow:0 10px 25px var(--primary-glow);background-color:#ff1c1c;transform:translateY(-3px)scale(1.05)}.demo4-root .section-padding{padding:100px 5%}.demo4-root .section-title{text-align:center;color:var(--text-main);margin-bottom:30px;font-size:2.5rem}.demo4-root .section-title span{color:var(--primary)}.demo4-root .gallery-filters{flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:40px;display:flex}.demo4-root .filter-btn{border:1px solid var(--primary);color:var(--text-main);cursor:pointer;transition:var(--transition-smooth);background:0 0;border-radius:30px;padding:8px 25px;font-size:1rem;font-weight:500}.demo4-root .filter-btn:hover,.demo4-root .filter-btn.active{background:var(--primary);color:#fff;box-shadow:0 0 10px var(--primary-glow)}.demo4-root .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.demo4-root .gallery-item{cursor:pointer;opacity:0;border-radius:10px;height:280px;transition:transform .4s,opacity .4s;position:relative;overflow:hidden;transform:scale(.9)}.demo4-root .gallery-item.visible{opacity:1;transform:scale(1)}.demo4-root .gallery-item.hide{display:none}.demo4-root .gallery-item img{object-fit:cover;width:100%;height:100%;transition:transform .6s}.demo4-root .gallery-item:hover img{transform:scale(1.1)}.demo4-root .gallery-overlay{opacity:0;background:linear-gradient(#0003,#000000e6);align-items:flex-end;padding:20px;transition:opacity .4s;display:flex;position:absolute;inset:0}.demo4-root .gallery-item:hover .gallery-overlay{opacity:1}.demo4-root .gallery-overlay h4{color:var(--secondary);font-size:1.3rem;transition:transform .4s;transform:translateY(20px)}.demo4-root .gallery-item:hover .gallery-overlay h4{transform:translateY(0)}.demo4-root .about-section{background-color:#0f0f0f;flex-wrap:wrap;justify-content:center;align-items:center;gap:50px;display:flex}.demo4-root .about-text{opacity:0;max-width:500px;transition:all 1s;transform:translate(-50px)}.demo4-root .about-text.visible{opacity:1;transform:translate(0)}.demo4-root .about-text p{color:var(--text-muted);margin-bottom:20px;font-size:1.1rem}.demo4-root .about-img-container{opacity:0;border:3px solid #222;border-radius:20px;width:400px;height:400px;transition:all 1s;overflow:hidden;transform:translate(50px)}.demo4-root .about-img-container.visible{opacity:1;transform:translate(0)}.demo4-root .about-img-container img{object-fit:cover;width:100%;height:100%}.demo4-root footer{border-top:2px solid var(--primary);background-color:#050505;padding:80px 5% 30px}.demo4-root .footer-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px;display:grid}.demo4-root .footer-col h3{color:var(--primary);margin-bottom:25px;font-size:1.5rem}.demo4-root .footer-col p,.demo4-root .footer-col ul{color:var(--text-muted);list-style:none}.demo4-root .footer-col ul li{align-items:center;margin-bottom:15px;display:flex}.demo4-root .footer-col ul li a{color:var(--text-muted);align-items:center;text-decoration:none;transition:color .3s;display:flex}.demo4-root .footer-col ul li a:hover{color:var(--secondary);padding-left:5px}.demo4-root .footer-col ul li svg{color:var(--primary);vertical-align:middle;width:20px;margin-right:10px;display:inline-block}.demo4-root .social-icons{gap:15px;margin-top:20px;display:flex}.demo4-root .social-icons a{color:#fff;background-color:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;margin:0;padding:0;line-height:1;text-decoration:none;display:flex}.demo4-root .social-icons a:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-5px)}.demo4-root .footer-bottom{text-align:center;color:#666;border-top:1px solid #222;padding-top:30px;font-size:.9rem}@keyframes demo4FadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes demo4Pulse{0%{box-shadow:0 0 #ff3b3bb3}70%{box-shadow:0 0 0 15px #ff3b3b00}to{box-shadow:0 0 #ff3b3b00}}@media (max-width:768px){.demo4-root nav ul{display:none}.demo4-root .hero h2{font-size:2.5rem}}