:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f6f9ff;
  --bg-blue: #eef5ff;
  --text: #071225;
  --navy: #0b1730;
  --muted: #66758d;
  --muted-strong: #43546d;
  --line: #dfe8f6;
  --blue: #2563eb;
  --blue-600: #1f5fe8;
  --blue-700: #174bc4;
  --violet: #765cff;
  --cyan: #8bdcff;
  --green: #12b981;
  --shadow: 0 24px 70px rgba(19, 45, 93, 0.12);
  --shadow-soft: 0 16px 48px rgba(24, 61, 125, 0.08);
  --shadow-crisp: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 54px rgba(24, 61, 125, 0.1);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --container: 1210px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Calibri, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  /* GLOBAL circuit surface — one continuous background behind the whole site
     (navbar area, side gutters, every white section). A soft white overlay
     keeps it premium and readable; special dark/blue sections paint over it. */
  background-color: #ffffff;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.62)),
    url("../assets/images/backgrounds/circuit.png");
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
  background-size: auto, 1120px auto;
  background-attachment: fixed, scroll;
  color: var(--text);
  font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Calibri, sans-serif;
  text-rendering: geometricPrecision;
}

/* mobile: smaller pattern + slightly stronger diffusion for readability */
@media (max-width: 768px) {
  body {
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.74)),
      url("../assets/images/backgrounds/circuit.png");
    background-size: auto, 780px auto;
  }
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
.hero-title {
  color: var(--navy);
  font-size: clamp(46px, 5.35vw, 78px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 0.98;
}

h2,
.section-title {
  color: var(--navy);
  font-size: clamp(31px, 3.6vw, 48px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.05;
}

h3 {
  color: var(--navy);
  font-size: 21px;
  line-height: 1.2;
}

p {
  color: var(--muted-strong);
  line-height: 1.72;
}

strong {
  color: var(--navy);
}

::selection {
  background: rgba(37, 99, 235, 0.18);
}

.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;
}