.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 118px 20px 54px;
  display: grid;
  gap: 30px;
  align-items: center;
  grid-template-columns: 1.03fr 0.97fr;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: 0;
}

.hero-copy p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 19px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--line);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
}

.hero-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 1;
  filter: brightness(1);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}

.hero-image.is-switching {
  opacity: 0.18;
  filter: brightness(0.7);
  transform: scale(0.992);
}

.service-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.service-preview .card {
  min-height: 118px;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  font-weight: 800;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.72s ease, transform 0.72s ease, border-color 0.2s ease;
  will-change: opacity, transform;
}

.service-preview .card.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-preview .card.card-visible:hover {
  transform: translateY(-4px) scale(1);
  border-color: rgba(15, 111, 255, 0.42);
}

.intro-text {
  max-width: 900px;
  color: var(--muted);
  font-size: 19px;
}

.intro-text p {
  margin: 0 0 18px;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 82px;
  }

  .service-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 64px;
  }

  .service-preview {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-preview .card {
    min-height: 132px;
    opacity: 0;
    transform: translateY(44px) scale(0.94);
    transition-duration: 0.8s;
  }

  .service-preview .card.card-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .hero-actions .btn {
    width: 100%;
  }
}
.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.service-card span:first-child {
  position: relative;
  z-index: 2;
  max-width: 72%;
}

.service-card-icon {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1;
  width: 58px;
  height: 58px;
  opacity: 0;
  transform: translateY(12px) scale(0.82) rotate(-3deg);
  color: #16a34a;
  background: currentColor;
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.45s ease;
  -webkit-mask: var(--service-icon) center / contain no-repeat;
  mask: var(--service-icon) center / contain no-repeat;
}

body.dark .service-card-icon {
  color: #ffd43b;
}

.service-card:hover .service-card-icon,
.service-card.icons-ready .service-card-icon {
  opacity: 0.92;
  transform: translateY(0) scale(1) rotate(0deg);
}

.service-card[data-service-icon="home"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.8 12 3l9 7.8v9.7a.5.5 0 0 1-.5.5h-5.3v-6.4H8.8V21H3.5a.5.5 0 0 1-.5-.5v-9.7Zm7.5 8.2h3v-2.7h-3V19Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="wrench"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.2 6.8a6.4 6.4 0 0 1-7.9 7.9l-7.1 7.1a2.2 2.2 0 0 1-3.1-3.1l7.1-7.1a6.4 6.4 0 0 1 7.9-7.9l-4.3 4.3 2.2 2.2 4.2-4.4Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="warning"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 21h22L12 2Zm1.1 15.5h-2.2v-2.2h2.2v2.2Zm0-4h-2.2V8h2.2v5.5Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="bulb"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 21h6v-2H9v2Zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Zm2.6 11.2-.6.4V15h-4v-1.4l-.6-.4A5 5 0 1 1 14.6 13.2Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="plug"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 2h2v6h4V2h2v6h2v4a6 6 0 0 1-5 5.9V22h-2v-4.1A6 6 0 0 1 6 12V8h2V2Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="check"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a1 1 0 0 1 1 1v17l-3-2-3 2-2-2-2 2-3-2-3 2V4a1 1 0 0 1 1-1Zm3 6h8V7H8v2Zm0 4h8v-2H8v2Zm0 4h5v-2H8v2Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="camera"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h11a2 2 0 0 1 2 2v1.5l4-2.2v9.4l-4-2.2V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.service-card[data-service-icon="bell"] { --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.7 2.7 0 0 0 2.6-2H9.4a2.7 2.7 0 0 0 2.6 2ZM5 18h14l-1.8-2.4V11a5.2 5.2 0 0 0-4.2-5.1V4a1 1 0 1 0-2 0v1.9A5.2 5.2 0 0 0 6.8 11v4.6L5 18Z'/%3E%3C/svg%3E"); }