/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .ro-header {
        top: 16px;
        padding: 0 16px;
    }

    .ro-header-inner {
        width: 100%;
        min-height: 66px;
        padding: 8px 18px;
    }

    .ro-menu {
        gap: 18px;
    }

    .ro-menu > li > a {
        font-size: 14px;
    }

    .hero-container {
        width: min(100% - 48px, 920px);
        grid-template-columns: 1.15fr 0.85fr;
        column-gap: 36px;
        padding-bottom: 40px;
    }

    .hero-content h1 {
        font-size: 46px;
        letter-spacing: -0.05em;
    }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ro-header {
        top: 12px;
        padding: 0 12px;
    }

    .ro-header-inner {
        min-height: 60px;
        padding: 8px 14px;
        border-radius: 8px;
    }

    .ro-logo .custom-logo,
    .ro-logo .ro-logo-img {
        max-width: 140px;
        max-height: 40px;
    }

    .ro-main-nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        margin: 0;
        padding: 12px 0;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
        z-index: 999;
    }

    .ro-main-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ro-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ro-menu > li > a {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .hero-section {
        min-height: 100vh;
        height: auto;
        padding-top: 120px;
        background-position: 55% center;
    }

    .hero-container {
        width: calc(100% - 32px);
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding-bottom: 36px;
    }

    .hero-content h1 {
        max-width: 100%;
        font-size: 36px;
        line-height: 1.15;
        letter-spacing: -0.04em;
    }

    .hero-rating {
        font-size: 12.5px;
        padding: 6px 14px;
    }

    .hero-side-content {
        max-width: 100%;
    }

    .hero-side-content p {
        font-size: 14.5px;
        line-height: 1.6;
    }

    .btn-primary {
        width: 100%;
        justify-content: center;
        gap: 12px;
    }

    .btn-primary span {
        margin-left: 0;
    }

}