/* ==========================================================================
   BOATECH CONSULTING LLC — Design System
   Brand: Deep Navy #0B1836 · Royal Blue #1565C0 · Cyan #00AEEF
   Bilingual EN / FR
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --navy:        #0B1836;
  --navy-800:    #10214a;
  --navy-700:    #162c5e;
  --royal:       #1565C0;
  --royal-dark:  #0f4d96;
  --cyan:        #00AEEF;
  --cyan-dark:   #0090c9;
  --cyan-soft:   #e6f7fe;

  --white:       #ffffff;
  --bg-soft:     #f5f8fc;
  --bg-mist:     #eef3fa;
  --border:      #dfe6f1;
  --border-soft: #edf1f8;
  --ink:         #0d1526;
  --ink-2:       #3c4a63;
  --ink-3:       #64748b;
  --ink-4:       #475569;
  --ink-inv:     rgba(255,255,255,.78);

  --ok:          #10b981;
  --danger:      #b91c1c;

  --font-sans:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  --sh-xs: 0 1px 2px rgba(11,24,54,.06);
  --sh-sm: 0 2px 8px rgba(11,24,54,.07);
  --sh-md: 0 8px 28px rgba(11,24,54,.09);
  --sh-lg: 0 20px 56px rgba(11,24,54,.13);
  --sh-cyan: 0 10px 32px rgba(0,174,239,.28);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .18s var(--ease);
  --t: .3s var(--ease);
  --t-slow: .6s var(--ease);

  --maxw: 1240px;
  --gutter: 24px;
  --header-h: 82px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--royal); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--cyan); }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cyan); color: #fff; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.85rem); font-weight: 900; letter-spacing: -.032em; }
h2 { font-size: clamp(1.8rem, 1.28rem + 2vw, 2.75rem); }
h3 { font-size: 1.135rem; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.135rem; font-weight: 700; letter-spacing: -.01em; }
h5 { font-size: 1rem; font-weight: 700; }

p { color: var(--ink-2); }
p + p { margin-top: 1.05em; }

.lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); line-height: 1.72; color: var(--ink-2); }

.overline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .755rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 16px;
}
.overline::before {
  content: '';
  width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--royal));
  border-radius: 2px;
}
.overline--light { color: var(--cyan); }

.text-cyan  { color: var(--cyan); }
.text-royal { color: var(--royal); }

.grad {
  background: linear-gradient(100deg, var(--cyan) 0%, #4db8f0 45%, var(--royal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }

.section { padding: clamp(64px, 7vw, 110px) 0; }
.section--tight { padding: clamp(48px, 5vw, 76px) 0; }
.section--soft  { background: var(--bg-soft); }
.section--mist  { background: var(--bg-mist); }
.section--navy  { background: var(--navy); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: var(--ink-inv); }

.section-head { max-width: 780px; margin-bottom: clamp(38px, 4vw, 58px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 + p { margin-top: 16px; font-size: 1.07rem; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: .945rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.15;
  text-align: center;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  border: 2px solid transparent;
}
.btn i { font-size: .88em; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

/* Gradient stops are deliberately darker than brand cyan so white label text
   clears WCAG AA (4.5:1) across the whole button, not just its right edge. */
.btn-primary {
  background: linear-gradient(120deg, #00769f 0%, var(--royal) 100%);
  color: #fff;
  box-shadow: var(--sh-cyan);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,174,239,.4); }

.btn-navy { background: var(--navy); color: #fff; box-shadow: var(--sh-md); }
.btn-navy:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); }

.btn-outline { border-color: var(--border); color: var(--navy); background: #fff; }
.btn-outline:hover { border-color: var(--cyan); color: var(--royal); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.btn-ghost-light {
  border-color: rgba(255,255,255,.32);
  color: #fff;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: var(--cyan); color: #fff; transform: translateY(-2px); }

.btn-sm { padding: 10px 18px; font-size: .87rem; }
.btn-lg { padding: 17px 32px; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--royal);
}
.link-arrow i { transition: transform var(--t-fast); font-size: .82em; }
.link-arrow:hover { color: var(--cyan); }
.link-arrow:hover i { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-stuck { box-shadow: 0 4px 24px rgba(11,24,54,.09); background: rgba(255,255,255,.97); }

.nav-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 44px; width: auto; object-fit: contain; }

.nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 11px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-menu > li > a:hover { color: var(--royal); background: var(--bg-soft); }
.nav-menu > li > a.active { color: var(--navy); font-weight: 700; }
.nav-menu > li > a.active::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--royal));
}
.nav-menu .caret { font-size: .62rem; opacity: .55; transition: transform var(--t-fast); }
.has-drop:hover .caret { transform: rotate(180deg); }

.drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(9px);
  min-width: 350px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.has-drop:hover .drop,
.has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.drop a { display: flex; gap: 13px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-md); transition: background var(--t-fast); }
.drop a:hover { background: var(--bg-soft); }
.drop .d-ico {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--cyan-soft);
  color: var(--royal);
  font-size: .92rem;
}
.drop .d-title { display: block; font-size: .91rem; font-weight: 700; color: var(--navy); line-height: 1.35; }
.drop .d-sub { display: block; font-size: .785rem; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }

.nav-actions { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }

/* ── Language switcher ──────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--bg-mist);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: .785rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-4);
  line-height: 1;
  transition: var(--t-fast);
}
.lang-switch a:hover { color: var(--royal); background: rgba(255,255,255,.75); }
.lang-switch a.is-current {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--sh-xs);
  cursor: default;
}
.lang-switch a.is-current:hover { color: var(--navy); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2.4px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, #0d1e44 45%, #123064 100%);
  color: #fff;
  padding: clamp(64px, 7vw, 104px) 0 clamp(72px, 8vw, 116px);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(720px 420px at 88% 8%, rgba(0,174,239,.26), transparent 62%),
    radial-gradient(620px 380px at 4% 92%, rgba(21,101,192,.32), transparent 60%);
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
  z-index: -1;
}
/* ── Optional hero background photo ──────────────────────
   Drop a file at assets/photos/hero-background.jpg and it appears here.
   If the file does not exist, nothing renders and the gradient shows as before.
   The image sits UNDER the navy gradient at low opacity, so headline contrast
   never drops below WCAG AA no matter what photo is used. Pick something dark
   and low-detail — a server room, a city at night, an abstract texture.
   Avoid anything busy behind the left half, where the headline sits. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url('../assets/photos/hero-background.jpg');
  background-size: cover;
  background-position: center;
  opacity: .22;
  filter: saturate(.7);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11,24,54,.92) 0%, rgba(11,24,54,.72) 45%, rgba(11,24,54,.42) 100%);
}
.hero h1 { color: #fff; }
.hero p { color: var(--ink-inv); }

.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(38px, 5vw, 68px); align-items: center; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px 8px 12px;
  border-radius: var(--r-pill);
  background: rgba(0,174,239,.13);
  border: 1px solid rgba(0,174,239,.3);
  color: #b9e9fd;
  font-size: .815rem;
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.4;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,174,239,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(0,174,239,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,174,239,0); }
}

.hero .lead { max-width: 640px; margin-top: 22px; color: var(--ink-inv); }
.hero .btn-row { margin-top: 34px; }

.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .825rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.hero-pill i { color: var(--cyan); font-size: .88em; }

.hero-cards { display: grid; gap: 15px; }
.hero-card {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: 21px 23px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.hero-card:hover { transform: translateY(-5px) translateX(4px); background: rgba(255,255,255,.1); border-color: rgba(0,174,239,.42); }
.hero-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.hero-card-ico {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1.05rem;
  color: #fff;
}
.ic-cyan  { background: linear-gradient(135deg, #00AEEF, #0090c9); }
.ic-royal { background: linear-gradient(135deg, #1565C0, #0f4d96); }
.ic-mix   { background: linear-gradient(135deg, #00AEEF, #1565C0); }
.hero-card h2 { color: #fff; font-size: 1.01rem; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.3; }
.hero-card p { font-size: .875rem; color: rgba(255,255,255,.68); line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   8. PAGE HERO
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, #0e2350 60%, #143570 100%);
  color: #fff;
  padding: clamp(56px, 6vw, 86px) 0 clamp(58px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(640px 360px at 82% 12%, rgba(0,174,239,.24), transparent 62%);
  z-index: -1;
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { color: var(--ink-inv); max-width: 660px; margin-top: 18px; }
.page-hero .btn-row { margin-top: 30px; }
.page-hero--center { text-align: center; }
.page-hero--center h1, .page-hero--center .lead { margin-inline: auto; }
.page-hero--center .btn-row { justify-content: center; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: .83rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 20px;
}
.crumbs a { color: rgba(255,255,255,.78); font-weight: 600; }
.crumbs a:hover { color: var(--cyan); }
.crumbs .sep { opacity: .45; font-size: .7rem; }
.crumbs [aria-current] { color: var(--cyan); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--royal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.card:hover::after { transform: scaleX(1); }
.card h3, .card h4 { margin-bottom: 11px; }
.card p { font-size: .93rem; line-height: 1.7; }
.card .link-arrow { margin-top: 18px; }

.card--flat { border-color: var(--border); }
.card--flat:hover { transform: none; box-shadow: var(--sh-sm); }
.card--flat::after { display: none; }

.card--soft { background: var(--bg-soft); border-color: transparent; }

.card--glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
}
.card--glass h2, .card--glass h3, .card--glass h4 { color: #fff; }
.card--glass p { color: rgba(255,255,255,.72); }
.card--glass::after { display: none; }
.card--glass:hover { background: rgba(255,255,255,.1); border-color: rgba(0,174,239,.4); }

.card-ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--cyan-soft), #dbeeff);
  color: var(--royal);
  font-size: 1.3rem;
  margin-bottom: 20px;
  transition: transform var(--t), background var(--t), color var(--t);
}
.card:hover .card-ico {
  background: linear-gradient(135deg, var(--cyan), var(--royal));
  color: #fff;
  transform: scale(1.07) rotate(-4deg);
}
.card-ico--lg { width: 62px; height: 62px; font-size: 1.48rem; border-radius: 17px; }

.num-card { position: relative; padding-top: 34px; }
.num-card .num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 700;
  color: rgba(255,255,255,.14);
  line-height: 1;
  pointer-events: none;
}
.card:not(.card--glass).num-card .num { color: var(--bg-mist); }

.feat-list { margin-top: 18px; }
.feat-list li {
  position: relative;
  padding-left: 26px;
  font-size: .9rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.feat-list li + li { margin-top: 9px; }
.feat-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0; top: .18em;
  font-size: .74rem;
  color: var(--cyan);
}

/* --------------------------------------------------------------------------
   10. TRUST BAR
   -------------------------------------------------------------------------- */
.trust-bar { background: var(--navy-800); border-top: 1px solid rgba(255,255,255,.07); padding: 34px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; text-align: center; }
.trust-item .num {
  display: block;
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--cyan), #6fd0f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.trust-item .label {
  display: block;
  margin-top: 9px;
  font-size: .795rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* --------------------------------------------------------------------------
   11. TECH TAGS
   -------------------------------------------------------------------------- */
.tech-groups { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tech-group h3 {
  font-size: .795rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 15px;
}
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--border);
  font-size: .845rem;
  font-weight: 600;
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: -.01em;
  transition: var(--t-fast);
}
.tech-tag:hover { border-color: var(--cyan); color: var(--royal); transform: translateY(-2px); box-shadow: var(--sh-xs); }

/* --------------------------------------------------------------------------
   12. PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step {
  position: relative;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.step-num {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--cyan), var(--royal));
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  font-family: var(--font-mono);
  margin-bottom: 17px;
}
.step h3 { font-size: 1.135rem; margin-bottom: 8px; }
.step p { font-size: .9rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   13. INDUSTRY TILES
   -------------------------------------------------------------------------- */
.ind-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ind-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 19px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--border-soft);
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  transition: var(--t);
}
.ind-tile i { color: var(--royal); font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; transition: var(--t-fast); }
.ind-tile:hover { border-color: var(--cyan); color: var(--royal); transform: translateY(-3px); box-shadow: var(--sh-sm); }
.ind-tile:hover i { color: var(--cyan); transform: scale(1.12); }

/* --------------------------------------------------------------------------
   14. TEAM
   -------------------------------------------------------------------------- */
.team-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.member {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 34px 30px 30px;
  transition: transform var(--t), box-shadow var(--t);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.member:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); }

/* Source photos are square; the circle is applied here so the same asset works
   at any size and the crop is never baked into the file. */
.member-photo {
  width: 156px; height: 156px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-mist);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--cyan-soft), var(--sh-sm);
  transition: box-shadow var(--t);
}
.member:hover .member-photo { box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(0,174,239,.55), var(--sh-md); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform var(--t-slow); }
.member:hover .member-photo img { transform: scale(1.06); }

/* Slot for a founder whose photo is not yet supplied */
.member-photo--empty {
  display: grid;
  place-items: center;
  border: 2px dashed var(--border);
  box-shadow: none;
  color: var(--ink-3);
  font-size: 2rem;
  background: var(--bg-soft);
}

.member-body { display: flex; flex-direction: column; flex: 1; }
.member-body h2 { font-size: 1.26rem; margin-bottom: 6px; }
.member-role {
  display: block;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 16px;
}
.member-body p { font-size: .915rem; line-height: 1.7; text-align: left; }
.member-body .feat-list { text-align: left; }

.member-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; justify-content: center; }
.member-tags span {
  font-size: .725rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--bg-mist);
  color: var(--ink-4);
  font-family: var(--font-mono);
}

.member-links { display: flex; gap: 9px; margin-top: auto; padding-top: 22px; justify-content: center; }
.member-links a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: .95rem;
  transition: var(--t-fast);
}
.member-links a:hover { background: var(--royal); color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   14b. PHOTO SLOTS
   A slot shows the real image when the file exists. If the file is missing the
   img fires onerror, .is-empty is added, and a labelled dashed placeholder is
   shown instead — so the page never displays a broken-image icon.
   -------------------------------------------------------------------------- */
.photo-slot { margin: 0; }
.photo-slot img {
  width: 100%;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--sh-md);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-mist);
}
.photo-slot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: .875rem;
  color: var(--ink-3);
  line-height: 1.6;
}
.photo-slot--wide img { aspect-ratio: 16 / 9; object-fit: contain; background: #fff; padding: 10px; }

.photo-slot-empty { display: none; }
.photo-slot.is-empty img { display: none; }
.photo-slot.is-empty figcaption { display: none; }
.photo-slot.is-empty .photo-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  border: 2px dashed var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-soft);
  text-align: center;
  padding: 30px 24px;
}
.photo-slot-empty i { font-size: 1.9rem; color: var(--royal); opacity: .7; }
.photo-slot-empty span {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  word-break: break-all;
}
.photo-slot-empty small { font-size: .82rem; color: var(--ink-3); max-width: 42ch; line-height: 1.55; }

/* --------------------------------------------------------------------------
   14c. CASE STUDIES
   -------------------------------------------------------------------------- */
.cs-meta {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 10px;
}
.cs-card h2 { font-size: 1.22rem; line-height: 1.3; margin-bottom: 11px; }

.cs-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; }
.cs-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--navy);
  line-height: 1.1;
}
.cs-stat span { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }

/* Used when a study has no measured numbers yet — a short factual line instead */
.cs-stat--text span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--royal);
  margin-top: 0;
}

/* Headline results band on a detail page */
.cs-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}
.cs-result {
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
}
.cs-result strong {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  background: linear-gradient(120deg, #00769f, var(--royal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-result span {
  display: block;
  margin-top: 10px;
  font-size: .89rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.cs-quote { text-align: center; }
.cs-quote p {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  line-height: 1.55;
  color: #fff;
  font-weight: 500;
  letter-spacing: -.015em;
}
.cs-quote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: .89rem;
  font-weight: 600;
  color: var(--cyan);
}

/* --------------------------------------------------------------------------
   15. PLACEHOLDERS
   -------------------------------------------------------------------------- */
.placeholder {
  border: 2px dashed var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-soft);
  padding: clamp(40px, 5vw, 62px) 30px;
  text-align: center;
}
.placeholder .ph-ico {
  width: 66px; height: 66px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 19px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--royal);
  font-size: 1.5rem;
}
.placeholder h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); margin-bottom: 11px; }
.placeholder p { max-width: 620px; margin-inline: auto; font-size: .96rem; }
.placeholder .btn-row { margin-top: 26px; justify-content: center; }

.ph-slot {
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 30px 26px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ph-tag {
  align-self: flex-start;
  font-size: .695rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--bg-mist);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.ph-line { height: 10px; border-radius: 5px; background: var(--bg-mist); }
.ph-line.w80 { width: 80%; }
.ph-line.w60 { width: 60%; }
.ph-line.w95 { width: 95%; }

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--sh-md);
}
.field { margin-bottom: 19px; position: relative; }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.field .req { color: var(--cyan); margin-left: 2px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  font-size: .95rem;
  color: var(--ink);
  transition: var(--t-fast);
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,174,239,.13);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa6b8; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.field-hint { font-size: .8rem; color: var(--ink-3); margin-top: 7px; }

.checkline { display: flex; gap: 11px; align-items: flex-start; font-size: .87rem; color: var(--ink-2); font-weight: 400 !important; }
.checkline input { width: auto; margin-top: 4px; accent-color: var(--royal); }

.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item + .contact-item { margin-top: 24px; }
.contact-item .ci-ico {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--cyan-soft);
  color: var(--royal);
  font-size: 1.05rem;
}
.contact-item h3 { margin-bottom: 4px; font-size: 1rem; font-weight: 700; }
.contact-item p, .contact-item a { font-size: .92rem; color: var(--ink-2); }
.contact-item a { color: var(--royal); }
.contact-item a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   17. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, #123064 55%, #0f4d96 100%);
  color: #fff;
  padding: clamp(56px, 6vw, 88px) 0;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(560px 320px at 78% 22%, rgba(0,174,239,.3), transparent 62%);
  z-index: -1;
}
.cta-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: var(--ink-inv); margin-top: 16px; font-size: 1.06rem; }
.cta-inner .btn-row { margin-top: 32px; justify-content: center; }
.cta-note { margin-top: 20px; font-size: .85rem; color: rgba(255,255,255,.55) !important; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.66); padding-top: clamp(52px, 5vw, 74px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 54px);
  padding-bottom: 46px;
}
.footer-brand img { height: 58px; width: auto; margin-bottom: 18px; opacity: .96; }
.footer-brand p { font-size: .9rem; line-height: 1.72; color: rgba(255,255,255,.6); max-width: 360px; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.82);
  font-size: .98rem;
  transition: var(--t-fast);
}
.footer-social a:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; transform: translateY(-3px); }

.footer-col .fcol-h {
  color: #fff;
  font-size: .785rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 18px;
  line-height: 1.4;
}
.footer-col li + li { margin-top: 11px; }
.footer-col a { font-size: .895rem; color: rgba(255,255,255,.62); display: inline-block; line-height: 1.5; }
.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 24px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom a { color: rgba(255,255,255,.55); }
.footer-bottom a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   19. UTILITIES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }
.mt-4 { margin-top: 48px; }
.mb-3 { margin-bottom: 32px; }

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .9rem;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; color: #fff; }

.prose h2 { margin-top: 44px; margin-bottom: 16px; }
.prose h3 { margin-top: 32px; margin-bottom: 12px; }
.prose p, .prose ul { margin-bottom: 16px; }
.prose ul li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.prose ul li::before {
  content: '';
  position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .68s var(--ease), transform .68s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   French labels run roughly 15-20% longer than English, so the nav collapses
   to the mobile menu earlier than an English-only site would need.
   -------------------------------------------------------------------------- */
@media (max-width: 1300px) {
  .nav-menu > li > a { padding: 10px 8px; font-size: .845rem; }
  .lang-switch a { min-width: 34px; padding: 6px 9px; }
  .brand img { height: 40px; }
}

@media (max-width: 1120px) {
  :root { --header-h: 74px; }

  .nav-toggle { display: flex; }
  .nav-actions .btn { display: none; }
  .lang-switch { margin-right: 2px; }

  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    padding: 14px 20px 26px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-menu > li > a { padding: 14px 6px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--border-soft); }
  .nav-menu > li > a.active::after { display: none; }
  .nav-menu > li:last-child > a { border-bottom: none; }

  .drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    min-width: 0;
    padding: 4px 0 10px 10px;
    display: none;
  }
  .has-drop.is-open .drop { display: block; }
  .has-drop:hover .drop { transform: none; }
  .drop a { padding: 10px 8px; }

  .hero-grid, .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav-actions .btn { width: auto; }
  .lang-switch a { min-width: 32px; padding: 6px 8px; font-size: .75rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom nav { gap: 16px; }
  .card { padding: 26px 22px; }
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .page-hero h1 { max-width: none; }
}

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

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .lang-switch { display: none; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   HERO CANVAS — animated particle network
   -------------------------------------------------------------------------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;           /* sits above hero-bg photo (-3), below content */
  pointer-events: none;
}

/* ==========================================================================
   GLOBAL TECH BACKGROUND CANVAS
   Fixed behind all content — visible in dark sections, subtle in light ones.
   ========================================================================== */
#global-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
  pointer-events: none;
}

/* Light sections get a subtle dot-grid texture so the page never looks blank */
.section,
.section--soft,
.section--alt {
  background-image: radial-gradient(circle, rgba(21,101,192,0.045) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Page-hero canvas (inner page dark banner) */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Keep page-hero text above its canvas */
.page-hero > *:not(.page-hero-canvas) {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   SOLID SECTION BACKGROUNDS
   The global canvas is #0B1836 dark navy.  Sections must be solid so text
   stays readable — they float on top of the dark animated background.
   ========================================================================== */
body {
  background: transparent;   /* canvas paints the bg */
}

.section {
  background: #FFFFFF;
  background-image: radial-gradient(circle, rgba(21,101,192,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}
.section--soft {
  background: #F8F9FB;
  background-image: radial-gradient(circle, rgba(21,101,192,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}
.section--alt {
  background: #EFF3F9;
  background-image: radial-gradient(circle, rgba(21,101,192,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Ensure header is always opaque */
.site-header {
  background: rgba(11,24,54,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   TRANSPARENT SECTIONS — let the animated navy canvas show through
   Sections are semi-transparent so the blue particle background is visible
   on every page, in every section, not just the dark header areas.
   ========================================================================== */

/* Override the earlier solid-white declarations */
.section {
  background: rgba(255, 255, 255, 0.82) !important;
  background-image: none !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.section--soft {
  background: rgba(232, 240, 252, 0.80) !important;
  background-image: none !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.section--alt {
  background: rgba(218, 232, 250, 0.78) !important;
  background-image: none !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Ensure footer and dark sections stay fully opaque */
.site-footer {
  background: rgba(6, 14, 35, 0.97) !important;
}

/* cta-band stays dark */
.cta-band {
  background: rgba(11, 24, 54, 0.94) !important;
}

/* White cards and feature boxes stay crisp */
.card,
.feature-card,
.service-card,
.stat-card,
.pricing-card,
.team-card,
.job-card {
  background: rgba(255, 255, 255, 0.94) !important;
}

/* ==========================================================================
   FINAL BACKGROUND TREATMENT
   Global canvas = animated light-blue (#DBE8FC) with royal-blue nodes.
   Sections are semi-transparent so the blue animation shows through
   on every page while dark text stays fully readable.
   ========================================================================== */

/* Sections float over the animated canvas — blue tint visible everywhere */
.section {
  position: relative;
  background: rgba(255, 255, 255, 0.78) !important;
  background-image: none !important;
  overflow: hidden;
}
.section--soft {
  background: rgba(240, 246, 255, 0.76) !important;
  background-image: none !important;
}
.section--alt {
  background: rgba(228, 239, 255, 0.74) !important;
  background-image: none !important;
}

/* Dark sections stay opaque */
.section--navy,
.cta-band,
.site-footer,
.site-header {
  background-image: none !important;
}

/* Remove the earlier backdrop-filter — not needed with light bg */
.section,
.section--soft,
.section--alt {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section-scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

.section--navy .section-scene-canvas {
  opacity: .72;
}

/* ==========================================================================
   BRAND LOGO — real logo image with white background on dark nav
   ========================================================================== */
.brand img {
  height: 52px !important;
  width: auto !important;
  border-radius: 6px;
  background: #fff;
  padding: 3px 6px;
  box-sizing: border-box;
}

.site-footer .footer-brand img {
  height: auto !important;
  width: 220px !important;
  border-radius: 6px;
  background: #fff;
  padding: 6px 10px;
  box-sizing: border-box;
}

/* ==========================================================================
   TESTIMONIAL CARDS
   ========================================================================== */
.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 16px rgba(11,24,54,0.08);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid rgba(21,101,192,0.10);
}

.testimonial-stars {
  color: #F5A623;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

.testimonial-card blockquote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2d3748;
  font-style: italic;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1565C0, #00AEEF);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: 0.9rem;
  color: #0B1836;
}

.testimonial-author span {
  font-size: 0.78rem;
  color: #6b7280;
}

/* ==========================================================================
   BACKGROUND — clean professional look (no distracting animation on sections)
   ========================================================================== */
/* Hide the global canvas — sections are fully opaque white, no canvas bleed */
#global-bg-canvas {
  display: none !important;
}

/* Make ALL regular sections fully opaque white */
.section,
.section--soft,
.section--mist,
.section--alt {
  background: #fff !important;
  background-image: none !important;
}

/* Soft alternate sections keep a very light blue tint */
.section--soft,
.section--mist {
  background: #F4F8FF !important;
}

/* Hero keeps its dark brand background + animation */
.hero {
  background: #0B1836 !important;
}

/* Inner page banners keep dark brand background */
.page-hero {
  background: linear-gradient(135deg, #0B1836 0%, #1565C0 100%) !important;
}