@charset "UTF-8";
         *,
         *::before,
         *::after {
             box-sizing: border-box;
             margin: 0;
             padding: 0
         }

         :root {
             --bg: #060F24;
             --bg2: #08132A;
             --surface: #0C1A35;
             --surface2: #0F2040;
             --blue: #1E7AFF;
             --blue2: #1258E0;
             --cyan: #00E5FF;
             --cyan2: #00C4E8;
             --electric: #60AAFF;
             --text: #E8F0FF;
             --text2: #85A8D4;
             --text3: #3F6090;
             --border: rgba(30, 122, 255, 0.18);
             --border2: rgba(30, 122, 255, 0.10);
             --glow-blue: rgba(30, 122, 255, 0.22);
             --glow-cyan: rgba(0, 229, 255, 0.18);
             --font-head: 'Orbitron', sans-serif;
             --font-body: 'DM Sans', sans-serif;
         }

         html {
             scroll-behavior: smooth
         }

         body {
             background: var(--bg);
             color: var(--text);
             font-family: var(--font-body);
             font-size: 16px;
             line-height: 1.7;
             overflow-x: hidden
         }

         @media (hover:hover) and (pointer:fine) {
             body {
                 cursor: none
             }

             #cursor,
             #cursor-ring {
                 display: block !important
             }
         }

         @media (hover:none),
         (pointer:coarse) {

             #cursor,
             #cursor-ring {
                 display: none !important
             }
         }

         /* CUSTOM CURSOR */
         #cursor {
             position: fixed;
             width: 10px;
             height: 10px;
             background: var(--cyan);
             border-radius: 50%;
             pointer-events: none;
             z-index: 9999;
             transform: translate(-50%, -50%);
             transition: transform 0.05s, opacity 0.2s;
             mix-blend-mode: screen
         }

         #cursor-ring {
             position: fixed;
             width: 36px;
             height: 36px;
             border: 1.5px solid rgba(0, 207, 255, 0.5);
             border-radius: 50%;
             pointer-events: none;
             z-index: 9998;
             transform: translate(-50%, -50%);
             transition: transform 0.15s, width 0.2s, height 0.2s, opacity 0.2s
         }

         body:hover #cursor {
             opacity: 1
         }

         /* SCROLLBAR */
         ::-webkit-scrollbar {
             width: 3px
         }

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

         ::-webkit-scrollbar-thumb {
             background: linear-gradient(var(--blue), var(--cyan));
             border-radius: 2px
         }

         /* ANIMATED GRID BG */
         .grid-bg {
             position: fixed;
             inset: 0;
             z-index: 0;
             pointer-events: none;
             background-image: linear-gradient(rgba(27, 111, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 111, 255, 0.05) 1px, transparent 1px);
             background-size: 50px 50px;
             animation: gridShift 20s linear infinite;
             opacity: 0.6
         }

         @keyframes gridShift {
             from {
                 background-position: 0 0
             }

             to {
                 background-position: 50px 50px
             }
         }

         /* FLOATING ORBS */
         .orbs {
             position: fixed;
             inset: 0;
             z-index: 0;
             pointer-events: none;
             overflow: hidden
         }

         .orb {
             position: absolute;
             border-radius: 50%;
             filter: blur(80px);
             animation: orbFloat linear infinite
         }

         .orb-1 {
             width: 700px;
             height: 700px;
             background: radial-gradient(circle, rgba(27, 111, 255, 0.12) 0%, transparent 70%);
             top: -200px;
             right: -150px;
             animation-duration: 25s;
             animation-delay: 0s
         }

         .orb-2 {
             width: 500px;
             height: 500px;
             background: radial-gradient(circle, rgba(0, 207, 255, 0.1) 0%, transparent 70%);
             bottom: -100px;
             left: -100px;
             animation-duration: 20s;
             animation-delay: -8s
         }

         .orb-3 {
             width: 300px;
             height: 300px;
             background: radial-gradient(circle, rgba(77, 159, 255, 0.08) 0%, transparent 70%);
             top: 40%;
             left: 30%;
             animation-duration: 30s;
             animation-delay: -15s
         }

         @keyframes orbFloat {

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

             25% {
                 transform: translate(30px, -40px) scale(1.05)
             }

             50% {
                 transform: translate(-20px, 30px) scale(0.95)
             }

             75% {
                 transform: translate(40px, 20px) scale(1.03)
             }
         }

         /* MAIN LAYOUT */
         main {
             position: relative;
             z-index: 1
         }

         /* NAV */
         nav {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             z-index: 1000;
             padding: 0 6%;
             height: 86px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             background: rgba(2, 11, 24, 0.8);
             -webkit-backdrop-filter: blur(24px);
             backdrop-filter: blur(24px);
             border-bottom: 1px solid var(--border2);
             transition: all .4s
         }

         nav.scrolled {
             background: rgba(2, 11, 24, 0.97);
             border-bottom-color: rgba(27, 111, 255, 0.2);
             height: 82px
         }

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

         .nav-logo img {
             height: 62px;
             width: auto;
             max-width: 220px;
             object-fit: contain;
             display: block;
             filter: brightness(1.25) contrast(1.05) drop-shadow(0 0 14px rgba(0, 207, 255, 0.45))
         }

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

         .nav-links a {
             font-family: var(--font-head);
             /*font-size:9.5px;*/
             font-size: 0.72rem;
             font-weight: 600;
             color: var(--text2);
             text-decoration: none;
             letter-spacing: 1.5px;
             text-transform: uppercase;
             transition: color .2s;
             position: relative
         }

         .nav-links a::after {
             content: '';
             position: absolute;
             bottom: -4px;
             left: 0;
             right: 0;
             height: 1px;
             background: linear-gradient(90deg, var(--blue), var(--cyan));
             transform: scaleX(0);
             transform-origin: left;
             transition: transform .3s
         }

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

         .nav-links a:hover::after {
             transform: scaleX(1)
         }

         .nav-cta {
             display: inline-block;
             text-decoration: none;
             font-family: var(--font-head);
             background: transparent;
             border: 1px solid var(--blue);
             color: var(--electric);
             padding: 10px 22px;
             border-radius: 2px;
             font-size: 9px;
             font-weight: 600;
             cursor: none;
             letter-spacing: 1.5px;
             text-transform: uppercase;
             transition: all .3s;
             position: relative;
             overflow: hidden
         }

         .nav-cta::before {
             content: '';
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, var(--blue), var(--cyan));
             opacity: 0;
             transition: opacity .3s
         }

         .nav-cta:hover {
             color: #020B18
         }

         .nav-cta:hover::before {
             opacity: 1
         }

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

         .hamburger {
             display: none;
             flex-direction: column;
             justify-content: center;
             gap: 5px;
             cursor: none;
             padding: 15px;
             margin: -15px;
         }

         .hamburger span {
             width: 24px;
             height: 1.5px;
             background: var(--text2);
             transition: all .3s
         }

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

             .nav-cta {
                 display: none
             }

             .hamburger {
                 display: flex
             }
         }

         /* HERO */
         .hero {
             min-height: 100vh;
             min-height: 100dvh;
             display: flex;
             align-items: center;
             padding: 120px 6% 80px;
             position: relative;
             overflow: hidden
         }

         .hero-content {
             max-width: 780px;
             position: relative;
             z-index: 2
         }

         .hero-badge {
             display: inline-flex;
             align-items: center;
             gap: 10px;
             background: rgba(27, 111, 255, 0.08);
             border: 1px solid rgba(27, 111, 255, 0.25);
             border-radius: 2px;
             padding: 8px 20px;
             font-family: var(--font-head);
             font-size: 8.5px;
             font-weight: 600;
             color: var(--electric);
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-bottom: 36px
         }

         .badge-pulse {
             width: 7px;
             height: 7px;
             border-radius: 50%;
             background: var(--cyan);
             animation: badgePulse 2s ease-in-out infinite;
             box-shadow: 0 0 8px var(--cyan)
         }

         @keyframes badgePulse {

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

             50% {
                 transform: scale(0.7);
                 opacity: 0.5
             }
         }

         .hero-headline {
             font-family: var(--font-head);
             font-size: clamp(34px, 6.5vw, 82px);
             font-weight: 900;
             line-height: 1.0;
             letter-spacing: -1px;
             margin-bottom: 30px
         }

         .hero-headline .ln1,
         .hero-headline .ln2 {
             display: block;
             color: var(--text)
         }

         .hero-headline .ln3 {
             display: block;
             background: linear-gradient(110deg, var(--cyan) 0%, var(--blue) 50%, var(--electric) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             animation: gradShift 4s ease-in-out infinite
         }

         @keyframes gradShift {

             0%,
             100% {
                 filter: brightness(1)
             }

             50% {
                 filter: brightness(1.3)
             }
         }

         .hero-sub {
             font-size: 17px;
             font-weight: 300;
             color: var(--text2);
             max-width: 580px;
             margin-bottom: 50px;
             line-height: 1.9
         }

         .hero-actions {
             display: flex;
             gap: 16px;
             flex-wrap: wrap
         }

         .btn-primary {
             display: inline-block;
             text-decoration: none;
             font-family: var(--font-head);
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             border: none;
             color: #020B18;
             padding: 16px 38px;
             border-radius: 2px;
             font-size: 10px;
             font-weight: 700;
             cursor: none;
             letter-spacing: 2px;
             text-transform: uppercase;
             transition: all .3s;
             position: relative;
             overflow: hidden
         }

         .btn-primary:hover {
             transform: translateY(-2px);
             box-shadow: 0 10px 40px rgba(0, 207, 255, 0.35)
         }

         .btn-ghost {
             display: inline-block;
             text-decoration: none;
             font-family: var(--font-head);
             background: transparent;
             border: 1px solid var(--border);
             color: var(--text2);
             padding: 16px 38px;
             border-radius: 2px;
             font-size: 10px;
             font-weight: 600;
             cursor: none;
             letter-spacing: 2px;
             text-transform: uppercase;
             transition: all .3s
         }

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

         .hero-stats {
             display: flex;
             gap: 56px;
             margin-top: 80px;
             padding-top: 40px;
             border-top: 1px solid var(--border2);
             flex-wrap: wrap
         }

         .hero-stat-num {
             font-family: var(--font-head);
             font-size: 38px;
             font-weight: 900;
             color: var(--text);
             letter-spacing: -1px;
             line-height: 1
         }

         .hero-stat-accent {
             color: var(--cyan)
         }

         .hero-stat-label {
             font-size: 11px;
             font-weight: 400;
             color: var(--text3);
             letter-spacing: 1.5px;
             text-transform: uppercase;
             margin-top: 6px
         }

         /* SVG HERO GRAPHIC */
         .hero-graphic {
             position: absolute;
             right: -2%;
             top: 50%;
             transform: translateY(-50%);
             width: 48%;
             max-width: 620px;
             opacity: 0.55;
             pointer-events: none
         }

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

         /* TICKER */
         .ticker {
             background: var(--surface);
             border-top: 1px solid var(--border2);
             border-bottom: 1px solid var(--border2);
             padding: 13px 0;
             overflow: hidden;
             position: relative;
             z-index: 1
         }

         .ticker::before,
         .ticker::after {
             content: '';
             position: absolute;
             top: 0;
             bottom: 0;
             width: 100px;
             z-index: 2
         }

         .ticker::before {
             left: 0;
             background: linear-gradient(90deg, var(--surface), transparent)
         }

         .ticker::after {
             right: 0;
             background: linear-gradient(-90deg, var(--surface), transparent)
         }

         .ticker-track {
             display: flex;
             width: max-content;
             animation: ticker 35s linear infinite
         }

         .ticker-item {
             display: flex;
             align-items: center;
             gap: 10px;
             padding: 0 36px;
             font-family: var(--font-head);
             font-size: 9px;
             font-weight: 600;
             color: var(--text3);
             text-transform: uppercase;
             letter-spacing: 2px;
             white-space: nowrap
         }

         .ticker-sep {
             width: 3px;
             height: 3px;
             border-radius: 50%;
             background: linear-gradient(var(--blue), var(--cyan));
             flex-shrink: 0
         }

         @keyframes ticker {
             from {
                 transform: translateX(0)
             }

             to {
                 transform: translateX(-50%)
             }
         }

         /* SECTION BASE */
         section {
             padding: 110px 6%;
             position: relative;
             z-index: 1
         }

         .section-eyebrow {
             font-family: var(--font-head);
             font-size: 9px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 3px;
             text-transform: uppercase;
             margin-bottom: 18px;
             display: flex;
             align-items: center;
             gap: 10px
         }

         .section-eyebrow::before {
             content: '';
             width: 30px;
             height: 1px;
             background: linear-gradient(90deg, var(--blue), var(--cyan))
         }

         .section-title {
             font-family: var(--font-head);
             font-size: clamp(26px, 4vw, 52px);
             font-weight: 900;
             line-height: 1.05;
             letter-spacing: -0.5px;
             margin-bottom: 20px;
             color: var(--text)
         }

         .section-sub {
             font-size: 16px;
             font-weight: 300;
             color: var(--text2);
             line-height: 1.85
         }

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

         .services-intro {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 60px;
             align-items: end;
             margin-bottom: 72px
         }

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

         .services-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 1px;
             background: rgba(27, 111, 255, 0.08);
             border: 1px solid var(--border);
             border-radius: 4px;
             overflow: hidden
         }

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

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

         .svc-card {
             background: var(--bg);
             padding: 40px 32px;
             cursor: none;
             transition: background .25s;
             position: relative;
             overflow: hidden;
             group
         }

         .svc-card::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 1px;
             background: linear-gradient(90deg, var(--blue), var(--cyan));
             transform: scaleX(0);
             transform-origin: left;
             transition: transform .4s
         }

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

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

         .svc-icon {
             font-size: 24px;
             margin-bottom: 22px;
             display: block
         }

         .svc-name {
             font-family: var(--font-head);
             font-size: 13px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 12px;
             letter-spacing: 0.5px;
             line-height: 1.3
         }

         .svc-desc {
             font-size: 13.5px;
             font-weight: 300;
             color: var(--text2);
             line-height: 1.75;
             margin-bottom: 20px
         }

         .svc-tags {
             display: flex;
             flex-wrap: wrap;
             gap: 6px
         }

         .svc-tag {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 500;
             color: var(--text3);
             border: 1px solid var(--border2);
             border-radius: 2px;
             padding: 3px 9px;
             letter-spacing: 0.8px;
             text-transform: uppercase
         }

         /* ABOUT */
         #about {
             background: var(--bg2)
         }

         .about-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 80px;
             align-items: center
         }

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

         .about-vis {
             position: relative;
             height: 440px;
             display: flex;
             align-items: center;
             justify-content: center
         }

         .about-vis svg {
             position: absolute;
             inset: 0;
             width: 100%;
             height: 100%
         }

         .about-points {
             display: flex;
             flex-direction: column;
             gap: 28px;
             margin-top: 44px
         }

         .apoint {
             display: flex;
             gap: 18px;
             align-items: flex-start
         }

         .apoint-icon {
             width: 38px;
             height: 38px;
             border-radius: 2px;
             background: rgba(27, 111, 255, 0.1);
             border: 1px solid rgba(27, 111, 255, 0.2);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 17px;
             flex-shrink: 0;
             margin-top: 2px
         }

         .apoint-title {
             font-family: var(--font-head);
             font-size: 11px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 4px;
             letter-spacing: 0.5px
         }

         .apoint-desc {
             font-size: 14px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.7
         }

         /* INDUSTRIES */
         #industries {
             background: var(--bg)
         }

         .ind-header {
             text-align: center;
             max-width: 580px;
             margin: 0 auto 64px
         }

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

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

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

         .ind-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 4px;
             padding: 28px 22px;
             transition: all .3s;
             cursor: none;
             position: relative;
             overflow: hidden
         }

         .ind-card::before {
             content: '';
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, rgba(27, 111, 255, 0.04), transparent);
             opacity: 0;
             transition: opacity .3s
         }

         .ind-card:hover {
             border-color: rgba(0, 207, 255, 0.25);
             transform: translateY(-4px);
             box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4)
         }

         .ind-card:hover::before {
             opacity: 1
         }

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

         .ind-name {
             font-family: var(--font-head);
             font-size: 10.5px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 7px;
             letter-spacing: 0.5px
         }

         .ind-desc {
             font-size: 12.5px;
             color: var(--text3);
             line-height: 1.65
         }

         /* CASE STUDIES */
         #case-studies {
             background: var(--bg2)
         }

         .cs-header {
             display: flex;
             justify-content: space-between;
             align-items: flex-end;
             flex-wrap: wrap;
             gap: 20px;
             margin-bottom: 60px
         }

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

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

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

         .cs-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 4px;
             overflow: hidden;
             cursor: none;
             transition: all .3s;
             display: flex;
             flex-direction: column
         }

         .cs-card:hover {
             transform: translateY(-6px);
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
             border-color: rgba(0, 207, 255, 0.2)
         }

         .cs-banner {
             height: 130px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 40px;
             position: relative;
             overflow: hidden
         }

         .cs-body {
             padding: 26px;
             flex: 1;
             display: flex;
             flex-direction: column
         }

         .cs-cat {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-bottom: 10px
         }

         .cs-title {
             font-family: var(--font-head);
             font-size: 12.5px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 10px;
             line-height: 1.4;
             letter-spacing: 0.3px
         }

         .cs-desc {
             font-size: 13px;
             color: var(--text2);
             line-height: 1.7;
             flex: 1;
             font-weight: 300
         }

         .cs-metrics {
             display: flex;
             gap: 20px;
             margin-top: 18px;
             padding-top: 18px;
             border-top: 1px solid var(--border2)
         }

         .cs-metric-val {
             font-family: var(--font-head);
             font-size: 22px;
             font-weight: 900;
             color: var(--cyan)
         }

         .cs-metric-lbl {
             font-family: var(--font-head);
             font-size: 8px;
             color: var(--text3);
             margin-top: 3px;
             letter-spacing: 1px;
             text-transform: uppercase
         }

         /* INSIGHTS */
         #insights {
             background: var(--bg)
         }

         .ins-header {
             display: flex;
             justify-content: space-between;
             align-items: flex-end;
             flex-wrap: wrap;
             gap: 20px;
             margin-bottom: 60px
         }

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

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

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

         .ins-card {
             display: block;
             text-decoration: none;
             color: inherit;
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 4px;
             padding: 28px;
             cursor: none;
             transition: all .25s
         }

         .ins-card:hover {
             border-color: rgba(27, 111, 255, 0.3);
             background: var(--surface2);
             transform: translateY(-3px)
         }

         .ins-date {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 500;
             color: var(--text3);
             letter-spacing: 1.5px;
             text-transform: uppercase;
             margin-bottom: 12px
         }

         .ins-title {
             font-family: var(--font-head);
             font-size: 13px;
             font-weight: 700;
             color: var(--text);
             line-height: 1.4;
             margin-bottom: 12px;
             letter-spacing: 0.3px
         }

         .ins-excerpt {
             font-size: 13px;
             color: var(--text2);
             line-height: 1.7;
             font-weight: 300
         }

         .ins-cta {
             font-family: var(--font-head);
             display: inline-block;
             margin-top: 16px;
             font-size: 8px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 2px;
             text-transform: uppercase
         }

         /* CAREERS */
         #careers {
             background: var(--bg2)
         }

         .careers-hero-banner {
             background: linear-gradient(125deg, var(--surface) 0%, var(--surface2) 100%);
             border: 1px solid var(--border);
             border-radius: 4px;
             padding: 64px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             gap: 40px;
             flex-wrap: wrap;
             margin-bottom: 56px;
             position: relative;
             overflow: hidden
         }

         .careers-hero-banner::before {
             content: '';
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, rgba(27, 111, 255, 0.05) 0%, transparent 50%, rgba(0, 207, 255, 0.03) 100%);
             pointer-events: none
         }

         .careers-hl {
             font-family: var(--font-head);
             font-size: clamp(20px, 3vw, 38px);
             font-weight: 900;
             line-height: 1.1;
             max-width: 460px;
             color: var(--text);
             position: relative
         }

         .careers-hl span {
             color: var(--cyan)
         }

         .careers-sub {
             color: var(--text2);
             font-size: 15px;
             font-weight: 300;
             margin-bottom: 24px;
             max-width: 300px
         }

         .roles-list {
             display: flex;
             flex-direction: column;
             gap: 1px;
             background: rgba(27, 111, 255, 0.07);
             border: 1px solid var(--border2);
             border-radius: 4px;
             overflow: hidden
         }

         .role-row {
             background: var(--bg);
             padding: 20px 28px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 16px;
             cursor: none;
             transition: background .2s;
             flex-wrap: wrap
         }

         .role-row:hover {
             background: var(--surface)
         }

         .role-left {
             display: flex;
             align-items: center;
             gap: 14px;
             flex-wrap: wrap
         }

         .role-title {
             font-family: var(--font-head);
             font-size: 11px;
             font-weight: 700;
             color: var(--text);
             letter-spacing: 0.5px
         }

         .role-dept {
             font-family: var(--font-head);
             font-size: 7.5px;
             font-weight: 600;
             color: var(--cyan);
             background: rgba(0, 207, 255, 0.07);
             border: 1px solid rgba(0, 207, 255, 0.15);
             border-radius: 2px;
             padding: 3px 10px;
             letter-spacing: 1px;
             text-transform: uppercase
         }

         .role-right {
             display: flex;
             gap: 14px;
             align-items: center;
             flex-shrink: 0
         }

         .role-loc {
             font-size: 12px;
             color: var(--text3)
         }

         .role-apply {
             display: inline-block;
             text-decoration: none;
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 700;
             color: var(--blue);
             border: 1px solid rgba(27, 111, 255, 0.3);
             border-radius: 2px;
             padding: 16px;
             transition: all .2s;
             letter-spacing: 1px;
             text-transform: uppercase
         }

         .role-row:hover .role-apply {
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             color: #020B18;
             border-color: transparent
         }

         /* CONTACT */
         #contact {
             background: var(--bg)
         }

         .contact-top {
             text-align: center;
             max-width: 580px;
             margin: 0 auto 64px
         }

         .contact-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 80px
         }

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

         .contact-info h3 {
             font-family: var(--font-head);
             font-size: 22px;
             font-weight: 800;
             margin-bottom: 14px;
             color: var(--text);
             letter-spacing: 0.5px
         }

         .contact-info p {
             color: var(--text2);
             font-size: 15px;
             font-weight: 300;
             line-height: 1.85;
             margin-bottom: 36px
         }

         .contact-details {
             display: flex;
             flex-direction: column;
             gap: 18px
         }

         .c-item {
             display: flex;
             gap: 14px
         }

         .c-item-icon {
             color: var(--cyan);
             font-size: 15px;
             flex-shrink: 0;
             margin-top: 2px
         }

         .c-item-label {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 600;
             color: var(--text3);
             letter-spacing: 1.5px;
             text-transform: uppercase;
             margin-bottom: 3px
         }

         .c-item-text {
             font-size: 14px;
             color: var(--text2);
             font-weight: 300
         }

         a.c-item-text {
             display: inline-flex;
             align-items: center;
             min-height: 44px;
             text-decoration: none;
         }

         .contact-form {
             display: flex;
             flex-direction: column;
             gap: 14px
         }

         .f-group {
             display: flex;
             flex-direction: column;
             gap: 6px
         }

         .f-label {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 600;
             color: var(--text3);
             letter-spacing: 1.5px;
             text-transform: uppercase
         }

         .f-input {
             width: 100%;
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 2px;
             padding: 13px 15px;
             color: var(--text);
             font-family: var(--font-body);
             font-size: 14px;
             font-weight: 300;
             transition: border-color .2s;
             outline: none;
             cursor: none
         }

         .f-input:focus {
             border-color: var(--blue);
             box-shadow: 0 0 0 3px rgba(27, 111, 255, 0.1)
         }

         .f-input::placeholder {
             color: var(--text3)
         }

         .f-input.f-invalid {
             border-color: #ff5555 !important;
             box-shadow: 0 0 0 3px rgba(255, 85, 85, 0.12) !important
         }

         .f-error {
             font-size: 11px;
             color: #ff7070;
             min-height: 14px;
             display: block;
             font-weight: 400
         }

         .f-row {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 14px
         }

         @media(max-width:600px) {
             .f-row {
                 grid-template-columns: 1fr
             }
         }

         .f-select {
             appearance: none;
             cursor: none
         }

         .phone-row {
             display: flex;
             gap: 8px;
             align-items: stretch
         }

         .phone-row .f-input.phone-cc {
             flex: 0 0 130px;
             min-width: 100px;
             padding-right: 8px
         }

         .phone-row .f-input.phone-num {
             flex: 1
         }

         .phone-row .f-input.f-invalid {
             border-color: #ff5555 !important;
             box-shadow: 0 0 0 3px rgba(255, 85, 85, 0.12) !important
         }

         .phone-field-error {
             display: block;
             font-size: 11px;
             color: #ff7070;
             min-height: 14px;
             font-weight: 400;
             margin-top: 2px
         }

         @media(max-width:480px) {
             .phone-row {
                 flex-direction: column
             }

             .phone-row .f-input.phone-cc {
                 flex: none;
                 width: 100%
             }
         }

         .f-submit {
             font-family: var(--font-head);
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             border: none;
             color: #020B18;
             padding: 16px;
             border-radius: 2px;
             font-size: 10px;
             font-weight: 700;
             cursor: none;
             transition: all .3s;
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-top: 8px
         }

         .f-submit:hover {
             transform: translateY(-2px);
             box-shadow: 0 10px 40px rgba(0, 207, 255, 0.3)
         }

         /* FOOTER */
         footer {
             background: var(--bg2);
             border-top: 1px solid var(--border2);
             padding: 72px 6% 32px;
             position: relative;
             z-index: 1
         }

         .foot-grid {
             display: grid;
             grid-template-columns: 2fr 1fr 1fr 1fr;
             gap: 48px;
             margin-bottom: 56px
         }

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

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

         .foot-brand-logo {
             height: 54px;
             width: auto;
             max-width: 200px;
             object-fit: contain;
             display: block;
             margin-bottom: 16px;
             filter: brightness(1.25) contrast(1.05)
         }

         .foot-brand-desc {
             font-size: 13px;
             color: var(--text3);
             line-height: 1.75;
             max-width: 260px
         }

         .foot-col-title {
             font-family: var(--font-head);
             font-size: 8.5px;
             font-weight: 600;
             color: var(--text3);
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-bottom: 16px
         }

         .foot-links {
             display: flex;
             flex-direction: column;
             gap: 10px
         }

         .foot-links a {
             font-size: 13px;
             color: var(--text2);
             text-decoration: none;
             transition: color .2s;
             font-weight: 300;
             padding: 12px 0;
             margin: -6px 0;
             display: inline-block;
         }

         .foot-links a:hover {
             color: var(--cyan)
         }

         .foot-bottom {
             border-top: 1px solid var(--border2);
             padding-top: 28px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             flex-wrap: wrap;
             gap: 14px
         }

         .foot-copy {
             font-family: var(--font-head);
             font-size: 8px;
             color: var(--text3);
             letter-spacing: 1px
         }

         .foot-socials {
             display: flex;
             gap: 12px
         }

         .foot-soc {
             width: 44px;
             height: 44px;
             border: 1px solid var(--border);
             border-radius: 2px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--text3);
             font-family: var(--font-head);
             font-size: 10px;
             text-decoration: none;
             transition: all .2s
         }

         .foot-soc:hover {
             border-color: var(--cyan);
             color: var(--cyan);
             box-shadow: 0 0 12px rgba(0, 207, 255, 0.2)
         }

         /* Newsletter subscribe strip (footer) */
         .foot-newsletter {
             border-top: 1px solid var(--border2);
             border-bottom: 1px solid var(--border2);
             padding: 24px 0;
             margin-bottom: 0;
             display: flex;
             align-items: center;
             justify-content: space-between;
             flex-wrap: wrap;
             gap: 16px;
         }

         .foot-newsletter-title {
             font-family: var(--font-head);
             font-size: 10px;
             font-weight: 700;
             color: var(--text);
             letter-spacing: 0.5px;
             margin-bottom: 4px
         }

         .foot-newsletter-sub {
             font-size: 13px;
             color: var(--text3);
             font-weight: 300
         }

         .foot-newsletter-form {
             display: flex;
             gap: 10px;
             flex-shrink: 0;
         }

         .foot-newsletter-status {
             display: none;
             font-size: 12px;
             color: var(--cyan);
             align-self: center;
             font-family: var(--font-head);
             letter-spacing: 0.5px
         }

         #nlEmail.foot-newsletter-input {
             width: 220px;
             padding: 13px 14px;
             font-size: 13px;
         }

         .foot-newsletter-btn {
             font-family: var(--font-head);
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             border: none;
             color: #020B18;
             padding: 10px 20px;
             border-radius: 2px;
             font-size: 8.5px;
             font-weight: 700;
             cursor: pointer;
             letter-spacing: 1.5px;
             text-transform: uppercase;
             white-space: nowrap;
             min-height: 44px;
         }

         @media(max-width:480px) {
             .foot-newsletter-form {
                 flex-direction: column;
                 align-items: stretch;
                 width: 100%;
             }

             #nlEmail.foot-newsletter-input {
                 width: 100%;
             }
         }

         /* MOBILE MENU */
         .mobile-menu {
             position: fixed;
             inset: 0;
             background: rgba(2, 11, 24, 0.98);
             z-index: 999;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             gap: 36px;
             transform: translateX(100%);
             transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1)
         }

         .mobile-menu.open {
             transform: none
         }

         .mobile-menu a {
             font-family: var(--font-head);
             font-size: 20px;
             font-weight: 800;
             color: var(--text);
             text-decoration: none;
             transition: color .2s;
             letter-spacing: 2px;
             text-transform: uppercase;
             padding: 10px 0;
             margin: -10px 0;
             min-height: 44px;
             display: flex;
             align-items: center;
         }

         .mobile-menu a:hover {
             color: var(--cyan)
         }

         .mob-close {
             position: absolute;
             top: 13px;
             right: calc(6% - 15px);
             padding: 15px;
             font-size: 22px;
             color: var(--text2);
             cursor: none;
             background: none;
             border: none;
             font-family: var(--font-head)
         }

         /* SCROLL ANIMATIONS */
         .fade-in {
             opacity: 0;
             transform: translateY(28px);
             transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), transform .8s cubic-bezier(0.4, 0, 0.2, 1)
         }

         .fade-in.visible {
             opacity: 1;
             transform: none
         }

         .fade-in-delay-1 {
             transition-delay: .1s
         }

         .fade-in-delay-2 {
             transition-delay: .2s
         }

         .fade-in-delay-3 {
             transition-delay: .3s
         }

         /* ─── Section ──────────────────────────────────────────── */
         .geek-section {
             width: 100%;
             padding: 100px 60px;
             /* background: #000; */
             overflow: hidden;
         }

         /* ─── Header ───────────────────────────────────────────── */
         .geek-header {
             text-align: center;
             margin-bottom: 56px;
         }

         .geek-label {
             font-size: 16px;
             font-weight: 500;
             /* exact cyan from botminds */
             color: #3b9edd;
             letter-spacing: 0.02em;
             margin-bottom: 14px;
             display: block;
             font-family: 'Figtree', sans-serif;
         }

         .geek-title {
             font-size: clamp(28px, 4vw, 46px);
             font-weight: 700;
             color: #fff;
             line-height: 1.2;
             max-width: 720px;
             margin: 0 auto;
             font-family: 'Figtree', sans-serif;
         }

         /* ─── Cards Container ──────────────────────────────────── */
         .geek-cards {
             display: flex;
             gap: 12px;
             height: 350px;
             max-width: 1160px;
             margin: 0 auto;
         }

         /* ─── Individual Card ──────────────────────────────────── */
         .geek-card {
             border-radius: 12px;
             overflow: hidden;
             cursor: pointer;
             position: relative;
             /* Collapsed: fixed narrow width */
             flex: 0 0 106px;
             transition:
                 flex 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
                 box-shadow 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
             /* Collapsed card background: very dark navy */
             background: #07111e;
             /* Subtle box shadow depth */
             box-shadow: rgba(0, 0, 0, 0.95) 0px 20px 40px 0px,
                 rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset;
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
             padding: 32px;
             min-width: 0;
         }

         /* ─── Active / expanded card ────────────────────────────── */
         .geek-card.active {
             flex: 1 1 0%;
             /* Teal radial glow — matches botminds mask.png */
             background:
                 radial-gradient(ellipse 65% 65% at 70% 30%,
                     rgba(0, 150, 140, 0.55) 0%,
                     rgba(0, 90, 120, 0.35) 35%,
                     rgba(5, 30, 60, 0.0) 70%),
                 linear-gradient(180deg, #0b1e34 0%, #081526 60%, #050e1e 100%);
             box-shadow: rgba(0, 0, 0, 0.95) 0px 20px 40px 0px,
                 rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset;
         }

         /* ─── Collapsed cards: center the letter ───────────────── */
         .geek-card:not(.active) {
             align-items: center;
             justify-content: center;
         }

         /* ─── Letter wrapper ────────────────────────────────────── */
         .geek-letter-wrap {
             display: flex;
             align-items: flex-end;
             /* letter baseline aligns with title */
             gap: 0;
             line-height: 1;
             margin-bottom: 16px;
             white-space: nowrap;
             overflow: hidden;
         }

         .geek-card:not(.active) .geek-letter-wrap {
             margin-bottom: 0;
             align-items: center;
             justify-content: center;
         }

         /* ─── Large letter ──────────────────────────────────────── */
         .geek-letter {
             /* Exact gradient from botminds computed styles  */
             font-size: 110px;
             font-weight: 400;
             font-family: 'Figtree', sans-serif;
             line-height: 0.9;
             letter-spacing: -0.01em;
             background: linear-gradient(0deg,
                     rgb(5, 146, 234) 0%,
                     rgb(30, 144, 255) 40%,
                     rgb(206, 226, 242) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             flex-shrink: 0;
         }

         /* ─── Rest of the title (e.g. "et it Done") ─────────────── */
         .geek-letter-rest {
             font-size: 48px;
             font-weight: 400;
             /* matches botminds — NOT bold */
             font-family: 'Figtree', sans-serif;
             color: #fff;
             letter-spacing: -0.01em;
             padding-bottom: 8px;
             padding-left: 4px;
             /* Hidden in collapsed state - animate width + opacity */
             max-width: 0;
             overflow: hidden;
             opacity: 0;
             white-space: nowrap;
             transition:
                 max-width 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s,
                 opacity 0.45s ease 0.18s;
         }

         .geek-card.active .geek-letter-rest {
             max-width: 700px;
             opacity: 1;
         }

         /* ─── Description ───────────────────────────────────────── */
         .geek-desc {
             font-size: 15px;
             font-weight: 400;
             font-family: 'Figtree', sans-serif;
             /* Botminds uses a subdued gray/silver for descriptions */
             color: rgba(180, 195, 210, 0.85);
             line-height: 1.6;
             max-height: 0;
             overflow: hidden;
             opacity: 0;
             transition:
                 max-height 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) 0.12s,
                 opacity 0.40s ease 0.25s;
             max-width: 500px;
         }

         .geek-card.active .geek-desc {
             max-height: 100px;
             opacity: 1;
         }

         .geek-card:not(.active) .geek-desc {
             display: none;
         }

         /* ─── Responsive ────────────────────────────────────────── */
         @media (max-width: 768px) {
             .geek-section {
                 padding: 60px 20px;
             }

             .geek-cards {
                 flex-direction: column;
                 height: auto;
                 gap: 10px;
             }

             .geek-card {
                 flex: 0 0 auto;
                 height: 88px;
                 padding: 20px 24px;
                 border-radius: 10px;
                 justify-content: center;
                 align-items: flex-start;
             }

             .geek-card.active {
                 height: auto;
                 min-height: 210px;
                 justify-content: flex-end;
                 align-items: flex-start;
                 padding: 24px;
             }

             .geek-letter {
                 font-size: 72px;
             }

             .geek-letter-rest {
                 font-size: 30px;
             }

             .geek-card:not(.active) {
                 justify-content: center;
                 align-items: flex-start;
             }
         }

         /* ═══════════════════════════════════
         PAGE NAVIGATION (SPA router)
         ═══════════════════════════════════ */
         .page {
             display: none
         }

         .page.active {
             display: block
         }

         .nav-links a.nav-active {
             color: var(--cyan)
         }

         .nav-links a.nav-active::after {
             transform: scaleX(1)
         }

         /* ═══════════════════════════════════
         ABOUT US PAGE
         ═══════════════════════════════════ */
         #page-about {
             background: var(--bg)
         }

         .about-hero {
             padding: 140px 6% 80px;
             background: var(--bg);
             position: relative;
             overflow: hidden
         }

         .about-hero-content {
             max-width: 760px;
             position: relative;
             z-index: 2
         }

         .about-hero h1 {
             font-family: var(--font-head);
             font-size: clamp(32px, 5vw, 68px);
             font-weight: 900;
             line-height: 1.0;
             letter-spacing: -1px;
             margin-bottom: 28px;
             color: var(--text)
         }

         .about-hero h1 span {
             background: linear-gradient(110deg, var(--cyan), var(--blue));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text
         }

         .about-hero p {
             font-size: 17px;
             font-weight: 300;
             color: var(--text2);
             max-width: 600px;
             line-height: 1.9
         }

         .about-mission {
             padding: 80px 6%;
             background: var(--bg2);
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 80px;
             align-items: center
         }

         @media(max-width:860px) {
             .about-mission {
                 grid-template-columns: 1fr
             }
         }

         .about-mission-text h2 {
             font-family: var(--font-head);
             font-size: clamp(24px, 3.5vw, 42px);
             font-weight: 900;
             color: var(--text);
             margin-bottom: 20px;
             letter-spacing: -0.5px
         }

         .about-mission-text p {
             font-size: 15.5px;
             font-weight: 300;
             color: var(--text2);
             line-height: 1.9;
             margin-bottom: 16px
         }

         .about-stats-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 24px
         }

         .about-stat-box {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 28px 24px;
             text-align: center
         }

         .about-stat-box .num {
             font-family: var(--font-head);
             font-size: 40px;
             font-weight: 900;
             color: var(--cyan);
             letter-spacing: -1px;
             line-height: 1
         }

         .about-stat-box .lbl {
             font-family: var(--font-head);
             font-size: 8px;
             color: var(--text3);
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-top: 6px
         }

         .leadership-section {
             padding: 80px 6%;
             background: var(--bg)
         }

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

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

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

         .leader-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 32px 28px;
             transition: all .3s
         }

         .leader-card:hover {
             border-color: rgba(0, 207, 255, 0.25);
             transform: translateY(-4px)
         }

         .leader-avatar {
             width: 64px;
             height: 64px;
             border-radius: 50%;
             background: linear-gradient(135deg, var(--blue), var(--cyan));
             display: flex;
             align-items: center;
             justify-content: center;
             font-family: var(--font-head);
             font-size: 22px;
             font-weight: 900;
             color: #020B18;
             margin-bottom: 20px
         }

         .leader-name {
             font-family: var(--font-head);
             font-size: 13px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 4px;
             letter-spacing: 0.3px
         }

         .leader-title {
             font-family: var(--font-head);
             font-size: 8px;
             color: var(--cyan);
             letter-spacing: 1.5px;
             text-transform: uppercase;
             margin-bottom: 14px
         }

         .leader-bio {
             font-size: 13px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.75
         }

         .target-clients {
             padding: 80px 6%;
             background: var(--bg2)
         }

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

         @media(max-width:860px) {
             .client-seg-grid {
                 grid-template-columns: 1fr 1fr
             }
         }

         .client-seg {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 28px 22px;
             position: relative;
             overflow: hidden;
             transition: all .3s
         }

         .client-seg::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--blue), var(--cyan));
             transform: scaleX(0);
             transform-origin: left;
             transition: transform .4s
         }

         .client-seg:hover::before {
             transform: scaleX(1)
         }

         .client-seg:hover {
             border-color: rgba(0, 207, 255, 0.22);
             transform: translateY(-3px)
         }

         .client-seg-icon {
             font-size: 28px;
             margin-bottom: 14px
         }

         .client-seg-name {
             font-family: var(--font-head);
             font-size: 10px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 8px;
             letter-spacing: 0.5px
         }

         .client-seg-desc {
             font-size: 12.5px;
             color: var(--text3);
             line-height: 1.65
         }

         /* ═══════════════════════════════════
         SERVICES PAGE
         ═══════════════════════════════════ */
         #page-services {
             background: var(--bg)
         }

         .services-page-hero {
             padding: 140px 6% 80px;
             background: var(--bg)
         }

         .svc-full-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 24px;
             margin-top: 56px
         }

         @media(max-width:860px) {
             .svc-full-grid {
                 grid-template-columns: 1fr
             }
         }

         .svc-full-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 36px 32px;
             transition: all .3s;
             position: relative;
             overflow: hidden
         }

         .svc-full-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--blue), var(--cyan));
             transform: scaleX(0);
             transform-origin: left;
             transition: transform .4s
         }

         .svc-full-card:hover {
             border-color: rgba(0, 207, 255, 0.22);
             transform: translateY(-3px)
         }

         .svc-full-card:hover::before {
             transform: scaleX(1)
         }

         .svc-full-icon {
             font-size: 32px;
             margin-bottom: 20px
         }

         .svc-full-name {
             font-family: var(--font-head);
             font-size: 15px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 12px;
             letter-spacing: 0.3px
         }

         .svc-full-desc {
             font-size: 14px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.8;
             margin-bottom: 20px
         }

         .svc-full-list {
             list-style: none;
             display: flex;
             flex-direction: column;
             gap: 8px
         }

         .svc-full-list li {
             font-size: 13px;
             color: var(--text2);
             font-weight: 300;
             display: flex;
             gap: 10px;
             align-items: flex-start
         }

         .svc-full-list li::before {
             content: '→';
             color: var(--cyan);
             font-size: 12px;
             flex-shrink: 0;
             margin-top: 2px
         }

         .svc-tags-row {
             display: flex;
             flex-wrap: wrap;
             gap: 6px;
             margin-top: 20px
         }

         .svc-tag-sm {
             font-family: var(--font-head);
             font-size: 8px;
             color: rgba(220, 232, 255, 0.85);
             background: rgba(27, 111, 255, 0.14);
             border: 1px solid rgba(0, 207, 255, 0.25);
             border-radius: 2px;
             padding: 4px 9px;
             letter-spacing: 0.8px;
             text-transform: uppercase
         }

         /* ═══════════════════════════════════
         INDUSTRIES PAGE
         ═══════════════════════════════════ */
         #page-industries {
             background: var(--bg)
         }

         .industries-page-hero {
             padding: 140px 6% 0px
         }

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

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

         @media(max-width:540px) {
             .ind-full-grid {
                 grid-template-columns: 1fr
             }
         }

         .ind-full-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 36px 28px;
             transition: all .3s;
             position: relative;
             overflow: hidden
         }

         .ind-full-card::after {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--blue), var(--cyan));
             transform: scaleX(0);
             transform-origin: left;
             transition: transform .4s
         }

         .ind-full-card:hover {
             border-color: rgba(0, 207, 255, 0.22);
             transform: translateY(-4px);
             box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4)
         }

         .ind-full-card:hover::after {
             transform: scaleX(1)
         }

         .ind-full-icon {
             font-size: 36px;
             margin-bottom: 18px
         }

         .ind-full-name {
             font-family: var(--font-head);
             font-size: 14px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 12px;
             letter-spacing: 0.3px
         }

         .ind-full-desc {
             font-size: 13.5px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.8;
             margin-bottom: 18px
         }

         .ind-use-cases {
             display: flex;
             flex-wrap: wrap;
             gap: 6px
         }

         .ind-use-case {
             font-size: 11px;
             color: var(--text3);
             background: rgba(27, 111, 255, 0.06);
             border: 1px solid var(--border2);
             border-radius: 20px;
             padding: 4px 12px
         }

         /* ═══════════════════════════════════
         CAREERS PAGE
         ═══════════════════════════════════ */
         #page-careers {
             background: var(--bg)
         }

         .careers-page-hero {
             padding: 140px 6% 80px;
             background: var(--bg)
         }

         .careers-culture {
             padding: 80px 6%;
             background: var(--bg2)
         }

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

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

         .culture-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 28px 24px
         }

         .culture-icon {
             font-size: 28px;
             margin-bottom: 14px
         }

         .culture-title {
             font-family: var(--font-head);
             font-size: 11px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 8px;
             letter-spacing: 0.5px
         }

         .culture-desc {
             font-size: 13px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.7
         }

         .jobs-section {
             padding: 80px 6%;
             background: var(--bg)
         }

         .job-filters {
             display: flex;
             gap: 12px;
             flex-wrap: wrap;
             margin-bottom: 36px
         }

         .job-filter-btn {
             font-family: var(--font-head);
             font-size: 8.5px;
             font-weight: 600;
             padding: 16px 18px;
             border-radius: 2px;
             border: 1px solid var(--border2);
             background: transparent;
             color: var(--text3);
             cursor: pointer;
             letter-spacing: 1px;
             text-transform: uppercase;
             transition: all .2s
         }

         .job-filter-btn.active,
         .job-filter-btn:hover {
             border-color: var(--cyan);
             color: var(--cyan);
             background: rgba(0, 207, 255, 0.06)
         }

         .jobs-list {
             display: flex;
             flex-direction: column;
             gap: 1px;
             background: rgba(27, 111, 255, 0.06);
             border: 1px solid var(--border2);
             border-radius: 8px;
             overflow: hidden
         }

         .job-row {
             background: var(--bg);
             padding: 22px 28px;
             display: grid;
             grid-template-columns: 1fr auto auto auto;
             gap: 20px;
             align-items: center;
             transition: background .2s;
             cursor: pointer
         }

         @media(max-width:700px) {
             .job-row {
                 grid-template-columns: 1fr;
                 gap: 10px
             }
         }

         .job-row:hover {
             background: var(--surface)
         }

         .job-title {
             font-family: var(--font-head);
             font-size: 11.5px;
             font-weight: 700;
             color: var(--text);
             letter-spacing: 0.3px;
             margin-bottom: 4px
         }

         .job-team {
             font-size: 12px;
             color: var(--text3);
             font-weight: 300
         }

         .job-badge {
             font-family: var(--font-head);
             font-size: 7px;
             font-weight: 600;
             padding: 4px 10px;
             border-radius: 2px;
             border: 1px solid;
             letter-spacing: 1px;
             text-transform: uppercase;
             white-space: nowrap
         }

         .job-badge.dept {
             color: var(--cyan);
             border-color: rgba(0, 207, 255, 0.2);
             background: rgba(0, 207, 255, 0.06)
         }

         .job-badge.type {
             color: var(--electric);
             border-color: rgba(77, 159, 255, 0.2);
             background: rgba(77, 159, 255, 0.06)
         }

         .job-location {
             font-size: 12px;
             color: var(--text3);
             white-space: nowrap
         }

         .job-apply {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 700;
             color: var(--blue);
             border: 1px solid rgba(27, 111, 255, 0.3);
             border-radius: 2px;
             padding: 17px 18px;
             transition: all .2s;
             letter-spacing: 1px;
             text-transform: uppercase;
             white-space: nowrap;
             background: transparent;
             cursor: pointer
         }

         .job-row:hover .job-apply {
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             color: #020B18;
             border-color: transparent
         }

         /* ═══════════════════════════════════
         CASE STUDIES PAGE
         ═══════════════════════════════════ */
         #page-casestudies {
             background: var(--bg)
         }

         .cs-page-hero {
             padding: 140px 6% 80px
         }

         .cs-full-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 28px;
             margin-top: 56px
         }

         @media(max-width:860px) {
             .cs-full-grid {
                 grid-template-columns: 1fr
             }
         }

         .cs-full-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             overflow: hidden;
             transition: all .3s
         }

         .cs-full-card:hover {
             border-color: rgba(0, 207, 255, 0.22);
             transform: translateY(-4px);
             box-shadow: 0 16px 56px rgba(0, 0, 0, 0.45)
         }

         .cs-full-banner {
             height: 140px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 44px;
             position: relative;
             overflow: hidden
         }

         .cs-full-banner::after {
             content: '';
             position: absolute;
             inset: 0;
             background: linear-gradient(to bottom, transparent 40%, rgba(7, 20, 34, 0.8))
         }

         .cs-full-body {
             padding: 28px
         }

         .cs-full-cat {
             font-family: var(--font-head);
             font-size: 7.5px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-bottom: 10px
         }

         .cs-full-title {
             font-family: var(--font-head);
             font-size: 15px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 12px;
             line-height: 1.3;
             letter-spacing: 0.3px
         }

         .cs-full-challenge {
             font-size: 13.5px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.8;
             margin-bottom: 18px
         }

         .cs-full-solution {
             font-size: 13px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.75;
             margin-bottom: 20px
         }

         .cs-metrics-row {
             display: flex;
             gap: 24px;
             flex-wrap: wrap;
             padding-top: 20px;
             border-top: 1px solid var(--border2)
         }

         .cs-metric {
             text-align: center
         }

         .cs-metric-val {
             font-family: var(--font-head);
             font-size: 24px;
             font-weight: 900;
             color: var(--cyan)
         }

         .cs-metric-lbl {
             font-family: var(--font-head);
             font-size: 7.5px;
             color: var(--text3);
             margin-top: 4px;
             letter-spacing: 1px;
             text-transform: uppercase
         }

         .testimonials-section {
             padding: 80px 6%;
             background: var(--bg2)
         }

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

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

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

         .testimonial-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 32px 28px;
             position: relative
         }

         .testimonial-card::before {
             content: '"';
             font-family: Georgia, serif;
             font-size: 80px;
             color: var(--blue);
             opacity: 0.15;
             position: absolute;
             top: 16px;
             left: 24px;
             line-height: 1
         }

         .testimonial-text {
             font-size: 14px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.8;
             margin-bottom: 24px;
             padding-top: 32px;
             font-style: italic
         }

         .testimonial-author {
             display: flex;
             align-items: center;
             gap: 14px
         }

         .testimonial-avatar {
             width: 44px;
             height: 44px;
             border-radius: 50%;
             background: linear-gradient(135deg, var(--blue), var(--cyan));
             display: flex;
             align-items: center;
             justify-content: center;
             font-family: var(--font-head);
             font-size: 14px;
             font-weight: 700;
             color: #020B18;
             flex-shrink: 0
         }

         .testimonial-name {
             font-family: var(--font-head);
             font-size: 11px;
             font-weight: 700;
             color: var(--text);
             letter-spacing: 0.3px
         }

         .testimonial-role {
             font-size: 12px;
             color: var(--text3);
             margin-top: 2px
         }

         /* ═══════════════════════════════════
         BLOG PAGE
         ═══════════════════════════════════ */
         #page-blog {
             background: var(--bg)
         }

         .blog-page-hero {
             padding: 140px 6% 80px
         }

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

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

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

         .blog-card {
             display: block;
             text-decoration: none;
             color: inherit;
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             overflow: hidden;
             transition: all .3s;
             cursor: pointer
         }

         .blog-card:hover {
             border-color: rgba(0, 207, 255, 0.22);
             transform: translateY(-4px);
             box-shadow: 0 14px 48px rgba(0, 0, 0, 0.4)
         }

         .blog-banner {
             height: 160px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 48px;
             position: relative;
             overflow: hidden
         }

         .blog-body {
             padding: 24px
         }

         .blog-meta {
             display: flex;
             gap: 12px;
             align-items: center;
             margin-bottom: 12px;
             flex-wrap: wrap
         }

         .blog-cat {
             font-family: var(--font-head);
             font-size: 7.5px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 2px;
             text-transform: uppercase;
             background: rgba(0, 207, 255, 0.07);
             border: 1px solid rgba(0, 207, 255, 0.15);
             border-radius: 2px;
             padding: 3px 9px
         }

         .blog-date {
             font-family: var(--font-head);
             font-size: 7.5px;
             color: var(--text3);
             letter-spacing: 1px
         }

         .blog-read {
             font-family: var(--font-head);
             font-size: 7.5px;
             color: var(--text3);
             letter-spacing: 1px
         }

         .blog-title {
             font-family: var(--font-head);
             font-size: 13.5px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 10px;
             line-height: 1.4;
             letter-spacing: 0.3px
         }

         .blog-excerpt {
             font-size: 13px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.7
         }

         .blog-read-more {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 2px;
             text-transform: uppercase;
             display: inline-block;
             margin-top: 16px
         }

         /* Blog Article Modal */
         .article-overlay {
             position: fixed;
             inset: 0;
             background: rgba(2, 11, 24, 0.97);
             z-index: 2000;
             overflow-y: auto;
             display: none
         }

         .article-overlay.open {
             display: block
         }

         .article-inner {
             max-width: 780px;
             margin: 0 auto;
             padding: 80px 40px
         }

         .article-back {
             font-family: var(--font-head);
             font-size: 8.5px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 2px;
             text-transform: uppercase;
             background: transparent;
             border: 1px solid rgba(0, 207, 255, 0.2);
             padding: 16px 20px;
             border-radius: 2px;
             cursor: pointer;
             margin-bottom: 48px;
             display: inline-block;
             transition: all .2s
         }

         .article-back:hover {
             background: rgba(0, 207, 255, 0.08)
         }

         .article-cat {
             font-family: var(--font-head);
             font-size: 8.5px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 3px;
             text-transform: uppercase;
             margin-bottom: 16px
         }

         .article-title {
             font-family: var(--font-head);
             font-size: clamp(24px, 4vw, 44px);
             font-weight: 900;
             color: var(--text);
             line-height: 1.1;
             letter-spacing: -0.5px;
             margin-bottom: 20px
         }

         .article-byline {
             font-size: 13px;
             color: var(--text3);
             margin-bottom: 48px;
             padding-bottom: 24px;
             border-bottom: 1px solid var(--border2)
         }

         .article-body h2 {
             font-family: var(--font-head);
             font-size: 18px;
             font-weight: 700;
             color: var(--text);
             margin: 40px 0 16px;
             letter-spacing: 0.3px
         }

         .article-body h3 {
             font-family: var(--font-head);
             font-size: 14px;
             font-weight: 700;
             color: var(--cyan);
             margin: 28px 0 12px;
             letter-spacing: 0.5px;
             text-transform: uppercase
         }

         .article-body p {
             font-size: 15.5px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.9;
             margin-bottom: 20px
         }

         .article-body ul {
             list-style: none;
             margin: 16px 0 24px;
             display: flex;
             flex-direction: column;
             gap: 10px
         }

         .article-body ul li {
             font-size: 15px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.7;
             display: flex;
             gap: 12px
         }

         .article-body ul li::before {
             content: '→';
             color: var(--cyan);
             flex-shrink: 0
         }

         .article-callout {
             background: var(--surface);
             border-left: 3px solid var(--cyan);
             border-radius: 0 8px 8px 0;
             padding: 20px 24px;
             margin: 28px 0;
             font-size: 15px;
             color: var(--text);
             font-style: italic;
             line-height: 1.75
         }

         /* ═══════════════════════════════════
         CONTACT PAGE
         ═══════════════════════════════════ */
         #page-contact {
             background: var(--bg)
         }

         .contact-page-hero {
             padding: 140px 6% 60px
         }

         .contact-page-grid {
             display: grid;
             grid-template-columns: 1fr 1.2fr;
             gap: 80px;
             padding: 0 6% 100px
         }

         @media(max-width:860px) {
             .contact-page-grid {
                 grid-template-columns: 1fr
             }
         }

         .contact-offices {
             margin-top: 48px;
             display: flex;
             flex-direction: column;
             gap: 20px
         }

         .office-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 24px 22px
         }

         .office-name {
             font-family: var(--font-head);
             font-size: 10px;
             font-weight: 700;
             color: var(--text);
             letter-spacing: 1px;
             margin-bottom: 6px;
             text-transform: uppercase
         }

         .office-addr {
             font-size: 13px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.6
         }

         /* ==========================================================================
   Copy-Protection: selection lock
   copy-protection.js blocks selection via mousedown/selectstart handlers, but
   Firefox doesn't implement the (non-standard) onselectstart handler property,
   so nav links and other text stayed selectable there. CSS user-select is the
   part of the protection Firefox actually honors; JS still handles right-click
   and keyboard-shortcut blocking. Form fields are exempted so typing/pasting
   into them keeps working.
   ========================================================================== */

         body {
             user-select: none;
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
         }

         input, textarea, select, option, [contenteditable="true"], [contenteditable=""] {
             user-select: text;
             -webkit-user-select: text;
             -moz-user-select: text;
             -ms-user-select: text;
         }

         /* ==========================================================================
   Copy-Protection Message Box
   (Moved from inline <style> blocks in index.html)
   ========================================================================== */

         #wpcp-error-message {
             direction: ltr;
             text-align: center;
             transition: opacity 900ms ease 0s;
             z-index: 99999999;
         }

         .hideme {
             opacity: 0;
             visibility: hidden;
         }

         .showme {
             opacity: 1;
             visibility: visible;
         }

         .msgmsg-box-wpcp {
             border: 1px solid #f5aca6;
             border-radius: 10px;
             color: #555;
             font-family: Tahoma, sans-serif;
             font-size: 11px;
             margin: 10px;
             padding: 10px 36px;
             position: fixed;
             width: 255px;
             top: 50%;
             left: 50%;
             margin-top: -10px;
             margin-left: -130px;
             box-shadow: 0 0 34px 2px rgba(242, 191, 191, 1);
         }

         .msgmsg-box-wpcp span {
             font-weight: bold;
             text-transform: uppercase;
         }

         .warning-wpcp {
             background: #ffecec no-repeat 10px 50%;
         }

         /* ── About page: leadership team-cube (was #leadership-mafoi-css) ── */
         /* ── Mafoi Leadership Row List ── */
         .mafoi-row-list {
             display: flex;
             flex-direction: column;
             margin-top: 32px;
             border-top: 1px solid rgba(29, 111, 255, 0.15);
         }

         .mafoi-list-row {
             position: relative;
             padding: 28px 24px;
             border-bottom: 1px solid rgba(29, 111, 255, 0.12);
             display: flex;
             justify-content: space-between;
             align-items: center;
             cursor: pointer;
             background-color: var(--surface);
             transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
             min-height: 90px;
             z-index: 1;
             overflow: visible;
             border-radius: 0;
         }

         .mafoi-list-row:first-child {
             border-radius: 8px 8px 0 0;
         }

         .mafoi-list-row:last-child {
             border-radius: 0 0 8px 8px;
             border-bottom: none;
         }

         .mafoi-list-row:hover {
             background-color: #0a1830;
             padding: 36px 24px;
             min-height: 170px;
             align-items: flex-start;
             z-index: 10;
         }

         .mafoi-row-content {
             flex-grow: 1;
             z-index: 2;
             position: relative;
             transition: transform 0.4s ease;
         }

         .mafoi-list-row:hover .mafoi-row-content {
             transform: translateX(10px);
         }

         .mafoi-row-job {
             font-family: var(--font-head);
             font-size: 8px;
             color: var(--cyan);
             text-transform: uppercase;
             font-weight: 700;
             margin-bottom: 6px;
             letter-spacing: 2px;
             transition: color 0.3s ease;
         }

         .mafoi-list-row:hover .mafoi-row-job {
             color: var(--electric);
         }

         .mafoi-row-name {
             font-family: var(--font-head);
             font-size: 20px;
             font-weight: 700;
             color: var(--text);
             margin: 0 0 0 0;
             letter-spacing: 0.3px;
             transition: color 0.3s ease;
         }

         .mafoi-list-row:hover .mafoi-row-name {
             color: #fff;
         }

         .mafoi-row-bio {
             font-size: 13px;
             font-weight: 300;
             color: var(--text2);
             line-height: 1.7;
             margin-top: 10px;
             max-height: 0;
             overflow: hidden;
             opacity: 0;
             transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s,
                 opacity 0.4s ease 0.1s;
             max-width: 480px;
         }

         .mafoi-list-row:hover .mafoi-row-bio {
             max-height: 200px;
             opacity: 1;
         }

         .mafoi-row-arrow {
             width: 22px;
             height: 22px;
             color: var(--text3);
             transition: color 0.3s ease, opacity 0.3s ease;
             z-index: 2;
             display: flex;
             align-items: center;
             position: absolute;
             right: 24px;
             top: 50%;
             transform: translateY(-50%);
         }

         .mafoi-row-arrow svg {
             width: 100%;
             height: 100%;
         }

         .mafoi-list-row:hover .mafoi-row-arrow {
             opacity: 0;
         }

         /* ── Cube Reveal Panel ── */
         .mafoi-row-wrapper {
             position: relative;
             display: flex;
             gap: 0 !important;
         }

         .mafoi-row-list {
             flex: 1;
         }

         .mafoi-cube-reveal {
             position: absolute;
             right: 32px;
             top: 50%;
             transform: translateY(-40%) scale(0.9);
             width: 200px;
             height: 266px;
             perspective: 1200px;
             opacity: 0;
             transition: opacity 0.4s ease,
                 transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
             pointer-events: none;
             z-index: 20;
         }

         .mafoi-cube-reveal.is-active {
             opacity: 1;
             transform: translateY(-50%) scale(1);
         }

         .swiper-team-cube {
             width: 100%;
             height: 100%;
             overflow: visible;
         }

         .swiper-team-cube .swiper-slide {
             background-size: cover;
             background-position: center top;
             border-radius: 10px;
             box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
         }

         @media(max-width:860px) {
             .mafoi-cube-reveal {
                 display: none;
             }
         }

         /* ── Industries page: showcase slider (was #ind-showcase-css) ── */
         /* ══════════════════════════════════════════════════════
                  INDUSTRIES SHOWCASE
                  Layout:  pill tabs on top
                  left = static text panel (never moves)
                  right = horizontal drag/click carousel
                  each slide = bg image + text overlay
                  ══════════════════════════════════════════════════════ */
         .isl-wrapper {
             margin-top: 56px;
         }

         /* ── Pill tab buttons row ── */
         .isl-tabs {
             display: flex;
             flex-wrap: wrap;
             gap: 10px;
             /* space between each pill */
             margin-bottom: 28px;
         }

         .isl-tab {
             flex-shrink: 0;
             font-family: var(--font-head);
             font-size: 8.5px;
             font-weight: 600;
             letter-spacing: 0.8px;
             text-transform: uppercase;
             color: var(--text3);
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 100px;
             /* pill shape */
             padding: 16px 20px;
             cursor: pointer;
             transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
             white-space: nowrap;
             outline: none;
         }

         .isl-tab:hover {
             color: var(--text2);
             border-color: var(--border);
             background: var(--surface2);
         }

         .isl-tab:focus-visible {
             outline: 2px solid var(--cyan);
             outline-offset: 2px;
         }

         /* Active: filled background pill */
         .isl-tab.isl-tab-active {
             color: #020B18;
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             border-color: transparent;
             box-shadow: 0 4px 18px rgba(0, 207, 255, 0.25);
         }

         /* ── Main body: left static + right carousel ── */
         .isl-body {
             display: grid;
             grid-template-columns: 340px 1fr;
             gap: 20px;
             border-radius: 12px;
             min-height: 480px;
         }

         @media(max-width:960px) {
             .isl-body {
                 grid-template-columns: 1fr;
             }

             /* Higher-specificity selector (not just source order) since the
                base .isl-left rule below also sets display, and this must
                win regardless of where either rule ends up in the file. */
             .isl-body .isl-left {
                 display: none;
             }
         }

         /* ── Left: static text panel ── */
         .isl-left {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 12px;
             padding: 52px 40px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             /* STATIC — never moves */
             position: relative;
             z-index: 1;
         }

         .isl-left-label {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 3px;
             text-transform: uppercase;
             margin-bottom: 20px;
             display: flex;
             align-items: center;
             gap: 10px;
         }

         .isl-left-label::before {
             content: '';
             width: 24px;
             height: 1px;
             background: linear-gradient(90deg, var(--blue), var(--cyan));
             flex-shrink: 0;
         }

         .isl-left-text {
             font-size: 16px;
             font-weight: 300;
             color: var(--text2);
             line-height: 1.9;
         }

         .isl-left-text strong {
             color: var(--text);
             font-weight: 500;
         }

         /* Decorative glow */
         .isl-left::after {
             content: '';
             position: absolute;
             bottom: -40px;
             right: -40px;
             width: 160px;
             height: 160px;
             background: radial-gradient(circle, rgba(27, 111, 255, 0.1) 0%, transparent 70%);
             pointer-events: none;
         }

         /* ── Right: carousel viewport ── */
         .isl-viewport {
             overflow: hidden;
             cursor: grab;
             user-select: none;
             -webkit-user-select: none;
             position: relative;
             border: 1px solid var(--border2);
             border-radius: 12px;
             touch-action: pan-y;
             overscroll-behavior-x: contain;
         }

         .isl-viewport:active {
             cursor: grabbing;
         }

         /* Slide track */
         .isl-track {
             display: flex;
             width: 700%;
             height: 100%;
             gap: 16px;
             transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
             will-change: transform;
         }

         .isl-track.isl-no-transition {
             transition: none !important;
         }

         /* Individual slide = full bg image + overlay with text */
         .isl-slide {
             width: 14%;
             flex-shrink: 0;
             background-size: cover;
             background-position: center center;
             background-repeat: no-repeat;
             position: relative;
             min-height: 480px;
             overflow: hidden;
             border-radius: 12px;
         }

         /* Dark gradient overlay: strong at bottom for text legibility */
         .isl-slide-overlay {
             position: absolute;
             inset: 0;
             border-radius: 12px;
             background: linear-gradient(160deg,
                     rgba(2, 11, 24, 0.45) 0%,
                     rgba(2, 11, 24, 0.72) 50%,
                     rgba(2, 11, 24, 0.92) 100%);
             padding: 48px 44px;
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
         }

         .isl-slide-eyebrow {
             font-family: var(--font-head);
             font-size: 8px;
             font-weight: 600;
             color: var(--cyan);
             letter-spacing: 3px;
             text-transform: uppercase;
             margin-bottom: 12px;
         }

         .isl-slide-title {
             font-family: var(--font-head);
             font-size: clamp(18px, 2vw, 28px);
             font-weight: 900;
             color: #fff;
             line-height: 1.08;
             letter-spacing: -0.3px;
             margin-bottom: 16px;
         }

         .isl-slide-desc {
             font-size: 14px;
             font-weight: 300;
             color: rgba(220, 232, 255, 0.85);
             line-height: 1.8;
             margin-bottom: 22px;
             max-width: 520px;
         }

         .isl-chips {
             display: flex;
             flex-wrap: wrap;
             gap: 7px;
         }

         .isl-chip {
             font-size: 11px;
             color: rgba(220, 232, 255, 0.8);
             background: rgba(27, 111, 255, 0.18);
             border: 1px solid rgba(0, 207, 255, 0.25);
             border-radius: 100px;
             padding: 4px 12px;
             white-space: nowrap;
             -webkit-backdrop-filter: blur(4px);
             backdrop-filter: blur(4px);
             transition: background 0.2s, color 0.2s;
         }

         .isl-chip:hover {
             background: rgba(0, 207, 255, 0.25);
             color: #fff;
         }

         /* ── AI Platform nav dropdown ─────────────────────────────────── */
         .nav-dropdown {
             position: relative
         }

         .nav-dropdown-caret {
             display: inline-block;
             width: 6px;
             height: 6px;
             margin-left: 5px;
             border-right: 1.5px solid currentColor;
             border-bottom: 1.5px solid currentColor;
             transform: rotate(45deg);
             vertical-align: 2px;
             transition: transform .2s
         }

         .nav-dropdown:hover .nav-dropdown-caret,
         .nav-dropdown:focus-within .nav-dropdown-caret,
         .nav-dropdown.open .nav-dropdown-caret {
             transform: rotate(225deg)
         }

         .nav-dropdown-menu {
             position: absolute;
             top: calc(100% + 18px);
             left: 50%;
             transform: translateX(-50%) translateY(6px);
             min-width: 240px;
             background: rgba(6, 15, 36, 0.98);
             border: 1px solid var(--border2);
             border-radius: 6px;
             -webkit-backdrop-filter: blur(24px);
             backdrop-filter: blur(24px);
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
             padding: 10px;
             opacity: 0;
             visibility: hidden;
             pointer-events: none;
             transition: opacity .2s, transform .2s;
             z-index: 1001
         }

         /* Invisible bridge over the 18px gap above the menu — without it,
            a real mouse path from the toggle down to the menu crosses a
            strip that belongs to neither element, :hover drops, and the
            menu closes before the cursor arrives (Chrome/Firefox/Safari
            all reproduce this). It inherits pointer-events from
            .nav-dropdown-menu, so it's only interactive while the menu is. */
         .nav-dropdown-menu::before {
             content: '';
             position: absolute;
             top: -18px;
             left: 0;
             right: 0;
             height: 18px;
         }

         .nav-dropdown:hover .nav-dropdown-menu,
         .nav-dropdown:focus-within .nav-dropdown-menu,
         .nav-dropdown.open .nav-dropdown-menu {
             opacity: 1;
             visibility: visible;
             pointer-events: auto;
             transform: translateX(-50%) translateY(0)
         }

         .nav-dropdown-menu a {
             display: block;
             padding: 11px 14px;
             border-radius: 4px;
             font-family: var(--font-head);
             font-size: 10.5px;
             font-weight: 600;
             color: var(--text2);
             text-decoration: none;
             letter-spacing: 0.8px;
             text-transform: none;
             transition: background .2s, color .2s
         }

         .nav-dropdown-menu a::after {
             display: none
         }

         .nav-dropdown-menu a:hover,
         .nav-dropdown-menu a.nav-active {
             background: rgba(0, 207, 255, 0.08);
             color: var(--cyan)
         }

         @media(max-width:900px) {
             .nav-dropdown-menu {
                 display: none
             }
         }

         /* ── Mobile menu: AI Platform sub-links ───────────────────────── */
         .mob-submenu-label {
             font-family: var(--font-head);
             font-size: 11px;
             font-weight: 600;
             color: var(--text3);
             letter-spacing: 2px;
             text-transform: uppercase;
             margin-top: -10px
         }

         .mobile-menu a.mob-sublink {
             font-size: 15px;
             font-weight: 600;
             color: var(--text2);
             padding: 5px 0;
             margin: -22px 0 -5px;
             min-height: 44px;
         }

         /* ── Product page: video embed placeholder ────────────────────── */
         .video-embed {
             position: relative;
             max-width: 900px;
             margin: 0 auto;
             aspect-ratio: 16/9;
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             overflow: hidden;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center
         }

         .video-embed::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--blue), var(--cyan))
         }

         .video-embed-play {
             width: 64px;
             height: 64px;
             border-radius: 50%;
             background: linear-gradient(110deg, var(--blue), var(--cyan));
             display: flex;
             align-items: center;
             justify-content: center;
             margin: 0 auto 18px;
             box-shadow: 0 0 40px rgba(0, 207, 255, 0.35)
         }

         .video-embed-play::after {
             content: '';
             border-style: solid;
             border-width: 10px 0 10px 16px;
             border-color: transparent transparent transparent #020B18;
             margin-left: 4px
         }

         .video-embed-label {
             font-family: var(--font-head);
             font-size: 9px;
             font-weight: 600;
             color: var(--text2);
             letter-spacing: 2px;
             text-transform: uppercase
         }

         .video-embed iframe,
         .video-embed video {
             position: absolute;
             inset: 0;
             width: 100%;
             height: 100%;
             border: 0
         }

         /* ── Product page: benefit cards (lighter variant of svc-full-card) ── */
         .benefit-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 24px;
             margin-top: 56px
         }

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

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

         .benefit-card {
             background: var(--surface);
             border: 1px solid var(--border2);
             border-radius: 8px;
             padding: 32px 28px;
             transition: all .3s
         }

         .benefit-card:hover {
             transform: translateY(-4px);
             border-color: rgba(0, 207, 255, 0.22);
             box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4)
         }

         .benefit-icon {
             font-size: 28px;
             margin-bottom: 16px
         }

         .benefit-title {
             font-family: var(--font-head);
             font-size: 13.5px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 10px;
             letter-spacing: 0.3px
         }

         .benefit-desc {
             font-size: 13.5px;
             color: var(--text2);
             font-weight: 300;
             line-height: 1.75
         }