/* ============================================================
   home.css – styles for index.html (hero, services, stats)
   ============================================================ */

/* ============================================================ HERO */
.hero{
  position:relative;min-height:calc(100vh - 64px);
  display:flex;align-items:center;
  padding:80px 48px;overflow:hidden;
  background:var(--clr-bg);
}

/* subtle radial glow top-right */
.hero::before{
  content:'';position:absolute;top:-120px;left:-80px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(245,200,66,.18) 0%,transparent 65%);
  pointer-events:none;
}

.hero__content{position:relative;max-width:640px;animation:hero-in .5s ease both}

@keyframes hero-in{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Eyebrow line (matches screenshot: "חשמלאי מוסמך ומורשה ——") */
.hero__eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--clr-eyebrow);font-size:.8rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px;
}
.hero__eyebrow::after{
  content:'';width:40px;height:2px;
  background:var(--clr-yellow);border-radius:2px;
}

.hero__title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.4rem,5.5vw,4.4rem);
  color:var(--clr-heading);line-height:1.08;margin-bottom:20px;
}
.hero__title em{color:var(--clr-yellow-dark);font-style:normal}

.hero__desc{
  color:var(--clr-muted);font-size:1.05rem;line-height:1.85;
  max-width:480px;margin-bottom:36px;
}

.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}

/* Trust badges row (like screenshot: shield / clock / medal) */
.hero__trust{
  display:flex;flex-wrap:wrap;gap:24px;
}

.trust-item{
  display:flex;align-items:center;gap:10px;
  font-size:.88rem;font-weight:500;color:var(--clr-muted);
}

.trust-item .icon-badge{width:36px;height:36px;font-size:1rem}

/* ============================================================ SERVICES */
.services-section{padding:var(--pad-section);background:var(--clr-bg-2)}

.service-card{
  position:relative;overflow:hidden;
  border-top:3px solid transparent;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.service-card:hover{border-top-color:var(--clr-yellow)}

/* ============================================================ STATS STRIP */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--clr-border);
}
.stat{
  background:var(--clr-bg);
  padding:40px 20px;text-align:center;
}
.stat__number{
  font-family:var(--font-display);font-weight:900;
  font-size:2.8rem;color:var(--clr-yellow-dark);
  line-height:1;margin-bottom:6px;
}
.stat__label{color:var(--clr-muted);font-size:.85rem}

/* ============================================================ RESPONSIVE */
@media(max-width:768px){
  .hero{padding:60px 20px;min-height:auto}
  .hero__title{font-size:clamp(2rem,9vw,3rem)}
}

/* ============================================================ CONTACT BUTTONS */
.btn--whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 2px 12px rgba(37,211,102,.35);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}
.btn--whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(37,211,102,.45);
}
.btn--whatsapp:active { transform: scale(.97); }

.btn--call {
  background: var(--clr-bg-card);
  color: var(--clr-heading);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}
.btn--call:hover {
  border-color: var(--clr-yellow);
  background: var(--clr-yellow-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
}
.btn--call:active { transform: scale(.97); }