/* ==========================================
   RESPONSIVE LAYOUT
   Breakpoints follow the real content density rather than device names.
========================================== */

@media only screen and (max-width: 1440px){
    :root{
        --section:88px;
    }

    .header>.container{
        gap:24px;
    }

    .logo{
        width:196px;
    }

    .header nav{
        gap:clamp(20px,2.4vw,36px);
    }

    .header__cta{
        padding-inline:23px;
    }

    .hero,
    .hero>.container{
        min-height:720px;
    }

    .hero article{
        grid-template-columns:38px minmax(0,1fr);
        column-gap:12px;
        padding:18px;
    }

    .hero article .icon{
        width:34px;
        height:34px;
    }

    .system-card,
    .lora-card__copy,
    .about-card__copy{
        padding:42px;
    }

    .lora-card{
        grid-template-columns:minmax(0,1.06fr) minmax(450px,.94fr);
    }

    .pilot{
        --pilot-pad-x:42px;
        --pilot-pad-y:42px;
    }

    .pilot__features{
        gap:12px;
    }

    .feature{
        min-height:138px;
        padding:20px 14px;
    }

    .pilot__card{
        right:26px;
        bottom:26px;
        left:26px;
    }
}


@media only screen and (max-width: 1180px){
    :root{
        --gap:20px;
        --radius:24px;
        --padding:28px;
        --section:80px;
    }

    html{
        scroll-padding-top:92px;
    }

    section[id],
    footer[id]{
        scroll-margin-top:92px;
    }

    .container{
        width:min(calc(100% - 40px),var(--container));
    }

    .header>.container{
        min-height:80px;
        gap:20px;
    }

    .header.is-scrolled>.container{
        min-height:68px;
    }

    .logo{
        width:180px;
    }

    .header nav{
        gap:18px;
    }

    .header nav a{
        font-size:13px;
    }

    .header__cta{
        min-height:44px;
        padding-inline:20px;
        font-size:13px;
    }

    .hero{
        min-height:0;
    }

    .hero>.container{
        min-height:clamp(720px,calc(100svh - 80px),900px);
        padding-top:52px;
    }

    .hero__statement{
        max-width:800px;
    }

    .hero .text{
        max-width:620px;
    }

    .hero>.container>div:last-child{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin-top:16px;
    }

    .hero article:last-child{
        grid-column:1 / -1;
    }

    .content{
        gap:80px;
    }

    .section-heading,
    .system-card__header{
        grid-template-columns:1fr;
        gap:22px;
        align-items:start;
    }

    .section-heading__lead{
        max-width:760px;
        padding-bottom:0;
    }

    .stories-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .story-card__media{
        aspect-ratio:1.35 / 1;
    }

    .story-card__body{
        min-height:190px;
    }

    .system-card{
        padding:38px 34px 30px;
    }

    .system-card__intro{
        max-width:850px;
    }

    .system-points{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .reliability-card{
        grid-template-columns:1fr;
    }

    .reliability-card__promise{
        min-height:0;
    }

    .lora-card{
        grid-template-columns:1fr;
        min-height:0;
    }

    .lora-card__copy{
        padding:44px;
    }

    .lora-visual{
        min-height:620px;
        border-top:1px solid rgba(18,213,229,.12);
        border-left:0;
    }

    .intelligence-grid{
        grid-template-columns:1fr;
    }

    .pwa-card{
        min-height:420px;
    }

    .about-card{
        grid-template-columns:1fr;
    }

    .about-card__copy{
        padding:44px;
    }

    .about-card__visual{
        min-height:480px;
        margin:0 32px 32px;
    }

    .safety-card{
        grid-template-columns:1fr;
    }

    .safety-card__points{
        grid-template-columns:repeat(3,minmax(0,1fr));
        align-content:stretch;
        padding:0 30px 28px;
        border-top:1px solid rgba(144,196,217,.13);
        border-left:0;
    }

    .safety-card__points li{
        align-content:start;
        border-right:1px solid rgba(144,196,217,.1);
        border-bottom:0;
        padding:24px 20px;
    }

    .safety-card__points li:last-child{
        border-right:0;
    }

    .pilot__content{
        grid-template-columns:minmax(0,56%) minmax(0,44%);
    }

    .pilot{
        --pilot-pad-x:34px;
        --pilot-pad-y:34px;
    }

    .pilot__features{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .feature{
        min-height:126px;
    }

    .pilot__bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:16px;
    }

    .pilot__hint{
        max-width:none;
    }


    .footer__row{
        gap:22px;
    }
}


@media only screen and (max-width: 960px){
    :root{
        --section:72px;
    }

    main{
        gap:72px;
    }

    .header nav{
        display:none;
    }

    .header>.container{
        justify-content:space-between;
    }

    .hero::before{
        background:
            linear-gradient(90deg,rgba(0,14,30,.98) 0%,rgba(0,14,30,.9) 54%,rgba(0,14,30,.42) 100%),
            linear-gradient(0deg,rgba(0,14,30,.98) 0%,transparent 46%);
    }

    .hero>.container{
        min-height:0;
        padding-top:48px;
        padding-bottom:30px;
    }

    .hero .text br,
.pilot__left>p:not(.section-kicker) br,
    .pilot__info-text br,
    .pilot__description br{
        display:none;
    }

    .buttons_block{
        margin-bottom:34px;
    }

    .connection-modes{
        grid-template-columns:1fr;
    }

    .system-card__scroller{
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-color:rgba(18,213,229,.45) rgba(255,255,255,.04);
        scrollbar-width:thin;
    }

    .system-card__scroller::-webkit-scrollbar{
        height:7px;
    }

    .system-card__scroller::-webkit-scrollbar-track{
        border-radius:999px;
        background:rgba(255,255,255,.04);
    }

    .system-card__scroller::-webkit-scrollbar-thumb{
        border-radius:999px;
        background:rgba(18,213,229,.42);
    }

    .system-card__visual{
        min-width:760px;
    }

    .pilot__content{
        min-height:0;
        grid-template-columns:1fr;
        grid-template-areas:
            "copy"
            "portrait"
            "cta";
        grid-template-rows:auto;
    }

    .pilot{
        --pilot-pad-x:42px;
        --pilot-pad-y:42px;
    }

    .pilot__features{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .pilot__bottom{
        align-items:center;
        flex-direction:row;
        padding-top:30px;
        border-top:1px solid rgba(118,183,210,.14);
        background:#0a1724;
    }

    .pilot__right{
        height:clamp(520px,70vw,680px);
        min-height:0;
        border-top:1px solid rgba(118,183,210,.14);
    }

    .pilot__right::before{
        background:
            linear-gradient(180deg,#0d1c2a 0%,transparent 18%),
            linear-gradient(0deg,rgba(3,14,24,.62) 0%,transparent 46%);
    }

    .pilot__right img{
        object-position:50% 18%;
    }


    .footer__row{
        flex-wrap:wrap;
        gap:20px 28px;
    }

    .footer__legal{
        order:3;
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
        padding-top:18px;
        border-top:1px solid rgba(128,187,212,.1);
    }

    .footer__copyright,
    .footer__origin{
        margin-left:auto;
    }
}


@media only screen and (max-width: 767px){
    :root{
        --radius:20px;
        --padding:22px;
        --section:64px;
    }

    html{
        scroll-padding-top:78px;
    }

    section[id],
    footer[id]{
        scroll-margin-top:78px;
    }

    body{
        background-position:50% top;
        background-size:auto 560px;
    }

    main{
        gap:64px;
    }

    .container{
        width:min(calc(100% - 28px),var(--container));
    }

    .header>.container{
        min-height:72px;
        gap:14px;
    }

    .header{
        border-color:rgba(130,193,218,.12);
        background:rgba(0,14,30,.84);
        box-shadow:0 12px 32px rgba(0,0,0,.16);
        backdrop-filter:blur(16px) saturate(125%);
        -webkit-backdrop-filter:blur(16px) saturate(125%);
    }

    .header.is-scrolled>.container{
        min-height:62px;
    }

    .logo{
        width:158px;
    }

    .header__cta{
        min-height:42px;
        padding-inline:17px;
        white-space:nowrap;
    }

    .hero::before{
        background:
            linear-gradient(90deg,rgba(0,14,30,.98) 0%,rgba(0,14,30,.9) 72%,rgba(0,14,30,.58) 100%),
            linear-gradient(0deg,rgba(0,14,30,1) 0%,rgba(0,14,30,.2) 55%);
    }

    .hero>.container{
        gap:22px;
        padding-top:42px;
        padding-bottom:24px;
    }

    .hero__statement{
        max-width:100%;
        font-size:clamp(34px,7vw,50px);
        line-height:1.1;
    }

    .hero .text{
        max-width:560px;
        font-size:16px;
        line-height:1.58;
    }

    .buttons_block{
        flex-wrap:wrap;
        gap:12px;
        margin-top:4px;
        margin-bottom:22px;
    }

    .hero__primary,
    .hero__secondary{
        min-height:52px;
        padding-inline:23px;
    }

    .hero>.container>div:last-child{
        display:grid;
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-flow:row;
        gap:12px;
        margin-top:4px;
        padding:4px 0 0;
        overflow:visible;
    }

    .hero article{
        min-height:104px;
    }

    .hero article:not(:last-child){
        grid-template-columns:1fr;
        row-gap:7px;
        align-content:start;
        padding:17px;
    }

    .hero article:not(:last-child) .icon{
        grid-row:auto;
        margin-bottom:6px;
    }

    .hero article:last-child{
        grid-column:1 / -1;
    }

    .content{
        gap:64px;
    }

    .section-heading,
    .section-heading_compact{
        gap:16px;
        margin-bottom:26px;
    }

    .section-heading__lead{
        font-size:16px;
        line-height:1.58;
    }

    .section-kicker{
        margin-bottom:11px;
        font-size:11px;
    }

    .stories-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .story-card__media{
        aspect-ratio:1.42 / 1;
    }

    .story-card__body{
        min-height:0;
        gap:14px;
        padding:21px;
    }

    .story-card__title h3{
        font-size:19px;
    }

    .system-card{
        padding:26px 18px 22px;
    }

    .system-card__header{
        gap:17px;
    }

    .system-card__intro p{
        font-size:15px;
    }

    .connection-modes{
        gap:9px;
        margin:22px 0 16px;
    }

    .connection-modes li{
        grid-template-columns:34px minmax(0,1fr);
        padding:14px;
    }

    .connection-modes .icon{
        width:29px;
        height:29px;
    }

    .system-card__scroller{
        margin:18px -4px 0;
        padding:8px 4px 12px;
    }

    .system-card__visual{
        min-width:700px;
    }

    .system-card__visual figcaption{
        max-width:620px;
        margin:7px 0 0;
        text-align:left;
    }

    .system-points{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:18px;
    }

    .system-points li{
        justify-content:flex-start;
        padding:12px;
    }

    .system-points span{
        white-space:normal;
    }

    .reliability-card__promise{
        padding:28px 24px;
    }

    .reliability-card__icon{
        width:56px;
        height:56px;
        margin-bottom:22px;
    }

    .reliability-states{
        grid-template-columns:1fr;
        gap:14px;
    }

    .reliability-state{
        padding:23px;
    }

    .lora-card__copy{
        padding:30px 22px;
    }

    .lora-card__copy h2{
        margin-bottom:17px;
    }

    .lora-card__lead{
        font-size:15px;
        line-height:1.62;
    }

    .lora-proof-grid{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:25px;
    }

    .lora-proof-grid>div{
        padding:14px;
    }

    .lora-card__note{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:20px;
    }

    .lora-card__note-icons{
        padding-left:2px;
    }

    .lora-visual{
        min-height:590px;
    }

    .lora-ring_outer{
        width:390px;
        height:390px;
    }

    .lora-ring_inner{
        width:240px;
        height:240px;
    }

    .lora-hub{
        width:118px;
        height:118px;
    }

    .lora-gateway{
        top:20px;
        right:22px;
        left:22px;
        min-width:0;
        justify-content:center;
        transform:none;
    }

    .lora-node{
        min-width:132px;
        padding:10px 11px;
    }

    .lora-node_house{
        top:120px;
        left:18px;
    }

    .lora-node_greenhouse{
        top:120px;
        right:18px;
    }

    .lora-node_apiary{
        bottom:100px;
        left:18px;
    }

    .lora-node_gate{
        right:18px;
        bottom:100px;
    }

    .lora-range{
        right:20px;
        bottom:30px;
        left:20px;
    }

    .assistant-card,
    .pwa-card{
        padding:26px 22px;
    }

    .assistant-card__header{
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    .assistant-roles{
        grid-template-columns:1fr;
        gap:9px;
        margin-top:22px;
    }

    .assistant-role{
        padding:14px;
    }

    .assistant-request{
        grid-template-columns:54px minmax(0,1fr);
        gap:14px;
        padding:17px;
    }

    .assistant-request__voice{
        width:52px;
        height:52px;
    }

    .assistant-request p{
        font-size:14px;
    }

    .assistant-digest{
        padding:15px 17px;
    }

    .pwa-card{
        min-height:0;
    }

    .pwa-card .text-link{
        margin-top:26px;
        padding-top:0;
    }

    .about-card__copy{
        padding:30px 23px;
    }

    .about-card__copy>p:not(.section-kicker){
        font-size:15px;
        line-height:1.62;
    }

    .about-stats{
        gap:8px;
        margin-top:24px;
    }

    .about-stats>div{
        min-height:94px;
        padding:17px 14px;
    }

    .about-stats strong{
        font-size:30px;
    }

    .about-card__visual{
        min-height:390px;
    }

    .safety-card__copy{
        grid-template-columns:52px minmax(0,1fr);
        gap:16px;
        padding:30px 22px;
    }

    .safety-card__mark{
        width:52px;
        height:52px;
        border-radius:15px;
    }

    .safety-card__copy h2{
        font-size:clamp(28px,7vw,36px);
    }

    .safety-card__points{
        grid-template-columns:1fr;
        padding:8px 22px 22px;
    }

    .safety-card__points li,
    .safety-card__points li:last-child{
        border-right:0;
        border-bottom:1px solid rgba(144,196,217,.1);
        padding:17px 0;
    }

    .safety-card__points li:last-child{
        border-bottom:0;
    }

    .about-card__visual::after{
        background:linear-gradient(0deg,rgba(3,12,19,.94),transparent 56%);
    }


    .pilot{
        --pilot-pad-x:22px;
        --pilot-pad-y:30px;
    }

    .pilot__left h2{
        margin-bottom:20px;
    }

    .pilot__left>p:not(.section-kicker){
        font-size:15px;
        line-height:1.65;
    }

    .pilot__features{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-top:28px;
    }

    .feature{
        min-height:124px;
        gap:11px;
        padding:16px 10px;
    }

    .feature .icon{
        width:36px;
        height:36px;
    }

    .pilot__info{
        grid-template-columns:42px minmax(0,1fr);
        gap:14px;
        padding:18px;
    }

    .pilot__info>.icon{
        width:40px;
        height:40px;
    }

    .pilot__bottom{
        align-items:stretch;
        flex-direction:column;
        margin-top:0;
        padding-top:24px;
    }

    .btn-primary{
        width:100%;
        min-height:54px;
        padding-inline:20px;
    }

    .pilot__hint{
        align-self:flex-start;
    }

    .pilot__right{
        height:clamp(500px,95vw,620px);
        min-height:0;
    }

    .pilot__card{
        right:16px;
        bottom:16px;
        left:16px;
        grid-template-columns:40px minmax(0,1fr);
        gap:13px;
        padding:18px;
    }

    .pilot__card>.icon{
        width:38px;
        height:38px;
    }

    .pilot__name,
    .pilot__description{
        overflow-wrap:anywhere;
    }


    .footer{
        margin-top:64px;
        padding-top:40px;
    }

    .footer__row{
        flex-direction:column;
        align-items:flex-start;
        flex-wrap:nowrap;
        gap:14px;
    }

    .footer__legal{
        order:0;
        width:100%;
        justify-content:flex-start;
        align-items:flex-start;
        flex-direction:column;
        flex-wrap:nowrap;
        gap:10px;
        padding-top:18px;
        border-top:1px solid rgba(128,187,212,.1);
    }

    .footer__copyright,
    .footer__origin{
        margin-left:0;
        white-space:normal;
    }

    .contact-panel{
        width:100%;
        border-left:0;
    }

    .contact-panel__body{
        padding:20px 20px 30px;
    }

    .contact-panel__header{
        top:6px;
        right:10px;
        margin:0;
    }

    .contact-form{
        grid-template-columns:1fr;
    }

    .contact-field_task,
    .contact-consents,
    .contact-form__status,
    .contact-submit{
        grid-column:auto;
    }

}


@media only screen and (max-width: 480px){
    body{
        background-position-x:-670px;
        background-position-y:-34px;
    }

    .hero::before{
        background:
            linear-gradient(90deg,rgba(0,14,30,.86) 0%,rgba(0,14,30,.62) 64%,rgba(0,14,30,.2) 100%),
            linear-gradient(0deg,rgba(0,14,30,.9) 0%,rgba(0,14,30,.08) 58%);
    }

    .container{
        width:min(calc(100% - 24px),var(--container));
    }

    h1{
        font-size:36px;
    }

    h2{
        font-size:30px;
    }

    .contact-panel__content>h2{
        font-size:clamp(30px,8.8vw,36px);
    }

    .header>.container{
        gap:10px;
    }

    .logo{
        width:132px;
    }

    .header__cta{
        min-height:40px;
        padding-inline:13px;
        font-size:11px;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-7px) scale(.96);
        transition:
            opacity 180ms ease,
            visibility 0s linear 180ms,
            transform 180ms ease,
            background-color 180ms ease,
            box-shadow 180ms ease;
    }

    .header.is-cta-visible .header__cta{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        transition-delay:0s;
    }

    .hero>.container{
        padding-top:30px;
    }

    .hero__statement{
        font-size:clamp(22px,8.5vw,24px);
    }

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

    .hero__title{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }

    .buttons_block{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:stretch;
        gap:10px;
    }

    .hero__primary,
    .hero__secondary{
        width:auto;
        min-height:50px;
        padding-inline:14px;
        font-size:13px;
    }

    .story-card__media{
        aspect-ratio:1.25 / 1;
    }

    .system-card{
        padding-inline:16px;
    }

    .system-card__visual{
        min-width:650px;
    }

    .system-points{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .footer__row{
        align-items:center;
        text-align:center;
    }

    .footer__legal{
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .footer__origin,
    .footer__copyright{
        width:100%;
        text-align:center;
    }

    .reliability-card__promise,
    .reliability-state{
        padding:21px 18px;
    }

    .lora-card__copy{
        padding-inline:18px;
    }

    .lora-visual{
        min-height:570px;
    }

    .lora-ring_outer{
        width:300px;
        height:300px;
    }

    .lora-ring_inner{
        width:188px;
        height:188px;
    }

    .lora-hub{
        width:108px;
        height:108px;
    }

    .lora-hub .icon{
        width:30px;
        height:30px;
    }

    .lora-node{
        min-width:0;
        width:128px;
        gap:7px;
        padding:9px;
    }

    .lora-node .icon{
        width:21px;
        height:21px;
    }

    .lora-node span strong,
    .lora-gateway span strong{
        font-size:11px;
    }

    .lora-node_house{
        top:112px;
        left:9px;
    }

    .lora-node_greenhouse{
        top:112px;
        right:9px;
    }

    .lora-node_apiary{
        bottom:96px;
        left:9px;
    }

    .lora-node_gate{
        right:9px;
        bottom:96px;
    }

    .lora-range{
        right:12px;
        left:12px;
        gap:8px;
    }

    .assistant-request{
        grid-template-columns:1fr;
    }

    .assistant-request__voice{
        width:50px;
        height:50px;
    }

    .assistant-digest{
        grid-template-columns:28px minmax(0,1fr);
        gap:11px;
    }

    .about-stats{
        grid-template-columns:1fr;
    }

    .about-stats>div{
        display:grid;
        grid-template-columns:74px minmax(0,1fr);
        align-items:center;
        gap:10px;
    }

    .about-card__visual{
        min-height:340px;
        margin:0 16px 16px;
    }

    .safety-card__copy{
        grid-template-columns:1fr;
    }

    .pilot__features{
        grid-template-columns:1fr 1fr;
    }

    .feature__title{
        font-size:12px;
    }

    .pilot__info{
        grid-template-columns:1fr;
    }

    .pilot__right{
        height:460px;
        min-height:0;
    }

    .pilot__right img{
        object-position:54% 18%;
    }

    .pilot__card{
        grid-template-columns:34px minmax(0,1fr);
        gap:10px;
        padding:15px;
    }

    .pilot__card>.icon{
        width:32px;
        height:32px;
    }

    .pilot__name{
        font-size:14px;
    }

    .pilot__description{
        font-size:12px;
    }


    .footer__logo{
        width:175px;
    }

    .contact-panel__body{
        padding-inline:16px;
    }

    .contact-panel__anna{
        grid-template-columns:88px minmax(0,1fr);
        gap:15px;
        margin:20px 0 28px;
        padding-bottom:20px;
    }

    .contact-panel__anna>img{
        width:88px;
        height:88px;
        border-radius:15px;
    }

    .contact-panel__anna strong{
        font-size:17px;
    }

    .contact-panel__anna small{
        display:none;
    }

    .contact-panel__anna span{
        font-size:13.5px;
    }

    .contact-field textarea{
        min-height:116px;
    }

    .contact-success{
        min-height:calc(100dvh - 100px);
        padding-inline:4px;
    }
}


@media only screen and (max-width: 359px){
    .buttons_block{
        grid-template-columns:1fr;
    }

    .hero__primary,
    .hero__secondary{
        width:100%;
    }

    .logo{
        width:118px;
    }

    .header__cta{
        padding-inline:10px;
        font-size:10px;
    }

    .lora-node{
        width:116px;
    }

    .lora-node span small{
        display:none;
    }
}


@media only screen and (min-width: 768px) and (max-height: 820px){
    .contact-panel__body{
        padding-block:20px 24px;
    }

    .contact-panel__header{
        top:10px;
    }

    .contact-panel__anna{
        grid-template-columns:104px minmax(0,1fr);
        gap:14px;
        margin:13px 0 22px;
        padding:12px 15px;
    }

    .contact-panel__anna>img{
        width:104px;
        height:104px;
    }

    .contact-form{
        gap:10px 14px;
    }

    .contact-field textarea{
        min-height:90px;
    }

    .contact-submit{
        min-height:50px;
    }
}