/* Shiv Electrician — Fixora-style premium build */

:root{
  --primary:#0F766E;
  --primary-dark:#0B5A54;
  --secondary:#14B8A6;
  --accent:#FACC15;
  --radius:20px;
  --shadow-premium:0 10px 30px -10px rgba(15,118,110,.18), 0 2px 8px -2px rgba(15,118,110,.10);
  --shadow-soft:0 6px 20px -8px rgba(17,24,39,.12);
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins', sans-serif;
  color:#111827;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- scroll reveal (Framer-Motion-style fade/slide-up) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.15s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.21s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.27s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.33s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.39s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.45s; }

/* ---------- button ripple ---------- */
.ripple-btn{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform:scale(0); animation:ripple-anim .6s ease-out forwards; pointer-events:none;
}
@keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- premium shadow / card hover ---------- */
.card-premium{ box-shadow:var(--shadow-premium); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.card-premium:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -12px rgba(15,118,110,.28); }

/* ---------- horizontal snap scroll (mobile plans / mobile categories) ---------- */
.snap-row{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.snap-row::-webkit-scrollbar{ display:none; }
.snap-item{ scroll-snap-align:start; flex-shrink:0; }

/* ---------- hero slider (mobile) ---------- */
.hero-slider{ position:relative; overflow:hidden; border-radius:var(--radius); }
.hero-slides{ display:flex; transition:transform .6s cubic-bezier(.65,0,.35,1); }
.hero-slide{ flex:0 0 100%; }
.slider-dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:6px; }
.slider-dots span{ width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.5); transition:all .3s ease; }
.slider-dots span.active{ width:18px; background:#fff; }

/* ---------- bottom nav (mobile app) ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.98); backdrop-filter:blur(14px);
  box-shadow:0 -6px 24px -8px rgba(17,24,39,.14);
  padding:8px 4px calc(6px + env(safe-area-inset-bottom));
  border-top:1px solid #F1F5F4;
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; font-weight:600; color:#9CA3AF; flex:1; padding:4px 2px; border-radius:14px;
}
.bottom-nav a.active{ color:var(--primary); }
.bottom-nav a svg{ width:22px; height:22px; }
.bottom-nav a.fab{
  color:#fff; background:var(--primary); width:52px; height:52px; border-radius:50%;
  margin-top:-26px; flex:0 0 52px; box-shadow:0 10px 22px -6px rgba(15,118,110,.55);
  justify-content:center;
}
.bottom-nav a.fab svg{ width:24px; height:24px; }
.bottom-nav a.fab span{ display:none; }

/* ---------- misc ---------- */
.chip-badge{
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:999px;
}
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-item .faq-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-panel{ max-height:200px; }

/* line clamp fallback */
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* mobile top app bar safe area */
.app-topbar{ padding-top:env(safe-area-inset-top); }