/* REVO Lab landing — tablet & mobile styles. Refs: Figma tablet (834) and iPhone 13/14 frames */

/* Tablet — matches the Figma 834px frame (node 21-434) exactly. */
@media (max-width: 1200px) {
    :root {
        --lab-radius: 37px;
    }

    .lab-section {
        padding: 48px 42px;
    }

    .lab-section__title {
        font-size: 36px;
        letter-spacing: -1.16px;
    }

    .lab-section__subtitle {
        margin-top: 12px;
        font-size: 16px;
    }

    /* Header: 46px pill, everything scaled like the frame */
    .lab-header {
        top: 11px;
        width: calc(100% - 23px);
        height: 46px;
        padding: 0 14px;
        border-radius: 18px;
    }

    .lab-header__logo img {
        height: 26px;
    }

    .lab-header__actions {
        gap: 7px;
    }

    .lab-header__lang {
        height: 28px;
        padding: 0 9px;
        gap: 4px;
        border-radius: 9px;
        font-size: 10px;
    }

    .lab-header__lang svg {
        width: 9px;
        height: 9px;
    }

    .lab-header__cta {
        height: 33px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 10px;
    }

    /* Hero */
    .lab-hero {
        padding: 106px 39px 62px;
    }

    /* Tablet hero is compact (~460px tall) while the desktop badge keeps
       growing with vw — cap it at the 834 frame (top 49 / bleed 130 / 469px)
       so it stays inside the hero and off the about section. */
    .lab-hero__badge {
        top: min(49px, calc(7.1vw - 10.2px));
        right: max(-130px, calc(-10.56vw - 42px));
        width: min(469px, 56.2vw);
    }

    .lab-hero__title {
        font-size: 48px;
        letter-spacing: -2px;
        max-width: 420px;
    }

    .lab-hero__subtitle {
        margin-top: 24px;
        max-width: 350px;
        font-size: 14px;
    }

    .lab-hero__cta {
        margin-top: 30px;
        height: 37px;
        padding: 0 22px;
        border-radius: 12px;
        font-size: 12px;
    }

    /* About */
    .lab-about {
        padding: 48px 32px 32px;
    }

    .lab-about__intro {
        padding: 0 20px;
    }

    .lab-about__grid {
        margin-top: 56px;
        grid-template-columns: 317fr 446fr;
        gap: 7px;
    }

    .lab-about__card-build {
        min-height: 394px;
        border-radius: 32px;
    }

    .lab-about__card-build h3 {
        padding: 28px 28px 0;
        font-size: 28px;
    }

    .lab-about__col {
        gap: 7px;
    }

    .lab-about__video {
        min-height: 269px;
        border-radius: 32px;
    }

    /* Tablet frame shows a black rounded-rect play control */
    .lab-about__cta {
        height: 119px;
        padding: 0 32px;
        border-radius: 32px;
        font-size: 32px;
    }

    .lab-about__cta svg {
        width: 28px;
        height: 28px;
    }

    /* Audience — stays 4-in-a-row on tablet */
    .lab-audience {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .lab-audience__grid {
        margin-top: 44px;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
    }

    .lab-audience__circle span {
        font-size: 20px;
        letter-spacing: -0.03em;
    }

    /* Services */
    .lab-services {
        padding: 46px 0;
    }

    .lab-services__intro {
        padding: 0 52px;
    }

    .lab-services__track {
        margin-top: 40px;
        padding: 0 32px;
        gap: 7px;
    }

    .lab-services__card {
        flex: 0 0 250px;
        height: 376px;
        border-radius: 28px;
        padding: 24px 19px 0;
    }

    .lab-services__card h3 {
        font-size: 24px;
    }

    .lab-services__card p {
        margin-top: 10px;
        font-size: 12px;
    }

    /* Process — 2 columns like the frame */
    .lab-process {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .lab-process__grid {
        margin-top: 44px;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .lab-process__card {
        height: 109px;
        border-radius: 28px;
        padding: 20px 19px;
    }

    .lab-process__info h3 {
        font-size: 20px;
    }

    .lab-process__info p {
        margin-top: 8px;
        font-size: 16px;
    }

    .lab-process__num {
        top: -10px;
        right: -15px;
        font-size: 152px;
    }

    .lab-process__num--4 {
        font-size: 143px !important;
    }

    /* Projects — 2 columns */
    .lab-projects {
        padding: 48px 42px;
    }

    .lab-projects__grid {
        margin-top: 36px;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .lab-projects__card {
        height: 100px;
        min-height: 100px;
        padding: 19px;
        gap: 12px;
        border-radius: 27px;
    }

    .lab-projects__tile {
        flex-basis: 63px;
        width: 63px;
        height: 63px;
        border-radius: 18px;
    }

    .lab-projects__text h3 {
        font-size: 20px;
    }

    .lab-projects__text p {
        margin-top: 4px;
        font-size: 12px;
    }

    /* Partners */
    .lab-partners {
        padding: 64px 0;
    }

    .lab-partners .lab-section__title,
    .lab-partners .lab-section__subtitle {
        padding: 0 38px;
    }

    .lab-partners .lab-section__subtitle {
        font-size: 18px;
    }

    .lab-partners__marquee {
        margin-top: 56px;
    }

    .lab-partners__row {
        gap: 8px;
        padding-right: 8px;
    }

    .lab-partners__item {
        width: 144px;
        height: 144px;
        border-width: 0.75px;
    }

    .lab-partners__logo {
        height: 28px;
    }
    .lab-partners__logo--kon {
        height: 10px;
    }
    .lab-partners__logo--tezavia {
        height: 75px;
    }
    .lab-partners__logo--itpark {
        height: 58px;
    }
    .lab-partners__logo--garage {
        height: 27px;
    }
    .lab-partners__logo--asaxiy {
        height: 27px;
    }

    /* CTA + footer */
    .lab-footer {
        padding: 50px 42px 44px;
    }

    .lab-footer__cta-text p {
        margin-top: 26px;
        font-size: 14px;
    }

    .lab-footer__cta-btn {
        width: 324px;
        height: 104px;
        padding: 0 28px;
        border-radius: 32px;
        font-size: 26px;
    }

    .lab-footer__cta-btn svg {
        width: 26px;
        height: 26px;
    }

    .lab-footer__divider {
        margin: 48px 0;
    }

    .lab-footer__grid {
        grid-template-columns: 2.05fr 0.9fr 1.1fr 1fr;
        gap: 0;
    }

    .lab-footer__brand img {
        height: 26px;
    }

    .lab-footer__col h4 {
        font-size: 14px;
    }

    .lab-footer__col a,
    .lab-footer__col p {
        margin-top: 14px;
        font-size: 12px;
    }

    /* Modals (no dedicated tablet frame — proportional) */
    .lab-modal__panel--form {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 48px;
    }

    .lab-modal__text h2 {
        font-size: 64px;
    }

    .lab-modal__panel--success h2 {
        font-size: 64px;
    }
}

/* Small-desktop (~768-1200): the 834-frame header pill reads too small on
   wider PC-ish viewports, so bump the header and its controls up a notch —
   sits between the 46px tablet pill and the 80px desktop header. */
@media (min-width: 768px) and (max-width: 1200px) {
    .lab-header {
        top: 14px;
        width: calc(100% - 28px);
        height: 60px;
        padding: 0 20px;
        border-radius: 22px;
    }

    .lab-header__logo img {
        height: 34px;
    }

    .lab-header__actions {
        gap: 10px;
    }

    .lab-header__lang {
        height: 40px;
        padding: 0 14px;
        gap: 6px;
        border-radius: 13px;
        font-size: 13px;
    }

    .lab-header__lang svg {
        width: 12px;
        height: 12px;
    }

    .lab-header__cta {
        height: 44px;
        padding: 0 20px;
        border-radius: 14px;
        font-size: 13px;
    }
}

/* Mobile — matches the Figma 390px frame "iPhone 13 & 14 - 2" exactly. */
@media (max-width: 700px) {
    :root {
        --lab-radius: 42px;
    }

    .lab-section {
        padding: 40px 20px;
    }

    .lab-section__title {
        font-size: 36px;
        letter-spacing: -2px;
    }

    .lab-section__subtitle {
        margin-top: 14px;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.72);
    }

    /* Header: compact logo + round burger, no lang/CTA */
    .lab-header {
        top: 12px;
        width: calc(100% - 20px);
        height: 66px;
        padding: 0 12px 0 24px;
        border-radius: 24px;
    }

    /* Crop the lockup to the "REVO Lab" mark (badge ends at ~121px @ 35px tall) */
    .lab-header__logo {
        display: block;
        width: 135px;
        overflow: hidden;
    }

    .lab-header__logo img {
        height: 35px;
        width: auto;
        max-width: none;
    }

    /* Lang chip + CTA per the 390 frame (node 9-346): the burger menu is gone,
       both controls now live in the pill. */
    .lab-header__actions {
        gap: 7px;
    }

    .lab-header__lang {
        height: 42px;
        padding: 0 12px;
        gap: 3.5px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.12);
        font-family: "Onest", sans-serif;
        font-size: 12px;
        color: var(--lab-light);
    }

    .lab-header__lang svg {
        width: 12px;
        height: 12px;
    }

    .lab-header__cta {
        height: 42px;
        padding: 0 16px;
        border-radius: 16px;
        font-family: "Onest", sans-serif;
        font-size: 12px;
        font-weight: 500;
    }

    /* Language names shrink to O‘z / Рус / En */
    .lab-lang__full {
        display: none;
    }

    .lab-lang__short {
        display: inline;
    }

    .lab-lang__list {
        min-width: 132px;
    }


    /* Hero: no badge on mobile */
    .lab-hero {
        padding: 152px 20px 80px;
    }

    .lab-hero .lab-hero__badge {
        display: none;
    }

    .lab-hero__title {
        font-size: 48px;
        letter-spacing: -2.5px;
        max-width: 340px;
    }

    .lab-hero__subtitle {
        margin-top: 24px;
        max-width: 340px;
        font-size: 14px;
    }

    .lab-hero__cta {
        margin-top: 40px;
        height: 64px;
        padding: 0 56px;
        border-radius: 20px;
        font-size: 16px;
    }

    /* About */
    .lab-about {
        padding: 40px 20px 20px;
    }

    .lab-about__intro {
        padding: 0;
    }

    .lab-about__grid {
        margin-top: 40px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lab-about__card-build {
        min-height: 320px;
        border-radius: 36px;
    }

    .lab-about__card-build h3 {
        padding: 30px 24px 0;
        font-size: 32px;
    }

    .lab-about__col {
        gap: 10px;
    }

    .lab-about__video {
        min-height: 204px;
        border-radius: 25px;
        flex: none;
    }

    .lab-about__cta {
        height: 82px;
        border-radius: 25px;
        padding: 0 20px;
        font-size: 24px;
        letter-spacing: -0.02em;
        justify-content: center;
        gap: 12px;
    }

    .lab-about__cta svg {
        width: 24px;
        height: 24px;
    }

    /* Audience — 2x2 circles */
    .lab-audience {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .lab-audience__grid {
        margin-top: 40px;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }

    .lab-audience__circle span {
        font-size: 17px;
    }

    /* Services */
    .lab-services {
        padding: 40px 0 32px;
    }

    .lab-services__intro {
        padding: 0 20px;
    }

    .lab-services__track {
        margin-top: 40px;
        padding: 0 20px;
        gap: 7px;
    }

    .lab-services__card {
        flex: 0 0 266px;
        height: 400px;
        border-radius: 30px;
        padding: 26px 20px 0;
    }

    .lab-services__card h3 {
        font-size: 24px;
    }

    .lab-services__card p {
        margin-top: 10px;
        font-size: 14px;
    }

    /* Process — single column */
    .lab-process {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .lab-process__grid {
        margin-top: 44px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lab-process__card {
        height: 132px;
        border-radius: 32px;
        padding: 22px 24px;
    }

    .lab-process__info h3 {
        font-size: 24px;
    }

    .lab-process__info p {
        margin-top: 8px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.55);
    }

    .lab-process__num {
        right: -17px;
        top: -2px;
        font-size: 172px !important;
    }

    .lab-process__num--1 {
        right: 8px;
    }

    /* Projects — single column */
    .lab-projects {
        padding: 44px 20px;
    }

    .lab-projects .lab-section__title,
    .lab-projects .lab-section__subtitle {
        padding: 0;
    }

    .lab-projects__grid {
        margin-top: 36px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lab-projects__card {
        height: 103px;
        min-height: 103px;
        padding: 19px 20px;
        gap: 16px;
        border-radius: 32px;
    }

    .lab-projects__tile {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .lab-projects__text h3 {
        font-size: 24px;
        letter-spacing: -1px;
    }

    .lab-projects__text p {
        margin-top: 2px;
        font-size: 12px;
    }

    /* Partners */
    .lab-partners {
        padding: 64px 0;
    }

    .lab-partners .lab-section__title,
    .lab-partners .lab-section__subtitle {
        padding: 0 20px;
    }

    .lab-partners .lab-section__subtitle {
        font-size: 16px;
    }

    .lab-partners__marquee {
        margin-top: 32px;
    }

    .lab-partners__row {
        gap: 7px;
        padding-right: 7px;
    }

    .lab-partners__item {
        width: 152px;
        height: 152px;
        border-width: 0.75px;
    }

    .lab-partners__logo {
        height: 33px;
    }
    .lab-partners__logo--kon {
        height: 12px;
    }
    .lab-partners__logo--tezavia {
        height: 79px;
    }
    .lab-partners__logo--itpark {
        height: 61px;
    }
    .lab-partners__logo--garage {
        height: 28px;
    }
    .lab-partners__logo--asaxiy {
        height: 28px;
    }

    /* CTA + footer — centered CTA, stacked columns */
    .lab-footer {
        padding: 48px 20px 40px;
    }

    .lab-footer__cta {
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
    }

    .lab-footer__cta-text h2 {
        font-size: 34px;
    }

    .lab-footer__cta-text p {
        margin-top: 26px;
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.72);
    }

    .lab-footer__cta-btn {
        margin-top: 32px;
        width: 100%;
        height: 82px;
        padding: 0 20px;
        border-radius: 25px;
        font-size: 24px;
        justify-content: center;
        gap: 12px;
    }

    .lab-footer__cta-btn svg {
        width: 24px;
        height: 24px;
    }

    .lab-footer__divider {
        margin: 32px 0 33px;
    }

    .lab-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .lab-footer__brand img {
        height: 47px;
    }

    .lab-footer__col h4 {
        font-size: 22px;
    }

    .lab-footer__col a,
    .lab-footer__col p {
        margin-top: 22px;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.85);
    }

    /* Modals */
    .lab-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .lab-modal__panel {
        border-radius: 36px;
    }

    .lab-modal__panel--form {
        padding: 32px 24px;
        gap: 28px;
    }

    .lab-modal__text h2 {
        font-size: 40px;
    }

    .lab-modal__text p {
        margin-top: 16px;
        font-size: 17px;
    }

    .lab-modal__close {
        top: 20px;
        right: 20px;
    }

    .lab-modal__panel--success {
        padding: 40px 24px;
    }

    .lab-modal__panel--success h2 {
        font-size: 38px;
    }

    .lab-modal__panel--success p {
        margin-top: 20px;
        font-size: 17px;
    }

    .lab-form__input {
        height: 58px;
        font-size: 16px;
    }

    .lab-form__textarea {
        height: 130px;
    }

    .lab-form__upload {
        height: 84px;
    }

    .lab-form__submit {
        height: 58px;
    }
}