:root {
     --bg-deep: #060609;
     --bg-surface: #0c0c12;
     --bg-card: #13131f;
     --laser-red: #ff003c;
     --laser-glow: rgba(255, 0, 60, 0.35);
     --text-pure: #ffffff;
     --text-body: #a2a2b8;
     --text-dim: #4e4e66;

     /* Typography Variables */
     --font-heading: 'Orbitron', sans-serif;
     --font-tech: 'Share Tech Mono', monospace;
     --font-body: 'Inter', sans-serif;
 }

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

 body {
     background-color: var(--bg-deep);
     color: var(--text-body);
     font-family: var(--font-body);
     line-height: 1.6;
 }

 /* --- UTILITIES --- */
 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     background: var(--bg-deep);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--laser-red);
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 h1,
 h2,
 h3,
 h4,
 .brand {
     font-family: var(--font-heading);
     color: var(--text-pure);
     text-transform: uppercase;
     letter-spacing: 2px;
 }

 .section-tag {
     font-family: var(--font-tech);
     color: var(--laser-red);
     text-transform: uppercase;
     margin-bottom: 0.8rem;
     display: block;
     font-size: 1.1rem;
     letter-spacing: 1px;
 }

 .btn-prime {
     background: var(--laser-red);
     color: var(--text-pure);
     font-family: var(--font-tech);
     border: none;
     padding: 0.8rem 1.8rem;
     font-size: 1rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 0 15px var(--laser-glow);
     text-decoration: none;
     display: inline-block;
     text-align: center;
 }

 .btn-prime:hover {
     box-shadow: 0 0 25px var(--laser-red);
     transform: translateY(-2px);
 }

 /* --- NAVIGATION --- */
 header {
     border-bottom: 1px solid rgba(255, 255, 255, 0.03);
     background: rgba(6, 6, 9, 0.9);
     backdrop-filter: blur(12px);
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1000;
 }

 .nav-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 90px;
 }

 .brand span {
     color: var(--laser-red);
 }

 nav a {
     font-family: var(--font-tech);
     color: var(--text-body);
     text-decoration: none;
     margin-left: 2rem;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: 0.3s;
 }

 nav a:hover {
     color: var(--laser-red);
 }

 /* --- HERO SECTION --- */
 .hero {
     height: 75vh;
     background: linear-gradient(rgba(0, 0, 0, 0.6), var(--bg-deep)), url('https://images.unsplash.com/photo-1572663459735-75425e957ab9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJhcmJlciUyMHNob3AlMjBsYW5kc2NhcGV8ZW58MHx8MHx8fDA%3D') center/cover no-repeat;
     display: flex;
     align-items: center;
     padding-top: 90px;
 }

 .hero h1 {
     font-size: 3.5rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .hero p {
     font-family: var(--font-tech);
     color: var(--laser-red);
     margin-bottom: 2rem;
     font-size: 1.2rem;
 }

 /* --- SERVICES MODULE --- */
 .services {
     background: var(--bg-surface);
     padding: 8rem 0;
 }

 .services-header {
     margin-bottom: 4rem;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 2rem;
 }

 .service-card {
     background: var(--bg-card);
     padding: 2.5rem;
     border: 1px solid rgba(255, 255, 255, 0.02);
     transition: all 0.3s ease;
 }

 .service-card:hover {
     border-color: var(--laser-red);
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(255, 0, 60, 0.05);
 }

 .service-card h3 {
     color: var(--text-pure);
     font-size: 1.25rem;
     text-transform: uppercase;
     margin-bottom: 1rem;
     display: flex;
     align-items: center;
 }

 .service-card h3::before {
     content: '//';
     color: var(--laser-red);
     margin-right: 10px;
     font-family: var(--font-tech);
 }

 .service-card p {
     font-size: 0.95rem;
     margin-bottom: 1.5rem;
 }

 .service-price {
     font-family: var(--font-tech);
     color: var(--laser-red);
     font-weight: 700;
     font-size: 1.2rem;
 }

 /* --- THE CREW (ABOUT BARBERS) --- */
 .crew {
     padding: 8rem 0;
 }

 .crew-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2.5rem;
     margin-top: 4rem;
 }

 .crew-card {
     background: var(--bg-card);
     border: 1px solid rgba(255, 255, 255, 0.02);
     overflow: hidden;
 }

 .crew-img {
     height: 500px;
     background-size: cover;
     background-position: center;
     filter: grayscale(100%) contrast(110%);
     transition: 0.4s ease;
 }

 .crew-card:hover .crew-img {
     filter: grayscale(0%) contrast(100%);
 }

 .crew-info {
     padding: 1.5rem;
     border-top: 2px solid var(--bg-deep);
 }

 .crew-info h3 {
     font-size: 1.2rem;
     margin-bottom: 0.3rem;
 }

 .crew-role {
     font-family: var(--font-tech);
     color: var(--laser-red);
     font-size: 0.95rem;
     text-transform: uppercase;
 }

 /* --- TIMINGS & MAP --- */
 .matrix-hub {
     display: grid;
     grid-template-columns: 1fr 1fr;
     background: #020203;
     border-top: 1px solid rgba(255, 255, 255, 0.02);
     border-bottom: 1px solid rgba(255, 255, 255, 0.02);
 }

 .matrix-panel {
     padding: 6rem 8%;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .matrix-panel h2 {
     margin-bottom: 2rem;
     font-size: 2rem;
 }

 .time-matrix {
     margin-bottom: 2rem;
 }

 .time-row {
     display: flex;
     justify-content: space-between;
     padding: 1rem 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
     font-size: 0.95rem;
 }

 .time-row span:first-child {
     font-family: var(--font-tech);
     letter-spacing: 1px;
 }

 .time-row span:last-child {
     color: var(--text-pure);
     font-family: var(--font-tech);
 }

 .map-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: #09090e;
 }

 .map-wrapper iframe {
     width: 100%;
     height: 100%;
     border: none;
     filter: invert(90%) hue-rotate(180deg) contrast(120%) brightness(95%);
     opacity: 0.75;
     transition: opacity 0.3s;
 }

 .map-wrapper:hover iframe {
     opacity: 0.95;
 }

 /* --- CLIENT PICTURES GALLERY --- */
 .gallery {
     padding: 8rem 0;
     background: var(--bg-surface);
 }

 .gallery-masonry {
     column-count: 4;
     column-gap: 1.5rem;
     margin-top: 4rem;
 }

 .gallery-item {
     position: relative;
     background: var(--bg-card);
     margin-bottom: 1.5rem;
     break-inside: avoid;
     overflow: hidden;
     display: inline-block;
     width: 100%;
 }

 .gallery-item img {
     width: 100%;
     height: auto;
     display: block;
     filter: grayscale(40%) contrast(110%);
     transition: transform 0.5s ease, filter 0.5s ease;
 }

 .gallery-scanlines {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
         linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
     background-size: 100% 4px, 6px 100%;
     pointer-events: none;
 }

 .gallery-item:hover img {
     transform: scale(1.05);
     filter: grayscale(0%) contrast(100%);
 }

 .gallery-tag {
     position: absolute;
     bottom: 15px;
     left: 15px;
     background: rgba(6, 6, 9, 0.9);
     padding: 0.3rem 0.7rem;
     font-family: var(--font-tech);
     font-size: 0.8rem;
     color: var(--text-pure);
     border-left: 2px solid var(--laser-red);
     backdrop-filter: blur(4px);
 }

 /* --- TESTIMONIALS --- */
 .testimonials {
     padding: 8rem 0;
 }

 .test-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 2rem;
     margin-top: 4rem;
 }

 .test-box {
     background: var(--bg-card);
     padding: 2.5rem;
     border-right: 3px solid rgba(255, 255, 255, 0.05);
     position: relative;
 }

 .test-box:hover {
     border-right-color: var(--laser-red);
 }

 .test-box p {
     font-style: italic;
     margin-bottom: 1.5rem;
     font-size: 0.95rem;
 }

 .test-user {
     font-family: var(--font-tech);
     color: var(--text-pure);
     font-size: 1rem;
     text-transform: uppercase;
 }

 .test-user span {
     color: var(--laser-red);
     margin-left: 5px;
 }

 /* --- FUTURISTIC BOOKING MODAL --- */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(4, 4, 6, 0.85);
     backdrop-filter: blur(8px);
     z-index: 2000;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s ease;
 }

 .modal-overlay.active {
     opacity: 1;
     pointer-events: auto;
 }

 .modal-box {
     background: var(--bg-surface);
     border: 1px solid rgba(255, 0, 60, 0.3);
     box-shadow: 0 0 40px rgba(255, 0, 60, 0.15);
     width: 100%;
     max-width: 450px;
     padding: 2.5rem;
     position: relative;
     transform: scale(0.9);
     transition: transform 0.4s ease;
 }

 .modal-overlay.active .modal-box {
     transform: scale(1);
 }

 .modal-close {
     position: absolute;
     top: 15px;
     right: 20px;
     font-family: var(--font-tech);
     color: var(--text-dim);
     font-size: 1.5rem;
     cursor: pointer;
     transition: 0.2s;
 }

 .modal-close:hover {
     color: var(--laser-red);
 }

 .modal-box h3 {
     margin-bottom: 1.5rem;
     font-size: 1.4rem;
     border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
     padding-bottom: 0.5rem;
 }

 .form-group {
     margin-bottom: 1.5rem;
 }

 .form-group label {
     display: block;
     font-family: var(--font-tech);
     color: var(--laser-red);
     font-size: 0.9rem;
     text-transform: uppercase;
     margin-bottom: 0.5rem;
 }

 .form-group input,
 .form-group select {
     width: 100%;
     background: var(--bg-deep);
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 0.8rem;
     color: var(--text-pure);
     font-family: var(--font-tech);
     font-size: 1rem;
     outline: none;
     border-radius: 0;
 }

 .form-group input:focus,
 .form-group select:focus {
     border-color: var(--laser-red);
     box-shadow: 0 0 10px rgba(255, 0, 60, 0.2);
 }

 /* --- NEW SUCCESS BLOCK OVERLAY --- */
 .booking-success-block {
     display: none;
     text-align: center;
     padding: 1rem 0;
 }

 .success-icon-frame {
     font-size: 3rem;
     color: #00ff66;
     margin-bottom: 1rem;
     text-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
     font-family: var(--font-tech);
 }

 .success-terminal-panel {
     background: var(--bg-deep);
     border: 1px solid rgba(0, 255, 102, 0.2);
     padding: 1.2rem;
     text-align: left;
     font-family: var(--font-tech);
     font-size: 0.9rem;
     color: #a0fca0;
     margin: 1.5rem 0;
     line-height: 1.5;
 }

 /* --- FOOTER TERMINAL --- */
 footer {
     background: #030305;
     padding: 5rem 0 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.02);
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1.5fr;
     gap: 4rem;
     margin-bottom: 4rem;
 }

 .footer-title {
     font-family: var(--font-tech);
     color: var(--text-pure);
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
 }

 .sub-form {
     display: flex;
     margin-top: 1rem;
 }

 .sub-form input {
     background: var(--bg-surface);
     border: 1px solid rgba(255, 255, 255, 0.05);
     padding: 0.8rem;
     color: var(--text-pure);
     flex-grow: 1;
     font-family: var(--font-tech);
     outline: none;
 }

 .sub-form input:focus {
     border-color: var(--laser-red);
 }

 .copyright {
     text-align: center;
     font-family: var(--font-tech);
     font-size: 0.8rem;
     color: var(--text-dim);
     border-top: 1px solid rgba(255, 255, 255, 0.02);
     padding-top: 2rem;
 }

 /* Responsive Breakpoints */
 @media (max-width: 992px) {
     .gallery-masonry {
         column-count: 3;
     }

     .matrix-hub {
         grid-template-columns: 1fr;
     }

     .map-wrapper {
         min-height: 350px;
     }
 }

 @media (max-width: 768px) {
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 2.5rem;
     }

     .hero h1 {
         font-size: 2.3rem;
     }

     .gallery-masonry {
         column-count: 2;
     }

     nav {
         display: none;
     }
 }

 @media (max-width: 480px) {
     .gallery-masonry {
         column-count: 1;
     }
 }