/* CCSIT / Continuum Consulting Services — site stylesheet */

:root {
  /* Primary text / surfaces */
  --ink: #0f172a;
  --muted: #475569;
  --muted-2: #64748b;
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-card-alt: #f5f7fa;
  --border: #d9e0e8;
  --border-input: #8a97a8;

  /* Brand palette — navy / steel blue / signal teal
     --navy, --navy-soft and --cta are pinned to the exact hex values sampled
     from the CCSIT brand concept (logo lockup files): navy #070D1A, icon-mark
     navy #00153A, brand teal #0F766E. */
  --navy: #070d1a;        /* dark surfaces: hero bands, footer, CTA bands */
  --navy-soft: #00153a;   /* secondary dark tone / card accents, logo navy */
  --indigo: #2f6690;      /* steel blue — links, icons, eyebrows, focus ring */
  --indigo-strong: #14b8a6; /* signal teal — accents on dark surfaces only */
  --indigo-dark: #1f4c6b; /* steel blue hover */
  --indigo-tint: #eaf1f6; /* light steel tint for icon chips on light bg */

  /* CTA (most saturated element on any screen) — matches brand teal exactly */
  --cta: #0f766e;
  --cta-hover: #115e59;

  /* Hero background-square fill — monochrome, navy family, matching the
     brand concept exactly (no teal in the background, only the mark is
     coloured). A light steel-grey in light mode so it doesn't read as a
     muddy smudge on white; dark mode repoints it to navy. */
  --shape-fill: #d7e2ec;

  /* Status */
  --success: #15803d;
  --warning: #b45309;
  --warning-tint: #fbead3;
  --error: #b91c1c;

  --max-width: 1200px;
  color-scheme: light;

  /* Card system — larger radius, soft elevation shadow instead of a flat
     look, used across .card/.problem-card/.service-group/.product-card/
     .person-card/.testimonial for a softer, more spacious feel. */
  --card-radius: 22px;
  --card-shadow: 0 10px 28px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.04);

  /* Hero technology-ecosystem graphic — light variant: white glass cards
     with a soft shadow, dark navy "hub" cube, teal lines/icons. */
  --eco-card-a: #ffffff;
  --eco-card-b: #eef5f8;
  --eco-stroke: #0f766e;
  --eco-stroke-opacity: 0.35;
  --eco-icon: #0b1a38;
  --eco-hub-a: #0f172a;
  --eco-hub-b: #16243f;
  --eco-hub-stroke: #0b1a38;
  --eco-hub-stroke-opacity: 0.25;
  --eco-hub-icon: #2dd4bf;
  --eco-line: #0f766e;
  --eco-line-opacity: 0.45;
  --eco-label: #0b1a38;
  --eco-glow-opacity: 0.18;
  --eco-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
}

/* ===== Theme: dark =====
   Light is the default regardless of OS preference; dark only applies when
   the header toggle sets data-theme="dark" on <html> (persisted via
   localStorage by main.js). */
:root[data-theme="dark"] {
  --ink: #e7eaf3;
  --muted: #aeb6ce;
  --muted-2: #8891ad;
  --bg: #070d1a;
  --bg-card: #0e1830;
  --bg-card-alt: #0b1426;
  --border: #223055;
  --border-input: #3c4a72;
  --indigo-tint: #16233f;
  --warning-tint: #3a2a12;
  --navy: #111d3a;
  --navy-soft: #0b1a38;
  --shape-fill: #1b2847;
  color-scheme: dark;

  --eco-card-a: #16233f;
  --eco-card-b: #0b1426;
  --eco-stroke: #2dd4bf;
  --eco-stroke-opacity: 0.4;
  --eco-icon: #eafff8;
  --eco-hub-a: #1d9e75;
  --eco-hub-b: #0f6e56;
  --eco-hub-stroke: #7fe7d4;
  --eco-hub-stroke-opacity: 0.6;
  --eco-hub-icon: #ffffff;
  --eco-line: #2dd4bf;
  --eco-line-opacity: 0.3;
  --eco-label: #9fb4d9;
  --eco-glow-opacity: 0.35;
  --eco-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  --card-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.18);
}
:root[data-theme="light"] { color-scheme: light; }

/* Placeholder markers — real data (names, numbers, contacts) pending client
   confirmation. Flag visibly rather than invent facts (assessment §9). */
.todo {
  background: var(--warning-tint);
  color: var(--warning);
  border-bottom: 1px dotted currentColor;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 3px;
  border-radius: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.hero h1, .page-header h1, .section-head h2, .num-section h3,
.num-card h4, .cta-banner h2, .stat-band .num, .card h3 {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.eyebrow, .kpi-tile .kpi-num, .stat-band .num, code, pre {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* ===== Arabic / RTL support ===== */
html[lang="ar"], [dir="rtl"] {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
}
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; font-family: "IBM Plex Sans Arabic", sans-serif; }
[dir="rtl"] .card ul li,
[dir="rtl"] .product-card ul li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .card ul li::before, [dir="rtl"] .card ul li::after,
[dir="rtl"] .product-card ul li::before, [dir="rtl"] .product-card ul li::after { left: auto; right: 0; }
[dir="rtl"] .value-list .value { border-left: none; border-right: 3px solid var(--indigo); padding: 2px 20px 2px 0; }
[dir="rtl"] .check-list li { flex-direction: row-reverse; }

/* ===== Header ===== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249, 249, 251, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] header.site-header { background: rgba(7, 13, 26, 0.88); }

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  max-width: var(--max-width);
  margin: 0 auto;
}

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

.brand img.logo-img {
  height: 44px;
  width: auto;
}

/* retained in case older markup references it */
.brand .logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand .logo-badge img { width: 20px; height: auto; }
.brand .brand-text {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

nav.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

nav.primary-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

nav.primary-nav a:hover,
nav.primary-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--indigo);
}

.nav-cta {
  background: var(--cta);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
}

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

/* ===== Services mega-menu ===== */
.has-menu { position: relative; }
.nav-menu-trigger { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-menu-trigger svg { width: 14px; height: 14px; stroke: currentColor; transition: transform 0.15s ease; }
.has-menu:hover .nav-menu-trigger svg,
.has-menu:focus-within .nav-menu-trigger svg { transform: rotate(180deg); }
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(10, 22, 40, 0.12);
  padding: 22px;
  width: 560px;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  z-index: 70;
}
.has-menu:hover .mega-menu,
.has-menu:focus-within .mega-menu { display: grid; }
.mega-menu .menu-group .menu-group-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo);
  margin-bottom: 10px;
  font-weight: 600;
}
.mega-menu .menu-group a {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  padding: 7px 0;
}
.mega-menu .menu-group a:hover { color: var(--indigo); }

/* ===== Mobile nav toggle & dropdown ===== */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.nav-toggle svg { width: 24px; height: 24px; stroke: var(--ink); }
.nav-toggle .icon-close { display: none; }
.nav-toggle.open .icon-bars { display: none; }
.nav-toggle.open .icon-close { display: block; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 28px rgba(12, 14, 26, 0.1);
  padding: 8px 28px 24px;
}
.mobile-nav.open { display: block; }
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav ul li { border-bottom: 1px solid var(--border); }
.mobile-nav ul li:last-child { border-bottom: none; }
.mobile-nav ul a {
  display: block;
  padding: 14px 2px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.mobile-nav ul a[aria-current="page"] { color: var(--indigo); }
.mobile-nav .mobile-cta { display: block; text-align: center; margin-top: 16px; }

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 90px;
  background: var(--bg);
}

.hero-bg-deco {
  position: absolute;
  top: 0; right: 0;
  width: 54%;
  height: 100%;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 95%);
  mask-image: linear-gradient(to left, #000 40%, transparent 95%);
  pointer-events: none;
}

.hero-bg-deco .shape {
  position: absolute;
  border: 1.5px solid var(--border);
  background: rgba(79, 63, 224, 0.03);
}

.hero .inner { position: relative; z-index: 1; }

.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 680px;
  color: var(--ink);
}

.hero p.lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 560px;
  margin: 0 0 34px;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--cta); color: #fff !important; box-shadow: 0 10px 24px rgba(15,118,110,0.28); }
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-1px); }

.btn-outline { border: 1.5px solid var(--border); color: var(--ink) !important; background: var(--bg-card); }
.btn-outline:hover { border-color: var(--indigo); color: var(--indigo) !important; }

.btn-ghost-dark { border: 1.5px solid rgba(255,255,255,0.28); color: #fff !important; }
.btn-ghost-dark:hover { border-color: var(--indigo-strong); background: rgba(255,255,255,0.06); }

.btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.hero-meta {
  margin-top: 36px;
  font-size: 0.86rem;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }

/* ===== Page header (inner pages) ===== */
.page-header {
  padding: 68px 0 56px;
  border-bottom: 1px solid var(--border);
}
.page-header .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 16px;
}
.page-header h1 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 760px;
  color: var(--ink);
}
.page-header p { color: var(--muted); max-width: 620px; margin: 0; font-size: 1.05rem; }

/* ===== Sections ===== */
section { padding: 92px 0; }
section.alt { background: var(--bg-card-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.tight { padding: 56px 0; }

.section-head { max-width: 680px; margin: 0 0 56px; }
.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.section-head p { color: var(--muted); margin: 0; font-size: 1.02rem; }

/* ===== Grids & cards ===== */
.grid { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 34px;
}

.card .icon, .problem-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--indigo-tint);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .icon svg, .problem-card .icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--indigo);
}

.card h3 { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.card p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.card ul { margin: 16px 0 0; padding-left: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.card ul li { margin-bottom: 9px; padding-left: 24px; position: relative; }
.card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--indigo);
}
.card ul li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 10.5px;
  width: 5px; height: 8px;
  border-right: 1.5px solid var(--indigo);
  border-bottom: 1.5px solid var(--indigo);
  transform: rotate(45deg);
}

/* ===== Stat band with big faded number ===== */
.stat-band {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}
.stat-band .big-num {
  position: absolute;
  left: -0.05em;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(6rem, 14vw, 11rem);
  font-weight: 800;
  color: var(--ink);
  opacity: 0.06;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.stat-band .content { position: relative; z-index: 1; }
.stat-band .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 10px;
}
.stat-band .label { color: var(--muted); font-size: 1rem; margin-bottom: 6px; }
.stat-band .num { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }

/* ===== Check / value list ===== */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--ink);
  font-weight: 500;
}
.check-list li .bullet {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--indigo);
  position: relative;
  margin-top: 2px;
}
.check-list li .bullet::after {
  content: "";
  position: absolute;
  left: 6px; top: 4px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.value-list { margin: 0; padding: 0; }
.value-list .value {
  border-left: 3px solid var(--indigo);
  padding: 2px 0 2px 20px;
  margin-bottom: 26px;
}
.value-list .value h4 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.value-list .value p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ===== Split layout ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* ===== Numbered service sections (sticky-card pattern) ===== */
.num-section {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.num-section:first-of-type { border-top: none; }

.num-section .idx {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--indigo);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.num-section h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.num-section .tagline { color: var(--indigo); font-weight: 600; font-size: 0.98rem; margin: 0 0 18px; }
.num-section .body-text { color: var(--muted); font-size: 1rem; margin: 0 0 22px; max-width: 540px; }

.num-card {
  position: sticky;
  top: 90px;
  border-radius: 16px;
  padding: 34px;
  min-height: 150px;
}
.num-card.dark { background: var(--navy); color: #fff; }
.num-card.dark .idx { color: rgba(255,255,255,0.4); }
.num-card.dark h4 { color: #fff; }
.num-card.dark p { color: rgba(255,255,255,0.7); }

.num-card.light { background: var(--bg-card-alt); border: 1px solid var(--border); }
.num-card.light .idx { color: var(--muted-2); }
.num-card.light h4 { color: var(--ink); }
.num-card.light p { color: var(--muted); }

.num-card .idx { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 12px; }
.num-card h4 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.num-card p { margin: 0; font-size: 0.95rem; }

/* ===== CTA banner (dark) ===== */
.cta-banner {
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  padding: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-banner h2 { margin: 0 0 10px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.cta-banner p { margin: 0; color: rgba(255,255,255,0.68); font-size: 1rem; }

/* ===== Contact page ===== */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; }

.info-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
}
.info-card h3 { margin: 0 0 20px; color: var(--ink); font-weight: 700; }
.info-row { display: flex; gap: 12px; margin-bottom: 18px; }
.info-row .label { font-weight: 600; color: var(--ink); min-width: 92px; font-size: 0.92rem; }
.info-row .value { color: var(--muted); font-size: 0.92rem; }

form.contact-form { display: flex; flex-direction: column; gap: 16px; }
form.contact-form label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}
form.contact-form input,
form.contact-form select,
form.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg-card);
}
form.contact-form input:focus,
form.contact-form select:focus,
form.contact-form textarea:focus {
  outline: none;
  border-color: var(--indigo);
}
form.contact-form textarea { resize: vertical; min-height: 120px; }
form.contact-form button { border: none; cursor: pointer; font-family: inherit; }

/* Honeypot field — hidden from real visitors, left for spam bots to fill in */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-feedback {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.form-feedback.success {
  background: #e9f9ef;
  color: #166c3b;
  border: 1px solid #b7e8c8;
}
.form-feedback.error {
  background: #fdecec;
  color: #a4222c;
  border: 1px solid #f3c3c3;
}

/* ===== Footer ===== */
footer.site-footer {
  /* Primary Navy per design system — distinct from the darker hero/CTA-band navy */
  background: var(--navy-soft);
  color: #a6abc4;
  padding: 52px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.footer-brand img { height: 26px; width: auto; margin-bottom: 16px; }
.footer-grid h4 {
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 700;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid ul li { margin-bottom: 11px; font-size: 0.92rem; }
.footer-grid ul a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 22px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { margin-left: 18px; }
.footer-bottom a:hover { color: #fff; }

/* ===== Floating chat bubble ===== */
.chat-bubble {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(15,118,110,0.38);
  z-index: 60;
  transition: transform 0.15s ease;
}
.chat-bubble:hover { transform: translateY(-2px) scale(1.04); }
.chat-bubble svg { width: 24px; height: 24px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  nav.primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .grid { grid-template-columns: 1fr 1fr; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .num-section { grid-template-columns: 1fr; }
  .num-card { position: static; }
  .hero-bg-deco { width: 100%; opacity: 0.5; }
}

@media (min-width: 901px) {
  .nav-toggle { display: none !important; }
  .mobile-nav { display: none !important; }
}

@media (max-width: 580px) {
  .grid, .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 52px; }
  section { padding: 52px 0; }
  .cta-banner { padding: 34px; flex-direction: column; align-items: flex-start; }
  .chat-bubble { right: 18px; bottom: 18px; width: 48px; height: 48px; }
  .brand img.logo-img { height: 34px; }
  .nav-cta { display: none; }
  .nav-wrap { padding: 12px 18px; }
  .mobile-nav { padding: 8px 18px 20px; }
}

/* ===== KPI dashboard tiles ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.kpi-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 28px;
}
.kpi-tile .kpi-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--indigo-tint);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-tile .kpi-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--indigo);
}
.kpi-tile .kpi-num {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.kpi-tile .kpi-label {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 10px;
}
.kpi-tile.dark {
  background: var(--navy);
  border-color: var(--navy);
}
.kpi-tile.dark .kpi-num { color: #fff; }
.kpi-tile.dark .kpi-label { color: rgba(255,255,255,0.65); }
.kpi-tile.dark .kpi-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.kpi-tile.dark .kpi-icon svg { stroke: #fff; }

/* ===== Testimonial ===== */
.testimonial {
  background: var(--navy);
  color: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 50px;
  position: relative;
  overflow: hidden;
}
.testimonial .quote-mark {
  font-family: "IBM Plex Mono", monospace;
  font-size: 3.6rem;
  font-weight: 800;
  color: rgba(255,255,255,0.18);
  line-height: 1;
  margin-bottom: 4px;
}
.testimonial blockquote {
  margin: 0 0 28px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: 760px;
  font-style: normal;
}
.testimonial blockquote.placeholder {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  font-style: italic;
}
.testimonial .attribution {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial .avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}
.testimonial .name { font-weight: 700; font-size: 0.95rem; }
.testimonial .role { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin-top: 2px; }

/* ===== Product cards ===== */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 32px;
}
.product-card .badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--warning-tint);
  color: var(--warning);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.product-card h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ink);
}
.product-card .product-tagline {
  color: var(--indigo);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 16px;
}
.product-card p.desc {
  color: var(--muted);
  font-size: 0.97rem;
  margin: 0 0 20px;
}
.product-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}
.product-card ul li {
  margin-bottom: 9px;
  padding-left: 24px;
  position: relative;
}
.product-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--indigo);
}
.product-card ul li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 10.5px;
  width: 5px; height: 8px;
  border-right: 1.5px solid var(--indigo);
  border-bottom: 1.5px solid var(--indigo);
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .mega-menu { position: static; transform: none; width: auto; box-shadow: none; border: none; padding: 0; }
  .has-menu .mega-menu { display: none !important; }
}

/* ===== Accessibility: skip link & focus ring ===== */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted-2);
  padding: 20px 0 0;
}
.breadcrumb a { color: var(--muted-2); }
.breadcrumb a:hover { color: var(--indigo); }
.breadcrumb .sep { margin: 0 6px; }
.breadcrumb .current { color: var(--muted); }

/* ===== Sector / trust strip ===== */
.sector-strip {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sector-strip .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.sector-strip .chips { display: flex; gap: 12px; flex-wrap: wrap; }
.sector-strip .chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-card-alt);
}

/* ===== Problem cards (3-up) ===== */
.problem-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 32px;
}
.problem-card .q { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.problem-card p.a { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ===== Badges (generic, neutral) ===== */
.badge-neutral {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  color: var(--navy-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== FAQ accordion ===== */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--indigo);
  flex-shrink: 0;
  font-weight: 400;
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 20px; color: var(--muted); font-size: 0.95rem; max-width: 680px; }

/* ===== Service hub group cards ===== */
.service-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 34px;
}
.service-group .group-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo);
  margin-bottom: 10px;
  font-weight: 600;
}
.service-group h3 { margin: 0 0 10px; }
.service-group p.group-desc { color: var(--muted); font-size: 0.93rem; margin: 0 0 18px; }
.service-group ul { list-style: none; margin: 0; padding: 0; }
.service-group ul li { border-top: 1px solid var(--border); }
.service-group ul li:first-child { border-top: none; }
.service-group ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 2px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--ink);
}
.service-group ul li a:hover { color: var(--indigo); }
.service-group ul li a .arrow { color: var(--indigo); transition: transform 0.12s ease; }
.service-group ul li a:hover .arrow { transform: translateX(3px); }

/* ===== Language switcher ===== */
.lang-switch {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 2px;
}
.lang-switch:hover { color: var(--indigo); }

/* ===== Dark-mode patches for remaining fixed-colour components ===== */
:root[data-theme="dark"] .badge-neutral { background: #1b2740; color: #c7cfe6; }
:root[data-theme="dark"] .form-feedback.success { background: #0f2a1d; color: #7be3a4; border-color: #1c4a32; }
:root[data-theme="dark"] .form-feedback.error { background: #341213; color: #ff9b95; border-color: #5c2426; }

/* ===== Theme + language controls (header) ===== */
.header-controls { display: flex; align-items: center; gap: 14px; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--indigo); color: var(--indigo); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Header brand logo swaps for readability against the header background */
.brand .logo-dark-mode { display: none; }
:root[data-theme="dark"] .brand .logo-light-mode { display: none; }
:root[data-theme="dark"] .brand .logo-dark-mode { display: block; }

/* Footer language switch (mirrors header .lang-switch, tuned for dark footer bg) */
.footer-lang-switch {
  color: #c7cde6;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 5px 14px;
  display: inline-flex;
}
.footer-lang-switch:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

/* ===== People / leadership cards ===== */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.person-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 30px; }
.person-card .portrait {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  margin-bottom: 16px;
  background: repeating-linear-gradient(135deg, var(--border) 0 1px, transparent 1px 11px), var(--bg-card-alt);
  border: 1px dashed var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 0.82rem;
  text-align: center;
  padding: 10px;
}
.person-card h3 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.person-card .role { color: var(--indigo); font-weight: 600; font-size: 0.88rem; margin: 0 0 10px; }
.person-card p.bio { color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; }
.person-card .linkedin { font-size: 0.85rem; font-weight: 600; color: var(--indigo); }
@media (max-width: 900px) { .people-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .people-grid { grid-template-columns: 1fr; } }

/* ===== Case study cards (placeholder-ready) ===== */
.case-study-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.case-study-item { display: grid; grid-template-columns: 1fr 2fr; gap: 16px 36px; padding: 32px 0; border-bottom: 1px solid var(--border); }
.case-study-item .sector { color: var(--indigo); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: "IBM Plex Mono", monospace; }
.case-study-item h3 { margin: 10px 0 14px; font-size: 1.25rem; }
.case-study-item dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 0.92rem; }
.case-study-item dt { color: var(--muted-2); }
.case-study-item dd { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .case-study-item { grid-template-columns: 1fr; } }

/* Sitewide notice bar for placeholder content (dismissible, matches honeypot/a11y conventions) */
.draft-banner { background: var(--warning-tint); color: var(--warning); font-size: 0.86rem; }
.draft-banner .inner { max-width: var(--max-width); margin: 0 auto; padding: 9px 28px; display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.draft-banner button { font: inherit; font-weight: 600; color: inherit; background: none; border: 1px solid currentColor; border-radius: 6px; padding: 3px 12px; cursor: pointer; flex-shrink: 0; }
[dir="rtl"] .case-study-item dl { grid-template-columns: max-content 1fr; }

/* ===== Product card screenshot ===== */
.product-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.product-card .shot-wrap {
  aspect-ratio: 12 / 7;
  overflow: hidden;
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border);
}
.product-card .shot-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.product-card .pc-body { padding: 32px; flex: 1; display: flex; flex-direction: column; }
.product-card .pc-body ul { margin-top: auto; padding-top: 4px; }

/* ===== Hero headline accent word (brand teal) ===== */
.hero h1 .accent { color: var(--cta); }
:root[data-theme="dark"] .hero h1 .accent,
.hero-bg-deco ~ .inner h1 .accent { color: var(--indigo-strong); }

/* ===== Hero v2: two-column layout with large brand-mark art (concept-aligned) ===== */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}
.hero h1.stacked { line-height: 1.04; }
.hero h1.stacked span.line { display: block; }

.hero-sub-link {
  margin: 14px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
}
.hero-sub-link a { color: var(--indigo); }
.hero-sub-link a:hover { color: var(--cta); }
:root[data-theme="dark"] .hero-sub-link a { color: #9fb4d9; }

.hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}
.hero-art .glow {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cta) 0%, transparent 70%);
  opacity: 0.22;
  filter: blur(30px);
  z-index: 0;
}
.hero-art img.hero-art-mark {
  position: relative;
  z-index: 1;
  width: min(68%, 380px);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35));
}

/* Full-bleed squares behind the whole hero, matching the brand concept:
   monochrome (navy family only — no teal, that's reserved for the mark),
   soft blurred edges, densely packed/overlapping, no drop-shadow "floating
   card" look. Depth comes from three opacity steps of the same fill, not
   from colour variety. */
.hero-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-shapes .sq {
  position: absolute;
  border-radius: 24%;
  background: var(--shape-fill);
  filter: blur(3px);
}
.hero-shapes .sq-a { opacity: 0.9; }
.hero-shapes .sq-b { opacity: 0.6; }
.hero-shapes .sq-c { opacity: 0.38; }
/* inset-inline-end (not right) so the shape layer mirrors to the left along
   with the art panel on RTL pages, instead of staying pinned to the
   physical right edge and colliding with the now-right-aligned text. */
/* Sizes use clamp() with a vw component so shapes scale up with the
   viewport instead of staying a fixed px size and reading as sparse,
   gap-filled dots on wide screens. */
.hero-shapes .sq1 { width: clamp(230px, 17vw, 340px); height: clamp(230px, 17vw, 340px); top: -10%;  inset-inline-end: 24%; transform: rotate(-10deg); }
.hero-shapes .sq2 { width: clamp(190px, 14vw, 280px); height: clamp(190px, 14vw, 280px); top: -8%;   inset-inline-end: -6%; transform: rotate(14deg); }
.hero-shapes .sq3 { width: clamp(170px, 13vw, 250px); height: clamp(170px, 13vw, 250px); top: 20%;   inset-inline-end: -8%; transform: rotate(6deg); }
.hero-shapes .sq4 { width: clamp(250px, 19vw, 370px); height: clamp(250px, 19vw, 370px); bottom: -12%; inset-inline-end: -2%; transform: rotate(-7deg); }
.hero-shapes .sq5 { width: clamp(170px, 13vw, 250px); height: clamp(170px, 13vw, 250px); bottom: 0%;  inset-inline-end: 28%; transform: rotate(11deg); }
.hero-shapes .sq6 { width: clamp(140px, 10vw, 200px); height: clamp(140px, 10vw, 200px); top: 2%;    inset-inline-end: 14%; transform: rotate(16deg); }
.hero-shapes .sq7 { width: clamp(120px, 9vw, 170px);  height: clamp(120px, 9vw, 170px);  top: 40%;   inset-inline-end: 10%; transform: rotate(-18deg); }
.hero-shapes .sq8 { width: clamp(160px, 12vw, 230px); height: clamp(160px, 12vw, 230px); top: 56%;   inset-inline-end: -4%; transform: rotate(9deg); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 260px; margin-bottom: 4px; }
  .hero-art img.hero-art-mark { width: min(56%, 260px); }
  .hero-shapes .sq1, .hero-shapes .sq4 { width: 150px; height: 150px; }
  .hero-shapes .sq2, .hero-shapes .sq3, .hero-shapes .sq5 { width: 100px; height: 100px; }
  .hero-shapes .sq6, .hero-shapes .sq7, .hero-shapes .sq8 { display: none; }
}

/* ===== Hero redesign: technology ecosystem visualization =====
   The hero follows the site-wide light/dark toggle like every other
   section (via the standard --ink/--bg/etc. tokens); only the eyebrow and
   headline accent are pinned to brand teal in both themes. The ecosystem
   graphic itself is a single SVG whose fills/strokes/icons are driven by
   the --eco-* tokens defined alongside the theme tokens near the top of
   this file, so it repaints automatically between the light (white glass
   card) and dark (teal glass glow) variants — no duplicate markup. */
.hero { background: var(--indigo-tint); }
.hero .eyebrow { color: var(--indigo-strong); }
.hero h1 .accent { color: var(--indigo-strong); }

.hero-eco { min-height: 440px; }
.eco-stage {
  position: relative;
  width: min(100%, 460px);
  margin: 0 auto;
  z-index: 1;
}
.eco-graphic {
  width: 100%;
  height: auto;
  display: block;
}
.eco-halo { opacity: var(--eco-glow-opacity); }
.eco-lines {
  stroke: var(--eco-line);
  stroke-opacity: var(--eco-line-opacity);
}
.eco-stop-a { stop-color: var(--eco-card-a); }
.eco-stop-b { stop-color: var(--eco-card-b); }
.eco-hub-stop-a { stop-color: var(--eco-hub-a); }
.eco-hub-stop-b { stop-color: var(--eco-hub-b); }
.eco-glow-stop { stop-color: var(--eco-stroke); }
.eco-hex {
  fill: url(#ecoGlass);
  stroke: var(--eco-stroke);
  stroke-opacity: var(--eco-stroke-opacity);
  stroke-width: 1.5;
  filter: drop-shadow(var(--eco-shadow));
}
.eco-hex-hub {
  fill: url(#ecoHub);
  stroke: var(--eco-hub-stroke);
  stroke-opacity: var(--eco-hub-stroke-opacity);
}
.eco-icon { color: var(--eco-icon); }
.eco-icon-hub { color: var(--eco-hub-icon); }
/* Positioning (translate) lives on the SVG transform attribute of
   .eco-node; animation/hover transforms are applied to the nested
   .eco-node-inner instead, since a CSS transform on the same element as
   the attribute would replace it outright and reset every node to the
   SVG origin. */
.eco-node-inner {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease;
}
.eco-node:hover .eco-node-inner { transform: scale(1.06); }
.eco-node:hover .eco-hex { stroke-opacity: 0.85; }

.eco-label {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--eco-label);
  white-space: nowrap;
  pointer-events: none;
}
[dir="rtl"] .eco-label { letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {
  .eco-line {
    stroke-dasharray: 5 9;
    animation: eco-flow 3.2s linear infinite;
  }
  .eco-halo { animation: eco-pulse 5s ease-in-out infinite; }
  .eco-node-inner { animation: eco-float 6s ease-in-out infinite; }
  .eco-n1 .eco-node-inner { animation-delay: 0s; }
  .eco-n2 .eco-node-inner { animation-delay: .4s; }
  .eco-n3 .eco-node-inner { animation-delay: .8s; }
  .eco-n4 .eco-node-inner { animation-delay: 1.2s; }
  .eco-n5 .eco-node-inner { animation-delay: 1.6s; }
  .eco-n6 .eco-node-inner { animation-delay: 2s; }
}
@keyframes eco-flow { to { stroke-dashoffset: -28; } }
@keyframes eco-pulse { 0%, 100% { opacity: calc(var(--eco-glow-opacity) * 0.7); } 50% { opacity: calc(var(--eco-glow-opacity) * 1.6); } }
@keyframes eco-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (max-width: 900px) {
  .hero-eco { min-height: 300px; margin-top: 28px; }
  .eco-stage { width: min(92%, 340px); }
  .eco-label { font-size: 0.56rem; }
}

/* ===== Video trigger (poster thumbnail with play button) ===== */
.video-trigger {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  margin-top: 18px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 12 / 7;
  background: var(--bg-card-alt);
  font: inherit;
}
.video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.video-trigger:hover img { transform: scale(1.04); }
.video-trigger .play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.05) 60%);
}
.video-trigger .play-badge span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.5);
  border: 1.5px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.video-trigger:hover .play-badge span { transform: scale(1.08); background: var(--cta); border-color: var(--cta); }
.video-trigger .play-badge svg { width: 22px; height: 22px; fill: #fff; margin-inline-start: 3px; }
.video-trigger .watch-label {
  position: absolute;
  left: 14px; right: 14px; bottom: 10px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ===== Video modal (lightbox) ===== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
}
.video-modal.open { display: flex; }
.video-modal .vm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 14, 0.86);
  backdrop-filter: blur(4px);
}
.video-modal .vm-box {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.video-modal video {
  width: 100%;
  max-height: 82vh;
  display: block;
  background: #000;
}
.video-modal .vm-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-modal .vm-close:hover { background: var(--cta); border-color: var(--cta); }
[dir="rtl"] .video-modal .vm-close { right: auto; left: 0; }
@media (max-width: 640px) {
  .video-modal { padding: 16px; }
  .video-modal .vm-close { top: -40px; width: 32px; height: 32px; }
}

/* ===== Scroll-reveal =====
   main.js adds .reveal only when prefers-reduced-motion is not set, so
   reduced-motion visitors never have content hidden behind a class that
   depends on JS/scroll to reveal it. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }