/* ============================================================
   RunOrJog — CYBERPUNK THEME (gated on html[data-theme="cyber"])
   Angular cut-corner panels, HUD corner ticks, scanlines, glitch
   headings, terminal section labels. Additive & fully reversible
   — flip the Tweaks "Тема" control back to Неон to remove it all.
   ============================================================ */

html[data-theme="cyber"] {
  --bg: #05060d;
  --stroke: color-mix(in srgb, var(--cyan) 22%, transparent);
  --stroke-2: color-mix(in srgb, var(--cyan) 42%, transparent);
}

/* ── global CRT scanline + grain veil ── */
.cyber-veil { display: none; }
html[data-theme="cyber"] .cyber-veil {
  display: block; position: fixed; inset: 0; z-index: 2147483640; pointer-events: none;
  mix-blend-mode: overlay; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.5) 2px 3px);
  animation: cyber-scan 7s linear infinite;
}
@keyframes cyber-scan { 0% { background-position: 0 0; } 100% { background-position: 0 600px; } }
html[data-theme="cyber"] .cyber-veil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%);
}

/* ── angular panels: cut corners instead of rounded ── */
html[data-theme="cyber"] .feature,
html[data-theme="cyber"] .bento-card,
html[data-theme="cyber"] .tier,
html[data-theme="cyber"] .calc,
html[data-theme="cyber"] .trust-card,
html[data-theme="cyber"] .step,
html[data-theme="cyber"] .stats .container,
html[data-theme="cyber"] .demo-wrap,
html[data-theme="cyber"] .video-frame,
html[data-theme="cyber"] .faq-item {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  border-color: var(--stroke-2);
}

/* HUD corner ticks on feature/trust/tier cards */
html[data-theme="cyber"] .feature,
html[data-theme="cyber"] .trust-card,
html[data-theme="cyber"] .tier { position: relative; }
html[data-theme="cyber"] .feature::before,
html[data-theme="cyber"] .trust-card::after,
html[data-theme="cyber"] .tier::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 14px; height: 14px;
  border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); opacity: .6;
  z-index: 4;
}

/* ── buttons: sharp, bracketed ── */
html[data-theme="cyber"] .btn,
html[data-theme="cyber"] .btn-primary,
html[data-theme="cyber"] .btn-ghost,
html[data-theme="cyber"] .store-btn {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ── nav: terminal status line ── */
html[data-theme="cyber"] .nav.scrolled { background: rgba(4,5,12,.82); }
html[data-theme="cyber"] .brand-word::after {
  content: " ▮"; color: var(--cyan); animation: cyber-blink 1.1s steps(1) infinite;
}
@keyframes cyber-blink { 50% { opacity: 0; } }

/* ── pricing featured: skip the lift, use a scan frame ── */
html[data-theme="cyber"] .tier.featured { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="cyber"] .cyber-veil,
  html[data-theme="cyber"] .hero h1,
  html[data-theme="cyber"] .brand-word::after { animation: none; }
}

/* ── terminal-style section titles: "// LABEL" prefix + glitch ── */
html[data-theme="cyber"] .section-title { position: relative; }
html[data-theme="cyber"] .section-title::before {
  content: "// "; color: var(--cyan); font-family: var(--font-mono, monospace);
  font-weight: 700; -webkit-text-fill-color: var(--cyan); opacity: .85;
}
/* glitch the hero headline — chromatic aberration on the real (multilingual) text */
html[data-theme="cyber"] .hero h1 {
  position: relative;
  animation: hero-aberr 5s steps(1) infinite;
}
@keyframes hero-aberr {
  0%, 88%, 100% { text-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 30%, transparent); }
  89% { text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); }
  91% { text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan); transform: translateX(1px); }
  93% { text-shadow: -2px 0 var(--pink), 2px 0 var(--cyan); transform: translateX(-1px); }
  95% { text-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 30%, transparent); transform: none; }
}

/* ── perspective neon grid floor under the hero ── */
html[data-theme="cyber"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cyan) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 40%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
  mask: linear-gradient(transparent, #000 70%); -webkit-mask: linear-gradient(transparent, #000 70%);
  opacity: .35;
}

/* ── demo HUD reads like a console ── */
html[data-theme="cyber"] .demo-hud .ds-l::before { content: "› "; color: var(--cyan); }
html[data-theme="cyber"] .eyebrow[class*="eb-v"] { letter-spacing: .2em; }

/* glow boost on accent text */
html[data-theme="cyber"] .stat .n,
html[data-theme="cyber"] .demo-stat .ds-n { text-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 65%, transparent); }