/* ============================================================
   ITVP — dizaino sistema
   Paletė ir tipografija iš patvirtinto prototipo.
   ============================================================ */

:root{
  --bg:#0b1a2b;
  --surface:#12263c;
  --surface-2:#0f2136;
  --text:#eef3f8;
  --text-70:rgba(238,243,248,.70);
  --text-60:rgba(238,243,248,.60);
  --text-45:rgba(238,243,248,.45);
  --line:rgba(238,243,248,.12);
  --line-strong:rgba(238,243,248,.22);
  --accent:#3d84cf;
  --accent-hover:#69a5df;
  --accent-soft:#8fb8e2;

  --radius:3px;
  --wrap:1280px;
  --pad-x:clamp(20px,4vw,48px);
  --pad-y:clamp(52px,8vh,96px);
  --gap-col:clamp(32px,5vw,72px);

  --font:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --t-fast:160ms ease;
  --t-mid:220ms ease;
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.03em; line-height:1.06; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

:focus{outline:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad-x)}
.section{padding-block:var(--pad-y); border-top:1px solid var(--line)}
.section--raised{background:var(--surface); border-top:none}

.skip{
  position:absolute; left:16px; top:-100px; z-index:100;
  background:var(--accent); color:#fff; padding:12px 18px;
  border-radius:var(--radius); font-weight:500; transition:top var(--t-mid);
}
.skip:focus-visible{top:16px}

/* ---------- Tipografija ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 20px;
}
.eyebrow--soft{color:var(--accent-soft)}

.h2{font-size:clamp(28px,4vw,54px)}
.h3{font-size:clamp(24px,3vw,36px)}
.lede{font-size:18px; line-height:1.55; color:var(--text-70)}

/* ---------- Mygtukai ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 26px; border:1px solid transparent; border-radius:var(--radius);
  /* Foną nurodom aiškiai — kitaip <button> gauna naršyklės ButtonFace pilkumą,
     ir šviesus tekstas ant jo tampa nematomas. */
  background:transparent; color:var(--text);
  font:inherit; font-size:16px; font-weight:500; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary{background:var(--text); color:var(--bg)}
.btn--primary:hover{background:var(--accent); color:#fff}
.btn--ghost{border-color:var(--line-strong); color:var(--text)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--accent{background:var(--accent); color:#fff}
.btn--accent:hover{background:var(--accent-hover)}
.btn--sm{padding:12px 20px; font-size:14px}

.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,26,43,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:26px; min-height:72px}
.brand{display:flex; align-items:center; gap:11px; font-size:15px; font-weight:500; letter-spacing:-.01em}
.brand__mark{
  width:30px; height:30px; border-radius:var(--radius); background:var(--accent);
  display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:11px; color:#fff;
}
.nav__list{display:flex; gap:26px; margin-left:auto}
.nav__list > li{position:relative}
.nav__list a{font-size:14px; color:var(--text-70); transition:color var(--t-fast)}
.nav__list a:hover{color:var(--accent)}
.nav__toggle{display:none}

/* Iškrentantis paslaugų sąrašas */
.nav__has-sub > a{display:inline-flex; align-items:center; gap:6px}
.nav__chev{flex:none; opacity:.6; transition:transform var(--t-fast)}
.nav__has-sub:hover .nav__chev,
.nav__has-sub:focus-within .nav__chev{transform:rotate(180deg); opacity:1}
/* Nematomas tiltas — kad pelė, leisdamasi žemyn, nepamestų hover. */
.nav__has-sub::after{content:""; position:absolute; top:100%; left:0; right:0; height:16px}
.nav__sub{
  position:absolute; top:100%; left:-16px; z-index:50; min-width:280px;
  display:none; margin-top:14px; padding:8px 0;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius);
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub{display:block}
.nav__sub a{display:block; padding:10px 18px; font-size:14px; line-height:1.35; color:var(--text-70)}
.nav__sub a:hover{color:var(--accent); background:rgba(255,255,255,.04)}

/* ---------- Hero ----------
   Vienas stulpelis: antraštė → paslaugos → mygtukai. Ta pati logika
   nešiojamajame ir telefone, tad nėra kur sulūžti. */
.hero{padding-block:clamp(52px,10vh,116px) var(--pad-y)}
/* Antraštė per visą turinio plotį — be simbolių ribos. */
.hero h1{font-size:clamp(38px,5.6vw,76px); line-height:1.04; letter-spacing:-.035em}
.hero__services{
  margin-top:clamp(24px,3.2vw,36px);
  font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--text-70);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,4vw,44px)}

@media (max-width:520px){
  .hero__cta .btn{flex:1 1 100%}
}

/* ---------- Kredibilumo juosta ---------- */
.creds{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--gap-col) 32px}
.cred__n{font-size:clamp(30px,4vw,44px); line-height:1; letter-spacing:-.03em}
.cred__n--sm{font-size:clamp(20px,2.4vw,26px)}
.cred__l{margin-top:10px; font-size:14px; color:var(--text-60); line-height:1.4}
.creds-foot{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:13px; color:var(--text-60);
}

/* ---------- Paslaugos ---------- */
/* Kortelės — vizualiai atskirti bucketai, viena po kita mobiliajame. */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; margin-top:48px}
.service{
  display:flex; flex-direction:column; padding:30px 28px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color var(--t-fast);
}
.service:hover{border-color:var(--line-strong)}
.service__num{font-family:var(--mono); font-size:13px; color:var(--accent-soft)}
/* Paslaugos pavadinimas — pirmas ir didžiausias. */
.service__title{margin-top:16px; font-size:clamp(21px,2.5vw,27px); letter-spacing:-.025em; line-height:1.15}
/* Kada ji reikalinga — paaiškinimas po pavadinimu. */
.service__when{margin-top:14px; font-size:15px; line-height:1.5; color:var(--accent-soft)}

/* ---------- Hero antros dalies prigesinimas ---------- */
.hero__dim{color:var(--text-45)}

/* ---------- Kainos modeliai ---------- */
.models{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:44px}
.model{
  padding:30px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); display:flex; flex-direction:column;
}
.model__t{font-size:20px; letter-spacing:-.02em}
.model__p{
  margin-top:14px; font-family:var(--mono); font-size:15px; color:var(--accent-soft);
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.model__d{margin-top:20px; font-size:16px; line-height:1.55; color:var(--text-70)}
.model__n{margin-top:auto; padding-top:20px; font-size:14px; line-height:1.5; color:var(--text-45)}

/* ---------- Klientai pagal sektorius ---------- */
.sectors{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:18px; margin-top:44px}
.sector{
  padding:24px 22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
.sector__label{
  padding-bottom:14px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-soft);
}
.sector__list{margin-top:16px; display:grid; gap:10px}
.sector__list li{font-size:16px; line-height:1.35; color:var(--text)}
/* Žvaigždutė — darbovietė, ne klientas. Paaiškinta išnašoje. */
.sector__mark{color:var(--accent-soft)}
.sectors-note{
  margin-top:22px; font-family:var(--mono); font-size:12px;
  letter-spacing:.02em; color:var(--text-45);
}

.tbl-foot{margin-top:22px; font-size:14px; line-height:1.55; color:var(--text-45)}

/* ---------- DUK ---------- */
.faq{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--gap-col) 40px; margin-top:44px}
.faq__item{border-top:1px solid var(--line); padding-top:20px}
.faq__q{font-size:18px; letter-spacing:-.015em}
.faq__a{margin-top:12px; font-size:15px; line-height:1.6; color:var(--text-60)}

/* ---------- Kam netinka ---------- */
.nope{display:grid}
.nope li{
  padding:20px 0; border-top:1px solid var(--line);
  font-size:16px; line-height:1.5; color:var(--text-60);
}
.nope li:last-child{border-bottom:1px solid var(--line)}
.nope strong{display:block; margin-bottom:6px; color:var(--text); font-weight:500}
.nope--positive strong{color:var(--accent-soft)}
.service__points{margin-top:24px; display:grid; gap:12px}
.service__points li{
  padding-top:12px; border-top:1px solid rgba(255,255,255,.14);
  font-size:15px; line-height:1.45; color:rgba(255,255,255,.88);
}
.service__foot{margin-top:auto; padding-top:26px}
.service__note{font-size:14px; line-height:1.45; color:rgba(255,255,255,.52)}
.service__link{
  margin-top:16px; font-size:14px; color:var(--accent-soft);
  display:inline-flex; align-items:center; gap:8px; transition:color var(--t-fast), gap var(--t-fast);
}
.service__link:hover{color:#fff; gap:12px}

/* ---------- Vidinių puslapių viršus ---------- */
.page-hero{padding-block:clamp(56px,9vh,104px) var(--pad-y)}
.page-hero h1{font-size:clamp(34px,5.4vw,68px); line-height:1.02; letter-spacing:-.035em}
.page-hero .lede{margin-top:26px; font-size:19px}
.crumb{font-family:var(--mono); font-size:12px; color:var(--text-45); margin-bottom:22px}
.crumb a{transition:color var(--t-fast)}
.crumb a:hover{color:var(--accent)}

/* ---------- Eiga ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap-col) 32px; margin-top:48px}
.step{border-top:1px solid var(--line); padding-top:20px}
.step__n{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.08em}
.step__t{margin-top:14px; font-size:19px; letter-spacing:-.02em}
.step__d{margin-top:10px; font-size:15px; line-height:1.5; color:var(--text-60)}

/* ---------- Diegimų tipai ---------- */
.kinds{display:grid; margin-top:40px}
.kinds__row{
  display:grid; grid-template-columns:minmax(0,210px) 1fr; gap:24px;
  padding:20px 0; border-top:1px solid var(--line);
}
.kinds__row:last-child{border-bottom:1px solid var(--line)}
.kinds__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-soft); padding-top:4px;
}
.kinds__items{font-size:16px; line-height:1.7; color:var(--text-70)}

@media (max-width:640px){
  .kinds__row{grid-template-columns:1fr; gap:10px}
  .kinds__label{padding-top:0}
}

/* ---------- Atvejai ---------- */
.cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:44px}
.case{
  padding:26px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); border-left:2px solid var(--accent);
}
.case__who{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-soft)}
.case__what{margin-top:14px; font-size:16px; line-height:1.5; color:var(--text-70)}

/* ---------- Išnaša / įspėjimas ---------- */
.note{
  margin-top:40px; padding:26px 30px; background:var(--surface);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  font-size:17px; line-height:1.55; color:var(--text-70);
}
.note strong{color:var(--text); font-weight:500}

/* ---------- Kitos paslaugos ---------- */
.also{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:40px}
.also__card{
  padding:24px; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color var(--t-fast), background var(--t-mid);
}
.also__card:hover{border-color:var(--accent); background:var(--surface)}
.also__num{font-family:var(--mono); font-size:12px; color:var(--accent)}
.also__t{margin-top:12px; font-size:19px; letter-spacing:-.02em}
.also__d{margin-top:8px; font-size:14px; color:var(--text-60)}

/* ---------- Dviejų stulpelių blokas ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap-col)}
.split--start{align-items:start}

.numlist li{
  display:grid; grid-template-columns:52px 1fr; gap:16px;
  padding:20px 0; border-top:1px solid var(--line);
}
.numlist li:last-child{border-bottom:1px solid var(--line)}
.numlist .n{font-family:var(--mono); font-size:11px; color:var(--accent); padding-top:5px}
.numlist .t{font-size:17px; line-height:1.45}

/* ---------- Sistemos: viena pastraipa, be kategorijų ---------- */
/* Be border-top — lentelė jau baigiasi savo linija, kitaip susidaro dvi. */
.systems-label{
  margin-top:48px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-45);
}
/* Skirtukai — tikri simboliai HTML'e, ne pseudoelementai, kad paieška
   ir ekrano skaityklės matytų atskirus pavadinimus. */
.systems{margin-top:16px; font-size:16px; line-height:2; color:var(--text-70)}

/* ---------- Rekomendacijos ---------- */
.people{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:44px}
.person{
  display:flex; flex-direction:column; gap:16px; padding:24px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color var(--t-fast), background var(--t-mid);
}
.person:hover{border-color:var(--accent); background:var(--surface)}
.person__img{width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--surface)}
.person__name{font-size:17px; font-weight:500}
.person__role{margin-top:4px; font-size:13px; line-height:1.45; color:var(--text-60)}

/* ---------- Kontaktai ----------
   Vienas stulpelis, keturi elementai vienoje vertikalioje ritmikoje.
   Kontaktai nurodyti tik vieną kartą. */
/* Per visą turinio plotį — be simbolių ribų, kaip ir kitose sekcijose. */
.contact h2{font-size:clamp(30px,4.6vw,60px); line-height:1.04; letter-spacing:-.035em}
.contact__lede{margin-top:22px; font-size:18px; line-height:1.55; color:var(--text-70)}
.contact__cta{margin-top:34px}

.contact__who{
  display:flex; align-items:center; gap:16px;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--line);
}
.contact__portrait{width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--surface); flex:none}
.contact__name{font-size:17px; font-weight:500}
.contact__links{margin-top:6px; display:flex; flex-wrap:wrap; gap:6px 20px}
.contact__links a{font-family:var(--mono); font-size:13px; color:var(--text-60); transition:color var(--t-fast)}
.contact__links a:hover{color:var(--accent)}

/* ---------- Rezervacijos langas ---------- */
.modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:var(--pad-x)}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(2,8,16,.78); backdrop-filter:blur(4px)}
.modal__panel{
  position:relative; width:100%; max-width:820px; max-height:92vh;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
}
.modal__head{
  display:flex; align-items:center; gap:20px; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line); flex:none;
}
.modal__title{font-size:19px; letter-spacing:-.02em}
.modal__actions{display:flex; align-items:center; gap:18px}
.modal__ext{font-family:var(--mono); font-size:12px; color:var(--accent-soft); transition:color var(--t-fast)}
.modal__ext:hover{color:var(--text)}
.modal__close{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text-70); cursor:pointer; transition:color var(--t-fast), border-color var(--t-fast);
}
.modal__close:hover{color:var(--text); border-color:var(--line-strong)}
.modal__body{position:relative; flex:1; min-height:520px; background:#fff; overflow:hidden}
.modal__frame{width:100%; height:100%; min-height:520px; border:0; display:block}
.modal__loading,.modal__fallback{
  position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  text-align:center; font-size:15px; line-height:1.6; color:#444; background:#fff;
}
.modal__fallback a{color:#0b5cad; text-decoration:underline; text-underline-offset:3px}

@media (max-width:640px){
  .modal{padding:0}
  .modal__panel{max-width:none; max-height:100vh; height:100%; border:0; border-radius:0}
  .modal__ext{display:none}
}

/* ---------- Sutikimo juosta ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line-strong);
}
.consent[hidden]{display:none}
.consent__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px;
  padding-block:20px; justify-content:space-between;
}
.consent__text{font-size:14px; line-height:1.6; color:var(--text-70); max-width:76ch}
.consent__text a{color:var(--accent-soft); text-decoration:underline; text-underline-offset:3px}
.consent__text a:hover{color:var(--text)}
.consent__btns{display:flex; flex-wrap:wrap; gap:12px; flex:none}

@media (max-width:640px){
  .consent__btns{width:100%}
  .consent__btns .btn{flex:1}
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding-block:32px}
.foot{
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--text-45);
}
.foot__links{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center}
.foot__links a,.foot__btn{color:var(--text-45); transition:color var(--t-fast)}
.foot__links a:hover,.foot__btn:hover{color:var(--accent)}
.foot__btn{
  font:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- Turinys (Gutenberg puslapiai) ---------- */
/* Per visą turinio plotį, kaip ir visur kitur svetainėje. */
.entry{max-width:none}
.entry h2{font-size:clamp(24px,3vw,34px); margin:48px 0 16px}
.entry h3{font-size:22px; margin:36px 0 12px}
.entry p{margin-bottom:18px; color:var(--text-70)}
.entry ul,.entry ol{margin:0 0 18px 22px; color:var(--text-70)}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:8px}
.entry a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.entry code{
  font-family:var(--mono); font-size:.9em; color:var(--accent-soft);
  background:var(--surface); padding:2px 6px; border-radius:2px;
}
.entry strong{color:var(--text); font-weight:500}
/* Lentelės turinio puslapiuose — siaurame ekrane slysta savo konteineryje. */
.entry table{
  display:block; overflow-x:auto; width:100%;
  border-collapse:collapse; margin:0 0 22px; text-align:left;
}
.entry th{
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-45); white-space:nowrap;
  padding:0 24px 12px 0; border-bottom:1px solid var(--line-strong);
}
.entry td{
  padding:16px 24px 16px 0; border-bottom:1px solid var(--line);
  vertical-align:top; font-size:15px; line-height:1.5; color:var(--text-70);
}
.entry th:last-child,.entry td:last-child{padding-right:0}

/* ---------- Mobilus ---------- */
@media (max-width:820px){
  .nav__list{
    display:none; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; gap:0; padding:8px var(--pad-x) 20px;
    background:var(--bg); border-bottom:1px solid var(--line);
  }
  .nav__list.is-open{display:flex}
  .nav__list a{display:block; padding:14px 0; border-top:1px solid var(--line); font-size:16px}
  /* Telefone hover neveikia — paslaugos rodomos iš karto, įtrauktos. */
  .nav__has-sub::after{display:none}
  .nav__chev{display:none}
  .nav__sub{
    position:static; display:block; min-width:0;
    margin:0; padding:0; background:none; border:0;
  }
  .nav__sub a{padding:12px 0 12px 20px; font-size:15px; color:var(--text-60)}
  .nav__toggle{
    display:grid; place-items:center; margin-left:auto; width:44px; height:44px;
    background:none; border:1px solid var(--line-strong); border-radius:var(--radius);
    color:var(--text); cursor:pointer;
  }
  .nav__cta{display:none}
  .btn-row .btn{flex:1 1 100%}
}