/* ---------- Home – Premium UI Layer ---------- */
:root{
  --h-ink:#e9eef6; --h-muted:#a8b7c9;
  --h-card:#0f1621; --h-shadow:0 14px 40px rgba(0,0,0,.28);
  --h-g1:#6ad6ff; --h-g2:#8b6cff; --h-g3:#ffb36a; /* accent trio */
}

/* Page background & text */
body.home{
  color:var(--h-ink);
  background:
    radial-gradient(1000px 480px at 10% -10%, #121b2a 0%, #0b0f14 60%) fixed,
    linear-gradient(180deg, #0b0f14 0%, #0b0f14 100%);
}

/* HERO */
.hero{
  padding:3.5rem 0 2rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.15; margin:.2rem 0 .6rem}
.hero p.lead{color:var(--h-muted); max-width:60ch}
.hero .cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; font-weight:600; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:var(--h-ink); text-decoration:none;
  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}
.btn.primary{
  background:linear-gradient(90deg,var(--h-g1),var(--h-g2)); color:#0d1020; border:none;
  box-shadow:0 10px 28px rgba(138,108,255,.25);
}
.btn.primary:hover{filter:brightness(1.05); transform:translateY(-2px)}
.hero .aura{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
   radial-gradient(600px 260px at 20% 10%, rgba(106,214,255,.25), transparent 60%),
   radial-gradient(600px 260px at 70% -20%, rgba(139,108,255,.18), transparent 60%),
   radial-gradient(600px 280px at 40% 0%, rgba(255,179,106,.15), transparent 60%);
  filter: blur(40px);
  pointer-events:none;
}

/* Feature grid (6 service cards) */
.features{padding:2rem 0}
.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:1rem; box-shadow:var(--h-shadow);
  transform:translateZ(0); transition:transform .18s, box-shadow .18s, border-color .18s;
  min-height: 220px; display:flex; flex-direction:column; justify-content:space-between;
}
.card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.22)}
.card h3{margin:.2rem 0 .35rem}
.card p{color:var(--h-muted)}
.badges{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0}
.badge{font-size:.75rem; padding:.22rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:var(--h-ink); background:rgba(255,255,255,.04)}
.card .link{margin-top:.7rem; font-weight:700}

/* Stat counters strip */
.stats{
  margin:1.5rem 0 0; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.stat{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem; text-align:center;
}
.stat big{font-size:1.8rem; display:block}
.stat span{color:var(--h-muted)}

/* Social bar (image-only icons) */
.social-imgs{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center
}
.social-imgs a{
  display:inline-flex; width:36px; height:36px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:transform .12s, border-color .18s, box-shadow .2s
}
.social-imgs a:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.22); box-shadow:0 10px 20px rgba(0,0,0,.25)}
.social-imgs img{width:100%; height:100%; object-fit:cover}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease}
.reveal.show{opacity:1; transform:none}

/* Responsive tweaks */
@media (min-width: 1024px){
  .hero{padding:4rem 0 2.2rem}
}