/**
 * Homepage milestone strip — wide, low height, glass + confetti.
 */
.lkit-milestones{
  --mm-navy:#2e4056;
  --mm-blue:#2f94d7;
  --mm-pink:#ff4d9a;
  --mm-cyan:#3ecfff;
  padding:1.1rem 0 1.35rem;
  background:transparent;
}
.lkit-milestones__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem;
  width:100%;
}
.lkit-milestone{
  position:relative;
  display:flex;
  align-items:center;
  min-height:92px;
  padding:.85rem 1.25rem .85rem 1.35rem;
  overflow:hidden;
  border-radius:18px;
  color:#fff;
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(255,77,154,.22), transparent 55%),
    radial-gradient(ellipse 60% 100% at 100% 100%, rgba(47,148,215,.2), transparent 50%),
    linear-gradient(135deg, rgba(30,44,66,.92) 0%, rgba(22,34,52,.96) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 28px rgba(21,40,70,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lkit-milestone:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 34px rgba(21,40,70,.22),
    0 0 0 1px rgba(255,77,154,.18),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.lkit-milestone:nth-child(2){
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(47,148,215,.24), transparent 55%),
    radial-gradient(ellipse 60% 100% at 100% 100%, rgba(255,77,154,.16), transparent 50%),
    linear-gradient(135deg, rgba(30,44,66,.92) 0%, rgba(22,34,52,.96) 100%);
}
.lkit-milestone__edge{
  position:absolute;
  top:0;
  left:1.1rem;
  width:42%;
  height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--mm-pink), var(--mm-blue));
  box-shadow:0 0 14px rgba(255,77,154,.65), 0 0 22px rgba(47,148,215,.35);
  animation:mmEdgePulse 2.4s ease-in-out infinite;
}
.lkit-milestone:nth-child(2) .lkit-milestone__edge{
  background:linear-gradient(90deg, var(--mm-cyan), var(--mm-blue));
  box-shadow:0 0 14px rgba(62,207,255,.65), 0 0 22px rgba(47,148,215,.35);
}
@keyframes mmEdgePulse{
  0%,100%{opacity:.75; filter:brightness(1)}
  50%{opacity:1; filter:brightness(1.25)}
}
.lkit-milestone__wave{
  position:absolute;
  inset:auto 0 0 0;
  height:46%;
  opacity:.35;
  pointer-events:none;
  background:
    radial-gradient(ellipse 40% 80% at 20% 100%, rgba(255,77,154,.35), transparent 70%),
    radial-gradient(ellipse 45% 90% at 80% 120%, rgba(47,148,215,.4), transparent 70%);
}
.lkit-milestone__ring{
  position:absolute;
  right:.85rem;
  top:50%;
  width:64px;
  height:64px;
  margin-top:-32px;
  border-radius:50%;
  pointer-events:none;
}
.lkit-milestone__ring svg{
  display:block;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  filter:drop-shadow(0 0 8px rgba(255,77,154,.45));
}
.lkit-milestone:nth-child(2) .lkit-milestone__ring svg{
  filter:drop-shadow(0 0 8px rgba(47,148,215,.5));
}
.lkit-milestone__ring circle.mm-track{
  fill:none;
  stroke:rgba(255,255,255,.1);
  stroke-width:3.5;
}
.lkit-milestone__ring circle.mm-progress{
  fill:none;
  stroke:url(#mmGrad1);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-dasharray:157;
  stroke-dashoffset:157;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,.8,.28,1);
}
.lkit-milestone.is-inview .lkit-milestone__ring circle.mm-progress{
  stroke-dashoffset:38;
}
.lkit-milestone:nth-child(2).is-inview .lkit-milestone__ring circle.mm-progress{
  stroke-dashoffset:48;
}
.lkit-milestone__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding-right:4.5rem;
  min-width:0;
}
.lkit-milestone__num{
  font-size:clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 0 24px rgba(255,77,154,.25);
}
.lkit-milestone:nth-child(2) .lkit-milestone__num{
  text-shadow:0 0 24px rgba(47,148,215,.3);
}
.lkit-milestone__label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.lkit-milestone__icon{
  position:absolute;
  right:1.55rem;
  top:50%;
  z-index:2;
  width:36px;
  height:36px;
  margin-top:-18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#ffd76a;
  font-size:1rem;
  box-shadow:0 0 16px rgba(255,215,106,.25);
}
.lkit-milestone:nth-child(2) .lkit-milestone__icon{
  color:#7ad7ff;
  box-shadow:0 0 16px rgba(122,215,255,.28);
}

/* Confetti layer */
.lkit-milestone__confetti{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.lkit-confetti-piece{
  position:absolute;
  top:42%;
  left:18%;
  width:7px;
  height:4px;
  border-radius:1px;
  opacity:0;
  will-change:transform, opacity;
}
.lkit-milestone.is-burst .lkit-confetti-piece{
  animation:mmConfettiBurst 1.15s cubic-bezier(.12,.8,.22,1) forwards;
}
@keyframes mmConfettiBurst{
  0%{
    opacity:0;
    transform:translate(0,0) rotate(0deg) scale(.5);
  }
  8%{opacity:1}
  55%{opacity:1}
  100%{
    opacity:0;
    transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.05);
  }
}

@media (max-width:767px){
  .lkit-milestones{
    padding:.85rem 0 1rem;
  }
  .lkit-milestones__row{
    grid-template-columns:1fr;
    gap:.65rem;
  }
  .lkit-milestone{
    min-height:84px;
    padding:.75rem 1rem .75rem 1.1rem;
  }
  .lkit-milestone__ring{
    width:56px;
    height:56px;
    margin-top:-28px;
    right:.65rem;
  }
  .lkit-milestone__icon{
    right:1.25rem;
    width:32px;
    height:32px;
    margin-top:-16px;
    font-size:.9rem;
  }
  .lkit-milestone__content{
    padding-right:4rem;
  }
  .lkit-milestone__label{
    letter-spacing:.08em;
  }
}