/* ==========================================================================
   BOARDTECH Ltd. — design system
   Deep-navy engineering palette, brand yellow kept for every call to action.
   ========================================================================== */

:root {
  /* --- surfaces ------------------------------------------------------ */
  --ink:        #0a1128;   /* deep navy — hero, footer, dark sections     */
  --ink-2:      #121b3a;
  --ink-3:      #1b2750;
  --paper:      #ffffff;
  --paper-2:    #f5f7fc;   /* cool light grey                             */
  --line:       #e4e9f5;
  /* Hairline for cards and dividers is deliberately faint, but a form field
     needs a boundary you can actually see. --line measured 1.22:1 against the
     white page and 1.13:1 against the field fill — invisible. WCAG 1.4.11 asks
     for 3:1 on the boundary of a control. This is 3.04:1. */
  --field-line: #8794b3;
  --line-dark:  rgba(255, 255, 255, .12);

  /* --- brand --------------------------------------------------------- */
  --blue:       #2563ff;
  --blue-deep:  #1a45c4;
  --blue-soft:  #eaf0ff;
  --mint:       #22d3aa;   /* technical accent, links on dark            */
  --yellow:     #ffcd00;   /* every CTA — carried over from the brand    */
  --coral:      #ff5a2b;

  /* --- type ---------------------------------------------------------- */
  --text:       #1b2440;
  --muted:      #5a6785;
  --muted-dark: #97a4c4;

  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --f-he:      "Heebo", "Segoe UI", system-ui, sans-serif;

  /* --- shape --------------------------------------------------------- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --shadow-1: 0 1px 2px rgba(10, 17, 40, .05), 0 4px 14px rgba(10, 17, 40, .06);
  --shadow-2: 0 10px 30px rgba(10, 17, 40, .10), 0 2px 8px rgba(10, 17, 40, .06);
  --shadow-3: 0 28px 70px rgba(10, 17, 40, .18);
  --glow:     0 12px 34px rgba(255, 205, 0, .35);

  --shell:    1200px;
  --header-h: 121px;    /* tall enough for the 97px logo + 12px breathing room */
  --ease:     cubic-bezier(.22, 1, .36, 1);
}

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

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

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

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Large and very large displays: widen the measure and lift the base size so
   the page doesn't read as a narrow column on a 27"/32" monitor.           */
@media (min-width: 1600px) {
  :root { --shell: 1320px; --header-h: 129px; }
  body { font-size: 1.125rem; }
}
@media (min-width: 2000px) {
  :root { --shell: 1440px; }
  body { font-size: 1.1875rem; }
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--blue-deep); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4.25rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.95rem); }
h4 { font-size: 1.125rem; letter-spacing: -.01em; }

p  { margin: 0 0 .9em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .3em; }
strong, b { font-weight: 600; color: var(--ink); }

::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Inline emphases carried from the original copy.
   `.bt` inherits its colour so it can never end up dark-on-dark. */
.hl { color: var(--blue); font-weight: 500; }
.hl:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.bt { font-weight: 700; color: inherit; letter-spacing: -.01em; }

/* every dark surface gets readable inline colours */
.on-dark .bt, .bg-dark .bt, .hero .bt, .pagehead .bt, .cta-band .bt { color: #fff; }
.on-dark .hl, .bg-dark .hl, .hero .hl, .pagehead .hl, .cta-band .hl { color: var(--mint); }
.on-dark .hl:hover, .bg-dark .hl:hover, .hero .hl:hover,
.pagehead .hl:hover, .cta-band .hl:hover { color: #6ff0cf; }

/* --------------------------------------------------------------- layout -- */

.shell      { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.shell-wide { width: min(100% - 40px, 1360px); margin-inline: auto; }
.shell-slim { width: min(100% - 40px, 820px);  margin-inline: auto; }

section { padding: clamp(48px, 5.6vw, 88px) 0; position: relative; }
section.tight { padding: clamp(30px, 3.4vw, 50px) 0; }

.bg-paper  { background: var(--paper); }
.bg-soft   { background: var(--paper-2); }

/* Aliases the pages actually use. They were never defined, so 20 sections
   across 8 pages computed to background-color: rgba(0,0,0,0) — the alternating
   grey/white banding the layout is built around simply did not render, and the
   pages read as one flat white expanse. Measured on /hardware-design/:
   4 sections, 3 of them transparent. */
.bg-white  { background: var(--paper); }
.bg-page   { background: var(--paper-2); }
.bg-grey   { background: var(--paper-2); }
.bg-dark   { background: var(--ink); color: #c7d0e6; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }
.bg-dark p { color: #a9b5d1; }

/* soft dot grid used behind dark sections */
.grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}

/* --------------------------------------------------------------- pieces -- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-body); font-weight: 600; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-soft);
  padding: 8px 16px; border-radius: 999px; margin: 0 0 20px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bg-dark .eyebrow, .hero .eyebrow { color: var(--mint); background: rgba(34, 211, 170, .12); }

.section-head { max-width: 760px; margin-bottom: clamp(30px, 3.4vw, 48px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.1875rem; color: var(--muted); margin-bottom: 0; }
.bg-dark .section-head p { color: var(--muted-dark); }

.lead { font-size: clamp(1.1rem, 1.7vw, 1.375rem); line-height: 1.45; color: var(--muted); }
.bg-dark .lead, .hero .lead { color: #b9c4de; }

.gradient-text {
  background: linear-gradient(96deg, var(--mint) 0%, #6ea8ff 45%, var(--yellow) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------------- button -- */

.btn {
  --btn-bg: var(--yellow); --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 1rem; letter-spacing: -.005em;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--glow); color: var(--btn-fg); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

.btn-dark   { --btn-bg: var(--ink);  --btn-fg: #fff; }
.btn-dark:hover { box-shadow: 0 12px 30px rgba(10, 17, 40, .28); }
.btn-blue   { --btn-bg: var(--blue); --btn-fg: #fff; }
.btn-blue:hover { box-shadow: 0 12px 30px rgba(37, 99, 255, .35); }
.btn-ghost  { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; box-shadow: none; }
.btn-on-dark { --btn-bg: rgba(255, 255, 255, .1); --btn-fg: #fff; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-on-dark:hover { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: none; }
.btn-sm { min-height: 44px; padding: 0 22px; font-size: .9375rem; }

/* These two were used in the pages but never defined here, so 21 buttons fell
   back to the plain yellow `.btn`. `.btn-light` only ever appears on a dark
   band (.cta-band, .pagehead) where a CTA band showed two identical yellow
   buttons instead of a primary and a secondary. */
.btn-light   { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn-light:hover { box-shadow: 0 12px 30px rgba(255, 255, 255, .25); }
.btn-primary { --btn-bg: var(--yellow); --btn-fg: var(--ink); }   /* the default, named */

.arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--blue);
}
.arrow-link::after {
  content: "→"; transition: transform .2s var(--ease);
  font-family: var(--f-body);
}
.arrow-link:hover::after { transform: translateX(6px); }
.bg-dark .arrow-link { color: var(--mint); }

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

.site-header {
  position: sticky; top: 0; z-index: 120;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(10, 17, 40, .06); }

.header-inner { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; margin-right: auto; }

/* Logo size is driven by the three words inside the arrows — HARDWARE,
   EMBEDDED, SOLUTION. They are 20px tall in the 700x339 source, so the
   rendered cap height is exactly  logo width / 35 :
       96px wide -> 2.7px  unreadable      200px -> 5.7px  readable
      160px wide -> 4.6px  still a smudge  245px -> 7.0px  comfortable
   Hence 97px tall (= 200px wide) in the header and 119px (= 245px) in the
   footer, where there is room. Do not set both width and height — the aspect
   ratio is 700:339 and squashing it shows immediately on the arrow tips.   */
.brand img { height: 97px; width: auto; }

/* DO NOT resize the header on scroll.
   It was tried and reverted 2026-08-08: the header is in normal flow, so
   shrinking it by 43px pulls the whole page up by 43px. Chrome's scroll
   anchoring then corrects the scroll position, which pushed it back under the
   `y > 8` threshold that added the class — the class was added and removed
   every frame and the header visibly vibrated. Raising the threshold only
   moves the oscillation somewhere else; the height must simply stay constant.
   `.site-header.scrolled` is still used, but only for the shadow. */

.nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; margin: 0; }
.nav a, .nav .navbtn {
  display: flex; align-items: center; gap: .35em;
  font-family: var(--f-body); font-weight: 500; font-size: .96rem;
  color: var(--text); padding: 9px 14px; border-radius: 999px;
  background: none; border: 0; cursor: pointer; transition: .18s var(--ease);
}
.nav a:hover, .nav .navbtn:hover { background: var(--paper-2); color: var(--blue); }
.nav .current > a, .nav .current > .navbtn { color: var(--blue-deep); background: var(--blue-soft); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.has-sub > .navbtn::after { content: "⌄"; font-size: .95em; line-height: 0; margin-top: -3px; opacity: .55; }

.subnav {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 264px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-3); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: all .2s var(--ease);
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav, .has-sub.open .subnav {
  opacity: 1; visibility: visible; transform: none;
}
.subnav a { border-radius: var(--r-sm); padding: 11px 14px; white-space: nowrap; font-weight: 500; }

.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink); transition: .22s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .burger { display: flex; order: 3; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px; background: #fff;
    border-bottom: 1px solid var(--line); padding: 14px 20px 28px;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; box-shadow: var(--shadow-2);
  }
  .nav.open { display: flex; }
  .nav a, .nav .navbtn { width: 100%; justify-content: flex-start; padding: 14px 14px; font-size: 1.05rem; border-radius: 12px; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: 2px 0 8px 16px; padding: 0; display: none;
  }
  .has-sub.open .subnav { display: block; }
}

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

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: #fff;
  padding: clamp(56px, 7vw, 110px) 0 clamp(48px, 5.5vw, 84px);
}
.hero::before {          /* dot grid */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero::after {           /* photo, heavily dimmed, plus colour wash */
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    linear-gradient(112deg, rgba(10, 17, 40, .96) 0%, rgba(10, 17, 40, .84) 46%, rgba(18, 27, 58, .70) 100%),
    url("/assets/img/hero.jpg") center 28%/cover no-repeat;
}
.hero .orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; z-index: -1; pointer-events: none;
}
.hero .orb-1 { width: 520px; height: 520px; background: #2563ff; top: -180px; right: -120px; }
.hero .orb-2 { width: 420px; height: 420px; background: #22d3aa; bottom: -220px; left: -140px; opacity: .32; }

.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { display: none; } }

.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .35em; }
.hero .lead { max-width: 46ch; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 3.6vw, 46px); padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.hero-facts b {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); color: #fff; line-height: 1.1; letter-spacing: -.02em;
}
.hero-facts span { font-size: .9375rem; color: var(--muted-dark); }

.hero-visual { position: relative; }
.hero-visual img, .hero-visual object {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform .5s var(--ease);
}
.hero-visual:hover img, .hero-visual:hover object { transform: perspective(1400px) rotateY(-3deg); }

/* -------------------------------------------------------------- pagehead -- */

.pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: #fff;
  padding: clamp(48px, 5.5vw, 82px) 0 clamp(40px, 4.6vw, 66px);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 100% at 25% 50%, #000 30%, transparent 100%);
}
.pagehead::after {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: var(--blue); filter: blur(120px); opacity: .35; top: -240px; right: -140px; z-index: -1;
}
.pagehead h1 { color: #fff; max-width: 20ch; }
.pagehead p, .pagehead .lead { color: #b9c4de; max-width: 68ch; margin-bottom: 0; }

.crumbs { font-size: .9rem; color: #8494b8; margin-bottom: 18px; }
.crumbs a { color: #b9c4de; }
.crumbs a:hover { color: #fff; }

/* ---------------------------------------------------------------- grids -- */

.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .g5 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; } }

/* Don't leave a half-empty row: a lone last card in a 2-col grid spans both. */
@media (min-width: 621px) {
  .g2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ split rows -- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img, .split-media object {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.split-media.frame::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border-radius: var(--r-lg); background: linear-gradient(135deg, var(--blue), var(--mint)); opacity: .16;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.125rem;
  background: var(--blue-soft); color: var(--blue-deep);
}

/* ---------------------------------------------------------------- cards -- */

.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(26px, 2.6vw, 34px);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: #cfd9f2; }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.3rem; }
.card p, .card li { font-size: 1rem; color: var(--muted); line-height: 1.55; }
.card .arrow-link { margin-top: auto; padding-top: 14px; }

.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 18px; flex-shrink: 0;
}
.card-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.card:nth-child(5n+2) .card-icon { background: rgba(34, 211, 170, .13); color: #0f9c7c; }
.card:nth-child(5n+3) .card-icon { background: rgba(255, 205, 0, .18); color: #9a7b00; }
.card:nth-child(5n+4) .card-icon { background: rgba(255, 90, 43, .12); color: var(--coral); }

/* Media cards -------------------------------------------------------------
   Two kinds of artwork need two treatments:
   .is-figure — schematics, code, drawings. Shown WHOLE on a navy panel;
                cropping a schematic destroys the thing being shown.
   .is-photo  — photographs, where filling the frame is what looks right.   */

.card-media { padding: 0; overflow: hidden; }
.card-media .media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.card-media .media > img { width: 100%; height: 100%; display: block; }

.card-media .media.is-photo  > img { object-fit: cover; }
.card-media .media.is-figure > img { object-fit: contain; padding: 16px; }
.card-media .media.is-figure {
  background:
    radial-gradient(ellipse 70% 90% at 50% 40%, rgba(37,99,255,.18), transparent 70%),
    var(--ink);
  border-bottom-color: transparent;
}
.card-media:hover .media.is-photo > img { transform: scale(1.04); }
.card-media .media > img { transition: transform .45s var(--ease); }

/* number badge sits on the artwork instead of stealing a line of body space */
.card-media .media .badge-num {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 2px 10px rgba(10, 17, 40, .18); backdrop-filter: blur(4px);
}
.card-media .card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.card-media .card-body h3 { margin-bottom: .35em; }

/* --------------------------------------------------------- logo marquee -- */

/* Two shorter rows running in opposite directions: a visitor sees every logo
   in one ~16s pass instead of waiting out a single long 46s loop.            */

/* Logos differ wildly in shape (from 1:1 up to 13:1), so each one gets an
   identical white slot and is scaled to fit inside it. Every logo therefore
   reads at the same visual weight, in full colour.                          */

.logo-band {
  background:
    radial-gradient(ellipse 60% 120% at 12% 50%, rgba(37, 99, 255, .10), transparent 62%),
    radial-gradient(ellipse 55% 120% at 88% 50%, rgba(34, 211, 170, .13), transparent 62%),
    var(--paper-2);
}

.marquee {
  overflow: hidden; position: relative; padding: 4px 0;
  --gap: clamp(14px, 1.6vw, 24px); --speed: 18s;
  --slot-h: clamp(78px, 7.2vw, 104px);  /* box height; logo = box minus padding */
  display: grid; gap: clamp(14px, 1.6vw, 22px);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 130px);
  z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg,  var(--paper-2) 15%, transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--paper-2) 15%, transparent); }

.marquee-row { display: flex; gap: var(--gap); width: max-content; will-change: transform; }
.marquee-row.to-left  { animation: mq-left  var(--speed) linear infinite; }
.marquee-row.to-right { animation: mq-right var(--speed) linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }

.logo-slot {
  /* the box hugs its logo: fixed height, width follows the artwork */
  flex: 0 0 auto; height: var(--slot-h); max-width: 62vw;
  display: flex; align-items: center; justify-content: center;
  padding: 13px 24px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 1px 3px rgba(10, 17, 40, .05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.logo-slot:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #c3d2f7; }

/* one height for every logo -> identical visual weight, full colour */
.logo-slot img { height: 100%; width: auto; max-width: none; object-fit: contain; }

@keyframes mq-left  { to   { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes mq-right { from { transform: translateX(calc(-50% - var(--gap) / 2)); } }

@media (max-width: 700px) {
  .marquee { --speed: 14s; }
  .logo-slot { padding: 8px 16px; max-width: 76vw; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-row [aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------- stats -- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.stat { text-align: center; }
.stat b {
  display: block; font-family: var(--f-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.4rem, 5vw, 3.75rem); letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff, #9fb2dd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; margin-top: 10px; font-size: .96rem; color: var(--muted-dark); }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } }

.ceo-card {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 34px;
  padding: 14px 24px 14px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark);
}
.ceo-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.ceo-card b { display: block; color: #fff; font-family: var(--f-display); font-size: 1.05rem; }
.ceo-card span { font-size: .875rem; color: var(--mint); letter-spacing: .06em; text-transform: uppercase; }

/* -------------------------------------------------------------- gallery -- */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2vw, 26px); }
.gal-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.gal-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.gal-item button.zoom {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--ink); position: relative; overflow: hidden;
}
.gal-item img { aspect-ratio: 4 / 3; object-fit: contain; width: 100%; background: var(--ink); transition: transform .4s var(--ease); }
.gal-item button.zoom::after {
  content: "⤢"; position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--yellow); color: var(--ink); font-size: 1rem;
  opacity: 0; transform: translateY(8px); transition: .28s var(--ease);
}
.gal-item:hover button.zoom::after { opacity: 1; transform: none; }
.gal-item:hover img { transform: scale(1.04); }
.gal-cap { padding: 18px 22px 22px; font-size: .96rem; line-height: 1.5; color: var(--muted); flex: 1; }
.gal-cap strong { display: block; font-family: var(--f-display); font-size: 1.05rem; color: var(--ink); margin-bottom: 7px; }

/* ------------------------------------------------------------- lightbox -- */

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(6, 9, 20, .95);
  display: none; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 86vh; width: auto; border-radius: var(--r); box-shadow: var(--shadow-3); }
.lightbox button {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0;
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.5rem; cursor: pointer;
  display: grid; place-items: center; transition: .18s var(--ease);
}
.lightbox button:hover { background: var(--yellow); color: var(--ink); }
.lightbox .lb-close { top: 24px; right: 24px; }
.lightbox .lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-cap { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #c7d0e6; font-size: .92rem; text-align: center; width: min(90vw, 800px); }

/* ------------------------------------------------------- recommendations -- */

.recs { display: grid; gap: clamp(18px, 2.2vw, 26px); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .recs { grid-template-columns: 1fr; } }
.rec {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px); position: relative; overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.rec:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.rec::before {
  content: "\201C"; position: absolute; top: -18px; right: 22px;
  font-family: Georgia, serif; font-size: 8rem; line-height: 1; color: var(--blue-soft);
}
.rec h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0 0 4px; }
.rec .rec-role { font-size: 1rem; font-weight: 500; color: var(--blue); margin: 0 0 2px; }
.rec .rec-meta { font-size: .875rem; color: var(--muted); margin: 0 0 20px; }
.rec blockquote { margin: 0; position: relative; }
.rec blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--text); margin-bottom: .65em; }
.rec blockquote p:last-child { margin-bottom: 0; }
.rec.featured { grid-column: 1 / -1; background: var(--ink); border-color: transparent; }
.rec.featured h2, .rec.featured blockquote p { color: #fff; }
.rec.featured .rec-role { color: var(--mint); }
.rec.featured .rec-meta { color: var(--muted-dark); }
.rec.featured::before { color: rgba(255, 255, 255, .07); }
.rec.featured blockquote p { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.6; }

/* ------------------------------------------------------------ team card -- */

.team-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.team-head {
  display: flex; gap: 20px; align-items: center; padding: 26px 28px;
  background: linear-gradient(135deg, var(--paper-2), #fff); border-bottom: 1px solid var(--line);
}
.team-head img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: top center;
  flex-shrink: 0; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--blue-soft);
}
.team-head h3 { margin: 0 0 3px; font-size: 1.3rem; }
.team-head .role { color: var(--blue); font-weight: 500; font-size: .96rem; }
.team-body { padding: 26px 28px 30px; }
.team-body p, .team-body li { font-size: 1rem; color: var(--muted); line-height: 1.55; }
.team-body h4 {
  margin-top: 1.4em; font-size: .8125rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
@media (max-width: 520px) { .team-head { flex-direction: column; text-align: center; } }

/* -------------------------------------------------------------- article -- */

.prose { max-width: 76ch; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.65; color: var(--text); }
.prose > ul > li::marker { color: var(--blue); }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.7em; }
.prose h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-top: 1.4em; }
.prose figure { margin: 34px 0; }
.prose figure img { border-radius: var(--r); box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.prose figcaption { font-size: .9rem; color: var(--muted); text-align: center; margin-top: 12px; }

.rtl { direction: rtl; text-align: right; font-family: var(--f-he); }
.rtl p, .rtl li { line-height: 1.75; }   /* Hebrew needs a touch more leading */
.rtl ul, .rtl ol { padding-left: 0; padding-right: 1.35em; }
.rtl h1, .rtl h2, .rtl h3 { font-family: var(--f-he); letter-spacing: normal; }

.qa {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 26px 30px; margin-bottom: 18px; transition: .25s var(--ease);
}
.qa:hover { border-color: #cfd9f2; box-shadow: var(--shadow-1); }
.qa h3 { font-size: 1.2rem; margin-bottom: .55em; }
.qa p:last-child { margin-bottom: 0; }

.job {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  padding: clamp(28px, 3vw, 40px); margin-bottom: 26px;
}
.job h3 { font-size: 1.6rem; }
.job h4 { margin-top: 1.5em; font-size: .8125rem; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); }
.job p, .job li { font-size: 1rem; color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------- forms -- */

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow-1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 500; font-size: .9375rem; color: var(--ink); }
.field input, .field textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--text);
  padding: 14px 16px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--paper-2); transition: .18s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus {
  border-color: var(--blue); background: #fff; outline: 0; box-shadow: 0 0 0 4px rgba(37, 99, 255, .12);
}
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: .875rem; color: var(--muted); }
.form-status { display: none; padding: 14px 18px; border-radius: 12px; font-size: .96rem; margin-top: 16px; }
.form-status.ok  { display: block; background: #e7f8ef; color: #106b3d; border: 1px solid #b6e6cb; }
.form-status.err { display: block; background: #fdeceb; color: #8c2018; border: 1px solid #f5c2bd; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.contact-list .ico {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
}
.contact-list .ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.contact-list .lbl { display: block; font-weight: 600; color: var(--ink); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }

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

.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #fff; text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(37, 99, 255, .5), transparent 65%),
              radial-gradient(ellipse 60% 100% at 85% 100%, rgba(34, 211, 170, .3), transparent 60%);
}
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band p { color: #b9c4de; max-width: 58ch; margin-inline: auto; font-size: 1.125rem; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

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

.site-footer { background: var(--ink); color: var(--muted-dark); padding: clamp(44px, 4.8vw, 68px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px, 3vw, 44px); }
.site-footer h4 { color: #fff; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.site-footer a:not(.btn) { color: var(--muted-dark); }
.site-footer a:not(.btn):hover { color: #fff; }
.site-footer .btn { color: var(--btn-fg); }   /* keep buttons legible in the footer */
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; font-size: .96rem; }
.site-footer p { font-size: .96rem; color: var(--muted-dark); }
.footer-logo { background: #fff; border-radius: 12px; padding: 12px 16px; display: inline-block; margin-bottom: 20px; }
/* 119px tall = 245px wide = 7.0px cap height on the arrow words: the first
   size at which HARDWARE / EMBEDDED / SOLUTION are comfortably readable.
   Nothing constrains the footer, so it gets the full size. */
.footer-logo img { height: 119px; width: auto; max-width: 100%; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); transition: .2s var(--ease);
}
.socials a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; fill: currentColor; }
.footer-bottom {
  margin-top: 36px; border-top: 1px solid var(--line-dark); padding: 24px 0 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .9rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 110; width: 50px; height: 50px;
  border: 0; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 1.15rem;
  cursor: pointer; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none;
  transition: .25s var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-4px); box-shadow: var(--glow); }

/* ------------------------------------------------ cookie consent banner -- */
/* Bottom-left card, so it never sits under the back-to-top button (bottom
   right) and never covers the middle of the page.                          */
.cc {
  position: fixed; left: 22px; bottom: 22px; z-index: 140; width: min(430px, calc(100vw - 44px));
  background: #fff; color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-3); padding: 22px 24px 20px;
  transform: translateY(14px); opacity: 0; transition: .28s var(--ease);
}
.cc.show { transform: none; opacity: 1; }
.cc[hidden] { display: none; }
.cc-title { font-family: var(--f-display); font-size: 1.0625rem; margin: 0 0 8px; }
.cc-text  { font-size: .875rem; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.cc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-actions .btn { flex: 1 1 auto; min-width: 128px; }

/* the re-open link in the footer bar */
.cc-reopen {
  background: none; border: 0; padding: 0; margin-left: 10px; cursor: pointer;
  font: inherit; color: inherit; opacity: .8; text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-reopen:hover { opacity: 1; color: var(--yellow); }

@media (max-width: 560px) {
  .cc { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 16px; }
  /* Full width here, so the banner would cover the back-to-top button.
     Stand the button down until the visitor has answered. */
  body.cc-open .to-top { opacity: 0; pointer-events: none; }
}

/* scroll progress bar */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 130; width: 0;
  background: linear-gradient(90deg, var(--mint), var(--blue), var(--yellow));
}

/* --------------------------------------------------------------- utils -- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.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) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

.mt0 { margin-top: 0 } .mb0 { margin-bottom: 0 }
.center-text { text-align: center }
.badge {
  display: inline-block; background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px;
}
.soon {
  text-align: center; padding: clamp(44px, 6vw, 84px) 30px;
  border: 2px dashed var(--line); border-radius: var(--r-lg); background: #fff;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pill {
  display: inline-flex; align-items: center; gap: .5em; padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-size: .9375rem; font-weight: 500; color: var(--text);
  transition: .2s var(--ease);
}
.pill:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.bg-dark .pill { background: rgba(255,255,255,.06); border-color: var(--line-dark); color: #dbe3f5; }
.bg-dark .pill:hover { background: #fff; color: var(--ink); }