@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;700&display=swap');

:root {
 --font-main: 'Archivo Black', sans-serif;
 --font-mono: 'IBM Plex Mono', monospace;
 --color-black: #0D0D0D;
 --color-white: #FFFFFF;
 --color-accent: #00FF41; /* Stark green */
 --color-grey: #BFBFBF;
 --border-style: 2px solid var(--color-black);
 --border-light: 1px solid #333;
}

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

html {
 scroll-behavior: smooth;
}

body {
 font-family: var(--font-mono);
 font-size: 16px;
 line-height: 1.6;
 color: var(--color-black);
 background-color: var(--color-white);
 -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-main);
 line-height: 1.1;
 color: var(--color-black);
 text-transform: uppercase;
 margin-bottom: 1rem;
}

p {
 margin-bottom: 1rem;
 max-width: 65ch;
 color: var(--color-black);
 font-size: 1rem;
}

a {
 color: var(--color-black);
 text-decoration: none;
 font-weight: 700;
 transition: color 0.3s ease;
}

a:hover {
 color: var(--color-accent);
}

ul {
 list-style-type: none;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

/* HEADER & NAVIGATION */
.header {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 padding: 20px 0;
 border-bottom: var(--border-style);
 background-color: var(--color-white);
}

.nav-container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.nav-logo {
 font-family: var(--font-main);
 font-size: 1.5rem;
 text-transform: uppercase;
}
.nav-logo:hover {
 color: var(--color-black);
}

.nav-links {
 display: flex;
 gap: 32px;
}

.nav-links a {
 font-family: var(--font-main);
 font-size: 1rem;
 padding-bottom: 5px;
 border-bottom: 4px solid transparent;
 transition: border-color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
 border-bottom-color: var(--color-black);
}

.nav-toggle {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
}

.nav-toggle span {
 display: block;
 width: 30px;
 height: 3px;
 background: var(--color-black);
 margin: 6px 0;
}

/* HERO SECTION */
.hero-brutalist {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 min-height: 90vh;
 padding-top: 80px;
 background-color: var(--color-white);
 overflow: hidden;
}

.grid-overlay {
 position: absolute;
 inset: 0;
 background-image:
 linear-gradient(var(--color-grey) 1px, transparent 1px),
 linear-gradient(to right, var(--color-grey) 1px, transparent 1px);
 background-size: 50px 50px;
 opacity: 0.1;
}

.hero-content {
 position: relative;
 z-index: 1;
}

.hero-title {
 font-size: clamp(3rem, 10vw, 8rem);
 line-height: 0.9;
 margin: 0;
 color: var(--color-black);
}

.hero-subtitle {
 font-family: var(--font-mono);
 font-size: 1.2rem;
 margin: 20px 0 40px;
}

.cta-button {
 display: inline-block;
 font-family: var(--font-main);
 background-color: var(--color-accent);
 color: var(--color-black);
 padding: 16px 32px;
 font-size: 1.2rem;
 text-transform: uppercase;
 border: var(--border-style);
 box-shadow: 5px 5px 0 var(--color-black);
 transition: all 0.2s ease;
}

.cta-button:hover {
 box-shadow: 8px 8px 0 var(--color-black);
 transform: translate(-3px, -3px);
 color: var(--color-black);
}

/* BRUTALIST SECTIONS */
.section-brutalist {
 padding: 80px 0;
 border-bottom: var(--border-style);
}

.section-alt {
 background-color: #f1f1f1;
}

.section-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}

.section-title-brutalist {
 font-size: clamp(2rem, 5vw, 3.5rem);
 margin-bottom: 40px;
 border-bottom: var(--border-style);
 padding-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 20px;
}

.section-number {
 font-family: var(--font-mono);
 font-size: 1rem;
 background-color: var(--color-accent);
 color: var(--color-black);
 padding: 5px 10px;
 border: var(--border-style);
}

.page-title-brutalist {
 font-size: clamp(3rem, 10vw, 5rem);
 text-align: center;
 margin-bottom: 20px;
}

.page-subtitle-brutalist {
 font-family: var(--font-mono);
 text-align: center;
 max-width: 700px;
 margin: 0 auto 60px;
 font-size: 1.1rem;
}

/* STATS SECTION */
.stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 40px;
}

.stat-item {
 border: var(--border-style);
 padding: 20px;
}

.stat-value {
 font-family: var(--font-main);
 font-size: 4rem;
 color: var(--color-accent);
 -webkit-text-stroke: 2px var(--color-black);
}

.stat-label {
 font-family: var(--font-main);
 font-size: 1.2rem;
 margin-bottom: 10px;
}

.stat-desc {
 font-family: var(--font-mono);
 font-size: 0.9rem;
}

/* MEDIA OBJECT */
.media-object-brutalist {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 align-items: center;
}

.media-object-brutalist.reverse {
 grid-template-columns: 1fr 1fr;
}
.media-object-brutalist.reverse .media-visual-brutalist {
 order: 2;
}

.media-visual-brutalist img {
 border: var(--border-style);
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.media-title {
 font-size: 1.8rem;
}

.link-arrow {
 display: inline-block;
 margin-top: 20px;
 font-family: var(--font-main);
}
.link-arrow::after {
 content: ' ->';
 transition: margin-left 0.2s ease;
}
.link-arrow:hover::after {
 margin-left: 10px;
}

/* PROCESS SECTION */
.process-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
}
.process-step {
 border: var(--border-style);
 padding: 20px;
}
.process-step h3 {
 font-size: 1.5rem;
 border-bottom: var(--border-light);
 padding-bottom: 10px;
 margin-bottom: 10px;
}
.process-step p {
 font-size: 0.95rem;
 margin-bottom: 0;
}

/* FEATURES LIST */
.features-list-brutalist {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}
.feature-item-brutalist {
 padding: 20px;
 border: var(--border-style);
}
.feature-item-brutalist h4 {
 font-family: var(--font-mono);
 font-weight: 700;
 font-size: 1.1rem;
}
.feature-item-brutalist p {
 font-size: 1rem;
 margin-bottom: 0;
}

/* TESTIMONIAL */
.testimonial-brutalist {
 max-width: 800px;
 margin: 0 auto;
 text-align: center;
 padding: 40px;
 border: var(--border-style);
}
.testimonial-quote {
 font-family: var(--font-main);
 font-size: 5rem;
 line-height: 1;
 color: var(--color-accent);
}
.testimonial-text {
 font-family: var(--font-mono);
 font-size: 1.2rem;
 font-weight: 700;
}
.testimonial-author {
 font-family: var(--font-mono);
 font-size: 1rem;
 margin-top: 30px;
 font-weight: 700;
}

/* FORM */
.contact-form-wrapper {
 max-width: 800px;
 margin: 0 auto;
 border: var(--border-style);
 padding: 40px;
}
.form-intro {
 text-align: center;
 font-family: var(--font-mono);
}
.form-brutalist {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}
.form-group {
 display: flex;
 flex-direction: column;
}
.form-group.full-width {
 grid-column: 1 / -1;
}
.form-brutalist label {
 font-family: var(--font-mono);
 font-weight: 700;
 margin-bottom: 8px;
}
.form-brutalist input,
.form-brutalist textarea {
 font-family: var(--font-mono);
 font-size: 1rem;
 padding: 12px;
 border: var(--border-style);
 background-color: var(--color-white);
}
.form-brutalist input:focus,
.form-brutalist textarea:focus {
 outline: 2px solid var(--color-accent);
}
.form-brutalist .cta-button {
 width: 100%;
}
.checkbox-group {
 flex-direction: row;
 align-items: center;
 gap: 10px;
}
.checkbox-group label {
 margin-bottom: 0;
 font-weight: 400;
}
.checkbox-group a {
 text-decoration: underline;
}

/* FOOTER */
.footer {
 background-color: var(--color-black);
 color: var(--color-white);
 padding: 60px 0 30px;
 border-top: 4px solid var(--color-accent);
}

.footer-container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 20px;
}

.footer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 40px;
 padding-bottom: 40px;
 border-bottom: 2px solid #333;
}
.footer-heading {
 font-family: var(--font-main);
 color: var(--color-white);
 font-size: 1.1rem;
}
.footer-description {
 font-family: var(--font-mono);
 color: var(--color-grey);
}
.footer-links, .footer-contact {
 font-family: var(--font-mono);
}
.footer-links li, .footer-contact li {
 margin-bottom: 10px;
}
.footer-links a, .footer-contact a {
 color: var(--color-grey);
}
.footer-links a:hover, .footer-contact a:hover {
 color: var(--color-accent);
}
.footer-bottom {
 padding-top: 30px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-family: var(--font-mono);
 font-size: 0.9rem;
 color: var(--color-grey);
}
.footer-legal-links a {
 color: var(--color-grey);
 margin-left: 20px;
}
.footer-legal-links a:hover {
 color: var(--color-white);
}

/* ABOUT PAGE */
.team-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 40px;
 text-align: center;
}
.team-member img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 margin: 0 auto 20px;
 border: var(--border-style);
 filter: grayscale(100%);
}
.team-member:hover img {
 filter: grayscale(0);
}
.team-member h4 {
 font-size: 1.2rem;
}
.team-member p {
 font-family: var(--font-mono);
 margin: 0;
}

/* SERVICES PAGE */
.services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 20px;
}
.service-card-brutalist {
 border: var(--border-style);
 padding: 20px;
}
.service-card-header {
 display: flex;
 align-items: center;
 gap: 15px;
 border-bottom: var(--border-light);
 padding-bottom: 15px;
 margin-bottom: 15px;
}
.service-card-number {
 font-family: var(--font-mono);
 font-size: 1rem;
 font-weight: 700;
}
.service-card-brutalist h3 {
 font-size: 1.3rem;
 margin-bottom: 0;
}
.tech-list {
 margin-top: 20px;
}
.tech-list li {
 font-family: var(--font-mono);
 font-weight: 700;
 margin-bottom: 10px;
}
.tech-list li span {
 color: var(--color-accent);
 margin-right: 10px;
}

/* PORTFOLIO PAGE */
.portfolio-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 gap: 20px;
}
.portfolio-item-brutalist {
 border: var(--border-style);
}
.portfolio-item-brutalist img {
 width: 100%;
 height: 250px;
 object-fit: cover;
}
.portfolio-caption {
 padding: 15px;
 background-color: var(--color-white);
 border-top: var(--border-style);
}
.portfolio-caption h4 {
 font-size: 1.1rem;
 margin-bottom: 5px;
}
.portfolio-caption p {
 font-family: var(--font-mono);
 font-size: 0.9rem;
 margin: 0;
}
.cta-container-center {
 text-align: center;
 margin-top: 60px;
}

/* CONTACT PAGE */
.contact-page-grid {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 40px;
}
.contact-info-wrapper {
 display: flex;
 flex-direction: column;
 gap: 30px;
}
.contact-info-block {
 border: var(--border-style);
 padding: 20px;
}
.contact-info-block h4 {
 font-size: 1.2rem;
 border-bottom: var(--border-light);
 padding-bottom: 10px;
}
.contact-info-block p, .contact-info-block a {
 font-family: var(--font-mono);
 font-size: 1rem;
 margin-bottom: 5px;
}
.map-container-brutalist {
 border: var(--border-style);
 padding: 10px;
 background-color: var(--color-white);
}
.map-container-brutalist iframe {
 display: block;
 width: 100%;
}

/* LEGAL PAGES */
.legal-content {
 max-width: 800px;
}
.legal-content h3 {
 font-size: 1.5rem;
 margin-top: 40px;
}
.legal-content ul {
 list-style-type: disc;
 padding-left: 20px;
}
.legal-content table {
 width: 100%;
 border-collapse: collapse;
 margin: 30px 0;
 font-family: var(--font-mono);
}
.legal-content th, .legal-content td {
 border: var(--border-style);
 padding: 10px;
 text-align: left;
}
.legal-content th {
 background-color: #f1f1f1;
}

/* COOKIE BANNER */
#cookie-banner {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: var(--color-black);
 color: var(--color-white);
 padding: 20px;
 display: none;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 z-index: 2000;
 border-top: 3px solid var(--color-accent);
 font-family: var(--font-mono);
}
#cookie-banner p {
 margin: 0;
 color: var(--color-white);
}
#cookie-banner a {
 color: var(--color-accent);
 text-decoration: underline;
}
.cookie-buttons {
 display: flex;
 gap: 10px;
}
#cookie-banner button {
 font-family: var(--font-main);
 padding: 8px 16px;
 border: var(--border-style);
 border-color: var(--color-white);
 background: none;
 color: var(--color-white);
 cursor: pointer;
}
#cookie-banner button#accept-cookies {
 background: var(--color-accent);
 color: var(--color-black);
 border-color: var(--color-accent);
}

/* FORM VALIDATION & SPINNER */
.input-error {
 border-color: #ff0000 !important;
 outline-color: #ff0000 !important;
}

.field-error {
 color: #ff0000;
 font-size: 0.85rem;
 margin-top: 4px;
 font-family: var(--font-mono);
}

.spinner {
 display: inline-block;
 width: 16px;
 height: 16px;
 border: 2px solid rgba(0,0,0,0.3);
 border-radius: 50%;
 border-top-color: var(--color-black);
 animation: spin 0.8s linear infinite;
 margin-right: 8px;
 vertical-align: middle;
}

@keyframes spin {
 to { transform: rotate(360deg); }
}

button[disabled] {
 opacity: 0.7;
 cursor: not-allowed;
 background-color: var(--color-grey) !important;
 box-shadow: none !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
 .media-object-brutalist, .media-object-brutalist.reverse {
 grid-template-columns: 1fr;
 }
 .media-object-brutalist.reverse .media-visual-brutalist {
 order: 1;
 }
 .contact-page-grid {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 768px) {
 .nav-toggle {
 display: block;
 z-index: 1001;
 }
 .nav-links-wrapper {
 position: static;
 }
 .nav-links {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--color-white);
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 }
 .nav-links.active {
 display: flex;
 }
 .nav-links a {
 font-size: 2rem;
 }
 .hero-title {
 font-size: clamp(3rem, 15vw, 5rem);
 }
 .features-list-brutalist {
 grid-template-columns: 1fr;
 }
 .footer-grid {
 grid-template-columns: 1fr 1fr;
 }
 #cookie-banner {
 flex-direction: column;
 }
}

@media (max-width: 576px) {
 .footer-grid {
 grid-template-columns: 1fr;
 text-align: center;
 }
 .footer-bottom {
 flex-direction: column;
 gap: 15px;
 }
 .form-brutalist {
 grid-template-columns: 1fr;
 }
}