/* Futuristic skin. Same layout and logo, electric trim on the ink base. */

html[data-theme="cyberpunk"] {
  --ink: #07060d;
  --ink-2: #120816;
  --ink-3: #1c0c28;
  --line: #3a1458;
  --line-2: #6a2494;
  --blue: #22e7ff;
  --blue-soft: #b8fbff;
  --heat: #ff2bd6;
  --mint: #3dffb0;
  --paper: #f4f1ff;
  --txt: #f8f5ff;
  --txt-2: #d5c6ef;
  --txt-3: #b198d0;
  --txt-4: #7d659c;
  color-scheme: dark;
}
html[data-theme="cyberpunk"] body {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(255, 43, 214, .18), transparent 60%),
    radial-gradient(780px 460px at -10% 16%, rgba(34, 231, 255, .12), transparent 55%),
    var(--ink);
}
html[data-theme="cyberpunk"] .site-header {
  background: rgba(7, 6, 13, .8);
  border-bottom-color: rgba(34, 231, 255, .45);
  box-shadow: 0 0 24px rgba(34, 231, 255, .12);
}
html[data-theme="cyberpunk"] .hero::before {
  background:
    radial-gradient(720px 420px at 12% 80%, rgba(255, 43, 214, .22), transparent 64%),
    radial-gradient(860px 480px at 90% 0%, rgba(34, 231, 255, .18), transparent 62%);
}
html[data-theme="cyberpunk"] #nexum-outline feFlood {
  flood-color: #22e7ff;
}
html[data-theme="cyberpunk"] .hero h1 .out { color: #22e7ff; }
html[data-theme="cyberpunk"] .sec-head em,
html[data-theme="cyberpunk"] .kick {
  color: var(--blue);
  text-shadow: 0 0 18px rgba(34, 231, 255, .35);
}
html[data-theme="cyberpunk"] .btn-heat {
  box-shadow: 0 0 22px rgba(255, 43, 214, .45);
}
html[data-theme="cyberpunk"] .marquee {
  background:
    radial-gradient(680px 120px at 50% 0%, rgba(255, 43, 214, .28), transparent 72%),
    var(--ink);
}
html[data-theme="cyberpunk"] .marquee a::after {
  background: var(--heat);
  box-shadow: 0 0 12px var(--heat);
}
html[data-theme="cyberpunk"] .cta-band {
  background-color: #07060d;
}
html[data-theme="cyberpunk"] .cta-photo-present { display: none; }
html[data-theme="cyberpunk"] .cta-photo-future { display: block; }
html[data-theme="cyberpunk"] .cta-band::after {
  background: linear-gradient(90deg, rgba(7, 6, 13, .72) 0%, rgba(7, 6, 13, .18) 42%, rgba(7, 6, 13, 0) 100%);
}
html[data-theme="cyberpunk"] .theme-switch:hover,
html[data-theme="cyberpunk"] .lang-btn:hover {
  border-color: var(--blue);
  box-shadow: 0 0 14px rgba(34, 231, 255, .35);
}
html[data-theme="cyberpunk"] .num.hot b,
html[data-theme="cyberpunk"] .step::before,
html[data-theme="cyberpunk"] .piece-body .idx {
  text-shadow: 0 0 18px rgba(255, 43, 214, .35);
}