.hero h1 { font-size: 32px; }


@media (max-width: 420px) {
  .hero h1 { font-size: 28px; }
}


.hero-art {
  height: 280px;
  border-radius: var(--radius);
  background: url("/assets/Motherboard_Stock.jpg") center/cover no-repeat;
  position: relative;
  overflow: hidden;
  border: 1px solid #1f2632;
  box-shadow: 0 10px 40px rgba(22, 167, 255, 0.25);
}

/* Optional: add a faint blue overlay glow */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(22,167,255,0.3), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Slight zoom and glow increase on hover */
.hero-art:hover::after {
  opacity: 0.6;
}
.hero-art:hover {
  transform: scale(1.02);
  transition: transform .4s ease;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
}

.card.feature { position: relative; overflow: hidden; }

.card.feature::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -25%;
  width: 220px;
  height: 220px;
  background: radial-gradient(60% 60% at 50% 50%, var(--accent), transparent);
  opacity: .14;
  filter: blur(10px);
  transform: scale(.92);
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}

.feature-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #0e131a, #0b0f15);
  border: 1px solid #1f2632;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}


.feature--onsite .feature-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v10H3zM7 20h10M9 6V4h6v2' fill='none' stroke='%2316A7FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

.feature--repairs .feature-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12l3 3 7-7m3-5l5 5M4 20h10m4 0h3' fill='none' stroke='%2316A7FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

.feature--setup .feature-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M6 12h12M8 17h8' fill='none' stroke='%2316A7FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}


.card.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(22,167,255,.18);
  border-color: var(--accent);
}
.card.feature:hover .feature-icon { transform: scale(1.08); border-color: var(--accent); box-shadow: 0 10px 26px rgba(22,167,255,.2); }
.card.feature:hover::before { transform: scale(1.05); opacity: .22; }

@media (prefers-reduced-motion: reduce) {
  .hero-art, .card.feature, .feature-icon, .card.feature::before { animation: none !important; transition: none !important; }
}