/* Тема «Кибер»: тёмный фон, бирюзовый акцент, каркасный город.
   Переопределяет переменные и добавляет эффекты поверх base.css. */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Tektur:wght@500;600;700&display=swap");

:root {
  --bg: #05090b;
  --fg: #d6f3ef;
  --muted: #a9d6d0;
  --accent: #2ee6d6;
  --accent-fg: #04201d;
  --surface: #0a1a1c;
  --border: rgba(46, 230, 214, 0.32);
  --radius: 0px;
  --maxw: 1160px;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Tektur", "Golos Text", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  background: radial-gradient(640px 460px at 76% 8%, rgba(46, 230, 214, 0.13), transparent 70%), var(--bg);
  background-repeat: no-repeat;
}

h1, h2, h3, .brand { font-family: var(--font-display); }
h1 { font-weight: 600; color: var(--accent); letter-spacing: -0.01em; line-height: 1.02; overflow-wrap: break-word; }
h2 { font-weight: 600; color: #e5faf7; }
h3 { color: var(--accent); font-weight: 600; }
.brand { color: #e5faf7; display: inline-flex; align-items: center; gap: 12px; }
.brand::before {
  content: "";
  width: 30px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%232EE6D6' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M15 3l11 6v12l-11 6-11-6V9z'/%3E%3Cpath d='M15 3v12m0 0l11-6M15 15L4 9'/%3E%3C/svg%3E") center/contain no-repeat;
}

a { color: var(--accent); }
.lead { color: var(--muted); }
.eyebrow { font-family: var(--font-mono); font-size: 14px; color: #6fc5bc; margin: 0 0 20px; }

/* Шапка */
.site-header { border-bottom: 1px solid rgba(46, 230, 214, 0.18); }
.nav a { color: #9cc6c0; font-weight: 500; transition: color 160ms ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }

/* Кнопки */
.btn {
  border-radius: 999px;
  border-color: var(--accent);
  font-weight: 700;
  transition: transform 160ms var(--ease), box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--ghost { color: var(--accent); }

/* Секции */
.section--alt { background: rgba(10, 26, 28, 0.55); }
.site-footer { border-top-color: rgba(46, 230, 214, 0.18); color: #6fc5bc; font-family: var(--font-mono); font-size: 14px; }

/* Первый экран */
.hero__grid { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.hero__text { flex: 1 1 440px; }
.hero__text h1 { font-size: clamp(38px, 6.2vw, 80px); }
.hero__art { flex: 1 1 440px; position: relative; overflow: hidden; }
.city { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 8px rgba(46, 230, 214, 0.4)); }
.bd {
  fill: #05090b;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trace 1500ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 200ms);
}
.scan {
  position: absolute; left: 0; right: 0; top: 0; height: 90px;
  background: linear-gradient(to bottom, transparent, rgba(46, 230, 214, 0.16) 85%, rgba(46, 230, 214, 0.55) 100%);
  border-bottom: 1px solid rgba(46, 230, 214, 0.7);
  animation: scan 6s linear infinite;
  pointer-events: none;
}
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes scan { from { transform: translateY(-90px); } to { transform: translateY(420px); } }

/* Карточки с угловыми скобками */
.card {
  position: relative;
  background: rgba(10, 26, 28, 0.65);
  border-color: rgba(46, 230, 214, 0.32);
  transition: border-color 200ms ease, transform 200ms var(--ease), box-shadow 200ms ease;
}
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--accent);
  transition: width 220ms var(--ease), height 220ms var(--ease);
  pointer-events: none;
}
.card::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.card::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.card--cta { background: transparent; }
.card__meta { font-family: var(--font-mono); color: #6fc5bc; }
.card__action a { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 2px no-repeat; padding-bottom: 2px; transition: background-size 240ms var(--ease); }
.chip { border-color: rgba(46, 230, 214, 0.4); color: #6fc5bc; font-family: var(--font-mono); }
.steps li::marker { color: var(--accent); font-family: var(--font-mono); }
.steps strong { color: #e5faf7; }

/* Вкладки */
.tabs { border-bottom-color: rgba(46, 230, 214, 0.25); }
.tab { color: #9cc6c0; font-family: var(--font-display); transition: color 160ms ease; }
.tab:hover { color: var(--accent); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab__count { color: #6fc5bc; font-family: var(--font-mono); }
.empty { border-color: rgba(46, 230, 214, 0.32); color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 0 24px rgba(46, 230, 214, 0.2); }
  .card:hover::before, .card:hover::after { width: 28px; height: 28px; }
  .card:hover .card__action a { background-size: 100% 2px; }
  .btn:hover { box-shadow: 0 0 22px rgba(46, 230, 214, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .bd { animation: none; stroke-dashoffset: 0; }
  .scan { display: none; }
  .card, .card::before, .card::after, .btn, .card__action a, .tab, .nav a { transition: none; }
}