/* =====================================================================
   Efekty wzorowane na MagicUI i Motion Primitives (React + Tailwind),
   przeniesione do czystego CSS/JS - bez kroku budowania i bez zmian w CSP.

   MagicUI:            Border Beam, Shimmer Button, Animated Shiny Text, Blur Fade
   Motion Primitives:  Text Effect (blur), Transition Panel, Animated Background
   Zdjęcia:            Pexels (licencja Pexels - bezpłatnie, także komercyjnie),
                       fot. panumas nikhomkhai; pliki serwowane lokalnie.
   ===================================================================== */

/* @property pozwala animować kąt w gradiencie stożkowym (Border Beam) */
@property --beam-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- Border Beam: świetlna smuga okrążająca ramkę ---------- */
/* używamy ::before - karta liczb ma już własny ::after (poświata) */
.beam{position:relative;isolation:isolate}
.beam.beam::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--beam-angle),transparent 0 72%,#38BDF8 82%,#2563EB 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion:no-preference){
  .beam.beam::before{animation:beam-spin 6s linear infinite}
}
@keyframes beam-spin{to{--beam-angle:360deg}}

/* ---------- Shimmer Button: odblask przesuwający się po przycisku ---------- */
.btn-primary,.btn-light{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before,.btn-light::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);opacity:0;
}
.btn-light::before{background:linear-gradient(100deg,transparent,rgba(37,99,235,.18),transparent)}
@media (prefers-reduced-motion:no-preference){
  .btn-primary::before,.btn-light::before{animation:shimmer 4.5s ease-in-out infinite}
  .btn-primary:hover::before,.btn-light:hover::before{animation-duration:1.4s}
}
@keyframes shimmer{0%,62%{left:-60%;opacity:0}66%{opacity:1}100%{left:130%;opacity:0}}

/* ---------- Animated Shiny Text: połysk wędrujący po napisie ---------- */
.shiny{
  background:linear-gradient(110deg,currentColor 35%,#fff 50%,currentColor 65%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .shiny{animation:shiny 3.8s linear infinite}
}
@keyframes shiny{from{background-position:100% 0}to{background-position:-150% 0}}
:root[data-theme="light"] .hero-v2 .shiny{background-image:linear-gradient(110deg,#1D4ED8 35%,#7DD3FC 50%,#1D4ED8 65%)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .hero-v2 .shiny{background-image:linear-gradient(110deg,#1D4ED8 35%,#7DD3FC 50%,#1D4ED8 65%)}}

/* ---------- Blur Fade: elementy wyłaniają się z rozmycia ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{filter:blur(8px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1),filter .7s ease}
  .js .reveal.is-visible{filter:none}
  /* Text Effect: słowa nagłówków wjeżdżają z rozmycia */
  .js .split-words .w>span{filter:blur(6px);transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .8s ease;transition-delay:calc(var(--i,0) * 45ms + .1s)}
  .js .is-visible .split-words .w>span,.js .split-words.is-visible .w>span{filter:none}
}


/* ---------- Animated Background: podświetlenie płynie za kursorem w menu ---------- */
.nav-list{position:relative}
.nav-pill{
  position:absolute;left:0;top:50%;height:36px;margin-top:-18px;border-radius:999px;pointer-events:none;z-index:0;
  background:color-mix(in srgb,var(--accent) 12%,transparent);opacity:0;
  transition:transform .35s cubic-bezier(.3,.8,.2,1),width .35s cubic-bezier(.3,.8,.2,1),opacity .25s ease;
}
.nav-list a{position:relative;z-index:1}
@media (max-width:1080px){.nav-pill{display:none}}

/* ---------- Zdjęcia (Pexels) jako tło sekcji, z nakładką w kolorach strony ---------- */
.section-feature{
  background-image:
    linear-gradient(160deg,rgba(11,42,107,.93),rgba(29,78,216,.86) 60%,rgba(3,105,161,.88)),
    url("../img/photo/why-servers.jpg");
  background-image:
    linear-gradient(160deg,rgba(11,42,107,.93),rgba(29,78,216,.86) 60%,rgba(3,105,161,.88)),
    image-set(url("../img/photo/why-servers.webp") type("image/webp"),url("../img/photo/why-servers.jpg") type("image/jpeg"));
  background-size:cover;background-position:center;
}
.cta-band{
  background-image:
    linear-gradient(110deg,rgba(11,27,63,.94),rgba(29,78,216,.82) 55%,rgba(11,74,117,.88)),
    url("../img/photo/cta-disks.jpg");
  background-image:
    linear-gradient(110deg,rgba(11,27,63,.94),rgba(29,78,216,.82) 55%,rgba(11,74,117,.88)),
    image-set(url("../img/photo/cta-disks.webp") type("image/webp"),url("../img/photo/cta-disks.jpg") type("image/jpeg"));
  background-size:cover;background-position:center;
}
/* ciemny motyw: głębsza nakładka */
:root[data-theme="dark"] .section-feature,:root[data-theme="dark"] .cta-band{background-blend-mode:normal}
:root[data-theme="dark"] .section-feature{background-image:linear-gradient(160deg,rgba(7,13,28,.94),rgba(13,31,74,.9) 60%,rgba(6,36,58,.92)),image-set(url("../img/photo/why-servers.webp") type("image/webp"),url("../img/photo/why-servers.jpg") type("image/jpeg"))}
:root[data-theme="dark"] .cta-band{background-image:linear-gradient(110deg,rgba(7,15,36,.95),rgba(13,31,74,.86) 55%,rgba(6,36,58,.9)),image-set(url("../img/photo/cta-disks.webp") type("image/webp"),url("../img/photo/cta-disks.jpg") type("image/jpeg"))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .section-feature{background-image:linear-gradient(160deg,rgba(7,13,28,.94),rgba(13,31,74,.9) 60%,rgba(6,36,58,.92)),image-set(url("../img/photo/why-servers.webp") type("image/webp"),url("../img/photo/why-servers.jpg") type("image/jpeg"))}
  :root:not([data-theme]) .cta-band{background-image:linear-gradient(110deg,rgba(7,15,36,.95),rgba(13,31,74,.86) 55%,rgba(6,36,58,.9)),image-set(url("../img/photo/cta-disks.webp") type("image/webp"),url("../img/photo/cta-disks.jpg") type("image/jpeg"))}
}
/* siatka i poświaty nad zdjęciem są zbędne - zdjęcie daje fakturę */
.section-feature .dark-bg::before{opacity:.35}
.section-feature .dark-glow{opacity:.25}
.cta-band::before{display:none}
.cta-band .aurora span{opacity:.25}

/* ---------- Zaufali nam: przesuwający się pas logotypów (wzór: MagicUI Marquee) ---------- */
.clients{padding:46px 0 54px;border-bottom:1px solid var(--line);background:var(--bg)}
.clients-title{
  text-align:center;margin:0 0 26px;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.marquee{
  --gap:18px;display:flex;gap:var(--gap);overflow:hidden;user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;flex:none;gap:var(--gap);min-width:100%;justify-content:space-around;margin:0;padding:6px 0;list-style:none}
.logo-tile{
  flex:none;display:flex;align-items:center;justify-content:center;width:188px;height:88px;padding:16px 22px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-xs);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.logo-tile img{display:block;width:auto;height:auto;max-width:140px;max-height:48px;object-fit:contain;
  filter:grayscale(1) contrast(1.05);opacity:.62;transition:filter .35s ease,opacity .35s ease}
.logo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand-100)}
.logo-tile:hover img{filter:none;opacity:1}
/* ciemny motyw: kafelki zostają jasne, żeby ciemne logotypy były czytelne */
:root[data-theme="dark"] .logo-tile{background:#E8EEF8;border-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .logo-tile{background:#E8EEF8;border-color:transparent}}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 46s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes marquee{to{transform:translateX(calc(-100% - var(--gap)))}}
/* bez animacji: statyczna siatka, bez duplikatu */
@media (prefers-reduced-motion:reduce){
  .marquee{flex-wrap:wrap;justify-content:center;-webkit-mask:none;mask:none}
  .marquee-track{flex-wrap:wrap;justify-content:center;min-width:0}
  .marquee-track[aria-hidden="true"]{display:none}
}
@media (max-width:640px){.logo-tile{width:150px;height:74px;padding:12px 16px}.logo-tile img{max-width:112px;max-height:40px}}
/* logotypy okrągłe/kwadratowe potrzebują więcej wysokości, żeby optycznie zrównać się z poziomymi */
.logo-tile img[src*="prosiaczek"]{max-height:68px}
.logo-tile img[src*="virtu"],.logo-tile img[src*="hsk"]{max-height:54px}

/* ---------- Modele współpracy (wzory: MagicUI Magic Card, Border Beam, Shimmer Button) ---------- */
.pricing{gap:22px}
.plan{transition:transform .4s cubic-bezier(.2,.75,.2,1),box-shadow .4s ease,border-color .3s ease}
.plan:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px color-mix(in srgb,var(--pc) 45%,transparent)}
/* Magic Card: ramka i plama światła podążają za kursorem (zmienne --mx/--my ustawia main.js) */
.plan.spot::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),var(--pc),transparent 65%)}
/* wyróżniona środkowa karta: świetlna smuga wokół ramki i delikatne uniesienie */
.plan-featured{border-color:color-mix(in srgb,var(--pc) 35%,var(--line));box-shadow:0 24px 50px -30px color-mix(in srgb,var(--pc) 55%,transparent)}
@media (min-width:1081px){.plan-featured{transform:translateY(-10px)}.plan-featured:hover{transform:translateY(-16px)}}
.plan-featured.beam::before{
  inset:-1px;height:auto;border-radius:inherit;z-index:3;opacity:1;
  background:conic-gradient(from var(--beam-angle),transparent 0 70%,var(--pc) 82%,#38BDF8 90%,transparent 100%);
}
/* lista: znaczniki z poświatą zamiast szarych kółek */
.plan-list li{transition:transform .25s ease,color .25s ease}
.plan-list li::before{background:color-mix(in srgb,var(--pc) 14%,transparent);box-shadow:none}
.plan-list li::after{border-color:var(--pc)}
.plan:hover .plan-list li{color:var(--ink)}
.plan:hover .plan-list li::before{box-shadow:0 0 10px color-mix(in srgb,var(--pc) 45%,transparent)}
/* przyciski: pełna szerokość, tekst + strzałka, która odjeżdża przy najechaniu */
.plan-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding:14px 20px;border-radius:14px;font-weight:650}
.plan-btn .btn-arrow{transition:transform .3s cubic-bezier(.3,.8,.2,1)}
.plan-btn:hover .btn-arrow{transform:translateX(5px)}
.plan .btn-ghost.plan-btn{background:transparent;color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 30%,var(--line))}
.plan .btn-ghost.plan-btn:hover{background:color-mix(in srgb,var(--pc) 8%,transparent);border-color:var(--pc);color:var(--pc)}
.plan .btn-primary.plan-btn{background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 70%,#0EA5E9));color:#fff;border:0;box-shadow:0 14px 30px -14px var(--pc)}
.plan .btn-primary.plan-btn:hover{color:#fff;box-shadow:0 18px 36px -12px var(--pc)}
:root[data-theme="dark"] .plan .btn-primary.plan-btn{background:linear-gradient(135deg,#2563EB,#0369A1);box-shadow:0 14px 30px -14px #2563EB}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .plan .btn-primary.plan-btn{background:linear-gradient(135deg,#2563EB,#0369A1);box-shadow:0 14px 30px -14px #2563EB}}

/* ---------- Modele współpracy: zdjęcie (Pexels) w nagłówku każdej karty ---------- */
.plan-top{position:relative;isolation:isolate;min-height:128px;overflow:hidden}
.plan-top::before{
  content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  transform:scale(1.04);transition:transform .8s cubic-bezier(.2,.75,.2,1);
}
.plan-top::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,var(--pc-soft) 0%,color-mix(in srgb,var(--pc-soft) 82%,transparent) 45%,color-mix(in srgb,var(--pc) 35%,transparent) 100%);
}
.plan:hover .plan-top::before{transform:scale(1.12)}
.plan--project .plan-top::before{background-image:image-set(url("../img/photo/bg-panel.webp") type("image/webp"),url("../img/photo/bg-panel.jpg") type("image/jpeg"))}
.plan--care .plan-top::before{background-image:image-set(url("../img/photo/bg-racks.webp") type("image/webp"),url("../img/photo/bg-racks.jpg") type("image/jpeg"))}
.plan--critical .plan-top::before{background-image:image-set(url("../img/photo/bg-server.webp") type("image/webp"),url("../img/photo/bg-server.jpg") type("image/jpeg"))}
.plan-motif{filter:drop-shadow(0 1px 2px rgba(255,255,255,.6))}
:root[data-theme="dark"] .plan-top::after{background:linear-gradient(110deg,rgba(10,18,36,.92) 0%,rgba(10,18,36,.78) 45%,color-mix(in srgb,var(--pc) 40%,rgba(10,18,36,.4)) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .plan-top::after{background:linear-gradient(110deg,rgba(10,18,36,.92) 0%,rgba(10,18,36,.78) 45%,color-mix(in srgb,var(--pc) 40%,rgba(10,18,36,.4)) 100%)}}
:root[data-theme="dark"] .plan-motif{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .plan-motif{filter:none}}

/* ---------- Przyciski kart modeli (wzór: MagicUI Interactive Hover Button + Ripple) ---------- */
@property --pb-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.pbtn{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;
  margin-top:auto;height:54px;padding:0 24px;border-radius:999px;
  font:650 1rem/1 var(--font);letter-spacing:-.01em;text-decoration:none;
  color:var(--pc);background:var(--surface);border:1px solid color-mix(in srgb,var(--pc) 30%,var(--line));
  transition:border-color .3s ease,box-shadow .4s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
/* kropka: przy najechaniu rozlewa się na cały przycisk */
.pbtn-dot{
  position:absolute;left:22px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;z-index:-1;
  background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#0EA5E9));
  transition:transform .55s cubic-bezier(.6,.05,.2,1),opacity .3s ease;
}
.pbtn-label{display:inline-block;padding-left:14px;transition:transform .45s cubic-bezier(.6,.05,.2,1),opacity .3s ease}
.pbtn-hover{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;
  transform:translateX(42px);opacity:0;transition:transform .45s cubic-bezier(.6,.05,.2,1),opacity .3s ease;
}
.pbtn:hover,.pbtn:focus-visible{border-color:var(--pc);box-shadow:0 16px 34px -16px var(--pc)}
.pbtn:hover .pbtn-dot,.pbtn:focus-visible .pbtn-dot{transform:scale(70)}
.pbtn:hover .pbtn-label,.pbtn:focus-visible .pbtn-label{transform:translateX(70px);opacity:0}
.pbtn:hover .pbtn-hover,.pbtn:focus-visible .pbtn-hover{transform:none;opacity:1}
.pbtn:hover .pbtn-hover svg{animation:pb-nudge 1s ease-in-out .35s infinite}
@keyframes pb-nudge{50%{transform:translateX(4px)}}
.pbtn:active{transform:scale(.97)}

/* wyróżniony: wypełniony + obracająca się świetlna obwódka */
.pbtn.is-featured{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#0EA5E9));box-shadow:0 14px 30px -14px var(--pc)}
.pbtn.is-featured::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--pb-angle),transparent 0 65%,rgba(255,255,255,.95) 80%,#7DD3FC 88%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.pbtn.is-featured .pbtn-dot{background:#fff;opacity:.9}
.pbtn.is-featured .pbtn-hover{color:var(--pc)}
@media (prefers-reduced-motion:no-preference){.pbtn.is-featured::before{animation:pb-spin 3.2s linear infinite}}
@keyframes pb-spin{to{--pb-angle:360deg}}

/* fala po kliknięciu (dodawana w main.js) */
.pbtn-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:1;background:rgba(255,255,255,.55);
  transform:scale(0);animation:pb-ripple .7s ease-out forwards}
@keyframes pb-ripple{to{transform:scale(1);opacity:0}}

:root[data-theme="dark"] .pbtn:not(.is-featured){background:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .pbtn:not(.is-featured){background:transparent}}
:root[data-theme="dark"] .pbtn.is-featured{background:linear-gradient(135deg,#2563EB,#0369A1)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .pbtn.is-featured{background:linear-gradient(135deg,#2563EB,#0369A1)}}
@media (prefers-reduced-motion:reduce){
  .pbtn-dot,.pbtn-label,.pbtn-hover{transition:none}
}
:root[data-theme="dark"] .pbtn:not(.is-featured) .pbtn-dot{background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 45%,#1D4ED8),color-mix(in srgb,var(--pc) 35%,#0B2A6B))}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .pbtn:not(.is-featured) .pbtn-dot{background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 45%,#1D4ED8),color-mix(in srgb,var(--pc) 35%,#0B2A6B))}}
:root[data-theme="dark"] .pbtn.is-featured .pbtn-hover{color:#1D4ED8}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .pbtn.is-featured .pbtn-hover{color:#1D4ED8}}

/* ---------- Kompetencje: zdjęcie (Pexels) w nagłówku każdej karty ---------- */
.card{overflow:hidden}
.card-media{
  position:relative;display:block;height:132px;margin:-32px -28px 0;overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--line-2);
}
.card-media::before{
  content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.08) brightness(1.05);transform:scale(1.03);
  transition:transform .9s cubic-bezier(.2,.75,.2,1),filter .6s ease;
}
.card-media::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(37,99,235,.38),rgba(14,165,233,.22) 55%,color-mix(in srgb,var(--surface) 70%,transparent) 100%);
  mix-blend-mode:normal;
}
.card:hover .card-media::before{transform:scale(1.1);filter:grayscale(.35) contrast(1.05)}
/* ikona nachodzi na krawędź zdjęcia */
.card .card-media + .card-icon{position:relative;z-index:2;margin-top:-26px;background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff;border:3px solid var(--surface);box-shadow:0 10px 22px -10px rgba(37,99,235,.8)}
.card:hover .card-media + .card-icon{background:linear-gradient(135deg,#2563EB,#0369A1)}
.card-media--outsourcing::before{background-image:image-set(url("../img/comp/outsourcing.webp") type("image/webp"),url("../img/comp/outsourcing.jpg") type("image/jpeg"))}
.card-media--virt::before{background-image:image-set(url("../img/comp/virt.webp") type("image/webp"),url("../img/comp/virt.jpg") type("image/jpeg"))}
.card-media--systems::before{background-image:image-set(url("../img/comp/systems.webp") type("image/webp"),url("../img/comp/systems.jpg") type("image/jpeg"))}
.card-media--db::before{background-image:image-set(url("../img/comp/db.webp") type("image/webp"),url("../img/comp/db.jpg") type("image/jpeg"))}
.card-media--middleware::before{background-image:image-set(url("../img/comp/middleware.webp") type("image/webp"),url("../img/comp/middleware.jpg") type("image/jpeg"))}
.card-media--perf::before{background-image:image-set(url("../img/comp/perf.webp") type("image/webp"),url("../img/comp/perf.jpg") type("image/jpeg"))}
.card-media--k8s::before{background-image:image-set(url("../img/comp/k8s.webp") type("image/webp"),url("../img/comp/k8s.jpg") type("image/jpeg"))}
.card-media--iac::before{background-image:image-set(url("../img/comp/iac.webp") type("image/webp"),url("../img/comp/iac.jpg") type("image/jpeg"))}
.card-media--cloud::before{background-image:image-set(url("../img/comp/cloud.webp") type("image/webp"),url("../img/comp/cloud.jpg") type("image/jpeg"))}
.card-media--migration::before{background-image:image-set(url("../img/comp/migration.webp") type("image/webp"),url("../img/comp/migration.jpg") type("image/jpeg"))}
.card-media--backup::before{background-image:image-set(url("../img/comp/backup.webp") type("image/webp"),url("../img/comp/backup.jpg") type("image/jpeg"))}
.card-media--monitoring::before{background-image:image-set(url("../img/comp/monitoring.webp") type("image/webp"),url("../img/comp/monitoring.jpg") type("image/jpeg"))}

:root[data-theme="dark"] .card-media::after{background:linear-gradient(180deg,rgba(11,27,63,.55),rgba(13,31,74,.45) 55%,color-mix(in srgb,var(--surface) 80%,transparent) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .card-media::after{background:linear-gradient(180deg,rgba(11,27,63,.55),rgba(13,31,74,.45) 55%,color-mix(in srgb,var(--surface) 80%,transparent) 100%)}}
:root[data-theme="dark"] .card-media::before{filter:grayscale(1) contrast(1.1) brightness(.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .card-media::before{filter:grayscale(1) contrast(1.1) brightness(.8)}}
@media (max-width:640px){.card-media{margin:-26px -22px 0;height:118px}}

/* ---------- Usługi: przycisk "Zapytaj o usługę" na dole karty ---------- */
.services-grid .card{display:flex;flex-direction:column}
.services-grid .card-list{margin-bottom:22px}
.card-cta{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;font-weight:650;font-size:.92rem;text-decoration:none;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.card-cta svg{transition:transform .3s cubic-bezier(.3,.8,.2,1)}
.card-cta:hover,.card-cta:focus-visible{color:#fff;background:linear-gradient(135deg,#2563EB,#0369A1);border-color:transparent;box-shadow:0 12px 26px -14px #2563EB}
.card-cta:hover svg,.card-cta:focus-visible svg{transform:translateX(4px)}

/* ---------- Proces: zdjęcie serwerowni + animacja strumieni danych w tle ---------- */
.section-bgmedia{position:relative;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(244,248,255,.86) 50%,rgba(255,255,255,.95) 100%),image-set(url("../img/photo/hero-dc.webp") type("image/webp"),url("../img/photo/hero-dc.jpg") type("image/jpeg"));
  background-size:cover;background-position:center}
.section-bgmedia>.container{position:relative;z-index:1}
.section-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;
  filter:invert(1) hue-rotate(180deg) saturate(1.4);mix-blend-mode:multiply;opacity:.35;
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
:root[data-theme="dark"] .section-bgmedia{background-image:linear-gradient(180deg,rgba(7,13,30,.96) 0%,rgba(9,20,46,.84) 50%,rgba(7,13,30,.96) 100%),image-set(url("../img/photo/hero-dc.webp") type("image/webp"),url("../img/photo/hero-dc.jpg") type("image/jpeg"))}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .section-bgmedia{background-image:linear-gradient(180deg,rgba(7,13,30,.96) 0%,rgba(9,20,46,.84) 50%,rgba(7,13,30,.96) 100%),image-set(url("../img/photo/hero-dc.webp") type("image/webp"),url("../img/photo/hero-dc.jpg") type("image/jpeg"))}}
:root[data-theme="dark"] .section-video{filter:saturate(1.1);mix-blend-mode:screen;opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .section-video{filter:saturate(1.1);mix-blend-mode:screen;opacity:.55}}
.card-media--mail::before{background-image:image-set(url("../img/comp/mail.webp") type("image/webp"),url("../img/comp/mail.jpg") type("image/jpeg"))}
.card-media--network::before{background-image:image-set(url("../img/comp/network.webp") type("image/webp"),url("../img/comp/network.jpg") type("image/jpeg"))}
.card-media--security::before{background-image:image-set(url("../img/comp/security.webp") type("image/webp"),url("../img/comp/security.jpg") type("image/jpeg"))}