/* ============================================================

   ITCORE — лендинг інтегратора інженерних систем

   Контактні дані — плейсхолдери, фото — плейсхолдери (див. список унизу файлу)

   ============================================================ */



:root{

  /* темна «інженерна» база */

  --ink:      #0A0F13;

  --ink-2:    #101A20;

  --ink-3:    #17242C;

  --line-d:   #22333D;

  --on-dark:  #EDF2F3;

  --muted-d:  #93A6B0;



  /* світла база */

  --bg:       #FFFFFF;

  --bg-2:     #F0F3F4;

  --bg-3:     #E6EBEC;

  --line:     #D8DEE0;

  --text:     #0A0F13;

  --muted:    #59686F;



  /* єдиний акцент: глибокий тіл */

  --acc:      #0B7A62;

  --acc-h:    #095E4C;

  --acc-br:   #2FD3A9;

  --acc-soft: #E2F2ED;



  --r:  10px;

  --r-l: 16px;

  --pad: clamp(24px, 5vw, 72px);

  --maxw: 1240px;



  --sh-1: 0 1px 2px rgba(10,15,19,.05), 0 8px 24px -12px rgba(10,15,19,.18);

  --sh-2: 0 2px 4px rgba(10,15,19,.06), 0 24px 48px -20px rgba(10,15,19,.28);

}



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

html{ scroll-behavior:smooth; }



body{

  margin:0;

  background:var(--bg);

  color:var(--text);

  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-size:17px;

  line-height:1.62;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}



h1,h2,h3,h4{

  font-family:"Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  font-weight:600;

  letter-spacing:-0.022em;

  line-height:1.1;

  margin:0;

  text-wrap:balance;

}



p{ margin:0; }

ul{ margin:0; padding:0; list-style:none; }

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

img,svg{ max-width:100%; }

svg{ display:block; }



/* ---------- службове ---------- */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }



.mono{

  font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  font-size:12px;

  letter-spacing:.14em;

  text-transform:uppercase;

  font-weight:500;

}



.eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--acc); margin-bottom:20px; }

.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; }

.eyebrow--dark{ color:var(--acc-br); }



section{ position:relative; }

.sec{ padding-block:clamp(72px, 9vw, 132px); }

.sec--tight{ padding-block:clamp(56px, 7vw, 92px); }

.sec--light{ background:var(--bg); }

.sec--grey{ background:var(--bg-2); }

.sec--dark{ background:var(--ink); color:var(--on-dark); }

.sec--dark h1,.sec--dark h2,.sec--dark h3{ color:#fff; }



.h2{ font-size:clamp(28px, 3.6vw, 46px); }

.lead{ font-size:clamp(17px, 1.35vw, 19px); color:var(--muted); }

.sec--dark .lead{ color:var(--muted-d); }



/* сітка «шапка ліворуч / контент праворуч» */

.split{

  display:grid;

  grid-template-columns:minmax(0,1fr);

  gap:clamp(28px, 4vw, 56px);

}

@media (min-width:960px){

  .split{ grid-template-columns:minmax(300px, 0.85fr) minmax(0, 1.15fr); gap:clamp(40px,6vw,96px); }

  .split__side{ position:sticky; top:112px; align-self:start; }

}



/* ---------- кнопки ---------- */

.btn{

  display:inline-flex; align-items:center; justify-content:center; gap:10px;

  font-family:"Inter Tight", Inter, system-ui, sans-serif;

  font-weight:600; font-size:16px; line-height:1;

  padding:16px 26px;

  border-radius:var(--r);

  border:1px solid transparent;

  cursor:pointer;

  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;

}

.btn svg{ width:18px; height:18px; }

.btn--primary{ background:var(--acc); color:#fff; }

.btn--primary:hover{ background:var(--acc-h); }

.btn--primary:active{ transform:translateY(1px); }

.btn--onDark{ background:var(--acc-br); color:#04211A; }

.btn--onDark:hover{ background:#59E2BE; }

.btn--ghostDark{ background:transparent; color:var(--on-dark); border-color:var(--line-d); }

.btn--ghostDark:hover{ border-color:#39505C; background:rgba(255,255,255,.04); }

.btn--ghost{ background:transparent; color:var(--acc); border-color:var(--line); }

.btn--ghost:hover{ border-color:var(--acc); background:var(--acc-soft); }

.btn--tg svg{ width:18px; height:18px; }

.btn--sm{ padding:11px 18px; font-size:14px; }

.btn--block{ width:100%; }



:where(a,button,input,select,textarea,summary):focus-visible{

  outline:2px solid var(--acc-br);

  outline-offset:3px;

  border-radius:6px;

}



/* ============================================================

   ШАПКА

   ============================================================ */

.hdr{

  position:fixed; inset:0 0 auto 0; z-index:60;

  background:rgba(10,15,19,.82);

  backdrop-filter:saturate(140%) blur(14px);

  -webkit-backdrop-filter:saturate(140%) blur(14px);

  border-bottom:1px solid rgba(255,255,255,.07);

  color:var(--on-dark);

}

.hdr__in{ display:flex; align-items:center; gap:18px; height:68px; }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }

.brand__mark{ width:26px; height:26px; color:var(--acc-br); flex:none; }

.brand__name{

  font-family:"Inter Tight", Inter, sans-serif;

  font-weight:600; font-size:16px; letter-spacing:.19em; text-transform:uppercase;

  color:#fff;

}

.brand__sub{

  display:none; font-size:11px; letter-spacing:.1em; color:var(--muted-d); text-transform:uppercase;

}

/* brand__sub в шапці приховано 2026-09-26: наїжджало на меню при ширшому шрифті-заміннику */



.nav{ display:none; gap:24px; align-items:center; }

.nav a{ font-size:14.5px; color:var(--muted-d); white-space:nowrap; transition:color .16s ease; }

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

@media (min-width:1000px){ .nav{ display:flex; } }



/* перемикач мови */

.lang{ display:inline-flex; align-items:center; gap:8px; flex:none; }

.lang a{

  font-family:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  font-size:12px; letter-spacing:.12em; text-transform:uppercase;

  color:var(--muted-d); transition:color .16s ease;

}

.lang a:hover{ color:#fff; }

.lang a.is-on{ color:var(--acc-br); }

.lang span{ color:#3A4C55; font-size:11px; }

.mnav .lang{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }

.mnav .lang a{ display:inline; padding:0; border:0; font-size:13px; }



.hdr__phone{ display:none; font-size:14.5px; color:var(--on-dark); align-items:center; gap:8px; white-space:nowrap; }

.hdr__phone svg{ width:16px; height:16px; color:var(--acc-br); }

@media (min-width:1200px){ .hdr__phone{ display:inline-flex; } }



.hdr .btn{ display:none; white-space:nowrap; }

@media (min-width:1000px){ .hdr .btn{ display:inline-flex; } }



.burger{

  display:inline-flex; align-items:center; justify-content:center;

  width:42px; height:42px; padding:0;

  background:transparent; border:1px solid var(--line-d); border-radius:var(--r);

  color:var(--on-dark); cursor:pointer;

}

.burger svg{ width:20px; height:20px; }

@media (min-width:1000px){ .burger{ display:none; } }



.mnav{

  border-top:1px solid rgba(255,255,255,.07);

  background:var(--ink);

  padding:14px var(--pad) 26px;

}

.mnav a{ display:block; padding:13px 0; font-size:17px; border-bottom:1px solid rgba(255,255,255,.06); }

.mnav .btn{ margin-top:20px; }

.mnav__contact{ margin-top:18px; color:var(--muted-d); font-size:15px; }



/* ============================================================

   ПЛАВАЮЧА КНОПКА ЗАЯВКИ

   ============================================================ */

.fab-form{

  position:fixed; right:20px; bottom:20px; z-index:55;

  display:inline-flex; align-items:center; gap:8px;

  padding:13px 18px;

  border-radius:999px;

  background:var(--acc); color:#fff;

  font-family:"Inter Tight", Inter, sans-serif; font-weight:600; font-size:14.5px;

  box-shadow:0 12px 28px -10px rgba(11,122,98,.55);

  transition:background-color .18s ease, transform .18s ease;

}

.fab-form:hover{ background:var(--acc-h); transform:translateY(-2px); }

.fab-form svg{ width:18px; height:18px; flex:none; }

@media (max-width:479px){ .fab-form span{ display:none; } .fab-form{ padding:14px; } }

.fab-form{ transition:background-color .18s ease, transform .25s ease, opacity .25s ease; }

.fab-form.is-hidden{ opacity:0; transform:translateY(12px); pointer-events:none; }



/* ============================================================

   HERO

   ============================================================ */

.hero{

  position:relative; overflow:hidden;

  background-color:var(--ink);

  background-image:

    linear-gradient(100deg, rgba(10,15,19,.95) 0%, rgba(10,15,19,.88) 36%, rgba(10,15,19,.58) 64%, rgba(10,15,19,.32) 100%),

    url('/hero-bg-video.jpg?v=20260917');

  background-size:cover, cover;

  background-position:center, center;

  background-repeat:no-repeat, no-repeat;

  color:var(--on-dark);

  padding-top:calc(68px + clamp(56px, 7vw, 104px));

  padding-bottom:clamp(64px, 8vw, 116px);

}

.hero__bg{ position:absolute; inset:0; pointer-events:none; }

.hero__bg::before{

  content:""; position:absolute; inset:0;

  background:

    radial-gradient(900px 520px at 78% 6%,  rgba(47,211,169,.15), transparent 62%),

    radial-gradient(700px 480px at 8% 92%,  rgba(11,122,98,.20),  transparent 66%),

    radial-gradient(1100px 700px at 50% -20%, rgba(120,170,190,.10), transparent 70%);

}

.hero__bg::after{

  content:""; position:absolute; inset:0;

  background-image:

    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);

  background-size:64px 64px;

  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);

          mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);

}

.hero__in{ position:relative; display:grid; gap:clamp(44px,5vw,64px); grid-template-columns:minmax(0,1fr); }

@media (min-width:1040px){

  .hero__in{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; gap:clamp(48px,5vw,80px); }

}



.hero h1{

  font-size:clamp(34px, 5.2vw, 62px);

  font-weight:700;

  letter-spacing:-0.03em;

  color:#fff;

  max-width:17ch;

}

.hero__sub{

  margin-top:24px;

  font-size:clamp(17px, 1.6vw, 21px);

  line-height:1.55;

  color:#C6D3D8;

  max-width:54ch;

}



.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }

.chip{

  font-family:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  font-size:12px; letter-spacing:.05em;

  padding:7px 12px;

  border:1px solid var(--line-d);

  border-radius:999px;

  color:#B9CBD2;

  background:rgba(255,255,255,.02);

}

.chip--acc{ color:var(--acc-br); border-color:rgba(47,211,169,.38); background:rgba(47,211,169,.06); }



.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }



/* інженерна рамка з фото об'єкта */

.scheme{

  position:relative;

  border:1px solid var(--line-d);

  border-radius:var(--r-l);

  background:linear-gradient(180deg, rgba(23,36,44,.85), rgba(16,26,32,.7));

  padding:18px;

  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);

}

.scheme__hd{

  display:flex; justify-content:space-between; align-items:center; gap:12px;

  color:var(--muted-d); margin-bottom:14px; padding:2px 4px 10px;

  border-bottom:1px dashed rgba(255,255,255,.09);

}

.scheme__hd span:last-child{ color:var(--acc-br); }



/* слот під реальне фото (працює і з порожнім src) */

.hero__photo{

  position:relative;

  aspect-ratio:4/3;

  border-radius:var(--r);

  overflow:hidden;

  background:

    linear-gradient(180deg, #16232B, #101A20);

  border:1px solid var(--line-d);

}

.hero__photo::before{

  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;

  background-image:

    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);

  background-size:32px 32px;

}

.hero__photo img{

  position:relative; z-index:1;

  width:100%; height:100%;

  object-fit:cover; display:block;

  font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--muted-d);

}

.scheme__strip{ margin-top:14px; }

.scheme__cap{ display:flex; justify-content:space-between; gap:12px; color:#6E8792; margin-top:10px; }



/* ============================================================

   ПРО КОМПАНІЮ + ПІДХІД

   ============================================================ */

.statements{ display:grid; gap:0; margin-top:8px; }

.statements li{

  padding:20px 0 20px 26px;

  border-top:1px solid var(--line);

  position:relative;

  font-size:17px;

  color:#26333A;

}

.statements li:last-child{ border-bottom:1px solid var(--line); }

.statements li::before{

  content:""; position:absolute; left:0; top:30px;

  width:9px; height:9px; border:1.5px solid var(--acc); border-radius:2px;

  transform:rotate(45deg);

}

.statements--dark li{ border-color:var(--line-d); color:#CBD8DD; }

.statements--dark li::before{ border-color:var(--acc-br); }



.reasons{ display:grid; gap:clamp(22px,3vw,34px) clamp(26px,4vw,48px); grid-template-columns:minmax(0,1fr); margin-top:clamp(30px,4vw,44px); }

@media (min-width:620px){ .reasons{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.reason{ padding-top:20px; border-top:2px solid var(--text); }

.reason:nth-child(even){ border-top-color:var(--acc); }

.reason svg{ width:24px; height:24px; color:var(--acc); margin-bottom:12px; }

.reason h3{ font-size:19px; margin-bottom:8px; }

.reason p{ color:var(--muted); font-size:15.5px; }



/* ============================================================

   ПОСЛУГИ

   ============================================================ */

.svc{

  display:grid; gap:16px; margin-top:clamp(34px,4vw,52px);

  grid-template-columns:minmax(0,1fr);

}

@media (min-width:700px){ .svc{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (min-width:1060px){ .svc{ grid-template-columns:repeat(6,minmax(0,1fr)); } }



.card{

  background:var(--bg);

  border:1px solid var(--line);

  border-radius:var(--r-l);

  padding:28px;

  box-shadow:var(--sh-1);

  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;

  display:flex; flex-direction:column; gap:12px;

}

.card:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); border-color:#C6CFD2; }

.card__ic{

  width:44px; height:44px; border-radius:9px;

  display:grid; place-items:center;

  background:var(--acc-soft); color:var(--acc);

  margin-bottom:6px;

}

.card__ic svg{ width:22px; height:22px; }

.card h3{ font-size:20px; }

.card p{ color:var(--muted); font-size:15.5px; line-height:1.6; }



@media (min-width:700px){

  .svc .card--full{ grid-column:1 / -1; }

}

@media (min-width:1060px){

  .svc .card{ grid-column:span 2; }

  .svc .card--wide{ grid-column:span 3; }

  .svc .card--full{ grid-column:1 / -1; }

}



.card--dark{

  background:linear-gradient(155deg, var(--ink-3), var(--ink));

  border-color:var(--line-d);

  color:var(--on-dark);

  box-shadow:0 30px 60px -34px rgba(10,15,19,.7);

}

.card--dark h3{ color:#fff; }

.card--dark p{ color:var(--muted-d); }

.card--dark .card__ic{ background:rgba(47,211,169,.12); color:var(--acc-br); }

.card--dark:hover{ border-color:#2E4551; }



/* пріоритетна картка «Відеоспостереження» */

.card--lead{ padding:clamp(24px,3vw,36px); gap:0; }

.card--lead .lead__grid{ display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:minmax(0,1fr); align-items:center; }

@media (min-width:860px){ .card--lead .lead__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }

.card--lead h3{ font-size:clamp(24px,2.6vw,32px); margin-bottom:12px; }

.card--lead .card__tag{

  display:inline-flex; align-items:center; gap:8px;

  color:var(--acc-br); margin-bottom:16px;

}

.card--lead ul{ display:grid; gap:8px; margin-top:18px; }

.card--lead ul li{ position:relative; padding-left:22px; color:#C6D3D8; font-size:15.5px; }

.card--lead ul li::before{ content:""; position:absolute; left:0; top:11px; width:10px; height:1.5px; background:var(--acc-br); }



.photo{

  position:relative;

  aspect-ratio:4/3;

  border-radius:var(--r);

  overflow:hidden;

  background:linear-gradient(180deg,#16232B,#101A20);

  border:1px solid var(--line-d);

}

.photo img{

  width:100%; height:100%; object-fit:cover; display:block;

  font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--muted-d);

}



/* ============================================================

   ПРОЦЕС МОНТАЖУ ВІДЕОСПОСТЕРЕЖЕННЯ (фото-врізка)

   ============================================================ */

.vproc{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); margin-top:clamp(30px,3.5vw,44px); }

@media (min-width:760px){ .vproc{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.vstep__n{ display:block; color:var(--acc-br); margin-bottom:10px; }

.vstep h3{ font-size:17.5px; margin-top:14px; }

.vstep p{ color:var(--muted-d); font-size:15px; margin-top:6px; }



/* ============================================================

   ПЕРЕЛІК РОБІТ

   ============================================================ */

.works{ margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--line); }

.works details{ border-bottom:1px solid var(--line); }

.works summary{

  list-style:none; cursor:pointer;

  display:flex; align-items:center; gap:16px;

  padding:20px 4px;

  font-family:"Inter Tight", Inter, sans-serif;

  font-weight:600; font-size:clamp(17px,1.6vw,20px); letter-spacing:-0.015em;

}

.works summary::-webkit-details-marker{ display:none; }

.works summary .idx{ color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.08em; }

.works summary .plus{ margin-left:auto; width:22px; height:22px; color:var(--acc); flex:none; transition:transform .22s ease; }

.works details[open] summary .plus{ transform:rotate(45deg); }

.works summary:hover{ color:var(--acc); }

.works__body{ padding:0 4px 24px 46px; display:grid; gap:10px; }

.works__body li{ position:relative; padding-left:24px; color:var(--muted); font-size:16px; }

.works__body li::before{

  content:""; position:absolute; left:2px; top:11px; width:10px; height:1.5px; background:var(--acc);

}



/* ============================================================

   ДЛЯ КОГО

   ============================================================ */

.targets{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); margin-top:clamp(30px,3.5vw,44px); }

@media (min-width:620px){ .targets{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (min-width:1000px){ .targets{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.target{

  display:flex; align-items:center; gap:14px;

  padding:20px 22px;

  border:1px solid var(--line-d);

  border-radius:var(--r);

  background:rgba(255,255,255,.025);

  font-size:16.5px; color:#DCE6EA;

  transition:border-color .2s ease, background-color .2s ease;

}

.target:hover{ border-color:#33505C; background:rgba(255,255,255,.05); }

.target svg{ width:22px; height:22px; color:var(--acc-br); flex:none; }

.closer{

  margin-top:28px; padding:26px 28px;

  border-left:2px solid var(--acc-br);

  background:rgba(47,211,169,.05);

  border-radius:0 var(--r) var(--r) 0;

  font-size:clamp(16.5px,1.5vw,19px); color:#E4EEF1;

}

.closer b{ display:block; font-family:"Inter Tight",Inter,sans-serif; color:#fff; font-size:clamp(18px,1.7vw,21px); margin-bottom:10px; }

.closer p + p{ margin-top:10px; }



/* ============================================================

   ПРОЦЕС

   ============================================================ */

.steps{ display:grid; grid-template-columns:minmax(0,1fr); margin-top:clamp(34px,4vw,54px); column-gap:clamp(32px,5vw,80px); }

@media (min-width:840px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.step{

  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 20px;

  padding:22px 0;

  border-top:1px solid var(--line);

}

.step__n{

  font-family:"IBM Plex Mono", monospace;

  font-size:13px; font-weight:500; letter-spacing:.1em;

  color:var(--acc);

  padding-top:5px;

}

.step h3{ font-size:19px; }

.step p{ color:var(--muted); font-size:15.5px; margin-top:7px; }



/* ============================================================

   ФОРМА

   ============================================================ */

.cta__grid{ display:grid; gap:clamp(32px,4vw,64px); grid-template-columns:minmax(0,1fr); align-items:start; }

@media (min-width:960px){ .cta__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.94fr); gap:clamp(44px,6vw,88px); } }



.formcard{

  background:var(--bg);

  border:1px solid var(--line);

  border-radius:var(--r-l);

  padding:clamp(24px,3vw,36px);

  box-shadow:var(--sh-2);

}

.field{ margin-bottom:18px; }

.field label{ display:block; font-size:14px; font-weight:500; color:#2A373D; margin-bottom:8px; }

.field .req{ color:var(--acc); }

.field input, .field select, .field textarea{

  width:100%;

  font:inherit; font-size:16px;

  color:var(--text);

  background:var(--bg-2);

  border:1px solid var(--line);

  border-radius:var(--r);

  padding:14px 15px;

  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;

}

.field textarea{ min-height:112px; resize:vertical; }

.field select{ appearance:none; -webkit-appearance:none; background-image:none; cursor:pointer; }

.selwrap{ position:relative; }

.selwrap svg{ position:absolute; right:14px; top:50%; margin-top:-9px; width:18px; height:18px; color:var(--muted); pointer-events:none; }

.field input:hover, .field select:hover, .field textarea:hover{ border-color:#BFC8CB; }

.field input:focus, .field select:focus, .field textarea:focus{

  outline:none; background:#fff; border-color:var(--acc);

  box-shadow:0 0 0 3px rgba(11,122,98,.14);

}

.field .err{ display:none; margin-top:7px; font-size:13.5px; color:#B4342A; }

.field.is-bad input, .field.is-bad select, .field.is-bad textarea{ border-color:#B4342A; background:#FDF3F2; }

.field.is-bad .err{ display:block; }

.form__note{ margin-top:14px; font-size:13.5px; color:var(--muted); line-height:1.5; }



.thanks{ display:none; text-align:center; padding:26px 4px 12px; }

.thanks svg{ width:52px; height:52px; color:var(--acc); margin:0 auto 18px; }

.thanks h3{ font-size:24px; margin-bottom:10px; }

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

.formcard.is-sent form{ display:none; }

.formcard.is-sent .thanks{ display:block; }



.contacts{ display:grid; gap:18px; margin-top:32px; }

.contact{ display:flex; gap:14px; align-items:flex-start; }

.contact svg{ width:20px; height:20px; color:var(--acc); flex:none; margin-top:3px; }

.contact b{ display:block; font-weight:600; font-size:16.5px; }

.contact span{ color:var(--muted); font-size:14.5px; }



/* ============================================================

   ФУТЕР

   ============================================================ */

.ftr{ background:var(--ink); color:var(--muted-d); padding-block:clamp(48px,6vw,72px) 30px; }

.ftr__top{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); }

@media (min-width:800px){ .ftr__top{ grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap:44px; } }

.ftr h4{ color:#fff; font-size:15px; letter-spacing:.02em; margin-bottom:16px; }

.ftr a:hover{ color:#fff; }

.ftr li{ margin-bottom:10px; font-size:15px; }

.ftr__about{ font-size:15px; max-width:44ch; margin-top:16px; }

.ftr__bottom{

  margin-top:44px; padding-top:22px;

  border-top:1px solid rgba(255,255,255,.08);

  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;

  font-size:13.5px;

}

.ftr__ph{ color:#7C8F99; }



/* ---------- поява при скролі ---------- */

.rv{ opacity:0; transform:translateY(16px); }

.rv.is-in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }



@media (prefers-reduced-motion: reduce){

  html{ scroll-behavior:auto; }

  *,*::before,*::after{ animation:none !important; transition:none !important; }

  .rv{ opacity:1; transform:none; }

  .card:hover{ transform:none; }

}



/* ============================================================

   ДОДАТКОВІ КОМПОНЕНТИ: сторінки послуг, хлібні крихти, лінки карток

   ============================================================ */

.card__more{

  margin-top:auto; padding-top:4px;

  display:inline-flex; align-items:center; gap:6px;

  font-family:"Inter Tight", Inter, sans-serif; font-weight:600; font-size:14px;

  color:var(--acc);

}

.card__more svg{ width:15px; height:15px; transition:transform .16s ease; }

.card a.card__more:hover svg{ transform:translateX(3px); }

.card--dark .card__more{ color:var(--acc-br); }



.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; color:#8FA3AC; }

.crumbs a{ color:#8FA3AC; }

.crumbs a:hover{ color:#fff; }

.crumbs span{ opacity:.5; }

.crumbs .is-cur{ color:#fff; }



.shero{

  position:relative; overflow:hidden;

  background:var(--ink); color:var(--on-dark);

  padding-top:calc(68px + clamp(44px, 6vw, 76px));

  padding-bottom:clamp(48px, 6vw, 76px);

}

.shero__bg{ position:absolute; inset:0; pointer-events:none; }

.shero__bg::before{

  content:""; position:absolute; inset:0;

  background:radial-gradient(900px 520px at 82% 0%, rgba(47,211,169,.13), transparent 62%),

             radial-gradient(700px 480px at 4% 100%, rgba(11,122,98,.16), transparent 66%);

}

.shero__in{ position:relative; max-width:74ch; }

.shero h1{ font-size:clamp(30px,4.2vw,48px); font-weight:700; letter-spacing:-.025em; color:#fff; margin-top:6px; }

.shero p{ margin-top:18px; font-size:clamp(16px,1.4vw,18.5px); line-height:1.6; color:#C6D3D8; max-width:58ch; }

.shero .hero__cta{ margin-top:28px; }



.plain-list{ display:grid; gap:0; margin-top:clamp(20px,3vw,32px); }

.plain-list li{

  display:flex; gap:14px; align-items:flex-start;

  padding:16px 4px; border-top:1px solid var(--line); font-size:16px; color:#26333A;

}

.plain-list li:last-child{ border-bottom:1px solid var(--line); }

.plain-list li svg{ width:19px; height:19px; color:var(--acc); flex:none; margin-top:2px; }



.relsvc{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr); margin-top:clamp(26px,3vw,38px); }

@media (min-width:640px){ .relsvc{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (min-width:980px){ .relsvc{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.relsvc a{

  display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r);

  font-family:"Inter Tight",Inter,sans-serif; font-weight:600; font-size:15px;

  transition:border-color .16s ease, background-color .16s ease;

}

.relsvc a:hover{ border-color:var(--acc); background:var(--acc-soft); }



.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }





/* ============================================================

   ПОСЛУГИ — фото-банерні картки (додано 2026-09-15)

   Патерн: фото на всю картку, іконка-бейдж поверх фото,

   заголовок/опис/лінк знизу на затемненні. Темна палітра ITCORE.

   ============================================================ */

.card--photo{

  position:relative;

  overflow:hidden;

  padding:0;

  gap:0;

  background:var(--ink-2);

  border-color:var(--line-d);

  color:var(--on-dark);

  justify-content:flex-end;

  min-height:330px;

}

@media (min-width:700px){

  .card--photo{ aspect-ratio:5/4; min-height:0; }

}

@media (min-width:1060px){

  /* на трьох колонках картка вища — щоб фото читалось, а не тільки текст */

  .svc .card--photo{ aspect-ratio:1/1; }

}



.card--photo .card__media{

  position:absolute; inset:0; z-index:0;

  display:block; overflow:hidden;

}

.card--photo .card__media img{

  width:100%; height:100%; object-fit:cover; display:block;

  transition:transform .5s cubic-bezier(.2,.7,.3,1);

}



/* Скрим: легке затемнення зверху під іконку + щільне знизу під текст */

.card--photo::after{

  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;

  background:linear-gradient(180deg,

    rgba(10,15,19,.50) 0%,

    rgba(10,15,19,.10) 28%,

    rgba(10,15,19,.55) 60%,

    rgba(10,15,19,.94) 100%);

}



.card--photo .card__ic{

  position:absolute; z-index:2; top:18px; left:18px;

  width:42px; height:42px; margin:0;

  border-radius:10px;

  background:rgba(10,15,19,.55);

  border:1px solid rgba(47,211,169,.38);

  color:var(--acc-br);

  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);

}

.card--photo .card__ic svg{ width:21px; height:21px; }



.card--photo .card__body{

  position:relative; z-index:2;

  margin-top:auto;

  display:flex; flex-direction:column; gap:10px;

  padding:26px 24px 24px;

}

.card--photo h3{ color:#fff; font-size:20px; text-shadow:0 1px 12px rgba(10,15,19,.5); }

.card--photo p{ color:rgba(237,242,243,.86); font-size:15px; line-height:1.55; }

.card--photo .card__more{ color:var(--acc-br); }



.card--photo:hover{ border-color:#2E4551; box-shadow:0 26px 52px -26px rgba(10,15,19,.65); }

.card--photo:hover .card__media img{ transform:scale(1.05); }

/* .rv.is-in скидає transform, тому hover-підйом треба задати сильнішим селектором */

.card--photo.rv.is-in:hover{ transform:translateY(-3px); }

@media (hover:none){

  .card--photo:hover .card__media img{ transform:none; }

  .card--photo.rv.is-in:hover{ transform:none; }

}



/* Широка картка на всю ширину сітки: фото-банер із текстом зліва */

.svc .card--photo.card--full{ aspect-ratio:auto; min-height:330px; }

@media (min-width:860px){

  .svc .card--photo.card--full{ min-height:300px; }

  .svc .card--photo.card--full .card__body{ max-width:min(620px,58%); padding:30px 28px 28px; }

  /* додаткове затемнення зліва — праворуч на фото стоїть технік */

  .svc .card--photo.card--full::after{

    background:

      linear-gradient(180deg, rgba(10,15,19,.34) 0%, rgba(10,15,19,.10) 30%, rgba(10,15,19,.52) 68%, rgba(10,15,19,.90) 100%),

      linear-gradient(90deg, rgba(10,15,19,.80) 0%, rgba(10,15,19,.42) 40%, rgba(10,15,19,0) 72%);

  }

}



@media (max-width:480px){

  .card--photo .card__body{ padding:22px 20px 20px; }

  .card--photo .card__ic{ top:14px; left:14px; width:38px; height:38px; }

  .card--photo .card__ic svg{ width:19px; height:19px; }

}



/* Перехід на сторінку послуги — явна кнопка, а не текстовий лінк.

   Скоуплено на блок .svc головної, щоб не чіпати лінки на сторінках послуг. */

.svc .card__more{

  align-self:flex-start;

  padding:11px 17px;

  border-radius:999px;

  background:rgba(47,211,169,.13);

  border:1px solid rgba(47,211,169,.48);

  color:var(--acc-br);

  font-size:14px;

  gap:8px;

  transition:background .18s ease, border-color .18s ease, color .18s ease;

}

.svc .card--photo .card__more{ margin-top:auto; }

.svc .card--lead .card__more{ margin-top:22px; }

.svc .card__more svg{ width:16px; height:16px; }

.svc .card__more:hover,

.svc .card__more:focus-visible{

  background:var(--acc-br);

  border-color:var(--acc-br);

  color:var(--ink);

}

.svc .card__more:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (max-width:480px){

  .svc .card__more{ padding:10px 15px; font-size:13.5px; }

}



/* ============================================================

   2026-09-17: відео-хіро, фото-картки об'єктів, портфоліо, пігулки форми

   ============================================================ */

.hl{ color:var(--acc-br); }



.segs{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:26px 0 0; padding:0; }

.seg{

  display:flex; align-items:center; gap:7px;

  font-size:13px; color:#D6E5E2;

  background:rgba(255,255,255,.03); border:1px solid var(--line-d);

  padding:8px 13px 8px 10px; border-radius:999px;

}

.seg svg{ width:16px; height:16px; color:var(--acc-br); flex:none; }



.hero__note{ margin-top:22px; font-size:12.5px; color:var(--muted-d); line-height:1.7; max-width:56ch; }



.portfolio-grid{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); margin-top:clamp(30px,3.5vw,44px); }

@media (min-width:700px){ .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (min-width:1060px){ .portfolio-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }



.pillset{ display:flex; flex-wrap:wrap; gap:8px; }

.pill-opt{

  font-size:13px; padding:9px 14px; border-radius:999px;

  border:1px solid var(--line); background:#fff; color:#2A373D; cursor:pointer;

  transition:background .15s ease, border-color .15s ease, color .15s ease;

}

.pill-opt:hover{ border-color:#BFC8CB; }

.pill-opt.is-on{ background:var(--acc); border-color:var(--acc); color:#fff; }



/* ---------- крупніший текст на мобільному (десктоп не чіпаємо) ---------- */

@media (max-width:640px){

  body{ font-size:18px; }

  .h2{ font-size:clamp(30px, 3.6vw, 46px); }

  .lead{ font-size:clamp(18px, 1.35vw, 19px); }

  .shero p{ font-size:clamp(17.5px,1.4vw,18.5px); }

  .closer p{ font-size:clamp(18px,1.5vw,19px); }

  .closer b{ font-size:clamp(19px,1.7vw,21px); }

  .works summary{ font-size:clamp(18px,1.6vw,20px); }

  .card h3{ font-size:21px; }

  .card p{ font-size:16.5px; }

  .card--photo h3{ font-size:21px; }

  .card--photo p{ font-size:16px; }

  .card--lead h3{ font-size:clamp(25px,2.6vw,32px); }

  .card--lead ul li{ font-size:16.5px; }

  .reason h3{ font-size:20px; }

  .reason p{ font-size:16.5px; }

  .works__body li{ font-size:17px; }

  .vstep h3{ font-size:18.5px; }

  .vstep p{ font-size:16px; }

  .step h3{ font-size:20px; }

  .step p{ font-size:16.5px; }

  .ftr li{ font-size:16px; }

  .ftr__about{ font-size:16px; }

  .contact b{ font-size:17.5px; }

  .contact span{ font-size:15.5px; }

  .field label{ font-size:15px; }

  .form__note{ font-size:14.5px; }

  .field .err{ font-size:14.5px; }

  .hero__note{ font-size:13.5px; }

  .mnav a{ font-size:18px; }

  .mnav__contact{ font-size:16px; }

  .thanks h3{ font-size:25px; }

  .relsvc a{ font-size:17px; }

  .svc .card__more{ font-size:14.5px; }

}

.field .pillset + .err{ margin-top:10px; }



/* --- Хлібні крихти: акцентний hover, повна яскравість поточного пункту --- */
.crumbs a{ text-decoration:none; transition:color .18s ease; }
.crumbs a:hover, .crumbs a:focus-visible{ color:var(--acc-br); }
.crumbs .is-cur{ opacity:1; color:#fff; }
@media (max-width:640px){
  .crumbs{ font-size:13px; gap:7px; margin-bottom:18px; }
}

/* === 2026-09-18: читабельність тексту на фото-картках послуг (варіант A) === */
.svc .card--photo::after{
  background:linear-gradient(180deg,rgba(10,15,19,.55) 0%,rgba(10,15,19,.25) 22%,rgba(10,15,19,.80) 48%,rgba(10,15,19,.97) 100%);
}
.svc .card--photo h3{
  font-size:23px; font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.6);
}
.svc .card--photo p{
  color:#fff; font-size:16.5px; font-weight:500;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6);
}
@media (max-width:640px){
  .svc .card--photo h3{ font-size:22px; }
}

/* === Анімація кнопок (як btn-soft на epilstudio): заливка + підйом + кольорова тінь === */
.svc .card__more,
.btn{
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.svc .card__more:hover,
.svc .card__more:focus-visible,
.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 18px -8px rgba(47,211,169,.55);
}
.svc .card__more:active,
.btn:active{ transform:translateY(0); box-shadow:none; }
@media (prefers-reduced-motion:reduce){
  .svc .card__more:hover,.svc .card__more:focus-visible,.btn:hover,.btn:focus-visible{ transform:none; }
}

/* === Кнопки в картці «Відеоспостереження»: одна висота, обидві «таблетки» === */
.svc .card--lead .card__more{ margin-top:0; align-self:center; }
.svc .card--lead div[style*="flex-wrap"]{ align-items:center; margin-top:22px !important; }
.svc .card--lead .btn{
  align-self:center; border-radius:999px;
  padding:11px 17px; font-size:14px; font-weight:600; gap:8px;
}
.svc .card--lead .btn svg{ width:16px; height:16px; }
@media (max-width:480px){ .svc .card--lead .btn{ padding:10px 15px; font-size:13.5px; } }
.svc .card--lead .card__more,
.svc .card--lead .btn{ min-height:47px; }
@media (max-width:480px){ .svc .card--lead .card__more,.svc .card--lead .btn{ min-height:45px; } }

/* ===== Обладнання: бренди + сітка категорій (2026-10-13) ===== */
.brands{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:24px 0 0; padding:0; }
.brands li{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:14px; letter-spacing:.03em; padding:8px 15px; border-radius:999px; color:var(--acc-br); border:1px solid rgba(47,211,169,.38); background:rgba(47,211,169,.06); }
.brands li.brands__more{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.18); background:none; }
.shero .brands{ margin-bottom:6px; }
.reasons--dark .reason h3{ color:#fff; }
.reasons--dark .reason p{ color:rgba(255,255,255,.72); }
.reasons--dark .reason svg{ color:var(--acc-br); }
@media (min-width:1060px){ .reasons--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.eqband__in{ display:grid; gap:26px; align-items:end; }
.eqband .lead{ color:rgba(255,255,255,.75); margin-top:16px; max-width:68ch; }
@media (min-width:900px){ .eqband__in{ grid-template-columns:minmax(0,1fr) auto; gap:48px; } }
@media (max-width:640px){ .brands li{ font-size:14.5px; } }