:root {
  --media-bg-dark: #0e1019;
  --media-bg-overlay: rgba(0,0,0,0.5);
  --media-header-line: #F8F9FC;
  --media-header-link: #fff;
  --media-header-link-border: rgba(255,255,255,0.1);
}
.theme-light {
    --media-header-line: #12263f;
    --media-bg-dark: #fff;
}

@media (max-width: 1024px) {
    .footer__main {
        flex-direction: column;
        gap: 2rem;
    }
    .footer__nav {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}
@media only screen and (max-width: 767px) {
    .header__logo {
        margin-right: 8rem;
    }
    .header__burger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 110;
    }
    .header__burger-line {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--media-header-line);
        transition: all 0.3s ease;
    }

    .header__burger--active .header__burger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .header__burger--active .header__burger-line:nth-child(2) {
        opacity: 0;
    }
    .header__burger--active .header__burger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--media-bg-dark);
        padding: 80px 20px 30px;
        transition: right 0.3s ease;
        z-index: 102;
        overflow-y: auto;
    }
    .header__nav--active {
        display: block;
        right: 0;
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    }
    .header__nav-link {
        display: block;
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--media-header-link-border);
    }
    .header__nav-item--dropdown {
        position: relative;
    }
    .header__dropdown-menu {
        display: none;
    }
    .header__dropdown-menu--mobile-active {
        display: block;
        width: 100%;
    }
    .header__dropdown-item {
        font-size: 0.9em;
    }

    /* Оверлей */
    .header__overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--media-bg-overlay);
        z-index: 90;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .header__overlay--active {
        opacity: 1;
        visibility: visible;
    }

    .main__container {
        padding: 2rem;
    }
    .header__container {
        max-width: inherit;
    }
    .header__nav-btn--start {
        display: none;
    }
    .header__nav-btn--signup {
        padding: .5rem 0 .5rem 1rem;
    }
    .hero {
        padding: 0 1rem;
        min-height: calc(90vh - 4rem);

    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-desc {
        width: auto;
    }
    .typography h1 {
        margin-bottom: 1.5rem;
    }
    .typography table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    }

    .footer__main {
        grid-template-columns: 1fr;
    }
    .footer__brand {
        flex: none;
    }
    .footer__nav {
        flex-direction: column;
        gap: 1.5rem;
    }
    .footer__nav-column {
        min-width: auto;
    }
    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .footer__legal {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .footer__nav {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 375px) {
    .hero-links {
        margin-top: 1rem;
    }
    .hero-links__google,
    .hero-links__apple {
        margin: 0;
    }
    .hero-links__apple svg {
        width: 140px;
    }
    .hero-links__google svg {
        width: 140px;
    }
}