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

 :root {
     --bg: #f0f5fe;
     --surface: #ffffff;
     --surface2: #1a4fa0;
     --border: rgba(100, 160, 255, 0.1);
     --border2: rgba(100, 160, 255, 0.2);
     --text: #c8d8f0;
     --muted: #4a6080;
     --accent: #2979ff;
     --accent-lt: rgba(41, 121, 255, 0.08);
     --accent-md: rgba(41, 121, 255, 0.2);
     --accent-glow: rgba(41, 121, 255, 0.3);
     --gold: #ffc107;
     --gold-lt: rgba(255, 193, 7, 0.08);
     --teal: #00bcd4;
     --teal-lt: rgba(0, 188, 212, 0.08);
 }



 /* Blueprint grid overlay */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     background-image:
         linear-gradient(rgba(41, 121, 255, 0.025) 1px, transparent 1px),
         linear-gradient(90deg, rgba(41, 121, 255, 0.025) 1px, transparent 1px);
     background-size: 48px 48px;
 }


 /* ── HERO ── */
 .hero {
     min-height: 50vh;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     background:
         linear-gradient(rgba(8, 33, 61, 0.185), rgba(26, 79, 160, 0.308)),
         url(/assete/images/page-banner/smart-city.webp);
     background-size: cover;
     background-position: center;
 }

 .inner {
     max-width: 1280px;
     margin: auto;
 }

 .hero-inner {
     max-width: 1280px;
     margin: 0 auto;
     display: grid;
     height: 100%;
 }

 /* City silhouette */
 .city-bg {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 0;
     height: 45%;
     background:
         linear-gradient(to top, rgba(2, 6, 15, 1) 0%, transparent 100%);
 }

 .city-bg::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%230a1525' d='M0,300 L0,180 L40,180 L40,120 L60,120 L60,100 L80,100 L80,140 L100,140 L100,80 L120,80 L120,60 L140,60 L140,80 L160,80 L160,160 L180,160 L180,100 L200,100 L200,40 L220,40 L220,20 L240,20 L240,40 L260,40 L260,100 L280,100 L280,140 L300,140 L300,80 L340,80 L340,60 L360,60 L360,80 L380,80 L380,120 L400,120 L400,60 L420,60 L420,40 L440,40 L440,20 L460,20 L460,40 L480,40 L480,100 L500,100 L500,80 L520,80 L520,140 L540,140 L540,80 L560,80 L560,100 L580,100 L580,60 L600,60 L600,40 L620,40 L620,20 L640,20 L640,40 L660,40 L660,60 L680,60 L680,100 L700,100 L700,140 L720,140 L720,80 L760,80 L760,100 L780,100 L780,60 L800,60 L800,40 L820,40 L820,60 L840,60 L840,100 L860,100 L860,80 L880,80 L880,120 L900,120 L900,80 L920,80 L920,60 L940,60 L940,80 L960,80 L960,140 L980,140 L980,100 L1000,100 L1000,120 L1020,120 L1020,80 L1040,80 L1040,60 L1060,60 L1060,40 L1080,40 L1080,60 L1100,60 L1100,100 L1120,100 L1120,80 L1140,80 L1140,120 L1160,120 L1160,100 L1180,100 L1180,60 L1200,60 L1200,80 L1220,80 L1220,140 L1240,140 L1240,100 L1260,100 L1260,80 L1280,80 L1280,120 L1300,120 L1300,160 L1320,160 L1320,100 L1360,100 L1360,140 L1380,140 L1380,180 L1440,180 L1440,300 Z'/%3E%3C/svg%3E") no-repeat bottom center / cover;
 }

 /* Scanning lines animation */
 .scan-line {
     position: absolute;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(41, 121, 255, 0.4), transparent);
     animation: scan 6s linear infinite;
     z-index: 1;
 }

 @keyframes scan {
     0% {
         top: 0%;
         opacity: 0;
     }

     5% {
         opacity: 1;
     }

     95% {
         opacity: 1;
     }

     100% {
         top: 100%;
         opacity: 0;
     }
 }

 /* Nodes */
 .node {
     position: absolute;
     z-index: 1;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(41, 121, 255, 0.3);
     animation: nodeFlicker 3s ease-in-out infinite;
 }

 @keyframes nodeFlicker {

     0%,
     100% {
         opacity: 0.3;
     }

     50% {
         opacity: 1;
     }
 }

 .node-line {
     position: absolute;
     z-index: 0;
     background: linear-gradient(90deg, transparent, rgba(41, 121, 255, 0.15), transparent);
     height: 1px;
     animation: linePulse 4s ease-in-out infinite;
 }

 @keyframes linePulse {

     0%,
     100% {
         opacity: 0.2;
     }

     50% {
         opacity: 0.7;
     }
 }

 .hero-content {
     position: relative;
     z-index: 2;
     padding: 10px 72px 0;
     flex: 1;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
 }

 .hero-tag {
     font-family: 'Syne', sans-serif;
     display: inline-flex;
     align-items: center;
     /* gap: 10px; */
     border: 1px solid rgb(237 237 237 / 78%);
     border-radius: 2px;
     padding: 6px 9px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: #fff;
     margin-bottom: 32px;
 }

 .hero-tag-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 6px var(--accent);
     animation: nodeFlicker 2s ease-in-out infinite;
 }

 .hero h1 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     line-height: 1.05;
     color: #ffffff;
     margin-bottom: 28px;
 }

 .hero h1 .line-sm {
     display: block;
     font-size: 0.45em;
     font-weight: 300;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: #fff;
     margin-bottom: 12px;
 }

 .hero h1 .line-accent {
     color: var(--accent);
 }

 .hero-desc {
     font-size: 16px;
     line-height: 1.9;
     color: var(--muted);
     font-weight: 300;
     font-style: italic;
     max-width: 480px;
     margin-bottom: 40px;
 }

 .hero-p {
     color: #fff;
     margin-bottom: 10px;
 }

 .hero-desc strong {
     color: var(--text);
     font-style: normal;
     font-weight: 400;
 }

 .hero-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 48px;
 }

 .btn-blue {
     font-family: 'Syne', sans-serif;
     background: var(--accent);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     padding: 14px 28px;
     border-radius: 2px;
     text-decoration: none;
     transition: all 0.25s;
     clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
 }

 .btn-blue:hover {
     background: #1565c0;
     box-shadow: 0 0 28px var(--accent-glow);
     transform: translateY(-2px);
 }

 .btn-ghost {
     font-family: 'Syne', sans-serif;
     border: 1px solid var(--border2);
     color: #000000;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     padding: 14px 24px;
     border-radius: 2px;
     text-decoration: none;
     transition: all 0.25s;
     background: #2d659a;
 }

 .btn-ghost:hover {
     border-color: var(--accent);
     color: var(--accent);
 }

 /* Hero right — service hexmap */
 .hexmap {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 }

 .hex-cell {
     background: rgba(255, 255, 255, 0.61);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 20px 14px;
     text-align: center;
     transition: all 0.25s;
     clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
 }

 .hex-cell:hover {
     background: rgba(41, 121, 255, 0.12);
     border-color: var(--accent-md);
     transform: translateY(-2px);
 }

 .hex-icon {
     font-size: 22px;
     margin-bottom: 8px;
     display: block;
 }

 .hex-name {
     font-family: 'Syne', sans-serif;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: #000;
     line-height: 1.3;
 }

 /* Stats bar */
 .hero-stats {
     position: relative;
     z-index: 2;
     border-top: 1px solid var(--border);
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     margin-top: 64px;
 }

 .hstat {
     padding: 20px 32px;
     border-right: 1px solid var(--border);
 }

 .hstat:last-child {
     border-right: none;
 }

 .hstat-n {
     font-family: 'Syne', sans-serif;
     font-size: 22px;
     font-weight: 800;
     color: var(--accent);
     line-height: 1;
     margin-bottom: 4px;
     text-transform: uppercase;
 }

 .hstat-l {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--muted);
     font-family: 'Syne', sans-serif;
 }

 /* ── SECTIONS ── */
 section {
     position: relative;
     z-index: 1;
     padding: 100px 72px;
 }

 .eyebrow {
     font-family: 'Syne', sans-serif;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.24em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 16px;
 }

 .eyebrow::before {
     content: '//';
     color: rgba(41, 121, 255, 0.4);
     font-size: 12px;
 }

 .sh {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.02em;
     color: #fff;
     margin-bottom: 18px;
 }

 .sh em {
     color: var(--accent);
     font-style: normal;
 }


 .shs {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.02em;
     color: #000000;
     margin-bottom: 18px;
 }

 .sh em {
     color: var(--accent);
     font-style: normal;
 }

 .sp {
     font-size: 16px;
     line-height: 1.85;
     color: var(--muted);
     max-width: 600px;
 }

 /* ── OVERVIEW ── */
 #overview {
     background: var(--surface);
 }

 .ov-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     margin-top: 56px;
 }

 .ov-text p {
     font-size: 16px;
     line-height: 1.9;
     color: var(--muted);
     margin-bottom: 20px;
 }

 .ov-text p strong {
     color: #000000;
     font-style: italic;
 }

 .ov-note {
     border: 1px solid var(--border2);
     border-left: 3px solid var(--accent);
     border-radius: 0 6px 6px 0;
     padding: 20px 24px;
     margin-top: 28px;
     background: var(--accent-lt);
 }

 .ov-note p {
     font-size: 14px;
     line-height: 1.75;
     color: #1a1d22;
     margin: 0;
 }

 .ov-note p strong {
     color: var(--accent);
     font-style: normal;
     font-weight: 600;
     font-family: 'Syne', sans-serif;
 }

 /* Capability diagram */
 .cap-diagram {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 36px;
     position: relative;
     overflow: hidden;
 }

 .cap-diagram::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--accent), var(--teal));
 }

 .cap-center {
     text-align: center;
     margin-bottom: 28px;
     padding-bottom: 24px;
     border-bottom: 1px solid var(--border);
 }

 .cap-center-icon {
     font-size: 36px;
     margin-bottom: 8px;
     display: block;
 }

 .cap-center h3 {
     font-family: 'Syne', sans-serif;
     font-size: 22px;
     font-weight: 800;
     color: #fff;
     letter-spacing: -0.01em;
     margin-bottom: 4px;
 }

 .cap-center p {
     font-size: 12px;
     color: #fff;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     font-family: 'Syne', sans-serif;
 }

 .cap-spokes {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
 }

 .cap-spoke {
     background: rgba(41, 121, 255, 0.05);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 12px 10px;
     text-align: center;
     font-size: 11px;
     font-weight: 600;
     color: var(--text);
     font-family: 'Syne', sans-serif;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     transition: all 0.2s;
 }

 .cap-spoke:hover {
     background: rgba(41, 121, 255, 0.12);
     border-color: var(--accent);
     color: #fff;
 }

 .cap-spoke-icon {
     display: block;
     font-size: 16px;
     margin-bottom: 5px;
 }

 /* ── SERVICES ── */
 #services {
     background: var(--bg);
 }

 .svc-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: end;
     margin-bottom: 56px;
 }

 .svc-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     background: var(--border);
     border-radius: 8px;
     overflow: hidden;
 }

 .svc-card {
     background: #1a4fa0;
     padding: 32px 26px;
     position: relative;
     overflow: hidden;
     transition: background 0.25s;
 }

 .svc-card-inner {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2px;
     background: var(--border);
     border-radius: 8px;
     overflow: hidden;
     margin-top: 56px;
 }

 .svc-card:hover {
     background: var(--surface2);
 }


 .svc-card-2 {
     background: var(--surface);
     padding: 32px 26px;
     position: relative;
     overflow: hidden;
     transition: background 0.25s;
 }

 .svc-card-2:hover {
     background: var(--surface2);
 }


 .svc-num {
     font-family: 'Syne', sans-serif;
     font-size: 52px;
     font-weight: 800;
     color: rgb(41 121 255);
     line-height: 1;
     position: absolute;
     top: 12px;
     right: 16px;
 }

 .svc-icon {
     width: 44px;
     height: 44px;
     background: var(--accent-lt);
     border: 1px solid var(--accent-md);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     margin-bottom: 16px;
     clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
 }

 .svc-card h3 {
     font-family: 'Syne', sans-serif;
     font-size: 13px;
     font-weight: 700;
     color: #fff;
     letter-spacing: 0.02em;
     margin-bottom: 10px;
     line-height: 1.3;
 }

 .svc-card p {
     font-size: 13px;
     line-height: 1.7;
     color: #ffffff;
     font-weight: 400;
 }

 .svc-card-2 h3 {
     font-family: 'Syne', sans-serif;
     font-size: 13px;
     font-weight: 700;
     color: #000000;
     letter-spacing: 0.02em;
     margin-bottom: 10px;
     line-height: 1.3;
 }

 .svc-card-2 p {
     font-size: 13px;
     line-height: 1.7;
     color: #000000;
     font-weight: 400;
 }



 .svc-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--accent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s;
 }

 .svc-card:hover .svc-bar {
     transform: scaleX(1);
 }

 /* ── INDUSTRIES ── */
 #industries {
     background: var(--surface);
 }

 .ind-layout {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin-top: 56px;
 }

 .ind-card {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 28px 24px;
     transition: all 0.25s;
     position: relative;
     overflow: hidden;
 }

 .ind-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--accent), var(--teal));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s;
 }

 .ind-card:hover {
     transform: translateY(-4px);
     border-color: var(--border2);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
 }

 .ind-card:hover::before {
     transform: scaleX(1);
 }

 .ind-icon {
     font-size: 28px;
     margin-bottom: 14px;
     display: block;
 }

 .ind-card h3 {
     font-family: 'Syne', sans-serif;
     font-size: 13px;
     font-weight: 700;
     color: #000000;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     margin-bottom: 8px;
 }

 .ind-card p {
     font-size: 13px;
     line-height: 1.65;
     color: var(--muted);
     font-weight: 300;
 }

 /* ── INTEGRATIONS ── */
 #integrations {
     background: var(--bg);
 }

 .int-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     margin-top: 56px;
 }

 .int-text p {
     font-size: 16px;
     line-height: 1.9;
     color: var(--muted);
     margin-bottom: 20px;
 }

 .int-text p strong {
     color: #000;
     font-style: italic;
 }


 .int-grid {
     width: 100%;
     overflow: hidden;
 }

 .int-grid img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 10px;
 }

 .int-item {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 18px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     font-family: 'Syne', sans-serif;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: #000;
     transition: all 0.2s;
     clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
 }

 .int-item:hover {
     background: var(--accent-lt);
     border-color: var(--accent);
     color: var(--accent);
 }

 .int-item-icon {
     font-size: 18px;
     flex-shrink: 0;
 }

 /* ── FAQ ── */
 #faq {
     background: var(--surface);
 }

 .faq-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-top: 56px;
 }

 .faq-item {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 4px;
     overflow: hidden;
 }

 .faq-q {
     width: 100%;
     background: none;
     border: none;
     cursor: pointer;
     text-align: left;
     padding: 20px 22px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     font-family: 'Syne', sans-serif;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.04em;
     color: #000;
     transition: color 0.2s;
 }

 .faq-q:hover {
     color: var(--accent);
 }

 .faq-item.open .faq-q {
     color: var(--accent);
 }

 .faq-icon {
     flex-shrink: 0;
     width: 22px;
     height: 22px;
     border: 1px solid var(--border2);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: var(--accent);
     font-family: 'Syne', sans-serif;
     transition: transform 0.3s;
 }

 .faq-item.open .faq-icon {
     transform: rotate(45deg);
 }

 .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.3s;
     padding: 0 22px;
     font-size: 14px;
     line-height: 1.85;
     color: var(--muted);
 }

 .faq-item.open .faq-a {
     max-height: 260px;
     padding: 0 22px 20px;
 }

 /* ── CTA ── */
 #cta {
     position: relative;
     z-index: 1;
     background: var(--bg);
     padding: 100px 72px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     overflow: hidden;
 }

 #cta::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         radial-gradient(ellipse 50% 80% at 0% 50%, rgba(41, 121, 255, 0.07) 0%, transparent 65%),
         radial-gradient(ellipse 40% 60% at 100% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 65%);
 }

 .cta-left {
     position: relative;
     z-index: 1;
 }

 .cta-left h2 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.02em;
     color: #fff;
     margin-bottom: 20px;
 }

 .cta-left h2 em {
     color: var(--accent);
     font-style: normal;
 }

 .cta-left p {
     font-size: 16px;
     line-height: 1.85;
     color: var(--muted);
     margin-bottom: 36px;
     max-width: 440px;
 }

 .cta-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .cta-note {
     margin-top: 16px;
     font-size: 11px;
     color: var(--muted);
     font-family: 'Syne', sans-serif;
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }

 .cta-right {
     position: relative;
     z-index: 1;
 }

 .services-checklist {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .svc-check {
     display: flex;
     align-items: center;
     gap: 16px;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 16px 20px;
     transition: all 0.25s;
     clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
 }

 .svc-check:hover {
     border-color: var(--accent);
     background: var(--accent-lt);
 }

 .svc-check-icon {
     font-size: 16px;
     flex-shrink: 0;
 }

 .svc-check span {
     font-family: 'Syne', sans-serif;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--text);
 }

 /* ── REVEAL ── */
 .reveal {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .reveal.visible {
     opacity: 1;
     transform: none;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 1100px) {
     section {
         padding: 80px 32px;
     }

     #cta {
         padding: 80px 32px;
     }

     .hero-content {
         grid-template-columns: 1fr;
         padding: 130px 32px 0;
     }

     .hexmap-wrap {
         display: none;
     }

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

     .ov-layout,
     .int-layout,
     .svc-header {
         grid-template-columns: 1fr;
         gap: 40px;
     }

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

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

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

     #cta {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 640px) {
     section {
         padding: 60px 20px;
     }

     #cta {
         padding: 60px 20px;
     }

     .hero-content {
         padding: 30px 20px 0;
     }

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

     .svc-grid,
     .ind-layout,
     .int-grid {
         grid-template-columns: 1fr;
     }

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

     .svc-card-inner {
         display: grid;
         grid-template-columns: repeat(1, 1fr);
         gap: 2px;
         background: var(--border);
         border-radius: 8px;
         overflow: hidden;
         margin-top: 56px;
     }
 }