/* Safal Embedded Solution. Palette comes from a blue solder-mask board with gold-plated pads. */
:root {
  --mask: #0a2a6e;
  --mask-deep: #071c4c;
  --gold: #e0ae4a;
  --lit: #5be08f;
  --silk: #f4f7fc;

  --paper: #f1f5fb;
  --surface: #ffffff;
  --ink: #14233f;
  --muted: #47577a;
  --line: #c9d5e6;
  --brand: #013289;
  --btn-bg: #013289;
  --btn-ink: #ffffff;
  --btn-hover: #0b45b5;
  --danger: #b3261e;
  --ok: #11703c;

  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --display: "Barlow Semi Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --chamfer: 22px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a1730; --surface: #11234a; --ink: #e8eef8; --muted: #a9b8d2; --line: #2c4069;
    --brand: #a9c4ff; --btn-bg: #e0ae4a; --btn-ink: #071c4c; --btn-hover: #efc26a;
    --danger: #ffb4ab; --ok: #7ee2a8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a1730; --surface: #11234a; --ink: #e8eef8; --muted: #a9b8d2; --line: #2c4069;
  --brand: #a9c4ff; --btn-bg: #e0ae4a; --btn-ink: #071c4c; --btn-hover: #efc26a;
  --danger: #ffb4ab; --ok: #7ee2a8;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: var(--brand);
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head p { margin-top: 12px; font-size: 1.25rem; color: var(--muted); }
.chamfer { clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--mask-deep); padding: 8px 14px; font-weight: 600;
}
.skip:focus { top: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 20px;
  border: 2px solid var(--btn-bg); border-radius: 4px;
  background: var(--btn-bg); color: var(--btn-ink);
  font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-quiet { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-quiet:hover { background: transparent; border-color: var(--brand); }
.btn-quiet[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }
.on-mask { --btn-bg: var(--gold); --btn-ink: var(--mask-deep); --btn-hover: #efc26a; --brand: var(--silk); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--mask-deep); color: var(--silk); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--silk); text-decoration: none; font: 600 1.3125rem/1.1 var(--display); margin-right: auto; }
.brand img { width: 40px; height: 40px; }
.nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.nav a:not(.btn) { color: var(--silk); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; color: var(--silk);
  border: 1px solid rgba(244, 247, 252, .35); border-radius: 4px; cursor: pointer;
}
.icon-btn:hover { border-color: var(--gold); }
.menu-btn { display: none; }
html:not(.js) .icon-btn { display: none; }

@media (max-width: 1000px) {
  .js .menu-btn { display: inline-flex; }
  .js .nav { display: none; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-block: 8px 16px; }
  .js .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 10px 0; }
}

/* Hero: the circuit board */
.hero { background-color: var(--mask); color: var(--silk); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
}
.hero h1 { color: #fff; font-size: clamp(2.5rem, 4.6vw, 3.5rem); line-height: 1.06; }
.hero-lead { margin-top: 20px; font-size: 1.25rem; max-width: 34rem; color: #d5e0f5; }
.hero .btn { margin-top: 28px; }

.board { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.board svg { width: 240px; height: 312px; display: block; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list a {
  display: flex; align-items: center; height: 52px; padding-left: 10px;
  color: var(--silk); text-decoration: none;
  font: 500 1.0625rem/1.15 var(--display);
}
.board-list a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--lit); }

.trace { fill: none; stroke: var(--gold); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.trace-faint { fill: none; stroke: #2a4f9e; stroke-width: 2; }
.via { fill: var(--mask-deep); stroke: #2a4f9e; stroke-width: 2; }
.pad { fill: var(--gold); transition: fill .15s; }
.pad-hole { fill: var(--mask-deep); }
.chip { fill: var(--mask-deep); stroke: #3a5fae; stroke-width: 1.5; }
.chip-pin { fill: var(--gold); }
.chip-s { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.chip-s-pad { fill: var(--gold); }

.board:has(li:nth-child(1) a:hover, li:nth-child(1) a:focus-visible) .pad-1,
.board:has(li:nth-child(2) a:hover, li:nth-child(2) a:focus-visible) .pad-2,
.board:has(li:nth-child(3) a:hover, li:nth-child(3) a:focus-visible) .pad-3,
.board:has(li:nth-child(4) a:hover, li:nth-child(4) a:focus-visible) .pad-4,
.board:has(li:nth-child(5) a:hover, li:nth-child(5) a:focus-visible) .pad-5,
.board:has(li:nth-child(6) a:hover, li:nth-child(6) a:focus-visible) .pad-6 { fill: var(--lit); }

@media (prefers-reduced-motion: no-preference) {
  .trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: route 1s ease-out .2s forwards; }
  .trace:nth-of-type(3) { animation-delay: .32s; }
  .trace:nth-of-type(4) { animation-delay: .44s; }
  .trace:nth-of-type(5) { animation-delay: .56s; }
  .trace:nth-of-type(6) { animation-delay: .68s; }
  .trace:nth-of-type(7) { animation-delay: .8s; }
  @keyframes route { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: 110px minmax(0, 1fr); margin-left: calc(var(--gutter) * -1); }
  .board svg { width: 110px; }
}

/* Intro */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.intro-grid h2 { font-size: clamp(1.9375rem, 3.6vw, 2.75rem); }
.intro-copy p + p { margin-top: 16px; }
.intro-copy .btn { margin-top: 24px; }

/* Services */
.services { background: var(--surface); }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.service img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.service h3 { margin-top: 18px; }
.service p { margin-top: 8px; color: var(--muted); max-width: 36rem; }

.strengths { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 88px); }
.strengths img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.strengths h3 { font-size: 1.875rem; }
.strengths p { margin-top: 8px; color: var(--muted); }
.strengths div + div { margin-top: 28px; }

/* Products */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
html:not(.js) .filters, html:not(.js) [data-enquire] { display: none; }
.filter {
  min-height: 44px; padding: 8px 16px; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 22px; font: 500 1rem/1.2 var(--body); cursor: pointer;
}
.filter:hover { border-color: var(--brand); }
.filter[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.filter-count { color: var(--muted); margin-bottom: 8px; min-height: 1.6em; }

.product {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px);
  padding-block: 32px; border-top: 1px solid var(--line); scroll-margin-top: 84px;
}
.product[hidden] { display: none; }
.product:target { border-top: 3px solid var(--gold); }
.product-photo { background: #fff; align-self: start; padding: 8px; }
.product-photo img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.features { columns: 2; column-gap: 40px; margin: 14px 0 0; padding-left: 20px; color: var(--muted); }
.features li { break-inside: avoid; margin-bottom: 4px; }
.features li::marker { color: var(--brand); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
[id="services"], [id="products"] { scroll-margin-top: 68px; }

@media (max-width: 720px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .product-photo { max-width: 220px; }
  .features { columns: 1; }
  .actions .btn { flex: 1 1 100%; }
}

/* Call to action */
.cta { background: var(--mask); color: var(--silk); }
.cta .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; padding-block: clamp(48px, 6vw, 72px); }
.cta h2 { color: #fff; }
.cta p { margin-top: 8px; font-size: 1.25rem; color: #d5e0f5; }

/* About */
.page-head { background: var(--mask); color: var(--silk); padding-block: clamp(40px, 6vw, 72px); }
.page-head h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 3.5rem); }
.page-head p { margin-top: 16px; max-width: 44rem; font-size: 1.1875rem; color: #d5e0f5; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.why-list li { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); font: 500 1.3125rem/1.25 var(--display); }
.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.logo-grid div { background: #fff; padding: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.logo-grid img { width: 100%; max-width: 200px; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.facts dl { margin: 16px 0 0; }
.facts dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.usp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
.usp p { font-weight: 600; }
.usp ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }

@media (max-width: 820px) {
  .intro-grid, .service-grid, .strengths, .facts { grid-template-columns: minmax(0, 1fr); }
  .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .why-list, .usp { grid-template-columns: minmax(0, 1fr); }
}

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; background: var(--surface); color: var(--ink);
  border: 1px solid #7d8daa; border-radius: 4px; font: inherit;
}
.field textarea { min-height: 150px; resize: vertical; }
.field [aria-invalid="true"] { border: 2px solid var(--danger); }
.field-error { margin-top: 4px; color: var(--danger); font-size: .9375rem; }
.trap { position: absolute; left: -9999px; }
.form-foot { margin-top: 20px; }
.form-foot .btn { width: 100%; min-height: 52px; }
.form-status { margin-top: 14px; font-weight: 500; }
.form-status.ok { color: var(--ok); }
.form-status.fail { color: var(--danger); }

.contact-card { background: var(--mask); color: var(--silk); padding: 28px; }
.contact-card h2 { font-size: 1.5rem; color: #fff; }
.contact-card section + section { margin-top: 24px; }
.contact-card p { margin-top: 6px; color: #d5e0f5; }
.contact-card a { color: #fff; }
.contact-card .btn { margin-top: 12px; color: var(--mask-deep); }
.map { margin-top: clamp(40px, 6vw, 64px); }
.map iframe { display: block; width: 100%; height: 380px; border: 1px solid var(--line); }
.map p { margin-top: 10px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
}

/* Footer */
.site-footer { background: var(--mask-deep); color: #d5e0f5; padding-block: 48px 24px; }
.site-footer a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-name { font: 600 1.5rem/1.15 var(--display); color: #fff; margin-bottom: 10px; }
.foot-title { font: 600 1.125rem/1.2 var(--display); color: #fff; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.foot-copy { margin-top: 36px; padding-top: 16px; border-top: 1px solid #2a4f9e; font-size: .9375rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Enquiry bar and WhatsApp */
.enquiry-bar {
  position: fixed; left: 16px; right: 84px; bottom: 16px; z-index: 40; max-width: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: var(--mask-deep); color: var(--silk); padding: 10px 14px; border: 1px solid var(--gold); border-radius: 4px;
}
.enquiry-bar[hidden] { display: none; }
.enquiry-bar .count { margin-right: auto; font-weight: 500; }
.enquiry-bar .clear { background: none; border: 0; color: var(--silk); text-decoration: underline; cursor: pointer; font: inherit; min-height: 44px; padding: 0 6px; }
.whatsapp {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #128c4b; color: #fff; border-radius: 50%; border: 2px solid #fff;
}
.whatsapp:hover { background: #0e6f3b; }

@media print {
  .site-header, .whatsapp, .enquiry-bar, .filters, .actions, .cta, .map { display: none !important; }
}

/* Small screens: keep logo, theme and menu on one row. */
@media (max-width: 480px) {
  .site-header .wrap { gap: 8px; }
  .brand { flex: 1 1 0; min-width: 0; font-size: 1.0625rem; gap: 8px; }
  .brand img { width: 36px; height: 36px; flex: none; }
}

/* The contact page has its own WhatsApp button, and the floating one would cover form fields. */
body:has(#contact-form) .whatsapp { display: none; }