/* BOSS NINJA STUDIO — styles.css (dark, compact) */
/* Исправлены только кнопки: коралловый цвет и центрирование/перенос как на oftalmolog-online.ru */

/* === Тема и токены === */
:root{
  --bg:#121212;
  --surface:#1e1e1e;
  --surface-2:#232323;
  --surface-3:#2a2a2a;
  --text:#e7eaee;
  --muted:#99a4ac;
  --brand:#2c3e50;
  --brand-2:#34495e;
  --accent:#bfe0ff;
  --divider:#2b2b2b;
  --radius:10px;
  --radius-lg:12px;
  --space:16px;
  --shadow:0 0 6px rgba(255,255,255,.05);
  --shadow-lg:0 8px 22px rgba(0,0,0,.35);
  --trans-fast:.08s;
  --trans:.2s;

  /* Кнопки: коралловая палитра + параметры */
  --coral:#FF6F61;
  --coral-2:#e85b50;
  --coral-text:#ffffff;
  --btn-width:320px;      /* одинаковая ширина на широких экранах */
  --btn-min-h:44px;
  --btn-pad-y:12px;
  --btn-pad-x:16px;
  --btn-gap:12px;
}

/* === База/типографика === */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; padding:0;
  font-family: Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ color:var(--muted); font-weight:600; margin:0 0 .6rem }
p{ margin:0 0 .6rem }
strong{ color:var(--muted); font-weight:700 }
a{
  color:var(--accent); text-decoration:none;
  transition:color var(--trans) ease;
}
a:hover, a:focus-visible{ color:#fff; outline:none }
:focus-visible{ outline:2px solid #6aa8ff; outline-offset:2px }

/* === Шапка === */
header{
  background:var(--surface);
  padding:16px 0 6px;
  margin:0 0 20px;
  box-shadow:0 8px 4px rgba(0,0,0,.1);
}
.header-flex-container{
  width:100%; max-width:800px;
  margin:0 auto 16px; padding:0 var(--space);
}
.header-container{
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
}
.header-container .image-container{ width:48px; height:48px; flex:0 0 48px }
.header-container .image-container img{
  width:100%; height:100%; display:block; border-radius:50%; object-fit:cover
}
.header-container .text-container{
  display:flex; flex-direction:column; flex:1 1 auto; min-width:0; margin:10px 0
}
.header-title{ font-size:24px; line-height:1.2; color:#c7d1d8 }
.header-subtitle{ font-size:16px; line-height:1.35; color:#9fb0ba }

/* === Секции === */
main{ padding:10px 12px }
section{
  width:100%; max-width:800px; margin:0 auto 28px;
  background:var(--surface);
  padding:26px 24px;
  border-radius:var(--radius);
  border:1px solid var(--divider);
  box-shadow:var(--shadow);
}
.section-header{
  background:var(--brand); color:#fff;
  padding:18px 25px;
  margin:-6px -24px 20px -24px; /* ровное совпадение по ширине */
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow);
}
.section-header-left-text{ font-size:22px; line-height:1.35; font-weight:600 }

/* === Видео === */
.video-container{
  position:relative; width:100%; padding-bottom:56.25%;
  border-radius:var(--radius); background:var(--surface-3);
  box-shadow:var(--shadow); overflow:hidden; margin:24px 0 12px;
}
.video-container iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* === Кнопки (исправлено) === */
.button-container{
  display:flex;                 /* центрируем как на oftalmolog-online.ru */
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;               /* перенос при нехватке места */
  gap:var(--btn-gap);
  margin:18px 0 8px;
  width:100%;
}
.link-button,
.round-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--btn-width);       /* одинаковая ширина */
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  white-space:nowrap;
  text-align:center;
  background:var(--coral);
  color:var(--coral-text);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:background var(--trans) ease, transform var(--trans-fast) ease, box-shadow var(--trans) ease;
}
.link-button:hover, .round-button:hover,
.link-button:focus-visible, .round-button:focus-visible{
  background:var(--coral-2);
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}

/* === Карточки статей === */
.article{
  cursor:pointer; margin:0 0 16px; padding:12px 16px;
  background:var(--surface-3); border:1px solid var(--divider);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform var(--trans-fast) ease, box-shadow var(--trans) ease, border-color var(--trans) ease;
}
.article:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#3a3a3a }
.article h4{ color:#c7d1d8; margin:0 0 6px; font-weight:600 }
.article p{ color:#aab8c2; margin:0; word-break:break-word }

/* === Изображения в блоках === */
.image-box{
  margin:14px 0 22px;
  background:var(--surface-3);
  border:1px solid var(--divider);
  border-radius:var(--radius);
  padding:0; box-shadow:var(--shadow);
}
.image-box img{
  display:block; width:calc(100% - 8px);
  margin:4px; /* равные отступы сверху/снизу и по бокам */
  height:auto; border-radius:var(--radius-lg); object-fit:cover;
}

/* === Сетка приложений/игр === */
.apps{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin:8px 0 6px;
}
.app{
  cursor:pointer; width:118px; min-height:160px; text-align:center;
  background:var(--surface-2); border:1px solid var(--divider);
  border-radius:var(--radius); padding:8px 8px 10px;
  box-shadow:var(--shadow);
  transition:transform var(--trans-fast) ease, box-shadow var(--trans) ease, border-color var(--trans) ease;
}
.app:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#3a3a3a }
.app img{
  width:78px; height:78px; margin:6px auto; display:block;
  border-radius:10px; object-fit:cover; box-shadow:0 0 10px rgba(0,0,0,.25);
}
.app h4{ color:#cfdae1; font-size:14px; margin:2px 0 0; font-weight:600 }
.app p{ color:#9fb0ba; font-size:12px; margin:4px 0 0 }

/* === Таблицы === */
table{ width:100%; border-collapse:collapse }
th,td{ border:1px solid var(--divider); padding:10px; text-align:center; vertical-align:middle }
th{ background:var(--surface-3); color:#d7e1e8; font-weight:600 }
td{ color:#b8c4cc }
table a{ color:#cfe6ff }
table a:hover{ color:#fff }

/* === Навигация/футер === */
nav{ color:var(--muted); text-align:center; margin:20px 0 0 }
nav ul{ list-style:none; margin:0; padding:0 }
nav li{ display:inline-block; margin:0 10px 8px }
footer{
  background:var(--brand); color:#fff;
  padding:18px; text-align:center;
  border-top:1px solid rgba(255,255,255,.05);
}

/* === Контакты === */
#contacts p{ margin:0 }
#contacts .section-header{ margin-bottom:16px }
#contacts .row{ display:flex; flex-direction:row }
#contacts .label{ flex:1; padding-right:12px; color:#9fb0ba }
#contacts .value{ flex:2; padding-left:12px }
#contacts a{
  color:#e6f4ff; font-weight:600; text-decoration:none;
  border-bottom:1px dashed rgba(230,244,255,.25);
}
#contacts a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.5) }
#contacts a[href^="tel:"]{ color:#b8ffec }
#contacts a[href^="tel:"]:hover{ color:#eafff8 }

/* === Код/преформат === */
pre, code, kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
pre{
  background:var(--surface-3); color:#d2b48c;
  padding:12px 14px; border-radius:8px;
  border:1px solid var(--divider); overflow:auto; box-shadow:var(--shadow);
}
code{ color:#e9f0ff }
kbd{
  display:inline-block; background:#263747; color:#e9f0ff;
  padding:3px 8px; border-radius:6px;
  border:1px solid rgba(255,255,255,.12); line-height:1.45; margin:3px 0;
}

/* === Сравнение (чипы вместо таблицы) === */
.compare-legend{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px }
.feature-compare{ display:flex; flex-direction:column; gap:10px }
.feature-row{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px; background:var(--surface-3);
  border:1px solid var(--divider); border-radius:var(--radius); box-shadow:var(--shadow);
}
.feature-title{ font-weight:600; color:#d7e1e8 }
.feature-support{ display:flex; flex-wrap:wrap; gap:8px }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; white-space:nowrap; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); background:var(--surface-2); color:#cfe6ff;
  font-size:13px; line-height:1;
}
.badge.product{ opacity:.9 }
.badge.autocoder{ background:#213246; border-color:#2d4764 }
.badge.canvas{ background:#2b2b2b; border-color:#3a3a3a }
.badge.copilot{ background:#202f2f; border-color:#2f4949 }
.badge.giga{ background:#2e2638; border-color:#433358 }
.badge.ok.autocoder{ background:#274762; border-color:#396183 }
.badge.ok.canvas{ background:#343434; border-color:#4a4a4a }
.badge.ok.copilot{ background:#274242; border-color:#3f6666 }
.badge.ok.giga{ background:#3a2e4b; border-color:#54416d }

/* === Медиа === */
@media (max-width:640px){
  .header-flex-container{ padding:0 14px }
  .header-container{ gap:10px }
  .header-container .image-container{ width:40px; height:40px; flex-basis:40px }
  .header-title{ font-size:18px }
  .header-subtitle{ font-size:14px }

  section{ padding:18px 14px }
  .section-header{ padding:14px 18px; margin:-6px -14px 14px -14px } /* подгонка по бордеру */
  .section-header-left-text{ font-size:18px }

  .image-box img{ width:calc(100% - 8px); margin:4px; border-radius:10px }

  .apps{ gap:12px }
  .app{ width:46%; min-width:140px }
  .app img{ width:82px; height:82px }

  #contacts .row{ flex-direction:column }
  #contacts .label, #contacts .value{ padding:0 }

  .feature-row{ padding:10px }
  .badge{ font-size:12px; padding:6px 9px }

  /* Кнопки: в столбик и по центру */
  .button-container{ justify-content:center }
  .link-button, .round-button{ width:100% }
}
@media (max-width:420px){
  .app{ width:100% }
}

/* === Доступность анимаций === */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
}