/* ===== HERO SECTION ========================================= */
.service-hero{
  /* subtle star-field / grain background  */
  background: radial-gradient(circle at 50% 0%, #101820 0%, #050608 100%);
  position:relative;z-index:0;
  min-height:90vh;padding:6rem 2rem 4rem;
  display:flex;align-items:center;justify-content:center;
  gap:3rem;flex-wrap:wrap;color:#ffffff;
}

/* noise overlay kept separate for easy tweak */
.service-hero::before{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;
  background:url("../../assets/images/noise.gif");   /* supply your own tiny noise PNG */
  opacity:.12;pointer-events:none;
}

.hero-content{
  max-width:600px;display:flex;flex-direction:column;gap:1.6rem;
}

.hero-kicker{
  font-size:.8rem;letter-spacing:1px;font-weight:600;
  color:#ff45e9;margin:0;
}

.hero-title{
  font-family:'Poppins',sans-serif;
  font-size:clamp(2.5rem,6vw,3.6rem);
  font-weight:700;margin:0;line-height:1.15;
}

.hero-sub{
  font-size:1.05rem;opacity:.9;margin:0;max-width:480px;
}

.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:center}

.btn{
  display:inline-block;padding:1rem 2.4rem;border-radius:9999px;
  font-weight:600;text-decoration:none;text-align:center;
  transition:transform .2s,opacity .25s;
}
.btn:hover{transform:translateY(-3px);opacity:.85}

.btn.solid{
  background:linear-gradient(90deg,#ff6078 0%,#d884ff 100%);
  color:#1a1a1a;
}
.btn.outline{
  border:2px solid #ffffff;color:#ffffff;
}




/* keep hero below sticky navbar */
.navbar + .service-hero{margin-top:1rem}

/* responsive tweak */
@media(max-width:700px){
  .hero-visual{flex-basis:300px;max-width:300px;min-height:300px}
}

/* ===== TECH-STACK =========================================== */
.tech{
  background:linear-gradient(180deg,#191335 10%,#220821 90%);
  padding:5rem 1rem 6rem;
  display:flex;justify-content:center;
}
.tech .container{
  width:min(1100px,100%);
  text-align:center;display:flex;flex-direction:column;gap:3rem;
}

.tech-kicker{
  font-size:.85rem;letter-spacing:1px;font-weight:600;color:#ff45e9;margin:0;
}
.tech-title{
  font-family:'Poppins',sans-serif;font-size:clamp(1.9rem,5vw,2.7rem);
  font-weight:700;margin:.2rem 0;color:#ffffff;
}
.tech-sub{max-width:560px;margin:0 auto;font-size:1.05rem;color:#ffffff;opacity:.9}

/* ===== TECH GRID – tidy rows of 4 / 2 / 1 ===================== */
.tech-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  justify-items:center;               /* centre each card in its cell */
  width:min(1100px, 100%);                   /* prevent overflow on small screens */
  margin:0 auto;                      /* centre the whole grid */
}



/* frosted card */
.tech-card{
  backdrop-filter:blur(14px)saturate(180%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.18);
  padding: 1.8rem 1.4rem 2.2rem;  /* was 2rem 1.6rem 2.4rem */
  display:flex;flex-direction:column;gap:1rem;text-align:left;
  color:#ffffff;transition:background .3s,transform .3s,box-shadow .3s;
}
.tech-card:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

.tech-icon{font-size:1.8rem}
.tech-head{
  font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:700;margin:0
}
.tech-lead{font-size:.95rem;opacity:.85;margin:0}

.tech-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:.5rem;font-size:.92rem
}
.tech-list li::before{
  content:"✓";color:#28c840;font-weight:600;margin-right:.4rem
}

/* ===== SOLUTIONS ============================================ */
.solutions{
  background:linear-gradient(180deg,#220821 10%,#220809 90%);
  padding:5rem 1rem 6rem;display:flex;justify-content:center;
}
.solutions .container{
  width:min(1100px,100%);text-align:center;display:flex;flex-direction:column;gap:3rem;
}

.sol-kicker{
  font-size:.85rem;letter-spacing:1px;font-weight:600;color:#ff45e9;margin:0;
}
.sol-title{
  font-family:'Poppins',sans-serif;font-size:clamp(1.9rem,5vw,2.7rem);
  font-weight:700;margin:.2rem 0;color:#ffffff;
}
.sol-sub{max-width:560px;margin:0 auto;font-size:1.05rem;color:#ffffff;opacity:.9}

/* grid */
.sol-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-items:center;               /* centre each card in its cell */
  width:min(700px,100%); /* prevents overflow on small screens */
  margin:0 auto;                      /* centre the whole grid */
}

/* frosted card */
.sol-card{
  backdrop-filter:blur(14px)saturate(180%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  padding:2rem 1.6rem 2.4rem;
  display:flex;flex-direction:column;gap:1.1rem;text-align:left;
  color:#ffffff;
  transition:background .3s,transform .3s,box-shadow .3s;
}
.sol-card:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

.sol-icon{font-size:1.9rem}
.sol-head{
  font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:700;margin:0;
}
.sol-lead{font-size:.95rem;opacity:.85;margin:0}
.sol-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.92rem;
}
.sol-list li::before{content:"•";color:#3cc6ff;font-weight:700;margin-right:.45rem}

/* ===== RESULTS ============================================== */
.results{
  background:linear-gradient(180deg,#220809 10%,#510303 90%);
  padding:5rem 1rem 6rem;display:flex;justify-content:center;
}
.results .container{
  width:min(900px,100%);text-align:center;
  display:flex;flex-direction:column;gap:3rem;color:#ffffff;
}

.res-kicker{
  font-size:.85rem;letter-spacing:1px;font-weight:600;color:#ff45e9;margin:0;
}
.res-title{
  font-family:'Poppins',sans-serif;font-size:clamp(1.9rem,5vw,2.7rem);
  font-weight:700;margin:.2rem 0;
}
.res-sub{max-width:520px;margin:0 auto;font-size:1.05rem;opacity:.9}

/* small heading group */
.res-category{margin:0;font-size:.85rem;color:#ff45e9;text-align:left}
.res-head{
  font-size:1.25rem;font-weight:700;margin:.2rem 0 1.4rem;text-align:left;
}

/* metric grid */
.res-grid{
  display:flex;justify-content:center;flex-wrap:wrap;gap: 1rem;
}

/* frosted metric card */
.res-card{
  backdrop-filter:blur(12px)saturate(180%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:.4rem;text-align:left;
  transition:background .3s,transform .3s,box-shadow .3s;
}
.res-card:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.res-value{
  font-family:'Poppins',sans-serif;font-size:1.8rem;font-weight:700;
}
.res-label{font-size:.9rem;opacity:.85}

/* Make sure footer is visible even without scroll-reveal */
.footer{
  opacity:1 !important;
  transform:none !important;
}

/* kill the extra space above the service hero */
.navbar + .service-hero{
  margin-top: -80px !important;
}

body {
  background: #0c0d15;
}