/* ===== Services: simple, compact card (responsive) ===== */
.services-lite{
  position: relative;
  display: grid;
  place-items: center;
  row-gap: clamp(20px, 4vw, 40px);
  padding: clamp(24px, 5vw, 64px) 0;
  isolation: isolate;
}

/* glow stays behind */
#services-glow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  opacity:.9;
}

/* the card */
.svc-card{
  --rad: 16px;
  --borderW: 2px;
  position: relative;
  z-index: 1;
  width: clamp(300px, 58vw, 900px);
  border-radius: var(--rad);
  overflow: hidden;
  background: rgba(14,18,28,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.22);
}

/* animated gradient border */
.svc-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: calc(var(--rad) + 2px);
  padding: var(--borderW);
  background: conic-gradient(from 0deg,
    #00e5ff, #a855f7, #22c55e, #f97316, #00e5ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: svc-spin 18s linear infinite;
  opacity: .22;
  pointer-events:none;
}
@keyframes svc-spin {
  to { transform: rotate(360deg); }
}

/* shell */
.svc-shell{
  position: relative;
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(.22,.61,.36,1);
}

.svc-shell.svc-shell-shift-left{
  transform: translateX(-14px);
}
.svc-shell.svc-shell-shift-right{
  transform: translateX(14px);
}

/* media */
.svc-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  /* changed from solid dark fill so animated section background can show through */
  background: rgba(8, 14, 24, 0.16);
}

/* subtle glass tint only in the image area */
.svc-media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    radial-gradient(120% 90% at 50% 10%, rgba(80,140,255,.06), transparent 60%);
}

/* optional soft top sheen for the picture area */
.svc-media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.015) 16%,
    rgba(255,255,255,0) 40%
  );
}

.svc-track{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.svc-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0) scale(1.015);
  pointer-events: none;
  z-index: 1;
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(.22,.61,.36,1);
}

.svc-slide.active{
  pointer-events: none;
}

.svc-slide.current{
  opacity: 1;
  z-index: 2;
}

.svc-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* current slide easing away while staying visible */
.svc-slide.leave-left{
  opacity: 0;
  transform: translateX(-26px) scale(.995);
  z-index: 2;
}
.svc-slide.leave-right{
  opacity: 0;
  transform: translateX(26px) scale(.995);
  z-index: 2;
}

/* next slide comes in over the top */
.svc-slide.enter-right{
  opacity: 0;
  transform: translateX(34px) scale(1.02);
  z-index: 3;
}
.svc-slide.enter-left{
  opacity: 0;
  transform: translateX(-34px) scale(1.02);
  z-index: 3;
}

/* body */
.svc-body{
  padding: clamp(14px, 3vw, 24px);
}
.svc-title{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.6vw, 24px);
  color: #eaf1ff;
  letter-spacing: .2px;
}
.svc-desc{
  margin: 0 0 12px;
  color: #b8c7e0;
  line-height: 1.55;
}
.svc-bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}

/* text transitions: subtle, no blank gap */
.svc-body.svc-text-out-left{
  opacity: .15;
  transform: translateX(-14px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.svc-body.svc-text-out-right{
  opacity: .15;
  transform: translateX(14px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.svc-body.svc-text-in-left{
  opacity: 0;
  transform: translateX(-14px);
  animation: svcTextInLeft 320ms cubic-bezier(.22,.61,.36,1) forwards;
}
.svc-body.svc-text-in-right{
  opacity: 0;
  transform: translateX(14px);
  animation: svcTextInRight 320ms cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes svcTextInLeft {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes svcTextInRight {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.svc-bullets li{
  cursor: pointer;
  font: 600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: var(--chip-text, #bff7ff);
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--chip-bg, rgba(0,229,255,.08)), rgba(0,229,255,.06));
  border: 1px solid var(--chip-border, rgba(0,229,255,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .25s ease,
    text-shadow .25s ease,
    transform .18s cubic-bezier(.22,.61,.36,1);
}

/* controls */
.svc-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(18,22,32,.45);
  color: #e8f0ff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 4;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.svc-btn:hover{
  background: rgba(18,22,32,.65);
  transform: translateY(-50%) scale(1.05);
}
.svc-btn.prev{ left: 8px; }
.svc-btn.next{ right: 8px; }

/* chips */
.services-lite{
  --cyan: #00e5ff;
  --chip-bg: rgba(0,229,255,.08);
  --chip-bg-hover: rgba(0,229,255,.18);
  --chip-border: rgba(0,229,255,.35);
  --chip-glow: rgba(0,229,255,.55);
  --chip-text: #bff7ff;
}

.svc-bullets li:hover{
  color: #eaffff;
  background: linear-gradient(180deg, var(--chip-bg-hover), rgba(0,229,255,.10));
  box-shadow:
    0 0 0 2px rgba(0,229,255,.28),
    0 0 24px var(--chip-glow),
    0 6px 18px rgba(0,0,0,.35);
  text-shadow:
    0 0 8px rgba(0,229,255,.35),
    0 0 18px rgba(0,229,255,.45);
  transform: translateY(-1px);
}
.svc-bullets li:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 2px rgba(0,229,255,.35),
    0 0 16px rgba(0,229,255,.45),
    0 2px 10px rgba(0,0,0,.4);
}
.svc-bullets li:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,229,255,.45),
    0 0 20px var(--chip-glow);
}

/* responsive */
@media (min-width: 1200px){
  .svc-card{ width: clamp(560px, 48vw, 1000px); }
  .svc-title{ font-size: clamp(20px, 2vw, 26px); }
  .svc-body{ padding: clamp(18px, 2.4vw, 28px); }
}

@media (max-width: 900px){
  .svc-card{ width: clamp(320px, 78vw, 780px); }
  .svc-body{ padding: clamp(16px, 4vw, 22px); }
  .svc-title{ font-size: clamp(18px, 3.2vw, 22px); }
  .svc-btn{ width: 40px; height: 40px; font-size: 20px; }
  .svc-card::before{ opacity:.18; }
}

@media (max-width: 640px){
  .svc-card{
    width: clamp(300px, 92vw, 640px);
    --rad: 14px;
  }
  .svc-media{ aspect-ratio: 4 / 3; }
  .svc-body{ padding: clamp(14px, 5vw, 18px); }
  .svc-title{ font-size: clamp(17px, 4.5vw, 20px); }
  .svc-desc{ font-size: clamp(13px, 3.6vw, 15px); }
  .svc-bullets{ gap: 8px; }
  .svc-bullets li{ font-size: 11px; padding: 7px 10px; }
  .svc-btn{
    width: 36px;
    height: 36px;
    font-size: 18px;
    background: rgba(18,22,32,.42);
  }
  .svc-card::before{ opacity:.14; }
}

@media (max-width: 380px){
  .svc-card{ width: clamp(280px, 94vw, 560px); --rad: 12px; }
  .svc-media{ aspect-ratio: 1 / 1; }
  .svc-title{ font-size: clamp(16px, 5.2vw, 18px); }
  .svc-desc{ font-size: 13px; }
  .svc-bullets li{ padding: 6px 9px; font-size: 10.5px; }
  .svc-btn{ width: 34px; height: 34px; font-size: 17px; }
  .svc-card::before{ opacity:.12; }
}

@media (prefers-reduced-motion: reduce){
  .svc-card::before{ animation: none; }
  .svc-slide{
    transition: none;
    transform: none !important;
  }
  .svc-shell{
    transition: none;
  }
  .svc-body.svc-text-in-left,
  .svc-body.svc-text-in-right{
    animation: none;
    opacity: 1;
    transform: none;
  }
  .svc-bullets li{
    transition: none;
  }
}