/* ============================================================
   MosipVoIP — home.css
   Homepage-specific styles.
   ============================================================ */

/* ── Hero Section ───────────────────────────────────────────── */
.hero-voip {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
  color:      #fff;
  padding:    24px 0 64px;
  overflow:   hidden;
}

.hero-blob {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(60px);
  opacity:       .18;
  pointer-events: none;
}
.hero-blob-1 { width: 500px; height: 500px; background: var(--secondary); top: -160px; left: -120px; }
.hero-blob-2 { width: 400px; height: 400px; background: var(--accent);    bottom: -100px; right: -80px; }

/* Hero text */
.hero-headline {
  font-family: var(--font-display);
  font-size:   clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  color:       #fff;
}
.hero-highlight { color: var(--warning); }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 560px; line-height: 1.7; }

/* Feature pills */
.feat-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(255,255,255,.12);
  color:         rgba(255,255,255,.92);
  border:        1px solid rgba(255,255,255,.18);
  border-radius: 100px;
  padding:       5px 14px;
  font-size:     .8rem;
  font-weight:   600;
  backdrop-filter: blur(6px);
}

/* Hero tags */
.hero-tag {
  display:       inline-block;
  background:    rgba(255,255,255,.15);
  color:         rgba(255,255,255,.9);
  border-radius: 100px;
  padding:       4px 12px;
  font-size:     .75rem;
  font-weight:   600;
  letter-spacing: .04em;
}
.hero-tag.tag-green  { background: rgba(40,167,69,.3); }
.hero-tag.tag-yellow { background: rgba(255,193,7,.25); }

/* Hero stats */
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.hero-stat  { text-align: center; }
.hero-stat .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--warning); line-height: 1; }
.hero-stat .lbl { font-size: .72rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* ── Phone Mockup ───────────────────────────────────────────── */
.hero-phone { position: relative; }

.phone-mockup {
  background:    linear-gradient(145deg, #1a3a8f 0%, var(--primary-dark) 100%);
  border-radius: 36px;
  padding:       32px 24px;
  width:         280px;
  box-shadow:    0 24px 64px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1);
  border:        8px solid rgba(255,255,255,.12);
}

.phone-screen { text-align: center; padding: 20px 12px 24px; background: rgba(255,255,255,.06); border-radius: 24px; }
.call-status  { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--success); font-weight: 700; margin-bottom: 8px; }
.call-number  { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 6px; font-family: var(--font-display); }
.call-timer   { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: .1em; margin-bottom: 12px; }
.call-quality { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .72rem; color: rgba(255,255,255,.6); }
.call-bars    { display: flex; align-items: flex-end; gap: 2px; }
.call-bars span { display: block; width: 3px; border-radius: 2px; background: var(--success); animation: barBounce .9s ease-in-out infinite alternate; }
.call-bars span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.call-bars span:nth-child(2) { height: 10px; animation-delay: .15s; }
.call-bars span:nth-child(3) { height: 14px; animation-delay: .3s; }
.call-bars span:nth-child(4) { height: 10px; animation-delay: .45s; }
@keyframes barBounce { from { transform: scaleY(.6); } to { transform: scaleY(1); } }

.floating-badge {
  position:      absolute;
  background:    #fff;
  color:         var(--gray-900);
  padding:       8px 14px;
  border-radius: 100px;
  font-size:     .78rem;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           8px;
  box-shadow:    var(--shadow-md);
  white-space:   nowrap;
  animation:     floatBadge 3s ease-in-out infinite alternate;
}
.floating-badge.top-left    { top: -16px; left: -24px; }
.floating-badge.bottom-right{ bottom: -16px; right: -24px; animation-delay: 1s; }
@keyframes floatBadge { from { transform: translateY(0); } to { transform: translateY(-8px); } }