/* ============================================================
   ADAYA — Services 3D carousel
   Large center card · partial side cards · cursor-tilt · glass
   Builds on styles.css tokens. Theme-aware.
   ============================================================ */
.svc-carousel{position:relative;margin-top:clamp(36px,5vw,56px);height:clamp(430px,58vh,560px);
  perspective:1700px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.svc-glow{position:absolute;width:640px;height:640px;max-width:94vw;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(34,205,241,.24),rgba(34,205,241,.12) 32%,rgba(26,132,242,.05) 54%,transparent 74%);
  filter:blur(46px);animation:svc-breathe 7s ease-in-out infinite}
[data-theme="light"] .svc-glow{background:radial-gradient(circle,rgba(34,205,241,.16),rgba(34,205,241,.07) 34%,rgba(26,132,242,.03) 56%,transparent 76%)}
@keyframes svc-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}

.svc-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .35s var(--ease);will-change:transform}

.sc-card{position:absolute;left:50%;top:50%;width:clamp(280px,40vw,448px);height:clamp(392px,52vh,504px);
  border-radius:var(--r-2xl);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;
  background:var(--glass-thick);-webkit-backdrop-filter:blur(34px) saturate(160%);backdrop-filter:blur(34px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:var(--elev-3),var(--glass-hi);
  transition:transform .6s var(--ease),opacity .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
  will-change:transform,opacity;cursor:pointer;backface-visibility:hidden;overflow:hidden}
.sc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .55s var(--ease);pointer-events:none;
  background:radial-gradient(135% 100% at 50% -18%,rgba(34,205,241,.16),rgba(34,205,241,.06) 38%,rgba(34,205,241,.015) 60%,transparent 78%)}
.sc-card.active{border-color:color-mix(in srgb,var(--sky) 30%,transparent);
  box-shadow:var(--elev-4),0 0 80px rgba(34,205,241,.20),0 0 36px rgba(34,205,241,.12),var(--glass-hi)}
.sc-card.active::before{opacity:1}

.sc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:auto}
.sc-ico{width:clamp(54px,5vw,68px);height:clamp(54px,5vw,68px);border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-cta);box-shadow:0 12px 28px rgba(26,132,242,.36)}
.sc-ico svg{width:clamp(26px,2.6vw,32px);height:clamp(26px,2.6vw,32px);color:#fff}
.sc-num{font-family:"IBM Plex Mono",monospace;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:500;line-height:1;
  letter-spacing:-.02em;color:var(--text-3);opacity:.5}
.sc-card.active .sc-num{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}
.sc-body{margin-top:clamp(20px,3vh,34px)}
.sc-body h3{font-size:clamp(1.45rem,2.4vw,2rem);letter-spacing:-.02em;margin-bottom:14px;line-height:1.1}
.sc-body p{font-size:clamp(.95rem,1.2vw,1.08rem);color:var(--text-2);line-height:1.6;max-width:34ch}
.sc-link{margin-top:clamp(20px,3vh,30px);display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.96rem;
  color:var(--text-brand);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease) .1s,transform .4s var(--ease) .1s}
.sc-link svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.sc-card.active .sc-link{opacity:1;transform:none}
.sc-card.active .sc-link:hover svg{transform:translateX(5px)}

/* ---- controls ---- */
.svc-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:clamp(28px,4vw,42px)}
.svc-arrow{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--glass-reg);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-border);box-shadow:var(--elev-2),var(--glass-hi);transition:all .25s var(--ease);color:var(--text-brand)}
.svc-arrow:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sapphire) 45%,transparent);box-shadow:var(--elev-3),0 0 26px rgba(34,205,241,.3)}
.svc-arrow:active{transform:scale(.95)}
.svc-arrow svg{width:23px;height:23px}
.svc-dots{display:flex;align-items:center;gap:10px}
.svc-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:color-mix(in srgb,var(--text-3) 55%,transparent);transition:all .3s var(--ease)}
.svc-dot:hover{background:var(--text-2)}
.svc-dot.on{width:30px;border-radius:var(--r-pill);background:var(--grad-core);box-shadow:0 0 12px rgba(34,205,241,.6)}

/* current service label under dots (mobile-friendly affordance) */
.svc-meta{text-align:center;margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.svc-meta b{color:var(--text-brand);font-weight:600}

@media (max-width:680px){
  .svc-carousel{height:clamp(400px,64vh,480px);perspective:1200px}
  .sc-card{width:min(80vw,360px);height:clamp(370px,60vh,440px)}
  .svc-arrow{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .svc-glow{animation:none}
  .svc-stage{transition:none}
}