/* ============================================================
   PATRUL — БАЗОВА ДИЗАЙН-СИСТЕМА (Брендбук v1.0)
   Спільне ядро для всіх сторінок: токени, каркас, топбар,
   футер, кнопки, службова анімація. Кожна сторінка додає
   власний <slug>.css поверх цього файлу.
   ============================================================ */
:root{
  --bg:#0B0B0C;          /* Обсидіан — основний фон */
  --bg-2:#17181A;        /* Графіт — поверхні */
  --bg-3:#222326;
  --fg:#F2F2F0;
  --fg-2:#9EA1A6;        /* Сталь — вторинний текст */
  --line:#2E3033;        /* Сталь темна — лінії */
  --card:#141416;
  --paper:#F4F3EF;       /* Папір — світлі блоки */
  --paper-2:#ECEBE6;
  --paper-line:#D6D5CF;
  --ink-2:#5E6165;
  --accent:#FFD400;      /* Сигнальний — CTA, 1 акцент на екран */
  --accent-dark:#E0BB00;
  --rec:#FF3B30;         /* REC — лише статуси запису */
  --font-display:'Unbounded',sans-serif;
  --font-text:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --ease-evidence:cubic-bezier(.16,1,.3,1);
  --ease-system:cubic-bezier(.65,0,.35,1);
  --dur-1:150ms; --dur-2:300ms; --dur-3:600ms; --dur-4:900ms;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--accent);color:#0B0B0C}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-text);font-size:17px;line-height:1.65;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}

/* ---- Каркас ---- */
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
section{padding:clamp(80px,12vh,160px) 0;border-top:1px solid var(--line);position:relative}
.sec-head{display:flex;align-items:baseline;gap:24px;margin-bottom:clamp(40px,6vh,72px);flex-wrap:wrap}
.sec-num{font-family:var(--font-mono);font-size:14px;color:var(--accent);letter-spacing:.15em}
.sec-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.5vw,56px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.sec-sub{font-size:15px;color:var(--fg-2);max-width:520px;margin-left:auto}
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rv{opacity:0;transform:translateY(32px);transition:opacity var(--dur-4) var(--ease-evidence),transform var(--dur-4) var(--ease-evidence)}
.rv.on{opacity:1;transform:none}
.blink{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rec);margin-right:8px;animation:blink 1.4s steps(1) infinite;vertical-align:1px}
@keyframes blink{50%{opacity:.15}}

/* ---- Кнопки ---- */
.btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:16px 32px;cursor:pointer;border:none;transition:all var(--dur-2) var(--ease-evidence);text-decoration:none;display:inline-block}
.btn-primary{background:var(--accent);color:#0B0B0C;font-weight:600}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,212,0,.3)}
.btn-ghost{background:none;border:1px solid var(--fg);color:var(--fg)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn-line{background:none;color:var(--fg);padding:16px 4px;border-bottom:2px solid var(--accent)}
.btn-line:hover{padding:16px 14px;background:rgba(255,212,0,.12)}

/* ---- Топбар ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,4vw,48px);background:rgba(11,11,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.topbar .brand svg{height:30px;width:auto;color:var(--fg)}
.topbar .brand span{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em}
.topbar nav{display:none;gap:22px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
@media(min-width:1000px){.topbar nav{display:flex}}
.topbar nav a{text-decoration:none;transition:color var(--dur-1)}
.topbar nav a:hover,.topbar nav a.active,.topbar nav a[aria-current="page"]{color:var(--accent)}
.topbar .btn{padding:11px 20px;font-size:10px}
.topbar-actions{display:flex;align-items:center;gap:12px}

/* ---- Перемикач мов ---- */
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--fg-2)}
.lang-switch a{text-decoration:none;color:var(--fg-2);padding:4px 3px;transition:color var(--dur-1)}
.lang-switch a:hover{color:var(--fg)}
.lang-switch a.active{color:var(--accent);font-weight:600}
.lang-switch .sep{opacity:.4}
.mobile-nav .mobile-lang{margin-top:24px}
.mobile-nav .mobile-lang .lang-switch{font-size:13px;gap:10px}
.mobile-nav .mobile-lang .lang-switch a{padding:6px 4px}

/* ---- Футер ---- */
footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-bottom:56px}
.foot-grid .fc b{font-family:var(--font-display);font-size:12px;text-transform:uppercase;font-weight:600;display:block;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.foot-grid .fc a{display:block;font-family:var(--font-mono);font-size:11px;color:var(--fg-2);text-decoration:none;padding:4px 0;letter-spacing:.04em;transition:all var(--dur-1)}
.foot-grid .fc a:hover{color:var(--accent);padding-left:8px}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px}
.foot-bottom .slogan{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;line-height:1.5}
.foot-bottom .copy{font-family:var(--font-mono);font-size:10px;color:var(--fg-2);letter-spacing:.1em}
.foot-big{font-family:var(--font-display);font-weight:800;font-size:clamp(60px,12vw,190px);text-transform:uppercase;line-height:1;opacity:.07;user-select:none;text-align:center;margin-top:40px}

/* ---- Соцмережі (футер + сторінка контактів) — оригінальні іконки-плитки ---- */
.social-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.social-links a{display:block;width:50px;height:50px;line-height:0;transition:transform var(--dur-1)}
.social-links a:hover{transform:translateY(-3px)}
.social-links .soc-img{width:100%;height:100%;display:block;object-fit:contain}
.foot-social{margin-bottom:36px}
.social-block{margin-top:48px}
.social-block .label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);margin-bottom:14px}
.social-block .social-links a{width:56px;height:56px}

/* ---- Мобільне меню (додаток теми до брендбуку) ---- */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--line);color:var(--fg);cursor:pointer;border-radius:8px}
@media(min-width:1000px){.nav-toggle{display:none}}
.nav-toggle svg{width:18px;height:18px}
.mobile-nav{position:fixed;inset:0;z-index:120;background:rgba(11,11,12,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:none;flex-direction:column;padding:88px clamp(20px,6vw,48px) 40px;gap:4px}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--font-display);font-size:22px;font-weight:600;text-transform:uppercase;text-decoration:none;color:var(--fg);padding:14px 0;border-bottom:1px solid var(--line);letter-spacing:.02em}
.mobile-nav a:hover{color:var(--accent)}
.mobile-nav .close{position:absolute;top:20px;right:24px;background:none;border:none;color:var(--fg);font-size:26px;cursor:pointer;line-height:1}

/* ---- Форма заявки: honeypot + статус ---- */
.hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{padding:14px 18px;margin-bottom:22px;border-left:3px solid;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;line-height:1.5}
.form-note.ok{border-color:#1a7f37;background:rgba(26,127,55,.10);color:#12591f}
.form-note.err{border-color:var(--rec);background:rgba(255,59,48,.10);color:#a01a12}
.lead-form .send-row a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- Правові посилання у футері ---- */
.foot-legal{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-legal a{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;transition:color var(--dur-1)}
.foot-legal a:hover{color:var(--accent)}
@media(max-width:700px){.foot-legal{order:3;width:100%}}

/* ---- Банер згоди на cookie ---- */
.cookie-bar{position:fixed;left:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);bottom:clamp(12px,3vw,24px);z-index:130;display:none;gap:20px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);padding:18px 22px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cookie-bar.show{display:flex}
.cookie-bar p{font-size:13px;color:var(--fg-2);max-width:660px;line-height:1.55}
.cookie-bar p a{color:var(--accent);text-decoration:none}
.cookie-bar p a:hover{text-decoration:underline}
.cookie-bar .cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-bar .cb-btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--fg);transition:all var(--dur-2) var(--ease-evidence)}
.cookie-bar .cb-btn:hover{border-color:var(--fg)}
.cookie-bar .cb-btn.accept{background:var(--accent);border-color:var(--accent);color:#0B0B0C;font-weight:600}
.cookie-bar .cb-btn.accept:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
body.admin-bar .cookie-bar{bottom:clamp(12px,3vw,24px)}

/* ---- Попап заявки ---- */
.lead-modal[hidden]{display:none}
.lead-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.lm-overlay{position:absolute;inset:0;background:rgba(11,11,12,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:lmFade var(--dur-2) var(--ease-evidence)}
.lm-panel{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--paper);color:#0B0B0C;border:1px solid var(--paper-line);padding:clamp(28px,4vw,44px);box-shadow:0 40px 120px rgba(0,0,0,.55);animation:lmRise var(--dur-3) var(--ease-evidence)}
@keyframes lmFade{from{opacity:0}to{opacity:1}}
@keyframes lmRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.lm-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:30px;line-height:1;cursor:pointer;color:var(--ink-2);transition:color var(--dur-1)}
.lm-close:hover{color:#0B0B0C}
.lm-panel .label{color:var(--ink-2)}
.lm-panel h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3.5vw,34px);line-height:1.05;margin:10px 0 8px;letter-spacing:-.01em}
.lm-sub{color:var(--ink-2);font-size:14px;margin-bottom:26px;line-height:1.5}
.lm-consent{margin-top:16px;font-size:12px;color:var(--ink-2);line-height:1.5}
.lm-consent a{color:#0B0B0C;text-decoration:underline;text-underline-offset:2px}
/* самодостатні стилі полів попапу (не залежать від CSS сторінки) */
.lm-panel .f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.lm-panel .f2{grid-template-columns:1fr}}
.lm-panel .field{margin-bottom:16px}
.lm-panel .field label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.lm-panel .field input,.lm-panel .field textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--paper-line);color:#0B0B0C;font-family:var(--font-text);font-size:16px;padding:10px 0;outline:none;transition:border-color var(--dur-2)}
.lm-panel .field textarea{min-height:82px;resize:vertical}
.lm-panel .field input:focus,.lm-panel .field textarea:focus{border-bottom-color:#0B0B0C}
.lm-panel .modal-form>button[type=submit]{margin-top:12px;width:100%;text-align:center}
body.modal-open{overflow:hidden}