/* Mobile-only landing composition. Desktop landing and all other pages are untouched. */
.nav-language-short { display: none; }

@media (max-width: 600px) {
    .landing-body {
        min-height: 100vh;
        background: #ecfbfc;
    }

    .landing-nav {
        position: absolute !important;
        inset: 0 0 auto;
        width: 100%;
        padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left)) !important;
        background: linear-gradient(110deg, #067d9f 0%, #079bb1 54%, #06aebe 100%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .24) !important;
        box-shadow: 0 5px 18px rgba(0, 62, 79, .14);
        backdrop-filter: blur(14px);
    }

    .nav-container {
        width: 100%;
        min-height: 48px;
        gap: 8px;
    }

    .nav-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nav-logo .nav-logo-img {
        display: block;
        width: clamp(106px, 31vw, 130px) !important;
        height: auto !important;
        max-height: 40px;
    }

    .nav-links {
        flex: 0 0 auto;
        gap: 7px;
    }

    .nav-about-btn,
    .nav-dropdown-btn {
        display: inline-flex !important;
        min-width: 44px;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 11px !important;
        border: 1px solid rgba(255, 255, 255, .38) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .11) !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1;
        white-space: nowrap;
        transform: none !important;
    }

    .nav-about-btn:focus-visible,
    .nav-dropdown-btn:focus-visible,
    .nav-dropdown-content a:focus-visible {
        outline: 3px solid #fff !important;
        outline-offset: 2px;
    }

    .nav-language-full { display: none; }
    .nav-language-short { display: inline; }

    .nav-dropdown-content {
        top: calc(100% + 8px);
        min-width: 130px;
        border: 1px solid rgba(255, 255, 255, .3) !important;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(0, 43, 57, .24);
    }

    .nav-dropdown-content a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 15px;
    }

    .hero {
        min-height: 100vh !important;
        min-height: 100svh !important;
        padding: calc(76px + env(safe-area-inset-top)) 17px max(25px, env(safe-area-inset-bottom)) !important;
        background:
            radial-gradient(ellipse at 50% 46%, rgba(47, 206, 210, .36) 0%, rgba(47, 206, 210, 0) 52%),
            linear-gradient(155deg, #00666a 0%, #008c93 34%, #08adb5 72%, #a5e9eb 100%) !important;
    }

    .hero-overlay {
        opacity: .72;
        background-size: 145px 145px;
    }

    .hero-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "main" "bottom";
        justify-items: center;
        align-content: center;
        gap: clamp(11px, 2.1vh, 18px) !important;
        width: min(100%, 440px) !important;
        max-width: 440px !important;
        padding: 0 !important;
    }

    .hero-left,
    .hero-right {
        display: flex !important;
        flex: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(12px, 4vw, 18px) !important;
        width: 100%;
        max-width: none !important;
    }

    .hero-left { grid-area: top; }
    .hero-center { grid-area: main; }
    .hero-right { grid-area: bottom; }

    .hero-left .surround-img,
    .hero-right .surround-img {
        display: block;
        flex: 0 1 auto;
        width: clamp(78px, 21vw, 98px) !important;
        max-width: 43%;
        height: auto !important;
        margin: 0 !important;
        border: 1px solid rgba(255, 255, 255, .52) !important;
        border-radius: 19px !important;
        background: rgba(255, 255, 255, .13);
        box-shadow: 0 9px 24px rgba(0, 54, 63, .16) !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-center {
        display: flex !important;
        flex: none !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 440px;
        min-width: 0 !important;
        padding: 0 3px;
        text-align: center !important;
    }

    .hero-main-logo {
        width: min(76vw, 300px) !important;
        height: auto !important;
        max-height: 160px;
        margin: 0 0 5px !important;
        object-fit: contain;
        filter: drop-shadow(0 8px 14px rgba(0, 49, 60, .15));
    }

    .hero-subtitle {
        max-width: 24ch;
        margin: 5px 0 9px !important;
        color: #fff !important;
        font-size: clamp(21px, 5.8vw, 25px) !important;
        font-weight: 750 !important;
        line-height: 1.23;
        letter-spacing: -.35px;
        text-wrap: balance;
        text-shadow: 0 2px 10px rgba(0, 56, 65, .22) !important;
    }

    .hero-desc {
        width: min(100%, 370px);
        margin: 5px auto 9px !important;
        color: rgba(255, 255, 255, .96) !important;
        font-size: 15px !important;
        line-height: 1.62 !important;
        text-shadow: 0 1px 5px rgba(0, 45, 55, .16) !important;
        text-wrap: pretty;
    }

    .hero-login-hint {
        width: min(100%, 350px);
        margin: 1px auto 12px !important;
        color: rgba(255, 255, 255, .96) !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        line-height: 1.45;
        letter-spacing: 0 !important;
        text-shadow: 0 1px 5px rgba(0, 45, 55, .16) !important;
        text-wrap: balance;
    }

    .hero-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: min(100%, 310px);
        min-height: 54px;
        padding: 13px 24px !important;
        border: 1px solid rgba(255, 255, 255, .56) !important;
        border-radius: 16px !important;
        background: linear-gradient(105deg, #00686d 0%, #008d98 53%, #04aabd 100%) !important;
        box-shadow: 0 9px 25px rgba(0, 59, 67, .24) !important;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 750 !important;
        letter-spacing: .1px !important;
        transition: box-shadow .18s ease, transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .hero-btn:active { transform: scale(.985); }
    .hero-ring { width: min(84vw, 315px) !important; height: min(84vw, 315px) !important; border-color: rgba(255, 255, 255, .18) !important; }
    .hero-ring-2 { width: min(67vw, 250px) !important; height: min(67vw, 250px) !important; border-color: rgba(255, 255, 255, .13) !important; }

    .landing-footer {
        padding: 13px 18px max(13px, env(safe-area-inset-bottom));
        text-align: center;
    }

    .landing-footer p { margin: 0; font-size: 11px; line-height: 1.5; }
}

@media (max-width: 360px) {
    .landing-nav { padding-right: 9px !important; padding-left: 9px !important; }
    .nav-links { gap: 5px; }
    .nav-about-btn,
    .nav-dropdown-btn { height: 44px !important; min-height: 44px !important; padding: 0 9px !important; font-size: 12px !important; }
    .hero { padding-right: 13px !important; padding-left: 13px !important; }
    .hero-content { gap: 10px !important; }
    .hero-subtitle { font-size: 21px !important; }
    .hero-desc { font-size: 14px !important; line-height: 1.55 !important; }
    .hero-login-hint { margin-bottom: 9px !important; font-size: 12px !important; }
}

@media (max-height: 720px) and (max-width: 600px) {
    .hero { align-items: flex-start !important; }
    .hero-content { gap: 10px !important; }
    .hero-left .surround-img,
    .hero-right .surround-img { width: clamp(68px, 18vw, 82px) !important; }
    .hero-main-logo { width: min(66vw, 250px) !important; max-height: 128px; }
    .hero-subtitle { margin: 1px 0 5px !important; font-size: clamp(20px, 5.4vw, 23px) !important; }
    .hero-desc { margin: 3px auto 6px !important; font-size: 14px !important; line-height: 1.5 !important; }
    .hero-login-hint { margin: 0 auto 7px !important; font-size: 12px !important; }
    .hero-btn { min-height: 50px; }
}

@media (max-height: 600px) and (max-width: 600px) {
    .hero { padding-top: calc(72px + env(safe-area-inset-top)) !important; padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; }
    .hero-right,
    .hero-login-hint { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-btn { transition: none !important; }
}