body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.mclean-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: #2f3337;
    color: #e9f2f5;
}

.mclean-header__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 48px;
}

.mclean-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.mclean-header__brand-icon {
    color: #8ed6e5;
}

.mclean-header__brand-text {
    font-weight: 800;
    letter-spacing: .2px;
}

.mclean-header__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mnav {
    position: relative;
}

.mnav__link {
    color: #cfe1e8;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mnav__link:hover {
    color: #fff;
}

.mnav__chev {
    font-size: 11px;
    opacity: .8;
}

.mnav__drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #394045;
    min-width: 180px;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.mnav__drop a {
    display: block;
    color: #cfe1e8;
    padding: 8px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}

.mnav__drop a:hover {
    background: #2f3337;
    color: #fff;
}

.mnav--hasdrop:hover .mnav__drop {
    display: block;
}

.mclean-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mclean-header__phone {
    color: #cfe1e8;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mclean-header__phone i {
    color: #8ed6e5;
}

.mclean-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 24px;
    font-weight: 800;
    text-decoration: none;
    border: 0;
}

.mclean-btn--green {
    background: #2fae61;
    color: #fff;
    box-shadow: 0 8px 18px rgba(47, 174, 97, .25);
}

.mclean-btn--green:hover {
    filter: brightness(1.06);
}

.mclean-btn--light {
    background: #f2f6f8;
    color: #0d1c22;
}

.mclean-btn--line {
    background: transparent;
    color: #cfe1e8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    border-radius: 10px;
    padding: 10px 14px;
}

.mclean-header__burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #3a3f44;
    border: 0;
    color: #cfe1e8;
    cursor: pointer;
}

/* ===== Mobile menu ===== */
.mclean-mobile {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 70;
    justify-content: flex-end;
}

.mclean-mobile__panel {
    width: 300px;
    max-width: 86%;
    background: #2f3337;
    color: #eaf6f9;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mclean-mobile__close {
    align-self: flex-end;
    background: transparent;
    border: 0;
    color: #cfe1e8;
    font-size: 20px;
    cursor: pointer;
}

.mclean-mobile__item {
    padding: 10px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: #cfe1e8;
}

.mclean-mobile__item:hover {
    background: #3a3f44;
    color: #fff;
}

.mclean-mobile__cta {
    margin-top: 6px;
}

/* ===== Hero ===== */
.mclean-hero {
    position: relative;
    margin-top: 57px;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0f2026;
}

.mclean-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(105%);
}

.mclean-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .38));
}

.mclean-hero__content {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 16px;
    color: #fff;
    text-align: center;
}

.mclean-hero__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.mclean-hero__lead {
    max-width: 920px;
    margin: 14px auto 10px;
    line-height: 1.7;
    font-weight: 600;
    color: #e3edf1;
}

.mreview {
    margin: 16px auto 0;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    background: rgba(0, 0, 0, .35);
    padding: 12px 14px;
    border-radius: 60px;
    backdrop-filter: blur(4px);
}

.mreview__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .6);
}

.mreview__text {
    font-size: 15px;
    text-align: left;
}

.mreview__stars {
    color: #ffd055;
    margin-top: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .mclean-hero__title {
        font-size: 38px;
    }
}

@media (max-width: 980px) {
    .mclean-header__nav {
        display: none;
    }

    .mclean-header__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .mclean-hero {
        min-height: 480px;
    }

    .mclean-hero__title {
        font-size: 32px;
    }

    .mreview {
        flex-direction: column;
        border-radius: 16px;
        text-align: center;
    }

    .mreview__text {
        text-align: center;
    }
}

.nyacc {
    background: #fff;
    color: #0f1418;
    padding: 46px 16px;
}

.nyacc__container {
    max-width: 1200px;
    margin: 0 auto;
}

.nyacc__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: center;
}

.nyacc__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nyacc__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 4px;
}

.nyacc__text p {
    font-size: 16px;
    line-height: 1.75;
    margin: 10px 0;
}

.nyacc__cta {
    display: flex;
    gap: 18px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.nyacc__media {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.nyacc__img {
    width: 560px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain
}

/* ===== Pill buttons ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap
}

.pill--dark {
    background: #0d0d0d;
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .25)
}

.pill--dark:hover {
    filter: brightness(1.05)
}

.pill--green {
    background: #2fb36a;
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 179, 106, .25)
}

.pill--green:hover {
    filter: brightness(1.06)
}

/* ===== Responsive ===== */
@media (max-width:1024px) {
    .nyacc__grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .nyacc__media {
        order: 2;
        justify-content: center
    }

    .nyacc__title {
        font-size: 36px
    }
}

@media (max-width:560px) {
    .nyacc {
        padding: 36px 14px
    }

    .nyacc__title {
        font-size: 30px
    }

    .pill {
        padding: 13px 20px
    }
}

.extpromo {
    background: #2fb36a;
    /* зелёный фон как в макете */
    color: #ffffff;
    padding: 46px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* лёгкий градиент и «глянец» без картинок */
.extpromo:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 300px at 50% -80px, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)),
        radial-gradient(900px 240px at 50% 120%, rgba(0, 0, 0, .06), transparent);
    pointer-events: none;
}

.extpromo__container {
    max-width: 980px;
    margin: 0 auto;
}

.extpromo__title {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .2px;
    margin: 0 0 14px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

.extpromo__lead {
    margin: 0 auto 14px;
    max-width: 900px;
    font-size: 18px;
    line-height: 1.7;
    color: #eaf8ef;
}

.extpromo__note {
    margin: 8px auto 22px;
    max-width: 820px;
    font-size: 17px;
    line-height: 1.7;
    color: #f2fff6;
}

/* Кнопка-пилюля */
.extpromo__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 999px;
    background: #ffffff;
    color: #228e52;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .15);
}

.extpromo__btn:hover {
    filter: brightness(1.04);
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
    .extpromo {
        padding: 40px 14px;
    }

    .extpromo__title {
        font-size: 34px;
    }

    .extpromo__lead {
        font-size: 16px;
    }

    .extpromo__note {
        font-size: 16px;
    }
}

@media (max-width: 560px) {
    .extpromo__title {
        font-size: 28px;
    }

    .extpromo__btn {
        padding: 14px 26px;
    }
}

.pricegrid {
    background: #fff;
    color: #0e1a18;
    padding: 66px 16px;
}

.pricegrid__container {
    max-width: 1180px;
    margin: 0 auto;
}

.pricegrid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width:1024px) {
    .pricegrid__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:680px) {
    .pricegrid__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Card ===== */
.pricecard {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.pricecard--popular {
    border-color: #1fb672;
    box-shadow: 0 14px 30px rgba(31, 182, 114, .18);
}

.pricecard__badge {
    position: absolute;
    inset: 14px auto auto 14px;
    background: #ffcc00;
    color: #111;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .3px;
    padding: 6px 10px;
    border-radius: 6px;
}

.pricecard__icon {
    font-size: 44px;
    color: #0e0e0e;
    opacity: .75;
    text-align: center;
    margin-top: 8px;
}

.pricecard__title {
    margin: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
}

.pricecard__from {
    font-size: 12px;
    letter-spacing: 1px;
    color: #7a8b86;
    text-align: center;
    margin-top: 4px;
}

.pricecard__price {
    text-align: center;
    font-weight: 900;
    font-size: 40px;
    color: #0d0d0d;
}

.pricecard__currency {
    font-size: .75em;
    vertical-align: baseline;
    margin-right: 2px;
}

.pricecard__suffix {
    font-size: .48em;
    color: #4f625d;
    margin-left: 2px;
}

.pricecard__btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    background: #1fb672;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    min-width: 160px;
    box-shadow: 0 10px 22px rgba(31, 182, 114, .28);
}

.pricecard__btn:hover {
    filter: brightness(1.05);
}

.pricecard__desc {
    font-size: 14px;
    line-height: 1.7;
    color: #2d3e3a;
    margin-top: 4px;
}

.pricecard__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.pricecard__feat {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #2b3a36;
    font-size: 14px;
    line-height: 1.6;
}

.pricecard__feat i {
    color: #27ae60;
    margin-top: 3px;
    min-width: 16px;
}

.benefrow {
    background: #fff;
    color: #0f1a16;
    padding: 34px 16px;
}

.benefrow__container {
    max-width: 1180px;
    margin: 0 auto;
}

.benefrow__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: start;
    text-align: center;
}

/* ===== Card ===== */
.benefcard {
    padding: 6px 10px;
}

.benefcard__icon {

    margin: 0 auto 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #25a75f;

    font-size: 76px;
}

.benefcard__title {
    font-size: 22px;
    font-weight: 900;
    color: #1d9a53;
    margin: 6px 0 10px;
}

.benefcard__text {
    font-size: 16px;
    line-height: 1.75;
    color: #2b3a35;
    max-width: 360px;
    margin: 0 auto;
}

/* ===== Responsive ===== */
@media (max-width:1024px) {
    .benefrow__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px;
    }
}

@media (max-width:640px) {
    .benefrow {
        padding: 28px 14px;
    }

    .benefrow__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .benefcard__icon {
        width: 110px;
        height: 110px;
        font-size: 50px;
    }

    .benefcard__title {
        font-size: 20px;
    }
}

.benefrow {
    background: #fff;
    color: #0f1a16;
    padding: 64px 15px;
}

.geelong {
    background: #2fb36a;
    color: #ffffff;
    text-align: center;
    padding: 44px 16px;
    position: relative;
    overflow: hidden;
}

.geelong:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1100px 260px at 50% -80px, rgba(255, 255, 255, .18), transparent),
        radial-gradient(900px 200px at 50% 120%, rgba(0, 0, 0, .05), transparent);
    pointer-events: none;
}

.geelong__container {
    max-width: 980px;
    margin: 0 auto;
}

/* ===== Typo ===== */
.geelong__title {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 14px;
}

.geelong__text {
    max-width: 900px;
    margin: 0 auto 12px;
    font-size: 18px;
    line-height: 1.7;
    color: #f5fff8;
}

.geelong__bonus {
    font-size: 20px;
    font-weight: 900;
    margin: 8px 0 10px;
}

.geelong__link {
    color: #e6fff0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== CTAs ===== */
.geelong__ctas {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.geelong__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #228e52;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .15);
}

.geelong__btn:hover {
    filter: brightness(1.04);
}

/* ===== Responsive ===== */
@media (max-width:880px) {
    .geelong {
        padding: 38px 14px;
    }

    .geelong__title {
        font-size: 34px;
    }

    .geelong__text {
        font-size: 16px;
    }
}

@media (max-width:560px) {
    .geelong__title {
        font-size: 28px;
    }

    .geelong__btn {
        padding: 12px 22px;
    }
}

.foxfeat {
    background: #fff;
    color: #122024;
    padding: 88px 16px;
}

.foxfeat__container {
    max-width: 1180px;
    margin: 0 auto;
}

.foxfeat__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 26px;
    align-items: center;
}

/* ===== Copy ===== */
.foxfeat__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 10px;
}

.foxfeat__title-icon {
    color: #22a565;
    margin-right: 10px;
}

.foxfeat__lead {
    font-size: 16px;
    line-height: 1.8;
    color: #2b3c40;
    margin: 0 0 10px;
    max-width: 660px;
}

.foxfeat__note {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 0 0;
    color: #1b2f33;
}

/* ===== Video ===== */
.foxfeat__video {
    width: 100%;
}

.foxfeat__ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 */
}

.foxfeat__iframe {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

/* Fallback poster (if no JS) */
.foxfeat__poster {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

/* ===== Responsive ===== */
@media (max-width:1024px) {
    .foxfeat__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .foxfeat__title {
        font-size: 36px;
    }

    .foxfeat__lead {
        max-width: none;
    }
}

@media (max-width:560px) {
    .foxfeat {
        padding: 24px 14px;
    }

    .foxfeat__title {
        font-size: 30px;
    }
}

.onemin {
    background: #22b36a;
    color: #fff;
    padding: 88px 16px;
    text-align: center;
}

.onemin__container {
    max-width: 1180px;
    margin: 0 auto;
}

.onemin__title {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 50px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

.onemin__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: start;
}

/* ===== Step cards ===== */
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* progress rings via conic-gradient (no root vars) */
.step__ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(#198e52 0 0, #198e52 0 0);
    /* will be overridden by mods */
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    position: relative;
}

.step__ring:after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: #22b36a;
    /* inner fill same as div bg */
}

.step__icon {
    position: relative;
    font-size: 56px;
    color: #ffffff;
    z-index: 1;
}

/* ring fills */
.step__ring--25 {
    background: conic-gradient(#0d6e3f 0 25%, rgba(255, 255, 255, .35) 25% 100%);
}

.step__ring--75 {
    background: conic-gradient(#0d6e3f 0 75%, rgba(255, 255, 255, .35) 75% 100%);
}

.step__ring--100 {
    background: conic-gradient(#0d6e3f 0 100%, #0d6e3f 0);
}

.step__caption {
    font-size: 24px;
    line-height: 1.35;
    font-weight: 900;
    margin: 0;
    color: #ffffff;
}

/* ===== Responsive ===== */
@media (max-width:980px) {
    .onemin__title {
        font-size: 34px;
    }
}

@media (max-width:720px) {
    .onemin__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .step__caption {
        font-size: 22px;
    }

    .step__ring {
        width: 120px;
        height: 120px;
    }

    .step__ring:after {
        inset: 12px;
    }

    .step__icon {
        font-size: 48px;
    }
}

.cotm {
    background: #fff;
    color: #0e1a18;
    padding: 84px 16px;
}

.cotm__container {
    max-width: 1100px;
    margin: 0 auto;
}

.cotm__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    text-align: center;
    margin: 0 0 10px;
}

.cotm__trophy {
    color: #f5b500;
    margin-left: 8px;
}

.cotm__intro {
    max-width: 980px;
    margin: 10px auto;
    line-height: 1.8;
    font-size: 16px;
    color: #273b36;
    text-align: center
}

/* ===== Feature row ===== */
.cotm__feature {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: center;
    margin-top: 24px;
}

/* Photos overlap stack */
.cotm__photos {
    position: relative;
    height: 260px;
    min-width: 240px
}

.cotm-photo {
    position: absolute;
    margin: 0;
    width: 180px;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    background: #eaeff1
}

.cotm-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.cotm-photo--one {
    left: 8px;
    top: 18px;
    transform: rotate(-12deg)
}

.cotm-photo--two {
    left: 110px;
    top: 98px;
    transform: rotate(12deg)
}

.cotm__content {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.cotm__name {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 900;
    margin: 0;
    color: #0e1a18
}

.cotm__meta {
    font-weight: 800
}

.cotm__meta--city {
    color: #0e7d45
}

.cotm__meta--month {
    color: #28a364
}

.cotm__text {
    margin-top: 8px;
    line-height: 1.9;
    color: #2a3c37;
    font-size: 16px
}

/* ===== Responsive ===== */
@media (max-width:980px) {
    .cotm__title {
        font-size: 36px
    }

    .cotm__feature {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .cotm__photos {
        height: 240px;
        margin: 0 auto
    }

    .cotm__content {
        text-align: left
    }
}

@media (max-width:560px) {
    .cotm {
        padding: 26px 14px
    }

    .cotm__title {
        font-size: 30px
    }

    .cotm-photo {
        width: 150px;
        height: 190px
    }

    .cotm-photo--two {
        left: 95px;
        top: 90px
    }
}

.match {
    background: #5aa7e6;
    /* верхний светло-голубой */
    background: linear-gradient(#5aa7e6 0%, #55a3e3 100%);
    color: #fff;
    padding: 36px 0px 0;
}

.match__container {
    max-width: 1200px;
    margin: 0 auto;
}

.match__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 28px;
    align-items: center
}

/* ===== Visual side ===== */
.match__visual {
    position: relative;
    min-height: 300px
}

.match__circle {
    position: absolute;
    border: 18px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
    background: #dfeaf6;
}

.match__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.match__circle--left {
    width: 260px;
    height: 260px;
    left: 6%;
    top: 25%;
}

.match__circle--right {
    width: 290px;
    height: 290px;
    left: 43%;
    top: -8%;
}

/* connectors (толстые белые «трубки» + наконечник) */
.match__connector {
    position: absolute;
    height: 26px;
    background: #fff;
    border-radius: 60px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.match__connector--top {
    left: 27%;
    right: 18%;
    top: 9%;
}

.match__connector--mid {
    left: 27%;
    right: 18%;
    top: 47%;
}

.match__connector--top::after,
.match__connector--mid::after {
    content: "";
    position: absolute;
    right: -18px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 18px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: translateY(-50%);
}

/* ===== Copy ===== */
.match__content {
    padding: 10px 0 20px;
}

.match__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    margin: 0 0 12px;
}

.match__text {
    font-size: 18px;
    line-height: 1.8;
    color: #e9f4ff;
    margin: 0 0 10px;
}

/* ===== CTA Band ===== */
.match__band {
    background: #498fd1;
    margin-top: 55px;
}

.match__band-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap
}

.match__band-title {
    margin: 8px 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 900;
    color: #fff;
}

.match__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #1e7d3f;
    border-radius: 999px;
    padding: 14px 26px;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .15)
}

.match__btn:hover {
    filter: brightness(1.04)
}

/* ===== Responsive ===== */
@media (max-width:1100px) {
    .match__title {
        font-size: 36px
    }

    .match__band-title {
        font-size: 26px
    }
}

@media (max-width:900px) {
    .match__grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .match__visual {
        min-height: 280px
    }

    .match__circle--left {
        left: 2%;
        top: 30%;
    }

    .match__circle--right {
        left: 46%;
        top: -6%;
    }
}

@media (max-width:620px) {
    .match {
        padding-top: 28px
    }

    .match__title {
        font-size: 30px
    }

    .match__text {
        font-size: 16px
    }

    .match__circle--left {
        width: 220px;
        height: 220px
    }

    .match__circle--right {
        width: 240px;
        height: 240px
    }

    .match__connector {
        height: 22px
    }

    .match__band-title {
        font-size: 22px
    }

    .match__btn {
        padding: 12px 20px
    }
}

.reasons3 {
    background: #ffffff;
    color: #10211b;
    padding: 90px 15px;
}

.reasons3__container {
    max-width: 1180px;
    margin: 0 auto;
}

.reasons3__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: start;
    text-align: center;
}

/* ===== Card ===== */
.vcard {
    padding: 6px 10px;
}

.vcard__icon {

    margin: 0 auto 35px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* мягкая подложка */
    color: #24a55e;
    font-size: 94px;

}

.vcard__title {
    font-size: 22px;
    font-weight: 900;
    color: #1d9a53;
    margin: 6px 0 10px;
}

.vcard__text {
    max-width: 360px;
    margin: 0 auto;
    color: #2b3a35;
    line-height: 1.75;
    font-size: 16px
}

/* ===== Responsive ===== */
@media (max-width:1024px) {
    .reasons3__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:640px) {
    .reasons3__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .vcard__icon {
        width: 110px;
        height: 110px;
        font-size: 56px;
    }

    .vcard__title {
        font-size: 20px;
    }
}

.greviews {

    padding: 88px 0;
    color: #0f1a18;
}

.greviews__container {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    padding: 0 40px;
}

.greviews__viewport {
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.greviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 320px;
    gap: 26px;
    padding: 8px 0 10px;
}

.gcard {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
    padding: 16px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gcard__who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gcard__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e5a7a;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 0 0 3px #eaf2f5 inset;
}

.gcard__g {
    color: #4285f4;
    font-size: 18px;
}

.gcard__name {
    font-weight: 900;
}

.gcard__date {
    font-size: 12px;
    color: #6a7a80;
    margin-top: 2px;
}

.gcard__stars {
    color: #ffb400;
    letter-spacing: 1px;
}

.gcard__text {
    line-height: 1.6;
    color: #23323a;
    margin: 0;
}

.greviews__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #1c2a2f;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.greviews__arrow--prev {
    left: 0;
}

.greviews__arrow--next {
    right: 0;
}

/* Responsive */
@media (max-width:1024px) {
    .greviews__track {
        grid-auto-columns: 300px;
    }
}

@media (max-width:640px) {
    .greviews__container {
        padding: 0 14px;
    }

    .greviews__track {
        grid-auto-columns: 86%;
    }

    .greviews__arrow {
        display: none;
    }

    /* на мобиле — свайп */
}

.sitefoot {
    background: #0f1419;
    color: #cfd8dd;
    padding: 26px 16px 24px;
    position: relative;
    /* лёгкий «паттерн» без изображений */
    background-image:
        radial-gradient(18px 18px at 20% -10%, rgba(255, 255, 255, .06), transparent 60%),
        radial-gradient(18px 18px at 80% 110%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(#0f1419, #0f1419);
}

.sitefoot__container {
    max-width: 1180px;
    margin: 0 auto;
}

a {
    color: #e6f4ff;
    text-decoration: none
}

a:hover {
    opacity: .9
}

/* ===== Grid ===== */
.sitefoot__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.sitefoot__col--lined {
    position: relative;
}

.sitefoot__col--lined:before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #2a3238;
}

.sitefoot__title {
    color: #ffffff;
    margin: 8px 0 12px;
    font-size: 22px;
    font-weight: 900
}

/* ===== Brand & contacts ===== */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px
}

.brand__mark {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #0f1419;
    background: #eaf4ff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25)
}

.brand__name {
    font-weight: 900;
    letter-spacing: .3px;
    color: #fff;
    font-size: 28px
}

.contacts__name {
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px
}

.contacts__row {
    margin: 6px 0;
    line-height: 1.6
}

/* ===== Lists ===== */
.footlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.footlist a {
    color: #d8e6ef
}

/* ===== Social + CTAs ===== */
.sitefoot__actionrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    flex-wrap: wrap
}

.sitefoot__social {
    display: flex;
    gap: 16px
}

.soc {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #121a21;
    color: #eaf4ff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25)
}

.soc__label {
    position: absolute;
    left: -9999px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 900;
    border: 0
}

.btn--green {
    background: #2fb36a;
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 179, 106, .28)
}

.btn--light {
    background: #eaf4ff;
    color: #0f1419;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18)
}

.btn:hover {
    filter: brightness(1.04)
}

/* ===== Legal ===== */
.sitefoot__legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
    border-top: 1px solid #2a3238;
    padding-top: 12px
}

.sitefoot__links a {
    color: #d6e4ee
}

.sitefoot__copy {
    color: #a9b6bd;
    font-size: 14px
}

.sep {
    color: #46525a;
    margin: 0 6px
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .sitefoot__grid {
        grid-template-columns: 1fr 1fr;
        gap: 22px
    }

    .sitefoot__col--lined:before {
        display: none
    }
}

@media (max-width: 680px) {
    .sitefoot__grid {
        grid-template-columns: 1fr
    }

    .sitefoot__actionrow {
        justify-content: center
    }

    .sitefoot__legal {
        justify-content: center;
        text-align: center
    }

    .brand__name {
        font-size: 24px
    }
}

.sendout {
    background: #fff;
    color: #0e1a18;
    padding: 92px 16px;
}

.sendout__container {
    max-width: 1100px;
    margin: 0 auto;
}

.sendout__title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
    margin: 0 0 12px;
}

.sendout__lead {
    max-width: 880px;
    margin: 0 auto 12px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #2a3b36
}

.sendout__note {
    color: #5e6d67;
    font-style: italic;
    margin-top: 6px
}

/* ===== Image ===== */
.sendout__div {
    margin: 14px auto 18px;
    max-width: 880px
}

.sendout__img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
}

/* ===== Icons grid ===== */
.sendout__grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    align-items: start;
    text-align: center
}

.sitem__icon {

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    color: #22a35b;

    font-size: 62px;

}

.sitem__title {
    font-weight: 900;
    margin: 0 0 6px;
    color: #1d9a53
}

.sitem__text {
    font-size: 14.5px;
    line-height: 1.7;
    color: #2b3a35;
    margin: 0
}

/* ===== Responsive ===== */
@media (max-width:1000px) {
    .sendout__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:560px) {
    .sendout {
        padding: 96px 14px
    }

    .sendout__grid {
        grid-template-columns: 1fr;
    }

    .sendout__title {
        font-size: 24px
    }
}

.frate {
    background: #2fb36a;
    /* зелёный фон */
    color: #ffffff;
    padding: 98px 16px 64px;
    text-align: center;
}

.frate__container {
    max-width: 1180px;
    margin: 0 auto;
}

.frate__title {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

/* ===== Cards grid ===== */
.frate__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: stretch;
}

.fcard {
    padding: 6px 8px 10px;
}

.fcard__sub {
    font-size: 13px;
    opacity: .9;
    margin-bottom: 6px;
}

.fcard__beds {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 6px;
}

.fcard__price {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

/* разделитель */
.frate__rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .55);
    margin: 18px auto;
    max-width: 86%;
}

/* ===== Copy ===== */
.frate__subtitle {
    font-size: 28px;
    font-weight: 900;
    margin: 10px 0 8px;
}

.frate__copy {
    max-width: 980px;
    margin: 0 auto;
    color: #f2fff6
}

.frate__copy p {
    line-height: 1.8;
    font-size: 16px;
    margin: 8px 0
}

.frate__link {
    color: #e9fff2;
    text-decoration: underline;
    text-underline-offset: 2px
}

.frate__notice {
    font-weight: 900
}

/* ===== Responsive ===== */
@media (max-width:1100px) {
    .frate__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:760px) {
    .frate__title {
        font-size: 36px
    }

    .frate__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fcard__price {
        font-size: 32px
    }
}

@media (max-width:520px) {
    .frate {
        padding: 94px 14px
    }

    .frate__grid {
        grid-template-columns: 1fr;
    }

    .frate__title {
        font-size: 30px
    }
}

.addsvc {
    background: #f7faf9;
    color: #0f1a18;
    padding: 68px 12px;
}

.addsvc__wrap {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .08);
    padding: 14px;
}

/* header with title and right price caption */
.addsvc__head {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: end;
    padding: 8px 12px 4px;
    border-bottom: 1px solid #e6eeea;
}

.addsvc__title {
    margin: 0;
    font-weight: 900;
    font-size: 24px;
    color: #1e9a57;
    display: flex;
    gap: 10px;
    align-items: center
}

.addsvc__coltitle {
    justify-self: end;
    color: #1e9a57;
    font-weight: 900
}

/* list */
.addsvc__list {
    display: block
}

/* row */
.r {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: center;
    padding: 14px 12px;
    border-bottom: 1px solid #edf3f0;
    transition: background .15s ease-in-out;
}

.r:last-child {
    border-bottom: 0
}

.r:hover {
    background: #fbfefd
}

.r__name a {
    color: #1e9a57;
    text-decoration: none
}

.r__name a:hover {
    text-decoration: underline
}

.r__price {
    justify-self: end;
    color: #30423d
}

.r--group .r__name {
    font-weight: 900;
    color: #1e9a57
}

.r--group .r__price {
    font-weight: 900
}

/* Responsive */
@media (max-width:720px) {
    .addsvc__head {
        grid-template-columns: 1fr 120px
    }

    .r {
        grid-template-columns: 1fr 120px
    }
}

@media (max-width:520px) {
    .addsvc__head {
        grid-template-columns: 1fr
    }

    .addsvc__coltitle {
        display: none
    }

    .r {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .r__price {
        justify-self: start;
        color: #3a5048;
        font-weight: 700
    }

}

.eolc {
    background: #2fb36a;
    color: #ffffff;
    padding: 94px 16px 36px;
    text-align: center;
}

.eolc__container {
    max-width: 980px;
    margin: 0 auto;
}

.eolc__title {
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}

/* ===== Copy ===== */
.eolc__copy {
    color: #eafff3;
    max-width: 940px;
    margin: 0 auto;
}

.eolc__copy p {
    margin: 10px 0;
    line-height: 1.9;
    font-size: 16px;
}

.eolc__hint {
    font-weight: 800;
    color: #f4fff9
}

/* ===== CTAs ===== */
.eolc__ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    border: 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .15);
}

.btn--light {
    background: #e8f6ee;
    color: #19693c;
}

.btn--white {
    background: #ffffff;
    color: #1c7f48;
}

.btn:hover {
    filter: brightness(1.04);
}

/* ===== Responsive ===== */
@media (max-width:900px) {
    .eolc__title {
        font-size: 36px;
    }
}

@media (max-width:560px) {
    .eolc {
        padding: 98px 14px;
    }

    .eolc__title {
        font-size: 30px;
    }

    .btn {
        padding: 12px 20px;
    }
}

.inclist {
    background: #f4f7f6;
    color: #0f1a18;
    padding: 58px 12px;
}

.inclist__wrap {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .08);
    padding: 10px 10px 14px;
    border-top: 6px solid #25a75f;
    /* зелёная кромка сверху как на макете */
}

/* ===== Group ===== */
.group {
    border: 1px solid #e8efec;
    border-radius: 10px;
    margin: 10px 0;
    background: #fff;
    overflow: hidden
}

.group__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #edf3f0;
    background: #fbfefe;
}

.group__title {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    color: #1a3f36
}

.group__plan {
    font-size: 12px;
    color: #1e9a57;
    font-weight: 900
}

/* ===== Rows ===== */
.rows {
    display: block
}

.row {
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid #f0f4f2;
}

.row:last-child {
    border-bottom: 0
}

.row--sep {
    border-top: 1px solid #e8efec
}

.row__name {
    font-size: 13.5px;
    color: #2a3d37
}

.row__name em {
    color: #6a7c76;
    font-style: italic
}

.row__check {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #24a55e
}

/* ===== Responsive ===== */
@media (max-width:560px) {
    .row {
        grid-template-columns: 1fr 28px
    }

    .group__title {
        font-size: 13.5px
    }
}

.faqs {
    background: #ffffff;
    color: #0f1a18;
    padding: 96px 16px;
}

.faqs__container {
    max-width: 980px;
    margin: 0 auto;
}

.faqs__title {
    text-align: center;
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 900;
}

/* ===== Items ===== */
.faq {
    padding: 12px 0;
    border-bottom: 1px solid #eef2f1;
}

.faq:last-child {
    border-bottom: 0
}

.faq__q {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 900;
    color: #0f1a18;
}

.faq__icon {
    color: #1ea358;
    margin-right: 10px;
    font-size: .85em;
}

.faq__a p {
    margin: 8px 0;
    line-height: 1.85;
    color: #273936;
    font-size: 16px
}

/* ===== Responsive ===== */
@media (max-width:900px) {
    .faqs__title {
        font-size: 36px
    }

    .faq__q {
        font-size: 26px
    }
}

@media (max-width:560px) {
    .faqs {
        padding: 22px 14px
    }

    .faqs__title {
        font-size: 30px
    }

    .faq__q {
        font-size: 22px
    }

    .faq__a p {
        font-size: 15.5px
    }
}

.hcontact {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0f1a18;
    height: 100vh;
    padding: 98px 16px;
}

.hcontact__container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center
}

.hcontact__title {
    margin: 0 0 10px;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 900
}

.hcontact__lead {
    max-width: 880px;
    margin: 0 auto 16px;
    line-height: 1.85;
    color: #2a3b37
}

.hcontact__rule {
    display: block;
    width: 520px;
    max-width: 80%;
    height: 2px;
    margin: 8px auto 58px;
    background: #1e9a57;
    opacity: .8
}

/* ===== Grid ===== */
.hcontact__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
    justify-items: center
}

.hcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px
}

.hcard__icon {

    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e9a57;

    font-size: 68px;

}

.hcard__link {
    font-size: 20px;
    font-weight: 900;
    color: #1e9a57;
    text-decoration: none
}

.hcard__link:hover {
    opacity: .9
}

/* ===== Responsive ===== */
@media (max-width:900px) {
    .hcontact__title {
        font-size: 30px
    }
}

@media (max-width:640px) {
    .hcontact__grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .hcard__link {
        font-size: 18px
    }

    .hcontact {
        display: block;
        background: #fff;
        color: #0f1a18;
        height: 100%;
        padding: 98px 16px;
    }
}

.tcterms {
    background: #ffffff;
    color: #0f1a18;
    padding: 98px 16px;
}

.tcterms__container {
    max-width: 980px;
    margin: 0 auto;
    text-align: center
}

.tcterms__title {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 900;
}

/* ===== Blocks ===== */
.tcblock {
    margin: 16px auto 6px;
    max-width: 920px
}

.tcblock__heading {
    margin: 0 0 6px;
    font-weight: 900;
    font-size: 18px;
    text-transform: none;
    color: #0f1a18
}

.tcblock__heading i {
    color: #1e9a57;
    margin-right: 8px
}

.tcblock__body p {
    margin: 8px 0;
    line-height: 1.9;
    color: #233834;
    font-size: 16px
}

.tcterms__link {
    color: #188a4e;
    text-decoration: underline;
    text-underline-offset: 2px
}

/* ===== Responsive ===== */
@media (max-width:760px) {
    .tcterms__title {
        font-size: 30px
    }

    .tcblock__body p {
        font-size: 15.5px
    }
}

.cookienote {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(18, 24, 28, .92);
    color: #eaf2f6;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    transform: translateY(0);
    opacity: 1;
    transition: opacity .35s, transform .35s;
}

.cookienote--hide {
    opacity: 0;
    transform: translateY(16px)
}

.cookienote__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #29b36d 0%, #1a8e53 100%);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 22px rgba(41, 179, 109, .35);
}

.cookienote__content {
    flex: 1 1 auto
}

.cookienote__title {
    font-weight: 900;
    font-size: 18px;
    margin: 0 0 6px
}

.cookienote__text {
    margin: 0;
    color: #cfe0e7;
    line-height: 1.65
}

.cookienote__link {
    color: #8fe7bb;
    text-decoration: underline;
    text-underline-offset: 2px
}

.cookienote__actions {
    margin-top: 12px
}

.cookienote__btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 900;
    cursor: pointer;
    background: #29b36d;
    color: #081013;
    box-shadow: 0 10px 22px rgba(41, 179, 109, .35);
}

.cookienote__btn:hover {
    filter: brightness(1.05)
}

.cookienote__close {
    background: transparent;
    border: 0;
    color: #9fb2bb;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 4px 0 4px;
    flex: 0 0 auto;
}

.cookienote__close:hover {
    color: #fff
}

/* Compact on small screens */
@media (max-width:640px) {
    .cookienote {
        padding: 14px 14px;
        gap: 12px
    }

    .cookienote__icon {
        width: 40px;
        height: 40px;
        font-size: 18px
    }

    .cookienote__title {
        font-size: 16px
    }

    .cookienote__btn {
        padding: 9px 16px
    }
}

@media screen and (max-width:768px) {
    .match__circle {
        position: relative;
        border: 18px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
        background: #dfeaf6;
    }

    .match__circle--right {
        left: 0%;
        top: 0%;
    }

    .match__content {
        padding: 10px 15px 20px;
    }

    .cotm__photos {
        height: 340px;
        margin: 0 auto;
    }
}