/* ===========================================================================
   Alien Labs — IT для організацій. Ізольований шар стилів розділу /it/
   і нових блоків головної (home__doors, home__itblock).
   Правила: усі класи з префіксом "it-", щоб не конфліктувати з style.css.
   Шрифти — теми: ProximaNova (вже є), Conv_BebasNeue, Conv_Amatic, DIN2014.
   Підключається лише на сторінках розділу IT і на головній — includes/it-section.php.
   =========================================================================== */

/* Змінні на :root (не лише .it-scope): шапка й футер-колонки IT-розділу
   рендеряться theme-шаблонами header.php/footer.php ПОЗА обгорткою .it-scope
   (вона огортає лише контент сторінки у includes/blocks/it/page.php), тож
   var(--it-*) там має резолвитись так само — інакше, наприклад, фон
   .it-hdr-cyber "Кібератака?" у шапці мовчки стає прозорим. */
:root{
  --it-navy-900:#060b2e;
  --it-navy-800:#0b1546;
  --it-navy-700:#082b6a;
  --it-blue:#005aff;
  --it-blue-dark:#013ba6;
  --it-blue-soft:#ccdeff;
  --it-ink:#2a2a2a;
  --it-muted:#5a6276;
  --it-line:#e1e1e1;
  --it-bg-soft:#f5f7fb;
  --it-alert:#e52b2b;
  --it-ok:#0aa66b;
  --it-container:1180px;
}
.it-scope{
  font-family:"ProximaNova",Arial,sans-serif;
  color:var(--it-ink);
  font-size:16px;
  line-height:1.6;
}
.it-scope *,.it-scope *::before,.it-scope *::after{box-sizing:border-box;}
.it-scope svg{width:1em;height:1em;flex:none;}
.it-scope img{max-width:100%;}
.it-scope a{text-decoration:none;color:inherit;}
.it-scope ul{margin:0;padding:0;list-style:none;}

.it-container{max-width:var(--it-container);margin:0 auto;padding:0 20px;}
.it-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- Headings / text ---------- */
.it-h1{
  font-family:"ProximaNova",sans-serif;font-weight:900;text-transform:uppercase;
  color:var(--it-navy-900);font-size:34px;line-height:1.18;margin:0 0 14px;max-width:880px;
}
.it-h2{
  font-family:"ProximaNova",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.01em;
  color:var(--it-navy-900);margin:0 0 18px;position:relative;padding-bottom:18px;font-size:26px;line-height:1.22;
}
.it-h2::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--it-blue);}
.it-h2--light{color:#fff;}
.it-h3{font-family:"ProximaNova",sans-serif;font-weight:700;font-size:18px;color:var(--it-navy-900);margin:0 0 8px;}
.it-eyebrow{
  display:inline-block;font-family:"ProximaNova",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:12px;color:var(--it-blue);margin-bottom:8px;
}
.it-lead{font-size:18px;line-height:1.6;color:var(--it-muted);margin:0 0 20px;max-width:800px;}
.it-lead--light{color:#c7d0ea;}
.it-tag{font-weight:600;font-size:14px;color:rgba(255,255,255,.7);margin-top:8px;}
.it-num{font-family:"DIN2014",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;}
.it-bebas{font-family:"Conv_BebasNeue",sans-serif;font-weight:400;letter-spacing:.02em;}
.it-amatic{font-family:"Conv_Amatic",cursive;font-weight:700;}

/* ---------- Backgrounds ---------- */
.it-bg-navy{
  background-color:var(--it-navy-900);
  background-image:linear-gradient(135deg,#060b2e 0%,#0b1546 55%,#082b6a 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg stroke='white' stroke-opacity='0.12' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M75 63 L75 87 M63 75 L87 75'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,150px 150px;color:#fff;position:relative;
}
.it-bg-hero-photo{
  background-color:var(--it-navy-900);
  background-image:linear-gradient(90deg, rgba(6,11,46,.62) 0%, rgba(6,11,46,.25) 45%, rgba(6,11,46,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg stroke='white' stroke-opacity='0.12' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M75 63 L75 87 M63 75 L87 75'/%3E%3C/g%3E%3C/svg%3E"),
    url("../img/backgroundNlo.png");
  background-position:center,center,center;
  background-repeat:no-repeat,repeat,no-repeat;
  background-size:auto,150px 150px,cover;
  color:#fff;position:relative;
}
.it-bg-soft{background:var(--it-bg-soft);}
.it-bg-white{background:#fff;}

/* ---------- Buttons ---------- */
.it-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:4px;
  font-family:"ProximaNova",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.04em;border:2px solid transparent;white-space:nowrap;
  transition:opacity .15s ease;
}
.it-btn:hover{opacity:.9;}
.it-btn-primary{background:var(--it-blue);color:#fff;}
.it-btn-secondary{background:transparent;border-color:var(--it-blue);color:var(--it-blue);}
.it-btn-secondary--light{border-color:#fff;color:#fff;}
.it-btn-alert{background:var(--it-alert);color:#fff;}
.it-btn-block{width:100%;white-space:normal;height:auto;min-height:48px;padding:12px 20px;text-align:center;line-height:1.3;}
.it-btn-sm{height:40px;padding:0 18px;font-size:12px;}

/* ---------- Header: IT button + mini link ---------- */
.it-hdr-cyber{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--it-alert);color:#fff !important;border-radius:6px;
  height:40px;padding:0 16px;font-family:"ProximaNova",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
}
.it-hdr-repair-link{
  font-size:12px;font-weight:700;color:#fff !important;opacity:.8;text-decoration:underline;white-space:nowrap;
}
.header-black .it-hdr-repair-link{color:#0f172a !important;opacity:.65;}
.it-hdr-actions{display:flex;align-items:center;gap:14px;}
/* Бейдж "?" — лише скорочений мобільний варіант кнопки, на десктопі й за
   замовчуванням прихований (інакше поруч з "Кібератака?" висить зайвий "?"). */
.it-hdr-cyber-q{display:none;}

/* ---------- Breadcrumbs ---------- */
.it-breadcrumbs{padding:16px 0 6px;font-size:13px;color:var(--it-muted);}
.it-breadcrumbs a{color:var(--it-muted);}
.it-breadcrumbs a:hover{color:var(--it-blue);}
.it-breadcrumbs .sep{margin:0 6px;color:#aab2c5;}
.it-breadcrumbs .current{color:var(--it-navy-900);font-weight:600;}

/* ---------- Icon circle ---------- */
.it-icon-circle{
  width:60px;height:60px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(0,90,255,.16), rgba(0,90,255,.05) 70%);
  border:1px solid rgba(0,90,255,.18);
}
.it-icon-circle svg{width:28px;height:28px;color:var(--it-blue);}
.it-icon-circle--light{background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), rgba(255,255,255,.04) 70%);border-color:rgba(255,255,255,.25);}
.it-icon-circle--light svg{color:#fff;}
.it-icon-circle--alert{background:radial-gradient(circle at 50% 40%, rgba(229,43,43,.18), rgba(229,43,43,.05) 70%);border-color:rgba(229,43,43,.25);}
.it-icon-circle--alert svg{color:var(--it-alert);}

/* ---------- Cards / direction grid ---------- */
.it-card{background:#fff;border:1px solid var(--it-line);border-radius:8px;padding:24px;}
.it-card--navy{background:var(--it-navy-800);border:1px solid rgba(255,255,255,.08);color:#fff;}

.it-dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.it-dir-grid--4{grid-template-columns:repeat(4,1fr);}
.it-dir-card{
  background:#fff;border:1px solid var(--it-line);border-radius:8px;padding:22px;
  display:flex;flex-direction:column;gap:10px;position:relative;
}
.it-dir-card h3{font-family:"ProximaNova",sans-serif;font-weight:700;font-size:16px;color:var(--it-navy-900);margin:0;}
.it-dir-card p{font-size:14px;color:var(--it-muted);margin:0;flex:1;}
.it-dir-card .it-price-from{font-size:12.5px;color:var(--it-navy-900);font-weight:700;padding-top:10px;border-top:1px solid var(--it-line);}
.it-dir-card .it-price-from .it-bebas{font-size:17px;color:var(--it-blue);margin-left:2px;}
.it-dir-card a.it-dir-link{position:absolute;inset:0;}
.it-dir-card--featured{border:2px solid var(--it-blue);box-shadow:0 10px 26px rgba(0,90,255,.14);}
.it-dir-card--featured::before{
  content:"Ключова послуга";position:absolute;top:-12px;left:18px;background:var(--it-blue);color:#fff;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:30px;
}

.it-aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.it-aud-grid--2{grid-template-columns:repeat(2,1fr);}
.it-aud-card{background:#fff;border:1px solid var(--it-line);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:8px;}
.it-aud-card h3{font-size:15px;margin:0;color:var(--it-navy-900);}
.it-aud-card p{font-size:14px;color:var(--it-muted);margin:0;}
.it-aud-card a{font-size:13px;font-weight:700;color:var(--it-blue);}
/* Варіант "ікона зліва" (icon-circle + заголовок/текст поруч) — для карток
   "Для кого" / "Чому Alien Labs" за макетами. */
.it-aud-card--row{flex-direction:row;align-items:flex-start;gap:14px;}
.it-aud-card--row .it-icon-circle{margin-top:2px;}
.it-aud-card--row > div{display:flex;flex-direction:column;gap:6px;}
.it-aud-card--row h3{font-size:15.5px;}

/* ---------- Pills ---------- */
.it-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:30px;
  font-size:12.5px;font-weight:700;background:var(--it-bg-soft);color:var(--it-muted);border:1px solid var(--it-line);
}

/* ---------- FAQ accordion ---------- */
.it-faq-item{border-bottom:1px solid var(--it-line);}
.it-faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 2px;font-family:"ProximaNova",sans-serif;font-weight:700;font-size:15.5px;
  color:var(--it-navy-900);cursor:pointer;
}
.it-faq-item summary::-webkit-details-marker{display:none;}
.it-faq-item summary .it-ico{
  flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--it-blue);color:var(--it-blue);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
}
.it-faq-item[open] summary .it-ico::before{content:"\2212";}
.it-faq-item:not([open]) summary .it-ico::before{content:"\002B";}
.it-faq-item .it-faq-body{padding:0 2px 20px;color:var(--it-muted);font-size:14.5px;max-width:820px;}

/* ---------- Notice banner ([it_notice]) ---------- */
.it-notice{
  display:flex;gap:12px;align-items:flex-start;background:var(--it-bg-soft);
  border:1px solid var(--it-line);border-left:4px solid var(--it-blue);border-radius:6px;
  padding:14px 18px;font-size:14.5px;color:var(--it-navy-800);margin:0 0 24px;
}
.it-notice svg{width:20px;height:20px;flex:none;color:var(--it-blue);margin-top:1px;}

.it-info-box{
  display:flex;gap:10px;align-items:flex-start;background:#f2f6ff;border:1px solid var(--it-blue-soft);
  border-radius:6px;padding:14px 16px;font-size:13.5px;color:var(--it-navy-800);margin-top:14px;
}
.it-info-box svg{width:18px;height:18px;flex:none;color:var(--it-blue);margin-top:1px;}
.it-info-box--on-dark svg{color:#9fb0e0;}

/* ---------- Alert strip ---------- */
.it-alert-strip{
  background:linear-gradient(90deg,#b31f1f,#e52b2b);color:#fff;border-radius:8px;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 24px;
}
.it-alert-strip .it-msg{font-size:14.5px;font-weight:600;}
.it-alert-strip strong{display:block;font-size:16px;font-weight:700;text-transform:uppercase;}

/* ---------- Price tables ---------- */
.it-price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--it-line);border-radius:8px;overflow:hidden;margin:0 0 10px;}
.it-price-table caption{text-align:left;font-weight:700;color:var(--it-navy-900);padding:12px 0;font-size:14px;text-transform:uppercase;letter-spacing:.03em;}
.it-price-table th{background:var(--it-navy-900);color:#fff;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:12px 16px;font-weight:700;}
.it-price-table td{padding:12px 16px;border-top:1px solid var(--it-line);font-size:14px;vertical-align:top;}
.it-price-table td.it-price{font-family:"DIN2014",sans-serif;font-weight:700;font-size:15.5px;color:var(--it-navy-900);white-space:nowrap;}
.it-price-table tr.it-price-group td{background:var(--it-navy-900);color:#fff;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.03em;}
.it-price-table tr:nth-child(even):not(.it-price-group) td{background:var(--it-bg-soft);}
.it-price-note{font-size:12.5px;color:var(--it-muted);margin:8px 0 26px;}

/* Картки цін — мобільний двійник таблиці (лише /it/tsiny): обидва блоки в
   розмітці одночасно, тут лише перемикаємо видимість за шириною екрана,
   щоб на 390 не було горизонтального скролу таблиці. */
.it-price-cards{display:none;}
.it-price-cards-group{
  font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.03em;color:#fff;
  background:var(--it-navy-900);border-radius:6px;padding:8px 12px;margin:18px 0 8px;
}
.it-price-cards-group:first-child{margin-top:0;}
.it-price-card{border:1px solid var(--it-line);border-radius:8px;padding:14px 16px;background:#fff;margin:0 0 10px;}
.it-price-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.it-price-card-name{font-weight:700;font-size:14px;color:var(--it-navy-900);}
.it-price-card-price{font-family:"DIN2014",sans-serif;font-weight:700;font-size:15.5px;color:var(--it-blue);white-space:nowrap;}
.it-price-card-note{font-size:12.5px;color:var(--it-muted);margin-top:6px;}

/* ---------- Steps ---------- */
.it-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:itstep;}
.it-step{position:relative;padding-top:52px;}
.it-step::before{
  counter-increment:itstep;content:counter(itstep);position:absolute;top:0;left:0;
  width:40px;height:40px;border-radius:50%;background:var(--it-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:"Conv_BebasNeue",sans-serif;font-size:20px;
}
.it-step h4{font-size:14.5px;font-weight:700;color:var(--it-navy-900);margin:0 0 6px;}
.it-step p{font-size:13.5px;color:var(--it-muted);margin:0;}
.it-steps-v{display:flex;flex-direction:column;gap:18px;counter-reset:itstep;}
.it-steps-v .it-step{padding-top:0;padding-left:52px;}
.it-steps-v .it-step::before{top:-2px;left:0;}

/* ---------- Sections ---------- */
.it-section{padding:56px 0;}
.it-section--sm{padding:36px 0;}
.it-section-head{margin-bottom:28px;}

/* ---------- Footer (IT two columns) ---------- */
.it-footer-cols{display:flex;gap:40px;flex-wrap:wrap;}
.it-footer-col{display:flex;flex-direction:column;gap:10px;min-width:180px;}
.it-footer-col-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6f7cad;margin-bottom:2px;}
.it-footer-col a{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#cfd8f2;}
.it-footer-col a:hover{color:#fff;}

/* ---------- Регіон роботи (хаб): три пункти з крапкою ---------- */
.it-region-list{display:flex;flex-direction:column;gap:14px;max-width:760px;}
.it-region-row{display:flex;gap:12px;align-items:flex-start;}
.it-region-row .dot{width:10px;height:10px;border-radius:50%;background:var(--it-blue);margin-top:6px;flex:none;}
.it-region-row h4{margin:0 0 4px;font-size:14.5px;color:var(--it-navy-900);}
.it-region-row p{margin:0;font-size:13.5px;color:var(--it-muted);}

/* ---------- CTA з формою у дві колонки (компактна форма + "Що буде далі") ---------- */
.it-cta-flex{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;}
.it-cta-form-col{flex:2;min-width:320px;}
.it-cta-aside{
  flex:1;min-width:260px;background:#fff;border-radius:8px;padding:24px;position:sticky;top:20px;
}
.it-cta-aside h3{margin:0 0 16px;font-size:16px;color:var(--it-navy-900);}
.it-cta-aside .it-step h4{font-size:14px;}
.it-cta-aside .it-step p{font-size:12.5px;}
.it-cta-aside-phones{margin:22px 0 0;border-top:1px solid var(--it-line);padding-top:18px;}
.it-cta-aside-phones a{display:block;color:var(--it-navy-900);font-weight:700;font-size:14.5px;margin-bottom:4px;}
.it-cta-aside-phones .sub{font-size:13px;color:var(--it-muted);}
@media (max-width:767px){
  .it-cta-aside{position:static;}
}

/* ---------- Home hero: "two doors" ---------- */
.it-doors-hero{position:relative;overflow:hidden;}
/* padding-top/bottom лише довгою формою: шапка на головній — position:absolute
   (прозорий оверлей над фото), висота ~121px на ПК і ~81px на телефоні
   (header-wrapper), тож контенту героя потрібен відступ, що перевищує її
   висоту — інакше H1 і текст опиняються під лого й кнопками шапки. Якщо тут
   писати скорочену форму "padding:Npx 0 Mpx", вона заодно обнулить
   padding-left/right, успадкований від .it-container — тоді на вузьких
   екранах текст героя притискається впритул до країв без бокових полів. */
.it-doors-hero-inner{padding-top:150px;padding-bottom:54px;position:relative;z-index:2;}
.it-doors-h1{
  font-family:"ProximaNova",sans-serif;font-weight:900;text-transform:uppercase;color:#fff;
  margin:8px 0 0;font-size:34px;line-height:1.18;max-width:720px;
}
.it-doors-tag{font-family:"ProximaNova",sans-serif;font-weight:600;font-size:14px;color:rgba(255,255,255,.7);margin-top:12px;}
.it-doors-prompt{
  font-family:"ProximaNova",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:12.5px;color:rgba(255,255,255,.65);margin:24px 0 12px;
}
.it-doors-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.it-door-card{
  background:rgba(6,11,46,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:24px;
  display:flex;flex-direction:column;gap:10px;min-height:250px;
}
.it-door-card h2{font-family:"ProximaNova",sans-serif;font-weight:900;text-transform:uppercase;color:#fff;font-size:18px;margin:2px 0 0;}
.it-door-card p{color:#c7d0ea;font-size:13.5px;line-height:1.5;flex:1;margin:0;}
.it-door-card .it-btn{align-self:flex-start;margin-top:2px;}
.it-door-link{font-size:12.5px;color:#aebbe6;text-decoration:underline;}

/* ---------- Home: "Для організацій" block (home__itblock) ---------- */
.it-org-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.it-org-link{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:14px 16px;font-family:"ProximaNova",sans-serif;font-weight:700;font-size:13.5px;color:#fff;
}
.it-org-link:hover{background:rgba(255,255,255,.1);}
.it-org-link .it-icon-circle{width:38px;height:38px;}
.it-org-link .it-icon-circle svg{width:18px;height:18px;}

/* ---------- VPN scheme (HTML/CSS diagram) ---------- */
.it-vpn-wrap{background:#fff;border:1px solid var(--it-line);border-radius:10px;padding:28px 24px;}
.it-vpn-legend{font-size:12.5px;color:var(--it-muted);text-align:center;margin:0 0 18px;font-weight:700;}
.it-vpn-legend .it-vpn-line-sample{display:inline-block;width:30px;height:3px;background:var(--it-blue);vertical-align:middle;margin:0 6px;}
.it-vpn-diagram{display:flex;align-items:center;gap:26px;position:relative;}
/* Лінії-тунелі: одне SVG-перекриття на весь діаграм-блок, viewBox у відсотках
   (preserveAspectRatio="none" розтягує його точно під контейнер), кожен path
   веде від точки до картки "Головний офіс" — щоб було видно, що саме з'єднано. */
/* специфічність svg.it-vpn-tunnels вища за загальне ".it-scope svg{width:1em;
   height:1em}" (інакше велике SVG-перекриття стискається до розміру іконки) */
svg.it-vpn-tunnels{position:absolute;inset:0;width:100% !important;height:100% !important;overflow:visible;pointer-events:none;z-index:0;}
.it-vpn-tunnels path{fill:none;stroke:var(--it-blue);stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;}
.it-vpn-tunnels path.dashed{stroke:var(--it-blue-dark);}
svg.it-vpn-tunnels-mobile{display:none;}
.it-vpn-sats{display:flex;flex-direction:column;gap:16px;flex:1;position:relative;z-index:1;}
.it-vpn-sat{display:flex;align-items:center;gap:12px;}
.it-vpn-card{
  flex:1;border:1.5px solid var(--it-line);border-radius:8px;background:var(--it-bg-soft);
  padding:12px 14px;
}
.it-vpn-card .nm{font-weight:700;font-size:14px;color:var(--it-navy-900);}
.it-vpn-card .ds{font-size:12px;color:var(--it-muted);margin-top:2px;}
.it-vpn-cap{flex:none;max-width:150px;font-size:12px;color:var(--it-blue-dark);font-weight:600;line-height:1.3;}
.it-vpn-office-col{flex:none;width:230px;display:flex;flex-direction:column;gap:16px;align-items:center;position:relative;z-index:1;}
.it-vpn-office{
  border:2px solid var(--it-blue);border-radius:10px;background:#f2f6ff;
  padding:18px 16px;text-align:center;width:100%;
}
.it-vpn-office .nm{font-weight:900;font-size:15px;color:var(--it-navy-900);text-transform:uppercase;}
.it-vpn-office .ds{font-size:12.5px;color:var(--it-muted);margin-top:4px;}
.it-vpn-gets{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap;}
.it-vpn-gets .it-vpn-get{flex:1;min-width:200px;font-size:13.5px;color:var(--it-muted);}
.it-vpn-gets .it-vpn-get strong{display:block;color:var(--it-navy-900);font-size:14px;margin-bottom:4px;}

@media (max-width:991px){
  .it-vpn-diagram{flex-direction:column;align-items:stretch;}
  svg.it-vpn-tunnels{display:none;}
  svg.it-vpn-tunnels-mobile{display:block;position:absolute;inset:0;width:100% !important;height:100% !important;overflow:visible;pointer-events:none;z-index:0;}
  .it-vpn-tunnels-mobile path{fill:none;stroke:var(--it-blue);stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;}
  .it-vpn-tunnels-mobile path.dashed{stroke:var(--it-blue-dark);}
  .it-vpn-office-col{width:100%;order:-1;}
  .it-vpn-sats{width:100%;position:relative;z-index:1;}
  .it-vpn-sat{flex-direction:column;align-items:stretch;text-align:left;}
  .it-vpn-cap{max-width:none;}
}

/* ---------- Example box (VPN price example) ---------- */
.it-example-box{border:1.5px solid var(--it-blue-soft);background:#f6f9ff;border-radius:8px;padding:20px 22px;margin:16px 0;}
.it-example-box .it-eyebrow{color:var(--it-blue);}

/* ---------- Utility ---------- */
.it-flex{display:flex;}
.it-flex-wrap{flex-wrap:wrap;}
.it-gap-10{gap:10px;}
.it-gap-14{gap:14px;}
.it-text-center{text-align:center;}
.it-mt-0{margin-top:0;}
.it-nowrap{white-space:nowrap;}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:991px){
  .it-dir-grid,.it-dir-grid--4,.it-aud-grid,.it-aud-grid--2{grid-template-columns:repeat(2,1fr);}
  .it-org-links-grid{grid-template-columns:repeat(2,1fr);}
  .it-steps{grid-template-columns:1fr;}
}

@media (max-width:767px){
  .it-scope{font-size:15px;}
  .it-container{padding:0 16px;}
  .it-h1{font-size:25px;}
  .it-h2{font-size:21px;}
  .it-lead{font-size:16px;}
  .it-section{padding:34px 0;}
  .it-section--sm{padding:24px 0;}
  .it-dir-grid,.it-dir-grid--4,.it-aud-grid,.it-aud-grid--2{grid-template-columns:1fr;}
  .it-aud-card--row{flex-direction:column;}
  .it-org-links-grid{grid-template-columns:1fr;}

  .it-doors-hero-inner{padding-top:104px;padding-bottom:22px;}
  .it-doors-h1{font-size:21px;margin-top:6px;}
  .it-doors-prompt{margin:14px 0 8px;font-size:11px;}
  .it-doors-grid{grid-template-columns:1fr;gap:12px;}
  .it-door-card{padding:16px;min-height:0;gap:6px;}
  .it-door-card .it-icon-circle{width:40px;height:40px;}
  .it-door-card .it-icon-circle svg{width:20px;height:20px;}
  .it-door-card h2{font-size:15px;}
  .it-door-card p{font-size:12.5px;}
  .it-door-card .it-btn{height:42px;width:100%;font-size:12px;}

  /* Таблиці цін на телефоні (лише /it/tsiny — єдине місце з таблицями):
     таблицю ховаємо повністю, показуємо картки-двійники замість неї, щоб
     нічого не виходило за екран і не було горизонтального скролу. */
  .it-price-table-wrap{display:none;}
  .it-price-cards{display:block;}

  .it-footer-cols{flex-direction:column;gap:22px;}
  .it-alert-strip{flex-direction:column;align-items:flex-start;}

  .it-hdr-cyber{height:34px;padding:0 10px;font-size:0;gap:0;}
  .it-hdr-cyber .it-hdr-cyber-full{display:none;}
  .it-hdr-cyber .it-hdr-cyber-q{display:inline;font-size:16px;font-weight:900;}
  .it-hdr-repair-link{display:none;}
}