:root { --red: #ff3333; --neon: #ff0000; --bg0: #060000; --bg1: #0a0000; --bg2: #240000; --glass: rgba(25, 0, 0, 0.78); --border: rgba(255, 255, 255, 0.12); --font-hdr: 'Bebas Neue', sans-serif; --font-main: 'Manrope', sans-serif; } html { scroll-behavior: smooth; } * { margin: 0; padding: 0; box-sizing: border-box; cursor: default !important; } body { background: radial-gradient(circle at top, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%); background-attachment: fixed; color: #fff; font-family: var(--font-main); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } #bg-canvas { position: fixed; inset: 0; z-index: -1; opacity: 0.4; pointer-events: none; } .wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; } section { padding: 50px 0; } header { position: fixed; inset: 20px 0 auto 0; z-index: 1000; pointer-events: none; } .dock { pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: 8px 25px; border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(25px); border-radius: 999px; box-shadow: 0 18px 55px rgba(0,0,0,0.5); width: fit-content; margin-inline: auto; } nav { display: flex; gap: 2px; } .navlink { color: #888; text-decoration: none; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 10px 18px; letter-spacing: 2px; transition: 0.3s; border-radius: 99px; } .navlink:hover { color: #fff; background: rgba(255,255,255,0.05); } .hero { padding-top: 180px; min-height: 85vh; text-align: center; } .meta { display: flex; gap: 10px; justify-content: center; margin-bottom: 25px; flex-wrap: wrap; } .pill { padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #666; background: rgba(255,255,255,0.03); } .pill.red-accent { border-color: rgba(255,51,51,0.4); color: #fff; background: rgba(255,51,51,0.1); } .h1 { font-family: var(--font-hdr); font-size: clamp(4rem, 12vw, 9rem); line-height: 0.92; text-transform: uppercase; } .glow { color: var(--red); text-shadow: 0 0 25px var(--neon); } .hero-sub { margin-top: 25px; color: #aaa; font-size: clamp(1.1rem, 2vw, 1.25rem); max-width: 750px; margin-inline: auto; } .hero-row { display: flex; gap: 15px; justify-content: center; margin-top: 40px; align-items: center; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 35px; font-family: var(--font-hdr); font-size: 1.2rem; text-decoration: none; transition: 0.3s; height: 58px; } .btn-primary { background: #fff; color: #000; clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%); font-weight: 900; } .btn-primary:hover { background: var(--red); color: #fff; transform: translateY(-3px); } .btn-ghost { border: 1px solid var(--border); color: #888; border-radius: 14px; font-weight: 800; font-size: 11px; letter-spacing: 2px; background: rgba(255,255,255,0.02); } .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); transform: translateY(-3px); } .badge-row { display: flex; gap: 20px; justify-content: center; margin-top: 35px; } .badge { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #666; display: flex; align-items: center; gap: 8px; } .dot { width: 8px; height: 8px; border-radius: 50%; } .green { background: #4dff8a; box-shadow: 0 0 10px #4dff8a; } .amber { background: #ffb400; box-shadow: 0 0 10px #ffb400; } .h2 { font-family: var(--font-hdr); font-size: clamp(2.5rem, 6vw, 4.5rem); text-transform: uppercase; text-align: center; margin-bottom: 25px; } .red { color: var(--red); } .lead { text-align: center; color: #888; max-width: 700px; margin: 0 auto 30px; } .text-center { text-align: center; } .glass-card { background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(20px); border-radius: 22px; padding: 45px; margin-bottom: 25px; transition: transform 0.4s; position: relative; overflow: hidden; } .glass-card:hover { transform: scale(1.01); } .kicker { font-family: var(--font-hdr); font-size: 26px; color: #fff; margin-bottom: 12px; } .muted { color: #888; font-size: 0.95rem; } .tag-row { display: flex; gap: 10px; margin-bottom: 20px; } .tag { font-size: 10px; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; color: #666; } .red-tag { border-color: rgba(255,51,51,0.5); color: #fff; background: rgba(255,51,51,0.1); } .shot { width: 100%; height: 480px; background: #000; overflow: hidden; border-radius: 18px; margin-top: 25px; border: 1px solid #222; } .shot-sm { width: 100%; height: 300px; background: #000; overflow: hidden; border-radius: 18px; margin-top: 25px; border: 1px solid #222; } img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: 0.6s; } .glass-card:hover img { opacity: 1; } .video-container { max-width: 900px; margin-inline: auto; padding: 10px; } .video-terminal { width: 100%; height: 500px; background: #000; overflow: hidden; position: relative; border-radius: 14px; border: 1px solid #222; } .v-overlay { position: absolute; inset: 0; background: linear-gradient(transparent, #000); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; } .play-btn { width: 80px; height: 80px; background: var(--red); border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 0 25px var(--neon); cursor: pointer !important; transition: 0.3s; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; } .price { font-family: var(--font-hdr); font-size: 4.5rem; line-height: 1; margin: 15px 0; } .red-text { color: var(--red); } .popular { border-color: var(--red); transform: scale(1.03); } .banner { position: absolute; top: 15px; right: 15px; background: rgba(255,51,51,0.15); color: var(--red); padding: 5px 15px; border: 1px solid var(--red); border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: 2px; } .p-list { list-style: none; margin: 20px 0; color: #777; font-size: 0.9rem; } .full { width: 100%; justify-content: center; border: none; } .faq-box { text-align: left; max-width: 850px; margin-inline: auto; padding: 40px; } details { border-bottom: 1px solid var(--border); padding: 20px 0; } summary { font-weight: 900; color: #fff; letter-spacing: 1px; list-style: none; cursor: pointer; } details p { color: #888; padding-top: 12px; } .contact-form { max-width: 900px; margin-inline: auto; padding: 60px; } input, textarea { width: 100%; padding: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 14px; color: #fff; margin-bottom: 15px; font-family: var(--font-main); } footer { padding: 50px 0; text-align: center; font-size: 10px; color: #444; letter-spacing: 4px; font-weight: 800; } @media (max-width: 900px) { .grid-2, nav { display: none; } .hero { padding-top: 120px; } .dock { width: 95%; } }