:root {
    --cream: #fbf3e7;
    --surface: #fffdf9;
    --tan: #f6e3c7;
    --amber: #d98720;
    --amber-dark: #bf6d15;
    --amber-active: #a95e11;
    --ink: #3d2b1f;
    --clay: #745c50;
    --navy: #1f2a44;
    --navy-text: #f3efe6;
    --shadow: rgba(63, 40, 29, 0.10);

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 64px;
    --space-6: 96px;

    --radius: 20px;
    --max-width: 1080px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* <picture> itself has no intrinsic box - browsers size it to match the chosen <img>, but making that
   explicit avoids any ambiguity given how precisely .hero__visual's height is tuned elsewhere. */
picture {
    display: block;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--amber-dark);
    outline-offset: 3px;
    border-radius: 6px;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

.section-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-dark);
    margin: 0 0 var(--space-1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 0 26px;
    min-height: 58px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.btn--primary {
    /* Resting state now matches what used to be the :active/pressed shade - the lighter default read as
       "washed out" until you touched it. Same color in all three states now; hover/active still give
       tactile feedback through the lift (transform) and shadow alone. */
    background: var(--amber-active);
    /* Warm off-white instead of flat #fff - pure white on amber reads a bit cheap/plasticky; this and the
       thin inset top highlight below give it some tactile depth without going back to an actual gradient. */
    color: #fff8ef;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px rgba(190, 109, 21, 0.20);
}

.btn--primary:hover {
    background: var(--amber-active);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 30px rgba(190, 109, 21, 0.28);
    transform: translateY(-1px);
}

.btn--primary:active {
    background: var(--amber-active);
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(190, 109, 21, 0.22);
}

/* Door glyph on the primary CTA "opens" on hover - the whole page's throughline (the cat opening a door
   for you) reaches all the way down into the button itself instead of a generic arrow. */
.btn__door {
    overflow: visible;
    flex-shrink: 0;
}

.btn__door-leaf {
    transform-origin: 4px 10px;
    transition: transform 0.35s ease;
}

.btn:hover .btn__door-leaf {
    transform: perspective(40px) rotateY(-42deg);
}

@media (prefers-reduced-motion: reduce) {
    .btn__door-leaf { transition: none; }
}

.btn--ghost {
    background: transparent;
    color: var(--navy-text);
    border: 1.5px solid rgba(243, 239, 230, 0.4);
}

.btn--ghost:hover {
    border-color: rgba(243, 239, 230, 0.8);
}

/* --- Nav --------------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(251, 243, 231, 0.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(43, 33, 24, 0.06);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-3);
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 19px;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Neutral placeholder for the nav mark until a dedicated pre-cropped avatar file (assets/sunny-avatar.jpg)
   exists - the previous auto-crop from main_cat.jpg read as a fox at this size, so this deliberately shows
   no imagery at all rather than risk the same misread again. Swap the background for a real photo once the
   file is in place. */
.nav__logo-placeholder {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tan);
    /* contain (not cover) guarantees the whole face - ears included - stays inside the circle regardless
       of the source file's exact aspect ratio, instead of cropping whichever side overflows a tighter box.
       The padding insets the face from the circle's own edge - the ear tips sit close to the source image's
       corners, so without this gap the round crop itself still clips them even though object-fit doesn't. */
    object-fit: contain;
    padding: 3px;
}

@media (min-width: 640px) {
    .nav__logo-placeholder {
        width: 52px;
        height: 52px;
    }
}

/* Crops main_cat.jpg (the bot's real Telegram avatar - full square, cat centered, icon labels around the
   edges) down to just the face via a zoomed CSS background instead of a separate pre-cropped file. Reused
   for both the nav mark and the hero callout avatar so there's only one crop to tune. */
.avatar-crop {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url('/pictures/main_cat.jpg');
    background-size: 320% 320%;
    background-position: 49% 27%;
    background-repeat: no-repeat;
}

.nav__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nav__lang {
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: var(--clay);
    padding: 6px 10px;
    border-radius: 999px;
}

.nav__lang:hover {
    color: var(--ink);
}

.nav .btn {
    min-height: 44px;
    padding: 0 18px;
}

/* Language dropdown (RU landing) - built to hold more than two languages without turning into a row of
   flat links, so adding a third/fourth language later is just another .lang-switch__option, not a redesign.
   Plain <details>/<summary> - keyboard- and screen-reader-friendly with zero JS required to open/close;
   script.js only adds click-outside-to-close as a nicety. */
.lang-switch {
    position: relative;
}

.lang-switch__current {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--clay);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}

.lang-switch__current::-webkit-details-marker {
    display: none;
}

.lang-switch__current:hover {
    color: var(--ink);
}

.lang-switch__chevron {
    transition: transform 0.15s ease;
}

.lang-switch[open] .lang-switch__chevron {
    transform: rotate(180deg);
}

/* A globe, not a flag - a flag ties a language to a nationality, which is both inaccurate (plenty of
   non-Russian, non-British people speak these languages) and unnecessary here; the globe is the universal
   "change language" symbol every major site already uses. Given the same amber-dark used for "психолог" in
   the headline and the primary CTA (rather than inheriting the surrounding clay text color), plus a soft
   glow so it stands out a little - blue was tried first but read as a cold, out-of-palette accent on an
   otherwise entirely warm page. */
.lang-switch__globe {
    flex-shrink: 0;
    color: var(--amber-dark);
    filter: drop-shadow(0 0 3px rgba(191, 109, 21, 0.5));
}

.lang-switch__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid rgba(63, 40, 29, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 32px -16px var(--shadow);
    padding: 6px;
    z-index: 30;
}

.lang-switch__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

/* Deliberately a different, lighter shade than --active's fill below - on iOS, opening the <details> can
   leave the first item :focus-visible even when it isn't the selected language, and with both states using
   the same tan fill that read as "two languages selected at once". Keeping them visually distinct (a subtle
   neutral tint for hover/focus vs. the solid tan + checkmark for the real selection) removes the ambiguity
   regardless of which item happens to also be focused. */
.lang-switch__option:hover,
.lang-switch__option:focus-visible {
    background: rgba(61, 43, 31, 0.06);
}

.lang-switch__option--active {
    background: var(--tan);
    color: var(--ink);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-5) 0 var(--space-4);
}

.hero__glow {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 150, 60, 0.28), transparent 70%);
    animation: glow-pulse 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.12); opacity: 1; }
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-5);
}

.hero__title {
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-2);
}

.hero__title em {
    font-style: normal;
    color: var(--amber-dark);
}

.hero__subtitle {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--clay);
    max-width: 46ch;
    margin: 0 0 var(--space-3);
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.hero__note {
    font-size: 14px;
    color: var(--clay);
    margin: var(--space-2) 0 0;
}

.hero__visual {
    position: relative;
}

.hero__image {
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -20px var(--shadow);
    /* Purely decorative - never a link itself - but the negative margins that pull it closer to the header/
       button (see .landing rules below) make its box overlap the CTA above it. Even fully transparent
       pixels still capture clicks by default, so without this the button was visually visible but the tap
       was actually landing on the image sitting on top of it. */
    pointer-events: none;
}

/* Shared RU + EN landing design, scoped via body.landing so the legacy unscoped rules above (still used by
   nothing now, kept only in case an old page still links this stylesheet) stay untouched. The cat PNG sits
   straight on the hero's own warm light - no rectangle, no card background, no clipping - it just needs to
   be big and undistorted. */
.landing .hero {
    padding-top: 138px;
    padding-bottom: 0;
    background:
        radial-gradient(ellipse 55% 70% at 78% 44%, rgba(248, 205, 143, 0.36) 0%, rgba(255, 245, 232, 0) 70%),
        linear-gradient(135deg, #fff8f0 0%, #fbe7ca 100%);
}

/* Ties the CTA to the same accent color as "психолог" in the headline instead of the deeper shade used
   elsewhere - keeps the two visual anchors of the hero (the emphasized word and the button) consistent. */
.landing .btn--primary,
.landing .btn--primary:hover,
.landing .btn--primary:active {
    background: var(--amber-dark);
}

.landing .hero__inner {
    /* Was 0.85fr/1.15fr - too narrow for "личный психолог" to fit the title's second line at the desktop
       font-size, so it wrapped into a third line. Widening the text column fixes that. */
    grid-template-columns: 0.95fr 1.05fr;
    /* The cat image is tall enough to set the row height on its own now - centering the much shorter text
       column against it (the shared .hero__inner default) opened a large gap above the heading and below
       the button. Top-aligning both columns removes that phantom space. */
    align-items: start;
    gap: var(--space-2);
}

/* Both the title and the visual are pushed down/pulled up from the same grid row-start, so their sum with
   .landing .hero's padding-top has to stay in balance: enough padding-top that .hero__visual's own
   -130px pull (below) doesn't push it above .hero's own box - which has overflow: hidden and would clip
   the callout bubble sitting near the visual's top edge - while this negative margin-top cancels that added
   padding back out so the title itself doesn't visually move. */
.landing .hero__text {
    margin-top: 0;
}

@media (max-width: 860px) {
    /* display: contents dissolves this wrapper's own box so its children (title, actions) become direct
       items of the .hero__inner grid below, alongside .hero__visual - that's what makes per-child `order`
       possible: title -> cat -> button, instead of the button being stuck next to the title. */
    .landing .hero__text {
        display: contents;
    }

    .landing .hero__title {
        order: 1;
        margin-top: 0;
        margin-bottom: var(--space-2);
    }

    .landing .hero__visual {
        order: 2;
    }

    .landing .hero__actions {
        order: 3;
        margin-top: 4px;
        justify-content: center;
    }

    /* The shared .hero__callout gets forced to position: static below 860px (see the unscoped rule further
       down) so EN's mockup bubble can drop into normal flow on mobile - but that same rule was hijacking the
       RU bubble too, dropping it out of its absolute position and under the cat instead of by its head. */
    .landing .hero__callout--landing {
        position: absolute;
        top: 10%;
        margin-top: 0;
        transform: none;
    }

    /* Without this the button sits flush against the next (lighter) section - a sliver of the hero's own
       warm background as breathing room reads as intentional spacing instead of an abrupt cutoff. */
    .landing .hero {
        padding-top: var(--space-2);
        padding-bottom: var(--space-3);
    }
}

.landing .hero__title {
    font-size: 37px;
    line-height: 1.15;
    margin-bottom: var(--space-4);
}

@media (min-width: 700px) {
    .landing .hero__title {
        /* Was 52px - together with the widened text column above, this keeps "личный психолог" on a
           single line instead of the word wrapping onto its own third line. */
        font-size: 48px;
        line-height: 1.1;
    }
}

/* "psicólogo personal" is longer than the RU/EN second lines this size was tuned against - a bit of
   preemptive headroom here instead of waiting to rediscover the same three-line wrap bug we already fixed
   twice for the other two languages. */
.lang-es .hero__title {
    font-size: 33px;
}

@media (min-width: 700px) {
    .lang-es .hero__title {
        font-size: 43px;
    }
}

/* Pulling the cat up used to be a negative margin-top directly on .hero__image - but that also throws off
   .hero__visual's own auto-computed height (its only child now claims less flow space than it visually
   occupies), which broke absolute-positioning children like .hero__callout relative to it. Moving the pull
   to .hero__visual itself (below) keeps .hero__image's own box - and therefore .hero__visual's height -
   an honest match for what's actually on screen. */
.landing .hero__image {
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.landing .hero__visual {
    margin-top: -130px;
    margin-left: -100px;
}

@media (max-width: 860px) {
    .landing .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .landing .hero__image {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .landing .hero__visual {
        margin-top: -68px;
        margin-left: 0;
    }
}

/* A single speech-bubble callout near the cat's head, standing in for "this is a chat product" - three
   stacked bubbles used to climb up the image and bury the cat by the time the last one landed. One bubble,
   positioned clear of the cat's body and the door, keeps the illustration the uncontested focal point. */
.hero__callout {
    position: absolute;
    top: 20px;
    left: 20px;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--ink);
    padding: 12px 16px;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 14px 28px -14px var(--shadow);
    opacity: 0;
    transform: translateY(-8px);
}

.hero__visual--visible .hero__callout {
    animation: callout-in 0.6s ease 0.5s forwards;
}

@keyframes callout-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__glow { animation: none; }
    /* Still waits for .hero__visual--visible (added by script.js after the reveal delay) before showing -
       "reduce motion" means no slide/fade transition, not "skip the delay and show immediately". */
    .hero__callout { transform: none; animation: none; }
    .hero__visual--visible .hero__callout { opacity: 1; }
}

/* No avatar chip inside the bubble (the actual cat is right there, a second tiny face would be redundant) -
   sits in the top-left corner, just left of the cat's face, with the tail corner (bottom-right) pointing
   down toward it. Shared by both languages - only the text inside differs. */
.hero__callout--landing {
    /* Percentage, not a fixed px value - now that .hero__visual's height honestly matches the image (see
       the .landing .hero__image / .hero__visual comment above), this lands just above the ears at any
       breakpoint instead of needing a different magic number pinned per screen size. */
    top: 4%;
    left: -6%;
    right: auto;
    /* Wide enough for the longer EN second line ("How are you today?") to fit on one nowrap line without
       overflowing past the box edge into the cat's ear - the shorter RU text just leaves a bit of empty
       space, which is harmless. */
    max-width: 195px;
    padding: 10px 14px;
    font-size: 13px;
    text-align: left;
    /* Only the manual <br> between the two lines should break the text - without this, the second line
       wraps into a third line once the bubble is this narrow. */
    white-space: nowrap;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 4px;
}

/* Desktop-only: the mobile bubble size (tuned above) reads as too small once the hero image itself is
   this much bigger - scaled up here, mobile untouched. */
@media (min-width: 861px) {
    .hero__callout--landing {
        max-width: 280px;
        padding: 20px 24px;
        font-size: 19px;
        border-bottom-left-radius: 24px;
    }

    .landing .hero__actions .btn {
        padding: 0 42px;
        min-height: 70px;
        font-size: 19px;
    }
}

/* --- Modes ---------------------------------------------------------------- */

.modes {
    padding: var(--space-4) 0 var(--space-5);
}

.modes__head {
    max-width: 640px;
    margin: 0 0 var(--space-4);
}

.modes__title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

.modes__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.mode-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--space-3);
    box-shadow: 0 16px 32px -20px var(--shadow);
}

.mode-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--tan);
    color: var(--amber-dark);
    margin-bottom: var(--space-2);
}

.mode-card__title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
}

.mode-card__desc {
    font-size: 14px;
    color: var(--clay);
    margin: 0;
    line-height: 1.45;
}

/* --- Memory ---------------------------------------------------------------- */

.memory {
    padding: 0 0 var(--space-5);
}

.memory__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: var(--space-5);
    background: var(--tan);
    border-radius: 28px;
    padding: var(--space-4);
}

.memory__image {
    border-radius: var(--radius);
}

.memory__title {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.01em;
}

.memory__text {
    font-size: 16px;
    color: var(--ink);
    max-width: 48ch;
    margin: 0;
}

/* --- Trust (navy contrast) --------------------------------------------- */

.trust {
    background: var(--navy);
    color: var(--navy-text);
    padding: var(--space-5) 0;
}

.trust .section-eyebrow {
    color: #f0b96a;
}

.trust__title {
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 800;
    max-width: 20ch;
    margin: 0 0 var(--space-3);
    letter-spacing: -0.01em;
}

.trust__points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.trust__point {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(243, 239, 230, 0.88);
    margin: 0;
    padding-left: var(--space-2);
    border-left: 2px solid rgba(240, 185, 106, 0.6);
}

/* --- Final CTA ------------------------------------------------------------ */

.final-cta {
    padding: var(--space-5) 0;
    text-align: center;
}

.final-cta__title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
}

/* --- Scenarios ("С чем можно прийти к Санни?" / "What can you bring to Sunny?") ------------------ */

.scenarios {
    padding: var(--space-3) 0 var(--space-5);
}

.scenarios__head {
    max-width: 640px;
    margin: 0 0 var(--space-2);
}

.scenarios__title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}

.scenarios__title-accent {
    color: var(--amber-dark);
}

.scenarios__subtitle {
    font-size: 16px;
    color: var(--clay);
    margin: 0;
}

.scenarios__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.scenario-card {
    position: relative;
    display: block;
    background: rgba(255, 253, 249, 0.78);
    border: 1px solid rgba(177, 120, 51, 0.13);
    border-radius: 22px;
    padding: 22px;
    padding-right: 56px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 22px rgba(102, 65, 35, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.scenario-card:hover,
.scenario-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -18px var(--shadow);
    border-color: rgba(233, 154, 53, 0.45);
}

.scenario-card__title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}

.scenario-card__desc {
    font-size: 14.5px;
    color: var(--clay);
    line-height: 1.5;
    margin: 0;
}

/* Small round "act on this" affordance, bottom-right of every card - always visible on mobile (cards are a
   primary touch target there), turns amber on hover/focus on desktop as the interaction cue. */
.scenario-card__arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tan);
    color: var(--amber-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.scenario-card:hover .scenario-card__arrow,
.scenario-card:focus-visible .scenario-card__arrow {
    background: var(--amber);
    color: #ffffff;
}

.scenarios__cta {
    text-align: center;
    margin-top: var(--space-4);
}

/* --- How it works ------------------------------------------------------------ */

.how {
    padding: var(--space-4) 0;
}

.how__title {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 var(--space-4);
}

.how__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.how__step {
    text-align: center;
}

.how__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tan);
    color: var(--amber-dark);
    font-weight: 800;
    font-size: 15px;
    margin: 0 0 10px;
}

.how__step p {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}

/* --- Disclaimer ("Важно") ---------------------------------------------------- */

.disclaimer {
    padding: var(--space-4) 0 var(--space-5);
}

.disclaimer__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: var(--tan);
    border-radius: 22px;
    padding: var(--space-4) var(--space-3);
}

.disclaimer__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-dark);
    margin: 0 0 10px;
}

.disclaimer__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 14px;
}

.disclaimer__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--amber-dark);
    text-decoration: underline;
}

/* --- Footer ---------------------------------------------------------------- */

.footer {
    border-top: 1px solid rgba(43, 33, 24, 0.08);
    padding: var(--space-3) 0 var(--space-4);
}

.footer__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--clay);
}

.footer__links {
    display: flex;
    gap: var(--space-3);
    flex-wrap: nowrap;
}

.footer__links a {
    text-decoration: none;
    color: var(--clay);
}

.footer__links a:hover {
    color: var(--ink);
}

/* --- Responsive ------------------------------------------------------------ */

@media (min-width: 700px) {
    .scenarios__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .how__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

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

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

    .hero__callout {
        position: static;
        margin-top: var(--space-2);
        transform: none;
    }
}

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

    .nav__lang {
        padding: 6px 8px;
    }

    /* Nav CTA is dropped entirely on narrow phones (kept for the hero and after-scenarios CTAs, which do
       the actual converting) - that leaves just logo (left) and language flag+chevron (right), so both get
       room to breathe instead of fighting the button for space. */
    .landing .nav .btn {
        display: none;
    }

    .landing .nav__logo-placeholder {
        width: 38px !important;
        height: 38px !important;
        /* Padding insets the face from the circle's edge - without it the ear tips, which sit close to the
           square source image's own corners, get clipped by the round crop itself even though object-fit
           isn't cropping anything. */
        padding: 3px;
    }

    .landing .nav__logo {
        font-size: 16px;
        gap: 8px;
    }

    /* Visually hidden, not display:none - still announced by screen readers even though only the globe
       shows at this width. */
    .landing .lang-switch__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* With the label gone, the chevron alongside a lone globe icon is two indicators for one control - the
       globe by itself already reads as "tap to change language" at this width. Kept on desktop, where the
       language name is still visible next to it and the chevron makes more sense there. */
    .landing .lang-switch__chevron {
        display: none;
    }

    .landing .hero__actions .btn,
    .landing .scenarios__cta .btn {
        padding: 0 36px;
        min-height: 66px;
        font-size: 18px;
    }

    /* "© Sunny Mind 2026 · Условия использования · Поддержка" needs to fit one line on the narrowest
       phones too - tighter gaps and a smaller size buy back just enough width. */
    .landing .footer__inner {
        gap: var(--space-1);
        font-size: 11.5px;
    }

    .landing .footer__links {
        gap: var(--space-2);
    }
}