/* =============================================================
   PORTALBA — Home page styles (index.html)
   ============================================================= */

/* ── Full-screen hero ─────────────────────────────────────── */
.hero-bg {
  background-image:
    linear-gradient(
      to bottom,
      rgba(9, 9, 11, 0.75) 0%,
      rgba(9, 9, 11, 0.45) 50%,
      rgba(9, 9, 11, 0.92) 100%
    ),
    url('../assets/images/IMG.JPG');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .hero-bg { background-attachment: scroll; }
}

/* ── About-intro image decorations ───────────────────────── */
.about-intro-img { position: relative; }
.about-intro-badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--accent);
  padding: 1.5rem;
  display: none;
}
@media (min-width: 640px) { .about-intro-badge { display: block; } }
.about-intro-badge__number {
  color: #09090b;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
}
.about-intro-badge__label {
  color: #292524;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 0.25rem;
  text-transform: uppercase;
}
.about-intro-corner {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 6rem;
  height: 6rem;
  border: 1px solid rgba(201, 169, 110, 0.2);
  display: none;
}
@media (min-width: 640px) { .about-intro-corner { display: block; } }

/* ── Service cards ────────────────────────────────────────── */
.service-card {
  background: var(--page-surface);
  border: 1px solid var(--border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
}
.service-card__img {
  margin: -2rem -2rem 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.service-card:hover .service-card__img img {
  transform: scale(1.05);
  opacity: 1;
}
.service-icon {
  transition: background-color 0.3s ease;
}
.service-card:hover .service-icon {
  background-color: var(--accent);
}
.service-card:hover .service-icon svg {
  color: #09090b;
}