/*
 * Strona główna (templates/main.html + templates/fragments/home/*).
 * Kolory i cienie wyłącznie z tokens.css. Klasy z prefiksem home-, żeby nie
 * kolidowały ze starymi stylami (dawne main.css, mobile.css).
 */


/* ---------- reguły przeniesione z main.css (ładowane przed resztą tego pliku) ---------- */

#transferService {
    background: #fff;
    padding-top: 150px;
    padding-bottom: 55px;
}

/* ---------- koniec reguł przeniesionych ---------- */

/* ---------- układ ---------- */

.home {
    color: var(--h24-text);
    font-size: 15px;
    line-height: 1.65;
}

.home-container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1400px) { .home-container { max-width: 1200px; } }
@media (max-width: 1240px) { .home-container { max-width: 1000px; } }
@media (max-width: 1060px) { .home-container { width: calc(100% - 40px); } }

.home-section {
    padding: 60px 0;
}

.home-section--white {
    position: relative;
    background: var(--h24-card-bg);
}

/* duża fala w kolorze tła strony (#f5f6fa) spływająca z sekcji cech na gradient sekcji migracji i domen */
.home-section--wave-big {
    --wave-big-height: 160px;
    position: relative;
    padding-top: calc(60px + var(--wave-big-height));
    background: linear-gradient(to bottom, transparent calc(var(--wave-big-height) - 1px), var(--h24-card-bg) calc(var(--wave-big-height) - 1px));
}

.home-section--wave-big::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--wave-big-height);
    background: var(--h24-page-bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 C1180,135 960,125 700,70 C420,10 180,40 0,150 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,40 C1180,135 960,125 700,70 C420,10 180,40 0,150 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}

/* stary main.css i stary mobile.css nadają #transferService białe tło i własne odstępy (stary mobile.css z !important) */
.home #transferService.home-section--wave-big {
    padding-top: calc(60px + var(--wave-big-height)) !important;
    padding-bottom: 60px !important;
    background: linear-gradient(to bottom, transparent calc(var(--wave-big-height) - 1px), var(--h24-card-bg) calc(var(--wave-big-height) - 1px)) !important;
}

/* jeden gradient na obie sekcje (przeniesienie i domeny), także pod dużą falą */
.home-duo {
    /* dolne 200 px przechodzi w biel na całej szerokości: łączy się bez krawędzi z białą falą pod spodem
       (sam gradient 165° przy lewej krawędzi nie dochodzi do bieli na dole) */
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 200px), #fff 100%),
        linear-gradient(165deg, #fff 18%, #f4f2fd 46%, #fff 72%);
}

.home #transferService.home-section--wave-big {
    background: none !important;
}

/* biała sekcja zaraz po innej białej: bez fali u góry */
.home-section--joined::before {
    display: none;
}

/* fale na styku białej sekcji z szarym tłem strony; kolor z maski, więc zadziała też w ciemnym motywie */
.home-section--white::before,
.home-section--white::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--h24-card-bg);
    -webkit-mask: var(--home-wave) center / 100% 100% no-repeat;
    mask: var(--home-wave) center / 100% 100% no-repeat;
    pointer-events: none;
}

/* sekcja domen pod sekcją przeniesienia: tło z .home-duo, oddzielona linią 1px; na dole biała fala do szarego tła */
.home-section--domains {
    border-top: 1px solid var(--h24-border);
    background: none;
}

.home-section--white::before {
    --home-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,62 480,4 720,18 C960,32 1200,62 1440,26 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
    bottom: calc(100% - 1px);
}

.home-section--white::after {
    --home-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,26 C1200,58 960,6 720,22 C480,38 240,2 0,34 Z'/%3E%3C/svg%3E");
    top: calc(100% - 1px);
}

/* fala pod sekcją domen (nad poradnikami): wyższa, z kilkoma wybrzuszeniami */
.home-section--domains::after {
    --home-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 C1340,85 1200,95 1060,60 C920,25 820,10 680,45 C540,80 420,100 280,70 C160,45 70,30 0,55 Z'/%3E%3C/svg%3E");
    height: 100px;
}

/* poradniki pod falą domen: dodatkowy odstęp, żeby fala nie zachodziła na pigułkę */
.home-duo + .home-section {
    padding-top: 130px;
}

/* sekcja w kolorze tła strony oddzielona od poprzedniej linią (FAQ pod poradnikami) */
.home-section--bordered {
    border-top: 1px solid var(--h24-border);
}

/* kotwice (#hostingPriceList, #transferService...) nie chowają się pod przyklejonym menu */
.home [id] {
    scroll-margin-top: 100px;
}

/* sekcja z dużą falą: kotwica przewija do treści (nagłówka), a nie do górnej krawędzi fali */
.home .home-section--wave-big[id] {
    scroll-margin-top: calc(60px - var(--wave-big-height));
}

.home-section__header {
    max-width: 760px;
    margin-bottom: 32px;
}

.home-section__header--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.home h1,
.home h2,
.home h3 {
    color: var(--h24-heading);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.home h2 {
    font-size: 30px;
    margin-bottom: 12px;
}

.home h3 {
    font-size: 18px;
}

.home p {
    margin: 0;
}

.home-lead {
    font-size: 16px;
}

.home a:not(.home-btn) {
    color: var(--h24-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--h24-transition);
}

.home a:not(.home-btn):hover {
    color: var(--h24-heading);
}

/* link ze strzałką: bez podkreślenia, po najechaniu linia rysuje się od lewej do prawej */
.home a.home-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--h24-brand);
    font-weight: 700;
    text-decoration: none;
}

.home a.home-link-arrow > span {
    padding-bottom: 2px;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: background-size .35s ease;
}

.home a.home-link-arrow:hover {
    color: var(--h24-brand);
}

.home a.home-link-arrow:hover > span {
    background-size: 100% 1px;
}

.home a.home-link-arrow > i {
    font-size: .9em;
    transition: transform var(--h24-transition);
}

.home a.home-link-arrow:hover > i {
    transform: translateX(3px);
}

/* linki w tekście (boksy, FAQ): jak .home-link-arrow, bez podkreślenia, linia od lewej do prawej po najechaniu */
.home p a:not([class]) {
    text-decoration: none;
    padding-bottom: 2px;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: background-size .35s ease;
}

.home p a:not([class]):hover {
    color: var(--h24-brand);
    background-size: 100% 1px;
}

/* stary styles.css globalnie wyłącza outline; przywracamy widoczny fokus z klawiatury */
.home a:focus-visible,
.home button:focus-visible,
.home summary:focus-visible,
.home input:focus-visible {
    outline: 3px solid var(--h24-brand) !important;
    outline-offset: 3px;
}

.home-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- przyciski ---------- */

/* buttons.css ustawia button { font-weight: 400 !important; border-radius: 5px !important } */
.home .home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--h24-radius-small) !important;
    background: var(--h24-brand);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700 !important;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--h24-shadow-button);
    transition: box-shadow var(--h24-transition), background var(--h24-transition), color var(--h24-transition), border-color var(--h24-transition) !important;
}

.home .home-btn:hover {
    box-shadow: none;
}

.home .home-btn i {
    margin: 0;
}

/* przyciski w nagłówku strony głównej i programu partnerskiego: Comfortaa ma litery optycznie wyżej, więc tekst 2 px niżej, ikona na środku */
.home .home-hero__actions--main .home-btn {
    padding-top: 2px;
}

.home .home-hero__actions--main .home-btn i {
    position: relative;
    top: -2px;
}

.home .home-btn--turquoise {
    background: var(--h24-turquoise);
    box-shadow: var(--h24-shadow-button-turquoise);
}

.home .home-btn--turquoise:hover {
    box-shadow: none;
}

.home .home-btn--light {
    background: var(--h24-active-bg);
    color: var(--h24-brand);
    box-shadow: none;
}

.home .home-btn--light:hover {
    background: var(--h24-icon-bg);
}

.home-pill {
    display: inline-block;
    width: fit-content; /* stare style nadają tu display: block */
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--h24-active-bg);
    color: var(--h24-brand);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--h24-icon-bg);
    color: var(--h24-brand);
    font-size: 22px;
}

/* kolorowe warianty ikon (pasek faktów) */
.home-icon--turquoise { background: var(--h24-tag-bg); color: var(--h24-turquoise); }
.home-icon--violet    { background: var(--h24-icon-bg);   color: var(--h24-brand); }
.home-icon--pink      { background: var(--h24-pink-bg);   color: var(--h24-pink); }
.home-icon--blue      { background: var(--h24-blue-bg);   color: var(--h24-blue); }

.home-card {
    background: var(--h24-card-bg);
    border-radius: var(--h24-radius);
    box-shadow: var(--h24-shadow);
    transition: transform var(--h24-transition), box-shadow var(--h24-transition);
}

.home-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--h24-shadow-hover);
}

/* ---------- hero ---------- */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 125px 0 60px; /* 75 px menu + 50 px do etykiety */
}

.home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: 40px;
}

/* odstęp etykieta → H1 jak w /pomoc i /blog: 14 px od dołu pigułki do H1 (bez margin-top), interlinia 1.3 */
.home-hero h1 {
    font-size: 44px;
    line-height: 1.3;
}

/* pigułka nad H1 jako element blokowy, żeby wiersz tekstu wokół niej nie dokładał wysokości */
.home-hero .home-pill--icon {
    display: flex;
    width: fit-content;
}

.home-hero h1 .home-accent {
    color: var(--h24-turquoise);
}

.home-hero .home-lead {
    margin-top: 12px;
    max-width: 640px;
}

.home-lead strong {
    color: var(--h24-heading);
}

.home-lead .home-lead__title {
    display: block;
    margin-bottom: 2px;
}

/* wyszukiwarka jak .h24-hub-search w /pomoc i /blog */
.home-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 726px;
    height: 58px;
    margin-top: 24px;
    padding: 6px 6px 6px 18px;
    box-sizing: border-box;
    background: var(--h24-card-bg);
    border: 1px solid var(--h24-search-border);
    border-radius: 12px;
    box-shadow: var(--h24-shadow-search);
    transition: box-shadow var(--h24-transition);
}

.home-search:focus-within {
    box-shadow: 0 0 0 3px rgba(101, 86, 231, .18), var(--h24-shadow-search);
}

.home-search > i {
    flex: none;
    color: var(--h24-text);
    font-size: 17px;
}

.home-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--h24-heading);
    font-family: inherit;
    font-size: 15px;
}

.home-search input::placeholder {
    color: var(--h24-text);
    opacity: 1;
}

.home .home-search .home-btn {
    flex: none;
    height: 44px;
    border-radius: var(--h24-radius-small) !important;
}

/* przycisk ma box-shadow none także przy focusie z klawiatury, obwódkę daje :focus-visible */
.home .home-search .home-btn:focus-visible {
    box-shadow: none;
}

/* pole w wyszukiwarce: zamiast obwódki pola podświetla się cała ramka (:focus-within) */
.home .home-search input:focus-visible {
    outline: 0 !important;
}

.home-domain-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.home-domain-prices li {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--h24-card-bg);
    box-shadow: var(--h24-shadow);
    font-size: 14px;
}

.home-domain-prices b {
    color: var(--h24-heading);
    margin-right: 6px;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 28px;
}

.home-hero__media video,
.home-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1224;
}

/* grafika zamiast wideo (telefony): własne proporcje pliku; krawędzie wygaszone, żeby tło grafiki nie odcinało się od tła strony */
.home-hero__media img.home-hero__still {
    aspect-ratio: 1200 / 751;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-composite: intersect;
}

/* ---------- pasek faktów ---------- */

.home-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-facts li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
}

.home-facts .home-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    font-size: 30px;
}

.home-facts strong {
    display: block;
    color: var(--h24-heading);
    font-size: 16px;
    margin-bottom: 4px;
}

.home-facts span {
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- pasek "Rozwiń swój projekt" (pełna szerokość) ---------- */

.home-banner {
    position: relative;
    margin-top: 90px; /* miejsce na wystającą rakietę */
    background: linear-gradient(90deg, var(--h24-brand), #8f84f2);
    color: #fff;
}

.home-banner__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) auto;
    align-items: center;
    gap: 36px;
    min-height: 150px;
}

.home-banner__rocket {
    position: relative;
    align-self: stretch;
}

.home-banner__rocket img {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 320px;
    height: auto;
    /* chmury pod rakietą delikatnie rozmyte u podstawy (inspiracja) */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
}

.home .home-banner h2 {
    color: #fff;
    font-size: 30px;
}

.home-banner p {
    margin-top: 6px;
    color: #fff;
    font-size: 16px;
}

/* biały przycisk ze strzałką, jak w pasku CTA w /pomoc */
.home .home-banner__button {
    background: #fff;
    color: var(--h24-brand);
    box-shadow: 5px 5px 5px rgba(46, 48, 73, .15);
}

.home .home-banner__button:hover {
    box-shadow: none;
}

/* strzałka przesuwa się po najechaniu, jak w „Zobacz cennik” */
.home .home-banner__button i {
    transition: transform var(--h24-transition);
}

.home .home-banner__button:hover i {
    transform: translateX(3px);
}

/* chmura w tle, przesunięta przed przycisk i przygaszona (inspiracja) */
.home-banner__cloud {
    position: absolute;
    right: 21%;
    bottom: 0;
    width: 207px;
    height: auto;
    opacity: .3;
    pointer-events: none;
}

/* ---------- turkusowy pasek na całą szerokość (wzór: pasek CTA w /pomoc) ---------- */

.home-strip {
    background: linear-gradient(90deg, var(--h24-turquoise-light), var(--h24-turquoise));
    color: #fff;
}

.home-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    padding: 40px 0;
}

.home-strip__inner > i {
    flex: none;
    font-size: 48px;
}

.home .home-strip__text {
    margin: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
}

.home-strip__text span {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 400;
}

.home .home-strip__button {
    flex: none;
    background: #fff;
    color: var(--h24-turquoise);
    box-shadow: 5px 5px 5px rgba(46, 48, 73, .15);
}

.home .home-strip__button:hover {
    box-shadow: none;
}

.home .home-strip__button i {
    color: var(--h24-turquoise);
    transition: transform var(--h24-transition);
}

.home .home-strip__button:hover i {
    transform: translateX(3px);
}

/* ---------- pakiety hostingu ---------- */

/* pigułka z ikoną nad nagłówkiem sekcji (Pakiety hostingu, W standardzie) */
.home-pill--icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* przełącznik netto/brutto: aktywna strona pogrubiona i w kolorze nagłówka */
.home-packages__gross {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 28px 0 36px;
    color: var(--h24-text);
    cursor: pointer;
}

.home-packages__gross-netto,
.home-packages__gross:has(input:checked) .home-packages__gross-brutto {
    color: var(--h24-heading);
    font-weight: 700;
}

.home-packages__gross:has(input:checked) .home-packages__gross-netto {
    color: var(--h24-text);
    font-weight: 400;
}

.home-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* jak karty certyfikatów SSL: kliknięcie w całą kartę dodaje pakiet do koszyka (home.js: bindPackages) */
.home-package {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 2px solid transparent;
    cursor: pointer;
}

/* kolor ceny zależy od pakietu */
.home-package--turquoise { --package-color: var(--h24-turquoise); --package-bg: var(--h24-tag-bg); }
.home-package--violet    { --package-color: var(--h24-brand); --package-bg: var(--h24-active-bg); }
.home-package--pink      { --package-color: var(--h24-pink); --package-bg: var(--h24-pink-bg); }

/* pakiet w koszyku (bin.js: refreshShoppingCart): ramka w kolorze pakietu */
.home-package.active {
    border-color: var(--package-color, var(--h24-brand));
}

.home-package__head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-package__head img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex: none;
}

.home-package:hover h3 {
    color: var(--package-color, var(--h24-brand));
    transition: color var(--h24-transition);
}

.home-package .serverPrice,
.home-package .priceDiscount {
    text-align: center;
}

.home-package .serverPrice {
    margin-top: 22px;
    color: var(--h24-text);
}

/* cena i promocja: wspólny wzór dla hostingu (tu), kart SSL (ssl.css) i kart SSL na /cennik (prices.css):
   stara cena przekreślona 15 px, nowa cena pogrubiona w kolorze karty, dopisek „/ rok” 14 px w kolorze treści,
   rabat jako pigułka przyklejona nad prawym rogiem ceny */
.home .h24-price__unit {
    margin-left: 5px;
    color: var(--h24-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.home-package .serverPrice > span:first-child {
    color: var(--package-color, var(--h24-brand));
    font-size: 34px;
    font-weight: 700;
}

/* promocja (klasa discountService): zamiast zwykłej ceny stara cena przekreślona, nowa cena i rabat nad jej prawym rogiem */
.home-package .priceDiscount {
    position: relative;
    display: none;
    width: fit-content;
    margin: 22px auto 0 !important;
    color: var(--h24-text);
    font-size: 14px;
    white-space: nowrap;
}

.home-package.discountService .serverPrice {
    display: none;
}

.home-package.discountService .priceDiscount {
    display: block;
}

.home-package .priceDiscount .oldPrice {
    display: inline;
    margin-right: 10px;
    color: var(--h24-text);
    font-size: 15px;
    text-decoration: line-through;
}

.home-package .priceDiscount > span:nth-child(2) {
    color: var(--package-color, var(--h24-brand));
    font-size: 34px;
    font-weight: 700;
}

.home-package .priceDiscount .home-package__badge {
    position: absolute;
    top: -14px;
    right: -14px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--package-color, var(--h24-brand));
    color: #fff;
    width: auto;
    height: auto !important; /* stary styles.css: .priceDiscount span:nth-child(3) z !important */
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3 !important;
}

.home-package__params {
    margin: 22px 0 0;
    padding: 0;
}

.home-package__params div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--h24-divider);
    font-size: 14px;
}

.home-package__params dt {
    margin: 0;
}

.home-package__params dd {
    margin: 0;
    color: var(--h24-heading);
    font-weight: 700;
    text-align: right;
}

.home-package__features {
    flex: 1;
    margin: 18px 0 24px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.home-package__features li {
    display: flex;
    gap: 10px;
    padding: 4px 0;
}

.home-package__features i {
    color: var(--package-color, var(--h24-turquoise));
    margin-top: 4px;
}

.home-package .serverButton .home-btn {
    width: 100%;
}

/* przycisk w kolorze pakietu: jasne tło, po najechaniu na kartę pełny kolor */
.home .home-package .home-btn--light {
    background: var(--package-bg, var(--h24-active-bg));
    color: var(--package-color, var(--h24-brand));
}

.home .home-package:not(.usedServiceOption):hover .home-btn--light,
.home .home-package .home-btn--light:hover {
    background: var(--package-color, var(--h24-brand));
    color: #fff;
}

/* pakiet niedostępny dla zalogowanego (ma taki sam albo większy): wyszarzona zawartość karty.
   Nie opacity karty, bo animacja wejścia (fill-mode: both) nadpisuje ją wartością 1 */
.home-package.usedServiceOption {
    position: relative;
    cursor: not-allowed;
}

.home-package.usedServiceOption > *:not(.home-package__current) {
    opacity: .55;
}

.home-package.usedServiceOption:hover {
    transform: none;
    box-shadow: var(--h24-shadow);
}

.home-package.usedServiceOption:hover h3 {
    color: var(--h24-heading);
}

/* etykieta „Twój pakiet” przyklejona do prawego górnego rogu karty (-2 px: na przezroczystą ramkę karty, róg jak karta) */
.home-package__current {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 0 var(--h24-radius, 16px) 0 12px;
    background: var(--h24-tag-bg);
    color: var(--h24-tag-text);
    font-size: 13px;
    font-weight: 700;
}

.home-package .disabledButton {
    cursor: not-allowed;
    box-shadow: none;
}

.home-packages__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 30px;
    margin-top: 24px;
    font-size: 14px;
}

.home-asterisk {
    color: var(--h24-pink);
    font-weight: 700;
}

/* przełącznik netto/brutto podmienia te dwa dopiski (main.js: changePricesToGross) */
.home .serviceGrossInfo {
    display: none;
}

/* ---------- w każdym pakiecie ---------- */

.home-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.home-feature {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    align-content: start;
    padding: 24px;
}

.home-feature .home-icon {
    grid-row: span 3;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 20px;
}

.home-feature p,
.home-feature details {
    grid-column: 2;
}

.home-feature h3 {
    font-size: 16px;
}

.home-feature:hover h3 {
    color: var(--h24-brand);
    transition: color var(--h24-transition);
}

.home-feature p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
}

.home-feature details {
    margin-top: 12px;
    font-size: 14px;
}

/* "Więcej" po prawej stronie karty */
.home-feature summary {
    display: flex;
    width: fit-content;
    margin-left: auto;
    align-items: center;
    gap: 8px;
    color: var(--h24-brand);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.home-feature summary::-webkit-details-marker {
    display: none;
}

.home-feature summary i {
    font-size: 12px;
    transition: transform var(--h24-transition);
}

/* bez JS obrót według [open], z płynnym rozwijaniem (home.js: smoothDetails) według .is-open */
.home-feature details[open]:not([data-smooth]) summary i,
.home-feature details.is-open summary i {
    transform: rotate(180deg);
}

.home-feature details p {
    margin-top: 10px;
}

/* ---------- sekcje z ilustracją (domeny, migracja) ---------- */

.home-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 60px;
}

.home-split--reverse .home-split__media {
    order: 2;
}

.home-split h2 {
    font-size: 34px;
}

/* falowane podkreślenie słowa w nagłówku (propozycja1.png) */
.home-underline {
    padding-bottom: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2,7 C30,2 60,2 118,6' fill='none' stroke='%23c9c1f7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 9px no-repeat;
    -webkit-box-decoration-break: clone; /* przy zawinięciu kreska pod każdą linią */
    box-decoration-break: clone;
}

.home-split__media img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
}

/* sekcje domen i przeniesienia: grafika 45%, treść 55% szerokości; grafiki mniejsze niż kolumna (przeniesienie o ok. 25%,
   domeny o ok. 15% względem wcześniejszego układu 50/50), żeby nie konkurowały z formularzem i tabelą */
.home-section--domains .home-split {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}

#transferService .home-split--reverse {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}

.home-section--domains .home-split__media img {
    width: 76%;
}

#transferService .home-split__media img {
    width: 82.7%; /* 75% + 5% + 5% */
}

.home-split .home-lead + .home-lead,
.home-split .home-lead + p {
    margin-top: 12px;
}

.home-float {
    animation: home-float 6s ease-in-out infinite;
}

@keyframes home-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* grafiki obok H1 w nagłówkach (strona główna i podstrony) stoją w miejscu */
.home-hero .home-float {
    animation: none;
}

/* dwie karty informacyjne nad tabelą domen */
.home-domain-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.home-domain-info__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--h24-radius);
    background: var(--h24-hover-bg);
}

.home-domain-info__card--turquoise {
    background: #effafb;
}

.home-domain-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px; /* jak ikony w „Co dostajesz w każdym pakiecie” */
    background: var(--h24-icon-bg);
    color: var(--h24-brand);
    font-size: 20px;
}

.home-domain-info__card--turquoise .home-domain-info__icon {
    background: #cdeff2; /* ciemniejszy niż --h24-tag-bg, żeby odcinał się od turkusowego tła karty */
    color: var(--h24-turquoise);
}

.home-domain-info h3 {
    font-size: 15px;
}

.home-domain-info p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
}

/* pasek z linkiem do wpisu na blogu */
/* link do wpisu na blogu, wygląda jak .home-migration-note */
.home .home-domain-more {
    margin-top: 18px;
    font-size: 14px;
}

/* link w jednej linii z „Dowiedz się więcej:”, przy zawijaniu ciągnie się dalej jak tekst */
.home .home-domain-more a.home-link-arrow {
    display: inline;
    margin-left: 4px;
}

/* strzałka inline, żeby nie przechodziła sama do nowej linii; przesunięcie przez left zamiast transform */
.home .home-domain-more a.home-link-arrow > i {
    display: inline;
    position: relative;
    left: 0;
    margin-left: 8px;
    transition: left var(--h24-transition);
}

.home .home-domain-more a.home-link-arrow:hover > i {
    left: 3px;
    transform: none;
}

/* trzy przyciski pod tabelą domen w jednym rzędzie */
.home .home-links .home-btn {
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
}

/* przycisk z obramowaniem (pełny cennik, instrukcja przeniesienia) */
.home .home-btn--outline {
    background: var(--h24-card-bg);
    color: var(--h24-heading);
    border: 1px solid #d9d4f8;
    box-shadow: none;
}

.home .home-btn--outline i {
    color: var(--h24-brand);
}

.home .home-btn--outline:hover {
    border-color: var(--h24-brand);
    color: var(--h24-brand);
}

.home-domain-table {
    width: 100%;
    margin-top: 24px;
    border-collapse: collapse;
    background: var(--h24-card-bg);
    border-radius: var(--h24-radius);
    box-shadow: var(--h24-shadow);
    overflow: hidden;
    font-size: 14px;
}

.home-domain-table th,
.home-domain-table td {
    padding: 12px 20px;
    text-align: left;
}

.home-domain-table th {
    color: var(--h24-heading);
    font-weight: 700;
    background: var(--h24-lavender-from);
}

.home-domain-table td {
    border-top: 1px solid var(--h24-divider);
}

.home-domain-table td:first-child {
    color: var(--h24-heading);
    font-weight: 700;
}

.home-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    margin-top: 24px;
}

.home-steps {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: home-step;
}

.home-steps li {
    position: relative;
    padding: 0 0 18px 56px;
    counter-increment: home-step;
}

/* pionowa linia łącząca numery kroków */
.home-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 44px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: var(--h24-icon-bg);
}

.home-steps li::before {
    content: counter(home-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--h24-icon-bg);
    color: var(--h24-brand);
    font-weight: 700;
    line-height: 38px;
    text-align: center;
}

.home-steps strong {
    display: block;
    color: var(--h24-heading);
}

.home-migration-form {
    margin-top: 12px;
    padding: 26px;
}

.home-migration-form .transferForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.home-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--h24-heading);
    font-size: 14px;
    font-weight: 700;
}

.home-migration-form__captcha {
    grid-column: 1 / -1;
}

.home .home-migration-form #transferFormButton {
    display: flex;
    margin-top: 16px;
    margin-left: auto;
}

/* powyżej 640 px przycisk Wyślij obok captchy, na jej wysokości (captcha 78 px), bez pustego wiersza pod nią;
   przycisk zostaje poza formularzem w HTML (domain.js szuka go jako rodzeństwa formularza), więc pozycja absolutna */
@media (min-width: 641px) {
    .home-migration-form {
        position: relative;
    }

    .home .home-migration-form #transferFormButton {
        position: absolute;
        right: 26px;
        bottom: calc(26px + 39px);
        margin: 0;
        transform: translateY(50%);
    }
}

.home-migration-note {
    margin-top: 18px !important;
    font-size: 14px;
}

/* ---------- poradniki (inspiracja: pigułka nad nagłówkiem, karty z etykietą) ---------- */

.home-pill--turquoise {
    background: var(--h24-tag-bg);
    color: var(--h24-tag-text);
}

.home-guides__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.home-guides__card {
    padding: 22px 16px 10px;
}

.home-guides__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 8px 14px;
}

.home-guides__head .home-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 22px;
}

.home-guides__head h3 {
    margin: 0;
    font-size: 22px;
}

.home-guides__tag {
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--h24-active-bg);
    color: var(--h24-brand);
    font-size: 13px;
    font-weight: 700;
}

.home-guides__tag--turquoise {
    background: var(--h24-tag-bg);
    color: var(--h24-tag-text);
}

.home-guides__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-guides__list li + li {
    border-top: 1px solid var(--h24-divider);
}

.home .home-guides__list a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    border-radius: 12px;
    color: var(--h24-heading);
    font-size: 15px;
    text-decoration: none;
    transition: color var(--h24-transition);
}

/* jak lista w /pomoc: bez tła wiersza, zmienia się kolor tytułu i kółko pod strzałką */
.home .home-guides__list a:hover {
    color: var(--h24-brand);
}

.home-guides__list a > i {
    flex: none;
    width: 24px;
    color: var(--h24-brand);
    font-size: 20px;
    text-align: center;
}

.home-guides__list a > span:not(.home-guides__arrow) {
    flex: 1;
}

.home-guides__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--h24-icon-bg);
    color: var(--h24-brand);
    font-size: 13px;
    transition: background var(--h24-transition), color var(--h24-transition);
}

.home-guides__list a:hover .home-guides__arrow {
    background: var(--h24-brand);
    color: #fff;
}

/* karta bloga w kolorystyce turkusowej */
.home-guides__card--turquoise .home-guides__list a > i,
.home-guides__card--turquoise .home-guides__arrow,
.home .home-guides__card--turquoise .home-guides__list a:hover,
.home .home-guides__card--turquoise a.home-link-arrow,
.home .home-guides__card--turquoise a.home-link-arrow:hover {
    color: var(--h24-turquoise);
}

.home-guides__card--turquoise .home-guides__arrow {
    background: var(--h24-tag-bg);
}

.home-guides__card--turquoise .home-guides__head .home-icon {
    background: #cdeff2; /* jak ikona „Domena a hosting” */
}

.home-guides__card--turquoise .home-guides__list a:hover .home-guides__arrow {
    background: var(--h24-turquoise);
    color: #fff;
}

.home-guides__more {
    margin: 0;
    padding: 14px 12px 12px;
    border-top: 1px solid var(--h24-divider);
    font-size: 15px;
    font-weight: 700;
}

/* ---------- FAQ ---------- */

/* pytania po lewej, ilustracja po prawej (inspiracja) */
.home-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 50px;
}

/* grafika robota obok FAQ: 90% kolumny (o 10% mniejsza), wyśrodkowana */
.home-faq__illustration {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.home-faq details {
    margin-bottom: 14px;
}

.home-faq details:hover {
    transform: none;
}

.home-faq summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px 14px 14px;
    cursor: pointer;
    list-style: none;
}

.home-faq summary::-webkit-details-marker {
    display: none;
}

.home-faq summary .home-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 19px;
}

.home-faq summary h3 {
    flex: 1;
    font-size: 16px;
    transition: color var(--h24-transition);
}

.home-faq details:hover summary h3 {
    color: var(--h24-brand);
}

.home-faq summary > i {
    flex: none;
    color: var(--h24-brand);
    transition: transform var(--h24-transition);
}

/* bez JS obrót według [open], z płynnym rozwijaniem (home.js: smoothDetails) według .is-open */
.home-faq details[open]:not([data-smooth]) summary > i,
.home-faq details.is-open summary > i {
    transform: rotate(180deg);
}

/* odpowiedź wyrównana do tekstu pytania (14 px + ikona 44 px + odstęp 16 px) */
.home-faq details > div {
    padding: 0 24px 20px 74px;
}

/* ---------- kontakt (inspiracja: ilustracja po lewej, formularz, pasek z danymi) ---------- */

.home-contact {
    position: relative;
    padding-top: 150px;
    background: linear-gradient(170deg, #fff 10%, #f4f2fd 55%, #efedfc 100%);
}

/* fala w kolorze tła FAQ spływająca na gradient kontaktu */
.home-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: var(--h24-page-bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,45 C1300,90 1150,95 1000,60 C850,25 720,20 560,55 C400,90 220,95 0,50 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,45 C1300,90 1150,95 1000,60 C850,25 720,20 560,55 C400,90 220,95 0,50 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}

.home-contact .home-section__header {
    margin-bottom: 36px;
}

/* wyróżnienie w nagłówku przechodzi do nowej linii w całości, a nie łamie się w połowie */
.home-contact__accent {
    display: inline-block;
    max-width: 100%;
    color: var(--h24-brand);
}

.home-contact__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    gap: 40px;
}

.home-contact__media img {
    display: block;
    width: 85.5%; /* o 5% i jeszcze o 10% mniejsza niż kolumna, wyśrodkowana */
    height: auto;
    margin: 0 auto;
}

.home-contact__form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-contact .inputAutocomplete {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.home-input {
    position: relative;
}

.home-input--textarea {
    grid-column: 1 / -1;
}

.home-input > i {
    position: absolute;
    top: 17px;
    left: 18px;
    color: var(--h24-brand);
    font-size: 17px;
    pointer-events: none;
}

.home-input input,
.home-input textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px 0 48px;
    border: 1px solid var(--h24-search-border);
    border-radius: 12px;
    background: var(--h24-card-bg);
    box-shadow: var(--h24-shadow);
    color: var(--h24-heading);
    font-family: inherit;
    font-size: 15px;
    transition: border-color var(--h24-transition), box-shadow var(--h24-transition);
}

.home-input input {
    height: 52px;
}

.home-input textarea {
    min-height: 140px;
    padding-top: 15px;
    padding-bottom: 15px;
    resize: vertical;
}

/* fokus jak w wyszukiwarce domen (.home-search:focus-within): ramka bez zmian, fioletowa poświata 3 px */
.home-input input:focus,
.home-input textarea:focus {
    box-shadow: 0 0 0 3px rgba(101, 86, 231, .18), var(--h24-shadow);
    outline: none;
}

.home .home-input input:focus-visible,
.home .home-input textarea:focus-visible {
    outline: 0 !important;
}

/* dane wstawione przez przeglądarkę (autouzupełnianie): białe tło jak w zwykłym polu zamiast niebieskiego tła Chrome;
   tła Chrome nie da się nadpisać, więc zakrywa je wewnętrzny cień, a zwykły cień i poświata fokusu zostają */
.home-input input:-webkit-autofill,
.home-input textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--h24-card-bg) inset, var(--h24-shadow);
    box-shadow: 0 0 0 1000px var(--h24-card-bg) inset, var(--h24-shadow);
    -webkit-text-fill-color: var(--h24-heading);
    caret-color: var(--h24-heading);
}

.home-input input:-webkit-autofill:focus,
.home-input textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--h24-card-bg) inset, 0 0 0 3px rgba(101, 86, 231, .18), var(--h24-shadow);
    box-shadow: 0 0 0 1000px var(--h24-card-bg) inset, 0 0 0 3px rgba(101, 86, 231, .18), var(--h24-shadow);
}

.home-input input::placeholder,
.home-input textarea::placeholder {
    color: var(--h24-text);
    opacity: 1;
}

/* iOS Safari przybliża stronę po dotknięciu pola z czcionką poniżej 16 px; pola input mają 16 px z base.css,
   textarea przegrywała z regułą .home-input powyżej */
@media (max-width: 640px) {
    .home-input textarea {
        font-size: 16px;
    }
}

.home-contact__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.home .home-contact__actions .home-btn {
    height: 56px;
    padding: 0 32px;
}

.home-contact__info {
    display: flex;
    justify-content: center;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}

.home-contact__info li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 44px;
}

.home-contact__info li + li {
    border-left: 1px solid var(--h24-border);
}

.home-contact__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--h24-card-bg);
    box-shadow: var(--h24-shadow);
    color: var(--h24-brand);
    font-size: 22px;
}

.home-contact__info li > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--h24-heading);
    font-size: 14px;
    font-weight: 700;
}

.home .home-contact__info a,
.home-contact__info strong {
    color: var(--h24-brand);
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
}

.home-contact__info strong {
    font-weight: 700;
}

/* ---------- responsywność ---------- */

@media (max-width: 1240px) {
    .home-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-package { padding: 24px; }
}

/* ostatnia karta cechy bez pary: środkowa kolumna przy 3 kolumnach, wyśrodkowana przy 2 */
@media (min-width: 1061px) {
    .home-feature:last-child:nth-child(3n + 1) { grid-column: 2; }
}

@media (max-width: 1060px) {
    .home-contact__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
    .home-contact__info li { padding: 0 24px; }
    .home-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-feature:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
    .home-packages { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .home-split { gap: 40px; }
}

/* poniżej 900 px ilustracje znikają, jak w nagłówkach /pomoc i /blog */
@media (max-width: 900px) {
    .home-contact__grid { grid-template-columns: minmax(0, 1fr); }
    .home-contact__media { display: none; }
    .home-contact__info { flex-direction: column; align-items: center; gap: 18px; }
    .home-contact__info li { width: 280px; padding: 0; }
    .home-contact__info li + li { border-left: 0; }
    .home-hero__grid,
    .home-split { grid-template-columns: minmax(0, 1fr); }
    /* grafika z nagłówka strony głównej pod tekstem; ilustracja sekcji domen ukryta */
    .home-hero__media { margin-top: 32px; }
    .home-section--domains .home-split__media { display: none; }
    .home-section--domains .home-split,
    #transferService .home-split--reverse { grid-template-columns: minmax(0, 1fr); }
    .home-banner__grid { grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; padding: 24px 0; }
    .home-banner__rocket { grid-row: span 2; margin-bottom: -24px; }
    .home-banner__rocket img { width: 200px; }
    .home-banner__action { justify-self: start; }
    .home-guides__grid { grid-template-columns: minmax(0, 1fr); }
    .home-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } /* ilustracja ukryta, puste opakowanie bez odstępu */
    .home-faq__illustration { display: none; }
}

@media (max-width: 640px) {
    .home-contact { padding-top: 90px; }
    .home-contact::before { height: 44px; }
    .home-contact__form { grid-template-columns: minmax(0, 1fr); }
    .home-contact__actions { justify-content: center; }
    .home .home-contact__actions .home-btn { width: 100%; }
    /* formularz przeprowadzki: Wyślij na całą szerokość jak w /kontakt */
    .home .home-migration-form #transferFormButton { width: 100%; }
    .home { font-size: 14px; }
    .home-section { padding: 44px 0; }
    .home-section--white::before,
    .home-section--white::after { height: 28px; }
    .home-section--domains::after { height: 48px; }
    .home-duo + .home-section { padding-top: 80px; }
    .home-section--wave-big { --wave-big-height: 70px; padding-top: calc(44px + var(--wave-big-height)); }
    .home .home-section--wave-big[id] { scroll-margin-top: calc(76px - var(--wave-big-height)); }
    .home #transferService.home-section--wave-big { padding-top: calc(44px + var(--wave-big-height)) !important; padding-bottom: 44px !important; }
    .home-strip__inner { flex-direction: column; gap: 16px; padding: 32px 0; text-align: center; }
    .home-strip__inner > i { font-size: 40px; }
    .home-banner { margin-top: 70px; }
    .home-banner__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; padding: 0 0 32px; }
    .home-banner__rocket { grid-row: auto; justify-self: center; width: 200px; margin: -50px 0 0; }
    .home-banner__rocket img { position: static; width: 100%; }
    .home .home-banner h2 { font-size: 24px; }
    .home-banner__action { justify-self: center; }
    /* układ w kolumnie (rakieta nad tekstem): bez chmurki w prawym dolnym rogu */
    .home-banner__cloud { display: none; }
    /* karty pakietów na całą szerokość kontenera (do 1060 px mają maks. 560 px) */
    .home-packages { max-width: none; }
    .home-hero { padding: 105px 0 44px; }
    .home-hero h1 { font-size: 30px; }
    .home h2 { font-size: 24px; }
    .home-lead { font-size: 16px; }
    .home-search { padding-left: 14px; }
    .home .home-search .home-btn { padding: 0 18px; }
    .home-facts li { padding: 20px; }
    .home-facts .home-icon { width: 60px; height: 60px; border-radius: 16px; font-size: 26px; }
    .home-facts,
    .home-features { grid-template-columns: minmax(0, 1fr); }
    .home-feature:last-child:nth-child(odd) { grid-column: auto; width: auto; }
    .home-feature { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
    .home-feature .home-icon { width: 44px; height: 44px; font-size: 18px; }
    .home-migration-form .transferForm { grid-template-columns: minmax(0, 1fr); }
    .home-domain-table th,
    .home-domain-table td { padding: 10px 14px; }
    .home-domain-info { grid-template-columns: minmax(0, 1fr); }
    .home-links .home-btn { width: 100%; }
    .home-guides__card { padding: 18px 8px 8px; }
    .home-guides__head h3 { font-size: 19px; }
    .home-faq summary { padding: 12px 16px 12px 12px; gap: 12px; }
    .home-faq summary .home-icon { width: 38px; height: 38px; font-size: 16px; }
    .home-faq details > div { padding: 0 16px 16px; }
}

@media (max-width: 400px) {
    .home-hero h1 { font-size: 27px; }
    .home-search > i { display: none; }
    .home-package { padding: 20px; }
}

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
    .home .animated {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .home-float { animation: none; }
    .home-card,
    .home-card:hover { transition: none; transform: none; }
}

/* ---------- potwierdzenie po wysłaniu formularza (kontakt, przeniesienie) w miejscu formularza (main.js: showFormDone) ---------- */

.h24-form--done {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.h24-form--done > :not(.h24-form-done) {
    display: none !important;
}

.h24-form-done:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    text-align: center;
    animation: h24-form-done-in .35s ease;
}

.h24-form-done:focus {
    outline: 0;
}

/* ikona w równym zaokrąglonym kwadracie, kolory jak przycisk „Do koszyka” */
.h24-form-done__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--h24-tag-bg); /* jak „Do koszyka”: jasny turkus, bez gradientu i poświaty */
    color: var(--h24-turquoise);
    font-size: 30px;
}

/* koperta na ścieżce lotu: tylko w ramce formularza przeniesienia, w prawym dolnym rogu, za tekstem */
.h24-form-done__art {
    display: none;
}

.home .h24-form-done p {
    margin: 0;
}

.home .h24-form-done .h24-form-done__title {
    margin-top: 16px;
    color: var(--h24-heading);
    font-size: 22px;
    font-weight: 700;
}

/* ikona wykrzyknika na końcu opisu zamiast znaku „!” */
.h24-form-done__bang {
    margin-left: 3px;
    color: inherit; /* kolor tekstu opisu */
    font-size: 1.2em;
    vertical-align: -1px;
}

.home .h24-form-done .h24-form-done__text {
    margin-top: 6px;
    color: var(--h24-text);
    font-size: 16px;
}

.home .h24-form-done__again {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px !important;
    background: var(--h24-hover-bg) !important; /* jasny fiolet od razu, nie dopiero po najechaniu */
    box-shadow: none;
    color: var(--h24-brand);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background var(--h24-transition), color var(--h24-transition) !important;
}

.home .h24-form-done__again i {
    margin: 0 !important;
}

/* po najechaniu i przy fokusie z klawiatury: fioletowe tło, biały tekst */
.home .h24-form-done__again:hover,
.home .h24-form-done__again:focus-visible {
    background: var(--h24-brand) !important;
    color: #fff;
}

@keyframes h24-form-done-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .h24-form-done:not([hidden]) { animation: none; }
}

/* do 1240 px ramka jest za wąska na kopertę obok tekstu: bez grafiki */
@media (min-width: 641px) and (max-width: 1240px) {
    .home-migration-form .h24-form-done__art { display: none !important; }
    .home-migration-form .h24-form-done:not([hidden]) { padding-right: 0 !important; }
}

/* potwierdzenie poziomo (ikona z lewej, koperta z prawej): formularz przeniesienia jest niski, a w formularzu kontaktowym ten sam układ dla spójności */
@media (min-width: 641px) {
    .home-migration-form.h24-form--done,
    .home-contact__formbox.h24-form--done {
        overflow: hidden;
    }

    .home-migration-form .h24-form-done:not([hidden]),
    .home-contact__formbox .h24-form-done:not([hidden]) {
        position: relative;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 28px;
        padding: 0 34% 0 14px; /* z prawej miejsce na kopertę (grafika 36% szerokości ramki) */
        align-items: center;
        justify-items: start;
        text-align: left;
    }

    .home-migration-form .h24-form-done__icon,
    .home-contact__formbox .h24-form-done__icon {
        grid-row: 1 / span 3;
        align-self: center;
    }

    .home .home-migration-form .h24-form-done .h24-form-done__title,
    .home .home-contact__formbox .h24-form-done .h24-form-done__title {
        margin-top: 0;
        font-size: 24px;
    }

    /* formularz przeniesienia: wąska kolumna tekstu obok koperty, mniejszy opis */
    .home .home-migration-form .h24-form-done .h24-form-done__title { font-size: 22px; }
    .home .home-migration-form .h24-form-done .h24-form-done__text { font-size: 15px; }
    .home-migration-form .h24-form-done:not([hidden]) { padding-right: 28%; }
    .home-migration-form .h24-form-done__art { width: 30%; }

    .home-migration-form .h24-form-done > :not(.h24-form-done__art),
    .home-contact__formbox .h24-form-done > :not(.h24-form-done__art) {
        position: relative;
        z-index: 1;
    }

    /* względem samego potwierdzenia (wyśrodkowanego w ramce), więc animacja wejścia przesuwa ją razem z tekstem, bez przeskoku;
       przy prawej krawędzi ramki (-10 px = 16 px od krawędzi przy dopełnieniu ramki 26 px), wyśrodkowana w pionie z ikoną i tekstem */
    .home-migration-form .h24-form-done__art,
    .home-contact__formbox .h24-form-done__art {
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        display: block;
        width: 36%;
        height: auto;
        max-width: 320px;
        object-fit: contain;
        object-position: right bottom;
        pointer-events: none;
    }

    .home .home-migration-form .h24-form-done__again,
    .home .home-contact__formbox .h24-form-done__again {
        margin: 12px 0 0;
    }
}

/* formularz kontaktowy nie ma własnej ramki: po wysłaniu potwierdzenie w białej karcie jak w formularzu przeniesienia
   (border-box: min-height z main.js obejmuje dopełnienie, więc wysokość się nie zmienia) */
.home-contact__formbox.h24-form--done {
    position: relative;
    box-sizing: border-box;
    padding: 32px;
    border-radius: var(--h24-radius);
    background: var(--h24-card-bg);
    box-shadow: var(--h24-shadow);
}

@media (min-width: 641px) {
    /* dopełnienie karty 32 px: koperta 16 px od prawej krawędzi */
    .home-contact__formbox .h24-form-done__art {
        right: -16px;
    }

    .home .home-contact__formbox .h24-form-done .h24-form-done__title {
        font-size: 26px;
    }
}

/* wąski telefon: przyciski z dłuższym tekstem (np. tłumaczenia DE/UK) zawijają się zamiast wychodzić poza ekran */
@media (max-width: 400px) {
    .home .home-btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* formularz przeprowadzki na najwęższych telefonach: reCAPTCHA ma stałą szerokość 304 px (Google), więc zmniejszona do 90%,
   żeby nie wystawała poza kartę; wysokość miejsca też o 10% mniejsza */
@media (max-width: 380px) {
    .home-migration-form .g-recaptcha {
        transform: scale(.9);
        transform-origin: 0 0;
        height: 70px;
    }
}