.svc-card {
  background: #0f141b;          /* tweak for your theme; for light theme use #fff */
  border: 1px solid #1a2230;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.svc-card ul { margin: .5rem 0 0 0; }
.svc-card li { margin: .25rem 0; }


/* ===== HERO ===== */
.hero{
  position:relative;
  isolation:isolate;              /* keeps overlay effects contained */
  min-height: 54vh;               /* nice desktop height */
  display:grid;
  align-items:center;
  padding: clamp(3rem, 6vw, 6rem) 0;  /* vertical breathing room */
  /* background image */
  background: center/cover no-repeat url('/hero.jpg');
}

/* Darken/balance busy backgrounds for legible text */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80rem 40rem at 20% 10%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
  backdrop-filter: saturate(90%) brightness(0.9);
}

/* Optional soft vignette frame */
.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 120px rgba(0,0,0,.35);
}

/* constrain text block; center it with horizontal padding */
.hero__inner{
  width:min(1100px, 92vw);
  margin-inline:auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Type scale tuned for hero */
.hero h1{
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 0 0 .75rem 0;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.hero__sub{
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  max-width: 68ch;
  margin: 0 0 1.25rem 0;
}

/* Buttons row */
.hero__actions{
  display:flex; gap:.75rem; flex-wrap:wrap;
}

/* Make primary button pop a bit more on the hero */
.hero__actions .primary{
  background: var(--primary, #3aa0ff);
  border-color: transparent;
  color:#061d2c;
  font-weight:600;
}

/* tighten header/nav edges so banner aligns */
header nav { padding: 0 1rem; }

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 640px){
  .hero{ min-height: 46vh; }
  .hero__sub{ font-size: 1rem; }
  .hero__actions a{ width: 100%; text-align:center; }
}


:root {
  --primary: #3aa0ff;
  --primary-hover: #1f86ea;
  --primary-focus: rgba(58,160,255,.25);
}
header nav { margin: 0 auto; max-width: 1100px; }
.logo { font-weight: 700; letter-spacing: .2px; }
footer { color: var(--muted-color); }