:root {
     --black: #0a0a0a;
     --white: #ffffff;
     --gray-dark: #1a1a1a;
     --gray-mid: #2e2e2e;
     --gray-light: #b0b0b0;
     --accent: #c8a84b;
     --accent-light: #e8c96a;
     --text-muted: #888;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Barlow', sans-serif;
     background: var(--black);
     color: var(--white);
     overflow-x: hidden;
 }

 /* ─── NAVBAR ─── */
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: var(--black);
     padding: 0 2rem;
 }

 .navbar-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1300px;
     margin: 0 auto;
     height: 72px;
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .nav-logo img {
     height: 52px;
     width: auto;
     filter: invert(0);
 }

 .nav-logo-text {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
 }

 .nav-logo-text span:first-child {
     font-family: 'Black Ops One', cursive;
     font-size: 1.1rem;
     color: var(--white);
     letter-spacing: 2px;
 }

 .nav-logo-text span:last-child {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.65rem;
     color: var(--accent);
     letter-spacing: 3px;
     text-transform: uppercase;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 2rem;
     list-style: none;
 }

 .nav-links a {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.85rem;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--gray-light);
     text-decoration: none;
     transition: color 0.3s;
 }

 .nav-links a:hover {
     color: var(--white);
 }

 .nav-cta {
     background: var(--white);
     color: var(--black) !important;
     padding: 8px 20px;
     clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
     transition: background 0.3s, color 0.3s !important;
 }

 .nav-cta:hover {
     background: var(--accent) !important;
     color: var(--black) !important;
 }

 /* Curved bottom */
 .navbar-curve {
     width: 100%;
     overflow: hidden;
     line-height: 0;
     margin-top: -1px;
 }

 .navbar-curve svg {
     display: block;
     width: 100%;
 }

 /* ─── HERO ─── */
 .hero {
     padding-top: 72px;
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
     gap: 0;
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.015) 60px, rgba(255, 255, 255, 0.015) 61px),
         repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.015) 60px, rgba(255, 255, 255, 0.015) 61px);
     pointer-events: none;
 }

 .hero-image-block {
     position: relative;
     min-height: 420px;
     overflow: hidden;
     background: var(--gray-dark);
 }

 .hero-image-block img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     opacity: 0.7;
     filter: grayscale(20%);
 }

 .hero-image-block::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
 }

 .hero-heading-block {
     background: var(--white);
     padding: 4rem 3rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-left: 1px solid #222;
     position: relative;
 }

 .hero-heading-block::before {
     content: 'SINCE 2010';
     position: absolute;
     top: 2rem;
     right: 2rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.7rem;
     letter-spacing: 4px;
     color: var(--accent);
     border: 1px solid var(--black);
     padding: 4px 12px;
 }

 .hero-tag {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.75rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--black);
     margin-bottom: 1rem;
 }

 .hero-title {
     font-family: 'Black Ops One', cursive;
     font-size: clamp(2.2rem, 4vw, 3.5rem);
     line-height: 1.05;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 1.2rem;
 }

 .hero-title span {
     color: var(--accent);
 }

 .hero-desc {
     font-size: 0.95rem;
     color: var(--black);
     line-height: 1.7;
     max-width: 380px;
     margin-bottom: 2rem;
 }

 .hero-button-block {
     background: var(--white);
     padding: 2.5rem 3rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 1.2rem;
     border-top: 1px solid #333;
     border-right: 1px solid #222;
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--black);
     color: var(--white);
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     padding: 14px 28px;
     text-decoration: none;
     clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
     transition: background 0.3s;
     align-self: flex-start;
 }

 .btn-primary:hover {
     background: var(--gray-mid);
 }

 .btn-secondary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: transparent;
     color: var(--black);
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 12px 0;
     text-decoration: none;
     border-bottom: 2px solid var(--black);
     align-self: flex-start;
     transition: color 0.3s, border-color 0.3s;
 }

 .btn-secondary:hover {
     color: #555;
     border-color: #555;
 }

 .hero-stats-block {
     background: var(--black);
     padding: 2.5rem 3rem;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
     border-top: 1px solid #222;
     align-items: center;
 }

 .stat-item {
     text-align: center;
     position: relative;
 }

 .stat-item:not(:last-child)::after {
     content: '';
     position: absolute;
     right: 0;
     top: 10%;
     bottom: 10%;
     width: 1px;
     background: #222;
 }

 .stat-number {
     font-family: 'Black Ops One', cursive;
     font-size: 2.2rem;
     color: var(--white);
     line-height: 1;
 }

 .stat-number span {
     color: var(--accent);
     font-size: 1.4rem;
 }

 .stat-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.68rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-top: 4px;
 }

 /* ─── SECTION HEADERS ─── */
 .section-header {
     text-align: center;
     margin-bottom: 3.5rem;
 }

 .section-tag {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.72rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 0.8rem;
     display: block;
 }

 .section-title {
     font-family: 'Black Ops One', cursive;
     font-size: clamp(1.8rem, 3.5vw, 2.8rem);
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.1;
 }

 .section-line {
     width: 60px;
     height: 3px;
     background: var(--white);
     margin: 1rem auto 0;
     position: relative;
 }

 .section-line::before,
 .section-line::after {
     content: '';
     position: absolute;
     top: 0;
     width: 8px;
     height: 8px;
     background: var(--accent);
     border-radius: 50%;
     top: -2.5px;
 }

 .section-line::before {
     left: -14px;
 }

 .section-line::after {
     right: -14px;
 }

 /* ─── SERVICES (6 large cards) ─── */
 .services-section {
     padding: 6rem 2rem;
     background: var(--black);
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5px;
     max-width: 1300px;
     margin: 0 auto;
 }

 .service-card {
     position: relative;
     overflow: hidden;
     aspect-ratio: 4/3;
     cursor: pointer;
     background: var(--gray-dark);
 }

 .service-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(60%) brightness(0.7);
     transition: filter 0.5s, transform 0.6s;
 }

 .service-card:hover img {
     filter: grayscale(0%) brightness(0.85);
     transform: scale(1.05);
 }

 .service-card-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 2rem;
     transition: background 0.4s;
 }

 .service-card:hover .service-card-overlay {
     background: linear-gradient(to top, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.2) 100%);
 }

 .service-number {
     font-family: 'Black Ops One', cursive;
     font-size: 3.5rem;
     color: rgba(255, 255, 255, 0.05);
     position: absolute;
     top: 1rem;
     right: 1.5rem;
     line-height: 1;
 }

 .service-card-tag {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.65rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 0.4rem;
 }

 .service-card-title {
     font-family: 'Black Ops One', cursive;
     font-size: 1.3rem;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 0.6rem;
 }

 .service-card-desc {
     font-size: 0.82rem;
     color: rgba(255, 255, 255, 0.65);
     line-height: 1.6;
     margin-bottom: 1rem;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease;
 }

 .service-card:hover .service-card-desc {
     max-height: 80px;
 }

 .service-card-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--white);
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     padding: 8px 16px;
     text-decoration: none;
     transition: background 0.3s, border-color 0.3s;
     align-self: flex-start;
 }

 .service-card-btn:hover {
     background: var(--white);
     color: var(--black);
 }

 /* ─── FAQ ─── */
 .faq-section {
     padding: 6rem 2rem;
     background: var(--gray-dark);
 }

 .faq-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1px;
     max-width: 1200px;
     margin: 0 auto;
     background: #333;
 }

 .faq-item {
     background: var(--gray-dark);
     padding: 2rem 2.5rem;
     cursor: pointer;
     transition: background 0.3s;
     border-left: 3px solid transparent;
 }

 .faq-item:hover,
 .faq-item.active {
     background: #252525;
     border-left-color: var(--white);
 }

 .faq-q {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1rem;
     font-weight: 700;
     color: var(--white);
     letter-spacing: 1px;
     text-transform: uppercase;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 1rem;
 }

 .faq-icon {
     width: 22px;
     height: 22px;
     min-width: 22px;
     border: 1px solid #555;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--accent);
     transition: transform 0.3s, border-color 0.3s;
 }

 .faq-item.active .faq-icon {
     transform: rotate(45deg);
     border-color: var(--accent);
 }

 .faq-a {
     font-size: 0.85rem;
     color: var(--gray-light);
     line-height: 1.7;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.3s;
 }

 .faq-item.active .faq-a {
     max-height: 200px;
     padding-top: 1rem;
 }

 /* ─── CTA ─── */
 .cta-section {
     padding: 7rem 2rem;
     background: var(--white);
     position: relative;
     overflow: hidden;
     text-align: center;
 }

 .cta-section::before {
     content: 'CALL NOW';
     position: absolute;
     font-family: 'Black Ops One', cursive;
     font-size: 15rem;
     color: rgba(0, 0, 0, 0.04);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     white-space: nowrap;
     pointer-events: none;
     letter-spacing: 10px;
 }

 .cta-tag {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.72rem;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: #888;
     margin-bottom: 1rem;
     display: block;
 }

 .cta-title {
     font-family: 'Black Ops One', cursive;
     font-size: clamp(2rem, 5vw, 4rem);
     color: var(--black);
     text-transform: uppercase;
     letter-spacing: 2px;
     line-height: 1.05;
     margin-bottom: 1rem;
 }

 .cta-phone {
     font-family: 'Black Ops One', cursive;
     font-size: clamp(2rem, 5vw, 4.5rem);
     color: var(--black);
     letter-spacing: 2px;
     display: block;
     margin-bottom: 2rem;
     text-decoration: none;
     transition: opacity 0.3s;
 }

 .cta-phone:hover {
     opacity: 0.7;
 }

 .cta-btns {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn-dark {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--black);
     color: var(--white);
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     padding: 16px 36px;
     text-decoration: none;
     clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
     transition: background 0.3s;
 }

 .btn-dark:hover {
     background: #333;
 }

 .btn-outline-dark {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: transparent;
     color: var(--black);
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     padding: 16px 36px;
     text-decoration: none;
     border: 2px solid var(--black);
     transition: background 0.3s, color 0.3s;
 }

 .btn-outline-dark:hover {
     background: var(--black);
     color: var(--white);
 }

 /* ─── COMPREHENSIVE SERVICES ─── */
 .comp-services-section {
     padding: 6rem 2rem;
     background: var(--black);
 }

 .comp-services-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .comp-service-card {
     background: var(--gray-dark);
     padding: 2.5rem 2rem;
     position: relative;
     overflow: hidden;
     transition: background 0.3s;
     border-bottom: 3px solid transparent;
 }

 .comp-service-card:hover {
     background: #252525;
     border-bottom-color: var(--white);
 }

 .comp-service-icon {
     font-size: 2rem;
     margin-bottom: 1rem;
     display: block;
 }

 .comp-service-title {
     font-family: 'Black Ops One', cursive;
     font-size: 1.05rem;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 0.8rem;
 }

 .comp-service-desc {
     font-size: 0.83rem;
     color: var(--gray-light);
     line-height: 1.7;
 }

 .comp-service-num {
     position: absolute;
     bottom: 1.5rem;
     right: 1.5rem;
     font-family: 'Black Ops One', cursive;
     font-size: 2.5rem;
     color: rgba(255, 255, 255, 0.04);
     line-height: 1;
 }

 /* ─── SERVICE AREAS ─── */
 .areas-section {
     padding: 6rem 2rem;
     background: var(--gray-dark);
 }

 .areas-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 2px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .area-item {
     background: var(--black);
     padding: 1.5rem 1rem;
     text-align: center;
     transition: background 0.3s;
     cursor: default;
 }

 .area-item:hover {
     background: #1e1e1e;
 }

 .area-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.8rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--white);
     margin-bottom: 0.2rem;
 }

 .area-state {
     font-size: 0.65rem;
     color: var(--text-muted);
     letter-spacing: 1px;
 }

 /* ─── FEATURE DEVICES / WHY US ─── */
 .features-section {
     padding: 6rem 2rem;
     background: var(--black);
 }

 .features-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     max-width: 1200px;
     margin: 0 auto;
     align-items: center;
 }

 .features-visual {
     position: relative;
 }

 .phone-mockup {
     width: 240px;
     height: 480px;
     background: #111;
     border: 2px solid #333;
     border-radius: 36px;
     margin: 0 auto;
     position: relative;
     overflow: hidden;
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px #222;
 }

 .phone-screen {
     position: absolute;
     inset: 12px;
     border-radius: 26px;
     background: var(--gray-dark);
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .phone-screen-header {
     background: var(--black);
     padding: 10px 12px;
     font-family: 'Black Ops One', cursive;
     font-size: 0.55rem;
     letter-spacing: 2px;
     color: var(--accent);
     text-transform: uppercase;
     border-bottom: 1px solid #222;
 }

 .phone-screen-body {
     padding: 12px;
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .phone-row {
     background: #222;
     border-radius: 6px;
     padding: 10px;
     font-size: 0.55rem;
     color: #aaa;
     font-family: 'Barlow Condensed', sans-serif;
     letter-spacing: 1px;
 }

 .phone-row.highlight {
     background: var(--black);
     color: var(--white);
     border: 1px solid #333;
 }

 .phone-btn-row {
     background: var(--white);
     border-radius: 6px;
     padding: 10px;
     text-align: center;
     font-size: 0.55rem;
     color: var(--black);
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
 }

 .features-content .section-header {
     text-align: left;
 }

 .features-content .section-line {
     margin-left: 0;
 }

 .features-list {
     list-style: none;
     margin-top: 2rem;
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
 }

 .feature-item {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
 }

 .feature-dot {
     width: 8px;
     height: 8px;
     min-width: 8px;
     background: var(--white);
     margin-top: 6px;
 }

 .feature-item-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.95rem;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--white);
     margin-bottom: 3px;
 }

 .feature-item-desc {
     font-size: 0.82rem;
     color: var(--gray-light);
     line-height: 1.6;
 }

 /* ─── WHY CHOOSE US ─── */
 .why-section {
     padding: 6rem 2rem;
     background: var(--gray-dark);
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5px;
     max-width: 1200px;
     margin: 3rem auto 0;
     background: #333;
 }

 .why-card {
     background: var(--gray-dark);
     padding: 2.5rem 2rem;
     text-align: center;
     transition: background 0.3s;
 }

 .why-card:hover {
     background: var(--black);
 }

 .why-icon {
     width: 56px;
     height: 56px;
     border: 1px solid #444;
     margin: 0 auto 1.2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     transition: border-color 0.3s;
 }

 .why-card:hover .why-icon {
     border-color: var(--white);
 }

 .why-title {
     font-family: 'Black Ops One', cursive;
     font-size: 0.95rem;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 0.6rem;
 }

 .why-desc {
     font-size: 0.82rem;
     color: var(--gray-light);
     line-height: 1.6;
 }

 /* ─── CONTACT ─── */
 .contact-section {
     padding: 6rem 2rem;
     background: var(--black);
 }

 .contact-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .contact-map {
     background: var(--gray-dark);
     min-height: 480px;
     position: relative;
     overflow: hidden;
 }

 .contact-map iframe {
     width: 100%;
     height: 100%;
     min-height: 480px;
     border: none;
     filter: grayscale(100%) invert(92%) contrast(83%);
 }

 .contact-info {
     background: var(--gray-dark);
     padding: 3.5rem 3rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .contact-info .section-header {
     text-align: left;
     margin-bottom: 2.5rem;
 }

 .contact-info .section-line {
     margin-left: 0;
 }

 .contact-detail {
     display: flex;
     gap: 1.2rem;
     align-items: flex-start;
     margin-bottom: 1.8rem;
 }

 .contact-detail-icon {
     width: 42px;
     height: 42px;
     min-width: 42px;
     background: var(--black);
     border: 1px solid #333;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
 }

 .contact-detail-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.65rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 3px;
 }

 .contact-detail-value {
     font-size: 0.92rem;
     color: var(--white);
     line-height: 1.5;
 }

 .contact-detail-value a {
     color: var(--white);
     text-decoration: none;
     transition: opacity 0.3s;
 }

 .contact-detail-value a:hover {
     opacity: 0.7;
 }

 /* ─── FOOTER ─── */
 .footer {
     background: var(--gray-dark);
     border-top: 1px solid #222;
     padding: 4rem 2rem 2rem;
 }

 .footer-top {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
     gap: 3rem;
     max-width: 1200px;
     margin: 0 auto;
     padding-bottom: 3rem;
     border-bottom: 1px solid #222;
 }

 .footer-brand img {
     height: 64px;
     width: auto;
     margin-bottom: 1rem;
 }

 .footer-desc {
     font-size: 0.83rem;
     color: var(--gray-light);
     line-height: 1.7;
     margin-bottom: 1.5rem;
 }

 .footer-social {
     display: flex;
     gap: 10px;
 }

 .social-btn {
     width: 36px;
     height: 36px;
     background: #222;
     border: 1px solid #333;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: var(--gray-light);
     font-size: 0.85rem;
     transition: background 0.3s, color 0.3s;
 }

 .social-btn:hover {
     background: var(--white);
     color: var(--black);
 }

 .footer-col-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.7rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--white);
     margin-bottom: 1.2rem;
 }

 .footer-links {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0.7rem;
 }

 .footer-links a {
     font-size: 0.82rem;
     color: var(--gray-light);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-links a:hover {
     color: var(--white);
 }

 .footer-bottom {
     max-width: 1200px;
     margin: 0 auto;
     padding-top: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 1rem;
 }

 .footer-copy {
     font-size: 0.75rem;
     color: var(--text-muted);
     letter-spacing: 1px;
 }

 .footer-legal {
     display: flex;
     gap: 1.5rem;
 }

 .footer-legal a {
     font-size: 0.72rem;
     color: var(--text-muted);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-legal a:hover {
     color: var(--gray-light);
 }

 /* ─── HOW WE WORK ─── */
 .how-section {
     padding: 7rem 2rem;
     background: var(--black);
     position: relative;
     overflow: hidden;
 }

 .how-section::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 50%;
     background: var(--gray-dark);
     clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
     z-index: 0;
 }

 .how-inner {
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }

 .how-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
     margin-top: 4rem;
 }

 .how-steps {
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .how-step {
     display: flex;
     gap: 1.8rem;
     align-items: flex-start;
     position: relative;
     padding-bottom: 2.5rem;
 }

 .how-step:last-child {
     padding-bottom: 0;
 }

 .how-step-left {
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 52px;
 }

 .how-step-num {
     width: 52px;
     height: 52px;
     background: var(--white);
     color: var(--black);
     font-family: 'Black Ops One', cursive;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     letter-spacing: 1px;
     flex-shrink: 0;
     position: relative;
     z-index: 1;
 }

 .how-step-line {
     width: 2px;
     flex: 1;
     background: #2a2a2a;
     margin-top: 4px;
     min-height: 40px;
 }

 .how-step:last-child .how-step-line {
     display: none;
 }

 .how-step-content {
     padding-top: 10px;
 }

 .how-step-title {
     font-family: 'Black Ops One', cursive;
     font-size: 1.05rem;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 0.5rem;
 }

 .how-step-desc {
     font-size: 0.85rem;
     color: var(--gray-light);
     line-height: 1.7;
 }

 .how-step-tag {
     display: inline-block;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.6rem;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--accent);
     border: 1px solid rgba(200, 168, 75, 0.3);
     padding: 3px 10px;
     margin-bottom: 0.5rem;
 }

 .how-visual {
     position: relative;
 }

 .how-card-stack {
     position: relative;
     height: 420px;
 }

 .how-card {
     position: absolute;
     border: 1px solid #222;
     padding: 2rem;
     background: var(--gray-dark);
 }

 .how-card.card-1 {
     top: 0;
     left: 0;
     right: 0;
     z-index: 1;
 }

 .how-card.card-2 {
     top: 120px;
     left: 30px;
     right: -30px;
     z-index: 2;
     background: #222;
     border-color: #333;
 }

 .how-card.card-3 {
     top: 230px;
     left: 0;
     right: 30px;
     z-index: 3;
     background: var(--white);
     color: var(--black);
     border-color: var(--white);
 }

 .how-card-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.62rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     margin-bottom: 0.6rem;
     color: var(--accent);
 }

 .how-card.card-3 .how-card-label {
     color: #888;
 }

 .how-card-val {
     font-family: 'Black Ops One', cursive;
     font-size: 1.4rem;
     line-height: 1.1;
     color: var(--white);
 }

 .how-card.card-3 .how-card-val {
     color: var(--black);
 }

 .how-card-sub {
     font-size: 0.78rem;
     color: var(--gray-light);
     margin-top: 0.4rem;
 }

 .how-card.card-3 .how-card-sub {
     color: #555;
 }

 .how-guarantee {
     margin-top: 2.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1.2rem 1.5rem;
     border: 1px solid #2a2a2a;
     background: rgba(255, 255, 255, 0.02);
 }

 .how-guarantee-icon {
     font-size: 1.8rem;
 }

 .how-guarantee-text {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--white);
     line-height: 1.4;
 }

 .how-guarantee-text span {
     display: block;
     font-weight: 400;
     font-size: 0.72rem;
     color: var(--gray-light);
     text-transform: none;
     letter-spacing: 0;
     margin-top: 2px;
 }

 /* ─── PREMIUM SERVICES ─── */
 .premium-section {
     padding: 7rem 2rem;
     background: var(--gray-dark);
     position: relative;
     overflow: hidden;
 }

 .premium-section::after {
     content: 'PREMIUM';
     position: absolute;
     font-family: 'Black Ops One', cursive;
     font-size: 18rem;
     color: rgba(255, 255, 255, 0.018);
     bottom: -2rem;
     right: -2rem;
     line-height: 1;
     pointer-events: none;
     letter-spacing: -5px;
 }

 .premium-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .premium-card {
     position: relative;
     overflow: hidden;
     background: var(--black);
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 340px;
 }

 .premium-card.reverse {
     direction: rtl;
 }

 .premium-card.reverse>* {
     direction: ltr;
 }

 .premium-card-img {
     position: relative;
     overflow: hidden;
 }

 .premium-card-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(70%) brightness(0.65);
     transition: filter 0.5s, transform 0.6s;
 }

 .premium-card:hover .premium-card-img img {
     filter: grayscale(20%) brightness(0.8);
     transform: scale(1.06);
 }

 .premium-card-img::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, transparent, rgba(10, 10, 10, 0.5));
 }

 .premium-card.reverse .premium-card-img::after {
     background: linear-gradient(to left, transparent, rgba(10, 10, 10, 0.5));
 }

 .premium-card-body {
     padding: 2.5rem 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     background: var(--gray-dark);
     border: 1px solid #222;
     transition: background 0.3s;
 }

 .premium-card:hover .premium-card-body {
     background: #222;
 }

 .premium-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.6rem;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--black);
     background: var(--white);
     padding: 4px 12px;
     margin-bottom: 1.2rem;
     align-self: flex-start;
     font-weight: 700;
 }

 .premium-card-title {
     font-family: 'Black Ops One', cursive;
     font-size: 1.3rem;
     color: var(--white);
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 1.15;
     margin-bottom: 0.8rem;
 }

 .premium-card-desc {
     font-size: 0.82rem;
     color: var(--gray-light);
     line-height: 1.7;
     margin-bottom: 1.5rem;
 }

 .premium-features {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-bottom: 1.8rem;
 }

 .premium-features li {
     font-size: 0.8rem;
     color: var(--gray-light);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .premium-features li::before {
     content: '';
     width: 6px;
     height: 6px;
     min-width: 6px;
     background: var(--white);
 }

 .premium-price {
     font-family: 'Black Ops One', cursive;
     font-size: 1.1rem;
     color: var(--white);
     margin-bottom: 1.2rem;
     letter-spacing: 1px;
 }

 .premium-price span {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.72rem;
     color: var(--text-muted);
     font-weight: 400;
     letter-spacing: 1px;
     margin-left: 4px;
 }

 .premium-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--white);
     background: var(--black);
     border: 1px solid #333;
     padding: 10px 20px;
     text-decoration: none;
     align-self: flex-start;
     transition: background 0.3s, border-color 0.3s;
 }

 .premium-btn:hover {
     background: var(--white);
     color: var(--black);
     border-color: var(--white);
 }

 .premium-ribbon {
     position: absolute;
     top: 1.2rem;
     right: 1.2rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 0.6rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--black);
     background: var(--accent);
     padding: 4px 10px;
     font-weight: 700;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 1024px) {
     .hero {
         grid-template-columns: 1fr;
     }

     .hero-image-block {
         aspect-ratio: 16/7;
         min-height: auto;
     }

     .services-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .comp-services-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .areas-grid {
         grid-template-columns: repeat(5, 1fr);
     }

     .why-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .footer-top {
         grid-template-columns: 1fr 1fr;
     }

     .features-layout {
         grid-template-columns: 1fr;
     }

     .how-grid {
         grid-template-columns: 1fr;
     }

     .premium-grid {
         grid-template-columns: 1fr;
     }

     .premium-card {
         grid-template-columns: 1fr;
     }

     .premium-card-img {
         min-height: 200px;
     }
 }

 @media (max-width: 768px) {
     .nav-links {
         display: none;
     }

     .hero-stats-block {
         grid-template-columns: repeat(3, 1fr);
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .comp-services-grid {
         grid-template-columns: 1fr;
     }

     .faq-grid {
         grid-template-columns: 1fr;
     }

     .areas-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .contact-layout {
         grid-template-columns: 1fr;
     }

     .footer-top {
         grid-template-columns: 1fr;
     }

     .hero-heading-block,
     .hero-button-block {
         padding: 2.5rem 1.5rem;
     }

     .hero-stats-block {
         padding: 2rem 1.5rem;
     }
 }

 /* ─── ANIMATIONS ─── */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .animate-in {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .animate-in.visible {
     opacity: 1;
     transform: translateY(0);
 }