@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap'); /* Arabic UI font (kept in CSS so the HTML files stay untouched) */
/* ============================================
   EngiCore — Design System
   ============================================
   Breakpoint scale used throughout this file (mobile-first, min-width):
     (base)  0px    — small phones (320–479px)
     --sm    480px  — large phones / short landscape
     --md    768px  — tablet portrait
     --lg    1024px — tablet landscape / small laptop
     --xl    1366px — laptop
     --xxl   1920px — large / ultra-wide desktop
   The mobile nav collapse is the one deliberate exception: it uses a
   max-width query (below --lg) because "collapse below X" reads more
   clearly that way than its mobile-first inverse.
   ============================================ */

:root {
  /* Identity constants — do not change between themes */
  --navy-deep: #0B2545;
  --navy-mid: #12314F;
  --navy-mid-2: #1B4570;
  --teal-bright: #00E5D0;
  --industrial-accent: #F2994A;
  --industrial-steel: #4A5568;
  --academic-accent: #2E9E6B;

  --font-ar: 'Cairo', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'IBM Plex Sans', 'Cairo', 'Segoe UI', Arial, sans-serif;

  --radius-sharp: 2px;
  --radius-soft: 10px;
  --max-width: 1180px;

  /* Theme tokens — LIGHT is the default (no data-theme attribute needed) */
  --paper: #F7F9FB;
  --paper-raised: #FFFFFF;
  --ink: #0B2545;
  --ink-soft: #4A5568;
  --ink-faint: #8A94A3;
  --line: #E2E8F0;
  --teal-signal: #00C2CB;
  --overlay-scrim: rgba(11, 37, 69, 0.55);
}

/* Explicit dark theme, set via JS on <html data-theme="dark"> */
:root[data-theme="dark"] {
  --paper: #0A1523;
  --paper-raised: #0F1E33;
  --ink: #F5F7FA;
  --ink-soft: #A9B4C2;
  --ink-faint: #6B7A8D;
  --line: #1E2D42;
  --teal-signal: #00E5D0;
  --overlay-scrim: rgba(0, 0, 0, 0.65);
}

/* Fallback ONLY for the rare case JS fails entirely and no data-theme
   attribute ever gets set. Normal operation always sets data-theme
   explicitly via the inline head script (see HTML files), so this
   rule should almost never be the deciding one in practice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #0A1523;
    --paper-raised: #0F1E33;
    --ink: #F5F7FA;
    --ink-soft: #A9B4C2;
    --ink-faint: #6B7A8D;
    --line: #1E2D42;
    --teal-signal: #00E5D0;
    --overlay-scrim: rgba(0, 0, 0, 0.65);
  }
}

/* Slightly wider reading measure on very large screens */
@media (min-width: 1920px) {
  :root { --max-width: 1320px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ar);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  transition: background 0.25s ease, color 0.25s ease;
}
html[dir="ltr"] body { font-family: var(--font-en); }

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
  font-family: var(--font-ar);
  font-weight: 700;
}

p { margin: 0 0 1em; color: var(--ink-soft); max-width: 65ch; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 480px) { .container { padding: 0 24px; } }

:focus-visible { outline: 3px solid var(--teal-signal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ Buttons (min 44px touch target) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-soft);
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 480px) { .btn { padding: 14px 28px; } }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy-deep); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(11,37,69,0.25); }
.btn-teal { background: var(--teal-signal); color: var(--navy-deep); }
.btn-teal:hover { box-shadow: 0 8px 24px rgba(0,194,203,0.3); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--teal-signal); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 0;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a.active { color: var(--teal-signal); }

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icon buttons shared shape (theme toggle + nav toggle use this sizing) */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { border-color: var(--teal-signal); }
.icon-btn svg { width: 20px; height: 20px; }

.lang-toggle {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  font-size: 14px;
  font-weight: 600;
  background: var(--paper-raised);
  cursor: pointer;
  color: var(--ink);
}
.lang-toggle:hover { border-color: var(--teal-signal); }

/* Theme toggle: sun shows in dark mode (press for light),
   moon shows in light mode (press for dark) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Nav toggle: hamburger <-> X, driven by aria-expanded (set by JS) */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* ============ Mobile nav: overlay + solid sliding panel ============
   z-index map: header 200, nav panel 190, scrim overlay 180.
   Panel sits below the header (which stays visible/usable so the
   X button always remains reachable) and above the scrim. */
@media (max-width: 1023.98px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 0;
    top: var(--header-h, 72px);
    z-index: 190;
    background: var(--paper-raised);
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  html[dir="rtl"] .main-nav { transform: translateX(-100%); }
  .main-nav.open { transform: translateX(0); }
  .main-nav a {
    padding: 16px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
}


.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: var(--overlay-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-overlay.active { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .nav-overlay { display: none; } }

/* ============ Hero ============ */
.hero {
  position: relative;
  padding: 64px 0 72px;
  overflow: hidden;
  background: var(--navy-deep);
  color: #fff;
}
@media (min-width: 480px) { .hero { padding: 80px 0 90px; } }
@media (min-width: 768px) { .hero { padding: 100px 0 120px; } }
/* Short landscape phones: hero shouldn't fill the whole viewport height */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 40px 0 48px; }
}

.hero .container { position: relative; z-index: 2; }
.hero-schematic { position: absolute; inset: 0; z-index: 1; opacity: 0.5; }

.hero h1 {
  color: #fff;
  font-size: clamp(28px, 7vw, 56px);
  max-width: 16ch;
  margin-bottom: 20px;
}
.hero p.lead {
  color: #C7D0DA;
  font-size: clamp(15px, 2.2vw, 19px);
  max-width: 55ch;
  margin-bottom: 32px;
}
@media (min-width: 480px) { .hero p.lead { margin-bottom: 40px; } }

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-actions .btn { width: 100%; }
@media (min-width: 480px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .hero-actions .btn { width: auto; }
}

/* ============ Track split (Academic / Industrial) ============ */
.tracks { padding: 56px 0; }
@media (min-width: 480px) { .tracks { padding: 72px 0; } }
@media (min-width: 768px) { .tracks { padding: 90px 0; } }

.tracks-heading { text-align: center; max-width: 640px; margin: 0 auto 40px; }
@media (min-width: 768px) { .tracks-heading { margin: 0 auto 56px; } }
.tracks-heading h2 { font-size: clamp(24px, 5vw, 38px); }
.tracks-heading p { margin: 0 auto; }

.track-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .track-grid { grid-template-columns: 1.15fr 1fr; gap: 28px; }
}

.track-card {
  border-radius: var(--radius-soft);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
@media (min-width: 480px) { .track-card { padding: 36px 32px; } }
@media (min-width: 1024px) { .track-card { padding: 44px; } }

.track-card.industrial {
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy-mid-2) 100%);
  color: #fff;
}
.track-card.industrial p { color: #B9C4D3; }
.track-card.academic { background: var(--paper-raised); }

.track-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.track-card.industrial .track-tag { background: rgba(0,194,203,0.15); color: var(--teal-bright); }
.track-card.academic .track-tag { background: rgba(46,158,107,0.12); color: var(--academic-accent); }

.track-card h3 { font-size: clamp(20px, 4vw, 26px); margin-bottom: 12px; }
.track-card.industrial h3 { color: #fff; }

.track-list { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.track-list li { font-size: 14.5px; padding-inline-start: 22px; position: relative; color: inherit; }
.track-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal-signal);
}

.track-card .btn { width: 100%; }
@media (min-width: 480px) { .track-card .btn { width: auto; } }

/* ============ Feature sections ============ */
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 80px 0; } }
.section-alt { background: var(--paper-raised); }

.section-heading { max-width: 640px; margin-bottom: 36px; }
@media (min-width: 768px) { .section-heading { margin-bottom: 48px; } }
.section-heading h2 { font-size: clamp(22px, 4.5vw, 34px); }

/* auto-fit naturally gives 1 col (mobile) -> 2 (tablet) -> 3-4 (desktop) */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
@media (min-width: 768px) { .grid-3 { gap: 24px; } }

.feature-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  background: var(--paper-raised);
}
@media (min-width: 480px) { .feature-card { padding: 28px; } }
.feature-card h4 { font-size: 17px; margin-bottom: 8px; }
.feature-card p { font-size: 14.5px; margin: 0; }

/* ============ Offers Section (horizontal carousel) ============ */
.offers-section { padding: 56px 0; background: var(--paper); }
@media (min-width: 768px) { .offers-section { padding: 90px 0; } }

.offers-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 auto 20px;
  min-height: 34px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
}
.offers-position {
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  color: var(--teal-signal);
  background: color-mix(in srgb, var(--teal-signal) 10%, transparent);
}
.offers-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.offers-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: width .3s var(--ease), background-color .3s var(--ease), border-radius .3s var(--ease), transform .2s ease;
}
.offers-dot:hover { transform: scale(1.12); }
.offers-dot.is-active {
  width: 28px;
  border-radius: 4px;
  background: var(--teal-signal);
}
.offers-dot:focus-visible {
  outline: 2px solid var(--teal-signal);
  outline-offset: 3px;
}

.offers-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  --card-w: clamp(280px, 85vw, 480px);
  padding: 8px 0 24px;
  margin: 0 -20px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.offers-carousel::-webkit-scrollbar { display: none; }
.offers-carousel.is-pointer-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.offers-carousel:focus-visible {
  box-shadow: 0 0 0 3px rgba(242,201,76,0.45);
  border-radius: var(--radius-soft);
}

.offers-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  /* Equal spacer on both sides so the first/last card can sit exactly in the middle
     (this also centres a single offer). 100% = carousel width. */
  padding: 0 calc((100% - var(--card-w)) / 2);
}

.offers-carousel .offer-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media (min-width: 768px) {
  .offers-carousel { gap: 20px; }
  .offers-grid { gap: 20px; }
}
@media (min-width: 1024px) {
  .offers-carousel { gap: 24px; }
  .offers-grid { gap: 24px; }
}
/* One offer only: centred, no scrolling, a bit wider */
.offers-carousel.is-single { --card-w: min(680px, calc(100vw - 40px)); overflow-x: hidden; cursor: default; }
.offers-carousel.is-single .offers-grid { justify-content: center; }

.offer-card {
  background: var(--paper-raised);
  border-radius: var(--radius-soft);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(11,37,69,0.08);
  display: flex;
  flex-direction: column;
}

.offer-media { position: relative; aspect-ratio: 4/3; background: var(--navy-mid); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.offer-slides { display: flex; flex-direction: row; height: 100%; transition: transform 0.4s ease; }
.offer-slides.is-dragging { transition: none; }
.offer-slides img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; -webkit-user-drag: none; }

.offer-badge {
  position: absolute;
  background: #F2C94C; color: var(--navy-deep);
  font-weight: 800; font-size: 18px;
  padding: 8px 16px; border-radius: 14px; z-index: 3;
}
.offer-badge.badge-top-start { top: 16px; inset-inline-start: 16px; }
.offer-badge.badge-top-end { top: 16px; inset-inline-end: 16px; }
.offer-badge.badge-bottom-start { bottom: 16px; inset-inline-start: 16px; }
.offer-badge.badge-bottom-end { bottom: 16px; inset-inline-end: 16px; }
/* Image counter (n / total) yields the top-start corner when the badge takes it */
.offer-media.badge-at-top-start .offer-counter { inset-inline-start: auto; inset-inline-end: 16px; }
.offer-counter {
  position: absolute; top: 16px; inset-inline-start: 16px;
  background: rgba(11,37,69,0.7); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; z-index: 3;
}
.offer-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  border-radius: 50%;
  background: rgba(11,37,69,0.55); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
}
.offer-arrow.prev { inset-inline-start: 12px; }
.offer-arrow.next { inset-inline-end: 12px; }
.offer-arrow svg { width: 18px; height: 18px; }

.offer-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
}
.offer-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; border: none; padding: 0; }
.offer-dot.active { background: #F2C94C; width: 20px; border-radius: 4px; }

.offer-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 480px) { .offer-body { padding: 28px; } }
.offer-body h3 { font-size: 19px; margin-bottom: 8px; }
.offer-body p { font-size: 14px; margin-bottom: 20px; flex: 1; }

.offer-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 14px;
  background: #25D366; color: #fff; font-weight: 700; font-size: 15px;
  border: none; border-radius: 999px; cursor: pointer;
}
.offer-whatsapp svg { width: 20px; height: 20px; }
.offer-whatsapp:hover { filter: brightness(0.95); }

/* ============ Gallery Section ============ */
.gallery-section { padding: 56px 0; background: var(--paper-raised); overflow: hidden; }
@media (min-width: 768px) { .gallery-section { padding: 90px 0; } }

.gallery-filters {
  display: flex;
  flex-wrap: nowrap;            /* always one row */
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 0 20px 8px;
  margin-bottom: 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  /* RTL: chips start at the right; LTR: at the left (flex follows the document direction). */
}
.gallery-filters::-webkit-scrollbar { display: none; }
.gallery-filters.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* Centre the row when it fits, but keep it scrollable from its start when it overflows
   (plain justify-content:center would clip the first chips). */
.gallery-filters > :first-child { margin-inline-start: auto; }
.gallery-filters > :last-child { margin-inline-end: auto; }
@media (min-width: 768px) { .gallery-filters { gap: 10px; margin-bottom: 40px; } }
@media (max-width: 768px) { .gallery-filters { padding: 0 16px 8px; } .gallery-filter { font-size: 13px; padding: 8px 16px; } }

.gallery-filter {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.gallery-filter.active { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }

.gallery-track-wrap {
  overflow: hidden;
  position: relative;
  margin: 0 -20px;
  direction: ltr;            /* identical layout/translate maths in RTL and LTR; scroll direction is set in JS */
  touch-action: pan-y;       /* horizontal drag is handled by gallery-drag.js, vertical scroll stays native */
  cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.gallery-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;    /* moved with translate3d by gallery-drag.js */
}
.gallery-track-wrap.is-dragging { cursor: grabbing; }

.gallery-item {
  width: 180px; height: 220px;
  border-radius: var(--radius-soft);
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--line);
}
@media (min-width: 768px) { .gallery-item { width: 220px; height: 280px; } }
@media (min-width: 1024px) { .gallery-item { width: 260px; height: 320px; gap: 18px; } }
.gallery-item { cursor: pointer; flex: none; }
.gallery-item:focus-visible { outline: 3px solid var(--teal-signal, #00C2CB); outline-offset: 3px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.tracks-heading .gallery-hint { margin-top: 8px; }


.gallery-caption { text-align: center; margin-top: 28px; font-size: 14px; color: var(--ink-faint); }

/* =====================================================================
   Phase 2/3 layer: language switching, logo, icons, services, footer
   ===================================================================== */
:root {
  --radius-lg: 18px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(11,37,69,.06), 0 4px 12px rgba(11,37,69,.05);
  --shadow-lg: 0 18px 40px rgba(11,37,69,.14);
  --overlay-bg: var(--overlay-scrim);
}
:root[data-theme="dark"] { --shadow-lg: 0 18px 40px rgba(0,0,0,.45); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); }

/* Bilingual: inactive language is hidden (lang/dir are switched on <html>) */
html[lang="ar"] [data-lang="en"], html[lang="en"] [data-lang="ar"] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 300; background: var(--teal-signal); color: var(--navy-deep); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 10px; }
.logo-dark, :root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.main-nav a { position: relative; transition: color .3s var(--ease); }
@media (min-width: 1024px) {
  .main-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px; background: var(--teal-signal); transform: scaleX(0); transition: transform .3s var(--ease); }
  .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
}
@media (max-width: 1023.98px) { .main-nav { top: var(--header-h, 72px) !important; background: var(--paper-raised); } }
.nav-overlay { background: var(--overlay-bg); }
.theme-toggle svg, .nav-toggle svg { transition: transform .3s var(--ease); }
.theme-toggle:hover svg { transform: rotate(-12deg) scale(1.1); }

/* Icons */
.ico, .h-ico, .e-ico, .btn-ico { flex: none; transition: transform .3s var(--ease); }
.h-ico { width: 26px; height: 26px; display: inline-block; vertical-align: -4px; margin-inline-end: 10px; color: var(--teal-bright); }
.track-card.academic .h-ico { color: var(--academic-accent); }
.btn-ico { width: 18px; height: 18px; }
.track-card:hover .h-ico { transform: rotate(-6deg) scale(1.12); }
.feature-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal-signal); }
.arrow { transition: transform .3s var(--ease); }
html[dir="rtl"] .arrow { transform: scaleX(-1); }
.btn:hover .arrow, .svc-cta:hover .arrow, .offer-whatsapp:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .arrow, html[dir="rtl"] .svc-cta:hover .arrow, html[dir="rtl"] .offer-whatsapp:hover .arrow { transform: translateX(-4px) scaleX(-1); }
.btn { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.hero-schematic { will-change: transform; }

/* Hero */
.hero h1 { font-size: clamp(28px, 6.4vw, 54px); line-height: 1.2; overflow-wrap: anywhere; }
.hero p.lead { font-size: clamp(15px, 2.3vw, 18px); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479.98px) { .hero-actions .btn { width: 100%; } .track-card { padding: 24px 20px; } }

/* Reveal on scroll */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Track + offer cards hover */
.track-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.track-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.offer-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.offer-whatsapp { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; background: #25D366; color: #fff; }
.offer-whatsapp svg { width: 20px; height: 20px; }
.offer-whatsapp .arrow { width: 18px; height: 18px; }

/* Service blocks */
.svc-root { padding: 32px 0 72px; }
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card { --acc: var(--teal-signal); position: relative; display: flex; flex-direction: column; gap: 20px; overflow: hidden; padding: 28px 24px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
@media (min-width: 480px) { .svc-card { padding: 32px 30px; } }
.svc-root[data-track="academic"] .svc-card { --acc: var(--academic-accent); }
.svc-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.svc-card:hover::before { transform: scaleY(1); }
.svc-head p { margin: 0; font-size: 15px; }
.svc-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-list { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.svc-list li { position: relative; padding-inline-start: 20px; }
.svc-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.svc-list strong { display: block; font-size: 15px; color: var(--ink); line-height: 1.5; }
.svc-list span { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.svc-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 20px; border-radius: var(--radius-soft); background: var(--acc); color: #06222b; font-weight: 700; font-size: 16px; box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 30%, transparent); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.svc-root[data-track="academic"] .svc-cta { color: #06222b; }
.svc-cta:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--acc) 45%, transparent); }
.svc-list + .svc-cta, .svc-tools + .svc-cta { margin-top: auto; }

/* Floating WhatsApp */
.wa-fab { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 120; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.4); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.wa-fab svg { width: 28px; height: 28px; }
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(37,211,102,.55); }
body.nav-open .wa-fab { display: none; }

/* Very small phones */
@media (max-width: 359.98px) {
  .container { padding: 0 14px; }
  .header-controls { gap: 4px; }
  .lang-toggle { padding: 8px 10px; }
  .svc-card { padding: 22px 16px; }
}

/* Mobile menu: solid dropdown that slides down from the header; overlay dims the page.
   Uses vertical slide + visibility (no horizontal off-screen transform, which caused
   sideways scrolling in RTL). */
@media (max-width: 1023.98px) {
  html .main-nav, html[dir="rtl"] .main-nav {
    inset-inline: 0; bottom: auto; max-height: calc(100dvh - var(--header-h, 72px));
    background: var(--paper-raised); border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg);
    transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
  }
  html .main-nav.open, html[dir="rtl"] .main-nav.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav a { min-height: 48px; display: flex; align-items: center; }
}

/* Context tiles: one SVG mask per topic (tinted via CSS, so they work in light + dark) */
:root {
--bg-electronics:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(10 6)'%3E%3Cpath d='M0 30H14L18 22L26 38L34 22L42 38L46 30H60'/%3E%3C/g%3E%3Cg transform='translate(90 6)'%3E%3Cpath d='M0 30H25M25 14V46M35 14V46M35 30H60'/%3E%3C/g%3E%3Cg transform='translate(170 6)'%3E%3Cpath d='M0 30H18M18 16V44L40 30Z M40 16V44M40 30H60'/%3E%3C/g%3E%3Cg transform='translate(12 74)'%3E%3Ccircle cx='32' cy='30' r='20'/%3E%3Cpath d='M0 30H22M22 18V42M22 26L40 13M22 34L40 47M40 13V4M40 47V56'/%3E%3C/g%3E%3Cg transform='translate(92 84)'%3E%3Cpath d='M0 30H8A6 6 0 0 1 20 30A6 6 0 0 1 32 30A6 6 0 0 1 44 30A6 6 0 0 1 56 30H60'/%3E%3C/g%3E%3Cg transform='translate(180 70)'%3E%3Crect x='14' y='14' width='32' height='32' rx='2'/%3E%3Ccircle cx='21' cy='21' r='2'/%3E%3Cpath d='M18 14V6M18 46V54'/%3E%3Cpath d='M26 14V6M26 46V54'/%3E%3Cpath d='M34 14V6M34 46V54'/%3E%3Cpath d='M42 14V6M42 46V54'/%3E%3Cpath d='M14 18H6M46 18H54'/%3E%3Cpath d='M14 26H6M46 26H54'/%3E%3Cpath d='M14 34H6M46 34H54'/%3E%3Cpath d='M14 42H6M46 42H54'/%3E%3C/g%3E%3Cg transform='translate(10 160)'%3E%3Cpath d='M10 12H28A18 18 0 0 1 28 48H10Z M0 20H10M0 40H10M46 30H60'/%3E%3C/g%3E%3Cg transform='translate(90 158)'%3E%3Cpath d='M12 8V52L52 30Z M0 20H12M0 40H12M52 30H60M20 20H28M24 16V24M20 40H28'/%3E%3C/g%3E%3Cg transform='translate(180 168)'%3E%3Cpath d='M30 2V20M12 20H48M19 28H41M26 36H34'/%3E%3C/g%3E%3Cg transform='translate(170 196) scale(0.7)'%3E%3Cpath d='M0 30H20M20 14V46M30 22V38M30 30H60M40 22V38M50 14V46'/%3E%3C/g%3E%3Ccircle cx='60' cy='222' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='150' cy='60' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E");
--bg-automation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(16 14)'%3E%3Crect x='0' y='0' width='56' height='42' rx='3'/%3E%3Crect x='30' y='8' width='20' height='12' rx='1'/%3E%3Cpath d='M8 10H18M8 20H18M8 30H18M30 30H50'/%3E%3Cpath d='M10 42V50M22 42V50M34 42V50M46 42V50'/%3E%3C/g%3E%3Cg transform='translate(126 12)'%3E%3Cpath d='M0 0V46M60 0V46'/%3E%3Cpath d='M0 12H16M16 5V19M24 5V19M24 12H40'/%3E%3Ccircle cx='46' cy='12' r='6'/%3E%3Cpath d='M52 12H60'/%3E%3Cpath d='M0 34H16M16 27V41M24 27V41M24 34H40'/%3E%3Ccircle cx='46' cy='34' r='6'/%3E%3Cpath d='M52 34H60'/%3E%3C/g%3E%3Cg transform='translate(12 108)'%3E%3Crect x='0' y='16' width='92' height='16' rx='8'/%3E%3Ccircle cx='9' cy='24' r='3'/%3E%3Ccircle cx='83' cy='24' r='3'/%3E%3Crect x='14' y='0' width='18' height='16' rx='1'/%3E%3Crect x='54' y='5' width='14' height='11' rx='1'/%3E%3Cpath d='M22 32V46M70 32V46M14 46H30M62 46H78'/%3E%3C/g%3E%3Cg transform='translate(132 108)'%3E%3Crect x='0' y='12' width='26' height='20' rx='3'/%3E%3Cpath d='M26 22H36'/%3E%3Cpath d='M42 12A14 14 0 0 1 42 32'/%3E%3Cpath d='M49 6A22 22 0 0 1 49 38'/%3E%3Cpath d='M56 0A30 30 0 0 1 56 44'/%3E%3Cpath d='M6 12V6H20V12'/%3E%3C/g%3E%3Cg transform='translate(16 184) scale(0.85)'%3E%3Crect x='0' y='44' width='26' height='8' rx='1'/%3E%3Cpath d='M13 44V30'/%3E%3Ccircle cx='13' cy='27' r='4'/%3E%3Cpath d='M16 25L38 10'/%3E%3Ccircle cx='41' cy='8' r='4'/%3E%3Cpath d='M44 10L58 24M58 24L66 18M58 24L66 30'/%3E%3C/g%3E%3Cg transform='translate(112 170) scale(0.9)'%3E%3Crect x='6' y='8' width='34' height='26' rx='4'/%3E%3Cpath d='M40 21H54'/%3E%3Cpath d='M6 14H0M6 28H0'/%3E%3Cpath d='M14 8V2H32V8'/%3E%3Cpath d='M14 34V40H32V34'/%3E%3Ccircle cx='23' cy='21' r='6'/%3E%3C/g%3E%3Cg transform='translate(184 178) scale(0.9)'%3E%3Ccircle cx='22' cy='22' r='20'/%3E%3Cpath d='M22 22L33 11'/%3E%3Ccircle cx='22' cy='22' r='2.5'/%3E%3Cpath d='M6 30A18 18 0 0 1 8 14M36 14A18 18 0 0 1 38 30'/%3E%3Cpath d='M22 6V10M6 22H10M34 22H38'/%3E%3C/g%3E%3C/svg%3E");
--bg-power:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(6 8)'%3E%3Cpath d='M30 4L20 66M30 4L40 66'/%3E%3Cpath d='M6 18H54M12 34H48M20 66H40'/%3E%3Cpath d='M23 34L36 50M37 34L24 50'/%3E%3Cpath d='M6 18V26M54 18V26M12 34V42M48 34V42'/%3E%3Cpath d='M26 18L22 34M34 18L38 34'/%3E%3C/g%3E%3Cg transform='translate(96 34)'%3E%3Cpath d='M0 30C8 2 16 2 24 30S40 58 48 30S64 2 72 30'/%3E%3C/g%3E%3Cg transform='translate(184 6) scale(0.8)'%3E%3Cpath d='M34 2L12 34H28L24 62L48 26H32Z'/%3E%3C/g%3E%3Cg transform='translate(14 110) scale(0.9)'%3E%3Ccircle cx='20' cy='30' r='13'/%3E%3Ccircle cx='40' cy='30' r='13'/%3E%3Cpath d='M28 10V50M32 10V50'/%3E%3Cpath d='M-8 30H7M53 30H68'/%3E%3C/g%3E%3Cg transform='translate(112 112) scale(0.9)'%3E%3Cpath d='M0 30H22'/%3E%3Ccircle cx='26' cy='30' r='3'/%3E%3Cpath d='M28 27L50 10'/%3E%3Ccircle cx='54' cy='30' r='3'/%3E%3Cpath d='M57 30H76'/%3E%3C/g%3E%3Cg transform='translate(96 168) scale(0.9)'%3E%3Cpath d='M0 12C20 24 40 24 60 12S100 0 120 12'/%3E%3Cpath d='M0 26C20 38 40 38 60 26S100 14 120 26'/%3E%3C/g%3E%3Cg transform='translate(190 146) scale(0.9)'%3E%3Cpath d='M30 2V20M12 20H48M19 28H41M26 36H34'/%3E%3C/g%3E%3Cg transform='translate(16 190) scale(0.8)'%3E%3Ccircle cx='28' cy='28' r='22'/%3E%3Cpath d='M14 34C18 20 24 20 28 28S38 36 42 22'/%3E%3Cpath d='M28 6V-4M8 40L-2 46M48 40L58 46'/%3E%3C/g%3E%3Cg transform='translate(190 200) scale(0.6)'%3E%3Cpath d='M0 30H20M20 14V46M30 22V38M30 30H60M40 22V38M50 14V46'/%3E%3C/g%3E%3C/svg%3E");
--bg-mechanical:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M97.0 62.0L105.9 65.4L105.2 70.6L95.7 71.6L92.0 80.5L98.0 87.9L94.8 92.1L86.2 88.2L78.5 94.0L80.0 103.4L75.1 105.4L69.6 97.7L60.0 99.0L56.6 107.9L51.4 107.2L50.4 97.7L41.5 94.0L34.1 100.0L29.9 96.8L33.8 88.2L28.0 80.5L18.6 82.0L16.6 77.1L24.3 71.6L23.0 62.0L14.1 58.6L14.8 53.4L24.3 52.4L28.0 43.5L22.0 36.1L25.2 31.9L33.8 35.8L41.5 30.0L40.0 20.6L44.9 18.6L50.4 26.3L60.0 25.0L63.4 16.1L68.6 16.8L69.6 26.3L78.5 30.0L85.9 24.0L90.1 27.2L86.2 35.8L92.0 43.5L101.4 42.0L103.4 46.9L95.7 52.4Z'/%3E%3Ccircle cx='60' cy='62' r='12'/%3E%3Cpath d='M150.0 46.0L155.9 48.6L155.0 52.7L148.6 52.9L144.7 58.7L147.0 64.7L143.6 67.0L138.9 62.6L132.0 64.0L129.4 69.9L125.3 69.0L125.1 62.6L119.3 58.7L113.3 61.0L111.0 57.6L115.4 52.9L114.0 46.0L108.1 43.4L109.0 39.3L115.4 39.1L119.3 33.3L117.0 27.3L120.4 25.0L125.1 29.4L132.0 28.0L134.6 22.1L138.7 23.0L138.9 29.4L144.7 33.3L150.7 31.0L153.0 34.4L148.6 39.1Z'/%3E%3Ccircle cx='132' cy='46' r='6'/%3E%3Cpath d='M226.0 50.0L216.0 67.3L196.0 67.3L186.0 50.0L196.0 32.7L216.0 32.7Z'/%3E%3Ccircle cx='206' cy='50' r='8'/%3E%3Cg transform='translate(8 134) scale(0.9)'%3E%3Cpath d='M0 12H26V48H0Z M26 18H62V42H26Z'/%3E%3Cpath d='M34 18V42M42 18V42M50 18V42M58 18V42'/%3E%3C/g%3E%3Cg transform='translate(96 144) scale(0.85)'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3Ccircle cx='51.5' cy='30.0' r='3.2'/%3E%3Ccircle cx='43.4' cy='46.8' r='3.2'/%3E%3Ccircle cx='25.2' cy='51.0' r='3.2'/%3E%3Ccircle cx='10.6' cy='39.3' r='3.2'/%3E%3Ccircle cx='10.6' cy='20.7' r='3.2'/%3E%3Ccircle cx='25.2' cy='9.0' r='3.2'/%3E%3Ccircle cx='43.4' cy='13.2' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(186 130) scale(0.9)'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3Cpath d='M14 20H26'/%3E%3C/g%3E%3Cg transform='translate(12 188) scale(0.8)'%3E%3Cpath d='M0 30H10L16 10L24 50L32 10L40 50L48 10L54 30H64'/%3E%3C/g%3E%3Cg transform='translate(150 190) scale(0.65)'%3E%3Cpath d='M6 54L34 26'/%3E%3Cpath d='M34 26A10 10 0 1 0 40 8L34 14L38 18L32 24Z'/%3E%3C/g%3E%3Cpath d='M222.0 214.0L225.9 215.5L225.4 217.9L221.2 217.8L219.1 221.1L220.8 224.9L218.7 226.3L215.8 223.2L212.0 224.0L210.5 227.9L208.1 227.4L208.2 223.2L204.9 221.1L201.1 222.8L199.7 220.7L202.8 217.8L202.0 214.0L198.1 212.5L198.6 210.1L202.8 210.2L204.9 206.9L203.2 203.1L205.3 201.7L208.2 204.8L212.0 204.0L213.5 200.1L215.9 200.6L215.8 204.8L219.1 206.9L222.9 205.2L224.3 207.3L221.2 210.2Z'/%3E%3Ccircle cx='212' cy='214' r='4'/%3E%3C/svg%3E");
--bg-software:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 10)'%3E%3Cpath d='M18 12L4 30L18 48M42 12L56 30L42 48M35 8L25 52'/%3E%3C/g%3E%3Cg transform='translate(88 10)'%3E%3Cpath d='M22 6Q12 6 12 16V24Q12 30 4 30Q12 30 12 36V44Q12 54 22 54'/%3E%3Cpath d='M38 6Q48 6 48 16V24Q48 30 56 30Q48 30 48 36V44Q48 54 38 54'/%3E%3C/g%3E%3Cg transform='translate(170 8)'%3E%3Crect x='0' y='4' width='60' height='44' rx='4'/%3E%3Cpath d='M10 18L22 27L10 36M28 38H46'/%3E%3C/g%3E%3Cg transform='translate(8 84)'%3E%3Crect x='0' y='0' width='64' height='46' rx='4'/%3E%3Cpath d='M0 12H64'/%3E%3Ccircle cx='7' cy='6' r='1.4'/%3E%3Ccircle cx='13' cy='6' r='1.4'/%3E%3Ccircle cx='19' cy='6' r='1.4'/%3E%3Cpath d='M8 22H30M14 30H44M8 38H26'/%3E%3C/g%3E%3Cg transform='translate(98 82)'%3E%3Cpath d='M18 6Q4 30 18 54M42 6Q56 30 42 54'/%3E%3C/g%3E%3Cg transform='translate(150 88)'%3E%3Cpath d='M18 6H8V54H18M42 6H52V54H42'/%3E%3C/g%3E%3Cg transform='translate(188 84) scale(0.8)'%3E%3Ccircle cx='10' cy='10' r='5'/%3E%3Ccircle cx='10' cy='50' r='5'/%3E%3Ccircle cx='46' cy='22' r='5'/%3E%3Cpath d='M10 15V45M10 32Q10 22 41 22'/%3E%3C/g%3E%3Cg transform='translate(8 164)'%3E%3Cpath d='M16 44H46A12 12 0 0 0 44 20A16 16 0 0 0 14 24A10 10 0 0 0 16 44Z'/%3E%3C/g%3E%3Cg transform='translate(96 164) scale(0.8)'%3E%3Cpath d='M18 12L4 30L18 48M42 12L56 30L42 48M35 8L25 52'/%3E%3C/g%3E%3Cg transform='translate(160 164) scale(0.7)'%3E%3Crect x='0' y='0' width='64' height='46' rx='4'/%3E%3Cpath d='M0 12H64'/%3E%3Ccircle cx='7' cy='6' r='1.4'/%3E%3Ccircle cx='13' cy='6' r='1.4'/%3E%3Ccircle cx='19' cy='6' r='1.4'/%3E%3Cpath d='M8 22H30M14 30H44M8 38H26'/%3E%3C/g%3E%3Cg transform='translate(196 200) scale(0.6)'%3E%3Cpath d='M22 6Q12 6 12 16V24Q12 30 4 30Q12 30 12 36V44Q12 54 22 54'/%3E%3Cpath d='M38 6Q48 6 48 16V24Q48 30 56 30Q48 30 48 36V44Q48 54 38 54'/%3E%3C/g%3E%3C/svg%3E");
--bg-pcb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 40H46L62 56H120L136 40H240'/%3E%3Cpath d='M30 0V40'/%3E%3Cpath d='M150 0V40'/%3E%3Cpath d='M120 56V96L104 112H70'/%3E%3Cpath d='M188 40L206 58V110'/%3E%3Cpath d='M0 150H40L58 132H100'/%3E%3Cpath d='M100 132V170L120 190H176L192 174H210L226 150H240'/%3E%3Cpath d='M30 240V206L50 186H120'/%3E%3Cpath d='M150 240V212L164 198'/%3E%3Cpath d='M206 110L222 126V150'/%3E%3Ccircle cx='46' cy='40' r='5'/%3E%3Ccircle cx='46' cy='40' r='1.6'/%3E%3Ccircle cx='188' cy='40' r='5'/%3E%3Ccircle cx='188' cy='40' r='1.6'/%3E%3Ccircle cx='70' cy='112' r='5'/%3E%3Ccircle cx='70' cy='112' r='1.6'/%3E%3Ccircle cx='206' cy='110' r='5'/%3E%3Ccircle cx='206' cy='110' r='1.6'/%3E%3Ccircle cx='100' cy='132' r='5'/%3E%3Ccircle cx='100' cy='132' r='1.6'/%3E%3Ccircle cx='176' cy='190' r='5'/%3E%3Ccircle cx='176' cy='190' r='1.6'/%3E%3Ccircle cx='58' cy='132' r='5'/%3E%3Ccircle cx='58' cy='132' r='1.6'/%3E%3Ccircle cx='120' cy='190' r='5'/%3E%3Ccircle cx='120' cy='190' r='1.6'/%3E%3Ccircle cx='30' cy='40' r='5'/%3E%3Ccircle cx='30' cy='40' r='1.6'/%3E%3Ccircle cx='150' cy='40' r='5'/%3E%3Ccircle cx='150' cy='40' r='1.6'/%3E%3Crect x='140' y='96' width='34' height='26' rx='2'/%3E%3Cpath d='M148 96V90M158 96V90M168 96V90M148 122V128M158 122V128M168 122V128'/%3E%3Ccircle cx='30' cy='210' r='3'/%3E%3Ccircle cx='220' cy='214' r='3'/%3E%3Ccircle cx='216' cy='20' r='3'/%3E%3C/svg%3E");
--bg-pcb-calm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 40H46L62 56H120L136 40H240'/%3E%3Cpath d='M30 0V40'/%3E%3Cpath d='M150 0V40'/%3E%3Cpath d='M120 56V96L104 112H70'/%3E%3Cpath d='M188 40L206 58V110'/%3E%3Cpath d='M0 150H40L58 132H100'/%3E%3Cpath d='M100 132V170L120 190H176L192 174H210L226 150H240'/%3E%3Cpath d='M30 240V206L50 186H120'/%3E%3Cpath d='M150 240V212L164 198'/%3E%3Cpath d='M206 110L222 126V150'/%3E%3Ccircle cx='46' cy='40' r='5'/%3E%3Ccircle cx='46' cy='40' r='1.6'/%3E%3Ccircle cx='188' cy='40' r='5'/%3E%3Ccircle cx='188' cy='40' r='1.6'/%3E%3Ccircle cx='70' cy='112' r='5'/%3E%3Ccircle cx='70' cy='112' r='1.6'/%3E%3Ccircle cx='206' cy='110' r='5'/%3E%3Ccircle cx='206' cy='110' r='1.6'/%3E%3Ccircle cx='100' cy='132' r='5'/%3E%3Ccircle cx='100' cy='132' r='1.6'/%3E%3Ccircle cx='176' cy='190' r='5'/%3E%3Ccircle cx='176' cy='190' r='1.6'/%3E%3Ccircle cx='58' cy='132' r='5'/%3E%3Ccircle cx='58' cy='132' r='1.6'/%3E%3Ccircle cx='120' cy='190' r='5'/%3E%3Ccircle cx='120' cy='190' r='1.6'/%3E%3Ccircle cx='30' cy='40' r='5'/%3E%3Ccircle cx='30' cy='40' r='1.6'/%3E%3Ccircle cx='150' cy='40' r='5'/%3E%3Ccircle cx='150' cy='40' r='1.6'/%3E%3C/svg%3E");
--bg-architecture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 8) scale(0.95)'%3E%3Crect x='0' y='0' width='96' height='70' rx='0'/%3E%3Cpath d='M40 0V34M40 34H0M64 70V44H96'/%3E%3Cpath d='M40 22A12 12 0 0 1 52 34'/%3E%3Cpath d='M64 56A12 12 0 0 0 76 44'/%3E%3Cpath d='M0 82H96M0 78V86M96 78V86'/%3E%3C/g%3E%3Cg transform='translate(124 12)'%3E%3Cpath d='M4 66V20H40V66M40 66V34H60V66M0 66H64'/%3E%3Cpath d='M12 30H18M26 30H32M12 42H18M26 42H32M12 54H18M26 54H32'/%3E%3Cpath d='M46 44H54M46 54H54'/%3E%3C/g%3E%3Cg transform='translate(190 10) scale(0.8)'%3E%3Cpath d='M4 4V56H56Z'/%3E%3Cpath d='M14 24V46H36Z'/%3E%3C/g%3E%3Cg transform='translate(10 132)'%3E%3Cpath d='M0 10H70M0 4V16M70 4V16M6 10L14 6V14ZM64 10L56 6V14Z'/%3E%3C/g%3E%3Cg transform='translate(104 122)'%3E%3Cpath d='M30 4V14'/%3E%3Ccircle cx='30' cy='18' r='4'/%3E%3Cpath d='M28 21L12 56M32 21L48 56M20 40H40'/%3E%3C/g%3E%3Cg transform='translate(160 130) scale(0.6)'%3E%3Crect x='0' y='0' width='96' height='70' rx='0'/%3E%3Cpath d='M40 0V34M40 34H0M64 70V44H96'/%3E%3Cpath d='M40 22A12 12 0 0 1 52 34'/%3E%3Cpath d='M64 56A12 12 0 0 0 76 44'/%3E%3Cpath d='M0 82H96M0 78V86M96 78V86'/%3E%3C/g%3E%3Cg transform='translate(12 172) scale(0.8)'%3E%3Cpath d='M4 66V20H40V66M40 66V34H60V66M0 66H64'/%3E%3Cpath d='M12 30H18M26 30H32M12 42H18M26 42H32M12 54H18M26 54H32'/%3E%3Cpath d='M46 44H54M46 54H54'/%3E%3C/g%3E%3Cg transform='translate(116 196) scale(0.7)'%3E%3Cpath d='M0 10H70M0 4V16M70 4V16M6 10L14 6V14ZM64 10L56 6V14Z'/%3E%3C/g%3E%3Cg transform='translate(188 190) scale(0.7)'%3E%3Cpath d='M4 4V56H56Z'/%3E%3Cpath d='M14 24V46H36Z'/%3E%3C/g%3E%3C/svg%3E");
--bg-branding:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 8)'%3E%3Cpath d='M4 50C10 4 50 4 56 50'/%3E%3Cpath d='M4 50L4 24M56 50L56 24'/%3E%3Crect x='0' y='46' width='8' height='8' rx='0'/%3E%3Crect x='52' y='46' width='8' height='8' rx='0'/%3E%3Ccircle cx='4' cy='22' r='3'/%3E%3Ccircle cx='56' cy='22' r='3'/%3E%3C/g%3E%3Cg transform='translate(88 10)'%3E%3Crect x='0' y='6' width='62' height='42' rx='6'/%3E%3Cpath d='M25 18L42 27L25 36Z'/%3E%3C/g%3E%3Cg transform='translate(172 6) scale(0.9)'%3E%3Cpath d='M14 0V14H0M46 0V14H60M14 60V46H0M46 60V46H60'/%3E%3C/g%3E%3Cg transform='translate(8 88)'%3E%3Ccircle cx='18' cy='24' r='16'/%3E%3Ccircle cx='38' cy='24' r='16'/%3E%3Ccircle cx='28' cy='40' r='16'/%3E%3C/g%3E%3Cg transform='translate(88 84)'%3E%3Cpath d='M30 6L44 30L30 54L16 30Z'/%3E%3Cpath d='M30 6V34'/%3E%3Ccircle cx='30' cy='36' r='3'/%3E%3C/g%3E%3Cg transform='translate(160 90) scale(0.9)'%3E%3Crect x='0' y='4' width='40' height='50' rx='3'/%3E%3Cpath d='M10 4V54M30 4V54'/%3E%3Cpath d='M0 16H10M0 28H10M0 40H10M30 16H40M30 28H40M30 40H40'/%3E%3C/g%3E%3Cg transform='translate(10 168)'%3E%3Crect x='0' y='0' width='60' height='46' rx='4'/%3E%3Ccircle cx='18' cy='14' r='5'/%3E%3Cpath d='M0 38L18 24L32 36L44 26L60 40'/%3E%3C/g%3E%3Cg transform='translate(94 168) scale(0.7)'%3E%3Cpath d='M4 50C10 4 50 4 56 50'/%3E%3Cpath d='M4 50L4 24M56 50L56 24'/%3E%3Crect x='0' y='46' width='8' height='8' rx='0'/%3E%3Crect x='52' y='46' width='8' height='8' rx='0'/%3E%3Ccircle cx='4' cy='22' r='3'/%3E%3Ccircle cx='56' cy='22' r='3'/%3E%3C/g%3E%3Cg transform='translate(170 176) scale(0.7)'%3E%3Crect x='0' y='6' width='62' height='42' rx='6'/%3E%3Cpath d='M25 18L42 27L25 36Z'/%3E%3C/g%3E%3C/svg%3E");
--bg-collab:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 10)'%3E%3Ccircle cx='16' cy='12' r='8'/%3E%3Cpath d='M0 46A16 16 0 0 1 32 46Z'/%3E%3C/g%3E%3Cg transform='translate(66 12)'%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3Ccircle cx='6' cy='8' r='5'/%3E%3Ccircle cx='54' cy='8' r='5'/%3E%3Ccircle cx='6' cy='52' r='5'/%3E%3Ccircle cx='54' cy='52' r='5'/%3E%3Cpath d='M10 12L24 24M50 12L36 24M10 48L24 36M50 48L36 36'/%3E%3C/g%3E%3Cg transform='translate(150 8)'%3E%3Cpath d='M0 4H50V34H22L10 46V34H0Z'/%3E%3Cpath d='M10 14H40M10 24H30'/%3E%3C/g%3E%3Cg transform='translate(10 88)'%3E%3Ccircle cx='24' cy='24' r='22'/%3E%3Cpath d='M13 25L21 33L36 16'/%3E%3C/g%3E%3Cg transform='translate(76 92) scale(0.9)'%3E%3Ccircle cx='30' cy='10' r='6'/%3E%3Cpath d='M18 36A12 12 0 0 1 42 36Z'/%3E%3Ccircle cx='8' cy='22' r='5'/%3E%3Cpath d='M-3 44A11 11 0 0 1 19 44'/%3E%3Ccircle cx='52' cy='22' r='5'/%3E%3Cpath d='M41 44A11 11 0 0 1 63 44'/%3E%3C/g%3E%3Cg transform='translate(160 92) scale(0.9)'%3E%3Ccircle cx='16' cy='12' r='8'/%3E%3Cpath d='M0 46A16 16 0 0 1 32 46Z'/%3E%3C/g%3E%3Cg transform='translate(12 166)'%3E%3Cpath d='M22 34L34 22'/%3E%3Cpath d='M16 40A9 9 0 0 1 16 28L24 20A9 9 0 0 1 36 20'/%3E%3Cpath d='M38 16A9 9 0 0 1 38 28L30 36A9 9 0 0 1 18 36'/%3E%3C/g%3E%3Cg transform='translate(76 168) scale(0.8)'%3E%3Cpath d='M24 2L30 18L46 18L33 28L38 44L24 34L10 44L15 28L2 18L18 18Z'/%3E%3C/g%3E%3Cg transform='translate(140 164) scale(0.8)'%3E%3Cpath d='M0 4H50V34H22L10 46V34H0Z'/%3E%3Cpath d='M10 14H40M10 24H30'/%3E%3C/g%3E%3Cg transform='translate(200 170) scale(0.6)'%3E%3Ccircle cx='24' cy='24' r='22'/%3E%3Cpath d='M13 25L21 33L36 16'/%3E%3C/g%3E%3C/svg%3E");
--bg-multi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60.0 40.0L65.9 42.5L65.3 46.3L58.9 46.8L55.8 52.9L59.1 58.4L56.4 61.1L50.9 57.8L44.8 60.9L44.3 67.3L40.5 67.9L38.0 62.0L31.2 60.9L27.0 65.8L23.6 64.0L25.1 57.8L20.2 52.9L14.0 54.4L12.2 51.0L17.1 46.8L16.0 40.0L10.1 37.5L10.7 33.7L17.1 33.2L20.2 27.1L16.9 21.6L19.6 18.9L25.1 22.2L31.2 19.1L31.7 12.7L35.5 12.1L38.0 18.0L44.8 19.1L49.0 14.2L52.4 16.0L50.9 22.2L55.8 27.1L62.0 25.6L63.8 29.0L58.9 33.2Z'/%3E%3Ccircle cx='38' cy='40' r='8'/%3E%3Cg transform='translate(90 10) scale(0.9)'%3E%3Crect x='14' y='14' width='32' height='32' rx='2'/%3E%3Ccircle cx='21' cy='21' r='2'/%3E%3Cpath d='M18 14V6M18 46V54'/%3E%3Cpath d='M26 14V6M26 46V54'/%3E%3Cpath d='M34 14V6M34 46V54'/%3E%3Cpath d='M42 14V6M42 46V54'/%3E%3Cpath d='M14 18H6M46 18H54'/%3E%3Cpath d='M14 26H6M46 26H54'/%3E%3Cpath d='M14 34H6M46 34H54'/%3E%3Cpath d='M14 42H6M46 42H54'/%3E%3C/g%3E%3Cg transform='translate(166 12) scale(0.9)'%3E%3Cpath d='M18 12L4 30L18 48M42 12L56 30L42 48M35 8L25 52'/%3E%3C/g%3E%3Cg transform='translate(10 96) scale(0.7)'%3E%3Cpath d='M0 30C8 2 16 2 24 30S40 58 48 30S64 2 72 30'/%3E%3C/g%3E%3Cg transform='translate(92 90)'%3E%3Cpath d='M0 30H14L18 22L26 38L34 22L42 38L46 30H60'/%3E%3C/g%3E%3Cg transform='translate(170 88) scale(0.7)'%3E%3Cpath d='M0 12H26V48H0Z M26 18H62V42H26Z'/%3E%3Cpath d='M34 18V42M42 18V42M50 18V42M58 18V42'/%3E%3C/g%3E%3Cg transform='translate(12 158) scale(0.55)'%3E%3Crect x='0' y='0' width='96' height='70' rx='0'/%3E%3Cpath d='M40 0V34M40 34H0M64 70V44H96'/%3E%3Cpath d='M40 22A12 12 0 0 1 52 34'/%3E%3Cpath d='M64 56A12 12 0 0 0 76 44'/%3E%3Cpath d='M0 82H96M0 78V86M96 78V86'/%3E%3C/g%3E%3Cg transform='translate(94 150) scale(0.75)'%3E%3Crect x='0' y='0' width='56' height='42' rx='3'/%3E%3Crect x='30' y='8' width='20' height='12' rx='1'/%3E%3Cpath d='M8 10H18M8 20H18M8 30H18M30 30H50'/%3E%3Cpath d='M10 42V50M22 42V50M34 42V50M46 42V50'/%3E%3C/g%3E%3Cg transform='translate(170 158) scale(0.75)'%3E%3Cpath d='M42 8H14L30 30L14 52H42'/%3E%3C/g%3E%3Cg transform='translate(20 194) scale(0.8)'%3E%3Cpath d='M0 30H25M25 14V46M35 14V46M35 30H60'/%3E%3C/g%3E%3Cg transform='translate(130 210) scale(0.5)'%3E%3Cpath d='M0 10H24M32 10H42M0 26H14M22 26H50M0 42H30'/%3E%3C/g%3E%3Cpath d='M224.0 214.0L227.9 215.5L227.4 217.9L223.2 217.8L221.1 221.1L222.8 224.9L220.7 226.3L217.8 223.2L214.0 224.0L212.5 227.9L210.1 227.4L210.2 223.2L206.9 221.1L203.1 222.8L201.7 220.7L204.8 217.8L204.0 214.0L200.1 212.5L200.6 210.1L204.8 210.2L206.9 206.9L205.2 203.1L207.3 201.7L210.2 204.8L214.0 204.0L215.5 200.1L217.9 200.6L217.8 204.8L221.1 206.9L224.9 205.2L226.3 207.3L223.2 210.2Z'/%3E%3Ccircle cx='214' cy='214' r='4'/%3E%3C/svg%3E");
--bg-graduation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 8)'%3E%3Cpath d='M30 6L2 20L30 34L58 20Z'/%3E%3Cpath d='M14 28V42C22 52 38 52 46 42V28'/%3E%3Cpath d='M58 20V38'/%3E%3C/g%3E%3Cg transform='translate(88 10)'%3E%3Cpath d='M42 8H14L30 30L14 52H42'/%3E%3C/g%3E%3Cg transform='translate(150 12)'%3E%3Cpath d='M4 14H56M16 14V50M42 14V50'/%3E%3C/g%3E%3Cg transform='translate(196 14) scale(0.6)'%3E%3Cpath d='M2 32L8 28L18 50L32 6H62'/%3E%3C/g%3E%3Cg transform='translate(8 84)'%3E%3Cpath d='M30 14C22 8 10 8 0 12V48C10 44 22 44 30 50C38 44 50 44 60 48V12C50 8 38 8 30 14Z M30 14V50'/%3E%3C/g%3E%3Cg transform='translate(96 86)'%3E%3Cpath d='M0 44A30 30 0 0 1 60 44Z'/%3E%3Cpath d='M30 44V28M10 44A20 20 0 0 1 14 32'/%3E%3Ccircle cx='30' cy='44' r='2'/%3E%3C/g%3E%3Cg transform='translate(170 82)'%3E%3Cpath d='M20 42V36C8 30 8 8 30 8S52 30 40 36V42Z'/%3E%3Cpath d='M22 48H38M25 54H35'/%3E%3C/g%3E%3Cg transform='translate(10 164)'%3E%3Cpath d='M0 10H24M32 10H42M0 26H14M22 26H50M0 42H30'/%3E%3C/g%3E%3Cg transform='translate(88 160) scale(0.9)'%3E%3Ccircle cx='30' cy='30' r='3.5'/%3E%3Cellipse cx='30' cy='30' rx='26' ry='10' transform='rotate(0 30 30)'/%3E%3Cellipse cx='30' cy='30' rx='26' ry='10' transform='rotate(60 30 30)'/%3E%3Cellipse cx='30' cy='30' rx='26' ry='10' transform='rotate(120 30 30)'/%3E%3C/g%3E%3Cg transform='translate(170 166) scale(0.9)'%3E%3Cpath d='M22 6L34 20M18 12L30 26'/%3E%3Crect x='20' y='20' width='8' height='22' rx='2'/%3E%3Cpath d='M12 50H46M22 42V50'/%3E%3Cpath d='M34 46A14 14 0 0 0 40 24'/%3E%3C/g%3E%3Cg transform='translate(210 100) scale(0.6)'%3E%3Cpath d='M38 8C30 0 26 6 26 16V44C26 54 22 60 14 52'/%3E%3C/g%3E%3C/svg%3E");
--bg-statistics:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(6 8)'%3E%3Cpath d='M2 2V56H62'/%3E%3Crect x='10' y='30' width='8' height='26' rx='0'/%3E%3Crect x='24' y='16' width='8' height='40' rx='0'/%3E%3Crect x='38' y='24' width='8' height='32' rx='0'/%3E%3Crect x='52' y='8' width='8' height='48' rx='0'/%3E%3C/g%3E%3Cg transform='translate(92 10)'%3E%3Cpath d='M2 2V56H62'/%3E%3Cpath d='M8 44L22 28L34 36L52 12'/%3E%3Ccircle cx='8' cy='44' r='2.5'/%3E%3Ccircle cx='22' cy='28' r='2.5'/%3E%3Ccircle cx='34' cy='36' r='2.5'/%3E%3Ccircle cx='52' cy='12' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(170 10) scale(0.85)'%3E%3Cpath d='M0 52C16 52 20 6 32 6S48 52 64 52'/%3E%3Cpath d='M0 52H64M32 6V52'/%3E%3C/g%3E%3Cg transform='translate(8 92)'%3E%3Cpath d='M2 2V56H62'/%3E%3Ccircle cx='8' cy='44' r='2.4'/%3E%3Ccircle cx='14' cy='36' r='2.4'/%3E%3Ccircle cx='20' cy='40' r='2.4'/%3E%3Ccircle cx='26' cy='28' r='2.4'/%3E%3Ccircle cx='32' cy='30' r='2.4'/%3E%3Ccircle cx='38' cy='20' r='2.4'/%3E%3Ccircle cx='44' cy='22' r='2.4'/%3E%3Ccircle cx='52' cy='10' r='2.4'/%3E%3Cpath d='M6 48L56 8'/%3E%3C/g%3E%3Cg transform='translate(92 94) scale(0.95)'%3E%3Ccircle cx='30' cy='30' r='26'/%3E%3Cpath d='M30 30V4M30 30L52 44'/%3E%3C/g%3E%3Cg transform='translate(160 92) scale(0.9)'%3E%3Crect x='0' y='0' width='62' height='46' rx='2'/%3E%3Cpath d='M0 15H62M0 30H62M21 0V46M42 0V46'/%3E%3C/g%3E%3Cg transform='translate(12 172) scale(0.8)'%3E%3Cpath d='M42 8H14L30 30L14 52H42'/%3E%3C/g%3E%3Cg transform='translate(78 172) scale(0.7)'%3E%3Cpath d='M2 2V56H62'/%3E%3Crect x='10' y='30' width='8' height='26' rx='0'/%3E%3Crect x='24' y='16' width='8' height='40' rx='0'/%3E%3Crect x='38' y='24' width='8' height='32' rx='0'/%3E%3Crect x='52' y='8' width='8' height='48' rx='0'/%3E%3C/g%3E%3Cg transform='translate(152 172) scale(0.7)'%3E%3Cpath d='M0 52C16 52 20 6 32 6S48 52 64 52'/%3E%3Cpath d='M0 52H64M32 6V52'/%3E%3C/g%3E%3Cg transform='translate(204 176) scale(0.5)'%3E%3Cpath d='M4 14H56M16 14V50M42 14V50'/%3E%3C/g%3E%3C/svg%3E");
--bg-edtech:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 6)'%3E%3Crect x='0' y='0' width='66' height='42' rx='3'/%3E%3Cpath d='M33 42V56M20 56H46'/%3E%3Cpath d='M10 30V22M20 30V14M30 30V18M40 30V10'/%3E%3C/g%3E%3Cg transform='translate(94 10)'%3E%3Ccircle cx='26' cy='26' r='24'/%3E%3Cpath d='M20 16L38 26L20 36Z'/%3E%3C/g%3E%3Cg transform='translate(156 6) scale(0.9)'%3E%3Crect x='0' y='0' width='44' height='56' rx='3'/%3E%3Cpath d='M8 14L12 18L18 10M24 14H36'/%3E%3Cpath d='M8 28L12 32L18 24M24 28H36'/%3E%3Cpath d='M8 42H12M24 42H36'/%3E%3C/g%3E%3Cg transform='translate(8 88)'%3E%3Cpath d='M16 18C16 4 44 4 44 18C44 30 30 30 30 42'/%3E%3Ccircle cx='30' cy='54' r='1.8'/%3E%3C/g%3E%3Cg transform='translate(76 92)'%3E%3Crect x='8' y='2' width='48' height='32' rx='3'/%3E%3Cpath d='M0 42H64L58 34H6Z'/%3E%3C/g%3E%3Cg transform='translate(158 88) scale(0.9)'%3E%3Cpath d='M6 4L6 44L16 34L24 52L32 48L24 30L38 30Z'/%3E%3C/g%3E%3Cg transform='translate(196 96) scale(0.6)'%3E%3Cpath d='M24 2L30 18L46 18L33 28L38 44L24 34L10 44L15 28L2 18L18 18Z'/%3E%3C/g%3E%3Cg transform='translate(10 170) scale(0.9)'%3E%3Cpath d='M14 6H46V24A16 16 0 0 1 14 24Z'/%3E%3Cpath d='M14 12H4V18A10 10 0 0 0 14 26M46 12H56V18A10 10 0 0 1 46 26'/%3E%3Cpath d='M30 40V50M18 54H42'/%3E%3C/g%3E%3Cg transform='translate(92 166) scale(0.7)'%3E%3Crect x='0' y='0' width='66' height='42' rx='3'/%3E%3Cpath d='M33 42V56M20 56H46'/%3E%3Cpath d='M10 30V22M20 30V14M30 30V18M40 30V10'/%3E%3C/g%3E%3Cg transform='translate(160 170) scale(0.7)'%3E%3Ccircle cx='26' cy='26' r='24'/%3E%3Cpath d='M20 16L38 26L20 36Z'/%3E%3C/g%3E%3C/svg%3E");
--bg-documents:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 6)'%3E%3Cpath d='M2 0H34L50 16V58H2Z M34 0V16H50'/%3E%3Cpath d='M10 28H42M10 38H42M10 48H30'/%3E%3C/g%3E%3Cg transform='translate(76 10)'%3E%3Crect x='0' y='0' width='62' height='46' rx='2'/%3E%3Cpath d='M0 15H62M0 30H62M21 0V46M42 0V46'/%3E%3C/g%3E%3Cg transform='translate(150 8) scale(0.95)'%3E%3Cpath d='M4 10C4 -2 52 -2 52 10V46C52 58 4 58 4 46Z'/%3E%3Cpath d='M4 10C4 22 52 22 52 10M4 28C4 40 52 40 52 28'/%3E%3C/g%3E%3Cg transform='translate(8 86)'%3E%3Cpath d='M4 56L10 38L40 8L52 20L22 50Z M34 14L46 26'/%3E%3C/g%3E%3Cg transform='translate(76 96)'%3E%3Cpath d='M4 30V12H22V30H12L8 42M34 30V12H52V30H42L38 42'/%3E%3C/g%3E%3Cg transform='translate(150 90) scale(0.95)'%3E%3Crect x='6' y='2' width='40' height='50' rx='2'/%3E%3Cpath d='M14 10H38M14 18H38M14 26H30'/%3E%3Cpath d='M0 10V58H40'/%3E%3C/g%3E%3Cg transform='translate(10 168)'%3E%3Crect x='0' y='0' width='60' height='48' rx='3'/%3E%3Cpath d='M0 12H60M0 24H60M0 36H60M20 0V48M40 0V48'/%3E%3Cpath d='M6 30L14 42M14 30L6 42'/%3E%3C/g%3E%3Cg transform='translate(92 166) scale(0.9)'%3E%3Cpath d='M40 16L18 38A7 7 0 0 0 28 48L52 24A12 12 0 0 0 34 8L10 32'/%3E%3C/g%3E%3Cg transform='translate(150 168) scale(0.9)'%3E%3Cpath d='M20 4H36V22H50V38H6V22H20Z'/%3E%3Cpath d='M0 50H56'/%3E%3C/g%3E%3Cg transform='translate(206 170) scale(0.5)'%3E%3Cpath d='M2 0H34L50 16V58H2Z M34 0V16H50'/%3E%3Cpath d='M10 28H42M10 38H42M10 48H30'/%3E%3C/g%3E%3C/svg%3E");
--bg-iot:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%3E%3Crect%20x%3D%2718%27%20y%3D%2718%27%20width%3D%2742%27%20height%3D%2730%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%27100%27%20y%3D%2732%27%20width%3D%2742%27%20height%3D%2730%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%27178%27%20y%3D%2720%27%20width%3D%2740%27%20height%3D%2730%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M60%2033h40M142%2047h36M121%2062v36M39%2048v45M198%2050v45M39%2093h82M121%2098h77%27%2F%3E%3Ccircle%20cx%3D%2739%27%20cy%3D%2793%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27121%27%20cy%3D%2798%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27198%27%20cy%3D%2795%27%20r%3D%273%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2815%20145%29%27%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%2712%27%2F%3E%3Ccircle%20cx%3D%27105%27%20cy%3D%2725%27%20r%3D%2712%27%2F%3E%3Ccircle%20cx%3D%27185%27%20cy%3D%2725%27%20r%3D%2712%27%2F%3E%3Cpath%20d%3D%27M37%2025h56M117%2025h56%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-plc:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2822%2020%29%27%3E%3Cpath%20d%3D%27M0%200v190M196%200v190M0%2028h35M70%2028h48M153%2028h43M0%2092h52M86%2092h45M166%2092h30M0%20156h35M70%20156h55M160%20156h36%27%2F%3E%3Cpath%20d%3D%27M35%2016v24M70%2016v24M118%2016v24M153%2016v24M52%2080v24M86%2080v24M131%2080v24M166%2080v24M35%20144v24M70%20144v24M125%20144v24M160%20144v24%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%2728%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%27143%27%20cy%3D%2792%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%27156%27%20r%3D%277%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-hydraulic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2825%2030%29%27%3E%3Cpath%20d%3D%27M0%2030h38l18-18%2018%2018h38M0%20100h38l18-18%2018%2018h38%27%2F%3E%3Cpath%20d%3D%27M56%2012v36M56%2082v36%27%2F%3E%3Crect%20x%3D%2745%27%20y%3D%2748%27%20width%3D%2722%27%20height%3D%2734%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M67%2065h50%27%2F%3E%3Ccircle%20cx%3D%27124%27%20cy%3D%2765%27%20r%3D%2714%27%2F%3E%3Cpath%20d%3D%27M124%2051v28M110%2065h28%27%2F%3E%3Cpath%20d%3D%27M0%20170h145%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-pneumatic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2825%2025%29%27%3E%3Cpath%20d%3D%27M0%2035h42M78%2035h42M0%20105h42M78%20105h42%27%2F%3E%3Crect%20x%3D%2742%27%20y%3D%2718%27%20width%3D%2736%27%20height%3D%2734%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%2742%27%20y%3D%2788%27%20width%3D%2736%27%20height%3D%2734%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M51%2018l18%2034M69%2018L51%2052M51%2088l18%2034M69%2088L51%20122%27%2F%3E%3Ccircle%20cx%3D%27145%27%20cy%3D%2770%27%20r%3D%2722%27%2F%3E%3Cpath%20d%3D%27M123%2070h44M145%2048v44%27%2F%3E%3Cpath%20d%3D%27M120%2070h-20M165%2070h30%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-solar:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2825%2028%29%27%3E%3Cpath%20d%3D%27M12%20110h178%27%2F%3E%3Cpath%20d%3D%27M35%20110L65%2035h70l30%2075z%27%2F%3E%3Cpath%20d%3D%27M65%2035l-5%2075M88%2035l5%2075M112%2035l5%2075M135%2035l5%2075M49%2072h130M39%2092h148%27%2F%3E%3Cpath%20d%3D%27M65%2035L52%208M135%2035l14-27%27%2F%3E%3Ccircle%20cx%3D%27101%27%20cy%3D%2714%27%20r%3D%278%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-wind:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2830%2025%29%27%3E%3Cpath%20d%3D%27M90%2055v125M65%20180h50%27%2F%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2755%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M90%2055C60%2038%2042%2025%2047%208c25%205%2039%2020%2043%2047M90%2055c4-34%2011-50%2028-55%2011%2023%202%2042-28%2055M90%2055c29%2017%2045%2031%2040%2048-24-5-38-20-40-48%27%2F%3E%3Cpath%20d%3D%27M15%20205h150%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-robotics:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2835%2022%29%27%3E%3Crect%20x%3D%2765%27%20y%3D%27160%27%20width%3D%2780%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Ccircle%20cx%3D%27105%27%20cy%3D%27150%27%20r%3D%2716%27%2F%3E%3Cpath%20d%3D%27M105%20134V92M105%2092L55%2062M55%2062L28%2092%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2762%27%20r%3D%2710%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2792%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M28%20100v38l25%2022M105%2092l45%2030%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27122%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M150%20131l-5%2028%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-server:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2835%2018%29%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27170%27%20height%3D%2752%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2768%27%20width%3D%27170%27%20height%3D%2752%27%20rx%3D%274%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27136%27%20width%3D%27170%27%20height%3D%2752%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M18%2018h80M18%2086h80M18%20154h80%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2718%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27152%27%20cy%3D%2718%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%2786%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27152%27%20cy%3D%2786%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27140%27%20cy%3D%27154%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27152%27%20cy%3D%27154%27%20r%3D%273%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-physics:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2820%2025%29%27%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2790%27%20rx%3D%2778%27%20ry%3D%2728%27%2F%3E%3Cellipse%20cx%3D%27100%27%20cy%3D%2790%27%20rx%3D%2728%27%20ry%3D%2778%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2790%27%20r%3D%276%27%2F%3E%3Cpath%20d%3D%27M18%20165h65M18%20180h105M140%2045h60M150%2060h42%27%2F%3E%3Cpath%20d%3D%27M162%2034l-8%2020%2020-8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
--bg-civil:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate%2818%2025%29%27%3E%3Cpath%20d%3D%27M10%20180h194M28%20180V75M176%20180V75M28%2075h148%27%2F%3E%3Cpath%20d%3D%27M28%2075L70%2040l42%2035%2042-35%2022%2035%27%2F%3E%3Cpath%20d%3D%27M28%20105h148M28%20135h148M70%2075v105M112%2075v105M154%2075v105%27%2F%3E%3Cpath%20d%3D%27M45%2045h110%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* =====================================================================
   Phase 4 layer — solid header, larger logo, contextual electronic
   backgrounds, inline icon titles, interactive tool chips, new footer
   ===================================================================== */

/* ---------- Shared "icon + title on ONE line" pattern ---------- */
.title-row { display: flex; align-items: center; gap: 14px; line-height: 1.4; }
.t-ico { flex: none; width: 28px; height: 28px; color: var(--teal-signal); transition: transform .3s var(--ease); }
.t-ico-lg { width: clamp(32px, 5vw, 36px); height: clamp(32px, 5vw, 36px); }
.feature-card h4.title-row { font-size: 18px; margin-bottom: 12px; }
.feature-card:hover .t-ico { transform: rotate(-6deg) scale(1.12); }
.section-heading h2.title-row { gap: 16px; }

/* ---------- Header: solid surface, bigger logo ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper-raised);            /* fully opaque — no transparency, no blur */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 12px; }
@media (min-width: 480px) { .site-header .container { height: 80px; } }
@media (min-width: 1024px) { .site-header .container { height: 88px; gap: 20px; } }
@media (max-width: 359.98px) { .site-header .container { gap: 6px; } }

.site-logo { display: flex; align-items: center; flex-shrink: 0; height: 52px; }
@media (min-width: 480px) { .site-logo { height: 56px; } }
@media (min-width: 1024px) { .site-logo { height: 60px; } }
.site-logo img { height: 100%; width: auto; max-width: none; }
/* The dark PNG has ~22% empty space at the bottom of its canvas; nudge it so both
   variants sit on the same optical centre line (the file itself is untouched). */
.logo-dark { transform: translateY(10.5%); }

/* ---------- Eyebrow line ("EngiCore Engineering Team", audience lines) ---------- */
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; line-height: 1.5; font-weight: 600;
  color: var(--teal-bright); margin-bottom: 18px;
}
.hero-eyebrow .e-ico { flex: none; width: 26px; height: 26px; margin: 0; }
@media (min-width: 768px) {
  .hero-eyebrow { font-size: 20px; gap: 12px; }
  .hero-eyebrow .e-ico { width: 28px; height: 28px; }
}

/* ---------- Contextual electronic backgrounds ----------
   One tile per topic, drawn as an SVG mask and tinted by CSS, so the same
   artwork works in light + dark mode. Opacity stays inside 0.03–0.08.        */
:root {
  --pat-ink: #0B2545;      /* pattern tint on light surfaces */
  --pat-o: .07;
  --academic-glow: color-mix(in srgb, var(--academic-accent) 62%, #fff);
}
:root[data-theme="dark"] { --pat-ink: #00E5D0; --pat-o: .07; }

[data-bg] { position: relative; isolation: isolate; }
[data-bg]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--pat-c, var(--pat-ink));
  opacity: var(--pat-o-local, var(--pat-o));
  -webkit-mask-image: var(--bg-img); mask-image: var(--bg-img);
  -webkit-mask-size: var(--bg-size, 240px); mask-size: var(--bg-size, 240px);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
[data-bg="electronics"]  { --bg-img: var(--bg-electronics); }
[data-bg="automation"]   { --bg-img: var(--bg-automation); }
[data-bg="power"]        { --bg-img: var(--bg-power); }
[data-bg="mechanical"]   { --bg-img: var(--bg-mechanical); }
[data-bg="software"]     { --bg-img: var(--bg-software); }
[data-bg="pcb"]          { --bg-img: var(--bg-pcb); }
[data-bg="pcb-calm"]     { --bg-img: var(--bg-pcb-calm); }
[data-bg="architecture"] { --bg-img: var(--bg-architecture); }
[data-bg="branding"]     { --bg-img: var(--bg-branding); }
[data-bg="collab"]       { --bg-img: var(--bg-collab); }
[data-bg="multi"]        { --bg-img: var(--bg-multi); }
[data-bg="graduation"]   { --bg-img: var(--bg-graduation); }
[data-bg="statistics"]   { --bg-img: var(--bg-statistics); }
[data-bg="edtech"]       { --bg-img: var(--bg-edtech); }
[data-bg="documents"]    { --bg-img: var(--bg-documents); }
[data-bg="iot"]        { --bg-img: var(--bg-iot); }
[data-bg="plc"]        { --bg-img: var(--bg-plc); }
[data-bg="hydraulic"]  { --bg-img: var(--bg-hydraulic); }
[data-bg="pneumatic"]  { --bg-img: var(--bg-pneumatic); }
[data-bg="solar"]      { --bg-img: var(--bg-solar); }
[data-bg="wind"]       { --bg-img: var(--bg-wind); }
[data-bg="robotics"]   { --bg-img: var(--bg-robotics); }
[data-bg="server"]     { --bg-img: var(--bg-server); }
[data-bg="physics"]    { --bg-img: var(--bg-physics); }
[data-bg="civil"]      { --bg-img: var(--bg-civil); }

/* Navy surfaces (hero, footer, industrial track card) need a light tint */
.hero[data-bg], .site-footer[data-bg], .track-card.industrial[data-bg] { --pat-c: var(--teal-bright); --pat-o-local: .08; }
.academic-hero[data-bg] { --pat-c: var(--academic-glow); --pat-o-local: .09; }
.site-footer[data-bg] { --pat-o-local: .07; }
/* Academic tint on light/dark surfaces */
.track-card.academic[data-bg] { --pat-c: var(--academic-accent); --pat-o-local: .05; }
.svc-root[data-track="academic"] .svc-card[data-bg],
.svc-root[data-track="academic"][data-bg],
.integrity-note[data-bg] { --pat-c: var(--academic-accent); --pat-o-local: .10; }
:root[data-theme="dark"] .track-card.academic[data-bg] { --pat-c: var(--academic-glow); --pat-o-local: .05; }
:root[data-theme="dark"] .svc-root[data-track="academic"] .svc-card[data-bg],
:root[data-theme="dark"] .svc-root[data-track="academic"][data-bg],
:root[data-theme="dark"] .integrity-note[data-bg] { --pat-c: var(--academic-glow); --pat-o-local: .10; }
.svc-card[data-bg] { --pat-o-local: .08; }
.svc-root[data-bg] { --pat-o-local: .05; }
.tracks[data-bg], .section[data-bg] { --pat-o-local: .06; }
.cta-banner[data-bg] { --pat-o-local: .07; }
#contact-academic[data-bg] { --pat-c: var(--academic-accent); }
:root[data-theme="dark"] #contact-academic[data-bg] { --pat-c: var(--academic-glow); }

/* ---------- Tracks section (home) ---------- */
.track-card .h-ico { margin-inline-end: 0; }
.track-card h3.title-row { gap: 12px; }
.track-card h3 .h-ico { width: 30px; height: 30px; vertical-align: 0; }

/* ---------- CTA banner: readable in BOTH themes ---------- */
.cta-banner {
  --tint: var(--teal-signal);
  padding: 56px 0; text-align: center; color: var(--ink);
  background: color-mix(in srgb, var(--tint) 7%, var(--paper-raised));
  border-block: 1px solid var(--line);
}
@media (min-width: 768px) { .cta-banner { padding: 72px 0; } }
#contact-academic { --tint: var(--academic-accent); }
.cta-banner h2 { color: var(--ink); font-size: clamp(22px, 4.6vw, 34px); }
.cta-banner p { color: var(--ink-soft); margin: 0 auto 28px; }
.cta-banner .btn { margin-top: 4px; }
.btn-academic { background: var(--academic-accent); color: #06222b; }
.btn-academic:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--academic-accent) 40%, transparent); }

/* ---------- Academic integrity note ---------- */
.integrity-note {
  padding: 22px 24px; margin-bottom: 40px;
  background: var(--paper-raised); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--academic-accent); border-radius: var(--radius-soft);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.integrity-note h4 { font-size: 17px; margin-bottom: 8px; }
.integrity-note p { margin: 0; font-size: 14.5px; max-width: 80ch; }

/* ---------- Service cards ---------- */
.svc-head h3.title-row { font-size: 21px; gap: 12px; margin-bottom: 10px; }
.svc-head h3 .t-ico { width: 30px; height: 30px; color: var(--acc); }
.svc-card:hover .t-ico { transform: rotate(-6deg) scale(1.12); }
.svc-head { position: relative; }

/* Tool chips — interactive */
.tool-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px;
  border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
  cursor: pointer; text-decoration: none;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tool-chip:hover, .tool-chip:focus-visible {
  background: var(--acc); border-color: var(--acc); color: #06222b;
  transform: scale(1.05); box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 38%, transparent);
}
.tool-chip:active { transform: scale(.98); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep); color: #C7D0DA;
  padding: 44px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 20px; }
.footer-logo { flex: none; height: 56px; width: auto; max-width: none; transform: translateY(10.5%); }
.footer-about { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.7; color: #C7D0DA; }
.footer-social {
  list-style: none; margin: 28px 0 22px; padding: 22px 0;
  display: flex; justify-content: center; gap: 12px;
  border-block: 1px solid rgba(255,255,255,.14);
}
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.38); color: #fff;
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.footer-social svg { width: 20px; height: 20px; }
.footer-social a:hover, .footer-social a:focus-visible {
  transform: translateY(-3px); border-color: var(--teal-bright); color: var(--teal-bright);
  background: rgba(0,229,208,.1);
}
@media (min-width: 480px) {
  .footer-social { gap: 18px; }
  .footer-social a { width: 48px; height: 48px; }
  .footer-social svg { width: 22px; height: 22px; }
}
.footer-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; font-size: 13.5px; color: #93A1B5;
}
@media (max-width: 359.98px) { .footer-brand { gap: 12px; } .footer-logo { height: 48px; } .footer-about { font-size: 14px; } }

/* Visually hidden (used for icon-only link labels) */
.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; }


/* ===== Services: skeleton + smooth reveal (no default-content flash) ===== */
.svc-root .svc-grid { opacity: 1; }
.svc-root.svc-in .svc-grid { animation: svcFade .35s ease both; }
@keyframes svcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.svc-skel { min-height: 260px; gap: 14px; pointer-events: none; }
.svc-skel .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--line, #e3e8ef) 25%, color-mix(in srgb, var(--line, #e3e8ef) 40%, transparent) 50%, var(--line, #e3e8ef) 75%); background-size: 200% 100%; animation: skShimmer 1.3s linear infinite; }
.sk-title { height: 26px; width: 55%; } .sk-line { height: 14px; width: 92%; } .sk-short { width: 66%; } .sk-chips { height: 30px; width: 80%; margin-top: 6px; } .sk-btn { height: 44px; width: 40%; margin-top: auto; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .svc-skel .sk, .svc-root.svc-in .svc-grid { animation: none; } }

/* ===== Lightbox ===== */
html.lb-open { overscroll-behavior: none; }
.lb { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .95); display: flex; align-items: center; justify-content: center; direction: ltr; opacity: 0; transition: opacity .18s ease; touch-action: pan-y pinch-zoom; }
.lb.is-open { opacity: 1; }
.lb-stage { position: absolute; inset: 56px 0 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 12px; }
@media (min-width: 900px) { .lb-stage { padding: 0 84px 24px; } }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform .22s ease, opacity .18s ease; }
.lb-counter { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: 16px 18px; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .04em; direction: ltr; }
.lb-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-btn:focus-visible { outline: 3px solid var(--teal-signal, #00C2CB); outline-offset: 2px; }
.lb-close { inset-block-start: 6px; inset-inline-end: 10px; }
.lb-nav { inset-block-start: 50%; margin-top: -24px; }
.lb-left { left: 14px; }
.lb-right { right: 14px; }
.lb-right svg { transform: scaleX(-1); }
@media (max-width: 640px) { .lb-nav { width: 40px; height: 40px; margin-top: -20px; background: rgba(0, 0, 0, .35); } .lb-left { left: 6px; } .lb-right { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .lb, .lb-img { transition: none; } }


/* ===== Cairo (Arabic) metrics: wider glyphs, taller ascenders/descenders ===== */
html[dir="rtl"] body { line-height: 1.8; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.4; letter-spacing: 0; }
html[dir="rtl"] .hero h1 { font-size: clamp(26px, 5.6vw, 50px); line-height: 1.35; }
html[dir="rtl"] .hero p.lead { font-size: clamp(15px, 2.1vw, 18px); line-height: 1.85; }
html[dir="rtl"] .tracks-heading h2 { font-size: clamp(23px, 4.6vw, 36px); }
html[dir="rtl"] .section-heading h2 { font-size: clamp(21px, 4.2vw, 32px); }
html[dir="rtl"] .cta-banner h2 { font-size: clamp(21px, 4.2vw, 32px); }
html[dir="rtl"] .track-card h3 { font-size: clamp(19px, 3.8vw, 24px); }
html[dir="rtl"] .svc-list strong { line-height: 1.6; }
html[dir="rtl"] .svc-list span { line-height: 1.8; }
html[dir="rtl"] .title-row { line-height: 1.5; }
html[dir="rtl"] .gallery-filter { line-height: 1.5; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { overflow-wrap: break-word; text-wrap: balance; }
@media (max-width: 360px) { html[dir="rtl"] .hero h1 { font-size: 25px; } html[dir="rtl"] .gallery-filter { font-size: 12.5px; padding: 8px 14px; } }

/* ===== Region badge (footer) ===== */
.region-switch { position: relative; display: flex; justify-content: center; margin: 0 0 18px; }
.region-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
  font: inherit; font-size: 13.5px; color: #C7D0DA; cursor: pointer;
  background: transparent; border: 1.5px solid rgba(255,255,255,.28); border-radius: 999px;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.region-badge:hover, .region-badge:focus-visible, .region-badge[aria-expanded="true"] {
  border-color: var(--teal-bright); color: #fff; background: rgba(0,229,208,.1);
}
.region-ico svg { display: block; width: 16px; height: 16px; }
.region-label { font-weight: 700; color: #fff; }
.region-menu {
  position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 200px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--navy-deep); border: 1px solid rgba(255,255,255,.22); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.region-menu[hidden] { display: none; }
.region-item {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 8px 12px; font: inherit; font-size: 14px; color: #C7D0DA; text-align: start;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.region-item:hover, .region-item:focus-visible { background: rgba(0,229,208,.12); color: #fff; outline: none; }