:root {
  --red: #C41E3A;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

.font-vazir { font-family: 'Vazirmatn', Tahoma, sans-serif; }

/* About section faint blueprint background */
.about-bg {
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.96)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='none'/%3E%3Cg stroke='%23c9ced4' stroke-width='1' opacity='.5'%3E%3Crect x='10' y='40' width='18' height='70'/%3E%3Crect x='34' y='20' width='16' height='90'/%3E%3Crect x='56' y='55' width='20' height='55'/%3E%3Crect x='82' y='30' width='16' height='80'/%3E%3Cpath d='M0 110h120'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 240px 240px;
  background-position: center, bottom center;
}

/* Why choose us dark background */
.why-bg {
  background:
    linear-gradient(135deg, rgba(52,58,64,.97), rgba(38,43,48,.98)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 40px);
  background-color: #2f363d;
}

/* CTA banner */
.cta-bg {
  background-image: url("/api/nanobanana/image/1024/400?prompt=vast%20solar%20panel%20field%20with%20electricity%20transmission%20towers%20green%20field%20cloudy%20sky%20photorealistic");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 768px) {
  .cta-bg { background-attachment: scroll; }
}

/* Card hover animations */
.service-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.25);
}

.article-card:hover {
  transform: translateY(-5px);
  border-bottom-color: var(--red);
  box-shadow: 0 16px 34px -14px rgba(196,30,58,.4);
}

/* Hero headline entrance */
.hero-fade {
  animation: heroIn .9s ease both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar tweak */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 6px; }
::-webkit-scrollbar-track { background: #eee; }