@font-face { font-family: 'Geogrotesk'; src: url('https://gochred.github.io/rogue/res/geo.otf') format('opentype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Geogrotesk'; src: url('https://gochred.github.io/rogue/res/geo-it.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Geogrotesk'; src: url('https://gochred.github.io/rogue/res/geo-med.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Geogrotesk'; src: url('https://gochred.github.io/rogue/res/geo-med-it.otf') format('opentype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Geogrotesk'; src: url('https://gochred.github.io/rogue/res/geo-bold.otf') format('opentype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Geogrotesk'; src: url('https://gochred.github.io/rogue/res/geo-bold-it.otf') format('opentype'); font-weight: 700; font-style: italic; }

body { background-color: #000000; color: #FFFFFF; font-family: "Geogrotesk", sans-serif; overflow-x: hidden; cursor: none; }
.film-grain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); animation: grain 8s steps(10) infinite; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); } 60% { transform: translate(15%, 0%); } 70% { transform: translate(0%, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); } }
.crt-scanline { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2)); background-size: 100% 4px; }
.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; }
.glitch-text::before { left: 2px; text-shadow: -2px 0 #cc0000; clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 3s infinite linear alternate-reverse; }
.glitch-text::after { left: -2px; text-shadow: -2px 0 #00ffff; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0% { clip: rect(10px, 9999px, 31px, 0); } 5% { clip: rect(70px, 9999px, 73px, 0); } 10% { clip: rect(44px, 9999px, 53px, 0); } 15% { clip: rect(82px, 9999px, 14px, 0); } 20% { clip: rect(2px, 9999px, 80px, 0); } 25% { clip: rect(33px, 9999px, 14px, 0); } 30% { clip: rect(78px, 9999px, 55px, 0); } 35% { clip: rect(14px, 9999px, 71px, 0); } 40% { clip: rect(50px, 9999px, 81px, 0); } 45% { clip: rect(81px, 9999px, 46px, 0); } 50% { clip: rect(12px, 9999px, 33px, 0); } 55% { clip: rect(65px, 9999px, 11px, 0); } 60% { clip: rect(44px, 9999px, 77px, 0); } 65% { clip: rect(31px, 9999px, 22px, 0); } 70% { clip: rect(8px, 9999px, 66px, 0); } 75% { clip: rect(55px, 9999px, 44px, 0); } 80% { clip: rect(22px, 9999px, 88px, 0); } 85% { clip: rect(77px, 9999px, 11px, 0); } 90% { clip: rect(33px, 9999px, 55px, 0); } 95% { clip: rect(66px, 9999px, 33px, 0); } 100% { clip: rect(11px, 9999px, 77px, 0); } }
::-webkit-scrollbar { width: 0px; background: transparent; }
::selection { background: #cc0000; color: #fff; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 20s linear infinite; }
@keyframes draw-underline { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: right; } 95% { transform: scaleX(0); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: left; } }
.animate-draw-underline { animation: draw-underline 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
.flash-bg { background-color: transparent; }
@keyframes flash-red { 0% { background-color: transparent; } 1% { background-color: #cc0000; } 10% { background-color: #cc0000; } 11% { background-color: transparent; } 100% { background-color: transparent; } }
.group:hover .flash-bg { animation: flash-red 1s linear forwards; }
.glitch-img { animation: img-glitch 0.2s infinite; }
@keyframes img-glitch { 0% { transform: translate(0) } 20% { transform: translate(-4px, 4px) } 40% { transform: translate(-4px, -4px) } 60% { transform: translate(4px, 4px) } 80% { transform: translate(4px, -4px) } 100% { transform: translate(0) } }

#custom-cursor { position: fixed; top: 0; left: 0; width: 16px; height: 16px; background-color: #fff; border-radius: 50%; pointer-events: none; z-index: 10000; mix-blend-mode: difference; transition: width 0.2s, height 0.2s, background-color 0.2s, border 0.2s; transform: translate(-50%, -50%); }
#custom-cursor.hovering { width: 48px; height: 48px; background-color: transparent; border: 2px solid #cc0000; }
.reveal-text { display: inline-block; overflow: hidden; }
.reveal-text span { display: inline-block; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.reveal-text.active span { transform: translateY(0); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.3s ease-out; opacity: 0; }
.faq-answer.open { max-height: 200px; opacity: 1; }
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); }