/* ==========================================================================
   The CySec Bridge — Homepage
   Design system per client brief (Leko Baloyi, CySec Website Content):
   Colours  : #071A3D navy · #146BFF blue · #FDB515 amber · #F5F7FA surface
              #94A3B8 slate · #FFFFFF white
   Type     : Inter — H1 56/700/-0.5px · H2 40/700/-0.3px · H3 28/600
              H4 22/600 · Body 16/400 · Small 14/400
   Spacing  : 8px base · Radius 4/8/16/24 · Shadow sm→xl
   ========================================================================== */

:root {
  /* palette */
  --navy: #071A3D;
  --navy-900: #050F26;
  --navy-800: #0A2350;
  --navy-700: #10305F;
  --blue: #146BFF;
  --blue-600: #0F5AD9;
  --blue-100: #E3EEFF;
  --blue-50: #EEF5FF;
  --amber: #FDB515;
  --amber-600: #E8A104;
  --surface: #F5F7FA;
  --slate: #94A3B8;
  --white: #FFFFFF;

  /* semantic */
  --ink: #071A3D;
  --body-on-light: #47536B;
  --muted-on-light: #5E6B81;
  --body-on-dark: #B6C2D9;
  --muted-on-dark: #8FA0BC;
  --line-light: #E4E9F2;
  --line-dark: rgba(255, 255, 255, 0.10);

  /* spacing (8px base) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px;

  /* radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(7, 26, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(7, 26, 61, 0.08);
  --shadow-lg: 0 12px 28px rgba(7, 26, 61, 0.12);
  --shadow-xl: 0 20px 48px rgba(7, 26, 61, 0.18);
  --shadow-amber: 0 8px 24px rgba(253, 181, 21, 0.28);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;

  --nav-h: 76px;
  --container: 1200px;
}

/* ---------- fonts (self-hosted Inter, latin subset) ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-latin-800-normal.woff2") format("woff2");
}

/* ---------- reset / base ---------- */

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

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

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* long words wrap instead of pushing the layout wide */
h1, h2, h3, h4, p, li, td, th, strong, span, a { overflow-wrap: break-word; }

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

h1, h2, h3, h4, p { margin: 0; }

section { scroll-margin-top: calc(var(--nav-h) + 12px); }

.container {
  width: min(var(--container), 100% - var(--s-6));
  margin-inline: auto;
}

/* typography scale (per design system) */
h1 { font-size: clamp(2rem, 4.8vw, 3.5rem);      font-weight: 700; letter-spacing: -0.5px; line-height: 1.14; }
h2 { font-size: clamp(1.625rem, 3.1vw, 2.5rem);  font-weight: 700; letter-spacing: -0.3px; line-height: 1.22; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem);    font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
.small { font-size: 0.875rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s-2);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--amber);
  color: var(--navy);
}
.btn-primary:hover {
  background: var(--amber-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-amber);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost-dark {
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--white);
  background: transparent;
}
.btn-ghost-dark:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.btn-outline-light {
  border-color: var(--blue);
  color: var(--blue);
  background: transparent;
}
.btn-outline-light:hover {
  background: var(--blue-50);
  border-color: var(--blue-600);
  color: var(--blue-600);
  transform: translateY(-2px);
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--blue);
}
.text-link .arrow { transition: transform var(--t-fast) var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }
.text-link:hover { color: var(--blue-600); }

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 26, 61, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(6, 20, 47, 0.97);
  box-shadow: 0 8px 24px rgba(3, 10, 25, 0.45);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 52px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  padding: 8px 2px;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--amber);
  transition: right var(--t-med) var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { right: 0; }

.nav-cta { flex-shrink: 0; }
.nav-cta .btn { padding: 12px 20px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

/* mobile menu */
.mobile-menu {
  display: none;
  background: var(--navy-900);
  border-top: 1px solid var(--line-dark);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: var(--s-2) 0 var(--s-3); }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-menu a:hover { color: var(--amber); }
.mobile-menu .btn {
  display: inline-flex;
  margin-top: var(--s-2);
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
  border-bottom: none;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background:
    radial-gradient(900px 480px at 78% 30%, rgba(20, 107, 255, 0.22), transparent 62%),
    radial-gradient(700px 420px at 12% 82%, rgba(20, 107, 255, 0.14), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--white);
  overflow: hidden;
}

.hero-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-10) 0 var(--s-8);
  min-height: 560px;
}

.hero-copy p.lede {
  margin: var(--s-3) 0 var(--s-4);
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body-on-dark);
}

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

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* hero shield visual */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
}

.shield-scene {
  position: relative;
  width: min(420px, 82%);
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  will-change: transform;
}

.hero-visual .shield-wrap {
  position: relative;
  animation: float 7s ease-in-out infinite;
}
.shield-svg { width: 100%; height: auto; }

.hero-visual .shield-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, rgba(46, 139, 255, 0.5), rgba(31, 122, 255, 0.16) 55%, transparent 74%);
  filter: blur(8px);
  animation: pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* sparkles on/near the shield */
.sparkle {
  animation: sparkle 3.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.sparkle.s2 { animation-delay: 1.1s; }
.sparkle.s3 { animation-delay: 2.2s; }
.sparkle.s4 { animation-delay: 0.6s; animation-duration: 4.6s; }

@keyframes sparkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* rippling rings beneath the shield */
.ripples {
  position: absolute;
  left: 50%;
  bottom: -52px;
  width: 620px;
  height: 180px;
  transform: translateX(-50%);
  pointer-events: none;
}
.ripples::before {
  /* static luminous core ring at the shield's base */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 38px;
  margin: -19px 0 0 -75px;
  border: 2.5px solid rgba(120, 185, 255, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(46, 139, 255, 0.75),
    inset 0 0 22px rgba(46, 139, 255, 0.65);
}
.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 108px;
  margin: -54px 0 0 -190px;
  border: 2px solid rgba(110, 175, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(46, 139, 255, 0.45);
  opacity: 0;
  animation: ripple 8s cubic-bezier(0.22, 0.55, 0.35, 1) infinite;
  will-change: transform, opacity;
}
.ripple.r2 { animation-delay: 2s; }
.ripple.r3 { animation-delay: 4s; }
.ripple.r4 { animation-delay: 6s; }

@keyframes ripple {
  0%   { transform: scale(0.22); opacity: 0; }
  8%   { opacity: 0.85; }
  70%  { opacity: 0.25; }
  100% { transform: scale(1.62); opacity: 0; }
}

.ripple-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 64px;
  margin: -32px 0 0 -120px;
  background: radial-gradient(closest-side, rgba(64, 152, 255, 0.85), rgba(46, 139, 255, 0.25) 60%, transparent 75%);
  filter: blur(5px);
  border-radius: 50%;
  animation: pulse 4.5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* trust bar */
.trust-bar {
  position: relative;
  border-top: 1px solid var(--line-dark);
  background: rgba(4, 12, 30, 0.45);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  min-width: 0;
}
.trust-item + .trust-item { border-left: 1px solid var(--line-dark); }
.trust-item .trust-icon {
  color: var(--amber);
}
.trust-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--amber);
}
.trust-icon svg {
  transition: transform var(--t-med) var(--ease), filter var(--t-med) var(--ease);
  animation: breathe 5.5s ease-in-out infinite;
}
.trust-item:nth-child(2) .trust-icon svg { animation-delay: 1.4s; }
.trust-item:nth-child(3) .trust-icon svg { animation-delay: 2.8s; }
.trust-item:nth-child(4) .trust-icon svg { animation-delay: 4.2s; }
.trust-item:hover .trust-icon svg {
  transform: scale(1.06);
  filter: drop-shadow(0 0 9px rgba(253, 181, 21, 0.45));
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
.trust-item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
}
.trust-item span {
  display: block;
  font-size: 0.875rem;
  color: var(--muted-on-dark);
  line-height: 1.35;
}

/* ---------- section scaffolding ---------- */

.section { padding: var(--s-12) 0; }
.section-light { background: var(--white); }
.section-tint { background: var(--surface); }

.section-head {
  max-width: 760px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.section-head p {
  margin-top: 12px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted-on-light);
}

/* ---------- threats ---------- */

.threats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-2);
}

.threat-card {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: 26px 16px;
  text-align: center;
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.threat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(20, 107, 255, 0.35);
  box-shadow: var(--shadow-lg);
}
.threat-icon {
  display: flex;
  justify-content: center;
  margin: 4px auto 16px;
}
.threat-icon svg { transition: transform var(--t-med) var(--ease); }
.threat-card:hover .threat-icon svg { transform: translateY(-4px); }
.threat-card h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
}
.threat-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-on-light);
}

/* ---------- cyber warranty ---------- */

.warranty {
  position: relative;
  background:
    radial-gradient(760px 420px at 50% 45%, rgba(20, 107, 255, 0.16), transparent 65%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-900) 100%);
  color: var(--white);
  overflow: hidden;
}

.warranty-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1.02fr) minmax(0, 1.12fr);
  align-items: center;
  gap: var(--s-3);
}

.warranty-copy h2 { color: var(--white); }
.warranty-copy .accent { color: var(--amber); }
.warranty-copy p.body {
  margin: var(--s-3) 0 var(--s-2);
  color: var(--body-on-dark);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
}
.warranty-copy p.fine {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted-on-dark);
  margin-bottom: var(--s-4);
}

.warranty-visual {
  position: relative;
  display: block;
}
.warranty-visual picture { display: block; width: 100%; }
.warranty-visual::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  background: radial-gradient(closest-side, rgba(20, 107, 255, 0.26), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}
/* transparent PNG/WebP — no frame, no card; the art's own glow blends in */
.warranty-visual img {
  position: relative;
  display: block;
  width: 124%;
  max-width: none;
  height: auto;
  aspect-ratio: 880 / 687;
  margin-inline: -12%;
  animation: float 8s ease-in-out infinite;
  filter: drop-shadow(0 18px 40px rgba(3, 12, 30, 0.55));
}

.warranty-points {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.warranty-point { display: flex; gap: 16px; }
.wp-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: 1.5px solid rgba(253, 181, 21, 0.55);
  border-radius: 50%;
  color: var(--amber);
  background: rgba(253, 181, 21, 0.07);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.warranty-point:hover .wp-icon {
  border-color: var(--amber);
  box-shadow: 0 0 14px rgba(253, 181, 21, 0.25);
}
.warranty-point strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 4px;
}
.warranty-point p {
  font-size: 0.875rem;
  color: var(--body-on-dark);
  line-height: 1.55;
}

/* ---------- solutions ---------- */

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.solution-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-3);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(20, 107, 255, 0.35);
}
.solution-icon {
  display: flex;
  margin: 4px 0 20px;
}
.solution-icon svg { transition: transform var(--t-med) var(--ease); }
.solution-card:hover .solution-icon svg { transform: translateY(-4px); }
.solution-card h3 { font-size: 1.25rem; font-weight: 700; }
.solution-card .sub {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}
.solution-card p.desc {
  font-size: 0.875rem;
  color: var(--muted-on-light);
  line-height: 1.55;
  margin: 10px 0 18px;
  flex-grow: 1;
}

/* ---------- CTA band ---------- */

.cta-band {
  background:
    radial-gradient(720px 360px at 50% 0%, rgba(20, 107, 255, 0.20), transparent 65%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--white);
  text-align: center;
}
.cta-band .inner {
  max-width: 660px;
  margin-inline: auto;
}
.cta-band h2 .accent { color: var(--amber); }
.cta-band p {
  margin: var(--s-3) auto var(--s-4);
  color: var(--body-on-dark);
  max-width: 52ch;
}
.cta-band .hero-ctas { justify-content: center; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-900);
  color: var(--body-on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  padding: var(--s-10) 0 var(--s-8);
}
.footer-brand img { height: 64px; width: auto; margin-bottom: var(--s-2); }
.footer-brand p {
  font-size: 0.9375rem;
  max-width: 34ch;
  line-height: 1.6;
}
.site-footer h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s-2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a {
  font-size: 0.9375rem;
  color: var(--body-on-dark);
  transition: color var(--t-fast) var(--ease);
}
.site-footer a:hover { color: var(--amber); }
.footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
}
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--amber); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--s-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted-on-dark);
}
.footer-legal { display: flex; gap: var(--s-3); }
.footer-note {
  width: 100%;
  font-size: 0.75rem;
  color: var(--muted-on-dark);
}

/* ---------- chat FAB ---------- */

.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
}
.chat-fab-btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--amber);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(3, 10, 25, 0.45);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chat-fab-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-amber); }

.chat-popover {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: 264px;
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-xl);
  padding: var(--s-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility 0s linear var(--t-med);
}
.chat-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.chat-popover strong { display: block; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.chat-popover p { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; margin-bottom: 14px; }
.chat-popover .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 0.875rem; }
.chat-popover .btn + .btn { margin-top: 8px; }

/* ---------- icon draw-in (stroke construction) ----------
   Stroked elements carry pathLength="1"; before reveal they are fully
   dashed out, then draw in once when their card enters the viewport.
   Solid fills fade in as the linework completes. Gated on .js so icons
   stay visible without JavaScript.                                   */

.js :is(.threat-icon, .solution-icon, .wp-icon, .trust-icon) svg [stroke] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js :is(.threat-icon, .solution-icon, .wp-icon, .trust-icon) svg [fill]:not([fill="none"]) {
  opacity: 0;
}
/* .draw-play is added per icon by its own IntersectionObserver, only once
   the icon is well inside the viewport — so the construction is actually
   seen. Stagger inherits each card's --reveal-delay.                    */
.js :is(.threat-icon, .solution-icon, .wp-icon, .trust-icon).draw-play svg [stroke] {
  animation: drawIn 950ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
.js :is(.threat-icon, .solution-icon, .wp-icon, .trust-icon).draw-play svg [fill]:not([fill="none"]) {
  animation: fillIn 480ms var(--ease) forwards;
  animation-delay: calc(var(--reveal-delay, 0ms) + 690ms);
}

@keyframes drawIn { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { opacity: 1; } }

/* ---------- reveal-on-scroll ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn { padding: 11px 16px; font-size: 0.875rem; }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: left;
    padding: var(--s-8) 0 var(--s-6);
    min-height: 0;
  }
  .hero-visual { min-height: 0; margin-top: var(--s-2); }
  .hero-visual .shield-wrap { width: min(300px, 64%); }

  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 18px 16px; }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }

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

  .warranty-grid { grid-template-columns: 1fr 1fr; }
  .warranty-visual { order: -1; }
  .warranty-copy { grid-column: 1 / -1; max-width: 560px; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

@media (max-width: 640px) {
  .section { padding: var(--s-8) 0; }

  .brand img { height: 42px; }
  .nav-cta .btn { padding: 10px 12px; font-size: 0.8125rem; }
  .nav-cta .arrow { display: none; }
  .nav { gap: var(--s-1); }

  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-visual { display: none; }

  /* trust bar: 2 x 2 on phones — icons share one baseline, even gutters,
     and type sits at the design system's Small (14px) size */
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 20px 12px;
  }
  .trust-item + .trust-item { border-left: 0; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--line-dark); }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .trust-icon svg { width: 42px; height: 42px; }
  .trust-item strong { font-size: 0.9375rem; line-height: 1.3; }
  .trust-item span { font-size: 0.875rem; line-height: 1.3; }

  .threats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .threat-card { padding: 20px 12px; }

  .warranty-grid { grid-template-columns: 1fr; }
  .warranty-visual { order: 0; width: 100%; max-width: 460px; justify-self: center; }
  .warranty-visual img { width: 100%; margin-inline: 0; }

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

  .footer-grid { grid-template-columns: 1fr; padding: var(--s-8) 0 var(--s-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .js :is(.threat-icon, .solution-icon, .wp-icon, .trust-icon) svg [stroke] {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .js :is(.threat-icon, .solution-icon, .wp-icon, .trust-icon) svg [fill]:not([fill="none"]) {
    opacity: 1;
  }
}

/* ==========================================================================
   INNER PAGES — shared components
   (Solutions · Cyber Warranty · Why CySec Bridge · Contact)
   ========================================================================== */

/* draw-in applies to every icon wrapper, including inner-page ones */
.js .dw svg [stroke] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .dw svg [fill]:not([fill="none"]) { opacity: 0; }
.js .dw.draw-play svg [stroke] {
  animation: drawIn 950ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
.js .dw.draw-play svg [fill]:not([fill="none"]) {
  animation: fillIn 480ms var(--ease) forwards;
  animation-delay: calc(var(--reveal-delay, 0ms) + 690ms);
}

/* ---------- page hero ---------- */

.page-hero {
  position: relative;
  background:
    radial-gradient(820px 440px at 76% 42%, rgba(20, 107, 255, 0.22), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--white);
  overflow: hidden;
}

.breadcrumb {
  position: relative;
  padding: var(--s-2) 0 0;
  font-size: 0.8125rem;
  color: var(--muted-on-dark);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb a { color: var(--body-on-dark); transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--white); font-weight: 500; }

.page-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6) 0 var(--s-8);
}
.page-hero-copy h1 { margin-bottom: var(--s-3); }
.page-hero-copy .accent { color: var(--amber); }
.page-hero-copy p.lede {
  max-width: 52ch;
  color: var(--body-on-dark);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: var(--s-4);
}

/* check list used in the Why CySec Bridge hero */
.hero-checks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 var(--s-6);
  border-top: 1px solid var(--line-dark);
}
.hero-check { display: flex; gap: 12px; }
.hero-check svg { flex-shrink: 0; color: #3DD07E; margin-top: 2px; }
.hero-check strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
}
.hero-check span { font-size: 0.875rem; color: var(--body-on-dark); line-height: 1.55; }

/* orbiting-icon shield visual */
.orbit-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.orbit-visual .core {
  position: relative;
  width: min(300px, 74%);
  animation: float 7s ease-in-out infinite;
}
.orbit-visual .core::before {
  content: "";
  position: absolute;
  inset: -24%;
  background: radial-gradient(closest-side, rgba(46, 139, 255, 0.42), transparent 72%);
  filter: blur(10px);
  animation: pulse 4.5s ease-in-out infinite;
}
.orbit-visual .core svg { position: relative; width: 100%; height: auto; }

.orbit-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(93, 160, 255, 0.55);
  background: rgba(10, 34, 76, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #8FC2FF;
  box-shadow: 0 0 22px rgba(20, 107, 255, 0.25);
  animation: chipFloat 6s ease-in-out infinite;
}
.orbit-chip:nth-of-type(1) { top: 6%;  left: 10%; animation-delay: 0s; }
.orbit-chip:nth-of-type(2) { top: 2%;  right: 12%; animation-delay: 1.1s; }
.orbit-chip:nth-of-type(3) { top: 42%; left: 0;    animation-delay: 2.2s; }
.orbit-chip:nth-of-type(4) { top: 38%; right: 0;   animation-delay: 3.3s; }
.orbit-chip:nth-of-type(5) { bottom: 12%; left: 12%; animation-delay: 4.4s; }
.orbit-chip:nth-of-type(6) { bottom: 8%;  right: 10%; animation-delay: 5.5s; }

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* warranty badge inside a page hero */
.hero-badge {
  position: relative;
  display: block;
}
.hero-badge picture { display: block; width: 100%; }
.hero-badge img {
  display: block;
  width: 108%;
  max-width: none;
  height: auto;
  aspect-ratio: 880 / 687;
  margin-inline: -4%;
  animation: float 8s ease-in-out infinite;
  filter: drop-shadow(0 18px 40px rgba(3, 12, 30, 0.5));
}

/* ---------- feature strip (dark or light) ---------- */

.feature-strip { border-top: 1px solid var(--line-dark); background: rgba(4, 12, 30, 0.45); }
.feature-strip .strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature-strip .strip-item { display: flex; align-items: flex-start; gap: 14px; padding: 22px 26px; min-width: 0; }
.feature-strip .strip-item > div { min-width: 0; }
.feature-strip .strip-item + .strip-item { border-left: 1px solid var(--line-dark); }
.feature-strip .strip-item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 4px;
}
.feature-strip .strip-item p { font-size: 0.875rem; color: var(--body-on-dark); line-height: 1.55; }
.feature-strip .strip-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--amber);
}

/* light variant sits under the hero on Solutions */
.strip-light {
  background: var(--white);
  border-bottom: 1px solid var(--line-light);
}
.strip-light .strip-grid { grid-template-columns: repeat(4, 1fr); }
.strip-light .strip-item { padding: 26px 24px; }
.strip-light .strip-item + .strip-item { border-left: 1px solid var(--line-light); }
.strip-light .strip-icon { color: var(--blue); }
.strip-light .strip-item strong { color: var(--ink); }
.strip-light .strip-item p { color: var(--muted-on-light); }

/* ---------- pricing / package cards ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(20, 107, 255, 0.35);
}
.price-card.featured {
  border-color: var(--blue);
  box-shadow: 0 12px 32px rgba(20, 107, 255, 0.16);
}
.badge-popular {
  position: absolute;
  top: -13px;
  right: 20px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.price-head h3 { font-size: 1.5rem; font-weight: 700; }
.price-card .sub { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.price-card .desc {
  font-size: 0.875rem;
  color: var(--muted-on-light);
  line-height: 1.55;
  margin: 10px 0 18px;
}
.feature-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; flex-grow: 1; }
.feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--body-on-light);
  margin-bottom: 11px;
}
.feature-list svg { flex-shrink: 0; color: var(--blue); margin-top: 2px; }
.price-card .btn { width: 100%; justify-content: center; }

/* ---------- comparison table ---------- */

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
table.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
table.compare th, table.compare td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-light);
}
table.compare thead th {
  background: var(--surface);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
table.compare thead th:not(:first-child),
table.compare td:not(:first-child) { text-align: center; width: 15%; }
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody tr { transition: background-color var(--t-fast) var(--ease); }
table.compare tbody tr:hover { background: var(--blue-50); }
table.compare th[scope="row"] { font-weight: 400; color: var(--body-on-light); }
.tick { color: var(--blue); }
.dash { color: var(--slate); }

/* ---------- consultation banner ---------- */

.consult-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(520px 200px at 12% 0%, rgba(20, 107, 255, 0.22), transparent 70%),
    var(--navy);
  color: var(--white);
}
.consult-banner .cb-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border: 1.5px solid rgba(93, 160, 255, 0.5);
  border-radius: 50%;
  color: #8FC2FF;
}
.consult-banner .cb-text { flex: 1 1 320px; }
.consult-banner h3 { font-size: 1.375rem; font-weight: 700; }
.consult-banner p { font-size: 0.9375rem; color: var(--body-on-dark); margin-top: 4px; }

/* ---------- "why it matters" cards ---------- */

.matters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.matters-card {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.matters-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.matters-card.tinted { background: var(--blue-50); border-color: var(--blue-100); }
.matters-card .m-icon { color: var(--blue); margin-bottom: 16px; display: block; }
.matters-card .m-icon svg { transition: transform var(--t-med) var(--ease); }
.matters-card:hover .m-icon svg { transform: translateY(-4px); }
.matters-card h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.matters-card p { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; }

/* ---------- "what's covered" grid ---------- */

.covered-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-2);
  text-align: center;
}
.covered-item { padding: var(--s-2) 10px; }
.covered-item + .covered-item { border-left: 1px solid var(--line-light); }
.covered-item .c-icon { display: flex; justify-content: center; color: var(--blue); margin-bottom: 12px; }
.covered-item .c-icon svg { transition: transform var(--t-med) var(--ease); }
.covered-item:hover .c-icon svg { transform: translateY(-4px); }
.covered-item h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.covered-item p { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; }

/* ---------- how it works steps ---------- */

.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step .num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.step h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.step strong { display: block; font-size: 0.875rem; color: var(--ink); margin-bottom: 4px; }
.step p { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--s-2) * -1);
  width: 16px;
  height: 2px;
  background: var(--slate);
  transform: translateY(-50%);
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--s-2) * -1 - 1px);
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--slate);
  border-right: 2px solid var(--slate);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

/* ---------- dark "why it's different" band ---------- */

.different-band {
  background:
    radial-gradient(700px 340px at 20% 10%, rgba(20, 107, 255, 0.18), transparent 65%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--white);
}
.different-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: var(--s-6);
  align-items: center;
}
.different-band h2 { color: var(--white); margin-bottom: var(--s-4); }
.diff-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.diff-item { text-align: center; padding: 0 8px; }
.diff-item .d-icon { display: flex; justify-content: center; color: var(--amber); margin-bottom: 12px; }
.diff-item strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--white); margin-bottom: 8px; }
.diff-item p { font-size: 0.875rem; color: var(--body-on-dark); line-height: 1.55; }

.cta-card {
  position: relative;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(93, 160, 255, 0.28);
  background: rgba(10, 34, 76, 0.6);
  overflow: hidden;
}
.cta-card h3 { font-size: 1.25rem; font-weight: 700; }
.cta-card p { font-size: 0.9375rem; color: var(--body-on-dark); line-height: 1.55; margin: 10px 0 var(--s-3); }

/* ---------- why cysec bridge: reason cards ---------- */

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.why-card {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(20, 107, 255, 0.3);
}
.why-card .w-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue);
  margin-bottom: 18px;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.why-card:hover .w-icon { background: var(--blue); color: var(--white); }
.why-card h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; }
.why-card p { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; }

/* ---------- "your business. our bridge." band ---------- */

.bridge-band {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(560px 240px at 15% 0%, rgba(20, 107, 255, 0.2), transparent 70%),
    var(--navy);
  color: var(--white);
}
.bridge-band .bb-icon { color: var(--amber); }
.bridge-band h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--white); }
.bridge-band p { color: var(--body-on-dark); margin-top: 10px; max-width: 52ch; font-size: 0.9375rem; }
.bridge-actions { display: grid; gap: 12px; }
.bridge-actions .btn { justify-content: center; white-space: nowrap; }

/* ---------- proof strip (light, 4 items) ---------- */

.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-item { display: flex; gap: 14px; padding: var(--s-3); align-items: flex-start; min-width: 0; }
.proof-item > div { min-width: 0; }
.proof-item + .proof-item { border-left: 1px solid var(--line-light); }
.proof-item .p-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--blue);
}
.proof-item strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 2px; }
.proof-item p { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; }

/* ---------- contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-6);
  align-items: start;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field { margin-bottom: var(--s-2); }
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.field .req { color: #D6453D; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #CBD5E1;
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9AA7BC; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20, 107, 255, 0.16);
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #D6453D; }
.field .err {
  display: none;
  font-size: 0.8125rem;
  color: #D6453D;
  margin-top: 6px;
}
.field.invalid .err { display: block; }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--muted-on-light);
  margin-bottom: var(--s-3);
}
.consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); }

.form-note { font-size: 0.875rem; color: var(--muted-on-light); line-height: 1.55; margin-top: var(--s-2); }

.form-status {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: #E9F7EF;
  border: 1px solid #A8DFC1;
  color: #1B6B42;
  font-size: 0.875rem;
  margin-bottom: var(--s-2);
}
.form-status.show { display: flex; }
.form-status svg { flex-shrink: 0; margin-top: 1px; }

.contact-cards { display: grid; gap: var(--s-2); }
.contact-card {
  display: flex;
  gap: 14px;
  padding: var(--s-3);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(20, 107, 255, 0.3);
}
.contact-card .cc-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue);
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.contact-card:hover .cc-icon { background: var(--blue); color: var(--white); }
.contact-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.contact-card p, .contact-card a { font-size: 0.9375rem; color: var(--muted-on-light); line-height: 1.55; }
.contact-card a:hover { color: var(--blue); }

.hours-card {
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--navy);
  color: var(--white);
}
.hours-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
.hours-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 0.875rem; }
.hours-card dt { color: var(--body-on-dark); }
.hours-card dd { margin: 0; text-align: right; color: var(--white); font-weight: 500; }
.hours-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  color: var(--body-on-dark);
}

.map-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: saturate(0.9);
}

/* ---------- inner-page responsive ---------- */

@media (max-width: 1080px) {
  .page-hero-grid { grid-template-columns: 1fr; padding-bottom: var(--s-6); }
  .orbit-visual { min-height: 0; order: -1; }
  .orbit-visual .core { width: min(240px, 60%); }
  .hero-badge { order: -1; width: 100%; max-width: 420px; justify-self: center; }
  .hero-badge img { width: 100%; margin-inline: 0; }
  .hero-checks { grid-template-columns: 1fr 1fr; }

  .feature-strip .strip-grid,
  .strip-light .strip-grid { grid-template-columns: 1fr 1fr; }
  .feature-strip .strip-item:nth-child(3),
  .strip-light .strip-item:nth-child(3) { border-left: 0; }
  .feature-strip .strip-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .strip-light .strip-item:nth-child(n+3) { border-top: 1px solid var(--line-light); }

  .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .matters-grid { grid-template-columns: 1fr 1fr; }
  .covered-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .covered-item + .covered-item { border-left: 0; }
  .steps-row { grid-template-columns: 1fr 1fr; }
  .step:not(:last-child)::after, .step:not(:last-child)::before { display: none; }

  .different-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }

  .bridge-band { grid-template-columns: 64px minmax(0, 1fr); }
  .bridge-band .bridge-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }

  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-item:nth-child(3) { border-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--line-light); }

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

@media (max-width: 640px) {
  .hero-checks { grid-template-columns: 1fr; gap: var(--s-2); }
  .orbit-chip { width: 44px; height: 44px; }
  .orbit-chip svg { width: 18px; height: 18px; }

  .matters-grid { grid-template-columns: 1fr; }
  .covered-grid { grid-template-columns: 1fr 1fr; }
  .steps-row { grid-template-columns: 1fr; }
  .diff-items { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .why-grid { grid-template-columns: 1fr; }

  .bridge-band { grid-template-columns: 1fr; padding: var(--s-4); text-align: left; }
  .bridge-band .bridge-actions { grid-template-columns: 1fr; }

  .proof-strip { grid-template-columns: 1fr; }
  .proof-item:nth-child(n+2) { border-left: 0; border-top: 1px solid var(--line-light); }

  /* feature strips become full-width rows, like the mobile mockups */
  .feature-strip .strip-grid,
  .strip-light .strip-grid { grid-template-columns: 1fr; }
  .feature-strip .strip-item,
  .strip-light .strip-item { padding: 18px 0; border-left: 0 !important; }
  .feature-strip .strip-item + .strip-item { border-top: 1px solid var(--line-dark) !important; }
  .strip-light .strip-item + .strip-item { border-top: 1px solid var(--line-light) !important; }

  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--s-3); }
  .consult-banner { padding: var(--s-3); }
  .consult-banner .btn { width: 100%; justify-content: center; }
  .map-frame iframe { height: 320px; }
}

/* visually-hidden (table captions etc.) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.map-link { margin-top: var(--s-2); text-align: center; }

/* horizontal-scroll hint for the comparison table on small screens */
.table-hint { display: none; }
@media (max-width: 760px) {
  .table-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--muted-on-light);
    margin-bottom: 10px;
  }
  .table-wrap { box-shadow: inset -12px 0 12px -12px rgba(7, 26, 61, 0.25); }
}

/* icon secondary tone — meets the 3:1 non-text contrast minimum */
:root { --icon-muted: #7C8BA3; }

/* ==========================================================================
   DARK-THEME PAGES (Value Added Services · Resources · Contact)
   Per the client's later mockups: navy canvas, gold primary, accent-coded
   service families. Layered on the same tokens as the light pages.
   ========================================================================== */

body.theme-dark {
  background: var(--navy-900);
  color: var(--body-on-dark);
}
body.theme-dark .section-light,
body.theme-dark .section-tint { background: transparent; }
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4 { color: var(--white); }
body.theme-dark .section-head p { color: var(--body-on-dark); }
body.theme-dark .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.dark-band {
  background:
    radial-gradient(760px 380px at 78% 18%, rgba(20, 107, 255, 0.18), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
}

/* section eyebrow centred above a heading */
.eyebrow-center {
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #60A5FA;
  margin-bottom: var(--s-2);
}
.eyebrow-center.gold { color: var(--amber); }

/* ---------- nav dropdowns ---------- */

.has-drop { position: relative; }
.nav-links .drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px 2px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}
.nav-links .drop-toggle:hover { color: var(--white); }
.nav-links .drop-toggle .caret { transition: transform var(--t-fast) var(--ease); }
.has-drop.open .drop-toggle .caret { transform: rotate(180deg); }

.drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 244px;
  padding: 8px;
  list-style: none;
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(2, 8, 20, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility 0s linear var(--t-med);
  z-index: 60;
}
.has-drop.open .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.drop-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.86);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.drop-menu a::after { display: none; }
.drop-menu a:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }
.drop-menu .d-sub { display: block; font-size: 0.8125rem; color: var(--muted-on-dark); }

.mobile-menu .sub-list { list-style: none; margin: 0; padding: 0 0 0 var(--s-2); }
.mobile-menu .sub-list a { font-size: 0.9375rem; color: var(--muted-on-dark); padding: 11px 0; }

/* ---------- service panel (Value Added Services) ---------- */

.svc-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--s-2);
  border-radius: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.svc-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; flex-grow: 1; }
.svc-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--body-on-dark);
  margin-bottom: 12px;
}
.svc-list svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* wide feature panel (DPaaS) */
.svc-wide {
  --accent: #FDB515;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(19, 41, 82, 0.85), rgba(9, 22, 48, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.svc-wide::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--accent);
  opacity: 0.85;
}
.svc-wide:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 18px 44px rgba(2, 8, 20, 0.55);
}
.svc-wide-head { display: flex; gap: var(--s-2); align-items: flex-start; margin-bottom: 12px; }
.svc-wide .svc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s-3);
  margin-bottom: var(--s-2);
}
.svc-visual { display: grid; place-items: center; }
.svc-visual svg { width: 100%; max-width: 280px; height: auto; }

/* ---------- resources ---------- */

.filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.search-field { position: relative; }
.search-field svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-on-dark);
  pointer-events: none;
}
.filter-bar input,
.filter-bar select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--white);
  background: rgba(6, 18, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.filter-bar select { padding-right: 34px; }
.filter-bar input::placeholder { color: var(--muted-on-dark); }
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(253, 181, 21, 0.22);
}
.clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--body-on-dark);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.clear-filters:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }

.res-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }

.res-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.res-card:hover {
  transform: translateY(-6px);
  border-color: rgba(253, 181, 21, 0.45);
  box-shadow: 0 18px 44px rgba(2, 8, 20, 0.55);
}
.res-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-800);
}
.res-thumb svg { width: 100%; height: 100%; display: block; }
.res-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--s-3); }
.res-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.badge-guide { background: #2563EB; }
.badge-report { background: #15803D; }
.badge-webinar { background: #B45309; }
.badge-whitepaper { background: #6D28D9; }
.badge-tool { background: #0E7490; }

.res-card h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--white); }
.res-card p {
  margin: 8px 0 var(--s-3);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body-on-dark);
  flex-grow: 1;
}
.res-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.875rem;
  color: var(--muted-on-dark);
}
.res-action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--amber);
  border: 1px solid rgba(253, 181, 21, 0.4);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.res-card:hover .res-action { background: var(--amber); color: var(--navy); }

.no-results {
  display: none;
  padding: var(--s-8) var(--s-3);
  text-align: center;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  color: var(--body-on-dark);
}
.no-results.show { display: block; }

/* category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.cat-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--body-on-dark);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease);
}
.cat-tile:hover { transform: translateY(-4px); border-color: rgba(253, 181, 21, 0.45); }
.cat-tile[aria-pressed="true"] {
  border-color: var(--amber);
  background: rgba(253, 181, 21, 0.10);
}
.cat-tile .c-ico { color: var(--amber); }
.cat-tile strong { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--white); }
.cat-tile span { font-size: 0.8125rem; line-height: 1.4; }

/* ---------- contact (dark) ---------- */

.contact-hero-visual { position: relative; display: grid; place-items: center; min-height: 300px; overflow: hidden; }
.contact-hero-visual .map {
  position: absolute;
  inset: -6% -22%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.contact-hero-visual .map img { width: 100%; height: auto; }
.contact-hero-visual .crest {
  position: relative;
  width: min(268px, 62%);
  animation: float 7s ease-in-out infinite;
}
.contact-hero-visual .crest img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 26px rgba(253, 181, 21, 0.35));
}

.dark-card {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dark-card > h2 { margin-bottom: 8px; }
.dark-card > p.card-sub { color: var(--body-on-dark); margin-bottom: var(--s-3); font-size: 0.9375rem; }

body.theme-dark .field label { color: var(--white); }
body.theme-dark .field input,
body.theme-dark .field select,
body.theme-dark .field textarea {
  color: var(--white);
  background: rgba(6, 18, 40, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
}
body.theme-dark .field input::placeholder,
body.theme-dark .field textarea::placeholder { color: var(--muted-on-dark); }
body.theme-dark .field input:focus,
body.theme-dark .field select:focus,
body.theme-dark .field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(253, 181, 21, 0.22);
}
body.theme-dark .field.invalid input,
body.theme-dark .field.invalid select,
body.theme-dark .field.invalid textarea { border-color: #F87171; }
body.theme-dark .field .err { color: #F87171; }
body.theme-dark .consent { color: var(--body-on-dark); }
body.theme-dark .consent input { accent-color: var(--amber); }
body.theme-dark .form-note { color: var(--muted-on-dark); }
body.theme-dark .form-status {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
  color: #86EFAC;
}

.phone-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }

.reach-list { display: grid; gap: var(--s-2); }
.reach-item {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.reach-item:hover { transform: translateY(-4px); border-color: rgba(253, 181, 21, 0.45); }
.reach-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--amber);
  border: 1.5px solid rgba(253, 181, 21, 0.5);
  background: rgba(253, 181, 21, 0.07);
}
.reach-item h3 { font-size: 1.0625rem; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.reach-item p, .reach-item a { font-size: 0.9375rem; line-height: 1.55; color: var(--body-on-dark); }
.reach-item a:hover { color: var(--amber); }

.social-row { display: flex; gap: 10px; margin-top: 12px; }
.social-row a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--body-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.social-row a:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy);
  transform: translateY(-3px);
}

.promise-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.promise-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: var(--s-3);
  min-width: 0;
}
.promise-item + .promise-item { border-left: 1px solid rgba(255, 255, 255, 0.10); }
.promise-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--amber);
  border: 1.5px solid rgba(253, 181, 21, 0.45);
}
.promise-item p { font-size: 0.9375rem; line-height: 1.4; color: var(--body-on-dark); }
.promise-item strong { color: var(--white); font-weight: 600; }

.final-cta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(253, 181, 21, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.final-cta .fc-icon { color: var(--amber); }
.final-cta h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.final-cta p { margin-top: 8px; color: var(--body-on-dark); font-size: 0.9375rem; }
.final-cta .fc-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- dark-page responsive ---------- */

@media (max-width: 1080px) {
  .nav-links .drop-menu { display: none; }
  .svc-wide { grid-template-columns: 1fr; }
  .svc-visual { order: -1; max-width: 300px; margin-inline: auto; }
  .res-grid { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .promise-strip { grid-template-columns: 1fr 1fr; }
  .promise-item:nth-child(3) { border-left: 0; }
  .promise-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .final-cta { grid-template-columns: 56px minmax(0, 1fr); }
  .final-cta .fc-actions { grid-column: 1 / -1; }
  .contact-hero-visual { min-height: 240px; }
}

@media (max-width: 640px) {
  .svc-wide .svc-list { grid-template-columns: 1fr; }
  .res-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .clear-filters { justify-content: center; }
  .promise-strip { grid-template-columns: 1fr; }
  .promise-item + .promise-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .final-cta { grid-template-columns: 1fr; }
  .final-cta .fc-actions .btn { width: 100%; justify-content: center; }
  .phone-row { grid-template-columns: 112px minmax(0, 1fr); }
  .res-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dark-card { padding: var(--s-3); }
}

/* keep top-level nav items on one line */
.nav-links > li > a,
.nav-links .drop-toggle { white-space: nowrap; }

/* embedded map sits on the dark canvas, not a white flash */
body.theme-dark .map-frame {
  background: var(--navy-800);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
body.theme-dark .map-frame iframe { filter: saturate(0.85) brightness(0.92); }

/* inputs carry a default intrinsic width; let them shrink inside grids */
.field input, .field select, .field textarea,
.filter-bar input, .filter-bar select { min-width: 0; }
.phone-row > * { min-width: 0; }
.contact-grid > *, .dark-card, .form-row > * { min-width: 0; }

/* contact cards must shrink on very narrow phones */
.reach-item, .reach-item > div, .promise-item > p { min-width: 0; }
.reach-item a, .reach-item p { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .reach-item { padding: var(--s-2); gap: 12px; }
  .reach-icon { width: 40px; height: 40px; }
  .social-row { flex-wrap: wrap; }
}

/* ---------- partnership strip (home hero) ----------
   Supplied logos are dark-ink artwork, so each sits on a light chip to
   stay legible and on-brand against the dark hero. */
.partner-strip {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 0 0 var(--s-6);
}
.partner-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: 0 8px 22px rgba(2, 8, 20, 0.35);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.partner-logo:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2, 8, 20, 0.45); }
.partner-logo img { height: 24px; width: auto; }
.partner-logo-cynet img { height: 34px; }

@media (max-width: 640px) {
  .partner-strip { gap: 12px 14px; padding-bottom: var(--s-4); }
  .partner-label { width: 100%; }
  .partner-logo { height: 46px; padding: 0 14px; }
  .partner-logo img { height: 20px; }
  .partner-logo-cynet img { height: 28px; }
}

/* clickable resource cards (whole card is the hit area) */
.res-card { position: relative; }
.res-card h3 a.res-link { color: inherit; }
.res-card a.res-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.res-card:hover h3 a.res-link { color: var(--amber); }
.res-card a.res-link:focus-visible { outline: none; }
.res-card:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(253, 181, 21, 0.28); }
.res-thumb picture, .res-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   UNIFIED SURFACES
   Every page now shares one rhythm: dark hero → light content → dark CTA
   band → dark footer. These rules lighten the components that were
   previously dark-only, so no page reads as "a different website".
   ========================================================================== */

.eyebrow-center { color: var(--blue); }

/* hero focal art -------------------------------------------------------- */
.shield-crest {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 34px rgba(253, 181, 21, 0.30));
}
.core-badge picture, .core-badge img { display: block; width: 100%; height: auto; }
.core-badge img { filter: drop-shadow(0 16px 34px rgba(3, 12, 30, 0.5)); }
.core.core-badge::before { display: none; }

/* service panel --------------------------------------------------------- */
.svc-wide {
  background: var(--white);
  border-color: var(--line-light);
}
.svc-wide:hover { box-shadow: var(--shadow-lg); }
.svc-wide h3 { color: var(--ink); }
.svc-wide > div > p { color: var(--muted-on-light); }
.svc-list li { color: var(--body-on-light); }
.svc-icon { background: color-mix(in srgb, var(--accent) 10%, var(--white)); }

/* resource library ------------------------------------------------------ */
.filter-bar { background: var(--surface); border-color: var(--line-light); }
.filter-bar input, .filter-bar select {
  background: var(--white);
  color: var(--ink);
  border-color: #CBD5E1;
}
.filter-bar input::placeholder { color: var(--muted-on-light); }
.search-field svg { color: var(--muted-on-light); }
.filter-bar input:focus, .filter-bar select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20, 107, 255, 0.16);
}
.clear-filters { color: var(--muted-on-light); }
.clear-filters:hover { color: var(--ink); background: rgba(7, 26, 61, 0.05); }
.res-count { color: var(--muted-on-light); font-weight: 400; }

.res-card { background: var(--white); border-color: var(--line-light); }
.res-card:hover { border-color: rgba(20, 107, 255, 0.35); box-shadow: var(--shadow-lg); }
.res-card h3 { color: var(--ink); }
.res-card p { color: var(--muted-on-light); }
.res-meta { border-top-color: var(--line-light); color: var(--muted-on-light); }
.res-action { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.res-card:hover .res-action { background: var(--blue); color: var(--white); }
.res-card:hover h3 a.res-link { color: var(--blue); }
.res-card:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20, 107, 255, 0.22); }
.no-results { background: var(--surface); border-color: var(--line-light); color: var(--muted-on-light); }

/* video preview --------------------------------------------------------- */
.res-thumb-video {
  position: relative;
  background:
    radial-gradient(420px 220px at 50% 45%, rgba(20, 107, 255, 0.35), transparent 70%),
    linear-gradient(180deg, #132B5E 0%, #050F26 100%);
}
.res-thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-thumb-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 15, 38, 0.10), rgba(5, 15, 38, 0.45));
}
.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(3, 12, 30, 0.5);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.play-badge svg { margin-left: 3px; }
.res-card:hover .play-badge { transform: scale(1.08); box-shadow: var(--shadow-amber); }

/* category tiles -------------------------------------------------------- */
.cat-tile { background: var(--white); border-color: var(--line-light); color: var(--muted-on-light); }
.cat-tile strong { color: var(--ink); }
.cat-tile .c-ico { color: var(--blue); }
.cat-tile:hover { border-color: rgba(20, 107, 255, 0.35); box-shadow: var(--shadow-md); }
.cat-tile[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-50); }

/* contact ---------------------------------------------------------------- */
.dark-card {
  background: var(--white);
  border-color: var(--line-light);
  box-shadow: var(--shadow-md);
}
.dark-card > p.card-sub { color: var(--muted-on-light); }

.reach-item { background: var(--white); border-color: var(--line-light); }
.reach-item:hover { border-color: rgba(20, 107, 255, 0.3); box-shadow: var(--shadow-lg); }
.reach-icon {
  color: var(--blue);
  border-color: var(--blue-100);
  background: var(--blue-50);
}
.reach-item h3 { color: var(--ink); }
.reach-item p, .reach-item a { color: var(--muted-on-light); }
.reach-item a:hover { color: var(--blue); }

.social-row a { color: var(--muted-on-light); border-color: var(--line-light); }
.social-row a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

.promise-strip { background: var(--white); border-color: var(--line-light); box-shadow: var(--shadow-sm); }
.promise-item + .promise-item { border-left-color: var(--line-light); }
.promise-icon { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.promise-item p { color: var(--muted-on-light); }
.promise-item strong { color: var(--ink); }

/* closing CTA band stays deliberately dark on every page ------------------ */
.final-cta {
  background:
    radial-gradient(560px 240px at 12% 0%, rgba(20, 107, 255, 0.22), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  border-color: rgba(255, 255, 255, 0.10);
}
.final-cta h2 { color: var(--white); }
.final-cta p { color: var(--body-on-dark); }
.cta-fine { margin-top: var(--s-3); font-size: 0.75rem; color: var(--muted-on-dark); }

@media (max-width: 1080px) {
  .promise-item:nth-child(n+3) { border-top-color: var(--line-light); }
}
@media (max-width: 640px) {
  .promise-item + .promise-item { border-top-color: var(--line-light); }
}

/* form controls never inherit the page font by default — pin them all to Inter */
button, input, select, textarea, .btn, .cat-tile, .clear-filters, .drop-toggle,
.chat-fab-btn, .nav-toggle { font-family: inherit; }


/* ==========================================================================
   VALUE-ADDED SERVICES — Check Your Domain panel + Launching Soon grid
   ========================================================================== */
.domain-check {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-8);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    radial-gradient(560px 260px at 88% 0%, rgba(20, 107, 255, 0.22), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  box-shadow: var(--shadow-xl);
}
.domain-check .eyebrow { color: var(--amber); }
.domain-check h2 { color: var(--white); margin: var(--s-1) 0 var(--s-2); }
.domain-check p { color: var(--body-on-dark); margin: 0 0 var(--s-2); }
.domain-check .dc-note { font-size: 0.875rem; color: var(--muted-on-dark); margin-bottom: 0; }
.domain-check .dc-note a { color: var(--amber); }

.dc-widget {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.dc-widget-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s-2);
}
/* the Sendmarc widget injects its own form controls — keep them legible on navy */
#sendmarc-widget-form { color: var(--white); }
#sendmarc-widget-form input { font-family: inherit; }

@media (max-width: 960px) {
  .domain-check { grid-template-columns: 1fr; padding: var(--s-4); gap: var(--s-4); }
}

/* “Other Value-Added Services” — launching soon */
.soon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.soon-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--s-2) var(--s-3);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.soon-item svg { flex: none; color: var(--blue); }
.soon-item.is-more { color: var(--muted-on-light); border-style: dashed; background: transparent; box-shadow: none; }
.soon-item.is-more svg { color: var(--muted-on-light); }

body.theme-dark .soon-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
  color: var(--white);
}
body.theme-dark .soon-item.is-more { color: var(--muted-on-dark); background: transparent; }

@media (max-width: 1080px) { .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .soon-grid { grid-template-columns: 1fr; } }