/* =========================================================
   HOME — stylish enhancements for index.php only
   ========================================================= */

/* ---------- Hero upgrades ---------- */

.hero__badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 22px;
  border-radius:100px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  overflow:hidden;
}
.hero__badge::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:badgeShine 4.5s ease-in-out infinite;
}
@keyframes badgeShine{
  0%,60%{transform:translateX(-120%)}
  85%,100%{transform:translateX(120%)}
}

.hero__title span{
  background:linear-gradient(92deg,#4d9dff 0%,#8fd0ff 45%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleFlow 6s linear infinite;
}
@keyframes titleFlow{
  to{background-position:200% center}
}

.hero__feature{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .3s ease, transform .3s ease;
}
.hero__feature:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-3px);
}

/* Floating glass stats card (persists across slides) */
.hero__stats{
  position:absolute;
  left:4vw;
  bottom:96px;
  z-index:14;
  display:flex;
  gap:0;
  padding:20px 28px;
  border-radius:16px;
  background:rgba(11,26,52,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(4,12,28,.45);
  opacity:0;
  transform:translateY(16px);
  animation:statsIn .8s ease .6s forwards;
}
@keyframes statsIn{
  to{opacity:1;transform:translateY(0)}
}
.hero__stat{
  padding:0 26px;
  text-align:center;
  position:relative;
}
.hero__stat:first-child{padding-left:0}
.hero__stat:last-child{padding-right:0}
.hero__stat + .hero__stat::before{
  content:"";
  position:absolute;
  left:0;
  top:12%;
  height:76%;
  width:1px;
  background:rgba(255,255,255,.22);
}
.hero__stat b{
  display:block;
  font-family:var(--font-h);
  font-size:30px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
}
.hero__stat b i{
  font-style:normal;
  color:var(--red);
}
.hero__stat span{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
}

@media (max-width:1100px){
  .hero__stats{display:none}
}

/* ---------- Shine sweep on buttons ---------- */
.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::after{left:130%}

/* ---------- Clients strip ---------- */
.clients{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,var(--bg-soft) 100%);
}
.clients::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:230px;
  background:radial-gradient(closest-side,rgba(21,101,216,.07),transparent);
}
.clients__title{
  position:relative;
}

/* ---------- Projects bento ---------- */
.pj-th{
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.pj-th:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.pj-th img{
  transition:transform .6s ease;
}
.pj-th:hover img{
  transform:scale(1.06);
}
.pj-x{
  transition:background .3s ease;
}
.pj-th:hover .pj-x{
  background:var(--blue);
}

/* ---------- Services cards ---------- */
.service-card{
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,var(--blue),var(--red));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
.service-card:hover::before{
  transform:scaleX(1);
}
.service-card__ic{
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.service-card:hover .service-card__ic{
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  box-shadow:0 10px 22px rgba(21,101,216,.35);
  transform:translateY(-2px) rotate(-4deg);
}

/* ---------- About section ---------- */
.about__media{
  position:relative;
}
.about__video{
  position:relative;
  border-radius:16px;
  overflow:hidden;
}
.about__video::before{
  content:"";
  position:absolute;
  inset:12px -14px -14px 12px;
  border-radius:16px;
  border:2px solid rgba(21,101,216,.25);
  z-index:-1;
}
.about__video::after{
  content:"";
  position:absolute;
  right:-26px;
  top:-26px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,55,44,.16),transparent 70%);
}
.about__video img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- Funfacts ---------- */
.funfacts__grid > *{
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:26px 20px;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.funfacts__grid > *:hover{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);
  transform:translateY(-4px);
}

/* ---------- Video section ---------- */
.videosec{
  position:relative;
  overflow:hidden;
}
.videosec::before{
  content:"";
  position:absolute;
  top:-140px;
  right:-140px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(22,101,216,.28),transparent 70%);
  pointer-events:none;
}
.videosec::after{
  content:"";
  position:absolute;
  bottom:-120px;
  left:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,55,44,.18),transparent 70%);
  pointer-events:none;
}

/* ---------- Gallery ---------- */
.gallery__item{
  overflow:hidden;
  border-radius:12px;
}
.gallery__item img{
  transition:transform .6s ease, filter .4s ease;
}
.gallery__item:hover img{
  transform:scale(1.07);
  filter:saturate(1.15);
}

/* ---------- Certificates ---------- */
.cert__paper{
  transition:transform .35s ease, box-shadow .35s ease;
}
.cert__paper:hover{
  transform:translateY(-6px) rotate(-1.5deg);
  box-shadow:var(--shadow-lg);
}

/* ---------- Reviews ---------- */
.review{
  position:relative;
}
.review::before{
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--blue),var(--red));
  opacity:0;
  transition:opacity .3s ease;
}
.review:hover::before{
  opacity:1;
}

/* ---------- Blogs ---------- */
.blog-card .blog-card__media{
  overflow:hidden;
  border-radius:12px;
}
.blog-card img{
  transition:transform .6s ease;
}
.blog-card:hover img{
  transform:scale(1.07);
}
.blog-card__body h3 a{
  transition:color .25s ease;
}
.blog-card:hover .blog-card__body h3 a{
  color:var(--blue);
}

/* ---------- FAQ CTA ---------- */
.faq__cta{
  position:relative;
  overflow:hidden;
}
.faq__cta::before{
  content:"";
  position:absolute;
  top:-90px;
  right:-60px;
  width:260px;
  height:260px;
  border-radius:50%;
  border:34px solid rgba(255,255,255,.07);
}
.faq__cta::after{
  content:"";
  position:absolute;
  bottom:-110px;
  left:34%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);
}

/* ---------- Floating blobs behind light sections ---------- */
.services,
.about,
.blogs{
  position:relative;
}
.services::before,
.blogs::before{
  content:"";
  position:absolute;
  top:8%;
  right:-160px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(21,101,216,.05),transparent 70%);
  pointer-events:none;
}
.about::before{
  content:"";
  position:absolute;
  bottom:6%;
  left:-180px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,55,44,.045),transparent 70%);
  pointer-events:none;
}

/* ---------- Footer top accent ---------- */
.footer::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--red));
}

/* ---------- Reveal polish ---------- */
.reveal{
  will-change:opacity, transform;
}