/* ==========================================================================
   Landing page — ХочуЭтоХочуТо
   Decoration is built from CSS + emoji only: no image assets to download.
   ========================================================================== */

.landing {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
}

.hero__inner {
    position: relative;
    z-index: 1;
}

.hero__title {
    font-size: clamp(2.2rem, 7.5vw, 4.3rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: 1.25rem;
}

.hero__title-accent {
    position: relative;
    display: inline-block;
}

/* Small hand-drawn heart next to the headline. */
.hero__heart {
    color: var(--brand-primary);
    font-size: .55em;
    vertical-align: super;
    margin-left: .15em;
}

.hero__lead {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    color: var(--brand-muted);
    max-width: 34ch;
    margin-bottom: 1.75rem;
}

.hero__note {
    color: var(--brand-muted);
    font-size: .9rem;
    margin-top: .85rem;
}

/* Pastel background blobs */
.hero__blob {
    position: absolute;
    border-radius: 50%;
    opacity: .5;
    z-index: 0;
    pointer-events: none;
}

.hero__blob--pink {
    width: 22rem; height: 22rem;
    background: var(--brand-pink);
    top: -4rem; right: 6rem;
}

.hero__blob--lavender {
    width: 17rem; height: 17rem;
    background: var(--brand-lavender);
    top: 8rem; right: -3rem;
}

.hero__blob--yellow {
    width: 13rem; height: 13rem;
    background: var(--brand-yellow);
    top: 16rem; right: 20rem;
    opacity: .38;
}

@media (max-width: 991.98px) {
    .hero__blob { opacity: .35; }
    .hero__blob--pink { width: 15rem; height: 15rem; right: -2rem; top: -3rem; }
    .hero__blob--lavender { width: 11rem; height: 11rem; right: -3rem; top: 10rem; }
    .hero__blob--yellow { display: none; }
}

/* --------------------------------------------------------------------------
   Demo wishlist card: the list as a guest sees it, with a working "Подарить"
   -------------------------------------------------------------------------- */
.demo-card {
    position: relative;
    z-index: 1;
    background: var(--brand-card);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-lg);
    padding: 1.25rem;
    max-width: 26rem;
    margin-inline: auto;
    transform: rotate(-1.2deg);
}

@media (max-width: 991.98px) {
    .demo-card { transform: none; }
}

.demo-card__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.demo-card__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--brand-pink);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.demo-card__owner {
    font-weight: 800;
    font-size: .98rem;
    line-height: 1.2;
}

.demo-card__date {
    font-size: .8rem;
    color: var(--brand-muted);
}

.demo-card__eyebrow {
    margin-left: auto;
    flex: 0 0 auto;
    background: var(--brand-mint);
    color: #1b7a59;
    font-size: .7rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 999px;
}

.demo-gift {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem;
    border-radius: var(--brand-radius-sm);
    background: #fcfbf9;
    margin-bottom: .55rem;
    transition: background-color .25s ease;
}

.demo-gift__thumb {
    width: 3rem; height: 3rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    flex: 0 0 auto;
}

.demo-gift__thumb--a { background: var(--brand-lavender); }
.demo-gift__thumb--b { background: var(--brand-pink); }
.demo-gift__thumb--c { background: var(--brand-yellow); }

.demo-gift__info { flex: 1; min-width: 0; }

.demo-gift__name {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
}

.demo-gift__price {
    font-size: .82rem;
    color: var(--brand-muted);
    font-weight: 700;
}

.demo-gift--taken .demo-gift__thumb,
.demo-gift--taken .demo-gift__info { opacity: .55; }

/* The gift this visitor just booked in the demo. */
.demo-gift--mine { background: #eefbf6; }

.demo-gift__btn {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: .4rem .9rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: var(--brand-primary-600);
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

button.demo-gift__btn { cursor: pointer; }
button.demo-gift__btn:hover { background: var(--brand-primary-700); }
button.demo-gift__btn:active { transform: scale(.96); }

.demo-gift__btn--taken,
button.demo-gift__btn--taken:hover {
    color: var(--brand-muted);
    background: #f1eee9;
}

button.demo-gift__btn--mine,
button.demo-gift__btn--mine:hover {
    color: #1b7a59;
    background: var(--brand-mint);
}

/* Hint under the list; becomes the explanation once a gift is booked. */
.demo-card__note {
    font-size: .85rem;
    color: var(--brand-primary-700);
    font-weight: 700;
    text-align: center;
    padding-top: .35rem;
}

.demo-card__note--done { color: var(--brand-text); font-weight: 600; }

/* Floating decorations around the demo card */
.demo-deco {
    position: absolute;
    font-size: 2rem;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.demo-deco--gift { font-size: 3.4rem; right: -1rem; bottom: -1.5rem; }

@media (max-width: 575.98px) {
    .demo-deco--gift { font-size: 2.4rem; right: -.25rem; bottom: -1rem; }
    .demo-card { padding: 1rem; }
    .demo-gift { padding: .55rem; gap: .6rem; }
    .demo-gift__btn { padding: .35rem .7rem; font-size: .75rem; }
}

@media (max-width: 379.98px) {
    .demo-card__eyebrow { display: none; }
}

/* --------------------------------------------------------------------------
   Icon badge: a line icon in a pastel circle — the one icon style here
   -------------------------------------------------------------------------- */
.ibadge {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
}

.ibadge svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ibadge--sm { width: 2.75rem; height: 2.75rem; }
.ibadge--sm svg { width: 1.3rem; height: 1.3rem; }

.ibadge--pink { background: var(--brand-pink); color: var(--brand-primary-600); }
.ibadge--lavender { background: var(--brand-lavender); color: #4a5bd6; }
.ibadge--mint { background: var(--brand-mint); color: #1f9a6f; }
.ibadge--yellow { background: #fff0c2; color: #c48f00; }

/* --------------------------------------------------------------------------
   "Всё просто": three numbered steps on a tinted band
   -------------------------------------------------------------------------- */
.how {
    background: #f3fbf8;
}

.how-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
}

.how-step {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--brand-card);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-sm);
    padding: 1.5rem;
}

/* Arrows between the cards (decorative). */
.how-step + .how-step::before {
    content: "→";
    position: absolute;
    left: calc(clamp(1rem, 3vw, 2rem) / -2);
    top: 2.1rem;
    transform: translateX(-50%);
    color: var(--brand-muted);
    opacity: .6;
}

.how-step__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand-primary-600);
    color: #fff;
    font-weight: 800;
    margin-bottom: .9rem;
}

.how-step__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 .3rem;
}

.how-step__text {
    color: var(--brand-muted);
    font-size: .95rem;
    margin: 0 0 1.25rem;
}

.how-step__art {
    margin-top: auto;
    background: #fcfbf9;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
    padding: .75rem;
}

/* Step 1: the "add a gift" field. */
.how-input {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.how-input__text {
    flex: 1;
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    padding: .45rem .7rem;
    font-size: .9rem;
    font-weight: 600;
}

/* Blinking caret, as if the name is being typed. */
.how-input__text::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: var(--brand-primary-600);
    animation: how-caret 1s steps(1) infinite;
}

@keyframes how-caret {
    50% { opacity: 0; }
}

.how-input__add {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--brand-primary-600);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Step 2: the share link. */
.how-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.how-link__url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 600;
}

.how-link__copy {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand-primary-700);
}

/* Step 3: a gift someone has already booked. */
.how-taken {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.how-taken .demo-gift__thumb {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.15rem;
}

.how-taken__name {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
}

/* Stacked: the number sits beside the title to keep the cards short. */
@media (max-width: 991.98px) {
    .how-steps { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
    .how-step {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: .85rem;
        padding: 1.25rem;
    }
    .how-step + .how-step::before { content: none; }
    .how-step__num { grid-row: span 2; margin: 0; }
    .how-step__text { margin-bottom: 1rem; }
    .how-step__art { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .how-input__text::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Features, occasions, FAQ
   -------------------------------------------------------------------------- */
.feature {
    height: 100%;
    background: var(--brand-card);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-sm);
    padding: 1.5rem;
}

.feature .ibadge { margin-bottom: .9rem; }

.feature__title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: .4rem;
}

.feature__text {
    color: var(--brand-muted);
    font-size: .93rem;
    margin: 0;
}

@media (max-width: 575.98px) {
    .feature { padding: 1.1rem; }
    .feature__title { font-size: .95rem; }
    .feature__text { font-size: .85rem; }
}

.occasions__title {
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    margin-bottom: .5rem;
}

.occasions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.occasion {
    background: var(--brand-card);
    border-radius: 999px;
    box-shadow: var(--brand-shadow-sm);
    padding: .55rem 1.1rem;
    font-weight: 700;
    font-size: .95rem;
}

.faq .accordion-item {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius) !important;
    margin-bottom: .75rem;
    overflow: hidden;
    background: var(--brand-card);
}

.faq .accordion-button {
    font-weight: 700;
    background: var(--brand-card);
    box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
    color: var(--brand-primary-700);
    background: #fff6f3;
}

.faq .accordion-body {
    color: var(--brand-muted);
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
    background: var(--brand-mint);
    border-radius: var(--brand-radius-lg);
    padding: clamp(1.75rem, 5vw, 3rem);
    position: relative;
    overflow: hidden;
}

.final-cta__title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    margin-bottom: .5rem;
}

.final-cta__gift {
    font-size: clamp(3.5rem, 9vw, 5.5rem);
    line-height: 1;
}

.final-cta__scribble {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    line-height: 1.15;
    transform: rotate(-7deg);
    color: var(--brand-text);
}

/* --------------------------------------------------------------------------
   Gift selection in MAX
   -------------------------------------------------------------------------- */
.max-promo__title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.max-promo__lead {
    color: var(--brand-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
    max-width: 44ch;
    margin: 0;
}

/* Messenger mark: a chat ring on a blue-violet tile. */
.max-logo {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 28%;
    background: linear-gradient(145deg, #3d8bff 0%, #6a4cff 100%);
    display: grid;
    place-items: center;
}

.max-logo::before {
    content: "";
    width: 46%;
    height: 46%;
    border: .32rem solid #fff;
    border-radius: 50% 50% 50% 12%;
}

.max-logo--sm { width: 1.6rem; height: 1.6rem; }
.max-logo--sm::before { border-width: .18rem; }

/* Phone illustration: a tiny wishlist opened inside MAX. */
.max-art {
    position: relative;
    height: 18rem;
    max-width: 24rem;
    margin-inline: auto;
}

.max-art__blob {
    position: absolute;
    inset: 22% 0 4% 0;
    border-radius: 50%;
    background: var(--brand-pink);
    opacity: .6;
}

.max-art__phone {
    position: absolute;
    left: 14%;
    top: 0;
    width: 12.5rem;
    height: 17.5rem;
    background: var(--brand-card);
    border: .5rem solid var(--brand-lavender);
    border-radius: 2rem;
    box-shadow: var(--brand-shadow-lg);
    padding: .9rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .72rem;
}

.max-art__bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    font-size: .78rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--brand-border);
}

.max-art__gifts {
    display: grid;
    gap: .4rem;
}

.max-art__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem;
    border-radius: .7rem;
    background: #faf8f5;
    border: 1.5px solid transparent;
}

.max-art__row--active { border-color: var(--brand-primary); background: #fff; }
.max-art__row--taken { opacity: .55; }

.max-art__thumb {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    font-size: .9rem;
}

.max-art__thumb--lavender { background: var(--brand-lavender); }
.max-art__thumb--yellow { background: var(--brand-yellow); }
.max-art__thumb--pink { background: var(--brand-pink); }

.max-art__name {
    font-weight: 700;
    line-height: 1.2;
}

.max-art__name small {
    display: block;
    font-weight: 500;
    font-size: .64rem;
    color: var(--brand-muted);
}

.max-art__btn {
    margin-top: auto;
    text-align: center;
    background: var(--brand-primary-600);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: .45rem;
}

.max-art__gift {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6.5rem;
    transform: rotate(6deg);
    filter: drop-shadow(0 12px 18px rgba(32, 32, 32, .12));
}
.max-art__confetti {
    position: absolute;
    width: .9rem;
    height: .3rem;
    border-radius: 999px;
}

.max-art__confetti--1 { background: var(--brand-primary); top: 22%; left: 6%; transform: rotate(-25deg); }
.max-art__confetti--2 { background: #ffc94d; top: 6%; left: 14%; transform: rotate(40deg); }
.max-art__confetti--3 { background: #3d8bff; top: 10%; right: 12%; transform: rotate(-50deg); }
.max-art__confetti--4 { background: var(--brand-primary); top: 30%; right: 4%; transform: rotate(15deg); }

@media (max-width: 575.98px) {
    .max-art__phone { left: 6%; }
    .max-art__gift { width: 5.5rem; }
}

.max-block {
    background: #f4f1ff;
    border-radius: var(--brand-radius-lg);
    padding: clamp(1.5rem, 5vw, 3rem);
}

.max-block .max-promo__lead { margin-bottom: 1.5rem; }

.max-block__note {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--brand-muted);
    font-size: .9rem;
    margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
   Invitations block
   -------------------------------------------------------------------------- */
.perks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: .9rem;
}

.perks__item {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--brand-muted);
}

.perks__item strong {
    display: block;
    color: var(--brand-text);
}

.invite-demo { position: relative; max-width: 420px; margin: 0 auto; }
.invite-demo .inv-card { transform: rotate(-2deg); }
.invite-demo .inv-card__art .inv-art { max-width: 280px; }

.invite-demo__answers { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.invite-demo__answers .btn { pointer-events: none; }

.invite-demo__gifts {
    text-align: center;
    font-weight: 700;
    margin: .9rem 0 0;
}

.invite-demo__summary {
    position: absolute;
    right: -.5rem;
    bottom: -1rem;
    background: var(--brand-card);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: var(--brand-shadow);
    transform: rotate(2deg);
}

@media (max-width: 575.98px) {
    .invite-demo__summary { right: 0; left: 0; margin: 0 auto; width: max-content; max-width: 100%; }
    /* On a phone the illustration should not take a whole screen. */
    .invite-demo .inv-card__art .inv-art { max-width: 170px; }
}

/* "Всё для праздника — в одной ссылке": invitation → answer → list → gift */
.party-flow {
    margin-top: clamp(3rem, 7vw, 4.5rem);
    background: #fff6f3;
    border-radius: var(--brand-radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
}

.party-flow__title {
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.party-flow__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    counter-reset: flow;
}

.party-flow__steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: .95rem;
}

/* Arrows between the steps (decorative). */
.party-flow__steps li + li::before {
    content: "→";
    position: absolute;
    left: -.6rem;
    top: .7rem;
    transform: translateX(-50%);
    color: var(--brand-muted);
    opacity: .6;
}

.party-flow__text {
    color: var(--brand-muted);
    max-width: 46ch;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .party-flow { text-align: left; }
    .party-flow__steps { grid-template-columns: 1fr; gap: .75rem; }
    .party-flow__steps li { flex-direction: row; gap: .85rem; }
    .party-flow__steps li + li::before { content: none; }
    .party-flow__text { margin: 0; }
}

/* FAQ: "Показать ещё вопросы" swaps its label once expanded. */
.faq-more__hide { display: none; }
.faq-more[aria-expanded="true"] .faq-more__show { display: none; }
.faq-more[aria-expanded="true"] .faq-more__hide { display: inline; }

.final-cta__note {
    color: var(--brand-muted);
    font-size: .88rem;
    margin-top: .75rem;
}