/* ═══════════════════════════════════════════════════════════════════════
   0. ФОНТОВИ — само-хостирани, ниту едно барање не оди до Google.
   Вградени се тука (а не како посебна датотека) за да нема ни едно
   „preload" барање што паѓа кога страната се отвора локално со двоен клик.
   Датотеките се во assets/fonts/.
   ═══════════════════════════════════════════════════════════════════════ */

/* Oswald — cyrillic-ext  (18 KB) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url(assets/fonts/oswald-cyrillic-ext.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* Oswald — cyrillic  (15 KB) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url(assets/fonts/oswald-cyrillic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* Oswald — latin-ext  (23 KB) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url(assets/fonts/oswald-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Oswald — latin  (27 KB) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 200 700;
  src: url(assets/fonts/oswald-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Manrope — cyrillic-ext  (2 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fonts/manrope-cyrillic-ext.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* Manrope — cyrillic  (14 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fonts/manrope-cyrillic.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* Manrope — latin-ext  (14 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fonts/manrope-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Manrope — latin  (24 KB) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fonts/manrope-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. ДИЗАЈН ТОКЕНИ — сменете боја/заоблување тука и целата страна се менува
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --stone:#ECF1F6;        /* позадина на страната */
  --paper:#FFFFFF;        /* картички */
  --ink:#062B4B;          /* најтемна — текст и темни панели */
  --blue:#00467F;         /* ОСНОВНА БОЈА — сината од логото */
  --blue-2:#0A5EA3;       /* посветла сина (hover) */
  --slate:#67839E;         /* пригушен текст, линии */
  --signal:#D59F0F;       /* АКЦЕНТ — златната од логото */
  --signal-2:#EFB524;     /* посветла златна (hover) */
  --alert:#C8452B;        /* итни случаи */
  --line:rgba(6,43,75,.14);
  --line-soft:rgba(6,43,75,.08);

  --font-display:"Oswald",Impact,"Arial Narrow",sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --shadow-s:0 1px 2px rgba(6,43,75,.06), 0 4px 12px rgba(6,43,75,.05);
  --shadow-m:0 2px 4px rgba(6,43,75,.05), 0 12px 32px rgba(6,43,75,.09);
  --shadow-l:0 24px 60px rgba(6,43,75,.16);
  --maxw:1180px;
  --pad:clamp(18px,5vw,40px);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. ОСНОВА
   ═══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}  /* заедно со width/height атрибутите: спречува скокање на распоредот */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.06;letter-spacing:.004em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(56px,8vw,104px)}
.section--tight{padding-block:clamp(40px,6vw,72px)}

/* Наслови на секции */
.eyebrow{
  font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:11px;margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--signal);border-radius:2px;flex:none}
.eyebrow--light{color:var(--signal)}
.h2{font-size:clamp(30px,4.6vw,50px);text-transform:uppercase;letter-spacing:.005em;max-width:19ch}
.h3{font-size:clamp(20px,2.3vw,24px);text-transform:uppercase}
.lead{font-size:clamp(16px,1.5vw,18.5px);color:#3D5872;max-width:60ch;margin-top:16px;line-height:1.7}
.sec-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(28px,4vw,48px)}
.sec-head .lead{margin-top:14px}

/* Копчиња */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;border-radius:100px;font-weight:700;font-size:15.5px;
  letter-spacing:.01em;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  border:1.5px solid transparent;white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-m)}
.btn--primary:hover{background:var(--blue-2)}
.btn--signal{background:var(--signal);color:var(--ink);box-shadow:0 10px 26px rgba(213,159,15,.34)}
.btn--signal:hover{background:var(--signal-2)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.7)}
.btn--ghost:hover{border-color:var(--blue);background:#fff}
.btn--onDark{border-color:rgba(255,255,255,.28);color:#fff}
.btn--onDark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn--sm{padding:11px 18px;font-size:14px}

:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px}
.skip:focus{left:12px}

/* ═══════════════════════════════════════════════════════════════════════
   3. ДЕЖУРНА ЛЕНТА + НАВИГАЦИЈА
   ═══════════════════════════════════════════════════════════════════════ */
.dutybar{background:var(--ink);color:#D5E3EF;font-size:13.5px}
.dutybar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;padding-block:7px}
.dutybar__l,.dutybar__r{display:flex;align-items:center;gap:9px}
.dutybar__r{gap:20px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--signal);flex:none;position:relative}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--signal);opacity:.55;animation:ping 2.2s ease-out infinite}
.pulse--off{background:var(--slate)}
.pulse--off::after{display:none}
@keyframes ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.dutybar b{color:#fff;font-weight:700}
.dutybar a:hover{color:var(--signal)}
.clock{font-family:var(--font-display);letter-spacing:.06em;font-variant-numeric:tabular-nums;font-weight:550}
.clock b{font-weight:550}
.hide-sm{display:none}

.header{position:sticky;top:0;z-index:90;background:rgba(236,241,246,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.header.is-stuck{border-bottom-color:var(--line);background:rgba(236,241,246,.95)}
.header__in{display:flex;align-items:center;gap:20px;min-height:78px}
.brand{display:flex;align-items:center;margin-right:auto}
.brand__logo{height:42px;width:auto;display:block}
.brand__logo--chip{height:46px;background:#fff;padding:11px 15px;border-radius:14px;box-sizing:content-box}
.drawer__logo{position:absolute;top:20px;left:var(--pad);height:34px}
.nav{display:none;align-items:center;gap:4px}
.nav a{padding:9px 13px;border-radius:8px;font-size:14.5px;font-weight:600;color:#2F4C6B;transition:color .16s,background .16s}
.nav a:hover,.nav a.is-active{color:var(--blue);background:rgba(0,70,127,.07)}
.header .btn{display:none}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:#fff}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:95;background:var(--ink);color:#fff;padding:88px var(--pad) 40px;display:flex;flex-direction:column;gap:6px;transform:translateY(-100%);visibility:hidden;transition:transform .38s cubic-bezier(.4,0,.2,1),visibility .38s;overflow-y:auto}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer a{font-family:var(--font-display);font-size:27px;text-transform:uppercase;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer a.btn{margin-top:22px;font-family:var(--font-body);font-size:15.5px;text-transform:none;border-bottom:0;padding:15px 24px;justify-content:center}
.drawer__close{position:absolute;top:22px;right:var(--pad);width:44px;height:44px;border-radius:11px;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:24px;line-height:1}

/* ═══════════════════════════════════════════════════════════════════════
   4. ХИРО + ДЕЖУРНА ТАБЛА (потписниот елемент на страната)
   ═══════════════════════════════════════════════════════════════════════ */
.hero{position:relative;padding-block:clamp(40px,6vw,76px) clamp(48px,7vw,90px);overflow:hidden}
.hero::before{content:"";position:absolute;top:-220px;right:-180px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(0,70,127,.09),transparent 68%);pointer-events:none}
.hero__grid{display:grid;gap:clamp(34px,5vw,58px);align-items:center;position:relative}
.hero h1{font-size:clamp(38px,7.4vw,74px);text-transform:uppercase;letter-spacing:-.005em;line-height:.99}
.hero h1 em{font-style:normal;color:var(--blue);white-space:nowrap;background-image:linear-gradient(transparent 63%,rgba(213,159,15,.85) 63%,rgba(213,159,15,.85) 90%,transparent 90%)}
.hero__lead{margin-top:22px;font-size:clamp(16.5px,1.7vw,19px);color:#3D5872;max-width:52ch;line-height:1.68}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.fact{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#3D5872}
.fact svg{width:17px;height:17px;color:var(--blue);flex:none}

/* ДЕЖУРНА ТАБЛА */
.duty{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(24px,3.4vw,34px);box-shadow:var(--shadow-l);position:relative;overflow:hidden}
.duty::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--signal),var(--signal) 34%,var(--blue-2) 34%)}
.duty__top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.13)}
.duty__label{font-family:var(--font-display);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#9CB6CF}
.duty__state{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.duty__phoneLabel{font-size:13px;color:#9CB6CF;margin-top:22px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.duty__phone{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(38px,6.2vw,58px);line-height:1.02;letter-spacing:.005em;margin-top:6px;color:#fff;font-variant-numeric:tabular-nums;transition:color .2s}
.duty__phone:hover{color:var(--signal)}
.duty__rows{margin-top:24px;display:grid;gap:1px;background:rgba(255,255,255,.11);border-radius:var(--r-m);overflow:hidden}
.duty__row{display:flex;justify-content:space-between;gap:14px;background:#0B3A63;padding:13px 16px;font-size:14.5px}
.duty__row span:first-child{color:#9CB6CF}
.duty__row span:last-child{font-weight:700;text-align:right}
.duty__note{display:flex;gap:11px;margin-top:20px;padding:14px 16px;border-radius:var(--r-m);background:rgba(213,159,15,.11);border:1px solid rgba(213,159,15,.26);font-size:14px;line-height:1.55;color:#F6E8C4}
.duty__note svg{width:19px;height:19px;color:var(--signal);flex:none;margin-top:2px}
.duty__actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.duty__actions .btn{flex:1 1 150px}

/* ═══════════════════════════════════════════════════════════════════════
   5. УСЛУГИ
   ═══════════════════════════════════════════════════════════════════════ */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.chip{padding:10px 19px;border-radius:100px;border:1.5px solid var(--line);background:rgba(255,255,255,.65);font-size:14.5px;font-weight:700;transition:.18s}
.chip:hover{border-color:var(--blue)}
.chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.grid-3{display:grid;gap:16px;grid-template-columns:1fr}
/* Без ова, долг текст ги растегнува колоните и страната скролува странично на тесни екрани. */
.grid-3>*,.contact>*,.about>*,.hero__grid>*,.footer__grid>*,.info__i>*{min-width:0}
.price li>span{min-width:0}
.info__i a{overflow-wrap:anywhere}
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--shadow-s);transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(0,70,127,.22)}
.card__ico{width:48px;height:48px;border-radius:13px;background:rgba(0,70,127,.09);display:grid;place-items:center;color:var(--blue);margin-bottom:18px}
.card__ico svg{width:24px;height:24px}
.card h3{font-size:19px;text-transform:uppercase;letter-spacing:.015em}
.card p{margin-top:9px;font-size:15px;color:#4A6480;line-height:1.62}
.card__tag{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.svc[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   6. БРОЈКИ (темна лента)
   ═══════════════════════════════════════════════════════════════════════ */
.band{background:var(--blue);color:#fff}
.band .h2{color:#fff}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(255,255,255,.16);border-radius:var(--r-l);overflow:hidden}
.stat{background:var(--blue);padding:26px 22px}
.stat__n{font-family:var(--font-display);font-size:clamp(34px,5vw,48px);line-height:1;color:var(--signal)}
.stat__t{margin-top:8px;font-size:14px;color:#C2D6E7;line-height:1.45}

/* ═══════════════════════════════════════════════════════════════════════
   7. ЗА НАС
   ═══════════════════════════════════════════════════════════════════════ */
.about{display:grid;gap:clamp(30px,4vw,54px);align-items:start}
.portrait{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(155deg,#0A5EA3,#062B4B);aspect-ratio:4/5;box-shadow:var(--shadow-l);display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.portrait__ph{text-align:center;color:rgba(255,255,255,.5);padding:24px}
.portrait__mono{font-family:var(--font-display);font-size:96px;color:rgba(213,159,15,.85);line-height:1}
.portrait__ph small{display:block;margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.portrait__badge{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:var(--r-m);padding:14px 16px}
.portrait__badge strong{display:block;font-family:var(--font-display);font-size:19px;text-transform:uppercase;font-weight:500}
.portrait__badge span{font-size:13px;color:var(--slate);font-weight:600}
.creds{margin-top:28px;display:grid;gap:0}
.cred{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.cred:last-child{border-bottom:1px solid var(--line)}
.cred__y{font-family:var(--font-display);font-size:15px;letter-spacing:.09em;color:var(--blue);padding-top:2px;min-width:64px;flex:none}
.cred__b strong{display:block;font-size:15.5px;font-weight:700}
.cred__b span{font-size:14px;color:#5A7490;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════
   8. ЦЕНОВНИК
   ═══════════════════════════════════════════════════════════════════════ */
.price{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--shadow-s)}
.price h3{font-size:18px;text-transform:uppercase;padding-bottom:14px;border-bottom:2px solid var(--signal);display:inline-block}
.price ul{margin-top:6px}
.price li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line-soft);font-size:15px}
.price li:last-child{border-bottom:0}
.price li b{font-family:var(--font-display);font-weight:500;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.disclaimer{margin-top:22px;display:flex;gap:11px;padding:16px 18px;border-radius:var(--r-m);background:rgba(0,70,127,.06);border:1px solid var(--line-soft);font-size:14.5px;color:#3D5872;line-height:1.6}
.disclaimer svg{width:19px;height:19px;color:var(--blue);flex:none;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════════════
   9. РЕЦЕНЗИИ
   ═══════════════════════════════════════════════════════════════════════ */
.rev__sum{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:22px 26px;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-l);box-shadow:var(--shadow-s);margin-bottom:26px}
.rev__score{font-family:var(--font-display);font-size:52px;line-height:1}
.rev__meta{font-size:14.5px;color:#4A6480}
.rev__meta strong{display:block;font-size:16px;color:var(--ink)}
.stars{display:flex;gap:3px}
.stars svg{width:18px;height:18px;color:var(--signal)}
.rev__nav{margin-left:auto;display:flex;gap:8px}
.arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;background:#fff;transition:.18s}
.arrow:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.arrow svg{width:18px;height:18px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,86%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rev{scroll-snap-align:start;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.rev p{margin-top:14px;font-size:15px;line-height:1.66;color:#3D5872;flex:1}
.rev__who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:17px;flex:none}
.who strong{display:block;font-size:14.5px}
.who span{font-size:12.5px;color:var(--slate)}

/* ═══════════════════════════════════════════════════════════════════════
   10. ПРАШАЊА
   ═══════════════════════════════════════════════════════════════════════ */
/* Најнови објави */
.post{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-l);overflow:hidden;
      box-shadow:var(--shadow-s);display:flex;flex-direction:column;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(0,70,127,.22)}
.post__img{width:100%;aspect-ratio:16/10;object-fit:cover;background:linear-gradient(150deg,#0A5EA3,#062B4B);display:block}
.post__body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.post__date{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:12.5px;
            letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.post__date::before{content:"";width:16px;height:2px;background:var(--signal);border-radius:2px;flex:none}
.post__t{margin-top:11px;font-size:15.5px;line-height:1.62;color:#3D5872;flex:1}
.post__more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;
            color:var(--blue);border-bottom:0;align-self:flex-start}
.post__more:hover{gap:12px;color:var(--blue-2)}
.post__more svg{width:15px;height:15px;transition:transform .18s}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-weight:700;font-size:17px;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:13px;height:13px;border-right:2.2px solid var(--blue);border-bottom:2.2px solid var(--blue);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 40px 24px 0;color:#4A6480;font-size:15.5px;line-height:1.7;max-width:78ch}

/* ═══════════════════════════════════════════════════════════════════════
   11. КОНТАКТ + МАПА
   ═══════════════════════════════════════════════════════════════════════ */
.contact{display:grid;gap:clamp(28px,3.6vw,44px);align-items:start}
.map{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(150deg,#0A5EA3,#062B4B);box-shadow:var(--shadow-l)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .35s ease}
.map iframe.is-ready{opacity:1}
.map__facade{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:24px;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px}
.map__facade p{font-size:14.5px;color:#B3C8DC;margin-top:8px;max-width:34ch}
.map__pin{width:56px;height:56px;border-radius:50%;background:var(--signal);display:grid;place-items:center;margin:0 auto 16px;color:var(--ink)}
.form{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow-m)}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3D5872;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-m);
  background:#F7FAFC;font:inherit;font-size:15.5px;color:var(--ink);transition:border-color .16s,background .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.field textarea{resize:vertical;min-height:96px}
.row2{display:grid;gap:15px;grid-template-columns:1fr}
.form__send{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:6px}
.form__hint{margin-top:14px;font-size:13.5px;color:var(--slate);line-height:1.55}
.info{display:grid;gap:2px;background:var(--line);border-radius:var(--r-l);overflow:hidden;margin-top:20px}
.info__i{background:var(--paper);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.info__i svg{width:20px;height:20px;color:var(--blue);flex:none;margin-top:3px}
.info__i strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:800}
.info__i a,.info__i span{font-size:16px;font-weight:600}
.info__i a:hover{color:var(--blue)}
.info__b{flex:1;min-width:0}
.hrs{margin-top:7px}
.hrs__r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line-soft)}
.hrs__r:last-child{border-bottom:0}
.hrs .hrs__d{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#4A6480}
.hrs .hrs__t{font-size:14.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrs__r.is-today .hrs__d,.hrs__r.is-today .hrs__t{color:var(--blue)}
.hrs__r--em .hrs__d,.hrs__r--em .hrs__t{color:var(--blue);font-weight:700}
.hrs .hrs__today{flex:none;display:inline-block;padding:2px 8px;border-radius:100px;background:var(--signal);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════════════════
   12. ФУТЕР + МОБИЛНА ЛЕНТА
   ═══════════════════════════════════════════════════════════════════════ */
.footer{background:var(--ink);color:#B3C8DC;padding-block:clamp(44px,6vw,68px) 0}
.footer__grid{display:grid;gap:34px;grid-template-columns:1fr}
.footer h4{font-family:var(--font-display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer li{font-size:15px}
.footer li+li{margin-top:9px}
.footer a{font-size:inherit}
.footer a:hover{color:var(--signal)}
.footer__note{font-size:14.5px;line-height:1.65;margin-top:16px;max-width:38ch}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:.18s}
.social a:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.social svg{width:19px;height:19px}
.footer__bar{margin-top:42px;padding-block:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px}

/* „position:sticky" наместо „fixed".
   Fixed лентата виси на виртуелниот прозорец на документот, а прелистувачот на
   телефон го менува тој прозорец кога адресната лента се појавува — оттаму скокот.
   Sticky ја носи самиот механизам за скролање, во ист чекор со содржината, па нема
   како да се разиде. Не бара JavaScript и нема што да се расипе.
   Позадината е непроѕирна за да не се гледа содржината низ неа. */
.mobar{position:sticky;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(3,1fr);
       background:var(--ink);border-top:1px solid rgba(255,255,255,.14)}

/* ВАЖНО: отстојот за safe-area е на КОПЧИЊАТА, не на лентата. Ако е на лентата,
   копчињата запираат погоре и под нив се гледа боја на лентата — најочигледно
   како темна линија под жолтото копче. */
.mobar a{background:var(--ink);color:#fff;display:flex;flex-direction:column;
         align-items:center;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
         padding:11px 6px calc(12px + env(safe-area-inset-bottom))}
.mobar a+a{border-left:1px solid rgba(255,255,255,.14)}

.mobar a:first-child{background:var(--signal);color:var(--ink)}
.mobar svg{width:20px;height:20px}

/* ═══════════════════════════════════════════════════════════════════════
   13. АНИМАЦИИ И РЕСПОНЗИВНОСТ
   ═══════════════════════════════════════════════════════════════════════ */
/* Патека од шепи — „оди" низ екранот како што скролаш. Чисто декоративно. */
.pawtrail{display:flex;align-items:center;justify-content:center;
          gap:clamp(13px,3.6vw,46px);padding:clamp(14px,2.6vw,26px) var(--pad);
          pointer-events:none;overflow:hidden}
.paw{display:block;width:clamp(28px,4vw,45px);color:var(--blue);opacity:0;
     transform:translateY(calc(var(--y) + 12px)) rotate(var(--r)) scale(.62);
     transition:opacity .4s ease,transform .55s cubic-bezier(.2,.75,.3,1)}
.paw.on{opacity:.5;transform:translateY(var(--y)) rotate(var(--r)) scale(1)}
.paw:nth-child(3n).on{opacity:.65;color:var(--signal)}
.paw svg{width:100%;height:auto;display:block}

/* Скриено е САМО ако JS работи (класата .js). Ако скриптата падне, сè останува видливо. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}

@media (min-width:560px){
  .row2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .rail{grid-auto-columns:minmax(300px,54%)}
}
@media (min-width:900px){
  .brand__logo{height:50px}
  .hide-sm{display:inline}
  .hero__grid{grid-template-columns:1.08fr .92fr}
  .nav{display:flex}
  .header .btn{display:inline-flex}
  .burger{display:none}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .about{grid-template-columns:.82fr 1.18fr}
  .contact{grid-template-columns:1fr 1fr}
  .rail{grid-auto-columns:minmax(320px,32%)}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .mobar{display:none}
}
@media (max-width:899px){
  html{scroll-padding-top:78px}
  /* blur зад лепливото заглавје е скапо на телефон — непроѕирна боја е помазна */
  .header,.header.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:#ECF1F6}
}
@media (max-width:430px){
  .btn{white-space:normal;text-align:center}
  .hrs__r{gap:8px}
  .hrs .hrs__today{font-size:9px;padding:2px 5px;letter-spacing:.06em}
}
/* под ~340px редот со работно време се дели на два реда наместо да се крши текстот */
@media (max-width:350px){ .hrs__r{flex-direction:column;align-items:flex-start;gap:3px} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* Ветување за време на одговор во формуларот */
.form__promise{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;
               background:rgba(213,159,15,.1);border:1px solid rgba(213,159,15,.28);
               border-radius:12px;padding:13px 15px;font-size:14.5px;line-height:1.55}
.form__promise svg{width:19px;height:19px;flex:none;color:var(--signal);margin-top:2px}