/* =========================================================
   Вертикаль ліцензій — спільне оформлення п'яти доменів.
   Світ інший, ніж у каталогу софту: темно-синя основа, крижаний блакитний
   і латунь. Латунь ужита лише там, де йдеться про сам документ-ліцензію —
   печатка, юрисдикція, заголовок таблиці. Ніяких іконок: у реєстровому
   документі працює типографіка, а не піктограми.
   ========================================================= */
:root{
  --bg:        #070C16;
  --surface:   #0E1626;
  --surface-2: #131D31;
  --line:      #1E2A42;
  --line-strong:#33456A;
  --ink:       #EAF0FA;
  --ink-soft:  #BCCADF;
  --muted:     #8496B0;

  --ice:       #4DA3FF;
  --ice-soft:  #8CC6FF;
  --brass:     #D9B65C;
  --brass-dim: #8A7231;

  --ok:        #4FC79B;
  --warn:      #E0B94A;

  --display: "Instrument Serif", Georgia, serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
  --r: 6px;
}

*{ box-sizing: border-box; }
html{ font-size: 106.25%; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; }
.wrap{ max-width: 960px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3{ font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; }
p{ margin: 0 0 1.1em; max-width: 68ch; }
a{ color: var(--ice); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible{ outline: 2px solid var(--ice); outline-offset: 3px; }

.label{
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass);
}

/* ---------- шапка ---------- */
.top{
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0A1220, var(--bg));
}
.top-row{ display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 22px 0; }
.mark{
  font-family: var(--display); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em;
}
.mark b{ font-weight: 400; color: var(--brass); }
.mark-sub{
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-left: auto;
}

/* ---------- герой ---------- */
.hero{ position: relative; padding: 76px 0 54px; overflow: hidden; }
.hero::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(77,163,255,.14), transparent 62%),
    radial-gradient(560px 300px at 92% 12%, rgba(217,182,92,.08), transparent 62%);
}
.hero > *{ position: relative; }
.hero h1{
  font-size: clamp(2.4rem, 5.2vw, 3.8rem); margin: 16px 0 22px; max-width: 20ch; color: #fff;
}
.lede{ font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.rule{
  height: 1px; border: 0; margin: 40px 0 0;
  background: linear-gradient(90deg, var(--brass), var(--line) 45%, transparent);
}

/* ---------- секції ---------- */
.sec{ padding: 52px 0; border-top: 1px solid var(--line); }
.sec:first-of-type{ border-top: 0; }
.sec h2{ font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 12px 0 24px; color: #fff; }
.sec p{ color: var(--ink-soft); }
.note{
  font-size: 0.94rem; color: var(--muted); border-left: 2px solid var(--brass-dim);
  padding-left: 16px; max-width: 70ch; margin-top: 26px;
}

/* ---------- перелік юрисдикцій: картки-посвідчення ---------- */
.registry{ display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.entry{
  background: var(--surface); padding: 22px 24px;
  display: grid; grid-template-columns: 210px 1fr; gap: 6px 30px; align-items: baseline;
}
.entry-name{
  font-family: var(--display); font-size: 1.32rem; color: var(--ice); line-height: 1.2;
}
.entry-note{ color: var(--ink-soft); font-size: 0.99rem; }
.entry:hover{ background: var(--surface-2); }

/* ---------- ознаки: штампи, а не пігулки ---------- */
.stamps{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.stamp{
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brass); padding: 6px 12px;
  border: 1px solid var(--brass-dim); border-radius: 2px; background: rgba(217,182,92,.05);
}
.stamp-ice{ color: var(--ice-soft); border-color: #2C4A72; background: rgba(77,163,255,.06); }

/* ---------- таблиця: реєстровий вигляд, без залитої шапки ---------- */
.table-wrap{ overflow-x: auto; }
table{ width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 620px; }
thead th{
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass); text-align: left;
  padding: 0 18px 12px 0; border-bottom: 1px solid var(--brass-dim);
}
tbody td{
  padding: 17px 18px 17px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); vertical-align: top;
}
tbody tr:last-child td{ border-bottom: 0; }
tbody tr:hover td{ color: var(--ink); }
tbody td:first-child{
  font-family: var(--display); font-size: 1.16rem; color: var(--ice); white-space: nowrap;
}
/* у таблиці з групуванням перша колонка — категорія, тоді підсвічуємо другу */
table.by-type tbody td:first-child{
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: normal;
}
table.by-type tbody td:nth-child(2){
  font-family: var(--display); font-size: 1.16rem; color: var(--ice); white-space: nowrap;
}

/* ---------- перелік причин ---------- */
.reasons{ list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 0; }
.reasons li{
  padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink-soft); max-width: 74ch;
  display: grid; grid-template-columns: 42px 1fr; gap: 18px;
}
.reasons li::before{
  content: counter(r, decimal-leading-zero); counter-increment: r;
  font-family: var(--mono); font-size: 0.86rem; color: var(--brass); padding-top: 3px;
}
.reasons{ counter-reset: r; }

/* ---------- підвал ---------- */
.foot{
  border-top: 1px solid var(--line); margin-top: 20px; padding: 34px 0 44px;
  font-size: 0.92rem; color: var(--muted);
}
.foot .mark{ font-size: 1.15rem; display: block; margin-bottom: 10px; }
.foot p{ max-width: 66ch; margin-bottom: 0; }

@media (max-width: 760px){
  .hero{ padding: 52px 0 38px; }
  .entry{ grid-template-columns: 1fr; gap: 6px; }
  .entry-name{ font-size: 1.22rem; }
  .sec{ padding: 40px 0; }
  .mark-sub{ margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; } }