/* Chmura.tech: spójna kolorystyka i zwarty rytm sekcji.
   Wczytywany po wszystkich arkuszach systemu, więc tylko nadpisuje.
   1. Sekcje nie mają już wymuszonej wysokości ekranu (to robiło dziury).
   2. Tła ramek, paneli i stopki w błękicie z logo zamiast szaroniebieskiego.
   3. Jeden akcent (#0a66ff) na cenach, linkach, przyciskach i elementach UI. */

:root {
  --brand: #0a66ff;
  --brand-deep: #0847b8;
  --brand-sky: #38bdf8;
  --brand-tint: #e8f0ff;
  --brand-tint-2: #d6e5ff;
  --navy: #0b1220;

  --gap-section: 48px;   /* nad i pod każdą sekcją: 96px między sekcjami */
  --head-gap: 32px;
}
@media (max-width: 639px) {
  :root { --gap-section: 32px; --head-gap: 24px; }
}

/* ---------------------------------------------------------------- kolory tła ramek, paneli, stopki */
html[data-ground] {
  --ground-bg: #dbe7fb;
  --ground-surface: #edf3fd;
  --ground-ink: #0b1a33;
  --ground-muted: #44536b;
  --ground-accent: #0a66ff;
}

/* ---------------------------------------------------------------- rytm: sekcje tak wysokie jak treść */
html main > :is(section, .section):not(.hero, .section--hero),
html footer.closing {
  height: auto;
  min-height: 0;
  padding: var(--gap-section) 0;
  display: block;
}
html main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container),
html footer.closing > .wrap {
  height: auto;
}
/* „Funkcje” były na dwa ekrany: teraz dwa rzędy kart jeden pod drugim */
html main > :is(section, .section).g2 > :is(.wrap, .container) {
  display: flex; flex-direction: column; row-gap: var(--card-gap);
}
html main > :is(section, .section).g2 > .wrap > .grid:last-child,
html main > :is(section, .section).g2 > .wrap > .group > .grid:last-child { flex: none; }
html main > :is(section, .section) > .wrap > .fill { flex: none; }
#funkcje .panel { --p-h: 300px; }
@media (max-width: 639px) { #funkcje .panel { --p-h: 220px; } }

/* elementy, które wypełniały „resztę ekranu”, dostają własną wysokość */
#panel .app.ui { height: 500px; margin-top: var(--head-gap); }
#outsourcing .frame { min-height: 460px; }
.domains__frame { margin-top: var(--card-gap); height: 260px; }
#vps .ptable { margin-top: var(--head-gap); }
@media (max-width: 1023px) { #panel .app.ui { height: 560px; } }
@media (max-width: 639px) {
  #panel .app.ui { height: 420px; }
  #outsourcing .frame { min-height: 380px; margin-top: var(--s-6); }
  .domains__frame { height: 220px; }
}

/* ---------------------------------------------------------------- hero: przycisk pod tekstem, błękitna poświata */
main > .hero {
  background:
    radial-gradient(60% 70% at 68% 45%, rgb(10 102 255 / .10), transparent 70%),
    radial-gradient(40% 50% at 95% 10%, rgb(56 189 248 / .12), transparent 70%);
}
@media (min-width: 1024px) {
  .hero--triptych .hero__grid { grid-template-rows: 1fr auto 1fr; }
  .hero--triptych .hero__grid > :first-child { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
  .hero--triptych .ly-collage { grid-column: 6 / span 7; grid-row: 1 / span 3; }
  .hero--triptych .hero__cta { grid-column: 1 / span 4; grid-row: 2; justify-content: flex-start; margin-top: var(--s-6); }
  .hero--triptych .hero__cta .btn { height: 56px; font-size: var(--t-body); }
  .hero--triptych .hero__lead { max-width: 34ch; }
}
.hero--triptych .ly-collage .ly-piece { border-color: rgb(10 102 255 / .12); }
.pc-dark { background: linear-gradient(160deg, #0f1d3a 0%, #0b1220 70%) !important; }

/* ---------------------------------------------------------------- akcent marki */
.btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, #1e7bff 100%);
  box-shadow: 0 8px 20px -10px rgb(10 102 255 / .6);
}
.btn--primary:hover { background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%); }

/* przyciski „Zamów serwer”: jasny błękit zamiast szarości */
html[data-buttons] .btn--secondary { background: var(--brand-tint); color: var(--brand-deep); border-color: transparent; }
html[data-buttons] .btn--secondary:hover { background: var(--brand-tint-2); color: var(--brand-deep); }

/* linki z treści w kolorze marki */
.link { color: var(--brand); }

/* ceny zawsze w tym samym błękicie */
.ptable .ptable__price, .rows__value, .tld__price { color: var(--brand); font-weight: 500; }
.ptable .ptable__price small { color: var(--muted); font-weight: 400; }
.ptable [role=row]:not(.ptable__head):hover { background: color-mix(in oklab, var(--brand) 4%, transparent); }
.ptable .ptable__bar { background: linear-gradient(180deg, #f3f7ff, transparent); }

/* domeny: kafelki zamiast samych kresek, spięte z ramką wyszukiwarki pod nimi */
.domains { row-gap: var(--card-gap); }
.tld {
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgb(10 102 255 / .14);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tld:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(10 102 255 / .5); }
.tld__name { color: var(--navy); }

/* hosting: lista cen w jednej białej karcie */
#hosting .rows { background: #fff; border: 1px solid rgb(10 102 255 / .12); border-radius: var(--r-md); padding: 4px var(--s-5); }
#hosting .rows > li:last-child { border-bottom: 0; }

/* UI w ramkach: zaznaczenia w kolorze marki */
.ui-check.is-done .ui-check__box { background: var(--brand); }
.ui-stat__bars rect { fill: #cfdcf3; }

/* panel klienta: tło konsoli w błękicie zamiast szarości */
#panel .app > .app__pane--open { background: var(--ground-bg); }

/* nagłówek: cienka linia w kolorze marki */
.nav { border-bottom-color: rgb(10 102 255 / .12); }

/* ---------------------------------------------------------------- „Dane zostają w Warszawie”: granatowy pas */
#dane {
  --ink: #f4f7fc; --muted: #a8b6cc;
  --line: rgb(255 255 255 / .14);
  color: var(--ink);
  background:
    radial-gradient(50% 80% at 85% 20%, rgb(10 102 255 / .35), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgb(56 189 248 / .18), transparent 70%),
    var(--navy);
}
html main > #dane { padding: 80px 0; }
#dane .wrap { min-height: 0; }
#dane .statement-facts { margin-top: var(--s-8); padding-top: 0; }
#dane .statement-facts > div { border-top-color: rgb(56 189 248 / .45); }
#dane .statement-facts dt { color: #fff; }
#dane .statement-facts dd { color: var(--muted); }
#dane .section-head p { color: #c9d4e5; }
@media (max-width: 639px) { html main > #dane { padding: 56px 0; } }

/* ---------------------------------------------------------------- stopka */
html footer.footer--statement { padding: 80px 0 var(--s-6); }
.footer--statement .close__word {
  margin-top: var(--s-7);
  background: linear-gradient(90deg, var(--navy) 0%, var(--brand) 70%, var(--brand-sky) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer--statement .closing__links { margin-top: var(--s-7); }
@media (max-width: 639px) { html footer.footer--statement { padding-top: 56px; } }

/* ================================================================ kompresja strony głównej
   Mniej pustych pól: hero bez pełnego ekranu, kafelki oferty pod przyciskiem,
   ceny hostingu i domen jako kafelki obok ramek, ramki tak wysokie jak ich treść. */
:root { --gap-section: 44px; }
@media (max-width: 639px) { :root { --gap-section: 32px; } }

/* ---------------------------------------------------------------- hero */
html main > .hero { height: auto; min-height: 0; padding: var(--s-7) 0 var(--s-8); }
html main > .hero > .wrap { height: auto; display: block; }
.hero-offer { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hero-offer a {
  display: grid; gap: 2px; padding: 14px 16px; text-decoration: none; color: var(--navy);
  background: #fff; border: 1px solid rgb(10 102 255 / .14); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-offer a:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(10 102 255 / .5); }
.hero-offer span { font-size: var(--t-small); color: var(--muted); }
.hero-offer b { font-weight: 500; color: var(--brand); }
@media (min-width: 1024px) {
  .hero--triptych .hero__grid { grid-template-rows: 1fr auto auto auto 1fr; row-gap: 0; }
  .hero--triptych .hero__grid > :first-child { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
  .hero--triptych .hero__cta { grid-column: 1 / span 5; grid-row: 3; }
  .hero--triptych .hero-offer { grid-column: 1 / span 5; grid-row: 4; max-width: 440px; }
  .hero--triptych .ly-collage { grid-column: 6 / span 7; grid-row: 1 / -1; height: 540px; }
}
@media (max-width: 1023px) {
  .hero--triptych .ly-collage { flex: none; height: 420px; }
}
@media (max-width: 639px) {
  html main > .hero { padding: var(--s-5) 0 var(--s-6); }
  .hero--triptych .ly-collage { height: 300px; }
  .hero-offer a { padding: 12px; }
}

/* ---------------------------------------------------------------- hosting: plany jako kafelki 2 × 2 */
#hosting .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: none; border: 0; padding: 0; }
#hosting .rows > li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 16px;
  background: #fff; border: 1px solid rgb(10 102 255 / .14); border-radius: var(--r-md);
}
#hosting .rows > li:last-child { border-bottom: 1px solid rgb(10 102 255 / .14); }
#hosting .rows p { margin: 0; color: var(--muted); font-size: var(--t-small); grid-row: 2; }
#hosting .rows .rows__value { grid-row: 3; margin-top: 4px; }
#hosting .grid { align-items: center; }
#hosting .frame { height: 420px; }
#hosting .frame .at-rise { --ay: calc(50% - 135px); }
@media (max-width: 639px) { #hosting .frame { height: 340px; margin-top: var(--s-6); } #hosting .frame .at-rise { --ay: 24px; } }

/* ---------------------------------------------------------------- domeny: kafelki obok wyszukiwarki */
.domeny-split { margin-top: var(--head-gap); align-items: stretch; }
.domeny-split > .domains { grid-column: 1 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.domeny-split > .domains > .tld { grid-column: auto; }
.domeny-split > .domains__frame { grid-column: 7 / span 6; margin-top: 0; height: auto; min-height: 220px; }
@media (max-width: 1023px) {
  .domeny-split > .domains { grid-column: 1 / -1; }
  .domeny-split > .domains__frame { grid-column: 1 / -1; margin-top: 12px; height: 240px; }
}
@media (max-width: 479px) { .domeny-split > .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- funkcje: niższe panele */
#funkcje .panel { --p-h: 250px; }
@media (max-width: 639px) { #funkcje .panel { --p-h: 200px; } }

/* ---------------------------------------------------------------- „Dane zostają w Warszawie”: napis i fakty obok siebie */
html main > #dane { padding: 64px 0; }
@media (min-width: 1024px) {
  html main > #dane > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: center; }
  #dane .statement-facts { grid-template-columns: minmax(0, 1fr); margin: 0; gap: var(--s-5); }
}
#dane .mo-lt__type { font-size: clamp(44px, 6.4vw, 104px); }

/* ---------------------------------------------------------------- outsourcing: ramka czatu bez pustego dołu */
#outsourcing .grid { align-items: center; }
#outsourcing .frame { min-height: 0; height: 400px; --chat-body: 150px; }
@media (max-width: 639px) { #outsourcing .frame { min-height: 0; height: 340px; } }

/* ---------------------------------------------------------------- stopka: mniejszy napis marki */
html footer.footer--statement { padding-top: 64px; }
#contact .close__word, .footer--statement .close__word { font-size: clamp(48px, 8vw, 120px); margin-top: var(--s-6); }
.footer--statement .closing__links { margin-top: var(--s-6); }

/* poprawki po podglądzie */
html main > .hero { padding-top: calc(var(--nav-h, 72px) + var(--s-6)); }
@media (min-width: 1024px) { .hero--triptych .ly-collage { height: 580px; } }
.domeny-split > .domains { grid-auto-rows: 1fr; }
.domeny-split > .domains > .tld { align-content: center; }
.domeny-split > .domains__frame { min-height: 0; height: 260px; align-self: start; }
@media (min-width: 1024px) { .domeny-split > .domains { align-self: start; height: 260px; } }
#outsourcing .frame { height: 440px; }
/* nagłówek sekcji ma już własny odstęp: bez podwójnej przerwy nad tabelą i kafelkami */
#vps .ptable, .domeny-split { margin-top: 0; }
#dane .section-head { margin-bottom: 0; }
@media (max-width: 639px) { #panel .app.ui { height: 360px; } }
/* kafelki oferty w hero: równa wysokość w rzędzie, gdy tekst się zawija */
.hero-offer > li { display: grid; }
.hero-offer a { align-content: start; }
@media (max-width: 479px) { .hero-offer b { font-size: 15px; } .hero-offer span { font-size: 13px; } }

/* ================================================================ czcionka i rozmiary nagłówków
   Nagłówki w Plus Jakarta Sans (600), mniejsze niż wcześniej. */
:root {
  --t-h2: clamp(26px, 1.1vw + 18px, 36px);
  --ly-h1-side: clamp(32px, 1.6vw + 20px, 44px);
}
h1, h2, h3 { font-weight: var(--display-weight); }
.hero--triptych h1 { font-size: var(--ly-h1-side); line-height: 1.1; }
h2 { line-height: 1.15; }
.ly-collage .pc-big { font-weight: 600; font-size: 5.4cqw; }
.tld__name, .statement-facts dt { font-weight: 600; }
.footer__lede { font-weight: 500; }
#hosting .rows__name { font-weight: 600; }
.footer--statement .close__word { font-weight: 700; letter-spacing: -0.04em; }

/* ================================================================ „Dane zostają w Warszawie”: mniejszy napis, zdjęcie serwerowni w tle
   Zdjęcie: Taylor Vick, Unsplash (licencja Unsplash, bez wymogu podpisu). Powoli się przybliża i przesuwa. */
#dane .mo-lt__type { font-size: clamp(34px, 2.4vw + 18px, 54px); line-height: 1.08; max-width: 16ch; }
html main > #dane { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0; }
#dane::before, #dane::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#dane::before {
  inset: -6%;
  /* AVIF/WebP zamiast JPG (299 KB); na wąskich ekranach mniejsza wersja 900 px */
  background: url("../bg/serwerownia-1600.webp?v=53ad5bbadc") center / cover no-repeat;
  background-image: image-set(url("../bg/serwerownia-1600.avif?v=389e3f0635") type("image/avif"), url("../bg/serwerownia-1600.webp?v=53ad5bbadc") type("image/webp"));
  animation: dane-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
#dane::after {
  background:
    linear-gradient(90deg, rgb(11 18 32 / .94) 0%, rgb(11 18 32 / .78) 45%, rgb(11 18 32 / .55) 100%),
    radial-gradient(50% 80% at 85% 20%, rgb(10 102 255 / .35), transparent 70%);
}
@keyframes dane-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-2.5%, -2%, 0); }
}
@media (max-width: 900px) {
  #dane::before {
    background-image: url("../bg/serwerownia-900.webp?v=afc9b5f0f1");
    background-image: image-set(url("../bg/serwerownia-900.avif?v=cc2f3726d2") type("image/avif"), url("../bg/serwerownia-900.webp?v=afc9b5f0f1") type("image/webp"));
  }
}
@media (prefers-reduced-motion: reduce) { #dane::before { animation: none; } }
@media (max-width: 639px) { html main > #dane { padding: 56px 0; } }
h1, h2, .mo-lt__type { letter-spacing: -0.012em; word-spacing: 0.04em; }
@media (min-width: 1024px) { .hero--triptych .hero__lead { max-width: 44ch; } }

/* ================================================================ schemat sieci LAN (zwykły HTML + SVG, bez JavaScriptu)
   Węzły w procentach panelu, linie w SVG rozciągniętym na cały panel, po liniach płyną „pakiety”. */
.lan {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgb(10 102 255 / .14) 0 60px, transparent 61px),
    repeating-radial-gradient(circle at 50% 52%, transparent 0 46px, rgb(10 102 255 / .10) 47px 48px);
}
.lan__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lan__lines path { fill: none; stroke: rgb(10 102 255 / .35); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lan__lines .lan__flow {
  stroke: var(--brand); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 6 94;
  animation: lan-flow 2.4s linear infinite;
}
.lan__lines .lan__flow--out { stroke: var(--brand-sky); }
@keyframes lan-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.lan__hub, .lan__node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 500 14px/1 var(--font-text); color: var(--navy);
}
.lan__node {
  padding: 8px 12px 8px 8px; background: #fff; border: 1px solid rgb(10 102 255 / .16); border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgb(11 18 32 / .45);
}
.lan__node img, .lan__hub img { width: 18px; height: 18px; flex: none; }
.lan__hub {
  padding: 12px 18px; color: #fff; font-weight: 600; font-size: 15px; border-radius: 14px;
  background: linear-gradient(160deg, #1b2b4d 0%, #0b1220 75%);
  box-shadow: 0 0 0 6px rgb(10 102 255 / .14), 0 14px 32px -12px rgb(11 18 32 / .7);
  animation: lan-pulse 2.4s ease-in-out infinite;
}
.lan__hub img { filter: invert(1); }
@keyframes lan-pulse { 50% { box-shadow: 0 0 0 10px rgb(10 102 255 / .08), 0 14px 32px -12px rgb(11 18 32 / .7); } }
@media (max-width: 479px) {
  .lan__node { font-size: 12px; padding: 6px 9px 6px 6px; gap: 6px; }
  .lan__node img { width: 15px; height: 15px; }
  .lan__hub { font-size: 13px; padding: 9px 13px; }
}
@media (prefers-reduced-motion: reduce) { .lan__lines .lan__flow, .lan__hub { animation: none; } .lan__lines .lan__flow { display: none; } }

/* ================================================================ tło strony: zamiast płaskiej bieli
   Delikatny błękitny gradient, sieć „siec-impuls” jak na logowaniu do panelu i cienka siatka,
   która znika ku środkowi ekranu. Kolory te same co w logo. */
html body {
  background:
    radial-gradient(60% 40% at 100% 0%, rgb(56 189 248 / .10), transparent 70%),
    radial-gradient(50% 35% at 0% 45%, rgb(10 102 255 / .07), transparent 70%),
    linear-gradient(180deg, #f4f7fc 0%, #eaf1fb 40%, #f2f6fc 70%, #e9f0fa 100%);
  background-attachment: fixed;
}
html body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("../bg/siec-impuls.svg?v=844b0dec61") 0 0 / 400px 400px repeat,
    linear-gradient(rgb(10 102 255 / .05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(10 102 255 / .05) 1px, transparent 1px) 0 0 / 48px 48px;
  opacity: .4;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, rgb(0 0 0 / .35) 0%, #000 75%);
          mask-image: radial-gradient(120% 90% at 50% 40%, rgb(0 0 0 / .35) 0%, #000 75%);
}
main > .hero { background: none; }
/* co druga sekcja na jaśniejszym pasie, żeby było widać, gdzie się zaczyna i kończy */
html main > :is(#domeny, #funkcje, #outsourcing) {
  background: linear-gradient(180deg, rgb(255 255 255 / .62), rgb(255 255 255 / .38));
  border-block: 1px solid rgb(10 102 255 / .08);
}
/* rozmycie pod paskiem tylko na komputerze: na telefonie backdrop-filter psuł rozwijane menu (fixed liczony od paska) */
@media (min-width: 1024px) { .nav { background: rgb(246 248 251 / .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } }

/* ================================================================ menu w pastylkach, jak przycisk „Załóż konto” */
@media (min-width: 1024px) {
  .nav__links { gap: 8px; }
  .nav .nav__links .nav__link, .nav .nav__actions > .nav__link {
    height: 40px; padding: 0 16px; border-radius: 999px;
    background: #fff; color: var(--navy);
    border: 1px solid rgb(10 102 255 / .16);
    box-shadow: 0 2px 8px -4px rgb(11 18 32 / .25);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav .nav__link::before, .nav .nav__link[aria-current="page"]::after { display: none; }
  .nav .nav__links .nav__link:hover, .nav .nav__item:hover > .nav__link, .nav .nav__item:focus-within > .nav__link,
  .nav .nav__actions > .nav__link:hover {
    background: var(--brand-tint); border-color: rgb(10 102 255 / .4); color: var(--brand-deep); transform: translateY(-1px);
  }
  .nav .nav__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__links { gap: 6px; }
  .nav .nav__links .nav__link, .nav .nav__actions > .nav__link { padding: 0 12px; font-size: 14px; }
}
/* napis „chmura.tech” w stopce: jeszcze mniejszy */
#contact .close__word, .footer--statement .close__word { font-size: clamp(34px, 3.6vw + 10px, 64px); margin-top: var(--s-5); }
.footer--statement .close__word { display: inline-block; padding-bottom: .06em; }
.footer--statement .close__word { width: fit-content; align-self: flex-start; }

/* ================================================================ hero: karta vps-web-1 w stylu „cyber”
   Świecąca, obracająca się ramka, siatka i linia skanowania w tle, pulsujący status,
   wykres z poświatą, segmentowe paski zasobów i konsola z kursorem. Wszystko w cqw kolażu. */
.ly-collage .ly-piece.pc-cyber {
  background: #060b16 !important; border-color: transparent !important; isolation: isolate;
  box-shadow: 0 0 0 1px rgb(56 189 248 / .22), 0 0 46px -10px rgb(10 102 255 / .7), 0 30px 60px -30px rgb(0 0 0 / .75) !important;
  gap: 2cqw;
}
.pc-cyber::before {
  content: ""; position: absolute; inset: -60%; z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 62%, rgb(10 102 255 / .9) 74%, #38bdf8 82%, #5eead4 86%, transparent 94%);
  animation: cy-spin 7s linear infinite;
}
.pc-cyber::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: calc(2.2cqw - 1.5px);
  background:
    linear-gradient(180deg, transparent, rgb(56 189 248 / .10) 50%, transparent) 0 -40% / 100% 28% no-repeat,
    linear-gradient(rgb(56 189 248 / .07) 1px, transparent 1px) 0 0 / 2.6cqw 2.6cqw,
    linear-gradient(90deg, rgb(56 189 248 / .07) 1px, transparent 1px) 0 0 / 2.6cqw 2.6cqw,
    radial-gradient(80% 55% at 100% 0%, rgb(10 102 255 / .38), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgb(94 234 212 / .10), transparent 65%),
    linear-gradient(160deg, #0c1a36 0%, #060b16 75%);
  animation: cy-scan 5.5s linear infinite;
}
@keyframes cy-spin { to { transform: rotate(1turn); } }
@keyframes cy-scan {
  from { background-position: 0 -40%, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 140%, 0 0, 0 0, 0 0, 0 0, 0 0; }
}
.cy-top { display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  font: 500 max(11px, 1.55cqw)/1 var(--font-mono); letter-spacing: .14em; color: #8fb4e6; }
.cy-live { display: inline-flex; align-items: center; gap: 1cqw; color: #5eead4; }
.cy-live i { width: max(7px, 1.1cqw); height: max(7px, 1.1cqw); border-radius: 50%; background: #22c55e; animation: cy-ping 1.8s ease-out infinite; }
@keyframes cy-ping { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .7); } 100% { box-shadow: 0 0 0 1.6cqw rgb(34 197 94 / 0); } }
.cy-tag { padding: .7cqw 1.4cqw; border: 1px solid rgb(56 189 248 / .35); border-radius: 99px; color: #bfe3ff; background: rgb(10 102 255 / .12); }
.cy-name { display: grid; gap: .8cqw; }
.ly-collage .pc-cyber .pc-big { color: #fff; text-shadow: 0 0 2.4cqw rgb(56 189 248 / .55); }
.cy-os { font: max(11px, 1.55cqw)/1.2 var(--font-mono); color: #8fa6c8; }
.cy-chart { position: relative; display: block; height: 11cqw; }
.cy-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cy-line { stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px #38bdf8); animation: cy-draw 6s ease-in-out infinite; }
@keyframes cy-draw { 0% { stroke-dashoffset: 100; } 40%, 100% { stroke-dashoffset: 0; } }
.cy-dot { position: absolute; right: 0; top: 27.5%; width: max(8px, 1.3cqw); height: max(8px, 1.3cqw); border-radius: 50%;
  transform: translate(50%, -50%); background: #5eead4; box-shadow: 0 0 1.4cqw #5eead4; animation: cy-ping-t 1.8s ease-out infinite; }
@keyframes cy-ping-t { 0% { box-shadow: 0 0 0 0 rgb(94 234 212 / .8), 0 0 1.4cqw #5eead4; } 100% { box-shadow: 0 0 0 1.8cqw rgb(94 234 212 / 0), 0 0 1.4cqw #5eead4; } }
.cy-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; padding-top: 1.8cqw; border-top: 1px solid rgb(56 189 248 / .18); }
.cy-m { display: grid; gap: .9cqw; min-width: 0; }
.cy-m > span { font: 500 max(10px, 1.4cqw)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #7f97bb; }
.cy-m > b { font: 500 max(12px, 1.9cqw)/1 var(--font-mono); color: #e6f1ff; white-space: nowrap; }
.cy-m > i { display: block; height: max(5px, .9cqw); border-radius: 2px;
  background: linear-gradient(90deg, #0a66ff, #38bdf8, #5eead4) 0 0 / calc(var(--v) * 100%) 100% no-repeat, rgb(56 189 248 / .14);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7%, transparent 7% 9.5%); mask: repeating-linear-gradient(90deg, #000 0 7%, transparent 7% 9.5%);
  transition: background-size .9s ease; }
.cy-cmd { font: max(11px, 1.6cqw)/1 var(--font-mono); color: #cfe6ff; padding: 1.3cqw 1.6cqw;
  background: rgb(2 6 14 / .65); border: 1px solid rgb(56 189 248 / .18); border-radius: 1.2cqw; white-space: nowrap; overflow: hidden; }
.cy-cmd > span { color: #5eead4; }
.cy-caret { display: inline-block; width: .9cqw; min-width: 6px; height: 1.8cqw; min-height: 11px; background: #5eead4; vertical-align: -.25em; margin-left: .6cqw; animation: cy-blink 1s steps(1) infinite; }
@keyframes cy-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pc-cyber::before, .pc-cyber::after, .cy-live i, .cy-line, .cy-dot, .cy-caret { animation: none; }
}
.cy-tag, .cy-live { white-space: nowrap; }
.cy-os { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) { .cy-tag { letter-spacing: .06em; padding: 2px 6px; } .cy-top { letter-spacing: .08em; } }

/* hero: karty hostingu i poczty w tym samym stylu co vps-web-1 */
.pc-cyber--b::before { animation-duration: 9s; animation-direction: reverse; }
.pc-cyber--c::before { animation-duration: 11s; }
.pc-cyber--b::after { animation-delay: -2s; }
.pc-cyber--c::after { animation-delay: -3.5s; }
.cy-title { font: 600 3.6cqw/1.1 var(--font-display); letter-spacing: -0.01em; color: #fff; text-shadow: 0 0 2cqw rgb(56 189 248 / .5); white-space: nowrap; }
.cy-checks { display: grid; gap: 1.1cqw; padding-block: .4cqw; }
.cy-checks > span { display: flex; align-items: center; gap: 1.2cqw; font: max(12px, 1.75cqw)/1.2 var(--font-text); color: #dbeafe; }
.cy-checks i { flex: none; width: max(14px, 2.2cqw); height: max(14px, 2.2cqw); border-radius: 50%;
  background: rgb(94 234 212 / .14); box-shadow: inset 0 0 0 1px rgb(94 234 212 / .55); position: relative; }
.cy-checks i::after { content: ""; position: absolute; left: 34%; top: 22%; width: 26%; height: 46%;
  border: solid #5eead4; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pc-cyber > .cy-m { padding-top: 1.6cqw; border-top: 1px solid rgb(56 189 248 / .18); }
.cy-mail { display: grid; gap: 1cqw; }
.cy-mail__row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  padding: 1.3cqw 1.6cqw; border-radius: 1.2cqw; background: rgb(10 102 255 / .10); border: 1px solid rgb(56 189 248 / .16); }
.cy-mail__row b { font: 500 max(12px, 1.9cqw)/1.2 var(--font-mono); color: #e6f1ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-new { flex: none; font: 600 max(11px, 1.55cqw)/1 var(--font-mono); color: #04121f; background: #5eead4;
  padding: .7cqw 1.3cqw; border-radius: 99px; animation: cy-ping-t 1.8s ease-out infinite; }
.cy-ok { flex: none; font: 500 max(11px, 1.55cqw)/1 var(--font-mono); color: #5eead4; }
@media (prefers-reduced-motion: reduce) { .cy-new { animation: none; } }
@media (min-width: 1024px) { .hero--triptych .ly-collage { height: 640px; } }

/* hero: każda karta w innym, jaśniejszym odcieniu (VPS zostaje granatowo-błękitny)
   --b hosting: jasny szmaragd, --c poczta: jasny niebieski */
.pc-cyber--b { --a1: #22f0a0; --a2: #8dffd2; --a3: #19d3c5; --g: rgb(141 255 210 / .10); --bg1: #0f6e58; --bg2: #073b31; --glow: rgb(34 240 160 / .65); --dim: #c9fbe8; }
.pc-cyber--c { --a1: #2fc6ff; --a2: #9ee9ff; --a3: #4f8dff; --g: rgb(158 233 255 / .10); --bg1: #1b5fd8; --bg2: #0a2a72; --glow: rgb(47 198 255 / .65); --dim: #d3ecff; }
.ly-collage .ly-piece:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) {
  background: var(--bg2) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--a1) 35%, transparent), 0 0 46px -10px var(--glow), 0 30px 60px -30px rgb(0 0 0 / .6) !important;
}
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d)::before {
  background: conic-gradient(from 0deg, transparent 0 62%, var(--a3) 74%, var(--a1) 82%, var(--a2) 86%, transparent 94%);
}
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d)::after {
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--a2) 14%, transparent) 50%, transparent) 0 -40% / 100% 28% no-repeat,
    linear-gradient(var(--g) 1px, transparent 1px) 0 0 / 2.6cqw 2.6cqw,
    linear-gradient(90deg, var(--g) 1px, transparent 1px) 0 0 / 2.6cqw 2.6cqw,
    radial-gradient(80% 55% at 100% 0%, color-mix(in srgb, var(--a1) 38%, transparent), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--a2) 16%, transparent), transparent 65%),
    linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 80%);
}
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-top { color: var(--dim); }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-live { color: var(--a2); }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-tag { border-color: color-mix(in srgb, var(--a1) 50%, transparent); background: color-mix(in srgb, var(--a1) 16%, transparent); color: #fff; }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-title { text-shadow: 0 0 2cqw color-mix(in srgb, var(--a1) 60%, transparent); }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-os, :is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-m > span { color: var(--dim); }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) > .cy-m, :is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-metrics { border-top-color: color-mix(in srgb, var(--a1) 28%, transparent); }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-m > i { background: linear-gradient(90deg, var(--a3), var(--a1), var(--a2)) 0 0 / calc(var(--v) * 100%) 100% no-repeat, color-mix(in srgb, var(--a1) 18%, transparent); }
.pc-cyber--b .cy-checks > span { color: #e6fff6; }
.pc-cyber--b .cy-checks i { background: color-mix(in srgb, var(--a1) 20%, transparent); box-shadow: inset 0 0 0 1px var(--a1); }
.pc-cyber--b .cy-checks i::after { border-color: var(--a2); }
.pc-cyber--c .cy-mail__row { background: color-mix(in srgb, var(--a1) 14%, transparent); border-color: color-mix(in srgb, var(--a1) 30%, transparent); }
.pc-cyber--c .cy-mail__row b { color: #fff; }
.pc-cyber--c .cy-new { background: linear-gradient(90deg, var(--a1), var(--a2)); color: #082f49; animation-name: cy-ping-v; }
@keyframes cy-ping-v { 0% { box-shadow: 0 0 0 0 rgb(186 230 253 / .85); } 100% { box-shadow: 0 0 0 1.8cqw rgb(186 230 253 / 0); } }
.pc-cyber--c .cy-ok { color: var(--a2); }
.pc-cyber--c .cy-cmd { background: rgb(8 37 74 / .5); border-color: color-mix(in srgb, var(--a1) 35%, transparent); color: #f0f9ff; }
.pc-cyber--c .cy-cmd > span { color: var(--a2); }

/* hosting i poczta: mocniejsze, czytelne napisy na nasyconym tle */
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-top { font-weight: 600; }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-os, :is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-m > span { color: var(--dim); font-weight: 500; }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-m > b { color: #fff; font-weight: 600; }
:is(.pc-cyber--b, .pc-cyber--c, .pc-cyber--d) .cy-tag { font-weight: 600; text-shadow: 0 0 1cqw color-mix(in srgb, var(--a1) 70%, transparent); }
.pc-cyber--b .cy-checks > span { color: #fff; font-weight: 500; }
.pc-cyber--c .cy-mail__row { background: rgb(4 18 52 / .45); border-color: color-mix(in srgb, var(--a1) 45%, transparent); }
.pc-cyber--c .cy-ok { color: var(--a2); font-weight: 600; }
.pc-cyber--c .cy-cmd { background: rgb(4 18 52 / .55); color: #fff; }
.pc-cyber--c .cy-new { color: #03213f; font-weight: 700; }
/* hosting: cena w tej samej kolumnie co opis (na telefonie opis łamał się słowo po słowie) */
#hosting .rows > li > p, #hosting .rows .rows__value { grid-column: 1; }
#hosting .rows .rows__value { max-width: none; white-space: nowrap; }

/* ================================================================ hero: kolorowe kafelki oferty
   Każda usługa w swoim kolorze (--c), kolorowa ikonka, delikatne tło w tym kolorze,
   mocniejsza cena, przesuwający się błysk co kilka sekund i poświata po najechaniu. */
@media (min-width: 1024px) { .hero--triptych .hero-offer { max-width: 520px; } }
.hero-offer a {
  position: relative; overflow: hidden; isolation: isolate;
  grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #fff) 0%, #fff 72%);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--c) 80%, transparent);
}
.hero-offer a::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .85) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
  animation: ho-shine 6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes ho-shine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.hero-offer a:hover { border-color: var(--c); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c) 90%, transparent); }
.ho-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
  box-shadow: 0 6px 14px -6px var(--c), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform var(--dur) var(--ease);
}
.hero-offer a:hover .ho-ico { transform: rotate(-6deg) scale(1.06); }
.ho-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ho-txt { display: grid; gap: 2px; min-width: 0; }
.hero-offer .ho-txt > span { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-offer .ho-txt > b { font-size: 15.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 78%, #0b1220); }
@media (max-width: 479px) {
  .hero-offer a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .ho-ico { width: 32px; height: 32px; border-radius: 9px; }
  .ho-ico svg { width: 17px; height: 17px; }
  .hero-offer .ho-txt > span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .hero-offer a::after { animation: none; } }
/* kafelki oferty: lżejsze cienie i delikatniejsze cieniowanie tła */
.hero-offer a {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 11%, #fff) 0%, #fff 70%);
  box-shadow: 0 6px 14px -12px color-mix(in srgb, var(--c) 60%, transparent);
}
.hero-offer a:hover { box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--c) 75%, transparent); }
.ho-ico { box-shadow: 0 3px 8px -5px var(--c), inset 0 1px 0 rgb(255 255 255 / .35); }

/* ================================================================ hero, zestawy 2 i 3 w stylu „cyber”
   --d: domeny w indygo/fiolecie (jak kafelek „Domeny”). Nowe elementy: pasek instalacji, kłódka SSL,
   wyszukiwarka z kursorem, rekordy DNS. */
.pc-cyber--d { --a1: #8b9cff; --a2: #d4dbff; --a3: #b18cff; --g: rgb(212 219 255 / .10); --bg1: #3a3cc0; --bg2: #19186a; --glow: rgb(139 156 255 / .65); --dim: #dfe3ff; }
.pc-cyber--d .cy-mail__row { background: rgb(10 8 50 / .45); border-color: color-mix(in srgb, var(--a1) 45%, transparent); }
.pc-cyber--d .cy-mail__row b { color: #fff; }
.pc-cyber--d .cy-ok { color: var(--a2); font-weight: 600; }
.pc-cyber--b .cy-mail__row b, .pc-cyber .cy-mail__row b em, .cy-mail__row b em { font-style: normal; }
.cy-mail__row b em { color: var(--a2, #5eead4); }
.pc-cyber .cy-m > b { white-space: nowrap; }

/* pasek instalacji WordPressa: wypełnia się w pętli */
.cy-prog { display: grid; gap: 1cqw; }
.cy-prog > span { display: flex; justify-content: space-between; font: 500 max(11px, 1.6cqw)/1 var(--font-mono); color: var(--dim, #8fb4e6); }
.cy-prog b { color: #fff; font-weight: 600; }
.cy-prog em { font-style: normal; color: var(--a2, #5eead4); }
.cy-prog > i { display: block; height: max(6px, 1cqw); border-radius: 99px; background: color-mix(in srgb, var(--a1, #38bdf8) 18%, transparent); position: relative; overflow: hidden; }
.cy-prog > i::after { content: ""; position: absolute; inset: 0; width: 100%; transform-origin: left; border-radius: inherit;
  background: linear-gradient(90deg, var(--a3, #0a66ff), var(--a1, #38bdf8), var(--a2, #5eead4));
  box-shadow: 0 0 1.2cqw var(--a1, #38bdf8); animation: cy-fill 3.2s ease-in-out infinite; }
@keyframes cy-fill { 0% { transform: scaleX(.05); } 70%, 100% { transform: scaleX(1); } }

/* kłódka SSL przy https:// */
.cy-lock { display: flex; align-items: center; gap: 1.6cqw; }
.cy-lock svg { flex: none; width: 5cqw; height: 5cqw; fill: none; stroke: #5eead4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .8cqw rgb(94 234 212 / .7)); }
.ly-collage .cy-lock .pc-big { font-size: 5cqw; color: #fff; text-shadow: 0 0 2.4cqw rgb(56 189 248 / .55); }

/* wyszukiwarka domen */
.cy-search { display: flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 1.6cqw; border-radius: 1.2cqw;
  font: 500 max(12px, 2cqw)/1 var(--font-mono); color: #fff;
  background: rgb(10 8 50 / .55); border: 1px solid color-mix(in srgb, var(--a1, #38bdf8) 55%, transparent);
  box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--a1, #38bdf8) 14%, transparent); }
.cy-search svg { width: 2.4cqw; height: 2.4cqw; min-width: 13px; min-height: 13px; fill: none; stroke: var(--a2, #5eead4); stroke-width: 2.2; stroke-linecap: round; }
.cy-search .cy-caret { background: var(--a2, #5eead4); margin-left: .2cqw; }

/* rekordy DNS */
.cy-dns { display: grid; gap: .9cqw; }
.cy-dns > span { display: grid; grid-template-columns: 9cqw 7cqw minmax(0, 1fr); align-items: center; gap: 1.4cqw;
  padding: 1.1cqw 1.6cqw; border-radius: 1.2cqw; background: rgb(2 6 14 / .5); border: 1px solid rgb(56 189 248 / .18);
  font: 500 max(11px, 1.75cqw)/1 var(--font-mono); color: #cfe6ff; }
.cy-dns b { color: #5eead4; font-weight: 600; }
.cy-dns em { font-style: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .cy-prog > i::after { animation: none; transform: scaleX(.72); } }
.pc-cyber--c .cy-cmd { margin-top: .2cqw; }

/* ---------------------------------------------------------------- domeny: prawdziwa wyszukiwarka nad kafelkami */
.dsearch { margin-top: var(--head-gap); display: grid; gap: var(--s-3); max-width: 760px; }
.dsearch__label { font-weight: 600; color: var(--navy); }
.dsearch__field { display: flex; align-items: center; gap: var(--s-3); padding: 8px 8px 8px var(--s-4);
  background: #fff; border: 1px solid rgb(10 102 255 / .22); border-radius: var(--r-md);
  box-shadow: 0 10px 26px -18px rgb(10 102 255 / .55);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.dsearch__field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgb(10 102 255 / .14), 0 10px 26px -18px rgb(10 102 255 / .55); }
.dsearch__ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; }
.dsearch input[type=text] { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent;
  font: 500 18px/1 var(--font-mono, monospace); color: var(--navy); }
.dsearch input[type=text]::placeholder { color: #94a3b8; }
.dsearch .btn { flex: none; }
.dsearch__hint { font-size: var(--t-small); color: var(--muted); }
.dsearch__hint.is-error { color: #c2410c; }
.domeny-split { margin-top: var(--s-6); }
.tld__base { display: block; margin-bottom: 2px; font: 500 13px/1.3 var(--font-mono, monospace); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479px) {
  .dsearch__field { flex-wrap: wrap; padding: 8px; }
  .dsearch__ico { margin-left: 8px; }
  .dsearch .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- przenosiny za darmo: trzy kroki */
.move-steps { list-style: none; margin: var(--head-gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.move-step { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6) var(--s-5);
  background: linear-gradient(160deg, var(--brand-tint) 0%, #fff 60%); border: 1px solid rgb(10 102 255 / .14); border-radius: var(--r-md); }
.move-step .step-num { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.move-step h3 { font-size: var(--t-lead); color: var(--navy); }
.move-step p { color: var(--ink); }
.move-step a { color: var(--brand); }
.move-cta { margin-top: var(--s-6); gap: var(--s-5); }
@media (max-width: 1023px) { .move-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- częste pytania */
#pytania .section-head { align-content: start; }
#pytania .section-head a { color: var(--brand); }
#pytania .faq h3 { color: var(--navy); font-weight: 600; }
@media (max-width: 1023px) { #pytania .faq { grid-column: 1 / -1; margin-top: var(--s-5); } }
.tld.is-picked { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(10 102 255 / .14); }
.domains > .tld { min-width: 0; }
.domains .tld__name { min-width: 0; max-width: 100%; }