/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
      .hero { padding: 100px 20px 40px !important; min-height: auto !important; }
      .hero__inner {
        display: flex; flex-direction: column;
        align-items: center; text-align: center;
        gap: 0;
      }
      .hero__left { display: contents; }
      .hero__title {
        font-size: 2.6rem;
        margin-bottom: 16px;
        align-self: center;
        order: 1;
      }
      .hero__media {
        order: 2;
        margin-bottom: 6px;
        animation: fadeInUp .8s ease-out .1s backwards;
      }
      .hero__media img {
        max-height: 55vh;
        filter: drop-shadow(0 20px 40px rgba(107, 66, 38, 0.25));
      }
      .hero__bottom {
        order: 3;
        align-items: center;
      }
      .hero__beta-text {
        order: 4;
        margin-top: 16px;
        font-size: 0.95rem;
      }
      .hero__subtitle { font-size: 1.05rem; margin: 12px auto 0 !important; }
      .hero__quote {
        border-left: none; padding-left: 0;
      }
      .hero__actions { justify-content: center; gap: 16px; margin-top: 24px; }
      .hero__actions--single { flex-direction: column; align-items: center; gap: 12px; }
      .hero__btn { font-size: 1rem; padding: 12px 22px; min-height: 50px; }
      .hero__btn-icon { font-size: 1.2rem; }
      .hero__beta { order: 4; margin-top: 24px; }
      /* nav mobile-first handled in nav.css */
      .luck__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "center center"
          "left right";
        gap: 16px;
      }
      .luck__center-wrap { max-width: 100%; }
      .luck__text h2 { font-size: 2.4rem; }
      .luck__text p { font-size: 1rem; }
      .luck__side { max-width: 220px; margin: 0 auto; }
      .how, .features, .modes, .algorithm { padding: 64px 20px; }
      .screen-card__text { font-size: 1.5rem; }
      .algorithm__caption { font-size: 1rem; max-width: 100%; }
      .luck__text--desktop { display: block; grid-area: center; }
      .luck__text--mobile { display: none; }
      .luck__center-wrap { display: none; }
      .final__title { font-size: 2.6rem; }
      .final__right { transform: none; }
      .how__grid { grid-template-columns: 1fr; }
      .how__right { display: none; }
      .how__left { padding-left: 0; }
      .final__text-img { transform: rotate(270deg) scale(1.3); max-height: 16vh; }
      .final__title--mobile { display: block; padding-top: 16px; font-size: 2rem; }
      .final__right .final__title { display: none; }
      .final { flex-direction: column; min-height: auto; padding: 0 20px; }
      .screen-card_final-grid { min-height: 47vh; justify-items: center; gap: 0; padding: 16px; }
      .final__left { justify-content: center; align-items: center; width: 100%; padding-left: 40px; }
      .final__right { justify-content: center; align-items: center; width: 100%; margin-right: -40px; }
      .final__img-left { transform: scale(1.3); max-height: 40vh; }
      .how { padding: 12px 20px; }
    }

@media (orientation: landscape) and (max-width: 900px) {
      .screen-card_final-grid { min-height: 94vh; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
      .final { flex-direction: row; margin-bottom: 40px; }
      .final__left { padding-left: 0; margin: 0; }
      .final__right { margin-right: 0; transform: translateX(-10%); }
      .final__img-left { transform: scale(1.3); max-height: 51vh; margin: 0; }
      .final__text-img { transform: none; max-height: 21vh; }
      .final__right .final__title { display: block; font-size: 1.5rem; }
      .final__title--mobile { display: none; }
    }

@media (max-width: 768px) {
      .final {
        min-height: auto;
        padding: 0 16px;
      }
      .final__inner {
        grid-template-columns: 1fr 1.2fr;
        gap: 16px;
        align-items: flex-end;
      }
      .final__boy img {
        max-height: 28vh;
      }
      .final__text {
        padding-bottom: 20px;
      }
    }

@media (max-width: 600px) {
      body { color: #111111; }
      .nav__links a,
      .nav__mobile a,
      .hero__subtitle,
      .hero__quote,
      .section__title,
      .section__text,
      .feature__title,
      .feature__text,
      .card__title,
      .card__text,
      .stat__number,
      .stat__label,
      .faq__question,
      .faq__answer,
      .footer__text,
      .footer__link {
        color: #111111;
      }
      .nav__inner { height: 72px; }
      .nav__logo img { height: 55px; }
      .nav__mobile { top: 72px; }
      .hero { padding: 90px 20px 40px; }
      .hero__title { font-size: 2.4rem; color: var(--brown); }
      .hero__media img { max-height: 46vh; }
      .hero__subtitle { font-size: 1.15rem; }
      .hero__quote { font-size: 1.05rem; }
      .section__title { font-size: 1.55rem; }
      .section__text { font-size: 1.05rem; }
      .hero__actions { gap: 12px; }
      .hero__btn { font-size: 0.95rem; padding: 10px 18px; min-height: 46px; }
      .hero__btn-icon { font-size: 1.1rem; }
      .hero__btn-text { white-space: normal; }
      .luck__inner {
        display: grid;
        grid-template-columns: 1fr 1.6fr 0.85fr;
        grid-template-rows: auto auto;
        grid-template-areas: none;
        gap: 12px;
        align-items: end;
      }
      .luck__text {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
        margin-bottom: 8px;
      }
      .luck__text--desktop { display: block; }
      .luck__text--mobile { display: none; }
      .luck__side--left {
        grid-column: 1;
        grid-row: 2;
        max-width: 140px;
        justify-self: end;
      }
      .luck__center-wrap {
        grid-column: 2;
        grid-row: 2;
        display: block;
        max-width: 100%;
      }
      .luck__side--right {
        grid-column: 3;
        grid-row: 2;
        max-width: 110px;
        justify-self: start;
      }
      .luck__side--top, .luck__side--bottom { max-width: none; }
      .luck__center {
        max-width: 220px;
        margin: 0 auto;
      }
      .luck__text h2 { font-size: 1.9rem; }
      .how, .features, .modes, .algorithm { padding: 48px 16px; }
      .screen-card__text { font-size: 1.35rem; }
      .algorithm__caption { font-size: .95rem; }
      .final__title { font-size: 2.4rem; padding-top: 16px; }
      .final__img-left { transform: scale(1.3); max-height: 40vh; }
      .final__text-img { transform: rotate(270deg) scale(1.3); max-height: 16vh; }
      .final__title--mobile { font-size: 1.7rem; }
    }

@media (max-width: 430px) {
      .hero__title { font-size: 2rem; }
      .hero__subtitle { font-size: 1.1rem; }
      .hero__quote { font-size: 1rem; }
      .section__title { font-size: 1.45rem; }
      .hero__media img { max-height: 41vh; }
      .hero__actions { gap: 12px; flex-direction: column; align-items: stretch; }
      .hero__btn { width: 100%; font-size: 0.95rem; padding: 12px 20px; }
      .hero__btn-icon { font-size: 1.2rem; }
      .luck__text h2 { font-size: 1.6rem; }
      .screen-card__text { font-size: 1.15rem; }
      .final__title { font-size: 2rem; padding-top: 12px; }
      .final__img-left { transform: scale(1.3); max-height: 40vh; }
      .final__text-img { transform: rotate(270deg) scale(1.3); max-height: 16vh; }
      .final__title--mobile { font-size: 1.5rem; }
    }