/* Base */
:root {
  --brand-ink: #264a63;
  --brand-main: #5893c6;
  --brand-mist: #d8e1e5;
}
html { scroll-behavior: smooth; }
body { background: #f1f3f4; color: #264a63; }

/* Backgrounds */
.hero-pattern {
  background-image:
    radial-gradient(60rem 20rem at 80% -10%, rgba(88, 147, 198, 0.25), transparent 60%),
    radial-gradient(40rem 20rem at -10% 20%, rgba(141, 176, 202, 0.35), transparent 60%),
    linear-gradient(180deg, #f1f3f4 0%, #d8e1e5 100%);
}
.section-pattern {
  background-image:
    linear-gradient(0deg, rgba(216, 225, 229, 0.8), rgba(216, 225, 229, 0.8)),
    radial-gradient(30rem 15rem at 10% 10%, rgba(88, 147, 198, 0.18), transparent 60%),
    radial-gradient(30rem 15rem at 90% 90%, rgba(141, 176, 202, 0.22), transparent 60%);
}

.hero-banner {
  border: 1px solid rgba(38, 74, 99, 0.08);
}

.hero-banner-bg {
  background-image:
    linear-gradient(180deg, rgba(241, 243, 244, 0.85), rgba(216, 225, 229, 0.9)),
    url('https://placehold.co/1600x800?text=1600x800');
  background-size: cover;
  background-position: center;
}