:root {
   --navy: #041428;
   --blue: #00478f;
   --accent: #00b4d8;
   --gold: #f4a823;
   --teal: #007c6e;
   --purple: #5a1f8c;
   --white: #fff;
   --gray: #f5f7fa;
   --text: #1a1a2e;
   --muted: #6b7280;
   --border: #e5e8ef;

   --cs-primary: #0a2240;
   --cs-mid: #0e3060;
 }

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

 html {
   scroll-behavior: smooth
 }

 body {
   font-family: 'DM Sans', sans-serif;
   color: var(--text);
   background: #fff;
   overflow-x: hidden
 }

 a {
   text-decoration: none;
   color: inherit
 }

 img {
   max-width: 100%
 }

 /* ── PROGRESSBAR ── */
 .progressbar {
   height: 3px;
   background: var(--border);
   position: fixed;
   top: 55px;
   left: 0;
   right: 0;
   z-index: 998
 }

 .progressbar .fill {
   height: 100%;
   background: linear-gradient(90deg, var(--accent), var(--blue));
   width: 0;
   transition: width .1s
 }

 /* ── NAVBAR ── */
 .navbar {
   background: #fff;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
   height: 56px;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 999;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .06)
 }

 .nav-left {
   display: flex;
   align-items: center;
   gap: 16px
 }

 .burger {
   display: flex;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 4px
 }

 .burger span {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--text);
   transition: all .3s
 }

 .logo-wrap {
   display: flex;
   align-items: center;
   gap: 10px
 }

 .logo-icon {
   width: 36px;
   height: 36px;
   background: linear-gradient(135deg, var(--blue), var(--accent));
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .logo-icon svg {
   width: 20px;
   height: 20px;
   fill: white
 }

 .logo-text {
   font-family: 'Oswald', sans-serif;
   font-size: 18px;
   font-weight: 600;
   letter-spacing: 1px;
   color: var(--navy)
 }

 .logo-text span {
   color: var(--accent)
 }

 .nav-links {
   display: flex;
   list-style: none;
   gap: 24px
 }

 .nav-links a {
   font-size: 13px;
   font-weight: 500;
   color: #444;
   transition: color .2s;
   letter-spacing: .2px
 }

 .nav-links a:hover,
 .nav-links a.active-link {
   color: var(--blue)
 }

 .nav-right {
   display: flex;
   align-items: center;
   gap: 14px
 }

 .nav-cta {
   background: var(--blue);
   color: #fff;
   padding: 8px 20px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   border: none;
   cursor: pointer;
   transition: background .2s
 }

 .nav-cta:hover {
   background: var(--navy)
 }

 .search-btn {
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
   color: #555
 }

 .search-btn svg {
   width: 18px;
   height: 18px
 }

 /* ── HORIZONTAL NAV ── */
 .sticky-left {
   position: fixed;
   top: 56px;
   left: 0;
   right: 0;
   background: #fff;
   border-bottom: 1px solid var(--border);
   z-index: 998;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 24px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
   gap: 0
 }

 .sticky-left ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: 2px
 }

 .sticky-left>ul>li {
   position: relative
 }

 .sticky-left a {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--text);
   padding: 12px 20px;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all .2s;
   position: relative
 }

 .sticky-left a:hover {
   color: var(--blue);
   background: var(--gray)
 }

 .sticky-left a.active {
   color: #fff;
   background: linear-gradient(135deg, var(--blue), var(--accent))
 }

 .sticky-left .dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   border: 1px solid var(--border);
   box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: all .2s;
   min-width: 200px
 }

 .sticky-left li:hover .dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
 }

 .sticky-left .dropdown ul {
   display: flex;
   flex-wrap: wrap;
   gap: 1px;
   padding: 8px
 }

 .sticky-left .dropdown li {
   width: 100%
 }

 .sticky-left .dropdown a {
   padding: 12px 16px;
   font-size: 11px;
   font-weight: 500;
   background: #fafbfc
 }

 .sticky-left .dropdown a:hover {
   background: var(--gray);
   color: var(--blue)
 }

 @media(max-width:900px) {
   .sticky-left {
     display: none
   }

   .nav-links {
     display: none
   }

   .hero-content {
     padding: 0 28px !important
   }

   .container {
     padding: 0 20px !important
   }
 }

 /* ── BREADCRUMB ── */
 .breadcrumb {
   background: var(--gray);
   padding: 10px 40px;
   margin-top: 93px;
   border-bottom: 1px solid var(--border)
 }

 .breadcrumb-inner {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   color: var(--muted);
   font-weight: 500;
   letter-spacing: .3px
 }

 .breadcrumb-inner a {
   color: var(--blue);
   transition: color .2s
 }

 .breadcrumb-inner a:hover {
   color: var(--navy)
 }

 .breadcrumb-sep {
   color: var(--border);
   font-size: 14px
 }

 .breadcrumb-current {
   color: var(--text);
   font-weight: 600
 }

 /* ── HERO (Light Theme) ── */
 .hero {
   background: #011b3c22;
   min-height: 78vh;
   max-height: 560px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   /* subtle separation from the next section */
   border-bottom: 1px solid rgba(229, 232, 239, .9);
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: opacity .6s;
   filter: saturate(.95) contrast(.98) brightness(1.05)
 }

 .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(4, 20, 40, .92) 50%, rgba(0, 71, 143, .3));
 }

 /* animated security pulse overlay */
 .hero-grid {
   position: absolute;
   inset: 0;
   opacity: .08;
   background-image: radial-gradient(rgba(0, 180, 216, .9) 1px, transparent 1px), linear-gradient(rgba(0, 180, 216, .65) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 180, 216, .65) 1px, transparent 1px);
   background-size: 60px 60px, 60px 60px, 60px 60px;
   animation: gridMove 18s linear infinite
 }

 @keyframes gridMove {
   0% {
     background-position: 0 0
   }

   100% {
     background-position: 60px 60px
   }
 }

 .hero-content {
   position: relative;
   z-index: 2;
   padding: 0 80px;
   max-width: 680px
 }

 .hero-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(0, 180, 216, .12);
   color: var(--accent);
   font-size: 11px;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 5px 14px;
   border: 1px solid rgba(0, 180, 216, .35);
   margin-bottom: 18px;
   font-weight: 600
 }

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

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
     transform: scale(1)
   }

   50% {
     opacity: .4;
     transform: scale(.7)
   }
 }

 .hero-h1 {
   font-family: 'Oswald', sans-serif;
   font-size: 50px;
   font-weight: 600;
   color: #fff;
   line-height: 1.05;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 6px;
   text-shadow: none
 }

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

 .hero-h1 .sub {
   font-size: 28px;
   font-weight: 300;
   display: block;
   margin-top: 10px;
   text-transform: none;
   letter-spacing: .5px;
   color: rgba(4, 20, 40, .72)
 }

 .hero-desc {
   font-size: 15px;
   color: rgba(255, 255, 255, .8);
   line-height: 1.75;
   margin: 20px 0 32px;
   max-width: 520px
 }

 .hero-btns {
   display: flex;
   gap: 14px;
   flex-wrap: wrap
 }

 .btn-primary {
   display: inline-block;
   background: var(--blue);
   color: #fff;
   border: 1px solid var(--blue);
   padding: 12px 28px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   transition: all .25s;
   cursor: pointer
 }

 .btn-primary:hover {
   background: transparent;
   border-color: var(--blue);
   color: var(--blue)
 }

 .btn-outline {
   display: inline-block;
   background: transparent;
   color: var(--blue);
   border: 1px solid rgba(0, 71, 143, .35);
   padding: 12px 28px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   transition: all .25s
 }

 .btn-outline:hover {
   background: rgba(0, 71, 143, .06);
   border-color: var(--blue)
 }

 /* floating stats */
 .hero-stats {
   position: absolute;
   right: 80px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 12px;
   z-index: 3
 }

 .hero-stat-card {
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   backdrop-filter: blur(10px);
   padding: 16px 22px;
   min-width: 160px
 }

 .hero-stat-num {
   font-family: 'Oswald', sans-serif;
   font-size: 34px;
   font-weight: 300;
   color: #fff;
   line-height: 1
 }

 .hero-stat-num span {
   font-size: 20px;
   color: var(--accent)
 }

 .hero-stat-label {
   font-size: 10px;
   color: rgba(255, 255, 255, .5);
   text-transform: uppercase;
   letter-spacing: 1.2px;
   margin-top: 4px;
   font-weight: 600
 }

 @media(max-width:1100px) {
   .hero-stats {
     display: none
   }
 }

 /* ── INTRO STRIP ── */
 .intro-strip {
   background: #08457d;
   padding: 22px 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   flex-wrap: wrap;
   box-shadow: 0 -18px 40px rgba(4, 20, 40, .14);
 }

 .intro-strip-text {
   font-size: 17px;
   font-weight: 300;
   color: #fff;
   max-width: 700px;
   line-height: 1.6
 }

 .intro-strip-text strong {
   font-weight: 600
 }

 .intro-strip-link {
   color: var(--accent);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   white-space: nowrap;
   flex-shrink: 0;
   transition: color .2s
 }

 .intro-strip-link:hover {
   color: #fff
 }

 /* ── SHARED SECTION STYLES ── */
 .section {
   padding: 72px 0
 }

 .section-center {
   text-align: center;
   margin-bottom: 48px
 }

 .v-line {
   display: block;
   width: 1px;
   height: 44px;
   background: linear-gradient(to bottom, transparent, var(--blue), transparent);
   margin: 0 auto 18px
 }

 .section-h2 {
   font-family: 'Oswald', sans-serif;
   font-size: 32px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--navy);
   margin-bottom: 10px
 }

 .section-sub {
   font-size: 15px;
   color: var(--muted);
   max-width: 540px;
   margin: 0 auto;
   line-height: 1.7
 }

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

 /* ── WHAT IS CYBER SECURITY ── */
 .two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center
 }

 .two-col-text h3 {
   font-family: 'Oswald', sans-serif;
   font-size: 26px;
   color: var(--navy);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .5px;
   margin-bottom: 16px
 }

 .two-col-text p {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.85;
   margin-bottom: 14px
 }

 .check-list {
   list-style: none;
   margin-top: 20px
 }

 .check-list li {
   font-size: 13px;
   color: var(--text);
   padding: 7px 0;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-weight: 400
 }

 .check-list li:last-child {
   border-bottom: none
 }

 .check-icon {
   width: 18px;
   height: 18px;
   background: linear-gradient(135deg, var(--blue), var(--accent));
   border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 1px
 }

 .check-icon svg {
   width: 10px;
   height: 10px;
   fill: #fff
 }

 .two-col-visual {
   position: relative
 }

 .two-col-visual img {
   width: 100%;
   height: 360px;
   object-fit: cover;
   border-radius: 4px
 }

 .two-col-visual-badge {
   position: absolute;
   bottom: -20px;
   left: -20px;
   background: var(--navy);
   color: #fff;
   padding: 20px 24px;
   border-left: 3px solid var(--accent)
 }

 .two-col-visual-badge strong {
   font-family: 'Oswald', sans-serif;
   font-size: 28px;
   display: block;
   line-height: 1
 }

 .two-col-visual-badge span {
   font-size: 11px;
   color: rgba(255, 255, 255, .55);
   text-transform: uppercase;
   letter-spacing: 1px
 }

 @media(max-width:900px) {
   .two-col {
     grid-template-columns: 1fr
   }

   .two-col-visual {
     display: none
   }
 }

 /* ── PROMO (matching index) ── */
 .promo {
   min-height: 480px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center
 }

 .promo-overlay {
   position: absolute;
   inset: 0
 }

 .promo-visual {
   position: absolute;
   inset: 0
 }

 .promo-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .2
 }

 .promo-content {
   position: relative;
   z-index: 2;
   padding: 60px 80px;
   max-width: 600px
 }

 .promo.right .promo-content {
   margin-left: auto
 }

 .promo-label {
   font-size: 11px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   font-weight: 700;
   margin-bottom: 12px;
   opacity: .7
 }

 .promo-h2 {
   font-family: 'Oswald', sans-serif;
   font-size: 36px;
   font-weight: 600;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 12px;
   line-height: 1.1
 }

 .promo-desc {
   font-size: 16px;
   font-style: italic;
   color: rgba(255, 255, 255, .88);
   margin-bottom: 28px;
   line-height: 1.7
 }

 .promo-btn {
   display: inline-block;
   background: transparent;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .55);
   padding: 10px 24px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   transition: all .2s
 }

 .promo-btn:hover {
   background: rgba(255, 255, 255, .1)
 }

 .promo-cases {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 28px
 }

 .case-label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: rgba(255, 255, 255, .55);
   font-weight: 700;
   margin-bottom: 6px
 }

 .case-title {
   font-size: 13px;
   color: #fff;
   line-height: 1.5;
   font-weight: 300
 }

 .case-link {
   font-size: 11px;
   color: rgba(255, 255, 255, .65);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 8px;
   display: block;
   font-weight: 600
 }

 .case-link:hover {
   color: #fff
 }

 /* ── CAPABILITY TILE GRID ── */
 .cap-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   grid-template-rows: 240px 240px;
   gap: 0
 }

 .cap-tile {
   position: relative;
   overflow: hidden;
   cursor: pointer
 }

 .cap-tile.wide {
   grid-row: 1/3
 }

 .cap-bg {
   position: absolute;
   inset: 0;
   transition: transform .5s
 }

 .cap-tile:hover .cap-bg {
   transform: scale(1.05)
 }

 .cap-gradient {
   position: absolute;
   inset: 0
 }

 .cap-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 24px
 }

 .cap-tag {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: rgba(255, 255, 255, .55);
   font-weight: 700;
   margin-bottom: 6px
 }

 .cap-title {
   font-family: 'Oswald', sans-serif;
   font-size: 22px;
   font-weight: 600;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 6px
 }

 .cap-desc {
   font-size: 12px;
   color: rgba(255, 255, 255, .82);
   line-height: 1.6
 }

 .cap-desc strong {
   display: block;
   font-size: 13px;
   margin-bottom: 3px;
   font-weight: 600
 }

 @media(max-width:900px) {
   .cap-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto
   }

   .cap-tile.wide {
     grid-row: auto
   }
 }

 /* ── EXPAND TABS ── */
 .exp-tabs {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--border)
 }

 .exp-tab {
   padding: 20px 16px;
   text-align: center;
   cursor: pointer;
   border-right: 1px solid var(--border);
   transition: all .2s;
   position: relative
 }

 .exp-tab:last-child {
   border-right: none
 }

 .exp-tab:hover {
   background: var(--gray);
   color: var(--blue)
 }

 .exp-tab h5 {
   font-size: 13px;
   font-weight: 600;
   color: #333;
   margin-bottom: 8px;
   font-family: 'DM Sans', sans-serif
 }

 .exp-tab.active h5 {
   color: var(--blue)
 }

 .exp-arrow {
   display: block;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid var(--blue);
   margin: 0 auto
 }

 .exp-panel {
   display: none;
   background: var(--navy);
   padding: 40px;
   animation: fadeIn .3s ease
 }

 .exp-panel.active {
   display: block
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(-6px)
   }

   to {
     opacity: 1;
     transform: none
   }
 }

 .exp-panel-inner {
   display: flex;
   gap: 40px;
   align-items: center;
   max-width: 960px;
   margin: 0 auto
 }

 .exp-panel img {
   width: 44%;
   height: 200px;
   object-fit: cover;
   border-radius: 4px;
   flex-shrink: 0
 }

 .exp-panel-text h3 {
   font-family: 'Oswald', sans-serif;
   font-size: 24px;
   color: #fff;
   margin-bottom: 12px;
   font-weight: 500
 }

 .exp-panel-text p {
   font-size: 14px;
   color: rgba(255, 255, 255, .7);
   line-height: 1.7;
   margin-bottom: 16px
 }

 .exp-panel-text a {
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, .4);
   color: #fff;
   padding: 8px 18px;
   font-size: 11px;
   letter-spacing: 1.5px;
   text-transform: uppercase
 }

 /* ── SERVICE CARDS ── */
 .services-section {
   background: var(--gray);
   padding: 72px 0
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 40px
 }

 .service-card {
   background: #fff;
   padding: 28px;
   border: 1px solid var(--border);
   transition: all .25s;
   cursor: pointer;
   position: relative;
   overflow: hidden
 }

 .service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 3px;
   height: 0;
   background: var(--blue);
   transition: height .3s
 }

 .service-card:hover::before {
   height: 100%
 }

 .service-card:hover {
   box-shadow: 0 8px 32px rgba(0, 71, 143, .12);
   transform: translateY(-2px)
 }

 .service-icon {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--blue), var(--accent));
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px
 }

 .service-icon svg {
   width: 24px;
   height: 24px;
   fill: #fff;
   stroke: none
 }

 .service-card h3 {
   font-family: 'Oswald', sans-serif;
   font-size: 18px;
   font-weight: 500;
   color: var(--navy);
   margin-bottom: 10px;
   text-transform: uppercase;
   letter-spacing: .5px
 }

 .service-card p {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.7
 }

 .service-link {
   font-size: 12px;
   color: var(--blue);
   font-weight: 600;
   margin-top: 14px;
   display: block;
   letter-spacing: .5px
 }

 @media(max-width:900px) {
   .services-grid {
     grid-template-columns: 1fr
   }
 }

 /* ── PROCESS TIMELINE ── */
 .process-section {
   padding: 72px 0
 }

 .process-steps {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 0;
   margin-top: 48px;
   position: relative
 }

 .process-steps::before {
   content: '';
   position: absolute;
   top: 36px;
   left: 10%;
   right: 10%;
   height: 2px;
   background: linear-gradient(90deg, var(--blue), var(--accent));
   z-index: 0
 }

 .process-step {
   text-align: center;
   position: relative;
   z-index: 1;
   padding: 0 10px
 }

 .step-circle {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: var(--navy);
   border: 3px solid var(--blue);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 18px;
   position: relative;
   transition: all .3s
 }

 .process-step:hover .step-circle {
   background: var(--blue);
   transform: scale(1.08)
 }

 .step-circle svg {
   width: 28px;
   height: 28px;
   fill: var(--accent)
 }

 .step-num {
   position: absolute;
   top: -8px;
   right: -8px;
   width: 22px;
   height: 22px;
   background: var(--accent);
   border-radius: 50%;
   font-size: 10px;
   font-weight: 700;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Oswald', sans-serif
 }

 .step-title {
   font-family: 'Oswald', sans-serif;
   font-size: 14px;
   font-weight: 600;
   color: var(--navy);
   text-transform: uppercase;
   letter-spacing: .5px;
   margin-bottom: 8px
 }

 .step-desc {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.6
 }

 @media(max-width:900px) {
   .process-steps {
     grid-template-columns: 1fr 1fr;
     gap: 28px
   }

   .process-steps::before {
     display: none
   }
 }

 /* ── TOOLS & TECH ── */
 .tools-section {
   padding: 72px 0;
   background: var(--navy)
 }

 .tools-section .section-h2 {
   color: #fff
 }

 .tools-section .section-sub {
   color: rgba(255, 255, 255, .55)
 }

 .tools-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2px;
   margin-top: 48px
 }

 .tool-card {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .08);
   padding: 28px 20px;
   text-align: center;
   transition: all .3s;
   cursor: pointer
 }

 .tool-card:hover {
   background: rgba(0, 180, 216, .1);
   border-color: rgba(0, 180, 216, .35)
 }

 .tool-icon {
   font-size: 36px;
   margin-bottom: 12px;
   display: block
 }

 .tool-name {
   font-family: 'Oswald', sans-serif;
   font-size: 16px;
   color: #fff;
   font-weight: 500;
   letter-spacing: .5px;
   margin-bottom: 6px
 }

 .tool-desc {
   font-size: 11px;
   color: rgba(255, 255, 255, .45);
   line-height: 1.6;
   text-transform: uppercase;
   letter-spacing: .5px
 }

 @media(max-width:900px) {
   .tools-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 /* ── INDUSTRIES ── */
 .industries-section {
   padding: 72px 0
 }

 .industries-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 40px
 }

 .industry-card {
   position: relative;
   overflow: hidden;
   border-radius: 4px;
   cursor: pointer;
   min-height: 190px
 }

 .industry-card img {
   width: 100%;
   height: 190px;
   object-fit: cover;
   transition: transform .5s
 }

 .industry-card:hover img {
   transform: scale(1.06)
 }

 .industry-card-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(4, 20, 40, .9), rgba(4, 20, 40, .15))
 }

 .industry-card-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 18px
 }

 .industry-card h3 {
   font-family: 'Oswald', sans-serif;
   font-size: 18px;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .5px
 }

 .industry-card p {
   font-size: 12px;
   color: rgba(255, 255, 255, .65);
   margin-top: 4px
 }

 @media(max-width:900px) {
   .industries-grid {
     grid-template-columns: 1fr 1fr
   }
 }

 /* ── OUR PURPOSE ── */
 .our-purpose {
   border: 3px solid #92d1ff;
   padding: 44px 52px;
   position: relative;
   margin-top: 40px
 }

 .our-purpose::before,
 .our-purpose::after {
   content: '';
   position: absolute;
   display: block;
   background: #fff;
   height: 45px;
   width: 45px;
   overflow: hidden;
   border-left: solid 3px #92d1ff
 }

 .our-purpose::before {
   right: -23px;
   top: -23px;
   transform: rotate(-45deg)
 }

 .our-purpose::after {
   bottom: -23px;
   left: -23px;
   transform: rotate(135deg)
 }

 .our-purpose-label {
   font-family: 'Oswald', sans-serif;
   font-size: 48px;
   line-height: .9;
   color: var(--navy);
   letter-spacing: 2px;
   margin-bottom: 12px
 }

 .our-purpose-text {
   font-size: 17px;
   font-weight: 600;
   color: #333;
   line-height: 1.8
 }

 /* ── CONTACT ── */
 .contact-section {
   background: var(--navy);
   padding: 64px 0
 }

 .contact-inner {
   display: flex;
   gap: 48px;
   align-items: center;
   flex-wrap: wrap
 }

 .contact-regions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border: 1px solid rgba(255, 255, 255, .15);
   max-width: 380px;
   flex: 1;
   min-width: 260px
 }

 .region-btn {
   padding: 20px;
   color: #fff;
   font-size: 14px;
   font-weight: 300;
   cursor: pointer;
   transition: background .2s;
   border-right: 1px solid rgba(255, 255, 255, .15);
   border-bottom: 1px solid rgba(255, 255, 255, .15)
 }

 .region-btn:nth-child(2n) {
   border-right: none
 }

 .region-btn:nth-child(3),
 .region-btn:nth-child(4) {
   border-bottom: none
 }

 .region-btn:hover {
   background: rgba(255, 255, 255, .06);
   color: var(--accent)
 }

 .contact-cta {
   flex: 1
 }

 .contact-cta h2 {
   font-family: 'Oswald', sans-serif;
   font-size: 32px;
   color: #fff;
   font-weight: 400;
   line-height: 1.4;
   margin-bottom: 24px
 }

 .contact-cta h2 span {
   color: var(--accent)
 }

 .btn-contact {
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, .4);
   color: #fff;
   padding: 12px 28px;
   font-size: 11px;
   letter-spacing: 2px;
   text-transform: uppercase;
   transition: all .2s
 }

 .btn-contact:hover {
   background: rgba(255, 255, 255, .08)
 }

 /* ── FOOTER ── */
 footer {
   background: #fff;
   border-top: 1px solid var(--border);
   padding: 48px 0 0
 }

 .footer-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 24px;
   margin-bottom: 32px
 }

 .footer-col h5 {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .8px;
   margin-bottom: 16px;
   color: var(--navy);
   font-family: 'Oswald', sans-serif
 }

 .footer-col a {
   display: block;
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 9px;
   transition: color .2s
 }

 .footer-col a:hover {
   color: var(--blue)
 }

 .footer-col a.active-footer {
   color: var(--blue);
   font-weight: 600
 }

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

 .s-ico {
   width: 30px;
   height: 30px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 700;
   color: #fff;
   cursor: pointer
 }

 .footer-bottom {
   background: var(--gray);
   padding: 14px 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 0
 }

 .footer-bottom p {
   font-size: 12px;
   color: #888
 }

 .country-sel {
   font-size: 12px;
   color: var(--blue);
   cursor: pointer;
   font-weight: 600
 }

 @media(max-width:900px) {
   .footer-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }
 .cap-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:18px;
  padding:0 40px 80px;
  max-width:1400px;
  margin:auto;
}

.cap-tile{
  position:relative;
  min-height:320px;
  overflow:hidden;
  border-radius:4px;
}

.cap-tile.wide{
  grid-row:span 2;
  min-height:660px;
}

.cap-content{
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:2;
}

.cap-tag{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:10px;
}

.cap-title{
  font-family:'Oswald',sans-serif;
  font-size:30px;
  color:#fff;
  margin-bottom:12px;
  text-transform:uppercase;
}

.cap-desc strong{
  display:block;
  color:#fff;
  margin-bottom:6px;
  font-size:15px;
}

.cap-desc span{
  color:rgba(255,255,255,.75);
  line-height:1.7;
  font-size:13px;
}

@media(max-width:900px){

  .cap-grid{
    grid-template-columns:1fr;
    padding:0 20px 60px;
  }

  .cap-tile.wide{
    min-height:420px;
  }

  .cap-title{
    font-size:24px;
  }

}
.tech-ecosystem{
  background:#f7f9fc;
  padding:90px 0;
  position:relative;
  overflow:hidden;
}

.eco-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.eco-card{
  background:#fff;
  border:1px solid var(--border);
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
  min-height:320px;
}

.eco-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:0;
  background:var(--blue);
  transition:height .35s ease;
}

.eco-card:hover::before{
  height:100%;
}

.eco-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,71,143,.12);
}

.eco-icon{
  width:58px;
  height:58px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  margin-bottom:22px;
}

.eco-card h3{
  font-family:'Oswald',sans-serif;
  font-size:20px;
  color:var(--navy);
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.eco-card p{
  font-size:13px;
  line-height:1.8;
  color:#666;
  margin-bottom:20px;
}

.eco-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.eco-tags span{
  background:#eef3f9;
  color:var(--blue);
  padding:8px 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

@media(max-width:1000px){

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

}

@media(max-width:700px){

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

}