/* Mobile first adjustments */
@media (max-width: 768px) {
    .header {
        padding: 12px 14px;
    }

    .logo-text {
        font-size: 14px;
    }

    .lang-nav {
        gap: 4px;
        padding: 3px;
    }

    .lang-link {
        padding: 3px 8px;
        font-size: 11px;
    }

    .timer-container {
        padding: 6px 12px 24px;
    }

    .timer-box {
        padding: 20px 18px 22px;
        border-radius: 22px;
        max-width: 440px;
        margin: 0 auto;
    }

    .timer-digits {
        font-size: 72px;
        letter-spacing: 0.06em;
    }

    .quick-buttons {
        gap: 8px;
        margin-bottom: 18px;
    }

    .quick-btn {
        min-width: 52px;
        padding: 7px 8px;
        font-size: 12px;
    }

    .main-btn {
        font-size: 20px;
        padding: 14px 18px;
        letter-spacing: 0.14em;
    }

    .info-section {
        padding: 28px 14px 36px;
    }

    .info-section h1 {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .info-block h2 {
        font-size: 18px;
    }

    .info-block p,
    .features-list,
    .steps-list {
        font-size: 14px;
    }
}

/* Very small devices (older iPhones, small Android) */
@media (max-width: 380px) {
    .header {
        padding: 10px 10px;
    }

    .logo-text {
        display: none; /* оставляем только иконку, чтобы сэкономить место */
    }

    .timer-box {
        padding: 18px 14px 20px;
        border-radius: 20px;
    }

    .timer-digits {
        font-size: 60px;
    }

    .quick-buttons {
        gap: 6px;
    }

    .quick-btn {
        min-width: 46px;
        padding: 6px 6px;
        font-size: 11px;
    }

    .main-btn {
        font-size: 18px;
        padding: 12px 14px;
    }
}

/* Landscape phones: уменьшаем высоту таймера, чтобы он влез на экран */
@media (max-height: 600px) and (orientation: landscape) {
    .timer-container {
        align-items: flex-start;
        padding-top: 8px;
    }

    .timer-box {
        padding: 16px 16px 18px;
    }

    .timer-digits {
        font-size: 54px;
    }

    .info-section {
        padding-top: 18px;
    }
}

/* Large screens */
@media (min-width: 1024px) {
    .timer-container {
        padding: 20px 16px 40px;
    }

    .timer-box {
        max-width: 540px;
    }

    .timer-digits {
        font-size: 104px;
    }

    .info-section {
        padding: 50px 16px 56px;
    }

    .info-section h1 {
        font-size: 30px;
    }
}