/* ══════════════════════════════════════════════════════════════
   itweb.css - ВИЗИЯ „дигитално студио" за /itweb/
   Услугите са във формата на БРАУЗЪР ПРОЗОРЦИ, тъмна основа,
   кодов акцент. Един паралакс.
   Шрифтове: само тези, които сайтът зарежда.
   ══════════════════════════════════════════════════════════════ */

.w-page {
  --w-bg:     #fafafa;
  --w-bg-2:   #ffffff;
  --w-bg-3:   #e9eef0;
  --w-line:   #dbe3e6;
  --w-line-2: #bdcbd0;
  --w-fg:     #14303f;
  --w-fg-2:   #4d6b78;
  --w-fg-3:   #8ba3ac;
  --w-lime:   #0d7f6a;
  --w-cyan:   #1a8fa8;
  --w-amber:  #c8791a;
  --w-sans:   "Montserrat",Arial,sans-serif;
  --w-disp:   "Montserrat",Arial,sans-serif;
  --w-mono:   Consolas,"Cascadia Mono",ui-monospace,monospace;

  background: var(--w-bg);
  color: var(--w-fg);
  font-family: var(--w-sans);
}

.ke-page-itweb .w-sec {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(.8rem,1.6vw,1.5rem) clamp(1.25rem,4vw,4rem);
}

/* ═══ ВОДЕЩ ═══ */
.ke-page-itweb .w-kicker {
  margin: 0 0 1.3rem;
  font-family: var(--w-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w-lime);
}
.ke-page-itweb .w-kicker::before { content: "< "; opacity: .5; }
.ke-page-itweb .w-kicker::after  { content: " />"; opacity: .5; }

.ke-page-itweb .w-h1 {
  margin: 0 0 1.3rem;
  font-family: var(--w-disp);
  font-size: clamp(1.9rem,1.15rem + 2.9vw,3.5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 24ch;
}
.ke-page-itweb .w-lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.5rem,4vw,3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--w-line-2);
}
.ke-page-itweb .w-lead p { margin: 0; font-size: 1.04rem; line-height: 1.75; color: var(--w-fg-2); }

/* ═══ ЗАГЛАВИЕ ═══ */
.ke-page-itweb .w-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.2rem; }
.ke-page-itweb .w-head__n {
  font-family: var(--w-sans);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  color: var(--w-cyan); flex: 0 0 auto;
}
.ke-page-itweb .w-head__t {
  margin: 0;
  font-family: var(--w-disp);
  font-size: clamp(1.3rem,1rem + 1.4vw,2rem);
  font-weight: 400; line-height: 1.14; letter-spacing: -.024em;
}

/* ═══ БРАУЗЪР ПРОЗОРЦИ ═══ */
/* асиметрична мозайка - всяка карта точно колкото текста си */
.ke-page-itweb .w-wins {
  columns: 2;
  column-gap: clamp(.9rem,2vw,1.4rem);
}
.ke-page-itweb .w-win {
  break-inside: avoid;
  height: auto;
  min-height: 0;
  margin-bottom: clamp(.9rem,2vw,1.4rem);
  background: var(--w-bg-2);
  box-shadow: 0 1px 2px rgba(20,48,63,.05);
  border: 1px solid var(--w-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.ke-page-itweb .w-win:hover { border-color: var(--w-cyan); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,48,63,.10); }
.ke-page-itweb .w-win__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  background: var(--w-bg-3);
  border-bottom: 1px solid var(--w-line);
}
.ke-page-itweb .w-win__dots { display: flex; gap: .32rem; flex: 0 0 auto; }
.ke-page-itweb .w-win__dots i { width: .55rem; height: .55rem; border-radius: 50%; display: block; }
.ke-page-itweb .w-win__dots i:first-child { background: #e05c4a; }
.ke-page-itweb .w-win__dots i:nth-child(2) { background: var(--w-amber); }
.ke-page-itweb .w-win__dots i:last-child { background: var(--w-lime); }
.ke-page-itweb .w-win__url {
  font-family: var(--w-sans); font-size: .72rem; color: var(--w-fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ke-page-itweb .w-win__body { padding: 1.4rem 1.4rem 1.5rem; height: auto; }
.ke-page-itweb .w-win__n {
  display: block;
  font-family: var(--w-sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; color: var(--w-lime); margin-bottom: .7rem;
}
.ke-page-itweb .w-win h3 {
  margin: 0 0 .9rem;
  font-family: var(--w-disp);
  font-size: 1.1rem; font-weight: 600; line-height: 1.22; letter-spacing: -.016em;
}
.ke-page-itweb .w-win ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ke-page-itweb .w-win li {
  position: relative; padding-left: 1.3rem;
  font-size: .93rem; line-height: 1.55; color: var(--w-fg-2);
}
.ke-page-itweb .w-win li::before {
  content: "-"; position: absolute; left: 0; top: 0;
  color: var(--w-cyan); font-size: .8rem; line-height: 1.75;
}

/* ═══ ПАРАЛАКС ═══ */
.ke-page-itweb .w-band {
  position: relative;
  min-height: clamp(260px,32vw,420px);
  display: flex; align-items: center;
  overflow: hidden;
  background-color: var(--w-fg);
  background-image: url("../_media/w1000-125012-6ed5c5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.ke-page-itweb .w-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,48,63,.72) 0%, rgba(20,48,63,.60) 45%, rgba(20,48,63,.92) 100%);
}
.ke-page-itweb .w-band__in {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: clamp(1.5rem,3vw,2.8rem) clamp(1.25rem,4vw,4rem);
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr));
  align-items: end; gap: 1rem; color: #fff;
}
.ke-page-itweb .w-band__num { grid-column: 1 / span 2; margin: 0;
  font-family: var(--w-sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; color: var(--w-lime);
}
.ke-page-itweb .w-band__t {
  grid-column: 3 / span 6; margin: 0;
  font-family: var(--w-disp);
  font-size: clamp(1.3rem,1rem + 1.5vw,2.1rem);
  font-weight: 400; line-height: 1.14; letter-spacing: -.026em;
  text-shadow: 0 2px 26px rgba(0,0,0,.7);
}
.ke-page-itweb .w-band__s {
  grid-column: 10 / span 3; margin: 0;
  font-family: var(--w-sans); font-size: .76rem; line-height: 1.55;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 14px rgba(0,0,0,.8);
}

/* ═══ ABOUT ═══ */
.ke-page-itweb .w-about {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
  gap: clamp(1.5rem,4vw,3.5rem); align-items: start;
}
.ke-page-itweb .w-about__n {
  font-family: var(--w-sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; color: var(--w-cyan);
}
.ke-page-itweb .w-about p { margin: 0; font-size: 1.04rem; line-height: 1.78; color: var(--w-fg-2); }

/* ═══ WHY ═══ */
.ke-page-itweb .w-why {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 clamp(2rem,4vw,4rem); counter-reset: ww;
}
.ke-page-itweb .w-why li {
  display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: 1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--w-line);
  font-size: 1rem; line-height: 1.6; color: var(--w-fg-2);
}
.ke-page-itweb .w-why li::before {
  content: counter(ww,decimal-leading-zero); counter-increment: ww;
  font-family: var(--w-sans); font-size: .76rem; font-weight: 700;
  color: var(--w-amber); padding-top: .3em;
}

.ke-page-itweb .w-cta {
  margin: 1.6rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--w-line-2);
  font-size: 1.1rem; line-height: 1.65; color: var(--w-fg-2); max-width: 64ch;
}
.ke-page-itweb .w-cta strong { color: var(--w-fg); font-weight: 600; }

body.ke-page-itweb a:focus-visible,
body.ke-page-itweb button:focus-visible { outline: 3px solid var(--w-lime); outline-offset: 3px; }

@media (max-width: 1024px) {
  .ke-page-itweb .w-wins { columns: 1; }
}
@media (max-width: 900px) {
  .ke-page-itweb .w-lead,
  .ke-page-itweb .w-about { grid-template-columns: minmax(0,1fr); }
  .ke-page-itweb .w-why { grid-template-columns: minmax(0,1fr); }
  .ke-page-itweb .w-band { background-attachment: scroll; }
  .ke-page-itweb .w-band__num,
  .ke-page-itweb .w-band__t,
  .ke-page-itweb .w-band__s { grid-column: 1 / span 12; }
}
@media (prefers-reduced-motion: reduce) {
  body.ke-page-itweb * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Отстояние над футъра — общо 96px (както на /about/ и /sdgstate/).
   Последната секция има собствен padding; добавяме колкото липсва.
   Пипа се САМО padding-bottom. Фонът идва от .sectionWrapper.
   ═══════════════════════════════════════════════════════════════ */
.ke-page-eventsorg .m-sec:last-of-type      { padding-bottom: calc(50.4px + 45.6px); }
.ke-page-eventsrent .rl-sec:last-of-type    { padding-bottom: calc(72px + 24px); }
.ke-page-eventsconsult .s-sec:last-of-type  { padding-bottom: calc(72px + 24px); }
.ke-page-itweb .w-sec:last-of-type          { padding-bottom: calc(23.04px + 73px); }
.ke-page-itzoom .b-sec:last-of-type         { padding-bottom: calc(34.56px + 61.5px); }
.ke-page-publishing .p-sec:last-of-type     { padding-bottom: calc(40.32px + 55.7px); }
.ke-page-publishingcons .c-sec:last-of-type { padding-bottom: calc(34.56px + 61.5px); }

@media (max-width: 820px) {
  .ke-page-eventsorg .m-sec:last-of-type      { padding-bottom: calc(50.4px + 14px); }
  .ke-page-eventsrent .rl-sec:last-of-type    { padding-bottom: calc(72px + 0px); }
  .ke-page-eventsconsult .s-sec:last-of-type  { padding-bottom: calc(72px + 0px); }
  .ke-page-itweb .w-sec:last-of-type          { padding-bottom: calc(23.04px + 41px); }
  .ke-page-itzoom .b-sec:last-of-type         { padding-bottom: calc(34.56px + 29px); }
  .ke-page-publishing .p-sec:last-of-type     { padding-bottom: calc(40.32px + 24px); }
  .ke-page-publishingcons .c-sec:last-of-type { padding-bottom: calc(34.56px + 29px); }
}