/* ============================================================
   ВуВу · ТЕМА «Кибер» (тест) — тёмный неон, киберпанк-карточки
   Акцент на карточках: срезанные HUD-углы, неон-рамка + свечение,
   сканлайны, RGB-глитч заголовка, мерцание номера, курсор-подсветка.
   Активна при html[data-theme="cyber"]. Базу не трогает.
   ============================================================ */

:root[data-theme="cyber"]{
  --bg:#070912;
  --bg-2:#0a0d18;
  --surface:#0d1122;
  --surface-2:#0b0f1e;
  --line:rgba(0,240,255,.20);
  --line-soft:rgba(0,240,255,.10);
  --ink:#e9f6ff;
  --ink-2:#b9c9e6;
  --muted:#7f8db4;
  --dim:#5b688c;
  --accent:#00f0ff;         /* неон-циан */
  --accent-press:#5df6ff;
  --accent-soft:rgba(0,240,255,.14);
  --on-accent:#04121a;
  --mag:#ff2bd6;            /* неон-маджента (для глитча) */
  --panel:#080b16;         /* тёмные «панели»: cta, hscroll, штора, cookie */
  --shadow-sm:none; --shadow:none; --shadow-lg:none;
  --r-sm:2px; --r:3px; --r-lg:3px;
}

/* Холст с тонкой техно-сеткой */
[data-theme="cyber"] body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(0,240,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,240,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
}
[data-theme="cyber"] .section--alt{background:var(--bg-2)}

/* Заголовки/кикеры — неон */
[data-theme="cyber"] .kicker{color:var(--accent);text-shadow:0 0 10px rgba(0,240,255,.5)}
[data-theme="cyber"] .num-tag{color:var(--accent);text-shadow:0 0 8px rgba(0,240,255,.7)}
[data-theme="cyber"] h1,[data-theme="cyber"] h2,[data-theme="cyber"] h3{letter-spacing:-.02em}

/* Кнопки — неон со срезом и свечением */
[data-theme="cyber"] .btn{border-radius:2px}
[data-theme="cyber"] .btn--primary{background:var(--accent);color:var(--on-accent);font-weight:700;box-shadow:none;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
[data-theme="cyber"] .btn--primary:hover{background:var(--accent-press);
  filter:drop-shadow(0 0 10px rgba(0,240,255,.7))}
[data-theme="cyber"] .btn--ghost{border-color:var(--accent);color:var(--accent)}
[data-theme="cyber"] .btn--ghost:hover{background:rgba(0,240,255,.08);color:#fff}

/* ---------- КИБЕРПАНК-КАРТОЧКИ ---------- */
[data-theme="cyber"] .svc-card,[data-theme="cyber"] .info-card{
  background:linear-gradient(160deg,var(--surface),#0a0e1c);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  transition:transform .28s var(--ease),border-color .28s,filter .28s}
/* сканлайны */
[data-theme="cyber"] .svc-card::before,[data-theme="cyber"] .info-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,240,255,.045) 3px 4px);
  display:block}
/* курсор-подсветка (циан) поверх */
[data-theme="cyber"] .svc-card::after{
  background:radial-gradient(260px 220px at var(--mx) var(--my),rgba(0,240,255,.18),transparent 60%);
  opacity:0;transition:opacity .3s;z-index:0}
[data-theme="cyber"] .svc-card:hover::after{opacity:1}
[data-theme="cyber"] .svc-card > *,[data-theme="cyber"] .info-card > *,
[data-theme="cyber"] .svc-card h3,[data-theme="cyber"] .svc-card p,
[data-theme="cyber"] .svc-card__top,[data-theme="cyber"] .svc-card__more{position:relative;z-index:2}
/* ховер: неон-рамка + свечение по форме среза (drop-shadow, не box-shadow) */
[data-theme="cyber"] .svc-card:hover,[data-theme="cyber"] .info-card:hover{
  transform:translateY(-5px);border-color:var(--accent);
  filter:drop-shadow(0 0 16px rgba(0,240,255,.5))}
/* HUD-уголок (яркая метка среза) */
[data-theme="cyber"] .svc-card{background-image:linear-gradient(160deg,var(--surface),#0a0e1c),
  linear-gradient(225deg,var(--accent) 0 22px,transparent 22px);
  background-position:0 0,100% 0;background-repeat:no-repeat;background-size:100% 100%,22px 22px}
/* RGB-глитч заголовка на ховер */
[data-theme="cyber"] .svc-card:hover h3{animation:cyberGlitch .45s steps(2,end) 2}
@keyframes cyberGlitch{
  0%{text-shadow:2px 0 var(--mag),-2px 0 var(--accent);transform:translate(0,0)}
  20%{text-shadow:-2px 0 var(--mag),2px 0 var(--accent);transform:translate(1px,-1px)}
  40%{text-shadow:2px 0 var(--accent),-2px 0 var(--mag);transform:translate(-1px,1px)}
  60%{text-shadow:-1px 0 var(--mag),1px 0 var(--accent);transform:translate(1px,0)}
  80%{text-shadow:1px 0 var(--accent),-1px 0 var(--mag);transform:translate(0,1px)}
  100%{text-shadow:none;transform:none}}
/* мерцание номера при ховере */
[data-theme="cyber"] .svc-card:hover .num-tag,[data-theme="cyber"] .svc-card:hover .svc-card__label{
  animation:cyberFlicker 1.3s steps(1,end) infinite}
@keyframes cyberFlicker{0%,88%,100%{opacity:1}90%{opacity:.35}92%{opacity:1}95%{opacity:.55}96%{opacity:1}}
[data-theme="cyber"] .svc-card__label{color:var(--accent);text-shadow:0 0 8px rgba(0,240,255,.6)}
[data-theme="cyber"] .info-card:hover{border-color:var(--accent)}

/* Прочее: пилюли/теги, callout */
[data-theme="cyber"] .tag{background:rgba(0,240,255,.06);border-color:var(--line)}
[data-theme="cyber"] .tag:hover{border-color:var(--accent);color:#fff}
[data-theme="cyber"] .callout{background:rgba(0,240,255,.07);border-color:var(--line);color:var(--ink-2)}
[data-theme="cyber"] .prose a,[data-theme="cyber"] .crumbs a:hover,[data-theme="cyber"] .svc-card__more{color:var(--accent)}

/* Тёмные панели (в базе фон = var(--ink), в кибере ink светлый → делаем тёмным) */
[data-theme="cyber"] .cta,[data-theme="cyber"] .hscroll,
[data-theme="cyber"] .page-curtain,[data-theme="cyber"] .cookie{background:var(--panel)}
[data-theme="cyber"] .cta{border:1px solid var(--line)}
[data-theme="cyber"] .hstep{background:rgba(0,240,255,.04);border-color:var(--line);border-radius:2px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
[data-theme="cyber"] .hstep__n{color:var(--accent);text-shadow:0 0 8px rgba(0,240,255,.6)}
[data-theme="cyber"] .hstep__big{color:rgba(0,240,255,.10)}

/* Неон-полоски прогресса */
[data-theme="cyber"] .scroll-progress,[data-theme="cyber"] .hscroll__bar i{
  background:linear-gradient(90deg,var(--accent),var(--mag))}
[data-theme="cyber"] .hscroll__head .kicker{color:var(--accent)}

/* Hero-свечения → циан/маджента */
[data-theme="cyber"] .hero__glow--1{background:radial-gradient(circle,rgba(0,240,255,.20),transparent 68%)}
[data-theme="cyber"] .hero__glow--2{background:radial-gradient(circle,rgba(255,43,214,.16),transparent 68%)}

/* Бренд-дот, чекбокс, фокус полей */
[data-theme="cyber"] .brand__dot{background:var(--accent);box-shadow:0 0 12px rgba(0,240,255,.8)}
[data-theme="cyber"] .consent input{accent-color:var(--accent)}
[data-theme="cyber"] .field input:focus,[data-theme="cyber"] .field textarea:focus{border-color:var(--accent)}
[data-theme="cyber"] .marquee__item::after{background:var(--accent);box-shadow:0 0 8px rgba(0,240,255,.7)}