/* ==========================================================================
   Elecpro — Design System (vanilla, no framework)
   Palette: Navy-dominant field + dark royal-blue accent
   Fonts: Space Grotesk (display) / IBM Plex Sans (text) — engineered, technical
   ========================================================================== */

/* ----- Design tokens ---------------------------------------------------- */
:root {
  --navy-950: #0B1120;
  --navy-900: #0F172A;
  --navy-800: #1E293B;
  --slate-700: #334155;
  --slate-500: #64748B;
  --slate-400: #94A3B8;

  --accent: #2A4CB0;         /* dark royal blue — sampled from the logo mark */
  --accent-600: #223F9C;
  --accent-700: #1A3384;     /* deep royal — hover/emphasis + accent-as-text on light */
  --accent-soft: #E7ECFA;    /* pale brand tint for light chips */
  --accent-on-dark: #6E90E6; /* lighter BRAND blue (never cyan) — eyebrows/highlights on navy */

  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --muted: #EEF2F7;
  --border: #E2E8F0;
  --danger: #DC2626;

  --text: #0F172A;
  --text-soft: #475569;
  --on-dark: #E2E8F0;
  --on-dark-soft: #94A3B8;

  --container: 1200px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 12px 28px -14px rgba(15, 23, 42, .22);
  --shadow-lg: 0 34px 60px -28px rgba(15, 23, 42, .3);
  --shadow-accent: 0 10px 24px -10px rgba(42, 76, 176, .42);

  /* Subtle grain — gives light surfaces tooth instead of dead flat #F8FAFC */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  /* Technical blueprint grid — brand-blue hairlines for depth on dark fields */
  --grid-dark:
    linear-gradient(rgba(110, 144, 230, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 144, 230, .055) 1px, transparent 1px);
  --grid-size: 46px 46px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

/* ----- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  /* Layered depth: twin brand-blue washes (top-right + bottom-left) + grain over
     the base tone — keeps light sections atmospheric, never a dead-flat wash. */
  background:
    var(--grain) repeat,
    radial-gradient(1100px 620px at 100% -8%, rgba(42, 76, 176, .08), transparent 62%),
    radial-gradient(900px 640px at -6% 112%, rgba(42, 76, 176, .06), transparent 60%),
    var(--bg);
  background-attachment: scroll;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--font-head); line-height: 1.12; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.section--dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible { outline-color: var(--accent-on-dark); }

/* ----- Layout helpers --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(60px, 8vw, 116px); }
[id] { scroll-margin-top: 96px; }
.section--muted {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .02), transparent 140px),
    radial-gradient(720px 420px at 96% 4%, rgba(42, 76, 176, .06), transparent 60%),
    var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Dark navy field — the site's dominant ground. Deep vertical navy gradient,
   twin brand-blue glows, a masked technical grid, and an inner vignette for depth. */
.section--dark {
  position: relative; isolation: isolate; color: var(--on-dark);
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(110, 144, 230, .20), transparent 60%),
    radial-gradient(760px 640px at 4% 112%, rgba(42, 76, 176, .22), transparent 62%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900) 52%, var(--navy-950));
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grid-dark);
  background-size: var(--grid-size);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  opacity: .9;
}
.section--tight { padding-block: clamp(44px, 5vw, 68px); }

/* Eyebrow — letterspaced uppercase label (no leading tick). */
.eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: .76rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-700);
}
.section-head--center .eyebrow { justify-content: center; }
.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.side-cta .eyebrow { color: var(--accent-on-dark); }

.section-head { max-width: 660px; }
.section-head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem); margin-top: 18px; color: var(--navy-900);
  font-weight: 700;
}
.section--dark .section-head h2 { color: #fff; }
.section-head p { margin-top: 16px; color: var(--text-soft); font-size: 1.06rem; max-width: 56ch; }
.section-head--center p { margin-inline: auto; }
.section--dark .section-head p { color: var(--on-dark-soft); }

/* Compact section head used for the suppliers band (promoted from inline styles) */
.section-head--sub { margin-bottom: 42px; }
.section-head--sub h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.lead { font-size: 1.08rem; color: var(--text-soft); }

/* Promoted inline-style helpers */
.title-md { font-size: clamp(1.7rem, 3.3vw, 2.4rem); margin-top: 18px; color: var(--navy-900); font-weight: 700; }
.section-actions { margin-top: 32px; }
.intro-lead { margin-top: 16px; }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn i { transition: transform .25s var(--ease); }
.btn:hover i { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

/* Only the PRIMARY action lifts + gains voltage glow — that's the emphasis hierarchy.
   Secondary buttons respond with fill/border, not motion, so the page doesn't "float". */
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn--primary:hover { background: var(--accent-600); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(42, 76, 176, .5); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-700); background: var(--accent-soft); }
.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--accent-soft); color: var(--accent-700); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

.link-more {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head);
  font-weight: 600; color: var(--accent-700); width: fit-content;
  padding-bottom: 3px; background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
.link-more i { transition: transform .25s var(--ease); }
.link-more:hover { color: var(--accent-700); background-size: 100% 2px; }
.link-more:hover i { transform: translateX(5px); }

/* ----- Header -----------------------------------------------------------
   Crafted, calm B2B bar: a thin brand "live line" keyline runs across the very
   top edge (ties the header to the logo blue, reads as an electrical bus bar),
   the logo sits left, and nav links carry an animated brand-blue underline
   indicator instead of the old filled pill (the #1 template tell). */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm); border-bottom-color: var(--border); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 74px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 58px; width: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; font-family: var(--font-head); font-weight: 500; font-size: .96rem;
  letter-spacing: .01em; color: var(--slate-700);
  padding: 26px 16px; /* tall hit area = vertical rhythm; underline sits on the bar edge */
  transition: color .2s var(--ease);
}
/* Animated underline indicator — grows from the leading edge on hover,
   holds full-width when the link is the active page. */
.nav__link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 20px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .32s var(--ease);
}
.nav__link:hover { color: var(--navy-900); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav__link.is-active { color: var(--navy-900); font-weight: 600; }
.nav__link.is-active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* ----- Header contact CTA — the "jewel" control ------------------------
   The single most premium control in the bar: a deep navy→royal-blue pill
   with a hairline light edge and a soft brand-blue glow that blooms on
   hover. Electricity is signalled through LIGHT, not a diagram — on hover a
   conductive highlight traces the perimeter (like current through a circuit)
   while a single sheen sweeps across the surface; pressing gives a crisp
   scale. White label keeps ≥7:1 on the dark fill. No idle motion. */
@property --cta-trace {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}
.header-cta, .btn--elec {
  position: relative; z-index: 0; overflow: hidden;
  padding: 13px 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 38%, var(--accent-700) 100%);
  border-color: rgba(174, 201, 255, .34);
  box-shadow:
    0 8px 20px -11px rgba(26, 51, 132, .60),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .22s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Sheen sweep — a single diagonal highlight that crosses the surface on
   hover. z-index:-1 keeps it above the gradient fill but below the label. */
.header-cta::before, .btn--elec::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(190, 214, 255, .40), transparent);
  transform: translateX(-190%) skewX(-18deg);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
/* Conductive edge trace — a lit highlight that runs around the perimeter
   like current through a circuit. A conic gradient masked to a 1px ring;
   its light-arc sweeps on hover. Rests hidden (a static lit edge remains via
   border-color), so nothing looping runs idle and nothing is lost under
   reduced-motion. */
.header-cta::after, .btn--elec::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--cta-trace),
    transparent 0 62%,
    rgba(174, 201, 255, .85) 78%,
    #ffffff 86%,
    rgba(174, 201, 255, .85) 94%,
    transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.header-cta:hover, .btn--elec:hover {
  transform: translateY(-2px);
  border-color: rgba(174, 201, 255, .55);
  box-shadow:
    0 16px 32px -12px rgba(42, 76, 176, .60),
    0 0 22px -2px rgba(110, 144, 230, .45),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.header-cta:hover::before, .btn--elec:hover::before { transform: translateX(320%) skewX(-18deg); }
.header-cta:hover::after, .btn--elec:hover::after { opacity: 1; animation: cta-trace 1.4s linear infinite; }
.header-cta:focus-visible::after, .btn--elec:focus-visible::after { opacity: 1; }
/* Crisp press — the pill compresses slightly (overrides base .btn translateY). */
.header-cta:active, .btn--elec:active { transform: scale(.97); }
@keyframes cta-trace {
  to { --cta-trace: 360deg; }
}

.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--border); background: #fff;
  border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; color: var(--navy-900);
}
.burger i { font-size: 1.2rem; }

/* Mobile slide-in panel */
.backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; z-index: 190;
}
.backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-panel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(340px, 86vw);
  background: #fff; z-index: 200; padding: 24px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto;
}
.mobile-panel.is-open { transform: translateX(0); }
.mobile-panel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mobile-panel__top img { height: 34px; }
.panel-close {
  width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; border-radius: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.mobile-nav { display: flex; flex-direction: column; margin-top: 18px; }
.mobile-nav a {
  font-family: var(--font-head); font-weight: 500; font-size: 1.08rem; padding: 14px 8px;
  border-bottom: 1px solid var(--border); color: var(--navy-900);
}
.mobile-nav a:hover { color: var(--accent-700); }
.mobile-panel .btn { margin-top: 22px; justify-content: center; }
.mobile-contact { margin-top: 26px; display: grid; gap: 14px; }
.mobile-contact a { display: flex; align-items: center; gap: 12px; color: var(--text-soft); font-size: .95rem; }
.mobile-contact i { color: var(--accent-700); width: 20px; }

/* ----- Hero ------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }
.hero__slides { position: relative; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .8s var(--ease), visibility .8s;
}
.hero__slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 12% 88%, rgba(110, 144, 230, .24), transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(11, 17, 32, .55) 100%),
    linear-gradient(105deg, rgba(11, 17, 32, .96) 0%, rgba(15, 23, 42, .86) 44%, rgba(15, 23, 42, .34) 100%);
}
.hero__inner { padding-block: clamp(96px, 15vw, 176px); max-width: 700px; color: #fff; }
.hero__title {
  font-size: clamp(2.2rem, 5.4vw, 3.8rem); margin-top: 22px; color: #fff; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.06;
}
/* Highlighted word gets a voltage underline instead of just a color swap */
.hero__title span { color: var(--accent-on-dark); position: relative; white-space: nowrap; }
.hero__title span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .1em;
  background: var(--accent-on-dark); border-radius: 3px; opacity: .55;
}
.hero__text { margin-top: 20px; font-size: 1.12rem; color: #CBD5E1; max-width: 560px; }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero__controls {
  position: absolute; bottom: 30px; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px;
}
.hero__dots { display: flex; gap: 10px; }
.hero__dot {
  width: 30px; height: 5px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .35);
  cursor: pointer; padding: 0; transition: background .3s var(--ease), width .3s var(--ease);
}
.hero__dot.is-active { background: var(--accent-on-dark); width: 44px; }
.hero__arrows { margin-left: auto; display: flex; gap: 10px; }
.hero__arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: .25s var(--ease);
}
.hero__arrow:hover { background: var(--accent); border-color: var(--accent); }

/* ----- Page-load entrance ----------------------------------------------
   One orchestrated above-the-fold reveal: the eyebrow, title, text, CTAs and
   controls rise + fade in sequence. Pure CSS (runs once on load, no JS, no
   re-run on carousel change). animation-fill-mode:both holds the hidden 0%
   state before each delay (no FOUC) and the rest state after. Only transform/
   opacity animate → zero layout shift. Reduced-motion is neutralised below. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero__inner .eyebrow,
.hero__title,
.hero__text,
.hero__actions,
.hero__controls,
.page-hero .eyebrow,
.page-hero h1,
.page-hero .breadcrumb {
  animation: rise-in .7s var(--ease) both;
}
.hero__inner .eyebrow,
.page-hero .eyebrow { animation-delay: .08s; }
.hero__title,
.page-hero h1 { animation-delay: .2s; }
.hero__text,
.page-hero .breadcrumb { animation-delay: .34s; }
.hero__actions { animation-delay: .48s; }
.hero__controls { animation-delay: .6s; }

/* ----- Trust bar -------------------------------------------------------- */
.trustbar { background: var(--navy-900); }
.trustbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-block: 40px;
}
.trust-item { display: flex; align-items: center; gap: 16px; color: #fff; }
.trust-item i { font-size: 1.9rem; color: var(--accent-on-dark); }
.trust-item strong { font-family: var(--font-head); font-size: 1.5rem; display: block; }
.trust-item span { color: var(--on-dark-soft); font-size: .92rem; }

/* ----- About ------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split h2 { font-size: clamp(1.7rem, 3.3vw, 2.4rem); margin-top: 18px; color: var(--navy-900); }
.split p { margin-top: 18px; color: var(--text-soft); }

.checklist { margin-top: 24px; display: grid; gap: 14px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--slate-700); font-weight: 500; }
.checklist i {
  flex: none; margin-top: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-700); display: flex; align-items: center;
  justify-content: center; font-size: .75rem;
}

.about-media { position: relative; }
.about-media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }
.about-media__grid img:first-child { margin-top: 34px; }
.stat-badge {
  position: absolute; left: -10px; bottom: -22px; color: #fff;
  padding: 22px 26px; border-radius: var(--radius);
  background:
    radial-gradient(120px 120px at 100% 0%, rgba(255, 255, 255, .18), transparent 70%),
    linear-gradient(135deg, var(--accent-700), var(--accent));
  box-shadow: 0 22px 40px -18px rgba(26, 51, 132, .55);
}
.stat-badge strong { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; line-height: 1; display: block; }
.stat-badge span { display: block; font-size: .9rem; opacity: .95; margin-top: 6px; max-width: 15ch; }

/* Homepage experience badge — an engineered "circuit plate": printed-circuit
   (PCB) traces with connection nodes etched into the plate, a bolt emblem wired
   into a live trace (a current pulse flows down it on hover), and an oversized
   numeral with a raised royal-blue "+". Reads unmistakably "électricité" while
   staying strictly in the DA (navy→royal gradient, brand-blue-on-dark accents
   #6E90E6, Space Grotesk). Scoped so .stat-badge--icon is never touched. */
.stat-badge--exp {
  left: -14px; bottom: -26px;
  padding: 22px 30px 20px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(110, 144, 230, .34);
  overflow: hidden; isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* PCB traces + solder nodes (brand-blue SVG data-URI, same technique as
   --grain/--grid-dark), masked to the right so it never fights the numeral. */
.stat-badge--exp::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%236E90E6' stroke-opacity='0.3' stroke-width='1.2'%3E%3Cpath d='M4 18h34l14 14h64'/%3E%3Cpath d='M-4 52h40l16-16h48'/%3E%3Cpath d='M8 86h30l12 12h74'/%3E%3Cpath d='M60 120v-22l14-14h46'/%3E%3C/g%3E%3Cg fill='%236E90E6' fill-opacity='0.6'%3E%3Ccircle cx='52' cy='32' r='2.6'/%3E%3Ccircle cx='56' cy='36' r='2.6'/%3E%3Ccircle cx='50' cy='98' r='2.6'/%3E%3Ccircle cx='74' cy='84' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(130% 140% at 100% 45%, #000 18%, transparent 78%);
  mask-image: radial-gradient(130% 140% at 100% 45%, #000 18%, transparent 78%);
}
/* A trace running out of the bolt pad to a solder node — the emblem is "wired".
   overflow:hidden clips the pulse; the node is baked into the trace background. */
.stat-badge--exp .stat-badge__wire {
  position: absolute; top: 36px; left: 62px; width: 56px; height: 8px;
  margin-top: 0; opacity: 1; max-width: none;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(circle 2.6px at calc(100% - 2px) 50%, var(--accent-on-dark) 0 2.6px, transparent 3.2px) no-repeat,
    linear-gradient(90deg, rgba(110, 144, 230, .34), rgba(110, 144, 230, .34)) left center / 100% 2px no-repeat;
}
/* The current pulse: a bright brand-blue segment that rests off-screen and
   flows along the trace only while hovered (transform-only). */
.stat-badge--exp .stat-badge__wire::before {
  content: ""; position: absolute; left: 0; top: 3px; height: 2px; width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent-on-dark), transparent);
  transform: translateX(-160%);
}
.stat-badge--exp:hover .stat-badge__wire::before { animation: exp-current 1.15s var(--ease) infinite; }
@keyframes exp-current { to { transform: translateX(340%); } }
/* Bolt emblem chip */
.stat-badge--exp .stat-badge__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 0 12px; border-radius: 9px;
  background: rgba(110, 144, 230, .18);
  border: 1px solid rgba(110, 144, 230, .34);
  color: var(--accent-on-dark); font-size: .9rem;
  transition: transform .4s var(--ease), background .3s var(--ease);
}
/* Oversized numeral with a raised, royal-blue "+" */
.stat-badge--exp .stat-badge__num {
  display: flex; align-items: flex-start; gap: 2px;
  font-size: clamp(2.9rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: -.02em;
}
/* Neutralize the base `.stat-badge span` block/offset/dim on the numeral itself */
.stat-badge--exp .stat-badge__num .counter { display: inline; margin-top: 0; max-width: none; opacity: 1; }
.stat-badge--exp .stat-badge__plus {
  display: inline-block; font-size: .42em; line-height: 1; margin-top: .12em;
  color: var(--accent-on-dark); font-weight: 700;
}
/* Label with a leading hairline rule for a technical, specced feel */
.stat-badge--exp .stat-badge__label {
  display: block; max-width: 15ch; margin-top: 12px; padding-top: 11px; opacity: 1;
  font-family: var(--font-head); font-weight: 500; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(110, 144, 230, .3);
}
/* Hover: lift the plate, brighten the emblem — transform/opacity only, no CLS */
.stat-badge--exp:hover { transform: translateY(-4px); box-shadow: 0 30px 48px -18px rgba(26, 51, 132, .62); }
.stat-badge--exp:hover .stat-badge__mark { transform: rotate(-8deg) scale(1.06); background: rgba(110, 144, 230, .28); }

/* Icon variant (about.html) — a lone bolt in a giant box read as a placeholder;
   this frames the icon in a chip beside the label so it reads as an emblem. */
.stat-badge--icon { display: flex; align-items: center; gap: 16px; }
.stat-badge--icon i {
  flex: none; width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem;
  background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center;
}
.stat-badge--icon span { margin-top: 0; font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1.3; }

/* Progress bars (about page) */
.bars { margin-top: 30px; display: grid; gap: 22px; }
.bar__head { display: flex; justify-content: space-between; font-weight: 600; color: var(--navy-900); margin-bottom: 8px; }
.bar__track { height: 10px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.bar__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-700), var(--accent)); border-radius: 999px; transition: width 1.4s var(--ease); }

/* ----- Service cards ---------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card-grid--stagger { margin-top: 52px; }
.service-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Accent voltage line that draws across the top edge on hover */
.service-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--accent-700));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--border); }
.service-card:hover::after { transform: scaleX(1); }
.service-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
/* Corner tab number — a printed index, not a floating glass chip */
.service-card__num {
  position: absolute; top: 0; left: 0; z-index: 2; min-width: 46px; padding: 8px 14px;
  border-radius: 0 0 var(--radius) 0; background: var(--navy-900); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: .04em;
}
.service-card__body { padding: 28px 26px; display: flex; flex-direction: column; flex: 1; }
.service-card__title { font-size: 1.28rem; color: var(--navy-900); }
.service-card__text { margin-top: 12px; color: var(--text-soft); font-size: .97rem; flex: 1; }
.service-card__body .link-more { margin-top: 22px; }

/* CTA card — a genuinely different navy treatment, promoted from inline styles.
   It deliberately breaks the media/number rhythm to read as an invitation, not a service.
   Built as a "control panel": framed icon chip (its media zone) + blueprint grid +
   oversized bolt watermark give the navy surface depth so it never reads as dead space. */
.service-card--cta {
  justify-content: center; border-color: transparent; color: #fff; isolation: isolate;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(110, 144, 230, .3), transparent 65%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800));
}
/* Masked blueprint grid — the same technical texture used on dark sections */
.service-card--cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grid-dark); background-size: var(--grid-size);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 28%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 28%, transparent 78%);
}
.service-card--cta::after { background: var(--accent-on-dark); }
.service-card--cta:hover { box-shadow: 0 34px 60px -28px rgba(26, 51, 132, .5); }
/* Oversized bolt watermark bleeding off the corner — fills the lower field with brand */
.service-cta__mark {
  position: absolute; right: -20px; bottom: -30px; z-index: 0; pointer-events: none;
  font-size: 12.5rem; line-height: 1; color: var(--accent-on-dark); opacity: .1;
  transform: rotate(-8deg);
}
.service-card--cta .service-card__body {
  position: relative; z-index: 1; justify-content: space-between; gap: 26px; padding: 32px 28px;
}
.service-cta__head { display: flex; flex-direction: column; gap: 14px; }
/* Framed icon chip — stands in for the missing photo, anchors the composition top */
.service-cta__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 16px; margin-bottom: 4px;
  font-size: 1.5rem; color: var(--accent-on-dark);
  background: radial-gradient(circle at 30% 24%, rgba(110, 144, 230, .34), rgba(110, 144, 230, .1));
  border: 1px solid rgba(110, 144, 230, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -12px rgba(26, 51, 132, .9);
}
.service-card--cta .service-card__title { color: #fff; font-size: 1.5rem; }
.service-card--cta .service-card__text { color: var(--on-dark); flex: none; }
.service-cta__foot { display: flex; flex-direction: column; gap: 18px; }
.service-card--cta .btn { align-self: flex-start; }
/* Secondary affordance — real phone number, hairline-divided beneath the primary CTA */
.service-cta__phone {
  display: inline-flex; align-items: center; gap: 13px;
  padding-top: 18px; border-top: 1px solid rgba(110, 144, 230, .22);
  text-decoration: none; color: #fff;
}
.service-cta__phone-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 999px; font-size: .95rem; color: var(--accent-on-dark);
  background: rgba(110, 144, 230, .14); border: 1px solid rgba(110, 144, 230, .3);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.service-cta__phone-text { display: flex; flex-direction: column; line-height: 1.25; }
.service-cta__phone-text small {
  font-family: var(--font-head); font-size: .68rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-soft);
}
.service-cta__phone-text strong {
  font-weight: 600; font-size: 1.04rem; letter-spacing: .01em;
  transition: color .3s var(--ease);
}
.service-cta__phone:hover .service-cta__phone-text strong { color: var(--accent-on-dark); }
.service-cta__phone:hover .service-cta__phone-icon { background: rgba(110, 144, 230, .24); border-color: rgba(110, 144, 230, .5); }

/* Cards sitting on the dark Services field: give the white cards a soft drop so
   they read as objects lifted off the navy ground, and re-key the navy CTA card
   with an accent hairline + brighter glow so it stays distinct from the field. */
.section--dark .service-card {
  border-color: rgba(226, 232, 240, .1);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .6);
}
.section--dark .service-card:hover { box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .7); }
.section--dark .service-card--cta {
  border-color: rgba(110, 144, 230, .4);
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(110, 144, 230, .42), transparent 62%),
    linear-gradient(150deg, var(--navy-800), var(--navy-900));
  box-shadow: 0 22px 50px -24px rgba(26, 51, 132, .6);
}
.section--dark .service-card--cta:hover { box-shadow: 0 34px 64px -26px rgba(26, 51, 132, .7); }

/* ----- Suppliers marquee ------------------------------------------------ */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee__item {
  flex: none; height: 96px; width: 176px; margin-right: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.marquee__item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.marquee__item img { max-height: 46px; width: auto; object-fit: contain; transition: transform .3s var(--ease); }
.marquee__item:hover img { transform: scale(1.06); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ----- Page hero (inner pages) ------------------------------------------ */
.page-hero { position: relative; isolation: isolate; color: #fff; padding-block: clamp(80px, 12vw, 150px); }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 380px at 85% 120%, rgba(110, 144, 230, .26), transparent 60%),
    radial-gradient(620px 460px at 6% -10%, rgba(42, 76, 176, .28), transparent 62%),
    linear-gradient(180deg, rgba(11, 17, 32, .78), rgba(15, 23, 42, .94));
}
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); color: #fff; font-weight: 700; letter-spacing: -.03em; margin-top: 18px; }
.breadcrumb { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: #CBD5E1; font-size: .95rem; }
.breadcrumb i { font-size: .7rem; color: var(--accent-on-dark); }
.breadcrumb span { color: #fff; }

/* ----- Prose (service detail body) -------------------------------------- */
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--navy-900); margin-top: 40px; }
.prose h3 { font-size: 1.25rem; color: var(--navy-900); margin-top: 28px; }
.prose p { margin-top: 14px; color: var(--text-soft); }
.prose ul { margin-top: 16px; display: grid; gap: 12px; }
/* Hanging checklist: the marker is an inline-block, so it sits on the first
   line's baseline (optically aligned to the text) while a matching hanging
   indent keeps wrapped lines flush under the copy. em-based → tracks font size. */
.prose ul li { padding-left: 1.9em; color: var(--slate-700); }
.prose ul li::before {
  content: "\f00c"; display: inline-block; width: 1.9em; margin-left: -1.9em;
  font-family: var(--fa-style-family, "Font Awesome 6 Pro"); font-weight: 900;
  font-size: .82em; color: var(--accent-700);
}
.prose > *:first-child { margin-top: 0; }
/* Legal pages (mentions légales / politique de confidentialité): single centered measure. */
.prose--legal { max-width: 800px; margin-inline: auto; }
/* Editorial placeholder marker — flags client-supplied legal identifiers still pending (SIRET, RCS, etc.).
   Intentionally amber/warning, not brand blue: this is a temporary authoring signal, remove once filled in. */
.todo {
  display: inline-block; background: #FEF3C7; color: #92400E;
  border: 1px dashed #D97706; border-radius: 6px;
  padding: 1px 8px; font-size: .92em; font-weight: 600; font-style: normal;
}
.media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Service detail layout -------------------------------------------- */
.service-layout { display: grid; grid-template-columns: 330px 1fr; gap: 44px; align-items: start; }
.service-side { position: sticky; top: 100px; display: grid; gap: 20px; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.side-card > h2 { font-size: 1.15rem; color: var(--navy-900); margin-bottom: 18px; }
.side-nav { display: grid; gap: 8px; }
.side-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--muted);
  color: var(--navy-900); font-family: var(--font-head); font-weight: 500; font-size: .95rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.side-nav a:hover { background: var(--accent); color: #fff; }
.side-nav a i { transition: transform .2s var(--ease); }
.side-nav a:hover i { transform: translateX(4px); }
.side-cta {
  color: #fff; text-align: center; border-color: transparent;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(110, 144, 230, .3), transparent 65%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800));
}
.side-cta h2 { color: #fff; }
.side-cta p { color: var(--on-dark-soft); margin: 8px 0 18px; font-size: .95rem; }
.side-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .service-layout { grid-template-columns: 1fr; }
  .service-side { position: static; }
}

/* ----- Legal documents (mentions légales / politique de confidentialité) --
   A calm, single-column legal instrument: one centered reading measure with a
   quiet editorial rhythm — no table-of-contents, no section counters, identity
   info set as plain "Label : valeur" phrases in the prose. */
.prose--legal > *:first-child { margin-top: 0; }
.prose--legal .lead {
  margin-top: 22px; font-size: 1.14rem; line-height: 1.7; color: var(--slate-700);
  padding-left: 22px; border-left: 3px solid var(--accent);
}

/* "Dernière mise à jour" chip — promoted from the privacy lead. */
.legal-updated {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid rgba(42, 76, 176, .18);
  color: var(--accent-700); font-family: var(--font-head); font-weight: 600;
  font-size: .82rem; letter-spacing: .01em;
}
.legal-updated i { font-size: .82em; color: var(--accent); }

/* Quiet <h2>: a hairline rule sets the section rhythm; no counter, no gutter. */
.prose--legal h2 {
  margin-top: 48px; padding-top: 30px;
  border-top: 1px solid var(--border);
  font-size: clamp(1.3rem, 2.3vw, 1.7rem); letter-spacing: -.02em;
}

/* Branded, visibly-underlined links in body copy (not buttons). */
.prose--legal a:not(.btn) {
  color: var(--accent-700); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(42, 76, 176, .35); overflow-wrap: anywhere;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.prose--legal a:not(.btn):hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Identity fields (éditeur / hébergeur / responsable du traitement): stacked
   "Label : valeur" phrases in the prose — tight leading between fields. */
.prose--legal p strong { color: var(--navy-900); font-weight: 600; }

/* ----- Contact ---------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact-cards { margin-top: 30px; display: grid; gap: 16px; }
.contact-card {
  display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.contact-card__icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft);
  color: var(--accent-700); display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.contact-card span { display: block; font-size: .82rem; color: var(--slate-500); }
.contact-card a, .contact-card strong { font-family: var(--font-head); font-weight: 600; color: var(--navy-900); }

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md); }
.form-card h3 { font-size: 1.4rem; color: var(--navy-900); }
.form-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 500; font-size: .9rem; color: var(--slate-700); }
.field input, .field textarea {
  border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field textarea { resize: vertical; min-height: 130px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--text-soft); }
.consent input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.form-card .btn { width: 100%; justify-content: center; }

/* Honeypot anti-spam — masqué à l'écran ET aux lecteurs (aria-hidden dans le HTML).
   Les robots le remplissent ; le serveur ignore alors l'envoi. */
.hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Message d'état du formulaire (succès / erreur / envoi) — injecté par site.js */
.form-status {
  grid-column: 1 / -1; margin: 0; padding: 0;
  font-size: .92rem; font-weight: 500; line-height: 1.45;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .3s var(--ease), max-height .3s var(--ease), padding .3s var(--ease);
}
.form-status.is-visible { opacity: 1; max-height: 200px; padding: 14px 16px; border-radius: var(--radius-sm); }
.form-status--pending { color: var(--slate-700); background: var(--muted); }
.form-status--success { color: var(--accent-700); background: var(--accent-soft); border: 1px solid rgba(42, 76, 176, .22); }
.form-status--error   { color: var(--danger); background: #FDECEC; border: 1px solid rgba(220, 38, 38, .22); }

/* ----- CTA band + Footer ------------------------------------------------ */
/* Free-standing band: real breathing room above/below so it never fuses with the footer */
.cta-band { position: relative; z-index: 2; margin-block: clamp(48px, 7vw, 96px); }
.cta-band__inner {
  position: relative; overflow: hidden;
  /* Same "jewel" surface as the header CTA button: deep navy -> royal blue,
     light hairline rim + top sheen. One brand language across the site. */
  background:
    radial-gradient(560px 320px at 12% 15%, rgba(190, 214, 255, .18), transparent 62%),
    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 40%, var(--accent-700) 100%);
  border: 1px solid rgba(174, 201, 255, .34);
  border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 60px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  box-shadow:
    0 40px 70px -34px rgba(26, 51, 132, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  color: #fff;
}
/* Faint dot-grid — a circuit-board texture that reads "electrical", masked to fade out */
.cta-band__inner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(105deg, #000 0%, transparent 55%);
}
.cta-band__inner > * { position: relative; z-index: 1; }
.cta-band__inner h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); color: #fff; font-weight: 700; }
.cta-band__inner p { margin-top: 8px; color: var(--accent-soft); }

.site-footer {
  color: var(--on-dark-soft); padding-top: clamp(72px, 9vw, 104px);
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(110, 144, 230, .1), transparent 55%),
    var(--navy-950);
}
.site-footer--slim { padding-top: clamp(56px, 8vw, 90px); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand__logo { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: #fff; letter-spacing: -.02em; }
.footer-brand__logo b { color: var(--accent-on-dark); font-weight: 700; }
.footer-brand p { margin-top: 16px; max-width: 320px; font-size: .95rem; }
.footer-col h4 { font-family: var(--font-head); color: #fff; font-size: 1.05rem; margin-bottom: 20px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { font-size: .95rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 12px; font-size: .95rem; }
.footer-contact i { color: var(--accent-on-dark); margin-top: 4px; }
.footer-bottom { padding-block: 26px; font-size: .88rem; text-align: center; color: var(--slate-400); }
.footer-legal { margin-left: 6px; }
.footer-legal a { color: var(--slate-400); text-decoration: underline; text-underline-offset: 3px; transition: color .2s var(--ease); }
.footer-legal a:hover { color: #fff; }

/* ----- Error / 404 ------------------------------------------------------ */
.section--center-min { min-height: 70vh; display: flex; align-items: center; }
.error { text-align: center; }
.error__code {
  font-family: var(--font-head); font-weight: 700; line-height: .9;
  font-size: clamp(6rem, 22vw, 15rem);
  background: linear-gradient(120deg, var(--accent-700), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--navy-900); margin-top: 8px; }
.error p { margin-top: 14px; color: var(--text-soft); }
.error .btn { margin-top: 28px; }

/* ----- Back to top ------------------------------------------------------ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px;
  border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-accent); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-600); }

/* ----- Cookie consent banner -------------------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background:
    radial-gradient(600px 200px at 8% 0%, rgba(110, 144, 230, .16), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-top: 1px solid rgba(110, 144, 230, .3);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .6);
  color: var(--on-dark);
  transform: translateY(110%); transition: transform .4s var(--ease);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  display: flex; align-items: center; gap: 26px; padding-block: 18px; flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 380px; min-width: 260px; }
.cookie-banner__text strong {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head);
  color: #fff; font-size: 1rem;
}
.cookie-banner__text strong i { color: var(--accent-on-dark); }
.cookie-banner__text p { margin-top: 6px; font-size: .92rem; color: var(--on-dark-soft); max-width: 66ch; }
.cookie-banner__text a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__text a:hover { color: #fff; }
.cookie-banner__actions { display: flex; gap: 12px; flex: none; margin-left: auto; }
.cookie-banner__actions .btn { padding: 12px 22px; }
.cookie-banner__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cookie-banner__actions .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff; }
@media (max-width: 620px) {
  .cookie-banner__actions { width: 100%; margin-left: 0; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }
}

/* ----- Scroll reveal ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 860px) {
  .nav, .header-actions .btn { display: none; }
  .burger { display: flex; }
  .split { grid-template-columns: 1fr; }
  .about-media { max-width: 520px; margin-inline: auto; }
  .about-media__grid img:first-child { margin-top: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band__inner { justify-content: center; text-align: center; }
}
@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .trustbar__grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__arrows { display: none; }
  .container { padding-inline: 18px; }
}

/* ----- Reduced motion --------------------------------------------------- */
@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; }
  .marquee__track { animation: none; }
  /* Header CTA: the edge trace does not sweep — the resting state (lit
     border + label) stays fully legible; hover/press feedback still work. */
  .header-cta:hover::after, .btn--elec:hover::after { animation: none !important; }
  /* Experience badge: no current pulse — the wired trace + node stay lit, static. */
  .stat-badge--exp:hover .stat-badge__wire::before { animation: none !important; }
  /* Entrance: no animation/delay at all — snap straight to the rest state so
     content is never briefly hidden while a stagger delay elapses. */
  .hero__inner .eyebrow,
  .hero__title,
  .hero__text,
  .hero__actions,
  .hero__controls,
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero .breadcrumb {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}