/* === New Build Hero (dark blue theme) === */
.nb-hero {
  --nb-bg: #0D2A4A;       /* deep navy */
  --nb-bg-alt: #0F355E;   /* subtle gradient stop */
  --nb-text: #EAF1F8;     /* light text */
  --nb-accent: #63B3ED;   /* button */
  --nb-accent-hover: #4AA0E0;
  --nb-btn-text: #0C2440;

  background: linear-gradient(135deg, var(--nb-bg), var(--nb-bg-alt));
  color: var(--nb-text);
  padding: clamp(2rem, 4vw, 4rem) 1rem;
}

.nb-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;   /* media | content */
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.nb-hero__media {
  position: relative;
  min-height: 260px;
}

.nb-hero__svg,
.nb-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: radial-gradient(120% 100% at 20% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0));
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.nb-hero__content {
  text-wrap: balance;
}

.nb-hero__title {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.2;
  font-weight: 700;
}

.nb-hero__text {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  opacity: 0.95;
  margin: 0 0 1.25rem 0;
}

.nb-hero__btn {
  display: inline-block;
  background: var(--nb-accent);
  color: var(--nb-btn-text);
  font-weight: 700;
  text-decoration: none;
  padding: 0.8rem 2.25rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform 0.08s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.nb-hero__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.nb-hero__btn:hover {
  background: var(--nb-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.28);
}

/* Responsive stack on small screens */
@media (max-width: 860px) {
  .nb-hero__inner {
    grid-template-columns: 1fr;
  }
  .nb-hero__media {
    order: 2;
    min-height: 200px;
  }
  .nb-hero__content {
    order: 1;
  }
}