/* ═══════════════════════════════════════════════════════════════════════
   ARLITECH Design System — Design 2  [Industrial Rebuild]
   Fonts: Open Sans — same as arlitech.hu
   Colors: #080808 · #0E0E0E · #1A1A1A · #F0F0F0 · #E53935
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Black / white / red — spread tones for clear contrast */
  --black:      #090909;   /* page bg, hero */
  --dark:       #141414;   /* alternate dark sections */
  --mid:        #222222;   /* cards on dark */
  --graphite:   #2C2C2C;   /* elevated / hover */
  --light:      #CCCCCC;   /* light text on dark */
  --white:      #F5F5F5;   /* light section bg */
  --red:        #E53935;
  --red-dark:   #C62828;
  --red-glow:   rgba(229, 57, 53, 0.15);

  /* Grey scale helpers */
  --grey-mid:     #555555;
  --grey-light:   #999999;

  --text-primary:   #EDEDED;
  --text-secondary: rgba(237, 237, 237, 0.56);
  --text-muted:     rgba(237, 237, 237, 0.34);

  --border:     rgba(255, 255, 255, 0.09);
  --border-mid: rgba(255, 255, 255, 0.16);

  /* Sharp corners everywhere */
  --radius-sm:  0px;
  --radius:     0px;
  --radius-lg:  0px;
  --radius-xl:  0px;

  --transition: 150ms ease-out;
  --transition-slow: 300ms ease-out;

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Open Sans', system-ui, sans-serif;
  background-color: var(--black);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn i { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--transition); }
.btn:hover i { transform: translateX(3px); }

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 0 20px var(--red-glow);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-mid);
  color: var(--text-primary);
}
.btn-outline:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { color: var(--text-primary); }

.btn--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }

/* ── Section Labels ────────────────────────────────────────────────────── */
.section-eyebrow {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.875rem;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.section-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
  transition: gap var(--transition);
}
.section-link i { width: 14px; height: 14px; transition: transform var(--transition); }
.section-link:hover i { transform: translateX(4px); }

/* ── Sections ──────────────────────────────────────────────────────────── */
.section {
  padding: 6rem 0;
}

/* ── LIGHT sections (even children of body) ──────────────────────────────── */
body > .section:nth-child(even) {
  background: #F5F5F5;
  color: #111111;
}

/* ── DARK sections (odd children of body) ────────────────────────────────── */
body > .section:nth-child(odd) {
  background: #1C1C1C;
  color: #EDEDED;
}

/* Strip all old class-based backgrounds so nth-child rules govern */
.section--dark, .section--white, .section--expertise,
.section--feature-dark, .section--partners {
  background: inherit;
}
.section--expertise { padding: 5rem 0; }

/* CTA — force dark regardless of nth position */
.section--cta { background: #111111 !important; color: #EDEDED; }

/* ── Image Placeholders ────────────────────────────────────────────────── */
.img-placeholder {
  background: var(--mid);
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: 'Open Sans', sans-serif;
}
.img-placeholder i { width: 28px; height: 28px; opacity: 0.4; }
.img-placeholder--about { width: 100%; height: 360px; border-radius: var(--radius-lg); }
.img-placeholder--feature { width: 100%; height: 400px; border-radius: var(--radius-lg); }
.img-placeholder--blog { width: 100%; height: 200px; border-radius: var(--radius) var(--radius) 0 0; }
.img-placeholder--ref { width: 100%; height: 80px; border-radius: var(--radius-sm); }

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-top: 3px solid var(--red);
  border-bottom: 1px solid var(--border);
  background: rgba(8, 8, 8, 0.97);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

.navbar.scrolled {
  background: rgba(8, 8, 8, 0.99);
  border-bottom-color: var(--border-mid);
}

.navbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem 0 1rem;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--light);
  margin-left: 7rem;
}
.navbar__logo span { color: var(--red); }
.navbar__mark {
  flex-shrink: 0;
  height: 70px;
  width: auto;
  display: block;
}

.navbar__wordmark {
  height: 40px;
  width: auto;
  display: block;
}
/* Hide the wordmark inside the top navbar — the triangle mark is enough,
   long Hungarian nav links cause overlap otherwise. Keep it in the footer. */
.navbar .navbar__wordmark { display: none; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  justify-self: end;
  margin-right: 3rem;
}
html[lang="en"] .navbar__links { margin-right: 6rem; }
.navbar__links a {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  transition: color var(--transition), border-color var(--transition);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.navbar__links a:hover,
.navbar__links a.active {
  color: var(--text-primary);
  border-bottom-color: var(--red);
}

.navbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-left: 1.5rem;
}

/* ── Hamburger ─────────────────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--light);
  border-radius: 0;
  transition: var(--transition);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile Nav ────────────────────────────────────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--black);
  border-top: 3px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.mobile-nav__inner a {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.mobile-nav__inner a:hover { color: var(--text-primary); }
.mobile-nav__inner .btn { margin-top: 0.5rem; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-h);
  /* Make .hero a blend-mode root so the wordmark's mix-blend-mode can reach
     the globe canvas behind it (otherwise hero__content's stacking context
     would isolate the blend). */
  isolation: isolate;
  background: var(--black);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#globe-canvas {
  position: absolute;
  left: 50%;
  /* push center of canvas to bottom edge so upper half is visible */
  bottom: -720px;
  transform: translateX(-50%);
  width: 1440px;
  height: 1440px;
  pointer-events: none;
  opacity: 0.92;
}

@media (max-width: 1200px) {
  #globe-canvas { width: 1200px; height: 1200px; bottom: -600px; }
}
@media (max-width: 900px) {
  #globe-canvas { width: 900px; height: 900px; bottom: -450px; opacity: 0.55; }
}
@media (max-width: 600px) {
  #globe-canvas { display: none; }
}

.hero__grid {
  display: none;
}

.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(8,8,8,0.92) 0%, transparent 70%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  /* No z-index here on purpose — it would create a stacking context that
     contains the wordmark's mix-blend-mode and prevent it from blending with
     the globe canvas. DOM order keeps this above canvas/noise/vignette. */
  padding: 4rem 2rem 10rem;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.25rem;
}

.hero__wordmark {
  display: block;
  height: clamp(48px, 6vw, 80px);
  width: auto;
  margin: 0 auto 1.75rem;
  user-select: none;
  -webkit-user-drag: none;
  /* Lighten blend mode: only pixels lighter than the backdrop show through.
     The wordmark's transparent areas remain transparent (no effect on
     transparent pixels), and the white text stays white over the dark hero,
     letting the red attack arcs flow visibly through the surrounding space. */
  mix-blend-mode: lighten;
}

.hero__title {
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.25rem;
  max-width: 760px;
}

.hero__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 500px;
  margin-bottom: 2.25rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

/* Stats bar — flat industrial structure */
/* ── KPI Rail — right-edge floating HUD widgets ───────────────────────── */
.hero__kpi-rail {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.kpi-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.375rem 0.875rem 0.875rem;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  border-left: 1px solid rgba(255, 255, 255, 0.055);
  min-width: 210px;
  opacity: 0;
  transform: translateX(56px);
  animation: kpiSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--ki) * 70ms + 400ms);
}

.kpi-card__bar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: kpiBarGrow 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--ki) * 70ms + 560ms);
}

.kpi-card__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 57, 53, 0.10);
  border: 1px solid rgba(229, 57, 53, 0.22);
  border-radius: 7px;
  color: var(--red);
  flex-shrink: 0;
}

.kpi-card__icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.kpi-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.kpi-card__num {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kpi-card__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

@keyframes kpiSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes kpiBarGrow {
  to { transform: scaleY(1); }
}

/* ── Hero Entry Animations ─────────────────────────────────────────────── */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXPERTISE
   ══════════════════════════════════════════════════════════════════════════ */
.expertise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  border-radius: 0;
  overflow: hidden;
}

.expertise-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}
.expertise-card:nth-child(3n) { border-right: none; }
.expertise-card:nth-child(4), .expertise-card:nth-child(5), .expertise-card:nth-child(6) { border-bottom: none; }
.expertise-card:hover { background: rgba(229, 57, 53, 0.04); border-color: var(--red); }

.expertise-card__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-mid);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
  background: rgba(229, 57, 53, 0.08);
  transition: background var(--transition), border-color var(--transition);
}
.expertise-card__icon i { width: 18px; height: 18px; }

.expertise-card__body { flex: 1; min-width: 0; }
.expertise-card__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
  letter-spacing: 0.01em;
}
.expertise-card__sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.expertise-card__arrow {
  width: 14px; height: 14px;
  color: var(--red);
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.expertise-card:hover .expertise-card__arrow { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE SPLIT (OT SECURITY)
   ══════════════════════════════════════════════════════════════════════════ */
.section--feature-dark {
  overflow: hidden;
}

.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.feature-brand {
  margin-bottom: 1.5rem;
}

.feature-split__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #0F0F0F;
  margin-bottom: 1rem;
}

.feature-split__body {
  font-size: 1rem;
  color: #404040;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.feature-split__list {
  margin-bottom: 2rem;
}
.feature-split__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: #404040;
  margin-bottom: 0.625rem;
}
.feature-split__list i { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; }

.feature-split__image { position: relative; }

.feature-split__overlay-icons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.feature-split__icon-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hex-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: rgba(229,57,53,0.08);
  color: var(--red);
  transition: border-color var(--transition), background var(--transition);
}
.feature-split__icon-row:hover .hex-icon {
  border-color: var(--red);
  background: rgba(229,57,53,0.14);
}
.hex-icon i { width: 20px; height: 20px; }
.hex-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════════════════ */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about__values { display: flex; flex-direction: column; gap: 1rem; }
.about__value {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}
.about__value > i { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 3px; }
.about__value strong {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0F0F0F;
  margin-bottom: 0.125rem;
}
.about__value p { font-size: 0.875rem; color: #555555; line-height: 1.6; }

/* Mobile mockup */
.about__media { position: relative; }
.about__mobile-mockup { display: flex; justify-content: center; }

/* Dun & Bradstreet certificate badge — replaces the old mockup card */
.dnb-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background: #FFFFFF;
  border: 2px solid var(--border-mid);
  border-top: 3px solid var(--red);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  text-decoration: none;
}
.dnb-badge:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: 0 12px 40px rgba(229, 57, 53, 0.18);
}
.dnb-badge img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.mockup-frame {
  width: 260px;
  background: var(--dark);
  border: 2px solid var(--border-mid);
  border-top: 3px solid var(--red);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--light);
}
.mockup-header span span { color: var(--red); }
.mockup-header svg { flex-shrink: 0; }
.mockup-header i { width: 16px; height: 16px; color: var(--text-muted); }
.mockup-body { padding: 1.25rem 1rem; }
.mockup-body h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.625rem;
  line-height: 1.3;
}
.mockup-body p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem; }
.mockup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mockup-footer i { width: 14px; height: 14px; }

.about__stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.stat-card {
  background: var(--dark);
  border: 1px solid var(--border-mid);
  border-top: 2px solid transparent;
  border-radius: 0;
  padding: 1.25rem;
  text-align: center;
}
.stat-card:hover { border-top-color: var(--red); }
.stat-card--accent { background: var(--red); border-color: var(--red); }
.stat-card__num {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.125rem;
}
.stat-card--accent .stat-card__num { color: var(--white); }
.stat-card__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-card--accent .stat-card__label { color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════════════════════════
   SERVICES GRID
   ══════════════════════════════════════════════════════════════════════════ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-mid);
  border-radius: 0;
  overflow: hidden;
  margin-top: 3rem;
}

.service-card {
  background: var(--dark);
  padding: 2rem;
  transition: background var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  border-top: 2px solid transparent;
}
.service-card:hover { background: rgba(229, 57, 53, 0.04); border-top-color: var(--red); }
.service-card:first-child { border-top-color: var(--red); }

.service-card__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  background: rgba(229,57,53,0.07);
  margin-bottom: 1.25rem;
}
.service-card__icon i { width: 20px; height: 20px; }

.service-card__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.service-card__body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 1.5rem;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
  margin-top: auto;
  transition: gap var(--transition);
}
.service-card__link i { width: 13px; height: 13px; transition: transform var(--transition); }
.service-card__link:hover i { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   REFERENCES
   ══════════════════════════════════════════════════════════════════════════ */
.references__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.ref-card {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
  min-height: 80px;
}
.ref-card:hover { border-color: var(--red); background: rgba(229,57,53,0.03); }

.ref-card img {
  width: 120px;
  height: 48px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--transition);
}
.ref-card:hover img { opacity: 0.9; }

.case-study-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.case-study-card {
  background: var(--dark);
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  border-radius: 0;
  padding: 2rem;
  transition: border-color var(--transition), border-top-color var(--transition);
}
.case-study-card:hover { border-color: var(--border-mid); border-top-color: var(--red); }

.case-study-card__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
  display: block;
}

.case-study-card__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.case-study-card__body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PARTNERS
   ══════════════════════════════════════════════════════════════════════════ */
.section--partners { padding: 4rem 0; }

.partners__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.partner-logo {
  flex-shrink: 0;
  width: 160px;
  height: 68px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  background: rgba(255,255,255,0.93);
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}
.partner-logo:hover { background: #ffffff; border-color: rgba(229,57,53,0.4); }

.partner-logo img {
  width: 110px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: none;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.partner-logo:hover img { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   BLOG
   ══════════════════════════════════════════════════════════════════════════ */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.blog-card {
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  border-radius: 0;
  overflow: hidden;
  transition: border-color var(--transition), border-top-color var(--transition);
  background: var(--dark);
  display: flex;
  flex-direction: column;
}
.blog-card:hover { border-color: var(--border-mid); border-top-color: var(--red); }

.blog-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.blog-card__tag {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
  display: block;
}

.blog-card__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.25rem;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red);
  margin-top: auto;
  transition: gap var(--transition);
}
.blog-card__link i { width: 13px; height: 13px; transition: transform var(--transition); }
.blog-card__link:hover i { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.section--cta { background: var(--black); padding: 4rem 0; }

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--dark);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--border-mid);
  border-radius: 0;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--red-glow) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.cta-banner__body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 480px;
}

.cta-banner__actions {
  display: flex;
  gap: 0.875rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--dark);
  border-top: 2px solid var(--border-mid);
  padding: 4rem 0 2rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 3rem;
}

.footer__tagline {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--red);
  margin: 0.5rem 0 1rem;
  text-transform: lowercase;
}

.footer__about {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 280px;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer__col h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}
.footer__col a,
.footer__col p {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
  transition: color var(--transition);
  line-height: 1.5;
}
.footer__col a:hover { color: var(--red); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.footer__bottom-links {
  display: flex;
  gap: 1.5rem;
}
.footer__bottom-links a { color: var(--text-muted); transition: color var(--transition); }
.footer__bottom-links a:hover { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════════════════════ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGE SHARED STYLES
   ══════════════════════════════════════════════════════════════════════════ */
.page-hero {
  padding: calc(var(--nav-h) + 5rem) 0 5rem;
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(229,57,53,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero__eyebrow { margin-bottom: 0.875rem; }
.page-hero__title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 1.25rem;
  max-width: 700px;
}
.page-hero__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 2rem;
}

.content-block { padding: 5rem 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.feature-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.feature-list__item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.05);
  transition: border-color var(--transition);
}
.feature-list__item:hover { border-color: var(--red); }
.feature-list__item i { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.feature-list__item h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0F0F0F;
  margin-bottom: 0.25rem;
}
.feature-list__item p { font-size: 0.875rem; color: #404040; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .expertise__grid { grid-template-columns: repeat(2, 1fr); }
  .expertise-card:nth-child(2n) { border-right: none; }
  .expertise-card:nth-child(3) { border-right: 1px solid var(--border); }
  .expertise-card:nth-child(5), .expertise-card:nth-child(6) { border-bottom: none; }
  .expertise-card:nth-child(4) { border-bottom: 1px solid var(--border); }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
  .references__grid { grid-template-columns: repeat(4, 1fr); }
  .about__grid { grid-template-columns: 1fr; gap: 3rem; }
  .feature-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Wordmark is always hidden in the navbar — the triangle mark is the brand
   identifier here. Keep the wordmark in footer where there's room. */
@media (max-width: 1180px) {
  .navbar__links { gap: 1.625rem; }
}
@media (max-width: 1060px) {
  .navbar__links { gap: 1.25rem; }
  .navbar__links a,
  .navbar__dropdown-trigger { font-size: 0.75rem; letter-spacing: 0.05em; }
  .navbar__right { padding-left: 0.75rem; gap: 0.875rem; }
}


/* Switch to mobile menu earlier so the desktop nav never overflows */
@media (max-width: 980px) {
  .navbar__links { display: none; }
  .hamburger { display: flex; }
  .navbar__right .btn { display: none; }
}

@media (max-width: 768px) {
  .container { padding: 0 1.25rem; }
  .section { padding: 4rem 0; }

  .hero__content { padding: 3rem 1.25rem 8rem; }
  .hero__kpi-rail { display: none; }

  .expertise__grid { grid-template-columns: 1fr; }
  .expertise-card { border-right: none !important; }

  .feature-split { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
  .about__stat-cards { grid-template-columns: repeat(2, 1fr); }
  .references__grid { grid-template-columns: repeat(3, 1fr); }
  .case-study-strip { grid-template-columns: 1fr; }
  .blog__grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-banner__actions { flex-direction: column; width: 100%; }
  .footer__nav { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .two-col { grid-template-columns: 1fr; gap: 2rem; }
  .hero { min-height: auto; padding-bottom: 0; }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .services__grid { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr; }
  .references__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .scroll-reveal { opacity: 1; transform: none; }
  .animate-in { opacity: 1; transform: none; animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FLOATING ANIMATIONS — 21st.dev patterns
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes floatYslow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes floatRotate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1.5deg); }
  66%       { transform: translateY(-5px) rotate(-1deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--red-glow), 0 0 12px var(--red-glow); }
  50%       { box-shadow: 0 0 0 8px transparent, 0 0 28px rgba(229,57,53,0.3); }
}
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes shimmerSlide {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes drawLineX {
  0%   { transform: scaleX(0); opacity: 0; }
  60%  { opacity: 0.9; }
  100% { transform: scaleX(1); opacity: 0.5; }
}
@keyframes drawLineY {
  0%   { transform: scaleY(0); opacity: 0; }
  60%  { opacity: 0.9; }
  100% { transform: scaleY(1); opacity: 0.5; }
}
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(0.7) translateY(8px); }
  70%  { transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes blinkDot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── Particles canvas (rising dots) ───────────────────────────────────── */
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
}

/* ── Scan line overlay — single pass only ──────────────────────────────── */
.hero__scanline { display: none; }

/* ── Accent grid lines (drawing in) ───────────────────────────────────── */
.hero__accent-lines { display: none; }

/* ── Floating badge widgets in hero ───────────────────────────────────── */
.hero__float-badges {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.float-badge {
  position: absolute;
  background: rgba(8, 8, 8, 0.97);
  border: 1px solid rgba(229, 57, 53, 0.35);
  border-radius: 0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  animation: badgePop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.float-badge:nth-child(2) { animation-delay: 0.12s; }
.float-badge:nth-child(3) { animation-delay: 0.24s; }
.float-badge:nth-child(4) { animation-delay: 0.36s; }

.float-badge__icon {
  width: 32px; height: 32px;
  background: rgba(229,57,53,0.12);
  border: 1px solid rgba(229,57,53,0.3);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--red); flex-shrink: 0;
}
.float-badge__icon i { width: 15px; height: 15px; }

.float-badge__text { display: flex; flex-direction: column; }
.float-badge__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: 2px;
}
.float-badge__value {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* Badge positions */
.float-badge--tl { top: 22%; right: 8%;  }
.float-badge--tr { top: 42%; right: 5%;  }
.float-badge--bl { bottom: 22%; right: 12%; }
.float-badge--br { top: 60%; right: 3%;   }

@media (max-width: 900px) {
  .hero__float-badges { display: none; }
  .hero__accent-lines { display: none; }
}

/* Live dot on badge */
.float-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: blinkDot 1.8s ease-in-out infinite;
}


/* ── No shimmer — structural border approach ───────────────────────────── */
.service-card,
.expertise-card,
.case-study-card,
.blog-card {
  position: relative;
  overflow: hidden;
}

/* ── Icon — no float, instant color shift ─────────────────────────────── */
.expertise-card__icon {
  transition: background var(--transition), border-color var(--transition);
}
.expertise-card:hover .expertise-card__icon {
  background: rgba(229,57,53,0.14);
  border-color: var(--red);
}

/* ── Stat cards — border shift only, no transform ─────────────────────── */
.stat-card {
  transition: border-color var(--transition);
}
.stat-card:hover {
  border-color: rgba(229,57,53,0.5);
}
.stat-card--accent:hover { border-color: var(--red-dark); }

/* ── Pulsing dot for live/active indicators ────────────────────────────── */
.pulse-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.pulse-dot::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: blinkDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── CTA banner — static glow, no pulse ───────────────────────────────── */
.cta-banner::before {
  /* static */
}

/* ── Service card icon — color shift only ─────────────────────────────── */
.service-card__icon {
  transition: background var(--transition), border-color var(--transition);
}
.service-card:hover .service-card__icon {
  background: rgba(229,57,53,0.14);
  border-color: var(--red);
}

/* ── Feature list item — full border highlight ────────────────────────── */
.feature-list__item {
  border-top: 2px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.feature-list__item:hover {
  border-top-color: var(--red);
  background: rgba(229,57,53,0.04);
}

/* ── Navbar logo — static, no float ──────────────────────────────────── */
.navbar__mark {
  transition: opacity var(--transition);
}
.navbar__logo:hover .navbar__mark {
  opacity: 0.85;
}

/* ── Blog card thumb zoom on hover (handled in .blog-card__thumb section) */

/* ── Partner logo hover float (transition already set above) ──────────── */

/* ── Hero logo mark — static ──────────────────────────────────────────── */
.hero-logo-ring {
  position: relative;
  display: inline-flex;
}

/* ── Staggered scroll-reveal delays ───────────────────────────────────── */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.19s; }
.stagger-4 { transition-delay: 0.26s; }
.stagger-5 { transition-delay: 0.33s; }
.stagger-6 { transition-delay: 0.40s; }

/* ══════════════════════════════════════════════════════════════════════════
   PARTNERS MARQUEE CAROUSEL
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.partners-carousel {
  overflow: hidden;
  position: relative;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
}
.partners-carousel::before,
.partners-carousel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
/* Fades use currentColor's section bg via inline rules below per nth-child */
.partners-carousel::before { left: 0; }
.partners-carousel::after  { right: 0; }
body > .section:nth-child(even) .partners-carousel::before { background: linear-gradient(90deg, #F5F5F5, transparent); }
body > .section:nth-child(even) .partners-carousel::after  { background: linear-gradient(-90deg, #F5F5F5, transparent); }
body > .section:nth-child(odd)  .partners-carousel::before { background: linear-gradient(90deg, #1C1C1C, transparent); }
body > .section:nth-child(odd)  .partners-carousel::after  { background: linear-gradient(-90deg, #1C1C1C, transparent); }

.partners-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 38s linear infinite;
  padding: 0.5rem 0;
  will-change: transform;
}
.partners-track--reverse {
  animation-name: marquee-reverse;
  animation-duration: 42s;
}
.partners-carousel:hover .partners-track { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════════════════════
   BLOG CARD THUMB (replaces img-placeholder--blog)
   ══════════════════════════════════════════════════════════════════════════ */
.blog-card__thumb {
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.blog-card__thumb::before {
  content: '';
  position: absolute;
  right: -30px; bottom: -30px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(229,57,53,0.10) 0%, transparent 70%);
  transition: background 0.4s ease;
}
.blog-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(229,57,53,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,57,53,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
.blog-card__thumb-icon {
  width: 72px; height: 72px;
  color: var(--red);
  opacity: 0.16;
  position: relative;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blog-card:hover .blog-card__thumb::before {
  background: radial-gradient(circle, rgba(229,57,53,0.20) 0%, transparent 70%);
}
.blog-card:hover .blog-card__thumb-icon {
  opacity: 0.28;
  transform: scale(1.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   OT SECURITY VISUAL (replaces img-placeholder--feature in OT section)
   ══════════════════════════════════════════════════════════════════════════ */
.ot-security-visual {
  width: 100%;
  min-height: 360px;
  background: var(--black);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--red);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.ot-security-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(229,57,53,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,57,53,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ot-security-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(229,57,53,0.07) 0%, transparent 70%);
}
.ot-nodes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 360px;
}
.ot-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
.ot-node__icon {
  width: 56px; height: 56px;
  border: 1px solid rgba(229,57,53,0.3);
  border-radius: 0;
  background: rgba(229,57,53,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  transition: border-color var(--transition), background var(--transition);
}
.ot-node__icon i { width: 24px; height: 24px; }
.ot-node__label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.ot-security-visual:hover .ot-node__icon {
  border-color: rgba(229,57,53,0.4);
  background: rgba(229,57,53,0.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   REFERENCE LOGO PLACEHOLDER
   ══════════════════════════════════════════════════════════════════════════ */
.ref-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  transition: border-color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.ref-card:hover { border-color: var(--border-mid); background: rgba(255,255,255,0.02); }
.ref-logo-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.ref-logo-ph i { width: 22px; height: 22px; color: var(--text-muted); opacity: 0.45; }
.ref-logo-ph span {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   CASE STUDY CARD THUMB
   ══════════════════════════════════════════════════════════════════════════ */
.cs-card__thumb {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  border-bottom: 1px solid var(--border);
}
.cs-card__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(229,57,53,0.07) 0%, transparent 60%);
}
.cs-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(229,57,53,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,57,53,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cs-card__thumb-icon {
  width: 80px; height: 80px;
  color: var(--red);
  opacity: 0.14;
  position: relative;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cs-card:hover .cs-card__thumb-icon {
  opacity: 0.24;
  transform: scale(1.06);
}
.cs-card__thumb-sector {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.65;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
   WHITE / LIGHT SECTION VARIANT
   Applies a clean white background with dark-mode-adapted content.
   Use: add class  section--white  alongside  section  on any section tag.
   ══════════════════════════════════════════════════════════════════════════ */
.section--white {
  background: #F5F5F5;
}

/* ── Base typography on white ──────────────────────────────────────────── */
.section--white .section-eyebrow { color: var(--red); }

.section--white .section-title,
.section--white h2,
.section--white h3 { color: #111111; }

.section--white h4 { color: #222222; }

.section--white .section-body,
.section--white p { color: #444444; }

.section--white .section-link { color: var(--red); }

/* ── Buttons on white ──────────────────────────────────────────────────── */
.section--white .btn-outline {
  border-color: rgba(0,0,0,0.22);
  color: #111111;
}
.section--white .btn-outline:hover {
  border-color: rgba(0,0,0,0.38);
  background: rgba(0,0,0,0.04);
}
.section--white .btn-ghost { color: #444444; }
.section--white .btn-ghost:hover { color: #111111; }

/* ── Services grid on white ────────────────────────────────────────────── */
.section--white .services__grid {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.07);
}
.section--white .service-card {
  background: #FFFFFF;
}
.section--white .service-card:hover { background: rgba(229,57,53,0.03); }
.section--white .service-card__title { color: #111111; }
.section--white .service-card__body  { color: #444444; }
.section--white .service-card__icon {
  border-color: rgba(229,57,53,0.2);
  background: rgba(229,57,53,0.06);
}
.section--white .service-card::before { background: linear-gradient(90deg, transparent, rgba(229,57,53,0.3), transparent); }

/* ── Expertise grid on white ───────────────────────────────────────────── */
.section--white .expertise__grid { border-color: rgba(0,0,0,0.08); }
.section--white .expertise-card  { border-color: rgba(0,0,0,0.07); }
.section--white .expertise-card:hover { background: rgba(229,57,53,0.03); }
.section--white .expertise-card__title { color: #111111; }
.section--white .expertise-card__sub   { color: #666666; }
.section--white .expertise-card__icon {
  border-color: rgba(229,57,53,0.16);
  background: rgba(229,57,53,0.05);
}

/* ── Blog cards on white ───────────────────────────────────────────────── */
.section--white .blog-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
}
.section--white .blog-card:hover {
  border-color: rgba(0,0,0,0.12);
  border-top-color: var(--red);
}
.section--white .blog-card__title   { color: #111111; }
.section--white .blog-card__excerpt { color: #4B5563; }
/* Blog card thumb keeps dark bg intentionally — dark media on white = great contrast */

/* ── About / company section on white ─────────────────────────────────── */
.section--white .about__value strong { color: #111111; }
.section--white .about__value p      { color: #6B7280; }
/* Mockup frame stays dark (dark device on white = intentional contrast) */

.section--white .stat-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
}
.section--white .stat-card__num   { color: var(--red); }
.section--white .stat-card__label { color: #9CA3AF; }
.section--white .stat-card--accent {
  background: var(--red);
  border-color: var(--red);
}
.section--white .stat-card--accent .stat-card__num   { color: #FFFFFF; }
.section--white .stat-card--accent .stat-card__label { color: rgba(255,255,255,0.78); }

/* ── References section on white ──────────────────────────────────────── */
.section--white .ref-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
}
.section--white .ref-card:hover { border-color: var(--red); background: rgba(229,57,53,0.02); }
.section--white .ref-card img {
  filter: none;
  opacity: 0.75;
  mix-blend-mode: multiply;
}
.section--white .ref-card:hover img { opacity: 1; }

.section--white .case-study-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.1);
}
.section--white .case-study-card:hover {
  border-top-color: var(--red);
  border-color: rgba(0,0,0,0.12);
}
.section--white .case-study-card__title { color: #111111; }
.section--white .case-study-card__body  { color: #4B5563; }

/* ── Feature list on white (inner pages) ──────────────────────────────── */
.section--white .feature-list__item {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.section--white .feature-list__item:hover { border-left-color: var(--red); }
.section--white .feature-list__item h4 { color: #111111; }
.section--white .feature-list__item p  { color: #4B5563; }

/* ── Section header on white ───────────────────────────────────────────── */
.section--white .section-header h2 { color: #111111; }

/* ── Page-hero bottom border bleed into white section ─────────────────── */
.page-hero + .section--white { border-top: none; }

/* ── content-block inherits white when class is added ─────────────────── */
.content-block.section--white { background: #F5F5F5; }


/* ── Filter buttons on white (blog.html) ──────────────────────────────── */
.section--white .filter-btn {
  border-color: rgba(0,0,0,0.14);
  color: #444444;
  background: transparent;
}
.section--white .filter-btn.active,
.section--white .filter-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(229,57,53,0.05);
}



/* ── Case study cards on white (case_study.html) ──────────────────────── */
.section--white .cs-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.section--white .cs-card:hover {
  border-color: var(--red);
  box-shadow: 0 8px 32px rgba(229,57,53,0.12);
}
.section--white .cs-card__title { color: #111111; }
.section--white .cs-card__desc  { color: #444444; }
.section--white .cs-metric__label { color: #6B7280; }


/* ══════════════════════════════════════════════════════════════════════════
   ALTERNATING SECTION OVERRIDES — placed last to win cascade
   Even = light bg + dark text | Odd = dark bg + light text
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT sections: all component text → dark ───────────────────────────── */
body > .section:nth-child(even) .section-eyebrow  { color: var(--red); }
body > .section:nth-child(even) .section-title,
body > .section:nth-child(even) h2,
body > .section:nth-child(even) h3               { color: #0F0F0F; }
body > .section:nth-child(even) h4               { color: #1A1A1A; }
body > .section:nth-child(even) .section-body,
body > .section:nth-child(even) p                { color: #404040; }
body > .section:nth-child(even) .section-link    { color: var(--red); }
body > .section:nth-child(even) .section-header  { border-bottom-color: rgba(0,0,0,0.1); }
body > .section:nth-child(even) .btn-outline     { border-color: rgba(0,0,0,0.22); color: #111111; }
body > .section:nth-child(even) .btn-outline:hover { border-color: rgba(0,0,0,0.38); background: rgba(0,0,0,0.04); }
body > .section:nth-child(even) .btn-ghost       { color: #404040; }
body > .section:nth-child(even) .btn-ghost:hover { color: #111111; }

/* Cards on light sections */
body > .section:nth-child(even) .expertise-card  { border-right-color: rgba(0,0,0,0.09); border-bottom-color: rgba(0,0,0,0.09); }
body > .section:nth-child(even) .expertise-card:hover { background: rgba(229,57,53,0.05); border-color: var(--red); }
body > .section:nth-child(even) .expertise-card__title { color: #0F0F0F; }
body > .section:nth-child(even) .expertise-card__sub   { color: #666666; }

body > .section:nth-child(even) .service-card           { background: rgba(0,0,0,0.05); border-top-color: rgba(0,0,0,0.08); }
body > .section:nth-child(even) .service-card:hover     { background: rgba(229,57,53,0.05); border-top-color: var(--red); }
body > .section:nth-child(even) .service-card__title    { color: #0F0F0F; }
body > .section:nth-child(even) .service-card__body     { color: #404040; }

body > .section:nth-child(even) .stat-card              { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); border-top-color: transparent; }
body > .section:nth-child(even) .stat-card__num         { color: #0F0F0F; }
body > .section:nth-child(even) .stat-card__label       { color: #666666; }
body > .section:nth-child(even) .stat-card--accent      { background: var(--red); }
body > .section:nth-child(even) .stat-card--accent .stat-card__num   { color: #fff; }
body > .section:nth-child(even) .stat-card--accent .stat-card__label { color: rgba(255,255,255,0.8); }

body > .section:nth-child(even) .blog-card              { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); border-top-color: transparent; }
body > .section:nth-child(even) .blog-card:hover        { border-color: rgba(0,0,0,0.16); border-top-color: var(--red); }
body > .section:nth-child(even) .blog-card__title       { color: #0F0F0F; }
body > .section:nth-child(even) .blog-card__excerpt     { color: #404040; }

body > .section:nth-child(even) .case-study-card        { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); border-top-color: transparent; }
body > .section:nth-child(even) .case-study-card:hover  { border-color: rgba(0,0,0,0.16); border-top-color: var(--red); }
body > .section:nth-child(even) .case-study-card__title { color: #0F0F0F; }
body > .section:nth-child(even) .case-study-card__body  { color: #404040; }

body > .section:nth-child(even) .ref-card               { background: #FFFFFF; border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
body > .section:nth-child(even) .ref-card:hover         { border-color: rgba(229,57,53,0.4); box-shadow: 0 4px 12px rgba(229,57,53,0.12); }
body > .section:nth-child(even) .ref-card img           { filter: none; opacity: 0.85; mix-blend-mode: multiply; }
body > .section:nth-child(even) .ref-card:hover img     { opacity: 1; }

body > .section:nth-child(even) .feature-list__item     { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.09); }
body > .section:nth-child(even) .feature-list__item h4  { color: #0F0F0F; }
body > .section:nth-child(even) .feature-list__item p   { color: #404040; }

body > .section:nth-child(even) .feature-split__title   { color: #0F0F0F; }
body > .section:nth-child(even) .feature-split__body    { color: #404040; }
body > .section:nth-child(even) .feature-split__list li { color: #404040; }

body > .section:nth-child(even) .about__value strong    { color: #0F0F0F; }
body > .section:nth-child(even) .about__value p         { color: #555555; }

body > .section:nth-child(even) .services__grid         { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
body > .section:nth-child(even) .partner-logo           { background: #FFFFFF; border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
body > .section:nth-child(even) .partner-logo:hover     { background: #FFFFFF; border-color: rgba(229,57,53,0.4); box-shadow: 0 4px 12px rgba(229,57,53,0.12); }

/* ── DARK sections: component text → light (already default, just reinforce) ── */
body > .section:nth-child(odd) .section-eyebrow  { color: var(--red); }
body > .section:nth-child(odd) .section-title,
body > .section:nth-child(odd) h2,
body > .section:nth-child(odd) h3               { color: #EDEDED; }
body > .section:nth-child(odd) h4               { color: #D0D0D0; }
body > .section:nth-child(odd) .section-body,
body > .section:nth-child(odd) p                { color: rgba(237,237,237,0.6); }
body > .section:nth-child(odd) .section-link    { color: var(--red); }
body > .section:nth-child(odd) .section-header  { border-bottom-color: rgba(255,255,255,0.1); }
body > .section:nth-child(odd) .btn-outline     { border-color: rgba(255,255,255,0.2); color: #EDEDED; }
body > .section:nth-child(odd) .btn-outline:hover { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.05); }
body > .section:nth-child(odd) .btn-ghost       { color: rgba(237,237,237,0.6); }
body > .section:nth-child(odd) .btn-ghost:hover { color: #EDEDED; }

/* Cards on dark sections */
body > .section:nth-child(odd) .service-card           { background: rgba(255,255,255,0.05); border-top-color: rgba(255,255,255,0.08); }
body > .section:nth-child(odd) .service-card:hover     { background: rgba(229,57,53,0.08); border-top-color: var(--red); }
body > .section:nth-child(odd) .service-card__title    { color: #EDEDED; }
body > .section:nth-child(odd) .service-card__body     { color: rgba(237,237,237,0.6); }

body > .section:nth-child(odd) .expertise-card         { border-right-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); }
body > .section:nth-child(odd) .expertise-card__title  { color: #EDEDED; }
body > .section:nth-child(odd) .expertise-card__sub    { color: rgba(237,237,237,0.5); }

body > .section:nth-child(odd) .stat-card              { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); border-top-color: transparent; }
body > .section:nth-child(odd) .stat-card__num         { color: #EDEDED; }
body > .section:nth-child(odd) .stat-card__label       { color: rgba(237,237,237,0.5); }

body > .section:nth-child(odd) .blog-card              { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); border-top-color: transparent; }
body > .section:nth-child(odd) .blog-card:hover        { border-color: rgba(255,255,255,0.14); border-top-color: var(--red); }
body > .section:nth-child(odd) .blog-card__title       { color: #EDEDED; }
body > .section:nth-child(odd) .blog-card__excerpt     { color: rgba(237,237,237,0.6); }

body > .section:nth-child(odd) .case-study-card        { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); border-top-color: transparent; }
body > .section:nth-child(odd) .case-study-card__title { color: #EDEDED; }
body > .section:nth-child(odd) .case-study-card__body  { color: rgba(237,237,237,0.6); }

body > .section:nth-child(odd) .ref-card               { background: #FFFFFF; border-color: rgba(255,255,255,0.1); }
body > .section:nth-child(odd) .ref-card:hover         { border-color: rgba(229,57,53,0.5); }
body > .section:nth-child(odd) .ref-card img           { filter: none; opacity: 0.9; mix-blend-mode: multiply; }
body > .section:nth-child(odd) .ref-card:hover img     { opacity: 1; }

body > .section:nth-child(odd) .feature-list__item     { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
body > .section:nth-child(odd) .feature-list__item h4  { color: #EDEDED; }
body > .section:nth-child(odd) .feature-list__item p   { color: rgba(237,237,237,0.6); }

body > .section:nth-child(odd) .feature-split__title   { color: #EDEDED; }
body > .section:nth-child(odd) .feature-split__body    { color: rgba(237,237,237,0.6); }
body > .section:nth-child(odd) .feature-split__list li { color: rgba(237,237,237,0.6); }

body > .section:nth-child(odd) .about__value strong    { color: #EDEDED; }
body > .section:nth-child(odd) .about__value p         { color: rgba(237,237,237,0.6); }

body > .section:nth-child(odd) .services__grid         { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
body > .section:nth-child(odd) .partner-logo           { background: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.1); }
body > .section:nth-child(odd) .partner-logo:hover     { background: #FFFFFF; border-color: rgba(229,57,53,0.5); }

/* CTA section — always dark */
/* CTA section overrides — !important to beat nth-child(even) on body */
body > .section--cta .section-eyebrow      { color: var(--red) !important; }
body > .section--cta .section-title,
body > .section--cta h2,
body > .section--cta h3                    { color: #EDEDED !important; }
body > .section--cta .section-body,
body > .section--cta p                     { color: rgba(237,237,237,0.6) !important; }
body > .section--cta .cta-banner__title    { color: #EDEDED !important; }
body > .section--cta .cta-banner__body     { color: rgba(237,237,237,0.6) !important; }
body > .section--cta .btn-outline          { border-color: rgba(255,255,255,0.22); color: #EDEDED; }
body > .section--cta .btn-ghost            { color: rgba(237,237,237,0.6); }
body > .section--cta .btn-ghost:hover      { color: #EDEDED; }

/* ══════════════════════════════════════════════════════════════════════════
   VISUAL ELEMENTS — adapt mockup/visual backgrounds per section
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DARK sections (odd): brighten dark elements so they're visible ──────── */
body > .section:nth-child(odd) .mockup-frame {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body > .section:nth-child(odd) .mockup-header { border-bottom-color: rgba(255,255,255,0.08); }
body > .section:nth-child(odd) .mockup-footer { border-top-color: rgba(255,255,255,0.08); }
body > .section:nth-child(odd) .mockup-header { color: #EDEDED; }
body > .section:nth-child(odd) .mockup-body h4 { color: #EDEDED; }
body > .section:nth-child(odd) .mockup-body p  { color: rgba(237,237,237,0.55); }
body > .section:nth-child(odd) .mockup-footer  { color: rgba(237,237,237,0.55); }

body > .section:nth-child(odd) .ot-security-visual {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
body > .section:nth-child(odd) .ot-node__label { color: rgba(237,237,237,0.55); }

body > .section:nth-child(odd) .cs-card__thumb {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ── LIGHT sections (even): darken light elements / keep dark mockups ─── */
body > .section:nth-child(even) .mockup-frame {
  background: #111111;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
body > .section:nth-child(even) .mockup-header { color: #EDEDED; border-bottom-color: rgba(255,255,255,0.08); }
body > .section:nth-child(even) .mockup-body h4 { color: #EDEDED; }
body > .section:nth-child(even) .mockup-body p  { color: rgba(237,237,237,0.55); }
body > .section:nth-child(even) .mockup-footer  { color: rgba(237,237,237,0.55); border-top-color: rgba(255,255,255,0.08); }

body > .section:nth-child(even) .ot-security-visual {
  background: #111111;
  border-color: rgba(255,255,255,0.1);
}
body > .section:nth-child(even) .ot-node__label { color: rgba(237,237,237,0.55); }

body > .section:nth-child(even) .cs-card__thumb {
  background: #1A1A1A;
  border-bottom-color: rgba(255,255,255,0.08);
}
body > .section:nth-child(even) .cs-card__thumb-icon { opacity: 0.2; }

/* ══════════════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — HU / EN
   ══════════════════════════════════════════════════════════════════════════ */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-mid);
  height: 32px;
  margin-right: 0.875rem;
  overflow: hidden;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 0 0.7rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  transition: color var(--transition), background var(--transition);
  cursor: pointer;
}
.lang-switch__btn + .lang-switch__btn {
  border-left: 1px solid var(--border);
}
.lang-switch__btn:hover:not(.lang-switch__btn--active) {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}
.lang-switch__btn--active {
  color: #FFFFFF;
  background: var(--red);
}

/* Mobile nav variant — full-width row */
.mobile-nav .lang-switch {
  margin: 1.5rem 0 0;
  align-self: stretch;
  height: 44px;
}
.mobile-nav .lang-switch__btn { flex: 1; font-size: 0.8125rem; }

@media (max-width: 980px) {
  .navbar .lang-switch { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT SECTION — OpenStreetMap (Leaflet)
   ══════════════════════════════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 2rem;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-info { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-info { grid-column: auto; }
}

.contact-photo {
  position: relative;
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--red);
  overflow: hidden;
  min-height: 420px;
  background: #1a1a1a;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.contact-photo:hover img { transform: scale(1.04); }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-info__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-info__item > i {
  width: 22px;
  height: 22px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 4px;
}
.contact-info__item h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.contact-info__item p,
.contact-info__item a {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.contact-info__item a:hover { color: var(--red); }

.contact-info__cta {
  margin-top: auto;
  align-self: flex-start;
}

.contact-map {
  position: relative;
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--red);
  overflow: hidden;
  min-height: 420px;
  background: #f3f3f3;
}
#contactMap { width: 100%; height: 100%; min-height: 420px; }

.leaflet-container {
  font-family: 'Open Sans', sans-serif !important;
  outline: none;
}

/* ── LIGHT theme map (light section bg) ────────────────────────────────── */
.contact-map--light.leaflet-container { background: #f3f3f3 !important; }
.contact-map--light .leaflet-popup-content-wrapper,
.contact-map--light .leaflet-popup-tip {
  background: #ffffff !important;
  color: #1a1a1a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}
.contact-map--light .leaflet-popup-close-button { color: rgba(0,0,0,0.45) !important; }
.contact-map--light .leaflet-popup-close-button:hover { color: #1a1a1a !important; }
.contact-map--light .leaflet-control-zoom a,
.contact-map--light .leaflet-bar a {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
.contact-map--light .leaflet-control-attribution {
  background: rgba(255,255,255,0.85) !important;
  color: rgba(0,0,0,0.55) !important;
}
.contact-map--light .leaflet-control-attribution a { color: rgba(0,0,0,0.7) !important; }

/* ── DARK theme map (dark section bg) ──────────────────────────────────── */
.contact-map--dark.leaflet-container { background: #1f1f1f !important; }
.contact-map--dark .leaflet-popup-content-wrapper,
.contact-map--dark .leaflet-popup-tip {
  background: #222222 !important;
  color: #ededed !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
.contact-map--dark .leaflet-popup-close-button { color: rgba(255,255,255,0.55) !important; }
.contact-map--dark .leaflet-popup-close-button:hover { color: #ffffff !important; }
.contact-map--dark .leaflet-control-zoom a,
.contact-map--dark .leaflet-bar a {
  background: #2a2a2a !important;
  color: #ededed !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.contact-map--dark .leaflet-control-attribution {
  background: rgba(28,28,28,0.85) !important;
  color: rgba(255,255,255,0.55) !important;
}
.contact-map--dark .leaflet-control-attribution a { color: rgba(255,255,255,0.75) !important; }

/* ── Shared popup/zoom styling ─────────────────────────────────────────── */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { border-radius: 0 !important; }
.leaflet-popup-content {
  margin: 0.875rem 1rem !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}
.leaflet-popup-content strong { color: var(--red); }
.leaflet-popup-close-button { padding: 6px 8px 0 0 !important; }
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}
.leaflet-control-attribution { font-size: 10px !important; }

/* Custom marker — pulsing red dot */
.arlitech-marker { position: relative; }
.arlitech-marker__inner {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  background: var(--red);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(229,57,53,0.25), 0 4px 10px rgba(0,0,0,0.5);
  z-index: 2;
}
.arlitech-marker__pulse {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border: 2px solid var(--red);
  border-radius: 50%;
  animation: arlitechPulse 2s ease-out infinite;
}
@keyframes arlitechPulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Contact info text inherits its parent section's color so it auto-adapts:
   black on light backgrounds, white on dark backgrounds. */
.contact-info__item h4,
.contact-info__item p,
.contact-info__item a { color: inherit; }
.contact-info__item p,
.contact-info__item a { opacity: 0.85; }
.contact-info__item a:hover { color: var(--red); opacity: 1; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-map { min-height: 320px; }
  #contactMap   { min-height: 320px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR DROPDOWN — desktop hover, mobile <details> accordion
   ══════════════════════════════════════════════════════════════════════════ */
.navbar__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.navbar__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0 0 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.navbar__dropdown-trigger i {
  width: 12px;
  height: 12px;
  transition: transform var(--transition);
}
.navbar__dropdown:hover .navbar__dropdown-trigger,
.navbar__dropdown:focus-within .navbar__dropdown-trigger {
  color: var(--text-primary);
  border-bottom-color: var(--red);
}
.navbar__dropdown:hover .navbar__dropdown-trigger i,
.navbar__dropdown:focus-within .navbar__dropdown-trigger i {
  transform: rotate(180deg);
}

.navbar__dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: rgba(8, 8, 8, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--red);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 1010;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
/* invisible bridge so the dropdown doesn't disappear when crossing the gap */
.navbar__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 18px;
}
.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown:focus-within .navbar__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navbar__dropdown-menu a {
  display: block;
  padding: 0.625rem 1.25rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: none;
  border-bottom: none;
  transition: color var(--transition), background var(--transition), padding-left var(--transition);
}
.navbar__dropdown-menu a:hover {
  color: var(--white);
  background: rgba(229, 57, 53, 0.14);
  padding-left: 1.5rem;
}

/* Mobile nav dropdown — uses <details>/<summary> for native a11y */
.mobile-nav__dropdown {
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.mobile-nav__dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 1rem 0;
  list-style: none;
}
.mobile-nav__dropdown summary::-webkit-details-marker { display: none; }
.mobile-nav__dropdown summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--red);
  line-height: 1;
  transition: transform var(--transition);
}
.mobile-nav__dropdown[open] summary::after {
  content: '−';
}
.mobile-nav__dropdown a {
  display: block;
  padding: 0.875rem 0 0.875rem 1.25rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  font-weight: 500;
}
.mobile-nav__dropdown a:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════════
   OT SUBSITE COMPONENTS — industry cards, process steps, callouts, standards
   ══════════════════════════════════════════════════════════════════════════ */

/* — Industry / Service grid (4-col responsive) — */
.industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 2.5rem;
}
.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  background: #FFFFFF;
  transition: background var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.industry-card:hover { background: rgba(229, 57, 53, 0.04); }
.industry-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.2);
  color: var(--red);
}
.industry-card__icon i { width: 22px; height: 22px; }
.industry-card__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0F0F0F;
  line-height: 1.3;
}
.industry-card__desc {
  font-size: 0.8125rem;
  color: #555555;
  line-height: 1.5;
  margin-top: -0.25rem;
}
.industry-card__arrow {
  position: absolute;
  top: 1.75rem;
  right: 1.5rem;
  width: 16px;
  height: 16px;
  color: var(--red);
  opacity: 0.4;
  transition: opacity var(--transition), transform var(--transition);
}
.industry-card:hover .industry-card__arrow {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 1100px) { .industries__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .industries__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .industries__grid { grid-template-columns: 1fr; } }

/* — Industry chips (used on service pages for relevant-industries cross-link) — */
.industry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}
.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.industry-chip i {
  width: 18px;
  height: 18px;
  color: var(--red);
}
.industry-chip:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}
/* Light-section variant: subtle border, dark text */
body > .section:nth-child(even) .industry-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: #333;
}
body > .section:nth-child(even) .industry-chip:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--red);
  color: var(--red);
}

/* — Process steps (numbered cards) — */
.process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.process-step {
  position: relative;
  padding: 2rem 1.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 2px solid var(--red);
}
.process-step__num {
  position: absolute;
  top: -0.5rem;
  left: 1.5rem;
  background: var(--red);
  color: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.6rem;
}
.process-step__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0F0F0F;
  margin-bottom: 0.5rem;
}
.process-step__body {
  font-size: 0.9rem;
  color: #444444;
  line-height: 1.6;
}

/* — Callout quote (industry intro) — */
.callout-quote {
  border-left: 3px solid var(--red);
  padding: 1.25rem 0 1.25rem 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125rem;
  font-style: italic;
  color: #1A1A1A;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto;
}

/* — Standards badge row — */
.standards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}
.standards-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.875rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--red);
  background: rgba(229, 57, 53, 0.08);
  border: 1px solid rgba(229, 57, 53, 0.25);
}

/* — Deliverables checklist — */
.deliverables__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.875rem;
}
.deliverables__list li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.04);
  border-left: 2px solid var(--red);
  font-size: 0.9rem;
  color: #1A1A1A;
  line-height: 1.5;
}
.deliverables__list li::before {
  content: "✓";
  color: var(--red);
  font-weight: 800;
  flex-shrink: 0;
}

/* — Dark-section variants for the OT components — */
body > .section:nth-child(odd) .industries__grid {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
body > .section:nth-child(odd) .industry-card {
  background: #181818;
}
body > .section:nth-child(odd) .industry-card:hover { background: rgba(229, 57, 53, 0.12); }
body > .section:nth-child(odd) .industry-card__title { color: #EDEDED; }
body > .section:nth-child(odd) .industry-card__desc  { color: rgba(237, 237, 237, 0.6); }

body > .section:nth-child(odd) .process-step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
body > .section:nth-child(odd) .process-step__title { color: #EDEDED; }
body > .section:nth-child(odd) .process-step__body  { color: rgba(237, 237, 237, 0.65); }

body > .section:nth-child(odd) .callout-quote { color: #EDEDED; }

body > .section:nth-child(odd) .deliverables__list li {
  background: rgba(255, 255, 255, 0.04);
  color: #EDEDED;
}