:root {
  --primary: #940000;
  --primary-dark: #5b0000;
  --gold: #c9a227;
  --field-drab: #84754e;
  --black: #0f1115;
  --slate: #25313d;
  --soft-white: #f7f4ed;
  --muted: #e7e0d0;
  --white: #ffffff;
  --text: #1d252d;
  --text-muted: #5d6670;
  --border: rgba(15, 17, 21, 0.14);
  --shadow: 0 18px 45px rgba(15, 17, 21, 0.14);
  --radius: 18px;
  --max-width: 1120px;
  --transition: 180ms ease-in-out;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--soft-white);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

img,
iframe {
  max-width: 100%;
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-dark);
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  z-index: 999;
  background: var(--black);
  color: var(--white);
  padding: 0.8rem 1rem;
  border-radius: 999px;
}

.skip-link:focus {
  left: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(247, 244, 237, 0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--black);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(148, 0, 0, 0.25);
}

.brand-text {
  font-size: 1.05rem;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0;
  margin: 0;
}

.nav-menu a {
  display: inline-flex;
  color: var(--slate);
  text-decoration: none;
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  background: var(--primary);
  color: var(--white);
}

.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--black);
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  font-weight: 700;
}

.hero {
  background:
    radial-gradient(circle at top left, rgba(201, 162, 39, 0.22), transparent 28rem),
    linear-gradient(135deg, var(--black), var(--slate) 42%, var(--primary-dark));
  color: var(--white);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-bottom: 6px solid var(--gold);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.65fr);
  gap: 2rem;
  align-items: center;
}

.eyebrow {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0 0 0.65rem;
}

.hero h1,
.page-hero h1 {
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.hero-summary,
.page-hero p,
.section-heading p {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 760px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1.05rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.button-primary:hover {
  color: var(--black);
}

.button-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.hero-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}

.rank-bar {
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold),
    var(--gold) 42px,
    rgba(255, 255, 255, 0.22) 42px,
    rgba(255, 255, 255, 0.22) 52px
  );
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.focus-list {
  padding-left: 1.1rem;
  margin: 0;
}

.focus-list li + li {
  margin-top: 0.6rem;
}

.section,
.page-hero {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.page-hero {
  background:
    linear-gradient(135deg, rgba(148, 0, 0, 0.94), rgba(15, 17, 21, 0.96)),
    linear-gradient(90deg, var(--primary), var(--black));
  color: var(--white);
  border-bottom: 6px solid var(--gold);
}

.page-hero p {
  margin-top: 1rem;
}

.section-heading {
  margin-bottom: 1.6rem;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.section-heading p {
  color: var(--text-muted);
}

.section-dark {
  background: var(--black);
  color: var(--white);
}

.section-dark p {
  color: rgba(255, 255, 255, 0.78);
}

.section-muted {
  background: var(--muted);
}

.card-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.card,
.product-card,
.contact-card,
.callout {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(15, 17, 21, 0.08);
  padding: 1.25rem;
}

.card h3,
.product-card h3,
.contact-card h2,
.callout h3 {
  margin-top: 0;
  line-height: 1.15;
}

.card {
  border-top: 6px solid var(--primary);
}

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

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.product-card .category {
  display: inline-flex;
  width: fit-content;
  background: var(--black);
  color: var(--gold);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tool-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.tool-list li {
  background: var(--soft-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.embed-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: var(--soft-white);
}

.placeholder-image {
  min-height: 180px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(148, 0, 0, 0.88), rgba(15, 17, 21, 0.9)),
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.08) 8px, rgba(255, 255, 255, 0.08) 16px);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-weight: 900;
  text-align: center;
  padding: 1rem;
}

.product-actions,
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.text-link,
.product-actions a,
.contact-links a {
  font-weight: 900;
  text-decoration: none;
}

.product-actions a,
.contact-links a {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.55rem 0.75rem;
  background: var(--primary);
  color: var(--white);
}

.map {
  min-height: 440px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.leaflet-popup-content-wrapper {
  border-radius: 14px;
}

.leaflet-popup-content strong {
  color: var(--primary);
}

.split,
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 1rem;
  align-items: start;
}

.callout {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.callout .text-link {
  color: var(--gold);
}

.iframe-guidance {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.check-list {
  padding-left: 1.15rem;
}

.check-list li + li {
  margin-top: 0.5rem;
}

.contact-card-muted {
  background: var(--muted);
}

.form-placeholder {
  border: 2px dashed rgba(15, 17, 21, 0.25);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.45);
}

.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.76);
  padding: 1.4rem 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-inner p {
  margin: 0;
}

.footer-note {
  color: var(--gold);
  font-weight: 800;
}

@media (max-width: 900px) {
  .hero-grid,
  .split,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: absolute;
    right: 1rem;
    top: 72px;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.5rem;
    min-width: 230px;
    box-shadow: var(--shadow);
    display: none;
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-menu a {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .brand-text {
    display: none;
  }

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

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .map {
    min-height: 360px;
  }
}

.featured-embed {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.storymap-frame-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--black);
  box-shadow: 0 12px 32px rgba(15, 17, 21, 0.16);
}

.storymap-frame {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.storymap-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 760px) {
  .storymap-frame {
    height: 560px;
  }

  .storymap-actions {
    justify-content: stretch;
  }

  .storymap-actions .button {
    width: 100%;
  }
}

/* Terrain + Cyber Visual System
   Replaces the earlier low-contrast GIS visual section.
   Goal: visible topo/terrain styling + visible cyber/PCB traces while preserving readability.
*/

:root {
  --cyber-blue: #2f638f;
  --cyber-blue-bright: #4a86bd;
  --cyber-teal: #28a6b0;
  --terrain-brown: #9f7650;
  --terrain-green: #6f8d6c;
  --terrain-cyan: #4f9693;
}

.hero,
.page-hero,
.section-dark,
.section-muted {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero > *,
.page-hero > *,
.section-dark > *,
.section-muted > * {
  position: relative;
  z-index: 3;
}

/* HOMEPAGE HERO: visible topographic terrain on the left + cyber traces on the right */
.hero {
  background:
    linear-gradient(100deg, rgba(5, 13, 22, 0.97) 0%, rgba(10, 25, 38, 0.95) 45%, rgba(11, 23, 36, 0.88) 66%, rgba(91, 0, 0, 0.78) 100%),
    radial-gradient(circle at 18% 70%, rgba(159, 118, 80, 0.38), transparent 24rem),
    radial-gradient(circle at 72% 35%, rgba(47, 99, 143, 0.45), transparent 25rem),
    var(--black);
  color: var(--white);
  border-bottom: 6px solid var(--gold);
}

/* Terrain/topographic line layer */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221500%22%20height%3D%22820%22%20viewBox%3D%220%200%201500%20820%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22terrainGlow%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231f2f2a%22%20stop-opacity%3D%22.60%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%235b4028%22%20stop-opacity%3D%22.40%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b1c2d%22%20stop-opacity%3D%22.15%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20width%3D%221500%22%20height%3D%22820%22%20fill%3D%22none%22/%3E%0A%20%20%3Cpath%20d%3D%22M-120%20700%20C130%20570%20300%20740%20535%20620%20S835%20505%201120%20615%20S1320%20560%201630%20640%22%20fill%3D%22url%28%23terrainGlow%29%22%20opacity%3D%22.85%22/%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20115%20C70%2055%20210%20190%20405%20130%20S725%2045%20955%20150%20S1195%20105%201610%20165%22%20stroke%3D%22%23d8be77%22%20stroke-width%3D%222.2%22%20opacity%3D%22.78%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20168%20C90%20105%20250%20245%20455%20182%20S760%20100%201005%20205%20S1245%20160%201610%20235%22%20stroke%3D%22%23f1dfaf%22%20stroke-width%3D%221.4%22%20opacity%3D%22.46%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20232%20C115%20165%20285%20320%20520%20248%20S815%20185%201065%20292%20S1300%20270%201610%20330%22%20stroke%3D%22%23b97849%22%20stroke-width%3D%222.1%22%20opacity%3D%22.70%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20304%20C135%20245%20340%20395%20585%20328%20S875%20260%201130%20380%20S1335%20370%201610%20430%22%20stroke%3D%22%23d8be77%22%20stroke-width%3D%221.7%22%20opacity%3D%22.68%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20385%20C170%20315%20410%20485%20665%20420%20S945%20340%201205%20475%20S1390%20475%201610%20530%22%20stroke%3D%22%23f1dfaf%22%20stroke-width%3D%221.25%22%20opacity%3D%22.38%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20475%20C190%20395%20480%20575%20760%20515%20S1035%20440%201300%20575%20S1450%20590%201610%20635%22%20stroke%3D%22%238fb18b%22%20stroke-width%3D%222.0%22%20opacity%3D%22.50%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-130%20590%20C235%20500%20575%20705%20870%20650%20S1140%20570%201390%20700%20S1510%20730%201610%20755%22%20stroke%3D%22%236fc6c1%22%20stroke-width%3D%221.8%22%20opacity%3D%22.38%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M120%2055%20C270%20105%20310%205%20455%2060%20S660%20135%20790%2070%20S1010%2020%201165%2085%22%20stroke%3D%22%23f1dfaf%22%20stroke-width%3D%221.1%22%20opacity%3D%22.25%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M60%20710%20C215%20660%20305%20780%20465%20715%20S735%20645%20925%20735%20S1095%20700%201265%20760%22%20stroke%3D%22%23b97849%22%20stroke-width%3D%221.6%22%20opacity%3D%22.44%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c9a227%22%20stroke-width%3D%22.8%22%20opacity%3D%22.13%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20180%20H1500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20360%20H1500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20540%20H1500%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M250%200%20V820%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M500%200%20V820%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M750%200%20V820%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1000%200%20V820%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1250%200%20V820%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size: cover;
  background-position: left center;
  opacity: 1;
  mix-blend-mode: screen;
}

/* Cyber/PCB layer */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8%;
  bottom: 0;
  width: min(920px, 70vw);
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(5, 13, 22, 0), rgba(5, 13, 22, 0.12) 22%, rgba(5, 13, 22, 0.02)),
    url("data:image/svg+xml,%3Csvg%20width%3D%221500%22%20height%3D%22820%22%20viewBox%3D%220%200%201500%20820%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Crect%20width%3D%221500%22%20height%3D%22820%22%20fill%3D%22none%22/%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M820%2040%20H1165%20L1235%20110%20H1540%22%20stroke%3D%22%232d5f8e%22%20stroke-width%3D%2216%22%20opacity%3D%22.76%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M720%20150%20H960%20L1040%20230%20H1260%20L1345%20150%20H1540%22%20stroke%3D%22%232d5f8e%22%20stroke-width%3D%2213%22%20opacity%3D%22.70%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M860%20285%20H1090%20L1180%20375%20H1540%22%20stroke%3D%22%233f74a8%22%20stroke-width%3D%2214%22%20opacity%3D%22.78%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M700%20430%20H930%20L1030%20330%20H1180%22%20stroke%3D%22%232d5f8e%22%20stroke-width%3D%2213%22%20opacity%3D%22.66%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M780%20575%20H1030%20L1130%20675%20H1540%22%20stroke%3D%22%233f74a8%22%20stroke-width%3D%2215%22%20opacity%3D%22.70%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1040%20-60%20V135%20L1130%20225%20V470%20L1235%20575%20V900%22%20stroke%3D%22%232d5f8e%22%20stroke-width%3D%2213%22%20opacity%3D%22.68%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1320%20-60%20V180%20L1235%20265%20V510%20L1320%20595%20V900%22%20stroke%3D%22%23234f79%22%20stroke-width%3D%2212%22%20opacity%3D%22.72%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M650%20690%20H870%20L955%20775%20H1245%22%20stroke%3D%22%23234f79%22%20stroke-width%3D%2213%22%20opacity%3D%22.62%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M610%20245%20H760%20L835%20170%20H935%22%20stroke%3D%22%234a86bd%22%20stroke-width%3D%2210%22%20opacity%3D%22.55%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M560%20350%20H720%20L790%20420%20H955%22%20stroke%3D%22%234a86bd%22%20stroke-width%3D%2210%22%20opacity%3D%22.50%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%22%23c9a227%22%20stroke%3D%22%23f1dfaf%22%20stroke-width%3D%224%22%20opacity%3D%22.92%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22960%22%20cy%3D%22150%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221040%22%20cy%3D%22230%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221180%22%20cy%3D%22375%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221030%22%20cy%3D%22330%22%20r%3D%2211%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221130%22%20cy%3D%22675%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221130%22%20cy%3D%22225%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221235%22%20cy%3D%22575%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22955%22%20cy%3D%22775%22%20r%3D%2211%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22835%22%20cy%3D%22170%22%20r%3D%2210%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22790%22%20cy%3D%22420%22%20r%3D%2210%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%2328a6b0%22%20stroke-width%3D%222%22%20opacity%3D%22.28%22%3E%0A%20%20%20%20%3Crect%20x%3D%221120%22%20y%3D%2270%22%20width%3D%22220%22%20height%3D%22150%22%20rx%3D%228%22/%3E%0A%20%20%20%20%3Crect%20x%3D%22900%22%20y%3D%22500%22%20width%3D%22260%22%20height%3D%22165%22%20rx%3D%228%22/%3E%0A%20%20%20%20%3Crect%20x%3D%221230%22%20y%3D%22255%22%20width%3D%22215%22%20height%3D%22135%22%20rx%3D%228%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size: cover;
  background-position: right center;
  opacity: 0.95;
}

/* HERO READABILITY */
.hero-card {
  background: rgba(5, 13, 22, 0.72);
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
}

.hero-copy {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.40);
}

/* PAGE HEADERS: topo map sheet feel, stronger than before */
.page-hero {
  background:
    linear-gradient(135deg, rgba(91, 0, 0, 0.92), rgba(8, 19, 31, 0.95) 54%, rgba(15, 17, 21, 0.96)),
    var(--primary-dark);
  color: var(--white);
  border-bottom: 6px solid var(--gold);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.19) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg%20width%3D%221300%22%20height%3D%22720%22%20viewBox%3D%220%200%201300%20720%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Crect%20width%3D%221300%22%20height%3D%22720%22%20fill%3D%22none%22/%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%2085%20C100%2030%20230%20150%20420%2095%20S700%2040%20900%20130%20S1090%2090%201400%20160%22%20stroke%3D%22%237e6f48%22%20stroke-width%3D%222.1%22%20opacity%3D%22.42%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20150%20C120%2095%20275%20235%20470%20175%20S735%20115%20950%20215%20S1120%20190%201400%20255%22%20stroke%3D%22%239f7650%22%20stroke-width%3D%221.6%22%20opacity%3D%22.45%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20230%20C145%20180%20325%20330%20535%20270%20S800%20215%201015%20315%20S1180%20300%201400%20365%22%20stroke%3D%22%237e6f48%22%20stroke-width%3D%221.8%22%20opacity%3D%22.40%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20330%20C175%20275%20395%20440%20620%20380%20S870%20335%201085%20430%20S1235%20430%201400%20485%22%20stroke%3D%22%23b99657%22%20stroke-width%3D%221.5%22%20opacity%3D%22.38%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20450%20C215%20385%20490%20565%20750%20505%20S965%20460%201180%20560%20S1260%20575%201400%20615%22%20stroke%3D%22%236f8d6c%22%20stroke-width%3D%221.8%22%20opacity%3D%22.35%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20585%20C270%20505%20600%20700%20890%20635%20S1080%20600%201280%20690%22%20stroke%3D%22%234f9693%22%20stroke-width%3D%221.5%22%20opacity%3D%22.30%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20stroke%3D%22%23940000%22%20stroke-width%3D%221%22%20opacity%3D%22.10%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20160%20H1300%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20320%20H1300%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20480%20H1300%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M260%200%20V720%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M520%200%20V720%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M780%200%20V720%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1040%200%20V720%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size: 92px 92px, 92px 92px, cover;
  background-position: center;
  opacity: 0.72;
  mix-blend-mode: screen;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 22%, rgba(201, 162, 39, 0.22), transparent 16rem),
    radial-gradient(circle at 82% 55%, rgba(47, 99, 143, 0.22), transparent 18rem);
}

/* MUTED SECTIONS: visible topo-paper texture behind cards */
.section-muted {
  background:
    linear-gradient(rgba(247, 244, 237, 0.78), rgba(231, 224, 208, 0.84)),
    var(--muted);
}

.section-muted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 0, 0, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 0, 0, 0.10) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg%20width%3D%221300%22%20height%3D%22720%22%20viewBox%3D%220%200%201300%20720%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Crect%20width%3D%221300%22%20height%3D%22720%22%20fill%3D%22none%22/%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%2085%20C100%2030%20230%20150%20420%2095%20S700%2040%20900%20130%20S1090%2090%201400%20160%22%20stroke%3D%22%237e6f48%22%20stroke-width%3D%222.1%22%20opacity%3D%22.42%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20150%20C120%2095%20275%20235%20470%20175%20S735%20115%20950%20215%20S1120%20190%201400%20255%22%20stroke%3D%22%239f7650%22%20stroke-width%3D%221.6%22%20opacity%3D%22.45%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20230%20C145%20180%20325%20330%20535%20270%20S800%20215%201015%20315%20S1180%20300%201400%20365%22%20stroke%3D%22%237e6f48%22%20stroke-width%3D%221.8%22%20opacity%3D%22.40%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20330%20C175%20275%20395%20440%20620%20380%20S870%20335%201085%20430%20S1235%20430%201400%20485%22%20stroke%3D%22%23b99657%22%20stroke-width%3D%221.5%22%20opacity%3D%22.38%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20450%20C215%20385%20490%20565%20750%20505%20S965%20460%201180%20560%20S1260%20575%201400%20615%22%20stroke%3D%22%236f8d6c%22%20stroke-width%3D%221.8%22%20opacity%3D%22.35%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-90%20585%20C270%20505%20600%20700%20890%20635%20S1080%20600%201280%20690%22%20stroke%3D%22%234f9693%22%20stroke-width%3D%221.5%22%20opacity%3D%22.30%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20stroke%3D%22%23940000%22%20stroke-width%3D%221%22%20opacity%3D%22.10%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20160%20H1300%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20320%20H1300%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%20480%20H1300%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M260%200%20V720%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M520%200%20V720%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M780%200%20V720%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1040%200%20V720%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size: 140px 140px, 140px 140px, cover;
  background-position: center;
  opacity: 0.92;
}

/* DARK SECTIONS: visible cyber/PCB network */
.section-dark {
  background:
    linear-gradient(135deg, rgba(3, 15, 28, 0.98), rgba(6, 25, 43, 0.98) 55%, rgba(15, 17, 21, 0.98)),
    var(--black);
  color: var(--white);
}

.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%221500%22%20height%3D%22650%22%20viewBox%3D%220%200%201500%20650%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Crect%20width%3D%221500%22%20height%3D%22650%22%20fill%3D%22none%22/%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%2090%20H260%20L340%20170%20H555%20L650%2075%20H900%20L995%20170%20H1230%20L1355%2055%20H1580%22%20stroke%3D%22%232f638f%22%20stroke-width%3D%2218%22%20opacity%3D%22.70%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%20235%20H180%20L280%20335%20H520%20L630%20225%20H825%20L930%20330%20H1135%20L1260%20220%20H1580%22%20stroke%3D%22%232b5c88%22%20stroke-width%3D%2216%22%20opacity%3D%22.72%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-80%20400%20H315%20L400%20490%20H650%20L760%20380%20H980%20L1070%20470%20H1580%22%20stroke%3D%22%23356f9f%22%20stroke-width%3D%2218%22%20opacity%3D%22.68%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M240%20-80%20V115%20L350%20225%20V435%20L455%20540%20V740%22%20stroke%3D%22%23244e75%22%20stroke-width%3D%2215%22%20opacity%3D%22.65%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M760%20-80%20V130%20L875%20245%20V500%20L1000%20625%20V740%22%20stroke%3D%22%232b5c88%22%20stroke-width%3D%2215%22%20opacity%3D%22.70%22/%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1180%20-80%20V100%20L1090%20190%20V360%20L1205%20475%20V740%22%20stroke%3D%22%23244e75%22%20stroke-width%3D%2214%22%20opacity%3D%22.64%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%22%23c9a227%22%20stroke%3D%22%23e7d391%22%20stroke-width%3D%225%22%20opacity%3D%22.92%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22260%22%20cy%3D%2290%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22555%22%20cy%3D%22170%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22900%22%20cy%3D%2275%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221230%22%20cy%3D%22170%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22280%22%20cy%3D%22335%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22630%22%20cy%3D%22225%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22330%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22400%22%20cy%3D%22490%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22760%22%20cy%3D%22380%22%20r%3D%2212%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%221070%22%20cy%3D%22470%22%20r%3D%2212%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%2328a6b0%22%20stroke-width%3D%222.5%22%20opacity%3D%22.30%22%3E%0A%20%20%20%20%3Crect%20x%3D%22100%22%20y%3D%2240%22%20width%3D%22220%22%20height%3D%22130%22%20rx%3D%228%22/%3E%0A%20%20%20%20%3Crect%20x%3D%221040%22%20y%3D%2295%22%20width%3D%22240%22%20height%3D%22150%22%20rx%3D%228%22/%3E%0A%20%20%20%20%3Crect%20x%3D%22480%22%20y%3D%22370%22%20width%3D%22270%22%20height%3D%22150%22%20rx%3D%228%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0.98;
}

.section-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 35%, rgba(201, 162, 39, 0.14), transparent 16rem),
    radial-gradient(circle at 74% 54%, rgba(40, 166, 176, 0.12), transparent 19rem),
    linear-gradient(90deg, rgba(3, 15, 28, 0.25), rgba(3, 15, 28, 0.05), rgba(3, 15, 28, 0.35));
}

.section-dark p {
  color: rgba(255, 255, 255, 0.84);
}

/* CARD READABILITY OVER STRONGER VISUAL BACKGROUNDS */
.card,
.credential-card,
.product-card,
.contact-card,
.iframe-guidance,
.featured-embed {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(5px);
}

.callout {
  background: rgba(5, 13, 22, 0.74);
  border-color: rgba(201, 162, 39, 0.34);
  backdrop-filter: blur(5px);
}

.contact-card-muted {
  background: rgba(231, 224, 208, 0.92);
}

.form-placeholder {
  background: rgba(255, 255, 255, 0.58);
}

/* Small screens: reduce cyber layer so it does not compete with text */
@media (max-width: 760px) {
  .hero::after {
    opacity: 0.42;
    width: 100%;
    right: -35%;
  }

  .section-dark::before {
    opacity: 0.58;
  }

  .page-hero::before,
  .section-muted::before {
    opacity: 0.58;
  }
}

/* Contact page spacing fix */
.contact-card .contact-links {
  margin-bottom: 1.5rem;
}

.contact-card .contact-links + .form-placeholder {
  margin-top: 1.5rem;
}

/* Credentials section card styling */

.credentials-section .section-heading {
  margin-bottom: 2rem;
}

.credentials-section .section-heading p {
  max-width: 780px;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.credential-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-top: 6px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(15, 17, 21, 0.08);
  padding: 1.25rem;
  min-height: 100%;
  backdrop-filter: blur(5px);
}

.credential-card h3 {
  margin-top: 0;
  margin-bottom: 0.9rem;
  line-height: 1.15;
  color: var(--text);
}

.credential-list {
  margin: 0;
  padding-left: 1.15rem;
}

.credential-list li {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.55;
}

.credential-list li + li {
  margin-top: 0.7rem;
}

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