/* ============================================================
   STRATX CYBER TECHNOLOGIES — Defence-sector design system
   ============================================================ */

:root {
  /* Defense Intelligence palette — layered intelligence blues + steel */
  --bg:            #071421;   /* Deep Intelligence Navy (primary) */
  --bg-2:          #0B1D2E;   /* Command Center Blue (secondary) */
  --bg-3:          #050E18;   /* deepest — footer */
  --panel:         #10253A;   /* Strategic Operations Blue (elevated band) */
  --card:          #142B42;   /* Defense Control Surface (modules) */
  --text:          #F5F7FA;   /* Primary text */
  --text-dim:      #A9B7C6;   /* Secondary text */

  /* Neutral metallic system — wordmark / titanium buttons */
  --steel:          #A7B0B8;  /* Brushed Steel */
  --alloy:          #8E99A3;  /* Metal Alloy */
  --titanium:       #707A84;  /* Titanium */
  --titanium-light: #D9DEE3;  /* Light Titanium */

  --accent:    #5E86B7;   /* Technology Accent — intelligence steel-blue */
  --threat:    #D94B4B;   /* Threat indicators ONLY */
  --defense:   #37C28A;   /* Defense indicators ONLY */

  --border:        rgba(48, 70, 95, 0.55);  /* Titanium Steel */
  --border-strong: #30465F;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --section-y: clamp(80px, 11vw, 150px);

  --font-head: "Space Grotesk", system-ui, sans-serif;          /* headlines */
  --font-sub:  "IBM Plex Sans", system-ui, sans-serif;           /* subheadings / nav */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;   /* body */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  /* nearly-invisible intelligence grid — depth without distraction */
  background-image:
    linear-gradient(rgba(94, 134, 183, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 134, 183, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2 { font-family: var(--font-head); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }
h3, h4 { font-family: var(--font-sub); font-weight: 600; line-height: 1.18; letter-spacing: -0.005em; }

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

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ---------------- Shared section atoms ---------------- */
.section { padding-block: var(--section-y); position: relative; }
/* softly blended panel — no hard color break at the edges */
.section--alt {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 14%, var(--bg-2) 86%, var(--bg) 100%);
}
.section--alt::before,
.section--alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  opacity: 0.7;
}
.section--alt::before { top: 0; }
.section--alt::after { bottom: 0; }

.section__head { max-width: 820px; margin-bottom: clamp(50px, 7vw, 96px); }
.section__title {
  font-size: clamp(1.25rem, 2.5vw, 2.0rem);   /* ~28% smaller — supports, not dominates */
  font-weight: 600;
  margin-top: 18px;
  letter-spacing: 0.005em;
  line-height: 1.15;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-sub);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--accent); opacity: 0.8;
}
.eyebrow--accent { color: var(--accent); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 14px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .4s var(--ease), background .4s var(--ease-soft),
              border-color .4s var(--ease-soft), color .4s var(--ease-soft);
  white-space: nowrap;
}
.btn--primary {
  /* titanium steel gradient — defense-contractor, not luxury */
  background: linear-gradient(177deg, #C8D0D8 0%, #9FAAB5 100%);
  color: #071421;
  border-color: #B4BEC7;
  font-family: var(--font-sub);
}
.btn--primary:hover {
  background: linear-gradient(177deg, #D4DBE1 0%, #ACB6BF 100%);
  transform: translateY(-2px);
}
.btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); font-family: var(--font-sub); }
.btn--outline:hover { border-color: var(--accent); background: rgba(94,134,183,0.08); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); padding: 11px 22px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-sub); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--full { width: 100%; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .5s var(--ease-soft), border-color .5s var(--ease-soft),
              backdrop-filter .5s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(4, 30, 66, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 18px var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav__brand { display: inline-flex; align-items: center; justify-self: start; }
.nav__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.34rem;
  letter-spacing: 0.18em; line-height: 1; display: flex; flex-direction: column; gap: 4px;
  /* metallic titanium finish — defense contractor, not luxury */
  background: linear-gradient(177deg, #E4E8EC 0%, #A8B0B8 52%, #707A84 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav__name-sub {
  font-family: var(--font-sub);
  font-size: 0.62rem; letter-spacing: 0.32em; font-weight: 600; line-height: 1.15; opacity: 0.92;
  -webkit-text-fill-color: var(--titanium); color: var(--titanium);
}

.nav__links { display: flex; gap: clamp(24px, 2.9vw, 48px); justify-self: center; }
.nav__links a {
  font-family: var(--font-sub);
  font-size: 0.82rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.13em;
  text-transform: uppercase;
  position: relative; padding-block: 6px; transition: color .35s var(--ease-soft);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width .4s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }
/* scrollspy: current section */
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after { width: 100%; opacity: 0.85; }
.nav__links-contact { display: none; }

/* thin scroll-progress bar at the very top */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--steel));
  box-shadow: 0 0 8px rgba(94,134,183,0.45);
  transition: width .12s linear;
}

.nav__cta { justify-self: end; }

.nav__toggle {
  display: none; justify-self: end; background: none; border: none; cursor: pointer;
  width: 30px; height: 22px; position: relative;
}
.nav__toggle span {
  position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--text);
  transition: transform .4s var(--ease), opacity .3s ease;
}
.nav__toggle span:nth-child(1) { top: 2px; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 18px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden;
}
/* ---- Hero video background (full-bleed, living 3D scene) ---- */
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  will-change: transform;
  /* base scale gives room for the parallax translate without exposing edges.
     Lower than before → globe sits a little further back and reads sharper. */
  transform: scale(1.04);
}
.hero__video video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  /* dimmer, less-saturated signals + a touch more contrast for crispness */
  filter: brightness(0.9) saturate(0.8) contrast(1.12);
  /* very slow steady drift — gentle sense of the globe turning */
  animation: globeDrift 48s ease-in-out infinite alternate;
}
@keyframes globeDrift {
  from { transform: scale(1.06) translateX(-1.6%); }
  to   { transform: scale(1.06) translateX(1.6%); }
}
/* light blend (keeps the video's own colour): only darkens the text side and
   dissolves the edges into the page background so the scene feels continuous */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* left → readable text, right keeps the true video colour */
    linear-gradient(90deg, rgba(7,20,33,0.72) 0%, rgba(7,20,33,0.34) 38%, rgba(7,20,33,0) 62%),
    /* top under the nav + soft bottom fade that merges into the page (no hard cut) */
    linear-gradient(180deg, rgba(7,20,33,0.34) 0%, rgba(7,20,33,0) 20%, rgba(7,20,33,0) 64%, rgba(7,20,33,0.96) 100%);
}
.hero__grid-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 75%);
}

.hero__content { position: relative; z-index: 3; max-width: var(--maxw); width: 100%;
  margin-inline: auto; padding-inline: var(--pad); }
.hero__title {
  font-size: clamp(2.3rem, 5.1vw, 4.0rem);   /* commanding but controlled */
  max-width: 16ch; margin: 0; letter-spacing: -0.028em;
  line-height: 1.04; font-weight: 700;
  /* refined titanium-light finish — institutional, premium, never flashy */
  background: linear-gradient(178deg, #FFFFFF 0%, #EAEFF4 46%, #C7D0DA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.hero__subtitle {
  font-family: var(--font-sub);
  font-size: clamp(1.04rem, 1.55vw, 1.28rem); color: var(--text-dim);
  max-width: 44ch; margin-top: 26px; font-weight: 400; line-height: 1.6;
  letter-spacing: 0.002em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

.hero__statusbar {
  position: absolute; left: var(--pad); bottom: 38px; z-index: 3;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 7px;
  position: relative; vertical-align: middle; }
.status-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.4; animation: ping 3s var(--ease) infinite; }
.status-dot--green { background: var(--defense); color: var(--defense); animation: dotPulse 2.8s var(--ease-soft) infinite; }
.status-dot--blue  { background: var(--accent);  color: var(--accent);  animation: dotPulse 2.8s var(--ease-soft) infinite .7s; }
.status-dot--steel { background: var(--steel);  color: var(--steel);  animation: dotPulse 2.8s var(--ease-soft) infinite 1.4s; }
.status-dot--red   { background: var(--threat); color: var(--threat); animation: dotPulse 2.8s var(--ease-soft) infinite 2.1s; }
.status-sep { width: 1px; height: 12px; background: var(--border-strong); }
@keyframes ping { 0% { transform: scale(1); opacity: .5;} 70%,100% { transform: scale(2.4); opacity: 0;} }
@keyframes dotPulse { 0%,100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }

.hero__scroll {
  position: absolute; right: var(--pad); bottom: 40px; z-index: 3;
  width: 1px; height: 56px; background: var(--border-strong); overflow: hidden;
}
.hero__scroll span { position: absolute; top: -40%; left: 0; width: 100%; height: 40%;
  background: var(--accent); animation: scrolldrop 2.6s var(--ease-soft) infinite; }
@keyframes scrolldrop { 0% { top: -45%; } 100% { top: 110%; } }

/* ============================================================
   ABOUT
   ============================================================ */
/* Executive-briefing editorial column */
.about__editorial { max-width: 920px; }
.about__editorial .eyebrow { margin-bottom: 28px; }
.about__body { display: flex; flex-direction: column; gap: 18px; max-width: 880px; }
.about__body p { font-size: clamp(1.08rem, 1.15vw, 1.18rem); color: var(--text-dim); line-height: 1.72; letter-spacing: normal; margin: 0; }
.about__body p:first-child {
  color: var(--text-dim);
  font-size: clamp(1.12rem, 1.2vw, 1.24rem);
  line-height: 1.72; letter-spacing: normal;
}

/* ============================================================
   WHERE WE OPERATE — strategic footprint
   ============================================================ */
.footprint {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-top: 40px; margin-top: 8px;
}
/* connecting network line running through the markers */
.footprint__line {
  position: absolute; top: 46px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    rgba(94,134,183,0) 0%, var(--accent) 12%, rgba(112,122,132,0.45) 50%,
    var(--accent) 88%, rgba(94,134,183,0) 100%);
  opacity: 0.5;
}
.footprint__marker {
  position: relative; flex: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-inline: 10px;
}
.footprint__node {
  position: relative; width: 12px; height: 12px; margin-top: 0; z-index: 2;
  display: inline-block;
}
.footprint__node::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--accent); transition: background .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.footprint__node::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: border-color .5s var(--ease-soft), transform .5s var(--ease), opacity .5s;
}
.footprint__marker h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.42rem); letter-spacing: -0.01em;
  transition: color .4s var(--ease-soft);
}
.footprint__coord {
  font-family: var(--font-head); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; color: var(--text-dim); opacity: 0.7;
  transition: color .4s var(--ease-soft), opacity .4s;
}
.footprint__marker:hover .footprint__node::before {
  background: var(--titanium-light); box-shadow: 0 0 0 4px rgba(94,134,183,0.16);
}
.footprint__marker:hover .footprint__node::after {
  border-color: var(--accent); transform: scale(1.5); opacity: 0.7;
}
.footprint__marker:hover h3 { color: var(--text); }
.footprint__marker:hover .footprint__coord { color: var(--accent); opacity: 1; }

/* ============================================================
   BANNER
   ============================================================ */
.banner {
  padding-block: clamp(84px, 12vw, 160px);
  position: relative;
  overflow: hidden;
  /* seamless vertical blend: matches the section above (bg-2) and below (bg)
     — no hard color break — with a faint intelligence grid for depth */
  background:
    linear-gradient(rgba(94,134,183,0.03) 1px, transparent 1px) 0 0 / 66px 66px,
    linear-gradient(90deg, rgba(94,134,183,0.03) 1px, transparent 1px) 0 0 / 66px 66px,
    linear-gradient(180deg, var(--bg-2) 0%, var(--panel) 50%, var(--bg) 100%);
}
/* large, subtle geospatial / network visual on the right */
.banner__viz {
  position: absolute; top: 50%; right: -3%; transform: translateY(-50%);
  width: min(640px, 54%); color: var(--accent);
  opacity: 0.09; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.banner__viz svg { width: 100%; height: auto; display: block; }
.banner .container { position: relative; z-index: 1; }
.banner__text {
  font-size: clamp(1.2rem, 2.6vw, 2.0rem);   /* ~28% smaller — refined statement */
  max-width: 22ch; letter-spacing: -0.015em; line-height: 1.25;
  background: linear-gradient(180deg, var(--text), var(--text-dim));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cap-card {
  position: relative; background: rgba(10,22,40,0.50);
   blackdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border: 1px solid rgba(255, 255, 255, 0.075);
  padding: clamp(26px, 3vw, 38px);
  transition: transform .55s var(--ease), border-color .55s var(--ease-soft), background .55s var(--ease-soft);
  overflow: hidden;
   box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.cap-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease);
}
.cap-card:hover { transform: translateY(-4px);
                 background: rgba(10, 22, 40, 0.62);
                 border-color: rgba(0, 212, 255, 0.20); }
.cap-card:hover::before { transform: scaleY(1); }
.cap-card__icon {
  width: 58px; height: 58px; margin-bottom: 22px;
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; background: #0A1626;
  box-shadow: inset 0 0 22px rgba(0,0,0,0.35);
  transition: border-color .5s var(--ease-soft), transform .5s var(--ease);
}
.cap-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-card:hover .cap-card__icon { border-color: var(--border-strong); transform: translateY(-2px); }
.cap-card h3 { font-size: clamp(1.08rem, 1.25vw, 1.22rem); line-height: 1.3; font-weight: 700; letter-spacing: normal; margin-bottom: 14px; color: #ffffff; }
.cap-card p { color: var(--text-dim); font-size: clamp(0.98rem, 1.05vw, 1.08rem);line-height: 1.68; font-weight: 400; letter-spacing: normal; }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* each card = a live sector intelligence panel (sector background image) */
.industry-card {
  background-color: #0A1A2A;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: clamp(28px, 3vw, 40px);
  display: flex; align-items: flex-end; min-height: 230px;
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(199, 208, 216, 0.05),   /* top metallic edge */
    inset 0 0 50px rgba(0, 0, 0, 0.30),          /* soft inner shadow */
    0 10px 26px -18px rgba(0, 0, 0, 0.65);       /* slight elevation */
  transition: transform .5s var(--ease), border-color .5s var(--ease-soft),
              box-shadow .5s var(--ease-soft), filter .5s var(--ease-soft);
  position: relative; overflow: hidden;
  /* defer offscreen rendering/decoding of the heavy sector image (perf) */
  content-visibility: auto;
  contain-intrinsic-size: auto 230px;
}
/* readability scrim — keeps white text crisp over the imagery (bottom-left) */
.industry-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to top, rgba(5,12,22,0.88) 0%, rgba(5,12,22,0.3) 46%, rgba(5,12,22,0) 78%),
    linear-gradient(102deg, rgba(5,12,22,0.7) 0%, rgba(5,12,22,0.12) 48%, rgba(5,12,22,0) 70%);
}
.industry-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent);
  transition: width .5s var(--ease); z-index: 3;
}
.industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  filter: brightness(1.1) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(199, 208, 216, 0.07),
    inset 0 0 50px rgba(0, 0, 0, 0.26),
    0 18px 34px -20px rgba(0, 0, 0, 0.72);
}
.industry-card:hover::after { width: 100%; }
.industry-card__wm { display: none; } /* superseded by full sector background image */

/* sector backgrounds — mapped by card order */
.industry-card:nth-child(1) { background-image: url(../assets/sectors/government.jpg); }
.industry-card:nth-child(2) { background-image: url(../assets/sectors/defence.jpg); }
.industry-card:nth-child(3) { background-image: url(../assets/sectors/critical-infrastructure.jpg); }
.industry-card:nth-child(4) { background-image: url(../assets/sectors/energy.jpg); }
.industry-card:nth-child(5) { background-image: url(../assets/sectors/aviation.jpg); }
.industry-card:nth-child(6) { background-image: url(../assets/sectors/transportation.jpg); }
.industry-card:nth-child(7) { background-image: url(../assets/sectors/financial.jpg); }
.industry-card:nth-child(8) { background-image: url(../assets/sectors/telecommunications.jpg); }
.industry-card:nth-child(9) { background-image: url(../assets/sectors/healthcare.jpg); }
.industry-card h3 {
  position: relative; z-index: 1;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.3;
  max-width: 70%;
}
/* Industries headline acts as supporting text — cards are the focus */
#industries .section__title {
  font-size: clamp(1.0rem, 1.85vw, 1.5rem);
  opacity: 0.9;
}

/* ---- living operational motion layer (injected per card) ---- */
.industry-card__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.industry-card__fx::before {     /* slow radar sweep over the icon corner */
  content: ""; position: absolute; top: -45%; right: -30%; width: 130%; height: 190%;
  background: conic-gradient(from 0deg, rgba(94,134,183,0.11), transparent 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent);
  opacity: 0.55; transform-origin: 50% 50%;
}
.industry-card__fx::after {      /* faint data-route scan traversing the panel */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%;
  background: linear-gradient(90deg, transparent, rgba(94,134,183,0.06), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .industry-card__fx::before    { animation: radarSweep 16s linear infinite; }
  .industry-card__fx::after     { animation: routeScan 7s var(--ease-soft) infinite; }
  /* desynchronise across the grid */
  .industry-card:nth-child(3n+2) .industry-card__fx::before { animation-delay: -5.5s; }
  .industry-card:nth-child(3n)   .industry-card__fx::before { animation-delay: -10s; }
  .industry-card:nth-child(2n)   .industry-card__fx::after  { animation-delay: -3.4s; }
  .industry-card:nth-child(3n)   .industry-card__fx::after  { animation-delay: -5.2s; }
}
@keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes routeScan  { 0% { transform: translateX(-40%); opacity: 0; } 18% { opacity: 0.6; } 82% { opacity: 0.6; } 100% { transform: translateX(360%); opacity: 0; } }

/* ============================================================
   WHY STRATX
   ============================================================ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-card {
  position: relative; overflow: hidden;
  background: rgba(10, 22, 40, 0.50); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.075);
  padding: clamp(24px, 2.8vw, 34px);
  transition: transform .55s var(--ease), border-color .55s var(--ease-soft),
              background .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
/* accent line draws across the top on hover */
.why-card::after {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); transition: width .5s var(--ease);
}
.why-card:hover { transform: translateY(-4px); background: rgba(10, 22, 40, 0.62); border-color: var(--border-strong); }
.why-card:hover::after { width: 100%; }
.why-card--wide { grid-column: span 3; }
.why-card__rule { display: block; width: 40px; height: 2px; background: var(--accent); margin-bottom: 22px; }
.why-card h3 { font-size: clamp(1.08rem, 1.25vw, 1.22rem); line-height: 1.3; font-weight: 700; letter-spacing: normal; margin-bottom: 14px; color: #ffffff; }
.why-card p { color: var(--text-dim); font-size: clamp(0.98rem, 1.05vw, 1.08rem); line-height: 1.68; letter-spacing: normal; font-weight: 400; }

/* ============================================================
   CONTACT
   ============================================================ */
/* cyber data-wave background — cinematic still, gently brought to life */
#contact { position: relative; overflow: hidden; isolation: isolate; }
#contact.section--alt::before, #contact.section--alt::after { z-index: 4; }
.contact__wave {
  position: absolute;
   inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 25%, rgba(0, 212, 255, 0.10), transparent 32%),
     radial-gradient(circle at 78% 70%, rgba(0, 229, 168, 0.045), transparent 30%),
     linear-gradient(135deg, #061120 0%, #04101f 45%, #020711 100%);
   opacity: 1;
   filter: none;
   animation: none;}
@keyframes contactDrift {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  50%  { transform: scale(1.14) translate3d(-1.6%, -1.1%, 0); }
  100% { transform: scale(1.08) translate3d(0, 0, 0); }
}
/* ambient FX — drifting particles + data-pulse sweeps, above image, under scrim */
.contact__fx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; display: block;
}
.contact__wave-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    /* top + bottom blend into the section so there is no hard image edge */
    linear-gradient(180deg,
      var(--bg-2) 0%, rgba(11,29,46,0.82) 10%, rgba(7,20,33,0.35) 34%,
      rgba(7,20,33,0.35) 64%, rgba(7,20,33,0.9) 90%, var(--bg) 100%),
    /* left darkening so the intro copy keeps strong contrast */
    linear-gradient(90deg,
      rgba(7,20,33,0.86) 0%, rgba(7,20,33,0.45) 40%, rgba(7,20,33,0.05) 100%),
    /* faint navy wash to unify the whole image with the brand */
    linear-gradient(0deg, rgba(7,20,33,0.30), rgba(7,20,33,0.30));
}
#contact .container { position: relative; z-index: 3; }

.contact__layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact__lead { color: var(--text-dim); font-size: 1.1rem; margin-top: 22px; max-width: 42ch; }
.contact__meta { list-style: none; margin-top: 38px; display: flex; flex-direction: column; gap: 22px; }
.contact__meta li { font-size: 0.95rem; color: var(--text); border-top: 1px solid var(--border); padding-top: 16px; }
.contact__meta span { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px; }

.contact__form {
   width: 100%;
   max-width: 560px;
  background: rgba(10, 22, 40, 0.46);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.075);
  padding: clamp(24px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field textarea {
   width: 100%;
  background: rgba(2, 7, 17, 0.58); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; padding: 13px 15px;
  transition: border-color .35s var(--ease-soft), background .35s var(--ease-soft);
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
   border-color: rgba(0, 212, 255, 0.35);
   background: rgba(2, 7, 17, 0.72);
   box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}
.field input::placeholder,
.field textarea::placeholder {
   color: rgba(203, 213, 225, 0.45);
}
.form__note { font-size: 0.9rem; min-height: 1.2em; color: var(--defense); }
.form__note.is-error { color: var(--threat); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg-3); border-top: 1px solid var(--border); padding-top: clamp(50px, 6vw, 80px); }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-bottom: 44px; }
.footer__brand p { color: var(--text-dim); font-size: 0.95rem; max-width: 44ch; margin-top: 18px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 14px 28px; align-content: start; justify-content: flex-end; }
.footer__nav a { font-size: 0.9rem; color: var(--text-dim); transition: color .3s; }
.footer__nav a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: 26px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.02em;
}
.footer__class { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .status-dot::after, .status-dot, .hero__scroll span { animation: none; }
  .contact__wave { animation: none; transform: scale(1.04); }
  .hero__video video { animation: none; transform: scale(1.06); }
  .scroll-progress { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .footprint__marker h3 { font-size: 1.02rem; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-card--wide { grid-column: span 2; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .contact__layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
    background: rgba(4, 30, 66, 0.96); backdrop-filter: blur(18px);
    flex-direction: column; justify-content: center; gap: 8px;
    padding: 80px 40px; transform: translateX(100%); transition: transform .5s var(--ease);
    border-left: 1px solid var(--border);
  }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav__links a { font-size: 1.15rem; padding-block: 14px; width: 100%;
    border-bottom: 1px solid var(--border); }
  .nav__links a::after { display: none; }
  .nav__links-contact { display: block; color: var(--accent); }
  .cap-grid { grid-template-columns: 1fr; }
  .hero__statusbar { font-size: 0.62rem; gap: 10px; }
}

@media (max-width: 720px) {
  /* footprint → vertical strategic list with left connector */
  .footprint { flex-direction: column; align-items: flex-start; gap: 26px; padding-top: 8px; padding-left: 6px; }
  .footprint__line { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(94,134,183,0) 0%, var(--accent) 12%, rgba(112,122,132,0.45) 50%, var(--accent) 88%, rgba(94,134,183,0) 100%); }
  .footprint__marker { flex: none; width: 100%; flex-direction: row; align-items: baseline; gap: 16px; text-align: left; padding-inline: 0; }
  .footprint__node { margin-top: 6px; }
  .footprint__coord { margin-left: auto; }
}

@media (max-width: 620px) {
  .industry-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card--wide { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__nav { justify-content: flex-start; }
  .hero__statusbar { display: none; }
}