:root{
  --bg: #000000;
  --card: #0a0a0a;
  --muted: #9ca3af;
  --text: #f5f5f5;
  --brand: #00e5ff;
  --brand-2: #0077ff;
  --shadow: 0 6px 20px rgba(0,0,0,.8);
  --radius: 14px;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 Inter,system-ui;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{position:sticky;top:0;background:#000;border-bottom:1px solid #111;z-index:10}
.nav-inner{display:flex;justify-content:space-between;align-items:center}
.navlinks{display:flex;gap:14px}
.navlinks a{padding:10px 14px;border-radius:8px;background:#111;color:var(--text)}
.navlinks a.active,.navlinks a:hover{background:#1a1a1a}
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #222;padding:10px;text-align:left}
.btn{padding:8px 14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;border-radius:8px;color:#000;font-weight:600;cursor:pointer}
.btn:hover{opacity:.9}
.section-title{font-size:20px;margin-bottom:10px;font-weight:700}
.footer{padding:20px 0;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid #111;margin-top:30px}
.card img {
  display: block;        /* робить картинку блочним елементом */
  margin: 0 auto;        /* автоматичні відступи зліва і справа */
  max-width: 100%;       /* щоб не вилізала за межі контейнера */
  height: auto;          /* зберігає пропорції */
}

.images-row {
  display: flex;              /* ставить елементи в ряд */
  justify-content: center;    /* вирівнює по центру */
  gap: 30px;                  /* відстань між картинками (можеш поставити 50px = ~2см) */
  margin: 20px 0;             /* відступ зверху і знизу */
}

.images-row img {
  max-width: 45%;   /* щоб вони не були завеликі */
  height: auto;
  border-radius: 8px; /* красиво закруглені кути (не обов'язково) */
}

.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.6); 
}

.modal-content {
  background: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}
.modal-content {
  color: #000; /* робить увесь текст чорним */
}