:root {
    --ink: #0f172a;
    --ink-soft: #162033;
    --muted: #64748b;
    --green: #16a34a;
    --lime: #84cc16;
    --mint: #e8f7ef;
    --surface: rgba(255, 255, 255, .76);
    --line: rgba(15, 23, 42, .1);
    --shadow: 0 20px 70px rgba(15, 23, 42, .1);
}

.equipment-page {
    width: min(1480px, calc(100% - 36px));
    margin: 0 auto 28px;
}

.equipment-hero {
    min-height: 595px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 35%, rgba(255,255,255,.42) 57%, rgba(255,255,255,.06) 100%),
        var(--equipment-hero-image) center right / cover no-repeat;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .1);
}

.equipment-hero-copy {
    width: min(680px, 58%);
    padding: 58px 52px;
}

.equipment-hero h1 {
    margin: 0;
    color: #081633;
    font-size: clamp(2.7rem, 5.6vw, 5.2rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.equipment-hero h1::first-line {
    color: #0a9f22;
}

.equipment-hero p {
    max-width: 560px;
    margin: 24px 0 0;
    color: #45546a;
    font-size: 1.12rem;
    line-height: 1.72;
}

.equipment-actions,
.equipment-cta form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.equipment-actions .btn {
    min-width: 235px;
    justify-content: center;
}

.equipment-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 560px;
    margin-top: 42px;
}

.equipment-badges article,
.equipment-benefit-grid article,
.equipment-category-grid article,
.equipment-product-grid article {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

.equipment-badges article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
}

.equipment-badges strong {
    color: #0b1734;
    font-size: .92rem;
    line-height: 1.25;
}

.equipment-mini-icon,
.equipment-line-icon {
    display: grid;
    place-items: center;
    color: #19aa32;
    background: #e7f8e8;
}

.equipment-mini-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.equipment-line-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 20px;
    font-size: 2rem;
}

.equipment-mini-icon::before,
.equipment-line-icon::before {
    font-weight: 900;
}

.equipment-mini-icon.shield::before,
.equipment-line-icon.shield::before { content: "ϟ"; }
.equipment-mini-icon.battery::before,
.equipment-line-icon.battery::before { content: "▰"; }
.equipment-mini-icon.headset::before,
.equipment-line-icon.headset::before { content: "◖"; }
.equipment-line-icon.home::before { content: "⌂"; }
.equipment-line-icon.check::before { content: "✓"; }

.equipment-steps,
.equipment-benefits,
.equipment-categories,
.equipment-products {
    margin-top: 30px;
}

.equipment-steps h2,
.equipment-benefits h2,
.equipment-categories h2,
.equipment-products h2 {
    margin: 0 0 22px;
    color: #0b1734;
    text-align: center;
    font-size: clamp(1.9rem, 3vw, 2.35rem);
    line-height: 1.12;
}

.equipment-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 54px;
}

.equipment-step-grid article {
    position: relative;
    min-height: 310px;
    padding: 42px 36px 30px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
}

.equipment-step-grid article:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    width: 30px;
    border-top: 3px dashed #30b842;
}

.equipment-number {
    position: absolute;
    left: 22px;
    top: 20px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #16842b;
    background: #c9f4ca;
    font-weight: 900;
}

.equipment-visual {
    position: relative;
    display: block;
    width: 150px;
    height: 112px;
    margin: 0 auto 22px;
}

.equipment-visual.router::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 18px;
    height: 44px;
    border-radius: 10px 10px 16px 16px;
    background: linear-gradient(180deg, #1f2529, #080b0d);
    box-shadow: 0 18px 26px rgba(15, 23, 42, .16);
}

.equipment-visual.router::after {
    content: "";
    position: absolute;
    left: 34px;
    bottom: 57px;
    width: 6px;
    height: 72px;
    border-radius: 999px;
    background: #0c1012;
    box-shadow: 34px 0 0 #0c1012, 68px 0 0 #0c1012, 102px 0 0 #0c1012;
}

.equipment-visual.mesh::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 16px;
    width: 48px;
    height: 82px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, #e7ece9);
    box-shadow: 38px 8px 0 #f3f5f4, 76px 16px 0 #e8eeeb, 0 18px 24px rgba(15, 23, 42, .12);
}

.equipment-visual.onu::before {
    content: "";
    position: absolute;
    inset: 24px 10px 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #e7ecec);
    box-shadow: 0 18px 24px rgba(15, 23, 42, .12);
}

.equipment-visual.onu::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 42px;
    top: 58px;
    height: 9px;
    border-radius: 999px;
    background: #c7d1cc;
}

.equipment-visual.battery::before {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 12px;
    bottom: 12px;
    border-radius: 16px;
    background: linear-gradient(160deg, #2a2e31, #080a0c);
    box-shadow: 0 18px 28px rgba(15, 23, 42, .18);
}

.equipment-visual.battery::after {
    content: "100";
    position: absolute;
    left: 56px;
    top: 36px;
    color: #3bd6ff;
    font-size: 1.25rem;
    font-weight: 900;
}

.equipment-visual.fiber::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 42px;
    width: 130px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #151515, #cfd4d1 65%, #1fd34d);
    transform: rotate(7deg);
    box-shadow: 0 16px 24px rgba(15, 23, 42, .12);
}

.equipment-visual.fiber::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 34px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(68, 255, 90, .92), rgba(42, 190, 58, .14) 62%, transparent 64%);
    box-shadow: 0 0 34px rgba(36, 226, 65, .75);
}

.equipment-visual.wifi::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 18px;
    width: 94px;
    height: 72px;
    border: 7px solid #18b234;
    border-bottom: 0;
    border-radius: 90px 90px 0 0;
}

.equipment-visual.wifi::after {
    content: "";
    position: absolute;
    left: 68px;
    bottom: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #18b234;
    box-shadow: 0 -28px 0 -3px #18b234, 0 -52px 0 -7px #18b234;
}

.equipment-step-grid h3,
.equipment-benefit-grid h3,
.equipment-category-grid h3,
.equipment-product-grid h3 {
    margin: 0;
    color: #0b1734;
    font-size: 1.18rem;
}

.equipment-step-grid p,
.equipment-benefit-grid p,
.equipment-category-grid p {
    margin: 12px 0 0;
    color: #485871;
    line-height: 1.65;
}

.equipment-benefit-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.equipment-benefit-grid article,
.equipment-category-grid article {
    padding: 28px 24px;
    text-align: center;
}

.equipment-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.equipment-category-grid .equipment-visual {
    height: 90px;
    transform: scale(.86);
    margin-bottom: 16px;
}

.equipment-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.equipment-product-grid article {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 18px;
    min-height: 190px;
    padding: 24px;
}

.equipment-product-grid article.featured {
    border-color: rgba(34, 197, 94, .28);
    box-shadow: 0 16px 40px rgba(22, 163, 74, .12);
}

.equipment-product-image {
    display: grid;
    place-items: center;
}

.equipment-product-image img {
    max-width: 140px;
    max-height: 120px;
    object-fit: contain;
}

.equipment-product-image .equipment-visual {
    width: 130px;
    height: 110px;
    margin: 0;
    transform: scale(.86);
}

.equipment-product-grid ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 18px;
    padding: 0;
    list-style: none;
    color: #4b5a70;
    font-size: .92rem;
}

.equipment-product-grid li {
    position: relative;
    padding-left: 20px;
}

.equipment-product-grid li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0c9d26;
    font-weight: 900;
}

.equipment-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.equipment-product-bottom strong {
    color: #0b1734;
    white-space: nowrap;
}

.equipment-product-bottom a {
    padding: 8px 14px;
    border: 1px solid rgba(22, 163, 74, .34);
    border-radius: 999px;
    color: #15912b;
    font-weight: 900;
    text-decoration: none;
    font-size: .82rem;
}

.equipment-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    align-items: center;
    gap: 30px;
    margin: 36px 0 30px;
    padding: 42px 60px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, #2f8d3e, #45a64f);
    color: #fff;
}

.equipment-cta h2 {
    margin: 0;
    max-width: 720px;
    color: #fff;
    font-size: clamp(2rem, 3.5vw, 3rem);
}

.equipment-cta p {
    max-width: 620px;
    margin: 14px 0 0;
    color: rgba(255,255,255,.92);
    font-size: 1.04rem;
    line-height: 1.6;
}

.equipment-cta input {
    min-width: 170px;
    background: #fff;
}

.equipment-cta .btn {
    min-width: 190px;
    background: #fff;
    color: #16842b;
}

.equipment-cta-art {
    position: relative;
    min-height: 220px;
}

.equipment-cta-art::before {
    content: "";
    position: absolute;
    inset: 18% 0 0;
    border: 5px solid rgba(206, 255, 118, .8);
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-9deg);
    filter: blur(.2px);
}

.equipment-cta-art .equipment-visual.router {
    position: absolute;
    left: 8%;
    bottom: 10px;
}

.equipment-cta-art .equipment-visual.battery {
    position: absolute;
    right: 16%;
    bottom: 18px;
}

@media (max-width: 1180px) {
    .equipment-hero-copy {
        width: min(640px, 68%);
        padding: 42px 34px;
    }
    .equipment-step-grid,
    .equipment-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
    .equipment-step-grid article:not(:last-child)::after {
        display: none;
    }
    .equipment-benefit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .equipment-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .equipment-page {
        width: min(100% - 22px, 1480px);
    }
    .equipment-hero {
        min-height: 680px;
        align-items: flex-start;
        background:
            linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 46%, rgba(255,255,255,.34) 72%, rgba(255,255,255,.08) 100%),
            var(--equipment-hero-image) bottom center / 150% auto no-repeat;
    }
    .equipment-hero-copy {
        width: 100%;
        padding: 34px 22px;
    }
    .equipment-actions .btn,
    .equipment-cta .btn,
    .equipment-cta input {
        width: 100%;
    }
    .equipment-badges,
    .equipment-step-grid,
    .equipment-benefit-grid,
    .equipment-category-grid,
    .equipment-product-grid,
    .equipment-cta {
        grid-template-columns: 1fr;
    }
    .equipment-product-grid article {
        grid-template-columns: 116px minmax(0, 1fr);
        padding: 18px;
    }
    .equipment-cta {
        padding: 30px 22px;
    }
    .equipment-cta-art {
        min-height: 170px;
    }
}

/* Equipment icon and banner refinement */
.equipment-mini-icon::before,
.equipment-line-icon::before {
    content: none !important;
}

.equipment-mini-icon svg,
.equipment-line-icon svg,
.equipment-card-media svg {
    width: 62%;
    height: 62%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.equipment-card-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 148px;
    height: 118px;
    margin: 0 auto 18px;
}

.equipment-card-media img {
    display: block;
    max-width: 150px;
    max-height: 112px;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 16px 22px rgba(15, 23, 42, .12));
}

.equipment-card-media svg {
    width: 74px;
    height: 74px;
    color: #12a333;
    padding: 14px;
    border-radius: 18px;
    background: #e7f8e8;
}

.equipment-card-media.category {
    height: 104px;
    margin-bottom: 12px;
}

.equipment-card-media.category img {
    max-height: 96px;
}

.equipment-step-grid .equipment-visual,
.equipment-category-grid .equipment-visual {
    display: none;
}

.equipment-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 45%, rgba(189, 255, 124, .22), transparent 34%),
        linear-gradient(135deg, #218f3d 0%, #35a84a 58%, #2e9844 100%);
}

.equipment-cta::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 16%;
    width: 46%;
    height: 68%;
    border: 4px solid rgba(204, 255, 125, .56);
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-7deg);
}

.equipment-cta > div {
    position: relative;
    z-index: 1;
}

.equipment-cta-art::before {
    display: none;
}

.equipment-cta-art {
    min-height: 220px;
}

.equipment-cta-art img {
    mix-blend-mode: multiply;
}

.equipment-cta-router {
    left: 3%;
    bottom: 8px;
    width: min(300px, 52%);
}

.equipment-cta-power {
    right: 6%;
    bottom: 34px;
    width: min(210px, 38%);
}

@media (max-width: 760px) {
    .equipment-card-media {
        width: 132px;
        height: 106px;
    }

    .equipment-card-media img {
        max-width: 132px;
        max-height: 98px;
    }

    .equipment-cta::after {
        width: 88%;
        right: -28%;
        top: 48%;
    }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, #e4ece8 0%, #edf4f0 45%, #e1ebe6 100%);
}

a { color: inherit; text-decoration: none; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 74px;
    padding: 12px max(24px, calc((100% - 1240px) / 2));
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: rgba(246, 250, 248, .92);
    backdrop-filter: blur(18px);
}

.brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand {
    flex: 0 0 auto;
    min-width: 270px;
}

.brand-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--green), var(--lime));
    box-shadow: 0 14px 32px rgba(22, 163, 74, .2);
}

.brand-mark.image-mark {
    overflow: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.brand-mark.image-mark::before,
.brand-mark.image-mark::after {
    display: none;
}

.brand-mark img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.brand-mark::before,
.brand-mark::after {
    content: "";
    position: absolute;
    border: 2px solid #fff;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.brand-mark::before {
    width: 21px;
    height: 12px;
    top: 13px;
}

.brand-mark::after {
    width: 9px;
    height: 5px;
    top: 23px;
}

.brand-text,
.footer-brand strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.brand-text span,
.footer-brand strong span { color: var(--green); }

.brand small {
    display: block;
    max-width: 185px;
    margin-top: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.25;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #475569;
    font-size: .9rem;
    font-weight: 800;
}

.main-nav a {
    position: relative;
    padding: 26px 0 23px;
}

.main-nav a:hover,
.main-nav a.active {
    color: #15803d;
}

.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #16a34a, #84cc16);
}

.top-actions,
.hero-actions,
.cabinet-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.top-actions {
    justify-content: flex-end;
    flex: 0 0 auto;
}

.top-actions .btn {
    min-height: 42px;
    border-radius: 12px;
}

.theme-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    color: #334155;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.theme-toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, .15);
}

.theme-toggle-icon::before {
    content: "";
    position: absolute;
    inset: 3px -3px 3px 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    opacity: 0;
    transition: opacity .2s ease;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.btn.primary,
.btn.green {
    color: #fff;
    background: linear-gradient(90deg, var(--green), var(--lime));
    box-shadow: 0 15px 35px rgba(22, 163, 74, .18);
}

.btn.secondary,
.btn.light {
    border-color: rgba(15, 23, 42, .12);
    color: #334155;
    background: rgba(255, 255, 255, .86);
}

.btn.dark,
.plan-card .btn.dark {
    color: #fff;
    background: var(--ink);
}

.btn.full { width: 100%; }

.home-v2 {
    width: min(1220px, calc(100% - 48px));
}

.home-v2-hero {
    position: relative;
    min-height: 420px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 38%, rgba(230, 239, 235, .42) 68%, rgba(230, 239, 235, .12) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .16);
}

.home-v2-copy {
    position: relative;
    z-index: 2;
    max-width: 460px;
    padding: 44px 44px 120px;
}

.home-v2-copy h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    line-height: 1.06;
}

.home-v2-copy p {
    margin: 20px 0 0;
    color: #344256;
    font-size: 1.08rem;
    line-height: 1.65;
}

.hero-v2-stats {
    position: absolute;
    z-index: 3;
    left: 34px;
    right: auto;
    bottom: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(145px, 1fr));
    gap: 12px;
    width: min(520px, calc(100% - 68px));
}

.hero-v2-stats article {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: rgba(236, 245, 240, .9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .11);
    backdrop-filter: blur(10px);
}

.hero-v2-stats .home-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.hero-v2-stats strong,
.hero-v2-stats small {
    display: block;
}

.hero-v2-stats strong {
    color: #162033;
    font-size: .86rem;
}

.hero-v2-stats small {
    margin-top: 3px;
    color: #516174;
    font-size: .78rem;
    font-weight: 700;
}

.feature-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.feature-row article,
.tariff-v2-card,
.why-v2-grid article {
    border: 1px solid rgba(15, 23, 42, .1);
    background: rgba(239, 247, 243, .9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .11);
}

.feature-row article {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    min-height: 132px;
    padding: 22px;
    border-radius: 28px;
}

.feature-row h3,
.why-v2-grid h3 {
    margin: 0;
    color: #142033;
    font-size: 1.06rem;
}

.feature-row p,
.why-v2-grid p,
.coverage-check-v2 p,
.cabinet-v2 p {
    margin: 8px 0 0;
    color: #526275;
    line-height: 1.55;
}

.tariff-v2,
.why-v2 {
    margin-top: 30px;
}

.section-title {
    text-align: center;
}

.section-title h2 {
    margin: 0;
    color: #142033;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
}

.section-title h2 span {
    color: #15943a;
}

.section-title p {
    margin: 8px 0 0;
    color: #526275;
}

.tariff-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.tariff-v2-card {
    position: relative;
    min-height: 290px;
    padding: 28px;
    border-radius: 22px;
}

.tariff-v2-card.featured {
    border-color: rgba(22, 163, 74, .36);
    background: #edf9f0;
    box-shadow: 0 18px 44px rgba(22, 163, 74, .16);
}

.tariff-v2-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.tariff-v2-head h3 {
    margin: 0 0 10px;
    color: #15803d;
    font-size: 1.15rem;
}

.tariff-v2-head strong {
    display: block;
    color: #111827;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.1;
}

.tariff-v2-card ul {
    display: grid;
    gap: 12px;
    min-height: 74px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: #46576b;
}

.tariff-v2-card li {
    position: relative;
    padding-left: 22px;
}

.tariff-v2-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #15943a;
    font-weight: 900;
}

.coverage-check-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: center;
    gap: 28px;
    margin-top: 30px;
    padding: 30px 38px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 28px;
    background: linear-gradient(120deg, #d4ece8 0%, #c8e0ec 48%, #c9efd3 100%);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
}

.coverage-check-v2 h2,
.cabinet-v2 h2 {
    margin: 0;
    color: #142033;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.coverage-check-v2 form {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr auto;
    gap: 10px;
    margin-top: 20px;
}

.coverage-check-v2 input {
    min-height: 48px;
    border-radius: 12px;
}

.map-card-v2 {
    position: relative;
    min-height: 190px;
    border-radius: 24px;
    background:
        linear-gradient(rgba(100, 116, 139, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .13) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,255,255,.55), rgba(181, 238, 211, .66));
    background-size: 34px 34px, 34px 34px, auto;
    transform: rotate(-4deg);
}

.map-card-v2 span {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #31b43a;
    box-shadow: 0 0 0 9px rgba(49, 180, 58, .18);
}

.map-card-v2 span:nth-child(1) { left: 20%; top: 25%; }
.map-card-v2 span:nth-child(2) { left: 42%; top: 54%; }
.map-card-v2 span:nth-child(3) { right: 24%; top: 34%; }
.map-card-v2 span:nth-child(4) { right: 15%; bottom: 22%; }

.map-card-v2 b {
    position: absolute;
    left: 51%;
    top: 37%;
    width: 78px;
    height: 78px;
    border-radius: 50% 50% 50% 8px;
    background: linear-gradient(135deg, #1aa03f, #72d94a);
    transform: rotate(-45deg);
    box-shadow: 0 18px 36px rgba(22, 163, 74, .25);
}

.map-card-v2 b::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
}

.why-v2-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.why-v2-grid article {
    min-height: 140px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(235, 244, 239, .82);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.why-v2-grid .home-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
}

.cabinet-v2 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 320px;
    align-items: center;
    gap: 28px;
    min-height: 150px;
    margin-top: 30px;
    padding: 30px 38px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(105deg, #15943a 0%, #51c9be 56%, #d6f8f0 100%);
    color: #fff;
    box-shadow: 0 18px 46px rgba(22, 163, 74, .18);
}

.cabinet-v2 h2,
.cabinet-v2 p {
    color: #fff;
}

.cabinet-v2 .btn {
    position: relative;
    z-index: 2;
}

.cabinet-device {
    position: absolute;
    right: 30px;
    bottom: -54px;
    width: 310px;
    height: 190px;
    border: 12px solid #162033;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(22, 163, 74, .14) 1px, transparent 1px),
        linear-gradient(180deg, #f8fffb, #e4f8ed);
    background-size: 28px 28px, auto;
    transform: rotate(7deg);
    box-shadow: 0 28px 55px rgba(15, 23, 42, .24);
}

.cabinet-device::before {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -18px;
    width: 96px;
    height: 150px;
    border: 9px solid #162033;
    border-radius: 22px;
    background: #f8fffb;
    transform: rotate(-8deg);
}

.tariffs-v2-page {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
}

.tariffs-v2-hero {
    min-height: 270px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 38%, rgba(230, 239, 235, .36) 70%, rgba(230, 239, 235, .08) 100%),
        url("../img/tariffs-router-hero.png") center right / cover no-repeat;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .15);
}

.tariffs-v2-hero > div {
    max-width: 620px;
    padding: 34px 40px;
}

.tariffs-v2-hero h1 {
    margin: 16px 0 0;
    color: #111827;
    font-size: clamp(2.25rem, 4.3vw, 3.65rem);
    line-height: 1.05;
}

.tariffs-v2-hero p {
    max-width: 560px;
    margin: 16px 0 0;
    color: #344256;
    font-size: 1.08rem;
    line-height: 1.65;
}

.tariffs-v2-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    margin-top: 24px;
}

.tariffs-v2-stage,
.coverage-list-v2 {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 30px;
    background: rgba(239, 247, 243, .9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .1);
}

.tariffs-v2-stage {
    min-height: 620px;
    padding: 32px;
}

.tariffs-city-view {
    display: none;
}

.tariffs-city-view.active {
    display: block;
}

.selected-place > span {
    color: #15803d;
    font-weight: 900;
}

.selected-place h2 {
    margin: 8px 0 0;
    color: #111827;
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1.05;
}

.place-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.place-meta article {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
}

.place-meta .home-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.place-meta strong,
.place-meta small {
    display: block;
}

.place-meta strong {
    color: #142033;
}

.place-meta small {
    margin-top: 4px;
    color: #526275;
}

.tariffs-subtitle {
    margin: 28px 0 16px;
    color: #142033;
    font-size: 1.45rem;
}

.tariffs-cards-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tariff-card-v2 {
    position: relative;
    min-height: 330px;
    padding: 24px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.tariff-card-v2.featured {
    border-color: rgba(22, 163, 74, .42);
    background: #edf9f0;
    box-shadow: 0 18px 42px rgba(22, 163, 74, .14);
}

.tariff-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tariff-card-top span {
    display: block;
    color: #0f6eb8;
    font-weight: 900;
}

.tariff-card-v2.featured .tariff-card-top span {
    color: #15803d;
}

.tariff-card-top h4 {
    margin: 12px 0 0;
    color: #111827;
    font-size: 1.75rem;
    line-height: 1.05;
}

.tariff-card-top b {
    min-width: 58px;
    padding: 8px 12px;
    border-radius: 14px;
    color: #1261ad;
    background: #e7f1fb;
    text-align: center;
}

.tariff-card-v2.featured .tariff-card-top b {
    color: #15803d;
    background: #dff5e5;
}

.tariff-card-v2 p {
    min-height: 52px;
    margin: 14px 0 0;
    color: #526275;
    line-height: 1.48;
}

.tariff-speed-price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.tariff-speed-price div + div {
    border-left: 1px solid rgba(15, 23, 42, .08);
    padding-left: 18px;
}

.tariff-speed-price strong,
.tariff-speed-price small {
    display: block;
}

.tariff-speed-price strong {
    color: #111827;
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.05;
}

.tariff-speed-price small {
    color: #526275;
}

.tariff-tags-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 18px;
}

.tariff-tags-v2 span {
    padding: 8px 12px;
    border-radius: 10px;
    color: #15803d;
    background: #dff5e5;
    font-size: .88rem;
    font-weight: 800;
}

.tariff-card-v2.empty {
    grid-column: span 2;
}

.tariff-benefits-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.tariff-benefits-mini article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .5);
}

.tariff-benefits-mini .home-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
}

.tariff-benefits-mini strong,
.tariff-benefits-mini small {
    display: block;
}

.tariff-benefits-mini small {
    margin-top: 5px;
    color: #526275;
}

.coverage-list-v2 {
    align-self: start;
    padding: 28px;
}

.coverage-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.coverage-list-head h2 {
    margin: 0;
    color: #142033;
    font-size: 1.6rem;
}

.coverage-list-head strong {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #15803d;
    background: #dff5e5;
    font-size: 1.15rem;
}

.coverage-search {
    position: relative;
    display: block;
    margin-top: 18px;
}

.coverage-search input {
    min-height: 52px;
    padding-left: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
}

.coverage-search span {
    position: absolute;
    left: 17px;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    transform: translateY(-50%);
}

.coverage-search span::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #94a3b8;
    transform: rotate(45deg);
}

.coverage-city-list {
    display: grid;
    gap: 4px;
    margin-top: 18px;
}

.coverage-city-button {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 12px 0 36px;
    border: 0;
    border-radius: 12px;
    color: #344256;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.coverage-city-button::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid #69778a;
    border-radius: 50% 50% 50% 2px;
    transform: translateY(-58%) rotate(-45deg);
}

.coverage-city-button span {
    font-weight: 800;
}

.coverage-city-button small {
    color: #526275;
    font-weight: 800;
}

.coverage-city-button.active {
    color: #15803d;
    background: #e3f4e8;
}

.coverage-city-button.active::before {
    border-color: #15803d;
}

.coverage-city-list:not(.open) .coverage-city-button.hidden-extra,
.coverage-city-button.search-hidden {
    display: none;
}

.show-cities {
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    border: 1px solid rgba(22, 163, 74, .45);
    border-radius: 14px;
    color: #15803d;
    background: rgba(255, 255, 255, .55);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.tariffs-request-v2 {
    width: 100%;
    margin-top: 28px;
}

.video-page {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
}

.video-hero {
    min-height: 300px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 38%, rgba(230, 239, 235, .38) 70%, rgba(230, 239, 235, .08) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .15);
}

.video-hero > div {
    max-width: 610px;
    padding: 36px 40px;
}

.video-hero h1 {
    margin: 16px 0 0;
    color: #111827;
    font-size: clamp(2.3rem, 4.4vw, 3.8rem);
    line-height: 1.05;
}

.video-hero p {
    max-width: 560px;
    margin: 16px 0 0;
    color: #344256;
    font-size: 1.05rem;
    line-height: 1.65;
}

.video-feature-row,
.video-packages,
.video-consult,
.video-why,
.video-cabinet {
    margin-top: 26px;
}

.video-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.video-package-card {
    position: relative;
    min-height: 360px;
    padding: 28px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 24px;
    background: rgba(239, 247, 243, .9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .1);
}

.video-package-card.featured {
    border-color: rgba(22, 163, 74, .42);
    background: #edf9f0;
    box-shadow: 0 18px 44px rgba(22, 163, 74, .15);
}

.video-package-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.video-package-head h3 {
    margin: 0;
    color: #142033;
    font-size: 1.35rem;
}

.video-package-head span {
    display: block;
    margin-top: 8px;
    color: #526275;
    font-weight: 800;
}

.camera-visual {
    position: relative;
    width: 86px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #dfe7e2);
    box-shadow: 0 16px 28px rgba(15, 23, 42, .12);
}

.camera-visual::before,
.camera-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.camera-visual::before {
    left: 20px;
    top: 13px;
    width: 32px;
    height: 32px;
    background: #101828;
    box-shadow: 32px 0 0 #101828;
}

.camera-visual::after {
    left: 29px;
    top: 22px;
    width: 14px;
    height: 14px;
    background: #55c939;
    box-shadow: 32px 0 0 #55c939;
}

.video-price {
    margin-top: 22px;
    color: #111827;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 900;
}

.video-price span {
    color: #526275;
    font-size: 1rem;
}

.video-package-card p {
    min-height: 48px;
    margin: 14px 0 0;
    color: #526275;
    line-height: 1.55;
}

.video-package-card ul {
    display: grid;
    gap: 10px;
    min-height: 136px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    color: #344256;
}

.video-package-card li {
    position: relative;
    padding-left: 22px;
}

.video-package-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #15803d;
    font-weight: 900;
}

.video-consult {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    align-items: center;
    gap: 28px;
    padding: 30px 38px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 28px;
    background: linear-gradient(120deg, #d4ece8 0%, #c8e0ec 48%, #c9efd3 100%);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
}

.video-consult h2 {
    margin: 0;
    color: #142033;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.video-consult p {
    color: #526275;
    line-height: 1.6;
}

.video-consult form {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr auto;
    gap: 10px;
    margin-top: 20px;
}

.video-map-card {
    position: relative;
    min-height: 190px;
    border-radius: 24px;
    background:
        linear-gradient(rgba(100, 116, 139, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .13) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,255,255,.55), rgba(181, 238, 211, .66));
    background-size: 34px 34px, 34px 34px, auto;
}

.video-map-card span {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #31b43a;
    box-shadow: 0 0 0 9px rgba(49, 180, 58, .18);
}

.video-map-card span:nth-child(1) { left: 18%; top: 24%; }
.video-map-card span:nth-child(2) { left: 43%; top: 58%; }
.video-map-card span:nth-child(3) { right: 20%; top: 30%; }
.video-map-card span:nth-child(4) { right: 14%; bottom: 20%; }

.video-map-card b {
    position: absolute;
    left: 51%;
    top: 35%;
    width: 78px;
    height: 78px;
    border-radius: 50% 50% 50% 8px;
    background: linear-gradient(135deg, #1aa03f, #72d94a);
    transform: rotate(-45deg);
    box-shadow: 0 18px 36px rgba(22, 163, 74, .25);
}

.video-map-card b::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
}

.home-icon.cloud::before { content: "☁"; }

.news-page {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
}

.news-hero {
    min-height: 210px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 42%, rgba(230, 239, 235, .38) 72%, rgba(230, 239, 235, .08) 100%),
        url("../img/news-hero.png") center right / cover no-repeat;
    box-shadow: 0 20px 54px rgba(15, 23, 42, .13);
}

.news-hero > div {
    max-width: 580px;
    padding: 42px 44px;
}

.news-hero h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(2.45rem, 4.8vw, 4rem);
    line-height: 1.05;
}

.news-hero h1 span {
    color: #15803d;
}

.news-hero p {
    margin: 18px 0 0;
    color: #344256;
    font-size: 1.08rem;
    line-height: 1.65;
}

.news-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: center;
    margin-top: 26px;
}

.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.news-filters button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 10px;
    color: #344256;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.news-filters button.active {
    color: #fff;
    background: #107c2f;
}

.news-search {
    position: relative;
    display: block;
}

.news-search input {
    min-height: 48px;
    padding-right: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
}

.news-search span {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    transform: translateY(-50%);
}

.news-search span::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #94a3b8;
    transform: rotate(45deg);
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 26px;
    align-items: start;
    margin-top: 24px;
}

.news-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-card-v2 {
    min-height: 320px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: rgba(239, 247, 243, .9);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.news-card-v2.hidden {
    display: none;
}

.news-thumb {
    position: relative;
    min-height: 126px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #dceee6, #9dd98a);
}

.news-thumb span {
    position: absolute;
    right: 12px;
    top: 10px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fff;
    background: #15803d;
    font-size: .78rem;
    font-weight: 900;
}

.news-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--news-image, none) center / cover no-repeat;
}

.news-thumb.has-image {
    background-position: center;
    background-size: cover;
}

.news-thumb.has-image::before {
    display: none;
}

.news-thumb::after,
.popular-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 28%, rgba(103, 214, 58, .52), transparent 26%),
        linear-gradient(135deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .16));
}

.visual-1 { --news-image: url("../img/tariffs-router-hero.png"); }
.visual-2 { --news-image: url("../img/news-hero.png"); }
.visual-3 { --news-image: url("../img/hero-family-zasnet.png"); }
.visual-4 { --news-image: url("../img/video-surveillance-hero.png"); }
.visual-5 { --news-image: url("../img/tariffs-router-hero.png"); }
.visual-6 { --news-image: url("../img/hero-zasnet.png"); }

.news-card-v2 time {
    display: block;
    margin-top: 16px;
    color: #64748b;
    font-size: .9rem;
    font-weight: 800;
}

.news-card-v2 h2 {
    margin: 10px 0 0;
    color: #142033;
    font-size: 1.25rem;
    line-height: 1.18;
}

.news-card-v2 p {
    min-height: 48px;
    margin: 10px 0 0;
    color: #526275;
    line-height: 1.5;
}

.read-more {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    color: #15803d;
    font-weight: 900;
}

.read-more::after {
    content: "→";
    margin-left: 10px;
}

.news-sidebar {
    display: grid;
    gap: 22px;
}

.sidebar-panel,
.subscribe-panel {
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: rgba(239, 247, 243, .9);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.sidebar-panel h3,
.subscribe-panel h3 {
    margin: 0;
    color: #142033;
    font-size: 1.2rem;
}

.popular-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.popular-list a {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    align-items: center;
}

.popular-thumb {
    position: relative;
    min-height: 58px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--news-image, linear-gradient(135deg, #dceee6, #9dd98a)) center / cover no-repeat;
}

.popular-list strong,
.popular-list small {
    display: block;
}

.popular-list strong {
    color: #142033;
    line-height: 1.25;
}

.popular-list small {
    margin-top: 6px;
    color: #64748b;
    font-size: .82rem;
}

.subscribe-panel {
    background:
        linear-gradient(135deg, rgba(239, 247, 243, .94), rgba(225, 244, 232, .96));
}

.subscribe-panel p {
    color: #526275;
    line-height: 1.55;
}

.subscribe-panel form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.news-article-page {
    width: min(920px, calc(100% - 48px));
    margin: 28px auto 0;
}

.news-article-card {
    padding: 28px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 26px;
    background: rgba(239, 247, 243, .92);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .1);
}

.news-article-visual {
    min-height: 260px;
    margin: 14px 0 22px;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(230, 239, 235, .3), rgba(230, 239, 235, .05)),
        url("../img/news-hero.png") center right / cover no-repeat;
}

.news-article-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    margin: 14px 0 22px;
    border-radius: 20px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
}

.news-article-card time {
    display: block;
    color: #15803d;
    font-weight: 900;
}

.news-article-card h1 {
    margin: 14px 0 0;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.08;
}

.news-article-card .lead {
    color: #526275;
    font-size: 1.15rem;
    line-height: 1.7;
}

.about-page {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
}

.about-hero {
    min-height: 350px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .9) 40%, rgba(230, 239, 235, .34) 72%, rgba(230, 239, 235, .06) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .15);
}

.about-hero > div {
    max-width: 620px;
    padding: 50px 44px;
}

.about-hero h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(2.7rem, 5vw, 4.6rem);
    line-height: 1.05;
}

.about-hero h1::first-letter,
.about-hero h1 span {
    color: #15803d;
}

.about-hero p {
    margin: 20px 0 0;
    color: #344256;
    font-size: 1.08rem;
    line-height: 1.68;
}

.about-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.about-badges article {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.about-badges .home-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.about-badges strong,
.about-badges small {
    display: block;
}

.about-badges small {
    margin-top: 4px;
    color: #526275;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.about-stats article,
.about-mission,
.about-why,
.documents-grid article,
.timeline-row article {
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(239, 247, 243, .9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
}

.about-stats article {
    min-height: 128px;
    padding: 24px;
    border-radius: 22px;
}

.about-stats strong {
    display: block;
    color: #111827;
    font-size: clamp(2rem, 4vw, 2.55rem);
    line-height: 1;
}

.about-stats span {
    display: block;
    margin-top: 12px;
    color: #526275;
    line-height: 1.45;
}

.about-main-grid {
    display: grid;
    grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
    align-items: stretch;
    gap: 22px;
    margin-top: 26px;
}

.about-mission,
.about-why {
    padding: 28px;
    border-radius: 24px;
}

.about-mission {
    display: flex;
    flex-direction: column;
}

.about-mission h2,
.about-why h2,
.about-documents h2,
.about-timeline h2 {
    margin: 0;
    color: #142033;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.about-why h2 span {
    color: #15803d;
}

.about-mission p {
    color: #344256;
    line-height: 1.7;
}

.mission-illustration {
    min-height: 96px;
    margin: auto -28px -28px;
    border-radius: 0 0 24px 24px;
    background:
        radial-gradient(circle at 20% 46%, rgba(74, 222, 128, .34), transparent 25%),
        radial-gradient(circle at 78% 72%, rgba(14, 165, 233, .14), transparent 26%),
        linear-gradient(180deg, #eaf7ee, #cde9da);
}

.about-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.about-why-grid article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";
    column-gap: 18px;
    row-gap: 8px;
    align-items: start;
    min-height: 132px;
    padding: 20px 22px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 18px;
    background: rgba(255, 255, 255, .56);
}

.about-why-grid .home-icon {
    grid-area: icon;
    width: 54px;
    height: 54px;
    margin-bottom: 0;
}

.about-why-grid h3,
.documents-grid h3,
.timeline-row h3 {
    margin: 0;
    color: #142033;
}

.about-why-grid h3 {
    grid-area: title;
    max-width: 12rem;
    font-size: 1.04rem;
    line-height: 1.2;
}

.about-why-grid p,
.about-documents p,
.timeline-row p {
    color: #526275;
    line-height: 1.55;
}

.about-why-grid p {
    grid-area: text;
    margin: 0;
    font-size: .93rem;
}

.about-documents,
.about-timeline,
.about-cta {
    margin-top: 30px;
}

.documents-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.documents-grid article {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    align-items: center;
    min-height: 116px;
    padding: 20px;
    border-radius: 18px;
}

.documents-grid a {
    grid-column: 2;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 163, 74, .45);
    border-radius: 10px;
    color: #15803d;
    font-weight: 900;
}

.timeline-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.timeline-row article {
    position: relative;
    min-height: 190px;
    padding: 20px;
    border-radius: 18px;
    box-shadow: none;
}

.timeline-row article::before {
    content: "";
    position: absolute;
    left: 62px;
    right: -26px;
    top: 36px;
    height: 2px;
    background: rgba(22, 163, 74, .35);
}

.timeline-row article:last-child::before {
    display: none;
}

.timeline-row .home-icon {
    margin-bottom: 16px;
}

.timeline-row strong {
    color: #142033;
}

.home-icon.document::before { content: "▤"; }

.home-page {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
}

.home-hero {
    position: relative;
    min-height: 530px;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(250, 253, 251, .98) 0%, rgba(250, 253, 251, .9) 42%, rgba(250, 253, 251, .48) 70%, rgba(250, 253, 251, .15) 100%),
        url("../img/hero-zasnet.png") center right / cover no-repeat;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .12);
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 135px;
    background: linear-gradient(180deg, transparent, rgba(244, 250, 247, .72));
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 58px 46px;
}

.home-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(22, 163, 74, .24);
    border-radius: 999px;
    color: #15803d;
    background: rgba(255, 255, 255, .76);
    font-weight: 900;
}

.home-hero h1 {
    margin: 20px 0 0;
    color: #0f172a;
    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: 1;
}

.home-hero h1 span {
    display: block;
    color: #3fca35;
}

.home-hero p {
    max-width: 520px;
    margin: 22px 0 0;
    color: #334155;
    font-size: 1.15rem;
    line-height: 1.72;
}

.hero-float {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 2px solid rgba(22, 163, 74, .45);
    border-radius: 50%;
    color: #15803d;
    background: rgba(240, 253, 244, .72);
    box-shadow: 0 18px 40px rgba(22, 163, 74, .16);
    font-weight: 900;
}

.f-wifi { right: 30%; top: 26%; }
.f-game { right: 9%; top: 24%; }
.f-4k { right: 5%; bottom: 26%; }

.home-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.metric-card,
.home-board,
.coverage-mini,
.why-mini {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 55px rgba(15, 23, 42, .08);
}

.metric-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 18px;
    min-height: 140px;
    padding: 24px;
}

.metric-card small,
.home-plan p,
.benefit-strip p,
.coverage-mini p,
.why-mini li,
.metric-card p {
    color: var(--muted);
}

.metric-card small {
    display: block;
    font-weight: 800;
}

.metric-card strong {
    display: block;
    margin-top: 6px;
    color: #36b92f;
    font-size: clamp(1.65rem, 3vw, 2rem);
    line-height: 1.05;
}

.metric-card p {
    margin: 8px 0 0;
    line-height: 1.45;
}

.home-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: rgba(63, 202, 53, .1);
    color: #36b92f;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .1);
}

.home-icon::before {
    font-size: 1.58rem;
    font-weight: 900;
}

.home-icon.bolt::before { content: "ϟ"; }
.home-icon.headset::before { content: "◖"; }
.home-icon.shield::before { content: "✓"; }
.home-icon.rocket::before { content: "↗"; }
.home-icon.leaf::before { content: "◌"; }
.home-icon.speed::before { content: "≋"; }
.home-icon.cup::before { content: "♕"; }
.home-icon.fiber::before { content: "⌁"; }
.home-icon.wifi::before { content: "⌒"; }
.home-icon.router::before { content: "▣"; }
.home-icon.lock::before { content: "▥"; }
.home-icon.home::before { content: "⌂"; }
.home-icon.family::before { content: "◎"; }
.home-icon.laptop::before { content: "▭"; }
.home-icon.wallet::before { content: "▤"; }
.home-icon.sale::before { content: "%"; }
.home-icon.phone::before { content: "⌕"; }
.home-icon.email::before { content: "□"; }
.home-icon.map-pin::before { content: "⌖"; }
.home-icon.send::before { content: "↗"; }
.home-icon.thumbs::before { content: "✓"; }

.home-board {
    margin-top: 22px;
    padding: 24px;
}

.board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.board-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.55rem, 3vw, 2rem);
}

.board-head a {
    color: #15803d;
    font-weight: 900;
}

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

.home-plan {
    position: relative;
    min-height: 268px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
}

.home-plan.featured {
    border-color: rgba(22, 163, 74, .45);
    background: linear-gradient(180deg, #f8fff9 0%, #ecfdf5 100%);
    box-shadow: 0 16px 38px rgba(22, 163, 74, .12);
}

.plan-chip {
    position: absolute;
    right: 16px;
    top: 18px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #fff;
    background: #65a30d;
    font-size: .78rem;
    font-weight: 900;
}

.home-plan h3 {
    margin: 18px 0 0;
    color: #0f172a;
    font-size: 1.2rem;
}

.home-plan strong {
    display: block;
    margin-top: 8px;
    color: #36b92f;
    font-size: 1.35rem;
}

.home-plan p {
    min-height: 46px;
    margin: 12px 0 0;
    line-height: 1.45;
}

.plan-price {
    margin: 18px 0 14px;
    color: #0f172a;
    font-size: 1.7rem;
    font-weight: 900;
}

.plan-price span {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
}

.benefit-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.benefit-strip article {
    min-height: 156px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #fbfffc;
}

.benefit-strip .home-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
}

.benefit-strip h3 {
    margin: 13px 0 0;
    color: #15803d;
    font-size: .96rem;
}

.benefit-strip p {
    margin: 8px 0 0;
    font-size: .88rem;
    line-height: 1.45;
}

.home-lower {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 18px;
    margin-top: 22px;
}

.coverage-mini,
.why-mini {
    min-height: 280px;
    overflow: hidden;
}

.coverage-mini {
    display: grid;
    grid-template-columns: .72fr 1fr;
    gap: 18px;
    padding: 24px;
}

.coverage-mini h2,
.why-mini h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.55rem;
}

.coverage-mini p {
    line-height: 1.6;
}

.coverage-mini strong {
    display: block;
    color: #36b92f;
    font-size: 2.9rem;
    line-height: 1;
}

.coverage-mini span {
    display: block;
    margin: 8px 0 18px;
    color: #334155;
    line-height: 1.35;
}

.coverage-map-mini {
    position: relative;
    min-height: 230px;
    border-radius: 20px;
    background:
        linear-gradient(rgba(100, 116, 139, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .12) 1px, transparent 1px),
        linear-gradient(135deg, #eaf8f0, #f8fffb);
    background-size: 30px 30px, 30px 30px, auto;
}

.coverage-map-mini i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6bdc36;
    box-shadow: 0 0 0 8px rgba(107, 220, 54, .15);
}

.coverage-map-mini i:nth-child(1) { left: 18%; top: 28%; }
.coverage-map-mini i:nth-child(2) { left: 35%; top: 44%; }
.coverage-map-mini i:nth-child(3) { left: 58%; top: 30%; }
.coverage-map-mini i:nth-child(4) { left: 76%; top: 52%; }
.coverage-map-mini i:nth-child(5) { left: 24%; bottom: 20%; }
.coverage-map-mini i:nth-child(6) { left: 49%; bottom: 26%; }
.coverage-map-mini i:nth-child(7) { right: 15%; bottom: 20%; }
.coverage-map-mini i:nth-child(8) { right: 27%; top: 20%; }

.why-mini {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 20px;
    padding: 28px;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .9) 0%, rgba(240, 253, 244, .92) 58%, rgba(216, 246, 218, .88) 100%);
}

.why-mini ul {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.why-mini li {
    position: relative;
    padding-left: 24px;
}

.why-mini li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #36b92f;
    font-weight: 900;
}

.z-glow {
    align-self: center;
    justify-self: center;
    color: rgba(63, 202, 53, .58);
    font-size: 12rem;
    font-weight: 900;
    line-height: .8;
    text-shadow: 0 18px 42px rgba(34, 197, 94, .26);
    transform: skewX(-10deg);
}

.home-page .request-band {
    width: 100%;
    margin-top: 22px;
}

.hero-modern {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;
    gap: 42px;
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 72px 0 34px;
}

.hero-copy { max-width: 680px; }

.pill,
.section-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(22, 163, 74, .2);
    border-radius: 999px;
    color: #047857;
    background: rgba(255, 255, 255, .82);
    font-size: .88rem;
    font-weight: 900;
}

.pill.dark {
    border-color: rgba(52, 211, 153, .22);
    color: #a7f3d0;
    background: rgba(52, 211, 153, .1);
}

.hero-modern h1 {
    margin: 20px 0 0;
    color: #020617;
    font-size: clamp(2.7rem, 5vw, 5.3rem);
    line-height: 1.02;
}

.hero-modern h1::first-line { color: var(--ink); }

.hero-copy p {
    max-width: 610px;
    margin: 22px 0 0;
    color: #475569;
    font-size: 1.08rem;
    line-height: 1.75;
}

.hero-actions { margin-top: 30px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.stats-grid div,
.feature-card,
.news-grid article {
    border: 1px solid rgba(255, 255, 255, .8);
    background: var(--surface);
    box-shadow: 0 15px 50px rgba(15, 23, 42, .06);
    backdrop-filter: blur(14px);
}

.stats-grid div {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
}

.stats-grid strong {
    display: block;
    color: #020617;
    font-size: 1.7rem;
    line-height: 1.1;
}

.stats-grid span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.35;
}

.hero-showcase {
    display: grid;
    grid-template-columns: 1fr .92fr;
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 34px;
    background: linear-gradient(135deg, #ffffff 0%, #edf7f1 55%, #e7f2ee 100%);
    box-shadow: var(--shadow);
}

.dark-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 430px;
    padding: 28px;
    border-radius: 28px;
    color: #fff;
    background: var(--ink);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .22);
}

.dark-card h2 {
    margin: 28px 0 0;
    font-size: 1.8rem;
    line-height: 1.16;
}

.dark-card p {
    color: #cbd5e1;
    line-height: 1.65;
}

.mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.mini-metrics div {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
}

.mini-metrics span {
    display: block;
    color: #86efac;
    font-size: .86rem;
}

.mini-metrics strong {
    display: block;
    margin-top: 7px;
}

.network-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 22% 18%, rgba(52, 211, 153, .28), transparent 35%),
        linear-gradient(180deg, #dff3e8 0%, #f9fcfb 100%);
}

.building {
    position: absolute;
    inset: 70px 34px 34px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 28px;
    background: linear-gradient(180deg, #f8fbfa 0%, #dfe9e4 100%);
    box-shadow: 0 25px 80px rgba(15, 23, 42, .12);
}

.building::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(52, 211, 153, .6), transparent);
}

.building span {
    position: absolute;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
}

.building span:nth-child(1) { left: 20px; top: 30px; width: 72px; height: 62px; }
.building span:nth-child(2) { right: 24px; top: 44px; width: 88px; height: 74px; }
.building span:nth-child(3) { left: 34px; right: 34px; bottom: 30px; height: 120px; }

.floating-note {
    position: absolute;
    z-index: 2;
    min-width: 150px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 35px rgba(15, 23, 42, .12);
}

.floating-note b,
.floating-note span { display: block; }
.floating-note span { margin-top: 4px; color: var(--muted); font-size: .9rem; }
.note-speed { left: 18px; top: 18px; }
.note-safe { right: 18px; bottom: 18px; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: min(1240px, calc(100% - 32px));
    margin: 32px auto 0;
}

.feature-card {
    min-height: 220px;
    padding: 26px;
    border-radius: 28px;
}

.icon-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: var(--green);
    background: linear-gradient(135deg, #dcfce7, #ecfccb);
    font-weight: 900;
}

.icon-mark.dark {
    color: #fff;
    background: linear-gradient(135deg, var(--green), var(--lime));
}

.feature-card h3 {
    margin: 22px 0 0;
    font-size: 1.12rem;
}

.feature-card p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.plans-section,
.coverage-section,
.why-section,
.cabinet-band,
.request-band,
.news-section,
.section {
    width: min(1240px, calc(100% - 32px));
    margin: 72px auto 0;
}

.plans-section {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 36px;
    background: linear-gradient(180deg, #0f172a 0%, #162033 18%, #f7faf8 18%, #f7faf8 100%);
    box-shadow: 0 24px 90px rgba(15, 23, 42, .1);
}

.plans-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 36px 0;
}

.plans-head h2 {
    margin: 18px 0 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.plans-head p {
    max-width: 680px;
    margin: 14px 0 0;
    color: #cbd5e1;
    line-height: 1.65;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    padding: 42px 36px 36px;
}

.city-switcher {
    display: flex;
    gap: 10px;
    margin: 30px 36px 0;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 22px;
    background: rgba(255, 255, 255, .74);
}

.city-switcher a {
    min-width: max-content;
    padding: 12px 16px;
    border-radius: 16px;
    color: #334155;
    font-weight: 900;
}

.city-switcher a.active {
    color: #fff;
    background: var(--ink);
}

.city-switcher span,
.city-switcher small,
.selected-city span,
.selected-city strong {
    display: block;
}

.city-switcher small {
    margin-top: 4px;
    color: inherit;
    opacity: .72;
    font-size: .78rem;
}

.selected-city {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 36px 0;
    color: #fff;
}

.selected-city span {
    color: #a7f3d0;
    font-weight: 900;
}

.selected-city strong {
    font-size: 1.35rem;
}

.tariff-experience {
    width: min(1240px, calc(100% - 32px));
    margin: 58px auto 0;
    overflow: visible;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 38px;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, .12), transparent 34%),
        linear-gradient(180deg, #0f172a 0%, #162033 26%, #f7faf8 26%, #f7faf8 100%);
    box-shadow: 0 24px 90px rgba(15, 23, 42, .1);
}

.tariff-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 38px;
}

.tariff-intro h1 {
    max-width: 820px;
    margin: 18px 0 0;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    line-height: 1.05;
}

.tariff-intro p {
    max-width: 720px;
    color: #cbd5e1;
    line-height: 1.7;
}

.tariff-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    padding: 0 38px 38px;
}

.city-rail {
    order: 2;
    min-height: 620px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 30px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 55px rgba(15, 23, 42, .08);
}

.city-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 8px 16px;
}

.city-rail-head span {
    color: var(--muted);
    font-weight: 900;
}

.city-rail-head strong {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    background: var(--ink);
}

.city-scroll {
    display: grid;
    gap: 8px;
    max-height: 540px;
    overflow: auto;
    padding-right: 6px;
}

.city-button {
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    color: #475569;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.city-button:hover {
    transform: translateX(-3px);
    border-color: rgba(22, 163, 74, .16);
    background: #ecfdf5;
}

.city-button.active {
    color: #fff;
    background: linear-gradient(135deg, #0f172a, #1f3b2b);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}

.city-button span,
.city-button small {
    display: block;
}

.city-button span {
    font-weight: 900;
}

.city-button small {
    margin-top: 4px;
    opacity: .72;
}

.tariff-stage {
    position: relative;
    min-height: 0;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 32px;
    background:
        linear-gradient(rgba(100, 116, 139, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .1) 1px, transparent 1px),
        linear-gradient(180deg, #fdfefe 0%, #edf5f1 100%);
    background-size: 38px 38px, 38px 38px, auto;
    box-shadow: 0 16px 55px rgba(15, 23, 42, .08);
}

.signal-scene {
    position: absolute;
    inset: auto 28px 24px auto;
    width: 210px;
    height: 210px;
    opacity: .72;
}

.signal-dot,
.signal-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.signal-dot {
    width: 24px;
    height: 24px;
    background: var(--green);
    box-shadow: 0 0 0 12px rgba(22, 163, 74, .14);
}

.signal-ring {
    border: 1px solid rgba(22, 163, 74, .22);
}

.ring-one { width: 82px; height: 82px; }
.ring-two { width: 142px; height: 142px; }
.ring-three { width: 202px; height: 202px; }

.city-panel {
    position: relative;
    display: none;
    flex-direction: column;
    gap: 24px;
    padding: 34px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(22px);
    transition: opacity .28s ease, transform .28s ease;
}

.city-panel.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.city-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.city-kicker {
    color: var(--green);
    font-size: .88rem;
    font-weight: 900;
}

.city-panel h2 {
    margin: 8px 0 0;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1;
}

.city-panel-head p {
    max-width: 620px;
    margin: 14px 0 0;
    color: var(--muted);
    line-height: 1.65;
}

.city-summary {
    min-width: 140px;
    padding: 18px;
    border-radius: 22px;
    color: #fff;
    background: var(--ink);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}

.city-summary strong,
.city-summary span {
    display: block;
}

.city-summary strong {
    font-size: 2.2rem;
}

.city-summary span {
    color: #cbd5e1;
}

.tariff-orbit {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.city-panel.active .tariff-tile {
    animation: tariffRise .42s ease both;
    animation-delay: var(--delay);
}

@keyframes tariffRise {
    from { opacity: 0; transform: translateY(18px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
}

.tariff-tile {
    min-height: 430px;
    padding: 24px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 30px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.tariff-tile.accent {
    background: linear-gradient(180deg, #ffffff 0%, #eefaf2 100%);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .16), 0 18px 45px rgba(15, 23, 42, .08);
}

.tile-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tile-topline span,
.tile-topline b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 900;
}

.tile-topline span {
    color: #047857;
    background: #dcfce7;
}

.tile-topline b {
    color: #fff;
    background: var(--ink);
}

.tariff-tile h3 {
    margin: 22px 0 0;
    font-size: 1.8rem;
}

.tariff-tile p {
    min-height: 92px;
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.tile-speed {
    margin: 22px 0;
    padding: 20px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #0f172a, #1f3b2b);
}

.tile-speed span,
.tile-speed strong {
    display: block;
}

.tile-speed span {
    color: #86efac;
    font-weight: 900;
}

.tile-speed strong {
    margin-top: 8px;
    font-size: 1.35rem;
}

.tile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tile-tags span {
    padding: 8px 10px;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    font-size: .86rem;
    font-weight: 800;
}

.tariff-tile.empty {
    grid-column: span 2;
}

.plan-card {
    position: relative;
    min-height: 520px;
    padding: 26px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.plan-card.featured {
    border-color: rgba(22, 163, 74, .24);
    background: linear-gradient(180deg, #ffffff 0%, #eefaf2 100%);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .16), 0 20px 60px rgba(15, 23, 42, .08);
}

.badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    padding: 9px 14px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, var(--green), var(--lime));
    box-shadow: 0 12px 28px rgba(22, 163, 74, .22);
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.plan-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.plan-top h3 {
    margin: 0;
    font-size: 1.7rem;
}

.plan-top p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.speed-box {
    margin-top: 28px;
    padding: 22px;
    border-radius: 24px;
    color: #fff;
    background: var(--ink);
}

.speed-box span,
.speed-box strong,
.speed-box b { display: block; }
.speed-box span { color: #86efac; }
.speed-box strong { margin-top: 8px; font-size: 2rem; line-height: 1.08; }
.speed-box b { margin-top: 10px; font-size: 1.25rem; }

.feature-list {
    display: grid;
    gap: 12px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
    color: #334155;
}

.feature-list li {
    position: relative;
    padding-left: 24px;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
}

.coverage-section {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 24px;
}

.coverage-panel,
.map-panel,
.cabinet-band,
.request-band {
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 32px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 15px 50px rgba(15, 23, 42, .06);
}

.coverage-panel { padding: 34px; }

.active-area-card {
    width: 100%;
    margin-top: 26px;
    padding: 18px 20px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 26px;
    background: #0f172a;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .08);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

.active-area-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
}

.active-area-copy {
    position: relative;
    display: block;
    min-width: 0;
    padding-left: 24px;
}

.active-area-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 0 7px rgba(34, 197, 94, .18);
}

.active-area-card strong {
    display: block;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.08;
}

.active-area-card small {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.55;
}

.active-area-card em {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #bbf7d0;
    font-size: .9rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.coverage-panel h2,
.center-head h2,
.cabinet-band h2,
.request-band h2,
.section-head h1,
.section-head h2 {
    margin: 14px 0 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.08;
}

.coverage-panel p,
.cabinet-band p,
.request-band p {
    color: var(--muted);
    line-height: 1.7;
}

.coverage-form,
.lead-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

input,
.lead-form select {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 16px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.lead-form select {
    appearance: none;
    cursor: pointer;
}

.coverage-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.coverage-tags div {
    padding: 18px;
    border-radius: 20px;
    background: #f1f5f9;
}

.coverage-tags div:first-child { background: #dcfce7; }
.coverage-tags span,
.coverage-tags b { display: block; }
.coverage-tags span { color: #047857; font-size: .9rem; }
.coverage-tags b { margin-top: 6px; }

.map-panel {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background: linear-gradient(180deg, #e7f6ee 0%, #f8fbfa 100%);
}

.map-grid {
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 28px;
    background:
        linear-gradient(rgba(100, 116, 139, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .12) 1px, transparent 1px),
        linear-gradient(180deg, #fdfefe 0%, #edf5f1 100%);
    background-size: 36px 36px, 36px 36px, auto;
}

.map-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 10px rgba(22, 163, 74, .15);
}

.dot-a { left: 25%; top: 27%; }
.dot-b { right: 24%; top: 34%; background: var(--lime); }
.dot-c { left: 34%; bottom: 25%; }
.dot-d { right: 33%; bottom: 34%; background: var(--lime); }

.home-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 112px;
    transform: translate(-50%, -50%);
    border: 8px solid #bbf7d0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .18);
}

.home-node::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 34px;
    width: 38px;
    height: 32px;
    border-radius: 5px;
    background: var(--green);
}

.home-node::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 23px;
    width: 50px;
    height: 50px;
    transform: rotate(45deg);
    border-left: 10px solid var(--green);
    border-top: 10px solid var(--green);
}

.center-head {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.cabinet-band,
.request-band {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 34px;
}

.cabinet-band {
    background: linear-gradient(120deg, #e8f7ef 0%, #f7faf8 45%, #eef5ff 100%);
}

.request-band { grid-template-columns: .82fr 1fr; }

.news-grid,
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-grid { margin-top: 32px; }

.news-grid article,
.tariff-card,
.panel-card {
    padding: 28px;
    border-radius: 28px;
}

.news-grid time,
.tariff-card span {
    color: var(--green);
    font-weight: 900;
}

.news-grid h3,
.tariff-card h3 {
    margin: 12px 0 0;
    font-size: 1.35rem;
}

.news-grid p,
.tariff-card p {
    color: var(--muted);
    line-height: 1.65;
}

.page { padding-top: 28px; }

.section-head {
    max-width: 760px;
    margin-bottom: 28px;
}

.area-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 30px 0 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    max-height: 1400px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: max-height .34s ease, opacity .22s ease, margin .22s ease, padding .22s ease, transform .22s ease;
}

.area-list.collapsed {
    margin: 0;
    padding-top: 0;
    border-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-8px);
}

.area-list div {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.area-list div.active {
    border-color: rgba(16, 185, 129, .32);
    background: #ecfdf5;
    color: var(--ink);
    box-shadow: 0 12px 30px rgba(16, 185, 129, .12);
}

.area-list small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.area-list div.active small {
    color: var(--muted);
}

.content-page {
    width: min(860px, calc(100% - 32px));
    margin: 54px auto 0;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}

.content-page time,
.small-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--green);
    font-weight: 900;
}

.content-page h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
}

.content-page .lead,
.content-body {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.contacts-hero,
.contact-map-section {
    width: min(1240px, calc(100% - 32px));
    margin: 24px auto 0;
}

.contacts-hero {
    min-height: 238px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(246, 250, 248, .98) 0%, rgba(246, 250, 248, .9) 32%, rgba(246, 250, 248, .2) 55%, rgba(246, 250, 248, 0) 100%),
        var(--contacts-hero-image, url("../img/contacts-office-hero.png")) center right / cover no-repeat;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}

.contacts-copy,
.contacts-card,
.map-copy,
.map-frame {
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 30px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 15px 50px rgba(15, 23, 42, .06);
    backdrop-filter: blur(14px);
}

.contacts-copy,
.map-copy {
    padding: 36px;
}

.contacts-hero .contacts-copy {
    max-width: 540px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.contacts-copy h1,
.map-copy h2 {
    margin: 14px 0 0;
    font-size: clamp(2.45rem, 4.4vw, 3.55rem);
    line-height: 1.04;
}

.contacts-copy p,
.map-copy p,
.contacts-card p {
    color: var(--muted);
    line-height: 1.7;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.contacts-card {
    min-height: 128px;
    padding: 18px;
    overflow: hidden;
}

.office-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, #0f172a 0%, #162033 100%);
    color: #fff;
}

.office-card p { color: #cbd5e1; }

.office-card span { color: #86efac; }

.contacts-card h2,
.contacts-card h3 {
    margin: 12px 0 8px;
}

.contacts-card h3 {
    font-size: .96rem;
}

.contacts-card strong {
    display: block;
    color: #111827;
    font-size: .93rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.contacts-card p {
    margin: 12px 0 0;
    font-size: .9rem;
}

.contacts-card h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.contacts-card a {
    display: inline-flex;
    margin-top: 10px;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.25;
}

.office-card a { color: #86efac; }

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    width: min(1240px, calc(100% - 32px));
    margin: 24px auto 0;
}

.contacts-grid > .contacts-card:nth-child(3) {
    min-width: 230px;
}

.contacts-grid > .contacts-card:nth-child(4),
.contacts-grid > .contacts-card:nth-child(5) {
    min-width: 210px;
}

.contact-map-section {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 18px;
    align-items: stretch;
}

.contact-map-panel,
.contact-form-panel {
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.contact-map-panel h2,
.contact-form-panel h2 {
    margin: 0 0 14px;
    color: #142033;
    font-size: 1.35rem;
}

.map-frame {
    position: relative;
    min-height: 252px;
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    background: #e7f6ee;
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 252px;
    border: 0;
}

.map-card {
    position: absolute;
    left: 24px;
    top: 24px;
    width: min(250px, calc(100% - 48px));
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .14);
}

.map-card strong,
.map-card span,
.map-card small {
    display: block;
}

.map-card strong {
    color: #15803d;
    font-size: 1.2rem;
}

.map-card span {
    margin-top: 10px;
    color: #142033;
    font-weight: 900;
}

.map-card small {
    margin-top: 6px;
    color: #64748b;
    line-height: 1.4;
}

.map-card a {
    display: block;
    margin-top: 12px;
    color: #15803d;
    font-weight: 900;
}

.contact-icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 2px;
}

.contact-icon-row a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 50%;
    color: #fff;
    background: #0ea5e9;
    font-size: .78rem;
    font-weight: 900;
}

.contact-icon-row a:nth-child(2) { background: #7c3aed; }
.contact-icon-row a:nth-child(3) { background: #16a34a; }
.contact-icon-row.social a:nth-child(1) { background: #1877f2; }
.contact-icon-row.social a:nth-child(2) { background: #e1306c; }
.contact-icon-row.social a:nth-child(3) { background: #229ed9; }
.contact-icon-row.social a:nth-child(4) { background: #ff0000; }

.contacts-lead-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.contacts-lead-form input,
.contacts-lead-form select {
    min-height: 42px;
    border-radius: 10px;
}

.contacts-lead-form textarea {
    grid-column: 1 / -1;
    min-height: 82px;
    padding: 13px 15px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.contacts-lead-form p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.45;
}

.contacts-lead-form button {
    width: 100%;
    border: 0;
    cursor: pointer;
}

.contact-info-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 22px;
    background: rgba(240, 248, 244, .76);
}

.contact-info-strip .contacts-card {
    min-height: auto;
    padding: 14px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1280px) {
    .contacts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contacts-grid > .contacts-card:nth-child(3),
    .contacts-grid > .contacts-card:nth-child(4),
    .contacts-grid > .contacts-card:nth-child(5) {
        min-width: 0;
    }

    .contact-info-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.site-footer {
    display: grid;
    grid-template-columns: minmax(230px, 1.35fr) repeat(5, minmax(130px, .75fr));
    gap: 30px;
    width: min(1240px, calc(100% - 32px));
    margin: 36px auto 18px;
    padding: 28px 32px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .05);
    backdrop-filter: blur(16px);
}

.site-footer p {
    max-width: 330px;
    color: var(--muted);
    line-height: 1.65;
}

.site-footer h4 {
    margin: 0 0 18px;
    color: #15803d;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer a,
.site-footer span {
    display: block;
    margin-top: 10px;
    color: #475569;
}

.footer-brand {
    align-items: flex-start;
}

.footer-brand .brand-mark {
    margin-top: 2px;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-socials a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-top: 0;
    border-radius: 50%;
    color: #fff;
    background: #1877f2;
    font-size: .86rem;
    font-weight: 900;
}

.footer-socials a:nth-child(2) { background: #e1306c; }
.footer-socials a:nth-child(3) { background: #229ed9; }
.footer-socials a:nth-child(4) { background: #ff0000; }

.coverage-page-v3 {
    width: min(100% - 48px, 1480px);
    margin: 26px auto 0;
}

.coverage-hero-v3 {
    min-height: 300px;
    display: grid;
    grid-template-columns: minmax(440px, .92fr) minmax(0, 1.08fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 30px;
    background: #f6faf7;
    box-shadow: 0 22px 70px rgba(16, 24, 40, .08);
}

.coverage-hero-copy {
    position: relative;
    z-index: 2;
    padding: 44px 48px;
}

.soft-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(20, 146, 54, .18);
    border-radius: 999px;
    background: rgba(236, 253, 243, .92);
    color: var(--green);
    font-weight: 900;
}

.coverage-hero-v3 h1 {
    max-width: 620px;
    margin: 26px 0 0;
    color: #111827;
    font-size: clamp(3rem, 4.6vw, 4.65rem);
    line-height: 1.02;
}

.coverage-hero-v3 p {
    max-width: 610px;
    margin: 22px 0 0;
    color: #5b6878;
    font-size: 1.12rem;
    line-height: 1.75;
}

.coverage-quick-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 14px;
    max-width: 600px;
    margin-top: 28px;
}

.coverage-quick-search label,
.coverage-village-search {
    position: relative;
    display: block;
}

.coverage-quick-search label span,
.coverage-village-search span {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    border: 2px solid #9ca3af;
    border-radius: 50%;
}

.coverage-quick-search label span::after,
.coverage-village-search span::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 7px;
    height: 2px;
    transform: rotate(45deg);
    border-radius: 999px;
    background: #9ca3af;
}

.coverage-quick-search input,
.coverage-village-search input {
    padding-left: 50px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .9);
}

.coverage-quick-search button {
    border-radius: 13px;
    background: var(--green);
}

.coverage-map-hero {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(246, 250, 247, .98) 0%, rgba(246, 250, 247, .65) 18%, rgba(246, 250, 247, .08) 42%),
        linear-gradient(30deg, rgba(20, 146, 54, .11) 11%, transparent 11% 15%, rgba(148, 163, 184, .13) 15% 16%, transparent 16% 42%, rgba(20, 146, 54, .08) 42% 58%, transparent 58%),
        linear-gradient(150deg, transparent 0 20%, rgba(148, 163, 184, .16) 20% 21%, transparent 21% 48%, rgba(20, 146, 54, .1) 48% 62%, transparent 62%),
        linear-gradient(180deg, #f8fbfa, #eaf4ee);
}

.coverage-map-hero::before,
.coverage-map-hero::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, .86) 18% 19%, transparent 19% 42%, rgba(255, 255, 255, .9) 42% 43%, transparent 43%),
        linear-gradient(0deg, transparent 0 28%, rgba(255, 255, 255, .86) 28% 29%, transparent 29% 62%, rgba(255, 255, 255, .86) 62% 63%, transparent 63%);
    transform: rotate(-12deg);
}

.coverage-map-hero::after {
    inset: -35% -10%;
    transform: rotate(20deg);
    opacity: .72;
}

.map-road {
    position: absolute;
    z-index: 1;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
}

.road-a { left: 2%; right: 18%; top: 30%; transform: rotate(-17deg); }
.road-b { left: 18%; right: 4%; bottom: 30%; transform: rotate(15deg); }
.road-c { left: 48%; right: -6%; top: 52%; transform: rotate(-30deg); }

.pin {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    border-radius: 50% 50% 50% 6px;
    background: var(--green);
    box-shadow: 0 14px 28px rgba(20, 146, 54, .2);
}

.pin::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #fff;
}

.pin-a { left: 28%; top: 18%; }
.pin-b { right: 24%; top: 42%; }
.pin-c { left: 28%; bottom: 22%; }
.pin-d { right: 23%; bottom: 18%; }

.home-pin {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 108px;
    height: 108px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 16px rgba(120, 200, 32, .14), 0 0 0 38px rgba(120, 200, 32, .08), 0 26px 50px rgba(16, 24, 40, .16);
}

.home-pin::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 39px;
    width: 44px;
    height: 36px;
    border-radius: 5px;
    background: var(--green);
}

.home-pin::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 25px;
    width: 52px;
    height: 52px;
    transform: rotate(45deg);
    border-top: 12px solid #78c820;
    border-left: 12px solid #78c820;
}

.coverage-workspace-v3 {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
    gap: 18px;
    margin-top: 18px;
}

.coverage-villages-card,
.coverage-result-card,
.coverage-help-grid article {
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 42px rgba(16, 24, 40, .055);
}

.coverage-villages-card,
.coverage-result-card {
    padding: 28px;
}

.coverage-villages-card h2,
.coverage-result-card h2 {
    margin: 0 0 16px;
    color: #111827;
    font-size: 1.6rem;
}

.coverage-village-list {
    display: grid;
    margin-top: 16px;
}

.coverage-village {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    border-radius: 0;
    background: transparent;
    color: #111827;
    text-align: left;
    cursor: pointer;
}

.coverage-village strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coverage-village small {
    min-width: 108px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #dcfce7;
    color: var(--green);
    font-weight: 900;
    text-align: center;
}

.coverage-village small.building {
    background: #fff7ed;
    color: #ea580c;
}

.coverage-village small.planned {
    background: #eff6ff;
    color: #2563eb;
}

.coverage-village i {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border-top: 2px solid #55a869;
    border-right: 2px solid #55a869;
}

.coverage-village.active {
    margin: 6px 0;
    padding: 0 16px;
    border-bottom-color: transparent;
    border-radius: 14px;
    background: #edf8f0;
    color: var(--green);
}

.coverage-village.is-extra,
.coverage-village.search-hidden {
    display: none;
}

.coverage-villages-card.show-all .coverage-village.is-extra {
    display: grid;
}

.coverage-villages-card.show-all .coverage-village.search-hidden {
    display: none;
}

.coverage-more-button {
    width: 100%;
    margin-top: 16px;
    border: 0;
    background: transparent;
    color: var(--green);
    font-weight: 900;
}

.coverage-result-card {
    display: flex;
    flex-direction: column;
}

.coverage-address {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #334155;
}

.coverage-address span {
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    border-radius: 50% 50% 50% 3px;
    background: var(--green);
}

.coverage-result-ok {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 146, 54, .2);
    border-radius: 14px;
    background: #f0fbf3;
}

.coverage-result-ok > span {
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 50%;
    background: var(--green);
}

.coverage-result-ok > span::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 7px;
    width: 9px;
    height: 14px;
    transform: rotate(45deg);
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.coverage-result-ok strong {
    display: block;
    color: var(--green);
    font-size: 1.08rem;
}

.coverage-result-ok p {
    margin: 4px 0 0;
    color: #667085;
}

.coverage-result-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 14px;
}

.coverage-result-meta article {
    min-height: 80px;
    padding: 16px 18px;
}

.coverage-result-meta article + article {
    border-left: 1px solid rgba(16, 24, 40, .08);
}

.coverage-result-meta small,
.coverage-result-meta strong {
    display: block;
}

.coverage-result-meta small {
    color: #667085;
}

.coverage-result-meta strong {
    margin-top: 7px;
    color: #111827;
    font-size: 1.18rem;
}

.coverage-result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
}

.coverage-result-actions .btn {
    justify-content: center;
}

.coverage-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 18px 0 28px;
}

.coverage-help-grid article {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 24px;
}

.coverage-help-grid h3 {
    margin: 0;
    font-size: 1.12rem;
}

.coverage-help-grid p {
    margin: 7px 0 0;
    color: #667085;
    line-height: 1.55;
}

.coverage-help-icon {
    width: 58px;
    height: 58px;
    position: relative;
    display: block;
    border-radius: 50%;
    background: #e8f8ec;
}

.coverage-help-icon::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 3px solid var(--green);
    border-radius: 50%;
}

.coverage-help-icon::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 13px;
    width: 18px;
    height: 3px;
    transform: rotate(45deg);
    border-radius: 999px;
    background: var(--green);
}

.coverage-help-icon.icon-2::before {
    inset: 18px 16px 13px;
    border: 3px solid var(--green);
    border-top: 0;
    border-radius: 4px;
}

.coverage-help-icon.icon-2::after {
    left: 17px;
    top: 14px;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    border-top: 3px solid var(--green);
    border-left: 3px solid var(--green);
    background: transparent;
}

.coverage-help-icon.icon-3::before {
    inset: 16px 14px 18px;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
}

.coverage-help-icon.icon-3::after {
    left: 18px;
    right: auto;
    bottom: 14px;
    width: 22px;
    height: 16px;
    transform: none;
    border: 3px solid var(--green);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: transparent;
}

html[data-theme="dark"] {
    --ink: #eaf2ee;
    --ink-soft: #f6fff9;
    --muted: #a8b5c3;
    --surface: rgba(18, 29, 28, .88);
    --line: rgba(226, 232, 240, .13);
    --shadow: 0 24px 80px rgba(0, 0, 0, .38);
    color-scheme: dark;
}

html[data-theme="dark"] body {
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 0%, rgba(22, 163, 74, .18), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(132, 204, 22, .12), transparent 32%),
        linear-gradient(180deg, #071211 0%, #0b1716 46%, #07100f 100%);
}

html[data-theme="dark"] .topbar {
    border-bottom-color: rgba(226, 232, 240, .1);
    background: rgba(8, 18, 17, .86);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .26);
}

html[data-theme="dark"] .main-nav {
    color: #bdc8d3;
}

html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active,
html[data-theme="dark"] .brand-text span,
html[data-theme="dark"] .footer-brand strong span {
    color: #7fe15c;
}

html[data-theme="dark"] .brand small,
html[data-theme="dark"] .site-footer p,
html[data-theme="dark"] p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .content-body,
html[data-theme="dark"] .home-v2-copy p,
html[data-theme="dark"] .feature-row p,
html[data-theme="dark"] .tariff-v2-card p,
html[data-theme="dark"] .coverage-check-v2 p,
html[data-theme="dark"] .why-v2-grid p,
html[data-theme="dark"] .video-package-card p,
html[data-theme="dark"] .news-card p,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .about-mission p,
html[data-theme="dark"] .about-why p,
html[data-theme="dark"] .contacts-hero p,
html[data-theme="dark"] .contacts-card p,
html[data-theme="dark"] .coverage-hero-v3 p,
html[data-theme="dark"] .coverage-result-ok p,
html[data-theme="dark"] .coverage-help-grid p {
    color: var(--muted);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .home-v2-copy h1,
html[data-theme="dark"] .home-v2-section-title,
html[data-theme="dark"] .tariffs-v2-hero h1,
html[data-theme="dark"] .tariffs-v2-stage h2,
html[data-theme="dark"] .coverage-list-head h2,
html[data-theme="dark"] .video-hero h1,
html[data-theme="dark"] .news-hero h1,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .contacts-hero h1,
html[data-theme="dark"] .coverage-hero-v3 h1,
html[data-theme="dark"] .coverage-villages-card h2,
html[data-theme="dark"] .coverage-result-card h2,
html[data-theme="dark"] .coverage-village,
html[data-theme="dark"] .coverage-result-meta strong,
html[data-theme="dark"] .feature-row h3,
html[data-theme="dark"] .tariff-v2-card h3,
html[data-theme="dark"] .news-card h3,
html[data-theme="dark"] .document-card h3 {
    color: #f4fff7;
}

html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .news-filters button,
html[data-theme="dark"] .coverage-more-button,
html[data-theme="dark"] .page-actions a {
    border-color: rgba(226, 232, 240, .14);
    background: rgba(255, 255, 255, .06);
    color: #e5edf0;
}

html[data-theme="dark"] .theme-toggle-icon {
    background: #dbeafe;
    box-shadow: 0 0 0 4px rgba(219, 234, 254, .13);
}

html[data-theme="dark"] .theme-toggle-icon::before {
    opacity: 1;
    background: #0b1716;
}

html[data-theme="dark"] .btn.dark,
html[data-theme="dark"] .plan-card .btn.dark {
    background: #1b2a29;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .lead-form select {
    border-color: rgba(226, 232, 240, .12);
    color: #f4fff7;
    background: rgba(5, 14, 13, .68);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8492a2;
}

html[data-theme="dark"] .home-v2-hero,
html[data-theme="dark"] .tariffs-v2-hero,
html[data-theme="dark"] .video-hero,
html[data-theme="dark"] .news-hero,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .contacts-hero,
html[data-theme="dark"] .coverage-hero-v3 {
    border-color: rgba(226, 232, 240, .12);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .36);
}

html[data-theme="dark"] .home-v2-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .96) 0%, rgba(10, 23, 21, .9) 38%, rgba(10, 23, 21, .52) 68%, rgba(10, 23, 21, .22) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .tariffs-v2-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .96) 0%, rgba(10, 23, 21, .9) 42%, rgba(10, 23, 21, .48) 72%, rgba(10, 23, 21, .16) 100%),
        url("../img/tariffs-router-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .video-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .96) 0%, rgba(10, 23, 21, .9) 44%, rgba(10, 23, 21, .46) 72%, rgba(10, 23, 21, .14) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .news-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .96) 0%, rgba(10, 23, 21, .88) 42%, rgba(10, 23, 21, .42) 72%, rgba(10, 23, 21, .14) 100%),
        url("../img/news-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .about-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .96) 0%, rgba(10, 23, 21, .88) 45%, rgba(10, 23, 21, .42) 72%, rgba(10, 23, 21, .16) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .contacts-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .96) 0%, rgba(10, 23, 21, .88) 45%, rgba(10, 23, 21, .42) 72%, rgba(10, 23, 21, .16) 100%),
        var(--contacts-hero, linear-gradient(135deg, #0b1716, #13251f));
}

html[data-theme="dark"] .coverage-hero-v3 {
    background: linear-gradient(135deg, rgba(10, 23, 21, .96), rgba(12, 30, 24, .94));
}

html[data-theme="dark"] .coverage-map-hero {
    background:
        linear-gradient(90deg, rgba(10, 23, 21, .98) 0%, rgba(10, 23, 21, .65) 18%, rgba(10, 23, 21, .18) 42%),
        linear-gradient(30deg, rgba(34, 197, 94, .12) 11%, transparent 11% 15%, rgba(148, 163, 184, .08) 15% 16%, transparent 16% 42%, rgba(132, 204, 22, .1) 42% 58%, transparent 58%),
        linear-gradient(180deg, #11211e, #0b1716);
}

html[data-theme="dark"] .coverage-map-hero::before,
html[data-theme="dark"] .coverage-map-hero::after {
    opacity: .38;
}

html[data-theme="dark"] .feature-row article,
html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .coverage-check-v2,
html[data-theme="dark"] .why-v2-grid article,
html[data-theme="dark"] .cabinet-v2,
html[data-theme="dark"] .tariffs-v2-stage,
html[data-theme="dark"] .coverage-list-v2,
html[data-theme="dark"] .place-meta article,
html[data-theme="dark"] .tariff-benefits-mini article,
html[data-theme="dark"] .video-feature-row article,
html[data-theme="dark"] .video-package-card,
html[data-theme="dark"] .video-consult,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .news-sidebar-card,
html[data-theme="dark"] .about-stat,
html[data-theme="dark"] .about-mission,
html[data-theme="dark"] .about-why,
html[data-theme="dark"] .about-why-grid article,
html[data-theme="dark"] .documents-grid article,
html[data-theme="dark"] .timeline-row article,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .contact-map-card,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .contact-info-strip,
html[data-theme="dark"] .coverage-villages-card,
html[data-theme="dark"] .coverage-result-card,
html[data-theme="dark"] .coverage-help-grid article,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .news-grid article,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .coverage-panel,
html[data-theme="dark"] .map-panel,
html[data-theme="dark"] .cabinet-band,
html[data-theme="dark"] .request-band,
html[data-theme="dark"] .site-footer {
    border-color: rgba(226, 232, 240, .12);
    background: rgba(14, 28, 26, .82);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .tariff-v2-icon,
html[data-theme="dark"] .why-v2-icon,
html[data-theme="dark"] .about-icon,
html[data-theme="dark"] .contacts-icon,
html[data-theme="dark"] .coverage-help-icon,
html[data-theme="dark"] .document-icon {
    background: rgba(34, 197, 94, .13);
    color: #86efac;
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .video-package-card.featured,
html[data-theme="dark"] .coverage-village.active,
html[data-theme="dark"] .coverage-result-ok {
    border-color: rgba(34, 197, 94, .34);
    background: rgba(22, 163, 74, .14);
}

html[data-theme="dark"] .tariff-speed-price,
html[data-theme="dark"] .coverage-result-meta,
html[data-theme="dark"] .coverage-admin-meta span,
html[data-theme="dark"] .speed-box,
html[data-theme="dark"] .video-price-box {
    border-color: rgba(226, 232, 240, .12);
    background: rgba(5, 14, 13, .55);
}

html[data-theme="dark"] .coverage-village {
    border-bottom-color: rgba(226, 232, 240, .1);
    background: transparent;
}

html[data-theme="dark"] .coverage-village small.connected,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .admin-badge {
    background: rgba(34, 197, 94, .16);
    color: #86efac;
}

html[data-theme="dark"] .coverage-village small.building {
    background: rgba(249, 115, 22, .14);
    color: #fdba74;
}

html[data-theme="dark"] .coverage-village small.planned {
    background: rgba(59, 130, 246, .14);
    color: #93c5fd;
}

html[data-theme="dark"] .news-thumb,
html[data-theme="dark"] .popular-thumb,
html[data-theme="dark"] .map-card-v2,
html[data-theme="dark"] .video-map-card,
html[data-theme="dark"] .mission-illustration,
html[data-theme="dark"] .contact-map-visual {
    border-color: rgba(226, 232, 240, .1);
    background-color: rgba(8, 18, 17, .8);
}

html[data-theme="dark"] .site-footer h4,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .soft-label,
html[data-theme="dark"] .news-filters button.active,
html[data-theme="dark"] .coverage-more-button {
    color: #86efac;
}

html[data-theme="dark"] .soft-label,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .news-filters button.active {
    border-color: rgba(34, 197, 94, .28);
    background: rgba(34, 197, 94, .12);
}

html[data-theme="dark"] .home-pin,
html[data-theme="dark"] .floating-note,
html[data-theme="dark"] .coverage-quick-search input,
html[data-theme="dark"] .coverage-village-search input {
    background: rgba(8, 18, 17, .86);
}

html[data-theme="dark"] .home-pin::before {
    background: #16a34a;
}

html[data-theme="dark"] .home-pin::after {
    border-color: #84cc16;
}

html[data-theme="dark"] .footer-socials a {
    color: #fff;
}

@media (max-width: 1050px) {
    .topbar { flex-wrap: wrap; }
    .brand { min-width: 0; }
    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .site-footer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .hero-modern,
    .coverage-hero-v3,
    .coverage-workspace-v3,
    .coverage-section,
    .contacts-hero,
    .contact-map-section,
    .request-band,
    .cabinet-band { grid-template-columns: 1fr; }
    .tariff-intro,
    .city-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .tariff-shell {
        grid-template-columns: 1fr;
    }
    .city-rail {
        order: 0;
        min-height: auto;
    }
    .tariff-stage {
        order: 1;
        min-height: auto;
        overflow: visible;
    }
    .city-panel {
        position: static;
        display: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
    .city-panel.active {
        display: flex;
    }
    .signal-scene {
        display: none;
    }
    .city-scroll {
        display: flex;
        max-height: none;
        overflow-x: auto;
    }
    .city-button {
        min-width: 180px;
    }
    .tariff-orbit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-hero {
        min-height: 500px;
        background-position: center right;
    }
    .home-v2-hero {
        min-height: 430px;
        background-position: 62% center;
    }
    .home-v2-copy {
        padding: 38px 32px 132px;
    }
    .hero-v2-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: calc(100% - 48px);
        left: 24px;
        bottom: 22px;
    }
    .feature-row,
    .tariff-v2-grid,
    .why-v2-grid,
    .coverage-check-v2,
    .cabinet-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .coverage-check-v2 form {
        grid-template-columns: 1fr 1fr;
    }
    .coverage-check-v2 form button {
        grid-column: span 2;
    }
    .tariffs-v2-page {
        width: min(100% - 32px, 1220px);
    }
    .tariffs-v2-layout {
        grid-template-columns: 1fr;
    }
    .coverage-list-v2 {
        order: -1;
    }
    .place-meta,
    .tariff-benefits-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .video-page {
        width: min(100% - 32px, 1220px);
    }
    .video-package-grid,
    .video-consult {
        grid-template-columns: 1fr;
    }
    .news-page {
        width: min(100% - 32px, 1220px);
    }
    .news-toolbar,
    .news-layout {
        grid-template-columns: 1fr;
    }
    .about-page {
        width: min(100% - 32px, 1220px);
    }
    .about-stats,
    .about-main-grid,
    .documents-grid,
    .timeline-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .news-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .coverage-page-v3 {
        width: min(100% - 32px, 1220px);
    }
    .coverage-hero-v3 {
        grid-template-columns: 1fr;
    }
    .coverage-map-hero {
        min-height: 230px;
        order: -1;
    }
    .coverage-help-grid {
        grid-template-columns: 1fr;
    }
    .video-consult form {
        grid-template-columns: 1fr 1fr;
    }
    .video-consult form button {
        grid-column: span 2;
    }
    .tariff-benefits-mini article:last-child {
        grid-column: span 2;
    }
    .cabinet-v2 {
        padding-right: 260px;
    }
    .hero-content {
        max-width: 560px;
        padding: 46px 34px;
    }
    .home-metrics,
    .home-lower,
    .coverage-mini,
    .why-mini {
        grid-template-columns: 1fr;
    }
    .home-tariffs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .benefit-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .benefit-strip article:last-child {
        grid-column: span 2;
    }
    .hero-showcase { grid-template-columns: 1fr; }
    .feature-grid,
    .contacts-grid,
    .plans-grid,
    .news-grid,
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .topbar { position: static; padding: 14px 16px; }
    .top-actions { width: 100%; }
    .top-actions .btn { flex: 1 1 150px; }
    .brand small { display: none; }
    .hero-modern { padding-top: 36px; }
    .hero-modern h1 { font-size: 2.45rem; }
    .home-page {
        width: min(100% - 20px, 1240px);
    }
    .home-hero {
        min-height: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(250, 253, 251, .98) 0%, rgba(250, 253, 251, .88) 58%, rgba(250, 253, 251, .42) 100%),
            url("../img/hero-zasnet.png") center bottom / cover no-repeat;
    }
    .hero-content {
        padding: 34px 22px 210px;
    }
    .home-hero h1 {
        font-size: 2.85rem;
    }
    .home-v2 {
        width: min(100% - 20px, 1220px);
    }
    .coverage-page-v3 {
        width: min(100% - 20px, 1220px);
    }
    .coverage-hero-v3 {
        border-radius: 28px;
    }
    .coverage-hero-copy {
        padding: 26px 22px;
    }
    .coverage-hero-v3 h1 {
        font-size: 2.55rem;
    }
    .coverage-quick-search,
    .coverage-workspace-v3,
    .coverage-result-meta,
    .coverage-result-actions,
    .coverage-help-grid {
        grid-template-columns: 1fr;
    }
    .coverage-villages-card,
    .coverage-result-card {
        padding: 20px;
        border-radius: 22px;
    }
    .coverage-village {
        grid-template-columns: minmax(0, 1fr) 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .coverage-village small {
        grid-column: 1 / -1;
        width: fit-content;
        min-width: 0;
    }
    .coverage-result-meta article + article {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, .08);
    }
    .home-v2-hero {
        min-height: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .93) 45%, rgba(230, 239, 235, .42) 100%),
            url("../img/hero-family-zasnet.png") 64% bottom / cover no-repeat;
    }
    .home-v2-copy {
        padding: 30px 22px 250px;
    }
    .home-v2-copy h1 {
        font-size: 2.55rem;
    }
    .home-v2-copy p {
        font-size: 1rem;
    }
    .hero-v2-stats {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        grid-template-columns: 1fr;
        margin: -220px 16px 18px;
    }
    .feature-row,
    .tariff-v2-grid,
    .why-v2-grid,
    .coverage-check-v2,
    .cabinet-v2,
    .coverage-check-v2 form {
        grid-template-columns: 1fr;
    }
    .feature-row article {
        grid-template-columns: 54px 1fr;
        padding: 18px;
    }
    .tariff-v2-card,
    .coverage-check-v2,
    .cabinet-v2 {
        padding: 22px;
    }
    .coverage-check-v2 form button {
        grid-column: span 1;
    }
    .map-card-v2 {
        min-height: 170px;
    }
    .cabinet-v2 {
        padding-bottom: 150px;
    }
    .cabinet-device {
        right: 12px;
        width: 245px;
        height: 145px;
    }
    .tariffs-v2-page {
        width: min(100% - 20px, 1220px);
    }
.tariffs-v2-hero {
        min-height: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 48%, rgba(230, 239, 235, .3) 100%),
            url("../img/tariffs-router-hero.png") 58% bottom / cover no-repeat;
    }
    .tariffs-v2-hero > div {
        padding: 26px 22px 170px;
    }
    .tariffs-v2-hero h1 {
        font-size: 2.2rem;
    }
    .tariffs-v2-stage,
    .coverage-list-v2 {
        padding: 20px;
        border-radius: 24px;
    }
    .place-meta,
    .tariffs-cards-v2,
    .tariff-benefits-mini,
    .coverage-check-v2 form {
        grid-template-columns: 1fr;
    }
    .tariff-card-v2.empty,
    .tariff-benefits-mini article:last-child {
        grid-column: span 1;
    }
    .tariff-speed-price {
        grid-template-columns: 1fr;
    }
    .tariff-speed-price div + div {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(15, 23, 42, .08);
        padding-top: 14px;
    }
    .video-page {
        width: min(100% - 20px, 1220px);
    }
    .video-hero {
        min-height: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 50%, rgba(230, 239, 235, .32) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat;
    }
    .video-hero > div {
        padding: 26px 22px 170px;
    }
    .video-hero h1 {
        font-size: 2.25rem;
    }
    .video-package-grid,
    .video-consult,
    .video-consult form {
        grid-template-columns: 1fr;
    }
    .video-package-card,
    .video-consult {
        padding: 22px;
    }
    .video-consult form button {
        grid-column: span 1;
    }
    .video-map-card {
        min-height: 170px;
    }
    .news-page {
        width: min(100% - 20px, 1220px);
    }
    .news-hero {
        min-height: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 50%, rgba(230, 239, 235, .32) 100%),
            url("../img/news-hero.png") 62% bottom / cover no-repeat;
    }
    .news-hero > div {
        padding: 28px 22px 150px;
    }
    .news-hero h1 {
        font-size: 2.55rem;
    }
    .news-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .news-filters button {
        min-width: max-content;
    }
    .news-card-grid,
    .popular-list a {
        grid-template-columns: 1fr;
    }
    .popular-thumb {
        min-height: 120px;
    }
    .about-page {
        width: min(100% - 20px, 1220px);
    }
    .about-hero {
        min-height: auto;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(230, 239, 235, .98) 0%, rgba(230, 239, 235, .92) 48%, rgba(230, 239, 235, .34) 100%),
            url("../img/hero-family-zasnet.png") 62% bottom / cover no-repeat;
    }
    .about-hero > div {
        padding: 30px 22px 210px;
    }
    .about-hero h1 {
        font-size: 2.65rem;
    }
    .about-badges,
    .about-stats,
    .about-main-grid,
    .about-why-grid,
    .documents-grid,
    .timeline-row {
        grid-template-columns: 1fr;
    }
    .about-mission,
    .about-why {
        padding: 22px;
    }
    .mission-illustration {
        margin: 22px -22px -22px;
    }
    .timeline-row article::before {
        display: none;
    }
    .documents-grid article {
        grid-template-columns: 46px 1fr;
    }
    .home-hero p {
        font-size: 1rem;
    }
    .hero-float {
        width: 58px;
        height: 58px;
        font-size: .82rem;
    }
    .f-wifi { right: 58%; top: auto; bottom: 120px; }
    .f-game { right: 22px; top: auto; bottom: 144px; }
    .f-4k { right: 30%; bottom: 38px; }
    .home-metrics,
    .home-tariffs,
    .benefit-strip,
    .coverage-mini,
    .why-mini {
        grid-template-columns: 1fr;
    }
    .metric-card {
        grid-template-columns: 58px 1fr;
        padding: 18px;
    }
    .home-board {
        padding: 18px;
    }
    .board-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .benefit-strip article:last-child {
        grid-column: span 1;
    }
    .coverage-map-mini {
        min-height: 210px;
    }
    .why-mini {
        padding: 22px;
    }
    .z-glow {
        display: none;
    }
    .stats-grid,
    .feature-grid,
    .plans-grid,
    .coverage-form,
    .lead-form,
    .coverage-tags,
    .contacts-grid,
    .news-grid,
    .cards,
    .mini-metrics,
    .site-footer { grid-template-columns: 1fr; }
    .plans-head {
        display: block;
        padding: 28px 20px 0;
    }
    .plans-head .btn { margin-top: 18px; }
    .city-switcher,
    .selected-city { margin-left: 20px; margin-right: 20px; }
    .plans-grid { padding: 36px 20px 22px; }
    .tariff-experience {
        width: min(100% - 20px, 1240px);
        margin-top: 28px;
        border-radius: 28px;
    }
    .tariff-intro,
    .tariff-shell,
    .city-panel {
        padding: 22px;
    }
    .tariff-intro h1,
    .city-panel h2 {
        font-size: 2.2rem;
    }
    .tariff-orbit {
        grid-template-columns: 1fr;
    }
    .tariff-tile.empty {
        grid-column: span 1;
    }
    .hero-showcase,
    .coverage-panel,
    .cabinet-band,
    .request-band { padding: 22px; }
    .active-area-card {
        grid-template-columns: 1fr;
    }
    .active-area-card em {
        width: fit-content;
    }
    .area-list {
        grid-template-columns: 1fr;
    }
    .dark-card,
    .network-card { min-height: 360px; }
}

@media (max-width: 720px) {
    html[data-theme="dark"] .top-actions .theme-toggle {
        flex: 1 1 120px;
        justify-content: center;
    }

    html[data-theme="dark"] .home-v2-hero {
        background:
            linear-gradient(180deg, rgba(10, 23, 21, .98) 0%, rgba(10, 23, 21, .9) 48%, rgba(10, 23, 21, .36) 100%),
            url("../img/hero-family-zasnet.png") 64% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .tariffs-v2-hero {
        background:
            linear-gradient(180deg, rgba(10, 23, 21, .98) 0%, rgba(10, 23, 21, .9) 48%, rgba(10, 23, 21, .32) 100%),
            url("../img/tariffs-router-hero.png") 58% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .video-hero {
        background:
            linear-gradient(180deg, rgba(10, 23, 21, .98) 0%, rgba(10, 23, 21, .9) 50%, rgba(10, 23, 21, .32) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .news-hero {
        background:
            linear-gradient(180deg, rgba(10, 23, 21, .98) 0%, rgba(10, 23, 21, .9) 50%, rgba(10, 23, 21, .32) 100%),
            url("../img/news-hero.png") 62% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .about-hero {
        background:
            linear-gradient(180deg, rgba(10, 23, 21, .98) 0%, rgba(10, 23, 21, .9) 48%, rgba(10, 23, 21, .34) 100%),
            url("../img/hero-family-zasnet.png") 62% bottom / cover no-repeat;
    }
}

html[data-theme="dark"] .home-v2-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 17, .9) 0%, rgba(8, 18, 17, .76) 38%, rgba(8, 18, 17, .36) 68%, rgba(8, 18, 17, .1) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .tariffs-v2-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 17, .9) 0%, rgba(8, 18, 17, .76) 42%, rgba(8, 18, 17, .34) 72%, rgba(8, 18, 17, .08) 100%),
        url("../img/tariffs-router-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .video-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 17, .88) 0%, rgba(8, 18, 17, .75) 44%, rgba(8, 18, 17, .34) 72%, rgba(8, 18, 17, .08) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .about-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 17, .9) 0%, rgba(8, 18, 17, .76) 45%, rgba(8, 18, 17, .34) 72%, rgba(8, 18, 17, .08) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .news-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 17, .88) 0%, rgba(8, 18, 17, .72) 42%, rgba(8, 18, 17, .28) 72%, rgba(8, 18, 17, .06) 100%),
        url("../img/news-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .contacts-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 17, .9) 0%, rgba(8, 18, 17, .76) 45%, rgba(8, 18, 17, .34) 72%, rgba(8, 18, 17, .08) 100%),
        var(--contacts-hero, linear-gradient(135deg, #0b1716, #13251f));
}

html[data-theme="dark"] .feature-row article,
html[data-theme="dark"] .why-v2-grid article,
html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-card-v2,
html[data-theme="dark"] .tariff-benefits-mini article,
html[data-theme="dark"] .place-meta article,
html[data-theme="dark"] .coverage-list-v2,
html[data-theme="dark"] .tariffs-v2-stage,
html[data-theme="dark"] .video-feature-row article,
html[data-theme="dark"] .video-package-card,
html[data-theme="dark"] .video-consult,
html[data-theme="dark"] .news-card-v2,
html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .subscribe-panel,
html[data-theme="dark"] .news-article-card,
html[data-theme="dark"] .about-stats article,
html[data-theme="dark"] .about-mission,
html[data-theme="dark"] .about-why,
html[data-theme="dark"] .about-why-grid article,
html[data-theme="dark"] .documents-grid article,
html[data-theme="dark"] .timeline-row article,
html[data-theme="dark"] .about-badges article,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .map-copy,
html[data-theme="dark"] .map-frame,
html[data-theme="dark"] .contact-info-strip,
html[data-theme="dark"] .coverage-villages-card,
html[data-theme="dark"] .coverage-result-card,
html[data-theme="dark"] .coverage-help-grid article {
    border-color: rgba(191, 255, 204, .13);
    background: linear-gradient(180deg, rgba(14, 31, 28, .94), rgba(8, 22, 20, .9));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-card-v2.featured,
html[data-theme="dark"] .video-package-card.featured {
    border-color: rgba(45, 212, 94, .55);
    background: linear-gradient(180deg, rgba(11, 54, 30, .96), rgba(8, 33, 24, .94));
    box-shadow: 0 24px 70px rgba(16, 185, 73, .13);
}

html[data-theme="dark"] .home-v2-copy h1,
html[data-theme="dark"] .tariffs-v2-hero h1,
html[data-theme="dark"] .video-hero h1,
html[data-theme="dark"] .news-hero h1,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .contacts-hero h1,
html[data-theme="dark"] .coverage-hero-v3 h1,
html[data-theme="dark"] .selected-place h2,
html[data-theme="dark"] .tariffs-subtitle,
html[data-theme="dark"] .tariff-card-top h4,
html[data-theme="dark"] .tariff-speed-price strong,
html[data-theme="dark"] .video-package-head h3,
html[data-theme="dark"] .video-price,
html[data-theme="dark"] .news-card-v2 h2,
html[data-theme="dark"] .sidebar-panel h3,
html[data-theme="dark"] .subscribe-panel h3,
html[data-theme="dark"] .popular-list strong,
html[data-theme="dark"] .news-article-card h1,
html[data-theme="dark"] .about-stats strong,
html[data-theme="dark"] .about-mission h2,
html[data-theme="dark"] .about-why h2,
html[data-theme="dark"] .about-documents h2,
html[data-theme="dark"] .about-timeline h2,
html[data-theme="dark"] .about-why-grid h3,
html[data-theme="dark"] .documents-grid h3,
html[data-theme="dark"] .timeline-row h3,
html[data-theme="dark"] .timeline-row strong,
html[data-theme="dark"] .contacts-card strong,
html[data-theme="dark"] .contacts-card a,
html[data-theme="dark"] .contacts-card h2,
html[data-theme="dark"] .contacts-card h3,
html[data-theme="dark"] .contact-form-card h2,
html[data-theme="dark"] .map-copy h2 {
    color: #f4fff7;
}

html[data-theme="dark"] .tariffs-v2-hero p,
html[data-theme="dark"] .video-hero p,
html[data-theme="dark"] .news-hero p,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .contacts-hero p,
html[data-theme="dark"] .feature-row p,
html[data-theme="dark"] .why-v2-grid p,
html[data-theme="dark"] .tariff-card-v2 p,
html[data-theme="dark"] .tariff-speed-price small,
html[data-theme="dark"] .tariff-benefits-mini small,
html[data-theme="dark"] .place-meta small,
html[data-theme="dark"] .coverage-city-button small,
html[data-theme="dark"] .video-package-head span,
html[data-theme="dark"] .video-price span,
html[data-theme="dark"] .video-package-card p,
html[data-theme="dark"] .video-package-card li,
html[data-theme="dark"] .video-consult p,
html[data-theme="dark"] .news-card-v2 p,
html[data-theme="dark"] .news-card-v2 time,
html[data-theme="dark"] .popular-list small,
html[data-theme="dark"] .subscribe-panel p,
html[data-theme="dark"] .news-article-card .lead,
html[data-theme="dark"] .about-stats span,
html[data-theme="dark"] .about-mission p,
html[data-theme="dark"] .about-why-grid p,
html[data-theme="dark"] .about-documents p,
html[data-theme="dark"] .timeline-row p,
html[data-theme="dark"] .about-badges small,
html[data-theme="dark"] .contacts-card p,
html[data-theme="dark"] .map-copy p {
    color: #c2d0dc;
}

html[data-theme="dark"] .tariff-card-top span,
html[data-theme="dark"] .tariff-card-v2.featured .tariff-card-top span,
html[data-theme="dark"] .selected-place > span,
html[data-theme="dark"] .read-more,
html[data-theme="dark"] .news-article-card time,
html[data-theme="dark"] .about-why h2 span,
html[data-theme="dark"] .news-hero h1 span {
    color: #72df51;
}

html[data-theme="dark"] .tariff-card-top b,
html[data-theme="dark"] .tariff-card-v2.featured .tariff-card-top b,
html[data-theme="dark"] .tariff-tags-v2 span,
html[data-theme="dark"] .coverage-list-head strong,
html[data-theme="dark"] .coverage-city-button.active,
html[data-theme="dark"] .coverage-village.active {
    color: #b8ff9a;
    background: rgba(58, 211, 83, .13);
}

html[data-theme="dark"] .tariff-speed-price,
html[data-theme="dark"] .popular-list,
html[data-theme="dark"] .contact-info-strip,
html[data-theme="dark"] .coverage-result-meta {
    border-color: rgba(191, 255, 204, .12);
}

html[data-theme="dark"] .tariff-speed-price div + div,
html[data-theme="dark"] .coverage-result-meta article + article {
    border-color: rgba(191, 255, 204, .12);
}

html[data-theme="dark"] .news-filters button,
html[data-theme="dark"] .news-search input,
html[data-theme="dark"] .coverage-search input,
html[data-theme="dark"] .coverage-quick-search input,
html[data-theme="dark"] .coverage-village-search input,
html[data-theme="dark"] .show-cities,
html[data-theme="dark"] .contact-form-card input,
html[data-theme="dark"] .contact-form-card textarea,
html[data-theme="dark"] .contact-form-card select,
html[data-theme="dark"] .subscribe-panel input {
    border-color: rgba(191, 255, 204, .16);
    background: rgba(3, 14, 13, .66);
    color: #f4fff7;
}

html[data-theme="dark"] .news-filters button.active {
    border-color: rgba(45, 212, 94, .55);
    background: linear-gradient(90deg, #149236, #78c820);
    color: #fff;
}

html[data-theme="dark"] .news-card-v2,
html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .subscribe-panel {
    min-height: auto;
}

html[data-theme="dark"] .news-card-v2 {
    background: linear-gradient(180deg, rgba(14, 31, 28, .94), rgba(8, 22, 20, .9));
}

html[data-theme="dark"] .news-card-v2 h2,
html[data-theme="dark"] .news-card-v2 p,
html[data-theme="dark"] .news-card-v2 time {
    color: #f4fff7;
}

html[data-theme="dark"] .news-card-v2 p,
html[data-theme="dark"] .news-card-v2 time {
    color: #c2d0dc;
}

html[data-theme="dark"] .news-card-v2 .read-more {
    color: #72df51;
}

html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .subscribe-panel {
    background: linear-gradient(180deg, rgba(14, 31, 28, .94), rgba(8, 22, 20, .9));
}

html[data-theme="dark"] .sidebar-panel h3,
html[data-theme="dark"] .subscribe-panel h3,
html[data-theme="dark"] .popular-list strong {
    color: #f4fff7;
}

html[data-theme="dark"] .subscribe-panel p,
html[data-theme="dark"] .popular-list small {
    color: #c2d0dc;
}

html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .map-copy {
    background: linear-gradient(180deg, rgba(14, 31, 28, .94), rgba(8, 22, 20, .9));
}

html[data-theme="dark"] .map-frame {
    background: rgba(229, 246, 234, .94);
}

html[data-theme="dark"] .map-frame .map-card,
html[data-theme="dark"] .map-card {
    color: #142033;
    background: rgba(255, 255, 255, .92);
}

html[data-theme="dark"] .about-stats article,
html[data-theme="dark"] .about-badges article {
    background: linear-gradient(180deg, rgba(14, 31, 28, .94), rgba(8, 22, 20, .9));
}

html[data-theme="dark"] .about-stats strong,
html[data-theme="dark"] .about-stats span,
html[data-theme="dark"] .about-badges strong {
    color: #f4fff7;
}

html[data-theme="dark"] .about-stats span,
html[data-theme="dark"] .about-badges small {
    color: #c2d0dc;
}

html[data-theme="dark"] .mission-illustration {
    background:
        radial-gradient(circle at 20% 46%, rgba(74, 222, 128, .26), transparent 25%),
        radial-gradient(circle at 78% 72%, rgba(14, 165, 233, .1), transparent 26%),
        linear-gradient(180deg, rgba(17, 44, 35, .9), rgba(11, 31, 26, .92));
}

html[data-theme="dark"] .camera-visual {
    background: linear-gradient(135deg, #f7fff9, #dfe7e2);
}

html[data-theme="dark"] .video-map-card,
html[data-theme="dark"] .map-card-v2 {
    background:
        linear-gradient(rgba(191, 255, 204, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(191, 255, 204, .11) 1px, transparent 1px),
        linear-gradient(135deg, rgba(7, 25, 21, .92), rgba(20, 69, 40, .68));
}

@media (max-width: 720px) {
    html[data-theme="dark"] .home-v2-hero {
        background:
            linear-gradient(180deg, rgba(8, 18, 17, .92) 0%, rgba(8, 18, 17, .8) 48%, rgba(8, 18, 17, .32) 100%),
            url("../img/hero-family-zasnet.png") 64% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .tariffs-v2-hero {
        background:
            linear-gradient(180deg, rgba(8, 18, 17, .92) 0%, rgba(8, 18, 17, .8) 48%, rgba(8, 18, 17, .3) 100%),
            url("../img/tariffs-router-hero.png") 58% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .video-hero {
        background:
            linear-gradient(180deg, rgba(8, 18, 17, .92) 0%, rgba(8, 18, 17, .8) 50%, rgba(8, 18, 17, .3) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .news-hero,
    html[data-theme="dark"] .about-hero {
        background:
            linear-gradient(180deg, rgba(8, 18, 17, .92) 0%, rgba(8, 18, 17, .8) 50%, rgba(8, 18, 17, .3) 100%),
            url("../img/hero-family-zasnet.png") 62% bottom / cover no-repeat;
    }
}

html[data-theme="dark"] {
    --ink: #eef8f1;
    --ink-soft: #ffffff;
    --muted: #c4d1cb;
    --surface: rgba(38, 56, 50, .88);
    --line: rgba(222, 244, 229, .18);
    --shadow: 0 22px 65px rgba(5, 15, 13, .28);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 10% 0%, rgba(87, 157, 77, .24), transparent 32%),
        radial-gradient(circle at 92% 14%, rgba(105, 185, 92, .18), transparent 34%),
        linear-gradient(180deg, #182923 0%, #20352d 48%, #192b25 100%);
}

html[data-theme="dark"] .topbar {
    border-bottom-color: rgba(222, 244, 229, .18);
    background: rgba(31, 49, 43, .88);
    box-shadow: 0 14px 34px rgba(5, 15, 13, .22);
}

html[data-theme="dark"] .main-nav {
    color: #d5e4dc;
}

html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .theme-toggle {
    border-color: rgba(222, 244, 229, .24);
    background: rgba(255, 255, 255, .1);
    color: #f4fff7;
}

html[data-theme="dark"] .home-v2-hero {
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .74) 0%, rgba(28, 45, 39, .58) 38%, rgba(28, 45, 39, .24) 68%, rgba(28, 45, 39, .04) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .tariffs-v2-hero {
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .76) 0%, rgba(28, 45, 39, .58) 42%, rgba(28, 45, 39, .24) 72%, rgba(28, 45, 39, .04) 100%),
        url("../img/tariffs-router-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .video-hero {
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .74) 0%, rgba(28, 45, 39, .56) 44%, rgba(28, 45, 39, .22) 72%, rgba(28, 45, 39, .04) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .news-hero {
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .72) 0%, rgba(28, 45, 39, .54) 42%, rgba(28, 45, 39, .18) 72%, rgba(28, 45, 39, .02) 100%),
        url("../img/news-hero.png") center right / cover no-repeat;
}

html[data-theme="dark"] .about-hero {
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .76) 0%, rgba(28, 45, 39, .58) 45%, rgba(28, 45, 39, .22) 72%, rgba(28, 45, 39, .04) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .contacts-hero {
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .76) 0%, rgba(28, 45, 39, .58) 45%, rgba(28, 45, 39, .22) 72%, rgba(28, 45, 39, .04) 100%),
        var(--contacts-hero, linear-gradient(135deg, #243a32, #2e463b));
}

html[data-theme="dark"] .coverage-hero-v3 {
    background: linear-gradient(135deg, rgba(38, 58, 51, .95), rgba(46, 72, 61, .9));
}

html[data-theme="dark"] .coverage-map-hero {
    background:
        linear-gradient(90deg, rgba(38, 58, 51, .86) 0%, rgba(38, 58, 51, .42) 22%, rgba(38, 58, 51, .08) 52%),
        linear-gradient(30deg, rgba(74, 222, 128, .13) 11%, transparent 11% 15%, rgba(226, 244, 229, .11) 15% 16%, transparent 16% 42%, rgba(132, 204, 22, .13) 42% 58%, transparent 58%),
        linear-gradient(180deg, #2e473d, #20352d);
}

html[data-theme="dark"] .home-v2-hero,
html[data-theme="dark"] .tariffs-v2-hero,
html[data-theme="dark"] .video-hero,
html[data-theme="dark"] .news-hero,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .contacts-hero,
html[data-theme="dark"] .coverage-hero-v3 {
    border-color: rgba(222, 244, 229, .2);
    box-shadow: 0 24px 70px rgba(5, 15, 13, .26);
}

html[data-theme="dark"] .feature-row article,
html[data-theme="dark"] .why-v2-grid article,
html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-card-v2,
html[data-theme="dark"] .tariff-benefits-mini article,
html[data-theme="dark"] .place-meta article,
html[data-theme="dark"] .coverage-list-v2,
html[data-theme="dark"] .tariffs-v2-stage,
html[data-theme="dark"] .video-feature-row article,
html[data-theme="dark"] .video-package-card,
html[data-theme="dark"] .video-consult,
html[data-theme="dark"] .news-card-v2,
html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .subscribe-panel,
html[data-theme="dark"] .news-article-card,
html[data-theme="dark"] .about-stats article,
html[data-theme="dark"] .about-mission,
html[data-theme="dark"] .about-why,
html[data-theme="dark"] .about-why-grid article,
html[data-theme="dark"] .documents-grid article,
html[data-theme="dark"] .timeline-row article,
html[data-theme="dark"] .about-badges article,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .map-copy,
html[data-theme="dark"] .map-frame,
html[data-theme="dark"] .contact-info-strip,
html[data-theme="dark"] .coverage-villages-card,
html[data-theme="dark"] .coverage-result-card,
html[data-theme="dark"] .coverage-help-grid article,
html[data-theme="dark"] .site-footer {
    border-color: rgba(222, 244, 229, .18);
    background: linear-gradient(180deg, rgba(45, 66, 58, .92), rgba(34, 54, 48, .9));
    box-shadow: 0 18px 50px rgba(5, 15, 13, .22);
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-card-v2.featured,
html[data-theme="dark"] .video-package-card.featured {
    border-color: rgba(105, 223, 86, .56);
    background: linear-gradient(180deg, rgba(48, 84, 54, .94), rgba(36, 68, 48, .92));
    box-shadow: 0 22px 62px rgba(42, 148, 61, .16);
}

html[data-theme="dark"] .tariff-speed-price,
html[data-theme="dark"] .coverage-result-meta,
html[data-theme="dark"] .speed-box,
html[data-theme="dark"] .video-price-box {
    border-color: rgba(222, 244, 229, .17);
    background: rgba(27, 45, 39, .64);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .lead-form select,
html[data-theme="dark"] .news-search input,
html[data-theme="dark"] .coverage-search input,
html[data-theme="dark"] .coverage-quick-search input,
html[data-theme="dark"] .coverage-village-search input,
html[data-theme="dark"] .contact-form-card input,
html[data-theme="dark"] .contact-form-card textarea,
html[data-theme="dark"] .contact-form-card select,
html[data-theme="dark"] .subscribe-panel input {
    border-color: rgba(222, 244, 229, .22);
    background: rgba(255, 255, 255, .08);
    color: #f5fff7;
}

html[data-theme="dark"] .soft-label,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .tariff-tags-v2 span,
html[data-theme="dark"] .coverage-list-head strong,
html[data-theme="dark"] .coverage-city-button.active,
html[data-theme="dark"] .coverage-village.active,
html[data-theme="dark"] .coverage-village small.connected {
    color: #dcffd4;
    background: rgba(100, 210, 80, .18);
    border-color: rgba(144, 235, 105, .35);
}

html[data-theme="dark"] .home-v2-copy p,
html[data-theme="dark"] .tariffs-v2-hero p,
html[data-theme="dark"] .video-hero p,
html[data-theme="dark"] .news-hero p,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .contacts-hero p,
html[data-theme="dark"] .coverage-hero-v3 p {
    color: #d9e6df;
}

@media (max-width: 720px) {
    html[data-theme="dark"] .home-v2-hero,
    html[data-theme="dark"] .tariffs-v2-hero,
    html[data-theme="dark"] .video-hero,
    html[data-theme="dark"] .news-hero,
    html[data-theme="dark"] .about-hero {
        background-blend-mode: normal;
    }

    html[data-theme="dark"] .home-v2-hero {
        background:
            linear-gradient(180deg, rgba(28, 45, 39, .84) 0%, rgba(28, 45, 39, .68) 48%, rgba(28, 45, 39, .22) 100%),
            url("../img/hero-family-zasnet.png") 64% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .tariffs-v2-hero {
        background:
            linear-gradient(180deg, rgba(28, 45, 39, .84) 0%, rgba(28, 45, 39, .68) 48%, rgba(28, 45, 39, .2) 100%),
            url("../img/tariffs-router-hero.png") 58% bottom / cover no-repeat;
    }

html[data-theme="dark"] .video-hero {
        background:
            linear-gradient(180deg, rgba(28, 45, 39, .84) 0%, rgba(28, 45, 39, .68) 50%, rgba(28, 45, 39, .2) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat;
    }

    html[data-theme="dark"] .news-hero,
    html[data-theme="dark"] .about-hero {
        background:
            linear-gradient(180deg, rgba(28, 45, 39, .84) 0%, rgba(28, 45, 39, .68) 50%, rgba(28, 45, 39, .2) 100%),
            url("../img/hero-family-zasnet.png") 62% bottom / cover no-repeat;
    }
}

/* Header and footer polished card layout */
.topbar {
    top: 18px;
    width: min(1580px, calc(100% - 64px));
    min-height: 84px;
    margin: 22px auto 0;
    padding: 14px 24px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
}

.brand {
    flex: 0 0 300px;
    min-width: 300px;
    padding-right: 28px;
    border-right: 1px solid rgba(148, 163, 184, .22);
}

.brand .brand-mark {
    flex: 0 0 auto;
}

.brand-text {
    white-space: nowrap;
}

.brand small {
    max-width: 150px;
    color: #667085;
    line-height: 1.25;
}

.main-nav {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    gap: 8px;
    font-size: .95rem;
    font-weight: 850;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 17px;
    border-radius: 16px;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.main-nav a:hover,
.main-nav a.active {
    background: #eef8ef;
    color: #0f8a37;
}

.main-nav a.active::after {
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    background: #19a447;
}

.top-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.theme-toggle,
.top-actions .btn {
    min-height: 52px;
    border-radius: 16px;
    padding-inline: 20px;
    font-weight: 850;
}

.top-actions .btn.primary {
    min-width: 144px;
}

.site-footer.footer-v2 {
    display: block;
    width: min(1680px, calc(100% - 72px));
    margin: 58px auto 42px;
    padding: 58px 58px 28px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 30px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .11);
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(250px, 1.15fr) repeat(3, minmax(160px, .78fr)) minmax(220px, .95fr) minmax(180px, .72fr);
    gap: 46px;
    align-items: start;
}

.site-footer .footer-brand-v2,
.footer-brand-v2 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
}

.footer-brand-v2 .brand-mark {
    margin-top: 5px;
}

.footer-brand-v2 strong,
.site-footer .footer-brand-v2 strong {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 950;
    line-height: .95;
    letter-spacing: 0;
}

.footer-brand-v2 strong span {
    display: inline;
    margin: 0;
    color: #15923c;
}

.footer-brand-v2 b {
    display: block;
    max-width: 270px;
    margin-top: 24px;
    color: #0f172a;
    font-size: 1.34rem;
    font-weight: 950;
    line-height: 1.35;
}

.footer-brand-v2 i {
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 28px;
    border-radius: 999px;
    background: #169b41;
}

.site-footer .footer-brand-v2 p,
.footer-brand-v2 p {
    max-width: 315px;
    margin: 28px 0 0;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.7;
}

.footer-column h4,
.site-footer .footer-column h4 {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    margin: 0 0 24px;
    color: #111827;
    font-size: 1.14rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.footer-column h4::before {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #eff9f0;
    color: #168b37;
    font-size: 1.35rem;
    box-shadow: inset 0 0 0 1px rgba(22, 139, 55, .06);
}

.footer-column-services h4::before { content: "⌁"; }
.footer-column-support h4::before { content: "◜"; }
.footer-column-company h4::before { content: "▥"; }
.footer-column-contacts h4::before { content: "⌕"; }
.footer-column-socials h4::before { content: "⌯"; }

.site-footer .footer-link,
.site-footer .footer-contact-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 42px;
    margin: 0;
    color: #475569;
    font-size: 1.03rem;
    line-height: 1.35;
    transition: color .18s ease, transform .18s ease;
}

.site-footer .footer-link::after {
    content: "›";
    color: #16a34a;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;
}

.site-footer .footer-link:hover,
.site-footer .footer-contact-link:hover {
    color: #15803d;
    transform: translateX(2px);
}

.site-footer .footer-contact-link {
    position: relative;
    justify-content: flex-start;
    padding-left: 34px;
}

.site-footer .footer-contact-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1f9b3a;
    transform: translateY(-50%);
    box-shadow: 0 0 0 6px rgba(31, 155, 58, .08);
}

.site-footer .footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}

.site-footer .footer-socials a,
.site-footer.footer-v2 .footer-socials a {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 50%;
    background: #fff;
    color: #0f8a37;
    font-size: 1.08rem;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .04);
}

.site-footer .footer-socials a:hover {
    border-color: rgba(22, 163, 74, .34);
    background: #eef8ef;
    color: #138a38;
    transform: translateY(-2px);
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 48px;
    gap: 28px;
    align-items: center;
    margin-top: 52px;
    padding-top: 28px;
    border-top: 1px solid rgba(148, 163, 184, .25);
}

.site-footer .footer-bottom p,
.footer-bottom p {
    max-width: none;
    margin: 0;
    color: #475569;
    font-size: 1.02rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.site-footer .footer-legal a {
    display: inline-flex;
    margin: 0;
    padding: 0 28px;
    border-right: 1px solid rgba(148, 163, 184, .35);
    color: #475569;
    font-size: 1.02rem;
}

.site-footer .footer-legal a:last-child {
    border-right: 0;
}

.site-footer .footer-top,
.footer-top {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    background: #eef8ef;
    color: #15803d;
    font-size: 1.45rem;
    font-weight: 900;
}

html[data-theme="dark"] .topbar {
    border-color: rgba(222, 244, 229, .16);
    background: rgba(38, 58, 51, .9);
    box-shadow: 0 22px 55px rgba(5, 15, 13, .24);
}

html[data-theme="dark"] .brand {
    border-right-color: rgba(222, 244, 229, .16);
}

html[data-theme="dark"] .brand small {
    color: #c4d1cb;
}

html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active {
    background: rgba(127, 225, 92, .14);
    color: #dcffd4;
}

html[data-theme="dark"] .site-footer.footer-v2 {
    border-color: rgba(222, 244, 229, .16);
    background: linear-gradient(180deg, rgba(238, 248, 241, .97), rgba(231, 242, 235, .96));
    box-shadow: 0 24px 60px rgba(5, 15, 13, .24);
}

html[data-theme="dark"] .footer-brand-v2 strong,
html[data-theme="dark"] .footer-brand-v2 b,
html[data-theme="dark"] .footer-column h4 {
    color: #0f172a;
}

html[data-theme="dark"] .footer-brand-v2 p,
html[data-theme="dark"] .site-footer .footer-link,
html[data-theme="dark"] .site-footer .footer-contact-link,
html[data-theme="dark"] .footer-bottom p,
html[data-theme="dark"] .site-footer .footer-legal a {
    color: #475569;
}

html[data-theme="dark"] .footer-column h4::before,
html[data-theme="dark"] .site-footer .footer-top {
    background: #e5f5e9;
    color: #15803d;
}

html[data-theme="dark"] .site-footer .footer-socials a {
    border-color: rgba(148, 163, 184, .28);
    background: #fff;
    color: #15803d;
}

html[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(148, 163, 184, .28);
}

@media (max-width: 1360px) {
    .topbar {
        width: min(1240px, calc(100% - 34px));
        padding-inline: 18px;
    }

    .brand {
        flex-basis: 245px;
        min-width: 245px;
        padding-right: 18px;
    }

    .brand small {
        max-width: 105px;
    }

    .main-nav {
        gap: 4px;
        font-size: .88rem;
    }

    .main-nav a {
        padding-inline: 11px;
    }

    .theme-toggle,
    .top-actions .btn {
        padding-inline: 14px;
    }

    .site-footer.footer-v2 {
        width: min(1240px, calc(100% - 34px));
        padding: 42px 34px 24px;
    }

    .footer-main {
        grid-template-columns: minmax(250px, 1fr) repeat(3, minmax(145px, .72fr)) minmax(200px, .9fr) minmax(160px, .66fr);
        gap: 28px;
    }

    .footer-column h4 {
        gap: 12px;
        font-size: 1rem;
    }

    .footer-column h4::before {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 1100px) {
    .topbar {
        align-items: stretch;
        flex-wrap: wrap;
        min-height: auto;
    }

    .brand {
        flex: 1 1 auto;
        min-width: 220px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 4px 0 0;
    }

    .main-nav a {
        flex: 0 0 auto;
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand-v2 {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .footer-legal {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .site-footer .footer-legal a {
        padding: 6px 18px 6px 0;
        margin-right: 18px;
    }
}

@media (max-width: 720px) {
    .topbar {
        position: static;
        width: min(100% - 20px, 560px);
        margin-top: 10px;
        padding: 14px;
        border-radius: 20px;
    }

    .brand {
        flex: 1 1 100%;
        min-width: 0;
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .22);
    }

    .brand small {
        display: block;
        max-width: none;
    }

    .top-actions {
        width: 100%;
    }

    .theme-toggle,
    .top-actions .btn {
        flex: 1 1 auto;
        min-height: 46px;
        padding-inline: 12px;
        font-size: .88rem;
    }

    .site-footer.footer-v2 {
        width: min(100% - 20px, 560px);
        margin-top: 34px;
        padding: 28px 20px 20px;
        border-radius: 24px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-brand-v2 strong {
        font-size: 2rem;
    }

    .footer-brand-v2 b {
        margin-top: 16px;
        font-size: 1.12rem;
    }

    .footer-bottom {
        margin-top: 30px;
        padding-top: 20px;
    }

    .site-footer .footer-legal a {
        width: 100%;
        border-right: 0;
    }
}

/* Header fit refinement */
.topbar {
    width: min(1760px, calc(100% - 54px));
    min-height: 86px;
    padding: 14px 24px 14px 28px;
    gap: 26px;
}

.brand {
    flex: 0 0 306px;
    min-width: 306px;
    gap: 12px;
    padding-right: 22px;
}

.brand .brand-mark {
    width: 48px;
    height: 48px;
}

.brand-text {
    font-size: 1.5rem;
    line-height: 1;
}

.brand small {
    max-width: 110px;
    font-size: .76rem;
    line-height: 1.22;
}

.main-nav {
    justify-content: center;
    gap: 12px;
    font-size: .92rem;
}

.main-nav a {
    min-height: 50px;
    padding-inline: 15px;
}

.top-actions {
    gap: 12px;
}

.theme-toggle {
    min-width: 138px;
}

.top-actions .btn.secondary {
    min-width: 218px;
}

.top-actions .btn.primary {
    min-width: 158px;
}

.theme-toggle,
.top-actions .btn {
    min-height: 54px;
    padding-inline: 18px;
}

@media (min-width: 1500px) {
    .main-nav {
        gap: 16px;
    }

    .main-nav a {
        padding-inline: 18px;
    }
}

@media (max-width: 1480px) {
    .topbar {
        width: min(1360px, calc(100% - 32px));
        gap: 14px;
        padding-inline: 18px;
    }

    .brand {
        flex-basis: 256px;
        min-width: 256px;
        padding-right: 14px;
    }

    .brand .brand-mark {
        width: 42px;
        height: 42px;
    }

    .brand-text {
        font-size: 1.28rem;
    }

    .brand small {
        max-width: 82px;
        font-size: .68rem;
    }

    .main-nav {
        gap: 5px;
        font-size: .82rem;
    }

    .main-nav a {
        min-height: 46px;
        padding-inline: 9px;
    }

    .theme-toggle,
    .top-actions .btn {
        min-height: 48px;
        padding-inline: 12px;
        font-size: .86rem;
    }

    .theme-toggle {
        min-width: 112px;
    }

    .top-actions .btn.secondary {
        min-width: 178px;
    }

    .top-actions .btn.primary {
        min-width: 132px;
    }
}

/* Wide desktop polish */
@media (min-width: 1281px) {
    .home-v2,
    .tariffs-v2-page,
    .video-page,
    .news-page,
    .about-page,
    .coverage-page-v3,
    .contacts-page,
    .plans-section,
    .coverage-section,
    .why-section,
    .cabinet-band,
    .request-band,
    .news-section,
    .section,
    .contact-map-section,
    .contacts-grid {
        width: min(1480px, calc(100% - 96px));
    }

    .home-v2-hero,
    .tariffs-v2-hero,
    .video-hero,
    .news-hero,
    .about-hero,
    .contacts-hero,
    .coverage-hero-v3 {
        border-radius: 30px;
    }

    .coverage-check-v2,
    .cabinet-v2 {
        min-height: 230px;
    }

    .why-v2-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .site-footer.footer-v2 {
        width: min(1760px, calc(100% - 120px));
    }
}

@media (min-width: 1700px) {
    .home-v2,
    .tariffs-v2-page,
    .video-page,
    .news-page,
    .about-page,
    .coverage-page-v3,
    .contacts-page,
    .plans-section,
    .coverage-section,
    .why-section,
    .cabinet-band,
    .request-band,
    .news-section,
    .section,
    .contact-map-section,
    .contacts-grid {
        width: min(1600px, calc(100% - 160px));
    }

    .topbar {
        width: min(1840px, calc(100% - 110px));
    }
}

.footer-column-services h4::before,
.footer-column-support h4::before,
.footer-column-company h4::before,
.footer-column-contacts h4::before,
.footer-column-socials h4::before {
    content: "";
    position: relative;
}

.footer-column h4::after {
    content: "";
    position: absolute;
}

.footer-column h4 {
    position: relative;
}

.footer-column h4::before {
    background:
        radial-gradient(circle at 50% 50%, #168b37 0 3px, transparent 4px),
        linear-gradient(#168b37, #168b37) center / 18px 2px no-repeat,
        #eff9f0;
}

.footer-column-support h4::before {
    background:
        radial-gradient(circle at 50% 48%, transparent 9px, #168b37 10px 12px, transparent 13px),
        linear-gradient(#168b37, #168b37) 65% 64% / 8px 2px no-repeat,
        #eff9f0;
}

.footer-column-company h4::before {
    background:
        linear-gradient(#168b37, #168b37) 50% 31% / 17px 3px no-repeat,
        repeating-linear-gradient(90deg, #168b37 0 2px, transparent 2px 6px) 50% 52% / 18px 16px no-repeat,
        #eff9f0;
}

.footer-column-contacts h4::before {
    background:
        radial-gradient(circle at 42% 38%, transparent 7px, #168b37 8px 10px, transparent 11px),
        linear-gradient(45deg, transparent 45%, #168b37 46% 54%, transparent 55%) 60% 62% / 18px 18px no-repeat,
        #eff9f0;
}

.footer-column-socials h4::before {
    background:
        radial-gradient(circle at 29% 50%, #168b37 0 3px, transparent 4px),
        radial-gradient(circle at 71% 29%, #168b37 0 3px, transparent 4px),
        radial-gradient(circle at 71% 71%, #168b37 0 3px, transparent 4px),
        linear-gradient(30deg, transparent 30%, #168b37 31% 36%, transparent 37%) center / 24px 18px no-repeat,
        linear-gradient(-30deg, transparent 30%, #168b37 31% 36%, transparent 37%) center / 24px 18px no-repeat,
        #eff9f0;
}

/* Softer readable dark theme */
html[data-theme="dark"] {
    --ink: #f7fff8;
    --ink-soft: #ffffff;
    --muted: #dbe8df;
    --surface: rgba(71, 101, 88, .78);
    --line: rgba(230, 247, 235, .22);
    --shadow: 0 22px 60px rgba(12, 31, 25, .23);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 9% 2%, rgba(121, 189, 103, .18), transparent 30%),
        radial-gradient(circle at 93% 12%, rgba(137, 214, 99, .15), transparent 32%),
        linear-gradient(180deg, #304d42 0%, #3f5f51 48%, #345346 100%);
    color: #f7fff8;
}

html[data-theme="dark"] .topbar {
    border-color: rgba(230, 247, 235, .22);
    background: rgba(67, 96, 84, .9);
}

html[data-theme="dark"] .home-v2-hero,
html[data-theme="dark"] .tariffs-v2-hero,
html[data-theme="dark"] .video-hero,
html[data-theme="dark"] .news-hero,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .contacts-hero,
html[data-theme="dark"] .coverage-hero-v3 {
    border-color: rgba(230, 247, 235, .24);
    box-shadow: 0 24px 70px rgba(13, 35, 29, .24);
}

html[data-theme="dark"] .feature-row article,
html[data-theme="dark"] .why-v2-grid article,
html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-card-v2,
html[data-theme="dark"] .tariff-benefits-mini article,
html[data-theme="dark"] .place-meta article,
html[data-theme="dark"] .coverage-list-v2,
html[data-theme="dark"] .tariffs-v2-stage,
html[data-theme="dark"] .video-feature-row article,
html[data-theme="dark"] .video-package-card,
html[data-theme="dark"] .video-consult,
html[data-theme="dark"] .news-card-v2,
html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .subscribe-panel,
html[data-theme="dark"] .news-article-card,
html[data-theme="dark"] .about-stats article,
html[data-theme="dark"] .about-mission,
html[data-theme="dark"] .about-why,
html[data-theme="dark"] .about-why-grid article,
html[data-theme="dark"] .documents-grid article,
html[data-theme="dark"] .timeline-row article,
html[data-theme="dark"] .about-badges article,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .contact-map-panel,
html[data-theme="dark"] .contact-form-panel,
html[data-theme="dark"] .contact-info-strip,
html[data-theme="dark"] .coverage-villages-card,
html[data-theme="dark"] .coverage-result-card,
html[data-theme="dark"] .coverage-help-grid article {
    border-color: rgba(230, 247, 235, .23);
    background: linear-gradient(180deg, rgba(76, 105, 92, .78), rgba(55, 84, 72, .76));
    box-shadow: 0 18px 48px rgba(13, 35, 29, .18);
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-card-v2.featured,
html[data-theme="dark"] .video-package-card.featured {
    border-color: rgba(122, 238, 87, .62);
    background: linear-gradient(180deg, rgba(82, 130, 78, .9), rgba(57, 103, 66, .84));
    box-shadow: 0 24px 66px rgba(53, 178, 62, .2);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .home-v2-copy h1,
html[data-theme="dark"] .tariffs-v2-hero h1,
html[data-theme="dark"] .video-hero h1,
html[data-theme="dark"] .news-hero h1,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .contacts-hero h1,
html[data-theme="dark"] .coverage-hero-v3 h1,
html[data-theme="dark"] .tariff-v2-card h3,
html[data-theme="dark"] .tariff-v2-card strong,
html[data-theme="dark"] .tariff-card-v2 h3,
html[data-theme="dark"] .tariff-card-v2 strong,
html[data-theme="dark"] .video-package-card h3,
html[data-theme="dark"] .video-package-head strong,
html[data-theme="dark"] .news-card-v2 h2,
html[data-theme="dark"] .popular-list strong,
html[data-theme="dark"] .contacts-card h3,
html[data-theme="dark"] .contacts-card strong,
html[data-theme="dark"] .contact-map-panel h2,
html[data-theme="dark"] .contact-form-panel h2,
html[data-theme="dark"] .documents-grid h3,
html[data-theme="dark"] .about-why-grid h3 {
    color: #f8fff8;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] small,
html[data-theme="dark"] .home-v2-copy p,
html[data-theme="dark"] .tariffs-v2-hero p,
html[data-theme="dark"] .video-hero p,
html[data-theme="dark"] .news-hero p,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .contacts-hero p,
html[data-theme="dark"] .coverage-hero-v3 p,
html[data-theme="dark"] .feature-row p,
html[data-theme="dark"] .why-v2-grid p,
html[data-theme="dark"] .tariff-v2-card li,
html[data-theme="dark"] .tariff-card-v2 p,
html[data-theme="dark"] .video-package-card p,
html[data-theme="dark"] .video-package-card li,
html[data-theme="dark"] .news-card-v2 p,
html[data-theme="dark"] .news-card-v2 time,
html[data-theme="dark"] .popular-list small,
html[data-theme="dark"] .about-mission p,
html[data-theme="dark"] .about-why-grid p,
html[data-theme="dark"] .contacts-card p,
html[data-theme="dark"] .contacts-lead-form p {
    color: #dce8e1;
}

html[data-theme="dark"] .plan-price,
html[data-theme="dark"] .video-price,
html[data-theme="dark"] .video-price strong,
html[data-theme="dark"] .tariff-speed-price strong,
html[data-theme="dark"] .tariff-speed-price div,
html[data-theme="dark"] .coverage-result-meta strong {
    color: #f8fff8;
}

html[data-theme="dark"] .plan-price span,
html[data-theme="dark"] .video-price span,
html[data-theme="dark"] .tariff-speed-price small,
html[data-theme="dark"] .coverage-result-meta small {
    color: #d4e2da;
}

html[data-theme="dark"] .tariff-tags-v2 span,
html[data-theme="dark"] .plan-chip,
html[data-theme="dark"] .soft-label,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .coverage-list-head strong,
html[data-theme="dark"] .coverage-city-button.active,
html[data-theme="dark"] .coverage-village.active,
html[data-theme="dark"] .coverage-village small.connected {
    color: #e8ffdf;
    background: rgba(113, 229, 78, .22);
    border-color: rgba(158, 239, 112, .4);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .lead-form input,
html[data-theme="dark"] .lead-form textarea,
html[data-theme="dark"] .lead-form select,
html[data-theme="dark"] .contacts-lead-form input,
html[data-theme="dark"] .contacts-lead-form textarea,
html[data-theme="dark"] .contacts-lead-form select,
html[data-theme="dark"] .news-search input,
html[data-theme="dark"] .coverage-search input,
html[data-theme="dark"] .coverage-quick-search input,
html[data-theme="dark"] .coverage-village-search input,
html[data-theme="dark"] .subscribe-panel input {
    border-color: rgba(230, 247, 235, .24);
    background: rgba(43, 64, 56, .72);
    color: #f8fff8;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .contacts-lead-form input::placeholder,
html[data-theme="dark"] .contacts-lead-form textarea::placeholder,
html[data-theme="dark"] .subscribe-panel input::placeholder {
    color: #c8d7cf;
    opacity: 1;
}

html[data-theme="dark"] .contact-form-panel {
    padding: 34px;
}

html[data-theme="dark"] .contacts-lead-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

html[data-theme="dark"] .contacts-lead-form textarea,
html[data-theme="dark"] .contacts-lead-form p,
html[data-theme="dark"] .contacts-lead-form button {
    grid-column: 1 / -1;
}

html[data-theme="dark"] .map-frame {
    background: rgba(238, 248, 241, .95);
}

html[data-theme="dark"] .map-frame .map-card,
html[data-theme="dark"] .map-card {
    background: rgba(255, 255, 255, .92);
    color: #142033;
}

html[data-theme="dark"] .site-footer.footer-v2 {
    background: linear-gradient(180deg, rgba(240, 248, 242, .98), rgba(232, 242, 236, .97));
}

@media (max-width: 720px) {
    html[data-theme="dark"] .contacts-lead-form {
        grid-template-columns: 1fr;
    }
}

/* Dark theme final readability pass */
html[data-theme="dark"] .tariffs-v2-stage {
    background: linear-gradient(180deg, rgba(92, 128, 111, .68), rgba(71, 105, 90, .66));
}

html[data-theme="dark"] .tariff-card-v2 {
    border-color: rgba(235, 252, 239, .28);
    background: linear-gradient(180deg, rgba(86, 122, 106, .86), rgba(66, 100, 86, .82));
}

html[data-theme="dark"] .tariff-card-v2.featured {
    border-color: rgba(137, 246, 96, .68);
    background: linear-gradient(180deg, rgba(112, 181, 96, .72), rgba(72, 132, 77, .78));
}

html[data-theme="dark"] .tariff-card-top span,
html[data-theme="dark"] .tariff-card-top h4,
html[data-theme="dark"] .tariff-card-v2 p,
html[data-theme="dark"] .tariff-card-v2 .btn {
    color: #f8fff8;
}

html[data-theme="dark"] .tariff-speed-price {
    border: 1px solid rgba(235, 252, 239, .22);
    border-radius: 18px;
    background: rgba(39, 65, 55, .5);
    padding: 16px;
}

html[data-theme="dark"] .tariff-speed-price div + div {
    border-left-color: rgba(235, 252, 239, .2);
}

html[data-theme="dark"] .tariff-speed-price strong,
html[data-theme="dark"] .tariff-speed-price small,
html[data-theme="dark"] .tariff-card-v2 .tariff-speed-price strong,
html[data-theme="dark"] .tariff-card-v2 .tariff-speed-price small {
    color: #f8fff8;
}

html[data-theme="dark"] .tariff-tags-v2 span {
    color: #f6fff4;
    background: rgba(130, 231, 91, .25);
}

html[data-theme="dark"] .tariff-benefits-mini article {
    background: rgba(86, 122, 106, .66);
}

html[data-theme="dark"] .tariff-benefits-mini strong,
html[data-theme="dark"] .tariff-benefits-mini small {
    color: #f8fff8;
}

html[data-theme="dark"] .site-footer.footer-v2 {
    border-color: rgba(235, 252, 239, .22);
    background: linear-gradient(180deg, rgba(76, 105, 92, .92), rgba(58, 88, 75, .9));
    box-shadow: 0 24px 65px rgba(13, 35, 29, .22);
}

html[data-theme="dark"] .footer-brand-v2 strong,
html[data-theme="dark"] .footer-brand-v2 b,
html[data-theme="dark"] .footer-column h4,
html[data-theme="dark"] .site-footer .footer-brand-v2 strong,
html[data-theme="dark"] .site-footer .footer-column h4 {
    color: #f8fff8;
}

html[data-theme="dark"] .footer-brand-v2 p,
html[data-theme="dark"] .site-footer .footer-link,
html[data-theme="dark"] .site-footer .footer-contact-link,
html[data-theme="dark"] .footer-bottom p,
html[data-theme="dark"] .site-footer .footer-legal a {
    color: #dce8e1;
}

html[data-theme="dark"] .site-footer .footer-socials a {
    border-color: rgba(235, 252, 239, .26);
    background: rgba(235, 252, 239, .1);
    color: #bfff9a;
}

html[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(235, 252, 239, .22);
}

html[data-theme="dark"] .footer-column h4::before,
html[data-theme="dark"] .site-footer .footer-top {
    background:
        radial-gradient(circle at 50% 50%, #7cff56 0 3px, transparent 4px),
        linear-gradient(#7cff56, #7cff56) center / 18px 2px no-repeat,
        rgba(130, 231, 91, .18);
    color: #bfff9a;
}

/* Tariff benefits text fix */
.tariff-benefits-mini article {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    min-height: 128px;
}

.tariff-benefits-mini article > strong,
.tariff-benefits-mini article > small {
    grid-column: 2;
}

.tariff-benefits-mini article > strong {
    align-self: center;
    max-width: none;
    line-height: 1.25;
}

.tariff-benefits-mini article > small {
    margin-top: 8px;
    line-height: 1.45;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.tariff-benefits-mini .home-icon {
    grid-row: 1 / span 2;
}

@media (max-width: 1200px) {
    .tariff-benefits-mini article {
        grid-template-columns: 48px minmax(0, 1fr);
    }
}

/* Site system polish from final spec */
:root {
    --system-bg: #eef5f0;
    --system-card: #ffffff;
    --system-card-soft: #f7fbf8;
    --system-ink: #102033;
    --system-muted: #5f6f82;
    --system-green: #15943a;
    --system-lime: #a8ff1f;
    --system-line: rgba(15, 23, 42, .1);
}

body {
    background: linear-gradient(180deg, #edf5f0 0%, #f6faf7 45%, #edf5f0 100%);
}

.main-nav a.active {
    background: #e7f6ea;
    color: #0d7d32;
    box-shadow: inset 0 0 0 1px rgba(21, 148, 58, .08);
}

.main-nav a.active::after {
    height: 3px;
    border-radius: 999px;
}

.btn.primary,
.btn.green {
    color: #fff;
    background: linear-gradient(90deg, #15943a, #a8ff1f);
}

.btn.light,
.btn.secondary {
    background: rgba(255, 255, 255, .9);
}

.tariff-v2-card,
.tariff-card-v2,
.video-package-card,
.news-card-v2,
.documents-grid article,
.contacts-card,
.coverage-villages-card,
.coverage-result-card,
.about-mission,
.about-why,
.contact-map-panel,
.contact-form-panel {
    background: var(--system-card);
}

.tariff-v2-grid {
    align-items: stretch;
}

.tariff-v2-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.tariff-v2-card ul {
    min-height: 92px;
}

.tariff-v2-card li:first-child {
    display: -webkit-box;
    min-height: 48px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tariff-v2-card .plan-price {
    margin-top: auto;
}

.tariff-v2-card .btn {
    margin-top: 18px;
}

.tariffs-cards-v2 {
    align-items: stretch;
}

.tariff-card-v2 {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

.tariff-card-v2 p {
    min-height: 54px;
    margin-bottom: 0;
}

.tariff-speed-price {
    margin-top: 22px;
    padding-top: 4px;
}

.tariff-tags-v2 {
    margin-top: 20px;
}

.tariff-card-v2 .btn {
    margin-top: auto;
}

.plan-chip,
.tariff-card-top b,
.tariff-tags-v2 span,
.news-thumb span,
.coverage-village small,
.coverage-city-button small {
    border-radius: 999px;
    font-weight: 900;
}

.tariff-card-v2.featured::before,
.tariff-v2-card.featured::before,
.video-package-card.featured::before {
    content: "Рекомендований";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 16px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(90deg, #149236, #80d020);
    font-size: .74rem;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .2);
    z-index: 2;
}

.tariff-benefits-mini {
    position: relative;
    padding-top: 42px;
}

.tariff-benefits-mini::before {
    content: "Що входить у тариф";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--system-ink);
    font-size: 1.35rem;
    font-weight: 950;
}

.tariffs-request-v2 h2::before {
    content: "Не знаєте, який тариф обрати?";
    display: block;
    margin-bottom: 8px;
    color: #7dff4e;
    font-size: 1rem;
}

.coverage-hero-v3 {
    min-height: 300px;
}

.coverage-workspace-v3 {
    align-items: stretch;
}

.coverage-village.active,
.coverage-city-button.active {
    border-color: rgba(21, 148, 58, .18);
    background: #e8f7eb;
    color: #0f7d34;
    box-shadow: inset 4px 0 0 #1aa345;
}

.coverage-village small.connected,
.coverage-village small.building,
.coverage-village small.planned {
    padding: 5px 12px;
}

.coverage-village small.connected {
    color: #0f7d34;
    background: #dff5e5;
}

.coverage-village small.building {
    color: #b45309;
    background: #fff4d8;
}

.coverage-village small.planned {
    color: #2563eb;
    background: #e6efff;
}

.coverage-map-hero {
    opacity: .82;
}

.video-package-grid,
.news-card-grid,
.documents-grid,
.contacts-grid {
    align-items: stretch;
}

.video-package-card,
.news-card-v2 {
    display: flex;
    flex-direction: column;
}

.video-package-card .btn,
.news-card-v2 .read-more {
    margin-top: auto;
}

.news-card-v2 {
    min-height: 360px;
}

.news-card-v2 p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news-thumb span {
    color: #fff;
    background: rgba(22, 163, 74, .86);
}

.documents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.documents-grid article {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: start;
    min-height: 176px;
}

.documents-grid article a {
    grid-column: 2;
    align-self: end;
    display: inline-flex;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid rgba(21, 148, 58, .32);
    border-radius: 12px;
    color: #15803d;
    font-weight: 900;
}

.documents-grid article a::before {
    content: "PDF · ";
}

.contacts-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.contacts-card {
    min-height: 164px;
}

.contacts-card strong {
    display: block;
    line-height: 1.45;
    white-space: normal;
}

.contacts-card p {
    line-height: 1.55;
}

.contacts-lead-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contacts-lead-form input[name="address"] {
    display: none;
}

.contacts-lead-form select,
.contacts-lead-form textarea,
.contacts-lead-form p,
.contacts-lead-form button {
    grid-column: 1 / -1;
}

.contacts-lead-form textarea {
    min-height: 116px;
}

.footer-column-contacts {
    min-width: 220px;
}

.site-footer .footer-contact-link {
    min-height: 34px;
    line-height: 1.45;
}

.footer-socials {
    align-content: flex-start;
}

html[data-theme="dark"] body {
    background: linear-gradient(180deg, #3e5f51 0%, #587866 48%, #416352 100%);
}

html[data-theme="dark"] .coverage-village.active,
html[data-theme="dark"] .coverage-city-button.active {
    background: #dff5e5;
    color: #0f7d34;
    box-shadow: inset 4px 0 0 #7be25c;
}

html[data-theme="dark"] .coverage-village.active span,
html[data-theme="dark"] .coverage-city-button.active span,
html[data-theme="dark"] .coverage-village.active small,
html[data-theme="dark"] .coverage-city-button.active small {
    color: #0f7d34;
}

html[data-theme="dark"] .tariff-benefits-mini::before {
    color: #f8fff8;
}

html[data-theme="dark"] .documents-grid article a {
    border-color: rgba(180, 255, 145, .34);
    color: #c8ff9f;
}

@media (max-width: 1180px) {
    .contacts-grid,
    .documents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .contacts-grid,
    .documents-grid {
        grid-template-columns: 1fr;
    }

    .tariff-v2-card,
    .tariff-card-v2,
    .news-card-v2 {
        min-height: auto;
    }
}

/* Compact polished footer */
.site-footer.footer-v2 {
    width: min(1380px, calc(100% - 120px));
    margin: 46px auto 34px;
    padding: 36px 44px 22px;
    border-radius: 26px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .09);
}

.footer-main {
    grid-template-columns: minmax(230px, 1.08fr) repeat(3, minmax(135px, .62fr)) minmax(210px, .9fr) minmax(128px, .5fr);
    gap: 30px;
}

.site-footer .footer-brand-v2,
.footer-brand-v2 {
    gap: 14px;
}

.footer-brand-v2 .brand-mark {
    width: 44px;
    height: 44px;
    margin-top: 1px;
}

.footer-brand-v2 strong,
.site-footer .footer-brand-v2 strong {
    font-size: clamp(1.8rem, 2.1vw, 2.45rem);
}

.footer-brand-v2 b {
    max-width: 230px;
    margin-top: 16px;
    font-size: 1.06rem;
    line-height: 1.4;
}

.footer-brand-v2 i {
    width: 44px;
    margin-top: 18px;
}

.site-footer .footer-brand-v2 p,
.footer-brand-v2 p {
    max-width: 245px;
    margin-top: 18px;
    font-size: .92rem;
    line-height: 1.6;
}

.footer-column h4,
.site-footer .footer-column h4 {
    gap: 12px;
    min-height: 42px;
    margin-bottom: 16px;
    font-size: 1.02rem;
}

.footer-column h4::before {
    content: "";
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eff9f0;
    box-shadow: inset 0 0 0 1px rgba(22, 139, 55, .08);
}

.footer-column h4::after {
    content: "";
    left: 12px;
    top: 11px;
    width: 20px;
    height: 20px;
    background: #168b37;
    -webkit-mask: var(--footer-icon) center / contain no-repeat;
    mask: var(--footer-icon) center / contain no-repeat;
}

.footer-column-services h4 { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a7 7 0 0 1 14 0'/%3E%3Cpath d='M8 12.5a4 4 0 0 1 8 0'/%3E%3Cpath d='M11 12.5a1 1 0 0 1 2 0'/%3E%3C/svg%3E"); }
.footer-column-support h4 { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 16 0v5a3 3 0 0 1-3 3h-3'/%3E%3Cpath d='M4 13v4a2 2 0 0 0 2 2h1v-8H6a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M20 13v4a2 2 0 0 1-2 2h-1v-8h1a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E"); }
.footer-column-company h4 { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V8l8-4 8 4v13'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3Cpath d='M9 10h.01M15 10h.01'/%3E%3C/svg%3E"); }
.footer-column-contacts h4 { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7l.4 2.7a2 2 0 0 1-.6 1.8L7.6 9.5a16 16 0 0 0 6.9 6.9l1.3-1.3a2 2 0 0 1 1.8-.6l2.7.4a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }
.footer-column-socials h4 { --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }

.site-footer .footer-link,
.site-footer .footer-contact-link {
    min-height: 32px;
    gap: 10px;
    font-size: .94rem;
}

.site-footer .footer-link::after {
    font-size: 1.2rem;
}

.site-footer .footer-contact-link {
    padding-left: 24px;
}

.site-footer .footer-contact-link::before {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 5px rgba(31, 155, 58, .08);
}

.site-footer .footer-socials {
    gap: 10px;
}

.site-footer .footer-socials a,
.site-footer.footer-v2 .footer-socials a {
    position: relative;
    width: 42px;
    height: 42px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.site-footer .footer-socials a::before {
    content: "";
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--social-icon) center / contain no-repeat;
    mask: var(--social-icon) center / contain no-repeat;
}

.site-footer .footer-socials a:nth-child(1) {
    color: #1877f2;
}

.site-footer .footer-socials a:nth-child(1)::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.1 8.2h-2V6.9c0-.6.4-.8.8-.8h1.2V3.8c-.7-.1-1.4-.1-2.1-.1-2.2 0-3.6 1.3-3.6 3.7v.8H7.2v2.6h2.2v9.4h3.7v-9.4h2.5l.4-2.6h-2.9Z'/%3E%3C/svg%3E");
}

.site-footer .footer-socials a:nth-child(2) {
    color: #e1306c;
}

.site-footer .footer-socials a:nth-child(2)::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M16.8 7.2h.01'/%3E%3C/svg%3E");
}

.site-footer .footer-socials a:nth-child(3) {
    color: #229ed9;
}

.site-footer .footer-socials a:nth-child(3)::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.5 4.4 18.2 20c-.2 1-.8 1.2-1.6.8l-4.8-3.6-2.3 2.2c-.3.3-.5.5-1 .5l.4-5 9.2-8.3c.4-.4-.1-.6-.6-.3L6.1 13.4 1.2 11.9c-1-.3-1-1.1.2-1.6L20.4 3c.9-.3 1.6.2 1.1 1.4Z'/%3E%3C/svg%3E");
}

.site-footer .footer-socials a:nth-child(4) {
    color: #ff0000;
}

.site-footer .footer-socials a:nth-child(4)::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2s-.2-1.5-.8-2.1c-.8-.8-1.7-.8-2.1-.9C15.8 4 12 4 12 4s-3.8 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2.1-.8 2.1S2 9 2 10.9v1.8c0 1.9.3 3.7.3 3.7s.2 1.5.8 2.1c.8.8 1.9.8 2.4.9 1.8.2 6.5.2 6.5.2s3.8 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2.1.8-2.1s.3-1.8.3-3.7v-1.8c0-1.9-.3-3.7-.3-3.7ZM10 14.6V8.9l5.2 2.9-5.2 2.8Z'/%3E%3C/svg%3E");
}

.footer-bottom {
    grid-template-columns: 1fr auto 40px;
    gap: 18px;
    margin-top: 30px;
    padding-top: 20px;
}

.site-footer .footer-bottom p,
.footer-bottom p,
.site-footer .footer-legal a {
    font-size: .9rem;
}

.site-footer .footer-legal a {
    padding: 0 18px;
}

.site-footer .footer-top,
.footer-top {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}

html[data-theme="dark"] .site-footer.footer-v2 {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 20px 48px rgba(5, 15, 13, .22);
}

html[data-theme="dark"] .footer-column h4::before,
html[data-theme="dark"] .site-footer .footer-top {
    background: #eff9f0;
}

@media (max-width: 1460px) {
    .site-footer.footer-v2 {
        width: min(1240px, calc(100% - 56px));
        padding-inline: 34px;
    }

    .footer-main {
        grid-template-columns: minmax(230px, 1fr) repeat(2, minmax(150px, .7fr)) minmax(190px, .85fr) minmax(126px, .55fr);
    }

    .footer-column-company {
        display: none;
    }
}

@media (max-width: 980px) {
    .site-footer.footer-v2 {
        width: min(100% - 28px, 720px);
        padding: 28px 24px 20px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .footer-brand-v2 {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

/* Footer final proportions: wider, lower, cleaner */
.site-footer.footer-v2 {
    width: min(1540px, calc(100% - 84px));
    margin: 40px auto 30px;
    padding: 28px 34px 16px;
    border-radius: 24px;
}

.footer-main {
    grid-template-columns: minmax(215px, .92fr) repeat(3, minmax(145px, .62fr)) minmax(235px, .9fr) minmax(125px, .46fr);
    gap: 24px;
    align-items: start;
}

.footer-brand-v2 .brand-mark {
    width: 38px;
    height: 38px;
}

.footer-brand-v2 strong,
.site-footer .footer-brand-v2 strong {
    font-size: clamp(1.55rem, 1.75vw, 2.1rem);
    line-height: 1;
}

.footer-brand-v2 b {
    max-width: 205px;
    margin-top: 10px;
    font-size: .98rem;
    line-height: 1.35;
}

.footer-brand-v2 i {
    width: 36px;
    margin-top: 12px;
}

.site-footer .footer-brand-v2 p,
.footer-brand-v2 p {
    max-width: 210px;
    margin-top: 10px;
    font-size: .84rem;
    line-height: 1.45;
}

.footer-column h4,
.site-footer .footer-column h4 {
    gap: 10px;
    min-height: 34px;
    margin-bottom: 9px;
    font-size: .94rem;
}

.footer-column h4::before {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.footer-column h4::after {
    left: 9px;
    top: 8px;
    width: 17px;
    height: 17px;
}

.site-footer .footer-link,
.site-footer .footer-contact-link {
    min-height: 27px;
    font-size: .88rem;
    line-height: 1.28;
}

.site-footer .footer-contact-link {
    padding-left: 20px;
}

.site-footer .footer-contact-link::before {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px rgba(31, 155, 58, .08);
}

.site-footer .footer-socials {
    gap: 8px;
}

.site-footer .footer-socials a,
.site-footer.footer-v2 .footer-socials a {
    width: 36px;
    height: 36px;
}

.site-footer .footer-socials a::before {
    width: 17px;
    height: 17px;
}

.footer-bottom {
    grid-template-columns: 1fr auto 36px;
    gap: 14px;
    margin-top: 20px;
    padding-top: 14px;
}

.site-footer .footer-bottom p,
.footer-bottom p,
.site-footer .footer-legal a {
    font-size: .84rem;
}

.site-footer .footer-legal a {
    padding: 0 14px;
}

.site-footer .footer-top,
.footer-top {
    width: 36px;
    height: 36px;
}

@media (max-width: 1460px) {
    .site-footer.footer-v2 {
        width: min(1360px, calc(100% - 44px));
        padding-inline: 28px;
    }

    .footer-main {
        grid-template-columns: minmax(210px, .9fr) repeat(2, minmax(150px, .65fr)) minmax(230px, .92fr) minmax(120px, .45fr);
        gap: 22px;
    }
}

/* Align header and footer with the page content */
:root {
    --page-shell-width: min(1480px, calc(100% - 96px));
}

@media (min-width: 1700px) {
    :root {
        --page-shell-width: min(1600px, calc(100% - 160px));
    }
}

.topbar,
.site-footer.footer-v2 {
    width: var(--page-shell-width);
}

.site-footer.footer-v2 {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1280px) {
    :root {
        --page-shell-width: min(1220px, calc(100% - 48px));
    }
}

@media (max-width: 760px) {
    :root {
        --page-shell-width: min(100% - 20px, 560px);
    }
}

/* Header final fit inside the aligned shell */
.topbar {
    min-height: 62px;
    padding: 10px 18px;
    gap: 12px;
    justify-content: flex-start;
    overflow: hidden;
}

.brand {
    flex: 0 0 206px;
    min-width: 206px;
    gap: 9px;
    padding-right: 14px;
    border-right: 1px solid rgba(15, 23, 42, .08);
}

.brand .brand-mark,
.brand-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.brand-mark img {
    width: 34px;
    height: 34px;
}

.brand-text {
    font-size: 1.2rem;
    line-height: 1;
    white-space: nowrap;
}

.brand small {
    max-width: 70px;
    font-size: .6rem;
    line-height: 1.05;
}

.main-nav {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    gap: 6px;
    font-size: .82rem;
}

.main-nav a {
    flex: 0 0 auto;
    padding: 11px 12px;
    border-radius: 12px;
    white-space: nowrap;
}

.main-nav a.active {
    background: #eef8ef;
}

.main-nav a.active::after {
    left: 12px;
    right: 12px;
    bottom: 7px;
}

.top-actions {
    flex: 0 0 auto;
    gap: 8px;
}

.theme-toggle,
.top-actions .btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: .88rem;
    white-space: nowrap;
}

.theme-toggle {
    min-width: 104px;
}

.top-actions .btn.secondary {
    min-width: 160px;
}

.top-actions .btn.primary {
    min-width: 128px;
}

@media (max-width: 1460px) {
    .brand {
        flex-basis: 176px;
        min-width: 176px;
    }

    .brand small {
        display: none;
    }

    .main-nav {
        gap: 3px;
        font-size: .78rem;
    }

    .main-nav a {
        padding-inline: 9px;
    }

    .theme-toggle,
    .top-actions .btn {
        padding-inline: 12px;
        font-size: .82rem;
    }

    .top-actions .btn.secondary {
        min-width: 142px;
    }

    .top-actions .btn.primary {
        min-width: 114px;
    }
}

@media (max-width: 1180px) {
    .topbar {
        flex-wrap: wrap;
        overflow: visible;
    }

    .main-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }
}

/* Cabinet login through the main site */
.cabinet-login-page {
    width: var(--page-shell-width);
    margin: 0 auto;
    padding: 26px 0 10px;
}

.cabinet-login-hero {
    min-height: 300px;
    display: grid;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 46%, rgba(255, 255, 255, .15) 72%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
    box-shadow: 0 20px 58px rgba(15, 23, 42, .1);
}

.cabinet-login-hero > div {
    max-width: 630px;
    padding: 46px;
}

.page-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 16px;
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 999px;
    background: #eef8ef;
    color: #15803d;
    font-weight: 900;
}

.cabinet-login-hero h1 {
    margin: 20px 0 16px;
    color: #0f172a;
    font-size: clamp(2.5rem, 4vw, 4.4rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.cabinet-login-hero p {
    max-width: 560px;
    margin: 0;
    color: #475569;
    font-size: 1.08rem;
    line-height: 1.7;
}

.cabinet-login-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.cabinet-login-badges span {
    padding: 9px 14px;
    border: 1px solid rgba(22, 163, 74, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: #15803d;
    font-weight: 900;
}

.cabinet-login-grid {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.cabinet-login-card,
.cabinet-login-info {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 26px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.cabinet-login-card {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 30px;
}

.cabinet-login-head {
    display: flex;
    gap: 14px;
    align-items: center;
}

.cabinet-login-head h2,
.cabinet-login-info h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1.2;
}

.cabinet-login-head p {
    margin: 5px 0 0;
    color: #64748b;
    line-height: 1.5;
}

.cabinet-login-card label {
    display: grid;
    gap: 8px;
    color: #0f172a;
    font-weight: 900;
}

.cabinet-login-card input {
    min-height: 54px;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 15px;
    padding: 0 16px;
    color: #0f172a;
    background: #f8fbfa;
    font: inherit;
}

.cabinet-login-card input:focus {
    outline: 3px solid rgba(22, 163, 74, .14);
    border-color: rgba(22, 163, 74, .45);
    background: #fff;
}

.cabinet-forgot-link {
    justify-self: center;
    color: #15803d;
    font-weight: 900;
}

.cabinet-login-info {
    padding: 30px;
}

.cabinet-login-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.cabinet-login-features article {
    min-height: 168px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 20px;
    background: #f7fbf8;
}

.cabinet-login-features h3 {
    margin: 14px 0 8px;
    color: #0f172a;
    font-size: 1rem;
}

.cabinet-login-features p,
.cabinet-direct-box p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

.cabinet-direct-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    align-items: center;
    margin-top: 18px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(90deg, #eef8ef, #eef7ff);
}

.cabinet-direct-box strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.cabinet-direct-box .btn {
    grid-row: 1 / span 2;
    grid-column: 2;
}

html[data-theme="dark"] .cabinet-login-hero,
html[data-theme="dark"] .cabinet-login-card,
html[data-theme="dark"] .cabinet-login-info {
    border-color: rgba(222, 244, 229, .16);
    background-color: rgba(238, 248, 241, .96);
}

@media (max-width: 980px) {
    .cabinet-login-grid,
    .cabinet-login-features,
    .cabinet-direct-box {
        grid-template-columns: 1fr;
    }

    .cabinet-direct-box .btn {
        grid-row: auto;
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .cabinet-login-hero > div,
    .cabinet-login-card,
    .cabinet-login-info {
        padding: 24px;
    }
}

/* Final semantic icon system */
.home-icon::before {
    content: "" !important;
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--icon-mask, var(--icon-check)) center / contain no-repeat;
    mask: var(--icon-mask, var(--icon-check)) center / contain no-repeat;
}

.home-icon {
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
    --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E");
    --icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h15a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h13'/%3E%3Cpath d='M16 13h.01'/%3E%3C/svg%3E");
    --icon-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.3'/%3E%3Ccircle cx='17' cy='17' r='2.3'/%3E%3C/svg%3E");
    --icon-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0v4a3 3 0 0 1-3 3h-3'/%3E%3Cpath d='M4 14v3a2 2 0 0 0 2 2h1v-7H6a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M20 14v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E");
    --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3Z'/%3E%3Cpath d='m8.8 12.2 2.1 2.1 4.5-5'/%3E%3C/svg%3E");
    --icon-speed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a8 8 0 1 1 16 0'/%3E%3Cpath d='m13 13 4-5'/%3E%3Cpath d='M12 13h.01'/%3E%3Cpath d='M6.5 18h11'/%3E%3C/svg%3E");
    --icon-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18c5 0 5-12 10-12 3 0 4 3 6 3'/%3E%3Cpath d='M4 13c4 0 5-6 9-6'/%3E%3Cpath d='M4 8c3 0 4-2 6-2'/%3E%3Ccircle cx='18' cy='9' r='2'/%3E%3C/svg%3E");
    --icon-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 13.5a5 5 0 0 1 7 0'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
    --icon-router: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='7' rx='2'/%3E%3Cpath d='M8 11V6M16 11V6'/%3E%3Cpath d='M8 15h.01M12 15h.01M16 15h.01'/%3E%3C/svg%3E");
    --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
    --icon-family: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 20a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M14.8 16.5A4.5 4.5 0 0 1 21 20'/%3E%3C/svg%3E");
    --icon-laptop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M3 19h18l-2-4H5l-2 4Z'/%3E%3C/svg%3E");
    --icon-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4c3 0 5 2 5 5 0 5-5 9-9 11l-6-6C6 9 9 4 14 4Z'/%3E%3Cpath d='M14 9h.01'/%3E%3Cpath d='M5 19l-1 1M9 20l-1 2M4 15l-2 1'/%3E%3C/svg%3E");
    --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .6-8 6 6 0 0 0-11.2 2A3.5 3.5 0 0 0 7 18Z'/%3E%3C/svg%3E");
    --icon-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7V3Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9.5 13h5M9.5 17h5'/%3E%3C/svg%3E");
    --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7l.4 2.7a2 2 0 0 1-.6 1.8L7.6 9.5a16 16 0 0 0 6.9 6.9l1.3-1.3a2 2 0 0 1 1.8-.6l2.7.4a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
    --icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
    --icon-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    --icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 3 3 10.4l7.2 3.4L15.8 8l-4.2 6.5L16.2 21 21 3Z'/%3E%3C/svg%3E");
    --icon-thumbs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v11H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3Z'/%3E%3Cpath d='M7 10l4-7a2.2 2.2 0 0 1 4 1.7L14 9h5a2 2 0 0 1 2 2.3l-1.2 7A3 3 0 0 1 16.8 21H7'/%3E%3C/svg%3E");
    --icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7Z'/%3E%3C/svg%3E");
    --icon-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3Cpath d='M7 4h10v4a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M17 6h2a2 2 0 0 1 0 4h-2M7 6H5a2 2 0 0 0 0 4h2'/%3E%3C/svg%3E");
}

.home-icon.lock::before { --icon-mask: var(--icon-lock); }
.home-icon.wallet::before { --icon-mask: var(--icon-wallet); }
.home-icon.sale::before { --icon-mask: var(--icon-percent); }
.home-icon.headset::before { --icon-mask: var(--icon-headset); }
.home-icon.shield::before { --icon-mask: var(--icon-shield); }
.home-icon.speed::before { --icon-mask: var(--icon-speed); }
.home-icon.fiber::before { --icon-mask: var(--icon-fiber); }
.home-icon.wifi::before { --icon-mask: var(--icon-wifi); }
.home-icon.router::before { --icon-mask: var(--icon-router); }
.home-icon.home::before { --icon-mask: var(--icon-home); }
.home-icon.family::before { --icon-mask: var(--icon-family); }
.home-icon.laptop::before { --icon-mask: var(--icon-laptop); }
.home-icon.rocket::before { --icon-mask: var(--icon-rocket); }
.home-icon.cloud::before { --icon-mask: var(--icon-cloud); }
.home-icon.document::before { --icon-mask: var(--icon-document); }
.home-icon.phone::before { --icon-mask: var(--icon-phone); }
.home-icon.email::before { --icon-mask: var(--icon-email); }
.home-icon.map-pin::before { --icon-mask: var(--icon-map); }
.home-icon.send::before { --icon-mask: var(--icon-send); }
.home-icon.thumbs::before { --icon-mask: var(--icon-thumbs); }
.home-icon.bolt::before { --icon-mask: var(--icon-bolt); }
.home-icon.cup::before { --icon-mask: var(--icon-cup); }
.home-icon.leaf::before { --icon-mask: var(--icon-fiber); }

/* Clear tariff tiers: no floating badges over icons */
.tariff-card-v2.featured::before,
.tariff-v2-card.featured::before {
    content: none !important;
    display: none !important;
}

.tariff-v2-card .plan-chip,
.tariff-card-v2 .plan-chip {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 32px;
    margin: 0 0 16px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .01em;
    box-shadow: none;
}

.tariff-card-top .plan-chip {
    margin-bottom: 12px;
}

.tariff-card-top > div {
    min-width: 0;
}

.tariff-v2-head .home-icon {
    margin-top: -2px;
}

.plan-chip-standard,
.tariff-v2-card.tier-standard .plan-chip,
.tariff-card-v2.tier-standard .plan-chip {
    color: #0f6eb8;
    border-color: rgba(14, 116, 184, .22);
    background: linear-gradient(135deg, #eef7ff, #ffffff);
}

.plan-chip-popular,
.tariff-v2-card.tier-popular .plan-chip,
.tariff-card-v2.tier-popular .plan-chip {
    color: #ffffff;
    border-color: rgba(21, 128, 61, .12);
    background: linear-gradient(135deg, #149236, #7ad51d);
    box-shadow: 0 10px 22px rgba(22, 163, 74, .18);
}

.plan-chip-maximum,
.tariff-v2-card.tier-maximum .plan-chip,
.tariff-card-v2.tier-maximum .plan-chip {
    color: #315d00;
    border-color: rgba(101, 163, 13, .22);
    background: linear-gradient(135deg, #ecffd8, #d9f99d);
}

.tariff-v2-card.tier-standard {
    border-color: rgba(14, 116, 184, .15);
}

.tariff-v2-card.tier-popular,
.tariff-card-v2.tier-popular {
    border-color: rgba(22, 163, 74, .38);
}

.tariff-v2-card.tier-maximum,
.tariff-card-v2.tier-maximum {
    border-color: rgba(101, 163, 13, .34);
}

html[data-theme="dark"] .tariff-v2-card .plan-chip,
html[data-theme="dark"] .tariff-card-v2 .plan-chip {
    color: #f8fff8;
}

html[data-theme="dark"] .tariff-v2-card.tier-standard .plan-chip,
html[data-theme="dark"] .tariff-card-v2.tier-standard .plan-chip {
    border-color: rgba(186, 230, 253, .25);
    background: rgba(59, 130, 246, .18);
}

html[data-theme="dark"] .tariff-v2-card.tier-popular .plan-chip,
html[data-theme="dark"] .tariff-card-v2.tier-popular .plan-chip {
    border-color: rgba(134, 239, 172, .26);
    background: linear-gradient(135deg, #15943a, #78c820);
}

html[data-theme="dark"] .tariff-v2-card.tier-maximum .plan-chip,
html[data-theme="dark"] .tariff-card-v2.tier-maximum .plan-chip {
    border-color: rgba(190, 242, 100, .28);
    background: rgba(132, 204, 22, .22);
}

/* Full uploaded ZasNet logo */
.brand-full-logo-link .brand-generated,
.footer-generated-brand {
    display: none !important;
}

.brand-full-logo {
    display: block;
    width: 192px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-full-logo-link {
    flex-basis: 228px;
    min-width: 228px;
}

.footer-full-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.footer-brand-v2 .footer-full-logo + .footer-generated-brand + div strong {
    display: none;
}

.footer-brand-v2 .footer-full-logo + .footer-generated-brand + div b {
    margin-top: 12px;
}

@media (max-width: 1240px) {
    .brand-full-logo {
        width: 168px;
    }

    .brand-full-logo-link {
        flex-basis: 190px;
        min-width: 190px;
    }
}

@media (max-width: 760px) {
    .brand-full-logo-link {
        flex-basis: 100%;
        min-width: 0;
    }

    .brand-full-logo {
        width: 180px;
    }
}

/* Final header/footer polish: icon-only theme switch and real social icons */
.top-actions .theme-toggle,
.theme-toggle {
    width: 46px;
    min-width: 46px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
}

.theme-toggle b,
.theme-toggle [data-theme-label] {
    display: none !important;
}

.site-footer.footer-v2 {
    width: var(--page-shell-width);
    max-width: 1360px;
    padding: 26px 30px 16px;
}

.footer-main {
    grid-template-columns: minmax(230px, .9fr) repeat(3, minmax(135px, .58fr)) minmax(230px, .82fr) minmax(150px, .46fr);
    gap: 22px;
}

.footer-full-logo {
    width: 214px;
    max-width: 100%;
}

.footer-brand-v2 b {
    max-width: 190px;
    margin-top: 12px;
    color: #111827;
    font-size: 1rem;
    line-height: 1.28;
    letter-spacing: 0;
}

.site-footer .footer-brand-v2 p,
.footer-brand-v2 p {
    max-width: 190px;
    margin-top: 11px;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.45;
}

.footer-column h4,
.site-footer .footer-column h4 {
    min-height: 34px;
    gap: 10px;
    margin-bottom: 10px;
    color: #111827;
    white-space: nowrap;
}

.footer-column h4::before {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.footer-column h4::after {
    left: 9px;
    top: 8px;
    width: 17px;
    height: 17px;
}

.site-footer .footer-link,
.site-footer .footer-contact-link {
    min-height: 27px;
    color: #526275;
    font-size: .88rem;
    line-height: 1.28;
}

.site-footer .footer-link::after {
    color: #20b557;
    font-size: 1rem;
}

.site-footer .footer-contact-link {
    padding-left: 19px;
}

.site-footer .footer-contact-link::before {
    width: 8px;
    height: 8px;
    background: #1f9b3a;
    box-shadow: 0 0 0 4px rgba(31, 155, 58, .1);
}

.site-footer .footer-socials {
    display: grid;
    grid-template-columns: repeat(2, 38px);
    gap: 10px;
}

.site-footer .footer-socials a,
.site-footer.footer-v2 .footer-socials a {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 999px;
    background: #fff;
    color: #15803d;
    font-size: 0;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .07);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.site-footer .footer-socials a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.site-footer .footer-socials a::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--social-icon) center / contain no-repeat;
    mask: var(--social-icon) center / contain no-repeat;
}

.site-footer .footer-socials a:hover {
    transform: translateY(-2px);
    border-color: rgba(22, 163, 74, .32);
    box-shadow: 0 14px 26px rgba(15, 23, 42, .1);
}

.site-footer .footer-socials .social-facebook {
    color: #1877f2;
}

.site-footer .footer-socials .social-facebook::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.1 8.2h-2V6.9c0-.6.4-.8.8-.8h1.2V3.8c-.7-.1-1.4-.1-2.1-.1-2.2 0-3.6 1.3-3.6 3.7v.8H7.2v2.6h2.2v9.4h3.7v-9.4h2.5l.4-2.6h-2.9Z'/%3E%3C/svg%3E");
}

.site-footer .footer-socials .social-instagram {
    color: #e1306c;
}

.site-footer .footer-socials .social-instagram::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M16.8 7.2h.01'/%3E%3C/svg%3E");
}

.site-footer .footer-socials .social-telegram {
    color: #229ed9;
}

.site-footer .footer-socials .social-telegram::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.5 4.4 18.2 20c-.2 1-.8 1.2-1.6.8l-4.8-3.6-2.3 2.2c-.3.3-.5.5-1 .5l.4-5 9.2-8.3c.4-.4-.1-.6-.6-.3L6.1 13.4 1.2 11.9c-1-.3-1-1.1.2-1.6L20.4 3c.9-.3 1.6.2 1.1 1.4Z'/%3E%3C/svg%3E");
}

.site-footer .footer-socials .social-youtube {
    color: #ff0000;
}

.site-footer .footer-socials .social-youtube::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2s-.2-1.5-.8-2.1c-.8-.8-1.7-.8-2.1-.9C15.8 4 12 4 12 4s-3.8 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2.1-.8 2.1S2 9 2 10.9v1.8c0 1.9.3 3.7.3 3.7s.2 1.5.8 2.1c.8.8 1.9.8 2.4.9 1.8.2 6.5.2 6.5.2s3.8 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2.1.8-2.1s.3-1.8.3-3.7v-1.8c0-1.9-.3-3.7-.3-3.7ZM10 14.6V8.9l5.2 2.9-5.2 2.8Z'/%3E%3C/svg%3E");
}

.site-footer .footer-socials .social-site::before {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");
}

.footer-bottom {
    margin-top: 20px;
    padding-top: 14px;
}

html[data-theme="dark"] .site-footer.footer-v2 {
    background: rgba(255, 255, 255, .95);
}

html[data-theme="dark"] .site-footer .footer-socials a {
    background: #fff;
}

@media (max-width: 1460px) {
    .footer-main {
        grid-template-columns: minmax(215px, .9fr) repeat(2, minmax(140px, .65fr)) minmax(220px, .88fr) minmax(110px, .42fr);
    }

    .footer-column-company {
        display: none;
    }
}

/* Footer readability guard: keep the bottom clean in both themes */
.site-footer.footer-v2 {
    color: #142033;
    background: rgba(255, 255, 255, .98);
}

.site-footer.footer-v2,
.site-footer.footer-v2 * {
    opacity: 1;
}

.site-footer.footer-v2 .footer-full-logo {
    filter: none;
}

.site-footer.footer-v2 .footer-brand-v2 b,
.site-footer.footer-v2 .footer-column h4 {
    color: #111827;
}

.site-footer.footer-v2 .footer-brand-v2 p,
.site-footer.footer-v2 .footer-link,
.site-footer.footer-v2 .footer-contact-link,
.site-footer.footer-v2 .footer-bottom p,
.site-footer.footer-v2 .footer-legal a {
    color: #506174;
}

.site-footer.footer-v2 .footer-socials .social-facebook { color: #1877f2; }
.site-footer.footer-v2 .footer-socials .social-instagram { color: #e1306c; }
.site-footer.footer-v2 .footer-socials .social-telegram { color: #229ed9; }
.site-footer.footer-v2 .footer-socials .social-youtube { color: #ff0000; }

html[data-theme="dark"] .site-footer.footer-v2 {
    width: var(--page-shell-width) !important;
    max-width: none !important;
    margin-top: 36px;
    margin-bottom: 28px;
    padding: 22px 30px 14px;
    color: #f4fff7;
    border-color: rgba(222, 244, 229, .16);
    background: linear-gradient(180deg, rgba(37, 73, 58, .92), rgba(27, 56, 46, .94));
    box-shadow: 0 22px 54px rgba(5, 15, 13, .3);
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-main {
    grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(130px, .55fr)) minmax(220px, .8fr) minmax(138px, .42fr);
    gap: 20px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-full-logo {
    width: 190px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 b {
    max-width: 160px;
    margin-top: 8px;
    font-size: .94rem;
    line-height: 1.22;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 i {
    margin-top: 9px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 p {
    margin-top: 8px;
    font-size: .82rem;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4 {
    min-height: 30px;
    margin-bottom: 8px;
    font-size: .92rem;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4::before {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4::after {
    left: 8px;
    top: 7px;
    width: 15px;
    height: 15px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link {
    min-height: 24px;
    font-size: .84rem;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-socials {
    grid-template-columns: repeat(2, 34px);
    gap: 8px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-socials a {
    width: 34px;
    height: 34px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-bottom {
    margin-top: 16px;
    padding-top: 12px;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 b,
html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4 {
    color: #f7fff9;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 p,
html[data-theme="dark"] .site-footer.footer-v2 .footer-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-bottom p,
html[data-theme="dark"] .site-footer.footer-v2 .footer-legal a {
    color: rgba(235, 247, 239, .78);
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-link:hover,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link:hover,
html[data-theme="dark"] .site-footer.footer-v2 .footer-legal a:hover {
    color: #b9ff62;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4::before,
html[data-theme="dark"] .site-footer.footer-v2 .footer-top {
    border-color: rgba(222, 244, 229, .12);
    background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4::after {
    background: #7ef04d;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link::before {
    background: #7ef04d;
    box-shadow: 0 0 0 4px rgba(126, 240, 77, .12);
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-link::after {
    color: #7ef04d;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-bottom {
    border-color: rgba(222, 244, 229, .12);
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-socials .social-facebook { color: #1877f2; }
html[data-theme="dark"] .site-footer.footer-v2 .footer-socials .social-instagram { color: #e1306c; }
html[data-theme="dark"] .site-footer.footer-v2 .footer-socials .social-telegram { color: #229ed9; }
html[data-theme="dark"] .site-footer.footer-v2 .footer-socials .social-youtube { color: #ff0000; }

html[data-theme="dark"] .site-footer.footer-v2 .footer-socials a {
    border-color: rgba(222, 244, 229, .16);
    background: rgba(255, 255, 255, .94);
}

@media (max-width: 980px) {
    .site-footer.footer-v2 {
        width: min(100% - 28px, 720px);
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand-v2,
    .footer-column-contacts {
        grid-column: 1 / -1;
    }
}

/* UI polish pass: unified modern ISP visual system */
:root {
    --ui-bg: #eef5f1;
    --ui-bg-2: #e4eee9;
    --ui-card: rgba(255, 255, 255, .88);
    --ui-card-solid: #ffffff;
    --ui-card-soft: #f6fbf8;
    --ui-ink: #101828;
    --ui-ink-2: #1e293b;
    --ui-muted: #607086;
    --ui-line: rgba(15, 23, 42, .09);
    --ui-line-strong: rgba(22, 163, 74, .22);
    --ui-green: #14923c;
    --ui-green-2: #22b34f;
    --ui-lime: #9ae600;
    --ui-cyan: #bff3ed;
    --ui-radius: 24px;
    --ui-radius-sm: 15px;
    --ui-shadow: 0 18px 50px rgba(15, 23, 42, .09);
    --ui-shadow-soft: 0 10px 28px rgba(15, 23, 42, .06);
    --page-shell-width: min(1480px, calc(100% - 96px));
}

html[data-theme="dark"] {
    --ui-bg: #385f4e;
    --ui-bg-2: #335746;
    --ui-card: rgba(52, 84, 70, .84);
    --ui-card-solid: #315443;
    --ui-card-soft: rgba(44, 76, 63, .86);
    --ui-ink: #f7fff9;
    --ui-ink-2: #edf9f0;
    --ui-muted: rgba(238, 249, 242, .76);
    --ui-line: rgba(222, 244, 229, .17);
    --ui-line-strong: rgba(126, 240, 77, .34);
    --ui-green: #7ef04d;
    --ui-green-2: #44db6b;
    --ui-lime: #b9ff62;
    --ui-cyan: rgba(191, 243, 237, .18);
    --ui-shadow: 0 22px 58px rgba(5, 15, 13, .24);
    --ui-shadow-soft: 0 12px 30px rgba(5, 15, 13, .18);
}

body {
    color: var(--ui-ink);
    background:
        radial-gradient(circle at 20% 0%, rgba(34, 179, 79, .1), transparent 32%),
        linear-gradient(180deg, var(--ui-bg) 0%, var(--ui-bg-2) 100%);
}

.topbar {
    width: var(--page-shell-width);
    min-height: 64px;
    margin: 18px auto 0;
    padding: 10px 22px;
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--ui-shadow-soft);
}

html[data-theme="dark"] .topbar {
    background: rgba(48, 82, 68, .92);
    backdrop-filter: blur(18px);
}

.brand-full-logo {
    width: 174px;
    max-height: 46px;
}

.brand-full-logo-link {
    flex-basis: 216px;
    min-width: 216px;
}

.main-nav {
    gap: 8px;
    color: var(--ui-muted);
    font-size: .88rem;
}

.main-nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 13px;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.main-nav a::after {
    display: none;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--ui-green);
    background: rgba(22, 163, 74, .09);
}

html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active {
    color: #f7fff9;
    background: rgba(255, 255, 255, .12);
}

.top-actions {
    gap: 10px;
}

.btn,
.top-actions .btn,
button.btn,
.coverage-quick-search button,
.coverage-more-button,
.show-cities {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 900;
    letter-spacing: 0;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn:hover,
.coverage-quick-search button:hover,
.coverage-more-button:hover,
.show-cities:hover {
    transform: translateY(-1px);
}

.btn.primary,
.btn.green,
.coverage-quick-search button {
    color: #fff;
    background: linear-gradient(90deg, #128236, #71db13);
    box-shadow: 0 14px 30px rgba(22, 163, 74, .2);
}

.btn.light,
.btn.secondary,
.theme-toggle,
.coverage-more-button,
.show-cities {
    border: 1px solid var(--ui-line);
    color: var(--ui-ink-2);
    background: rgba(255, 255, 255, .86);
}

html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .coverage-more-button,
html[data-theme="dark"] .show-cities {
    color: #f7fff9;
    background: rgba(255, 255, 255, .08);
    border-color: var(--ui-line);
}

.home-page,
.tariffs-v2-page,
.coverage-page-v3,
.video-page,
.contacts-page,
.news-page,
.about-page,
.cabinet-page {
    width: var(--page-shell-width);
    margin-left: auto;
    margin-right: auto;
}

.home-v2-hero,
.tariffs-v2-hero,
.coverage-hero-v3,
.video-hero,
.contacts-hero,
.news-hero,
.about-hero,
.cabinet-hero,
.coverage-check-v2,
.cabinet-v2 {
    border: 1px solid var(--ui-line);
    border-radius: 28px;
    box-shadow: var(--ui-shadow);
}

.home-v2-hero,
.tariffs-v2-hero,
.coverage-hero-v3,
.video-hero,
.about-hero,
.contacts-hero,
.news-hero,
.cabinet-hero {
    overflow: hidden;
}

.section-title h2,
.tariffs-subtitle,
.coverage-villages-card h2,
.coverage-result-card h2,
.why-v2 .section-title h2,
.video-packages h2,
.contacts-page h2,
.about-page h2,
.news-page h2 {
    color: var(--ui-ink);
    letter-spacing: 0;
}

.section-title p,
.home-v2-copy p,
.tariffs-v2-hero p,
.coverage-hero-copy p,
.video-hero p,
.coverage-result-ok p,
.coverage-help-grid p,
.feature-row p,
.why-v2-grid p {
    color: var(--ui-muted);
    line-height: 1.62;
}

.feature-row article,
.why-v2-grid article,
.tariff-benefits-mini article,
.coverage-help-grid article,
.video-package-card,
.news-card,
.contact-card,
.about-stat,
.document-card,
.coverage-villages-card,
.coverage-result-card {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-card);
    box-shadow: var(--ui-shadow-soft);
}

.feature-row article,
.why-v2-grid article,
.coverage-help-grid article {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-row article:hover,
.why-v2-grid article:hover,
.coverage-help-grid article:hover {
    transform: translateY(-2px);
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-shadow);
}

.home-icon,
.coverage-help-icon,
.footer-column h4::before {
    border: 1px solid rgba(22, 163, 74, .12);
    background-color: rgba(22, 163, 74, .09);
}

html[data-theme="dark"] .home-icon,
html[data-theme="dark"] .coverage-help-icon,
html[data-theme="dark"] .footer-column h4::before {
    background-color: rgba(126, 240, 77, .12);
}

.plan-chip,
.tariff-card-v2 .plan-chip,
.tariff-v2-card .plan-chip {
    position: static;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
}

.plan-chip-standard {
    color: #1260a8;
    background: #e8f3ff;
}

.plan-chip-popular {
    color: #0f7c31;
    background: #e2f7e8;
}

.plan-chip-maximum {
    color: #6b7f00;
    background: #effbd0;
}

html[data-theme="dark"] .plan-chip-standard,
html[data-theme="dark"] .plan-chip-popular,
html[data-theme="dark"] .plan-chip-maximum {
    color: #f7fff9;
    background: rgba(255, 255, 255, .12);
}

.tariff-v2-grid,
.tariffs-cards-v2 {
    align-items: stretch;
}

.tariff-v2-card,
.tariff-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 26px;
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    background: var(--ui-card-solid);
    box-shadow: var(--ui-shadow-soft);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tariff-v2-card:hover,
.tariff-card-v2:hover {
    transform: translateY(-3px);
    border-color: var(--ui-line-strong);
    box-shadow: var(--ui-shadow);
}

html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-card-v2 {
    background: rgba(48, 82, 68, .8);
}

.tariff-v2-card.featured,
.tariff-card-v2.featured,
.tariff-card-v2.tier-popular,
.tariff-v2-card.tier-popular {
    border-color: rgba(22, 163, 74, .38);
    background: linear-gradient(180deg, #f7fff9, #edf9f0);
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-card-v2.featured,
html[data-theme="dark"] .tariff-card-v2.tier-popular,
html[data-theme="dark"] .tariff-v2-card.tier-popular {
    background: linear-gradient(180deg, rgba(48, 93, 66, .9), rgba(36, 74, 56, .92));
}

.tariff-v2-card.tier-maximum,
.tariff-card-v2.tier-maximum {
    border-color: rgba(132, 204, 22, .34);
}

.tariff-v2-head,
.tariff-card-top {
    align-items: flex-start;
    gap: 16px;
}

.tariff-v2-head h3,
.tariff-card-top h4 {
    margin-top: 14px;
    color: var(--ui-ink);
    font-size: 1.28rem;
}

.tariff-v2-head strong,
.tariff-speed-price strong {
    color: var(--ui-ink);
}

.tariff-v2-card .home-icon,
.tariff-card-top > b {
    flex: 0 0 auto;
    margin-top: 0;
}

.tariff-speed-price {
    margin-top: auto;
    padding: 18px 0;
    border-top: 1px solid var(--ui-line);
    border-bottom: 1px solid var(--ui-line);
}

.tariff-tags-v2 span {
    border: 1px solid rgba(22, 163, 74, .12);
    color: var(--ui-green);
    background: rgba(22, 163, 74, .08);
}

.tariffs-v2-layout {
    gap: 24px;
    align-items: start;
}

.tariffs-v2-stage,
.coverage-list-v2 {
    border: 1px solid var(--ui-line);
    border-radius: 28px;
    background: var(--ui-card);
    box-shadow: var(--ui-shadow-soft);
}

.selected-place {
    border-radius: 22px;
}

.place-meta article {
    border-color: var(--ui-line);
    background: rgba(255, 255, 255, .62);
}

html[data-theme="dark"] .place-meta article {
    background: rgba(255, 255, 255, .06);
}

.coverage-list-v2 {
    position: sticky;
    top: 94px;
}

.coverage-city-button,
.coverage-village {
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.coverage-city-button:hover,
.coverage-village:hover {
    transform: translateX(2px);
    border-color: var(--ui-line-strong);
    background: rgba(22, 163, 74, .06);
}

.coverage-city-button.active,
.coverage-village.active {
    color: var(--ui-green);
    border-color: rgba(22, 163, 74, .18);
    background: rgba(22, 163, 74, .1);
}

html[data-theme="dark"] .coverage-city-button.active,
html[data-theme="dark"] .coverage-village.active {
    color: #f7fff9;
    background: rgba(126, 240, 77, .14);
}

.coverage-hero-v3 {
    min-height: 300px;
    background:
        linear-gradient(90deg, rgba(246, 251, 248, .98) 0%, rgba(246, 251, 248, .86) 44%, rgba(246, 251, 248, .2) 100%),
        linear-gradient(135deg, #e5f7ee, #eef6ff);
}

html[data-theme="dark"] .coverage-hero-v3 {
    background:
        linear-gradient(90deg, rgba(32, 56, 47, .96), rgba(32, 56, 47, .74), rgba(32, 56, 47, .22)),
        linear-gradient(135deg, rgba(45, 83, 65, .9), rgba(29, 52, 48, .9));
}

.coverage-quick-search,
.coverage-village-search,
.coverage-search,
.coverage-check-v2 form {
    gap: 12px;
}

.coverage-quick-search input,
.coverage-village-search input,
.coverage-search input,
.coverage-check-v2 input,
.contacts-page input,
.contacts-page textarea,
.contacts-page select {
    min-height: 46px;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    color: var(--ui-ink);
    background: rgba(255, 255, 255, .9);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.coverage-quick-search input:focus,
.coverage-village-search input:focus,
.coverage-search input:focus,
.coverage-check-v2 input:focus,
.contacts-page input:focus,
.contacts-page textarea:focus {
    border-color: rgba(22, 163, 74, .45);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .09);
}

html[data-theme="dark"] .coverage-quick-search input,
html[data-theme="dark"] .coverage-village-search input,
html[data-theme="dark"] .coverage-search input,
html[data-theme="dark"] .coverage-check-v2 input,
html[data-theme="dark"] .contacts-page input,
html[data-theme="dark"] .contacts-page textarea,
html[data-theme="dark"] .contacts-page select {
    color: #f7fff9;
    background: rgba(255, 255, 255, .08);
}

.coverage-result-ok {
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 18px;
    background: rgba(22, 163, 74, .08);
}

.site-footer.footer-v2 {
    width: var(--page-shell-width) !important;
    max-width: none !important;
    border: 1px solid var(--ui-line);
    border-radius: 24px;
    background: var(--ui-card-solid);
}

html[data-theme="dark"] .site-footer.footer-v2 {
    width: var(--page-shell-width) !important;
    max-width: none !important;
    background: linear-gradient(180deg, rgba(37, 73, 58, .92), rgba(27, 56, 46, .94));
}

.site-footer.footer-v2 .footer-main {
    align-items: start;
}

@media (min-width: 1700px) {
    :root {
        --page-shell-width: min(1600px, calc(100% - 160px));
    }
}

@media (max-width: 1280px) {
    :root {
        --page-shell-width: min(1220px, calc(100% - 48px));
    }

    .main-nav {
        gap: 4px;
        font-size: .82rem;
    }
}

@media (max-width: 980px) {
    :root {
        --page-shell-width: min(100% - 28px, 760px);
    }

    .topbar {
        position: relative;
        flex-wrap: wrap;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .tariffs-v2-layout,
    .coverage-workspace-v3 {
        grid-template-columns: 1fr;
    }

    .coverage-list-v2 {
        position: static;
    }
}

@media (max-width: 640px) {
    :root {
        --page-shell-width: min(100% - 20px, 560px);
    }

    .topbar {
        padding: 10px 12px;
        border-radius: 18px;
    }

    .brand-full-logo-link {
        flex-basis: auto;
        min-width: 0;
    }

    .brand-full-logo {
        width: 150px;
    }

    .tariff-v2-card,
    .tariff-card-v2,
    .coverage-villages-card,
    .coverage-result-card {
        padding: 20px;
    }
}

/* 2026-04-30 video packages without duplicate photos */
.video-packages .camera-visual {
    display: none !important;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 470px !important;
}

.video-package-head {
    margin-top: 8px;
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    padding-top: 52px !important;
}

@media (min-width: 901px) {
    .video-package-card,
    html[data-theme="dark"] .video-package-card {
        min-height: 520px !important;
    }
}

/* 2026-04-30 cleaner hero and video plan cards */
.home-v2-hero,
html[data-theme="dark"] .home-v2-hero {
    min-height: 450px !important;
    border-radius: 26px !important;
}

.home-v2-copy {
    max-width: 560px !important;
    padding: 42px 44px 128px !important;
}

.home-v2-copy h1 {
    max-width: 520px !important;
    font-size: clamp(3rem, 4.1vw, 4.55rem) !important;
    line-height: 1.04 !important;
}

.home-v2-copy p {
    max-width: 430px !important;
    margin-top: 18px !important;
    font-size: 1.04rem !important;
    line-height: 1.55 !important;
}

.home-v2-copy .hero-actions {
    margin-top: 24px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.home-v2-copy .hero-actions .btn {
    min-height: 46px !important;
    min-width: 184px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
}

.home-v2-hero .hero-v2-stats {
    left: 34px !important;
    bottom: 28px !important;
    width: min(670px, calc(100% - 68px)) !important;
    gap: 12px !important;
}

.hero-v2-stats article {
    min-height: 62px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
}

.hero-v2-stats .home-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
}

.hero-v2-stats strong {
    font-size: .82rem !important;
    line-height: 1.08 !important;
}

.hero-v2-stats small {
    font-size: .72rem !important;
    line-height: 1.12 !important;
}

.video-packages {
    margin-top: 34px !important;
}

.video-package-grid {
    align-items: stretch !important;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 430px !important;
    padding: 30px 32px 28px !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .07) !important;
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    min-height: 430px !important;
    padding-top: 56px !important;
    box-shadow: 0 20px 54px rgba(22, 163, 74, .13) !important;
}

.video-package-head {
    margin-top: 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}

.video-package-head > div {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

.video-package-head h3,
html[data-theme="dark"] .video-package-head h3 {
    font-size: clamp(1.55rem, 1.35vw, 1.9rem) !important;
}

.video-package-head span,
html[data-theme="dark"] .video-package-head span {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #eef7f2 !important;
    color: #587083 !important;
    font-size: .95rem !important;
}

.video-price,
html[data-theme="dark"] .video-price {
    margin-top: 20px !important;
    font-size: clamp(2.45rem, 2.7vw, 3.1rem) !important;
    letter-spacing: 0 !important;
}

.video-package-card p,
html[data-theme="dark"] .video-package-card p {
    min-height: 0 !important;
    margin-top: 12px !important;
    color: #344256 !important;
}

.video-package-card ul {
    min-height: 104px !important;
    margin: 22px 0 26px !important;
    gap: 9px !important;
}

.video-package-card li,
html[data-theme="dark"] .video-package-card li {
    color: #24344a !important;
    line-height: 1.35 !important;
}

.video-package-card .btn {
    min-height: 52px !important;
    border-radius: 12px !important;
}

@media (max-width: 1280px) {
    .home-v2-copy {
        padding: 36px 30px 132px !important;
    }

    .home-v2-copy h1 {
        font-size: clamp(2.55rem, 6vw, 3.7rem) !important;
    }

    .home-v2-hero .hero-v2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(540px, calc(100% - 48px)) !important;
        left: 24px !important;
    }
}

@media (max-width: 640px) {
    .home-v2-copy {
        padding: 30px 22px 235px !important;
    }

    .home-v2-copy h1 {
        font-size: clamp(2.15rem, 10vw, 3rem) !important;
    }

    .home-v2-copy .hero-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .home-v2-hero .hero-v2-stats {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        grid-template-columns: 1fr !important;
        margin: -200px 18px 20px !important;
    }

    .video-package-card,
    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card,
    html[data-theme="dark"] .video-package-card.featured {
        min-height: 0 !important;
        padding: 24px 20px !important;
    }

    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card.featured {
        padding-top: 50px !important;
    }

    .video-package-head > div {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .video-package-card ul {
        min-height: 0 !important;
    }
}

/* Restore previous photographic video hero */
.video-hero {
    background:
        linear-gradient(90deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .84) 42%, rgba(8, 22, 19, .34) 70%, rgba(8, 22, 19, .06) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
}

.video-hero h1,
.video-hero p {
    color: #f8fff9;
}

.video-hero .home-kicker {
    color: #b9ff62;
    background: rgba(185, 255, 98, .12);
    border-color: rgba(185, 255, 98, .34);
}

.video-hero .btn.light {
    color: #f8fff9 !important;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .22);
}

html[data-theme="dark"] .video-hero {
    background:
        linear-gradient(90deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .84) 42%, rgba(8, 22, 19, .34) 70%, rgba(8, 22, 19, .06) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
}

@media (max-width: 960px) {
    .video-hero,
    html[data-theme="dark"] .video-hero {
        background:
            linear-gradient(180deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .82) 46%, rgba(8, 22, 19, .24) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat;
    }
}

/* Final cosmetics for video package cards */
.video-package-grid {
    gap: 24px;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 620px;
    padding: 24px 28px 28px;
    border-radius: 20px;
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    padding-top: 24px;
}

.video-package-card .plan-chip {
    top: 22px;
    left: 28px;
}

.video-package-card.featured::before {
    top: 14px;
}

.camera-visual {
    height: 178px;
    margin-bottom: 20px;
    padding: 10px 8px;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 54%, rgba(38, 200, 76, .1), rgba(255, 255, 255, 0) 62%) !important;
}

.video-package-card.featured .camera-visual {
    margin-top: 26px;
}

.video-package-head {
    gap: 8px;
}

.video-package-head > div {
    align-items: baseline;
    padding-top: 2px;
}

.video-package-head h3,
html[data-theme="dark"] .video-package-head h3 {
    font-size: 1.55rem;
}

.video-price,
html[data-theme="dark"] .video-price {
    margin-top: 18px;
    font-size: clamp(2.1rem, 2.65vw, 2.8rem);
}

.video-package-card p,
html[data-theme="dark"] .video-package-card p {
    min-height: 46px;
    margin-top: 16px;
}

.video-package-card ul {
    min-height: 126px;
    margin: 22px 0 24px;
}

.video-package-card .btn {
    margin-top: auto;
}

@media (max-width: 1180px) {
    .video-package-card,
    html[data-theme="dark"] .video-package-card {
        min-height: 0;
    }

    .camera-visual {
        height: 190px;
    }
}

@media (max-width: 640px) {
    .video-package-card,
    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card,
    html[data-theme="dark"] .video-package-card.featured {
        padding: 20px 16px 20px;
    }

    .video-package-card.featured {
        padding-top: 52px;
    }

    .camera-visual,
    .video-package-card.featured .camera-visual {
        height: 140px;
        margin-bottom: 14px;
    }
}

/* Video packages: match clean product-card reference */
.video-packages {
    width: min(1680px, calc(100% - 72px));
    margin-left: auto;
    margin-right: auto;
}

.video-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 690px;
    padding: 34px 34px 32px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 22px;
    background: #fff;
    color: #07142f;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .08);
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    padding-top: 34px;
    border-color: rgba(31, 178, 68, .45);
    background: linear-gradient(180deg, #f7fff8 0%, #ffffff 100%);
    box-shadow: 0 20px 60px rgba(31, 178, 68, .13);
}

.video-package-card.featured::before {
    top: 18px;
    left: 50%;
    padding: 9px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #15803d, #7bd83b);
    box-shadow: 0 12px 28px rgba(31, 178, 68, .24);
}

.video-package-card .plan-chip {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 3;
    margin: 0;
    padding: 9px 20px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #74a719, #2e9e38);
}

.video-package-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.camera-visual {
    order: -1;
    width: 100%;
    height: 220px;
    max-width: 100%;
    margin: 0 auto 8px;
    object-fit: contain;
    object-position: center;
}

.video-package-card.featured .camera-visual {
    margin-top: 20px;
}

.video-package-head > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.video-package-head h3,
html[data-theme="dark"] .video-package-head h3 {
    color: #07142f;
    font-size: clamp(1.55rem, 1.6vw, 1.95rem);
    line-height: 1.08;
}

.video-package-head span,
html[data-theme="dark"] .video-package-head span {
    margin: 0;
    color: #5d6d84;
    font-size: 1.12rem;
    font-weight: 900;
}

.video-price,
html[data-theme="dark"] .video-price {
    margin-top: 24px;
    color: #07142f;
    font-size: clamp(2rem, 2.7vw, 2.85rem);
    line-height: 1;
}

.video-price span,
html[data-theme="dark"] .video-price span {
    color: #506078;
    font-size: 1.02rem;
}

.video-package-card p,
html[data-theme="dark"] .video-package-card p {
    min-height: 52px;
    color: #344256;
    font-size: 1.03rem;
}

.video-package-card ul {
    gap: 12px;
    min-height: 145px;
    margin: 24px 0 28px;
}

.video-package-card li,
html[data-theme="dark"] .video-package-card li {
    color: #26364c;
    font-size: 1rem;
}

.video-package-card .btn {
    min-height: 56px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 950;
}

.video-package-card .btn.light {
    color: #07142f !important;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
}

.video-package-card .btn.primary {
    box-shadow: 0 16px 34px rgba(31, 178, 68, .18);
}

@media (max-width: 1180px) {
    .video-packages {
        width: min(100% - 36px, 1680px);
    }

    .video-package-grid {
        grid-template-columns: 1fr;
    }

    .video-package-card,
    html[data-theme="dark"] .video-package-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .video-packages {
        width: min(100% - 24px, 1680px);
    }

    .video-package-card,
    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card,
    html[data-theme="dark"] .video-package-card.featured {
        padding: 24px 18px 22px;
        border-radius: 18px;
    }

    .video-package-card.featured {
        padding-top: 54px;
    }

    .video-package-card.featured::before {
        top: 12px;
        font-size: .82rem;
    }

    .video-package-card .plan-chip {
        top: 14px;
        left: 18px;
        padding: 7px 14px;
        font-size: .78rem;
    }

    .camera-visual,
    .video-package-card.featured .camera-visual {
        height: 150px;
        margin-top: 0;
    }

    .video-package-head > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .video-package-card ul {
        min-height: 0;
    }
}

/* Final override: keep the previous photographic video hero */
.video-hero,
html[data-theme="dark"] .video-hero {
    background:
        linear-gradient(90deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .84) 42%, rgba(8, 22, 19, .34) 70%, rgba(8, 22, 19, .06) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat;
}

.video-hero h1,
.video-hero p {
    color: #f8fff9;
}

.video-hero .btn.light {
    color: #f8fff9 !important;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
}

@media (max-width: 960px) {
    .video-hero,
    html[data-theme="dark"] .video-hero {
        background:
            linear-gradient(180deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .82) 46%, rgba(8, 22, 19, .24) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat;
    }
}

/* Neater video package card layout */
.video-package-grid {
    align-items: stretch;
}

.video-package-card {
    gap: 0;
    padding: 30px 30px 28px;
}

.video-package-card.featured {
    padding-top: 48px;
}

.video-package-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.video-package-head > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.video-package-head h3 {
    font-size: 1.42rem;
    line-height: 1.15;
}

.video-package-head span {
    margin-top: 3px;
    white-space: nowrap;
}

.camera-visual {
    order: -1;
    width: 100%;
    height: 150px;
    flex: none;
    margin: 0 auto 4px;
    padding: 0;
}

.video-price {
    margin-top: 18px;
}

.video-package-card p {
    min-height: 50px;
}

.video-package-card ul {
    margin-top: 18px;
}

.video-package-card .btn {
    min-height: 48px;
}

@media (max-width: 1180px) {
    .camera-visual {
        height: 136px;
    }
}

@media (max-width: 640px) {
    .video-package-card,
    .video-package-card.featured {
        padding: 26px 20px 22px;
    }

    .video-package-card.featured {
        padding-top: 42px;
    }

    .camera-visual {
        width: 100%;
        height: 128px;
        flex-basis: auto;
    }

    .video-package-head > div {
        align-items: center;
    }
}

/* Final site cleanup after tariffs refresh */
.btn,
button.btn,
.hero-actions .btn,
.contact-actions .btn,
.equipment-actions .btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.btn.primary,
button.btn.primary,
a.btn.primary {
    color: #fff !important;
    background: linear-gradient(135deg, #109433, #70ec18);
    border: 1px solid rgba(17, 148, 51, .55);
}

.btn.light,
.btn.secondary,
a.btn.light,
a.btn.secondary {
    color: #07142f !important;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
}

.home-v2,
.tariffs-clean-page,
.coverage-page-v3,
.equipment-page,
.video-page,
.news-page,
.page {
    scroll-margin-top: 92px;
}

.tariffs-clean-cards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tariff-clean-card,
.news-card-v2,
.video-package-card,
.equipment-product-grid article,
.contacts-card,
.coverage-help-grid article {
    overflow: hidden;
}

.tariff-clean-card {
    height: 100%;
}

.news-card-v2 p,
.tariff-clean-card p,
.equipment-product-grid li,
.video-package-card p,
.contacts-card p {
    color: #344256;
}

@media (max-width: 920px) {
    .topbar {
        width: min(100% - 24px, 1480px);
        padding: 10px;
        gap: 10px;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 2px;
    }

    .main-nav a {
        white-space: nowrap;
    }

    .top-actions {
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .home-v2-hero,
    .coverage-hero-v3,
    .equipment-hero,
    .video-hero,
    .news-hero,
    .contacts-hero,
    .about-hero {
        border-radius: 18px;
    }

    .tariff-clean-card,
    .video-package-card,
    .equipment-product-grid article,
    .news-card-v2,
    .contacts-card {
        border-radius: 16px;
    }

    .top-actions .btn {
        min-height: 38px;
        padding-inline: 12px;
        font-size: 13px;
    }
}

/* Equipment page polish */
.equipment-page {
    width: min(1320px, calc(100% - 36px));
    margin-bottom: 32px;
}

.equipment-hero {
    min-height: 470px;
    margin-top: 18px;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

.equipment-hero-copy {
    width: min(585px, 54%);
    padding: 46px 44px;
}

.equipment-hero h1 {
    font-size: clamp(2.35rem, 4.25vw, 4.35rem);
    line-height: 1.04;
}

.equipment-hero p {
    margin-top: 18px;
    font-size: 1.03rem;
    line-height: 1.62;
}

.equipment-actions,
.equipment-cta form {
    gap: 14px;
    margin-top: 24px;
}

.equipment-actions .btn {
    min-width: 190px;
}

.equipment-badges {
    gap: 12px;
    max-width: 520px;
    margin-top: 30px;
}

.equipment-badges article,
.equipment-benefit-grid article,
.equipment-category-grid article,
.equipment-product-grid article {
    border-radius: 14px;
}

.equipment-badges article {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 13px 14px;
}

.equipment-badges strong {
    font-size: .86rem;
}

.equipment-mini-icon {
    border-radius: 10px;
}

.equipment-line-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 16px;
    font-size: 1.6rem;
}

.equipment-steps,
.equipment-benefits,
.equipment-categories,
.equipment-products {
    margin-top: 26px;
}

.equipment-steps h2,
.equipment-benefits h2,
.equipment-categories h2,
.equipment-products h2 {
    margin-bottom: 18px;
    font-size: clamp(1.65rem, 2.4vw, 2.05rem);
}

.equipment-step-grid {
    gap: 22px;
}

.equipment-step-grid article {
    min-height: 245px;
    padding: 32px 24px 24px;
    border-radius: 16px;
}

.equipment-step-grid article:not(:last-child)::after {
    left: calc(100% + 4px);
    width: 14px;
    border-top-width: 2px;
}

.equipment-number {
    left: 18px;
    top: 16px;
    width: 30px;
    height: 30px;
}

.equipment-visual {
    width: 130px;
    height: 96px;
    margin-bottom: 18px;
}

.equipment-step-grid h3,
.equipment-benefit-grid h3,
.equipment-category-grid h3,
.equipment-product-grid h3 {
    font-size: 1.08rem;
    line-height: 1.25;
}

.equipment-step-grid p,
.equipment-benefit-grid p,
.equipment-category-grid p {
    margin-top: 10px;
    font-size: .94rem;
    line-height: 1.55;
}

.equipment-benefit-grid {
    gap: 14px;
}

.equipment-benefit-grid article,
.equipment-category-grid article {
    padding: 22px 18px;
}

.equipment-category-grid {
    gap: 16px;
}

.equipment-category-grid .equipment-visual {
    height: 76px;
    margin-bottom: 10px;
    transform: scale(.78);
}

.equipment-product-grid {
    gap: 16px;
}

.equipment-product-grid article {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    min-height: 330px;
    padding: 18px;
}

.equipment-product-image {
    height: 145px;
    margin: -2px -2px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbf9, #fff);
}

.equipment-product-image img {
    max-width: 100%;
    max-height: 132px;
}

.equipment-product-grid ul {
    margin: 13px 0 16px;
    font-size: .9rem;
    line-height: 1.35;
}

.equipment-product-grid li::before {
    content: "";
    left: 1px;
    top: .45em;
    width: 8px;
    height: 4px;
    border-left: 2px solid #0c9d26;
    border-bottom: 2px solid #0c9d26;
    transform: rotate(-45deg);
}

.equipment-product-bottom {
    padding-top: 4px;
}

.equipment-cta {
    margin: 30px 0 28px;
    padding: 34px 44px;
    grid-template-columns: minmax(0, 640px) minmax(320px, 1fr);
    min-height: 300px;
}

.equipment-cta h2 {
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    max-width: 620px;
    line-height: 1.08;
}

.equipment-cta p {
    max-width: 560px;
    font-size: .98rem;
}

.equipment-cta-art {
    min-height: 190px;
}

.equipment-cta form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
    margin-top: 24px;
}

.equipment-cta input {
    width: 100%;
    min-width: 0;
    height: 46px;
    border: 0;
    border-radius: 12px;
    padding: 0 16px;
    font-size: .95rem;
}

.equipment-cta input[name="address"] {
    grid-column: 1 / -1;
}

.equipment-cta .btn {
    width: fit-content;
    min-width: 190px;
    height: 46px;
    border-radius: 12px;
}

.equipment-cta-art::before {
    inset: 12% 1% 6%;
    border-width: 4px;
    transform: rotate(-7deg);
}

.equipment-cta-art .equipment-visual {
    display: none;
}

.equipment-cta-art img {
    position: absolute;
    z-index: 1;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(10, 35, 20, .22));
}

.equipment-cta-router {
    left: 8%;
    bottom: 16px;
    width: min(220px, 42%);
}

.equipment-cta-power {
    right: 8%;
    bottom: 8px;
    width: min(220px, 42%);
}

@media (max-width: 1180px) {
    .equipment-hero-copy {
        width: min(600px, 68%);
        padding: 38px 30px;
    }
}

@media (max-width: 760px) {
    .equipment-page {
        width: min(100% - 22px, 1320px);
    }

    .equipment-hero {
        min-height: 620px;
    }

    .equipment-hero-copy {
        padding: 30px 22px;
    }

    .equipment-product-grid article {
        min-height: auto;
    }

    .equipment-cta {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .equipment-cta form {
        grid-template-columns: 1fr;
    }

    .equipment-cta .btn {
        width: 100%;
    }

    .equipment-cta-art {
        min-height: 155px;
    }
}

/* Equipment final cleanup */
.equipment-step-grid .equipment-card-media {
    display: none;
}

.equipment-step-icon {
    display: grid;
    place-items: center;
    width: 118px;
    height: 108px;
    margin: 0 auto 18px;
}

.equipment-step-icon svg {
    width: 86px;
    height: 86px;
    padding: 18px;
    border-radius: 22px;
    color: #12a333;
    background: linear-gradient(180deg, #e8f9ec, #def5e4);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 14px 22px rgba(18, 163, 51, .1));
}

.equipment-card-media img {
    mix-blend-mode: normal;
}

.equipment-cta {
    min-height: 310px;
}

.equipment-cta-art {
    min-height: 230px;
}

.equipment-cta-art img {
    mix-blend-mode: normal;
}

.equipment-cta-router {
    left: -2%;
    bottom: -2px;
    width: min(340px, 58%);
}

.equipment-cta-power {
    right: 7%;
    bottom: 38px;
    width: min(220px, 36%);
}

@media (max-width: 760px) {
    .equipment-step-icon {
        width: 104px;
        height: 96px;
    }

    .equipment-step-icon svg {
        width: 78px;
        height: 78px;
    }

    .equipment-cta-art {
        min-height: 165px;
    }
}

/* Cabinet login contrast fix */
html[data-theme="dark"] .cabinet-login-page {
    color: #0f172a;
}

html[data-theme="dark"] .cabinet-login-hero {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 42%, rgba(255, 255, 255, .42) 70%, rgba(255, 255, 255, .08) 100%),
        url("../img/hero-family-zasnet.png") center right / cover no-repeat;
}

html[data-theme="dark"] .cabinet-login-hero h1,
html[data-theme="dark"] .cabinet-login-hero p,
html[data-theme="dark"] .cabinet-login-head h2,
html[data-theme="dark"] .cabinet-login-info h2,
html[data-theme="dark"] .cabinet-login-features h3,
html[data-theme="dark"] .cabinet-direct-box strong,
html[data-theme="dark"] .cabinet-login-card label {
    color: #0f172a;
}

html[data-theme="dark"] .cabinet-login-hero p,
html[data-theme="dark"] .cabinet-login-head p,
html[data-theme="dark"] .cabinet-login-features p,
html[data-theme="dark"] .cabinet-direct-box p {
    color: #475569;
}

html[data-theme="dark"] .cabinet-login-card,
html[data-theme="dark"] .cabinet-login-info {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(15, 23, 42, .08);
}

html[data-theme="dark"] .cabinet-login-features article {
    background: #f7fbf8;
    border-color: rgba(15, 23, 42, .07);
}

html[data-theme="dark"] .cabinet-login-card input {
    color: #0f172a;
    background: #f8fbfa;
    border-color: rgba(148, 163, 184, .34);
}

html[data-theme="dark"] .cabinet-login-card input::placeholder {
    color: #64748b;
}

html[data-theme="dark"] .cabinet-direct-box {
    background: linear-gradient(90deg, #eef8ef, #eef7ff);
}

html[data-theme="dark"] .cabinet-forgot-link {
    color: #15803d;
}

/* Equipment page visual alignment */
.equipment-page {
    width: var(--page-shell-width);
    max-width: none;
    margin-top: 18px;
}

.equipment-hero {
    min-height: 390px;
    margin-top: 18px;
    border-color: var(--ui-line);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(28, 45, 39, .9) 0%, rgba(28, 45, 39, .72) 42%, rgba(28, 45, 39, .3) 70%, rgba(28, 45, 39, .06) 100%),
        var(--equipment-hero-image) center right / cover no-repeat;
    box-shadow: var(--ui-shadow);
}

.equipment-hero-copy {
    width: min(610px, 52%);
    padding: 40px;
}

.equipment-hero h1 {
    color: #f7fff9;
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    line-height: 1.05;
}

.equipment-hero h1::first-line {
    color: #7ef04d;
}

.equipment-hero p {
    max-width: 560px;
    color: rgba(244, 255, 247, .86);
    font-weight: 700;
}

.equipment-actions .btn.light {
    border-color: rgba(255, 255, 255, .28);
    color: #f7fff9;
    background: rgba(255, 255, 255, .12);
}

.equipment-badges article {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.equipment-badges strong {
    color: #f7fff9;
}

.equipment-mini-icon {
    background: rgba(126, 240, 77, .14);
    color: #7ef04d;
}

.equipment-steps h2,
.equipment-benefits h2,
.equipment-categories h2,
.equipment-products h2 {
    color: #f7fff9;
}

.equipment-step-grid {
    gap: 16px;
}

.equipment-step-grid article {
    display: grid;
    grid-template-rows: auto auto auto;
    min-height: 250px;
    padding: 24px;
    border-color: rgba(222, 244, 229, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--ui-shadow-soft);
}

.equipment-step-grid article:not(:last-child)::after {
    left: calc(100% + 3px);
    width: 10px;
    border-top-color: #7ef04d;
}

.equipment-number {
    color: #15943a;
    background: #c9f4ca;
}

.equipment-step-icon {
    width: 104px;
    height: 88px;
    margin: 24px auto 16px;
}

.equipment-step-icon svg {
    width: 72px;
    height: 72px;
    padding: 15px;
}

.equipment-step-grid h3,
.equipment-step-grid p {
    text-align: left;
}

.equipment-step-grid h3 {
    color: #0b1734;
}

.equipment-step-grid p {
    color: #344256;
}

.equipment-benefit-grid article,
.equipment-category-grid article,
.equipment-product-grid article {
    border-color: rgba(222, 244, 229, .16);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--ui-shadow-soft);
}

.equipment-category-grid .equipment-card-media img {
    max-height: 104px;
}

.equipment-cta {
    border: 1px solid rgba(222, 244, 229, .16);
    box-shadow: var(--ui-shadow);
}

@media (max-width: 1180px) {
    .equipment-hero-copy {
        width: min(620px, 64%);
        padding: 34px;
    }
}

@media (max-width: 760px) {
    .equipment-hero {
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(28, 45, 39, .92) 0%, rgba(28, 45, 39, .78) 48%, rgba(28, 45, 39, .28) 100%),
            var(--equipment-hero-image) 58% bottom / cover no-repeat;
    }

    .equipment-hero-copy {
        width: 100%;
        padding: 28px 22px 190px;
    }

    .equipment-step-grid article {
        min-height: auto;
    }
}

/* Equipment light-theme readability */
.equipment-steps h2,
.equipment-benefits h2,
.equipment-categories h2,
.equipment-products h2 {
    color: var(--ui-ink);
}

html[data-theme="dark"] .equipment-steps h2,
html[data-theme="dark"] .equipment-benefits h2,
html[data-theme="dark"] .equipment-categories h2,
html[data-theme="dark"] .equipment-products h2 {
    color: #f7fff9;
}

.equipment-step-grid article,
.equipment-benefit-grid article,
.equipment-category-grid article,
.equipment-product-grid article {
    border: 1px solid rgba(15, 23, 42, .09);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}

.equipment-benefit-grid article,
.equipment-category-grid article {
    min-height: 168px;
}

.equipment-product-grid article {
    min-height: 350px;
}

.equipment-product-image {
    background: linear-gradient(180deg, #f8fbf9, #ffffff);
    border: 1px solid rgba(15, 23, 42, .05);
}

.equipment-product-image img {
    max-height: 150px;
}

.equipment-benefit-grid h3,
.equipment-category-grid h3,
.equipment-product-grid h3 {
    color: #0b1734;
}

.equipment-benefit-grid p,
.equipment-category-grid p,
.equipment-product-grid ul {
    color: #344256;
}

html[data-theme="dark"] .equipment-step-grid article,
html[data-theme="dark"] .equipment-benefit-grid article,
html[data-theme="dark"] .equipment-category-grid article,
html[data-theme="dark"] .equipment-product-grid article {
    border-color: rgba(222, 244, 229, .16);
    background: rgba(255, 255, 255, .94);
}

html[data-theme="dark"] .equipment-benefit-grid h3,
html[data-theme="dark"] .equipment-category-grid h3,
html[data-theme="dark"] .equipment-product-grid h3,
html[data-theme="dark"] .equipment-benefit-grid p,
html[data-theme="dark"] .equipment-category-grid p,
html[data-theme="dark"] .equipment-product-grid ul {
    color: #0b1734;
}

/* Equipment card density fix */
.equipment-step-grid article {
    display: block;
    min-height: 210px;
    padding: 20px 22px 22px;
}

.equipment-step-icon {
    width: 76px;
    height: 58px;
    margin: 18px auto 14px;
}

.equipment-step-icon svg {
    width: 52px;
    height: 52px;
    padding: 10px;
    border-radius: 16px;
}

.equipment-step-grid h3 {
    margin-top: 0;
    text-align: left;
}

.equipment-step-grid p {
    margin-top: 8px;
    text-align: left;
}

.equipment-benefit-grid article {
    min-height: 190px;
    padding: 22px 18px;
}

.equipment-line-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
}

.equipment-line-icon svg {
    width: 27px;
    height: 27px;
}

.equipment-category-grid article {
    min-height: 190px;
    padding: 20px 18px;
}

.equipment-card-media,
.equipment-card-media.category {
    height: 96px;
    margin-bottom: 10px;
}

.equipment-card-media img,
.equipment-category-grid .equipment-card-media img,
.equipment-card-media.category img {
    max-width: 170px;
    max-height: 86px;
}

.equipment-category-grid h3,
.equipment-category-grid p,
.equipment-benefit-grid h3,
.equipment-benefit-grid p {
    text-align: center;
}

.equipment-product-grid article {
    min-height: 330px;
}

.equipment-product-image {
    height: 136px;
}

.equipment-product-image img {
    max-height: 120px;
}

/* Equipment modal and contrast */
.equipment-page .btn,
.equipment-actions .btn,
.equipment-cta .btn,
.equipment-modal .btn {
    min-height: 44px;
    padding: 0 24px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    letter-spacing: 0;
}

.equipment-actions .btn.primary,
.equipment-cta .btn.primary,
.equipment-modal .btn.primary {
    border: 1px solid rgba(19, 164, 54, .7);
    background: linear-gradient(135deg, #0b9630 0%, #6df018 100%);
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(21, 148, 58, .28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.equipment-actions .btn.light {
    border: 1px solid rgba(16, 185, 72, .28);
    background: #fff;
    color: #0b1734 !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}

.equipment-actions .btn:hover,
.equipment-cta .btn:hover,
.equipment-modal .btn:hover,
.equipment-product-bottom a:hover {
    transform: translateY(-1px);
}

.equipment-step-grid h3,
.equipment-benefit-grid h3,
.equipment-category-grid h3,
.equipment-product-grid h3,
html[data-theme="dark"] .equipment-step-grid h3,
html[data-theme="dark"] .equipment-benefit-grid h3,
html[data-theme="dark"] .equipment-category-grid h3,
html[data-theme="dark"] .equipment-product-grid h3 {
    color: #07142f !important;
    opacity: 1 !important;
}

.equipment-step-grid p,
.equipment-benefit-grid p,
.equipment-category-grid p,
.equipment-product-grid ul,
.equipment-product-grid li,
html[data-theme="dark"] .equipment-step-grid p,
html[data-theme="dark"] .equipment-benefit-grid p,
html[data-theme="dark"] .equipment-category-grid p,
html[data-theme="dark"] .equipment-product-grid ul,
html[data-theme="dark"] .equipment-product-grid li {
    color: #33445f !important;
    opacity: 1 !important;
}

.equipment-product-bottom strong,
html[data-theme="dark"] .equipment-product-bottom strong {
    color: #07142f !important;
    opacity: 1 !important;
}

.equipment-product-bottom a,
html[data-theme="dark"] .equipment-product-bottom a {
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid rgba(15, 169, 62, .35);
    border-radius: 999px;
    background: #fff;
    color: #078927 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.equipment-modal-open {
    overflow: hidden;
}

.equipment-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.equipment-modal.is-open {
    display: flex;
}

.equipment-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 17, 31, .72);
    backdrop-filter: blur(8px);
}

.equipment-modal-card {
    position: relative;
    width: min(520px, 100%);
    border-radius: 24px;
    border: 1px solid rgba(157, 230, 173, .34);
    background: #fff;
    color: #07142f;
    padding: 30px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
}

.equipment-modal-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #078927;
    font-weight: 900;
    margin-bottom: 12px;
}

.equipment-modal-card h2 {
    margin: 0 42px 10px 0;
    color: #07142f !important;
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.05;
}

.equipment-modal-card p {
    margin: 0 0 20px;
    color: #33445f !important;
    line-height: 1.6;
}

.equipment-modal-card form {
    display: grid;
    gap: 12px;
}

.equipment-modal-card input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    background: #f8fbf9;
    color: #07142f;
    padding: 0 16px;
    font: inherit;
    outline: none;
}

.equipment-modal-card input:focus {
    border-color: rgba(25, 178, 70, .62);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.equipment-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 20, 47, .08);
    color: #07142f;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

html[data-theme="dark"] .equipment-modal-card {
    background: #fff;
    color: #07142f;
}

html[data-theme="dark"] .equipment-actions .btn.light {
    background: #fff;
    color: #07142f !important;
}

@media (max-width: 640px) {
    .equipment-actions {
        align-items: stretch;
    }

    .equipment-actions .btn,
    .equipment-modal .btn {
        width: 100%;
    }

    .equipment-modal-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }
}

/* Site announcement modal */
.site-announcement-open {
    overflow: hidden;
}

.site-announcement-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.site-announcement-modal.is-open {
    display: flex;
}

.site-announcement-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 24%, rgba(126, 240, 77, .24), transparent 34%),
        rgba(5, 17, 29, .76);
    backdrop-filter: blur(10px);
}

.site-announcement-card {
    position: relative;
    width: min(860px, 100%);
    max-height: min(86vh, 760px);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(260px, .88fr) 1fr;
    border-radius: 28px;
    border: 1px solid rgba(169, 240, 183, .42);
    background: #fff;
    color: #07142f;
    box-shadow: 0 38px 110px rgba(0, 0, 0, .4);
}

.site-announcement-card.no-media {
    width: min(560px, 100%);
    grid-template-columns: 1fr;
}

.site-announcement-media {
    min-height: 360px;
    background:
        linear-gradient(135deg, rgba(20, 151, 58, .14), rgba(126, 240, 77, .08)),
        #f5faf6;
}

.site-announcement-media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

.site-announcement-copy {
    padding: 38px 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.site-announcement-copy > span {
    width: fit-content;
    min-height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(34, 197, 94, .12);
    color: #078927;
    font-weight: 900;
}

.site-announcement-copy h2 {
    margin: 0;
    color: #07142f !important;
    font-size: clamp(30px, 4.8vw, 48px);
    line-height: 1.04;
    letter-spacing: 0;
}

.site-announcement-copy p {
    margin: 0;
    color: #33445f !important;
    font-size: 16px;
    line-height: 1.65;
}

.site-announcement-copy .btn {
    width: fit-content;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 13px;
    border: 1px solid rgba(19, 164, 54, .7);
    background: linear-gradient(135deg, #0b9630 0%, #6df018 100%);
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(21, 148, 58, .28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

.site-announcement-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.site-announcement-thumbs img {
    width: 62px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .1);
    background: #f8fbf9;
}

.site-announcement-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 20, 47, .09);
    color: #07142f;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

html[data-theme="dark"] .site-announcement-card {
    background: #fff;
    color: #07142f;
}

@media (max-width: 760px) {
    .site-announcement-modal {
        padding: 16px;
    }

    .site-announcement-card {
        grid-template-columns: 1fr;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 20px;
    }

    .site-announcement-media,
    .site-announcement-media img {
        min-height: 190px;
    }

    .site-announcement-copy {
        padding: 24px 18px 20px;
    }

    .site-announcement-copy .btn {
        width: 100%;
    }
}

/* Clean tariffs page */
.tariffs-clean-page {
    width: min(1480px, calc(100% - 48px));
    margin: 28px auto 56px;
}

.tariffs-clean-panel {
    border-radius: 24px;
    background: #fff;
    color: #070b14;
    padding: clamp(24px, 4vw, 54px);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.tariffs-clean-head h1 {
    max-width: 1120px;
    margin: 0 auto 28px;
    color: #070b14 !important;
    text-align: center;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: 0;
}

.tariffs-clean-controls {
    display: grid;
    grid-template-columns: minmax(320px, 560px) minmax(280px, 580px);
    gap: 54px;
    align-items: end;
    justify-content: center;
}

.tariffs-clean-controls label {
    display: grid;
    gap: 10px;
    color: #070b14;
    font-size: 18px;
    font-weight: 800;
}

.tariffs-clean-controls select {
    width: 100%;
    min-height: 70px;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: 16px;
    background: #fff;
    color: #070b14;
    padding: 0 22px;
    font: inherit;
    font-size: 24px;
    font-weight: 500;
    outline: none;
}

.tariffs-clean-controls aside {
    min-height: 70px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f3f8f4, #edf2ef);
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
}

.tariffs-clean-controls aside span,
.tariff-clean-icon,
.tariff-request-intro > span {
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #eef6f1;
    color: #169938;
}

.tariffs-clean-controls aside span {
    width: 42px;
    height: 42px;
    border: 2px solid #169938;
    background: #fff;
}

.tariffs-clean-page svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tariffs-clean-controls aside p {
    margin: 0;
    color: #333842 !important;
    font-size: 17px;
    line-height: 1.35;
}

.tariffs-city-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 34px auto 40px;
    justify-content: center;
}

.tariffs-city-pills button {
    min-height: 52px;
    border: 1px solid rgba(15, 23, 42, .13);
    border-radius: 16px;
    background: #fff;
    color: #070b14;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.tariffs-city-pills button.active {
    border-color: transparent;
    background: linear-gradient(135deg, #26ba45, #168d32);
    color: #fff;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .24);
}

.tariffs-city-pills .is-extra {
    display: none;
}

.tariffs-city-pills.open .is-extra {
    display: inline-flex;
}

.tariffs-city-pills.open .tariffs-more-cities {
    display: none;
}

.tariffs-clean-city {
    display: none;
}

.tariffs-clean-city.active {
    display: block;
}

.tariffs-connection-note {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
    border: 1px solid rgba(22, 163, 74, .16);
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fff9, #eef8f1);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: #07142f;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.tariffs-connection-note span {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #dcf8e1;
    color: #169938;
    flex: 0 0 auto;
}

.tariffs-connection-note svg {
    width: 20px;
    height: 20px;
}

.tariffs-connection-note strong {
    color: #169938;
    font-weight: 900;
}

.tariffs-connection-note p {
    margin: 0;
    color: #33445f !important;
    font-weight: 700;
}

.tariffs-connection-note b {
    color: #07142f;
    font-weight: 900;
}

.tariffs-clean-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.tariff-clean-card {
    position: relative;
    min-height: 430px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 22px;
    background: #fff;
    padding: 34px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.tariff-clean-card.featured {
    border: 2px solid #169938;
    box-shadow: 0 18px 42px rgba(22, 163, 74, .12);
}

.tariff-clean-badge {
    position: absolute;
    top: 18px;
    right: 16px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #22ad43, #168d32);
    color: #fff;
    font-weight: 900;
}

.tariff-clean-icon {
    width: 78px;
    height: 78px;
    margin-bottom: 20px;
}

.tariff-clean-icon svg {
    width: 42px;
    height: 42px;
    stroke-width: 2.6;
}

.tariff-clean-card h2 {
    margin: 0;
    color: #070b14 !important;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.1;
}

.tariff-clean-card i {
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: #e5e7eb;
    margin: 18px 0 14px;
}

.tariff-clean-speed {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    color: #070b14;
}

.tariff-clean-speed span {
    color: #070b14;
    font-size: 28px;
}

.tariff-clean-speed strong {
    color: #169938;
    font-size: clamp(48px, 5vw, 68px);
    line-height: .95;
}

.tariff-clean-card p {
    min-height: 70px;
    max-width: 330px;
    margin: 0 auto 22px;
    color: #3d4653 !important;
    font-size: 18px;
    line-height: 1.5;
}

.tariff-clean-price {
    width: 100%;
    border-top: 1px solid rgba(15, 23, 42, .12);
    padding-top: 20px;
    margin-top: auto;
    color: #070b14;
}

.tariff-clean-price strong {
    color: #070b14;
    font-size: clamp(42px, 4vw, 56px);
    line-height: 1;
}

.tariff-clean-price span {
    margin-left: 8px;
    color: #070b14;
    font-size: 18px;
}

.tariff-clean-card .btn {
    width: 100%;
    min-height: 56px;
    margin-top: 22px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
}

.tariff-clean-card .btn.primary {
    border: 0;
    background: linear-gradient(135deg, #28b545, #168d32);
    color: #fff !important;
}

.tariff-clean-card .btn.outline {
    border: 2px solid #169938;
    background: #fff;
    color: #169938 !important;
}

.tariff-clean-card.empty {
    grid-column: 1 / -1;
    min-height: 280px;
}

.tariff-clean-request {
    margin-top: 34px;
    border: 1px solid rgba(15, 23, 42, .13);
    border-radius: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 24px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}

.tariff-request-intro {
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 22px;
}

.tariff-request-intro > span {
    width: 86px;
    height: 86px;
}

.tariff-request-intro svg {
    width: 48px;
    height: 48px;
    stroke: #070b14;
}

.tariff-request-intro h2 {
    margin: 0;
    color: #070b14 !important;
    font-size: 27px;
}

.tariff-request-intro p {
    margin: 10px 0 0;
    color: #3d4653 !important;
    font-size: 18px;
    line-height: 1.45;
}

.tariff-clean-request form {
    border-left: 1px solid rgba(15, 23, 42, .12);
    padding-left: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.tariff-clean-request label {
    display: grid;
    gap: 8px;
    color: #3d4653;
    font-weight: 600;
}

.tariff-clean-request input {
    min-height: 56px;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 10px;
    background: #fff;
    color: #070b14;
    padding: 0 16px;
    font: inherit;
}

.tariff-clean-request .btn {
    min-height: 56px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #28b545, #168d32);
    color: #fff !important;
    padding: 0 24px;
    font-weight: 900;
    white-space: nowrap;
}

html[data-theme="dark"] .tariffs-clean-panel,
html[data-theme="dark"] .tariff-clean-card,
html[data-theme="dark"] .tariff-clean-request {
    background: #fff;
    color: #070b14;
}

@media (max-width: 1120px) {
    .tariffs-clean-controls,
    .tariff-clean-request {
        grid-template-columns: 1fr;
    }

    .tariffs-clean-cards {
        grid-template-columns: 1fr;
    }

    .tariff-clean-request form {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, .12);
        padding-left: 0;
        padding-top: 22px;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .tariffs-clean-page {
        width: min(100% - 24px, 1480px);
        margin-top: 16px;
    }

    .tariffs-clean-panel {
        padding: 22px 14px;
        border-radius: 18px;
    }

    .tariffs-clean-controls {
        gap: 16px;
    }

    .tariffs-city-pills {
        justify-content: flex-start;
        gap: 10px;
    }

    .tariffs-connection-note {
        width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tariffs-city-pills button {
        min-height: 46px;
        padding: 0 14px;
        font-size: 15px;
    }

    .tariff-clean-card {
        padding: 26px 18px;
    }

    .tariff-request-intro {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tariff-request-intro > span {
        margin: 0 auto;
    }

    .tariff-clean-request form {
        grid-template-columns: 1fr;
    }
}

/* Contacts page final contrast cleanup */
.contacts-hero {
    border-radius: 28px;
}

html[data-theme="dark"] main.page:has(.contacts-hero) {
    color: #f7fff8;
}

html[data-theme="dark"] .contacts-hero {
    background:
        linear-gradient(90deg, rgba(11, 30, 25, .96) 0%, rgba(11, 30, 25, .9) 42%, rgba(11, 30, 25, .52) 70%, rgba(11, 30, 25, .24) 100%),
        var(--contacts-hero-image, linear-gradient(135deg, #0b1716, #1c332b)) center right / cover no-repeat;
}

html[data-theme="dark"] .contacts-copy h1,
html[data-theme="dark"] .contacts-copy p {
    color: #fff;
}

html[data-theme="dark"] .contacts-copy .about-badges article {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

html[data-theme="dark"] .contacts-copy .about-badges strong {
    color: #fff;
}

html[data-theme="dark"] .contacts-copy .about-badges small {
    color: #d8e8de;
}

html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .contact-map-panel,
html[data-theme="dark"] .contact-form-panel {
    background: rgba(247, 255, 249, .96);
    border-color: rgba(255, 255, 255, .48);
    box-shadow: 0 22px 60px rgba(8, 24, 18, .22);
}

html[data-theme="dark"] .contacts-card h3,
html[data-theme="dark"] .contacts-card strong,
html[data-theme="dark"] .contacts-card a,
html[data-theme="dark"] .contact-map-panel h2,
html[data-theme="dark"] .contact-form-panel h2 {
    color: #07142f;
}

html[data-theme="dark"] .contacts-card p,
html[data-theme="dark"] .contact-form-panel p {
    color: #40556b;
}

html[data-theme="dark"] .contact-actions .btn.primary {
    color: #fff !important;
    background: linear-gradient(135deg, #0f9d39, #75f018);
    border-color: transparent;
}

html[data-theme="dark"] .contact-actions .btn.light {
    color: #07142f !important;
    background: #fff;
    border-color: rgba(255, 255, 255, .86);
}

html[data-theme="dark"] .contacts-lead-form input,
html[data-theme="dark"] .contacts-lead-form textarea,
html[data-theme="dark"] .contacts-lead-form select {
    color: #07142f;
    background: #fff;
    border-color: rgba(15, 23, 42, .12);
}

html[data-theme="dark"] .contacts-lead-form input::placeholder,
html[data-theme="dark"] .contacts-lead-form textarea::placeholder {
    color: #64748b;
}

html[data-theme="dark"] .map-card {
    color: #07142f;
    background: rgba(255, 255, 255, .94);
}

html[data-theme="dark"] .map-card small {
    color: #64748b;
}

@media (max-width: 768px) {
    .contacts-hero {
        width: min(100% - 28px, 1240px);
        margin-top: 18px;
        border-radius: 22px;
    }

    .contacts-copy,
    .contact-map-panel,
    .contact-form-panel {
        padding: 22px;
    }

    .contacts-copy h1 {
        font-size: clamp(2rem, 12vw, 2.6rem);
    }

    .contacts-grid,
    .contact-map-section {
        width: min(100% - 28px, 1240px);
        gap: 12px;
    }

    .contact-actions .btn,
    .contacts-lead-form button {
        width: 100%;
        justify-content: center;
    }
}

/* Contacts width and video package photo cleanup */
.contacts-hero,
.contacts-grid,
.contact-map-section {
    width: min(1600px, calc(100% - 160px));
}

.video-package-card {
    padding-top: 34px;
}

.video-package-card.featured {
    padding-top: 50px;
}

.video-package-card.featured::before {
    top: 14px;
    z-index: 2;
}

.video-package-card .plan-chip {
    margin-top: 0;
}

.video-package-head {
    align-items: flex-start;
}

.camera-visual {
    width: 154px;
    height: 92px;
    flex: 0 0 154px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #f8fafc;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
}

html[data-theme="dark"] .camera-visual {
    border-color: rgba(15, 23, 42, .08);
    background: #fff;
}

@media (max-width: 1280px) {
    .contacts-hero,
    .contacts-grid,
    .contact-map-section {
        width: min(1240px, calc(100% - 48px));
    }
}

@media (max-width: 768px) {
    .contacts-hero,
    .contacts-grid,
    .contact-map-section {
        width: min(100% - 28px, 1240px);
    }

    .video-package-card,
    .video-package-card.featured {
        padding-top: 28px;
    }

    .video-package-card.featured::before {
        top: 10px;
        transform: translateX(-50%) scale(.92);
    }

    .camera-visual {
        width: 122px;
        height: 74px;
        flex-basis: 122px;
        border-radius: 14px;
    }
}

.footer-column-services .footer-link[href$="/equipment"] {
    color: inherit;
    font-weight: inherit;
}

/* Unified WebP video assets */
.video-hero {
    background:
        linear-gradient(90deg, rgba(247, 252, 249, .98) 0%, rgba(247, 252, 249, .94) 42%, rgba(247, 252, 249, .5) 68%, rgba(247, 252, 249, .12) 100%),
        radial-gradient(circle at 72% 48%, rgba(106, 244, 86, .2), transparent 34%),
        url("../img/video/video-hero-camera-phone.webp") center right 44px / min(56vw, 760px) auto no-repeat;
}

html[data-theme="dark"] .video-hero {
    background:
        linear-gradient(90deg, rgba(9, 24, 20, .96) 0%, rgba(9, 24, 20, .9) 42%, rgba(9, 24, 20, .48) 70%, rgba(9, 24, 20, .18) 100%),
        radial-gradient(circle at 72% 48%, rgba(106, 244, 86, .2), transparent 34%),
        url("../img/video/video-hero-camera-phone.webp") center right 44px / min(56vw, 760px) auto no-repeat;
}

.video-feature-row article {
    align-items: center;
}

.video-feature-row .home-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(228, 255, 232, .98), rgba(244, 255, 246, .82));
    box-shadow: 0 16px 34px rgba(22, 163, 74, .16);
}

.video-feature-row .home-icon::before {
    width: 34px;
    height: 34px;
    background: #16a34a;
}

.video-feature-row .home-icon.speed::before {
    content: "4K" !important;
    display: grid;
    width: auto;
    height: auto;
    place-items: center;
    color: #16a34a;
    background: transparent;
    -webkit-mask: none;
    mask: none;
    font-size: 1.3rem;
    font-weight: 950;
    letter-spacing: 0;
}

.video-feature-row .home-icon.laptop::before {
    --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M10 18h4'/%3E%3Cpath d='M10 6h4'/%3E%3C/svg%3E");
}

.video-feature-row .home-icon.cloud::before {
    --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 18H8a5 5 0 1 1 1.2-9.85A6 6 0 0 1 20 11.5 3.5 3.5 0 0 1 17.5 18Z'/%3E%3Cpath d='M12 12v5'/%3E%3Cpath d='m9.5 14.5 2.5 2.5 2.5-2.5'/%3E%3C/svg%3E");
}

.video-feature-row .home-icon.shield::before {
    --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3V2'/%3E%3C/svg%3E");
}

.camera-visual {
    display: block;
    width: min(220px, 42%);
    height: 132px;
    max-width: 100%;
    flex: 0 0 min(220px, 42%);
    object-fit: contain;
    object-position: center;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

.camera-visual::before,
.camera-visual::after {
    display: none !important;
}

@media (max-width: 960px) {
    .video-hero {
        background:
            linear-gradient(180deg, rgba(247, 252, 249, .98) 0%, rgba(247, 252, 249, .94) 48%, rgba(247, 252, 249, .42) 100%),
            url("../img/video/video-hero-camera-phone.webp") center bottom 18px / min(92%, 560px) auto no-repeat;
    }

    html[data-theme="dark"] .video-hero {
        background:
            linear-gradient(180deg, rgba(9, 24, 20, .96) 0%, rgba(9, 24, 20, .9) 48%, rgba(9, 24, 20, .42) 100%),
            url("../img/video/video-hero-camera-phone.webp") center bottom 18px / min(92%, 560px) auto no-repeat;
    }

    .video-hero > div {
        padding-bottom: 260px;
    }
}

@media (max-width: 640px) {
    .video-package-head {
        align-items: flex-start;
        gap: 12px;
    }

    .camera-visual {
        width: min(154px, 46%);
        height: 96px;
        flex-basis: min(154px, 46%);
    }

    .video-feature-row .home-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 18px;
    }

    .video-feature-row .home-icon::before {
        width: 30px;
        height: 30px;
    }
}

/* 2026-04-30 final video page cleanup */
.video-hero,
html[data-theme="dark"] .video-hero {
    min-height: 430px;
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .84) 42%, rgba(8, 22, 19, .34) 70%, rgba(8, 22, 19, .06) 100%),
        url("../img/video-surveillance-hero.png") center right / cover no-repeat !important;
}

.video-hero > div {
    max-width: 610px;
    padding: 42px 44px;
}

.video-hero h1,
.video-hero p {
    color: #f8fff9 !important;
    opacity: 1 !important;
}

.video-hero h1 {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}

.video-hero .home-kicker {
    color: #b9ff62;
    background: rgba(185, 255, 98, .13);
    border-color: rgba(185, 255, 98, .34);
}

.video-hero .btn.light {
    color: #f8fff9 !important;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.video-feature-row {
    gap: 16px;
}

.video-feature-row article {
    min-height: 112px;
    padding: 20px 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
}

.video-feature-row .home-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}

.video-packages {
    width: min(1640px, calc(100% - 72px));
}

.video-package-grid {
    gap: 26px;
    align-items: stretch;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 610px;
    padding: 22px 28px 28px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 22px;
    background: #fff;
    color: #07142f;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    padding-top: 44px;
    border-color: rgba(31, 178, 68, .45);
    background: linear-gradient(180deg, #f7fff8 0%, #ffffff 100%);
}

.video-package-card.featured::before {
    top: 12px;
    z-index: 4;
}

.video-package-card .plan-chip {
    top: 20px;
    left: 28px;
    z-index: 4;
}

.video-package-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.camera-visual {
    order: -1;
    display: block;
    width: 100% !important;
    height: 182px !important;
    flex: none !important;
    max-width: 100%;
    margin: 0 auto 18px !important;
    padding: 4px 0;
    object-fit: contain !important;
    object-position: center;
    border: 0 !important;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 58%, rgba(36, 190, 72, .08), transparent 58%) !important;
    box-shadow: none !important;
}

.video-package-card.featured .camera-visual {
    margin-top: 0 !important;
}

.camera-visual::before,
.camera-visual::after {
    display: none !important;
}

.video-package-head > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 14px;
}

.video-package-head h3,
html[data-theme="dark"] .video-package-head h3 {
    color: #07142f;
    font-size: 1.55rem;
    line-height: 1.1;
}

.video-package-head span,
html[data-theme="dark"] .video-package-head span {
    margin: 0;
    color: #5d6d84;
    font-size: 1.08rem;
    font-weight: 900;
    white-space: nowrap;
}

.video-price,
html[data-theme="dark"] .video-price {
    margin-top: 18px;
    color: #07142f;
    font-size: clamp(2.2rem, 2.5vw, 2.75rem);
}

.video-package-card p,
html[data-theme="dark"] .video-package-card p {
    min-height: 46px;
    margin-top: 14px;
    color: #344256;
}

.video-package-card ul {
    min-height: 122px;
    margin: 22px 0 24px;
}

.video-package-card li,
html[data-theme="dark"] .video-package-card li {
    color: #26364c;
}

.video-package-card .btn {
    min-height: 54px;
    margin-top: auto;
    border-radius: 12px;
}

@media (max-width: 1180px) {
    .video-packages {
        width: min(100% - 36px, 1640px);
    }

    .video-package-grid {
        grid-template-columns: 1fr;
    }

    .video-package-card,
    html[data-theme="dark"] .video-package-card {
        min-height: 0;
    }
}

@media (max-width: 960px) {
    .video-hero,
    html[data-theme="dark"] .video-hero {
        min-height: auto;
        background:
            linear-gradient(180deg, rgba(8, 22, 19, .96) 0%, rgba(8, 22, 19, .82) 48%, rgba(8, 22, 19, .24) 100%),
            url("../img/video-surveillance-hero.png") 62% bottom / cover no-repeat !important;
    }

    .video-hero > div {
        padding: 30px 24px 230px;
    }
}

@media (max-width: 640px) {
    .video-packages {
        width: min(100% - 24px, 1640px);
    }

    .video-package-card,
    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card,
    html[data-theme="dark"] .video-package-card.featured {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .video-package-card.featured {
        padding-top: 50px;
    }

    .camera-visual {
        height: 138px !important;
        margin-bottom: 14px !important;
    }

    .video-package-head > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .video-feature-row article {
        min-height: auto;
    }
}

/* 2026-04-30 video packages wider realistic polish */
.video-page {
    --video-page-width: min(1760px, calc(100% - 56px));
    width: var(--video-page-width) !important;
}

.video-page > .video-hero,
.video-page > .video-feature-row,
.video-page > .video-consult,
.video-page > .video-why,
.video-page > .video-cabinet {
    width: var(--video-page-width);
}

.video-packages {
    width: var(--video-page-width) !important;
    margin-top: 28px;
}

.video-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 640px !important;
    padding: 28px 34px 32px !important;
    border-radius: 24px !important;
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    padding-top: 52px !important;
}

.video-package-card .plan-chip {
    top: 22px !important;
    left: 34px !important;
}

.video-package-card.featured::before {
    top: 18px !important;
}

.camera-visual {
    height: 230px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

.video-package-head h3,
html[data-theme="dark"] .video-package-head h3 {
    font-size: clamp(1.45rem, 1.28vw, 1.8rem) !important;
}

.video-price,
html[data-theme="dark"] .video-price {
    font-size: clamp(2.45rem, 2.8vw, 3.15rem) !important;
}

.video-package-card p,
html[data-theme="dark"] .video-package-card p {
    font-size: 1.02rem !important;
}

@media (max-width: 1280px) {
    .video-page {
        --video-page-width: min(100% - 36px, 1760px);
    }

    .video-package-grid {
        grid-template-columns: 1fr !important;
    }

    .video-package-card,
    html[data-theme="dark"] .video-package-card {
        min-height: 0 !important;
    }

    .camera-visual {
        height: 210px !important;
    }
}

@media (max-width: 640px) {
    .video-page {
        --video-page-width: min(100% - 24px, 1760px);
    }

    .video-package-card,
    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card,
    html[data-theme="dark"] .video-package-card.featured {
        padding: 22px 18px !important;
    }

    .video-package-card.featured {
        padding-top: 50px !important;
    }

    .camera-visual {
        height: 160px !important;
        margin-bottom: 16px !important;
    }
}

/* 2026-04-30 prelaunch cleanup: unified requests, coverage and content polish */
.site-request-open,
.site-announcement-open {
    overflow: hidden;
}

.site-request-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.site-request-modal.is-open {
    display: flex;
}

.site-request-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 20, 47, .54);
    backdrop-filter: blur(8px);
}

.site-request-card {
    position: relative;
    width: min(620px, 100%);
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 26px;
    background: #fff;
    color: #07142f;
    box-shadow: 0 30px 90px rgba(7, 20, 47, .26);
    padding: 32px;
}

.site-request-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #eef8f1;
    color: #07142f;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.site-request-card h2 {
    margin: 10px 0 8px;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    line-height: 1.08;
}

.site-request-card p {
    margin: 0 0 22px;
    color: #52627a;
}

.site-request-form,
.coverage-real-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.site-request-form input,
.site-request-form textarea,
.coverage-real-form input,
.contacts-lead-form input,
.contacts-lead-form select,
.contacts-lead-form textarea {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(15, 23, 42, .13);
    border-radius: 12px;
    background: #fff;
    color: #07142f;
    padding: 0 16px;
    font: inherit;
    box-shadow: none;
}

.site-request-form textarea,
.contacts-lead-form textarea {
    grid-column: 1 / -1;
    min-height: 112px;
    padding-top: 14px;
    resize: vertical;
}

.site-request-form .btn,
.coverage-real-form .btn {
    grid-column: 1 / -1;
    min-height: 54px;
}

.site-success-toast {
    width: min(1180px, calc(100% - 32px));
    margin: 16px auto 0;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 16px;
    background: #ecfff0;
    color: #087425;
    padding: 14px 18px;
    font-weight: 900;
    text-align: center;
}

.home-v2-hero .hero-v2-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-power-block {
    width: var(--page-shell-width);
    margin: 24px auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 26px;
    align-items: center;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 28px;
    background: linear-gradient(135deg, #0f9331 0%, #42a552 100%);
    color: #fff;
    padding: 34px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .13);
}

.home-power-block h2 {
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    color: #fff;
}

.home-power-block p {
    max-width: 640px;
    color: rgba(255, 255, 255, .9);
    font-size: 1.08rem;
}

.home-power-visual {
    min-height: 260px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 52% 55%, rgba(183, 255, 98, .34), transparent 34%),
        url("../img/equipment/cuzor-mini-ups-lite.png") 72% 54% / 190px auto no-repeat,
        url("../img/equipment/tp-link-archer-c6-cutout.png") 24% 56% / 240px auto no-repeat;
}

.coverage-request-card > p {
    margin: 0 0 22px;
    color: #52627a;
    font-size: 1.05rem;
}

.coverage-real-form label {
    display: grid;
    gap: 7px;
    color: #07142f;
    font-weight: 800;
}

.coverage-real-form label:nth-child(1),
.coverage-real-form .btn {
    grid-column: 1 / -1;
}

.contacts-lead-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.contacts-lead-form select,
.contacts-lead-form textarea,
.contacts-lead-form p,
.contacts-lead-form .btn {
    grid-column: 1 / -1;
}

.contacts-lead-form p {
    margin: 0;
    color: #53637b !important;
}

.contact-form-panel {
    min-height: auto;
}

.video-page {
    --video-page-width: min(1760px, calc(100% - 48px));
}

.video-live-grid,
.video-install-box {
    width: var(--video-page-width);
    margin: 28px auto;
}

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

.video-live-grid article,
.video-install-box {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .95);
    color: #07142f;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.video-live-grid img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.video-live-grid div {
    padding: 22px 24px 26px;
}

.video-live-grid h2 {
    margin: 0 0 10px;
    color: #07142f;
    font-size: 1.35rem;
}

.video-live-grid p {
    margin: 0;
    color: #40516a;
}

.video-install-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr) auto;
    gap: 24px;
    align-items: center;
    padding: 30px;
}

.video-install-box h2 {
    margin: 10px 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.video-install-box p {
    margin: 0;
    color: #40516a;
}

.video-install-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.video-install-box li {
    color: #26364c;
    font-weight: 800;
}

.video-install-box li::before {
    content: "✓";
    color: #12a33d;
    margin-right: 8px;
}

@media (max-width: 1180px) {
    .home-v2-hero .hero-v2-stats,
    .video-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-power-block,
    .video-install-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .site-request-card {
        padding: 26px 18px;
        border-radius: 20px;
    }

    .site-request-form,
    .coverage-real-form,
    .contacts-lead-form,
    .home-v2-hero .hero-v2-stats,
    .video-live-grid {
        grid-template-columns: 1fr;
    }

    .home-power-block,
    .video-live-grid,
    .video-install-box {
        width: min(100% - 24px, 1760px);
    }

    .home-power-block,
    .video-install-box {
        padding: 24px 18px;
    }

    .home-power-visual {
        min-height: 190px;
        background-size: 135px auto, 180px auto;
    }

    .video-live-grid img {
        height: 190px;
    }
}

/* 2026-04-30 responsive pass: stop mobile drift and align all public pages */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

@media (max-width: 900px) {
    :root {
        --page-shell-width: min(100% - 20px, 560px) !important;
    }

    body {
        width: 100%;
    }

    .topbar {
        width: var(--page-shell-width) !important;
        max-width: var(--page-shell-width) !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        margin: 10px auto 14px !important;
        padding: 12px !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    .brand,
    .brand-full-logo-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
    }

    .brand-full-logo {
        width: min(260px, 100%) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .top-actions {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .top-actions .btn,
    .theme-toggle {
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        white-space: nowrap !important;
        font-size: .92rem !important;
    }

    .main-nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 0 4px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
        white-space: nowrap !important;
        font-size: .94rem !important;
    }

    .home-page,
    .tariffs-v2-page,
    .tariffs-clean-page,
    .coverage-page-v3,
    .video-page,
    .contacts-page,
    .news-page,
    .about-page,
    .cabinet-page,
    main.page {
        width: var(--page-shell-width) !important;
        max-width: var(--page-shell-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-page > *,
    .tariffs-clean-page > *,
    .coverage-page-v3 > *,
    .video-page > *,
    .about-page > *,
    .news-page > *,
    .cabinet-page > *,
    main.page > * {
        max-width: 100% !important;
    }

    .home-v2-hero,
    .tariffs-v2-hero,
    .coverage-hero-v3,
    .video-hero,
    .contacts-hero,
    .news-hero,
    .about-hero,
    .cabinet-hero,
    .coverage-check-v2,
    .cabinet-v2,
    .home-power-block,
    .video-live-grid,
    .video-install-box,
    .video-packages,
    .video-feature-row,
    .video-consult,
    .video-why,
    .video-cabinet,
    .feature-row,
    .contacts-grid,
    .contact-map-section,
    .about-stats,
    .about-main-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-v2-hero,
    .coverage-hero-v3,
    .video-hero,
    .contacts-hero,
    .about-hero {
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .hero-actions,
    .contact-actions,
    .coverage-result-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hero-actions .btn,
    .contact-actions .btn,
    .coverage-result-actions .btn,
    .btn.full {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .home-v2-hero h1,
    .coverage-hero-v3 h1,
    .video-hero h1,
    .contacts-hero h1,
    .about-hero h1 {
        max-width: 100% !important;
        font-size: clamp(2.25rem, 11vw, 3.4rem) !important;
        line-height: 1.04 !important;
        overflow-wrap: anywhere;
    }

    .video-hero,
    html[data-theme="dark"] .video-hero {
        min-height: auto !important;
        background:
            linear-gradient(180deg, rgba(7, 20, 18, .96) 0%, rgba(7, 20, 18, .78) 54%, rgba(7, 20, 18, .2) 100%),
            url("../img/video-surveillance-hero.png") 58% bottom / cover no-repeat !important;
    }

    .video-hero > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 24px 250px !important;
    }

    .video-feature-row,
    .feature-row,
    .why-v2-grid,
    .video-package-grid,
    .video-live-grid,
    .contacts-grid,
    .contact-map-section,
    .about-main-grid,
    .tariff-v2-grid,
    .tariffs-clean-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .video-feature-row article,
    .feature-row article {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 0 !important;
        padding: 18px !important;
    }

    .video-feature-row .home-icon,
    .feature-row .home-icon {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
    }

    .video-feature-row h3,
    .feature-row h3 {
        font-size: 1.12rem !important;
        line-height: 1.2 !important;
    }

    .video-feature-row p,
    .feature-row p {
        font-size: .96rem !important;
        line-height: 1.45 !important;
    }

    .video-package-card,
    .video-package-card.featured,
    html[data-theme="dark"] .video-package-card,
    html[data-theme="dark"] .video-package-card.featured {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 24px 20px !important;
        border-radius: 22px !important;
    }

    .camera-visual {
        height: 150px !important;
        margin-bottom: 18px !important;
    }

    .video-price,
    html[data-theme="dark"] .video-price {
        font-size: clamp(2.4rem, 13vw, 3.25rem) !important;
        line-height: 1 !important;
    }

    .video-package-card ul {
        min-height: 0 !important;
        margin-bottom: 22px !important;
    }

    .video-live-grid img {
        height: 220px !important;
    }

    .video-install-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 24px 20px !important;
    }

    .video-install-box h2,
    .video-consult h2,
    .section-title h2 {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 1.08 !important;
    }

    .video-consult {
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 26px 20px !important;
        overflow: hidden !important;
    }

    .video-consult form,
    .coverage-check-v2 form,
    .site-request-form,
    .coverage-real-form,
    .contacts-lead-form {
        grid-template-columns: 1fr !important;
    }

    .video-consult textarea,
    .site-request-form textarea,
    .contacts-lead-form textarea {
        min-height: 84px !important;
    }

    .video-map-card {
        min-height: 170px !important;
    }

    .footer-v2,
    .site-footer {
        width: var(--page-shell-width) !important;
        max-width: var(--page-shell-width) !important;
        overflow: hidden !important;
    }

    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .footer-brand-v2 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 901px) {
    .home-page,
    .video-page,
    .coverage-page-v3,
    .tariffs-clean-page,
    main.page,
    .about-page,
    .news-page,
    .cabinet-page {
        width: min(1760px, calc(100% - 72px)) !important;
    }

    .topbar,
    .site-footer.footer-v2 {
        width: min(1760px, calc(100% - 72px)) !important;
    }

    .home-page > *,
    .video-page > *,
    .coverage-page-v3 > *,
    .tariffs-clean-page > *,
    main.page > *,
    .about-page > *,
    .news-page > *,
    .cabinet-page > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 2026-04-30 final visual alignment and camera-photo cleanup */
:root {
    --site-shell-clean: min(1640px, calc(100% - 72px));
}

@media (min-width: 901px) {
    .topbar,
    .site-footer.footer-v2,
    .home-page,
    .video-page,
    .coverage-page-v3,
    .tariffs-clean-page,
    main.page,
    .about-page,
    .news-page,
    .cabinet-page {
        width: var(--site-shell-clean) !important;
        max-width: var(--site-shell-clean) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-page > *,
    .video-page > *,
    .coverage-page-v3 > *,
    .tariffs-clean-page > *,
    main.page > *,
    .about-page > *,
    .news-page > *,
    .cabinet-page > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contacts-hero,
    .contacts-grid,
    .contact-map-section {
        width: 100% !important;
    }
}

.video-page {
    --video-page-width: min(1640px, calc(100% - 72px)) !important;
}

.video-page > .video-hero,
.video-page > .video-feature-row,
.video-page > .video-live-grid,
.video-page > .video-packages,
.video-page > .video-install-box,
.video-page > .video-consult,
.video-page > .video-why,
.video-page > .video-cabinet {
    width: 100% !important;
    max-width: 100% !important;
}

.video-live-grid {
    gap: 26px !important;
}

.video-live-grid article {
    overflow: hidden;
}

.video-live-grid img {
    height: 270px !important;
    object-fit: cover !important;
    object-position: center !important;
}

.video-package-grid {
    gap: 28px !important;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 650px !important;
    padding: 24px 30px 30px !important;
    background: #fff !important;
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    background: linear-gradient(180deg, #f5fff7 0%, #fff 100%) !important;
}

.video-package-head {
    gap: 14px !important;
}

.camera-visual {
    width: 100% !important;
    height: 245px !important;
    margin: 0 0 22px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #f6fbf8 !important;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05) !important;
}

.video-package-card .btn,
.video-install-box .btn,
.video-consult .btn {
    min-height: 54px;
}

html[data-theme="dark"] .video-package-card h3,
html[data-theme="dark"] .video-package-card .video-price,
html[data-theme="dark"] .video-package-card p,
html[data-theme="dark"] .video-package-card li,
html[data-theme="dark"] .video-package-head span {
    color: #07142f !important;
}

@media (max-width: 1280px) {
    :root {
        --site-shell-clean: min(100% - 36px, 1640px);
    }

    .video-page {
        --video-page-width: min(100% - 36px, 1640px) !important;
    }

    .video-live-grid img {
        height: 240px !important;
    }

    .camera-visual {
        height: 220px !important;
    }
}

@media (max-width: 640px) {
    :root {
        --site-shell-clean: min(100% - 24px, 1640px);
    }

    .video-page {
        --video-page-width: min(100% - 24px, 1640px) !important;
    }

    .video-live-grid img {
        height: 230px !important;
    }

    .camera-visual {
        height: 180px !important;
        object-fit: cover !important;
    }
}

/* 2026-04-30 unified site polish: visual only, no markup or logic changes */
:root {
    --zas-shell: min(1540px, calc(100% - 72px));
    --zas-gap: 28px;
    --zas-radius-xl: 26px;
    --zas-radius-lg: 20px;
    --zas-radius-md: 14px;
    --zas-text: #07142f;
    --zas-muted: #53657a;
    --zas-line: rgba(15, 23, 42, .08);
    --zas-card-bg: rgba(255, 255, 255, .96);
    --zas-soft-bg: #eef8f2;
    --zas-green: #16a34a;
    --zas-green-bright: #5cf018;
    --zas-shadow-card: 0 20px 52px rgba(15, 23, 42, .08);
    --zas-shadow-soft: 0 16px 38px rgba(15, 23, 42, .06);
}

html,
body {
    overflow-x: hidden;
}

body {
    color: var(--zas-text);
}

body,
button,
input,
select,
textarea {
    letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--zas-text);
    line-height: 1.08;
    letter-spacing: 0;
}

p,
li,
label {
    color: var(--zas-muted);
    line-height: 1.62;
}

@media (min-width: 901px) {
    .topbar,
    .site-footer.footer-v2,
    .home-page,
    .video-page,
    .equipment-page,
    .coverage-page-v3,
    .tariffs-clean-page,
    .about-page,
    .news-page,
    .news-article-page,
    .cabinet-login-page,
    main.page {
        width: var(--zas-shell) !important;
        max-width: var(--zas-shell) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-page > *,
    .video-page > *,
    .equipment-page > *,
    .coverage-page-v3 > *,
    .tariffs-clean-page > *,
    .about-page > *,
    .news-page > *,
    .news-article-page > *,
    .cabinet-login-page > *,
    main.page > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.home-page > section + section,
.video-page > section + section,
.equipment-page > section + section,
.coverage-page-v3 > section + section,
.tariffs-clean-page > section + section,
.about-page > section + section,
.news-page > section + section,
.news-article-page > section + section,
main.page > section + section,
.contacts-grid + .contact-map-section {
    margin-top: var(--zas-gap) !important;
}

.home-v2-hero,
.video-hero,
.equipment-hero,
.coverage-hero-v3,
.tariffs-clean-panel,
.news-hero,
.about-hero,
.contacts-hero,
.cabinet-login-hero,
.content-page,
.news-article-card {
    border-radius: var(--zas-radius-xl) !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    box-shadow: var(--zas-shadow-soft) !important;
    overflow: hidden !important;
}

.section-title,
.video-packages .section-title,
.tariffs-clean-head,
.news-toolbar,
.about-section-title {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

.section-title h2,
.tariffs-clean-head h1,
.news-hero h1,
.about-hero h1,
.contacts-hero h1,
.coverage-hero-v3 h1,
.equipment-hero h1,
.video-hero h1,
.home-v2-copy h1 {
    font-size: clamp(2.35rem, 4.2vw, 4.85rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
}

.section-title p,
.tariffs-clean-head p,
.news-hero p,
.about-hero p,
.contacts-hero p,
.coverage-hero-v3 p,
.equipment-hero p,
.video-hero p,
.home-v2-copy p {
    max-width: 720px;
    color: #53657a !important;
}

.btn,
.top-order,
.request-trigger,
.site-request-form button,
.coverage-real-form button,
.contacts-lead-form button,
.video-package-card .btn,
.video-install-box .btn,
.video-consult .btn,
.tariff-v2-card .btn,
.tariff-card-v2 .btn,
.coverage-check-v2 button {
    min-height: 48px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 24px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.btn.primary,
.top-order,
.request-trigger,
.site-request-form button,
.coverage-real-form button,
.contacts-lead-form button,
.video-package-card.featured .btn,
.coverage-check-v2 button {
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0f9a35 0%, var(--zas-green-bright) 100%) !important;
    box-shadow: 0 16px 30px rgba(22, 163, 74, .24) !important;
}

.btn.light,
.btn.outline,
.video-package-card:not(.featured) .btn,
.tariff-v2-card .btn:not(.primary),
.tariff-card-v2 .btn:not(.primary) {
    color: var(--zas-text) !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: none !important;
}

.btn:hover,
.top-order:hover,
.request-trigger:hover,
.site-request-form button:hover,
.coverage-real-form button:hover,
.contacts-lead-form button:hover {
    transform: translateY(-1px);
}

.tariff-v2-card,
.tariff-card-v2,
.video-package-card,
.news-card-v2,
.contacts-card,
.coverage-result-card,
.coverage-villages-card,
.about-mission,
.about-why,
.documents-grid article,
.timeline-row article,
.video-live-grid article,
.feature-row article,
.why-v2-grid article,
.home-power-block,
.coverage-check-v2,
.contacts-card,
.contact-map-section,
.video-install-box,
.video-consult,
.equipment-category-card,
.equipment-product-card {
    border-radius: var(--zas-radius-lg) !important;
    border: 1px solid var(--zas-line) !important;
    background: var(--zas-card-bg) !important;
    box-shadow: var(--zas-shadow-card) !important;
}

.tariff-v2-grid,
.tariffs-clean-list,
.video-package-grid,
.news-card-grid,
.contacts-grid,
.why-v2-grid,
.feature-row,
.about-main-grid,
.documents-grid,
.timeline-row,
.video-live-grid,
.equipment-category-grid,
.equipment-products-grid {
    gap: 24px !important;
}

.video-package-card,
html[data-theme="dark"] .video-package-card {
    min-height: 430px !important;
    padding: 30px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
}

.video-package-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    background: linear-gradient(180deg, #f3fff6 0%, #fff 100%) !important;
    border-color: rgba(22, 163, 74, .42) !important;
}

.video-package-card ul {
    min-height: 0 !important;
    margin: 24px 0 28px !important;
}

.video-package-card .btn {
    margin-top: auto !important;
    width: 100% !important;
}

.camera-visual {
    display: none !important;
}

.video-live-grid img,
.news-card-v2 img,
.equipment-product-card img,
.equipment-category-card img {
    max-width: 100% !important;
    object-fit: cover !important;
}

input,
select,
textarea,
.form-control {
    min-height: 50px;
    border-radius: 13px !important;
    border: 1px solid rgba(15, 23, 42, .13) !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--zas-text) !important;
    box-shadow: none !important;
}

textarea {
    min-height: 112px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(22, 163, 74, .55) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .11) !important;
}

.contacts-hero,
.contacts-grid,
.contact-map-section {
    margin-left: auto !important;
    margin-right: auto !important;
}

.contacts-grid,
.contact-map-section {
    align-items: stretch !important;
}

.site-footer.footer-v2 {
    border-radius: var(--zas-radius-xl) var(--zas-radius-xl) 0 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    color: var(--zas-text) !important;
    box-shadow: var(--zas-shadow-soft) !important;
}

.footer-main {
    gap: 30px !important;
}

.footer-link,
.footer-contact-link,
.footer-bottom,
.footer-bottom p,
.footer-legal a {
    color: #4f6075 !important;
}

.footer-column h4,
.footer-brand-v2 b {
    color: var(--zas-text) !important;
}

html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-card-v2,
html[data-theme="dark"] .video-package-card,
html[data-theme="dark"] .news-card-v2,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .coverage-result-card,
html[data-theme="dark"] .coverage-villages-card,
html[data-theme="dark"] .about-mission,
html[data-theme="dark"] .about-why,
html[data-theme="dark"] .documents-grid article,
html[data-theme="dark"] .timeline-row article,
html[data-theme="dark"] .video-live-grid article,
html[data-theme="dark"] .feature-row article,
html[data-theme="dark"] .why-v2-grid article,
html[data-theme="dark"] .home-power-block,
html[data-theme="dark"] .coverage-check-v2,
html[data-theme="dark"] .contact-map-section,
html[data-theme="dark"] .video-install-box,
html[data-theme="dark"] .video-consult {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--zas-text) !important;
}

html[data-theme="dark"] .tariff-v2-card h3,
html[data-theme="dark"] .tariff-card-v2 h3,
html[data-theme="dark"] .video-package-card h3,
html[data-theme="dark"] .news-card-v2 h3,
html[data-theme="dark"] .contacts-card h3,
html[data-theme="dark"] .coverage-result-card h3,
html[data-theme="dark"] .coverage-villages-card h3,
html[data-theme="dark"] .about-mission h3,
html[data-theme="dark"] .about-why h3,
html[data-theme="dark"] .documents-grid h3,
html[data-theme="dark"] .timeline-row h3,
html[data-theme="dark"] .video-live-grid h3,
html[data-theme="dark"] .feature-row h3,
html[data-theme="dark"] .why-v2-grid h3,
html[data-theme="dark"] .video-install-box h2,
html[data-theme="dark"] .video-consult h2 {
    color: var(--zas-text) !important;
}

html[data-theme="dark"] .tariff-v2-card p,
html[data-theme="dark"] .tariff-card-v2 p,
html[data-theme="dark"] .video-package-card p,
html[data-theme="dark"] .video-package-card li,
html[data-theme="dark"] .news-card-v2 p,
html[data-theme="dark"] .contacts-card p,
html[data-theme="dark"] .coverage-result-card p,
html[data-theme="dark"] .coverage-villages-card p,
html[data-theme="dark"] .about-mission p,
html[data-theme="dark"] .about-why p,
html[data-theme="dark"] .documents-grid p,
html[data-theme="dark"] .timeline-row p,
html[data-theme="dark"] .video-live-grid p,
html[data-theme="dark"] .feature-row p,
html[data-theme="dark"] .why-v2-grid p {
    color: var(--zas-muted) !important;
}

@media (max-width: 1280px) {
    :root {
        --zas-shell: min(100% - 36px, 1540px);
        --zas-gap: 24px;
    }

    .section-title h2,
    .tariffs-clean-head h1,
    .news-hero h1,
    .about-hero h1,
    .contacts-hero h1,
    .coverage-hero-v3 h1,
    .equipment-hero h1,
    .video-hero h1,
    .home-v2-copy h1 {
        font-size: clamp(2.2rem, 5vw, 4rem) !important;
    }
}

@media (max-width: 900px) {
    :root {
        --zas-shell: min(100% - 24px, 1540px);
        --zas-gap: 22px;
    }

    .topbar,
    .site-footer.footer-v2,
    .home-page,
    .video-page,
    .equipment-page,
    .coverage-page-v3,
    .tariffs-clean-page,
    .about-page,
    .news-page,
    .news-article-page,
    .cabinet-login-page,
    main.page {
        width: var(--zas-shell) !important;
        max-width: var(--zas-shell) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-v2-hero,
    .video-hero,
    .equipment-hero,
    .coverage-hero-v3,
    .tariffs-clean-panel,
    .news-hero,
    .about-hero,
    .contacts-hero,
    .cabinet-login-hero {
        min-height: 0 !important;
        padding: 28px 24px !important;
    }

    .section-title h2,
    .tariffs-clean-head h1,
    .news-hero h1,
    .about-hero h1,
    .contacts-hero h1,
    .coverage-hero-v3 h1,
    .equipment-hero h1,
    .video-hero h1,
    .home-v2-copy h1 {
        font-size: clamp(2.05rem, 9vw, 3.15rem) !important;
        line-height: 1.04 !important;
        overflow-wrap: anywhere;
    }

    .tariff-v2-grid,
    .tariffs-clean-list,
    .video-package-grid,
    .news-card-grid,
    .contacts-grid,
    .why-v2-grid,
    .feature-row,
    .about-main-grid,
    .documents-grid,
    .timeline-row,
    .video-live-grid,
    .equipment-category-grid,
    .equipment-products-grid,
    .contact-map-section {
        grid-template-columns: 1fr !important;
    }

    .tariff-v2-card,
    .tariff-card-v2,
    .video-package-card,
    .news-card-v2,
    .contacts-card,
    .coverage-result-card,
    .coverage-villages-card,
    .about-mission,
    .about-why,
    .documents-grid article,
    .timeline-row article,
    .video-live-grid article,
    .feature-row article,
    .why-v2-grid article,
    .home-power-block,
    .coverage-check-v2,
    .contact-map-section,
    .video-install-box,
    .video-consult {
        padding: 22px !important;
    }

    .btn,
    .site-request-form button,
    .coverage-real-form button,
    .contacts-lead-form button,
    .video-package-card .btn,
    .coverage-check-v2 button {
        width: 100% !important;
        min-height: 52px !important;
    }

    .video-package-card {
        min-height: 0 !important;
    }
}

@media (max-width: 640px) {
    :root {
        --zas-shell: min(100% - 18px, 1540px);
        --zas-gap: 18px;
    }

    .home-v2-hero,
    .video-hero,
    .equipment-hero,
    .coverage-hero-v3,
    .tariffs-clean-panel,
    .news-hero,
    .about-hero,
    .contacts-hero,
    .cabinet-login-hero,
    .content-page,
    .news-article-card {
        border-radius: 20px !important;
    }

    .tariff-v2-card,
    .tariff-card-v2,
    .video-package-card,
    .news-card-v2,
    .contacts-card,
    .coverage-result-card,
    .coverage-villages-card,
    .about-mission,
    .about-why,
    .documents-grid article,
    .timeline-row article,
    .video-live-grid article,
    .feature-row article,
    .why-v2-grid article,
    .home-power-block,
    .coverage-check-v2,
    .contact-map-section,
    .video-install-box,
    .video-consult {
        border-radius: 18px !important;
        padding: 20px !important;
    }

    .section-title {
        margin-bottom: 18px !important;
    }
}

/* 2026-04-30 repair after unified polish: CTA readability and form layout */
.home-power-block {
    background:
        radial-gradient(circle at 78% 42%, rgba(92, 240, 24, .16), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f5fbf7 54%, #eef8f2 100%) !important;
    color: var(--zas-text) !important;
}

.home-power-block h2,
.home-power-block .section-label {
    color: var(--zas-text) !important;
}

.home-power-block p {
    color: var(--zas-muted) !important;
}

.home-power-block .btn.primary {
    width: fit-content !important;
    min-width: 210px !important;
}

.video-consult {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr) !important;
    align-items: center !important;
    padding: 36px 42px !important;
}

.video-consult h2 {
    color: var(--zas-text) !important;
    font-size: clamp(2rem, 3.1vw, 3rem) !important;
    line-height: 1.05 !important;
}

.video-consult p {
    color: var(--zas-muted) !important;
}

.video-consult form {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: start !important;
    max-width: 760px !important;
}

.video-consult form input {
    min-width: 0 !important;
    width: 100% !important;
}

.video-consult form textarea {
    grid-column: 1 / 4 !important;
    min-height: 76px !important;
    width: 100% !important;
}

.video-consult form button {
    grid-column: 4 / 5 !important;
    align-self: start !important;
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    margin: 0 !important;
}

.video-map-card {
    min-height: 210px !important;
    align-self: stretch !important;
}

.equipment-cta h2,
.equipment-cta p {
    color: #fff !important;
}

.equipment-cta form {
    align-items: start !important;
}

.equipment-cta .btn {
    height: 50px !important;
    min-height: 50px !important;
}

@media (max-width: 1180px) {
    .video-consult {
        grid-template-columns: 1fr !important;
    }

    .video-map-card {
        min-height: 190px !important;
    }
}

@media (max-width: 760px) {
    .home-power-block .btn.primary {
        width: 100% !important;
    }

    .video-consult {
        padding: 24px 20px !important;
    }

    .video-consult form {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    .video-consult form textarea,
    .video-consult form button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .video-consult form button {
        height: 54px !important;
    }
}

/* 2026-04-30 home tariff section polish */
.tariff-v2 {
    padding: 34px 34px 38px !important;
    border: 1px solid rgba(15, 23, 42, .06) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(92, 240, 24, .08), transparent 30%),
        rgba(255, 255, 255, .74) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .06) !important;
}

.tariff-v2 .section-title {
    margin-bottom: 18px !important;
}

.tariff-v2 .section-title h2 {
    font-size: clamp(2rem, 3vw, 3rem) !important;
    line-height: 1.05 !important;
}

.tariff-v2 .section-title p {
    margin: 8px auto 0 !important;
    font-size: 1rem !important;
}

.home-tariff-location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(920px, 100%);
    margin: 0 auto 24px;
    padding: 15px 18px;
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(240, 252, 244, .92));
    box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
}

.home-tariff-location div {
    display: grid;
    gap: 4px;
}

.home-tariff-location span {
    width: fit-content;
    padding: 5px 11px;
    border-radius: 999px;
    color: #0f8f39;
    background: rgba(34, 197, 94, .1);
    font-size: .78rem;
    font-weight: 900;
}

.home-tariff-location strong {
    color: var(--zas-text);
    font-size: 1.04rem;
    line-height: 1.2;
}

.home-tariff-location small {
    max-width: 360px;
    color: var(--zas-muted);
    font-size: .92rem;
    line-height: 1.45;
}

.tariff-v2-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 22px !important;
}

.tariff-v2-card,
html[data-theme="dark"] .tariff-v2-card {
    min-height: 430px !important;
    padding: 26px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    background: #fff !important;
    color: var(--zas-text) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07) !important;
    transform: none !important;
}

.tariff-v2-card.featured,
.tariff-v2-card.tier-popular,
html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-v2-card.tier-popular {
    border-color: rgba(22, 163, 74, .42) !important;
    background: linear-gradient(180deg, #f4fff7 0%, #fff 100%) !important;
    box-shadow: 0 22px 52px rgba(22, 163, 74, .12) !important;
}

.tariff-v2-card:hover {
    transform: translateY(-2px) !important;
}

.tariff-v2-head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
    gap: 14px !important;
    min-height: 74px !important;
    margin-top: 18px !important;
}

.tariff-v2-head h3,
html[data-theme="dark"] .tariff-v2-head h3 {
    margin: 0 0 8px !important;
    color: var(--zas-text) !important;
    font-size: clamp(1.35rem, 1.6vw, 1.7rem) !important;
    line-height: 1.1 !important;
}

.tariff-v2-head strong,
html[data-theme="dark"] .tariff-v2-head strong {
    display: block !important;
    color: #53657a !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}

.tariff-v2-card .home-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    background-color: #ecfdf3 !important;
    flex: 0 0 52px !important;
}

.tariff-v2-card .plan-chip {
    height: 32px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.tariff-v2-card.featured .plan-chip,
.tariff-v2-card.tier-popular .plan-chip {
    font-size: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #15943a, #69d91d) !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, .18) !important;
}

.tariff-v2-card.featured .plan-chip::after,
.tariff-v2-card.tier-popular .plan-chip::after {
    content: "Рекомендований";
    font-size: .78rem;
}

.tariff-v2-card ul {
    display: grid !important;
    gap: 9px !important;
    min-height: 94px !important;
    margin: 20px 0 22px !important;
    padding: 0 !important;
    list-style: none !important;
}

.tariff-v2-card li,
html[data-theme="dark"] .tariff-v2-card li {
    color: var(--zas-muted) !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
}

.tariff-v2-card li:first-child {
    min-height: 48px !important;
}

.tariff-v2-card .plan-price,
html[data-theme="dark"] .tariff-v2-card .plan-price {
    margin-top: auto !important;
    color: var(--zas-text) !important;
    font-size: clamp(2.25rem, 3.6vw, 3.4rem) !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
}

.tariff-v2-card .plan-price span,
html[data-theme="dark"] .tariff-v2-card .plan-price span {
    color: #53657a !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}

.tariff-v2-card .btn {
    width: 100% !important;
    min-height: 52px !important;
    margin-top: 22px !important;
    border-radius: 14px !important;
}

.tariff-v2-card .btn.light {
    border: 1px solid rgba(15, 23, 42, .13) !important;
    color: var(--zas-text) !important;
    background: #fff !important;
}

.tariff-v2-card.featured .btn.primary,
.tariff-v2-card.tier-popular .btn.primary {
    color: #fff !important;
    background: linear-gradient(135deg, #0f9a35, #5cf018) !important;
}

@media (max-width: 1100px) {
    .tariff-v2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .tariff-v2 {
        padding: 24px 18px 26px !important;
        border-radius: 22px !important;
    }

    .home-tariff-location {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 18px;
    }

    .home-tariff-location small {
        max-width: none;
    }

    .tariff-v2-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tariff-v2-card,
    html[data-theme="dark"] .tariff-v2-card {
        min-height: 0 !important;
        padding: 22px !important;
    }

    .tariff-v2-head {
        min-height: 0 !important;
    }
}

/* 2026-04-30 home city modal for tariff selector */
.home-tariff-location {
    position: relative;
}

.home-city-select-trigger {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(22, 163, 74, .28);
    border-radius: 13px;
    color: #0d8e35;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .05);
}

.home-city-select-trigger::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

.home-tariff-panel[hidden] {
    display: none !important;
}

.home-city-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.home-city-modal.is-open {
    display: flex;
}

.home-city-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 20, 47, .44);
    backdrop-filter: blur(8px);
}

.home-city-card {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(76vh, 720px);
    overflow: auto;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 24px;
    background:
        radial-gradient(circle at 86% 12%, rgba(92, 240, 24, .12), transparent 28%),
        #fff;
    box-shadow: 0 28px 80px rgba(7, 20, 47, .22);
}

.home-city-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 14px;
    color: var(--zas-text);
    background: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.home-city-card h3 {
    margin: 14px 52px 10px 0;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.home-city-card p {
    max-width: 560px;
    margin: 0 0 20px;
}

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

.home-city-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 16px;
    color: var(--zas-text);
    background: rgba(255, 255, 255, .88);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.home-city-list button:hover,
.home-city-list button.active {
    border-color: rgba(22, 163, 74, .42);
    background: #f0fff4;
    transform: translateY(-1px);
}

.home-city-list span {
    font-weight: 900;
}

.home-city-list small {
    flex: 0 0 auto;
    color: #0d8e35;
    font-size: .82rem;
    font-weight: 900;
}

.home-city-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .home-city-select-trigger {
        width: 100%;
        justify-content: center;
    }

    .home-city-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .home-city-card {
        max-height: 84vh;
        padding: 24px 18px 18px;
        border-radius: 22px;
    }

    .home-city-list {
        grid-template-columns: 1fr;
    }
}

/* 2026-04-30 dark theme repair for home tariffs */
html[data-theme="dark"] .tariff-v2 {
    background:
        radial-gradient(circle at 50% 0%, rgba(92, 240, 24, .12), transparent 30%),
        linear-gradient(135deg, rgba(19, 49, 38, .96), rgba(12, 34, 29, .96)) !important;
    border-color: rgba(222, 244, 229, .12) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .tariff-v2 .section-title h2,
html[data-theme="dark"] .tariff-v2 .section-title p {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .home-tariff-location {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .14) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .home-tariff-location span {
    color: #a7ff83 !important;
    background: rgba(92, 240, 24, .12) !important;
}

html[data-theme="dark"] .home-tariff-location strong {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .home-tariff-location small {
    color: rgba(247, 255, 249, .72) !important;
}

html[data-theme="dark"] .home-city-select-trigger {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(222, 244, 229, .18) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-v2-card.tier-popular {
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .07)) !important;
    border-color: rgba(222, 244, 229, .16) !important;
    color: #f7fff9 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-v2-card.tier-popular {
    border-color: rgba(92, 240, 24, .38) !important;
    background:
        radial-gradient(circle at 70% 0%, rgba(92, 240, 24, .12), transparent 34%),
        linear-gradient(180deg, rgba(31, 74, 48, .92), rgba(19, 49, 38, .88)) !important;
}

html[data-theme="dark"] .tariff-v2-head h3,
html[data-theme="dark"] .tariff-v2-card .plan-price {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariff-v2-head strong,
html[data-theme="dark"] .tariff-v2-card li,
html[data-theme="dark"] .tariff-v2-card .plan-price span {
    color: rgba(247, 255, 249, .72) !important;
}

html[data-theme="dark"] .tariff-v2-card .home-icon {
    background-color: rgba(92, 240, 24, .12) !important;
}

html[data-theme="dark"] .tariff-v2-card .btn.light {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(222, 244, 229, .16) !important;
}

html[data-theme="dark"] .home-city-card {
    background:
        radial-gradient(circle at 86% 12%, rgba(92, 240, 24, .16), transparent 28%),
        linear-gradient(135deg, #163329, #0c221d) !important;
    border-color: rgba(222, 244, 229, .16) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .home-city-card h3 {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .home-city-card p {
    color: rgba(247, 255, 249, .72) !important;
}

html[data-theme="dark"] .home-city-close {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(222, 244, 229, .16) !important;
}

html[data-theme="dark"] .home-city-list button {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .12) !important;
}

html[data-theme="dark"] .home-city-list button:hover,
html[data-theme="dark"] .home-city-list button.active {
    background: rgba(92, 240, 24, .14) !important;
    border-color: rgba(92, 240, 24, .38) !important;
}

html[data-theme="dark"] .home-city-list small {
    color: #a7ff83 !important;
}

/* 2026-04-30 global dark theme pass for all public pages */
html[data-theme="dark"] {
    --zas-text: #f7fff9;
    --zas-muted: rgba(247, 255, 249, .72);
    --zas-line: rgba(222, 244, 229, .14);
    --zas-card-bg: rgba(255, 255, 255, .08);
    color-scheme: dark;
}

html[data-theme="dark"] body {
    color: #f7fff9 !important;
    background:
        radial-gradient(circle at 50% -10%, rgba(92, 240, 24, .1), transparent 30%),
        linear-gradient(135deg, #305c4d 0%, #183f35 52%, #0e2b25 100%) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .about-section-title h2,
html[data-theme="dark"] .tariffs-clean-head h1 {
    color: #f7fff9 !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .section-title p,
html[data-theme="dark"] .about-section-title p,
html[data-theme="dark"] .tariffs-clean-head p {
    color: rgba(247, 255, 249, .72) !important;
}

html[data-theme="dark"] .topbar {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .16) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .nav a,
html[data-theme="dark"] .cabinet-link {
    color: rgba(247, 255, 249, .78) !important;
}

html[data-theme="dark"] .nav a.active,
html[data-theme="dark"] .nav a:hover {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .1) !important;
}

html[data-theme="dark"] .home-v2-hero,
html[data-theme="dark"] .equipment-hero,
html[data-theme="dark"] .coverage-hero-v3,
html[data-theme="dark"] .tariffs-clean-panel,
html[data-theme="dark"] .news-hero,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .contacts-hero,
html[data-theme="dark"] .cabinet-login-hero,
html[data-theme="dark"] .content-page,
html[data-theme="dark"] .news-article-card {
    background-color: rgba(7, 20, 18, .76) !important;
    border-color: rgba(222, 244, 229, .14) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .tariff-v2-card,
html[data-theme="dark"] .tariff-card-v2,
html[data-theme="dark"] .tariff-clean-card,
html[data-theme="dark"] .video-package-card,
html[data-theme="dark"] .news-card-v2,
html[data-theme="dark"] .contacts-card,
html[data-theme="dark"] .coverage-result-card,
html[data-theme="dark"] .coverage-villages-card,
html[data-theme="dark"] .about-mission,
html[data-theme="dark"] .about-why,
html[data-theme="dark"] .documents-grid article,
html[data-theme="dark"] .timeline-row article,
html[data-theme="dark"] .video-live-grid article,
html[data-theme="dark"] .feature-row article,
html[data-theme="dark"] .why-v2-grid article,
html[data-theme="dark"] .home-power-block,
html[data-theme="dark"] .coverage-check-v2,
html[data-theme="dark"] .contact-map-section,
html[data-theme="dark"] .video-install-box,
html[data-theme="dark"] .video-consult,
html[data-theme="dark"] .cabinet-v2,
html[data-theme="dark"] .about-stats article,
html[data-theme="dark"] .equipment-step-grid article,
html[data-theme="dark"] .equipment-benefit-grid article,
html[data-theme="dark"] .equipment-category-grid article,
html[data-theme="dark"] .equipment-product-grid article,
html[data-theme="dark"] .tariffs-connection-note,
html[data-theme="dark"] .tariff-clean-request,
html[data-theme="dark"] .contacts-form-card,
html[data-theme="dark"] .map-frame,
html[data-theme="dark"] .news-toolbar,
html[data-theme="dark"] .news-card-grid article {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .14) !important;
    color: #f7fff9 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .tariff-v2-card.featured,
html[data-theme="dark"] .tariff-v2-card.tier-popular,
html[data-theme="dark"] .tariff-card-v2.featured,
html[data-theme="dark"] .tariff-card-v2.tier-popular,
html[data-theme="dark"] .tariff-clean-card.featured,
html[data-theme="dark"] .video-package-card.featured {
    background:
        radial-gradient(circle at 78% 0%, rgba(92, 240, 24, .13), transparent 34%),
        rgba(255, 255, 255, .09) !important;
    border-color: rgba(92, 240, 24, .36) !important;
}

html[data-theme="dark"] .tariff-v2-card h3,
html[data-theme="dark"] .tariff-card-v2 h3,
html[data-theme="dark"] .tariff-clean-card h2,
html[data-theme="dark"] .video-package-card h3,
html[data-theme="dark"] .news-card-v2 h2,
html[data-theme="dark"] .contacts-card h3,
html[data-theme="dark"] .coverage-result-card h3,
html[data-theme="dark"] .coverage-villages-card h3,
html[data-theme="dark"] .about-mission h3,
html[data-theme="dark"] .about-why h3,
html[data-theme="dark"] .documents-grid h3,
html[data-theme="dark"] .timeline-row h3,
html[data-theme="dark"] .video-live-grid h3,
html[data-theme="dark"] .feature-row h3,
html[data-theme="dark"] .why-v2-grid h3,
html[data-theme="dark"] .video-install-box h2,
html[data-theme="dark"] .video-consult h2,
html[data-theme="dark"] .cabinet-v2 h2,
html[data-theme="dark"] .equipment-step-grid h3,
html[data-theme="dark"] .equipment-benefit-grid h3,
html[data-theme="dark"] .equipment-category-grid h3,
html[data-theme="dark"] .equipment-product-grid h3 {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariff-v2-card p,
html[data-theme="dark"] .tariff-v2-card li,
html[data-theme="dark"] .tariff-card-v2 p,
html[data-theme="dark"] .tariff-clean-card p,
html[data-theme="dark"] .video-package-card p,
html[data-theme="dark"] .video-package-card li,
html[data-theme="dark"] .news-card-v2 p,
html[data-theme="dark"] .news-card-v2 time,
html[data-theme="dark"] .contacts-card p,
html[data-theme="dark"] .coverage-result-card p,
html[data-theme="dark"] .coverage-villages-card p,
html[data-theme="dark"] .about-mission p,
html[data-theme="dark"] .about-why p,
html[data-theme="dark"] .documents-grid p,
html[data-theme="dark"] .timeline-row p,
html[data-theme="dark"] .video-live-grid p,
html[data-theme="dark"] .feature-row p,
html[data-theme="dark"] .why-v2-grid p,
html[data-theme="dark"] .cabinet-v2 p,
html[data-theme="dark"] .equipment-step-grid p,
html[data-theme="dark"] .equipment-benefit-grid p,
html[data-theme="dark"] .equipment-category-grid p,
html[data-theme="dark"] .equipment-product-grid li {
    color: rgba(247, 255, 249, .72) !important;
}

html[data-theme="dark"] .plan-price,
html[data-theme="dark"] .tariff-clean-price strong,
html[data-theme="dark"] .video-price,
html[data-theme="dark"] .tariff-speed-price strong,
html[data-theme="dark"] .coverage-result-meta strong {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .plan-price span,
html[data-theme="dark"] .tariff-clean-price span,
html[data-theme="dark"] .video-price span,
html[data-theme="dark"] .tariff-speed-price small,
html[data-theme="dark"] .coverage-result-meta small {
    color: rgba(247, 255, 249, .68) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(222, 244, 229, .16) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(247, 255, 249, .48) !important;
}

html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .btn.outline,
html[data-theme="dark"] .tariff-v2-card .btn.light,
html[data-theme="dark"] .tariff-card-v2 .btn:not(.primary),
html[data-theme="dark"] .tariff-clean-card .btn.outline,
html[data-theme="dark"] .video-package-card:not(.featured) .btn {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(222, 244, 229, .16) !important;
}

html[data-theme="dark"] .section-label,
html[data-theme="dark"] .plan-chip,
html[data-theme="dark"] .tariff-clean-badge,
html[data-theme="dark"] .coverage-village small,
html[data-theme="dark"] .tariffs-city-pills button {
    color: #a7ff83 !important;
    background: rgba(92, 240, 24, .12) !important;
    border-color: rgba(92, 240, 24, .22) !important;
}

html[data-theme="dark"] .site-footer.footer-v2 {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .14) !important;
    color: #f7fff9 !important;
}

html[data-theme="dark"] .footer-column h4,
html[data-theme="dark"] .footer-brand-v2 b {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .footer-link,
html[data-theme="dark"] .footer-contact-link,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-bottom p,
html[data-theme="dark"] .footer-legal a {
    color: rgba(247, 255, 249, .72) !important;
}

html[data-theme="dark"] .site-request-card,
html[data-theme="dark"] .site-announcement-card,
html[data-theme="dark"] .equipment-modal-card {
    background:
        radial-gradient(circle at 88% 10%, rgba(92, 240, 24, .12), transparent 28%),
        linear-gradient(135deg, #163329, #0c221d) !important;
    border-color: rgba(222, 244, 229, .16) !important;
    color: #f7fff9 !important;
}

html[data-theme="dark"] .site-request-card h2,
html[data-theme="dark"] .site-announcement-card h2,
html[data-theme="dark"] .equipment-modal-card h2 {
    color: #f7fff9 !important;
}

/* 2026-04-30: news toolbar contrast and layout cleanup */
.news-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) !important;
    align-items: center !important;
    gap: 22px !important;
    margin: 26px 0 24px !important;
    padding: 18px 20px !important;
    border: 1px solid rgba(15, 23, 42, .07) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .05) !important;
    text-align: left !important;
}

.news-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.news-filters button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    color: #314158 !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .1) !important;
    font-weight: 900 !important;
}

.news-filters button.active {
    color: #fff !important;
    background: linear-gradient(135deg, #16a34a, #57e51d) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px rgba(22, 163, 74, .2) !important;
}

.news-search {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.news-search input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 46px 0 16px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    background: #fff !important;
    color: #07142f !important;
    font-weight: 700 !important;
}

.news-search input::placeholder {
    color: #7a8798 !important;
    opacity: 1 !important;
}

.news-search span {
    border-color: #16a34a !important;
    opacity: .9 !important;
}

.news-search span::after {
    background: #16a34a !important;
}

html[data-theme="dark"] .news-toolbar {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .14) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] .news-filters button {
    color: rgba(247, 255, 249, .82) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .14) !important;
}

html[data-theme="dark"] .news-filters button.active {
    color: #fff !important;
    background: linear-gradient(135deg, #15943a, #69d91d) !important;
    border-color: rgba(92, 240, 24, .28) !important;
}

html[data-theme="dark"] .news-search input {
    color: #f7fff9 !important;
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(222, 244, 229, .16) !important;
}

html[data-theme="dark"] .news-search input::placeholder {
    color: rgba(247, 255, 249, .56) !important;
}

html[data-theme="dark"] .news-search span {
    border-color: #a7ff83 !important;
}

html[data-theme="dark"] .news-search span::after {
    background: #a7ff83 !important;
}

@media (max-width: 900px) {
    .news-toolbar {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }

    .news-search {
        order: -1 !important;
    }
}

@media (max-width: 640px) {
    .news-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .news-filters button {
        min-width: max-content !important;
    }
}

/* 2026-04-30: final dark readability pass */
html[data-theme="dark"] .hero-v2-stats article,
html[data-theme="dark"] .home-v2-hero .hero-v2-stats article {
    background: rgba(10, 31, 26, .82) !important;
    border-color: rgba(222, 244, 229, .18) !important;
    color: #f7fff9 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .hero-v2-stats strong,
html[data-theme="dark"] .hero-v2-stats small {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariffs-clean-selector,
html[data-theme="dark"] .tariffs-clean-selector label,
html[data-theme="dark"] .tariffs-clean-selector aside,
html[data-theme="dark"] .home-tariff-location {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(222, 244, 229, .18) !important;
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariffs-clean-selector span,
html[data-theme="dark"] .tariffs-clean-selector p,
html[data-theme="dark"] .tariffs-clean-selector strong,
html[data-theme="dark"] .home-tariff-location small,
html[data-theme="dark"] .home-tariff-location strong {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariffs-clean-selector select,
html[data-theme="dark"] .home-city-select-trigger {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(222, 244, 229, .22) !important;
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariffs-clean-selector aside span,
html[data-theme="dark"] .tariffs-clean-selector aside svg,
html[data-theme="dark"] .home-icon {
    color: #a7ff83 !important;
    stroke: #a7ff83 !important;
}

html[data-theme="dark"] .contact-map-section,
html[data-theme="dark"] .contact-map-panel,
html[data-theme="dark"] .contact-form-panel {
    background:
        radial-gradient(circle at 72% 0%, rgba(92, 240, 24, .1), transparent 32%),
        linear-gradient(135deg, rgba(18, 49, 39, .96), rgba(9, 30, 25, .96)) !important;
    border-color: rgba(222, 244, 229, .16) !important;
    color: #f7fff9 !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .contact-map-panel h2,
html[data-theme="dark"] .contact-form-panel h2,
html[data-theme="dark"] .contacts-lead-form p {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .contacts-lead-form input,
html[data-theme="dark"] .contacts-lead-form select,
html[data-theme="dark"] .contacts-lead-form textarea {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(222, 244, 229, .18) !important;
    color: #f7fff9 !important;
}

html[data-theme="dark"] .contacts-lead-form input::placeholder,
html[data-theme="dark"] .contacts-lead-form textarea::placeholder {
    color: rgba(247, 255, 249, .62) !important;
}

html[data-theme="dark"] .tariff-v2-card li,
html[data-theme="dark"] .tariff-v2-head strong,
html[data-theme="dark"] .tariff-v2-card .plan-price span {
    color: rgba(247, 255, 249, .86) !important;
}

/* Tariffs city selector hero refresh */
.tariffs-clean-page {
    width: min(2048px, calc(100% - 28px));
    margin-top: 22px;
}

.tariffs-clean-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 4vw, 66px) clamp(18px, 4vw, 72px);
    border: 1px solid rgba(15, 23, 42, .07);
    background:
        radial-gradient(circle at -6% -12%, rgba(28, 188, 73, .13), transparent 24%),
        radial-gradient(circle at 100% 64%, rgba(41, 217, 102, .16), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .08);
}

.tariffs-clean-head {
    position: relative;
    z-index: 1;
    max-width: 1540px;
    margin: 0 auto;
    text-align: center;
}

.tariffs-clean-head h1 {
    max-width: 1160px;
    margin: 0 auto 12px;
    font-size: clamp(40px, 3.8vw, 66px);
    line-height: 1.04;
    letter-spacing: 0;
}

.tariffs-clean-subtitle {
    max-width: 900px;
    margin: 0 auto 30px;
    color: #5d6677 !important;
    font-size: clamp(18px, 1.35vw, 28px);
    font-weight: 600;
    line-height: 1.35;
}

.tariffs-selector-card {
    position: relative;
    z-index: 2;
    width: min(100%, 1260px);
    margin: 0 auto;
    padding: clamp(20px, 2.2vw, 32px);
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
}

.tariffs-clean-controls {
    grid-template-columns: minmax(360px, 1fr) minmax(380px, .82fr);
    gap: clamp(22px, 2.6vw, 42px);
    align-items: stretch;
    max-width: none;
    margin: 0;
}

.tariffs-clean-controls label {
    text-align: left;
}

.tariffs-clean-controls label > span {
    padding-left: 2px;
}

.tariffs-clean-controls select {
    min-height: 68px;
    border-radius: 18px;
    padding-left: 72px;
    background:
        url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23169938' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.2 7-12a7 7 0 0 0-14 0c0 6.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") 24px 50% / 28px 28px no-repeat,
        #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.tariffs-clean-controls aside {
    min-height: 68px;
    border: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(30, 185, 75, .12), transparent 48%),
        linear-gradient(135deg, #f3f8f5, #edf3ef);
    text-align: left;
}

.tariffs-city-pills {
    margin: clamp(22px, 2.5vw, 30px) auto clamp(20px, 2.2vw, 28px);
    gap: clamp(10px, 1.3vw, 18px);
}

.tariffs-city-pills button {
    min-width: 142px;
    min-height: 58px;
    border-radius: 18px;
    padding: 0 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.tariffs-city-pills button.active {
    background: linear-gradient(135deg, #1ab443, #139139);
    box-shadow: 0 18px 34px rgba(22, 163, 74, .28);
}

.tariffs-summary-stack {
    display: grid;
}

.tariffs-summary-stack .tariffs-connection-note {
    width: 100%;
    margin: 0;
    padding: 16px 26px;
    display: grid;
    grid-template-columns: auto minmax(190px, .85fr) minmax(300px, 1fr) minmax(220px, .75fr);
    gap: 18px;
    align-items: center;
    border-radius: 18px;
    text-align: left;
}

.tariffs-summary-stack .tariffs-connection-note[hidden] {
    display: none !important;
}

.tariffs-summary-stack .tariffs-connection-note strong {
    font-size: clamp(20px, 1.35vw, 28px);
}

.tariffs-summary-stack .tariffs-connection-note p {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(16px, 1.05vw, 21px);
}

.tariffs-clean-stage {
    margin-top: clamp(36px, 4vw, 62px);
}

.tariffs-banner-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: .85;
}

.tariffs-banner-visual::before {
    content: "";
    position: absolute;
    left: -160px;
    top: -230px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 188, 80, .16), rgba(36, 188, 80, 0) 68%);
}

.tariffs-banner-visual span {
    position: absolute;
    right: clamp(34px, 7vw, 150px);
    top: auto;
    bottom: 70px;
    width: 96px;
    height: 82px;
    border-radius: 18px 18px 20px 20px;
    background: linear-gradient(135deg, #f7fff8, #dff6e6);
    box-shadow: 0 22px 54px rgba(22, 163, 74, .18);
    opacity: .58;
}

.tariffs-banner-visual span::before {
    content: "";
    position: absolute;
    left: 14px;
    top: -28px;
    width: 68px;
    height: 68px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(135deg, #25b84c, #8dfa42);
    transform: rotate(45deg);
    box-shadow: 0 14px 28px rgba(22, 163, 74, .18);
}

.tariffs-banner-visual span::after {
    content: "";
    position: absolute;
    left: 37px;
    bottom: 0;
    width: 23px;
    height: 36px;
    border-radius: 10px 10px 0 0;
    background: #ecfff0;
    box-shadow: -34px -36px 0 -22px #ecfff0, 34px -36px 0 -22px #ecfff0;
}

.tariffs-banner-visual i,
.tariffs-banner-visual i::before,
.tariffs-banner-visual i::after {
    position: absolute;
    display: block;
    border: 9px solid rgba(37, 216, 93, .45);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    content: "";
}

.tariffs-banner-visual i {
    right: clamp(64px, 8vw, 176px);
    top: auto;
    bottom: 180px;
    width: 106px;
    height: 106px;
    transform: rotate(-45deg);
    opacity: .24;
}

.tariffs-banner-visual i::before {
    right: 17px;
    top: 17px;
    width: 74px;
    height: 74px;
}

.tariffs-banner-visual i::after {
    right: 38px;
    top: 38px;
    width: 36px;
    height: 36px;
}

.tariffs-banner-visual b {
    position: absolute;
    right: -170px;
    bottom: 20px;
    width: 680px;
    height: 210px;
    border: 6px solid rgba(64, 222, 113, .16);
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-13deg);
    filter: blur(.2px);
}

html[data-theme="dark"] .tariffs-clean-panel {
    background:
        radial-gradient(circle at 10% 0%, rgba(74, 222, 128, .14), transparent 28%),
        radial-gradient(circle at 95% 62%, rgba(167, 255, 131, .13), transparent 24%),
        linear-gradient(135deg, rgba(18, 49, 39, .98), rgba(9, 30, 25, .98)) !important;
    color: #f7fff9;
}

html[data-theme="dark"] .tariffs-clean-head h1,
html[data-theme="dark"] .tariffs-clean-subtitle {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariffs-selector-card {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(222, 244, 229, .18);
}

html[data-theme="dark"] .tariffs-clean-controls label,
html[data-theme="dark"] .tariffs-city-pills button,
html[data-theme="dark"] .tariffs-summary-stack .tariffs-connection-note p,
html[data-theme="dark"] .tariffs-summary-stack .tariffs-connection-note b {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariffs-clean-controls select,
html[data-theme="dark"] .tariffs-city-pills button {
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(222, 244, 229, .18);
}

html[data-theme="dark"] .tariffs-clean-controls aside,
html[data-theme="dark"] .tariffs-summary-stack .tariffs-connection-note {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(222, 244, 229, .18);
}

@media (max-width: 900px) {
    .tariffs-clean-page {
        width: min(100% - 24px, 720px);
    }

    .tariffs-clean-panel {
        padding: 30px 14px 36px;
        border-radius: 24px;
    }

    .tariffs-clean-head h1 {
        font-size: clamp(36px, 11vw, 58px);
    }

    .tariffs-clean-subtitle {
        margin-bottom: 24px;
        font-size: 18px;
    }

    .tariffs-selector-card {
        padding: 18px;
        border-radius: 22px;
    }

    .tariffs-clean-controls {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tariffs-clean-controls select {
        min-height: 64px;
        padding-left: 58px;
        background-position: 18px 50%;
        font-size: 20px;
    }

    .tariffs-clean-controls aside {
        grid-template-columns: 38px 1fr;
        min-height: 64px;
        padding: 12px 14px;
    }

    .tariffs-city-pills {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        margin: 18px -4px 18px;
        scroll-snap-type: x mandatory;
    }

    .tariffs-city-pills button {
        flex: 0 0 auto;
        min-width: 150px;
        min-height: 56px;
        scroll-snap-align: start;
    }

    .tariffs-summary-stack .tariffs-connection-note {
        grid-template-columns: auto 1fr;
        gap: 12px 14px;
        padding: 16px;
    }

    .tariffs-summary-stack .tariffs-connection-note p {
        grid-column: 1 / -1;
        font-size: 17px;
    }

    .tariffs-banner-visual {
        opacity: .18;
    }

    .tariffs-banner-visual span {
        right: -18px;
        top: 138px;
        transform: scale(.72);
    }

    .tariffs-banner-visual i,
    .tariffs-banner-visual b {
        display: none;
    }
}

/* Tariffs city banner final cleanup */
.tariffs-clean-panel {
    padding: clamp(34px, 4vw, 62px) clamp(24px, 5vw, 86px) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(22, 163, 74, .08), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(126, 255, 31, .1), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%) !important;
}

.tariffs-banner-visual {
    display: none !important;
}

.tariffs-clean-head {
    width: 100% !important;
    max-width: 1500px !important;
}

.tariffs-clean-head h1 {
    max-width: 1080px !important;
    font-size: clamp(38px, 3.4vw, 58px) !important;
    line-height: 1.08 !important;
    margin-bottom: 10px !important;
}

.tariffs-clean-subtitle {
    max-width: 820px !important;
    margin-bottom: 28px !important;
    font-size: clamp(17px, 1.1vw, 22px) !important;
}

.tariffs-selector-card {
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    padding: clamp(22px, 2.3vw, 34px) !important;
    border-radius: 22px !important;
}

.tariffs-clean-controls {
    grid-template-columns: minmax(380px, 1fr) minmax(360px, .86fr) !important;
    gap: 30px !important;
}

.tariffs-clean-controls select {
    min-height: 64px !important;
    font-size: 20px !important;
}

.tariffs-clean-controls aside {
    min-height: 64px !important;
}

.tariffs-clean-controls aside p {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.tariffs-city-pills {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px !important;
    max-width: 720px;
    margin: 24px auto 24px !important;
}

.tariffs-city-pills button {
    width: 100%;
    min-width: 0 !important;
    min-height: 54px !important;
    justify-content: center;
    padding: 0 18px !important;
    font-size: 16px !important;
}

.tariffs-summary-stack .tariffs-connection-note {
    grid-template-columns: auto minmax(170px, .8fr) minmax(270px, 1fr) minmax(170px, .7fr) !important;
    min-height: 76px;
    padding: 14px 24px !important;
    border-radius: 16px !important;
}

.tariffs-summary-stack .tariffs-connection-note strong {
    font-size: 24px !important;
    white-space: nowrap;
}

.tariffs-summary-stack .tariffs-connection-note p {
    justify-content: center;
    font-size: 18px !important;
    line-height: 1.18 !important;
}

.tariffs-clean-stage {
    margin-top: 38px !important;
}

@media (max-width: 900px) {
    .tariffs-clean-panel {
        padding: 24px 14px 34px !important;
    }

    .tariffs-clean-head h1 {
        font-size: clamp(32px, 9vw, 44px) !important;
    }

    .tariffs-selector-card {
        width: 100% !important;
        padding: 16px !important;
    }

    .tariffs-clean-controls {
        grid-template-columns: 1fr !important;
    }

    .tariffs-city-pills {
        display: flex !important;
        max-width: none;
        gap: 10px !important;
    }

    .tariffs-city-pills button {
        width: auto;
        min-width: 136px !important;
    }

    .tariffs-summary-stack .tariffs-connection-note {
        grid-template-columns: auto 1fr !important;
    }

    .tariffs-summary-stack .tariffs-connection-note p {
        justify-content: flex-start;
    }
}

/* Tariffs bottom request card cleanup */
.tariff-clean-request {
    grid-template-columns: minmax(340px, .46fr) minmax(0, 1fr) !important;
    gap: clamp(28px, 4vw, 52px) !important;
    align-items: stretch !important;
    padding: clamp(24px, 2.7vw, 34px) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(22, 163, 74, .06), transparent 34%),
        #ffffff !important;
}

.tariff-request-intro {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-content: center;
}

.tariff-request-intro > span {
    width: 72px !important;
    height: 72px !important;
    background: #eef8f1 !important;
}

.tariff-request-intro svg {
    width: 38px !important;
    height: 38px !important;
    stroke: #07142f !important;
}

.tariff-request-intro h2 {
    max-width: 420px;
    font-size: clamp(24px, 1.8vw, 32px) !important;
    line-height: 1.12 !important;
}

.tariff-request-intro p {
    max-width: 500px;
    font-size: clamp(16px, 1vw, 18px) !important;
    line-height: 1.5 !important;
}

.tariff-clean-request form {
    border-left: 1px solid rgba(15, 23, 42, .1) !important;
    padding-left: clamp(28px, 3vw, 42px) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    align-items: end !important;
}

.tariff-clean-request label {
    min-width: 0;
    gap: 9px !important;
    color: #172033 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.tariff-clean-request input {
    width: 100%;
    min-width: 0;
    min-height: 58px !important;
    border-radius: 14px !important;
    border-color: rgba(15, 23, 42, .13) !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.tariff-clean-request input::placeholder {
    color: rgba(23, 32, 51, .56);
}

.tariff-clean-request label:nth-of-type(5) {
    grid-column: span 3;
}

.tariff-clean-request .btn {
    width: 100%;
    min-height: 58px !important;
    border-radius: 14px !important;
    padding: 0 22px !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    box-shadow: 0 14px 30px rgba(22, 163, 74, .24);
}

html[data-theme="dark"] .tariff-clean-request {
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(222, 244, 229, .14) !important;
}

html[data-theme="dark"] .tariff-request-intro h2,
html[data-theme="dark"] .tariff-clean-request label {
    color: #f7fff9 !important;
}

html[data-theme="dark"] .tariff-request-intro p {
    color: rgba(247, 255, 249, .76) !important;
}

@media (max-width: 1180px) {
    .tariff-clean-request {
        grid-template-columns: 1fr !important;
    }

    .tariff-clean-request form {
        border-left: 0 !important;
        border-top: 1px solid rgba(15, 23, 42, .1) !important;
        padding-left: 0 !important;
        padding-top: 24px !important;
    }
}

@media (max-width: 760px) {
    .tariff-clean-request {
        padding: 20px !important;
    }

    .tariff-request-intro {
        grid-template-columns: 58px 1fr !important;
        gap: 16px !important;
    }

    .tariff-request-intro > span {
        width: 58px !important;
        height: 58px !important;
    }

    .tariff-request-intro h2 {
        font-size: 24px !important;
    }

    .tariff-clean-request form {
        grid-template-columns: 1fr !important;
    }

    .tariff-clean-request label:nth-of-type(5) {
        grid-column: auto;
    }
}
/* ==========================================================
   ZasNet 01 — Clean Typography from Site Structure
   ТІЛЬКИ ШРИФТИ / ТИПОГРАФІКА.
   Старі font-патчі не підключати.
   Підключати після основного public/assets/css/site.css.
   Не змінює кольори, фони, розміри блоків, переходи, PHP або HTML.
   ========================================================== */

:root {
  --zas-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* База */
html,
body {
  font-family: var(--zas-font-ui) !important;
  font-weight: 400 !important;
  letter-spacing: -0.006em !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body,
button,
input,
textarea,
select {
  font-family: var(--zas-font-ui) !important;
}

/* Меню і верхні кнопки */
.brand-text,
.main-nav a,
.top-actions .btn,
.theme-toggle,
.top-order {
  font-family: var(--zas-font-ui) !important;
}

.brand-text {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.brand small {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

.main-nav a {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.006em !important;
  line-height: 1 !important;
}

.top-actions .btn,
.theme-toggle,
.top-order {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.006em !important;
}

/* Hero / великі заголовки */
.section-title h2,
.tariffs-clean-head h1,
.news-hero h1,
.about-hero h1,
.contacts-hero h1,
.coverage-hero-v3 h1,
.equipment-hero h1,
.video-hero h1,
.home-v2-copy h1 {
  font-family: var(--zas-font-ui) !important;
  font-size: clamp(2.45rem, 4.1vw, 4.45rem) !important;
  line-height: 1.04 !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
}

/* Головна: заголовок великий, але не “кам’яний” */
.home-v2-copy h1 {
  font-size: clamp(2.7rem, 4.45vw, 4.9rem) !important;
  line-height: 1.02 !important;
  font-weight: 780 !important;
  letter-spacing: -0.04em !important;
}

/* Підзаголовки hero */
.section-title p,
.tariffs-clean-head p,
.news-hero p,
.about-hero p,
.contacts-hero p,
.coverage-hero-v3 p,
.equipment-hero p,
.video-hero p,
.home-v2-copy p {
  font-family: var(--zas-font-ui) !important;
  font-size: clamp(.98rem, .9vw, 1.08rem) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  letter-spacing: -0.006em !important;
}

/* Заголовки секцій */
.home-power-block h2,
.cabinet-v2 h2,
.video-packages .section-title h2,
.equipment-steps h2,
.equipment-benefits h2,
.equipment-categories h2,
.equipment-products h2,
.about-section-title h2,
.why-section h2,
.tariffs-clean-head h1 {
  font-family: var(--zas-font-ui) !important;
  font-weight: 760 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.08 !important;
}

/* Заголовки карток */
.feature-row article h3,
.why-v2-grid article h3,
.tariff-v2-card h3,
.tariff-card-v2 h3,
.video-package-card h3,
.news-card-v2 h3,
.contacts-card h3,
.about-mission h3,
.about-why h3,
.documents-grid article h3,
.timeline-row article h3,
.video-live-grid article h3,
.equipment-step-grid h3,
.equipment-benefit-grid h3,
.equipment-category-grid h3,
.equipment-product-grid h3 {
  font-family: var(--zas-font-ui) !important;
  font-size: clamp(1.08rem, 1.12vw, 1.45rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Основний текст у картках */
.feature-row article p,
.why-v2-grid article p,
.tariff-v2-card p,
.tariff-card-v2 p,
.video-package-card p,
.news-card-v2 p,
.contacts-card p,
.about-mission p,
.about-why p,
.documents-grid article p,
.timeline-row article p,
.video-live-grid article p,
.equipment-step-grid p,
.equipment-benefit-grid p,
.equipment-category-grid p,
.equipment-product-grid p,
.home-power-block p,
.cabinet-v2 p,
.coverage-check-v2 p,
.video-install-box p,
.video-consult p {
  font-family: var(--zas-font-ui) !important;
  font-size: clamp(.94rem, .9vw, 1rem) !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  letter-spacing: -0.004em !important;
}

/* Кнопки */
.btn,
.top-order,
.request-trigger,
.site-request-form button,
.coverage-real-form button,
.contacts-lead-form button,
.video-package-card .btn,
.video-install-box .btn,
.video-consult .btn,
.tariff-v2-card .btn,
.tariff-card-v2 .btn,
.coverage-check-v2 button {
  font-family: var(--zas-font-ui) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: -0.006em !important;
  line-height: 1.1 !important;
}

/* Ціни і великі цифри */
.tariff-v2-card .price,
.tariff-card-v2 .price,
.video-package-card .price,
.equipment-product-bottom strong,
.stat-value,
.hero-v2-stats strong {
  font-family: var(--zas-font-ui) !important;
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;
  line-height: 1 !important;
}

/* Бейджі, дати, маленькі підписи */
.plan-chip,
.news-date,
.news-card-v2 time,
.badge,
.tag,
.label,
.footer-note,
.hero-v2-stats p,
.equipment-badges strong {
  font-family: var(--zas-font-ui) !important;
  font-size: .82rem !important;
  line-height: 1.28 !important;
  font-weight: 650 !important;
  letter-spacing: -0.004em !important;
}

/* Форми */
input,
textarea,
select {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.004em !important;
}

input::placeholder,
textarea::placeholder {
  font-weight: 400 !important;
}

/* Footer */
.site-footer,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer span {
  font-family: var(--zas-font-ui) !important;
  font-size: 13.5px !important;
  line-height: 1.52 !important;
  font-weight: 400 !important;
  letter-spacing: -0.002em !important;
}

.site-footer h4,
.footer-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.006em !important;
}

/* Без дивних переносів у великих заголовках */
.section-title h2,
.tariffs-clean-head h1,
.news-hero h1,
.about-hero h1,
.contacts-hero h1,
.coverage-hero-v3 h1,
.equipment-hero h1,
.video-hero h1,
.home-v2-copy h1 {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .section-title h2,
  .tariffs-clean-head h1,
  .news-hero h1,
  .about-hero h1,
  .contacts-hero h1,
  .coverage-hero-v3 h1,
  .equipment-hero h1,
  .video-hero h1,
  .home-v2-copy h1 {
    font-size: clamp(2.15rem, 7vw, 3.55rem) !important;
    font-weight: 760 !important;
    line-height: 1.06 !important;
  }

  .main-nav a {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
}

/* Mobile */
@media (max-width: 720px) {
  html,
  body {
    font-size: 15px !important;
  }

  .section-title h2,
  .tariffs-clean-head h1,
  .news-hero h1,
  .about-hero h1,
  .contacts-hero h1,
  .coverage-hero-v3 h1,
  .equipment-hero h1,
  .video-hero h1,
  .home-v2-copy h1 {
    font-size: clamp(2rem, 9vw, 3.1rem) !important;
    line-height: 1.08 !important;
    font-weight: 740 !important;
    letter-spacing: -0.032em !important;
    overflow-wrap: normal !important;
  }

  .section-title p,
  .tariffs-clean-head p,
  .news-hero p,
  .about-hero p,
  .contacts-hero p,
  .coverage-hero-v3 p,
  .equipment-hero p,
  .video-hero p,
  .home-v2-copy p,
  .feature-row article p,
  .why-v2-grid article p,
  .tariff-v2-card p,
  .tariff-card-v2 p,
  .video-package-card p,
  .news-card-v2 p,
  .contacts-card p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .feature-row article h3,
  .why-v2-grid article h3,
  .tariff-v2-card h3,
  .tariff-card-v2 h3,
  .video-package-card h3,
  .news-card-v2 h3,
  .contacts-card h3,
  .equipment-step-grid h3,
  .equipment-benefit-grid h3,
  .equipment-category-grid h3,
  .equipment-product-grid h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
  }
}
/* ==========================================================
   ZasNet Block 02 — Home Hero Banner
   ТІЛЬКИ головний банер на головній сторінці.
   Не чіпає шапку, тарифи, футер, PHP/HTML/JS і логіку.
   Можна вставити в самий кінець public/assets/css/site.css
   або підключити окремим файлом після site.css.
   ========================================================== */

/* ---------- Hero wrapper ---------- */
.home-v2-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  min-height: clamp(430px, 42vw, 620px) !important;
  margin-top: 22px !important;
  border-radius: 30px !important;

  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .14) !important;

  background:
    linear-gradient(
      90deg,
      rgba(244, 250, 247, .98) 0%,
      rgba(244, 250, 247, .94) 32%,
      rgba(244, 250, 247, .58) 55%,
      rgba(244, 250, 247, .16) 78%,
      rgba(244, 250, 247, .06) 100%
    ),
    url("../img/hero-family-zasnet.png") center right / cover no-repeat !important;
}

/* М’який блиск зверху */
.home-v2-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.54), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 38%) !important;
}

/* Декоративна нижня тінь, щоб банер не був плоский */
.home-v2-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 36% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(0deg, rgba(255,255,255,.24), transparent) !important;
}

/* ---------- Текстова частина ---------- */
.home-v2-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 560px !important;
  padding: clamp(44px, 4.5vw, 72px) clamp(34px, 4vw, 64px) 150px !important;
}

.home-v2-copy h1 {
  max-width: 560px !important;
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(46px, 5.15vw, 86px) !important;
  line-height: 1.01 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;

  text-shadow: none !important;
}

.home-v2-copy p {
  max-width: 500px !important;
  margin: 22px 0 0 !important;

  color: #3d4d63 !important;
  -webkit-text-fill-color: #3d4d63 !important;

  font-size: clamp(15px, 1vw, 18px) !important;
  line-height: 1.62 !important;
  font-weight: 560 !important;
  letter-spacing: -0.006em !important;
}

/* ---------- Кнопки в банері ---------- */
.home-v2-copy .hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 28px !important;
}

.home-v2-copy .hero-actions .btn,
.home-v2-hero .btn {
  min-height: 48px !important;
  min-width: 190px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease !important;
}

/* Основна зелена кнопка */
.home-v2-copy .hero-actions .btn.primary,
.home-v2-copy .hero-actions .btn.green,
.home-v2-hero .btn.primary,
.home-v2-hero .btn.green {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid rgba(255,255,255,.26) !important;
  background: linear-gradient(135deg, #15bd56 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 14px 30px rgba(25, 210, 105, .24) !important;
}

/* Друга кнопка */
.home-v2-copy .hero-actions .btn.secondary,
.home-v2-copy .hero-actions .btn.light,
.home-v2-hero .btn.secondary,
.home-v2-hero .btn.light {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 22px rgba(15, 23, 42, .08) !important;
}

.home-v2-copy .hero-actions .btn:hover,
.home-v2-hero .btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
}

/* ---------- Нижні міні-картки в банері ---------- */
.home-v2-hero .hero-v2-stats,
.hero-v2-stats {
  position: absolute !important;
  z-index: 3 !important;
  left: clamp(26px, 3.6vw, 56px) !important;
  right: auto !important;
  bottom: clamp(22px, 2.4vw, 36px) !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(124px, 1fr)) !important;
  gap: 14px !important;

  width: min(760px, calc(100% - 80px)) !important;
}

.hero-v2-stats article {
  min-height: 70px !important;
  padding: 12px 14px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .10) !important;
  backdrop-filter: blur(14px) !important;
}

.hero-v2-stats .home-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(34, 197, 94, .11) !important;
  color: #20b857 !important;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.16) !important;
}

.hero-v2-stats strong {
  display: block !important;
  color: #1c2637 !important;
  -webkit-text-fill-color: #1c2637 !important;
  font-size: 14px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.018em !important;
}

.hero-v2-stats small {
  display: block !important;
  margin-top: 3px !important;
  color: #516176 !important;
  -webkit-text-fill-color: #516176 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
}

/* ==========================================================
   Темна тема
   ========================================================== */
html[data-theme="dark"] .home-v2-hero {
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 78px rgba(0,0,0,.34) !important;

  background:
    linear-gradient(
      90deg,
      rgba(35, 58, 50, .88) 0%,
      rgba(29, 49, 43, .76) 32%,
      rgba(17, 30, 27, .42) 58%,
      rgba(8, 15, 14, .24) 80%,
      rgba(5, 10, 10, .18) 100%
    ),
    url("../img/hero-family-zasnet.png") center right / cover no-repeat !important;
}

html[data-theme="dark"] .home-v2-hero::before {
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 44%) !important;
}

html[data-theme="dark"] .home-v2-hero::after {
  background: linear-gradient(0deg, rgba(0,0,0,.16), transparent) !important;
}

html[data-theme="dark"] .home-v2-copy h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .home-v2-copy p {
  color: rgba(240, 250, 245, .82) !important;
  -webkit-text-fill-color: rgba(240, 250, 245, .82) !important;
}

html[data-theme="dark"] .home-v2-copy .hero-actions .btn.primary,
html[data-theme="dark"] .home-v2-copy .hero-actions .btn.green,
html[data-theme="dark"] .home-v2-hero .btn.primary,
html[data-theme="dark"] .home-v2-hero .btn.green {
  background: linear-gradient(135deg, #17c964 0%, #1bd48b 50%, #40f026 125%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 16px 34px rgba(24, 216, 128, .20) !important;
}

html[data-theme="dark"] .home-v2-copy .hero-actions .btn.secondary,
html[data-theme="dark"] .home-v2-copy .hero-actions .btn.light,
html[data-theme="dark"] .home-v2-hero .btn.secondary,
html[data-theme="dark"] .home-v2-hero .btn.light {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 26px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .hero-v2-stats article {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(8, 23, 21, .74) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .hero-v2-stats .home-icon {
  background: rgba(34,197,94,.16) !important;
  color: #66f07f !important;
  box-shadow: inset 0 0 0 1px rgba(102,240,127,.18) !important;
}

html[data-theme="dark"] .hero-v2-stats strong {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .hero-v2-stats small {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}

/* ==========================================================
   Адаптація
   ========================================================== */
@media (max-width: 1100px) {
  .home-v2-hero {
    min-height: 500px !important;
  }

  .home-v2-copy {
    max-width: 520px !important;
    padding: 42px 38px 148px !important;
  }

  .home-v2-copy h1 {
    font-size: clamp(42px, 7vw, 68px) !important;
  }

  .home-v2-hero .hero-v2-stats,
  .hero-v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(520px, calc(100% - 64px)) !important;
  }
}

@media (max-width: 720px) {
  .home-v2-hero {
    min-height: 640px !important;
    margin-top: 16px !important;
    border-radius: 22px !important;

    background:
      linear-gradient(
        180deg,
        rgba(244,250,247,.98) 0%,
        rgba(244,250,247,.96) 34%,
        rgba(244,250,247,.74) 58%,
        rgba(244,250,247,.30) 100%
      ),
      url("../img/hero-family-zasnet.png") center bottom / cover no-repeat !important;
  }

  html[data-theme="dark"] .home-v2-hero {
    background:
      linear-gradient(
        180deg,
        rgba(35,58,50,.92) 0%,
        rgba(29,49,43,.88) 38%,
        rgba(17,30,27,.70) 64%,
        rgba(8,15,14,.42) 100%
      ),
      url("../img/hero-family-zasnet.png") center bottom / cover no-repeat !important;
  }

  .home-v2-copy {
    max-width: 100% !important;
    padding: 30px 22px 210px !important;
  }

  .home-v2-copy h1 {
    font-size: clamp(36px, 11vw, 50px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }

  .home-v2-copy p {
    max-width: 94% !important;
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.52 !important;
  }

  .home-v2-copy .hero-actions {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .home-v2-copy .hero-actions .btn,
  .home-v2-hero .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  .home-v2-hero .hero-v2-stats,
  .hero-v2-stats {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    width: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .hero-v2-stats article {
    min-height: 62px !important;
    padding: 10px !important;
    gap: 9px !important;
    border-radius: 14px !important;
  }

  .hero-v2-stats .home-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
  }

  .hero-v2-stats strong {
    font-size: 12.5px !important;
  }

  .hero-v2-stats small {
    font-size: 11px !important;
  }
}
/* ==========================================================
   ZasNet 02.1 — Home Hero Typography Fix
   ТІЛЬКИ шрифт/розміри тексту в головному банері.
   Підключати або вставити В КІНЕЦЬ site.css після:
   - font patch
   - hero banner patch
   ========================================================== */

/* М’якший системний шрифт саме для hero */
.home-v2-hero,
.home-v2-hero * {
  font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Робимо текстовий блок ширшим, щоб ZasNet для не розривалось */
.home-v2-copy {
  max-width: 640px !important;
  padding-left: clamp(38px, 4.2vw, 72px) !important;
  padding-right: 24px !important;
}

/* Головний заголовок — сучасний, але не такий грубий */
.home-v2-copy h1 {
  max-width: 640px !important;

  font-size: clamp(42px, 4.45vw, 76px) !important;
  line-height: 1.04 !important;
  font-weight: 740 !important;
  letter-spacing: -0.038em !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
  text-wrap: balance !important;
  word-spacing: -0.025em !important;
}

/* Підзаголовок */
.home-v2-copy p {
  max-width: 520px !important;
  margin-top: 20px !important;

  font-size: clamp(15px, .95vw, 17px) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  letter-spacing: -0.004em !important;

  color: #3b4a60 !important;
  -webkit-text-fill-color: #3b4a60 !important;
}

/* Кнопки — текст не жирний, але читабельний */
.home-v2-copy .hero-actions .btn,
.home-v2-hero .btn {
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: -0.004em !important;
}

/* Нижні маленькі картки */
.hero-v2-stats strong {
  font-size: 13.5px !important;
  line-height: 1.12 !important;
  font-weight: 720 !important;
  letter-spacing: -0.012em !important;
}

.hero-v2-stats small {
  font-size: 11.5px !important;
  line-height: 1.18 !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
}

/* Темна тема */
html[data-theme="dark"] .home-v2-copy h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] .home-v2-copy p {
  color: rgba(240, 250, 245, .82) !important;
  -webkit-text-fill-color: rgba(240, 250, 245, .82) !important;
}

/* Якщо екран не дуже широкий — не давимо великим шрифтом */
@media (max-width: 1280px) {
  .home-v2-copy {
    max-width: 600px !important;
  }

  .home-v2-copy h1 {
    max-width: 600px !important;
    font-size: clamp(40px, 4.25vw, 68px) !important;
    font-weight: 735 !important;
  }
}

/* Планшет */
@media (max-width: 1100px) {
  .home-v2-copy {
    max-width: 560px !important;
  }

  .home-v2-copy h1 {
    max-width: 560px !important;
    font-size: clamp(38px, 6.2vw, 58px) !important;
    line-height: 1.06 !important;
    font-weight: 730 !important;
  }
}

/* Мобільна */
@media (max-width: 720px) {
  .home-v2-copy {
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .home-v2-copy h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    font-weight: 720 !important;
    letter-spacing: -0.03em !important;
    word-spacing: -0.01em !important;
  }

  .home-v2-copy p {
    max-width: 96% !important;
    font-size: 15px !important;
    line-height: 1.52 !important;
  }
}
/* ==========================================================
   ZasNet Block 03 — Home Feature Cards
   ТІЛЬКИ 4 картки під головним банером.
   Не чіпає hero, шапку, тарифи, футер, PHP/HTML/JS.
   Вставити в кінець site.css або підключити після попередніх патчів.
   ========================================================== */

/* ---------- Ряд карток ---------- */
.feature-row {
  margin-top: 28px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

/* ---------- Картка ---------- */
.feature-row article {
  position: relative !important;
  overflow: hidden !important;

  min-height: 128px !important;
  padding: 26px 26px !important;
  border-radius: 22px !important;

  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  gap: 18px !important;
  align-items: start !important;

  border: 1px solid rgba(15, 23, 42, .08) !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(34, 197, 94, .10), transparent 34%),
    rgba(255,255,255,.92) !important;

  box-shadow:
    0 18px 38px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.78) !important;

  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background .20s ease !important;
}

/* м’який декоративний круг */
.feature-row article::after {
  content: "" !important;
  position: absolute !important;
  right: -34px !important;
  top: -34px !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.10), transparent 65%) !important;
  pointer-events: none !important;
}

/* Hover */
.feature-row article:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34, 197, 94, .22) !important;
  box-shadow:
    0 22px 46px rgba(15, 23, 42, .11),
    0 0 0 1px rgba(34,197,94,.04),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

/* ---------- Іконка ---------- */
.feature-row article .home-icon,
.feature-row article .feature-icon,
.feature-row article i,
.feature-row article svg {
  position: relative !important;
  z-index: 2 !important;
}

.feature-row article .home-icon,
.feature-row article .feature-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 17px !important;
  color: #16a34a !important;
  background:
    linear-gradient(180deg, rgba(34,197,94,.13), rgba(34,197,94,.07)) !important;
  border: 1px solid rgba(34,197,94,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 10px 22px rgba(34,197,94,.10) !important;
}

.feature-row article .home-icon svg,
.feature-row article .feature-icon svg,
.feature-row article svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2 !important;
}

/* ---------- Текст ---------- */
.feature-row article h3 {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 9px !important;
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(19px, 1.35vw, 24px) !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
  letter-spacing: -0.022em !important;
}

.feature-row article p {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 !important;
  color: #4b5b70 !important;
  -webkit-text-fill-color: #4b5b70 !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 450 !important;
  letter-spacing: -0.004em !important;
}

/* ---------- Темна тема ---------- */
html[data-theme="dark"] .feature-row article {
  border-color: rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(34, 197, 94, .12), transparent 34%),
    rgba(8, 22, 22, .78) !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .feature-row article:hover {
  border-color: rgba(102,240,127,.22) !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,.28),
    0 0 0 1px rgba(102,240,127,.05),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .feature-row article::after {
  background: radial-gradient(circle, rgba(102,240,127,.10), transparent 65%) !important;
}

html[data-theme="dark"] .feature-row article .home-icon,
html[data-theme="dark"] .feature-row article .feature-icon {
  color: #66f07f !important;
  background:
    linear-gradient(180deg, rgba(34,197,94,.18), rgba(34,197,94,.08)) !important;
  border-color: rgba(102,240,127,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(34,197,94,.08) !important;
}

html[data-theme="dark"] .feature-row article h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .feature-row article p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .feature-row article {
    min-height: 120px !important;
    padding: 22px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .feature-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  .feature-row article {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 18px !important;
    grid-template-columns: 48px 1fr !important;
    gap: 14px !important;
  }

  .feature-row article .home-icon,
  .feature-row article .feature-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
  }

  .feature-row article h3 {
    font-size: 19px !important;
    margin-bottom: 6px !important;
  }

  .feature-row article p {
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }
}
/* ==========================================================
   ZasNet Block 04 SAFE — Home tariffs only
   ВАЖЛИВО:
   Старий zasnet_04_home_tariffs_patch.css видалити.
   Цей патч максимально обмежений тільки тарифами на головній:
   .home-v2 > .tariff-v2
   Не чіпає сторінку /tariffs і .tariffs-clean-page.
   ========================================================== */

/* Захист: не застосовувати на окремій сторінці тарифів */
.tariffs-clean-page .tariff-v2,
.tariffs-page .tariff-v2,
body.tariffs .tariff-v2 {
  all: revert-layer;
}

/* ---------- Секція тарифів тільки на головній ---------- */
.home-v2 > .tariff-v2 {
  position: relative !important;
  overflow: hidden !important;

  margin-top: 34px !important;
  padding: 42px 34px !important;
  border-radius: 28px !important;

  border: 1px solid rgba(15, 23, 42, .08) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.075), transparent 38%),
    rgba(255,255,255,.92) !important;

  box-shadow:
    0 20px 46px rgba(15, 23, 42, .09),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* Темна тема */
html[data-theme="dark"] .home-v2 > .tariff-v2 {
  border-color: rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.08), transparent 38%),
    rgba(8, 22, 22, .72) !important;

  box-shadow:
    0 22px 52px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ---------- Заголовок тарифів ---------- */
.home-v2 > .tariff-v2 > .section-title {
  max-width: 760px !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
}

.home-v2 > .tariff-v2 > .section-title h2 {
  margin: 0 !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.08 !important;
  font-weight: 760 !important;
  letter-spacing: -0.032em !important;
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
}

.home-v2 > .tariff-v2 > .section-title p {
  max-width: 560px !important;
  margin: 10px auto 0 !important;
  font-size: 15px !important;
  line-height: 1.52 !important;
  font-weight: 450 !important;
  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .section-title h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .section-title p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

/* ---------- Маленький блок вибору населеного пункту тільки в цій секції ---------- */
.home-v2 > .tariff-v2 > .tariffs-selector-card {
  width: min(100%, 720px) !important;
  margin: 0 auto 28px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;

  border: 1px solid rgba(34,197,94,.16) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow:
    0 12px 24px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card {
  border-color: rgba(102,240,127,.14) !important;
  background: rgba(8,23,21,.66) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Сітка всередині selector */
.home-v2 > .tariff-v2 > .tariffs-selector-card .tariffs-clean-controls {
  display: grid !important;
  grid-template-columns: 1fr auto 1.25fr !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Лейбл */
.home-v2 > .tariff-v2 > .tariffs-selector-card label {
  margin: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

.home-v2 > .tariff-v2 > .tariffs-selector-card label > span {
  display: inline-flex !important;
  width: max-content !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(34,197,94,.10) !important;
  color: #15943a !important;
  -webkit-text-fill-color: #15943a !important;
  font-size: 12.5px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

.home-v2 > .tariff-v2 > .tariffs-selector-card label strong,
.home-v2 > .tariff-v2 > .tariffs-selector-card label b,
.home-v2 > .tariff-v2 > .tariffs-selector-card .selected-city {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
  font-size: 17px !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card label strong,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card label b,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card .selected-city {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

/* Select тільки всередині selector-card */
.home-v2 > .tariff-v2 > .tariffs-selector-card select {
  min-height: 44px !important;
  min-width: 185px !important;
  padding: 0 42px 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(34,197,94,.20) !important;

  appearance: none !important;
  color: #138337 !important;
  -webkit-text-fill-color: #138337 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2315943a' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") calc(100% - 15px) center / 17px 17px no-repeat,
    rgba(255,255,255,.90) !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card select {
  color: #66f07f !important;
  -webkit-text-fill-color: #66f07f !important;
  border-color: rgba(102,240,127,.18) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2366f07f' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") calc(100% - 15px) center / 17px 17px no-repeat,
    rgba(255,255,255,.06) !important;
}

/* Пояснювальний текст */
.home-v2 > .tariff-v2 > .tariffs-selector-card aside,
.home-v2 > .tariff-v2 > .tariffs-selector-card p {
  margin: 0 !important;
  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 450 !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card aside,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariffs-selector-card p {
  color: rgba(240,250,245,.72) !important;
  -webkit-text-fill-color: rgba(240,250,245,.72) !important;
}

/* ---------- Картки тарифів тільки прямої сітки головної ---------- */
.home-v2 > .tariff-v2 > .tariff-v2-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 26px !important;
}

.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 350px !important;
  padding: 28px !important;
  border-radius: 22px !important;

  border: 1px solid rgba(15, 23, 42, .09) !important;
  background:
    radial-gradient(circle at 96% 12%, rgba(34,197,94,.08), transparent 26%),
    #ffffff !important;

  box-shadow:
    0 16px 34px rgba(15, 23, 42, .075),
    inset 0 1px 0 rgba(255,255,255,.80) !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34,197,94,.22) !important;
  box-shadow:
    0 22px 44px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card.featured,
.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card.is-featured {
  transform: translateY(-4px) !important;
  border-color: rgba(34,197,94,.42) !important;
  background:
    radial-gradient(circle at 96% 12%, rgba(34,197,94,.15), transparent 28%),
    linear-gradient(180deg, #ffffff, #f5fff8) !important;
  box-shadow:
    0 24px 48px rgba(34,197,94,.14),
    0 0 0 1px rgba(34,197,94,.05),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card {
  border-color: rgba(255,255,255,.10) !important;
  background:
    radial-gradient(circle at 96% 12%, rgba(34,197,94,.10), transparent 26%),
    rgba(7,20,20,.78) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card.featured,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card.is-featured {
  border-color: rgba(102,240,127,.26) !important;
  background:
    radial-gradient(circle at 96% 12%, rgba(102,240,127,.12), transparent 28%),
    rgba(9,28,23,.82) !important;
  box-shadow:
    0 22px 44px rgba(0,0,0,.28),
    0 0 0 1px rgba(102,240,127,.05),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Текст і ціни */
.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card h3 {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
  font-size: 23px !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -0.026em !important;
}

.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card p,
.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card li {
  color: #4b5b70 !important;
  -webkit-text-fill-color: #4b5b70 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 450 !important;
}

.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card .price,
.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card .tariff-price,
.home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card .plan-price {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
  font-size: clamp(46px, 3.6vw, 60px) !important;
  line-height: .96 !important;
  font-weight: 760 !important;
  letter-spacing: -0.045em !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card h3,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card .price,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card .tariff-price,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card .plan-price {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card p,
html[data-theme="dark"] .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card li {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

/* Адаптив */
@media (max-width: 1100px) {
  .home-v2 > .tariff-v2 > .tariff-v2-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card,
  .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card.featured,
  .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card.is-featured {
    min-height: auto !important;
    transform: none !important;
  }

  .home-v2 > .tariff-v2 > .tariffs-selector-card .tariffs-clean-controls {
    grid-template-columns: 1fr !important;
  }

  .home-v2 > .tariff-v2 > .tariffs-selector-card select {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .home-v2 > .tariff-v2 {
    padding: 28px 16px !important;
    border-radius: 22px !important;
  }

  .home-v2 > .tariff-v2 > .section-title h2 {
    font-size: 32px !important;
  }

  .home-v2 > .tariff-v2 > .tariff-v2-grid > .tariff-v2-card {
    padding: 24px !important;
    border-radius: 18px !important;
  }
}
/* ==========================================================
   ZasNet Block 05 — Home Power / Internet без світла
   ТІЛЬКИ блок "Інтернет працює навіть без світла" на головній.
   Без зміни HTML/PHP/JS. Не чіпає інші сторінки.
   Вставляти в самий кінець site.css після попередніх блоків.
   ========================================================== */

/* ---------- Основний блок ---------- */
.home-v2 > .home-power-block {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: var(--page-shell-width) !important;
  margin: 28px auto !important;
  padding: clamp(34px, 4vw, 58px) clamp(32px, 4.5vw, 68px) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
  align-items: center !important;
  gap: clamp(26px, 4vw, 54px) !important;

  min-height: 300px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 78% 48%, rgba(70, 240, 36, .20), transparent 31%),
    radial-gradient(circle at 96% 12%, rgba(20, 214, 163, .10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fbf8 48%, #eef8f1 100%) !important;

  box-shadow:
    0 22px 54px rgba(15, 23, 42, .09),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  color: #071427 !important;
}

/* Декоративне світіння справа */
.home-v2 > .home-power-block::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: -90px !important;
  top: -120px !important;
  width: 440px !important;
  height: 440px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(70,240,36,.20), rgba(70,240,36,.08) 34%, transparent 68%) !important;
}

/* Легка нижня підсвітка */
.home-v2 > .home-power-block::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 40% !important;
  pointer-events: none !important;
  background: linear-gradient(0deg, rgba(255,255,255,.22), transparent) !important;
}

/* Увесь контент поверх декору */
.home-v2 > .home-power-block > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ---------- Ліва текстова частина ---------- */
.home-v2 > .home-power-block .section-label,
.home-v2 > .home-power-block .soft-label,
.home-v2 > .home-power-block > div:first-child > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;

  margin-bottom: 16px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(34, 197, 94, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 20px rgba(15,23,42,.05) !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: -0.006em !important;
}

.home-v2 > .home-power-block h2 {
  max-width: 690px !important;
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(34px, 3.6vw, 58px) !important;
  line-height: 1.08 !important;
  font-weight: 760 !important;
  letter-spacing: -0.036em !important;
}

.home-v2 > .home-power-block p {
  max-width: 640px !important;
  margin: 20px 0 0 !important;

  color: #47576e !important;
  -webkit-text-fill-color: #47576e !important;

  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;
  letter-spacing: -0.004em !important;
}

/* ---------- Кнопка ---------- */
.home-v2 > .home-power-block .btn,
.home-v2 > .home-power-block .btn.primary,
.home-v2 > .home-power-block a.btn {
  width: fit-content !important;
  min-width: 210px !important;
  min-height: 50px !important;
  margin-top: 28px !important;
  padding: 0 26px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.26) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;

  background: linear-gradient(135deg, #15bd56 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 14px 30px rgba(25,210,105,.22) !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.home-v2 > .home-power-block .btn:hover,
.home-v2 > .home-power-block .btn.primary:hover,
.home-v2 > .home-power-block a.btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 18px 36px rgba(25,210,105,.28) !important;
}

/* ---------- Права картинка ---------- */
.home-v2 > .home-power-block .home-power-visual {
  position: relative !important;
  min-height: clamp(220px, 22vw, 310px) !important;
  border-radius: 26px !important;

  background:
    radial-gradient(circle at 58% 54%, rgba(74, 222, 128, .34), transparent 33%),
    radial-gradient(circle at 72% 44%, rgba(183,255,98,.20), transparent 38%),
    url("../img/equipment/cuzor-mini-ups-lite.png") 78% 52% / clamp(155px, 14vw, 225px) auto no-repeat,
    url("../img/equipment/tp-link-archer-c6-cutout.png") 30% 57% / clamp(210px, 22vw, 340px) auto no-repeat !important;

  filter: drop-shadow(0 22px 28px rgba(15,23,42,.14)) !important;
}

/* Тонка декоративна дуга позаду обладнання */
.home-v2 > .home-power-block .home-power-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 15% 5% 8% 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34,197,94,.18) !important;
  transform: rotate(-8deg) !important;
  pointer-events: none !important;
}

.home-v2 > .home-power-block .home-power-visual::after {
  content: "" !important;
  position: absolute !important;
  right: 11% !important;
  top: 24% !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: #49ee3a !important;
  box-shadow:
    0 0 0 8px rgba(73,238,58,.10),
    0 0 28px rgba(73,238,58,.42) !important;
}

/* ==========================================================
   Темна тема
   ========================================================== */
html[data-theme="dark"] .home-v2 > .home-power-block {
  border-color: rgba(255,255,255,.11) !important;

  background:
    radial-gradient(circle at 78% 48%, rgba(70, 240, 36, .16), transparent 31%),
    radial-gradient(circle at 96% 12%, rgba(20, 214, 163, .08), transparent 30%),
    linear-gradient(135deg, rgba(23, 57, 47, .92) 0%, rgba(20, 52, 44, .90) 48%, rgba(12, 31, 29, .94) 100%) !important;

  box-shadow:
    0 24px 58px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07) !important;

  color: #f7fff9 !important;
}

html[data-theme="dark"] .home-v2 > .home-power-block::before {
  background: radial-gradient(circle, rgba(70,240,36,.18), rgba(70,240,36,.08) 34%, transparent 68%) !important;
}

html[data-theme="dark"] .home-v2 > .home-power-block::after {
  background: linear-gradient(0deg, rgba(0,0,0,.12), transparent) !important;
}

html[data-theme="dark"] .home-v2 > .home-power-block .section-label,
html[data-theme="dark"] .home-v2 > .home-power-block .soft-label,
html[data-theme="dark"] .home-v2 > .home-power-block > div:first-child > span:first-child {
  color: #eaffef !important;
  -webkit-text-fill-color: #eaffef !important;

  background: rgba(34,197,94,.18) !important;
  border-color: rgba(102,240,127,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 20px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .home-v2 > .home-power-block h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .home-v2 > .home-power-block p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}

html[data-theme="dark"] .home-v2 > .home-power-block .home-power-visual {
  background:
    radial-gradient(circle at 58% 54%, rgba(74, 222, 128, .26), transparent 33%),
    radial-gradient(circle at 72% 44%, rgba(183,255,98,.15), transparent 38%),
    url("../img/equipment/cuzor-mini-ups-lite.png") 78% 52% / clamp(155px, 14vw, 225px) auto no-repeat,
    url("../img/equipment/tp-link-archer-c6-cutout.png") 30% 57% / clamp(210px, 22vw, 340px) auto no-repeat !important;

  filter: drop-shadow(0 24px 30px rgba(0,0,0,.22)) !important;
}

/* ==========================================================
   Адаптив
   ========================================================== */
@media (max-width: 1100px) {
  .home-v2 > .home-power-block {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 36px 30px !important;
  }

  .home-v2 > .home-power-block .home-power-visual {
    min-height: 230px !important;
    order: 2 !important;
  }
}

@media (max-width: 640px) {
  .home-v2 > .home-power-block {
    margin: 22px auto !important;
    padding: 28px 20px !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }

  .home-v2 > .home-power-block h2 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.1 !important;
  }

  .home-v2 > .home-power-block p {
    margin-top: 14px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .home-v2 > .home-power-block .btn,
  .home-v2 > .home-power-block .btn.primary,
  .home-v2 > .home-power-block a.btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin-top: 22px !important;
  }

  .home-v2 > .home-power-block .home-power-visual {
    min-height: 210px !important;
    background:
      radial-gradient(circle at 58% 54%, rgba(74, 222, 128, .30), transparent 33%),
      url("../img/equipment/cuzor-mini-ups-lite.png") 80% 54% / 140px auto no-repeat,
      url("../img/equipment/tp-link-archer-c6-cutout.png") 25% 58% / 210px auto no-repeat !important;
  }

  html[data-theme="dark"] .home-v2 > .home-power-block .home-power-visual {
    background:
      radial-gradient(circle at 58% 54%, rgba(74, 222, 128, .22), transparent 33%),
      url("../img/equipment/cuzor-mini-ups-lite.png") 80% 54% / 140px auto no-repeat,
      url("../img/equipment/tp-link-archer-c6-cutout.png") 25% 58% / 210px auto no-repeat !important;
  }
}
/* ==========================================================
   ZasNet Block 05.1 — Home Power Width Fix
   Фікс тільки ширини блока "Інтернет працює навіть без світла".
   Підключати / вставити ПІСЛЯ zasnet_05_home_power_block_patch.css
   ========================================================== */

/* Робимо блок такої ж ширини, як інші секції головної */
.home-v2 > .home-power-block {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Якщо блок лежить всередині загального контейнера — займає всю його ширину */
.home-v2 .home-power-block {
  width: 100% !important;
  max-width: none !important;
}

/* На всякий випадок прибираємо старе обмеження через змінну */
.home-v2 > .home-power-block,
.home-v2 > section.home-power-block,
.home-v2 section.home-power-block {
  width: 100% !important;
}

/* Вирівнюємо з сусідніми секціями по відступах */
.home-v2 > .home-power-block {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

/* Трохи ширше внутрішнє наповнення, щоб блок виглядав як банер */
@media (min-width: 900px) {
  .home-v2 > .home-power-block {
    padding-left: clamp(38px, 4.8vw, 78px) !important;
    padding-right: clamp(38px, 4.8vw, 78px) !important;
  }
}

/* Мобільна */
@media (max-width: 640px) {
  .home-v2 > .home-power-block {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ==========================================================
   ZasNet Block 06 — Home Coverage Check
   ТІЛЬКИ блок "Перевірте покриття у вашому будинку" на головній.
   Не чіпає інші сторінки, шапку, банер, тарифи, футер, PHP/HTML/JS.
   Вставляти в самий кінець site.css після попередніх блоків.
   ========================================================== */

/* ---------- Основний блок ---------- */
.home-v2 > .coverage-check-v2 {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: 100% !important;
  max-width: none !important;
  margin: 28px 0 !important;
  padding: clamp(30px, 3.5vw, 46px) clamp(30px, 4vw, 56px) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 58px) !important;

  min-height: 230px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 82% 44%, rgba(34, 197, 94, .16), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f9fcfa 52%, #edf8f1 100%) !important;

  box-shadow:
    0 20px 48px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* М’яке світіння */
.home-v2 > .coverage-check-v2::before {
  content: "" !important;
  position: absolute !important;
  right: -110px !important;
  top: -110px !important;
  z-index: 0 !important;

  width: 360px !important;
  height: 360px !important;
  border-radius: 999px !important;

  background: radial-gradient(circle, rgba(34,197,94,.14), transparent 68%) !important;
  pointer-events: none !important;
}

/* Контент поверх фону */
.home-v2 > .coverage-check-v2 > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ---------- Ліва частина ---------- */
.home-v2 > .coverage-check-v2 h2 {
  max-width: 720px !important;
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(32px, 3.2vw, 50px) !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
  letter-spacing: -0.034em !important;
}

.home-v2 > .coverage-check-v2 p {
  max-width: 650px !important;
  margin: 12px 0 0 !important;

  color: #4b5b70 !important;
  -webkit-text-fill-color: #4b5b70 !important;

  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 450 !important;
  letter-spacing: -0.004em !important;
}

/* ---------- Форма ---------- */
.home-v2 > .coverage-check-v2 form,
.home-v2 > .coverage-check-v2 .coverage-form,
.home-v2 > .coverage-check-v2 .coverage-real-form {
  width: min(100%, 760px) !important;
  margin-top: 24px !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 14px !important;
  align-items: center !important;
}

.home-v2 > .coverage-check-v2 input,
.home-v2 > .coverage-check-v2 select,
.home-v2 > .coverage-check-v2 textarea {
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 18px !important;

  border-radius: 15px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  background: rgba(255,255,255,.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 8px 18px rgba(15,23,42,.035) !important;

  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  letter-spacing: -0.004em !important;

  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.home-v2 > .coverage-check-v2 input::placeholder,
.home-v2 > .coverage-check-v2 textarea::placeholder {
  color: rgba(42, 55, 75, .62) !important;
  -webkit-text-fill-color: rgba(42, 55, 75, .62) !important;
}

.home-v2 > .coverage-check-v2 input:focus,
.home-v2 > .coverage-check-v2 select:focus,
.home-v2 > .coverage-check-v2 textarea:focus {
  border-color: rgba(34,197,94,.46) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow:
    0 0 0 4px rgba(34,197,94,.12),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* Кнопка */
.home-v2 > .coverage-check-v2 button,
.home-v2 > .coverage-check-v2 .btn,
.home-v2 > .coverage-check-v2 input[type="submit"] {
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.26) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background: linear-gradient(135deg, #15bd56 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 14px 30px rgba(25,210,105,.22) !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;

  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.home-v2 > .coverage-check-v2 button:hover,
.home-v2 > .coverage-check-v2 .btn:hover,
.home-v2 > .coverage-check-v2 input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 18px 36px rgba(25,210,105,.28) !important;
}

/* Якщо кнопка йде після поля "Будинок" — красиво в другому рядку */
.home-v2 > .coverage-check-v2 form button,
.home-v2 > .coverage-check-v2 .coverage-form button,
.home-v2 > .coverage-check-v2 .coverage-real-form button {
  grid-column: span 1 !important;
}

/* ---------- Права карта / візуал ---------- */
.home-v2 > .coverage-check-v2 .coverage-map,
.home-v2 > .coverage-check-v2 .coverage-map-art,
.home-v2 > .coverage-check-v2 .coverage-visual,
.home-v2 > .coverage-check-v2 > div:last-child {
  position: relative !important;
  overflow: hidden !important;

  min-height: 210px !important;
  border-radius: 26px !important;

  background:
    linear-gradient(rgba(34,197,94,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,.055) 1px, transparent 1px),
    radial-gradient(circle at 58% 50%, rgba(34,197,94,.26), transparent 32%),
    linear-gradient(135deg, rgba(237, 252, 244, .90), rgba(206, 247, 220, .72)) !important;
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 16px 32px rgba(15, 23, 42, .06) !important;

  transform: rotate(-4deg) !important;
}

/* Прибираємо перекручування внутрішніх svg/img, якщо вони є */
.home-v2 > .coverage-check-v2 .coverage-map > *,
.home-v2 > .coverage-check-v2 .coverage-map-art > *,
.home-v2 > .coverage-check-v2 .coverage-visual > *,
.home-v2 > .coverage-check-v2 > div:last-child > * {
  transform: rotate(4deg) !important;
}

/* центральний pin — якщо в HTML немає окремої іконки, створюємо CSS-іконку */
.home-v2 > .coverage-check-v2 .coverage-map::before,
.home-v2 > .coverage-check-v2 .coverage-map-art::before,
.home-v2 > .coverage-check-v2 .coverage-visual::before,
.home-v2 > .coverage-check-v2 > div:last-child::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  left: 58% !important;
  top: 50% !important;

  width: 70px !important;
  height: 70px !important;
  border-radius: 50% 50% 50% 10px !important;

  background: linear-gradient(135deg, #2abf45, #42e029) !important;
  transform: translate(-50%, -55%) rotate(-45deg) !important;

  box-shadow:
    0 18px 34px rgba(34,197,94,.24),
    0 0 0 12px rgba(34,197,94,.08) !important;
}

/* біла точка всередині pin */
.home-v2 > .coverage-check-v2 .coverage-map::after,
.home-v2 > .coverage-check-v2 .coverage-map-art::after,
.home-v2 > .coverage-check-v2 .coverage-visual::after,
.home-v2 > .coverage-check-v2 > div:last-child::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  left: 58% !important;
  top: 50% !important;

  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.86) !important;
  transform: translate(-50%, -64%) !important;
}

/* маленькі точки на карті */
.home-v2 > .coverage-check-v2 .coverage-map .map-dot,
.home-v2 > .coverage-check-v2 .coverage-map-art .map-dot,
.home-v2 > .coverage-check-v2 .coverage-visual .map-dot {
  position: absolute !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 999px !important;
  background: #2abf45 !important;
  box-shadow: 0 0 0 10px rgba(34,197,94,.12) !important;
}

/* ==========================================================
   Темна тема
   ========================================================== */
html[data-theme="dark"] .home-v2 > .coverage-check-v2 {
  border-color: rgba(255,255,255,.11) !important;

  background:
    radial-gradient(circle at 82% 44%, rgba(34, 197, 94, .12), transparent 35%),
    linear-gradient(135deg, rgba(31, 64, 55, .92) 0%, rgba(24, 54, 47, .90) 50%, rgba(12, 31, 29, .94) 100%) !important;

  box-shadow:
    0 24px 58px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .home-v2 > .coverage-check-v2 h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .home-v2 > .coverage-check-v2 p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}

html[data-theme="dark"] .home-v2 > .coverage-check-v2 input,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 select,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 textarea {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.10) !important;
}

html[data-theme="dark"] .home-v2 > .coverage-check-v2 input::placeholder,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 textarea::placeholder {
  color: rgba(240,250,245,.58) !important;
  -webkit-text-fill-color: rgba(240,250,245,.58) !important;
}

html[data-theme="dark"] .home-v2 > .coverage-check-v2 input:focus,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 select:focus,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 textarea:focus {
  border-color: rgba(102,240,127,.34) !important;
  background: rgba(255,255,255,.11) !important;
  box-shadow:
    0 0 0 4px rgba(102,240,127,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .home-v2 > .coverage-check-v2 .coverage-map,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 .coverage-map-art,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 .coverage-visual,
html[data-theme="dark"] .home-v2 > .coverage-check-v2 > div:last-child {
  background:
    linear-gradient(rgba(102,240,127,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,240,127,.055) 1px, transparent 1px),
    radial-gradient(circle at 58% 50%, rgba(34,197,94,.18), transparent 32%),
    linear-gradient(135deg, rgba(7, 24, 18, .92), rgba(11, 48, 28, .72)) !important;
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 32px rgba(0,0,0,.16) !important;
}

/* ==========================================================
   Адаптив
   ========================================================== */
@media (max-width: 1100px) {
  .home-v2 > .coverage-check-v2 {
    grid-template-columns: 1fr !important;
    padding: 34px 30px !important;
  }

  .home-v2 > .coverage-check-v2 .coverage-map,
  .home-v2 > .coverage-check-v2 .coverage-map-art,
  .home-v2 > .coverage-check-v2 .coverage-visual,
  .home-v2 > .coverage-check-v2 > div:last-child {
    min-height: 190px !important;
    transform: rotate(-2deg) !important;
  }

  .home-v2 > .coverage-check-v2 .coverage-map > *,
  .home-v2 > .coverage-check-v2 .coverage-map-art > *,
  .home-v2 > .coverage-check-v2 .coverage-visual > *,
  .home-v2 > .coverage-check-v2 > div:last-child > * {
    transform: rotate(2deg) !important;
  }
}

@media (max-width: 760px) {
  .home-v2 > .coverage-check-v2 form,
  .home-v2 > .coverage-check-v2 .coverage-form,
  .home-v2 > .coverage-check-v2 .coverage-real-form {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .home-v2 > .coverage-check-v2 {
    margin: 22px 0 !important;
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }

  .home-v2 > .coverage-check-v2 h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.12 !important;
  }

  .home-v2 > .coverage-check-v2 p {
    font-size: 15px !important;
    line-height: 1.52 !important;
  }

  .home-v2 > .coverage-check-v2 form,
  .home-v2 > .coverage-check-v2 .coverage-form,
  .home-v2 > .coverage-check-v2 .coverage-real-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .home-v2 > .coverage-check-v2 input,
  .home-v2 > .coverage-check-v2 select,
  .home-v2 > .coverage-check-v2 textarea,
  .home-v2 > .coverage-check-v2 button,
  .home-v2 > .coverage-check-v2 .btn,
  .home-v2 > .coverage-check-v2 input[type="submit"] {
    min-height: 46px !important;
  }

  .home-v2 > .coverage-check-v2 .coverage-map,
  .home-v2 > .coverage-check-v2 .coverage-map-art,
  .home-v2 > .coverage-check-v2 .coverage-visual,
  .home-v2 > .coverage-check-v2 > div:last-child {
    min-height: 170px !important;
    border-radius: 20px !important;
  }
}
/* =========================================================
   ZasNet — Block 07
   Home page: "Чому обирають ZasNet?"
   Safe cosmetic patch: title + cards + icons + light/dark themes
   Add at the end of site.css
   ========================================================= */

/* Section shell */
.why-v2 {
    margin-top: 34px;
}

.why-v2 .section-title {
    margin-bottom: 22px;
    text-align: center;
}

.why-v2 .section-title h2 {
    margin: 0;
    color: #081633;
    font-size: clamp(2.25rem, 4.8vw, 4.4rem);
    line-height: .98;
    letter-spacing: -0.03em;
    font-weight: 900;
}

.why-v2 .section-title h2 span {
    color: #16a34a;
    text-shadow: 0 6px 24px rgba(22, 163, 74, .14);
}

.why-v2 .section-title p {
    max-width: 700px;
    margin: 12px auto 0;
    color: #66768b;
    font-size: 1rem;
    line-height: 1.65;
}

/* Cards grid */
.why-v2-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    margin-top: 0;
}

.why-v2-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 214px;
    padding: 22px 20px 20px;
    border: 1px solid rgba(22, 163, 74, .14);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,251,247,.96) 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    backdrop-filter: blur(6px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.why-v2-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 163, 74, .24);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .11);
}

/* Icon */
.why-v2-grid .home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border: 1px solid rgba(22, 163, 74, .16);
    border-radius: 18px;
    background: linear-gradient(180deg, #f2fbf4 0%, #e5f7ea 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    color: #1aa03f;
    font-size: 1.08rem;
}

.why-v2-grid h3 {
    margin: 0 0 10px;
    color: #0b1734;
    font-size: clamp(1.02rem, 1.35vw, 1.18rem);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.015em;
}

.why-v2-grid p {
    margin: 0;
    color: #58697d;
    font-size: 1rem;
    line-height: 1.62;
}

/* Dark theme */
html[data-theme="dark"] .why-v2 .section-title h2 {
    color: #f7fff9;
}

html[data-theme="dark"] .why-v2 .section-title h2 span {
    color: #28c84f;
    text-shadow: 0 8px 28px rgba(40, 200, 79, .18);
}

html[data-theme="dark"] .why-v2 .section-title p {
    color: #cddbd4;
}

html[data-theme="dark"] .why-v2-grid article {
    border-color: rgba(126, 240, 77, .13);
    background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.02) 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .why-v2-grid article:hover {
    border-color: rgba(126, 240, 77, .24);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .why-v2-grid .home-icon {
    border-color: rgba(126, 240, 77, .16);
    background: linear-gradient(180deg, rgba(126,240,77,.12) 0%, rgba(126,240,77,.08) 100%);
    color: #7ef04d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .why-v2-grid h3 {
    color: #f8fff8;
}

html[data-theme="dark"] .why-v2-grid p {
    color: #d7e5de;
}

/* Tablet */
@media (max-width: 1200px) {
    .why-v2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .why-v2 .section-title h2 {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.03;
    }

    .why-v2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .why-v2-grid article {
        min-height: 190px;
        padding: 18px;
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .why-v2 {
        margin-top: 26px;
    }

    .why-v2 .section-title {
        margin-bottom: 16px;
    }

    .why-v2 .section-title h2 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    .why-v2-grid {
        grid-template-columns: 1fr;
    }

    .why-v2-grid article {
        min-height: auto;
    }
}/* =========================================================
   ZasNet — Block 08
   Home page: cabinet banner / "Ваш інтернет — у вашому кабінеті"
   Safe cosmetic patch: more fitting right-side banner artwork
   Add at the end of site.css
   ========================================================= */

.cabinet-band {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    padding: 34px 34px 34px 38px;
    border-radius: 30px;
    isolation: isolate;
}

/* text zone */
.cabinet-band > :first-child {
    position: relative;
    z-index: 3;
    max-width: 720px;
}

.cabinet-band h2 {
    margin: 0 0 10px;
    max-width: 760px;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.cabinet-band p {
    margin: 0;
    max-width: 760px;
    font-size: 1.04rem;
    line-height: 1.65;
}

.cabinet-band .btn {
    position: relative;
    z-index: 4;
    min-width: 168px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 16px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

/* softer left-to-right banner surface */
html:not([data-theme="dark"]) .cabinet-band {
    background:
        radial-gradient(70% 140% at 0% 0%, rgba(22,163,74,.16) 0%, rgba(22,163,74,0) 55%),
        linear-gradient(90deg, #15a34a 0%, #46c5b4 48%, #bce8e0 100%);
}

html[data-theme="dark"] .cabinet-band {
    background:
        radial-gradient(55% 110% at 0% 0%, rgba(34,197,94,.14) 0%, rgba(34,197,94,0) 55%),
        linear-gradient(90deg, rgba(32,72,60,.92) 0%, rgba(33,74,62,.84) 45%, rgba(23,48,43,.88) 100%);
}

/* decorative glow behind art */
.cabinet-band::before {
    content: "";
    position: absolute;
    right: 34px;
    top: 50%;
    width: 360px;
    height: 180px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(89, 233, 167, .30) 0%, rgba(89, 233, 167, .10) 42%, rgba(89,233,167,0) 72%);
    z-index: 1;
    pointer-events: none;
}

html[data-theme="dark"] .cabinet-band::before {
    background: radial-gradient(circle at center, rgba(83, 229, 139, .18) 0%, rgba(83, 229, 139, .06) 42%, rgba(83,229,139,0) 72%);
}

/* device illustration */
.cabinet-band::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: -6px;
    width: 340px;
    height: 180px;
    border: 10px solid #13203d;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(22,163,74,.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(242,249,246,.98) 100%);
    background-size: 24px 24px, 24px 24px, auto;
    box-shadow:
        0 20px 34px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.92);
    transform: rotate(6deg);
    z-index: 2;
    pointer-events: none;
}

/* phone on top of laptop */
.cabinet-band .btn::after {
    content: "";
    position: absolute;
    right: -108px;
    bottom: -118px;
    width: 88px;
    height: 132px;
    border: 9px solid #13203d;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(239,248,243,.98) 100%);
    box-shadow: 0 18px 28px rgba(15, 23, 42, .12);
    transform: rotate(-2deg);
    z-index: -1;
    pointer-events: none;
}

/* tiny top speaker for phone */
.cabinet-band .btn::before {
    content: "";
    position: absolute;
    right: -74px;
    bottom: -7px;
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background: rgba(19,32,61,.35);
    z-index: 0;
    pointer-events: none;
}

/* keep CTA readable, remove overly floating look */
.cabinet-band .btn {
    background: rgba(255,255,255,.88);
    border-color: rgba(15,23,42,.10);
    color: #0b1734;
}

html[data-theme="dark"] .cabinet-band .btn {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #f6fff9;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

/* add a little right breathing space for the text/button zone */
.cabinet-band > :first-child,
.cabinet-band h2,
.cabinet-band p {
    padding-right: 18px;
}

/* make sure right artwork does not consume layout width */
.cabinet-band > .btn,
.cabinet-band > a.btn,
.cabinet-band > button.btn {
    margin-right: 320px;
}

@media (max-width: 1180px) {
    .cabinet-band {
        padding: 30px 28px;
    }

    .cabinet-band::after {
        right: 14px;
        width: 300px;
        height: 160px;
    }

    .cabinet-band::before {
        right: 12px;
        width: 320px;
        height: 160px;
    }

    .cabinet-band > .btn,
    .cabinet-band > a.btn,
    .cabinet-band > button.btn {
        margin-right: 280px;
    }
}

@media (max-width: 900px) {
    .cabinet-band {
        min-height: unset;
        padding: 26px 22px 210px;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cabinet-band h2,
    .cabinet-band p,
    .cabinet-band > :first-child {
        padding-right: 0;
        max-width: 100%;
    }

    .cabinet-band > .btn,
    .cabinet-band > a.btn,
    .cabinet-band > button.btn {
        margin-right: 0;
        justify-self: start;
    }

    .cabinet-band::before {
        right: 50%;
        top: auto;
        bottom: 12px;
        width: 300px;
        height: 130px;
        transform: translateX(50%);
    }

    .cabinet-band::after {
        right: 50%;
        bottom: -8px;
        width: 268px;
        height: 142px;
        transform: translateX(50%) rotate(5deg);
    }

    .cabinet-band .btn::after {
        right: -96px;
        bottom: -142px;
        width: 76px;
        height: 114px;
    }

    .cabinet-band .btn::before {
        right: -64px;
        bottom: -34px;
    }
}

@media (max-width: 640px) {
    .cabinet-band {
        padding: 22px 18px 190px;
        border-radius: 24px;
    }

    .cabinet-band h2 {
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .cabinet-band p {
        font-size: .98rem;
    }

    .cabinet-band::after {
        width: 230px;
        height: 122px;
    }

    .cabinet-band .btn::after {
        right: -84px;
        bottom: -136px;
        width: 68px;
        height: 104px;
        border-width: 8px;
    }
}
/* ==========================================================
   ZasNet Block 08.1 — Cabinet Banner Fit Fix
   Фікс для блока "Ваш інтернет — у вашому кабінеті"
   Підключати / вставити ПІСЛЯ zasnet_08_home_cabinet_banner_art_patch.css
   ========================================================== */

/* Даємо більше висоти і правий відступ, щоб ілюстрація не різалась */
.cabinet-band {
  min-height: 220px !important;
  padding-top: 38px !important;
  padding-bottom: 38px !important;
  padding-right: clamp(360px, 34vw, 500px) !important;
}

/* Текст не розтягуємо на всю ширину */
.cabinet-band > :first-child {
  max-width: 820px !important;
}

.cabinet-band h2 {
  font-size: clamp(2rem, 2.8vw, 2.7rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.032em !important;
}

.cabinet-band p {
  max-width: 820px !important;
  font-size: 1.02rem !important;
  line-height: 1.62 !important;
}

/* Кнопку залишаємо в зоні контенту, а не на самій картинці */
.cabinet-band > .btn,
.cabinet-band > a.btn,
.cabinet-band > button.btn {
  margin-right: 0 !important;
  justify-self: start !important;
  align-self: center !important;
}

/* Прибираємо телефон, який був прив’язаний до кнопки */
.cabinet-band .btn::before,
.cabinet-band .btn::after {
  display: none !important;
  content: none !important;
}

/* Світіння справа — акуратніше */
.cabinet-band::before {
  right: 42px !important;
  top: 52% !important;
  width: clamp(280px, 28vw, 430px) !important;
  height: 170px !important;
  transform: translateY(-50%) !important;
  opacity: .9 !important;
}

/* Основний ноутбук — менший і повністю всередині банера */
.cabinet-band::after {
  right: clamp(28px, 3vw, 56px) !important;
  bottom: -14px !important;
  width: clamp(250px, 25vw, 390px) !important;
  height: clamp(132px, 13vw, 190px) !important;
  border-width: clamp(8px, .8vw, 12px) !important;
  border-radius: 24px !important;
  transform: rotate(6deg) !important;
}

/* Додатковий смартфон — як окрема картинка, але без прив’язки до кнопки */
.cabinet-band > :first-child::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  right: calc(-1 * clamp(330px, 31vw, 455px)) !important;
  bottom: -58px !important;

  width: clamp(68px, 7vw, 105px) !important;
  height: clamp(112px, 11vw, 162px) !important;

  border: clamp(7px, .75vw, 10px) solid #13203d !important;
  border-radius: 22px !important;

  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(239,248,243,.98) 100%) !important;
  box-shadow: 0 18px 28px rgba(15, 23, 42, .13) !important;
  transform: rotate(-2deg) !important;
  pointer-events: none !important;
}

/* Маленька декоративна смужка на смартфоні */
.cabinet-band > :first-child::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  right: calc(-1 * clamp(294px, 27.5vw, 410px)) !important;
  bottom: 34px !important;

  width: 28px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(19,32,61,.32) !important;
  pointer-events: none !important;
}

/* Темна тема — кнопка більш контрастна */
html[data-theme="dark"] .cabinet-band .btn {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .cabinet-band > :first-child::after {
  border-color: #13203d !important;
  background: linear-gradient(180deg, rgba(250,255,252,.98) 0%, rgba(235,248,241,.98) 100%) !important;
  box-shadow: 0 18px 30px rgba(0,0,0,.22) !important;
}

/* На середніх екранах не стискаємо текст занадто */
@media (max-width: 1180px) {
  .cabinet-band {
    padding-right: 330px !important;
  }

  .cabinet-band > :first-child::after {
    right: -300px !important;
    bottom: -54px !important;
  }

  .cabinet-band > :first-child::before {
    right: -262px !important;
    bottom: 28px !important;
  }
}

/* Планшет/мобільна: картинка вниз, без обрізання */
@media (max-width: 900px) {
  .cabinet-band {
    min-height: auto !important;
    padding: 28px 22px 205px !important;
    grid-template-columns: 1fr !important;
  }

  .cabinet-band > .btn,
  .cabinet-band > a.btn,
  .cabinet-band > button.btn {
    justify-self: start !important;
  }

  .cabinet-band::before {
    right: 50% !important;
    top: auto !important;
    bottom: 18px !important;
    width: 310px !important;
    height: 140px !important;
    transform: translateX(50%) !important;
  }

  .cabinet-band::after {
    right: 50% !important;
    bottom: -8px !important;
    width: 270px !important;
    height: 140px !important;
    transform: translateX(58%) rotate(5deg) !important;
  }

  .cabinet-band > :first-child::after {
    right: 50% !important;
    bottom: -188px !important;
    width: 72px !important;
    height: 112px !important;
    transform: translateX(-82px) rotate(-2deg) !important;
  }

  .cabinet-band > :first-child::before {
    right: 50% !important;
    bottom: -91px !important;
    transform: translateX(-52px) !important;
  }
}

@media (max-width: 640px) {
  .cabinet-band {
    padding: 24px 18px 185px !important;
    border-radius: 24px !important;
  }

  .cabinet-band h2 {
    font-size: clamp(1.55rem, 8vw, 2.15rem) !important;
  }

  .cabinet-band p {
    font-size: .96rem !important;
  }

  .cabinet-band::after {
    width: 235px !important;
    height: 122px !important;
  }

  .cabinet-band > :first-child::after {
    width: 64px !important;
    height: 100px !important;
    bottom: -168px !important;
  }

  .cabinet-band > :first-child::before {
    bottom: -83px !important;
  }
}
/* ==========================================================
   ZasNet Block 09 — Footer Compact Final
   ЧИСТИЙ ФУТЕР БЕЗ 09.1 / 09.2.

   Перед вставкою:
   - видали всі старі 09 / 09.1 / 09.2 / CLEAN_FINAL
   - цей код вставити в самий кінець site.css

   Що робить:
   - футер НЕ широкий
   - світла тема біла
   - темна тема темна
   - іконки більші
   - не чіпає інші блоки
   ========================================================== */

/* ---------- FOOTER SIZE ---------- */
.site-footer.footer-v2 {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin: 38px auto 28px !important;
  padding: 30px 34px 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

/* ---------- LIGHT THEME ---------- */
html:not([data-theme="dark"]) .site-footer.footer-v2 {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08) !important;
  color: #475569 !important;
}

/* ---------- GRID ---------- */
.site-footer.footer-v2 .footer-main {
  display: grid !important;
  grid-template-columns:
    minmax(220px, .92fr)
    repeat(3, minmax(145px, .62fr))
    minmax(230px, .84fr)
    minmax(150px, .50fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

/* ---------- LOGO / BRAND ---------- */
.site-footer.footer-v2 .footer-full-logo {
  width: 210px !important;
  max-width: 100% !important;
  height: auto !important;
  filter: none !important;
}

.site-footer.footer-v2 .footer-brand-v2 b,
.site-footer.footer-v2 .footer-brand-v2 strong {
  display: block !important;
  max-width: 200px !important;
  margin-top: 14px !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
  font-weight: 850 !important;
}

.site-footer.footer-v2 .footer-brand-v2 i {
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  margin: 14px 0 14px !important;
  border-radius: 999px !important;
  background: #16a34a !important;
}

.site-footer.footer-v2 .footer-brand-v2 p {
  max-width: 210px !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* ---------- COLUMN HEADERS + BIGGER ICONS ---------- */
.site-footer.footer-v2 .footer-column h4 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  margin: 0 0 14px !important;

  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.site-footer.footer-v2 .footer-column h4::before {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(22,163,74,.16) !important;
  background: #eff9f0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.site-footer.footer-v2 .footer-column h4::after {
  left: 11px !important;
  top: 10px !important;
  width: 20px !important;
  height: 20px !important;
  background: #168b37 !important;
}

/* ---------- LINKS ---------- */
.site-footer.footer-v2 .footer-link,
.site-footer.footer-v2 .footer-contact-link {
  min-height: 29px !important;
  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 450 !important;
}

.site-footer.footer-v2 .footer-link::after {
  color: #20b557 !important;
  font-size: 17px !important;
}

.site-footer.footer-v2 .footer-contact-link::before {
  width: 9px !important;
  height: 9px !important;
  background: #1f9b3a !important;
  box-shadow: 0 0 0 4px rgba(31,155,58,.12) !important;
}

/* ---------- SOCIAL ICONS BIGGER ---------- */
.site-footer.footer-v2 .footer-socials {
  display: grid !important;
  grid-template-columns: repeat(2, 44px) !important;
  gap: 12px !important;
}

.site-footer.footer-v2 .footer-socials a {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.07) !important;
}

.site-footer.footer-v2 .footer-socials a::before {
  width: 20px !important;
  height: 20px !important;
}

/* ---------- BOTTOM ---------- */
.site-footer.footer-v2 .footer-bottom {
  display: grid !important;
  grid-template-columns: 1fr auto 42px !important;
  gap: 18px !important;
  align-items: center !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(148,163,184,.24) !important;
}

.site-footer.footer-v2 .footer-bottom p,
.site-footer.footer-v2 .footer-legal a {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}

.site-footer.footer-v2 .footer-top {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #eef8ef !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}

/* ==========================================================
   DARK THEME
   ========================================================== */
html[data-theme="dark"] .site-footer.footer-v2 {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin: 38px auto 28px !important;
  padding: 30px 34px 20px !important;

  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.08), transparent 34%),
    linear-gradient(135deg, rgba(29,59,51,.96) 0%, rgba(34,69,59,.94) 52%, rgba(26,52,45,.96) 100%) !important;
  border: 1px solid rgba(226,232,240,.13) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  color: rgba(240,250,245,.80) !important;
}

/* dark grid same as light */
html[data-theme="dark"] .site-footer.footer-v2 .footer-main {
  grid-template-columns:
    minmax(220px, .92fr)
    repeat(3, minmax(145px, .62fr))
    minmax(230px, .84fr)
    minmax(150px, .50fr) !important;
  gap: 26px !important;
}

/* dark brand */
html[data-theme="dark"] .site-footer.footer-v2 .footer-full-logo {
  width: 210px !important;
  filter: none !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 b,
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 strong,
html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 p,
html[data-theme="dark"] .site-footer.footer-v2 .footer-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-bottom p,
html[data-theme="dark"] .site-footer.footer-v2 .footer-legal a {
  color: rgba(240,250,245,.78) !important;
  -webkit-text-fill-color: rgba(240,250,245,.78) !important;
}

/* dark bigger header icons */
html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4 {
  min-height: 42px !important;
  margin-bottom: 14px !important;
  font-size: 15px !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4::before {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(126,240,77,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4::after {
  left: 11px !important;
  top: 10px !important;
  width: 20px !important;
  height: 20px !important;
  background: #7ef04d !important;
}

/* dark links */
html[data-theme="dark"] .site-footer.footer-v2 .footer-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link {
  min-height: 29px !important;
  font-size: 14px !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-link::after {
  color: #7ef04d !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link::before {
  width: 9px !important;
  height: 9px !important;
  background: #7ef04d !important;
  box-shadow: 0 0 0 4px rgba(126,240,77,.12) !important;
}

/* dark social bigger */
html[data-theme="dark"] .site-footer.footer-v2 .footer-socials {
  grid-template-columns: repeat(2, 44px) !important;
  gap: 12px !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-socials a {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-socials a::before {
  width: 20px !important;
  height: 20px !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-bottom {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top-color: rgba(226,232,240,.14) !important;
}

html[data-theme="dark"] .site-footer.footer-v2 .footer-top {
  width: 42px !important;
  height: 42px !important;
  background: rgba(255,255,255,.08) !important;
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
  border-color: rgba(126,240,77,.14) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1500px) {
  .site-footer.footer-v2,
  html[data-theme="dark"] .site-footer.footer-v2 {
    width: min(1420px, calc(100% - 72px)) !important;
    max-width: 1420px !important;
  }

  .site-footer.footer-v2 .footer-main,
  html[data-theme="dark"] .site-footer.footer-v2 .footer-main {
    grid-template-columns:
      minmax(210px, .95fr)
      repeat(2, minmax(145px, .7fr))
      minmax(220px, .86fr)
      minmax(150px, .56fr) !important;
  }

  .site-footer.footer-v2 .footer-column-company {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .site-footer.footer-v2,
  html[data-theme="dark"] .site-footer.footer-v2 {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    padding: 26px 22px 18px !important;
    border-radius: 24px !important;
  }

  .site-footer.footer-v2 .footer-main,
  html[data-theme="dark"] .site-footer.footer-v2 .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .site-footer.footer-v2 .footer-brand-v2 {
    grid-column: 1 / -1 !important;
  }

  .site-footer.footer-v2 .footer-bottom {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }
}

@media (max-width: 620px) {
  .site-footer.footer-v2,
  html[data-theme="dark"] .site-footer.footer-v2 {
    width: calc(100% - 20px) !important;
    padding: 24px 18px 18px !important;
    border-radius: 22px !important;
  }

  .site-footer.footer-v2 .footer-main,
  html[data-theme="dark"] .site-footer.footer-v2 .footer-main {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .site-footer.footer-v2 .footer-socials,
  html[data-theme="dark"] .site-footer.footer-v2 .footer-socials {
    grid-template-columns: repeat(4, 44px) !important;
  }
}
/* ==========================================================
   ZasNet Block 09.1 — Footer Text Softness
   Маленький фікс тільки для прозорості/читабельності тексту футера.
   Ставити ПІСЛЯ zasnet_09_footer_COMPACT_FINAL_patch.css
   ========================================================== */

/* ---------- LIGHT THEME ---------- */

/* Назви колонок залишаємо чіткими */
.site-footer.footer-v2 .footer-column h4,
.site-footer.footer-v2 .footer-brand-v2 b,
.site-footer.footer-v2 .footer-brand-v2 strong {
  opacity: 1 !important;
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}

/* Опис під логотипом — м’якший */
.site-footer.footer-v2 .footer-brand-v2 p {
  opacity: .72 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Посилання в колонках — напівпрозорі */
.site-footer.footer-v2 .footer-link,
.site-footer.footer-v2 .footer-contact-link {
  opacity: .78 !important;
  color: #34445a !important;
  -webkit-text-fill-color: #34445a !important;
}

/* Низ футера — ще м’якший */
.site-footer.footer-v2 .footer-bottom p,
.site-footer.footer-v2 .footer-legal a {
  opacity: .72 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Hover повертає повну чіткість */
.site-footer.footer-v2 .footer-link:hover,
.site-footer.footer-v2 .footer-contact-link:hover,
.site-footer.footer-v2 .footer-legal a:hover {
  opacity: 1 !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}

/* Стрілки справа в посиланнях — теж м’якші */
.site-footer.footer-v2 .footer-link::after {
  opacity: .75 !important;
}

/* Контактні зелені крапки — нормальні, не прозорі */
.site-footer.footer-v2 .footer-contact-link::before {
  opacity: 1 !important;
}

/* ---------- DARK THEME ---------- */

/* Заголовки колонок у темній темі чіткі */
html[data-theme="dark"] .site-footer.footer-v2 .footer-column h4,
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 b,
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 strong {
  opacity: 1 !important;
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

/* Опис під логотипом у темній темі */
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 p {
  opacity: .64 !important;
  color: #e8f6ef !important;
  -webkit-text-fill-color: #e8f6ef !important;
}

/* Посилання в темній темі — м’яко напівпрозорі */
html[data-theme="dark"] .site-footer.footer-v2 .footer-link,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link {
  opacity: .72 !important;
  color: #e8f6ef !important;
  -webkit-text-fill-color: #e8f6ef !important;
}

/* Низ футера в темній темі */
html[data-theme="dark"] .site-footer.footer-v2 .footer-bottom p,
html[data-theme="dark"] .site-footer.footer-v2 .footer-legal a {
  opacity: .66 !important;
  color: #e8f6ef !important;
  -webkit-text-fill-color: #e8f6ef !important;
}

/* Hover у темній темі */
html[data-theme="dark"] .site-footer.footer-v2 .footer-link:hover,
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link:hover,
html[data-theme="dark"] .site-footer.footer-v2 .footer-legal a:hover {
  opacity: 1 !important;
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

/* Стрілки справа в темній темі */
html[data-theme="dark"] .site-footer.footer-v2 .footer-link::after {
  opacity: .78 !important;
}

/* Зелені крапки контактів лишаються яскравими */
html[data-theme="dark"] .site-footer.footer-v2 .footer-contact-link::before {
  opacity: 1 !important;
}

/* Соціальні іконки не робимо прозорими */
.site-footer.footer-v2 .footer-socials,
.site-footer.footer-v2 .footer-socials a,
html[data-theme="dark"] .site-footer.footer-v2 .footer-socials,
html[data-theme="dark"] .site-footer.footer-v2 .footer-socials a {
  opacity: 1 !important;
}
/* ==========================================================
   ZasNet Block 09.3 — Footer Brand Cleanup
   Що робить:
   1) прибирає дубль "ZasNet" біля логотипа
   2) красиво ставить "Інтернет, що з’єднує" під логотипом
   3) повністю ховає "ISP ZasNet"
   Ставити ПІСЛЯ основного footer patch
   ========================================================== */

/* --- Бренд-блок футера --- */
.site-footer.footer-v2 .footer-brand-v2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

/* Верхній ряд з логотипом */
.site-footer.footer-v2 .footer-brand-v2 .footer-logo,
.site-footer.footer-v2 .footer-brand-v2 .brand-logo,
.site-footer.footer-v2 .footer-brand-v2 .logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 6px 0 !important;
}

/* Ховаємо будь-який дубль назви праворуч від логотипа */
.site-footer.footer-v2 .footer-brand-v2 .footer-logo > *:not(img):not(svg):not(picture),
.site-footer.footer-v2 .footer-brand-v2 .brand-logo > *:not(img):not(svg):not(picture),
.site-footer.footer-v2 .footer-brand-v2 .logo-wrap > *:not(img):not(svg):not(picture) {
  display: none !important;
}

/* Якщо картинка не є прямим дочірнім елементом */
.site-footer.footer-v2 .footer-brand-v2 .footer-logo picture,
.site-footer.footer-v2 .footer-brand-v2 .brand-logo picture,
.site-footer.footer-v2 .footer-brand-v2 .logo-wrap picture {
  display: block !important;
}

/* Сам логотип */
.site-footer.footer-v2 .footer-brand-v2 img,
.site-footer.footer-v2 .footer-brand-v2 svg {
  display: block !important;
  max-width: 220px !important;
  height: auto !important;
}

/* "Інтернет, що з’єднує" — робимо красиво під логотипом */
.site-footer.footer-v2 .footer-brand-v2 b,
.site-footer.footer-v2 .footer-brand-v2 strong,
.site-footer.footer-v2 .footer-brand-v2 .brand-title,
.site-footer.footer-v2 .footer-brand-v2 .footer-brand-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  max-width: 220px !important;
}

/* Прибираємо ISP ZasNet повністю */
.site-footer.footer-v2 .footer-brand-v2 p,
.site-footer.footer-v2 .footer-brand-v2 .brand-subtitle,
.site-footer.footer-v2 .footer-brand-v2 .footer-brand-subtitle,
.site-footer.footer-v2 .footer-brand-v2 small {
  display: none !important;
}

/* ---------- LIGHT THEME ---------- */
.site-footer.footer-v2 .footer-brand-v2 b,
.site-footer.footer-v2 .footer-brand-v2 strong,
.site-footer.footer-v2 .footer-brand-v2 .brand-title,
.site-footer.footer-v2 .footer-brand-v2 .footer-brand-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
}

/* ---------- DARK THEME ---------- */
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 b,
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 strong,
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 .brand-title,
html[data-theme="dark"] .site-footer.footer-v2 .footer-brand-v2 .footer-brand-title {
  color: #f8fff9 !important;
  -webkit-text-fill-color: #f8fff9 !important;
  opacity: 1 !important;
}

/* Невелика адаптація */
@media (max-width: 900px) {
  .site-footer.footer-v2 .footer-brand-v2 img,
  .site-footer.footer-v2 .footer-brand-v2 svg {
    max-width: 180px !important;
  }

  .site-footer.footer-v2 .footer-brand-v2 b,
  .site-footer.footer-v2 .footer-brand-v2 strong,
  .site-footer.footer-v2 .footer-brand-v2 .brand-title,
  .site-footer.footer-v2 .footer-brand-v2 .footer-brand-title {
    max-width: 180px !important;
    font-size: 15px !important;
  }
}
/* ==========================================================
   ZasNet Block 10 — HEADER BALANCED FINAL
   Один чистий патч для верхньої шапки.

   Перед встановленням видали старий 10 повністю.
   Ставити в самий кінець site.css.

   Що робить:
   - шапка НЕ ширша за інші блоки
   - світла тема залишається світлою
   - темна тема не чорна, а м’яка зелено-темна
   - кнопка "Особистий кабінет" у темній темі читається
   - працює тільки з .topbar / .brand / .main-nav / .top-actions
   ========================================================== */

/* ==========================================================
   HEADER SIZE
   ========================================================== */

.topbar {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  min-height: 66px !important;

  margin: 22px auto 20px !important;
  padding: 10px 18px !important;

  display: flex !important;
  align-items: center !important;
  gap: 16px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 24px !important;

  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow:
    0 14px 38px rgba(15, 23, 42, .07),
    inset 0 1px 0 rgba(255,255,255,.85) !important;

  backdrop-filter: blur(14px) !important;
}

/* ==========================================================
   BRAND / LOGO
   ========================================================== */

.topbar .brand {
  flex: 0 0 220px !important;
  min-width: 220px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding-right: 20px !important;
  border-right: 1px solid rgba(15, 23, 42, .09) !important;
}

.topbar .brand-mark,
.topbar .brand .brand-mark {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.topbar .brand-mark img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  display: block !important;
}

.topbar .brand-text {
  font-size: 1.36rem !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;

  color: #202938 !important;
  -webkit-text-fill-color: #202938 !important;
}

.topbar .brand-text span {
  color: #6a9d12 !important;
  -webkit-text-fill-color: #6a9d12 !important;
}

.topbar .brand small {
  display: block !important;
  max-width: 92px !important;
  margin-top: 2px !important;

  color: rgba(71, 85, 105, .58) !important;
  -webkit-text-fill-color: rgba(71, 85, 105, .58) !important;

  font-size: .62rem !important;
  line-height: 1.05 !important;
  font-weight: 650 !important;
}

/* ==========================================================
   MENU
   ========================================================== */

.topbar .main-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 4px !important;
}

.topbar .main-nav a {
  min-height: 42px !important;
  padding: 0 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 13px !important;
  border: 1px solid transparent !important;

  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;

  font-size: .84rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}

.topbar .main-nav a::after {
  display: none !important;
}

.topbar .main-nav a:hover {
  transform: translateY(-1px) !important;
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
  background: rgba(34,197,94,.08) !important;
  border-color: rgba(34,197,94,.12) !important;
}

.topbar .main-nav a.active,
.topbar .main-nav a[aria-current="page"] {
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
  background: rgba(34,197,94,.10) !important;
  border-color: rgba(34,197,94,.14) !important;
}

/* ==========================================================
   ACTIONS
   ========================================================== */

.topbar .top-actions {
  flex: 0 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* theme button */
.topbar .theme-toggle {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;

  background: rgba(255,255,255,.90) !important;
  color: #facc15 !important;
  -webkit-text-fill-color: #facc15 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 22px rgba(15,23,42,.055) !important;
}

/* cabinet button */
.topbar .top-actions .btn.secondary,
.topbar .top-actions .btn.dark {
  min-width: 176px !important;
  min-height: 46px !important;
  padding: 0 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;

  background: rgba(255,255,255,.92) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: .86rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 10px 22px rgba(15,23,42,.055) !important;
}

/* order button */
.topbar .top-actions .btn.primary {
  min-width: 140px !important;
  min-height: 46px !important;
  padding: 0 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.25) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: .86rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  text-decoration: none !important;

  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 14px 30px rgba(25,210,105,.22) !important;
}

.topbar .top-actions .btn:hover,
.topbar .theme-toggle:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) saturate(1.03) !important;
}

/* ==========================================================
   DARK THEME — м’який темний, не чорний
   ========================================================== */

html[data-theme="dark"] .topbar {
  background:
    radial-gradient(circle at 5% 0%, rgba(34,197,94,.10), transparent 36%),
    linear-gradient(180deg, rgba(45, 83, 69, .96), rgba(32, 67, 57, .96)) !important;

  border-color: rgba(226,232,240,.13) !important;

  box-shadow:
    0 18px 46px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* logo area */
html[data-theme="dark"] .topbar .brand {
  border-right-color: rgba(255,255,255,.15) !important;
}

html[data-theme="dark"] .topbar .brand-mark img {
  filter:
    brightness(1.08)
    contrast(1.06)
    saturate(1.08)
    drop-shadow(0 2px 6px rgba(0,0,0,.16)) !important;
  opacity: .98 !important;
}

html[data-theme="dark"] .topbar .brand-text {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .topbar .brand-text span {
  color: #8bcf27 !important;
  -webkit-text-fill-color: #8bcf27 !important;
}

html[data-theme="dark"] .topbar .brand small {
  color: rgba(240,250,245,.55) !important;
  -webkit-text-fill-color: rgba(240,250,245,.55) !important;
}

/* menu dark */
html[data-theme="dark"] .topbar .main-nav a {
  color: rgba(247,255,249,.82) !important;
  -webkit-text-fill-color: rgba(247,255,249,.82) !important;
}

html[data-theme="dark"] .topbar .main-nav a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .topbar .main-nav a.active,
html[data-theme="dark"] .topbar .main-nav a[aria-current="page"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.10) !important;
}

/* theme button dark */
html[data-theme="dark"] .topbar .theme-toggle {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.18) !important;

  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.12) !important;
}

/* cabinet dark */
html[data-theme="dark"] .topbar .top-actions .btn.secondary,
html[data-theme="dark"] .topbar .top-actions .btn.dark {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.18) !important;

  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.12) !important;
}

/* order dark */
html[data-theme="dark"] .topbar .top-actions .btn.primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background: linear-gradient(135deg, #13c86a 0%, #18d87d 48%, #39f018 125%) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1500px) {
  .topbar {
    width: min(1420px, calc(100% - 72px)) !important;
    max-width: 1420px !important;
    min-height: 62px !important;
    padding: 10px 16px !important;
    gap: 12px !important;
  }

  .topbar .brand {
    flex-basis: 190px !important;
    min-width: 190px !important;
    padding-right: 16px !important;
  }

  .topbar .brand small {
    display: none !important;
  }

  .topbar .brand-mark,
  .topbar .brand .brand-mark,
  .topbar .brand-mark img {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .topbar .brand-text {
    font-size: 1.2rem !important;
  }

  .topbar .main-nav a {
    min-height: 40px !important;
    padding-inline: 9px !important;
    font-size: .79rem !important;
  }

  .topbar .theme-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .topbar .top-actions .btn.secondary,
  .topbar .top-actions .btn.dark {
    min-width: 150px !important;
    min-height: 42px !important;
    padding-inline: 14px !important;
    font-size: .82rem !important;
  }

  .topbar .top-actions .btn.primary {
    min-width: 118px !important;
    min-height: 42px !important;
    padding-inline: 16px !important;
    font-size: .82rem !important;
  }
}

@media (max-width: 1180px) {
  .topbar {
    width: calc(100% - 32px) !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .topbar .brand {
    flex: 1 1 auto !important;
    min-width: 170px !important;
  }

  .topbar .main-nav {
    order: 3 !important;
    flex: 1 0 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-top: 4px !important;
  }

  .topbar .top-actions {
    margin-left: auto !important;
  }
}

@media (max-width: 620px) {
  .topbar {
    width: calc(100% - 20px) !important;
    margin-top: 12px !important;
    margin-bottom: 14px !important;
    padding: 9px 10px !important;
    border-radius: 20px !important;
  }

  .topbar .brand {
    min-width: 145px !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .topbar .brand-mark,
  .topbar .brand .brand-mark,
  .topbar .brand-mark img {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .topbar .brand-text {
    font-size: 1.05rem !important;
  }

  .topbar .top-actions {
    gap: 7px !important;
  }

  .topbar .top-actions .btn.secondary,
  .topbar .top-actions .btn.dark {
    min-width: 0 !important;
    padding-inline: 12px !important;
  }

  .topbar .top-actions .btn.primary {
    min-width: 0 !important;
    padding-inline: 14px !important;
  }
}
/* ==========================================================
   ZasNet Tariffs 01 — City Selector / Top Block
   Вкладка "Тарифи": верхній блок "Оберіть свій населений пункт".

   Ставити в кінець site.css.
   Не чіпає головну сторінку, бо працює тільки в межах:
   .tariffs-clean-page
   ========================================================== */

/* ==========================================================
   SECTION / HERO
   ========================================================== */

.tariffs-clean-page {
  width: var(--page-shell-width) !important;
  margin-inline: auto !important;
}

.tariffs-clean-page .tariffs-clean-hero,
.tariffs-clean-page .tariffs-hero,
.tariffs-clean-page .tariffs-page-hero {
  position: relative !important;
  overflow: hidden !important;

  width: 100% !important;
  box-sizing: border-box !important;

  margin: 22px auto 34px !important;
  padding: clamp(56px, 5.2vw, 86px) clamp(28px, 4vw, 70px) 42px !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 18% 8%, rgba(34,197,94,.10), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(34,197,94,.07), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,252,249,.96)) !important;

  box-shadow:
    0 22px 58px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* темна тема верхнього блоку */
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-hero,
html[data-theme="dark"] .tariffs-clean-page .tariffs-hero,
html[data-theme="dark"] .tariffs-clean-page .tariffs-page-hero {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 18% 8%, rgba(34,197,94,.12), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(34,197,94,.08), transparent 30%),
    linear-gradient(180deg, rgba(13, 45, 38, .96), rgba(7, 31, 28, .96)) !important;

  box-shadow:
    0 22px 58px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ==========================================================
   TITLE
   ========================================================== */

.tariffs-clean-page .tariffs-clean-hero h1,
.tariffs-clean-page .tariffs-hero h1,
.tariffs-clean-page .tariffs-page-hero h1 {
  max-width: 1060px !important;
  margin: 0 auto 14px !important;
  text-align: center !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(42px, 5vw, 74px) !important;
  line-height: .98 !important;
  font-weight: 860 !important;
  letter-spacing: -0.045em !important;
}

.tariffs-clean-page .tariffs-clean-hero > p,
.tariffs-clean-page .tariffs-hero > p,
.tariffs-clean-page .tariffs-page-hero > p {
  max-width: 760px !important;
  margin: 0 auto 34px !important;
  text-align: center !important;

  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;

  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 520 !important;
}

html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-hero h1,
html[data-theme="dark"] .tariffs-clean-page .tariffs-hero h1,
html[data-theme="dark"] .tariffs-clean-page .tariffs-page-hero h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-hero > p,
html[data-theme="dark"] .tariffs-clean-page .tariffs-hero > p,
html[data-theme="dark"] .tariffs-clean-page .tariffs-page-hero > p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

/* ==========================================================
   CITY SELECTOR CARD
   ========================================================== */

.tariffs-clean-page .tariffs-clean-selector,
.tariffs-clean-page .tariffs-selector,
.tariffs-clean-page .city-selector-card,
.tariffs-clean-page .tariffs-clean-controls {
  position: relative !important;
  overflow: hidden !important;

  width: min(100%, 1030px) !important;
  margin: 0 auto !important;
  padding: 26px 34px 30px !important;

  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;

  background:
    radial-gradient(circle at 0% 100%, rgba(34,197,94,.08), transparent 38%),
    rgba(255,255,255,.88) !important;

  box-shadow:
    0 18px 44px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-selector,
html[data-theme="dark"] .tariffs-clean-page .tariffs-selector,
html[data-theme="dark"] .tariffs-clean-page .city-selector-card,
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-controls {
  border-color: rgba(226,232,240,.15) !important;
  background:
    radial-gradient(circle at 0% 100%, rgba(34,197,94,.10), transparent 38%),
    rgba(255,255,255,.07) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Верхній ряд: label/select + info */
.tariffs-clean-page .tariffs-clean-controls-top,
.tariffs-clean-page .selector-top,
.tariffs-clean-page .city-selector-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr) !important;
  gap: 28px !important;
  align-items: end !important;
  margin-bottom: 24px !important;
}

/* Якщо немає окремого top wrapper — працює по перших елементах */
.tariffs-clean-page .tariffs-clean-selector > .tariffs-clean-controls,
.tariffs-clean-page .city-selector-card > .tariffs-clean-controls {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Label */
.tariffs-clean-page label,
.tariffs-clean-page .selector-label,
.tariffs-clean-page .city-select-label {
  display: block !important;
  margin: 0 0 12px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

html[data-theme="dark"] .tariffs-clean-page label,
html[data-theme="dark"] .tariffs-clean-page .selector-label,
html[data-theme="dark"] .tariffs-clean-page .city-select-label {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

/* Select */
.tariffs-clean-page select,
.tariffs-clean-page .city-select {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 52px 0 22px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;

  appearance: none !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23071427' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") calc(100% - 18px) center / 18px 18px no-repeat,
    #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 22px rgba(15,23,42,.04) !important;

  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 760 !important;

  outline: none !important;
}

html[data-theme="dark"] .tariffs-clean-page select,
html[data-theme="dark"] .tariffs-clean-page .city-select {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  border-color: rgba(226,232,240,.16) !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23f7fff9' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") calc(100% - 18px) center / 18px 18px no-repeat,
    rgba(255,255,255,.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.12) !important;
}

/* Info box */
.tariffs-clean-page .selector-info,
.tariffs-clean-page .tariffs-info,
.tariffs-clean-page .city-info,
.tariffs-clean-page .tariffs-clean-note {
  min-height: 58px !important;
  padding: 18px 22px !important;

  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.03)) !important;

  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;

  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 620 !important;
}

.tariffs-clean-page .selector-info::before,
.tariffs-clean-page .tariffs-info::before,
.tariffs-clean-page .city-info::before,
.tariffs-clean-page .tariffs-clean-note::before {
  content: "i" !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 2px solid #16a34a !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  background: rgba(255,255,255,.82) !important;

  font-size: 20px !important;
  font-weight: 900 !important;
  font-family: Georgia, serif !important;
}

html[data-theme="dark"] .tariffs-clean-page .selector-info,
html[data-theme="dark"] .tariffs-clean-page .tariffs-info,
html[data-theme="dark"] .tariffs-clean-page .city-info,
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-note {
  background: rgba(255,255,255,.08) !important;

  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

html[data-theme="dark"] .tariffs-clean-page .selector-info::before,
html[data-theme="dark"] .tariffs-clean-page .tariffs-info::before,
html[data-theme="dark"] .tariffs-clean-page .city-info::before,
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-note::before {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
  border-color: #7ef04d !important;
  background: rgba(255,255,255,.08) !important;
}

/* ==========================================================
   CITY BUTTONS
   ========================================================== */

.tariffs-clean-page .city-buttons,
.tariffs-clean-page .settlement-buttons,
.tariffs-clean-page .tariffs-city-buttons,
.tariffs-clean-page .location-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
  width: min(100%, 760px) !important;
  margin: 0 auto 24px !important;
}

.tariffs-clean-page .city-buttons button,
.tariffs-clean-page .settlement-buttons button,
.tariffs-clean-page .tariffs-city-buttons button,
.tariffs-clean-page .location-buttons button,
.tariffs-clean-page .city-chip,
.tariffs-clean-page .location-chip,
.tariffs-clean-page .settlement-chip {
  min-height: 54px !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;

  background: #ffffff !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  text-decoration: none !important;

  box-shadow: 0 10px 22px rgba(15,23,42,.04) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}

.tariffs-clean-page .city-buttons button:hover,
.tariffs-clean-page .settlement-buttons button:hover,
.tariffs-clean-page .tariffs-city-buttons button:hover,
.tariffs-clean-page .location-buttons button:hover,
.tariffs-clean-page .city-chip:hover,
.tariffs-clean-page .location-chip:hover,
.tariffs-clean-page .settlement-chip:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(34,197,94,.24) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.07) !important;
}

/* Active city */
.tariffs-clean-page .city-buttons button.active,
.tariffs-clean-page .settlement-buttons button.active,
.tariffs-clean-page .tariffs-city-buttons button.active,
.tariffs-clean-page .location-buttons button.active,
.tariffs-clean-page .city-chip.active,
.tariffs-clean-page .location-chip.active,
.tariffs-clean-page .settlement-chip.active {
  background: linear-gradient(135deg, #16bd55 0%, #18d87d 55%, #39f018 125%) !important;
  border-color: rgba(255,255,255,.25) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow: 0 16px 32px rgba(25,210,105,.20) !important;
}

html[data-theme="dark"] .tariffs-clean-page .city-buttons button,
html[data-theme="dark"] .tariffs-clean-page .settlement-buttons button,
html[data-theme="dark"] .tariffs-clean-page .tariffs-city-buttons button,
html[data-theme="dark"] .tariffs-clean-page .location-buttons button,
html[data-theme="dark"] .tariffs-clean-page .city-chip,
html[data-theme="dark"] .tariffs-clean-page .location-chip,
html[data-theme="dark"] .tariffs-clean-page .settlement-chip {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(226,232,240,.14) !important;

  color: rgba(247,255,249,.88) !important;
  -webkit-text-fill-color: rgba(247,255,249,.88) !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .tariffs-clean-page .city-buttons button.active,
html[data-theme="dark"] .tariffs-clean-page .settlement-buttons button.active,
html[data-theme="dark"] .tariffs-clean-page .tariffs-city-buttons button.active,
html[data-theme="dark"] .tariffs-clean-page .location-buttons button.active,
html[data-theme="dark"] .tariffs-clean-page .city-chip.active,
html[data-theme="dark"] .tariffs-clean-page .location-chip.active,
html[data-theme="dark"] .tariffs-clean-page .settlement-chip.active {
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(126,240,77,.28) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================
   SELECTED CITY SUMMARY BAR
   ========================================================== */

.tariffs-clean-page .selected-city-bar,
.tariffs-clean-page .city-summary,
.tariffs-clean-page .tariffs-selected-city,
.tariffs-clean-page .tariffs-clean-summary {
  width: 100% !important;
  min-height: 74px !important;
  padding: 16px 26px !important;

  display: grid !important;
  grid-template-columns: 1.2fr 1fr .9fr !important;
  align-items: center !important;
  gap: 20px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background:
    linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.03)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 10px 22px rgba(15,23,42,.04) !important;
}

.tariffs-clean-page .selected-city-bar > *,
.tariffs-clean-page .city-summary > *,
.tariffs-clean-page .tariffs-selected-city > *,
.tariffs-clean-page .tariffs-clean-summary > * {
  min-width: 0 !important;
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 720 !important;
}

.tariffs-clean-page .selected-city-bar strong,
.tariffs-clean-page .city-summary strong,
.tariffs-clean-page .tariffs-selected-city strong,
.tariffs-clean-page .tariffs-clean-summary strong {
  font-size: 23px !important;
  line-height: 1.1 !important;
  font-weight: 860 !important;
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}

.tariffs-clean-page .selected-city-bar b,
.tariffs-clean-page .city-summary b,
.tariffs-clean-page .tariffs-selected-city b,
.tariffs-clean-page .tariffs-clean-summary b {
  font-weight: 900 !important;
}

html[data-theme="dark"] .tariffs-clean-page .selected-city-bar,
html[data-theme="dark"] .tariffs-clean-page .city-summary,
html[data-theme="dark"] .tariffs-clean-page .tariffs-selected-city,
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-summary {
  border-color: rgba(226,232,240,.16) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .tariffs-clean-page .selected-city-bar > *,
html[data-theme="dark"] .tariffs-clean-page .city-summary > *,
html[data-theme="dark"] .tariffs-clean-page .tariffs-selected-city > *,
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-summary > * {
  color: rgba(247,255,249,.86) !important;
  -webkit-text-fill-color: rgba(247,255,249,.86) !important;
}

html[data-theme="dark"] .tariffs-clean-page .selected-city-bar strong,
html[data-theme="dark"] .tariffs-clean-page .city-summary strong,
html[data-theme="dark"] .tariffs-clean-page .tariffs-selected-city strong,
html[data-theme="dark"] .tariffs-clean-page .tariffs-clean-summary strong {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .tariffs-clean-page .tariffs-clean-hero,
  .tariffs-clean-page .tariffs-hero,
  .tariffs-clean-page .tariffs-page-hero {
    padding: 48px 24px 34px !important;
  }

  .tariffs-clean-page .tariffs-clean-controls-top,
  .tariffs-clean-page .selector-top,
  .tariffs-clean-page .city-selector-top {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .tariffs-clean-page .city-buttons,
  .tariffs-clean-page .settlement-buttons,
  .tariffs-clean-page .tariffs-city-buttons,
  .tariffs-clean-page .location-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .tariffs-clean-page .selected-city-bar,
  .tariffs-clean-page .city-summary,
  .tariffs-clean-page .tariffs-selected-city,
  .tariffs-clean-page .tariffs-clean-summary {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  .tariffs-clean-page .tariffs-clean-hero,
  .tariffs-clean-page .tariffs-hero,
  .tariffs-clean-page .tariffs-page-hero {
    margin-top: 16px !important;
    padding: 36px 16px 24px !important;
    border-radius: 24px !important;
  }

  .tariffs-clean-page .tariffs-clean-hero h1,
  .tariffs-clean-page .tariffs-hero h1,
  .tariffs-clean-page .tariffs-page-hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.04 !important;
  }

  .tariffs-clean-page .tariffs-clean-hero > p,
  .tariffs-clean-page .tariffs-hero > p,
  .tariffs-clean-page .tariffs-page-hero > p {
    margin-bottom: 24px !important;
    font-size: 14px !important;
  }

  .tariffs-clean-page .tariffs-clean-selector,
  .tariffs-clean-page .tariffs-selector,
  .tariffs-clean-page .city-selector-card,
  .tariffs-clean-page .tariffs-clean-controls {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  .tariffs-clean-page .city-buttons,
  .tariffs-clean-page .settlement-buttons,
  .tariffs-clean-page .tariffs-city-buttons,
  .tariffs-clean-page .location-buttons {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .tariffs-clean-page select,
  .tariffs-clean-page .city-select,
  .tariffs-clean-page .city-buttons button,
  .tariffs-clean-page .settlement-buttons button,
  .tariffs-clean-page .tariffs-city-buttons button,
  .tariffs-clean-page .location-buttons button,
  .tariffs-clean-page .city-chip,
  .tariffs-clean-page .location-chip,
  .tariffs-clean-page .settlement-chip {
    min-height: 50px !important;
  }

  .tariffs-clean-page .selected-city-bar,
  .tariffs-clean-page .city-summary,
  .tariffs-clean-page .tariffs-selected-city,
  .tariffs-clean-page .tariffs-clean-summary {
    padding: 16px !important;
    border-radius: 16px !important;
  }
}
/* ==========================================================
   ZasNet Video 01 — Hero Banner
   Вкладка "Відеоспостереження": тільки верхній банер.

   Ставити в самий кінець site.css.
   Не чіпає 4 картки під банером, пакети, форми, футер.
   ========================================================== */

/* ---------- Page width safety ---------- */
.video-page {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================
   LIGHT THEME — світлий банер, темний текст
   ========================================================== */

.video-page > .video-hero,
.video-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: 100% !important;
  min-height: clamp(390px, 33vw, 500px) !important;
  margin: 22px auto 0 !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .09) !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(247,252,249,.94) 34%,
      rgba(236,248,241,.66) 54%,
      rgba(236,248,241,.20) 78%,
      rgba(236,248,241,.04) 100%
    ),
    radial-gradient(circle at 84% 72%, rgba(57,240,24,.20), transparent 30%),
    url("../img/video-surveillance-hero.png") center right / cover no-repeat !important;

  box-shadow:
    0 22px 58px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

/* легка м’яка пляма під текстом */
.video-hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: -80px !important;
  top: -80px !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.10), transparent 66%) !important;
  pointer-events: none !important;
}

.video-hero > div {
  position: relative !important;
  z-index: 2 !important;

  width: min(100%, 650px) !important;
  max-width: 650px !important;
  padding: clamp(42px, 4.2vw, 66px) clamp(34px, 4vw, 64px) !important;
}

/* badge */
.video-hero .home-kicker,
.video-hero .eyebrow,
.video-hero .hero-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(22, 163, 74, .22) !important;

  background: rgba(34,197,94,.10) !important;

  color: #16803b !important;
  -webkit-text-fill-color: #16803b !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.006em !important;
}

/* title */
.video-hero h1 {
  max-width: 620px !important;
  margin: 18px 0 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(42px, 4.7vw, 72px) !important;
  line-height: .98 !important;
  font-weight: 880 !important;
  letter-spacing: -0.048em !important;

  text-shadow: none !important;
}

/* text */
.video-hero p {
  max-width: 520px !important;
  margin: 18px 0 0 !important;

  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;

  font-size: 17px !important;
  line-height: 1.58 !important;
  font-weight: 520 !important;

  opacity: 1 !important;
}

/* actions */
.video-hero .hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 28px !important;
}

.video-hero .btn,
.video-hero .hero-actions .btn {
  min-height: 50px !important;
  padding: 0 24px !important;

  border-radius: 15px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.006em !important;

  text-decoration: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}

.video-hero .btn.primary,
.video-hero .btn.green,
.video-hero .hero-actions .btn.primary,
.video-hero .hero-actions .btn.green {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid rgba(255,255,255,.25) !important;

  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(25,210,105,.22) !important;
}

.video-hero .btn.light,
.video-hero .btn.secondary,
.video-hero .hero-actions .btn.light,
.video-hero .hero-actions .btn.secondary {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  border: 1px solid rgba(15,23,42,.10) !important;

  background: rgba(255,255,255,.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 12px 26px rgba(15,23,42,.07) !important;
}

.video-hero .btn:hover,
.video-hero .hero-actions .btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
}

/* ==========================================================
   DARK THEME — темний банер, світлий текст
   ========================================================== */

html[data-theme="dark"] .video-page > .video-hero,
html[data-theme="dark"] .video-hero {
  border-color: rgba(226,232,240,.16) !important;

  background:
    linear-gradient(
      90deg,
      rgba(10, 30, 27, .94) 0%,
      rgba(13, 37, 33, .86) 38%,
      rgba(13, 37, 33, .44) 68%,
      rgba(13, 37, 33, .10) 100%
    ),
    radial-gradient(circle at 84% 72%, rgba(57,240,24,.18), transparent 30%),
    url("../img/video-surveillance-hero.png") center right / cover no-repeat !important;

  box-shadow:
    0 24px 62px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .video-hero::before {
  background: radial-gradient(circle, rgba(126,240,77,.10), transparent 66%) !important;
}

html[data-theme="dark"] .video-hero .home-kicker,
html[data-theme="dark"] .video-hero .eyebrow,
html[data-theme="dark"] .video-hero .hero-kicker {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;

  background: rgba(185,255,98,.12) !important;
  border-color: rgba(185,255,98,.30) !important;
}

html[data-theme="dark"] .video-hero h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] .video-hero p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}

html[data-theme="dark"] .video-hero .btn.light,
html[data-theme="dark"] .video-hero .btn.secondary,
html[data-theme="dark"] .video-hero .hero-actions .btn.light,
html[data-theme="dark"] .video-hero .hero-actions .btn.secondary {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.16) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  .video-page {
    width: calc(100% - 32px) !important;
  }

  .video-page > .video-hero,
  .video-hero {
    min-height: auto !important;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.98) 0%,
        rgba(247,252,249,.94) 46%,
        rgba(236,248,241,.46) 100%
      ),
      url("../img/video-surveillance-hero.png") 58% bottom / cover no-repeat !important;
  }

  html[data-theme="dark"] .video-page > .video-hero,
  html[data-theme="dark"] .video-hero {
    background:
      linear-gradient(
        180deg,
        rgba(10,30,27,.96) 0%,
        rgba(13,37,33,.86) 48%,
        rgba(13,37,33,.32) 100%
      ),
      url("../img/video-surveillance-hero.png") 58% bottom / cover no-repeat !important;
  }

  .video-hero > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 34px 26px 250px !important;
  }
}

@media (max-width: 640px) {
  .video-page {
    width: calc(100% - 20px) !important;
  }

  .video-page > .video-hero,
  .video-hero {
    border-radius: 24px !important;
  }

  .video-hero > div {
    padding: 28px 20px 230px !important;
  }

  .video-hero h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
  }

  .video-hero p {
    font-size: 15px !important;
    line-height: 1.52 !important;
  }

  .video-hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .video-hero .hero-actions .btn,
  .video-hero .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
}
/* ==========================================================
   ZasNet Video 03 — Photo Cards
   Вкладка "Відеоспостереження": 3 картки з фото:
   - Камера на будинку
   - Перегляд зі смартфона
   - NVR та архів записів

   КАРТИНКИ НЕ ЧІПАЄМО:
   object-fit, src, background-image не змінюються.

   Ставити в самий кінець site.css після Video 01.
   ========================================================== */

/* ==========================================================
   GRID
   ========================================================== */

.video-page .video-cards,
.video-page .video-photo-cards,
.video-page .video-services-grid,
.video-page .video-gallery-grid,
.video-page .camera-cards,
.video-page .video-use-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.4vw, 34px) !important;
  margin: clamp(24px, 3vw, 42px) auto clamp(34px, 4vw, 54px) !important;
}

/* Якщо на сторінці сітка не має окремого класу, підхоплюємо перший блок карток з фото */
.video-page .video-hero + * + *:has(img),
.video-page .video-hero + *:has(img) {
  gap: clamp(22px, 2.4vw, 34px) !important;
}

/* ==========================================================
   CARD
   ========================================================== */

.video-page .video-cards > *,
.video-page .video-photo-cards > *,
.video-page .video-services-grid > *,
.video-page .video-gallery-grid > *,
.video-page .camera-cards > *,
.video-page .video-use-grid > *,
.video-page article:has(img):has(h3),
.video-page .card:has(img):has(h3) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background: rgba(255,255,255,.96) !important;

  box-shadow:
    0 18px 42px rgba(15, 23, 42, .075),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease !important;
}

/* м’яке світіння, без зміни фото */
.video-page .video-cards > *::after,
.video-page .video-photo-cards > *::after,
.video-page .video-services-grid > *::after,
.video-page .video-gallery-grid > *::after,
.video-page .camera-cards > *::after,
.video-page .video-use-grid > *::after,
.video-page article:has(img):has(h3)::after,
.video-page .card:has(img):has(h3)::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -70px -90px auto !important;
  width: 230px !important;
  height: 180px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.10), transparent 68%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* hover */
.video-page .video-cards > *:hover,
.video-page .video-photo-cards > *:hover,
.video-page .video-services-grid > *:hover,
.video-page .video-gallery-grid > *:hover,
.video-page .camera-cards > *:hover,
.video-page .video-use-grid > *:hover,
.video-page article:has(img):has(h3):hover,
.video-page .card:has(img):has(h3):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34,197,94,.18) !important;
  box-shadow:
    0 24px 54px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* ==========================================================
   IMAGE AREA — без зміни самої картинки
   ========================================================== */

.video-page .video-cards img,
.video-page .video-photo-cards img,
.video-page .video-services-grid img,
.video-page .video-gallery-grid img,
.video-page .camera-cards img,
.video-page .video-use-grid img,
.video-page article:has(img):has(h3) img,
.video-page .card:has(img):has(h3) img {
  display: block !important;
  width: 100% !important;
  height: auto !important;

  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* Якщо висота фото вже задана в основному CSS — не перебиваємо її.
   Лише додаємо розділювач між фото і текстом. */
.video-page .video-cards img,
.video-page .video-photo-cards img,
.video-page .video-services-grid img,
.video-page .video-gallery-grid img,
.video-page .camera-cards img,
.video-page .video-use-grid img {
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

/* ==========================================================
   TEXT AREA
   ========================================================== */

.video-page .video-cards h3,
.video-page .video-photo-cards h3,
.video-page .video-services-grid h3,
.video-page .video-gallery-grid h3,
.video-page .camera-cards h3,
.video-page .video-use-grid h3,
.video-page article:has(img):has(h3) h3,
.video-page .card:has(img):has(h3) h3 {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 !important;
  padding: 26px 28px 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(22px, 1.55vw, 28px) !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -0.022em !important;
}

.video-page .video-cards p,
.video-page .video-photo-cards p,
.video-page .video-services-grid p,
.video-page .video-gallery-grid p,
.video-page .camera-cards p,
.video-page .video-use-grid p,
.video-page article:has(img):has(h3) p,
.video-page .card:has(img):has(h3) p {
  position: relative !important;
  z-index: 2 !important;

  margin: 12px 0 0 !important;
  padding: 0 28px 30px !important;

  color: #43546a !important;
  -webkit-text-fill-color: #43546a !important;

  font-size: 16px !important;
  line-height: 1.62 !important;
  font-weight: 460 !important;
}

/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .video-page .video-cards > *,
html[data-theme="dark"] .video-page .video-photo-cards > *,
html[data-theme="dark"] .video-page .video-services-grid > *,
html[data-theme="dark"] .video-page .video-gallery-grid > *,
html[data-theme="dark"] .video-page .camera-cards > *,
html[data-theme="dark"] .video-page .video-use-grid > *,
html[data-theme="dark"] .video-page article:has(img):has(h3),
html[data-theme="dark"] .video-page .card:has(img):has(h3) {
  border-color: rgba(226,232,240,.14) !important;

  background:
    radial-gradient(circle at 100% 100%, rgba(34,197,94,.07), transparent 36%),
    rgba(255,255,255,.075) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .video-page .video-cards > *:hover,
html[data-theme="dark"] .video-page .video-photo-cards > *:hover,
html[data-theme="dark"] .video-page .video-services-grid > *:hover,
html[data-theme="dark"] .video-page .video-gallery-grid > *:hover,
html[data-theme="dark"] .video-page .camera-cards > *:hover,
html[data-theme="dark"] .video-page .video-use-grid > *:hover,
html[data-theme="dark"] .video-page article:has(img):has(h3):hover,
html[data-theme="dark"] .video-page .card:has(img):has(h3):hover {
  border-color: rgba(126,240,77,.22) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .video-page .video-cards img,
html[data-theme="dark"] .video-page .video-photo-cards img,
html[data-theme="dark"] .video-page .video-services-grid img,
html[data-theme="dark"] .video-page .video-gallery-grid img,
html[data-theme="dark"] .video-page .camera-cards img,
html[data-theme="dark"] .video-page .video-use-grid img {
  border-bottom-color: rgba(226,232,240,.10) !important;
}

html[data-theme="dark"] .video-page .video-cards h3,
html[data-theme="dark"] .video-page .video-photo-cards h3,
html[data-theme="dark"] .video-page .video-services-grid h3,
html[data-theme="dark"] .video-page .video-gallery-grid h3,
html[data-theme="dark"] .video-page .camera-cards h3,
html[data-theme="dark"] .video-page .video-use-grid h3,
html[data-theme="dark"] .video-page article:has(img):has(h3) h3,
html[data-theme="dark"] .video-page .card:has(img):has(h3) h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .video-page .video-cards p,
html[data-theme="dark"] .video-page .video-photo-cards p,
html[data-theme="dark"] .video-page .video-services-grid p,
html[data-theme="dark"] .video-page .video-gallery-grid p,
html[data-theme="dark"] .video-page .camera-cards p,
html[data-theme="dark"] .video-page .video-use-grid p,
html[data-theme="dark"] .video-page article:has(img):has(h3) p,
html[data-theme="dark"] .video-page .card:has(img):has(h3) p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  .video-page .video-cards,
  .video-page .video-photo-cards,
  .video-page .video-services-grid,
  .video-page .video-gallery-grid,
  .video-page .camera-cards,
  .video-page .video-use-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .video-page .video-cards h3,
  .video-page .video-photo-cards h3,
  .video-page .video-services-grid h3,
  .video-page .video-gallery-grid h3,
  .video-page .camera-cards h3,
  .video-page .video-use-grid h3,
  .video-page article:has(img):has(h3) h3,
  .video-page .card:has(img):has(h3) h3 {
    padding: 22px 22px 0 !important;
  }

  .video-page .video-cards p,
  .video-page .video-photo-cards p,
  .video-page .video-services-grid p,
  .video-page .video-gallery-grid p,
  .video-page .camera-cards p,
  .video-page .video-use-grid p,
  .video-page article:has(img):has(h3) p,
  .video-page .card:has(img):has(h3) p {
    padding: 0 22px 24px !important;
  }
}

@media (max-width: 640px) {
  .video-page .video-cards > *,
  .video-page .video-photo-cards > *,
  .video-page .video-services-grid > *,
  .video-page .video-gallery-grid > *,
  .video-page .camera-cards > *,
  .video-page .video-use-grid > *,
  .video-page article:has(img):has(h3),
  .video-page .card:has(img):has(h3) {
    border-radius: 20px !important;
  }

  .video-page .video-cards h3,
  .video-page .video-photo-cards h3,
  .video-page .video-services-grid h3,
  .video-page .video-gallery-grid h3,
  .video-page .camera-cards h3,
  .video-page .video-use-grid h3,
  .video-page article:has(img):has(h3) h3,
  .video-page .card:has(img):has(h3) h3 {
    font-size: 22px !important;
  }

  .video-page .video-cards p,
  .video-page .video-photo-cards p,
  .video-page .video-services-grid p,
  .video-page .video-gallery-grid p,
  .video-page .camera-cards p,
  .video-page .video-use-grid p,
  .video-page article:has(img):has(h3) p,
  .video-page .card:has(img):has(h3) p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}
/* ==========================================================
   ZasNet Video 04 v2 — Packages TARGETED
   ТІЛЬКИ блок "Пакети відеоспостереження".

   Перед встановленням:
   1) Видалити старий:
      Video 04 — packages
   2) Вставити цей код у самий кінець site.css.

   Працює тільки з реальними класами:
   .video-packages
   .video-package-grid
   .video-package-card
   .video-package-head
   .video-price
   .plan-chip
   .camera-visual

   Не чіпає 3 фото-картки вище.
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.video-packages {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin: clamp(42px, 4vw, 64px) auto clamp(36px, 4vw, 58px) !important;
}

.video-packages .section-title {
  margin: 0 auto 34px !important;
  text-align: center !important;
}

.video-packages .section-title h2 {
  max-width: 940px !important;
  margin: 0 auto 10px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(42px, 4.35vw, 72px) !important;
  line-height: 1.02 !important;
  font-weight: 880 !important;
  letter-spacing: -0.046em !important;
}

.video-packages .section-title p {
  max-width: 640px !important;
  margin: 0 auto !important;

  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;

  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 540 !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.video-package-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.4vw, 34px) !important;
  align-items: stretch !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.video-package-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 560px !important;
  padding: 34px 34px 30px !important;

  display: flex !important;
  flex-direction: column !important;

  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, .09) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(34,197,94,.055), transparent 34%),
    rgba(255,255,255,.96) !important;

  color: #071427 !important;

  box-shadow:
    0 18px 42px rgba(15, 23, 42, .075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease !important;
}

.video-package-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34,197,94,.20) !important;
  box-shadow:
    0 24px 54px rgba(15, 23, 42, .105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* рекомендована середня */
.video-package-card.featured {
  border-color: rgba(34,197,94,.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.13), transparent 42%),
    linear-gradient(180deg, rgba(245,255,249,.98), rgba(255,255,255,.96)) !important;

  box-shadow:
    0 24px 56px rgba(34,197,94,.14),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}


/* ==========================================================
   FEATURED RIBBON / BADGES
   ========================================================== */

/* бейдж "Рекомендований" */
.video-package-card.featured::before {
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;

  min-height: 30px !important;
  padding: 0 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.26) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background: linear-gradient(135deg, #16bd55 0%, #39f018 120%) !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  box-shadow: 0 14px 28px rgba(34,197,94,.22) !important;
}

/* план-чіп "Популярний" */
.video-package-card .plan-chip {
  position: absolute !important;
  top: 18px !important;
  left: 28px !important;
  z-index: 6 !important;

  min-height: 30px !important;
  padding: 0 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(22,163,74,.18) !important;

  color: #16803b !important;
  -webkit-text-fill-color: #16803b !important;

  background: rgba(34,197,94,.10) !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* щоб у середній картці заголовок не залазив під бейджі */
.video-package-card.featured {
  padding-top: 58px !important;
}


/* ==========================================================
   CARD HEAD
   ========================================================== */

.video-package-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;

  margin: 0 0 24px !important;
  padding-bottom: 20px !important;

  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

.video-package-head > div {
  min-width: 0 !important;
  display: block !important;
}

.video-package-head h3 {
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(25px, 1.9vw, 33px) !important;
  line-height: 1.12 !important;
  font-weight: 860 !important;
  letter-spacing: -0.028em !important;
}

/* бейдж кількості камер справа */
.video-package-head small,
.video-package-card .camera-count,
.video-package-card .package-count {
  flex: 0 0 auto !important;

  min-height: 32px !important;
  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  background: #eef8ef !important;

  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}


/* ==========================================================
   CAMERA VISUAL
   ========================================================== */

.video-package-card .camera-visual {
  display: none !important;
}


/* ==========================================================
   PRICE
   ========================================================== */

.video-price {
  margin: 0 0 14px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(44px, 4vw, 64px) !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}

.video-price span,
.video-price small {
  margin-left: 8px !important;

  color: #526275 !important;
  -webkit-text-fill-color: #526275 !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.video-package-card > p {
  min-height: 48px !important;
  margin: 0 0 26px !important;

  color: #4b5c70 !important;
  -webkit-text-fill-color: #4b5c70 !important;

  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 480 !important;
}


/* ==========================================================
   LIST
   ========================================================== */

.video-package-card ul {
  display: grid !important;
  gap: 13px !important;

  min-height: 150px !important;
  margin: 0 0 30px !important;
  padding: 0 !important;

  list-style: none !important;
}

.video-package-card li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 26px !important;

  color: #43546a !important;
  -webkit-text-fill-color: #43546a !important;

  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

.video-package-card li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  font-weight: 900 !important;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.video-package-card .btn {
  margin-top: auto !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 20px !important;

  border-radius: 15px !important;
  border: 1px solid rgba(15,23,42,.12) !important;

  background: rgba(255,255,255,.82) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 22px rgba(15,23,42,.045) !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}

.video-package-card .btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
}

/* середня кнопка зелена */
.video-package-card.featured .btn,
.video-package-card .btn.primary,
.video-package-card.featured .btn.light,
.video-package-card.featured .btn.dark {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: rgba(255,255,255,.25) !important;
  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(25,210,105,.22) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .video-packages .section-title h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .video-packages .section-title p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

html[data-theme="dark"] .video-package-card {
  border-color: rgba(226,232,240,.14) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.075) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .video-package-card.featured {
  border-color: rgba(126,240,77,.26) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(126,240,77,.10), transparent 44%),
    rgba(255,255,255,.08) !important;

  box-shadow:
    0 22px 54px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .video-package-head {
  border-bottom-color: rgba(226,232,240,.10) !important;
}

html[data-theme="dark"] .video-package-head h3,
html[data-theme="dark"] .video-price {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .video-price span,
html[data-theme="dark"] .video-price small,
html[data-theme="dark"] .video-package-card > p,
html[data-theme="dark"] .video-package-card li {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

html[data-theme="dark"] .video-package-card li::before {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

html[data-theme="dark"] .video-package-card .plan-chip {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;

  background: rgba(185,255,98,.12) !important;
  border-color: rgba(185,255,98,.22) !important;
}

html[data-theme="dark"] .video-package-head small,
html[data-theme="dark"] .video-package-card .camera-count,
html[data-theme="dark"] .video-package-card .package-count {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.16) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
}

html[data-theme="dark"] .video-package-card .btn {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .video-package-card.featured .btn,
html[data-theme="dark"] .video-package-card .btn.primary,
html[data-theme="dark"] .video-package-card.featured .btn.light,
html[data-theme="dark"] .video-package-card.featured .btn.dark {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border-color: rgba(255,255,255,.25) !important;
  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .video-packages {
    width: min(100% - 36px, 1560px) !important;
  }

  .video-package-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .video-package-card,
  .video-package-card.featured {
    min-height: auto !important;
  }

  .video-package-card ul {
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  .video-packages {
    width: min(100% - 24px, 1560px) !important;
    margin-top: 34px !important;
  }

  .video-packages .section-title h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.08 !important;
  }

  .video-package-card,
  .video-package-card.featured {
    padding: 24px 18px 22px !important;
    border-radius: 20px !important;
  }

  .video-package-card.featured {
    padding-top: 56px !important;
  }

  .video-package-card.featured::before {
    top: 12px !important;
    transform: translateX(-50%) scale(.94) !important;
  }

  .video-package-card .plan-chip {
    top: 14px !important;
    left: 18px !important;
  }

  .video-package-head {
    gap: 12px !important;
  }

  .video-package-head h3 {
    font-size: 25px !important;
  }

  .video-price {
    font-size: 42px !important;
  }
}
/* ==========================================================
   ZasNet Video 04.1 — Softer Typography
   Маленький фікс шрифтів для вкладки "Відеоспостереження".

   Ставити ПІСЛЯ:
   - Video 01 — hero banner
   - Video 04 v2 — Packages TARGETED

   Що робить:
   - банерний заголовок не такий жирний
   - "Пакети відеоспостереження" не такий важкий
   - ціни в пакетах не такі грубі
   ========================================================== */


/* ---------- HERO TITLE ---------- */
.video-hero h1 {
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;
}

html[data-theme="dark"] .video-hero h1 {
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;
}


/* ---------- PACKAGES SECTION TITLE ---------- */
.video-packages .section-title h2 {
  font-weight: 780 !important;
  letter-spacing: -0.036em !important;
  line-height: 1.06 !important;
}

html[data-theme="dark"] .video-packages .section-title h2 {
  font-weight: 780 !important;
  letter-spacing: -0.036em !important;
  line-height: 1.06 !important;
}


/* ---------- PACKAGE CARD TITLES ---------- */
.video-package-head h3 {
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}

html[data-theme="dark"] .video-package-head h3 {
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}


/* ---------- PRICES ---------- */
.video-price {
  font-weight: 780 !important;
  letter-spacing: -0.040em !important;
}

.video-price span,
.video-price small {
  font-weight: 720 !important;
}

html[data-theme="dark"] .video-price {
  font-weight: 780 !important;
  letter-spacing: -0.040em !important;
}

html[data-theme="dark"] .video-price span,
html[data-theme="dark"] .video-price small {
  font-weight: 720 !important;
}


/* ---------- MOBILE: still readable ---------- */
@media (max-width: 640px) {
  .video-hero h1,
  .video-packages .section-title h2 {
    font-weight: 780 !important;
    letter-spacing: -0.032em !important;
  }

  .video-price {
    font-weight: 780 !important;
    letter-spacing: -0.034em !important;
  }
}
/* ==========================================================
   ZasNet Video 05 — Installation Box
   Вкладка "Відеоспостереження":
   блок "Що входить у встановлення"

   Точний клас з сайту:
   .video-install-box

   Ставити в самий кінець site.css після Video 04.1.
   Не чіпає банер, фото-картки, пакети та форму консультації.
   ========================================================== */


/* ==========================================================
   BOX
   ========================================================== */

.video-install-box {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;

  margin: clamp(34px, 4vw, 58px) auto !important;
  padding: clamp(34px, 3.2vw, 48px) clamp(34px, 4vw, 64px) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr) auto !important;
  gap: clamp(32px, 4vw, 70px) !important;
  align-items: center !important;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 88% 18%, rgba(34,197,94,.08), transparent 30%),
    radial-gradient(circle at 4% 84%, rgba(34,197,94,.06), transparent 32%),
    rgba(255,255,255,.97) !important;

  box-shadow:
    0 20px 52px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  color: #071427 !important;
}

.video-install-box::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: auto -110px -150px auto !important;
  width: 420px !important;
  height: 300px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.12), transparent 68%) !important;
  pointer-events: none !important;
}

.video-install-box > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   LEFT CONTENT
   ========================================================== */

/* badge "Монтаж" */
.video-install-box .home-kicker,
.video-install-box .eyebrow,
.video-install-box .section-kicker,
.video-install-box > div:first-child > span:first-child,
.video-install-box > div:first-child > b:first-child,
.video-install-box > div:first-child > small:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 34px !important;
  padding: 0 16px !important;
  margin: 0 0 22px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(22,163,74,.20) !important;

  background: rgba(34,197,94,.08) !important;

  color: #16803b !important;
  -webkit-text-fill-color: #16803b !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
}

.video-install-box h2 {
  max-width: 720px !important;
  margin: 0 0 16px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(36px, 3.8vw, 58px) !important;
  line-height: 1.06 !important;
  font-weight: 780 !important;
  letter-spacing: -0.036em !important;
}

.video-install-box p {
  max-width: 780px !important;
  margin: 0 !important;

  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;

  font-size: 17px !important;
  line-height: 1.62 !important;
  font-weight: 480 !important;
}


/* ==========================================================
   LIST
   ========================================================== */

.video-install-box ul {
  display: grid !important;
  gap: 16px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.video-install-box li {
  position: relative !important;
  min-height: 30px !important;
  padding-left: 34px !important;

  display: flex !important;
  align-items: center !important;

  color: #142033 !important;
  -webkit-text-fill-color: #142033 !important;

  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 720 !important;
  letter-spacing: -0.012em !important;
}

.video-install-box li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 22px !important;
  height: 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  background: rgba(34,197,94,.10) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.video-install-box .btn,
.video-install-box a.btn,
.video-install-box button {
  min-width: 230px !important;
  min-height: 56px !important;
  padding: 0 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.25) !important;

  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(25,210,105,.22) !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease !important;
}

.video-install-box .btn:hover,
.video-install-box a.btn:hover,
.video-install-box button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 20px 40px rgba(25,210,105,.28) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .video-install-box {
  border-color: rgba(226,232,240,.14) !important;

  background:
    radial-gradient(circle at 88% 18%, rgba(126,240,77,.07), transparent 30%),
    radial-gradient(circle at 4% 84%, rgba(34,197,94,.09), transparent 32%),
    linear-gradient(135deg, rgba(37,73,58,.92), rgba(28,60,51,.92)) !important;

  box-shadow:
    0 20px 52px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  color: #f7fff9 !important;
}

html[data-theme="dark"] .video-install-box::before {
  background: radial-gradient(circle, rgba(126,240,77,.10), transparent 68%) !important;
}

html[data-theme="dark"] .video-install-box .home-kicker,
html[data-theme="dark"] .video-install-box .eyebrow,
html[data-theme="dark"] .video-install-box .section-kicker,
html[data-theme="dark"] .video-install-box > div:first-child > span:first-child,
html[data-theme="dark"] .video-install-box > div:first-child > b:first-child,
html[data-theme="dark"] .video-install-box > div:first-child > small:first-child {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;

  background: rgba(185,255,98,.12) !important;
  border-color: rgba(185,255,98,.24) !important;
}

html[data-theme="dark"] .video-install-box h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .video-install-box p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

html[data-theme="dark"] .video-install-box li {
  color: rgba(247,255,249,.88) !important;
  -webkit-text-fill-color: rgba(247,255,249,.88) !important;
}

html[data-theme="dark"] .video-install-box li::before {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
  background: rgba(126,240,77,.10) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .video-install-box {
    width: min(100% - 36px, 1560px) !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .video-install-box .btn,
  .video-install-box a.btn,
  .video-install-box button {
    width: fit-content !important;
  }
}

@media (max-width: 760px) {
  .video-install-box {
    width: min(100% - 24px, 1560px) !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  .video-install-box h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .video-install-box p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .video-install-box li {
    font-size: 16px !important;
  }

  .video-install-box .btn,
  .video-install-box a.btn,
  .video-install-box button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
  }
}
/* ==========================================================
   ZasNet Video 06 — Consultation Form
   Вкладка "Відеоспостереження":
   блок "Безкоштовна консультація та виїзд спеціаліста"

   Точний клас:
   .video-consult

   Ставити в самий кінець site.css після Video 05.
   Не чіпає банер, пакети, фото-картки, футер.
   ========================================================== */


/* ==========================================================
   MAIN BOX
   ========================================================== */

.video-consult {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;

  margin: clamp(34px, 4vw, 58px) auto !important;
  padding: clamp(34px, 3.2vw, 48px) clamp(34px, 4vw, 64px) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr) !important;
  gap: clamp(34px, 4vw, 72px) !important;
  align-items: center !important;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 4% 14%, rgba(34,197,94,.07), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(34,197,94,.08), transparent 30%),
    rgba(255,255,255,.97) !important;

  color: #071427 !important;

  box-shadow:
    0 20px 52px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.video-consult::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: auto -110px -150px auto !important;
  width: 420px !important;
  height: 300px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.12), transparent 68%) !important;
  pointer-events: none !important;
}

.video-consult > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   LEFT CONTENT / FORM SIDE
   ========================================================== */

.video-consult h2 {
  max-width: 760px !important;
  margin: 0 0 18px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(36px, 3.7vw, 58px) !important;
  line-height: 1.06 !important;
  font-weight: 780 !important;
  letter-spacing: -0.036em !important;
}

.video-consult p {
  max-width: 760px !important;
  margin: 0 0 28px !important;

  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;

  font-size: 17px !important;
  line-height: 1.62 !important;
  font-weight: 480 !important;
}


/* ==========================================================
   FORM
   ========================================================== */

.video-consult form {
  width: 100% !important;
  max-width: 820px !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.video-consult input,
.video-consult textarea,
.video-consult select {
  width: 100% !important;
  min-width: 0 !important;

  border-radius: 15px !important;
  border: 1px solid rgba(15, 23, 42, .13) !important;

  background: rgba(255,255,255,.94) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 520 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 8px 18px rgba(15,23,42,.035) !important;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.video-consult input,
.video-consult select {
  min-height: 58px !important;
  padding: 0 18px !important;
}

.video-consult textarea {
  min-height: 86px !important;
  padding: 15px 18px !important;
  resize: vertical !important;
}

.video-consult input::placeholder,
.video-consult textarea::placeholder {
  color: rgba(71,85,105,.62) !important;
  -webkit-text-fill-color: rgba(71,85,105,.62) !important;
}

.video-consult input:focus,
.video-consult textarea:focus,
.video-consult select:focus {
  border-color: rgba(34,197,94,.42) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(34,197,94,.11),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* другий ряд: коментар + кнопка */
.video-consult textarea {
  grid-column: span 3 !important;
}

.video-consult button,
.video-consult .btn,
.video-consult input[type="submit"] {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 22px !important;

  align-self: stretch !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 15px !important;

  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 15px !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
  text-align: center !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(25,210,105,.22) !important;

  cursor: pointer !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease !important;
}

.video-consult button:hover,
.video-consult .btn:hover,
.video-consult input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 20px 40px rgba(25,210,105,.28) !important;
}


/* ==========================================================
   MAP / RIGHT VISUAL
   ========================================================== */

/* права плашка з картою */
.video-consult > :last-child {
  min-height: 330px !important;
  border-radius: 24px !important;
  overflow: hidden !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(34,197,94,.10) !important;

  background:
    linear-gradient(rgba(17, 145, 68, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 145, 68, .035) 1px, transparent 1px),
    radial-gradient(circle at 65% 50%, rgba(34,197,94,.12), transparent 32%),
    linear-gradient(135deg, #f7fffa 0%, #eafff2 100%) !important;
  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 14px 34px rgba(15,23,42,.045) !important;
}

/* якщо всередині svg/іконка локації */
.video-consult > :last-child svg,
.video-consult .map-visual svg,
.video-consult .coverage-map svg,
.video-consult .consult-map svg {
  width: clamp(88px, 7vw, 128px) !important;
  height: clamp(88px, 7vw, 128px) !important;
  color: #22c55e !important;
  filter: drop-shadow(0 18px 26px rgba(34,197,94,.22)) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .video-consult {
  border-color: rgba(226,232,240,.14) !important;

  background:
    radial-gradient(circle at 4% 14%, rgba(34,197,94,.09), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(126,240,77,.07), transparent 30%),
    linear-gradient(135deg, rgba(37,73,58,.92), rgba(28,60,51,.92)) !important;

  color: #f7fff9 !important;

  box-shadow:
    0 20px 52px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .video-consult::before {
  background: radial-gradient(circle, rgba(126,240,77,.10), transparent 68%) !important;
}

html[data-theme="dark"] .video-consult h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .video-consult p {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

html[data-theme="dark"] .video-consult input,
html[data-theme="dark"] .video-consult textarea,
html[data-theme="dark"] .video-consult select {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  border-color: rgba(226,232,240,.15) !important;
  background: rgba(255,255,255,.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .video-consult input::placeholder,
html[data-theme="dark"] .video-consult textarea::placeholder {
  color: rgba(240,250,245,.62) !important;
  -webkit-text-fill-color: rgba(240,250,245,.62) !important;
}

html[data-theme="dark"] .video-consult input:focus,
html[data-theme="dark"] .video-consult textarea:focus,
html[data-theme="dark"] .video-consult select:focus {
  border-color: rgba(126,240,77,.30) !important;
  background: rgba(255,255,255,.11) !important;
  box-shadow:
    0 0 0 4px rgba(126,240,77,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .video-consult > :last-child {
  border-color: rgba(126,240,77,.10) !important;

  background:
    radial-gradient(circle at 56% 50%, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(135deg, rgba(6,32,25,.88), rgba(7,45,31,.84)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 34px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .video-consult > :last-child svg,
html[data-theme="dark"] .video-consult .map-visual svg,
html[data-theme="dark"] .video-consult .coverage-map svg,
html[data-theme="dark"] .video-consult .consult-map svg {
  color: #7ef04d !important;
  filter: drop-shadow(0 18px 26px rgba(126,240,77,.20)) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .video-consult {
    width: min(100% - 36px, 1560px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .video-consult form {
    max-width: none !important;
  }

  .video-consult > :last-child {
    min-height: 260px !important;
  }
}

@media (max-width: 760px) {
  .video-consult {
    width: min(100% - 24px, 1560px) !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  .video-consult h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .video-consult p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .video-consult form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .video-consult textarea {
    grid-column: auto !important;
    min-height: 92px !important;
  }

  .video-consult input,
  .video-consult select,
  .video-consult button,
  .video-consult .btn,
  .video-consult input[type="submit"] {
    min-height: 52px !important;
  }

  .video-consult > :last-child {
    min-height: 220px !important;
    border-radius: 18px !important;
  }
}
/* ==========================================================
   ZasNet Video 07 — Why Choose Us / "Чому обирають ZasNet?"
   Вкладка "Відеоспостереження"

   Точний wrapper з сайту:
   .video-why

   Патч стилізує:
   - заголовок блоку
   - 5 карток переваг
   - іконки, відступи, типографіку
   - світлу і темну тему

   Ставити в самий кінець site.css після Video 06.
   Не чіпає банер, photo cards, пакети, installation box,
   consultation form та footer.
   ========================================================== */


/* ==========================================================
   SECTION SHELL
   ========================================================== */

.video-why {
  width: min(1640px, calc(100% - 72px)) !important;
  max-width: 1640px !important;
  margin: clamp(34px, 4vw, 58px) auto 0 !important;
}

.video-why .section-title,
.video-why .why-v2-title,
.video-why .why-title,
.video-why > h2,
.video-why > header {
  text-align: center !important;
  margin: 0 0 26px !important;
}

.video-why .section-title h2,
.video-why .why-v2-title h2,
.video-why .why-title h2,
.video-why > h2,
.video-why > header h2 {
  margin: 0 !important;
  color: #081633 !important;
  -webkit-text-fill-color: #081633 !important;
  font-size: clamp(44px, 5vw, 78px) !important;
  line-height: .98 !important;
  font-weight: 820 !important;
  letter-spacing: -.04em !important;
}

.video-why .section-title h2 span,
.video-why .why-v2-title h2 span,
.video-why .why-title h2 span,
.video-why > h2 span,
.video-why > header h2 span {
  color: #18ad45 !important;
  -webkit-text-fill-color: #18ad45 !important;
  text-shadow: 0 8px 26px rgba(24, 173, 69, .16) !important;
}

.video-why .section-title p,
.video-why .why-v2-title p,
.video-why .why-title p,
.video-why > p,
.video-why > header p {
  max-width: 760px !important;
  margin: 12px auto 0 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 450 !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.video-why .why-v2-grid,
.video-why .video-why-grid,
.video-why .why-grid,
.video-why .benefits-grid,
.video-why .reasons-grid,
.video-why > .grid,
.video-why > .cards,
.video-why > .items {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 26px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

.video-why .why-v2-grid article,
.video-why .video-why-grid article,
.video-why .why-grid article,
.video-why .benefits-grid article,
.video-why .reasons-grid article,
.video-why .why-v2-grid .card,
.video-why .video-why-grid .card,
.video-why .why-grid .card,
.video-why .benefits-grid .card,
.video-why .reasons-grid .card,
.video-why > .grid > article,
.video-why > .cards > article,
.video-why > .items > article,
.video-why > .grid > .card,
.video-why > .cards > .card,
.video-why > .items > .card {
  position: relative !important;
  min-height: 228px !important;
  padding: 22px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border-radius: 24px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 14% 10%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 36px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

.video-why .why-v2-grid article:hover,
.video-why .video-why-grid article:hover,
.video-why .why-grid article:hover,
.video-why .benefits-grid article:hover,
.video-why .reasons-grid article:hover,
.video-why .why-v2-grid .card:hover,
.video-why .video-why-grid .card:hover,
.video-why .why-grid .card:hover,
.video-why .benefits-grid .card:hover,
.video-why .reasons-grid .card:hover,
.video-why > .grid > article:hover,
.video-why > .cards > article:hover,
.video-why > .items > article:hover,
.video-why > .grid > .card:hover,
.video-why > .cards > .card:hover,
.video-why > .items > .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(22,163,74,.18) !important;
  box-shadow:
    0 20px 44px rgba(15, 23, 42, .11),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}


/* ==========================================================
   ICONS
   ========================================================== */

.video-why .home-icon,
.video-why .benefit-icon,
.video-why .reason-icon,
.video-why .card-icon,
.video-why article > i:first-child,
.video-why .card > i:first-child,
.video-why article > svg:first-child,
.video-why .card > svg:first-child {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  margin: 2px 0 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 18px !important;
  border: 1px solid rgba(22,163,74,.16) !important;

  background:
    linear-gradient(180deg, #edf9ef 0%, #dff2e5 100%) !important;

  color: #17a34a !important;
  -webkit-text-fill-color: #17a34a !important;

  font-size: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.video-why article > i:first-child::before,
.video-why .card > i:first-child::before {
  line-height: 1 !important;
}


/* ==========================================================
   CARD TEXT
   ========================================================== */

.video-why .why-v2-grid h3,
.video-why .video-why-grid h3,
.video-why .why-grid h3,
.video-why .benefits-grid h3,
.video-why .reasons-grid h3,
.video-why article h3,
.video-why .card h3 {
  margin: 0 0 12px !important;
  color: #0b1734 !important;
  -webkit-text-fill-color: #0b1734 !important;
  font-size: clamp(20px, 1.35vw, 26px) !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
}

.video-why .why-v2-grid p,
.video-why .video-why-grid p,
.video-why .why-grid p,
.video-why .benefits-grid p,
.video-why .reasons-grid p,
.video-why article p,
.video-why .card p,
.video-why article small,
.video-why .card small {
  margin: 0 !important;
  color: rgba(71, 85, 105, .94) !important;
  -webkit-text-fill-color: rgba(71, 85, 105, .94) !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  font-weight: 440 !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .video-why .section-title h2,
html[data-theme="dark"] .video-why .why-v2-title h2,
html[data-theme="dark"] .video-why .why-title h2,
html[data-theme="dark"] .video-why > h2,
html[data-theme="dark"] .video-why > header h2 {
  color: #f7fff8 !important;
  -webkit-text-fill-color: #f7fff8 !important;
}

html[data-theme="dark"] .video-why .section-title h2 span,
html[data-theme="dark"] .video-why .why-v2-title h2 span,
html[data-theme="dark"] .video-why .why-title h2 span,
html[data-theme="dark"] .video-why > h2 span,
html[data-theme="dark"] .video-why > header h2 span {
  color: #24db52 !important;
  -webkit-text-fill-color: #24db52 !important;
  text-shadow: 0 10px 28px rgba(36, 219, 82, .20) !important;
}

html[data-theme="dark"] .video-why .section-title p,
html[data-theme="dark"] .video-why .why-v2-title p,
html[data-theme="dark"] .video-why .why-title p,
html[data-theme="dark"] .video-why > p,
html[data-theme="dark"] .video-why > header p {
  color: rgba(222, 235, 226, .82) !important;
  -webkit-text-fill-color: rgba(222, 235, 226, .82) !important;
}

html[data-theme="dark"] .video-why .why-v2-grid article,
html[data-theme="dark"] .video-why .video-why-grid article,
html[data-theme="dark"] .video-why .why-grid article,
html[data-theme="dark"] .video-why .benefits-grid article,
html[data-theme="dark"] .video-why .reasons-grid article,
html[data-theme="dark"] .video-why .why-v2-grid .card,
html[data-theme="dark"] .video-why .video-why-grid .card,
html[data-theme="dark"] .video-why .why-grid .card,
html[data-theme="dark"] .video-why .benefits-grid .card,
html[data-theme="dark"] .video-why .reasons-grid .card,
html[data-theme="dark"] .video-why > .grid > article,
html[data-theme="dark"] .video-why > .cards > article,
html[data-theme="dark"] .video-why > .items > article,
html[data-theme="dark"] .video-why > .grid > .card,
html[data-theme="dark"] .video-why > .cards > .card,
html[data-theme="dark"] .video-why > .items > .card {
  border-color: rgba(226,232,240,.12) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(126,240,77,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-theme="dark"] .video-why .why-v2-grid article:hover,
html[data-theme="dark"] .video-why .video-why-grid article:hover,
html[data-theme="dark"] .video-why .why-grid article:hover,
html[data-theme="dark"] .video-why .benefits-grid article:hover,
html[data-theme="dark"] .video-why .reasons-grid article:hover,
html[data-theme="dark"] .video-why .why-v2-grid .card:hover,
html[data-theme="dark"] .video-why .video-why-grid .card:hover,
html[data-theme="dark"] .video-why .why-grid .card:hover,
html[data-theme="dark"] .video-why .benefits-grid .card:hover,
html[data-theme="dark"] .video-why .reasons-grid .card:hover,
html[data-theme="dark"] .video-why > .grid > article:hover,
html[data-theme="dark"] .video-why > .cards > article:hover,
html[data-theme="dark"] .video-why > .items > article:hover,
html[data-theme="dark"] .video-why > .grid > .card:hover,
html[data-theme="dark"] .video-why > .cards > .card:hover,
html[data-theme="dark"] .video-why > .items > .card:hover {
  border-color: rgba(126,240,77,.24) !important;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .video-why .home-icon,
html[data-theme="dark"] .video-why .benefit-icon,
html[data-theme="dark"] .video-why .reason-icon,
html[data-theme="dark"] .video-why .card-icon,
html[data-theme="dark"] .video-why article > i:first-child,
html[data-theme="dark"] .video-why .card > i:first-child,
html[data-theme="dark"] .video-why article > svg:first-child,
html[data-theme="dark"] .video-why .card > svg:first-child {
  border-color: rgba(126,240,77,.14) !important;
  background: linear-gradient(180deg, rgba(126,240,77,.11) 0%, rgba(126,240,77,.07) 100%) !important;
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .video-why .why-v2-grid h3,
html[data-theme="dark"] .video-why .video-why-grid h3,
html[data-theme="dark"] .video-why .why-grid h3,
html[data-theme="dark"] .video-why .benefits-grid h3,
html[data-theme="dark"] .video-why .reasons-grid h3,
html[data-theme="dark"] .video-why article h3,
html[data-theme="dark"] .video-why .card h3 {
  color: #f7fff8 !important;
  -webkit-text-fill-color: #f7fff8 !important;
}

html[data-theme="dark"] .video-why .why-v2-grid p,
html[data-theme="dark"] .video-why .video-why-grid p,
html[data-theme="dark"] .video-why .why-grid p,
html[data-theme="dark"] .video-why .benefits-grid p,
html[data-theme="dark"] .video-why .reasons-grid p,
html[data-theme="dark"] .video-why article p,
html[data-theme="dark"] .video-why .card p,
html[data-theme="dark"] .video-why article small,
html[data-theme="dark"] .video-why .card small {
  color: rgba(226, 235, 229, .84) !important;
  -webkit-text-fill-color: rgba(226, 235, 229, .84) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1360px) {
  .video-why .why-v2-grid,
  .video-why .video-why-grid,
  .video-why .why-grid,
  .video-why .benefits-grid,
  .video-why .reasons-grid,
  .video-why > .grid,
  .video-why > .cards,
  .video-why > .items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .video-why {
    width: min(100%, calc(100% - 28px)) !important;
  }

  .video-why .section-title h2,
  .video-why .why-v2-title h2,
  .video-why .why-title h2,
  .video-why > h2,
  .video-why > header h2 {
    font-size: clamp(34px, 9vw, 54px) !important;
    line-height: 1.02 !important;
  }

  .video-why .why-v2-grid,
  .video-why .video-why-grid,
  .video-why .why-grid,
  .video-why .benefits-grid,
  .video-why .reasons-grid,
  .video-why > .grid,
  .video-why > .cards,
  .video-why > .items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 640px) {
  .video-why .why-v2-grid,
  .video-why .video-why-grid,
  .video-why .why-grid,
  .video-why .benefits-grid,
  .video-why .reasons-grid,
  .video-why > .grid,
  .video-why > .cards,
  .video-why > .items {
    grid-template-columns: 1fr !important;
  }

  .video-why .why-v2-grid article,
  .video-why .video-why-grid article,
  .video-why .why-grid article,
  .video-why .benefits-grid article,
  .video-why .reasons-grid article,
  .video-why .why-v2-grid .card,
  .video-why .video-why-grid .card,
  .video-why .why-grid .card,
  .video-why .benefits-grid .card,
  .video-why .reasons-grid .card,
  .video-why > .grid > article,
  .video-why > .cards > article,
  .video-why > .items > article,
  .video-why > .grid > .card,
  .video-why > .cards > .card,
  .video-why > .items > .card {
    min-height: auto !important;
  }
}
/* ==========================================================
   ZasNet Video 07.1 — Why Choose Title Fix
   Маленький фікс після Video 07.

   Що виправляє:
   - "Чому обирають ZasNet?" не розривається на 2 рядки на desktop
   - заголовок стає менш грубий
   - картки трохи рівніше по висоті
   - у мобільній версії перенос дозволений

   Ставити ПІСЛЯ:
   Video 07 — Why Choose Us
   ========================================================== */


/* ---------- SECTION TITLE FIX ---------- */

.video-why .section-title,
.video-why .why-v2-title,
.video-why .why-title,
.video-why > header {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  margin: 0 auto 28px !important;
}

.video-why .section-title h2,
.video-why .why-v2-title h2,
.video-why .why-title h2,
.video-why > h2,
.video-why > header h2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;

  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;

  font-size: clamp(44px, 4.25vw, 68px) !important;
  line-height: 1.04 !important;
  font-weight: 760 !important;
  letter-spacing: -0.036em !important;
}

.video-why .section-title h2 span,
.video-why .why-v2-title h2 span,
.video-why .why-title h2 span,
.video-why > h2 span,
.video-why > header h2 span {
  display: inline !important;
  white-space: nowrap !important;
}


/* ---------- CARDS SMALL ALIGN FIX ---------- */

.video-why .why-v2-grid article,
.video-why .video-why-grid article,
.video-why .why-grid article,
.video-why .benefits-grid article,
.video-why .reasons-grid article,
.video-why .why-v2-grid .card,
.video-why .video-why-grid .card,
.video-why .why-grid .card,
.video-why .benefits-grid .card,
.video-why .reasons-grid .card,
.video-why > .grid > article,
.video-why > .cards > article,
.video-why > .items > article,
.video-why > .grid > .card,
.video-why > .cards > .card,
.video-why > .items > .card {
  min-height: 212px !important;
  padding: 24px 24px 26px !important;
}

.video-why .home-icon,
.video-why .benefit-icon,
.video-why .reason-icon,
.video-why .card-icon,
.video-why article > i:first-child,
.video-why .card > i:first-child,
.video-why article > svg:first-child,
.video-why .card > svg:first-child {
  margin-bottom: 18px !important;
}

.video-why article h3,
.video-why .card h3,
.video-why .why-v2-grid h3,
.video-why .video-why-grid h3,
.video-why .why-grid h3,
.video-why .benefits-grid h3,
.video-why .reasons-grid h3 {
  font-weight: 740 !important;
  letter-spacing: -0.018em !important;
}


/* ---------- DARK THEME ---------- */

html[data-theme="dark"] .video-why .section-title h2,
html[data-theme="dark"] .video-why .why-v2-title h2,
html[data-theme="dark"] .video-why .why-title h2,
html[data-theme="dark"] .video-why > h2,
html[data-theme="dark"] .video-why > header h2 {
  font-weight: 760 !important;
  letter-spacing: -0.036em !important;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1180px) {
  .video-why .section-title h2,
  .video-why .why-v2-title h2,
  .video-why .why-title h2,
  .video-why > h2,
  .video-why > header h2 {
    font-size: clamp(38px, 6vw, 56px) !important;
    white-space: normal !important;
  }
}

@media (max-width: 640px) {
  .video-why .section-title h2,
  .video-why .why-v2-title h2,
  .video-why .why-title h2,
  .video-why > h2,
  .video-why > header h2 {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .video-why .why-v2-grid article,
  .video-why .video-why-grid article,
  .video-why .why-grid article,
  .video-why .benefits-grid article,
  .video-why .reasons-grid article,
  .video-why .why-v2-grid .card,
  .video-why .video-why-grid .card,
  .video-why .why-grid .card,
  .video-why .benefits-grid .card,
  .video-why .reasons-grid .card,
  .video-why > .grid > article,
  .video-why > .cards > article,
  .video-why > .items > article,
  .video-why > .grid > .card,
  .video-why > .cards > .card,
  .video-why > .items > .card {
    min-height: auto !important;
  }
}
/* ==========================================================
   ZasNet Video 08 v2 — Bottom CTA FINAL
   Нижній банер "Контролюйте безпеку з телефону"

   ВАЖЛИВО:
   Старі патчі видалити повністю:
   - Video 08 — bottom CTA banner
   - Video 08.1 — bottom CTA layout fix

   Чому старий не рухав картинку:
   справа не img, а CSS-елемент .cabinet-device
   телефон зроблений через .cabinet-device::before

   Цей патч керує саме:
   .video-cabinet
   .video-cabinet .cabinet-device
   .video-cabinet .cabinet-device::before

   Ставити в самий кінець site.css.
   ========================================================== */


/* ==========================================================
   MAIN BANNER
   ========================================================== */

.video-cabinet {
  width: min(1640px, calc(100% - 72px)) !important;
  max-width: 1640px !important;

  margin: clamp(34px, 4vw, 58px) auto 0 !important;

  /* робимо місце справа під пристрої, щоб кнопка не залазила */
  padding:
    clamp(36px, 3.4vw, 56px)
    clamp(500px, 34vw, 620px)
    clamp(36px, 3.4vw, 56px)
    clamp(38px, 4vw, 70px) !important;

  min-height: clamp(230px, 16vw, 300px) !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(24px, 3vw, 46px) !important;
  align-items: center !important;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.24), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(34,197,94,.16), transparent 36%),
    linear-gradient(135deg, #16a34a 0%, #22b787 48%, #a7f3d0 100%) !important;

  color: #ffffff !important;

  box-shadow:
    0 22px 56px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.video-cabinet::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: -90px auto auto 36% !important;
  width: 560px !important;
  height: 560px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%) !important;
  pointer-events: none !important;
}

.video-cabinet > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   TEXT SIDE
   ========================================================== */

.video-cabinet h2 {
  max-width: 660px !important;
  margin: 0 0 14px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: clamp(34px, 3.05vw, 50px) !important;
  line-height: 1.08 !important;
  font-weight: 760 !important;
  letter-spacing: -0.034em !important;

  text-shadow: 0 2px 14px rgba(0,0,0,.10) !important;
}

.video-cabinet p {
  max-width: 760px !important;
  margin: 0 !important;

  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;

  font-size: 17px !important;
  line-height: 1.58 !important;
  font-weight: 470 !important;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.video-cabinet .btn,
.video-cabinet a.btn,
.video-cabinet button {
  position: relative !important;
  z-index: 8 !important;

  justify-self: start !important;

  min-width: 286px !important;
  max-width: 340px !important;
  min-height: 58px !important;
  padding: 0 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  background: rgba(255,255,255,.94) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 16px 34px rgba(15,23,42,.10) !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.video-cabinet .btn:hover,
.video-cabinet a.btn:hover,
.video-cabinet button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03) saturate(1.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 20px 40px rgba(15,23,42,.14) !important;
}


/* ==========================================================
   RIGHT DEVICE — ОСЬ ТУТ РУХАЄТЬСЯ КАРТИНКА
   ========================================================== */

.video-cabinet .cabinet-device {
  position: absolute !important;
  z-index: 3 !important;

  /* зміщення вправо */
  right: clamp(26px, 4vw, 72px) !important;
  bottom: -72px !important;

  width: clamp(380px, 27vw, 520px) !important;
  height: clamp(220px, 15vw, 285px) !important;

  border: clamp(10px, .75vw, 14px) solid #162033 !important;
  border-radius: 26px !important;

  background:
    linear-gradient(90deg, rgba(22, 163, 74, .14) 1px, transparent 1px),
    linear-gradient(180deg, #f8fffb, #e4f8ed) !important;
  background-size: 30px 30px, auto !important;

  transform: rotate(7deg) translateX(18px) !important;

  box-shadow:
    0 28px 55px rgba(15, 23, 42, .22) !important;
}

/* телефон зліва від планшета */
.video-cabinet .cabinet-device::before {
  content: "" !important;
  position: absolute !important;

  left: clamp(-88px, -5.2vw, -62px) !important;
  bottom: -18px !important;

  width: clamp(78px, 6vw, 108px) !important;
  height: clamp(142px, 10vw, 178px) !important;

  border: clamp(8px, .65vw, 11px) solid #162033 !important;
  border-radius: 24px !important;

  background: #f8fffb !important;

  transform: rotate(-8deg) !important;

  box-shadow:
    0 20px 38px rgba(15,23,42,.14) !important;
}

.video-cabinet .cabinet-device::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 46%) !important;
  pointer-events: none !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .video-cabinet {
  border-color: rgba(226,232,240,.14) !important;

  background:
    radial-gradient(circle at 78% 20%, rgba(126,240,77,.07), transparent 34%),
    radial-gradient(circle at 14% 92%, rgba(34,197,94,.08), transparent 36%),
    linear-gradient(135deg, rgba(37,73,58,.94), rgba(28,60,51,.94)) !important;

  color: #f7fff9 !important;

  box-shadow:
    0 22px 56px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .video-cabinet::before {
  background: radial-gradient(circle, rgba(126,240,77,.08), transparent 68%) !important;
}

html[data-theme="dark"] .video-cabinet h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] .video-cabinet p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}

html[data-theme="dark"] .video-cabinet .btn,
html[data-theme="dark"] .video-cabinet a.btn,
html[data-theme="dark"] .video-cabinet button {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .video-cabinet .cabinet-device,
html[data-theme="dark"] .video-cabinet .cabinet-device::before {
  box-shadow:
    0 28px 55px rgba(0,0,0,.28) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .video-cabinet {
    width: min(100% - 36px, 1640px) !important;

    padding:
      34px
      34px
      0
      34px !important;

    min-height: auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .video-cabinet .btn,
  .video-cabinet a.btn,
  .video-cabinet button {
    justify-self: start !important;
  }

  .video-cabinet .cabinet-device {
    position: relative !important;
    justify-self: end !important;
    right: auto !important;
    bottom: auto !important;

    width: min(430px, 74vw) !important;
    height: 235px !important;
    margin-top: 4px !important;
    margin-bottom: -56px !important;

    transform: rotate(7deg) translateX(8px) !important;
  }
}

@media (max-width: 760px) {
  .video-cabinet {
    width: min(100% - 24px, 1640px) !important;
    padding: 28px 20px 0 !important;
    border-radius: 22px !important;
  }

  .video-cabinet h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .video-cabinet p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .video-cabinet .btn,
  .video-cabinet a.btn,
  .video-cabinet button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 52px !important;
    white-space: normal !important;
  }

  .video-cabinet .cabinet-device {
    width: min(340px, 86vw) !important;
    height: 190px !important;
    margin-bottom: -48px !important;
    transform: rotate(7deg) translateX(20px) !important;
  }

  .video-cabinet .cabinet-device::before {
    left: -58px !important;
    width: 76px !important;
    height: 130px !important;
  }
}
/* ==========================================================
   ZasNet News 01 v2 — Hero Banner FINAL
   Вкладка "Новини": верхній банер "Новини ZasNet"

   ВАЖЛИВО:
   Старий патч News 01 видалити повністю:
   - ZasNet News 01 — Hero Banner

   Цей патч НЕ робить банер grid.
   Залишає правильну логіку:
   текст зліва, картинка news-hero.png як фон справа.

   Ставити в самий кінець site.css.
   ========================================================== */


/* ==========================================================
   PAGE WIDTH
   ========================================================== */

.news-page {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================
   LIGHT THEME
   ========================================================== */

.news-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  display: block !important;

  width: 100% !important;
  min-height: clamp(300px, 23vw, 390px) !important;
  margin: 22px auto 0 !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(252,255,253,.96) 36%,
      rgba(241,250,246,.72) 56%,
      rgba(241,250,246,.20) 78%,
      rgba(241,250,246,.04) 100%
    ),
    radial-gradient(circle at 78% 34%, rgba(34,197,94,.10), transparent 26%),
    url("../img/news-hero.png") center right / cover no-repeat !important;

  box-shadow:
    0 22px 54px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  color: #071427 !important;
}

/* м’яке світіння зліва */
.news-hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: -120px !important;
  top: -120px !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.08), transparent 68%) !important;
  pointer-events: none !important;
}

/* контент */
.news-hero > div {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;
  width: min(100%, 620px) !important;
  max-width: 620px !important;

  padding: clamp(46px, 4.2vw, 74px) clamp(34px, 4vw, 68px) !important;
}

/* заголовок */
.news-hero h1 {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(54px, 5.1vw, 88px) !important;
  line-height: .96 !important;
  font-weight: 780 !important;
  letter-spacing: -0.045em !important;

  text-align: left !important;
  text-shadow: none !important;
}

/* якщо ZasNet всередині span */
.news-hero h1 span,
.news-hero h1 .accent,
.news-hero .accent {
  display: inline !important;
  color: #22c55e !important;
  -webkit-text-fill-color: #22c55e !important;
}

/* опис */
.news-hero p {
  display: block !important;
  width: 100% !important;
  max-width: 560px !important;

  margin: 22px 0 0 !important;
  padding: 0 !important;

  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;

  font-size: 18px !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;

  text-align: left !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .news-hero {
  border-color: rgba(226,232,240,.15) !important;

  background:
    linear-gradient(
      90deg,
      rgba(10, 30, 27, .94) 0%,
      rgba(13, 37, 33, .86) 38%,
      rgba(13, 37, 33, .42) 68%,
      rgba(13, 37, 33, .10) 100%
    ),
    radial-gradient(circle at 78% 34%, rgba(57,240,24,.14), transparent 26%),
    url("../img/news-hero.png") center right / cover no-repeat !important;

  box-shadow:
    0 24px 62px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.07) !important;

  color: #f7fff9 !important;
}

html[data-theme="dark"] .news-hero::before {
  background: radial-gradient(circle, rgba(126,240,77,.09), transparent 68%) !important;
}

html[data-theme="dark"] .news-hero h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .news-hero h1 span,
html[data-theme="dark"] .news-hero h1 .accent,
html[data-theme="dark"] .news-hero .accent {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
}

html[data-theme="dark"] .news-hero p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  .news-page {
    width: calc(100% - 32px) !important;
  }

  .news-hero {
    min-height: auto !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.98) 0%,
        rgba(250,255,252,.95) 52%,
        rgba(241,250,246,.50) 100%
      ),
      url("../img/news-hero.png") 60% bottom / cover no-repeat !important;
  }

  html[data-theme="dark"] .news-hero {
    background:
      linear-gradient(
        180deg,
        rgba(10,30,27,.96) 0%,
        rgba(13,37,33,.88) 48%,
        rgba(13,37,33,.34) 100%
      ),
      url("../img/news-hero.png") 60% bottom / cover no-repeat !important;
  }

  .news-hero > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 36px 28px 230px !important;
  }

  .news-hero h1,
  .news-hero p {
    max-width: 620px !important;
  }
}

@media (max-width: 640px) {
  .news-page {
    width: calc(100% - 20px) !important;
  }

  .news-hero {
    border-radius: 24px !important;
  }

  .news-hero > div {
    padding: 30px 20px 210px !important;
  }

  .news-hero h1 {
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.038em !important;
  }

  .news-hero p {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}
/* ==========================================================
   ZasNet News 01.1 — Hero Title One Line + Lower Banner
   Вкладка "Новини"

   Ставити ПІСЛЯ:
   - News 01 v2 — Hero Banner FINAL

   Що робить:
   - "Новини ZasNet" в один рядок
   - прибирає перенос між "Новини" і "ZasNet", якщо там є <br>
   - опис ставить нижче під заголовком
   - банер трохи опускає нижче
   ========================================================== */


/* ---------- Banner lower ---------- */
.news-hero {
  margin-top: 34px !important;
}


/* ---------- Content width ---------- */
.news-hero > div {
  width: min(100%, 820px) !important;
  max-width: 820px !important;
}


/* ---------- Title one line ---------- */
.news-hero h1 {
  width: max-content !important;
  max-width: 100% !important;

  display: block !important;
  white-space: nowrap !important;

  font-size: clamp(48px, 4.2vw, 76px) !important;
  line-height: 1.02 !important;
  font-weight: 760 !important;
  letter-spacing: -0.04em !important;
}

/* якщо між "Новини" і "ZasNet" стоїть <br> */
.news-hero h1 br {
  display: none !important;
}

/* ZasNet в один рядок після Новини */
.news-hero h1 span,
.news-hero h1 .accent,
.news-hero .accent {
  display: inline !important;
  white-space: nowrap !important;
  margin-left: 14px !important;

  color: #22c55e !important;
  -webkit-text-fill-color: #22c55e !important;
}


/* ---------- Description under title ---------- */
.news-hero p {
  display: block !important;
  clear: both !important;

  max-width: 620px !important;
  margin-top: 18px !important;

  font-size: 17px !important;
  line-height: 1.58 !important;
  font-weight: 480 !important;
}


/* ---------- Dark theme ---------- */
html[data-theme="dark"] .news-hero h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .news-hero h1 span,
html[data-theme="dark"] .news-hero h1 .accent,
html[data-theme="dark"] .news-hero .accent {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
}


/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .news-hero {
    margin-top: 22px !important;
  }

  .news-hero h1 {
    width: 100% !important;
    white-space: normal !important;
    font-size: clamp(36px, 10vw, 52px) !important;
  }

  .news-hero h1 span,
  .news-hero h1 .accent,
  .news-hero .accent {
    margin-left: 0 !important;
  }
}
/* ==========================================================
   ZasNet Equipment 01 v3 FINAL — Hero Banner
   Вкладка "Обладнання": верхній банер.

   ВАЖЛИВО:
   Видалити старі патчі повністю:
   - Equipment 01 — hero banner
   - Equipment 01.1 — hero refine
   - Equipment 01.2 — light theme fix

   Цей патч ставиться замість них.

   Що виправлено:
   - висота банера як у "Відеоспостереження"
   - шрифт як у "Відеоспостереження для дому та бізнесу"
   - світла тема: світлий банер + темний текст
   - темна тема: темний банер + світлий текст
   - кнопки й бейджі читаються в обох темах

   Точні класи:
   .equipment-page
   .equipment-hero
   .equipment-hero-copy
   .equipment-actions
   .equipment-badges
   ========================================================== */


/* ==========================================================
   PAGE WIDTH
   ========================================================== */

.equipment-page {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================
   HERO — LIGHT THEME DEFAULT
   ========================================================== */

.equipment-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: 100% !important;

  /* висота як у відеоспостереженні */
  min-height: clamp(390px, 33vw, 500px) !important;

  margin: 22px auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .09) !important;

  /* СВІТЛА ТЕМА: світлий банер */
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.985) 0%,
      rgba(247,252,249,.965) 34%,
      rgba(236,248,241,.68) 54%,
      rgba(236,248,241,.22) 78%,
      rgba(236,248,241,.04) 100%
    ),
    radial-gradient(circle at 84% 72%, rgba(57,240,24,.18), transparent 30%),
    var(--equipment-hero-image) center right / cover no-repeat !important;

  box-shadow:
    0 22px 58px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  color: #071427 !important;
}

/* легка м’яка пляма під текстом */
.equipment-hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  left: -80px !important;
  top: -80px !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 999px !important;

  background: radial-gradient(circle, rgba(34,197,94,.10), transparent 66%) !important;
  pointer-events: none !important;
}

/* делікатне затемнення тільки знизу картинки */
.equipment-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,.10) 100%
    ) !important;

  pointer-events: none !important;
}

.equipment-hero-copy {
  position: relative !important;
  z-index: 2 !important;

  width: min(100%, 650px) !important;
  max-width: 650px !important;

  padding: clamp(36px, 4vw, 58px) clamp(34px, 4vw, 66px) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}


/* ==========================================================
   TITLE / TEXT — LIKE VIDEO HERO
   ========================================================== */

.equipment-hero h1 {
  max-width: 640px !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  /* як у відеоспостереженні, але трохи акуратніше */
  font-size: clamp(42px, 4.7vw, 72px) !important;
  line-height: .98 !important;
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;

  text-shadow: none !important;
}

/* "Обладнання —" зелений перший рядок */
.equipment-hero h1::first-line {
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}

.equipment-hero p {
  max-width: 540px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;

  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;

  font-size: 17px !important;
  line-height: 1.58 !important;
  font-weight: 520 !important;

  opacity: 1 !important;
  text-shadow: none !important;
}


/* ==========================================================
   ACTION BUTTONS
   ========================================================== */

.equipment-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

.equipment-actions .btn,
.equipment-actions a.btn,
.equipment-actions button {
  min-height: 50px !important;
  min-width: 205px !important;
  padding: 0 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease !important;
}

/* головна кнопка */
.equipment-actions .btn.primary,
.equipment-actions .btn.green,
.equipment-actions .btn:first-child {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid rgba(255,255,255,.25) !important;
  background: linear-gradient(135deg, #16bd55 0%, #18d87d 48%, #39f018 125%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(25,210,105,.20) !important;
}

/* друга кнопка в світлій темі */
.equipment-actions .btn.light,
.equipment-actions .btn.secondary,
.equipment-actions .btn:not(:first-child) {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.86) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 26px rgba(15,23,42,.08) !important;
}

.equipment-actions .btn:hover,
.equipment-actions a.btn:hover,
.equipment-actions button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
}


/* ==========================================================
   BOTTOM BADGES
   ========================================================== */

.equipment-badges {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;

  max-width: 560px !important;
  margin-top: 28px !important;
}

.equipment-badges article {
  min-height: 72px !important;
  padding: 14px 16px !important;

  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  background: rgba(255,255,255,.78) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 26px rgba(15,23,42,.08) !important;

  backdrop-filter: blur(10px) !important;
}

.equipment-badges strong {
  color: #152238 !important;
  -webkit-text-fill-color: #152238 !important;

  font-size: 13px !important;
  line-height: 1.24 !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
}

.equipment-mini-icon {
  width: 36px !important;
  height: 36px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  background: rgba(34,197,94,.10) !important;
}


/* ==========================================================
   DARK THEME — SEPARATE LOOK
   ========================================================== */

html[data-theme="dark"] .equipment-hero {
  border-color: rgba(226,232,240,.15) !important;

  /* ТЕМНА ТЕМА: затемнення як у відеоспостереженні */
  background:
    linear-gradient(
      90deg,
      rgba(5, 18, 14, .94) 0%,
      rgba(5, 18, 14, .88) 32%,
      rgba(5, 18, 14, .64) 54%,
      rgba(5, 18, 14, .28) 78%,
      rgba(5, 18, 14, .08) 100%
    ),
    radial-gradient(circle at 84% 72%, rgba(57,240,24,.16), transparent 30%),
    var(--equipment-hero-image) center right / cover no-repeat !important;

  box-shadow:
    0 24px 64px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.07) !important;

  color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-hero::before {
  background: radial-gradient(circle, rgba(126,240,77,.09), transparent 66%) !important;
}

html[data-theme="dark"] .equipment-hero::after {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02) 0%,
      rgba(255,255,255,0) 44%,
      rgba(0,0,0,.15) 100%
    ) !important;
}

html[data-theme="dark"] .equipment-hero h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] .equipment-hero h1::first-line {
  color: #72ff4f !important;
  -webkit-text-fill-color: #72ff4f !important;
}

html[data-theme="dark"] .equipment-hero p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .equipment-actions .btn.light,
html[data-theme="dark"] .equipment-actions .btn.secondary,
html[data-theme="dark"] .equipment-actions .btn:not(:first-child) {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .equipment-badges article {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.09) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 26px rgba(0,0,0,.14) !important;
}

html[data-theme="dark"] .equipment-badges strong {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-mini-icon {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  background: rgba(126,240,77,.10) !important;
  border-color: rgba(126,240,77,.18) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  .equipment-page {
    width: calc(100% - 32px) !important;
  }

  .equipment-hero {
    min-height: auto !important;
    align-items: flex-start !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 44%,
        rgba(255,255,255,.42) 100%
      ),
      var(--equipment-hero-image) center bottom / cover no-repeat !important;
  }

  html[data-theme="dark"] .equipment-hero {
    background:
      linear-gradient(
        180deg,
        rgba(5,18,14,.94) 0%,
        rgba(5,18,14,.84) 44%,
        rgba(5,18,14,.32) 100%
      ),
      var(--equipment-hero-image) center bottom / cover no-repeat !important;
  }

  .equipment-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 34px 28px 250px !important;
  }

  .equipment-hero h1 {
    max-width: 620px !important;
    font-size: clamp(38px, 7vw, 58px) !important;
  }

  .equipment-badges {
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }
}

@media (max-width: 640px) {
  .equipment-page {
    width: calc(100% - 20px) !important;
  }

  .equipment-hero {
    border-radius: 24px !important;
  }

  .equipment-hero-copy {
    padding: 30px 20px 220px !important;
  }

  .equipment-hero h1 {
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.034em !important;
  }

  .equipment-hero p {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .equipment-actions .btn,
  .equipment-actions a.btn,
  .equipment-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ==========================================================
   ZasNet Equipment 02 v2 FINAL — How It Works
   Блок "Як це працює?"

   ВАЖЛИВО:
   Старий патч видалити повністю:
   - Equipment 02 — How It Works

   Цей патч НЕ використовує article::before/after для іконок,
   тому не буде пустих квадратів і зайвих крапок.

   Точні класи:
   .equipment-steps
   .equipment-step-grid
   .equipment-number
   .equipment-card-media
   .equipment-line-icon

   Ставити в самий кінець site.css.
   ========================================================== */


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.equipment-steps {
  width: 100% !important;
  margin: clamp(30px, 3.5vw, 48px) auto 0 !important;
}

.equipment-steps h2 {
  margin: 0 0 24px !important;

  text-align: center !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(28px, 2.3vw, 38px) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -0.028em !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.equipment-step-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.equipment-step-grid article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 220px !important;
  padding: 24px 24px 26px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 18% 8%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 36px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.equipment-step-grid article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 22px 46px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* прибираємо старі лінії, пусті квадрати і крапки */
.equipment-step-grid article::before,
.equipment-step-grid article::after,
.equipment-step-grid article:not(:last-child)::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   NUMBER
   ========================================================== */

.equipment-number {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  z-index: 4 !important;

  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(34,197,94,.18) !important;

  background: rgba(34,197,94,.11) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    0 10px 18px rgba(34,197,94,.10) !important;
}


/* ==========================================================
   ICON / MEDIA
   ========================================================== */

/* старі CSS-малюнки приховуємо, бо зараз іконки нормальні через svg */
.equipment-step-grid .equipment-visual {
  display: none !important;
}

.equipment-step-grid .equipment-card-media,
.equipment-step-grid .equipment-line-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  margin: 0 0 24px 48px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background:
    linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07)) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 22px rgba(34,197,94,.08) !important;
}

.equipment-step-grid .equipment-card-media svg,
.equipment-step-grid .equipment-line-icon svg {
  width: 28px !important;
  height: 28px !important;

  color: #16a34a !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.35 !important;
}

.equipment-step-grid .equipment-card-media img {
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.equipment-step-grid article h3 {
  margin: 0 0 10px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(19px, 1.35vw, 24px) !important;
  line-height: 1.16 !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}

.equipment-step-grid article p {
  max-width: 100% !important;
  margin: 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 460 !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .equipment-steps h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-step-grid article {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 18% 8%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .equipment-step-grid article:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .equipment-number {
  border-color: rgba(126,240,77,.18) !important;
  background: rgba(126,240,77,.10) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 18px rgba(126,240,77,.08) !important;
}

html[data-theme="dark"] .equipment-step-grid .equipment-card-media,
html[data-theme="dark"] .equipment-step-grid .equipment-line-icon {
  border-color: rgba(126,240,77,.16) !important;

  background:
    linear-gradient(180deg, rgba(126,240,77,.11), rgba(126,240,77,.07)) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10) !important;
}

html[data-theme="dark"] .equipment-step-grid .equipment-card-media svg,
html[data-theme="dark"] .equipment-step-grid .equipment-line-icon svg {
  color: #7ef04d !important;
}

html[data-theme="dark"] .equipment-step-grid article h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-step-grid article p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .equipment-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .equipment-step-grid article {
    min-height: 205px !important;
  }
}

@media (max-width: 640px) {
  .equipment-steps {
    margin-top: 30px !important;
  }

  .equipment-step-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .equipment-step-grid article {
    min-height: auto !important;
    padding: 22px 20px 22px !important;
  }

  .equipment-step-grid .equipment-card-media,
  .equipment-step-grid .equipment-line-icon {
    margin-left: 46px !important;
    margin-bottom: 20px !important;
  }
}
/* ==========================================================
   ZasNet Equipment 03 — Why It Matters
   Вкладка "Обладнання": блок "Чому це важливо?"

   Точні класи:
   .equipment-benefits
   .equipment-benefit-grid
   .equipment-line-icon

   Ставити в самий кінець site.css після Equipment 02 v2 FINAL.
   Не чіпає hero, "Як це працює", категорії, товари, CTA і footer.
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.equipment-benefits {
  width: 100% !important;
  margin: clamp(30px, 3.5vw, 48px) auto 0 !important;
}

.equipment-benefits h2 {
  margin: 0 0 24px !important;

  text-align: center !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(28px, 2.3vw, 38px) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -0.028em !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.equipment-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.7vw, 24px) !important;
  align-items: stretch !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.equipment-benefit-grid article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 220px !important;
  padding: 26px 22px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 36px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.equipment-benefit-grid article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 22px 46px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.equipment-benefit-grid article::before,
.equipment-benefit-grid article::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.equipment-benefit-grid .equipment-line-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  margin: 0 auto 20px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background:
    linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07)) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 22px rgba(34,197,94,.08) !important;
}

.equipment-benefit-grid .equipment-line-icon svg {
  width: 28px !important;
  height: 28px !important;

  color: #16a34a !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.35 !important;
}

.equipment-benefit-grid .equipment-line-icon::before {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.equipment-benefit-grid article h3 {
  max-width: 100% !important;
  margin: 0 0 12px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(18px, 1.25vw, 23px) !important;
  line-height: 1.16 !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}

.equipment-benefit-grid article p {
  max-width: 260px !important;
  margin: 0 auto !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 460 !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .equipment-benefits h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-benefit-grid article {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .equipment-benefit-grid article:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .equipment-benefit-grid .equipment-line-icon {
  border-color: rgba(126,240,77,.16) !important;

  background:
    linear-gradient(180deg, rgba(126,240,77,.11), rgba(126,240,77,.07)) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10) !important;
}

html[data-theme="dark"] .equipment-benefit-grid .equipment-line-icon svg {
  color: #7ef04d !important;
}

html[data-theme="dark"] .equipment-benefit-grid article h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-benefit-grid article p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1280px) {
  .equipment-benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 840px) {
  .equipment-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .equipment-benefit-grid article {
    min-height: 205px !important;
  }
}

@media (max-width: 560px) {
  .equipment-benefits {
    margin-top: 30px !important;
  }

  .equipment-benefit-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .equipment-benefit-grid article {
    min-height: auto !important;
    padding: 22px 20px 22px !important;
  }
}
/* ==========================================================
   ZasNet Equipment 04 — Equipment Categories
   Вкладка "Обладнання": блок "Категорії обладнання"

   Точні класи:
   .equipment-categories
   .equipment-category-grid
   .equipment-card-media.category

   Ставити в самий кінець site.css після Equipment 03.
   Не чіпає hero, "Як це працює", "Чому це важливо",
   товари, CTA і footer.
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.equipment-categories {
  width: 100% !important;
  margin: clamp(30px, 3.5vw, 48px) auto 0 !important;
}

.equipment-categories h2 {
  margin: 0 0 24px !important;

  text-align: center !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(28px, 2.3vw, 38px) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -0.028em !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.equipment-category-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.equipment-category-grid article,
.equipment-category-grid a,
.equipment-category-grid .category-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 220px !important;
  padding: 24px 24px 26px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  text-decoration: none !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.06), transparent 36%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 36px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

.equipment-category-grid article:hover,
.equipment-category-grid a:hover,
.equipment-category-grid .category-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 22px 46px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.equipment-category-grid article::before,
.equipment-category-grid article::after,
.equipment-category-grid a::before,
.equipment-category-grid a::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   IMAGE / MEDIA
   ========================================================== */

.equipment-category-grid .equipment-visual {
  display: none !important;
}

.equipment-card-media.category,
.equipment-category-grid .equipment-card-media,
.equipment-category-grid picture {
  width: 100% !important;
  height: 100px !important;
  min-height: 100px !important;

  margin: 0 auto 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 18px !important;

  background:
    radial-gradient(circle at 50% 60%, rgba(34,197,94,.08), transparent 44%) !important;
}

.equipment-card-media.category img,
.equipment-category-grid .equipment-card-media img,
.equipment-category-grid picture img {
  display: block !important;

  max-width: 150px !important;
  max-height: 96px !important;
  width: auto !important;
  height: auto !important;

  object-fit: contain !important;

  mix-blend-mode: multiply !important;
  filter: drop-shadow(0 16px 20px rgba(15, 23, 42, .10)) !important;
}

.equipment-card-media.category svg,
.equipment-category-grid .equipment-card-media svg {
  width: 74px !important;
  height: 74px !important;

  padding: 14px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  color: #16a34a !important;
  stroke: currentColor !important;
  fill: none !important;

  background: rgba(34,197,94,.10) !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.equipment-category-grid article h3,
.equipment-category-grid a h3,
.equipment-category-grid .category-card h3 {
  margin: 0 0 10px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(19px, 1.35vw, 24px) !important;
  line-height: 1.16 !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}

.equipment-category-grid article p,
.equipment-category-grid a p,
.equipment-category-grid .category-card p {
  margin: 0 auto !important;
  max-width: 260px !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 460 !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .equipment-categories h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-category-grid article,
html[data-theme="dark"] .equipment-category-grid a,
html[data-theme="dark"] .equipment-category-grid .category-card {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(126,240,77,.08), transparent 36%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .equipment-category-grid article:hover,
html[data-theme="dark"] .equipment-category-grid a:hover,
html[data-theme="dark"] .equipment-category-grid .category-card:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .equipment-card-media.category,
html[data-theme="dark"] .equipment-category-grid .equipment-card-media,
html[data-theme="dark"] .equipment-category-grid picture {
  background:
    radial-gradient(circle at 50% 60%, rgba(126,240,77,.08), transparent 44%) !important;
}

html[data-theme="dark"] .equipment-card-media.category img,
html[data-theme="dark"] .equipment-category-grid .equipment-card-media img,
html[data-theme="dark"] .equipment-category-grid picture img {
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 16px 20px rgba(0,0,0,.18))
    brightness(1.02)
    saturate(.98) !important;
}

html[data-theme="dark"] .equipment-card-media.category svg,
html[data-theme="dark"] .equipment-category-grid .equipment-card-media svg {
  border-color: rgba(126,240,77,.16) !important;
  color: #7ef04d !important;
  background: rgba(126,240,77,.10) !important;
}

html[data-theme="dark"] .equipment-category-grid article h3,
html[data-theme="dark"] .equipment-category-grid a h3,
html[data-theme="dark"] .equipment-category-grid .category-card h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-category-grid article p,
html[data-theme="dark"] .equipment-category-grid a p,
html[data-theme="dark"] .equipment-category-grid .category-card p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .equipment-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .equipment-categories {
    margin-top: 30px !important;
  }

  .equipment-category-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .equipment-category-grid article,
  .equipment-category-grid a,
  .equipment-category-grid .category-card {
    min-height: auto !important;
    padding: 22px 20px 22px !important;
  }
}
/* ==========================================================
   ZasNet Equipment 05 v2 FINAL — Popular Equipment
   Блок "Популярне обладнання"

   ВАЖЛИВО:
   Старий патч видалити повністю:
   - Equipment 05 — Popular Equipment

   Чому старий поламав:
   у картці є внутрішній content-блок, а старий патч
   зачепив article > div:last-child і зробив його flex-row.
   Через це заголовок, список і ціна стали в колонки.

   Цей патч:
   - робить товарні картки вертикальними
   - не чіпає content-блок як footer
   - footer стилізує тільки через .equipment-product-bottom
   - ціна в темній темі читабельна

   Точні класи:
   .equipment-products
   .equipment-product-grid
   .equipment-product-image
   .equipment-card-media
   .equipment-product-bottom

   Ставити в самий кінець site.css.
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.equipment-products {
  width: 100% !important;
  margin: clamp(32px, 3.8vw, 52px) auto 0 !important;
}

.equipment-products h2 {
  margin: 0 0 24px !important;

  text-align: center !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(30px, 2.5vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 760 !important;
  letter-spacing: -0.03em !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.equipment-product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}


/* ==========================================================
   PRODUCT CARD
   ========================================================== */

.equipment-product-grid article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 430px !important;
  padding: 18px !important;

  /* головне: одна колонка, без розриву на image/content */
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(34,197,94,.055), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

.equipment-product-grid article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.22) !important;

  box-shadow:
    0 24px 50px rgba(15,23,42,.11),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.equipment-product-grid article::before,
.equipment-product-grid article::after {
  content: none !important;
  display: none !important;
}

/* внутрішній блок контенту — вертикально */
.equipment-product-grid article > div:not(.equipment-product-image):not(.equipment-card-media),
.equipment-product-grid .equipment-product-content,
.equipment-product-grid .product-content {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}


/* ==========================================================
   IMAGE AREA
   ========================================================== */

.equipment-product-image,
.equipment-product-grid .equipment-card-media {
  width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;

  margin: 0 0 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 17px !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  background:
    radial-gradient(circle at 50% 52%, rgba(34,197,94,.05), transparent 46%),
    #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 10px 22px rgba(15,23,42,.045) !important;
}

.equipment-product-image img,
.equipment-product-grid .equipment-card-media img {
  display: block !important;

  max-width: 82% !important;
  max-height: 118px !important;
  width: auto !important;
  height: auto !important;

  object-fit: contain !important;

  mix-blend-mode: multiply !important;
  filter: drop-shadow(0 14px 18px rgba(15,23,42,.11)) !important;
}

.equipment-product-image .equipment-visual {
  width: 130px !important;
  height: 110px !important;
  margin: 0 !important;
  transform: scale(.86) !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.equipment-product-grid h3 {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 14px !important;

  display: block !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(19px, 1.25vw, 24px) !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
}

.equipment-product-grid ul {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  list-style: none !important;
}

.equipment-product-grid li {
  position: relative !important;

  display: block !important;
  width: 100% !important;

  padding-left: 24px !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 460 !important;

  white-space: normal !important;
}

.equipment-product-grid li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}


/* ==========================================================
   FOOTER / PRICE / BUTTON
   ========================================================== */

.equipment-product-bottom {
  width: 100% !important;
  margin-top: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* ціна */
.equipment-product-bottom strong,
.equipment-product-bottom b,
.equipment-product-grid .price,
.equipment-product-grid .product-price,
.equipment-product-grid .equipment-price {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.018em !important;
  white-space: nowrap !important;
}

/* кнопка */
.equipment-product-bottom a,
.equipment-product-grid .btn,
.equipment-product-grid a.btn,
.equipment-product-grid button {
  min-width: 128px !important;
  min-height: 44px !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(34,197,94,.25) !important;

  background: rgba(255,255,255,.90) !important;

  color: #0a8f37 !important;
  -webkit-text-fill-color: #0a8f37 !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 22px rgba(15,23,42,.06) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.equipment-product-bottom a:hover,
.equipment-product-grid .btn:hover,
.equipment-product-grid a.btn:hover,
.equipment-product-grid button:hover {
  transform: translateY(-2px) !important;
  background: #ffffff !important;
  border-color: rgba(34,197,94,.38) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 14px 28px rgba(34,197,94,.10) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .equipment-products h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-product-grid article {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(126,240,77,.075), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .equipment-product-grid article:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 24px 50px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .equipment-product-image,
html[data-theme="dark"] .equipment-product-grid .equipment-card-media {
  border-color: rgba(226,232,240,.10) !important;

  background:
    radial-gradient(circle at 50% 52%, rgba(126,240,77,.05), transparent 46%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 22px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] .equipment-product-image img,
html[data-theme="dark"] .equipment-product-grid .equipment-card-media img {
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.18))
    brightness(1.03)
    saturate(.98) !important;
}

html[data-theme="dark"] .equipment-product-grid h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-product-grid li {
  color: rgba(240,250,245,.76) !important;
  -webkit-text-fill-color: rgba(240,250,245,.76) !important;
}

html[data-theme="dark"] .equipment-product-grid li::before {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

/* ціна в dark */
html[data-theme="dark"] .equipment-product-bottom strong,
html[data-theme="dark"] .equipment-product-bottom b,
html[data-theme="dark"] .equipment-product-grid .price,
html[data-theme="dark"] .equipment-product-grid .product-price,
html[data-theme="dark"] .equipment-product-grid .equipment-price {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

html[data-theme="dark"] .equipment-product-bottom a,
html[data-theme="dark"] .equipment-product-grid .btn,
html[data-theme="dark"] .equipment-product-grid a.btn,
html[data-theme="dark"] .equipment-product-grid button {
  color: #0c8f36 !important;
  -webkit-text-fill-color: #0c8f36 !important;

  background: rgba(255,255,255,.96) !important;
  border-color: rgba(126,240,77,.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 12px 24px rgba(0,0,0,.16) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1280px) {
  .equipment-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .equipment-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .equipment-product-grid article {
    min-height: 410px !important;
  }
}

@media (max-width: 600px) {
  .equipment-products {
    margin-top: 30px !important;
  }

  .equipment-product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .equipment-product-grid article {
    min-height: auto !important;
  }

  .equipment-product-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .equipment-product-bottom a,
  .equipment-product-grid .btn,
  .equipment-product-grid a.btn,
  .equipment-product-grid button {
    width: 100% !important;
  }
}
/* ==========================================================
   ZasNet Equipment 06 — Bottom CTA
   Вкладка "Обладнання": нижній банер
   "Залишайтеся онлайн навіть без електроенергії"

   Точні класи:
   .equipment-cta
   .equipment-cta-art

   Ставити в самий кінець site.css після Equipment 05 v2 FINAL.
   Не чіпає hero, картки, категорії, товари і footer.
   ========================================================== */


/* ==========================================================
   MAIN CTA
   ========================================================== */

.equipment-cta {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: 100% !important;
  min-height: clamp(280px, 20vw, 360px) !important;

  margin: clamp(36px, 4vw, 58px) auto 30px !important;
  padding: clamp(36px, 4vw, 58px) clamp(36px, 4.5vw, 70px) !important;

  display: grid !important;
  grid-template-columns: minmax(420px, .96fr) minmax(480px, 1.04fr) !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 70px) !important;

  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  background:
    radial-gradient(circle at 78% 42%, rgba(189,255,124,.24), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(135deg, #159a3e 0%, #25a94b 42%, #49bd4c 100%) !important;

  color: #ffffff !important;

  box-shadow:
    0 24px 58px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.equipment-cta::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  inset: -80px auto auto 24% !important;
  width: 520px !important;
  height: 520px !important;

  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(255,255,255,.13), transparent 68%) !important;
  pointer-events: none !important;
}

.equipment-cta::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  right: -6% !important;
  top: 12% !important;
  width: 46% !important;
  height: 72% !important;

  border: 4px solid rgba(204,255,125,.48) !important;
  border-left-color: transparent !important;
  border-radius: 50% !important;

  transform: rotate(-8deg) !important;
  pointer-events: none !important;
}

.equipment-cta > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.equipment-cta h2 {
  max-width: 680px !important;
  margin: 0 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: clamp(34px, 3.4vw, 56px) !important;
  line-height: 1.06 !important;
  font-weight: 760 !important;
  letter-spacing: -0.034em !important;

  text-shadow: 0 2px 16px rgba(0,0,0,.12) !important;
}

.equipment-cta p {
  max-width: 660px !important;
  margin: 16px 0 0 !important;

  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;

  font-size: 17px !important;
  line-height: 1.58 !important;
  font-weight: 480 !important;
}


/* ==========================================================
   FORM
   ========================================================== */

.equipment-cta form {
  max-width: 670px !important;
  margin-top: 28px !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.equipment-cta input,
.equipment-cta textarea,
.equipment-cta select {
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 18px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  background: rgba(255,255,255,.92) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 500 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 24px rgba(15,23,42,.08) !important;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.equipment-cta input::placeholder,
.equipment-cta textarea::placeholder {
  color: rgba(71,85,105,.72) !important;
  -webkit-text-fill-color: rgba(71,85,105,.72) !important;
}

.equipment-cta input:focus,
.equipment-cta textarea:focus,
.equipment-cta select:focus {
  border-color: rgba(126,240,77,.54) !important;
  background: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 0 0 4px rgba(126,240,77,.18),
    0 14px 28px rgba(15,23,42,.10) !important;
}

/* адреса на всю ширину */
.equipment-cta form input[name*="address"],
.equipment-cta form input[placeholder*="Адрес"],
.equipment-cta form input[placeholder*="адрес"],
.equipment-cta form textarea {
  grid-column: 1 / -1 !important;
}

.equipment-cta .btn,
.equipment-cta button,
.equipment-cta input[type="submit"] {
  width: fit-content !important;
  min-width: 218px !important;
  min-height: 54px !important;
  padding: 0 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.24) !important;

  background: linear-gradient(135deg, #18bd4f 0%, #1edc66 52%, #48ef18 120%) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;

  cursor: pointer !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 16px 34px rgba(0,0,0,.12) !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease !important;
}

.equipment-cta .btn:hover,
.equipment-cta button:hover,
.equipment-cta input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 20px 40px rgba(0,0,0,.16) !important;
}


/* ==========================================================
   ART / EQUIPMENT VISUALS
   ========================================================== */

.equipment-cta-art {
  position: relative !important;
  min-height: clamp(230px, 18vw, 320px) !important;

  display: block !important;
}

.equipment-cta-art::before {
  content: none !important;
  display: none !important;
}

.equipment-cta-art .equipment-visual.router {
  position: absolute !important;
  left: 4% !important;
  bottom: 12px !important;

  width: 320px !important;
  height: 210px !important;
  margin: 0 !important;

  transform: scale(1.12) !important;
  transform-origin: bottom left !important;

  filter: drop-shadow(0 24px 34px rgba(0,0,0,.22)) !important;
}

.equipment-cta-art .equipment-visual.battery {
  position: absolute !important;
  right: 12% !important;
  bottom: 30px !important;

  width: 220px !important;
  height: 160px !important;
  margin: 0 !important;

  transform: scale(1.02) !important;
  transform-origin: bottom right !important;

  filter: drop-shadow(0 20px 28px rgba(0,0,0,.20)) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

html[data-theme="dark"] .equipment-cta {
  border-color: rgba(226,232,240,.14) !important;

  background:
    radial-gradient(circle at 78% 42%, rgba(126,240,77,.16), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(135deg, #159a3e 0%, #25a94b 42%, #49bd4c 100%) !important;

  box-shadow:
    0 24px 58px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .equipment-cta input,
html[data-theme="dark"] .equipment-cta textarea,
html[data-theme="dark"] .equipment-cta select {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;

  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.10) !important;
}

html[data-theme="dark"] .equipment-cta input::placeholder,
html[data-theme="dark"] .equipment-cta textarea::placeholder {
  color: rgba(240,250,245,.68) !important;
  -webkit-text-fill-color: rgba(240,250,245,.68) !important;
}

html[data-theme="dark"] .equipment-cta input:focus,
html[data-theme="dark"] .equipment-cta textarea:focus,
html[data-theme="dark"] .equipment-cta select:focus {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(126,240,77,.46) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 4px rgba(126,240,77,.14),
    0 14px 28px rgba(0,0,0,.14) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .equipment-cta {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    min-height: auto !important;
  }

  .equipment-cta-art {
    min-height: 260px !important;
  }

  .equipment-cta-art .equipment-visual.router {
    left: 8% !important;
  }

  .equipment-cta-art .equipment-visual.battery {
    right: 10% !important;
  }
}

@media (max-width: 760px) {
  .equipment-cta {
    padding: 28px 20px !important;
    border-radius: 22px !important;
  }

  .equipment-cta h2 {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .equipment-cta p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .equipment-cta form {
    grid-template-columns: 1fr !important;
  }

  .equipment-cta .btn,
  .equipment-cta button,
  .equipment-cta input[type="submit"] {
    width: 100% !important;
  }

  .equipment-cta-art {
    min-height: 220px !important;
  }

  .equipment-cta-art .equipment-visual.router {
    left: 0 !important;
    width: 250px !important;
    height: 180px !important;
    transform: scale(.92) !important;
  }

  .equipment-cta-art .equipment-visual.battery {
    right: 0 !important;
    width: 170px !important;
    height: 130px !important;
    transform: scale(.88) !important;
  }
}
/* ==========================================================
   ZasNet Equipment 06.1 — Bottom CTA THEME SPLIT FIX
   Нижній банер “Залишайтеся онлайн навіть без електроенергії”
   Робить РІЗНИЙ стиль для світлої і темної теми.
   Ставити НИЖЧЕ Equipment 06.
   ========================================================== */

/* -----------------------------
   BASE LAYOUT / common
   ----------------------------- */
.equipment-cta,
.white .equipment-cta,
.white.black .equipment-cta,
html[data-theme="light"] .equipment-cta,
html[data-theme="dark"] .equipment-cta {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  min-height: clamp(290px, 21vw, 360px) !important;
  padding: clamp(34px, 3.6vw, 54px) clamp(36px, 4vw, 64px) !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .95fr) minmax(470px, 1.05fr) !important;
  align-items: center !important;
  gap: clamp(26px, 3vw, 52px) !important;
}

.equipment-cta > *,
.white .equipment-cta > *,
.white.black .equipment-cta > *,
html[data-theme="light"] .equipment-cta > *,
html[data-theme="dark"] .equipment-cta > * {
  position: relative !important;
  z-index: 2 !important;
}

.equipment-cta h2,
.white .equipment-cta h2,
.white.black .equipment-cta h2,
html[data-theme="light"] .equipment-cta h2,
html[data-theme="dark"] .equipment-cta h2 {
  margin: 0 !important;
  max-width: 640px !important;
  font-size: clamp(32px, 3.1vw, 54px) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.035em !important;
  font-weight: 790 !important;
}

.equipment-cta p,
.white .equipment-cta p,
.white.black .equipment-cta p,
html[data-theme="light"] .equipment-cta p,
html[data-theme="dark"] .equipment-cta p {
  max-width: 610px !important;
  margin: 16px 0 0 !important;
  font-size: 17px !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
}

.equipment-cta form,
.white .equipment-cta form,
.white.black .equipment-cta form,
html[data-theme="light"] .equipment-cta form,
html[data-theme="dark"] .equipment-cta form {
  max-width: 650px !important;
  margin-top: 26px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.equipment-cta form input[name*="address"],
.equipment-cta form input[placeholder*="Адрес"],
.equipment-cta form input[placeholder*="адрес"],
.white .equipment-cta form input[name*="address"],
.white .equipment-cta form input[placeholder*="Адрес"],
.white .equipment-cta form input[placeholder*="адрес"],
.white.black .equipment-cta form input[name*="address"],
.white.black .equipment-cta form input[placeholder*="Адрес"],
.white.black .equipment-cta form input[placeholder*="адрес"],
html[data-theme="light"] .equipment-cta form input[name*="address"],
html[data-theme="light"] .equipment-cta form input[placeholder*="Адрес"],
html[data-theme="light"] .equipment-cta form input[placeholder*="адрес"],
html[data-theme="dark"] .equipment-cta form input[name*="address"],
html[data-theme="dark"] .equipment-cta form input[placeholder*="Адрес"],
html[data-theme="dark"] .equipment-cta form input[placeholder*="адрес"] {
  grid-column: 1 / -1 !important;
}

.equipment-cta input,
.equipment-cta textarea,
.equipment-cta select,
.white .equipment-cta input,
.white .equipment-cta textarea,
.white .equipment-cta select,
.white.black .equipment-cta input,
.white.black .equipment-cta textarea,
.white.black .equipment-cta select,
html[data-theme="light"] .equipment-cta input,
html[data-theme="light"] .equipment-cta textarea,
html[data-theme="light"] .equipment-cta select,
html[data-theme="dark"] .equipment-cta input,
html[data-theme="dark"] .equipment-cta textarea,
html[data-theme="dark"] .equipment-cta select {
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: .2s ease !important;
}

.equipment-cta .btn,
.equipment-cta button,
.equipment-cta input[type="submit"],
.white .equipment-cta .btn,
.white .equipment-cta button,
.white .equipment-cta input[type="submit"],
.white.black .equipment-cta .btn,
.white.black .equipment-cta button,
.white.black .equipment-cta input[type="submit"],
html[data-theme="light"] .equipment-cta .btn,
html[data-theme="light"] .equipment-cta button,
html[data-theme="light"] .equipment-cta input[type="submit"],
html[data-theme="dark"] .equipment-cta .btn,
html[data-theme="dark"] .equipment-cta button,
html[data-theme="dark"] .equipment-cta input[type="submit"] {
  width: fit-content !important;
  min-width: 220px !important;
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: .18s ease !important;
}

/* -----------------------------
   LIGHT THEME — світлий, як по сайту
   ----------------------------- */
body:not(.black) .equipment-cta,
.white .equipment-cta,
html[data-theme="light"] .equipment-cta {
  border: 1px solid rgba(22, 163, 74, .14) !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(166, 245, 197, .55), transparent 28%),
    radial-gradient(circle at 12% 86%, rgba(34, 197, 94, .10), transparent 34%),
    linear-gradient(135deg, #f6fbf8 0%, #edf7f2 48%, #e4f4ea 100%) !important;
  box-shadow:
    0 20px 46px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

body:not(.black) .equipment-cta::before,
.white .equipment-cta::before,
html[data-theme="light"] .equipment-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: auto -8% -42% auto !important;
  width: 48% !important;
  height: 88% !important;
  border-radius: 50% !important;
  border: 4px solid rgba(163, 230, 53, .38) !important;
  border-left-color: transparent !important;
  background: none !important;
  transform: rotate(-9deg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body:not(.black) .equipment-cta::after,
.white .equipment-cta::after,
html[data-theme="light"] .equipment-cta::after {
  content: "" !important;
  position: absolute !important;
  left: 26% !important;
  top: -30% !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 70%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body:not(.black) .equipment-cta h2,
.white .equipment-cta h2,
html[data-theme="light"] .equipment-cta h2 {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
}

body:not(.black) .equipment-cta p,
.white .equipment-cta p,
html[data-theme="light"] .equipment-cta p {
  color: #50627d !important;
  -webkit-text-fill-color: #50627d !important;
}

body:not(.black) .equipment-cta input,
body:not(.black) .equipment-cta textarea,
body:not(.black) .equipment-cta select,
.white .equipment-cta input,
.white .equipment-cta textarea,
.white .equipment-cta select,
html[data-theme="light"] .equipment-cta input,
html[data-theme="light"] .equipment-cta textarea,
html[data-theme="light"] .equipment-cta select {
  background: rgba(255,255,255,.96) !important;
  color: #0b1627 !important;
  -webkit-text-fill-color: #0b1627 !important;
  border: 1px solid rgba(22, 163, 74, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 24px rgba(15,23,42,.05) !important;
}

body:not(.black) .equipment-cta input::placeholder,
body:not(.black) .equipment-cta textarea::placeholder,
.white .equipment-cta input::placeholder,
.white .equipment-cta textarea::placeholder,
html[data-theme="light"] .equipment-cta input::placeholder,
html[data-theme="light"] .equipment-cta textarea::placeholder {
  color: rgba(71, 85, 105, .76) !important;
  -webkit-text-fill-color: rgba(71, 85, 105, .76) !important;
}

body:not(.black) .equipment-cta input:focus,
body:not(.black) .equipment-cta textarea:focus,
body:not(.black) .equipment-cta select:focus,
.white .equipment-cta input:focus,
.white .equipment-cta textarea:focus,
.white .equipment-cta select:focus,
html[data-theme="light"] .equipment-cta input:focus,
html[data-theme="light"] .equipment-cta textarea:focus,
html[data-theme="light"] .equipment-cta select:focus {
  border-color: rgba(34, 197, 94, .42) !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12), 0 12px 28px rgba(15,23,42,.08) !important;
}

body:not(.black) .equipment-cta .btn,
body:not(.black) .equipment-cta button,
body:not(.black) .equipment-cta input[type="submit"],
.white .equipment-cta .btn,
.white .equipment-cta button,
.white .equipment-cta input[type="submit"],
html[data-theme="light"] .equipment-cta .btn,
html[data-theme="light"] .equipment-cta button,
html[data-theme="light"] .equipment-cta input[type="submit"] {
  border: 1px solid rgba(34, 197, 94, .14) !important;
  background: linear-gradient(135deg, #1fbe4d 0%, #30d158 52%, #59e81a 120%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 34px rgba(34,197,94,.18) !important;
}

/* -----------------------------
   DARK THEME — затемнений як у відеоспостереженні
   ----------------------------- */
body.black .equipment-cta,
.white.black .equipment-cta,
html[data-theme="dark"] .equipment-cta {
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 84% 30%, rgba(126, 240, 77, .16), transparent 30%),
    radial-gradient(circle at 16% 88%, rgba(255,255,255,.05), transparent 34%),
    linear-gradient(135deg, rgba(24,56,49,.94) 0%, rgba(31,82,57,.95) 45%, rgba(28,112,61,.94) 100%) !important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.black .equipment-cta::before,
.white.black .equipment-cta::before,
html[data-theme="dark"] .equipment-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: auto -8% -42% auto !important;
  width: 48% !important;
  height: 88% !important;
  border-radius: 50% !important;
  border: 4px solid rgba(198, 255, 116, .42) !important;
  border-left-color: transparent !important;
  background: none !important;
  transform: rotate(-9deg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body.black .equipment-cta::after,
.white.black .equipment-cta::after,
html[data-theme="dark"] .equipment-cta::after {
  content: "" !important;
  position: absolute !important;
  left: 20% !important;
  top: -38% !important;
  width: 560px !important;
  height: 560px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 72%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body.black .equipment-cta h2,
.white.black .equipment-cta h2,
html[data-theme="dark"] .equipment-cta h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.black .equipment-cta p,
.white.black .equipment-cta p,
html[data-theme="dark"] .equipment-cta p {
  color: rgba(240, 248, 244, .90) !important;
  -webkit-text-fill-color: rgba(240, 248, 244, .90) !important;
}

body.black .equipment-cta input,
body.black .equipment-cta textarea,
body.black .equipment-cta select,
.white.black .equipment-cta input,
.white.black .equipment-cta textarea,
.white.black .equipment-cta select,
html[data-theme="dark"] .equipment-cta input,
html[data-theme="dark"] .equipment-cta textarea,
html[data-theme="dark"] .equipment-cta select {
  background: rgba(255,255,255,.10) !important;
  color: #f4fff7 !important;
  -webkit-text-fill-color: #f4fff7 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.08) !important;
}

body.black .equipment-cta input::placeholder,
body.black .equipment-cta textarea::placeholder,
.white.black .equipment-cta input::placeholder,
.white.black .equipment-cta textarea::placeholder,
html[data-theme="dark"] .equipment-cta input::placeholder,
html[data-theme="dark"] .equipment-cta textarea::placeholder {
  color: rgba(240,250,245,.68) !important;
  -webkit-text-fill-color: rgba(240,250,245,.68) !important;
}

body.black .equipment-cta input:focus,
body.black .equipment-cta textarea:focus,
body.black .equipment-cta select:focus,
.white.black .equipment-cta input:focus,
.white.black .equipment-cta textarea:focus,
.white.black .equipment-cta select:focus,
html[data-theme="dark"] .equipment-cta input:focus,
html[data-theme="dark"] .equipment-cta textarea:focus,
html[data-theme="dark"] .equipment-cta select:focus {
  border-color: rgba(126, 240, 77, .44) !important;
  box-shadow: 0 0 0 4px rgba(126, 240, 77, .14), 0 12px 28px rgba(0,0,0,.14) !important;
}

body.black .equipment-cta .btn,
body.black .equipment-cta button,
body.black .equipment-cta input[type="submit"],
.white.black .equipment-cta .btn,
.white.black .equipment-cta button,
.white.black .equipment-cta input[type="submit"],
html[data-theme="dark"] .equipment-cta .btn,
html[data-theme="dark"] .equipment-cta button,
html[data-theme="dark"] .equipment-cta input[type="submit"] {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(135deg, #19ba49 0%, #24ce55 54%, #59e819 120%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px rgba(0,0,0,.18) !important;
}

/* -----------------------------
   ART / pictures
   ----------------------------- */
.equipment-cta-art,
.white .equipment-cta-art,
.white.black .equipment-cta-art,
html[data-theme="light"] .equipment-cta-art,
html[data-theme="dark"] .equipment-cta-art {
  position: relative !important;
  min-height: clamp(220px, 18vw, 310px) !important;
}

.equipment-cta-art .equipment-visual.router,
.white .equipment-cta-art .equipment-visual.router,
.white.black .equipment-cta-art .equipment-visual.router,
html[data-theme="light"] .equipment-cta-art .equipment-visual.router,
html[data-theme="dark"] .equipment-cta-art .equipment-visual.router {
  position: absolute !important;
  left: 2% !important;
  bottom: 12px !important;
  width: 318px !important;
  height: 212px !important;
  transform: scale(1.06) !important;
  transform-origin: bottom left !important;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.20)) !important;
}

.equipment-cta-art .equipment-visual.battery,
.white .equipment-cta-art .equipment-visual.battery,
.white.black .equipment-cta-art .equipment-visual.battery,
html[data-theme="light"] .equipment-cta-art .equipment-visual.battery,
html[data-theme="dark"] .equipment-cta-art .equipment-visual.battery {
  position: absolute !important;
  right: 11% !important;
  bottom: 30px !important;
  width: 220px !important;
  height: 160px !important;
  transform: scale(1.0) !important;
  transform-origin: bottom right !important;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18)) !important;
}

/* -----------------------------
   Responsive
   ----------------------------- */
@media (max-width: 1180px) {
  .equipment-cta,
  .white .equipment-cta,
  .white.black .equipment-cta,
  html[data-theme="light"] .equipment-cta,
  html[data-theme="dark"] .equipment-cta {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .equipment-cta-art,
  .white .equipment-cta-art,
  .white.black .equipment-cta-art,
  html[data-theme="light"] .equipment-cta-art,
  html[data-theme="dark"] .equipment-cta-art {
    min-height: 250px !important;
  }
}

@media (max-width: 760px) {
  .equipment-cta,
  .white .equipment-cta,
  .white.black .equipment-cta,
  html[data-theme="light"] .equipment-cta,
  html[data-theme="dark"] .equipment-cta {
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  .equipment-cta form,
  .white .equipment-cta form,
  .white.black .equipment-cta form,
  html[data-theme="light"] .equipment-cta form,
  html[data-theme="dark"] .equipment-cta form {
    grid-template-columns: 1fr !important;
  }

  .equipment-cta .btn,
  .equipment-cta button,
  .equipment-cta input[type="submit"],
  .white .equipment-cta .btn,
  .white .equipment-cta button,
  .white .equipment-cta input[type="submit"],
  .white.black .equipment-cta .btn,
  .white.black .equipment-cta button,
  .white.black .equipment-cta input[type="submit"],
  html[data-theme="light"] .equipment-cta .btn,
  html[data-theme="light"] .equipment-cta button,
  html[data-theme="light"] .equipment-cta input[type="submit"],
  html[data-theme="dark"] .equipment-cta .btn,
  html[data-theme="dark"] .equipment-cta button,
  html[data-theme="dark"] .equipment-cta input[type="submit"] {
    width: 100% !important;
  }

  .equipment-cta-art .equipment-visual.router,
  .white .equipment-cta-art .equipment-visual.router,
  .white.black .equipment-cta-art .equipment-visual.router,
  html[data-theme="light"] .equipment-cta-art .equipment-visual.router,
  html[data-theme="dark"] .equipment-cta-art .equipment-visual.router {
    width: 248px !important;
    height: 176px !important;
    left: 0 !important;
    transform: scale(.94) !important;
  }

  .equipment-cta-art .equipment-visual.battery,
  .white .equipment-cta-art .equipment-visual.battery,
  .white.black .equipment-cta-art .equipment-visual.battery,
  html[data-theme="light"] .equipment-cta-art .equipment-visual.battery,
  html[data-theme="dark"] .equipment-cta-art .equipment-visual.battery {
    width: 170px !important;
    height: 124px !important;
    right: 0 !important;
    transform: scale(.9) !important;
  }
}
  /* ==========================================================
   ZasNet About 01 — Hero Banner
   Вкладка "Про нас": верхній банер "Про ZasNet"

   Точні класи з сайту:
   .about-page
   .about-hero
   .about-badges
   .home-icon

   Ставити в самий кінець site.css.
   Не чіпає нижні блоки "статистика", "місія", документи тощо.
   ========================================================== */


/* ==========================================================
   PAGE WIDTH
   ========================================================== */

.about-page {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==========================================================
   HERO BASE
   ========================================================== */

.about-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: 100% !important;
  min-height: clamp(390px, 31vw, 510px) !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  color: #071427 !important;

  box-shadow:
    0 22px 58px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

/* overlay як на відеобанері: м’який fade зліва */
.about-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* декоративна м’яка дуга/світіння */
.about-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none !important;

  left: -10% !important;
  bottom: -42% !important;
  width: 54% !important;
  height: 80% !important;
  border-radius: 50% !important;

  border: 3px solid rgba(255,255,255,.36) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;

  transform: rotate(-10deg) !important;
}

.about-hero > div {
  position: relative !important;
  z-index: 3 !important;

  width: min(100%, 650px) !important;
  max-width: 650px !important;
  padding: clamp(42px, 4.2vw, 68px) clamp(34px, 4.2vw, 70px) !important;
}


/* ==========================================================
   TITLE / TEXT
   ========================================================== */

.about-hero h1 {
  max-width: 640px !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(48px, 4.7vw, 78px) !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: -0.042em !important;

  text-shadow: none !important;
}

.about-hero h1::first-letter,
.about-hero h1 span {
  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;
}

.about-hero p {
  max-width: 590px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 18px !important;
  line-height: 1.62 !important;
  font-weight: 520 !important;
  letter-spacing: -0.008em !important;

  text-shadow: none !important;
}


/* ==========================================================
   BADGES
   ========================================================== */

.about-badges {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;

  max-width: 590px !important;
  margin-top: 30px !important;
}

.about-badges article {
  min-height: 78px !important;
  padding: 14px 18px !important;

  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background: rgba(255,255,255,.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 28px rgba(15,23,42,.08) !important;

  backdrop-filter: blur(10px) !important;
}

.about-badges .home-icon {
  width: 42px !important;
  height: 42px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background: rgba(34,197,94,.10) !important;
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}

.about-badges strong {
  display: block !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.about-badges small {
  display: block !important;
  margin-top: 4px !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}


/* ==========================================================
   LIGHT THEME
   ========================================================== */

body:not(.black) .about-hero,
.white:not(.black) .about-hero,
html[data-theme="light"] .about-hero {
  border-color: rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 78% 24%, rgba(34,197,94,.10), transparent 25%),
    radial-gradient(circle at 92% 78%, rgba(34,197,94,.08), transparent 22%),
    linear-gradient(
      90deg,
      rgba(250,253,251,.98) 0%,
      rgba(250,253,251,.95) 38%,
      rgba(237,248,241,.66) 58%,
      rgba(237,248,241,.20) 78%,
      rgba(237,248,241,.04) 100%
    ),
    url("../img/hero-family-zasnet.png") center right / cover no-repeat !important;

  box-shadow:
    0 22px 58px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body:not(.black) .about-hero::before,
.white:not(.black) .about-hero::before,
html[data-theme="light"] .about-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(250,253,251,.96) 0%,
      rgba(250,253,251,.92) 28%,
      rgba(250,253,251,.70) 44%,
      rgba(250,253,251,.22) 65%,
      rgba(250,253,251,0) 82%
    ) !important;
}

body:not(.black) .about-hero::after,
.white:not(.black) .about-hero::after,
html[data-theme="light"] .about-hero::after {
  border-color: rgba(255,255,255,.42) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}

body:not(.black) .about-hero h1,
.white:not(.black) .about-hero h1,
html[data-theme="light"] .about-hero h1 {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
}

body:not(.black) .about-hero p,
.white:not(.black) .about-hero p,
html[data-theme="light"] .about-hero p {
  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .about-hero,
.white.black .about-hero,
html[data-theme="dark"] .about-hero {
  border-color: rgba(226,232,240,.15) !important;

  background:
    radial-gradient(circle at 78% 24%, rgba(126,240,77,.11), transparent 25%),
    radial-gradient(circle at 92% 78%, rgba(126,240,77,.09), transparent 22%),
    linear-gradient(
      90deg,
      rgba(5, 18, 14, .94) 0%,
      rgba(5, 18, 14, .88) 32%,
      rgba(5, 18, 14, .64) 54%,
      rgba(5, 18, 14, .28) 78%,
      rgba(5, 18, 14, .08) 100%
    ),
    url("../img/hero-family-zasnet.png") center right / cover no-repeat !important;

  box-shadow:
    0 24px 64px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.07) !important;

  color: #f7fff9 !important;
}

body.black .about-hero::before,
.white.black .about-hero::before,
html[data-theme="dark"] .about-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(5,18,14,.94) 0%,
      rgba(5,18,14,.86) 30%,
      rgba(5,18,14,.64) 48%,
      rgba(5,18,14,.25) 68%,
      rgba(5,18,14,0) 86%
    ) !important;
}

body.black .about-hero::after,
.white.black .about-hero::after,
html[data-theme="dark"] .about-hero::after {
  border-color: rgba(126,240,77,.16) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}

body.black .about-hero h1,
.white.black .about-hero h1,
html[data-theme="dark"] .about-hero h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.16) !important;
}

body.black .about-hero h1::first-letter,
body.black .about-hero h1 span,
.white.black .about-hero h1::first-letter,
.white.black .about-hero h1 span,
html[data-theme="dark"] .about-hero h1::first-letter,
html[data-theme="dark"] .about-hero h1 span {
  color: #19a34a !important;
  -webkit-text-fill-color: #19a34a !important;
}

body.black .about-hero p,
.white.black .about-hero p,
html[data-theme="dark"] .about-hero p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}

body.black .about-badges article,
.white.black .about-badges article,
html[data-theme="dark"] .about-badges article {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.09) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 26px rgba(0,0,0,.14) !important;
}

body.black .about-badges .home-icon,
.white.black .about-badges .home-icon,
html[data-theme="dark"] .about-badges .home-icon {
  border-color: rgba(126,240,77,.18) !important;
  background: rgba(126,240,77,.10) !important;
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

body.black .about-badges strong,
.white.black .about-badges strong,
html[data-theme="dark"] .about-badges strong {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-badges small,
.white.black .about-badges small,
html[data-theme="dark"] .about-badges small {
  color: rgba(240,250,245,.72) !important;
  -webkit-text-fill-color: rgba(240,250,245,.72) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  .about-page {
    width: calc(100% - 32px) !important;
  }

  .about-hero {
    min-height: auto !important;
    align-items: flex-start !important;
  }

  body:not(.black) .about-hero,
  .white:not(.black) .about-hero,
  html[data-theme="light"] .about-hero {
    background:
      linear-gradient(
        180deg,
        rgba(250,253,251,.98) 0%,
        rgba(250,253,251,.92) 44%,
        rgba(250,253,251,.42) 100%
      ),
      url("../img/hero-family-zasnet.png") center bottom / cover no-repeat !important;
  }

  body.black .about-hero,
  .white.black .about-hero,
  html[data-theme="dark"] .about-hero {
    background:
      linear-gradient(
        180deg,
        rgba(5,18,14,.94) 0%,
        rgba(5,18,14,.84) 44%,
        rgba(5,18,14,.32) 100%
      ),
      url("../img/hero-family-zasnet.png") center bottom / cover no-repeat !important;
  }

  .about-hero > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 34px 28px 250px !important;
  }

  .about-badges {
    max-width: 620px !important;
  }
}

@media (max-width: 640px) {
  .about-page {
    width: calc(100% - 20px) !important;
  }

  .about-hero {
    border-radius: 24px !important;
  }

  .about-hero > div {
    padding: 30px 20px 220px !important;
  }

  .about-hero h1 {
    font-size: clamp(38px, 10vw, 54px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.034em !important;
  }

  .about-hero p {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .about-badges {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
/* ==========================================================
   ZasNet About 02 — Stats Cards
   Вкладка "Про нас": блок статистики
   10+ років / 1000+ / 24/7 / 99.9%

   Точний клас:
   .about-stats

   Ставити в самий кінець site.css після About 01.
   Не чіпає hero, місію, документи, timeline і footer.
   ========================================================== */


/* ==========================================================
   SECTION / GRID
   ========================================================== */

.about-stats {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;

  margin: clamp(30px, 3.4vw, 48px) auto 0 !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.about-stats article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 150px !important;
  padding: 30px 28px 28px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 16% 12%, rgba(34,197,94,.07), transparent 36%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 36px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.about-stats article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 22px 46px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.about-stats article::before {
  content: "" !important;
  position: absolute !important;
  right: -42px !important;
  top: -42px !important;
  z-index: 0 !important;

  width: 120px !important;
  height: 120px !important;
  border-radius: 999px !important;

  background: radial-gradient(circle, rgba(34,197,94,.11), transparent 68%) !important;
  pointer-events: none !important;
}

.about-stats article > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   NUMBER / TEXT
   ========================================================== */

.about-stats strong {
  display: block !important;
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(38px, 3.25vw, 58px) !important;
  line-height: .95 !important;
  font-weight: 780 !important;
  letter-spacing: -0.045em !important;

  text-shadow: none !important;
}

.about-stats span {
  display: block !important;
  max-width: 320px !important;

  margin: 18px 0 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 16px !important;
  line-height: 1.48 !important;
  font-weight: 500 !important;
  letter-spacing: -0.006em !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .about-stats article,
.white.black .about-stats article,
html[data-theme="dark"] .about-stats article {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 16% 12%, rgba(126,240,77,.08), transparent 36%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .about-stats article:hover,
.white.black .about-stats article:hover,
html[data-theme="dark"] .about-stats article:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.black .about-stats article::before,
.white.black .about-stats article::before,
html[data-theme="dark"] .about-stats article::before {
  background: radial-gradient(circle, rgba(126,240,77,.10), transparent 68%) !important;
}

body.black .about-stats strong,
.white.black .about-stats strong,
html[data-theme="dark"] .about-stats strong {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-stats span,
.white.black .about-stats span,
html[data-theme="dark"] .about-stats span {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .about-stats {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 30px !important;
  }

  .about-stats article {
    min-height: 130px !important;
    padding: 24px 22px !important;
  }

  .about-stats strong {
    font-size: clamp(34px, 12vw, 46px) !important;
  }

  .about-stats span {
    margin-top: 12px !important;
    font-size: 15px !important;
  }
}
/* ==========================================================
   ZasNet About 03 — Why Choose ZasNet
   Вкладка "Про нас": блок "Чому обирають ZasNet?"

   Точні класи:
   .about-why
   .about-why-grid
   .home-icon

   Ставити в самий кінець site.css після About 02.
   Не чіпає hero, статистику, документи, timeline і footer.
   ========================================================== */


/* ==========================================================
   MAIN CARD
   ========================================================== */

.about-why {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  width: 100% !important;
  padding: clamp(30px, 3.2vw, 46px) !important;

  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 85% 18%, rgba(34,197,94,.08), transparent 30%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.about-why::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  right: -120px !important;
  top: -120px !important;
  width: 420px !important;
  height: 420px !important;

  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.09), transparent 70%) !important;
  pointer-events: none !important;
}

.about-why > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   TITLE
   ========================================================== */

.about-why h2 {
  margin: 0 0 28px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(34px, 3.1vw, 52px) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;
}

.about-why h2 span {
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.about-why-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;

  margin-top: 0 !important;
}


/* ==========================================================
   FEATURE CARD
   ========================================================== */

.about-why-grid article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 150px !important;
  padding: 26px 26px !important;

  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "icon text" !important;
  column-gap: 20px !important;
  row-gap: 8px !important;
  align-items: center !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 10% 10%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.84) !important;

  box-shadow:
    0 14px 32px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.80) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.about-why-grid article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 20px 42px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.about-why-grid article::before,
.about-why-grid article::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.about-why-grid .home-icon {
  grid-area: icon !important;

  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background:
    linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07)) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 22px rgba(34,197,94,.08) !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.about-why-grid h3 {
  grid-area: title !important;

  max-width: 100% !important;
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(18px, 1.25vw, 23px) !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
  letter-spacing: -0.018em !important;
}

.about-why-grid p {
  grid-area: text !important;

  max-width: 420px !important;
  margin: 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 460 !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .about-why,
.white.black .about-why,
html[data-theme="dark"] .about-why {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 85% 18%, rgba(126,240,77,.08), transparent 30%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .about-why::before,
.white.black .about-why::before,
html[data-theme="dark"] .about-why::before {
  background: radial-gradient(circle, rgba(126,240,77,.09), transparent 70%) !important;
}

body.black .about-why h2,
.white.black .about-why h2,
html[data-theme="dark"] .about-why h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-why h2 span,
.white.black .about-why h2 span,
html[data-theme="dark"] .about-why h2 span {
  color: #72ff4f !important;
  -webkit-text-fill-color: #72ff4f !important;
}

body.black .about-why-grid article,
.white.black .about-why-grid article,
html[data-theme="dark"] .about-why-grid article {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 10% 10%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 16px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .about-why-grid article:hover,
.white.black .about-why-grid article:hover,
html[data-theme="dark"] .about-why-grid article:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 44px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.black .about-why-grid .home-icon,
.white.black .about-why-grid .home-icon,
html[data-theme="dark"] .about-why-grid .home-icon {
  border-color: rgba(126,240,77,.16) !important;

  background:
    linear-gradient(180deg, rgba(126,240,77,.11), rgba(126,240,77,.07)) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10) !important;
}

body.black .about-why-grid h3,
.white.black .about-why-grid h3,
html[data-theme="dark"] .about-why-grid h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-why-grid p,
.white.black .about-why-grid p,
html[data-theme="dark"] .about-why-grid p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  .about-why-grid {
    grid-template-columns: 1fr !important;
  }

  .about-why {
    padding: 28px 22px !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 560px) {
  .about-why h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .about-why-grid article {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    padding: 22px 18px !important;
  }

  .about-why-grid .home-icon {
    width: 52px !important;
    height: 52px !important;
  }

  .about-why-grid p {
    font-size: 15px !important;
  }
}
/* ==========================================================
   ZasNet About 04 — Mission Card
   Вкладка "Про нас": блок "Наша місія"

   Точні класи:
   .about-mission
   .mission-illustration

   Ставити в самий кінець site.css після About 03.
   Не чіпає hero, статистику, "Чому обирають", документи,
   timeline і footer.
   ========================================================== */


/* ==========================================================
   MISSION CARD
   ========================================================== */

.about-mission {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 100% !important;
  padding: clamp(30px, 3vw, 44px) !important;

  display: flex !important;
  flex-direction: column !important;

  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 18% 10%, rgba(34,197,94,.08), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.about-mission::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  right: -120px !important;
  top: -120px !important;
  width: 420px !important;
  height: 420px !important;

  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.08), transparent 70%) !important;
  pointer-events: none !important;
}

.about-mission > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.about-mission h2 {
  margin: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(34px, 3.1vw, 52px) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;
}

.about-mission p {
  max-width: 720px !important;
  margin: 22px 0 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 17px !important;
  line-height: 1.72 !important;
  font-weight: 480 !important;
  letter-spacing: -0.006em !important;
}


/* ==========================================================
   DECORATIVE ILLUSTRATION
   ========================================================== */

.mission-illustration {
  position: relative !important;
  overflow: hidden !important;

  min-height: 150px !important;
  margin: auto clamp(-44px, -3vw, -30px) clamp(-44px, -3vw, -30px) !important;

  border-radius: 0 0 28px 28px !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;

  background:
    radial-gradient(circle at 18% 42%, rgba(34,197,94,.24), transparent 28%),
    radial-gradient(circle at 72% 54%, rgba(20,184,166,.18), transparent 30%),
    linear-gradient(135deg, rgba(224,247,234,.92), rgba(204,239,226,.92)) !important;
}

/* лінія зв'язку */
.mission-illustration::before {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 8% !important;
  top: 52% !important;
  height: 3px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(34,197,94,.10) 6%,
      rgba(34,197,94,.44) 28%,
      rgba(20,184,166,.34) 54%,
      rgba(126,240,77,.42) 78%,
      transparent 100%) !important;

  transform: rotate(-3deg) !important;
}

/* точки мережі */
.mission-illustration::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    radial-gradient(circle at 18% 48%, #22c55e 0 7px, rgba(34,197,94,.16) 8px 19px, transparent 20px),
    radial-gradient(circle at 43% 42%, #14b8a6 0 6px, rgba(20,184,166,.15) 7px 18px, transparent 19px),
    radial-gradient(circle at 70% 57%, #7ef04d 0 7px, rgba(126,240,77,.15) 8px 20px, transparent 21px),
    radial-gradient(circle at 86% 36%, #22c55e 0 5px, rgba(34,197,94,.13) 6px 16px, transparent 17px) !important;

  opacity: .95 !important;
  pointer-events: none !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .about-mission,
.white.black .about-mission,
html[data-theme="dark"] .about-mission {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 18% 10%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .about-mission::before,
.white.black .about-mission::before,
html[data-theme="dark"] .about-mission::before {
  background: radial-gradient(circle, rgba(126,240,77,.08), transparent 70%) !important;
}

body.black .about-mission h2,
.white.black .about-mission h2,
html[data-theme="dark"] .about-mission h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-mission p,
.white.black .about-mission p,
html[data-theme="dark"] .about-mission p {
  color: rgba(240,250,245,.78) !important;
  -webkit-text-fill-color: rgba(240,250,245,.78) !important;
}

body.black .mission-illustration,
.white.black .mission-illustration,
html[data-theme="dark"] .mission-illustration {
  border-top-color: rgba(255,255,255,.08) !important;

  background:
    radial-gradient(circle at 18% 42%, rgba(34,197,94,.18), transparent 28%),
    radial-gradient(circle at 72% 54%, rgba(20,184,166,.12), transparent 30%),
    linear-gradient(135deg, rgba(5,26,20,.95), rgba(8,42,30,.94)) !important;
}

body.black .mission-illustration::before,
.white.black .mission-illustration::before,
html[data-theme="dark"] .mission-illustration::before {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(126,240,77,.08) 6%,
      rgba(126,240,77,.36) 28%,
      rgba(20,184,166,.28) 54%,
      rgba(126,240,77,.38) 78%,
      transparent 100%) !important;
}

body.black .mission-illustration::after,
.white.black .mission-illustration::after,
html[data-theme="dark"] .mission-illustration::after {
  background:
    radial-gradient(circle at 18% 48%, #7ef04d 0 7px, rgba(126,240,77,.13) 8px 19px, transparent 20px),
    radial-gradient(circle at 43% 42%, #14b8a6 0 6px, rgba(20,184,166,.12) 7px 18px, transparent 19px),
    radial-gradient(circle at 70% 57%, #7ef04d 0 7px, rgba(126,240,77,.12) 8px 20px, transparent 21px),
    radial-gradient(circle at 86% 36%, #22c55e 0 5px, rgba(34,197,94,.10) 6px 16px, transparent 17px) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
  .about-mission {
    padding: 28px 22px !important;
    border-radius: 24px !important;
  }

  .mission-illustration {
    min-height: 120px !important;
    margin: 28px -22px -28px !important;
    border-radius: 0 0 24px 24px !important;
  }
}

@media (max-width: 560px) {
  .about-mission h2 {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .about-mission p {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .mission-illustration {
    min-height: 105px !important;
  }
}
/* ==========================================================
   ZasNet About 05.2 — Documents compact 4x3
   4 колонки на десктопі, компактні картки
   ========================================================== */

/* SECTION */
.about-documents {
  width: 100% !important;
  margin: clamp(26px, 3vw, 40px) auto 0 !important;
}

.about-documents h2 {
  margin: 0 !important;
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
  font-size: clamp(30px, 2.5vw, 44px) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -0.03em !important;
}

.about-documents > p {
  max-width: 620px !important;
  margin: 10px 0 0 !important;
  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 450 !important;
}

/* GRID — 4 x 3 */
.documents-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 22px !important;
}

/* CARD */
.documents-grid article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 176px !important;
  padding: 18px 18px 18px !important;

  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-rows: auto auto 1fr auto !important;
  grid-template-areas:
    "icon title"
    "icon desc"
    ". spacer"
    ". button" !important;

  column-gap: 12px !important;
  row-gap: 7px !important;
  align-items: start !important;

  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(34,197,94,.06), transparent 34%),
    rgba(255,255,255,.96) !important;
  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.documents-grid article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(34,197,94,.18) !important;
  box-shadow:
    0 16px 34px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.documents-grid article::before {
  content: "" !important;
  position: absolute !important;
  right: -54px !important;
  top: -54px !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.07), transparent 70%) !important;
  pointer-events: none !important;
}

.documents-grid article > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ICON */
.documents-grid .home-icon,
.documents-grid .home-icon.document {
  grid-area: icon !important;

  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;
  border: 1px solid rgba(34,197,94,.16) !important;
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07)) !important;
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 8px 18px rgba(34,197,94,.08) !important;
}

.documents-grid .home-icon.document::before {
  content: "✓" !important;
  display: block !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}

/* TEXT */
.documents-grid h3 {
  grid-area: title !important;
  margin: 2px 0 0 !important;
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
  font-size: clamp(16px, 0.95vw, 19px) !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
  letter-spacing: -0.016em !important;
}

.documents-grid p {
  grid-area: desc !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
  color: #5a6c80 !important;
  -webkit-text-fill-color: #5a6c80 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 450 !important;
}

/* BUTTON */
.documents-grid a {
  grid-area: button !important;

  width: 100% !important;
  min-height: 40px !important;
  margin-top: 8px !important;
  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  border: 1px solid rgba(34,197,94,.24) !important;
  background: rgba(255,255,255,.88) !important;

  color: #0a8f37 !important;
  -webkit-text-fill-color: #0a8f37 !important;

  font-size: 13.5px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 8px 18px rgba(15,23,42,.04) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.documents-grid a:hover {
  transform: translateY(-1px) !important;
  background: #ffffff !important;
  border-color: rgba(34,197,94,.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 12px 22px rgba(34,197,94,.08) !important;
}

/* DARK */
body.black .about-documents h2,
.white.black .about-documents h2,
html[data-theme="dark"] .about-documents h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-documents > p,
.white.black .about-documents > p,
html[data-theme="dark"] .about-documents > p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}

body.black .documents-grid article,
.white.black .documents-grid article,
html[data-theme="dark"] .documents-grid article {
  border-color: rgba(226,232,240,.12) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .documents-grid .home-icon,
body.black .documents-grid .home-icon.document,
.white.black .documents-grid .home-icon,
.white.black .documents-grid .home-icon.document,
html[data-theme="dark"] .documents-grid .home-icon,
html[data-theme="dark"] .documents-grid .home-icon.document {
  border-color: rgba(126,240,77,.16) !important;
  background: linear-gradient(180deg, rgba(126,240,77,.11), rgba(126,240,77,.07)) !important;
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 16px rgba(0,0,0,.10) !important;
}

body.black .documents-grid .home-icon.document::before,
.white.black .documents-grid .home-icon.document::before,
html[data-theme="dark"] .documents-grid .home-icon.document::before {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

body.black .documents-grid h3,
.white.black .documents-grid h3,
html[data-theme="dark"] .documents-grid h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .documents-grid p,
.white.black .documents-grid p,
html[data-theme="dark"] .documents-grid p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}

body.black .documents-grid a,
.white.black .documents-grid a,
html[data-theme="dark"] .documents-grid a {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(126,240,77,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.10) !important;
}

body.black .documents-grid a:hover,
.white.black .documents-grid a:hover,
html[data-theme="dark"] .documents-grid a:hover {
  background: rgba(126,240,77,.10) !important;
  border-color: rgba(126,240,77,.38) !important;
}

/* RESPONSIVE */
@media (max-width: 1380px) {
  .documents-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .documents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .documents-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .documents-grid article {
    min-height: auto !important;
    padding: 18px 16px !important;
  }

  .documents-grid h3 {
    font-size: 17px !important;
  }

  .documents-grid p {
    font-size: 13.5px !important;
  }

  .documents-grid a {
    min-height: 40px !important;
    font-size: 13.5px !important;
  }
}
/* ==========================================================
   ZasNet About 06 — Coverage Timeline
   Вкладка "Про нас": блок "Як ми розвиваємо покриття"

   Підтримані класи:
   .about-timeline
   .about-history
   .coverage-timeline
   .timeline-section
   .timeline-grid
   .home-icon

   Ставити в самий кінець site.css після About 05.
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

.about-timeline,
.about-history,
.coverage-timeline,
.timeline-section {
  width: 100% !important;
  margin: clamp(32px, 3.8vw, 52px) auto 0 !important;
}

.about-timeline h2,
.about-history h2,
.coverage-timeline h2,
.timeline-section h2 {
  margin: 0 0 24px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(34px, 3.1vw, 52px) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -0.038em !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.about-timeline .timeline-grid,
.about-history .timeline-grid,
.coverage-timeline .timeline-grid,
.timeline-section .timeline-grid,
.about-timeline > div,
.about-history > div,
.coverage-timeline > div,
.timeline-section > div {
  position: relative !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}

/* зелена лінія між картками */
.about-timeline .timeline-grid::before,
.about-history .timeline-grid::before,
.coverage-timeline .timeline-grid::before,
.timeline-section .timeline-grid::before,
.about-timeline > div::before,
.about-history > div::before,
.coverage-timeline > div::before,
.timeline-section > div::before {
  content: "" !important;
  position: absolute !important;
  left: 36px !important;
  right: 36px !important;
  top: 54px !important;
  height: 2px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(90deg,
      rgba(34,197,94,.12),
      rgba(34,197,94,.46),
      rgba(34,197,94,.46),
      rgba(34,197,94,.12)) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.about-timeline article,
.about-history article,
.coverage-timeline article,
.timeline-section article {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 255px !important;
  padding: 26px 24px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 18% 8%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;

  z-index: 2 !important;
}

.about-timeline article:hover,
.about-history article:hover,
.coverage-timeline article:hover,
.timeline-section article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 22px 46px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.about-timeline article::before,
.about-history article::before,
.coverage-timeline article::before,
.timeline-section article::before {
  content: "" !important;
  position: absolute !important;
  right: -58px !important;
  top: -58px !important;
  z-index: 0 !important;

  width: 170px !important;
  height: 170px !important;
  border-radius: 999px !important;

  background: radial-gradient(circle, rgba(34,197,94,.08), transparent 70%) !important;
  pointer-events: none !important;
}

.about-timeline article::after,
.about-history article::after,
.coverage-timeline article::after,
.timeline-section article::after {
  content: none !important;
  display: none !important;
}

.about-timeline article > *,
.about-history article > *,
.coverage-timeline article > *,
.timeline-section article > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.about-timeline .home-icon,
.about-history .home-icon,
.coverage-timeline .home-icon,
.timeline-section .home-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 24px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background:
    linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07)) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 22px rgba(34,197,94,.08) !important;
}

.about-timeline .home-icon svg,
.about-history .home-icon svg,
.coverage-timeline .home-icon svg,
.timeline-section .home-icon svg {
  width: 26px !important;
  height: 26px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.about-timeline article small,
.about-history article small,
.coverage-timeline article small,
.timeline-section article small,
.about-timeline article time,
.about-history article time,
.coverage-timeline article time,
.timeline-section article time {
  display: block !important;
  margin: 0 0 6px !important;

  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: -0.008em !important;
}

.about-timeline article h3,
.about-history article h3,
.coverage-timeline article h3,
.timeline-section article h3 {
  margin: 0 0 18px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(19px, 1.28vw, 24px) !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
  letter-spacing: -0.018em !important;
}

.about-timeline article p,
.about-history article p,
.coverage-timeline article p,
.timeline-section article p {
  margin: 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15.5px !important;
  line-height: 1.58 !important;
  font-weight: 460 !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .about-timeline h2,
body.black .about-history h2,
body.black .coverage-timeline h2,
body.black .timeline-section h2,
.white.black .about-timeline h2,
.white.black .about-history h2,
.white.black .coverage-timeline h2,
.white.black .timeline-section h2,
html[data-theme="dark"] .about-timeline h2,
html[data-theme="dark"] .about-history h2,
html[data-theme="dark"] .coverage-timeline h2,
html[data-theme="dark"] .timeline-section h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-timeline .timeline-grid::before,
body.black .about-history .timeline-grid::before,
body.black .coverage-timeline .timeline-grid::before,
body.black .timeline-section .timeline-grid::before,
body.black .about-timeline > div::before,
body.black .about-history > div::before,
body.black .coverage-timeline > div::before,
body.black .timeline-section > div::before,
.white.black .about-timeline .timeline-grid::before,
.white.black .about-history .timeline-grid::before,
.white.black .coverage-timeline .timeline-grid::before,
.white.black .timeline-section .timeline-grid::before,
.white.black .about-timeline > div::before,
.white.black .about-history > div::before,
.white.black .coverage-timeline > div::before,
.white.black .timeline-section > div::before,
html[data-theme="dark"] .about-timeline .timeline-grid::before,
html[data-theme="dark"] .about-history .timeline-grid::before,
html[data-theme="dark"] .coverage-timeline .timeline-grid::before,
html[data-theme="dark"] .timeline-section .timeline-grid::before,
html[data-theme="dark"] .about-timeline > div::before,
html[data-theme="dark"] .about-history > div::before,
html[data-theme="dark"] .coverage-timeline > div::before,
html[data-theme="dark"] .timeline-section > div::before {
  background:
    linear-gradient(90deg,
      rgba(126,240,77,.10),
      rgba(126,240,77,.36),
      rgba(126,240,77,.36),
      rgba(126,240,77,.10)) !important;
}

body.black .about-timeline article,
body.black .about-history article,
body.black .coverage-timeline article,
body.black .timeline-section article,
.white.black .about-timeline article,
.white.black .about-history article,
.white.black .coverage-timeline article,
.white.black .timeline-section article,
html[data-theme="dark"] .about-timeline article,
html[data-theme="dark"] .about-history article,
html[data-theme="dark"] .coverage-timeline article,
html[data-theme="dark"] .timeline-section article {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 18% 8%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .about-timeline article:hover,
body.black .about-history article:hover,
body.black .coverage-timeline article:hover,
body.black .timeline-section article:hover,
.white.black .about-timeline article:hover,
.white.black .about-history article:hover,
.white.black .coverage-timeline article:hover,
.white.black .timeline-section article:hover,
html[data-theme="dark"] .about-timeline article:hover,
html[data-theme="dark"] .about-history article:hover,
html[data-theme="dark"] .coverage-timeline article:hover,
html[data-theme="dark"] .timeline-section article:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.black .about-timeline article::before,
body.black .about-history article::before,
body.black .coverage-timeline article::before,
body.black .timeline-section article::before,
.white.black .about-timeline article::before,
.white.black .about-history article::before,
.white.black .coverage-timeline article::before,
.white.black .timeline-section article::before,
html[data-theme="dark"] .about-timeline article::before,
html[data-theme="dark"] .about-history article::before,
html[data-theme="dark"] .coverage-timeline article::before,
html[data-theme="dark"] .timeline-section article::before {
  background: radial-gradient(circle, rgba(126,240,77,.09), transparent 70%) !important;
}

body.black .about-timeline .home-icon,
body.black .about-history .home-icon,
body.black .coverage-timeline .home-icon,
body.black .timeline-section .home-icon,
.white.black .about-timeline .home-icon,
.white.black .about-history .home-icon,
.white.black .coverage-timeline .home-icon,
.white.black .timeline-section .home-icon,
html[data-theme="dark"] .about-timeline .home-icon,
html[data-theme="dark"] .about-history .home-icon,
html[data-theme="dark"] .coverage-timeline .home-icon,
html[data-theme="dark"] .timeline-section .home-icon {
  border-color: rgba(126,240,77,.16) !important;

  background:
    linear-gradient(180deg, rgba(126,240,77,.11), rgba(126,240,77,.07)) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10) !important;
}

body.black .about-timeline article small,
body.black .about-history article small,
body.black .coverage-timeline article small,
body.black .timeline-section article small,
body.black .about-timeline article time,
body.black .about-history article time,
body.black .coverage-timeline article time,
body.black .timeline-section article time,
.white.black .about-timeline article small,
.white.black .about-history article small,
.white.black .coverage-timeline article small,
.white.black .timeline-section article small,
.white.black .about-timeline article time,
.white.black .about-history article time,
.white.black .coverage-timeline article time,
.white.black .timeline-section article time,
html[data-theme="dark"] .about-timeline article small,
html[data-theme="dark"] .about-history article small,
html[data-theme="dark"] .coverage-timeline article small,
html[data-theme="dark"] .timeline-section article small,
html[data-theme="dark"] .about-timeline article time,
html[data-theme="dark"] .about-history article time,
html[data-theme="dark"] .coverage-timeline article time,
html[data-theme="dark"] .timeline-section article time {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
}

body.black .about-timeline article h3,
body.black .about-history article h3,
body.black .coverage-timeline article h3,
body.black .timeline-section article h3,
.white.black .about-timeline article h3,
.white.black .about-history article h3,
.white.black .coverage-timeline article h3,
.white.black .timeline-section article h3,
html[data-theme="dark"] .about-timeline article h3,
html[data-theme="dark"] .about-history article h3,
html[data-theme="dark"] .coverage-timeline article h3,
html[data-theme="dark"] .timeline-section article h3 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .about-timeline article p,
body.black .about-history article p,
body.black .coverage-timeline article p,
body.black .timeline-section article p,
.white.black .about-timeline article p,
.white.black .about-history article p,
.white.black .coverage-timeline article p,
.white.black .timeline-section article p,
html[data-theme="dark"] .about-timeline article p,
html[data-theme="dark"] .about-history article p,
html[data-theme="dark"] .coverage-timeline article p,
html[data-theme="dark"] .timeline-section article p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1280px) {
  .about-timeline .timeline-grid,
  .about-history .timeline-grid,
  .coverage-timeline .timeline-grid,
  .timeline-section .timeline-grid,
  .about-timeline > div,
  .about-history > div,
  .coverage-timeline > div,
  .timeline-section > div {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .about-timeline .timeline-grid::before,
  .about-history .timeline-grid::before,
  .coverage-timeline .timeline-grid::before,
  .timeline-section .timeline-grid::before,
  .about-timeline > div::before,
  .about-history > div::before,
  .coverage-timeline > div::before,
  .timeline-section > div::before {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .about-timeline .timeline-grid,
  .about-history .timeline-grid,
  .coverage-timeline .timeline-grid,
  .timeline-section .timeline-grid,
  .about-timeline > div,
  .about-history > div,
  .coverage-timeline > div,
  .timeline-section > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .about-timeline,
  .about-history,
  .coverage-timeline,
  .timeline-section {
    margin-top: 30px !important;
  }

  .about-timeline .timeline-grid,
  .about-history .timeline-grid,
  .coverage-timeline .timeline-grid,
  .timeline-section .timeline-grid,
  .about-timeline > div,
  .about-history > div,
  .coverage-timeline > div,
  .timeline-section > div {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .about-timeline article,
  .about-history article,
  .coverage-timeline article,
  .timeline-section article {
    min-height: auto !important;
    padding: 22px 18px !important;
  }

  .about-timeline .home-icon,
  .about-history .home-icon,
  .coverage-timeline .home-icon,
  .timeline-section .home-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 18px !important;
  }
}
/* ==========================================================
   ZasNet About 06.1 — Timeline Line Fix
   Фікс блока "Як ми розвиваємо покриття"

   Проблема:
   зелена лінія проходила через іконки.

   Ставити НИЖЧЕ About 06, в самий кінець site.css.
   ========================================================== */


/* контейнер таймлайну */
.about-timeline .timeline-grid,
.about-history .timeline-grid,
.coverage-timeline .timeline-grid,
.timeline-section .timeline-grid,
.about-timeline > div,
.about-history > div,
.coverage-timeline > div,
.timeline-section > div {
  position: relative !important;
}

/* лінія позаду карток, тонша і нижче */
.about-timeline .timeline-grid::before,
.about-history .timeline-grid::before,
.coverage-timeline .timeline-grid::before,
.timeline-section .timeline-grid::before,
.about-timeline > div::before,
.about-history > div::before,
.coverage-timeline > div::before,
.timeline-section > div::before {
  top: 54px !important;
  left: 76px !important;
  right: 76px !important;
  height: 2px !important;
  opacity: .55 !important;
  z-index: 1 !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(34,197,94,.22) 8%,
      rgba(34,197,94,.42) 50%,
      rgba(34,197,94,.22) 92%,
      transparent 100%
    ) !important;
}

/* картки вище лінії */
.about-timeline article,
.about-history article,
.coverage-timeline article,
.timeline-section article {
  z-index: 3 !important;
}

/* іконка перекриває лінію своїм фоном */
.about-timeline .home-icon,
.about-history .home-icon,
.coverage-timeline .home-icon,
.timeline-section .home-icon {
  position: relative !important;
  z-index: 6 !important;

  margin-bottom: 22px !important;

  background:
    linear-gradient(180deg, rgba(34,197,94,.14), rgba(34,197,94,.08)) !important;

  box-shadow:
    0 0 0 12px rgba(255,255,255,.96),
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 22px rgba(34,197,94,.08) !important;
}

/* темна тема */
body.black .about-timeline .timeline-grid::before,
body.black .about-history .timeline-grid::before,
body.black .coverage-timeline .timeline-grid::before,
body.black .timeline-section .timeline-grid::before,
body.black .about-timeline > div::before,
body.black .about-history > div::before,
body.black .coverage-timeline > div::before,
body.black .timeline-section > div::before,
.white.black .about-timeline .timeline-grid::before,
.white.black .about-history .timeline-grid::before,
.white.black .coverage-timeline .timeline-grid::before,
.white.black .timeline-section .timeline-grid::before,
.white.black .about-timeline > div::before,
.white.black .about-history > div::before,
.white.black .coverage-timeline > div::before,
.white.black .timeline-section > div::before,
html[data-theme="dark"] .about-timeline .timeline-grid::before,
html[data-theme="dark"] .about-history .timeline-grid::before,
html[data-theme="dark"] .coverage-timeline .timeline-grid::before,
html[data-theme="dark"] .timeline-section .timeline-grid::before,
html[data-theme="dark"] .about-timeline > div::before,
html[data-theme="dark"] .about-history > div::before,
html[data-theme="dark"] .coverage-timeline > div::before,
html[data-theme="dark"] .timeline-section > div::before {
  opacity: .45 !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(126,240,77,.20) 8%,
      rgba(126,240,77,.36) 50%,
      rgba(126,240,77,.20) 92%,
      transparent 100%
    ) !important;
}

body.black .about-timeline .home-icon,
body.black .about-history .home-icon,
body.black .coverage-timeline .home-icon,
body.black .timeline-section .home-icon,
.white.black .about-timeline .home-icon,
.white.black .about-history .home-icon,
.white.black .coverage-timeline .home-icon,
.white.black .timeline-section .home-icon,
html[data-theme="dark"] .about-timeline .home-icon,
html[data-theme="dark"] .about-history .home-icon,
html[data-theme="dark"] .coverage-timeline .home-icon,
html[data-theme="dark"] .timeline-section .home-icon {
  background:
    linear-gradient(180deg, rgba(126,240,77,.13), rgba(126,240,77,.08)) !important;

  box-shadow:
    0 0 0 12px rgba(18,55,45,.96),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10) !important;
}

/* якщо на меншій ширині картки переносяться — лінію ховаємо */
@media (max-width: 1280px) {
  .about-timeline .timeline-grid::before,
  .about-history .timeline-grid::before,
  .coverage-timeline .timeline-grid::before,
  .timeline-section .timeline-grid::before,
  .about-timeline > div::before,
  .about-history > div::before,
  .coverage-timeline > div::before,
  .timeline-section > div::before {
    display: none !important;
  }

  .about-timeline .home-icon,
  .about-history .home-icon,
  .coverage-timeline .home-icon,
  .timeline-section .home-icon {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 12px 22px rgba(34,197,94,.08) !important;
  }

  body.black .about-timeline .home-icon,
  body.black .about-history .home-icon,
  body.black .coverage-timeline .home-icon,
  body.black .timeline-section .home-icon,
  .white.black .about-timeline .home-icon,
  .white.black .about-history .home-icon,
  .white.black .coverage-timeline .home-icon,
  .white.black .timeline-section .home-icon,
  html[data-theme="dark"] .about-timeline .home-icon,
  html[data-theme="dark"] .about-history .home-icon,
  html[data-theme="dark"] .coverage-timeline .home-icon,
  html[data-theme="dark"] .timeline-section .home-icon {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 12px 22px rgba(0,0,0,.10) !important;
  }
}
/* ==========================================================
   ZasNet Contacts 01 — Hero Banner
   Вкладка "Контакти": верхній банер "Контакти ZasNet"

   Точні класи з сайту:
   .contacts-hero
   .contacts-copy
   .contact-actions

   Ставити в самий кінець site.css.
   Не чіпає картки контактів, карту і footer.
   ========================================================== */


/* ==========================================================
   HERO BASE
   ========================================================== */

.contacts-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;

  min-height: clamp(440px, 34vw, 620px) !important;
  margin: clamp(24px, 3vw, 48px) auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 30px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  box-shadow:
    0 22px 58px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

/* м’який fade поверх картинки */
.contacts-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* декоративне світіння */
.contacts-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none !important;

  right: -8% !important;
  bottom: -38% !important;
  width: 52% !important;
  height: 86% !important;

  border-radius: 50% !important;
  border: 3px solid rgba(126,240,77,.28) !important;
  border-left-color: transparent !important;

  transform: rotate(-8deg) !important;
}

.contacts-hero > * {
  position: relative !important;
  z-index: 3 !important;
}


/* ==========================================================
   COPY
   ========================================================== */

.contacts-hero .contacts-copy {
  width: min(100%, 650px) !important;
  max-width: 650px !important;

  padding: clamp(44px, 4.4vw, 72px) clamp(34px, 4.4vw, 72px) !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.contacts-copy .section-label,
.contacts-copy .badge,
.contacts-copy > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 0 18px !important;
  margin: 0 0 24px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(34,197,94,.22) !important;

  background: rgba(34,197,94,.10) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
}

.contacts-copy h1 {
  max-width: 640px !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(56px, 5.3vw, 92px) !important;
  line-height: .98 !important;
  font-weight: 790 !important;
  letter-spacing: -0.046em !important;

  text-shadow: none !important;
}

.contacts-copy h1 span,
.contacts-copy h1 strong {
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}

.contacts-copy p {
  max-width: 590px !important;
  margin: 24px 0 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 520 !important;
  letter-spacing: -0.008em !important;

  text-shadow: none !important;
}


/* ==========================================================
   MINI CARDS / BADGES INSIDE HERO
   ========================================================== */

.contacts-hero .contacts-card,
.contacts-hero .contact-card,
.contacts-hero .hero-card {
  min-height: 92px !important;
  padding: 16px 18px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background: rgba(255,255,255,.78) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 28px rgba(15,23,42,.08) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.contacts-hero .home-icon,
.contacts-hero .line-icon {
  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 14px !important;
  border: 1px solid rgba(34,197,94,.16) !important;
  background: rgba(34,197,94,.10) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}

.contacts-hero .contacts-card strong,
.contacts-hero .contact-card strong,
.contacts-hero .hero-card strong {
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;
}

.contacts-hero .contacts-card small,
.contacts-hero .contact-card small,
.contacts-hero .hero-card small,
.contacts-hero .contacts-card p,
.contacts-hero .contact-card p,
.contacts-hero .hero-card p {
  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;
}


/* ==========================================================
   ACTION BUTTONS
   ========================================================== */

.contact-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 30px !important;
}

.contact-actions a,
.contact-actions .btn,
.contact-actions button {
  min-width: 190px !important;
  min-height: 56px !important;
  padding: 0 26px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  transition:
    transform .18s ease,
    filter .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.contact-actions a:hover,
.contact-actions .btn:hover,
.contact-actions button:hover {
  transform: translateY(-2px) !important;
}


/* ==========================================================
   LIGHT THEME
   ========================================================== */

body:not(.black) .contacts-hero,
.white:not(.black) .contacts-hero,
html[data-theme="light"] .contacts-hero {
  border-color: rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 82% 30%, rgba(34,197,94,.09), transparent 28%),
    radial-gradient(circle at 94% 78%, rgba(126,240,77,.10), transparent 24%),
    linear-gradient(
      90deg,
      rgba(250,253,251,.98) 0%,
      rgba(250,253,251,.96) 35%,
      rgba(237,248,241,.64) 58%,
      rgba(237,248,241,.18) 78%,
      rgba(237,248,241,.02) 100%
    ),
    var(--contacts-hero-image, url("../img/contacts-office-hero.png")) center right / cover no-repeat !important;

  box-shadow:
    0 22px 58px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body:not(.black) .contacts-hero::before,
.white:not(.black) .contacts-hero::before,
html[data-theme="light"] .contacts-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(250,253,251,.96) 0%,
      rgba(250,253,251,.92) 30%,
      rgba(250,253,251,.68) 48%,
      rgba(250,253,251,.20) 68%,
      rgba(250,253,251,0) 86%
    ) !important;
}

body:not(.black) .contact-actions a:first-child,
body:not(.black) .contact-actions .btn:first-child,
.white:not(.black) .contact-actions a:first-child,
.white:not(.black) .contact-actions .btn:first-child,
html[data-theme="light"] .contact-actions a:first-child,
html[data-theme="light"] .contact-actions .btn:first-child {
  border: 1px solid rgba(34,197,94,.14) !important;
  background: linear-gradient(135deg, #19bb49 0%, #24d55a 54%, #59e819 120%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 16px 34px rgba(34,197,94,.18) !important;
}

body:not(.black) .contact-actions a:not(:first-child),
body:not(.black) .contact-actions .btn:not(:first-child),
.white:not(.black) .contact-actions a:not(:first-child),
.white:not(.black) .contact-actions .btn:not(:first-child),
html[data-theme="light"] .contact-actions a:not(:first-child),
html[data-theme="light"] .contact-actions .btn:not(:first-child) {
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.90) !important;
  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 14px 28px rgba(15,23,42,.08) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .contacts-hero,
.white.black .contacts-hero,
html[data-theme="dark"] .contacts-hero {
  border-color: rgba(226,232,240,.15) !important;

  background:
    radial-gradient(circle at 82% 30%, rgba(126,240,77,.10), transparent 28%),
    radial-gradient(circle at 94% 78%, rgba(126,240,77,.09), transparent 24%),
    linear-gradient(
      90deg,
      rgba(5,18,14,.95) 0%,
      rgba(5,18,14,.89) 34%,
      rgba(5,18,14,.64) 55%,
      rgba(5,18,14,.30) 76%,
      rgba(5,18,14,.08) 100%
    ),
    var(--contacts-hero-image, url("../img/contacts-office-hero.png")) center right / cover no-repeat !important;

  box-shadow:
    0 24px 64px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.black .contacts-hero::before,
.white.black .contacts-hero::before,
html[data-theme="dark"] .contacts-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(5,18,14,.95) 0%,
      rgba(5,18,14,.88) 32%,
      rgba(5,18,14,.66) 50%,
      rgba(5,18,14,.28) 70%,
      rgba(5,18,14,0) 88%
    ) !important;
}

body.black .contacts-copy .section-label,
body.black .contacts-copy .badge,
body.black .contacts-copy > span:first-child,
.white.black .contacts-copy .section-label,
.white.black .contacts-copy .badge,
.white.black .contacts-copy > span:first-child,
html[data-theme="dark"] .contacts-copy .section-label,
html[data-theme="dark"] .contacts-copy .badge,
html[data-theme="dark"] .contacts-copy > span:first-child {
  border-color: rgba(126,240,77,.22) !important;
  background: rgba(126,240,77,.10) !important;

  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
}

body.black .contacts-copy h1,
.white.black .contacts-copy h1,
html[data-theme="dark"] .contacts-copy h1 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.16) !important;
}

body.black .contacts-copy p,
.white.black .contacts-copy p,
html[data-theme="dark"] .contacts-copy p {
  color: rgba(240,250,245,.82) !important;
  -webkit-text-fill-color: rgba(240,250,245,.82) !important;
}

body.black .contacts-hero .contacts-card,
body.black .contacts-hero .contact-card,
body.black .contacts-hero .hero-card,
.white.black .contacts-hero .contacts-card,
.white.black .contacts-hero .contact-card,
.white.black .contacts-hero .hero-card,
html[data-theme="dark"] .contacts-hero .contacts-card,
html[data-theme="dark"] .contacts-hero .contact-card,
html[data-theme="dark"] .contacts-hero .hero-card {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.09) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 26px rgba(0,0,0,.14) !important;
}

body.black .contacts-hero .home-icon,
body.black .contacts-hero .line-icon,
.white.black .contacts-hero .home-icon,
.white.black .contacts-hero .line-icon,
html[data-theme="dark"] .contacts-hero .home-icon,
html[data-theme="dark"] .contacts-hero .line-icon {
  border-color: rgba(126,240,77,.18) !important;
  background: rgba(126,240,77,.10) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

body.black .contacts-hero .contacts-card strong,
body.black .contacts-hero .contact-card strong,
body.black .contacts-hero .hero-card strong,
.white.black .contacts-hero .contacts-card strong,
.white.black .contacts-hero .contact-card strong,
.white.black .contacts-hero .hero-card strong,
html[data-theme="dark"] .contacts-hero .contacts-card strong,
html[data-theme="dark"] .contacts-hero .contact-card strong,
html[data-theme="dark"] .contacts-hero .hero-card strong {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .contacts-hero .contacts-card small,
body.black .contacts-hero .contact-card small,
body.black .contacts-hero .hero-card small,
body.black .contacts-hero .contacts-card p,
body.black .contacts-hero .contact-card p,
body.black .contacts-hero .hero-card p,
.white.black .contacts-hero .contacts-card small,
.white.black .contacts-hero .contact-card small,
.white.black .contacts-hero .hero-card small,
.white.black .contacts-hero .contacts-card p,
.white.black .contacts-hero .contact-card p,
.white.black .contacts-hero .hero-card p,
html[data-theme="dark"] .contacts-hero .contacts-card small,
html[data-theme="dark"] .contacts-hero .contact-card small,
html[data-theme="dark"] .contacts-hero .hero-card small,
html[data-theme="dark"] .contacts-hero .contacts-card p,
html[data-theme="dark"] .contacts-hero .contact-card p,
html[data-theme="dark"] .contacts-hero .hero-card p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}

body.black .contact-actions a:first-child,
body.black .contact-actions .btn:first-child,
.white.black .contact-actions a:first-child,
.white.black .contact-actions .btn:first-child,
html[data-theme="dark"] .contact-actions a:first-child,
html[data-theme="dark"] .contact-actions .btn:first-child {
  border: 1px solid rgba(126,240,77,.18) !important;
  background: linear-gradient(135deg, #18b846 0%, #25cf55 54%, #55e819 120%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 34px rgba(0,0,0,.18) !important;
}

body.black .contact-actions a:not(:first-child),
body.black .contact-actions .btn:not(:first-child),
.white.black .contact-actions a:not(:first-child),
.white.black .contact-actions .btn:not(:first-child),
html[data-theme="dark"] .contact-actions a:not(:first-child),
html[data-theme="dark"] .contact-actions .btn:not(:first-child) {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.10) !important;
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.12) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {
  .contacts-hero {
    width: calc(100% - 32px) !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  .contacts-hero .contacts-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 34px 28px 260px !important;
  }

  body:not(.black) .contacts-hero,
  .white:not(.black) .contacts-hero,
  html[data-theme="light"] .contacts-hero {
    background:
      linear-gradient(
        180deg,
        rgba(250,253,251,.98) 0%,
        rgba(250,253,251,.92) 46%,
        rgba(250,253,251,.28) 100%
      ),
      var(--contacts-hero-image, url("../img/contacts-office-hero.png")) center bottom / cover no-repeat !important;
  }

  body.black .contacts-hero,
  .white.black .contacts-hero,
  html[data-theme="dark"] .contacts-hero {
    background:
      linear-gradient(
        180deg,
        rgba(5,18,14,.95) 0%,
        rgba(5,18,14,.86) 46%,
        rgba(5,18,14,.28) 100%
      ),
      var(--contacts-hero-image, url("../img/contacts-office-hero.png")) center bottom / cover no-repeat !important;
  }
}

@media (max-width: 640px) {
  .contacts-hero {
    width: calc(100% - 20px) !important;
    border-radius: 24px !important;
  }

  .contacts-hero .contacts-copy {
    padding: 30px 20px 230px !important;
  }

  .contacts-copy h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 1.02 !important;
  }

  .contacts-copy p {
    margin-top: 18px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .contact-actions {
    gap: 12px !important;
  }

  .contact-actions a,
  .contact-actions .btn,
  .contact-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ==========================================================
   ZasNet Contacts 01.1 — Hero Buttons Fix
   Фікс кнопок у банері "Контакти ZasNet"

   Проблема:
   у темній темі кнопка "Написати e-mail" була темним текстом
   і погано читалась.

   Ставити нижче Contacts 01, в самий кінець site.css.
   ========================================================== */


/* загальна стабілізація кнопок саме в hero */
.contacts-hero .contact-actions,
.contacts-hero .contact-actions * {
  box-sizing: border-box !important;
}

.contacts-hero .contact-actions a,
.contacts-hero .contact-actions .btn,
.contacts-hero .contact-actions button {
  min-width: 190px !important;
  min-height: 56px !important;
  padding: 0 26px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;

  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.006em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}


/* перша кнопка — зелена */
.contacts-hero .contact-actions a:first-child,
.contacts-hero .contact-actions .btn:first-child,
.contacts-hero .contact-actions button:first-child {
  border: 1px solid rgba(34,197,94,.20) !important;
  background: linear-gradient(135deg, #18bb49 0%, #25d957 55%, #57ec18 120%) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 16px 34px rgba(34,197,94,.18) !important;
}


/* друга кнопка — світла у світлій темі */
body:not(.black) .contacts-hero .contact-actions a:nth-child(2),
body:not(.black) .contacts-hero .contact-actions .btn:nth-child(2),
body:not(.black) .contacts-hero .contact-actions button:nth-child(2),
.white:not(.black) .contacts-hero .contact-actions a:nth-child(2),
.white:not(.black) .contacts-hero .contact-actions .btn:nth-child(2),
.white:not(.black) .contacts-hero .contact-actions button:nth-child(2),
html[data-theme="light"] .contacts-hero .contact-actions a:nth-child(2),
html[data-theme="light"] .contacts-hero .contact-actions .btn:nth-child(2),
html[data-theme="light"] .contacts-hero .contact-actions button:nth-child(2) {
  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.90) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 14px 28px rgba(15,23,42,.08) !important;
}


/* друга кнопка — читабельна у темній темі */
body.black .contacts-hero .contact-actions a:nth-child(2),
body.black .contacts-hero .contact-actions .btn:nth-child(2),
body.black .contacts-hero .contact-actions button:nth-child(2),
.white.black .contacts-hero .contact-actions a:nth-child(2),
.white.black .contacts-hero .contact-actions .btn:nth-child(2),
.white.black .contacts-hero .contact-actions button:nth-child(2),
html[data-theme="dark"] .contacts-hero .contact-actions a:nth-child(2),
html[data-theme="dark"] .contacts-hero .contact-actions .btn:nth-child(2),
html[data-theme="dark"] .contacts-hero .contact-actions button:nth-child(2) {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.11) !important;

  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.14) !important;
}


/* hover */
.contacts-hero .contact-actions a:hover,
.contacts-hero .contact-actions .btn:hover,
.contacts-hero .contact-actions button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
}

body.black .contacts-hero .contact-actions a:nth-child(2):hover,
body.black .contacts-hero .contact-actions .btn:nth-child(2):hover,
body.black .contacts-hero .contact-actions button:nth-child(2):hover,
.white.black .contacts-hero .contact-actions a:nth-child(2):hover,
.white.black .contacts-hero .contact-actions .btn:nth-child(2):hover,
.white.black .contacts-hero .contact-actions button:nth-child(2):hover,
html[data-theme="dark"] .contacts-hero .contact-actions a:nth-child(2):hover,
html[data-theme="dark"] .contacts-hero .contact-actions .btn:nth-child(2):hover,
html[data-theme="dark"] .contacts-hero .contact-actions button:nth-child(2):hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.26) !important;
}


/* якщо кнопка має власні класи outline/secondary */
.contacts-hero .contact-actions .btn-outline,
.contacts-hero .contact-actions .btn-secondary,
.contacts-hero .contact-actions .secondary {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
/* ==========================================================
   ZasNet Contacts 01.2 — Hero Height & Top Spacing Fix
   Фікс банера "Контакти ZasNet"

   Що робить:
   - банер менший по висоті
   - банер ближче до шапки
   - текст і картки всередині компактніші
   - не чіпає інші блоки контактів

   Ставити нижче Contacts 01.1, в самий кінець site.css.
   ========================================================== */


/* сам банер */
.contacts-hero {
  min-height: clamp(360px, 27vw, 470px) !important;
  margin-top: clamp(10px, 1.4vw, 18px) !important;
  border-radius: 28px !important;
}

/* ліва частина з текстом */
.contacts-hero .contacts-copy {
  padding:
    clamp(34px, 3.4vw, 52px)
    clamp(32px, 4vw, 62px) !important;
  max-width: 610px !important;
}

/* маленький бейдж "Контакти" */
.contacts-copy .section-label,
.contacts-copy .badge,
.contacts-copy > span:first-child {
  min-height: 34px !important;
  padding: 0 16px !important;
  margin-bottom: 20px !important;
  font-size: 14px !important;
}

/* заголовок */
.contacts-copy h1 {
  font-size: clamp(48px, 4.7vw, 78px) !important;
  line-height: .98 !important;
  letter-spacing: -0.045em !important;
}

/* опис */
.contacts-copy p {
  margin-top: 20px !important;
  max-width: 560px !important;
  font-size: 17px !important;
  line-height: 1.58 !important;
}

/* картки підтримки в банері */
.contacts-hero .contacts-card,
.contacts-hero .contact-card,
.contacts-hero .hero-card {
  min-height: 82px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

/* іконки в картках */
.contacts-hero .home-icon,
.contacts-hero .line-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
}

/* кнопки */
.contacts-hero .contact-actions {
  margin-top: 24px !important;
  gap: 12px !important;
}

.contacts-hero .contact-actions a,
.contacts-hero .contact-actions .btn,
.contacts-hero .contact-actions button {
  min-height: 50px !important;
  min-width: 176px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}


/* адаптив */
@media (max-width: 980px) {
  .contacts-hero {
    min-height: auto !important;
    margin-top: 12px !important;
  }

  .contacts-hero .contacts-copy {
    padding: 30px 24px 230px !important;
  }
}

@media (max-width: 640px) {
  .contacts-hero {
    width: calc(100% - 20px) !important;
    margin-top: 10px !important;
    border-radius: 22px !important;
  }

  .contacts-hero .contacts-copy {
    padding: 26px 18px 210px !important;
  }

  .contacts-copy h1 {
    font-size: clamp(38px, 11vw, 52px) !important;
  }

  .contacts-copy p {
    font-size: 15px !important;
    line-height: 1.52 !important;
  }
}
/* ==========================================================
   ZasNet Contacts 01.3 — Compact Hero FINAL FIX
   Фікс банера "Контакти ZasNet"

   Що робить:
   - "Контакти ZasNet" в один рядок
   - банер нижчий по висоті
   - банер піднімається ближче до шапки
   - прибирає зайві верхні відступи сторінки
   - чіпає тільки сторінку контактів / contacts hero

   Ставити НИЖЧЕ Contacts 01.2, у самий кінець site.css.
   ========================================================== */


/* ==========================================================
   ПІДНІМАЄМО СТОРІНКУ ДО ШАПКИ
   ========================================================== */

/* якщо є обгортка сторінки контактів */
.contacts-page,
.contact-page,
.page-contacts,
.contacts-section,
.contact-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* якщо контакти лежать одразу в main */
main:has(.contacts-hero) {
  padding-top: 0 !important;
}

/* прибираємо зайві відступи у першого блока */
main:has(.contacts-hero) > *:first-child,
.contacts-page > *:first-child,
.contact-page > *:first-child,
.page-contacts > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ==========================================================
   HERO — МЕНША ВИСОТА І БЛИЖЧЕ ДО ШАПКИ
   ========================================================== */

.contacts-hero {
  width: min(1560px, calc(100% - 96px)) !important;

  min-height: clamp(300px, 21vw, 390px) !important;
  max-height: 390px !important;

  margin-top: -34px !important;
  margin-bottom: 0 !important;

  border-radius: 26px !important;

  transform: translateY(-18px) !important;
}

/* щоб після transform не було великої пустоти знизу */
.contacts-hero + * {
  margin-top: clamp(10px, 1.4vw, 22px) !important;
}


/* ==========================================================
   ЛІВА ЧАСТИНА
   ========================================================== */

.contacts-hero .contacts-copy {
  width: min(100%, 760px) !important;
  max-width: 760px !important;

  padding:
    clamp(26px, 2.7vw, 40px)
    clamp(30px, 4vw, 64px) !important;
}


/* бейдж "Контакти" */
.contacts-copy .section-label,
.contacts-copy .badge,
.contacts-copy > span:first-child {
  min-height: 32px !important;
  padding: 0 15px !important;
  margin-bottom: 16px !important;

  font-size: 13.5px !important;
  line-height: 1 !important;
}


/* ==========================================================
   ЗАГОЛОВОК В ОДИН РЯДОК
   ========================================================== */

.contacts-copy h1 {
  max-width: 760px !important;
  width: 760px !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;

  font-size: clamp(46px, 4.25vw, 72px) !important;
  line-height: .96 !important;
  letter-spacing: -0.048em !important;
  font-weight: 790 !important;
}

/* якщо в HTML є <br> між "Контакти" і "ZasNet" — прибираємо */
.contacts-copy h1 br {
  display: none !important;
}


/* опис */
.contacts-copy p {
  max-width: 610px !important;
  margin-top: 18px !important;

  font-size: 16.5px !important;
  line-height: 1.52 !important;
}


/* ==========================================================
   МІНІ-КАРТКИ В БАНЕРІ
   ========================================================== */

.contacts-hero .contacts-card,
.contacts-hero .contact-card,
.contacts-hero .hero-card {
  min-height: 74px !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
}

.contacts-hero .home-icon,
.contacts-hero .line-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
}

.contacts-hero .contacts-card strong,
.contacts-hero .contact-card strong,
.contacts-hero .hero-card strong {
  font-size: 15px !important;
  line-height: 1.12 !important;
}

.contacts-hero .contacts-card small,
.contacts-hero .contact-card small,
.contacts-hero .hero-card small,
.contacts-hero .contacts-card p,
.contacts-hero .contact-card p,
.contacts-hero .hero-card p {
  font-size: 13px !important;
  line-height: 1.25 !important;
}


/* ==========================================================
   КНОПКИ
   ========================================================== */

.contacts-hero .contact-actions {
  margin-top: 20px !important;
  gap: 12px !important;
}

.contacts-hero .contact-actions a,
.contacts-hero .contact-actions .btn,
.contacts-hero .contact-actions button {
  min-height: 46px !important;
  min-width: 164px !important;
  padding: 0 22px !important;
  border-radius: 13px !important;

  font-size: 13.5px !important;
}


/* ==========================================================
   ФОН / КАРТИНКА — ТРОХИ КОМПАКТНІШЕ
   ========================================================== */

body:not(.black) .contacts-hero,
.white:not(.black) .contacts-hero,
html[data-theme="light"] .contacts-hero {
  background-position: center right !important;
  background-size: cover !important;
}

body.black .contacts-hero,
.white.black .contacts-hero,
html[data-theme="dark"] .contacts-hero {
  background-position: center right !important;
  background-size: cover !important;
}


/* ==========================================================
   АДАПТИВ
   ========================================================== */

@media (max-width: 1200px) {
  .contacts-hero {
    margin-top: -20px !important;
    transform: translateY(-12px) !important;
    min-height: clamp(300px, 28vw, 380px) !important;
  }

  .contacts-copy h1 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(42px, 5.2vw, 62px) !important;
  }
}

@media (max-width: 980px) {
  .contacts-hero {
    width: calc(100% - 32px) !important;
    max-height: none !important;
    min-height: auto !important;

    margin-top: -12px !important;
    transform: translateY(-8px) !important;
  }

  .contacts-hero .contacts-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 24px 210px !important;
  }

  .contacts-copy h1 {
    white-space: normal !important;
    width: auto !important;
    font-size: clamp(38px, 8vw, 56px) !important;
  }
}

@media (max-width: 640px) {
  .contacts-hero {
    width: calc(100% - 20px) !important;
    margin-top: -8px !important;
    transform: translateY(-6px) !important;
    border-radius: 22px !important;
  }

  .contacts-hero .contacts-copy {
    padding: 24px 18px 190px !important;
  }

  .contacts-copy h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .contacts-copy p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .contacts-hero .contact-actions a,
  .contacts-hero .contact-actions .btn,
  .contacts-hero .contact-actions button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ==========================================================
   ZasNet Contacts 01.4 — Hero Position Like Equipment
   Фікс після Contacts 01.3

   Що робить:
   - банер НЕ прилиплий до шапки
   - відступ зверху як на вкладці "Обладнання"
   - "Контакти ZasNet" лишається в один рядок
   - висота компактна, але не сплющена
   - перебиває занадто сильне підняття з Contacts 01.3

   Ставити НИЖЧЕ Contacts 01.3, у самий кінець site.css.
   ========================================================== */


/* скасовуємо занадто сильне підняття */
.contacts-hero {
  margin-top: clamp(24px, 2.6vw, 42px) !important;
  transform: none !important;

  min-height: clamp(350px, 25vw, 455px) !important;
  max-height: none !important;

  border-radius: 28px !important;
}

/* щоб наступний блок не підскакував */
.contacts-hero + * {
  margin-top: clamp(24px, 2.6vw, 42px) !important;
}

/* якщо Contacts 01.3 прибрав відступи в main — повертаємо нормальний вигляд */
main:has(.contacts-hero) {
  padding-top: 0 !important;
}

/* лівий текст компактний, але не стиснутий */
.contacts-hero .contacts-copy {
  width: min(100%, 760px) !important;
  max-width: 760px !important;

  padding:
    clamp(32px, 3.2vw, 50px)
    clamp(34px, 4vw, 66px) !important;
}

/* бейдж */
.contacts-copy .section-label,
.contacts-copy .badge,
.contacts-copy > span:first-child {
  min-height: 34px !important;
  padding: 0 16px !important;
  margin-bottom: 18px !important;
}

/* Контакти ZasNet в один ряд */
.contacts-copy h1 {
  width: auto !important;
  max-width: 820px !important;

  white-space: nowrap !important;

  font-size: clamp(48px, 4.55vw, 76px) !important;
  line-height: .98 !important;
  letter-spacing: -0.046em !important;
}

.contacts-copy h1 br {
  display: none !important;
}

/* опис */
.contacts-copy p {
  max-width: 620px !important;
  margin-top: 18px !important;

  font-size: 16.5px !important;
  line-height: 1.56 !important;
}

/* картки в банері */
.contacts-hero .contacts-card,
.contacts-hero .contact-card,
.contacts-hero .hero-card {
  min-height: 78px !important;
  padding: 13px 15px !important;
}

/* кнопки */
.contacts-hero .contact-actions {
  margin-top: 22px !important;
}

.contacts-hero .contact-actions a,
.contacts-hero .contact-actions .btn,
.contacts-hero .contact-actions button {
  min-height: 48px !important;
  min-width: 168px !important;
  border-radius: 14px !important;
}


/* адаптив */
@media (max-width: 1200px) {
  .contacts-hero {
    margin-top: clamp(20px, 2.4vw, 34px) !important;
    transform: none !important;
    min-height: clamp(330px, 28vw, 420px) !important;
  }

  .contacts-copy h1 {
    white-space: nowrap !important;
    font-size: clamp(42px, 5vw, 62px) !important;
  }
}

@media (max-width: 980px) {
  .contacts-hero {
    width: calc(100% - 32px) !important;
    margin-top: 22px !important;
    transform: none !important;
    min-height: auto !important;
  }

  .contacts-hero .contacts-copy {
    padding: 28px 24px 220px !important;
  }

  .contacts-copy h1 {
    white-space: normal !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .contacts-hero {
    width: calc(100% - 20px) !important;
    margin-top: 18px !important;
    border-radius: 22px !important;
  }

  .contacts-hero .contacts-copy {
    padding: 24px 18px 200px !important;
  }
}
/* ==========================================================
   ZasNet Contacts 02 — Contact Cards
   Вкладка "Контакти": блок з 5 картками
   Телефон / E-mail / Адреса / Месенджери / Соцмережі

   Точні класи з сайту:
   .contacts-grid
   .contacts-card
   .contacts-icon
   .contact-icon-row

   Ставити в самий кінець site.css після Contacts 01.4.
   Не чіпає hero, карту, форму і footer.
   ========================================================== */


/* ==========================================================
   GRID
   ========================================================== */

.contacts-grid {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;

  margin: clamp(22px, 2.5vw, 34px) auto 0 !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(18px, 1.6vw, 24px) !important;
  align-items: stretch !important;
}

/* прибираємо старі min-width, через них картки можуть розлазитись */
.contacts-grid > .contacts-card,
.contacts-grid > .contacts-card:nth-child(3),
.contacts-grid > .contacts-card:nth-child(4),
.contacts-grid > .contacts-card:nth-child(5) {
  min-width: 0 !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.contacts-grid .contacts-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 230px !important;
  padding: 24px 22px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 14% 10%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.contacts-grid .contacts-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(34,197,94,.20) !important;

  box-shadow:
    0 22px 46px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.contacts-grid .contacts-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  right: -58px !important;
  top: -58px !important;
  width: 170px !important;
  height: 170px !important;

  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(34,197,94,.08), transparent 70%) !important;
  pointer-events: none !important;
}

.contacts-grid .contacts-card > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.contacts-grid .contacts-icon,
.contacts-grid .home-icon,
.contacts-grid .line-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  margin: 0 0 18px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 18px !important;
  border: 1px solid rgba(34,197,94,.16) !important;

  background:
    linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.07)) !important;

  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 22px rgba(34,197,94,.08) !important;
}

.contacts-grid .contacts-icon svg,
.contacts-grid .home-icon svg,
.contacts-grid .line-icon svg {
  width: 25px !important;
  height: 25px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

.contacts-grid .contacts-card h2,
.contacts-grid .contacts-card h3 {
  margin: 0 0 10px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(21px, 1.25vw, 26px) !important;
  line-height: 1.14 !important;
  font-weight: 780 !important;
  letter-spacing: -0.02em !important;
}

.contacts-grid .contacts-card strong {
  display: block !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 780 !important;
  overflow-wrap: anywhere !important;
}

.contacts-grid .contacts-card p {
  margin: 14px 0 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15.5px !important;
  line-height: 1.58 !important;
  font-weight: 460 !important;
}

.contacts-grid .contacts-card a {
  margin-top: auto !important;
  padding-top: 16px !important;

  display: inline-flex !important;
  align-items: center !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 14.5px !important;
  line-height: 1.25 !important;
  font-weight: 820 !important;
  text-decoration: none !important;

  transition:
    color .18s ease,
    transform .18s ease !important;
}

.contacts-grid .contacts-card a:hover {
  transform: translateX(2px) !important;
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}


/* ==========================================================
   MESSENGERS / SOCIAL ICONS
   ========================================================== */

.contacts-grid .contact-icon-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin: 8px 0 0 !important;
}

.contacts-grid .contact-icon-row a {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  box-shadow: 0 8px 18px rgba(15,23,42,.10) !important;

  transition:
    transform .18s ease,
    filter .18s ease !important;
}

.contacts-grid .contact-icon-row a:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) saturate(1.05) !important;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

body.black .contacts-grid .contacts-card,
.white.black .contacts-grid .contacts-card,
html[data-theme="dark"] .contacts-grid .contacts-card {
  border-color: rgba(226,232,240,.13) !important;

  background:
    radial-gradient(circle at 14% 10%, rgba(126,240,77,.08), transparent 34%),
    rgba(255,255,255,.055) !important;

  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .contacts-grid .contacts-card:hover,
.white.black .contacts-grid .contacts-card:hover,
html[data-theme="dark"] .contacts-grid .contacts-card:hover {
  border-color: rgba(126,240,77,.22) !important;

  box-shadow:
    0 22px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.black .contacts-grid .contacts-card::before,
.white.black .contacts-grid .contacts-card::before,
html[data-theme="dark"] .contacts-grid .contacts-card::before {
  background: radial-gradient(circle, rgba(126,240,77,.09), transparent 70%) !important;
}

body.black .contacts-grid .contacts-icon,
body.black .contacts-grid .home-icon,
body.black .contacts-grid .line-icon,
.white.black .contacts-grid .contacts-icon,
.white.black .contacts-grid .home-icon,
.white.black .contacts-grid .line-icon,
html[data-theme="dark"] .contacts-grid .contacts-icon,
html[data-theme="dark"] .contacts-grid .home-icon,
html[data-theme="dark"] .contacts-grid .line-icon {
  border-color: rgba(126,240,77,.16) !important;

  background:
    linear-gradient(180deg, rgba(126,240,77,.11), rgba(126,240,77,.07)) !important;

  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10) !important;
}

body.black .contacts-grid .contacts-card h2,
body.black .contacts-grid .contacts-card h3,
body.black .contacts-grid .contacts-card strong,
.white.black .contacts-grid .contacts-card h2,
.white.black .contacts-grid .contacts-card h3,
.white.black .contacts-grid .contacts-card strong,
html[data-theme="dark"] .contacts-grid .contacts-card h2,
html[data-theme="dark"] .contacts-grid .contacts-card h3,
html[data-theme="dark"] .contacts-grid .contacts-card strong {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .contacts-grid .contacts-card p,
.white.black .contacts-grid .contacts-card p,
html[data-theme="dark"] .contacts-grid .contacts-card p {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}

/* головний фікс: у темній темі посилання не чорні */
body.black .contacts-grid .contacts-card a,
.white.black .contacts-grid .contacts-card a,
html[data-theme="dark"] .contacts-grid .contacts-card a {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
}

body.black .contacts-grid .contacts-card a:hover,
.white.black .contacts-grid .contacts-card a:hover,
html[data-theme="dark"] .contacts-grid .contacts-card a:hover {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1380px) {
  .contacts-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(1560px, calc(100% - 64px)) !important;
    gap: 16px !important;
  }

  .contacts-grid .contacts-card {
    padding: 22px 18px !important;
  }

  .contacts-grid .contacts-card h2,
  .contacts-grid .contacts-card h3 {
    font-size: 21px !important;
  }
}

@media (max-width: 1120px) {
  .contacts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  .contacts-grid {
    width: calc(100% - 32px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .contacts-grid {
    width: calc(100% - 20px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .contacts-grid .contacts-card {
    min-height: auto !important;
    padding: 20px 18px !important;
    border-radius: 20px !important;
  }

  .contacts-grid .contacts-icon,
  .contacts-grid .home-icon,
  .contacts-grid .line-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  .contacts-grid .contacts-card h2,
  .contacts-grid .contacts-card h3 {
    font-size: 22px !important;
  }
}
/* ==========================================================
   ZasNet Contacts 03 — MAP + FORM REWRITE FINAL
   Вкладка "Контакти": блок "Ми на мапі" + "Напишіть нам"

   ВАЖЛИВО:
   Старі Contacts 03 і Contacts 03.1 можна видалити.
   Цей файл переписаний під реальні класи з твого site.css:

   .contact-map-section
   .contact-map-panel
   .contact-form-panel
   .map-frame
   .map-card
   .contacts-lead-form

   Ставити в самий кінець site.css після Contacts 02.
   ========================================================== */


/* ==========================================================
   01. ОСНОВНА СІТКА
   ========================================================== */

.contact-map-section {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;

  margin: clamp(22px, 2.4vw, 34px) auto 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(420px, .92fr) !important;
  gap: clamp(18px, 1.5vw, 26px) !important;
  align-items: stretch !important;
}


/* ==========================================================
   02. ПАНЕЛІ: КАРТА + ФОРМА
   ========================================================== */

.contact-map-panel,
.contact-form-panel {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 430px !important;
  padding: 18px !important;

  border-radius: 26px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 14% 10%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 18px 44px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.contact-map-panel::before,
.contact-form-panel::before {
  content: "" !important;
  position: absolute !important;
  right: -78px !important;
  bottom: -78px !important;
  z-index: 0 !important;

  width: 220px !important;
  height: 220px !important;
  border-radius: 999px !important;

  background: radial-gradient(circle, rgba(34,197,94,.08), transparent 70%) !important;
  pointer-events: none !important;
}

.contact-map-panel > *,
.contact-form-panel > * {
  position: relative !important;
  z-index: 2 !important;
}


/* карта має займати всю висоту панелі */
.contact-map-panel {
  display: flex !important;
  flex-direction: column !important;
}

/* форма теж має тримати нормальну висоту */
.contact-form-panel {
  display: flex !important;
  flex-direction: column !important;
}


/* ==========================================================
   03. ЗАГОЛОВКИ
   ========================================================== */

.contact-map-panel h2,
.contact-form-panel h2 {
  margin: 0 0 14px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(24px, 1.55vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}


/* ==========================================================
   04. КАРТА
   ========================================================== */

.map-frame {
  position: relative !important;
  overflow: hidden !important;

  flex: 1 1 auto !important;
  min-height: 355px !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 21px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background: #e7f6ee !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 12px 28px rgba(15,23,42,.05) !important;
}

.map-frame iframe {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 355px !important;

  border: 0 !important;
  border-radius: 20px !important;
}


/* ==========================================================
   05. КАРТКА НАД МАПОЮ
   ========================================================== */

.map-card {
  position: absolute !important;
  left: 24px !important;
  top: 24px !important;
  z-index: 5 !important;

  width: min(270px, calc(100% - 48px)) !important;
  padding: 18px 18px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.06) !important;

  background: rgba(255,255,255,.92) !important;

  box-shadow:
    0 18px 38px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.map-card strong,
.map-card span,
.map-card small {
  display: block !important;
}

.map-card strong {
  margin: 0 !important;

  color: #15803d !important;
  -webkit-text-fill-color: #15803d !important;

  font-size: 19px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.map-card span {
  margin-top: 12px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 17px !important;
  line-height: 1.32 !important;
  font-weight: 830 !important;
}

.map-card small {
  margin-top: 8px !important;

  color: #5d6f82 !important;
  -webkit-text-fill-color: #5d6f82 !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

.map-card a {
  display: inline-flex !important;
  align-items: center !important;

  margin-top: 14px !important;

  color: #0f8f36 !important;
  -webkit-text-fill-color: #0f8f36 !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.map-card a:hover {
  color: #16a34a !important;
  -webkit-text-fill-color: #16a34a !important;
}


/* ==========================================================
   06. ФОРМА
   ========================================================== */

.contacts-lead-form {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;

  margin: 0 !important;

  flex: 1 1 auto !important;
  align-content: start !important;
}

.contacts-lead-form input,
.contacts-lead-form select,
.contacts-lead-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;

  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.11) !important;

  background: rgba(255,255,255,.90) !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 520 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 8px 18px rgba(15,23,42,.035) !important;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

.contacts-lead-form input,
.contacts-lead-form select {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 17px !important;
}

.contacts-lead-form textarea {
  grid-column: 1 / -1 !important;

  min-height: 112px !important;
  padding: 15px 17px !important;

  resize: vertical !important;
}

.contacts-lead-form input::placeholder,
.contacts-lead-form textarea::placeholder {
  color: #6e7f91 !important;
  -webkit-text-fill-color: #6e7f91 !important;
}

.contacts-lead-form input:focus,
.contacts-lead-form select:focus,
.contacts-lead-form textarea:focus {
  outline: none !important;

  border-color: rgba(34,197,94,.42) !important;
  background: rgba(255,255,255,.98) !important;

  box-shadow:
    0 0 0 4px rgba(34,197,94,.10),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
}


/* текст "Ми не передаємо..." */
.contacts-lead-form p {
  grid-column: 1 / -1 !important;

  margin: 0 !important;

  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 14.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}


/* кнопка */
.contacts-lead-form button {
  grid-column: 1 / -1 !important;

  width: 100% !important;
  min-height: 54px !important;
  height: 54px !important;

  margin: 0 !important;
  padding: 0 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 16px !important;

  background:
    linear-gradient(135deg, #17b53a 0%, #52ea0b 100%) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    0 18px 34px rgba(64, 221, 33, .24),
    inset 0 1px 0 rgba(255,255,255,.18) !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;

  cursor: pointer !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.contacts-lead-form button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03) saturate(1.04) !important;

  box-shadow:
    0 20px 38px rgba(64, 221, 33, .28),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


/* ==========================================================
   07. ТЕМНА ТЕМА
   ========================================================== */

body.black .contact-map-panel,
body.black .contact-form-panel,
.white.black .contact-map-panel,
.white.black .contact-form-panel,
html[data-theme="dark"] .contact-map-panel,
html[data-theme="dark"] .contact-form-panel {
  border-color: rgba(226,232,240,.12) !important;

  background:
    radial-gradient(circle at 14% 10%, rgba(126,240,77,.07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018)) !important;

  box-shadow:
    0 22px 48px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .contact-map-panel::before,
body.black .contact-form-panel::before,
.white.black .contact-map-panel::before,
.white.black .contact-form-panel::before,
html[data-theme="dark"] .contact-map-panel::before,
html[data-theme="dark"] .contact-form-panel::before {
  background: radial-gradient(circle, rgba(126,240,77,.10), transparent 70%) !important;
}

body.black .contact-map-panel h2,
body.black .contact-form-panel h2,
.white.black .contact-map-panel h2,
.white.black .contact-form-panel h2,
html[data-theme="dark"] .contact-map-panel h2,
html[data-theme="dark"] .contact-form-panel h2 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .map-frame,
.white.black .map-frame,
html[data-theme="dark"] .map-frame {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.035) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.08) !important;
}

body.black .map-card,
.white.black .map-card,
html[data-theme="dark"] .map-card {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(8, 24, 19, .82) !important;

  box-shadow:
    0 18px 38px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.black .map-card strong,
.white.black .map-card strong,
html[data-theme="dark"] .map-card strong {
  color: #7ef04d !important;
  -webkit-text-fill-color: #7ef04d !important;
}

body.black .map-card span,
.white.black .map-card span,
html[data-theme="dark"] .map-card span {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .map-card small,
.white.black .map-card small,
html[data-theme="dark"] .map-card small {
  color: rgba(240,250,245,.72) !important;
  -webkit-text-fill-color: rgba(240,250,245,.72) !important;
}

body.black .map-card a,
.white.black .map-card a,
html[data-theme="dark"] .map-card a {
  color: #b9ff62 !important;
  -webkit-text-fill-color: #b9ff62 !important;
}

body.black .contacts-lead-form input,
body.black .contacts-lead-form select,
body.black .contacts-lead-form textarea,
.white.black .contacts-lead-form input,
.white.black .contacts-lead-form select,
.white.black .contacts-lead-form textarea,
html[data-theme="dark"] .contacts-lead-form input,
html[data-theme="dark"] .contacts-lead-form select,
html[data-theme="dark"] .contacts-lead-form textarea {
  border-color: rgba(226,232,240,.12) !important;

  background: rgba(255,255,255,.055) !important;

  color: #f8fffb !important;
  -webkit-text-fill-color: #f8fffb !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.06) !important;
}

body.black .contacts-lead-form input::placeholder,
body.black .contacts-lead-form textarea::placeholder,
.white.black .contacts-lead-form input::placeholder,
.white.black .contacts-lead-form textarea::placeholder,
html[data-theme="dark"] .contacts-lead-form input::placeholder,
html[data-theme="dark"] .contacts-lead-form textarea::placeholder {
  color: rgba(240,250,245,.58) !important;
  -webkit-text-fill-color: rgba(240,250,245,.58) !important;
}

body.black .contacts-lead-form input:focus,
body.black .contacts-lead-form select:focus,
body.black .contacts-lead-form textarea:focus,
.white.black .contacts-lead-form input:focus,
.white.black .contacts-lead-form select:focus,
.white.black .contacts-lead-form textarea:focus,
html[data-theme="dark"] .contacts-lead-form input:focus,
html[data-theme="dark"] .contacts-lead-form select:focus,
html[data-theme="dark"] .contacts-lead-form textarea:focus {
  border-color: rgba(126,240,77,.36) !important;
  background: rgba(255,255,255,.075) !important;

  box-shadow:
    0 0 0 4px rgba(126,240,77,.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body.black .contacts-lead-form p,
.white.black .contacts-lead-form p,
html[data-theme="dark"] .contacts-lead-form p {
  color: rgba(240,250,245,.72) !important;
  -webkit-text-fill-color: rgba(240,250,245,.72) !important;
}


/* ==========================================================
   08. АДАПТИВ
   ========================================================== */

@media (max-width: 1180px) {
  .contact-map-section {
    width: min(1560px, calc(100% - 48px)) !important;
    grid-template-columns: 1fr !important;
  }

  .contact-map-panel,
  .contact-form-panel {
    min-height: auto !important;
  }

  .map-frame,
  .map-frame iframe {
    min-height: 340px !important;
  }
}

@media (max-width: 760px) {
  .contact-map-section {
    width: calc(100% - 24px) !important;
    gap: 16px !important;
  }

  .contact-map-panel,
  .contact-form-panel {
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .contact-map-panel h2,
  .contact-form-panel h2 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }

  .map-frame,
  .map-frame iframe {
    min-height: 300px !important;
    border-radius: 18px !important;
  }

  .map-card {
    left: 14px !important;
    top: 14px !important;
    width: min(240px, calc(100% - 28px)) !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .contacts-lead-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .contacts-lead-form input,
  .contacts-lead-form select {
    min-height: 50px !important;
    height: 50px !important;
  }

  .contacts-lead-form textarea {
    min-height: 105px !important;
  }

  .contacts-lead-form button {
    min-height: 52px !important;
    height: 52px !important;
  }
}
/* ==========================================================
   ZasNet Contacts 04 — Info Cards REWRITE FINAL
   Блок після карти/форми:
   "Графік роботи офісу / Технічна підтримка 24/7 /
    Виїзд майстра / Зворотний звʼязок"

   ВАЖЛИВО:
   Старий Contacts 04 можна видалити.

   Цей патч не залежить від невідомих класів карток.
   Він чіпляється до блока, який іде ОДРАЗУ після:
   .contact-map-section

   Тобто структура:
   .contact-map-section
   [цей інформаційний блок]

   Ставити в самий кінець site.css після Contacts 03 REWRITE FINAL.
   ========================================================== */


/* ==========================================================
   01. SECTION — БЛОК ПІСЛЯ КАРТИ
   ========================================================== */

.contact-map-section + section,
.contact-map-section + div {
  width: min(1560px, calc(100% - 96px)) !important;
  max-width: 1560px !important;

  margin: clamp(22px, 2.4vw, 34px) auto 0 !important;
  padding: 16px !important;

  border-radius: 28px !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;

  background:
    radial-gradient(circle at 14% 8%, rgba(34,197,94,.06), transparent 34%),
    rgba(255,255,255,.58) !important;

  box-shadow:
    0 18px 44px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}


/* ==========================================================
   02. ВАРІАНТ А: якщо 4 картки лежать напряму в section/div
   ========================================================== */

.contact-map-section + section:has(> :nth-child(4)),
.contact-map-section + div:has(> :nth-child(4)) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.5vw, 24px) !important;
  align-items: stretch !important;
}

/* картки напряму */
.contact-map-section + section:has(> :nth-child(4)) > *,
.contact-map-section + div:has(> :nth-child(4)) > * {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 136px !important;
  padding: 22px 22px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 18% 10%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 14px 34px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}


/* ==========================================================
   03. ВАРІАНТ Б: якщо всередині є wrapper, а картки всередині нього
   ========================================================== */

.contact-map-section + section > div:has(> :nth-child(4)),
.contact-map-section + div > div:has(> :nth-child(4)) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.5vw, 24px) !important;
  align-items: stretch !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* картки всередині wrapper */
.contact-map-section + section > div:has(> :nth-child(4)) > *,
.contact-map-section + div > div:has(> :nth-child(4)) > * {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 136px !important;
  padding: 22px 22px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;

  background:
    radial-gradient(circle at 18% 10%, rgba(34,197,94,.07), transparent 34%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 14px 34px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}


/* ==========================================================
   04. HOVER
   ========================================================== */

.contact-map-section + section:has(> :nth-child(4)) > *:hover,
.contact-map-section + div:has(> :nth-child(4)) > *:hover,
.contact-map-section + section > div:has(> :nth-child(4)) > *:hover,
.contact-map-section + div > div:has(> :nth-child(4)) > *:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(34,197,94,.18) !important;

  box-shadow:
    0 18px 40px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}


/* ==========================================================
   05. ДЕКОР КАРТОК
   ========================================================== */

.contact-map-section + section:has(> :nth-child(4)) > *::before,
.contact-map-section + div:has(> :nth-child(4)) > *::before,
.contact-map-section + section > div:has(> :nth-child(4)) > *::before,
.contact-map-section + div > div:has(> :nth-child(4)) > *::before {
  content: "" !important;
  position: absolute !important;
  right: -54px !important;
  top: -54px !important;
  z-index: 0 !important;

  width: 150px !important;
  height: 150px !important;
  border-radius: 999px !important;

  background: radial-gradient(circle, rgba(34,197,94,.07), transparent 70%) !important;
  pointer-events: none !important;
}

.contact-map-section + section:has(> :nth-child(4)) > * > *,
.contact-map-section + div:has(> :nth-child(4)) > * > *,
.contact-map-section + section > div:has(> :nth-child(4)) > * > *,
.contact-map-section + div > div:has(> :nth-child(4)) > * > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   06. ТЕКСТ
   ========================================================== */

.contact-map-section + section h2,
.contact-map-section + section h3,
.contact-map-section + section h4,
.contact-map-section + div h2,
.contact-map-section + div h3,
.contact-map-section + div h4 {
  margin: 0 0 14px !important;

  color: #071427 !important;
  -webkit-text-fill-color: #071427 !important;

  font-size: clamp(17px, 1.04vw, 22px) !important;
  line-height: 1.22 !important;
  font-weight: 760 !important;
  letter-spacing: -0.016em !important;
}

.contact-map-section + section p,
.contact-map-section + section span,
.contact-map-section + section small,
.contact-map-section + div p,
.contact-map-section + div span,
.contact-map-section + div small {
  color: #53657a !important;
  -webkit-text-fill-color: #53657a !important;

  font-size: 15.5px !important;
  line-height: 1.5 !important;
  font-weight: 460 !important;
}

.contact-map-section + section p,
.contact-map-section + div p {
  margin: 0 !important;
}


/* ==========================================================
   07. DARK THEME
   ========================================================== */

body.black .contact-map-section + section,
body.black .contact-map-section + div,
.white.black .contact-map-section + section,
.white.black .contact-map-section + div,
html[data-theme="dark"] .contact-map-section + section,
html[data-theme="dark"] .contact-map-section + div {
  border-color: rgba(226,232,240,.12) !important;

  background:
    radial-gradient(circle at 14% 8%, rgba(126,240,77,.06), transparent 34%),
    rgba(255,255,255,.035) !important;

  box-shadow:
    0 20px 46px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}


body.black .contact-map-section + section:has(> :nth-child(4)) > *,
body.black .contact-map-section + div:has(> :nth-child(4)) > *,
body.black .contact-map-section + section > div:has(> :nth-child(4)) > *,
body.black .contact-map-section + div > div:has(> :nth-child(4)) > *,
.white.black .contact-map-section + section:has(> :nth-child(4)) > *,
.white.black .contact-map-section + div:has(> :nth-child(4)) > *,
.white.black .contact-map-section + section > div:has(> :nth-child(4)) > *,
.white.black .contact-map-section + div > div:has(> :nth-child(4)) > *,
html[data-theme="dark"] .contact-map-section + section:has(> :nth-child(4)) > *,
html[data-theme="dark"] .contact-map-section + div:has(> :nth-child(4)) > *,
html[data-theme="dark"] .contact-map-section + section > div:has(> :nth-child(4)) > *,
html[data-theme="dark"] .contact-map-section + div > div:has(> :nth-child(4)) > * {
  border-color: rgba(226,232,240,.12) !important;

  background:
    radial-gradient(circle at 18% 10%, rgba(126,240,77,.07), transparent 34%),
    rgba(255,255,255,.045) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.black .contact-map-section + section:has(> :nth-child(4)) > *:hover,
body.black .contact-map-section + div:has(> :nth-child(4)) > *:hover,
body.black .contact-map-section + section > div:has(> :nth-child(4)) > *:hover,
body.black .contact-map-section + div > div:has(> :nth-child(4)) > *:hover,
.white.black .contact-map-section + section:has(> :nth-child(4)) > *:hover,
.white.black .contact-map-section + div:has(> :nth-child(4)) > *:hover,
.white.black .contact-map-section + section > div:has(> :nth-child(4)) > *:hover,
.white.black .contact-map-section + div > div:has(> :nth-child(4)) > *:hover,
html[data-theme="dark"] .contact-map-section + section:has(> :nth-child(4)) > *:hover,
html[data-theme="dark"] .contact-map-section + div:has(> :nth-child(4)) > *:hover,
html[data-theme="dark"] .contact-map-section + section > div:has(> :nth-child(4)) > *:hover,
html[data-theme="dark"] .contact-map-section + div > div:has(> :nth-child(4)) > *:hover {
  border-color: rgba(126,240,77,.20) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

body.black .contact-map-section + section h2,
body.black .contact-map-section + section h3,
body.black .contact-map-section + section h4,
body.black .contact-map-section + div h2,
body.black .contact-map-section + div h3,
body.black .contact-map-section + div h4,
.white.black .contact-map-section + section h2,
.white.black .contact-map-section + section h3,
.white.black .contact-map-section + section h4,
.white.black .contact-map-section + div h2,
.white.black .contact-map-section + div h3,
.white.black .contact-map-section + div h4,
html[data-theme="dark"] .contact-map-section + section h2,
html[data-theme="dark"] .contact-map-section + section h3,
html[data-theme="dark"] .contact-map-section + section h4,
html[data-theme="dark"] .contact-map-section + div h2,
html[data-theme="dark"] .contact-map-section + div h3,
html[data-theme="dark"] .contact-map-section + div h4 {
  color: #f7fff9 !important;
  -webkit-text-fill-color: #f7fff9 !important;
}

body.black .contact-map-section + section p,
body.black .contact-map-section + section span,
body.black .contact-map-section + section small,
body.black .contact-map-section + div p,
body.black .contact-map-section + div span,
body.black .contact-map-section + div small,
.white.black .contact-map-section + section p,
.white.black .contact-map-section + section span,
.white.black .contact-map-section + section small,
.white.black .contact-map-section + div p,
.white.black .contact-map-section + div span,
.white.black .contact-map-section + div small,
html[data-theme="dark"] .contact-map-section + section p,
html[data-theme="dark"] .contact-map-section + section span,
html[data-theme="dark"] .contact-map-section + section small,
html[data-theme="dark"] .contact-map-section + div p,
html[data-theme="dark"] .contact-map-section + div span,
html[data-theme="dark"] .contact-map-section + div small {
  color: rgba(240,250,245,.74) !important;
  -webkit-text-fill-color: rgba(240,250,245,.74) !important;
}


/* ==========================================================
   08. RESPONSIVE
   ========================================================== */

@media (max-width: 1180px) {
  .contact-map-section + section,
  .contact-map-section + div {
    width: min(1560px, calc(100% - 48px)) !important;
  }

  .contact-map-section + section:has(> :nth-child(4)),
  .contact-map-section + div:has(> :nth-child(4)),
  .contact-map-section + section > div:has(> :nth-child(4)),
  .contact-map-section + div > div:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .contact-map-section + section,
  .contact-map-section + div {
    width: calc(100% - 24px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .contact-map-section + section:has(> :nth-child(4)),
  .contact-map-section + div:has(> :nth-child(4)),
  .contact-map-section + section > div:has(> :nth-child(4)),
  .contact-map-section + div > div:has(> :nth-child(4)) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .contact-map-section + section:has(> :nth-child(4)) > *,
  .contact-map-section + div:has(> :nth-child(4)) > *,
  .contact-map-section + section > div:has(> :nth-child(4)) > *,
  .contact-map-section + div > div:has(> :nth-child(4)) > * {
    min-height: auto !important;
    padding: 20px 18px !important;
    border-radius: 20px !important;
  }
}
 
/* ==========================================================
   ZasNet Mobile Responsive — FINAL
   Ставити в самий кінець site.css.
   Кабінет не чіпаємо: cabinet/account/login/lk.
   ========================================================== */

/* ---------- Tablet ---------- */
@media (max-width:1180px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  body{-webkit-text-size-adjust:100%}

  .container,.uk-container,.site-container,.page-container,.section-container,
  main>section,.section{
    width:calc(100% - 32px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  header,.header,.site-header,.main-header,.top-header,.navbar,.nav-wrap{
    width:calc(100% - 28px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    border-radius:22px!important;
  }

  header,.header,.site-header,.main-header{
    min-height:auto!important;
    padding:10px 12px!important;
  }

  header .logo img,header .brand img,
  .header .logo img,.header .brand img,
  .site-header .logo img,.site-header .brand img{
    max-width:150px!important;
    height:auto!important;
  }

  header nav,.header nav,.site-header nav,.main-header nav,.navbar nav,
  .menu,.nav-menu,.main-menu{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
  }

  header nav::-webkit-scrollbar,.header nav::-webkit-scrollbar,
  .site-header nav::-webkit-scrollbar,.main-header nav::-webkit-scrollbar,
  .navbar nav::-webkit-scrollbar,.menu::-webkit-scrollbar,
  .nav-menu::-webkit-scrollbar,.main-menu::-webkit-scrollbar{display:none!important}

  header nav a,.header nav a,.site-header nav a,.main-header nav a,
  .navbar nav a,.menu a,.nav-menu a,.main-menu a{
    display:inline-flex!important;
    min-height:38px!important;
    padding:0 13px!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  header .btn,header .button,header button,
  .header .btn,.header .button,.header button,
  .site-header .btn,.site-header .button,.site-header button,
  .header-actions a,.header-actions button,.top-actions a,.top-actions button{
    min-height:42px!important;
    padding:0 15px!important;
    border-radius:13px!important;
    font-size:13px!important;
  }

  .home-hero,.main-hero,.page-hero,.tariffs-hero,.tariff-hero,
  .video-hero,.video-page-hero,.cctv-hero,.equipment-hero,.equip-hero,
  .coverage-hero,.news-hero,.about-hero,.contacts-hero,.contact-hero{
    width:calc(100% - 32px)!important;
    max-width:100%!important;
    min-height:auto!important;
    margin:22px auto 28px!important;
    padding:42px 30px!important;
    border-radius:24px!important;
  }

  .home-hero h1,.main-hero h1,.page-hero h1,.tariffs-hero h1,.tariff-hero h1,
  .video-hero h1,.video-page-hero h1,.cctv-hero h1,.equipment-hero h1,
  .equip-hero h1,.coverage-hero h1,.news-hero h1,.about-hero h1,
  .contacts-hero h1,.contact-hero h1{
    max-width:720px!important;
    font-size:clamp(42px,7vw,62px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
  }

  .home-hero p,.main-hero p,.page-hero p,.tariffs-hero p,.tariff-hero p,
  .video-hero p,.video-page-hero p,.cctv-hero p,.equipment-hero p,
  .equip-hero p,.coverage-hero p,.news-hero p,.about-hero p,
  .contacts-hero p,.contact-hero p{
    max-width:640px!important;
    font-size:16px!important;
    line-height:1.55!important;
  }

  .cards,.card-grid,.features-grid,.benefits-grid,.tariffs-grid,.plans-grid,
  .equipment-grid,.products-grid,.documents-grid,.contacts-grid,.news-grid,
  .services-grid,.why-grid,.steps-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }

  .contact-form-wrap,.contacts-form-wrap,.map-form-wrap,.contact-row,
  .contacts-row,.form-map-row,.two-column,.two-cols,.split,.split-section{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  input,textarea,select{max-width:100%!important;font-size:16px!important}
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  body{font-size:15px!important}
  .section,section,main>section{padding-top:26px!important;padding-bottom:26px!important}
  .container,.uk-container,.site-container,.page-container,.section-container{
    width:calc(100% - 24px)!important;
  }

  header,.header,.site-header,.main-header{
    width:calc(100% - 20px)!important;
    margin:10px auto 0!important;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    border-radius:18px!important;
  }

  header .logo img,header .brand img,
  .header .logo img,.header .brand img,
  .site-header .logo img,.site-header .brand img{
    max-width:128px!important;
  }

  header nav,.header nav,.site-header nav,.main-header nav,.navbar nav,
  .menu,.nav-menu,.main-menu{
    order:3!important;
    width:100%!important;
    display:flex!important;
    gap:6px!important;
    padding-top:8px!important;
  }

  header nav a,.header nav a,.site-header nav a,.main-header nav a,
  .navbar nav a,.menu a,.nav-menu a,.main-menu a{
    min-height:36px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:12px!important;
  }

  .header-actions,.top-actions,.nav-actions,.site-actions{
    margin-left:auto!important;
    display:flex!important;
    gap:6px!important;
  }

  .header-actions .secondary,.top-actions .secondary,.nav-actions .secondary{
    display:none!important;
  }

  header .btn,header .button,header button,
  .header .btn,.header .button,.header button,
  .site-header .btn,.site-header .button,.site-header button,
  .header-actions a,.header-actions button,.top-actions a,.top-actions button{
    min-height:38px!important;
    padding:0 12px!important;
    font-size:12px!important;
    border-radius:12px!important;
  }

  .home-hero,.main-hero,.page-hero,.tariffs-hero,.tariff-hero,
  .video-hero,.video-page-hero,.cctv-hero,.equipment-hero,.equip-hero,
  .coverage-hero,.news-hero,.about-hero,.contacts-hero,.contact-hero{
    width:calc(100% - 20px)!important;
    margin:18px auto 24px!important;
    min-height:520px!important;
    padding:30px 22px 210px!important;
    align-items:flex-start!important;
    border-radius:22px!important;
    background-position:center bottom!important;
    background-size:cover!important;
  }

  body.black :is(.home-hero,.main-hero,.page-hero,.tariffs-hero,.tariff-hero,
  .video-hero,.video-page-hero,.cctv-hero,.equipment-hero,.equip-hero,
  .coverage-hero,.news-hero,.about-hero,.contacts-hero,.contact-hero):not([class*="cabinet"]):not([class*="account"]):not([class*="login"]):not([class*="lk"])::before,
  .white.black :is(.home-hero,.main-hero,.page-hero,.tariffs-hero,.tariff-hero,
  .video-hero,.video-page-hero,.cctv-hero,.equipment-hero,.equip-hero,
  .coverage-hero,.news-hero,.about-hero,.contacts-hero,.contact-hero):not([class*="cabinet"]):not([class*="account"]):not([class*="login"]):not([class*="lk"])::before{
    background:linear-gradient(180deg,rgba(3,13,10,.94) 0%,rgba(3,13,10,.86) 48%,rgba(3,13,10,.45) 100%)!important;
  }

  .home-hero h1,.main-hero h1,.page-hero h1,.tariffs-hero h1,.tariff-hero h1,
  .video-hero h1,.video-page-hero h1,.cctv-hero h1,.equipment-hero h1,
  .equip-hero h1,.coverage-hero h1,.news-hero h1,.about-hero h1,
  .contacts-hero h1,.contact-hero h1{
    max-width:100%!important;
    font-size:clamp(34px,11vw,48px)!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
  }

  .home-hero p,.main-hero p,.page-hero p,.tariffs-hero p,.tariff-hero p,
  .video-hero p,.video-page-hero p,.cctv-hero p,.equipment-hero p,
  .equip-hero p,.coverage-hero p,.news-hero p,.about-hero p,
  .contacts-hero p,.contact-hero p{
    max-width:100%!important;
    margin-top:16px!important;
    font-size:15px!important;
    line-height:1.5!important;
  }

  .home-hero .badge,.main-hero .badge,.page-hero .badge,.section-label,.hero-badge{
    min-height:32px!important;
    padding:0 14px!important;
    margin-bottom:16px!important;
    font-size:12px!important;
  }

  .home-hero .btn,.home-hero .button,.home-hero button,.home-hero a[class*="btn"],.home-hero a[class*="button"],
  .main-hero .btn,.main-hero .button,.main-hero button,.main-hero a[class*="btn"],.main-hero a[class*="button"],
  .page-hero .btn,.page-hero .button,.page-hero button,.page-hero a[class*="btn"],.page-hero a[class*="button"],
  .video-hero .btn,.video-hero .button,.video-hero button,
  .equipment-hero .btn,.equipment-hero .button,.equipment-hero button,
  .contacts-hero .btn,.contacts-hero .button,.contacts-hero button,.coverage-hero button{
    width:100%!important;
    min-height:50px!important;
    padding:0 18px!important;
    justify-content:center!important;
    font-size:14px!important;
  }

  .hero-actions,.actions,.buttons,.btns{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  .hero-features,.hero-benefits,.features-row,.benefits-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:22px!important;
  }

  .hero-feature,.hero-benefit,.feature-card,.benefit-card{
    min-height:auto!important;
    padding:12px!important;
    border-radius:14px!important;
    font-size:12px!important;
  }

  .cards,.card-grid,.features-grid,.benefits-grid,.why-grid,.steps-grid,
  .documents-grid,.contacts-grid,.news-grid,.services-grid,
  .tariffs-grid,.plans-grid,.equipment-grid,.products-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .card,.feature-card,.benefit-card,.tariff-card,.plan-card,.equipment-card,
  .product-card,.document-card,.contact-card,.news-card,.service-card{
    width:100%!important;
    min-width:0!important;
    padding:20px!important;
    border-radius:20px!important;
  }

  .card h2,.card h3,.feature-card h3,.benefit-card h3,.tariff-card h3,
  .plan-card h3,.equipment-card h3,.product-card h3,.document-card h3,
  .contact-card h3,.news-card h3,.service-card h3{
    font-size:22px!important;
    line-height:1.15!important;
  }

  .equipment-card img,.product-card img,.category-card img,.news-card img{
    max-height:180px!important;
    object-fit:contain!important;
  }

  form,.form,.contact-form,.request-form,.lead-form{width:100%!important}
  form .row,form .form-row,.form-row,.fields,.input-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  input,textarea,select{
    width:100%!important;
    min-height:50px!important;
    padding-left:16px!important;
    padding-right:16px!important;
    border-radius:14px!important;
  }

  textarea{min-height:120px!important}

  iframe,.map,.google-map,.map-box,.map-frame{
    width:100%!important;
    min-height:300px!important;
    border-radius:20px!important;
  }

  .document-card a,.document-card button{width:100%!important}

  footer,.footer,.site-footer{
    width:calc(100% - 20px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:26px 18px!important;
    border-radius:22px!important;
  }

  footer .footer-grid,footer .grid,.footer .footer-grid,.footer .grid,
  .site-footer .footer-grid,.site-footer .grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:22px!important;
  }

  footer .logo img,.footer .logo img,.site-footer .logo img{
    max-width:150px!important;
  }

  footer nav,.footer nav,.site-footer nav{
    display:grid!important;
    gap:8px!important;
  }

  footer a,.footer a,.site-footer a{
    min-height:34px!important;
    display:inline-flex!important;
    align-items:center!important;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width:480px){
  .container,.uk-container,.site-container,.page-container,.section-container{
    width:calc(100% - 18px)!important;
  }

  header,.header,.site-header,.main-header{
    width:calc(100% - 14px)!important;
    border-radius:16px!important;
  }

  header .logo img,header .brand img,
  .header .logo img,.header .brand img,
  .site-header .logo img,.site-header .brand img{
    max-width:118px!important;
  }

  header nav a,.header nav a,.site-header nav a,.main-header nav a,
  .menu a,.nav-menu a,.main-menu a{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }

  .home-hero,.main-hero,.page-hero,.tariffs-hero,.tariff-hero,
  .video-hero,.video-page-hero,.cctv-hero,.equipment-hero,.equip-hero,
  .coverage-hero,.news-hero,.about-hero,.contacts-hero,.contact-hero{
    width:calc(100% - 14px)!important;
    min-height:500px!important;
    padding:26px 18px 190px!important;
    border-radius:20px!important;
  }

  .home-hero h1,.main-hero h1,.page-hero h1,.tariffs-hero h1,.tariff-hero h1,
  .video-hero h1,.video-page-hero h1,.cctv-hero h1,.equipment-hero h1,
  .equip-hero h1,.coverage-hero h1,.news-hero h1,.about-hero h1,
  .contacts-hero h1,.contact-hero h1{
    font-size:clamp(31px,11.5vw,42px)!important;
  }

  .home-hero p,.main-hero p,.page-hero p,.tariffs-hero p,.tariff-hero p,
  .video-hero p,.video-page-hero p,.cctv-hero p,.equipment-hero p,
  .equip-hero p,.coverage-hero p,.news-hero p,.about-hero p,
  .contacts-hero p,.contact-hero p{
    font-size:14px!important;
  }

  .hero-features,.hero-benefits,.features-row,.benefits-row{
    grid-template-columns:1fr!important;
  }

  .card,.feature-card,.benefit-card,.tariff-card,.plan-card,.equipment-card,
  .product-card,.document-card,.contact-card,.news-card,.service-card{
    padding:18px!important;
    border-radius:18px!important;
  }

  footer,.footer,.site-footer{
    width:calc(100% - 14px)!important;
    border-radius:20px!important;
  }
}
/* ==========================================================
   ZasNet Mobile Polish V2
   Дочистка мобільної версії після:
   ZasNet Mobile Responsive — FINAL

   Ставити в самий кінець site.css.
   Кабінет не чіпає.
   ========================================================== */


/* ---------- 01. Header compact on mobile ---------- */
@media (max-width: 768px) {
  header,
  .header,
  .site-header,
  .main-header {
    margin-top: 8px !important;
    padding: 8px 9px !important;
    gap: 8px !important;
  }

  header .logo img,
  header .brand img,
  .header .logo img,
  .header .brand img,
  .site-header .logo img,
  .site-header .brand img {
    max-width: 122px !important;
  }

  header nav,
  .header nav,
  .site-header nav,
  .main-header nav,
  .navbar nav,
  .menu,
  .nav-menu,
  .main-menu {
    padding-top: 6px !important;
    gap: 5px !important;
  }

  header nav a,
  .header nav a,
  .site-header nav a,
  .main-header nav a,
  .navbar nav a,
  .menu a,
  .nav-menu a,
  .main-menu a {
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }

  .header-actions a,
  .header-actions button,
  .top-actions a,
  .top-actions button,
  .nav-actions a,
  .nav-actions button {
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 11.5px !important;
  }
}


/* ---------- 02. Simple page heroes lower on mobile ---------- */
@media (max-width: 768px) {
  .news-hero,
  .about-hero,
  .contacts-hero,
  .contact-hero,
  .coverage-hero {
    min-height: 390px !important;
    padding: 28px 22px 145px !important;
  }

  .equipment-hero,
  .equip-hero,
  .video-hero,
  .video-page-hero,
  .cctv-hero {
    min-height: 460px !important;
    padding: 30px 22px 175px !important;
  }

  .home-hero,
  .main-hero {
    min-height: 500px !important;
    padding: 30px 22px 190px !important;
  }

  .news-hero h1,
  .about-hero h1,
  .contacts-hero h1,
  .contact-hero h1,
  .coverage-hero h1 {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: 1.04 !important;
  }

  .equipment-hero h1,
  .equip-hero h1,
  .video-hero h1,
  .video-page-hero h1,
  .cctv-hero h1,
  .home-hero h1,
  .main-hero h1 {
    font-size: clamp(34px, 10.5vw, 46px) !important;
    line-height: 1.03 !important;
  }

  .news-hero p,
  .about-hero p,
  .contacts-hero p,
  .contact-hero p,
  .coverage-hero p,
  .equipment-hero p,
  .equip-hero p,
  .video-hero p,
  .video-page-hero p,
  .cctv-hero p,
  .home-hero p,
  .main-hero p {
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }
}


/* ---------- 03. Search / coverage mobile form ---------- */
@media (max-width: 768px) {
  .coverage-hero form,
  .coverage-hero .search-form,
  .coverage-hero .hero-search,
  .tariffs-section form,
  .tariffs-section .filter,
  .tariffs-section .select-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .coverage-hero input,
  .coverage-hero select,
  .coverage-hero button,
  .tariffs-section input,
  .tariffs-section select,
  .tariffs-section button {
    width: 100% !important;
    min-height: 48px !important;
  }
}


/* ---------- 04. Cards spacing and readability ---------- */
@media (max-width: 768px) {
  .card,
  .feature-card,
  .benefit-card,
  .tariff-card,
  .plan-card,
  .equipment-card,
  .product-card,
  .document-card,
  .contact-card,
  .news-card,
  .service-card {
    padding: 18px !important;
  }

  .card p,
  .feature-card p,
  .benefit-card p,
  .tariff-card p,
  .plan-card p,
  .equipment-card p,
  .product-card p,
  .document-card p,
  .contact-card p,
  .news-card p,
  .service-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .tariff-card .price,
  .plan-card .price,
  .product-card .price,
  .equipment-card .price {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
}


/* ---------- 05. News mobile ---------- */
@media (max-width: 768px) {
  .news-grid,
  .news-list {
    gap: 16px !important;
  }

  .news-card img {
    width: 100% !important;
    max-height: 190px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  .news-card h3 {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }
}


/* ---------- 06. Footer compact ---------- */
@media (max-width: 768px) {
  footer,
  .footer,
  .site-footer {
    margin-top: 24px !important;
    padding: 22px 16px !important;
  }

  footer h3,
  footer h4,
  .footer h3,
  .footer h4,
  .site-footer h3,
  .site-footer h4 {
    margin-bottom: 8px !important;
    font-size: 16px !important;
  }

  footer a,
  .footer a,
  .site-footer a,
  footer p,
  .footer p,
  .site-footer p {
    font-size: 14px !important;
  }
}


/* ---------- 07. Very small phones ---------- */
@media (max-width: 430px) {
  header .logo img,
  header .brand img,
  .header .logo img,
  .header .brand img,
  .site-header .logo img,
  .site-header .brand img {
    max-width: 112px !important;
  }

  .home-hero,
  .main-hero {
    min-height: 470px !important;
    padding-bottom: 170px !important;
  }

  .news-hero,
  .about-hero,
  .contacts-hero,
  .contact-hero,
  .coverage-hero {
    min-height: 360px !important;
    padding-bottom: 125px !important;
  }

  .equipment-hero,
  .equip-hero,
  .video-hero,
  .video-page-hero,
  .cctv-hero {
    min-height: 430px !important;
    padding-bottom: 155px !important;
  }

  .home-hero h1,
  .main-hero h1,
  .page-hero h1,
  .tariffs-hero h1,
  .tariff-hero h1,
  .video-hero h1,
  .video-page-hero h1,
  .cctv-hero h1,
  .equipment-hero h1,
  .equip-hero h1,
  .coverage-hero h1,
  .news-hero h1,
  .about-hero h1,
  .contacts-hero h1,
  .contact-hero h1 {
    font-size: clamp(30px, 10.5vw, 40px) !important;
  }
}
/* ==========================================================
   ZasNet Mobile Polish V3 Compact — FINAL
   Фінальна дочистка мобільної версії після:
   1) ZasNet Mobile Responsive — FINAL
   2) ZasNet Mobile Polish V2

   Ставити в самий кінець site.css.
   Кабінет не чіпаємо.
   ========================================================== */


/* ==========================================================
   01. Компактніша шапка на телефоні
   ========================================================== */

@media (max-width: 768px) {
  header,
  .header,
  .site-header,
  .main-header {
    width: calc(100% - 14px) !important;
    margin-top: 7px !important;
    padding: 7px 8px !important;
    gap: 7px !important;
    border-radius: 16px !important;
  }

  header .logo img,
  header .brand img,
  .header .logo img,
  .header .brand img,
  .site-header .logo img,
  .site-header .brand img {
    max-width: 108px !important;
  }

  header nav,
  .header nav,
  .site-header nav,
  .main-header nav,
  .navbar nav,
  .menu,
  .nav-menu,
  .main-menu {
    padding-top: 5px !important;
    gap: 5px !important;
  }

  header nav a,
  .header nav a,
  .site-header nav a,
  .main-header nav a,
  .navbar nav a,
  .menu a,
  .nav-menu a,
  .main-menu a {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
  }

  .header-actions a,
  .header-actions button,
  .top-actions a,
  .top-actions button,
  .nav-actions a,
  .nav-actions button,
  header .btn,
  header .button,
  header button,
  .header .btn,
  .header .button,
  .header button,
  .site-header .btn,
  .site-header .button,
  .site-header button {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    border-radius: 11px !important;
  }
}


/* ==========================================================
   02. Hero банери ще компактніше на мобільному
   ========================================================== */

@media (max-width: 768px) {
  .home-hero,
  .main-hero {
    min-height: 455px !important;
    padding: 26px 18px 155px !important;
  }

  .video-hero,
  .video-page-hero,
  .cctv-hero,
  .equipment-hero,
  .equip-hero {
    min-height: 420px !important;
    padding: 25px 18px 145px !important;
  }

  .news-hero,
  .about-hero,
  .contacts-hero,
  .contact-hero,
  .coverage-hero,
  .page-hero,
  .tariffs-hero,
  .tariff-hero {
    min-height: 335px !important;
    padding: 24px 18px 110px !important;
  }

  .home-hero,
  .main-hero,
  .video-hero,
  .video-page-hero,
  .cctv-hero,
  .equipment-hero,
  .equip-hero,
  .news-hero,
  .about-hero,
  .contacts-hero,
  .contact-hero,
  .coverage-hero,
  .page-hero,
  .tariffs-hero,
  .tariff-hero {
    width: calc(100% - 14px) !important;
    margin: 14px auto 20px !important;
    border-radius: 18px !important;
  }

  .home-hero h1,
  .main-hero h1,
  .video-hero h1,
  .video-page-hero h1,
  .cctv-hero h1,
  .equipment-hero h1,
  .equip-hero h1,
  .news-hero h1,
  .about-hero h1,
  .contacts-hero h1,
  .contact-hero h1,
  .coverage-hero h1,
  .page-hero h1,
  .tariffs-hero h1,
  .tariff-hero h1 {
    font-size: clamp(30px, 10vw, 40px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
  }

  .home-hero p,
  .main-hero p,
  .video-hero p,
  .video-page-hero p,
  .cctv-hero p,
  .equipment-hero p,
  .equip-hero p,
  .news-hero p,
  .about-hero p,
  .contacts-hero p,
  .contact-hero p,
  .coverage-hero p,
  .page-hero p,
  .tariffs-hero p,
  .tariff-hero p {
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.46 !important;
  }

  .section-label,
  .hero-badge,
  .badge {
    min-height: 30px !important;
    padding: 0 12px !important;
    margin-bottom: 13px !important;
    font-size: 11.5px !important;
  }
}


/* ==========================================================
   03. Нижні переваги в hero компактніше
   ========================================================== */

@media (max-width: 768px) {
  .hero-features,
  .hero-benefits,
  .features-row,
  .benefits-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .hero-feature,
  .hero-benefit,
  .feature-card,
  .benefit-card {
    padding: 10px !important;
    min-height: 70px !important;
    border-radius: 13px !important;
  }

  .hero-feature h3,
  .hero-benefit h3,
  .feature-card h3,
  .benefit-card h3 {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .hero-feature p,
  .hero-benefit p,
  .feature-card p,
  .benefit-card p {
    font-size: 11.5px !important;
    line-height: 1.28 !important;
  }
}


/* ==========================================================
   04. Картки сторінок компактніше
   ========================================================== */

@media (max-width: 768px) {
  .cards,
  .card-grid,
  .features-grid,
  .benefits-grid,
  .why-grid,
  .steps-grid,
  .documents-grid,
  .contacts-grid,
  .news-grid,
  .services-grid,
  .tariffs-grid,
  .plans-grid,
  .equipment-grid,
  .products-grid {
    gap: 12px !important;
  }

  .card,
  .feature-card,
  .benefit-card,
  .tariff-card,
  .plan-card,
  .equipment-card,
  .product-card,
  .document-card,
  .contact-card,
  .news-card,
  .service-card {
    padding: 16px !important;
    border-radius: 17px !important;
  }

  .card h2,
  .card h3,
  .feature-card h3,
  .benefit-card h3,
  .tariff-card h3,
  .plan-card h3,
  .equipment-card h3,
  .product-card h3,
  .document-card h3,
  .contact-card h3,
  .news-card h3,
  .service-card h3 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .card p,
  .feature-card p,
  .benefit-card p,
  .tariff-card p,
  .plan-card p,
  .equipment-card p,
  .product-card p,
  .document-card p,
  .contact-card p,
  .news-card p,
  .service-card p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .equipment-card img,
  .product-card img,
  .category-card img,
  .news-card img {
    max-height: 165px !important;
  }
}


/* ==========================================================
   05. Форми та поля компактніше
   ========================================================== */

@media (max-width: 768px) {
  input,
  textarea,
  select {
    min-height: 46px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 13px !important;
    font-size: 15px !important;
  }

  textarea {
    min-height: 105px !important;
  }

  form button,
  .form button,
  .contact-form button,
  .request-form button,
  .lead-form button,
  input[type="submit"] {
    min-height: 48px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }
}


/* ==========================================================
   06. Новини компактніше
   ========================================================== */

@media (max-width: 768px) {
  .news-card img {
    max-height: 165px !important;
    border-radius: 14px !important;
  }

  .news-card h3 {
    font-size: 19px !important;
    line-height: 1.16 !important;
  }

  .news-card .date,
  .news-card time,
  .news-date {
    font-size: 12px !important;
  }
}


/* ==========================================================
   07. Footer компактніше
   ========================================================== */

@media (max-width: 768px) {
  footer,
  .footer,
  .site-footer {
    width: calc(100% - 14px) !important;
    margin-top: 18px !important;
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }

  footer .footer-grid,
  footer .grid,
  .footer .footer-grid,
  .footer .grid,
  .site-footer .footer-grid,
  .site-footer .grid {
    gap: 16px !important;
  }

  footer .logo img,
  .footer .logo img,
  .site-footer .logo img {
    max-width: 120px !important;
  }

  footer h3,
  footer h4,
  .footer h3,
  .footer h4,
  .site-footer h3,
  .site-footer h4 {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  footer a,
  .footer a,
  .site-footer a,
  footer p,
  .footer p,
  .site-footer p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  footer a,
  .footer a,
  .site-footer a {
    min-height: 28px !important;
  }
}


/* ==========================================================
   08. Дуже маленькі екрани
   ========================================================== */

@media (max-width: 430px) {
  .home-hero,
  .main-hero {
    min-height: 430px !important;
    padding-bottom: 145px !important;
  }

  .video-hero,
  .video-page-hero,
  .cctv-hero,
  .equipment-hero,
  .equip-hero {
    min-height: 400px !important;
    padding-bottom: 135px !important;
  }

  .news-hero,
  .about-hero,
  .contacts-hero,
  .contact-hero,
  .coverage-hero,
  .page-hero,
  .tariffs-hero,
  .tariff-hero {
    min-height: 320px !important;
    padding-bottom: 100px !important;
  }

  .home-hero h1,
  .main-hero h1,
  .video-hero h1,
  .video-page-hero h1,
  .cctv-hero h1,
  .equipment-hero h1,
  .equip-hero h1,
  .news-hero h1,
  .about-hero h1,
  .contacts-hero h1,
  .contact-hero h1,
  .coverage-hero h1,
  .page-hero h1,
  .tariffs-hero h1,
  .tariff-hero h1 {
    font-size: clamp(28px, 10vw, 38px) !important;
  }
}