/* ==========================================================================
   LORAWAN-BG.NET — вътрешни страници

   Началната страница е кадри на цял екран и живее със свой стил вътре в
   себе си. Тук е другото: страници с текст, които трябва да се четат.
   Общото между двете е палитрата и надписът - тъмно синьо-черно, #0090E0
   и празните главни букви.
   ========================================================================== */
:root{
    --bg:      #040d12;
    --bg-2:    #07161e;
    --card:    #0a1c26;
    --line:    #14313f;
    --line-2:  #1d4457;
    --text:    #dfe9ef;
    --text-2:  #8ba3b1;
    --blue:    #0090e0;
    --blue-lt: #4fc3f7;

    --w: 1280px;               /* ширина на съдържанието */
}

*{box-sizing:border-box}

/* Платното с геометрията стои закачено за екрана и НАЙ-ОТДОЛУ. За да не
   покрие съдържанието, всичко останало се вдига с един слой: позиционираният
   елемент със z-index:0 иначе се рисува над непозиционираните блокове. */
#geo{
    position:fixed;inset:0;z-index:0;
    display:block;width:100%;height:100%;
    pointer-events:none;opacity:.62;
}
.top,.hero,main,footer{position:relative;z-index:1}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:'Segoe UI',system-ui,-apple-system,'Noto Sans',sans-serif;
    font-size:16px;line-height:1.65;
    -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:var(--blue-lt);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---------------- горна лента ---------------- */
.top{
    position:sticky;top:0;z-index:20;
    background:rgba(4,13,18,.86);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.top-in{
    max-width:var(--w);margin:0 auto;padding:0 24px;
    height:64px;display:flex;align-items:center;gap:26px;
}

/* Надписът в лентата е плътен, не празен. Празните букви са запазени за
   логотипа на началната страница; при 17 пиксела контурът се слива. */
.logo{
    font-family:'Chakra Petch','Segoe UI',system-ui,sans-serif;
    font-weight:700;font-size:17px;letter-spacing:.03em;
    color:#fff;white-space:nowrap;
}
.logo:hover{text-decoration:none}
.logo .b{color:var(--blue)}
.logo .t{color:var(--text-2)}

.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{
    position:relative;color:var(--text-2);font-size:13px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;padding:6px 0;
    transition:color .25s;
}
.nav a:hover,.nav a.on{color:#fff;text-decoration:none}
.nav a::after{
    content:'';position:absolute;left:50%;bottom:0;width:0;height:2px;
    background:var(--blue);transform:translateX(-50%);
    transition:width .3s cubic-bezier(.16,1,.3,1);
}
.nav a:hover::after,.nav a.on::after{width:100%}

/* Платформата е отделно - тя не е раздел от сайта, а друга система. */
.nav .plat{
    padding:8px 15px;border:1px solid var(--line-2);border-radius:20px;
    color:var(--blue-lt);
}
.nav .plat:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.nav .plat::after{display:none}

.burger{
    display:none;margin-left:auto;width:52px;height:40px;
    padding:0;border:0;background:none;cursor:pointer;position:relative;
}
.burger span{
    position:absolute;left:6px;right:6px;height:3px;border-radius:3px;
    background:#fff;transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .2s;
}
.burger span:nth-child(1){top:9px}
.burger span:nth-child(2){top:19px;width:56%;right:auto}
.burger span:nth-child(3){top:29px}
.burger[aria-expanded="true"] span{background:var(--blue)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translateX(-18px)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

.sheet{
    position:fixed;inset:64px 0 0;z-index:19;
    background:rgba(3,10,14,.95);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet.open{opacity:1;visibility:visible}
.sheet-in{
    min-height:100%;display:flex;flex-direction:column;
    padding:26px 22px calc(26px + env(safe-area-inset-bottom));
}

.sheet-nav{display:flex;flex-direction:column}
.sheet-nav a{
    position:relative;display:block;
    padding:15px 0 14px;border-bottom:1px solid rgba(255,255,255,.07);
    color:#fff;font-size:clamp(23px,7.4vw,34px);font-weight:700;
    line-height:1.12;text-transform:uppercase;letter-spacing:.01em;
    opacity:0;transform:translateX(22px);
    transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1);
}
.sheet-nav a:hover{text-decoration:none}
.sheet.open .sheet-nav a{opacity:1;transform:none}
.sheet.open .sheet-nav a:nth-child(1){transition-delay:.06s}
.sheet.open .sheet-nav a:nth-child(2){transition-delay:.12s}
.sheet.open .sheet-nav a:nth-child(3){transition-delay:.18s}
.sheet.open .sheet-nav a:nth-child(4){transition-delay:.24s}

.sheet-nav small{
    display:block;font-size:11px;font-weight:600;letter-spacing:.2em;
    color:var(--blue);margin-bottom:3px;
}
/* Подредът казва какво има вътре. Без него менюто е пет думи на цял екран. */
.sheet-nav em{
    display:block;margin-top:5px;font-style:normal;
    font-size:12.5px;font-weight:500;letter-spacing:.02em;
    text-transform:none;color:var(--text-2);
}

/* Платформата е друга система, не раздел - затова е бутон, а не ред. */
.sheet-plat{
    display:flex;align-items:center;gap:13px;margin-top:22px;
    padding:14px 16px;border-radius:12px;
    border:1px solid var(--line-2);background:rgba(0,144,224,.09);
    opacity:0;transform:translateY(14px);
    transition:opacity .5s .3s,transform .5s .3s cubic-bezier(.16,1,.3,1);
}
.sheet.open .sheet-plat{opacity:1;transform:none}
.sheet-plat:hover{text-decoration:none}
.sheet-plat .ic{
    flex:0 0 auto;width:38px;height:38px;border-radius:10px;
    display:grid;place-items:center;color:var(--blue-lt);
    background:rgba(0,144,224,.14);border:1px solid var(--line-2);
}
.sheet-plat .ic svg{width:20px;height:20px}
.sheet-plat b{display:block;color:#fff;font-size:16px;font-weight:700}
.sheet-plat em{display:block;font-style:normal;font-size:12px;color:var(--text-2)}

.sheet-foot{
    margin-top:auto;padding-top:24px;
    opacity:0;transition:opacity .5s .38s;
}
.sheet.open .sheet-foot{opacity:1}
.sheet-call{
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 20px;border-radius:26px;background:var(--blue);color:#fff;
    font-size:17px;font-weight:700;letter-spacing:.02em;
}
.sheet-call:hover{text-decoration:none;background:#0a6ea8}
.sheet-call svg{width:19px;height:19px}
.sheet-meta{
    display:flex;flex-direction:column;gap:3px;margin-top:14px;
    font-size:12.5px;color:var(--text-2);
}

/* ---------------- заглавна част ---------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-img{
    position:absolute;inset:0;background-size:cover;background-position:center;
    /* Кадърът е фон, не илюстрация: потъмнен и стопен надолу, за да не се
       бори с текста върху него. */
    filter:brightness(.42) saturate(.85);
    -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 78%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 78%,transparent 100%);
}
.hero-in{position:relative;padding:78px 24px 68px;max-width:var(--w);margin:0 auto}
.eyebrow{
    font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    color:var(--blue);margin-bottom:12px;
}
.hero h1{
    margin:0 0 14px;font-size:clamp(30px,5vw,50px);line-height:1.1;
    font-weight:700;letter-spacing:-.01em;
}
.lede{max-width:64ch;font-size:clamp(16px,1.5vw,19px);color:var(--text-2);margin:0}

/* ---------------- съдържание ---------------- */
/* ВНИМАНИЕ: main носи и класа wrap. Ако тук пише само `main{padding:...}`,
   правилото .wrap{padding:0 24px} го надделява по специфичност и горният
   отстъп изчезва - заглавната част и първата кутия се долепят. Затова
   селекторът е main.wrap и отстъпът се задава изцяло тук. */
/* 30px = 8mm: CSS смята милиметъра за точно 96/25.4 пиксела. */
main.wrap{padding:30px 24px 24px}
section{margin-bottom:42px}
h2{font-size:clamp(21px,2.6vw,27px);line-height:1.25;margin:0 0 18px;font-weight:700}
h3{font-size:17px;margin:0 0 8px;font-weight:700}
p{margin:0 0 18px;max-width:78ch}
ul{margin:0 0 18px;padding-left:20px;max-width:78ch}
li{margin-bottom:9px}
strong{color:#fff}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.c{padding:20px 20px 18px}
.c h3{color:#fff}
.c p{color:var(--text-2);font-size:15px;margin:0}
.c .mark{
    width:34px;height:34px;border-radius:9px;margin-bottom:12px;
    display:grid;place-items:center;
    background:rgba(0,144,224,.14);border:1px solid var(--line-2);
    color:var(--blue-lt);font-weight:700;font-size:14px;
}

/* Таблица с числа - за обхват и скорости. На тесен екран се плъзга, вместо
   да се чупи: числата губят смисъл, ако колоните се разбъркат. */
.tw{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--blue-lt);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
   font-weight:600;white-space:nowrap}
td{color:var(--text-2)}
td:first-child{color:var(--text)}

.note{padding:16px 20px;margin:26px 0}
.note p{margin:0;color:var(--text-2)}

.steps{counter-reset:s;list-style:none;padding:0;margin:22px 0;max-width:76ch}
.steps li{
    counter-increment:s;position:relative;padding-left:44px;margin-bottom:20px;
}
.steps li::before{
    content:counter(s,decimal-leading-zero);
    position:absolute;left:0;top:1px;
    font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--blue);
    border:1px solid var(--line-2);border-radius:7px;
    width:30px;height:26px;display:grid;place-items:center;
}
.steps b{display:block;color:#fff}

.cta{
    display:inline-flex;align-items:center;gap:9px;
    padding:12px 22px;border-radius:24px;background:var(--blue);color:#fff;
    font-weight:600;font-size:15px;
}
.cta:hover{background:#0a6ea8;text-decoration:none}

/* ---------------- контакти ---------------- */
.kv{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kv .c b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--text-2);font-weight:600;margin-bottom:5px}
.kv .c span{font-size:17px;color:#fff}

/* ---------------- подножие ---------------- */
footer{
    border-top:1px solid var(--line);background:var(--bg-2);
    padding:34px 0 40px;margin-top:40px;
}
.foot-in{
    max-width:var(--w);margin:0 auto;padding:0 24px;
    display:flex;flex-wrap:wrap;gap:22px;align-items:center;
}
.foot-in .logo{font-size:20px}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.foot-nav a{color:var(--text-2);font-size:13px}
.copy{
    width:100%;margin-top:8px;padding-top:18px;border-top:1px solid var(--line);
    color:#5d7684;font-size:12.5px;
}

@media (max-width:860px){
    .nav{display:none}
    .burger{display:block}
    .hero-in{padding:54px 20px 46px}
    main{padding:40px 0 10px}
    .note{margin:20px 0}
    .tw, .steps{margin:18px 0}
    .wrap{padding:0 16px}

    /* Замъгляването на фона зад лепнатата лента се преизчислява при всеки
       кадър от превъртането. На телефон това е видимо бавене - там лентата
       е плътна. */
    .top{background:#040d12;-webkit-backdrop-filter:none;backdrop-filter:none}
    .sheet{background:#050f15;-webkit-backdrop-filter:none;backdrop-filter:none}

    .foot-nav{margin-left:0;width:100%;gap:14px}
    footer{padding:26px 0 calc(30px + env(safe-area-inset-bottom))}
    .top-in{padding:0 16px;height:58px}
    .sheet{inset:58px 0 0}
    .logo{font-size:16px}
}

/* Телефон: обикалящата точка остава само по картите. Двете нива наведнъж
   са и излишно натоварване, и излишен шум на малък екран. */
@media (max-width:860px){
    section::before{display:none}
}

/* Много тесен екран - таблиците и стъпките се събират. */
@media (max-width:420px){
    body{font-size:15.5px}
    .hero-in{padding:44px 20px 36px}
    table{min-width:420px;font-size:13.5px}
    th,td{padding:9px 11px}
    .steps li{padding-left:38px}
    .steps li::before{width:27px;height:24px;font-size:11px}
    .c{padding:17px 17px 15px}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .sheet,.sheet a,.nav a::after,.burger span{transition:none}
}


/* ==========================================================================
   КУТИЯ С ОБИКАЛЯЩА ТОЧКА

   Всеки текстов блок е в кутия с тънък кант, по който обикаля светла точка.
   Направено е без @property, за да върви и там, където той липсва: конусен
   градиент седи в квадрат, по-голям от кутията, и се ВЪРТИ. Кутията отрязва
   излишното, а вътрешен слой покрива всичко освен един пиксел по края -
   така от въртящото се сияние остава само точка по ръба.

   Фонът на кутията Е кантът; съдържанието стои върху вътрешния слой.
   Затова border не се използва - той би легнал върху ефекта.
   ========================================================================== */
section, .c, .note{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:0;
}

section::before, .c::before, .note::before{
    content:'';position:absolute;z-index:-1;
    left:50%;top:50%;width:190%;aspect-ratio:1;
    transform:translate(-50%,-50%);
    /* Дъгата е тясна - 6 градуса от 360. Оттам усещането за точка, а не за
       въртящо се сияние. */
    background:conic-gradient(from 0deg,
        transparent 0 86%,
        rgba(0,144,224,.22) 90%,
        rgba(0,144,224,.80) 94%,
        #dff3ff 96.5%,
        rgba(0,144,224,.55) 98%,
        transparent 100%);
    animation:photon 7s linear infinite;
    animation-play-state:paused;      /* пуска се, щом кутията се вижда */
    will-change:transform;
}

/* Вътрешният слой покрива всичко освен канта. */
section::after, .c::after, .note::after{
    content:'';position:absolute;z-index:-1;inset:1px;
    border-radius:inherit;
}

/* ---- секцията: голямата кутия около текста ---- */
section{
    background:var(--line);           /* това е кантът */
    border-radius:14px;
    /* Еднакво от четирите страни. По-малко отдолу правеше кантът на
       секцията да върви успоредно на кантовете вътре, на педя разстояние -
       двете кутии изглеждаха слепени. */
    padding:30px 32px;
}
section::after{background:var(--bg-2);border-radius:13px}
/* Бавно и по-бледо - голямата кутия не бива да води окото пред картите. */
section::before{
    animation-duration:16s;
    opacity:.55;
}
section > *:last-child{margin-bottom:0}
/* Решетка с карти вътре в кутия иска повече въздух, отколкото абзац. */
section > .cards, section > .kv{margin-top:20px}
section > h2 + .cards, section > h2 + .kv{margin-top:18px}

/* Секция само от карти няма нужда от собствена кутия - външният и
   вътрешните кантове се удвояват без да казват нищо. */
section.bare{background:none;padding:0;overflow:visible}
section.bare::before,section.bare::after{display:none}

/* ---- картите вътре ---- */
.c{background:var(--line);border-radius:12px}
.c::after{background:var(--card);border-radius:11px}

.note{background:var(--line);border-radius:8px}
.note::after{
    background:var(--card);
    /* Синият оттенък на бележката идва оттук, за да не се бие с точката. */
    box-shadow:inset 3px 0 0 var(--blue), inset 0 0 60px rgba(0,144,224,.05);
    border-radius:7px;
}
.note::before{animation-duration:9s}

/* Точките не тръгват заедно - иначе цялата решетка примигва в такт. */
.cards .c:nth-child(2)::before{animation-duration:8.5s;animation-delay:-2.4s}
.cards .c:nth-child(3)::before{animation-duration:6.2s;animation-delay:-4.1s}
.cards .c:nth-child(4)::before{animation-duration:9.4s;animation-delay:-1.2s}
.kv .c:nth-child(2)::before{animation-duration:8.1s;animation-delay:-3.3s}
.kv .c:nth-child(3)::before{animation-duration:6.7s;animation-delay:-5.5s}
section:nth-of-type(even)::before{animation-delay:-7s}

/* Върти се само видимото - скрипт слага класа при влизане в екрана. Иначе
   на дълга страница се въртят десет градиента, от които се вижда един. */
.lit::before{animation-play-state:running}

@keyframes photon{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media (max-width:860px){
    section{padding:24px 20px;border-radius:12px;margin-bottom:30px}
    section > .cards, section > .kv{margin-top:16px}
    .cards, .kv{gap:16px}
}

@media (prefers-reduced-motion:reduce){
    section::before, .c::before, .note::before{animation:none;background:none}
}

/* ==========================================================================
   ТЕЛЕФОН, НАРИСУВАН С CSS

   Няма снимка на екрана - всичко е елементи. Причината не е спестяване на
   килобайти, а че снимка на приложение остарява в деня, в който приложението
   се промени, и трябва да се преснима. Това тук се редактира като текст.
   ========================================================================== */
.appblock{
    display:grid;grid-template-columns:1fr minmax(230px,264px);
    gap:38px;align-items:center;margin-top:6px;
}
.appblock ul{margin-bottom:0}

.phone{
    position:relative;width:100%;max-width:264px;aspect-ratio:9/18.6;
    border-radius:34px;padding:9px;justify-self:center;
    background:linear-gradient(160deg,#2b3d47,#0d1a22 42%,#16262f);
    box-shadow:0 26px 60px rgba(0,0,0,.55),
               0 0 0 1px rgba(255,255,255,.07) inset;
}
/* Бутоните отстрани - без тях силуетът е просто правоъгълник. */
.phone::before,.phone::after{
    content:'';position:absolute;right:-2px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,#33474f,#1b2b33);
}
.phone::before{top:104px;height:34px}
.phone::after{top:148px;height:56px}

.screen{
    position:relative;height:100%;border-radius:27px;overflow:hidden;
    background:linear-gradient(180deg,#061620,#040d12 55%);
    display:flex;flex-direction:column;
}
/* Изрезът за камерата. */
.notch{
    position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:62px;height:15px;border-radius:9px;background:#02080c;z-index:3;
}
.notch i{
    position:absolute;right:9px;top:5px;width:5px;height:5px;border-radius:50%;
    background:#123648;box-shadow:inset 0 0 2px #0090e0;
}

.sbar{
    display:flex;align-items:center;padding:9px 14px 4px;
    font-size:9px;color:#7f97a4;letter-spacing:.04em;
}
.sbar .sp{flex:1}
.sbar b{font-weight:600;color:#a9c0cc}

.ahead{
    padding:8px 14px 10px;border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;align-items:center;gap:8px;
}
.ahead .nm{
    font-family:'Chakra Petch','Segoe UI',system-ui,sans-serif;
    font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;
}
.ahead .nm span{color:var(--blue)}
.ahead .nm i{font-style:normal;color:#6d8593}
.ahead .dot{
    margin-left:auto;width:6px;height:6px;border-radius:50%;
    background:#39d98a;box-shadow:0 0 8px rgba(57,217,138,.75);
    animation:blip 2.6s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}

.abody{padding:11px 12px;display:flex;flex-direction:column;gap:9px;flex:1}

.acard{
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
    border-radius:11px;padding:10px 11px;
}
.acard .lbl{
    font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#6d8593;
}
.acard .val{font-size:19px;font-weight:700;color:#fff;line-height:1.2;margin-top:2px}
.acard .val small{font-size:10px;font-weight:600;color:#7f97a4;margin-left:2px}

.arow{display:flex;align-items:center;gap:8px}
.arow .t{font-size:10px;color:#c3d4dd}
.arow .s{
    margin-left:auto;font-size:8px;font-weight:700;letter-spacing:.1em;
    color:#39d98a;
}
/* Ключът за режима - изпълнителна команда, не показание. */
.sw{
    margin-left:auto;width:30px;height:17px;border-radius:10px;
    background:var(--blue);position:relative;flex:0 0 auto;
}
.sw::after{
    content:'';position:absolute;top:2px;right:2px;width:13px;height:13px;
    border-radius:50%;background:#fff;
}

/* Малка графика - стойността през последното денонощие. */
.spark{display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:8px}
.spark i{
    flex:1;border-radius:2px 2px 0 0;
    background:linear-gradient(180deg,#0090e0,rgba(0,144,224,.18));
}

.atabs{
    margin-top:auto;display:flex;padding:8px 4px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.06);
}
.atabs span{
    flex:1;text-align:center;font-size:7.5px;letter-spacing:.1em;
    text-transform:uppercase;color:#5d7684;
}
.atabs span.on{color:var(--blue)}

/* Значките за двете магазина - надписи, не връзки: адресите се добавят,
   когато приложенията са публикувани. */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.store{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 15px;border-radius:10px;
    border:1px solid var(--line-2);background:rgba(0,144,224,.06);
}
.store b{display:block;font-size:13px;color:#fff;font-weight:600;line-height:1.2}
.store small{display:block;font-size:10px;letter-spacing:.1em;color:var(--text-2);
             text-transform:uppercase}

@media (max-width:860px){
    .appblock{grid-template-columns:1fr;gap:26px}
    .phone{max-width:232px;order:-1}   /* на телефон картинката води */
}

@media (prefers-reduced-motion:reduce){
    .ahead .dot{animation:none}
}

/* ---------------- HMI екранът в телефона ----------------
   Схема на процеса, не таблица с числа: кладенец, помпа, резервоар и тръба
   между тях. Точно това вижда човекът на обекта - затова е и в примера.
   Всичко е SVG с няколко анимации; никъде няма снимка, която да остарее. */
.hmi{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
    border-radius:11px;padding:9px 8px 6px;
}
.hmi svg{width:100%;height:auto;display:block}

.hmi .vessel{fill:rgba(255,255,255,.04);stroke:#38596b;stroke-width:1.4}
.hmi .pipe{fill:none;stroke:#2b4b5c;stroke-width:5;stroke-linecap:round}
.hmi .lbl{fill:#7f97a4;font-size:6.5px;letter-spacing:.08em}
.hmi .val{fill:#fff;font-size:8.5px;font-weight:700}

/* Водата се вдига и спада бавно. Движи се цялата плоскост, а стените на
   съда я режат - оттам идва усещането за ниво. Помпата вади от кладенеца и
   пълни резервоара, затова двете вървят в обратни посоки. */
.hmi .water{fill:url(#wg)}
.hmi .w-well{animation:lvl-well 11s ease-in-out infinite alternate}
.hmi .w-tank{animation:lvl-tank 11s ease-in-out infinite alternate}
@keyframes lvl-well{from{transform:translateY(14px)}to{transform:translateY(34px)}}
@keyframes lvl-tank{from{transform:translateY(44px)}to{transform:translateY(12px)}}

.hmi .ok{fill:#39d98a;font-size:7.5px;font-weight:700;letter-spacing:.06em}

/* Потокът в тръбата - прекъсната линия, която пълзи. */
.hmi .flow{
    fill:none;stroke:#0090e0;stroke-width:2.4;stroke-linecap:round;
    stroke-dasharray:5 9;animation:flow 1.1s linear infinite;
}
@keyframes flow{to{stroke-dashoffset:-14}}

.hmi .pump{fill:#0a1c26;stroke:#0090e0;stroke-width:1.4}
.hmi .pump-i{fill:#7fd4ff;transform-box:fill-box;transform-origin:50% 50%;
             animation:spin-p 2.4s linear infinite}
@keyframes spin-p{to{transform:rotate(360deg)}}

/* Сензорът отгоре излъчва - трите дъги избледняват навън. */
.hmi .arc{fill:none;stroke:#0090e0;stroke-width:1.2;stroke-linecap:round;
          animation:ping 2.8s ease-out infinite}
.hmi .arc:nth-of-type(2){animation-delay:.3s}
.hmi .arc:nth-of-type(3){animation-delay:.6s}
@keyframes ping{0%{opacity:0}25%{opacity:.9}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
    .hmi .w-well,.hmi .w-tank,.hmi .flow,.hmi .pump-i,.hmi .arc{animation:none}
    .hmi .w-well{transform:translateY(26px)}
    .hmi .w-tank{transform:translateY(22px)}
}

/* ---------------- копчето за помпата ----------------
   Отметката пази състоянието; всичко останало е CSS. Скрипт не участва -
   един ключ с две положения не оправдава JavaScript, а и така работи дори
   ако скриптовете не се заредят.

   Отметката стои ПРЕДИ схемата в разметката, защото CSS избира само напред
   по документа. */
.pump-sw{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sr{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.sw{cursor:pointer;transition:background .3s}
.sw::after{transition:right .3s cubic-bezier(.16,1,.3,1)}
.pump-sw:focus-visible ~ .acard .sw{box-shadow:0 0 0 3px rgba(0,144,224,.4)}

/* ---- изключено състояние ---- */
.pump-sw:not(:checked) ~ .acard .sw{background:#7c2d2d}
.pump-sw:not(:checked) ~ .acard .sw::after{right:15px}

/* Спряна помпа: нищо не тече и нищо не се върти. */
.pump-sw:not(:checked) ~ .hmi .flow{animation:none;stroke:#4a2626;opacity:.5}
.pump-sw:not(:checked) ~ .hmi .pump{stroke:#ff4d4d;fill:#2a1113}
.pump-sw:not(:checked) ~ .hmi .pump-i{animation:none;fill:#ff6b6b}
.pump-sw:not(:checked) ~ .hmi .w-well,
.pump-sw:not(:checked) ~ .hmi .w-tank{animation-play-state:paused}
.pump-sw:not(:checked) ~ .hmi .arc{animation:none;opacity:.25}

/* Самата схема мига - това е сигналът, който се вижда от разстояние. */
.pump-sw:not(:checked) ~ .hmi{animation:alarm 1.05s steps(1,end) infinite}
@keyframes alarm{
    0%,49%{
        background:rgba(255,60,60,.13);
        border-color:rgba(255,77,77,.85);
        box-shadow:0 0 20px rgba(255,50,50,.28) inset;
    }
    50%,100%{
        background:rgba(255,255,255,.03);
        border-color:rgba(255,77,77,.22);
        box-shadow:none;
    }
}

.hmi .warn{fill:#ff5c5c;font-size:7.5px;font-weight:700;letter-spacing:.04em}

/* Двата надписа стоят и в схемата, и в картата - показва се този, който
   отговаря на състоянието. SVG текст не се сменя със CSS, затова са два. */
.pump-sw:checked ~ .hmi .st-off,
.pump-sw:checked ~ .acard .st-off{display:none}
.pump-sw:not(:checked) ~ .hmi .st-on,
.pump-sw:not(:checked) ~ .acard .st-on{display:none}
.arow .s.bad{color:#ff5c5c}

/* Лентата с предупреждението се появява само при изключена помпа. */
.alarmbar{
    display:none;align-items:center;gap:7px;
    padding:8px 10px;border-radius:9px;
    background:rgba(255,60,60,.12);border:1px solid rgba(255,77,77,.5);
    color:#ff8a8a;font-size:9px;font-weight:700;letter-spacing:.1em;
}
.alarmbar svg{width:13px;height:13px;flex:0 0 auto}
.pump-sw:not(:checked) ~ .alarmbar{
    display:flex;
    animation:warnblink 1.05s steps(1,end) infinite;
}
@keyframes warnblink{
    0%,49%{opacity:1}
    50%,100%{opacity:.35}
}

@media (prefers-reduced-motion:reduce){
    .pump-sw:not(:checked) ~ .hmi{animation:none;
        border-color:rgba(255,77,77,.8);background:rgba(255,60,60,.12)}
    .pump-sw:not(:checked) ~ .alarmbar{animation:none}
}

/* ---------------- подсказка към копчето ----------------
   Червена светлосянка, която се разширява и гасне - същият език като
   алармата, само че тук кани, вместо да предупреждава. */
.sw{position:relative;animation:swpulse 1.9s ease-out infinite}
@keyframes swpulse{
    0%  {box-shadow:0 0 0 0 rgba(255,60,60,.55), 0 0 9px rgba(255,60,60,.35)}
    70% {box-shadow:0 0 0 10px rgba(255,60,60,0), 0 0 16px rgba(255,60,60,.10)}
    100%{box-shadow:0 0 0 0 rgba(255,60,60,0),  0 0 9px rgba(255,60,60,.30)}
}

.hintrow{display:flex;justify-content:flex-end;margin-top:7px}
.hint{
    display:inline-flex;align-items:center;gap:5px;
    font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:#ff8a8a;animation:hintfade 1.9s ease-in-out infinite;
}
/* Стрелка нагоре към самото копче - без нея надписът виси без адрес. */
.hint::after{
    content:'';width:0;height:0;margin-bottom:2px;
    border:4px solid transparent;border-bottom-color:#ff8a8a;
}
@keyframes hintfade{0%,100%{opacity:1}55%{opacity:.42}}

/* След като помпата веднъж е изключена, подсказката е свършила работата си
   и отстъпва на предупреждението. */
.pump-sw:not(:checked) ~ .acard .sw{animation:none}
.pump-sw:not(:checked) ~ .hintrow{display:none}

@media (prefers-reduced-motion:reduce){
    .sw{animation:none;box-shadow:0 0 0 3px rgba(255,60,60,.28)}
    .hint{animation:none}
}

/* ==========================================================================
   ЗАГЛАВИЯТА В КУТИИТЕ

   Дотук h2 стоеше като гол ред текст върху фона на кутията. Сега носи три
   неща: лента отляво, черта отдолу и светлина, която пробягва по чертата -
   същият език като точката по канта на кутията.
   ========================================================================== */
section > h2{
    position:relative;
    padding:1px 0 15px 17px;
    margin-bottom:22px;
}

/* Лентата отляво. Стига до чертата, не по-надолу - иначе виси. */
section > h2::before{
    content:'';position:absolute;left:0;top:.16em;bottom:15px;
    width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--blue),rgba(0,144,224,.12));
    box-shadow:0 0 12px rgba(0,144,224,.45);
}

/* Чертата отдолу и глинтът по нея. Два градиента в един слой: първият е
   самата черта и избледнява надясно, вторият е тясната светлина, която се
   мести. */
section > h2::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background-image:
        linear-gradient(90deg, rgba(0,144,224,.9), rgba(0,144,224,.16) 34%, transparent 72%),
        linear-gradient(90deg, transparent, rgba(190,240,255,.95), transparent);
    background-size:100% 100%, 26% 100%;
    background-repeat:no-repeat;
    background-position:0 0, -30% 0;
    animation:rule-sweep 7s linear infinite;
    animation-play-state:paused;
}
/* Свети само видимото - класът идва от същия наблюдател, който пуска
   точката по канта. */
.lit > h2::after{animation-play-state:running}
@keyframes rule-sweep{to{background-position:0 0, 130% 0}}

/* Първият абзац след заглавието води - малко по-едър и по-светъл. */
section > h2 + p{
    font-size:17px;color:#c6d6df;
}

@media (max-width:860px){
    section > h2{padding-left:14px;padding-bottom:13px;margin-bottom:18px}
    section > h2 + p{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
    section > h2::after{animation:none;background-position:0 0, -30% 0}
}

/* ==========================================================================
   ПРЕВКЛЮЧВАТЕЛ НА ЕЗИКА

   Прави се с <details>, не със скрипт: браузърът отваря и затваря падащото
   меню сам, а един файл по-малко се дърпа за нещо, което и без това работи.
   Знаменцата са вградени SVG - излизат заедно със страницата.
   ========================================================================== */
.lang{position:relative;flex:0 0 auto;margin-left:20px}
.lang > summary{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    padding:7px 12px;border:1px solid var(--line);border-radius:20px;
    font-size:12px;font-weight:600;letter-spacing:.1em;
    color:var(--text-2);list-style:none;
    transition:border-color .25s,color .25s;
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::after{
    content:'';width:0;height:0;margin-top:2px;
    border:4px solid transparent;border-top-color:currentColor;
    transition:transform .25s;
}
.lang[open] > summary::after{transform:rotate(180deg)}
.lang > summary:hover,.lang[open] > summary{border-color:var(--blue);color:#fff}
.lang > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Тънката рамка около знаменцето му държи формата върху тъмен фон -
   бялото на българското и на сръбското иначе се слива с нищото. */
.fl{
    display:block;width:21px;height:14px;flex:0 0 21px;
    border-radius:2px;overflow:hidden;
    box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.fl svg{display:block;width:100%;height:100%}

.lang-menu{
    position:absolute;right:0;top:calc(100% + 9px);min-width:190px;
    background:#07161e;border:1px solid var(--line);border-radius:12px;
    padding:6px;box-shadow:0 22px 48px rgba(0,0,0,.6);z-index:30;
}
.lang-menu a{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:8px;
    color:var(--text-2);font-size:13.5px;font-weight:500;
}
.lang-menu a:hover{background:rgba(0,144,224,.12);color:#fff;text-decoration:none}
.lang-menu a.on{background:rgba(0,144,224,.18);color:#fff}

/* Езиците в мобилния лист - редица знаменца, а не втори падащ списък. */
.sheet-langs{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
    opacity:0;transform:translateY(12px);
    transition:opacity .5s .26s,transform .5s .26s cubic-bezier(.16,1,.3,1);
}
.sheet.open .sheet-langs{opacity:1;transform:none}
.sheet-langs a{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 11px;border-radius:18px;
    border:1px solid var(--line);color:var(--text-2);
    font-size:11px;font-weight:700;letter-spacing:.1em;
}
.sheet-langs a.on{border-color:var(--blue);background:rgba(0,144,224,.14);color:#fff}
.sheet-langs a:hover{text-decoration:none}

/* Обхватът в подножието - изречение, не списък от ключови думи. */
.copy .served{display:block;margin-top:6px;color:#4f6976;font-size:12px}

@media (max-width:1060px){
    /* Кодът отпада преди знаменцето: то се разпознава по-бързо от две букви. */
    .lang-code{display:none}
    .lang{margin-left:12px}
    .lang > summary{padding:7px 10px}
}
@media (max-width:860px){
    .lang{margin-left:auto;margin-right:6px}
}