/* ==========================================
   RESET & TOKENS
========================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

:root{
    --container:1600px;
    --gap:24px;
    --radius:28px;
    --radius-button:999px;
    --padding:32px;
    --section:100px;
    --bg:#000e1e;
    --surface:#071722;
    --card:#101c2b;
    --card2:#132335;
    --border:#233f52;
    --text:#f5fbff;
    --muted:#9fb2c9;
    --accent:#12d5e5;
    --accent-strong:#35b5ff;
    --success:#71d43d;
    --danger:#ff5a66;
    --shadow:0 28px 90px rgba(0,0,0,.28);
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:108px;
}

body{
    min-width:320px;
    overflow-x:clip;
    background:#000e1e url("../img/hero4.png") top center / 1920px auto no-repeat;
    color:var(--text);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{
    display:block;
    width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font:inherit;
}

button{
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
}

ul{
    list-style:none;
}

[hidden]{
    display:none !important;
}

::selection{
    background:rgba(18,213,229,.28);
    color:#fff;
}

:where(a,button,input,textarea):focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
}

.icon{
    width:24px;
    height:24px;
    flex:0 0 auto;
    color:var(--accent);
}

.container{
    width:min(calc(100% - 48px),var(--container));
    margin-inline:auto;
}

.text-nowrap{
    white-space:nowrap;
}

main{
    display:flex;
    flex-direction:column;
    gap:var(--section);
}

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

h1{
    font-size:clamp(46px,5vw,76px);
    font-weight:650;
    line-height:1.02;
}

h2{
    font-size:clamp(30px,3vw,52px);
    font-weight:600;
    line-height:1.08;
}

h3{
    font-size:22px;
    font-weight:600;
}

p{
    color:var(--muted);
}


/* ==========================================
   HEADER
========================================== */

.header{
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid transparent;
    background:rgba(0,14,30,0);
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.header.is-scrolled{
    border-color:rgba(130,193,218,.16);
    background:rgba(0,14,30,.88);
    box-shadow:0 16px 42px rgba(0,0,0,.22);
    backdrop-filter:blur(18px) saturate(130%);
    -webkit-backdrop-filter:blur(18px) saturate(130%);
}

.header>.container{
    display:flex;
    min-height:88px;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    transition:min-height 220ms ease;
}

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

.logo{
    display:block;
    width:220px;
    flex:0 0 auto;
}

.logo img{
    width:100%;
}

.header nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(24px,3.2vw,58px);
}

.header nav a{
    position:relative;
    padding:10px 0;
    color:#d3e0e8;
    font-size:14px;
    font-weight:550;
    transition:color 180ms ease;
}

.header nav a::after{
    position:absolute;
    right:0;
    bottom:4px;
    left:0;
    height:1px;
    background:var(--accent);
    content:"";
    transform:scaleX(0);
    transform-origin:right;
    transition:transform 180ms ease;
}

.header nav a:hover{
    color:#fff;
}

.header nav a:hover::after,
.header nav a:focus-visible::after,
.header nav a.is-active::after{
    transform:scaleX(1);
    transform-origin:left;
}

.header nav a.is-active{
    color:#fff;
}

.header__cta{
    display:inline-flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:0 28px;
    border:1px solid rgba(18,213,229,.62);
    border-radius:var(--radius-button);
    background:var(--accent);
    box-shadow:0 10px 30px rgba(18,213,229,.12);
    color:#031216;
    font-size:14px;
    font-weight:750;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.header__cta:hover{
    background:#42e2ed;
    box-shadow:0 15px 36px rgba(18,213,229,.22);
    transform:translateY(-2px);
}


/* ==========================================
   HERO
========================================== */

.hero{
    position:relative;
    min-height:760px;
    overflow:clip;
    isolation:isolate;
}

.hero::before{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(90deg,rgba(0,14,30,.98) 0%,rgba(0,14,30,.84) 31%,rgba(0,14,30,.12) 68%,rgba(0,14,30,.08) 100%),
        linear-gradient(0deg,rgba(0,14,30,.98) 0%,transparent 35%);
    content:"";
    pointer-events:none;
}

.hero>.container{
    position:relative;
    z-index:1;
    display:flex;
    min-height:760px;
    flex-direction:column;
    gap:25px;
    padding:clamp(44px,5vw,76px) 0 34px;
}

.hero__statement{
    max-width:800px;
    color:#f5f9fc;
    font-size:clamp(46px,5vw,76px);
    font-weight:650;
    line-height:1.1;
    white-space:nowrap;
}

.hero__statement span{
    color:var(--accent);
}

.hero__intro{
    display:grid;
    max-width:660px;
    gap:5px;
}

.hero__title{
    max-width:660px;
    color:#dce8ee;
    font-size:clamp(18px,1.45vw,22px);
    font-weight:600;
    line-height:1.42;
}

.hero .text{
    max-width:660px;
    color:#c1d0db;
    font-size:clamp(16px,1.3vw,20px);
    line-height:1.62;
}

.buttons_block{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:8px;
    margin-bottom:clamp(34px,5vw,68px);
}

.hero__primary,
.hero__secondary{
    display:inline-flex;
    min-height:56px;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:0 30px;
    border-radius:var(--radius-button);
    font-size:15px;
    font-weight:700;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.hero__primary{
    background:var(--accent);
    box-shadow:0 14px 42px rgba(18,213,229,.18);
    color:#031216;
}

.hero__secondary{
    border:1px solid rgba(18,213,229,.38);
    background:rgba(2,15,27,.48);
    color:#eefaff;
}

.hero__secondary .icon{
    width:19px;
    height:19px;
    transition:transform 180ms ease;
}

.hero__primary:hover,
.hero__secondary:hover{
    transform:translateY(-3px);
}

.hero__primary:hover{
    background:#42e2ed;
    box-shadow:0 18px 50px rgba(18,213,229,.27);
}

.hero__secondary:hover{
    border-color:var(--accent);
    background:rgba(10,35,48,.82);
}

.hero__secondary:hover .icon{
    transform:translateX(4px);
}

.hero>.container>div:last-child{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    margin-top:auto;
}

.hero article{
    display:grid;
    min-width:0;
    grid-template-columns:44px minmax(0,1fr);
    column-gap:15px;
    align-content:center;
    padding:22px;
    border:1px solid rgba(135,191,216,.15);
    border-radius:20px;
    background:rgba(5,22,37,.68);
    box-shadow:0 16px 40px rgba(0,0,0,.14);
    backdrop-filter:blur(10px);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.hero article .icon{
    width:38px;
    height:38px;
    grid-row:1 / 3;
    align-self:center;
}

.hero article h3{
    overflow-wrap:anywhere;
    color:#fff;
    font-size:17px;
    font-weight:600;
    line-height:1.25;
}

.hero article p{
    margin-top:4px;
    color:#9bb3c3;
    font-size:12px;
    line-height:1.35;
}

@media (hover:hover){
    .hero article:hover{
        border-color:rgba(18,213,229,.42);
        background:rgba(8,34,48,.86);
        transform:translateY(-4px);
    }
}

/* ==========================================
   LANDING MIDDLE
========================================== */

.content{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:96px;
    isolation:isolate;
}

.content::before{
    position:absolute;
    inset:5% 0 auto;
    z-index:-1;
    height:760px;
    background:
        radial-gradient(circle at 18% 20%,rgba(18,213,229,.08),transparent 34%),
        radial-gradient(circle at 82% 58%,rgba(30,101,150,.09),transparent 30%);
    content:"";
    pointer-events:none;
}

.landing-section{
    position:relative;
}

.section-heading{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:64px;
    align-items:end;
    margin-bottom:36px;
}

.section-heading_compact{
    margin-bottom:32px;
}

.section-heading h2{
    max-width:920px;
}

.section-heading_wide{
    grid-template-columns:1fr;
}

.section-heading_wide h2{
    max-width:1400px;
}

.section-heading__lead{
    max-width:600px;
    padding-bottom:5px;
    font-size:18px;
    line-height:1.65;
}

.section-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    color:var(--accent);
    font-size:12px;
    font-weight:700;
    letter-spacing:.13em;
    line-height:1.3;
    text-transform:uppercase;
}

.section-kicker::before{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 18px rgba(18,213,229,.65);
    content:"";
}


/* Life scenarios */

.stories-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.story-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:24px;
    background:
        linear-gradient(180deg,rgba(19,35,53,.96),rgba(8,22,34,.98));
    box-shadow:0 22px 60px rgba(0,0,0,.16);
    transition:border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}

.story-card:hover{
    border-color:rgba(18,213,229,.35);
    box-shadow:0 28px 70px rgba(0,0,0,.24);
    transform:translateY(-4px);
}

.story-card__media{
    position:relative;
    aspect-ratio:1.15/1;
    overflow:hidden;
    background:#07131f;
}

.story-card__media::after{
    position:absolute;
    inset:auto 0 0;
    height:42%;
    background:linear-gradient(transparent,rgba(6,17,29,.88));
    content:"";
}

.story-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 500ms ease;
}

.story-card:hover .story-card__media img{
    transform:scale(1.025);
}

.story-card__number{
    position:absolute;
    right:18px;
    bottom:16px;
    z-index:1;
    display:grid;
    min-width:38px;
    height:28px;
    place-items:center;
    border:1px solid rgba(18,213,229,.46);
    border-radius:9px;
    background:rgba(3,18,28,.78);
    color:var(--accent);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
}

.story-card__body{
    display:flex;
    min-height:226px;
    flex-direction:column;
    gap:18px;
    padding:24px;
}

.story-card__title{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:12px;
    align-items:center;
}

.story-card__title .icon{
    width:30px;
    height:30px;
    color:var(--accent);
}

.story-card__title h3{
    color:var(--text);
    font-size:20px;
    font-weight:600;
    line-height:1.25;
}

.story-card__body p{
    font-size:15px;
    line-height:1.65;
}


/* One connected system */

.system-card{
    overflow:hidden;
    padding:46px 46px 34px;
    border:1px solid rgba(18,213,229,.2);
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 50% 62%,rgba(18,213,229,.11),transparent 34%),
        linear-gradient(145deg,#0c1b2a,#071521 72%);
    box-shadow:0 30px 90px rgba(0,0,0,.2);
}

.system-card__header{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:64px;
    align-items:end;
}

.system-card__header h2{
    max-width:760px;
}

.system-card__intro{
    display:flex;
    flex-direction:column;
    gap:16px;
}

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

.system-card__intro strong{
    color:#d9f8fb;
    font-size:14px;
    font-weight:600;
}

.system-card__scroller{
    margin:28px -14px 0;
    padding:14px;
    overflow:hidden;
    border-radius:22px;
}

.system-card__scroller:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
}

.system-card__visual{
    min-width:0;
    text-align:center;
}

.system-card__visual img{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 24px 28px rgba(0,0,0,.45));
}

.system-card__visual figcaption{
    margin-top:4px;
    color:#7fa0b5;
    font-size:12px;
    letter-spacing:.05em;
}

.system-points{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
}

.system-points li{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:13px 10px;
    border:1px solid rgba(159,178,201,.13);
    border-radius:13px;
    background:rgba(3,15,24,.48);
}

.system-points .icon{
    width:21px;
    height:21px;
    flex:0 0 21px;
    color:var(--accent);
}

.system-points span{
    overflow:hidden;
    color:#c4d4df;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* Offline reliability */

.reliability-card{
    display:grid;
    grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
    gap:20px;
}

.reliability-card__promise,
.reliability-state{
    border:1px solid var(--border);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(16,35,53,.96),rgba(7,22,34,.98));
}

.reliability-card__promise{
    display:flex;
    min-height:100%;
    flex-direction:column;
    justify-content:center;
    padding:38px;
    background:
        radial-gradient(circle at 24% 18%,rgba(18,213,229,.12),transparent 34%),
        linear-gradient(145deg,#102638,#091925);
}

.reliability-card__icon{
    display:grid;
    width:64px;
    height:64px;
    margin-bottom:28px;
    place-items:center;
    border:1px solid rgba(18,213,229,.36);
    border-radius:20px;
    background:rgba(18,213,229,.09);
    color:var(--accent);
}

.reliability-card__icon .icon{
    width:34px;
    height:34px;
}

.reliability-card__promise h3{
    max-width:520px;
    margin-bottom:18px;
    font-size:clamp(24px,2.2vw,36px);
    font-weight:600;
    line-height:1.18;
}

.reliability-card__promise>p:last-child{
    font-size:16px;
    line-height:1.7;
}

.reliability-states{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.reliability-state{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px 30px;
}

.reliability-state_offline{
    border-color:rgba(255,102,118,.25);
}

.reliability-state_online{
    border-color:rgba(113,212,61,.28);
}

.reliability-state header{
    display:flex;
    align-items:flex-start;
    gap:13px;
    min-height:60px;
    margin-bottom:28px;
    padding-bottom:23px;
    border-bottom:1px solid rgba(159,178,201,.12);
}

.reliability-state header>div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.reliability-state header strong{
    font-size:18px;
}

.reliability-state header small{
    color:#7690a3;
    font-size:12.5px;
}

.status-dot{
    width:10px;
    height:10px;
    flex:0 0 10px;
    margin-top:7px;
    border-radius:50%;
}

.status-dot_offline{
    background:#ff6676;
    box-shadow:0 0 16px rgba(255,102,118,.42);
}

.status-dot_online{
    background:#71d43d;
    box-shadow:0 0 16px rgba(113,212,61,.52);
}

.reliability-state ul{
    display:grid;
    gap:18px;
}

.reliability-state li{
    display:grid;
    grid-template-columns:21px minmax(0,1fr);
    gap:12px;
    align-items:start;
    color:#becdd7;
    font-size:15px;
    line-height:1.45;
}

.reliability-state li .icon{
    width:20px;
    height:20px;
    margin-top:1px;
    color:var(--accent);
}

.reliability-state_online li .icon{
    color:#71d43d;
}


/* LoRa */

.lora-card{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(480px,.94fr);
    min-height:650px;
    overflow:hidden;
    border:1px solid rgba(18,213,229,.26);
    border-radius:var(--radius);
    background:
        linear-gradient(135deg,rgba(8,29,43,.98),rgba(5,17,27,.98));
    box-shadow:0 34px 100px rgba(0,0,0,.24);
}

.lora-card__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:52px;
}

.lora-card__copy h2{
    max-width:690px;
    margin-bottom:22px;
}

.lora-card__lead{
    max-width:700px;
    font-size:17px;
    line-height:1.72;
}

.lora-proof-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:34px;
}

.lora-proof-grid>div{
    display:grid;
    min-width:0;
    grid-template-columns:34px minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:2px 12px;
    padding:16px;
    border:1px solid rgba(159,178,201,.13);
    border-radius:15px;
    background:rgba(4,17,27,.48);
}

.lora-proof-grid .icon{
    width:29px;
    height:29px;
    grid-row:1/3;
    color:var(--accent);
}

.lora-proof-grid strong{
    color:#effbfc;
    font-size:17px;
}

.lora-proof-grid span{
    color:#7891a3;
    font-size:12px;
}

.lora-card__note{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:16px;
    align-items:center;
    margin-top:26px;
    padding:18px;
    border:1px solid rgba(18,213,229,.34);
    border-radius:16px;
    background:
        linear-gradient(110deg,rgba(18,213,229,.12),rgba(18,213,229,.035));
    box-shadow:inset 0 1px rgba(255,255,255,.035);
}

.lora-card__note-icons{
    display:flex;
    align-items:center;
}

.lora-card__note-icons .icon{
    width:38px;
    height:38px;
    padding:8px;
    border:1px solid rgba(18,213,229,.3);
    border-radius:50%;
    background:#071925;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}

.lora-card__note-icons .icon+ .icon{
    margin-left:-6px;
}

.lora-card__note p{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:5px;
}

.lora-card__note strong{
    color:var(--accent);
    font-size:16px;
    line-height:1.25;
}

.lora-card__note span{
    color:#c2d4dd;
    font-size:13px;
    line-height:1.5;
}

.lora-card__note small{
    color:#7792a3;
    font-size:13px;
    line-height:1.45;
}

.lora-visual{
    position:relative;
    min-height:650px;
    overflow:hidden;
    border-left:1px solid rgba(18,213,229,.12);
    background:
        radial-gradient(circle at 50% 50%,rgba(18,213,229,.16),transparent 18%),
        radial-gradient(circle at 50% 50%,rgba(18,213,229,.05),transparent 60%),
        linear-gradient(155deg,rgba(12,39,53,.85),rgba(3,15,24,.92));
}

.lora-ring{
    position:absolute;
    top:50%;
    left:50%;
    border:1px solid rgba(18,213,229,.19);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

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

.lora-ring_inner{
    width:300px;
    height:300px;
    border-color:rgba(18,213,229,.27);
}

.lora-hub{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:grid;
    width:134px;
    height:134px;
    place-content:center;
    border:1px solid rgba(18,213,229,.65);
    border-radius:50%;
    background:#071925;
    box-shadow:0 0 60px rgba(18,213,229,.16);
    text-align:center;
    transform:translate(-50%,-50%);
}

.lora-sender::after{
    position:absolute;
    inset:-14px;
    border:1px solid rgba(18,213,229,.36);
    border-radius:50%;
    content:"";
    animation:lora-pulse 2.8s ease-out infinite;
}

@keyframes lora-pulse{
    0%{opacity:.8;transform:scale(.84)}
    75%,100%{opacity:0;transform:scale(1.34)}
}

.lora-hub .icon{
    width:34px;
    height:34px;
    margin:0 auto 5px;
    color:var(--accent);
}

.lora-hub strong{
    font-size:17px;
}

.lora-hub span{
    color:#7394a8;
    font-size:10px;
}

.lora-node{
    position:absolute;
    z-index:2;
    display:flex;
    min-width:142px;
    align-items:center;
    gap:9px;
    padding:12px 14px;
    border:1px solid rgba(18,213,229,.22);
    border-radius:14px;
    background:rgba(4,18,29,.88);
    box-shadow:0 16px 34px rgba(0,0,0,.26);
}

.lora-node::after{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 15px rgba(18,213,229,.8);
    content:"";
}

.lora-node .icon{
    width:24px;
    height:24px;
    color:var(--accent);
}

.lora-node>span,
.lora-gateway>span{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:1px;
}

.lora-node span strong,
.lora-gateway span strong{
    color:#d7e7ec;
    font-size:12px;
    font-weight:650;
}

.lora-node span small,
.lora-gateway span small{
    color:#6f8c9f;
    font-size:9px;
    line-height:1.3;
}

.lora-node_active{
    border-color:rgba(113,212,61,.55);
    background:rgba(30,68,42,.72);
    box-shadow:0 16px 38px rgba(0,0,0,.28),0 0 32px rgba(113,212,61,.1);
}

.lora-node_active::after{
    background:#71d43d;
    box-shadow:0 0 18px rgba(113,212,61,.9);
}

.lora-node_active .icon,
.lora-node_active span small{
    color:#8be457;
}

.lora-gateway{
    position:absolute;
    top:5.5%;
    left:50%;
    z-index:3;
    display:flex;
    min-width:220px;
    align-items:center;
    gap:10px;
    padding:11px 15px;
    border:1px dashed rgba(53,181,255,.38);
    border-radius:14px;
    background:rgba(3,18,29,.9);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
    transform:translateX(-50%);
}

.lora-gateway .icon{
    width:27px;
    height:27px;
    color:var(--accent-strong);
}

.lora-node_house{
    top:15%;
    left:12%;
}

.lora-node_house::after,
.lora-node_apiary::after{
    right:-4px;
}

.lora-node_greenhouse{
    top:17%;
    right:8%;
}

.lora-node_greenhouse::after,
.lora-node_gate::after{
    left:-4px;
}

.lora-node_apiary{
    bottom:18%;
    left:9%;
}

.lora-node_gate{
    right:12%;
    bottom:17%;
}

.lora-range{
    position:absolute;
    right:12%;
    bottom:6%;
    left:12%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    color:#7897aa;
    font-size:11px;
}

.lora-range span{
    color:#7897aa;
}

.lora-range i{
    position:relative;
    height:1px;
    background:linear-gradient(90deg,rgba(18,213,229,.2),var(--accent));
}

.lora-range i::before,
.lora-range i::after{
    position:absolute;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
    content:"";
    transform:translateY(-50%);
}

.lora-range i::before{left:0}
.lora-range i::after{right:0}

.lora-range strong{
    color:var(--accent);
    font-size:12px;
}


/* AI team and PWA */

.intelligence-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);
    gap:20px;
}

.assistant-card,
.pwa-card{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 90% 5%,rgba(18,213,229,.08),transparent 30%),
        linear-gradient(145deg,#0f2232,#071722);
    box-shadow:0 28px 80px rgba(0,0,0,.18);
}

.assistant-card{
    padding:38px;
}

.assistant-card__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.assistant-card__header h3,
.pwa-card h3{
    font-size:clamp(25px,2.5vw,38px);
    font-weight:600;
    line-height:1.15;
}

.development-badge{
    flex:0 0 auto;
    padding:8px 11px;
    border:1px solid rgba(255,180,74,.35);
    border-radius:999px;
    background:rgba(255,180,74,.08);
    color:#ffc46d;
    font-size:10px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.assistant-card__lead{
    max-width:770px;
    margin-top:18px;
    font-size:16px;
}

.assistant-roles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:28px;
}

.assistant-role{
    display:grid;
    min-width:0;
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:16px;
    border:1px solid rgba(18,213,229,.16);
    border-radius:16px;
    background:rgba(3,16,25,.55);
}

.assistant-role .icon{
    width:36px;
    height:36px;
    color:var(--accent);
}

.assistant-role>div{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
}

.assistant-role strong{
    font-size:13px;
}

.assistant-role span{
    min-height:2.7em;
    color:#7892a4;
    font-size:11px;
    line-height:1.35;
}

.assistant-request{
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    gap:18px;
    align-items:center;
    margin-top:18px;
    padding:20px;
    border:1px solid rgba(18,213,229,.24);
    border-radius:18px;
    background:linear-gradient(100deg,rgba(18,213,229,.09),rgba(4,18,27,.68));
}

.assistant-request__voice{
    position:relative;
    display:grid;
    width:62px;
    height:62px;
    place-items:center;
    border:1px solid rgba(18,213,229,.4);
    border-radius:50%;
    background:rgba(18,213,229,.1);
}

.assistant-request__voice .icon{
    width:30px;
    height:30px;
    color:var(--accent);
}

.assistant-request__voice span{
    position:absolute;
    inset:-6px;
    border:1px solid rgba(18,213,229,.15);
    border-radius:50%;
}

.assistant-request small{
    color:#72a7b8;
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.assistant-request p{
    margin-top:4px;
    color:#eff9fb;
    font-size:15px;
    line-height:1.45;
}

.assistant-digest{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:14px;
    align-items:start;
    margin-top:14px;
    padding:17px 20px;
    border-radius:16px;
    background:rgba(113,212,61,.055);
}

.assistant-digest .icon{
    width:28px;
    height:28px;
    color:#71d43d;
}

.assistant-digest>div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.assistant-digest strong{
    font-size:13px;
}

.assistant-digest span{
    color:#7f99a9;
    font-size:12px;
}

.pwa-card{
    display:flex;
    min-width:0;
    flex-direction:column;
    overflow:hidden;
    padding:38px;
}

.pwa-card__copy>p:last-of-type{
    margin-top:16px;
    font-size:15px;
    line-height:1.65;
}

.pwa-card ul{
    display:grid;
    gap:18px;
    margin-top:28px;
}

.pwa-card li{
    display:grid;
    grid-template-columns:21px minmax(0,1fr);
    gap:12px;
    align-items:start;
    color:#b8cad4;
    font-size:15px;
    line-height:1.45;
}

.pwa-card li .icon{
    width:20px;
    height:20px;
    margin-top:1px;
    color:#71d43d;
}


.text-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:24px;
    color:var(--accent);
    font-size:14px;
    font-weight:600;
}

.text-link .icon{
    width:19px;
    height:19px;
    transition:transform 180ms ease;
}

.text-link:hover .icon{
    transform:translateX(4px);
}


/* Team and trust */

.about-card{
    display:grid;
    grid-template-columns:minmax(420px,.88fr) minmax(0,1.12fr);
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#0b1b29;
    box-shadow:0 34px 100px rgba(0,0,0,.22);
}

.about-card__copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:50px;
}

.about-card__copy h2{
    margin-bottom:22px;
}

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

.about-card__copy>p:not(.section-kicker) a,
.footer__origin a{
    color:var(--accent);
    transition:color 160ms ease;
}

.about-card__copy>p:not(.section-kicker) a{
    text-decoration:none;
}

.about-card__copy>p:not(.section-kicker) a:hover{
    color:#42e2ed;
}

.footer__origin a{
    text-decoration:underline;
    text-decoration-color:rgba(18,213,229,.28);
    text-underline-offset:3px;
}

.footer__origin a:hover{
    text-decoration-color:currentColor;
}

.about-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:30px;
}

.about-stats>div{
    display:flex;
    min-width:0;
    min-height:104px;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    padding:20px;
    border:1px solid rgba(18,213,229,.14);
    border-radius:15px;
    background:rgba(3,16,25,.42);
}

.about-stats strong{
    color:var(--accent);
    font-size:34px;
    font-weight:600;
    line-height:1;
}

.about-stats span{
    color:#7e96a7;
    font-size:13px;
    line-height:1.35;
}

.about-card__visual{
    position:relative;
    min-height:560px;
    overflow:hidden;
    margin:32px;
    border:1px solid rgba(144,196,217,.16);
    border-radius:19px;
    background:#06131d;
    box-shadow:0 22px 54px rgba(0,0,0,.24);
}


.about-card__visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* Safety transition */

.safety-card{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    overflow:hidden;
    border:1px solid rgba(113,212,61,.2);
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 0 50%,rgba(18,213,229,.08),transparent 34%),
        linear-gradient(135deg,#0d2030,#081824);
    box-shadow:0 28px 80px rgba(0,0,0,.18);
}

.safety-card__copy{
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    gap:20px;
    align-items:start;
    padding:40px 44px;
}

.safety-card__mark{
    display:grid;
    width:62px;
    height:62px;
    place-items:center;
    border:1px solid rgba(113,212,61,.38);
    border-radius:18px;
    background:rgba(113,212,61,.08);
    box-shadow:0 0 34px rgba(113,212,61,.08);
}

.safety-card__mark .icon{
    width:31px;
    height:31px;
    color:var(--success);
}

.safety-card__copy h2{
    max-width:620px;
    margin:11px 0 15px;
    font-size:clamp(31px,3vw,42px);
    line-height:1.12;
}

.safety-card__copy>div>p:last-child{
    max-width:650px;
    color:#91a9b8;
    font-size:15px;
    line-height:1.65;
}

.safety-card__points{
    display:grid;
    align-content:center;
    padding:24px 38px;
    border-left:1px solid rgba(144,196,217,.13);
    background:rgba(2,14,24,.24);
}

.safety-card__points li{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:15px;
    align-items:center;
    padding:19px 0;
    border-bottom:1px solid rgba(144,196,217,.1);
}

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

.safety-card__points .icon{
    width:29px;
    height:29px;
    color:var(--accent);
}

.safety-card__points span{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.safety-card__points strong{
    color:#e8f2f5;
    font-size:17px;
    font-weight:500;
}

.safety-card__points small{
    color:#728c9d;
    font-size:12px;
    line-height:1.45;
}

/* ==========================================
   SHARED INTERACTIONS
========================================== */

.connection-modes{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:28px 0 22px;
}

.connection-modes li{
    display:grid;
    min-width:0;
    grid-template-columns:42px minmax(0,1fr);
    gap:13px;
    align-items:center;
    padding:16px 18px;
    border:1px solid rgba(134,190,214,.16);
    border-radius:16px;
    background:rgba(2,15,26,.42);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

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

.connection-modes li>span{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:2px;
}

.connection-modes strong{
    color:#f1fbff;
    font-size:14px;
}

.connection-modes small{
    color:#7f98a9;
    font-size:11px;
    line-height:1.35;
}

.text-link:focus-visible{
    border-radius:5px;
}

.pwa-card{
    position:relative;
    isolation:isolate;
}

.pwa-card::before{
    position:absolute;
    right:-120px;
    bottom:-140px;
    z-index:-1;
    width:360px;
    height:360px;
    border:1px solid rgba(18,213,229,.13);
    border-radius:50%;
    box-shadow:
        0 0 0 54px rgba(18,213,229,.025),
        0 0 0 108px rgba(18,213,229,.018);
    content:"";
}

.pwa-card .text-link{
    margin-top:36px;
    padding-top:0;
    font-size:15px;
}

@media (hover:hover){
    .connection-modes li:hover,
    .system-points li:hover,
    .lora-proof-grid>div:hover,
    .assistant-role:hover{
        border-color:rgba(18,213,229,.4);
        background-color:rgba(18,213,229,.055);
        transform:translateY(-3px);
    }

    .reliability-state:hover{
        border-color:rgba(18,213,229,.28);
        transform:translateY(-3px);
    }

    .feature:hover{
        border-color:rgba(18,213,229,.4);
        background:rgba(18,213,229,.055);
        transform:translateY(-4px);
    }
}

.system-points li,
.lora-proof-grid>div,
.assistant-role,
.reliability-state{
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}


/* ==========================================
   PILOT PROJECT
========================================== */

.pilot{
    --pilot-pad-x:clamp(38px,4vw,64px);
    --pilot-pad-y:clamp(38px,4vw,64px);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(118,183,210,.18);
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 72% 18%,rgba(18,213,229,.08),transparent 32%),
        linear-gradient(145deg,#101f2f,#0a1724);
    box-shadow:var(--shadow);
}

.pilot::before{
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 1px rgba(255,255,255,.025);
    content:"";
    pointer-events:none;
}

.pilot__content{
    display:grid;
    min-height:700px;
    grid-template-columns:minmax(0,58%) minmax(0,42%);
    grid-template-areas:
        "copy portrait"
        "cta portrait";
    grid-template-rows:minmax(0,1fr) auto;
}

.pilot__left{
    grid-area:copy;
    position:relative;
    z-index:2;
    display:flex;
    min-width:0;
    flex-direction:column;
    padding:var(--pilot-pad-y) var(--pilot-pad-x) 0;
}

.pilot__left h2{
    max-width:820px;
    margin-bottom:26px;
}

.pilot__left>p:not(.section-kicker){
    max-width:780px;
    color:#b3c5d1;
    font-size:16px;
    line-height:1.75;
}

.pilot__features{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:38px;
}

.feature{
    display:flex;
    min-height:146px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:22px 16px;
    border:1px solid rgba(133,188,212,.16);
    border-radius:17px;
    background:rgba(3,18,30,.3);
    text-align:center;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

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

.feature__title{
    color:#b9cad5;
    font-size:13px;
    line-height:1.35;
}

.pilot__info{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:18px;
    align-items:start;
    margin-top:24px;
    padding:22px;
    border:1px solid rgba(18,213,229,.2);
    border-radius:18px;
    background:rgba(2,17,29,.28);
}

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

.pilot__info-title{
    margin-bottom:6px;
    color:var(--accent);
    font-weight:650;
}

.pilot__info-text{
    color:#a9bfcc;
    font-size:14px;
    line-height:1.55;
}

.pilot__bottom{
    grid-area:cta;
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:0;
    padding:36px var(--pilot-pad-x) var(--pilot-pad-y);
}

.btn-primary{
    display:inline-flex;
    min-height:58px;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 30px;
    border-radius:var(--radius-button);
    background:var(--accent);
    box-shadow:0 14px 40px rgba(18,213,229,.14);
    color:#031216;
    font-weight:750;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.btn-primary .icon{
    width:20px;
    height:20px;
    color:#031216;
    transition:transform 180ms ease;
}

.btn-primary:hover{
    background:#42e2ed;
    box-shadow:0 18px 48px rgba(18,213,229,.24);
    transform:translateY(-3px);
}

.btn-primary:hover .icon{
    transform:translateX(3px);
}

.pilot__hint{
    display:flex;
    max-width:270px;
    align-items:center;
    gap:10px;
    color:#718697;
    font-size:13px;
    line-height:1.4;
}

.pilot__hint .icon{
    width:34px;
    height:20px;
    color:#4b8298;
}

.pilot__hint span{
    color:inherit;
}

.pilot__right{
    grid-area:portrait;
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#06131f;
}

.pilot__right::before{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg,#0d1c2a 0%,transparent 19%),
        linear-gradient(0deg,rgba(3,14,24,.58) 0%,transparent 42%);
    content:"";
    pointer-events:none;
}

.pilot__right img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 20%;
    transition:transform 500ms ease;
}

.pilot__card{
    position:absolute;
    right:34px;
    bottom:34px;
    left:34px;
    z-index:2;
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:17px;
    align-items:start;
    padding:24px;
    border:1px solid rgba(131,189,213,.2);
    border-radius:20px;
    background:rgba(3,15,25,.82);
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    backdrop-filter:blur(20px);
}

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

.pilot__name{
    margin-bottom:6px;
    color:var(--accent);
    font-weight:650;
    line-height:1.35;
}

.pilot__description{
    color:#a7b8c4;
    font-size:14px;
    line-height:1.55;
}

@media (hover:hover){
    .pilot:hover .pilot__right img{
        transform:scale(1.018);
    }
}


/* ==========================================
   CONTACT DRAWER
========================================== */

body.contact-panel-open{
    overflow:hidden;
}

.contact-drawer{
    position:fixed;
    inset:0;
    z-index:240;
    pointer-events:none;
    visibility:hidden;
    transition:visibility 0s linear 360ms;
}

.contact-drawer.is-open{
    pointer-events:auto;
    visibility:visible;
    transition-delay:0s;
}

.contact-drawer__overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,7,14,.72);
    opacity:0;
    transition:opacity 280ms ease;
}

.contact-drawer.is-open .contact-drawer__overlay{
    opacity:1;
}

.contact-panel{
    position:absolute;
    top:0;
    right:0;
    width:min(660px,100vw);
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-left:1px solid rgba(18,213,229,.32);
    background:
        radial-gradient(circle at 10% 8%,rgba(18,213,229,.1),transparent 27%),
        linear-gradient(160deg,#0d1d2b,#06131e 72%);
    box-shadow:-30px 0 90px rgba(0,0,0,.5);
    transform:translateX(104%);
    transition:transform 360ms cubic-bezier(.22,.8,.25,1);
    scrollbar-color:rgba(18,213,229,.38) transparent;
}

.contact-drawer.is-open .contact-panel{
    transform:translateX(0);
}

.contact-panel__body{
    position:relative;
    display:flex;
    min-height:100%;
    flex-direction:column;
    padding:32px clamp(32px,3.3vw,46px) 36px;
}

.contact-panel__header{
    position:absolute;
    top:18px;
    right:32px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.contact-panel__close{
    display:grid;
    width:52px;
    height:52px;
    flex:0 0 52px;
    place-items:center;
    border:0;
    border-radius:50%;
    background:transparent;
}

.contact-panel__close .icon{
    width:29px;
    height:29px;
    color:#d8e7ed;
    transition:color 180ms ease,transform 260ms cubic-bezier(.22,.8,.25,1);
}

.contact-panel__close:hover .icon{
    color:var(--accent);
    transform:rotate(90deg);
}

.contact-panel__close:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:-4px;
}

.contact-panel__content>h2,
.contact-success h2{
    max-width:430px;
    font-size:40px;
    font-weight:600;
    line-height:1.03;
}

.contact-panel__content>h2{
    margin-bottom:22px;
    white-space:nowrap;
}

.contact-panel__anna{
    position:relative;
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:21px;
    align-items:center;
    margin:22px 0 32px;
    padding:20px 22px;
    border:1px solid rgba(18,213,229,.22);
    border-radius:17px;
    background:
        linear-gradient(115deg,rgba(18,213,229,.095),rgba(3,17,28,.36));
    box-shadow:inset 0 1px rgba(255,255,255,.03);
}

.contact-panel__anna>img{
    width:104px;
    height:104px;
    border:1px solid rgba(18,213,229,.45);
    border-radius:18px;
    object-fit:cover;
    object-position:50% 18%;
}

.contact-panel__anna p{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.contact-panel__anna strong{
    color:#eff9fc;
    font-size:20px;
    line-height:1.3;
}

.contact-panel__anna small{
    color:var(--accent);
    font-size:13px;
    font-weight:650;
    letter-spacing:.02em;
}

.contact-panel__anna span{
    margin-top:3px;
    color:#b7c8d1;
    font-size:15px;
    line-height:1.48;
}

.contact-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.contact-field{
    position:relative;
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:9px;
}

.contact-field>span:first-child{
    color:#e6f0f4;
    font-size:13px;
    font-weight:600;
}

.contact-field input,
.contact-field textarea{
    width:100%;
    border:1px solid rgba(144,196,217,.3);
    border-radius:12px;
    outline:0;
    background:rgba(2,15,25,.58);
    color:#f4fbff;
    transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease;
}

.contact-field input{
    height:50px;
    padding:0 15px;
}

.contact-field textarea{
    min-height:116px;
    resize:vertical;
    padding:14px 15px 30px;
}

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

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:#5e7688;
}

.contact-field input:focus,
.contact-field textarea:focus{
    border-color:var(--accent);
    background:#061824;
    box-shadow:0 0 0 3px rgba(18,213,229,.1);
}

.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"]{
    border-color:var(--danger);
    box-shadow:0 0 0 3px rgba(255,90,102,.08);
}

.contact-field__meta{
    position:absolute;
    right:12px;
    bottom:12px;
    color:#5c7789;
    font-size:10px;
}

.contact-field__meta b{
    color:inherit;
    font-weight:500;
}

.contact-field__error{
    color:#ff8992;
    font-size:11px;
    line-height:1.4;
}

.contact-field__error:empty{
    display:none;
}

.contact-field_honeypot{
    position:absolute !important;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.contact-consents{
    display:grid;
    min-width:0;
    gap:8px;
    margin-top:4px;
}

.contact-consent{
    position:relative;
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:2px 0;
    cursor:pointer;
}

.contact-consent_primary{
    margin-top:2px;
    padding-top:10px;
    border-top:1px solid rgba(128,187,212,.1);
}

.contact-consent:hover .contact-consent__check{
    border-color:rgba(18,213,229,.72);
}

.contact-consent>input{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.contact-consent__check{
    display:grid;
    width:22px;
    height:22px;
    margin-top:1px;
    place-items:center;
    border:1px solid rgba(154,198,217,.42);
    border-radius:6px;
    background:rgba(2,15,25,.72);
    box-shadow:inset 0 1px rgba(255,255,255,.035);
    transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease,transform 160ms ease;
}

.contact-consent__check .icon{
    width:15px;
    height:15px;
    color:#031216;
    opacity:0;
    transform:scale(.65);
    transition:opacity 150ms ease,transform 150ms ease;
}

.contact-consent>input:checked + .contact-consent__check{
    border-color:var(--accent);
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(18,213,229,.09),0 7px 18px rgba(18,213,229,.14);
}

.contact-consent>input:checked + .contact-consent__check .icon{
    opacity:1;
    transform:scale(1);
}

.contact-consent>input:focus-visible + .contact-consent__check{
    outline:2px solid var(--accent);
    outline-offset:3px;
}

.contact-consent>input[aria-invalid="true"] + .contact-consent__check{
    border-color:var(--danger);
    box-shadow:0 0 0 3px rgba(255,90,102,.08);
}

.contact-consent__text{
    color:#70899a;
    font-size:13px;
    line-height:1.45;
}

.contact-consent a{
    color:#b7e7ed;
    text-decoration:none;
    transition:color 160ms ease;
}

.contact-consent a:first-of-type{
    color:#d5fbff;
}

.contact-consent a:hover{
    color:var(--accent);
}

.contact-consent .contact-field__error{
    grid-column:2;
}

.contact-form__status{
    padding:11px 13px;
    border-radius:10px;
    font-size:12px;
    line-height:1.45;
}

.contact-form__status:empty{
    display:none;
}

.contact-form__status[data-type="loading"]{
    background:rgba(18,213,229,.07);
    color:#a7dfe5;
}

.contact-form__status[data-type="error"]{
    border:1px solid rgba(255,90,102,.25);
    background:rgba(255,90,102,.07);
    color:#ff9ea5;
}

.contact-submit,
.contact-success__close{
    display:inline-flex;
    min-height:56px;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:0 24px;
    border-radius:var(--radius-button);
    background:var(--accent);
    box-shadow:0 16px 40px rgba(18,213,229,.18);
    color:#031216;
    font-weight:750;
    transition:transform 180ms ease,background-color 180ms ease,box-shadow 180ms ease,filter 180ms ease;
}

.contact-submit{
    width:min(100%,270px);
    justify-self:start;
    margin-top:8px;
}

.contact-submit .icon{
    width:21px;
    height:21px;
    color:#031216;
}

.contact-submit:hover,
.contact-success__close:hover{
    background:#42e2ed;
    box-shadow:0 20px 48px rgba(18,213,229,.25);
    transform:translateY(-2px);
}

.contact-submit:disabled{
    cursor:wait;
    filter:saturate(.45);
    opacity:.68;
    transform:none;
}

.contact-success{
    display:flex;
    min-height:calc(100vh - 120px);
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding:30px 8px 70px;
}

.contact-success__icon{
    display:grid;
    width:92px;
    height:92px;
    margin-bottom:30px;
    place-items:center;
    border:1px solid rgba(113,212,61,.55);
    border-radius:50%;
    background:rgba(113,212,61,.1);
    box-shadow:0 0 0 16px rgba(113,212,61,.035),0 0 60px rgba(113,212,61,.16);
}

.contact-success__icon .icon{
    width:48px;
    height:48px;
    color:var(--success);
}

.contact-success>p:not(.section-kicker){
    max-width:410px;
    margin-top:20px;
    color:#adbfca;
    font-size:15px;
    line-height:1.65;
}

.contact-success>small{
    min-height:18px;
    margin-top:12px;
    color:#638092;
    font-size:11px;
}

.contact-success__close{
    margin-top:34px;
}


/* ==========================================
   FOOTER
========================================== */

.footer{
    margin-top:100px;
    padding:25px 0;
    border-top:1px solid rgba(128,187,212,.15);
    background:rgba(1,11,20,.62);
}

.footer__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.footer__logo{
    display:block;
    width:170px;
    flex:0 0 auto;
}

.footer__origin{
    flex:0 0 auto;
    color:#6f8797;
    font-size:12px;
    white-space:nowrap;
}

.footer nav{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    gap:clamp(16px,2vw,30px);
}

.footer nav a{
    color:#9fb3c1;
    font-size:14px;
    transition:color 180ms ease,transform 180ms ease;
}

.footer nav a:hover{
    color:var(--accent);
}

.footer__copyright{
    flex:0 0 auto;
    color:#516b7d;
    font-size:11px;
    white-space:nowrap;
}


/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }
}