/* Eurokommerz — static site v1 · design system v8 (approved 26.08.2026) */

@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/mona-sans-latin-standard-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #E32026;
  --red-dark: #C4181E;
  --red-bright: #FF2A30;
  --red-soft: #FF8A8E;
  --pink: #FBE8E8;
  --ink: #151518;
  --grey: #63666E;
  --grey-mid: #6B6E77;   /* было #8A8D96 — 3.32:1 на белом, не проходило WCAG AA для мелкого текста */
  --grey-light: #A5A7AF;
  --grey-on-dark: #A5A7AF; /* приглушённый текст на тёмных секциях: --grey-mid там даёт 3.85:1 */
  --line: #E2E3E7;
  --line-soft: #ECEDEF;
  --panel: #F7F7F9;
  --dark: #0A0A10;
  --dark-2: #0B0B10;
  --dark-text: #C9CBD2;
  --green: #146F35;      /* было #168C46 — 4.31:1 на белом и 3.69:1 на плашке .pill-free */
  --green-soft: #DFF2E6;
  --radius: 14px;
  --radius-lg: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Mona Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
/* width/height в разметке нужны против CLS (Core Web Vitals); height:auto не даёт им растянуть картинку.
   Правила ниже, задающие height явно (.logo img, .quote-flex .ph img, .map-card img), перебивают это по специфичности. */
img { height: auto; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .wrap { padding: 0 20px; } }

/* ---------- header ---------- */
header.site {
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
  position: sticky; top: 0; z-index: 60;
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 18px; }
/* ТЗ27: на десктопе меню стоит по центру между логотипом и правой группой (EN·DE + кнопка), а не липнет к логотипу */
@media (min-width: 1121px) { .nav .menu { margin-left: auto; margin-right: auto; } .nav .langsw { margin-left: 0; } }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 44px; width: auto; display: block; }
footer .logo img { height: 48px; }
.menu { display: flex; gap: 20px; align-items: center; font-size: 14.5px; font-weight: 600; color: #3A3D45; }
.menu > div { position: relative; }
.menu a { padding: 6px 2px; display: inline-block; white-space: nowrap; }
.menu a:hover { color: var(--red); }
.menu a.act, .menu .dd-lab.act { color: var(--red); }
.dd-lab:hover { color: var(--red); }
.dd-link::after, .dd-lab::after { content: ' ▾'; font-size: 10.5px; color: var(--grey-mid); }
.dd-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dd-lab { display: none; cursor: pointer; }
.dd-list {
  display: none; position: absolute; top: 100%; left: -14px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 8px;
  min-width: 264px; box-shadow: 0 16px 44px rgba(21,21,24,0.12); z-index: 70;
}
.dd:hover .dd-list, .dd.open .dd-list { display: block; }
.dd-list a { display: block; padding: 9px 14px; font-size: 14px; border-radius: 9px; }
.dd-mob, .dd-list .dd-over { display: none; }   /* только для телефона (см. ТЗ 27 в @media 1120) */
.dd-list a:hover { background: var(--panel); color: var(--red); }
.nav-cta { flex: 0 0 auto; }
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4.5px; }   /* v32: три линии столбиком (с v28 flex без column клал их в ряд = одна длинная линия) */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.burger span { display: block; width: 22px; height: 2.5px; background: var(--ink); margin: 0; border-radius: 2px; transition: 0.2s; }

@media (max-width: 1120px) {
  .burger { display: flex; }
  .nav-cta { display: none; }
  .menu {
    display: none; position: absolute; top: 74px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 24px 20px;
    border-bottom: 1px solid var(--line-soft); box-shadow: 0 20px 40px rgba(21,21,24,0.08);
  }
  .menu.open, .nav-toggle:checked ~ .menu { display: flex; }
  .menu > div { width: 100%; }
  .menu a { padding: 11px 0; font-size: 16px; width: 100%; }
  .dd-list { position: static; display: none; border: none; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; }
  /* ТЗ 27: на телефоне название раздела раскрывает список (label чекбокса), ссылка-родитель спрятана;
     страница раздела доступна первым пунктом списка (.dd-over). Стрелка справа делает то же самое. */
  .menu .dd { display: flex; flex-wrap: wrap; align-items: center; }
  .menu .dd-link { display: none; }
  .menu .dd-mob { display: block; flex: 1 1 auto; padding: 11px 0; font-size: 16px; cursor: pointer; }
  .menu .dd-mob.act, .dd-toggle:checked ~ .dd-mob { color: var(--red); }
  .menu .dd-list .dd-over { display: block; }
  .menu .dd-lab {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 48px; height: 44px; margin-right: -12px; color: var(--grey-mid);
  }
  .menu .dd-lab::after { content: '▾'; font-size: 17px; line-height: 1; color: inherit; transition: transform 0.15s; }
  .menu .dd-list { flex: 0 0 100%; width: 100%; }
  .dd:hover .dd-list { display: none; }
  .dd-toggle:checked ~ .dd-list, .dd.open .dd-list { display: block !important; }
  .dd-toggle:checked ~ .dd-lab { color: var(--red); }
  .dd-toggle:checked ~ .dd-lab::after { transform: rotate(180deg); }
}

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-block; background: var(--red); color: #fff; border: none; cursor: pointer;
  border-radius: 10px; padding: 15px 28px; font-weight: 700; font-size: 16px;
  font-family: inherit; transition: background 0.15s;
}
.btn:hover { background: var(--red-dark); }
.btn.sm { padding: 11px 20px; font-size: 14.5px; }
.btn.ghost-w { background: transparent; border: 2px solid #fff; color: #fff; padding: 13px 26px; }
.btn.ghost-w:hover { background: rgba(255,255,255,0.1); }
.btn.ghost-d { background: transparent; border: 2px solid var(--ink); color: var(--ink); padding: 13px 26px; }
.btn.ghost-d:hover { border-color: var(--red); color: var(--red); background: transparent; }

.chip-red {
  display: inline-block; border: 1.5px solid var(--red); color: var(--red);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; letter-spacing: 1.6px;
}
.on-dark .chip-red { color: var(--red-soft); }
/* На тёмном hero фирменный --red давал 4.23:1 — берём более яркий оттенок, рамка остаётся брендовой */
.hero .chip-red, .art-hero .chip-red { color: var(--red-bright); border-color: var(--red); }
.chip-dark {
  display: inline-block; background: #26262E; color: var(--dark-text);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; letter-spacing: 1.6px;
}
.chip-white {
  display: inline-block; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700;
}
.eyebrow { font-size: 13px; letter-spacing: 2.2px; color: var(--grey); font-weight: 700; text-align: center; }

/* ---------- typography ---------- */
h1 { font-size: 46px; line-height: 1.14; font-weight: 800; letter-spacing: -0.5px; }
.h2c { font-size: 30px; font-weight: 800; text-align: center; margin: 10px 0 34px; letter-spacing: -0.2px; }
.h2l { font-size: 32px; font-weight: 800; letter-spacing: -0.3px; }
.sub { font-size: 18.5px; color: var(--grey); line-height: 1.6; }
@media (max-width: 700px) {
  h1 { font-size: 32px; }
  .h2c { font-size: 24px; }
  .h2l { font-size: 25px; }
  .sub { font-size: 16.5px; }
}

/* ---------- hero (dark) ---------- */
.hero {
  position: relative; background-color: var(--dark); overflow: hidden;
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,16,0.96) 0%, rgba(10,10,16,0.82) 34%, rgba(10,10,16,0.35) 52%, rgba(10,10,16,0) 66%);
}
.hero .wrap { z-index: 1; }
.hero .wrap { position: relative; padding-top: 72px; padding-bottom: 76px; }
.hero h1 { color: #fff; margin: 22px 0 20px; max-width: 640px; }
.hero .lead { font-size: 18.5px; color: var(--dark-text); line-height: 1.6; max-width: 560px; }
.hero .btns { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero { background-position: 72% center; }
  .hero .wrap { padding-top: 54px; padding-bottom: 60px; }
  .hero .lead { max-width: 480px; }
}

/* ---------- trust bar ---------- */
.trust { border-bottom: 1px solid var(--line-soft); }
.trust .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.trust span { font-size: 14.5px; font-weight: 600; }
.trust b { color: var(--green); font-weight: 800; margin-right: 4px; }
@media (max-width: 900px) { .trust .wrap { justify-content: flex-start; row-gap: 8px; } }

/* ---------- sections & grids ---------- */
.sec { padding: 0 0 76px; }
.sec-t { padding: 0 0 76px; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card-sh { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 3px rgba(21,21,24,0.06); }
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 44px 48px; }
@media (max-width: 700px) { .panel { padding: 26px 20px; } }

.badge-num {
  /* --red на розовом фоне давал 3.96:1 — для текста берём --red-dark */
  display: inline-block; background: var(--pink); color: var(--red-dark);
  font-weight: 800; border-radius: 9px; padding: 5px 11px; font-size: 15.5px;
}
.pill-free { display: inline-block; background: var(--green-soft); color: var(--green); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; margin-left: 10px; }
.pill-paid { display: inline-block; background: var(--pink); color: var(--red-dark); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; margin-left: 10px; }

.rlink { color: var(--red-dark); font-weight: 700; font-size: 15.5px; }
.rlink:hover { text-decoration: underline; }

.icon-circle {
  width: 68px; height: 68px; border-radius: 50%; background: var(--pink); color: var(--red);
  font-size: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}

/* dark full-width band */
.band {
  position: relative; background-color: var(--dark); overflow: hidden; color: #fff;
  background-size: cover; background-position: center right; background-repeat: no-repeat;
}
.band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,16,0.94) 0%, rgba(10,10,16,0.75) 36%, rgba(10,10,16,0.25) 54%, rgba(10,10,16,0) 68%),
              linear-gradient(0deg, rgba(10,10,16,0.85) 0%, rgba(10,10,16,0) 32%);
}
.band .wrap { position: relative; z-index: 1; }
.band .wrap { position: relative; padding-top: 68px; padding-bottom: 76px; }
.band h2 { color: #fff; font-size: 30px; font-weight: 800; margin: 16px 0 14px; letter-spacing: -0.3px; }
.band p.lead { color: var(--dark-text); font-size: 16.5px; line-height: 1.65; max-width: 680px; }
.band .btns { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) { .band { background-position: 78% center; } }

/* grey full-bleed band */
.grey-band { background: var(--panel); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 68px 0 76px; }

/* ---------- FAQ ---------- */
.faq { max-width: 1000px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; font-size: 18px; font-weight: 800; padding: 16px 30px 16px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 22px; color: var(--red); font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq .a { font-size: 16px; color: var(--grey); line-height: 1.6; padding: 0 0 18px; max-width: 920px; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.inp, .sel, .ta {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-size: 15px; font-family: inherit; color: var(--ink);
}
.inp:focus, .sel:focus, .ta:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }
.ta { min-height: 100px; resize: vertical; }
.form-note { text-align: center; color: var(--grey); font-size: 13.5px; margin-top: 14px; }
.form-ok { text-align: center; padding: 40px 20px; }
.form-ok .tick {
  width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--green); color: var(--green);
  font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- modal ---------- */
.modal-back {
  display: none; position: fixed; inset: 0; background: rgba(10,10,16,0.55); z-index: 100;
  align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal-back.open { display: flex; }
.modal { background: #fff; border-radius: 16px; padding: 34px; max-width: 640px; width: 100%; position: relative; box-shadow: 0 24px 70px rgba(21,21,24,0.25); }
.modal .x { position: absolute; top: 14px; right: 18px; font-size: 22px; color: var(--grey-light); cursor: pointer; background: none; border: none; }

/* ---------- footer ---------- */
footer.site { background: var(--dark-2); color: #B9BCC4; padding: 54px 0 30px; margin-top: 0; }
footer.site .cols { display: flex; gap: 60px; }
footer.site .brand { flex: 0 0 220px; }
footer.site .brand .logo b { color: var(--red); }
footer.site .brand .logo span { color: #fff; }
footer.site .tagline { font-size: 14px; color: var(--grey-mid); margin-top: 14px; line-height: 1.5; }
footer.site .links { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; font-size: 14px; line-height: 2.1; }
/* minmax(0,1fr) вместо 1fr: у 1fr минимум = min-content, и длинные немецкие слова
   (Infrastruktur-Audit, IT Managed Services) раздували колонку и давали ovf=10px на 360px. */
footer.site .links a, footer.site .links b { overflow-wrap: break-word; }
footer.site .links b { color: #fff; font-weight: 700; display: block; margin-bottom: 6px; }
footer.site .links a { display: block; }
footer.site .links a:hover { color: #fff; }
footer.site .legal {
  border-top: 1px solid #23242C; margin-top: 36px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--grey-on-dark); flex-wrap: wrap;
}
footer.site .tm { font-size: 12px; color: #7A7D86; margin-top: 12px; }  /* было #5E616A — 3.17:1 на тёмном */
@media (max-width: 900px) {
  footer.site .cols { flex-direction: column; gap: 30px; }
  footer.site .links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- misc ---------- */
.center { text-align: center; }
.note { color: var(--grey-light); font-size: 13px; font-style: italic; }
.mt0 { margin-top: 0; }
.models li { list-style: none; font-size: 14.5px; font-weight: 700; margin: 0 0 8px; }
.models li::before { content: '—'; color: var(--red); font-weight: 800; margin-right: 8px; }
.partner-tiles { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.partner-tiles .tile {
  border: 1px solid #E9EAEE; border-radius: 12px; padding: 14px 30px; background: #fff;
  display: flex; align-items: center; justify-content: center; min-width: 148px; height: 62px;
}

/* tables */
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: 1.2px; color: var(--grey); padding: 10px 14px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.tbl td:first-child { font-weight: 700; white-space: nowrap; }
.tbl tr.hl td { background: #FDF4F4; }

/* solution items */
.sol-item { border-top: 1px solid var(--line-soft); padding: 20px 0 4px; }
.sol-item .t { font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.sol-item p { color: var(--grey); font-size: 15px; line-height: 1.6; }

/* not-fit */
.notfit { max-width: 860px; }
.notfit .x { display: flex; gap: 12px; margin-bottom: 14px; font-size: 15.5px; color: var(--ink); line-height: 1.55; }
.notfit .x b { color: var(--red); font-weight: 800; flex: 0 0 auto; }

/* hero cert hairline */
.certline { border-top: 1px solid #3A3B45; max-width: 560px; margin-top: 28px; padding-top: 14px; }
.certline .lbl { font-size: 11.5px; letter-spacing: 1.6px; color: var(--grey-on-dark); font-weight: 700; margin-bottom: 4px; }
.certline .txt { font-size: 14px; color: var(--dark-text); }

/* topic chips */
.topics span { display: inline-block; background: #26262E; color: var(--dark-text); border-radius: 999px; padding: 6px 16px; font-size: 13.5px; font-weight: 700; margin: 0 8px 8px 0; }

/* ===== added: vixen / software / articles / misc pages ===== */
.chip-amber { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:1.6px; color:#F8CD5A; border:1px solid rgba(248,205,90,0.45); border-radius:100px; padding:7px 16px; }
.btn-vx { display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 30px; border-radius:100px; background:#F5961E; color:#160D24; font-weight:800; font-size:15.5px; text-decoration:none; transition:background .15s; }
.btn-vx:hover { background:#FFA83A; }
.hero-vx { background:#160D24; background-size:cover; background-position:center right; padding:88px 0 84px; color:#fff; }
.hero-vx .wordmark { font-size:56px; font-weight:800; letter-spacing:-1px; line-height:1.05; }
.hero-vx .wm-a { color:#F8CD5A; } .hero-vx .wm-b { color:#F5961E; }
.hero-vx .lead { color:#D8D2CA; font-size:17.5px; line-height:1.65; max-width:560px; margin:18px 0 26px; }
.stat-strip { background:#101014; padding:36px 0 36px; }
.stat-strip .grid { align-items:start; }
.stat-strip .n { color:#fff; font-size:38px; font-weight:800; letter-spacing:-1px; }
.stat-strip .l { color:#A5A7AF; font-size:13.5px; margin-top:4px; line-height:1.45; }  /* было #8A8D96 — 3.87:1 на тёмном */
.status-badges { display:flex; flex-wrap:wrap; gap:12px; }
.status-badges .bdg { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 22px; font-weight:800; font-size:14.5px; color:var(--ink); }
.offer-grid .ocard { background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px 22px; display:flex; flex-direction:column; transition:box-shadow .15s, transform .15s; }
.offer-grid .ocard:hover { box-shadow:0 10px 30px rgba(21,21,24,0.10); transform:translateY(-2px); }
.offer-grid .onum { color:var(--red); font-weight:800; font-size:13.5px; letter-spacing:1px; margin-bottom:10px; }
.offer-grid .ot { color:var(--red-dark); font-weight:800; font-size:17.5px; margin-bottom:8px; }
.offer-grid .od { color:var(--grey); font-size:14px; line-height:1.55; margin-bottom:14px; }
/* articles */
.art-hero { background:var(--paper); border-bottom:1px solid var(--line); padding:54px 0 40px; }
.art-hero h1 { font-size:38px; line-height:1.15; letter-spacing:-0.8px; max-width:860px; }
.art-meta { color:var(--grey-mid); font-size:13px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:16px; }
.art { max-width:860px; }
.art h2 { font-size:26px; letter-spacing:-0.4px; margin:40px 0 14px; }
.art p { color:#3A3D44; font-size:16px; line-height:1.7; margin-bottom:14px; }
.art ul.brief { list-style:none; margin:0; }
.art ul.brief li { position:relative; padding-left:22px; color:#3A3D44; font-size:15px; line-height:1.6; margin-bottom:8px; }
.art ul.brief li::before { content:""; position:absolute; left:0; top:10px; width:12px; height:3px; border-radius:2px; background:var(--red); }
.inbrief { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin:26px 0 8px; }
.inbrief .t { font-weight:800; font-size:12.5px; letter-spacing:1.6px; color:var(--grey-mid); margin-bottom:12px; }
.art .tblwrap { overflow-x:auto; margin:18px 0; }
.art-cta { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 28px; margin:36px 0 8px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.art-cta p { margin:0; max-width:640px; }
/* vendor sections (software) */
.vhead { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 6px; }
.vhead .vchip { background:var(--ink); color:#fff; font-weight:800; font-size:13px; letter-spacing:1.2px; border-radius:8px; padding:7px 14px; }
.vhead .vt { font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.vhead .vlink { margin-left:auto; }
.vsub { color:var(--grey); font-size:14.5px; margin-bottom:18px; }
.dashlist { list-style:none; margin:0; }
.dashlist li { position:relative; padding-left:18px; color:var(--grey); font-size:13.5px; line-height:1.55; margin-bottom:6px; }
.dashlist li::before { content:""; position:absolute; left:0; top:9px; width:10px; height:2.5px; border-radius:2px; background:var(--red); }
.brand-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.brand-tiles .tile { background:#fff; border:1px solid var(--line); border-radius:14px; min-height:76px; display:flex; align-items:center; justify-content:center; }
@media (max-width:760px){ .brand-tiles { grid-template-columns:1fr; } .hero-vx .wordmark { font-size:40px; } .art-hero h1 { font-size:30px; } }
/* mission */
.pillar { text-align:left; }
.quote-panel { background:#101014; border-radius:22px; padding:46px 48px; color:#fff; }
.quote-panel .q { font-size:21px; line-height:1.6; font-weight:500; color:#E2E3E7; max-width:840px; }
.quote-panel .who { color:#8A8D96; font-size:14px; margin-top:18px; }
.marquee-band { background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; white-space:nowrap; }
.marquee-band span { display:inline-block; font-weight:800; font-size:15.5px; letter-spacing:2.5px; color:var(--grey-mid); text-transform:uppercase; margin-right:64px; }
/* contact page */
.ct-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:26px; align-items:start; }
@media (max-width:900px){ .ct-grid { grid-template-columns:1fr; }
  /* ТЗ 13: на телефоне форма — сразу после hero, карточки с адресом ниже */
  .ct-grid > #contact { order:-1; } .ct-grid { display:flex; flex-direction:column; } }
.ct-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
.ct-card .h { font-weight:800; font-size:16px; margin-bottom:10px; }
.ct-card p, .ct-card a { color:var(--grey); font-size:14.5px; line-height:1.7; text-decoration:none; }
.ct-card a.mail { color:var(--red-dark); font-weight:700; }
/* legal */
.legal { max-width:820px; }
.legal h2 { font-size:20px; margin:34px 0 10px; }
.legal p, .legal li { color:#3A3D44; font-size:15px; line-height:1.7; margin-bottom:10px; }
.legal ul { margin:0 0 12px 20px; }

/* ===== ТЗ-2: spacing rhythm, mobile polish, new components ===== */
/* unified vertical rhythm */
.sec { padding: 0 0 76px; }
.panel { margin-bottom: 0; }
/* partner login link in nav */
.plogin { color: var(--grey); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; margin-left: auto; }
.plogin:hover { color: var(--red-dark); }
.nav .nav-cta { margin-left: 14px; }
@media (max-width: 1120px) { .plogin { display: none; } }
/* stats strip footnote */
.stat-strip .foot { color: #93969F; font-size: 12px; margin-top: 16px; }  /* было #63666E — 3.31:1 на тёмном */
/* vixen brand hero (navy) */
.hero-vx { background: radial-gradient(1100px 620px at 78% 40%, #241E4E 0%, #17133A 45%, #0E0B24 100%); padding: 0; }
.hero-vx::before { content: none; }
.hero-vx .wrap { display: flex; align-items: center; gap: 40px; padding: 76px 24px 72px; }
.hero-vx .vx-left { flex: 1 1 520px; min-width: 0; }
.hero-vx .vx-cube { flex: 0 1 460px; text-align: center; }
.hero-vx .vx-cube img { width: 100%; max-width: 470px; filter: drop-shadow(0 0 70px rgba(200,150,255,0.35)); }
.hero-vx .vx-logo { height: 64px; width: auto; display: block; margin: 26px 0 14px; }
.hero-vx .vx-label { color: #7FA7EC; font-weight: 700; font-size: 13px; letter-spacing: 3px; }
.hero-vx .vx-rule { width: 96px; height: 3px; background: #F5961E; border-radius: 2px; margin: 22px 0; }
.hero-vx .lead { color: #C9C5DE; font-size: 17.5px; line-height: 1.65; max-width: 560px; }
.hero-vx .vx-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.hero-vx .vx-site { color: #7FA7EC; font-weight: 700; font-size: 14.5px; text-decoration: none; padding: 6px 2px; }
.hero-vx .vx-site:hover { color: #A8C6F5; }
@media (max-width: 900px) {
  .hero-vx .wrap { flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding: 48px 20px 56px; }
  .hero-vx .vx-cube { align-self: center; max-width: 320px; }
}
/* partner status logo tiles */
.logo-tiles { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.logo-tiles .lt { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 74px; min-width: 168px;
  display: flex; align-items: center; justify-content: center; padding: 14px 24px; }
.logo-tiles .lt img { max-height: 34px; max-width: 150px; width: auto; height: auto; }
.logo-tiles .lt .cap { font-size: 11px; color: var(--grey-mid); font-weight: 700; letter-spacing: 0.6px; margin-top: 6px; }
.logo-tiles .lt.col { flex-direction: column; }
/* founder quote with photo */
.quote-flex { display: flex; gap: 44px; align-items: center; }
.quote-flex .ph { flex: 0 0 240px; }
.quote-flex .ph img { width: 240px; height: 300px; object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid #26262E; }
@media (max-width: 860px) { .quote-flex { flex-direction: column; align-items: flex-start; } .quote-flex .ph img { width: 200px; height: 250px; } }
/* map card */
.map-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); display: block; min-height: 240px; }
.map-card img, .map-card svg { width: 100%; height: 100%; display: block; }
.map-card .pin-label { position: absolute; left: 14px; bottom: 14px; background: #fff; border-radius: 10px; padding: 10px 16px;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 20px rgba(21,21,24,0.15); }
/* topics label in hero */
.topics-label { color: var(--grey-mid); font-weight: 700; font-size: 11.5px; letter-spacing: 2px; margin: 26px 0 10px; }
.hero .topics-label { color: #8A8D96; }
/* mobile typography & rhythm */
@media (max-width: 760px) {
  h1 { font-size: clamp(30px, 8.6vw, 40px) !important; }
  /* ТЗ 23: ручные переносы строк в H1 рассчитаны на десктоп — на телефоне дают «сиротские» строки; отключаем */
  h1 br:not(.keep) { display: none; }
  /* длинные чипы («NVIDIA AI ENTERPRISE · vGPU · LICENSING») — чуть плотнее, чтобы помещались в одну строку */
  .chip-red, .chip-dark { font-size: 12px; letter-spacing: 1.2px; line-height: 1.5; padding: 6px 14px; }
  .hero .lead, .hero-vx .lead { font-size: 16px; }
  .sec, .sec-t { padding: 0 0 54px; }
  .hero + section, .trust + section, .band + section, .stat-strip + section, .grey-band + section, .marquee-band + section { padding-top: 44px; }
  .h2c, .h2l { font-size: 25px; }
  .band .wrap { padding-top: 52px; padding-bottom: 52px; }
  .stat-strip .grid.g4 { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 9px 10px; }
  .tbl td:first-child { white-space: normal; }   /* v31: 641–760px – первая колонка может переноситься, иначе таблица шире контейнера */
  .art-hero h1 { font-size: 26px !important; }
  .hero::before { background: linear-gradient(180deg, rgba(10,10,16,0.97) 0%, rgba(10,10,16,0.93) 62%, rgba(10,10,16,0.72) 100%); }
  .band::before { background: linear-gradient(180deg, rgba(10,10,16,0.97) 0%, rgba(10,10,16,0.94) 60%, rgba(10,10,16,0.8) 100%); }
  footer .cols { flex-wrap: wrap; gap: 28px; }
}
.langsw { color: var(--grey-mid); font-size: 13px; font-weight: 700; margin-left: auto; white-space: nowrap; letter-spacing: 0.5px; }
.langsw a { color: var(--grey-mid); text-decoration: none; }
.langsw a:hover { color: var(--red-dark); }
.langsw b { color: var(--ink); }
.plogin { margin-left: 14px; }
@media (max-width: 1120px) { .langsw { display: none; } }


/* ===== ТЗ-3: rhythm after dark strips, plain logo tiles, mobile footer/vixen ===== */
.hero + section, .trust + section, .band + section, .stat-strip + section,
.grey-band + section, .marquee-band + section { padding-top: 56px; }
.hero + .trust + section { padding-top: 56px; }

.logo-tiles .lt { min-width: 150px; }
.logo-tiles .lt img { max-height: 30px; max-width: 140px; }
/* mobile footer */
@media (max-width: 760px) {
  footer.site .cols { flex-direction: column; gap: 26px; }
  footer.site .brand { flex: 0 0 auto; }
  footer.site .brand .tagline { margin-bottom: 0; }
  footer .links { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 18px; width: 100%; }
  /* колонка контактов на всю ширину: иначе e-mail не помещается и рвётся посередине */
  footer.site .links > div:last-child { grid-column: 1 / -1; }
  footer .legal { flex-direction: column; gap: 6px; align-items: flex-start; }
  /* vixen hero on mobile: no cube */
  .hero-vx .wrap { flex-direction: column; }
  .hero-vx .vx-cube { display: none; }
  .logo-tiles { gap: 10px; }
  .logo-tiles .lt { min-width: 128px; min-height: 60px; padding: 10px 16px; }
}
/* aircon cards: buttons aligned bottom */
.card-sh { display: flex; flex-direction: column; }
.card-sh .btn { align-self: flex-start; }
.card-sh .btn.push-bottom { margin-top: auto; }
/* fgas cert preview */
.cert-prev { float: right; width: 132px; margin: 0 0 12px 18px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(21,21,24,0.12); }
@media (max-width: 640px) { .cert-prev { width: 104px; } }
/* dir_card action row gap */
.card .actions-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: auto; }
/* compact history timeline */
.tline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 34px; }
.tline::before { content: ""; position: absolute; left: 3%; right: 3%; top: 7px; height: 2px; background: var(--line); }
.tline .ti { position: relative; padding: 26px 14px 0 14px; text-align: center; }
.tline .ti::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 4px solid var(--red); box-sizing: border-box; }
.tline .ti.today::before { background: var(--red); box-shadow: 0 0 0 5px rgba(227,32,38,0.15); }
.tline .y { color: var(--red); font-weight: 800; font-size: 19px; letter-spacing: -0.5px; }
.tline .tl { font-weight: 700; font-size: 13.5px; margin-top: 4px; line-height: 1.35; }
.tline .td { color: var(--grey); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
@media (max-width: 900px) {
  /* 1fr = minmax(min-content,1fr): длинные немецкие слова в таймлайне раздували колонку */
  .tline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 14px; }
  .tline .ti { padding-left: 8px; padding-right: 8px; }
  .tline .tl, .tline .td { overflow-wrap: break-word; }
  .tline::before { display: none; }
  .tline .ti { padding-top: 22px; }
}

/* ===== ТЗ-3 fix: mobile header must never overflow (long DE labels) ===== */
@media (max-width: 760px) {
  .nav { gap: 10px; }
  .nav .logo img { height: 38px; }
  .nav .nav-cta { margin-left: auto; padding: 10px 14px; font-size: 13.5px; }
  .nav .burger { padding: 8px 0 8px 4px; }
}
@media (max-width: 420px) {
  .nav .logo img { height: 34px; }
  .nav .nav-cta { padding: 9px 12px; font-size: 12.5px; letter-spacing: -0.1px; }
}

/* ===== ТЗ-4: карточки на странице кондиционеров — медиа одной высоты, заголовки на одном уровне ===== */
.ac-media { display: flex; align-items: center; min-height: 196px; margin: 4px 0 16px; }
.ac-media .cert-prev { float: none; width: 138px; margin: 0; }
.ac-media .ch-logo { height: 104px; width: auto; display: block; }
@media (max-width: 900px) { .ac-media { min-height: 0; } .ac-media .ch-logo { height: 84px; } }

/* ===== ТЗ-5: баннеры читаются на ЛЮБОЙ ширине =====
   Причина прежних наложений: background-size:cover + проценты в градиенте.
   При сужении окна сцена масштабируется вверх и заезжает в колонку текста,
   а градиент, рассчитанный в % вьюпорта, перестаёт её накрывать.
   Решение: сцена фиксированной доли справа + градиент, привязанный к центру
   макета через calc(), а не к проценту вьюпорта. Плюс общее притушение. */
@media (min-width: 901px) {
  .hero, .band {
    background-size: cover;
    background-position: right center;
  }
  .hero::before {
    background:
      linear-gradient(90deg,
        rgba(10,10,16,0.975) 0,
        rgba(10,10,16,0.955) min(70%, calc(50% + 70px)),
        rgba(10,10,16,0.58)  min(86%, calc(50% + 250px)),
        rgba(10,10,16,0.16) 100%);
  }
  .band::before {
    background:
      linear-gradient(90deg,
        rgba(10,10,16,0.965) 0,
        rgba(10,10,16,0.94)  min(70%, calc(50% + 70px)),
        rgba(10,10,16,0.56)  min(86%, calc(50% + 250px)),
        rgba(10,10,16,0.16) 100%),
      linear-gradient(0deg, rgba(10,10,16,0.85) 0%, rgba(10,10,16,0) 32%);
  }
  /* колонка текста больше не может дорасти до графики */
  .hero h1   { max-width: min(640px, 52%); }
  .hero .lead{ max-width: min(560px, 48%); }
  .hero .btns{ max-width: min(640px, 52%); }
}
/* планшет: сцена уходит в фон, текст во всю ширину */
@media (min-width: 761px) and (max-width: 900px) {
  .hero, .band { background-size: cover; background-position: right center; }
  .hero::before {
    background: linear-gradient(90deg, rgba(10,10,16,0.975) 0%, rgba(10,10,16,0.93) 62%, rgba(10,10,16,0.66) 100%);
  }
  .band::before {
    background: linear-gradient(90deg, rgba(10,10,16,0.97) 0%, rgba(10,10,16,0.92) 62%, rgba(10,10,16,0.66) 100%);
  }
  .hero h1 { max-width: 78%; }
  .hero .lead { max-width: 74%; }
}

/* ===== ТЗ-5: комфортная длина строки в длинных текстах ===== */
.art > p, .art > ul, .art > ol, .art > h2, .art > h3 { max-width: 72ch; }
.art .inbrief, .art .art-cta, .art .faq { max-width: 78ch; }
.legal p, .legal ul, .legal li { max-width: 78ch; }

/* ===== ТЗ-6 ===== */
/* 1. текст баннера ниже относительно графики */
@media (min-width: 901px) { .hero .wrap { padding-top: 96px; padding-bottom: 88px; } }

/* 7. маркиза «EUROPEAN EXPERTISE…» не влезает на мобильном — убираем */
@media (max-width: 760px) { .marquee-band { display: none; } }

/* 8. Vixen на мобильном: куб скрыт, но пустой фиолетовый блок остался */
@media (max-width: 760px) {
  .hero-vx .wrap { padding: 44px 20px 40px; gap: 0; }
  .hero-vx .vx-left { flex: 1 1 auto; }
  .hero-vx .vx-actions { margin-top: 22px; }
}

/* 9. переключатель языка в мобильной шапке, слева от кнопки */
@media (max-width: 1120px) {
  .langsw { display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
            font-size: 12.5px; letter-spacing: 0; flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .nav .langsw { font-size: 12px; margin-left: auto; }
  .nav .nav-cta { margin-left: 10px; }
}
@media (max-width: 460px) {
  .nav { gap: 8px; }
  .nav .logo img { height: 32px; }
  .nav .langsw { font-size: 11.5px; }
  .nav .nav-cta { padding: 8px 10px; font-size: 12px; margin-left: 8px; }
}

/* 10. фильтр категорий в блоге */
.catbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 34px; }
.catbtn { font-family: inherit; font-size: 14px; font-weight: 700; color: var(--grey);
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 9px 18px;
  cursor: pointer; transition: .15s; }
.catbtn:hover { border-color: var(--line-2, #C9CDD3); color: var(--ink); }
.catbtn.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.catbtn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.post.is-hidden { display: none !important; }
@media (max-width: 640px) { .catbtn { font-size: 13px; padding: 8px 14px; } }

/* ТЗ-7: текст баннера ниже и гарантированный зазор до графики */
@media (min-width: 901px) {
  .hero .wrap { padding-top: 124px; padding-bottom: 96px; }
  .hero h1    { max-width: min(600px, 46%); }
  .hero .lead { max-width: min(520px, 43%); }
  .hero .btns { max-width: min(600px, 46%); }
}

/* ТЗ-8 фикс: шапка переполнялась в полосе 1121–1365px — там уже показывалось
   полное меню, но оно физически не помещалось. Сжимаем меню в этой полосе. */
@media (min-width: 1121px) and (max-width: 1440px) {
  .nav { gap: 12px; }
  .menu { gap: 12px; font-size: 13.7px; }
  .menu > div > a, .menu > div > .dd-lab { padding: 6px 1px; }
  .plogin { font-size: 13px; margin-left: auto; }
  .nav .nav-cta { margin-left: 10px; padding: 10px 16px; font-size: 14.5px; }
  .langsw { font-size: 12.5px; }
  .nav .logo img { height: 40px; }
}

/* ТЗ-8: размер зон нажатия на мобильном (WCAG 2.2 Target Size — минимум 24×24 CSS px) */
@media (max-width: 1120px) {
  .nav .langsw { padding: 6px 4px; }
  .nav .langsw a, .nav .langsw b { display: inline-block; min-width: 28px; min-height: 28px;
    line-height: 28px; text-align: center; }
}
@media (max-width: 760px) {
  /* ТЗ-10: ссылки в футере должны оставаться блочными — inline-block склеивал их в строку */
  footer.site .links a { display: block; padding: 5px 0; min-height: 28px; }
  footer.site .legal a { display: inline-block; padding: 5px 0; min-height: 28px; }
  .rlink { display: inline-block; min-height: 28px; padding: 4px 0; }
  .form-note a { display: inline-block; min-height: 28px; padding: 4px 0; }
}

/* ТЗ-10: оглавление статьи */
.arttoc { border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px;
  margin: 0 0 30px; background: var(--panel); }
.arttoc-t { font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--grey-mid); margin-bottom: 12px; }
.arttoc ul { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 34px; }
.arttoc li { break-inside: avoid; margin-bottom: 7px; }
.arttoc a { color: var(--grey); font-size: 14.5px; line-height: 1.45; text-decoration: none;
  border-left: 2px solid transparent; padding: 3px 0 3px 10px; display: block; transition: .15s; }
/* На телефоне высота пункта оглавления была 21px — меньше рекомендованных 24px для пальца. */
@media (max-width: 760px) { .arttoc a { padding-top: 6px; padding-bottom: 6px; } .arttoc li { margin-bottom: 3px; } }
.arttoc a:hover { color: var(--ink); border-left-color: var(--line-2, #C9CDD3); }
.arttoc a.is-on { color: var(--red-dark); border-left-color: var(--red); font-weight: 600; }
.art h2 { scroll-margin-top: 96px; }
@media (max-width: 760px) { .arttoc ul { column-count: 1; } .arttoc { padding: 16px 18px; } }

/* ═══ ТЗ 11 ═══ */
/* п.2: панель с цитатой CEO — бордовый фон вместо чёрного (босс: чёрный выглядит траурно).
   Класс используется только на /our-mission/ и /de/our-mission/. */
.quote-panel { background: linear-gradient(135deg, #4E141C 0%, #350D13 100%); }
.quote-panel .q { color: #F2E6E7; }
.quote-panel .who { color: #C79BA0; }
.quote-panel .eyebrow { color: #C79BA0 !important; }

/* п.1: после удаления Microsoft в смуге брендов осталось 2 плитки, а сетка была
   жёстко на 3 колонки — плитки прижимались влево и справа зияла пустота.
   auto-fit подстраивается под фактическое количество и центрирует ряд. */
@media (min-width: 761px) {
  .brand-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 380px));
                 justify-content: center; }
}

/* Найдено при проверке ТЗ 11: на всех НЕМЕЦКИХ страницах при 360px бургер вылезал
   за край на 5px — «Experten kontaktieren» на 32px шире «Talk to an expert».
   Баг был и до новых страниц. Решение: на узких экранах у кнопки короткая подпись. */
.cta-short { display: none; } /* ТЗ 13: Алекс хочет полный текст кнопки и на телефоне */
@media (max-width: 400px) {
  /* Шрифт был 10.5–10.8px — читается плохо. Подняли до 11.5–12px,
     место освободили за счёт отступов кнопки и переключателя языков. */
  .nav { gap: 4px; }
  .nav .logo img { height: 29px; }
  .nav .langsw { font-size: 11.5px; margin-left: auto; letter-spacing: 0; gap: 2px; }
  .nav .nav-cta { padding: 7px 9px; font-size: 12px; letter-spacing: -0.2px; margin-left: 2px; }
  .nav .burger { padding: 8px 0 8px 2px; min-width: 34px; }
  .nav .burger span { width: 20px; }
}

/* ═══ ТЗ 12 ═══ */
/* п.1: таймлайн истории вырос до 6 пунктов (добавили 2015), а сетка была жёстко
   repeat(5,1fr) — шестой пункт падал на вторую строку. На десктопе — все шесть в ряд. */
@media (min-width: 761px) {
  .tline { grid-template-columns: repeat(6, 1fr); }
  .tline .ti { padding: 26px 10px 0 10px; }
}

/* п.2 продолжение ТЗ-12: перелинковка — ссылки в теле статей */
.art p a, .art li a { color: var(--red-dark); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(196,24,30,.35);
  text-underline-offset: 2px; }
.art p a:hover, .art li a:hover { text-decoration-color: var(--red-dark); }

/* блок подписки (включается, когда появится рассыльщик) */
.subx { background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 34px 38px; }
.subx-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.subx-form .inp { flex: 1 1 260px; }
.subx-form .btn { flex: 0 0 auto; }
@media (max-width: 700px) { .subx { padding: 24px 20px; } }

/* страница Company Facts */
.cofacts td:first-child { color: var(--grey); font-weight: 600; width: 38%; }
.co-note { border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: var(--radius); background: var(--panel); padding: 16px 20px;
  font-size: 15px; color: var(--grey); max-width: 72ch; }
.co-note b { color: var(--ink); }
.cofacts a { color: var(--red-dark); font-weight: 600; }

/* ===== Motion pass (v10): scroll-reveal + counters + hero glow ===== */
html.jsanim .rv { opacity: 0; transform: translateY(12px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
html.jsanim .rv.rv-in { opacity: 1; transform: none; }
html.jsanim .rv.rv-d1 { transition-delay: .1s; }
html.jsanim .rv.rv-d2 { transition-delay: .2s; }
.hero, .hero-vx, .art-hero { position: relative; }
.hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(640px 420px at var(--hx,72%) var(--hy,42%), rgba(227,32,38,.16), transparent 70%);
  animation: heroPulse 7s ease-in-out infinite alternate; }
@keyframes heroPulse { from { opacity:.3; } to { opacity:1; } }
@media (min-width:1025px) {
  .card, .card-sh { transition: transform .22s ease, box-shadow .22s ease; }
  .card:hover, .card-sh:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,16,20,.08); }
}
@media (prefers-reduced-motion: reduce) {
  html.jsanim .rv { opacity:1; transform:none; transition:none; }
  .hero::after { animation:none; opacity:.6; }
  .card:hover, .card-sh:hover { transform:none; }
}

/* success-статус формы: зелёная галочка (просьба Яны) */
.form-ok { text-align: center; padding: 34px 20px; }
.form-ok .tick { width: 54px; height: 54px; border-radius: 50%; background: rgba(22,163,74,.12); color: #16A34A; font-size: 25px; font-weight: 800; line-height: 54px; margin: 0 auto 14px; }

/* ТЗ14: живые кнопки */
.btn { transition: background .15s, transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(227,32,38,.26); }
.btn.ghost-w:hover, .btn.ghost-d:hover { box-shadow: 0 8px 22px rgba(16,16,20,.16); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

/* ТЗ14: таймлайн на узких планшетах — чуть плотнее, чтобы 6 вех влезали */
@media (min-width: 761px) and (max-width: 940px) {
  .tline .ti { padding-left: 6px; padding-right: 6px; }
  .tline .tl { font-size: 12.5px; }
  .tline .td { font-size: 11.5px; }
}

/* свечение на vixen-хиро (фиолетовый фон — тёплый свет) и на шапках статей */
.hero-vx::after { content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 380px at var(--hx,70%) var(--hy,45%), rgba(245,150,30,.12), transparent 70%);
  animation: heroPulse 7s ease-in-out infinite alternate; }
/* v32.1 (14.09, просьба Алекса): красное свечение в шапке статьи убрано совсем.
   На светлом фоне (--paper) розовая подсветка под заголовком мешала читать, к тому же она пульсировала
   (heroPulse, 7 с). На тёмных хиро (.hero, .hero-vx) свечение осталось: там оно работает как задумано. */
@media (prefers-reduced-motion: reduce) { .hero-vx::after { animation:none; opacity:.6; } }

/* ===== ТЗ15/21: слоган с «живым» словом на главной — чистый CSS (работает и там, где JS не запускается,
   например во встроенных браузерах мессенджеров). В H1 только слово «partner», остальные — атрибуты. */
.hero-home h1 { max-width: min(700px, 56%); }
.h1-pre { display:block; font-size: .56em; font-weight: 600; letter-spacing: .2px; color: #B9BCC4; margin-bottom: .18em; }
.rw { display: inline-grid; color: var(--red-soft); white-space: nowrap; vertical-align: baseline; }
.rw-w { grid-area: 1 / 1; opacity: 0; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; text-decoration-color: var(--red);
  animation: rwWord 4.2s ease-in-out infinite; }
.rw-x::after { content: attr(data-w); }
.rw-w:nth-child(1) { opacity: 1; animation-delay: -0.3s; }   /* стартуем «внутри» цикла: partner уже виден, переходы у всех слов одинаковые */
.rw-w:nth-child(2) { animation-delay: 1.1s; }
.rw-w:nth-child(3) { animation-delay: 2.5s; }
/* ТЗ25: три слова (partner / provider / solver), цикл 4.2 с = 3 × 1.4 с; подчёркивание в em, чтобы на телефоне не липло к следующей строке */
@keyframes rwWord  { 0% { opacity:0; transform: translateY(.35em); } 5.3% { opacity:1; transform:none; } 29.3% { opacity:1; transform:none; } 34.7%, 100% { opacity:0; transform: translateY(-.35em); } }
@media (max-width: 760px) { .hero-home h1 { max-width: 100%; line-height: 1.22; } .h1-pre { font-size:.6em; } }
@media (min-width: 761px) and (max-width: 900px) { .hero-home h1 { max-width: 82%; } }
@media (prefers-reduced-motion: reduce) { .rw-w { transform: none !important; } @keyframes rwWord { 0% { opacity:0; } 5.3% { opacity:1; } 29.3% { opacity:1; } 34.7%, 100% { opacity:0; } } }

/* ТЗ15: направления на главной — три карточки */
.dir-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dir-img { display: block; width: 100%; aspect-ratio: 2560/928; object-fit: cover; }
.dir-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.dir3 .dir-title { font-size: 23px; font-weight: 800; margin: 14px 0 12px; letter-spacing: -0.3px; }
/* планшет: одна колонка, но карточка горизонтальная — картинка слева, текст справа */
@media (min-width: 761px) and (max-width: 1024px) {
  .dir3.g3 { grid-template-columns: 1fr; }
  .dir-card { flex-direction: row; align-items: stretch; }
  .dir-img { width: 36%; flex: 0 0 36%; aspect-ratio: auto; height: auto; object-fit: cover; }
  .dir-body { padding: 24px 26px; }
}
@media (max-width: 760px) { .dir3.g3 { grid-template-columns: 1fr; } }
/* планшет-ландшафт / маленький ноутбук: колонке текста в хиро больше места */
@media (min-width: 901px) and (max-width: 1120px) {
  .hero h1 { max-width: min(600px, 54%); }
  .hero .lead { max-width: min(520px, 50%); }
  .hero .btns { max-width: min(600px, 54%); }
}

/* ТЗ15: TOPICS сразу под H1 (Certification & Training) — заметный лейбл + темы «плашками» */
.topics-big { margin: -4px 0 24px; max-width: 640px; }
.topics-big .tb-l { font-size: 14px; letter-spacing: 3.2px; font-weight: 800; color: var(--red-soft); margin-bottom: 10px; }
.topics-big .tb-list { display:flex; flex-wrap:wrap; gap: 8px; }
.topics-big span.t { display:inline-block; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #fff;
  padding: 7px 14px; border-radius: 9px; border: 1px solid rgba(255,138,142,.55); background: rgba(227,32,38,.18); }
@media (max-width: 760px) { .topics-big span.t { font-size: 13px; letter-spacing: 1.1px; padding: 6px 11px; } .topics-big .tb-l { font-size: 12.5px; } }

/* ТЗ15/ТЗ25: в полосе 1121–1440px меню плотнее. После ТЗ25 в шапке 4 пункта (Logistics и Other
   Equipment ушли в подвал), поэтому кнопка снова с полным текстом */
@media (min-width: 1121px) and (max-width: 1440px) {
  .nav { gap: 12px; }
  .menu { gap: 14px; font-size: 13.8px; }
  .menu > div > a, .menu > div > .dd-lab { padding: 6px 1px; }
  .dd > a::after { font-size: 9.5px; }
  .langsw { margin-left: auto; font-size: 12px; }
  .nav .nav-cta { margin-left: 8px; padding: 9px 15px; font-size: 13.5px; }
  .nav .logo img { height: 36px; }
}
@media (min-width: 1441px) and (max-width: 1600px) {
  .menu { gap: 14px; font-size: 14px; }
  .plogin { font-size: 13px; }
}
@media (min-width: 1441px) { .langsw { padding-left: 12px; } }
/* ТЗ15: мобильное меню стало длиннее (3 выпадашки) — прокручиваем его внутри экрана */
@media (max-width: 1120px) {
  .menu.open, .nav-toggle:checked ~ .menu { max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Таблицы-сравнения на телефоне: вместо горизонтальной прокрутки — строка складывается в карточку,
   каждая ячейка получает подпись своей колонки (data-th). Включается классом .stack */
@media (max-width: 640px) {
  .tbl.stack { font-size: 14.5px; }
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody { display: block; width: 100%; }
  .tbl.stack tr { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 4px; margin-bottom: 12px; background: #fff; }
  .tbl.stack tr.hl { border-color: rgba(227,32,38,.35); background: #FDF4F4; }
  .tbl.stack tr.hl td { background: transparent; }
  /* ТЗ 23: карточка = заголовок + строки «подпись | значение» обычным шрифтом (без мелкого капса) */
  .tbl.stack td { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 4px 14px; align-items: start; padding: 9px 0 10px; border: none; border-top: 1px solid var(--line-soft); white-space: normal; line-height: 1.45; }
  .tbl.stack td:first-child { display: block; font-size: 17px; font-weight: 800; color: var(--ink); padding: 0 0 10px; border-top: none; }
  .tbl.stack tr.hl td:first-child { color: var(--red-dark); }
  .tbl.stack td::before { content: attr(data-th); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--grey); padding-top: 1px; }
  .tbl.stack td:first-child::before { display: none; }
  .tbl.stack td.e { display: none; }
  .tbl.stack.two td { display: block; }
  .tbl.stack.two td::before { display: none; }
  /* обычные (узкие числовые) таблицы на телефоне: шапка и первая колонка могут переноситься, чтобы не было прокрутки */
  .tbl th, .tbl td:first-child { white-space: normal; }
  /* v33.1 (14.09): длинное немецкое слово в ячейке задаёт min-content и выталкивает таблицу за контейнер
     (нашлось на /de/company/ и /de/security-compliance/: «Kammermitgliedschaft», 344px в 333px).
     break-word страхует от вылета, а перенос длинных немецких составных слов задаётся мягким
     переносом ­ в самом тексте – так разрыв показывается дефисом, а не посреди слова. */
  .tbl th, .tbl td { overflow-wrap: break-word; }
}

/* v31 (13.09): «широкие» таблицы (.stack, 5+ колонок / длинный текст) на планшете 641–1024px:
   первая колонка и шапка могут переноситься, иначе nowrap-подписи («4U Dell PowerEdge XE7745», «POWER SUPPLIES»)
   сжимают остальные колонки до 60–80px и ячейки рвутся на 5–7 строк */
@media (max-width: 1024px) {
  .tbl.stack th, .tbl.stack td:first-child { white-space: normal; }
}

/* Футер на планшетах 761–900px: .brand имел flex-basis 220px, который в колонке становится ВЫСОТОЙ —
   отсюда пустые 146px между слоганом и колонками ссылок. На телефоне (≤760) это было починено раньше. */
@media (max-width: 900px) { footer.site .brand { flex: 0 0 auto; } }
/* Software: блоки вендоров — у последнего нет нижнего отступа (иначе 76+46px до тёмной полосы) */
.vendor { margin-bottom: 46px; }
.vendor:last-child { margin-bottom: 0; }

/* Vixen.UNO на планшетах 761–900px: раньше куб вставал НАД текстом, а flex-basis 460px в колонке
   превращался в высоту — пустая фиолетовая дыра ~600px. Теперь текст слева, куб справа, компактно. */
@media (min-width: 761px) and (max-width: 900px) {
  .hero-vx .wrap { flex-direction: row; align-items: center; gap: 22px; padding: 56px 24px 52px; }
  .hero-vx .vx-left { flex: 1 1 auto; min-width: 0; }
  .hero-vx .vx-cube { flex: 0 0 34%; max-width: 300px; align-self: center; }
  .hero-vx .vx-cube img { max-width: 100%; }
  .hero-vx .vx-logo { height: 54px; }
  .hero-vx .lead { font-size: 16px; }
}
/* Цитата основателя на планшете/телефоне: flex-basis 240px фото в колонке становился высотой — фото 250px вылезало на текст */
@media (max-width: 860px) { .quote-flex .ph { flex: 0 0 auto; } }

/* ТЗ20/21/22: шапка на широких экранах (≥1441px). Контейнер тот же, что у контента (1220px), логотип ровно
   над текстом. Пункт «Home» убран (логотип = главная), поэтому меню дышит: 14px, промежутки 16px. */
@media (min-width: 1441px) {
  .nav { gap: 14px; }
  .menu { gap: 16px; font-size: 14px; }
  .menu > div > a, .menu > div > .dd-lab { padding: 6px 1px; }
  .nav .logo img { height: 40px; }
  .langsw { margin-left: auto; padding-left: 8px; font-size: 12.5px; }
  .nav .nav-cta { margin-left: 8px; padding: 10px 16px; font-size: 14px; }
}
/* ТЗ20: страница контактов на телефоне — форма во всю ширину (Safari сжимал панель по контенту) */
@media (max-width: 900px) { .ct-grid { align-items: stretch; } .ct-grid > * { width: 100%; } }
/* ТЗ20: фото основателя на телефоне — по центру */
@media (max-width: 860px) { .quote-flex .ph { align-self: center; } .quote-flex .ph img { margin: 0 auto; } }
/* бургер-лейбл: иконка «крестик» в открытом состоянии */
.nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ТЗ22: значки-глифы (⚑ ⚙ ☁ ✱ ★) не должны превращаться в цветные эмодзи на Windows */
.icon-circle, .port-icon, .stat-strip .n { font-variant-emoji: text; }
/* ТЗ25: плитка «12 VCP · 4 VCAP» вместо «95%» — текст длиннее числа, на узких колонках уменьшаем */
.stat-cert { font-size: 30px !important; line-height: 57px !important; }   /* 57px = высота строки соседних цифр (38px × 1.5): подписи на одном уровне */
@media (max-width: 1024px) { .stat-cert { font-size: 26px !important; } }
@media (max-width: 420px) { .stat-cert { font-size: 24px !important; } }
/* ТЗ27: «AI/ML & Enterprise IT» в слогане — всегда одной строкой; на телефоне размер H1 главной подобран так,
   чтобы фраза помещалась (440px → ~33px, 390px → ~30px, 360px → ~27px). DE: «KI/ML & Enterprise IT» тоже не рвётся. */
.hero-home h1 .nw { white-space: nowrap; }
@media (max-width: 760px) { .hero-home h1 { font-size: clamp(25px, 7.6vw, 40px) !important; } }
@media (max-width: 760px) { html[lang="de"] .hero-home h1 { font-size: clamp(24px, 7.2vw, 40px) !important; } }
@media (max-width: 340px) { .nav .nav-cta .cta-full { display: none; } .nav .nav-cta .cta-short { display: inline; } }

/* ===== ТЗ 28 (04.09, финальный митинг): 5 пунктов меню (+ Enterprise Training) и «Partner login» снова в шапке.
   Чтобы не было тесно: шапка шире контента (логотип левее, кнопка правее — идея босса), меню по центру,
   между пунктами красные точки-разделители (идея Алекса). На телефоне Partner login — последним пунктом бургера. ===== */
@media (min-width: 1121px) {
  header.site .wrap { max-width: 1480px; }
  .nav { gap: 14px; }
  .nav .menu { margin: 0 auto; gap: 0; font-size: 14px; }
  .menu > div { padding: 0 13px; }
  .menu > div:first-child { padding-left: 0; }
  .menu > div:last-child { padding-right: 0; }
  .menu > div + div::before { content: ''; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
    border-radius: 50%; background: var(--red); opacity: .85; }
  .menu .dd-list { left: -9px; }
  .m-plogin { display: none; }
  .nav .plogin { display: inline-block; margin-left: 0; font-size: 13px; font-weight: 700; color: var(--grey-mid); }
  .nav .plogin:hover { color: var(--red-dark); }
  .nav .langsw { margin-left: 0; padding-left: 0; }
  .nav .nav-cta { margin-left: 4px; }
}
@media (min-width: 1121px) and (max-width: 1320px) {
  .nav { gap: 10px; }
  .nav .menu { font-size: 13.2px; }
  .menu > div { padding: 0 9px; }
  .nav .logo img { height: 36px; }
  .nav .nav-cta { padding: 9px 13px; font-size: 13px; }
  .nav .plogin { font-size: 12.5px; }
  .nav .langsw { font-size: 12px; }
}
@media (max-width: 1120px) {
  .nav .plogin { display: none; }
  .m-plogin { display: block; width: 100%; border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 4px; }
  .m-plogin a { color: var(--grey); font-weight: 600; }
}
/* узкие ноутбуки 1121–1240px: с пятью пунктами и Partner login полная подпись кнопки не помещается (DE) — короткая «Kontakt»/«Contact» */
@media (min-width: 1121px) and (max-width: 1240px) {
  .nav .nav-cta .cta-full { display: none; }
  .nav .nav-cta .cta-short { display: inline; }
  .nav .nav-cta { padding: 9px 14px; font-size: 13.5px; }
}
/* ТЗ 28 (Алекс, 04.09): полоса цифр на /vixen-uno/ — плитки по центру колонок (как на главной), иначе между «42» и
   «12 VCP · 4 VCAP» зияет пустота из-за разной ширины текста */
.stat-strip .grid > div { text-align: center; }
.stat-strip .foot { text-align: center; }

/* ---------- /glossary/ (справочник терминов) ---------- */
.gl-sec .eyebrow { text-align: left; }
.gl-jump { margin-top: 22px; font-size: 14px; color: var(--grey-mid); }
.gl-jump a { color: #C9CBD3; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.gl-jump a:hover { color: #fff; border-bottom-color: var(--red); }
.gl-list { border-top: 1px solid var(--line); }
.gl-item { display: grid; grid-template-columns: 300px 1fr; gap: 28px;
  padding: 22px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.gl-term { font-weight: 800; font-size: 17px; line-height: 1.35; color: var(--ink); scroll-margin-top: 90px; }
.gl-def p { color: var(--grey); font-size: 15.5px; line-height: 1.68; margin: 0 0 8px; }
.gl-def .rlink { display: inline-block; }
.gl-item:target .gl-term { color: var(--red); }
@media (max-width: 760px) {
  .gl-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .gl-term { font-size: 16.5px; }
  .gl-def p { font-size: 15px; }
}

/* ---------- очень узкие экраны (320px — iPhone SE 1-го поколения и подобные) ----------
   В CSS-grid `1fr` = `minmax(min-content, 1fr)`: длинные немецкие слова
   (Auftragsverarbeitungsvertrag, Infrastruktur-Audit) раздували колонку шире контейнера
   и давали горизонтальный скролл. min-width:0 у детей сетки снимает это. */
.grid > *, .cols > *, .card, .card-sh { min-width: 0; }
.card, .card-sh { overflow-wrap: break-word; }

/* Длинные немецкие составные слова (Generationsunterschied, Referenzkonfigurationen)
   не влезают в заголовок на узком экране — разрешаем перенос, на DE-страницах
   с lang="de" браузер переносит по слогам. */
h1, h2, h3, .h2l { overflow-wrap: break-word; }

@media (max-width: 380px) {
  h1, h2, h3, .h2l, .art h2 { hyphens: auto; }
  .art-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 16px; }
  .art-cta .btn { width: 100%; text-align: center; }
  .card-sh { padding: 18px; overflow-wrap: anywhere; }
  .tbl td:first-child { white-space: normal; }
  .tbl th, .tbl td { padding: 8px 9px; }
  .tbl { font-size: 12.5px; }
}

/* ---------- футер на планшете и телефоне ----------
   Четыре блока разной длины (AI Hardware 5 ссылок, Services 8, Company 7, Contact 4)
   в grid из двух колонок оставляли большие пустые провалы — на iPhone Pro Max это
   половина экрана пустоты. Решение:
     521–1120px — не grid, а колоночная вёрстка: браузер сам переливает блоки и
                  выравнивает высоту колонок, пустот не остаётся;
     ≤520px     — одна колонка. */
@media (max-width: 1120px) and (min-width: 521px) {
  footer.site .links { display: block !important; columns: 2; column-gap: 34px; }
  footer.site .links > div { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 26px; }
  footer.site .links > div:last-child { grid-column: auto; margin-bottom: 0; }
}
@media (max-width: 520px) {
  footer.site .links { display: block !important; columns: 1; }
  footer.site .links > div { margin: 0 0 26px; }
  footer.site .links > div:last-child { grid-column: auto; margin-bottom: 0; }
  footer.site .links b { margin-bottom: 2px; }
}