:root {
    --bg-dark: #1a1a1a;
    --acid-green: #ccff00;
    --neon-purple: #bc13fe;
    --white: #ffffff;
    --concrete: #2a2a2a;
    
    --font-display: 'Oswald', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--white);
    font-family: var(--font-mono);
    overflow-x: hidden;
}

/* Noise Texture Overlay */
.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVQoU2P8////fwYkYGJgYIAxJgZ04EzE6gJEG84EBAA72w/1G4q26QAAAABJRU5ErkJggg==');
    opacity: 0.05; pointer-events: none; z-index: 9999;
}

.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.section-padding { padding: 100px 0; }
a { text-decoration: none; color: inherit; transition: 0.2s; }

/* Header */
.brutal-header {
    padding: 20px 40px;
    display: flex; justify-content: space-between; align-items: center;
    position: fixed; top: 0; width: 100%; z-index: 100;
    background: rgba(26, 26, 26, 0.9);
    border-bottom: 1px solid var(--concrete);
}

.logo {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -1px;
}
.neon { color: var(--acid-green); }

.menu-btn { cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.bar { width: 40px; height: 4px; background: var(--white); }
.menu-btn:hover .bar { background: var(--acid-green); }

/* Overlay Menu */
.overlay-menu {
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
    background: var(--bg-dark); z-index: 200;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    border-left: 5px solid var(--neon-purple);
}
.overlay-menu.active { right: 0; }
.overlay-menu a {
    font-family: var(--font-display); font-size: 3rem; margin: 10px 0;
    text-transform: uppercase; color: var(--white);
}
.overlay-menu a:hover { color: var(--acid-green); letter-spacing: 5px; }
.overlay-menu a.highlight { color: var(--neon-purple); }
.close-btn {
    position: absolute; top: 30px; right: 40px;
    background: none; border: 2px solid var(--white); color: var(--white);
    font-family: var(--font-mono); font-size: 1.5rem; padding: 5px 15px; cursor: pointer;
}

/* Marquee */
.marquee-container {
    background: var(--acid-green); color: var(--bg-dark);
    padding: 10px 0; overflow: hidden; white-space: nowrap;
    position: relative; top: 80px; z-index: 50;
    font-family: var(--font-display); font-weight: bold; font-size: 1.2rem;
}
.marquee-content {
    display: inline-block; padding-left: 100%;
    animation: marquee 20s linear infinite;
}
@keyframes marquee { from { transform: translate(0, 0); } to { transform: translate(-100%, 0); } }

/* Hero */
.hero-glitch {
    height: 90vh; position: relative; display: flex; align-items: center; justify-content: center;
    overflow: hidden; margin-top: 80px;
}
.hero-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0.4;
    filter: grayscale(100%) contrast(120%);
}
.hero-text { position: relative; z-index: 10; text-align: left; width: 80%; }
.hero-text h1 {
    font-family: var(--font-display); font-size: 6rem; line-height: 0.9;
    text-transform: uppercase; margin-bottom: 20px;
}
.outline { -webkit-text-stroke: 2px var(--white); color: transparent; }
.acid { color: var(--acid-green); }
.hero-text p { font-size: 1.5rem; margin-bottom: 40px; background: var(--bg-dark); display: inline-block; padding: 5px; }

.cta-group { display: flex; gap: 20px; }
.btn-acid {
    background: var(--acid-green); color: var(--bg-dark);
    padding: 15px 30px; font-weight: 800; border: none; cursor: pointer;
    font-family: var(--font-mono); text-transform: uppercase;
    box-shadow: 5px 5px 0 var(--neon-purple);
    display: inline-block;
}
.btn-acid:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--neon-purple); }
.btn-outline {
    border: 2px solid var(--white); padding: 13px 30px; font-weight: 800;
    font-family: var(--font-mono); text-transform: uppercase;
}
.btn-outline:hover { background: var(--white); color: var(--bg-dark); }

/* Grid Section */
.grid-header { display: flex; align-items: center; gap: 20px; margin-bottom: 50px; }
.grid-header h2 { font-family: var(--font-display); font-size: 3rem; white-space: nowrap; }
.line { width: 100%; height: 2px; background: var(--concrete); }

.brutal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-item {
    background: var(--concrete); border: 1px solid #444; padding: 30px;
    transition: 0.3s;
}
.grid-item:hover { background: var(--acid-green); color: var(--bg-dark); }
.grid-item.acid-border { border: 1px solid var(--acid-green); }
.item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid currentColor; padding-bottom: 10px; }
.item-head h3 { font-family: var(--font-display); font-size: 2rem; margin: 0; }
.icon { font-size: 2rem; }
.price { display: block; font-weight: bold; margin-top: 20px; font-size: 1.2rem; }

/* Steps (How To) */
.steps-wrapper { display: flex; flex-direction: column; gap: 40px; margin-top: 50px; }
.step { border: 1px solid var(--white); padding: 40px; position: relative; }
.step.invert { background: var(--white); color: var(--bg-dark); }
.step-num {
    position: absolute; top: -20px; left: 20px; background: var(--bg-dark);
    color: var(--acid-green); padding: 5px 15px; font-family: var(--font-display); font-size: 1.5rem;
    border: 1px solid var(--acid-green);
}
.step.invert .step-num { background: var(--white); color: var(--bg-dark); border-color: var(--bg-dark); }
.step h2 { font-family: var(--font-display); font-size: 3rem; margin-bottom: 10px; }

/* Testimonials */
.review-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: var(--concrete); padding: 30px; border-left: 5px solid var(--neon-purple); }
.review-card.acid-bg { background: var(--acid-green); color: var(--bg-dark); border-left: 5px solid var(--bg-dark); }
.meta { margin-top: 20px; display: flex; justify-content: space-between; font-weight: bold; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.hotline-box { border: 2px solid var(--neon-purple); padding: 20px; margin: 30px 0; display: inline-block; }
.hotline-box strong { display: block; font-size: 2rem; font-family: var(--font-display); color: var(--neon-purple); }
.qr-code-placeholder { width: 150px; height: 150px; background: white; color: black; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.8rem; }

.brutal-form label { display: block; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 5px; color: var(--acid-green); }
.brutal-form input, .brutal-form select, .brutal-form textarea {
    width: 100%; background: transparent; border: 1px solid var(--white); color: var(--white);
    padding: 15px; font-family: var(--font-mono); margin-bottom: 20px;
}
.brutal-form input:focus { border-color: var(--acid-green); outline: none; }
.full-width { width: 100%; }

/* Legal */
.legal-doc h1 { font-family: var(--font-display); font-size: 4rem; color: var(--neon-purple); }
.neon-line { width: 100px; height: 5px; background: var(--acid-green); margin: 20px 0 40px; }
.legal-doc article { margin-bottom: 40px; border-left: 2px solid var(--white); padding-left: 20px; }
.legal-doc h3 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 10px; }

/* Footer */
.brutal-footer { margin-top: 50px; border-top: 1px solid var(--concrete); background: #000; }
.footer-inner { padding: 50px 40px; display: flex; justify-content: space-between; }
.f-col h4 { font-family: var(--font-display); font-size: 2rem; color: var(--acid-green); }
.f-col.right a { display: block; text-align: right; font-size: 1.2rem; margin-bottom: 10px; }
.f-col.right a:hover { color: var(--neon-purple); text-decoration: line-through; }
.scrolling-footer {
    background: var(--neon-purple); color: var(--white); padding: 10px 0;
    font-family: var(--font-display); white-space: nowrap; overflow: hidden;
}

/* Cookie Banner */
.cookie-box {
    position: fixed; bottom: 20px; left: 20px; width: 300px;
    background: var(--acid-green); color: var(--bg-dark);
    padding: 20px; border: 3px solid var(--bg-dark);
    box-shadow: 10px 10px 0 var(--neon-purple);
    z-index: 9999; display: none;
}
.cookie-box.active { display: block; }
.cookie-box p { font-weight: bold; margin-bottom: 15px; }
.cookie-box button {
    background: var(--bg-dark); color: var(--white); border: none;
    padding: 10px 20px; font-family: var(--font-mono); cursor: pointer; width: 100%;
}

@media (max-width: 900px) {
    .hero-text h1 { font-size: 3.5rem; }
    .brutal-grid, .steps-wrapper, .review-masonry, .contact-grid { grid-template-columns: 1fr; }
    .hero-glitch { height: auto; padding: 100px 0; }
}