:root{ --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --txt:#e2e8f0; --brand:#0ea5e9; --brand-2:#22d3ee; --ring: rgba(34,211,238,.5) } *{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b1220 0%,#0e1324 60%,#0b1220 100%);color:var(--txt)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{width:min(1200px,92%);margin-inline:auto} .section{padding:64px 0} .section h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0 0 12px} .muted{color:var(--muted)} footer{border-top:1px solid rgba(148,163,184,.12);padding:36px 0;color:var(--muted)} .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#001018;font-weight:700;border:none;cursor:pointer;box-shadow:0 10px 24px rgba(14,165,233,.25)} .btn.ghost{background:transparent;color:var(--txt);border:1px solid rgba(148,163,184,.3)} .btn:focus{outline:3px solid var(--ring);outline-offset:2px} .rgb-btn2 {background: linear-gradient(270deg, #ff00ff, #00ffff, #00ff00, #ffff00, #ff0000, #ff00ff);background-size: 1200% 1200%;color: white;font-size: 1rem;font-weight: bold;padding: 0.4rem 3.2rem;border-radius: 10px;border: none;cursor: pointer;text-transform: uppercase;letter-spacing: 1px;animation: rgbFlow 6s ease infinite, glowPulse 1.8s infinite ease-in-out;box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);transition: transform 0.2s ease, box-shadow 0.3s ease;margin-top: 10px;} .rgb-btn {background: linear-gradient(270deg, #ff00ff, #00ffff, #00ff00, #ffff00, #ff0000, #ff00ff);background-size: 1200% 1200%;color: white;font-size: 1rem;font-weight: bold;padding: 0.9rem 1.7rem;border-radius: 14px;border: none;cursor: pointer;text-transform: uppercase;letter-spacing: 1px;animation: rgbFlow 6s ease infinite, glowPulse 1.8s infinite ease-in-out;box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);transition: transform 0.2s ease, box-shadow 0.3s ease;} @media (max-width: 768px){.rgb-btn{font-size: 0.85rem;padding: 0.7rem 1.2rem;border-radius: 10px;letter-spacing: 0.5px;}} @media (max-width: 480px){.rgb-btn{font-size: 0.75rem;padding: 0.6rem 1rem;border-radius: 8px;}} .card {position: relative;background: rgba(11, 18, 32, 0.85);border-radius: 16px;padding: 1rem;overflow: hidden;border: 4px solid transparent;animation: borderRGB 5s linear infinite;background-clip: padding-box;} .card .body,.card .cta{position: relative;z-index: 1;} .products{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .card{background:linear-gradient(180deg,#0f172a,rgba(2,6,23,.5));border:1px solid rgba(148,163,184,.15);border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .card .media{aspect-ratio:4/3;background:radial-gradient(1200px 200px at -10% 120%,rgba(34,211,238,.25),transparent),linear-gradient(135deg,#0b1220,#0e172a)} .card .body{padding:1rem} .price{font-weight:800} .old{color:var(--muted);text-decoration:line-through;margin-left:.5rem;font-weight:500} .card .cta{display:flex;gap:.6rem;padding:0 1rem 1rem} .left-column {flex: 2;} .product-section {display: flex;gap: 20px;align-items: flex-start;} .right-column {flex: 1;} .content-wrapper {display: flex;gap: 20px;align-items: flex-start;} .main-visual {flex: 2;} .custom-box {position: relative;width: 100%;height: 550px;overflow: hidden;border: 3px solid transparent;border-radius: 12px;transition: border-color 0.3s ease, box-shadow 0.3s ease;} .custom-box:hover {border-color: #ff00cc;box-shadow: 0 0 15px rgba(255, 0, 204, 0.7);} .carousel {display: flex;width: 300%;height: 100%;animation: slide 5s infinite;} .carousel img {width: 100%;height: 100%;object-fit: cover;} @keyframes slide {0% { transform: translateX(0); }33% { transform: translateX(-100%); }66% { transform: translateX(-200%); }100% { transform: translateX(0); }} .rain-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;overflow: hidden;z-index: 9999;} .raindrop {position: absolute;top: -100px;width: 40px;height: auto;animation: fall linear infinite;} @keyframes fall {0% {transform: translateY(-100px) rotate(0deg);opacity: 1;}100% {transform: translateY(110vh) rotate(360deg);opacity: 0.8;}} @keyframes gradientMove {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }} @keyframes rgbFlow {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }} @keyframes glowPulse {0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.6); }50% { box-shadow: 0 0 40px rgba(255,255,255,0.9); }} @keyframes borderRGB {0% { border-color: #ffffff; }25% { border-color: #ffffff; }75% { border-color: #ffffff; }100% { border-color: #0b1220; }} header{position:sticky;top:0;backdrop-filter:saturate(1.4) blur(10px);background:rgba(11,18,32,.6);border-bottom:1px solid rgba(148,163,184,.12);z-index:50} nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0} .brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.2px} .brand-logo{width:38px;height:38px;border-radius:12px;background:radial-gradient(circle at 30% 30%,var(--brand) 0 40%,var(--brand-2) 40% 70%,transparent 75%);box-shadow:inset 0 0 24px rgba(34,211,238,.35),0 10px 20px rgba(14,165,233,.25)} .nav-links{display:flex;gap:1.2rem} .nav-links a{padding:.5rem .8rem;border-radius:10px} .nav-links a:hover{background:rgba(148,163,184,.08)} .menu-btn{display:none} @media (max-width: 560px){ .nav-links{display:none} .menu-btn{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid rgba(148,163,184,.25);color:var(--txt);padding:.5rem .7rem;border-radius:10px} } .hero { padding: 72px 0 36px; border-bottom: 1px solid rgba(148, 163, 184, .1); } .hero-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; } .kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border:1px solid rgba(148,163,184,.2);border-radius:999px;color:var(--muted);font-size:.85rem} .title{font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;margin:.6rem 0 .8rem;font-weight:800} .sub{color:var(--muted);max-width:60ch} .hero-card.bannerr{background: linear-gradient(120deg, #0f172a, rgba(2, 6, 23, 0.6));border-radius: 20px;padding: 3rem;position: relative;overflow: hidden;background-size: cover;background-position: center;height: 300px;} .hero-content {position: relative;color: #fff;z-index: 2;} .hero-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: .7rem;} .hero-grid.vertical {display: grid !important;grid-template-columns: 1fr !important;gap: 1rem;} .hero-item {background: rgba(11, 18, 32, 0.8);border: 1px solid rgba(148, 163, 184, 0.14);border-radius: 16px;padding: .8rem;transition: transform 0.3s, box-shadow 0.3s;} .hero-item.small {height: 80px;border-radius: 12px;background-size: cover;background-position: center;position: relative;} .hero-aside{justify-self: end;align-self: start;display: flex;flex-direction: column;gap: 1rem;width: min(380px, 100%);} .hero-card2.bannerr{position: relative;overflow: hidden;border-radius: 20px;padding: 1rem;background-size: cover;background-position: center;border: 1px solid rgba(148,163,184,.18);box-shadow: 0 20px 60px rgba(2,6,23,.45);} .hero-stack{display: flex;flex-direction: column;gap: .8rem;} .hero-item2.small{height: 80px;border-radius: 12px;background-size: cover;background-position: center;position: relative;overflow: hidden;border: 1px solid rgba(148,163,184,.14);} @media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr; } .hero-aside{ justify-self: stretch; width: 100%; } } .hero-item:hover {transform: translateY(-4px);box-shadow: 0 0 10px rgba(255,255,255,0.2);} .hero-item h4 {margin: .4rem 0 .2rem;} .hero-item p {margin: 0;color: var(--muted);font-size: .92rem;} .hero-cta {margin-top: 1.5rem;} .popup-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);display: flex;justify-content: center;align-items: center;z-index: 9999;} .popup-content {background: white;border-radius: 16px;padding: 20px;text-align: center;width: 320px;position: relative;box-shadow: 0 0 30px rgba(255,0,0,0.4);animation: popupBounce 0.6s ease;} .popup-content h2 {color: #d32f2f;} .popup-content p {font-size: 14px;color: #555;} .popup-character {width: 150px;height: auto;display: block;margin: 0 auto;} .popup-close {position: absolute;top: 8px;right: 12px;font-size: 22px;cursor: pointer;color: #d32f2f;} @keyframes popupBounce {0% { transform: scale(0.7); opacity: 0; }70% { transform: scale(1.05); opacity: 1; }100% { transform: scale(1); }} @media (max-width: 480px) {.popup-content {width: 90%;padding: 15px;}.popup-character {width: 120px;}} .features{display: grid;grid-template-columns: repeat(3, 1fr);gap: 1rem;width: 100%;max-width: 900px; margin: 0 auto;} .feature{background: #0b1220;border: 1px solid rgba(148, 163, 184, 0.12);border-radius: 16px;padding: 1rem;position: relative;overflow: hidden;transition: transform 0.2s ease;} .feature::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(0, 200, 255, 0.4), transparent 80%);pointer-events: none;transition: background 0.1s ease;} .feature:hover {transform: scale(1.03);border-color: rgba(0, 200, 255, 0.6);} .testis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .quote{background:#0b1220;border:1px solid rgba(148,163,184,.12);border-radius:16px;padding:1rem} .cta-band{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(90deg,rgba(14,165,233,.18),rgba(34,211,238,.12));border:1px solid rgba(14,165,233,.25);padding:1rem;border-radius:16px} .faq{display:grid;grid-template-columns:1fr;gap:.6rem} details{background:#0b1220;border:1px solid rgba(148,163,184,.14);border-radius:12px;padding:1rem} form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} form input, form textarea{width:100%;padding:.9rem;border-radius:12px;border:1px solid rgba(148,163,184,.2);background:#0b1220;color:var(--txt)} form textarea{grid-column:1/-1;min-height:120px} @media (max-width: 920px){.products{grid-template-columns:1fr 1fr}.features,.testis{grid-template-columns:1fr 1fr}.cta-band{flex-direction:column;align-items:flex-start}form{grid-template-columns:1fr}} @media (max-width: 560px){.products,.features,.testis{grid-template-columns:1fr}} .gaming-ul {list-style: none;padding: 0;margin: 0;} .gaming-ul li {padding: 10px 14px;margin-bottom: 6px;background: linear-gradient(90deg, #ff00ff, #ff6600);color: white;font-weight: bold;border-radius: 8px;box-shadow: 0 0 10px rgba(255,0,255,0.4);display: flex;align-items: center;transition: transform 0.2s ease, box-shadow 0.2s ease;} .gaming-ul li::before {content: "🎯";margin-right: 8px;font-size: 16px;} .gaming-ul li:hover {transform: scale(1.05);box-shadow: 0 0 15px rgba(255,0,255,0.8);}