/* =========================================================================
   services — Figma 1053:1192 "all services" (cards 1083:444)
   black section with blue glows · 3 white cards + the dark SEO card.
   Card: text right · image left (700×560, top corner toward the text = 180px round).
   ========================================================================= */
.services{position:relative;isolation:isolate;padding:120px 0 64px;background:#000;overflow:clip}   /* clip, not hidden: hidden would break position:sticky */
.services__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(38% 30% at 0% 100%,rgba(23,109,222,.9),rgba(23,109,222,0) 75%),url("../images/services-bg.webp") -87.3vw .67vw/232.81vw auto no-repeat}
/* ---- stacking on scroll (Kfir 26/10) ----------------------------------------
   The title pins under the fixed header; each card pins a bit lower than the one
   before it, so the next card slides over and they pile up until the growth
   section. main.js shrinks/dims the covered cards and sets --stack-top so a card
   always fits the viewport (short screens).                                       */
.services__title{position:sticky;top:calc(var(--header-h) + 18px);z-index:0;margin-bottom:59px;padding-bottom:6px}
.services__list{--stack-top:calc(var(--header-h) + 18px + var(--lh-h2) + 40px)}
.srv{position:sticky;top:calc(var(--stack-top) + var(--i,0) * 22px);transform-origin:50% 0;will-change:transform}
.srv{transition:filter .15s linear}
.services__list{display:flex;flex-direction:column;gap:61px}
.srv{box-shadow:0 -18px 40px rgba(0,0,0,.35);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px);align-items:center;column-gap:72px;padding:24px 72px 24px 24px;border:1px solid var(--card-line);border-radius:var(--radius-card);background:var(--white);color:var(--black)}
.srv__text{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}
.srv__title{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:400}
.srv__title b{font-weight:700}
.srv__body{font-size:var(--fs-body);line-height:var(--lh-body)}
.srv__media{height:560px;border-radius:16px 180px 16px 16px;background:#14161a}
.srv__media img,.srv__media video{object-position:50% 50%}
.srv__video{opacity:0;pointer-events:none}
.srv__media.is-video-playing .srv__video{opacity:1}
@media (prefers-reduced-motion:reduce){.srv__video{display:none}}

/* SEO card — dark, its image box shows the search → Google → ChatGPT sequence */
.srv--dark{border-color:#69727c;color:var(--white);background:#000 url("../images/seo-bg.webp") 30% 36%/130% auto no-repeat}
.srv--dark .tag{border-color:rgba(255,255,255,.35)}
.srv__media--seo{border:1px solid rgba(255,255,255,.12);background:#0c0e12}

@media (max-width:1480px){
  .srv{grid-template-columns:minmax(0,1fr) minmax(0,600px);column-gap:56px;padding-right:56px}
  .srv__media{height:480px}
}
@media (max-width:1100px){
  .services{padding:96px 0 48px}
  .services__title{margin-bottom:44px}
  .services__list{gap:32px}
  .srv{grid-template-columns:1fr;row-gap:32px;padding:20px 20px 40px}
  .srv__media{order:-1;height:auto;padding-bottom:56%}
  .srv__text{padding-inline:20px;gap:22px}
  .srv--dark{background-size:160% auto;background-position:30% 100%}
}
@media (max-width:800px){
  .services{padding:64px 0 32px}
  .services__title{margin-bottom:32px}
  .services__list{gap:20px}
  .srv{top:calc(var(--stack-top) + var(--i,0) * 12px)}
  .srv{padding:12px 12px 32px;row-gap:24px}
  .srv__media{padding-bottom:58%;border-radius:12px 90px 12px 12px}
  .srv__text{padding-inline:8px;gap:14px}
  .srv__body{font-size:16px;line-height:24px}
  .srv__title{font-size:26px;line-height:32px}
  .srv .tags{gap:6px}
  .srv .tag{font-size:13px;line-height:18px;padding:4px 11px 6px}
  .srv{padding-bottom:22px}
  .services__title{top:calc(var(--header-h) + 10px);margin-bottom:24px}
  .srv--dark{background-size:300% auto;background-position:30% 0}
}