/* Базовая палитра вдохновлена деревом,
   светлыми стенами и графитовыми деталями на рендерах. */

:root {
    --bg: #ece9e3;
    --surface: #f7f5f1;
    --surface-strong: #ffffff;

    --text: #292725;
    --muted: #6e6963;

    --wood: #7a4e32;
    --wood-dark: #5f3a25;

    --graphite: #2d2d2d;

    --border: rgba(45, 45, 45, 0.12);

    --error: #a43f32;
    --error-soft: rgba(164, 63, 50, 0.08);

    --success: #486243;
    --success-soft: rgba(72, 98, 67, 0.09);

    --shadow:
        0 20px 60px rgba(45, 39, 34, 0.10);

    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --page-width: 1180px;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-width: 320px;

    color: var(--text);

    background:
        radial-gradient(
            circle at top left,
            rgba(122, 78, 50, 0.08),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #f4f1ec 0%,
            var(--bg) 100%
        );

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.55;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
}


img {

    display: block;

    max-width: 100%;
}


button,
input,
textarea {

    font: inherit;
}


button {

    -webkit-tap-highlight-color: transparent;
}


.page {

    width: min(
        calc(100% - 32px),
        var(--page-width)
    );

    margin: 0 auto;

    padding: 72px 0 88px;
}


/* HERO */

.hero {

    max-width: 900px;

    margin: 0 auto 56px;

    text-align: center;
}


.eyebrow {

    margin: 0 0 12px;

    color: var(--wood);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


h1,
h2,
h3,
p {

    overflow-wrap: break-word;
}


h1 {

    margin: 0;

    color: var(--graphite);

    font-size:
        clamp(
            2.8rem,
            7vw,
            5.8rem
        );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.intro {

    max-width: 820px;

    margin: 28px auto 0;

    color: var(--muted);

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.2rem
        );
}


/* COMPARISON */

.comparison {

    margin-top: 48px;
}


.variant-headings,
.image-grid,
.choice-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 28px;
}


.variant-headings {

    margin-bottom: 20px;
}


.variant-headings h3 {

    margin: 0;

    color: var(--graphite);

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            1.8rem
        );

    text-align: center;

    letter-spacing: -0.02em;
}


.section-label {

    display: flex;

    align-items: center;

    gap: 18px;

    margin: 30px 0 18px;

    color: var(--wood);

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.section-label::before,
.section-label::after {

    content: "";

    height: 1px;

    flex: 1;
}


.section-label::before {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(122, 78, 50, 0.35)
        );
}


.section-label::after {

    background:
        linear-gradient(
            90deg,
            rgba(122, 78, 50, 0.35),
            transparent
        );
}


/* IMAGES */

.image-card {

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface-strong);

    box-shadow:
        var(--shadow);
}


.image-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.image-grid:not(
    .image-grid--plans
) .image-card {

    aspect-ratio: 1.39 / 1;
}


.image-grid--plans {

    align-items: start;
}


.image-card--plan {

    width:
        min(
            100%,
            420px
        );

    justify-self: center;

    aspect-ratio:
        0.58 / 1;
}


.image-card--plan img {

    object-fit: contain;

    background: #dedede;
}


/* PLANNER LINKS */

.planner-section {

    margin-top: 34px;

    padding: 28px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            247,
            245,
            241,
            0.78
        );
}


.planner-title {

    max-width: 760px;

    margin:
        0 auto 20px;

    color:
        var(--graphite);

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.12rem
        );

    font-weight: 750;

    text-align: center;
}


.planner-links {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.planner-link {

    display: flex;

    min-height: 58px;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        14px 18px;

    border:
        1px solid
        rgba(
            95,
            58,
            37,
            0.28
        );

    border-radius:
        var(--radius-md);

    color:
        var(--wood-dark);

    background:
        var(--surface-strong);

    font-weight: 800;

    text-align: center;

    text-decoration: none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
}


.planner-link:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--wood);

    color: #ffffff;

    background:
        var(--wood);

    box-shadow:
        0 12px 28px
        rgba(
            95,
            58,
            37,
            0.16
        );
}


.planner-link:focus-visible {

    outline:
        3px solid
        rgba(
            122,
            78,
            50,
            0.22
        );

    outline-offset: 3px;
}


.planner-link__arrow {

    font-size: 1.08em;
}


/* VOTE */

.vote {

    margin-top: 72px;
}


.vote-card {

    max-width: 840px;

    margin: 0 auto;

    padding:
        clamp(
            28px,
            5vw,
            52px
        );

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            247,
            245,
            241,
            0.92
        );

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(10px);
}


.vote-intro {

    margin-bottom: 30px;

    text-align: center;
}


.vote-intro h2 {

    margin: 0;

    color:
        var(--graphite);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height: 1.05;

    letter-spacing:
        -0.04em;
}


.vote-form {

    display: grid;

    gap: 26px;
}


/* CHOICE */

.choice-group {

    min-width: 0;

    margin: 0;

    padding: 0;

    border: 0;
}


.choice-grid {

    gap: 16px;
}


.choice-option {

    position: relative;

    cursor: pointer;
}


.choice-option input {

    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.choice-option span {

    display: flex;

    min-height: 66px;

    align-items: center;

    justify-content: center;

    padding:
        14px 20px;

    border:
        1px solid
        rgba(
            95,
            58,
            37,
            0.28
        );

    border-radius:
        var(--radius-md);

    color:
        var(--wood-dark);

    background:
        var(--surface-strong);

    font-weight: 800;

    text-align: center;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}


.choice-option:hover span {

    transform:
        translateY(-2px);

    border-color:
        rgba(
            95,
            58,
            37,
            0.5
        );

    box-shadow:
        0 12px 28px
        rgba(
            95,
            58,
            37,
            0.10
        );
}


.choice-option input:focus-visible + span {

    outline:
        3px solid
        rgba(
            122,
            78,
            50,
            0.22
        );

    outline-offset: 3px;
}


.choice-option input:checked + span {

    border-color:
        var(--wood);

    color: #ffffff;

    background:
        var(--wood);

    box-shadow:
        0 14px 34px
        rgba(
            95,
            58,
            37,
            0.22
        );
}


/* FIELDS */

.field {

    display: grid;

    gap: 10px;
}


.field label {

    color:
        var(--graphite);

    font-weight: 750;
}


.field input,
.field textarea {

    width: 100%;

    border:
        1px solid
        rgba(
            45,
            45,
            45,
            0.16
        );

    border-radius:
        var(--radius-sm);

    outline: none;

    color:
        var(--text);

    background:
        var(--surface-strong);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}


.field input {

    min-height: 54px;

    padding:
        0 16px;
}


.field textarea {

    min-height: 170px;

    padding:
        14px 16px;

    resize: vertical;
}


.field input::placeholder,
.field textarea::placeholder {

    color:
        #9d9892;
}


.field input:hover,
.field textarea:hover {

    border-color:
        rgba(
            95,
            58,
            37,
            0.32
        );
}


.field input:focus,
.field textarea:focus {

    border-color:
        var(--wood);

    box-shadow:
        0 0 0 4px
        rgba(
            122,
            78,
            50,
            0.10
        );

    background: #ffffff;
}


/* VALIDATION */

.field-error {

    display: none;

    margin: 0;

    color:
        var(--error);

    font-size: 0.9rem;

    font-weight: 650;

    line-height: 1.4;
}


.field-error.is-visible {

    display: block;
}


.has-error input,
.has-error textarea {

    border-color:
        var(--error);

    background:
        var(--error-soft);
}


.has-error input:focus,
.has-error textarea:focus {

    border-color:
        var(--error);

    box-shadow:
        0 0 0 4px
        rgba(
            164,
            63,
            50,
            0.10
        );
}


.choice-group.has-error
.choice-option span {

    border-color:
        rgba(
            164,
            63,
            50,
            0.55
        );
}


.choice-group
.field-error {

    margin-top: 10px;

    text-align: center;
}


/* GENERAL FORM ERROR */

.form-error {

    display: none;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(
            164,
            63,
            50,
            0.25
        );

    border-radius:
        var(--radius-sm);

    color:
        var(--error);

    background:
        var(--error-soft);

    font-size: 0.94rem;

    font-weight: 650;

    text-align: center;
}


.form-error.is-visible {

    display: block;
}


/* SUBMIT */

.submit-button {

    width: 100%;

    min-height: 62px;

    margin-top: 4px;

    border: 0;

    border-radius:
        var(--radius-md);

    color: #ffffff;

    background:
        var(--graphite);

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 15px 34px
        rgba(
            45,
            45,
            45,
            0.18
        );

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}


.submit-button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    background:
        #1f1f1f;

    box-shadow:
        0 18px 40px
        rgba(
            45,
            45,
            45,
            0.24
        );
}


.submit-button:active:not(:disabled) {

    transform:
        translateY(0);
}


.submit-button:focus-visible {

    outline:
        3px solid
        rgba(
            122,
            78,
            50,
            0.28
        );

    outline-offset: 3px;
}


.submit-button:disabled {

    cursor: wait;

    opacity: 0.68;
}


/* SUCCESS */

.success-message {

    padding:
        30px 10px;

    text-align: center;
}


.success-message[hidden] {

    display: none;
}


.success-message__icon {

    display: flex;

    width: 68px;

    height: 68px;

    margin:
        0 auto 20px;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--success);

    font-size: 2rem;

    font-weight: 900;

    box-shadow:
        0 12px 28px
        rgba(
            72,
            98,
            67,
            0.20
        );
}


.success-message h2 {

    margin:
        0 0 10px;

    color:
        var(--graphite);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    letter-spacing:
        -0.04em;
}


.success-message p {

    margin: 0;

    color:
        var(--muted);

    font-size: 1.08rem;
}


/* ACCESSIBILITY */

.visually-hidden {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* TABLET / MOBILE */

@media (
    max-width: 760px
) {

    .page {

        width:
            min(
                calc(
                    100% - 22px
                ),
                var(--page-width)
            );

        padding:
            42px 0 54px;
    }


    .hero {

        margin-bottom: 38px;
    }


    .intro {

        margin-top: 22px;

        text-align: left;
    }


    .variant-headings {

        display: none;
    }


    .image-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .image-card {

        position: relative;
    }


    .image-grid:not(
        .image-grid--plans
    ) .image-card {

        aspect-ratio: auto;
    }


    .image-grid:not(
        .image-grid--plans
    ) .image-card img {

        height: auto;

        object-fit: contain;
    }


    .image-grid
    .image-card:first-child::before,
    .image-grid
    .image-card:nth-child(2)::before {

        position: absolute;

        z-index: 2;

        top: 12px;

        left: 12px;

        padding:
            7px 10px;

        border-radius:
            999px;

        color: #ffffff;

        background:
            rgba(
                45,
                45,
                45,
                0.82
            );

        font-size:
            0.75rem;

        font-weight: 800;

        backdrop-filter:
            blur(8px);
    }


    .image-grid
    .image-card:first-child::before {

        content:
            "Левый вариант";
    }


    .image-grid
    .image-card:nth-child(2)::before {

        content:
            "Правый вариант";
    }


    .image-card--plan {

        width:
            min(
                100%,
                390px
            );
    }


    .planner-section {

        padding:
            22px 16px;
    }


    .planner-links {

        grid-template-columns:
            1fr;
    }


    .vote {

        margin-top: 50px;
    }


    .choice-grid {

        grid-template-columns:
            1fr;
    }

}


/* SMALL MOBILE */

@media (
    max-width: 430px
) {

    .page {

        width:
            min(
                calc(
                    100% - 16px
                ),
                var(--page-width)
            );
    }


    .vote-card {

        padding:
            24px 18px;

        border-radius:
            22px;
    }


    .image-card {

        border-radius:
            20px;
    }


    .section-label {

        gap: 12px;

        margin-top: 26px;

        font-size: 0.72rem;
    }

}


/* REDUCED MOTION */

@media (
    prefers-reduced-motion: reduce
) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}