/* --- BRAND DESIGN SYSTEM (CINEMATIC CUT) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&family=Syne:wght@400;700;800&display=swap');

:root {
    --bg: #030303; 
    --primary: #FF0A0A; 
    --secondary: #FEDEE1; 
    --text-muted: rgba(254, 222, 225, 0.3);
    --white: #FFFFFF;
    
    /* Typographic Hierarchy */
    --font-head: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
::selection { background-color: var(--primary); color: var(--white); }

body {
    background-color: var(--bg);
    color: var(--secondary);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* Grid Blueprint Overlay */
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center;
}

/* --- THE NOISE GRAIN --- */
body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 999; opacity: 0.7;
    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)' opacity='0.05'/%3E%3C/svg%3E");
}

/* --- AMBIENT GLOW --- */
.ambient-glow {
    position: fixed; top: -10vh; left: 50%; transform: translateX(-50%); width: 70vw; height: 50vh;
    background: radial-gradient(circle, rgba(255,10,10,0.06) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none; z-index: 1; filter: blur(60px);
}

/* --- THE PRELOADER (BOOT SEQUENCE) --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; color: var(--primary); z-index: 20000;
    font-family: monospace; font-weight: 100; font-size: 0.9rem;
    padding: 2rem; display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; pointer-events: none; transition: opacity 0.5s ease 1s, visibility 0.5s ease 1s;
}
body.loaded #preloader { opacity: 0; visibility: hidden; }

/* --- FLOATING GEOMETRY (PARALLAX DEPTH) --- */
.floater-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; overflow: hidden; }
.float-wirebox { position: absolute; width: 200px; height: 200px; border: 1px solid rgba(255, 255, 255, 0.03); transform: rotate(45deg); transition: transform 0.2s linear; }
.float-text-massive { position: absolute; font-size: 35vw; font-weight: 800; font-family: var(--font-head); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.01); white-space: nowrap; top: 15%; left: -15%; z-index: 0; transition: transform 0.2s linear; }

/* --- CUSTOM CURSOR (Tactile) --- */
.cursor { width: 12px; height: 12px; background-color: var(--primary); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, opacity 0.3s; mix-blend-mode: difference; }
.cursor.hovering { width: 70px; height: 70px; background-color: var(--white); }

/* Dissable cursor on mobile UX */
@media (max-width: 768px) { .cursor { display: none !important; opacity: 0; } * { cursor: auto !important; } }

/* --- GLITCH TEXT (Cinematic Tension) --- */
.glitch { position: relative; color: var(--white); display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); }
.glitch::before { left: 4px; text-shadow: -2px 0 var(--primary); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 3s infinite linear alternate-reverse; }
.glitch::after { left: -4px; text-shadow: -2px 0 blue; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0% { clip: rect(10px, 9999px, 44px, 0); } 20% { clip: rect(60px, 9999px, 80px, 0); } 40% { clip: rect(20px, 9999px, 12px, 0); } 60% { clip: rect(90px, 9999px, 95px, 0); } 80% { clip: rect(5px, 9999px, 30px, 0); } 100% { clip: rect(40px, 9999px, 60px, 0); } }

/* --- TYPOGRAPHY --- */
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; }
.brand-logo { max-width: 400px; width: 90%; height: auto; margin-bottom: 2rem; position: relative; z-index: 10; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; filter: drop-shadow(0 0 10px rgba(255,10,10,0.1)); }
.brand-logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(255, 10, 10, 0.8)); }
.tagline { font-size: clamp(1rem, 3vw, 1.5rem); color: var(--secondary); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 4rem; }
.massive-text { font-size: clamp(2.5rem, 6.5vw, 7.5rem); line-height: 0.95; color: var(--white); text-transform: uppercase; }
.highlight-red { color: var(--primary); text-shadow: 0 0 25px rgba(255, 10, 10, 0.5); }

/* --- TICKER TAPE --- */
.marquee-wrapper { width: 100vw; background: var(--primary); padding: 1.5rem 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center; transform: rotate(-2.5deg) scale(1.06); margin: 6rem 0; position: relative; z-index: 5; box-shadow: 0 0 40px rgba(255, 10, 10, 0.4); }
.marquee { display: inline-block; animation: marquee-scroll 10s linear infinite; font-family: var(--font-head); font-weight: 800; font-size: 2.8rem; color: var(--bg); text-transform: uppercase; letter-spacing: -0.03em; }
.marquee span { margin: 0 2rem; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- BUTTONS (Magnetic Physics) --- */
.cta-btn-wrapper { display: inline-block; position: relative; margin-top: 2rem; }
.cta-btn {
    background-color: var(--primary); color: var(--white); border: none; padding: 1.3rem 3.5rem; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-body); position: relative; overflow: hidden; box-shadow: 0 0 15px rgba(255, 10, 10, 0.2); transition: box-shadow 0.4s ease, background-color 0.4s ease;
}
.cta-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cta-btn:hover::before { left: 100%; }
.cta-btn:hover { box-shadow: 0 15px 50px rgba(255, 10, 10, 0.7); background-color: #ff2b2b; }

/* --- FORMS (Mathematical Audit) --- */
.roast-container { background: rgba(0, 0, 0, 0.9); border: 2px solid rgba(255, 10, 10, 0.25); padding: 5rem 3rem; max-width: 650px; margin: 0 auto; width: 100%; text-align: center; position: relative; box-shadow: 0 30px 70px rgba(0,0,0,0.9); backdrop-filter: blur(10px); }
.form-group { margin-bottom: 2.5rem; width: 100%; text-align: left; }
.form-group label { display: block; font-size: 0.85rem; color: var(--primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.6rem; font-weight: 800; font-family: var(--font-head); }
input { width: 100%; background: transparent; border: none; border-bottom: 3px solid rgba(255,255,255,0.25); color: var(--white); padding: 1rem 0; font-size: 1.3rem; font-family: var(--font-body); font-weight: 700; transition: all 0.3s ease; }
input:focus { outline: none; border-color: var(--primary); transform: translateX(12px); background: rgba(255,10,10,0.06); padding-left: 15px; border-bottom-width: 4px; }

/* --- GRIDS & CARDS (Intimidation Factor) --- */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 5rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { border-top: 5px solid var(--primary); padding-top: 2rem; background: rgba(20,20,20,0.4); padding: 2.5rem; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); border-bottom: 2px solid transparent; backdrop-filter: blur(5px); position: relative; overflow: hidden; }
.card > * { position: relative; z-index: 10; }
.card h3 { font-size: 1.6rem; color: var(--white); transition: color 0.3s ease; }
.card p { font-size: 1rem; color: var(--text-muted); }
.card:hover { transform: translateY(-20px) scale(1.04); background: rgba(0,0,0,0.9); border-bottom: 2px solid var(--primary); box-shadow: 0 40px 80px rgba(255,10,10,0.2); }
.card:hover h3 { color: var(--primary); }
/* Hover glow behind card content */
.card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,10,10,0.1) 0%, rgba(0,0,0,0) 60%); pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s ease; }
.card:hover::after { opacity: 1; }

/* --- MOBILE MENU --- */
#mobile-menu-toggle { display: none; font-size: 2rem; color: var(--white); background: transparent; border: none; }
#mobile-nav { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); backdrop-filter: blur(20px); z-index: 1000; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; }
#mobile-nav a { font-family: var(--font-head); font-weight: 800; font-size: 2rem; text-decoration: none; color: var(--white); text-transform: uppercase; letter-spacing: -0.05em; transition: color 0.3s ease; }
#mobile-nav a:hover { color: var(--primary); text-shadow: 0 0 10px rgba(255,10,10,0.5); }
#mobile-nav.open { display: flex; }
#mobile-menu-toggle { display: block; position: relative; z-index: 1100; }

@media (min-width: 768px) { #mobile-menu-toggle, #mobile-nav { display: none !important; } }

/* --- SECTION PADDING ADJ --- */
section { padding: 18vh 6%; }
.full-screen { min-height: 100vh; }

/* --- ANIMATIONS & INTERACTIONS --- */
.fade-up { opacity: 0; transform: translateY(90px) scale(0.96); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-up.visible { opacity: 1; transform: translateY(0) scale(1); }
.lag-fade { transition-delay: 0.1s; }
.lag-fade-2 { transition-delay: 0.2s; }