*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:radial-gradient(circle at 20% 20%,#280013 0%,#09030b 45%,#000 100%);color:#ffe6e6;min-height:100vh;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:y proximity} .container{width:min(1100px,94%);margin:0 auto} .navbar{position:sticky;top:0;background:rgba(18,5,8,.88);border-bottom:1px solid rgba(255,0,0,.55);padding:.8rem 0;backdrop-filter:blur(11px);z-index:50;animation:slideDown .6s ease-out both} .navbar .container{display:flex;justify-content:space-between;align-items:center} .logo h1{color:#FFD700;font-weight:900;letter-spacing:2.2px;font-size:1.7rem;text-shadow:0 0 12px rgba(255,200,20,.9)} .nav-links{display:flex;gap:1.1rem} .nav-links a{color:#f8b3b3;text-decoration:none;font-weight:700;padding:6px 10px;border-radius:7px;transition:transform .2s ease,background .25s ease,box-shadow .25s ease} .nav-links a:hover,.nav-links a.active{background:rgba(255,0,0,.4);color:#fff; transform:scale(1.06);box-shadow:0 0 12px rgba(255,0,0,.65)} .hero{padding:90px 0;background:linear-gradient(135deg,rgba(4,24,54,.95),rgba(8,40,88,.85) 70%,rgba(1,12,31,.94));text-align:center;overflow:hidden;position:relative;animation:fadeInUp .6s ease both;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;box-shadow:0 25px 55px rgba(0,0,0,.45);scroll-snap-align:start;} .hero:before{content:'';position:absolute;inset:0;opacity:.16;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 100 100%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2240%22 fill=%22none%22 stroke=%22rgba(255,255,255,.08)%22 stroke-width=%222%22/%3E%3C/svg%3E') repeat center /125px 125px;pointer-events:none} .official-badge{display:inline-block;padding:6px 15px;border-radius:15px;background:linear-gradient(135deg,rgba(255,154,72,.95),rgba(255,128,27,.91));color:#081d3f;margin-bottom:16px;font-size:.85rem;letter-spacing:.11rem;box-shadow:0 0 22px rgba(255,140,64,.9);animation:badgePunch 1.5s ease infinite alternate} .hero h1{font-size:4.1rem;color:#FFD700;margin-bottom:.35rem;text-shadow:0 0 24px rgba(255,168,25,.85),0 0 48px rgba(255,96,34,.45);animation:heroPulse 3s ease-in-out infinite} .hero .hero-subtitle{color:#ff9a9a;font-size:1.55rem;margin-bottom:.4rem} .hero .hero-desc{color:#f6d2d2;font-size:1.04rem;max-width:660px;margin:0 auto 1.5rem;opacity:.95} .cta-button{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FFD61B,#FF9900);color:#000;border:1px solid #ffd51e;border-radius:999px;padding:12px 26px;font-size:1.05rem;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 8px 18px rgba(255,186,0,.3)} .cta-button:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(255,180,0,.45)} .section-title{text-align:center;color:#FFD700;margin-bottom:30px;text-transform:uppercase;letter-spacing:.16em;font-size:2.3rem;text-shadow:0 0 14px rgba(255,215,0,.5);animation:sectionGlow 3.2s ease-in-out infinite} .services,.products,.contact{padding:70px 0;scroll-snap-align:start;} .services-grid,.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem} .products-grid{grid-template-columns:repeat(3,1fr)} .product-card,.service-card{background:rgba(34,10,10,.82);border:1px solid rgba(255,0,0,.43);border-radius:14px;padding:18px;box-shadow:0 14px 35px rgba(255,0,0,.22);transform:translateY(30px);opacity:0;animation:cardFloater .8s ease forwards;transition:transform .25s ease,box-shadow .25s ease} .product-card:nth-of-type(1){animation-delay:.15s}.product-card:nth-of-type(2){animation-delay:.25s}.product-card:nth-of-type(3){animation-delay:.35s}.service-card:nth-of-type(1){animation-delay:.18s}.service-card:nth-of-type(2){animation-delay:.27s}.service-card:nth-of-type(3){animation-delay:.36s}.product-card.coming-soon{opacity:.5;pointer-events:none} .product-card:hover,.service-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 48px rgba(106,165,255,.6),0 0 12px rgba(255,120,95,.80);} .service-icon{font-size:2.4rem;margin-bottom:10px;color:#ffb48a} .service-card h3,.product-card h3{color:#ffeec7;margin-bottom:8px;text-transform:uppercase} .service-card p,.product-card .description{color:#f2cfcf;font-size:.94rem;margin-bottom:12px} .features ul{list-style:none;padding:0;margin:0} .features li{color:#ffc2c2;margin-bottom:6px;font-weight:600} .product-image{height:245px;border-radius:12px;margin-bottom:14px;background:#120308;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:transform .25s ease} .product-image:hover{transform:scale(1.02)} .product-image img{max-width:100%;max-height:100%} .price-tag{display:flex;align-items:flex-end;justify-content:center;gap:.4rem;margin-bottom:11px} .price{font-size:2.4rem;font-weight:800;color:#FFD700} .currency{color:#ffb2b2} .buy-button{width:100%;border:1px solid #FFD700;border-radius:9px;color:#000;background:#FFD700;padding:10px;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;outline:none} .buy-button:hover:not(:disabled){transform:translateY(-2px) scale(1.01);box-shadow:0 12px 24px rgba(255,215,0,.45)} .buy-button:active:not(:disabled){transform:scale(.98)} .promoting {animation:buttonFlash 1.2s ease infinite alternate} .contact .container h2{opacity:1;transform:none;transition:none} .contact-info{background:rgba(15,0,0,.85);border-left:2px solid rgba(255,60,60,.8);padding:20px;border-radius:12px;color:#ffcfcf;opacity:1;transform:none;transition:none} .contact-info a{color:#FFD700;text-decoration:none;transition:color .2s ease} .contact-info a:hover{text-decoration:underline;color:#ffdc6b} .footer{text-align:center;padding:20px 0;color:#e0bebe;border-top:1px solid rgba(255,0,0,.25)} .modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.65);backdrop-filter:blur(4px)} .modal.show{display:flex;align-items:center;justify-content:center} .modal-content{background:rgba(8,17,35,.78);border:1px solid rgba(82,180,255,.5);border-radius:15px;padding:0;box-shadow:0 22px 70px rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);width:90%;max-width:450px} .modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(80,170,255,.35)} .modal-header h2{color:#FFD700;font-size:1.5rem;margin:0} .close-modal{color:#ffc2c2;font-size:28px;cursor:pointer;transition:color .2s ease} .close-modal:hover{color:#fff} .modal-body{padding:20px} .email-input{width:100%;padding:12px 15px;border:1px solid rgba(255,0,0,.5);border-radius:8px;background:rgba(0,0,0,.3);color:#fff;font-size:1rem;transition:border-color .2s ease} .email-input:focus{outline:none;border-color:#FFD700;box-shadow:0 0 8px rgba(255,215,0,.3)} .modal-footer{display:flex;gap:10px;padding:20px;border-top:1px solid rgba(255,0,0,.3)} .modal-btn{flex:1;padding:12px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:filter .2s ease,transform .1s ease;font-size:1rem} .submit-btn{background:#FFD700;color:#000} .submit-btn:hover{filter:brightness(1.1)} .submit-btn:active{transform:scale(.98)} .cancel-btn{background:rgba(255,0,0,.3);color:#ffc2c2} .cancel-btn:hover{background:rgba(255,0,0,.5)} .cancel-btn:active{transform:scale(.98)} @keyframes heroPulse{0%,100%{text-shadow:0 0 18px rgba(255,204,0,.7),0 0 42px rgba(255,175,0,.35)}50%{text-shadow:0 0 38px rgba(255,215,0,.9),0 0 60px rgba(255,135,0,.45)}} @keyframes cardFloater{0%{opacity:0;transform:translateY(35px)}70%{opacity:.73;transform:translateY(-4px)}100%{opacity:1;transform:translateY(0)}} @keyframes sectionGlow{0%,100%{text-shadow:0 0 8px rgba(255,204,0,.35)}50%{text-shadow:0 0 20px rgba(255,160,0,.6)}} @keyframes badgePunch{0%{transform:scale(1)}100%{transform:scale(1.06)}} @keyframes buttonFlash{0%{box-shadow:0 10px 22px rgba(255,215,0,.22)}100%{box-shadow:0 20px 38px rgba(255,215,0,.45)}} @keyframes slideDown{0%{transform:translateY(-12px);opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes fadeInUp{0%{opacity:0;transform:translateY(25px)}100%{opacity:1;transform:translateY(0)}}
\n@keyframes contactReveal{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}