/* ===== 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;
  /* scale nicely from small phones to wide desktops */
  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);
}

/* sexy 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); } }

/* top image */
.svc-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;               /* neat landscape on desktop */
  overflow: hidden;
}
.svc-media img{
  width: 100%; height: 100%; display: block; object-fit: cover; /* RAW color */
  transform: scale(1.001); /* avoid subpixel seams */
}

/* bottom description */
.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: 8px 10px; padding: 0; margin: 0; list-style: none;
}
.svc-bullets li{
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #a9b4c7;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* 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: 2; 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; }

/* change animation (card slides a touch then fades new content in) */
.svc-card.anim-out-left  { animation: svcOutLeft 220ms ease forwards; }
.svc-card.anim-out-right { animation: svcOutRight 220ms ease forwards; }
.svc-card.anim-in-left   { animation: svcInLeft 320ms cubic-bezier(.22,.61,.36,1) forwards; }
.svc-card.anim-in-right  { animation: svcInRight 320ms cubic-bezier(.22,.61,.36,1) forwards; }

@keyframes svcOutLeft  { to { transform: translateX(-20px); opacity: .0; } }
@keyframes svcOutRight { to { transform: translateX( 20px); opacity: .0; } }
@keyframes svcInLeft   { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes svcInRight  { from { transform: translateX( 20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* === Cyan chips with hover glow === */
.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{
  display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none;
}

.svc-bullets li{
  cursor: pointer;
  font: 600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: var(--chip-text);
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--chip-bg), rgba(0,229,255,.06));
  border: 1px solid var(--chip-border);
  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);
}
.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);
}
/* Accessible focus ring if chips are focusable */
.svc-bullets li:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,229,255,.45),
    0 0 20px var(--chip-glow);
}

/* ====== RESPONSIVE TUNING ====== */

/* Large screens: let the card breathe more */
@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); }
}

/* Tablets / mid viewports */
@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; } /* slightly reduce border intensity */
}

/* Small tablets / large phones */
@media (max-width: 640px){
  .svc-card{
    width: clamp(300px, 92vw, 640px);
    --rad: 14px;
  }
  /* Make media a bit taller so the card doesn’t look too text-heavy */
  .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; }
  /* So arrows don’t crowd small screens */
  .svc-btn{
    width: 36px; height: 36px; font-size: 18px;
    background: rgba(18,22,32,.42);
  }
  .svc-card::before{ opacity:.14; } /* softer animated border */
}

/* Very small phones */
@media (max-width: 380px){
  .svc-card{ width: clamp(280px, 94vw, 560px); --rad: 12px; }
  .svc-media{ aspect-ratio: 1 / 1; } /* square keeps content readable */
  .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; }
}

/* Motion-friendly */
@media (prefers-reduced-motion: reduce){
  .svc-bullets li{ transition: none; }
  .svc-card::before{ animation: none; }
  .svc-card.anim-out-left,
  .svc-card.anim-out-right,
  .svc-card.anim-in-left,
  .svc-card.anim-in-right{ animation: none; }
}