/* KiberS — SOC / tactical dashboard layer (Bootstrap 5.3) · ref: premium ops UI */

:root {
  --ks-black: #0b1016;
  --ks-graphite: #0e141c;
  --ks-panel: #0f161c;
  --ks-panel-2: #121a24;
  --ks-ink: #0d1219;
  --ks-line: #1a222d;
  --ks-line-strong: #243044;
  --ks-text: #e8e8e8;
  --ks-muted: #8b9aab;
  --ks-dim: #5c6b7a;
  --ks-ui-teal: #2dd4bf;
  --ks-ui-teal-dim: #209688;
  --ks-ui-teal-rgb: 45, 212, 191;
  --ks-matrix: #2dd4bf;
  --ks-matrix-dim: #209688;
  --ks-matrix-rgb: 45, 212, 191;
  --ks-brand-lime: #32ff7e;
  --ks-brand-lime-rgb: 50, 255, 126;
  --ks-cyan: #5eead4;
  --ks-cyan-rgb: 94, 234, 212;
  --ks-blue: #38bdf8;
  --ks-lime: #a2ff00;
  --ks-danger: #f87171;
  --ks-font-sans: "DM Sans", system-ui, sans-serif;
  --ks-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ks-font-display: "Space Grotesk", system-ui, sans-serif;
  --ks-radius: 16px;
  --ks-radius-lg: 22px;
  --ks-radius-xl: 28px;
  --ks-radius-pill: 999px;
  --ks-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --ks-glow: 0 0 40px rgb(var(--ks-ui-teal-rgb) / 0.08);
  /* Единая сетка: desktop достаточно ширины для однострочного меню */
  --ks-container-max: 1680px;
  --ks-container-gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Вертикальный ритм секций (~48–72px): плотнее лендинга, ближе к dashboard */
  --ks-section-y: clamp(1.85rem, 2.6vw, 3.75rem);
  --ks-section-y-sm: clamp(1.35rem, 2vw, 2.5rem);
  /* Arsenal: shared fill/glow for card meters + scale marker (overridden on #arsenal-panel) */
  --ks-arsenal-meter-fill: linear-gradient(
    90deg,
    var(--arsenal-accent, var(--ks-ui-teal)),
    var(--arsenal-accent-soft, var(--ks-brand-lime))
  );
  --ks-arsenal-meter-glow: 0 0 14px rgb(var(--ks-ui-teal-rgb) / 0.22), 0 0 8px rgb(var(--ks-brand-lime-rgb) / 0.12);
  --ks-arsenal-meter-glow-hover: 0 0 18px rgb(var(--ks-ui-teal-rgb) / 0.32), 0 0 10px rgb(var(--ks-brand-lime-rgb) / 0.18);
  /* Единый matrix-hover как CTA hero (#00ff9c, мягкий glow) */
  --ks-cyber: #00ff9c;
  --ks-cyber-rgb: 0, 255, 156;
  --ks-neon-line: rgb(var(--ks-cyber-rgb) / 0.82);
  --ks-neon-line-soft: rgb(var(--ks-cyber-rgb) / 0.4);
  --ks-neon-line-faint: rgb(var(--ks-cyber-rgb) / 0.14);
  --ks-neon-fill: rgb(var(--ks-cyber-rgb) / 0.055);
  --ks-neon-fill-hover: rgb(var(--ks-cyber-rgb) / 0.065);
  /* фокус / неактивный hover — мягче */
  --ks-neon-glow:
    0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.28),
    0 0 8px rgb(var(--ks-cyber-rgb) / 0.2),
    0 0 18px rgb(var(--ks-cyber-rgb) / 0.1);
  /* hover по невыбранным chips / ghost / tabs */
  --ks-neon-glow-strong:
    0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.4),
    0 0 10px rgb(var(--ks-cyber-rgb) / 0.26),
    0 0 22px rgb(var(--ks-cyber-rgb) / 0.13);
  /* выбранный tab/chip — чуть ярче обычного hover */
  --ks-neon-glow-active:
    0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.52),
    0 0 12px rgb(var(--ks-cyber-rgb) / 0.3),
    0 0 26px rgb(var(--ks-cyber-rgb) / 0.16);
  /* выбранный + hover */
  --ks-neon-glow-active-hover:
    0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.62),
    0 0 14px rgb(var(--ks-cyber-rgb) / 0.34),
    0 0 30px rgb(var(--ks-cyber-rgb) / 0.19);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--ks-black);
  --bs-body-color: var(--ks-text);
  --bs-secondary-color: var(--ks-muted);
  --bs-tertiary-bg: rgb(var(--ks-ui-teal-rgb) / 0.03);
  --bs-secondary-bg: rgba(255, 255, 255, 0.03);
  --bs-border-color: var(--ks-line);
  --bs-card-bg: var(--ks-panel);
  --bs-card-border-color: var(--ks-line);
  --bs-primary: var(--ks-ui-teal);
  --bs-primary-rgb: 45, 212, 191;
  --bs-link-color: var(--ks-cyan);
  --bs-link-hover-color: var(--ks-brand-lime);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  background: var(--ks-black);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: var(--ks-font-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ks-text);
  background-color: var(--ks-black);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgb(var(--ks-ui-teal-rgb) / 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(15, 22, 30, 0.9) 0%, transparent 50%),
    linear-gradient(180deg, #080c12 0%, var(--ks-black) 45%, #070a0f 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 25%, #000 15%, transparent 72%);
  opacity: 0.35;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
  opacity: 0.15;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

::selection {
  background: rgb(var(--ks-brand-lime-rgb) / 0.22);
  color: #fff;
}

.page-shell.ks-shell {
  position: relative;
  z-index: 1;
  overflow: clip;
}

/* Единый контейнер для header, main, footer внутри `.ks-shell` */
.ks-shell .container {
  width: 100%;
  max-width: var(--ks-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ks-container-gutter);
  padding-right: var(--ks-container-gutter);
}

img {
  display: block;
  max-width: 100%;
}

/* —— Mono / labels —— */
.ks-mono {
  font-family: var(--ks-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

.ks-mono--dim {
  color: var(--ks-dim);
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    opacity: 0;
  }
}

/* —— Skip —— */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 2000;
  padding: 0.65rem 1rem;
  border-radius: var(--ks-radius-pill);
  background: linear-gradient(135deg, var(--ks-ui-teal-dim), var(--ks-ui-teal));
  color: #041016;
  box-shadow: 0 4px 20px rgb(var(--ks-ui-teal-rgb) / 0.25);
  font-family: var(--ks-font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

/* —— Header —— */
.ks-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--ks-line);
  background: rgba(11, 16, 22, 0.92);
  backdrop-filter: blur(14px) saturate(1.1);
}

.ks-header__gridline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--ks-ui-teal-rgb) / 0.35), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.ks-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.65rem, 1.5vw, 1.1rem);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  /* До lg тот же ряд: бренд | бургер; collapse ниже — как Bootstrap */
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .ks-navbar .ks-header__inner {
    flex-wrap: nowrap;
    align-items: center;
  }

  .ks-navbar .navbar-brand.ks-brand {
    flex: 0 0 auto;
    max-width: min(42%, 320px);
  }

  .ks-navbar .navbar-toggler {
    display: none !important;
  }

  /* Collapse на desktop — одна линия с брендом, без переноса блока меню */
  .ks-navbar .navbar-collapse.ks-nav-collapse {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
  }

  .ks-navbar .navbar-collapse.ks-nav-collapse .ks-nav {
    margin-left: auto;
    margin-right: 0;
  }
}

.ks-navbar {
  border-bottom: none;
}

.ks-brand__mark {
  display: grid;
  place-items: center;
  padding: 2px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: linear-gradient(145deg, rgb(var(--ks-ui-teal-rgb) / 0.08), transparent);
}

.brand img {
  width: 46px;
  height: 46px;
  border-radius: var(--ks-radius);
  object-fit: contain;
  filter: saturate(0.92) contrast(1.05);
}

.brand-name,
.brand-tag {
  font-family: var(--ks-font-display);
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ks-text);
}

.brand-tag {
  font-family: var(--ks-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--ks-muted);
  margin-top: 0.2rem;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name.ks-brand__name,
  .hero-title-line.ks-display__main {
    background: linear-gradient(100deg, #2dd4bf 0%, #32ff7e 45%, #c8fff0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .hero-title .hero-subtitle {
    background: none !important;
    -webkit-text-fill-color: var(--ks-text) !important;
    color: var(--ks-text) !important;
  }
}

.ks-nav__link {
  font-family: var(--ks-font-mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.028em;
  text-transform: uppercase;
  color: var(--ks-muted) !important;
  border-left: 2px solid transparent;
  padding-left: 0.45rem !important;
  padding-right: 0.45rem !important;
  white-space: nowrap;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.ks-nav__idx {
  display: inline-block;
  min-width: 1.1rem;
  margin-right: 0.2rem;
  color: var(--ks-dim);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav.ks-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.08rem;
  }

  .navbar-expand-lg .ks-nav .ks-nav__link {
    padding-left: 0.52rem !important;
    padding-right: 0.52rem !important;
    font-size: 0.7rem !important;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-nav.ks-nav {
    gap: 0.15rem;
  }

  .navbar-expand-lg .ks-nav .ks-nav__link {
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
    font-size: 0.72rem !important;
  }
}

@media (min-width: 1400px) {
  .navbar-expand-lg .navbar-nav.ks-nav {
    gap: 0.22rem;
  }

  .navbar-expand-lg .ks-nav .ks-nav__link {
    padding-left: 0.72rem !important;
    padding-right: 0.72rem !important;
  }
}

.ks-nav__link:hover {
  color: var(--ks-cyber) !important;
  border-left-color: var(--ks-cyber);
  background: var(--ks-neon-fill-hover);
  box-shadow: inset 3px 0 14px -4px rgb(var(--ks-cyber-rgb) / 0.12);
}

.ks-nav__link:focus-visible:not(:hover) {
  color: var(--ks-cyber) !important;
  border-left-color: var(--ks-neon-line-soft);
  background: var(--ks-neon-fill-hover);
}

.navbar-toggler-icon {
  filter: invert(0.85);
}

.ks-menu-toggle {
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius);
  padding: 0.4rem 0.55rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ks-menu-toggle:hover {
  border-color: var(--ks-cyber) !important;
  box-shadow: var(--ks-neon-glow-strong);
}

.ks-menu-toggle:focus-visible:not(:hover) {
  border-color: var(--ks-neon-line-soft) !important;
  box-shadow: var(--ks-neon-glow);
}

/* —— Panels (cards) —— */
.ks-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ks-radius-xl) !important;
  border: 1px solid var(--ks-line) !important;
  background: linear-gradient(180deg, var(--ks-panel) 0%, var(--ks-ink) 100%) !important;
  box-shadow: var(--ks-shadow), var(--ks-glow);
}

.ks-panel__chrome,
.ks-panel__chrome--sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--ks-line);
  background: rgba(0, 0, 0, 0.35);
}

.ks-panel__chrome--sm {
  padding: 0.35rem 1rem;
}

.ks-panel__id {
  flex: 1 1 auto;
  letter-spacing: 0.16em;
  min-width: 0;
}

.ks-panel__stat {
  flex: 0 0 auto;
  letter-spacing: 0.12em;
  color: var(--ks-cyan);
  white-space: nowrap;
}

.section-shell.hero-shell--terminal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
  border-radius: var(--ks-radius-xl) 0 0 var(--ks-radius-xl);
  background: linear-gradient(180deg, var(--ks-cyan), var(--ks-brand-lime));
  opacity: 0.65;
  pointer-events: none;
}

.hero-shell--terminal.section-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.ks-panel__body,
.ks-panel > .card-body {
  position: relative;
  z-index: 1;
}

.ks-shell .ks-panel > .card-body {
  padding: clamp(1.35rem, 2.8vw, 2rem) clamp(1.15rem, 2.5vw, 1.85rem) !important;
}

@media (min-width: 992px) {
  .ks-shell .ks-panel > .card-body {
    padding: clamp(1.65rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.5rem) !important;
  }
}

@media (min-width: 1400px) {
  .ks-shell .ks-panel > .card-body {
    padding: clamp(2rem, 2.8vw, 2.75rem) clamp(1.85rem, 3vw, 3rem) !important;
  }
}

/* —— Hero —— */
.ks-hero {
  padding: var(--ks-section-y-sm) 0 clamp(1.25rem, 2vw, 2rem);
}

.ks-eyebrow,
.section-badge {
  font-family: var(--ks-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--ks-radius-pill) !important;
  padding: 0.35rem 0.7rem !important;
  border: 1px solid rgb(var(--ks-ui-teal-rgb) / 0.35) !important;
  background: rgb(var(--ks-ui-teal-rgb) / 0.08) !important;
  color: var(--ks-cyan) !important;
  font-weight: 600;
}

.ks-display {
  font-family: var(--ks-font-display);
  letter-spacing: -0.04em;
}

.hero-title-line {
  color: var(--ks-text);
}

/* С той же иерархией, что заголовки секций (.ks-heading), не моноширинный лейбл */
.hero-subtitle.ks-display__sub {
  font-family: var(--ks-font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3 !important;
  color: var(--ks-text);
  max-width: min(100%, 48ch);
}

.ks-prose {
  color: #a8b5ae;
  white-space: pre-line;
}

.ks-prose--tight {
  line-height: 1.65;
}

.ks-prose--small {
  font-size: 0.9rem;
}

.hero-text.ks-prose {
  padding-left: 1rem;
  border-left: 2px solid rgb(var(--ks-ui-teal-rgb) / 0.35);
  max-width: min(100%, 68ch);
  line-height: 1.75;
}

.ks-btn {
  font-family: var(--ks-font-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--ks-radius-pill) !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease,
    filter 0.25s ease;
}

.btn-brand-primary.ks-btn--primary {
  background: linear-gradient(145deg, #14b8a6, #2dd4bf 55%, #5eead4) !important;
  border: 1px solid rgb(var(--ks-ui-teal-rgb) / 0.5) !important;
  color: #031018 !important;
  box-shadow: 0 4px 24px rgb(var(--ks-ui-teal-rgb) / 0.22);
}

.btn-brand-primary.ks-btn--primary:hover {
  filter: brightness(1.06);
  border-color: rgb(var(--ks-cyber-rgb) / 0.5) !important;
  color: #000 !important;
  box-shadow:
    0 6px 26px rgb(var(--ks-ui-teal-rgb) / 0.16),
    var(--ks-neon-glow-strong) !important;
}

.btn-outline-secondary.ks-btn--ghost {
  border: 1px solid var(--ks-line-strong) !important;
  color: var(--ks-text) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.btn-outline-secondary.ks-btn--ghost:hover {
  border-color: var(--ks-cyber) !important;
  color: var(--ks-cyber) !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow-strong) !important;
}

.btn-outline-secondary.ks-btn--ghost:focus-visible:not(:hover) {
  border-color: var(--ks-neon-line-soft) !important;
  color: var(--ks-cyber) !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow) !important;
}

.ks-meta-label {
  font-family: var(--ks-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--ks-muted);
}

.ks-status {
  font-family: var(--ks-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ks-brand-lime) !important;
  border: 1px solid rgb(var(--ks-brand-lime-rgb) / 0.4);
  border-radius: var(--ks-radius-pill) !important;
  padding: 0.25rem 0.55rem !important;
  background: rgb(var(--ks-brand-lime-rgb) / 0.08) !important;
}

.ks-term-lines .list-group-item,
.ks-term-line {
  font-family: var(--ks-font-mono);
  font-size: 0.78rem;
  border-color: var(--ks-line) !important;
  color: #8fa69a !important;
  padding-left: 0.5rem !important;
}

.ks-term-line::before {
  content: "› ";
  color: var(--ks-ui-teal);
  opacity: 0.55;
}

/* Логотип в hero — без отдельной подложки/рамки, только на фоне панели */
.ks-hero-aside {
  padding: clamp(0.75rem, 2.5vw, 1.75rem) clamp(0.5rem, 2vw, 1rem);
}

.ks-hero-logo-ratio {
  max-width: min(100%, 420px);
}

.ks-hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* —— Sections —— */
.content-section {
  padding: var(--ks-section-y) 0;
}

/* Связка блоков: тонкий разделитель + чуть более плотный ритм под заголовок */
main > .content-section {
  border-top: 1px solid rgb(255 255 255 / 0.045);
  background-image: linear-gradient(
    180deg,
    rgb(var(--ks-cyber-rgb) / 0.02) 0,
    transparent 28%
  );
  background-repeat: no-repeat;
  background-size: 100% 120px;
}

.content-section .section-heading-block {
  margin-bottom: 1rem !important;
}

/* Единый «лист» заголовка секции внутри панели (бейдж + h2 + линия) */
.ks-panel .ks-section-head {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ks-line);
}

.ks-prose--lead {
  max-width: min(100%, 68ch);
  font-size: 1.02rem;
  line-height: 1.7;
}

.section-title,
.ks-heading {
  font-family: var(--ks-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ks-text);
}

.ks-heading--h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

/* Domain tiles (секция #domains: карточки CTF / пентест / …) */
.ks-data-tile {
  border-radius: var(--ks-radius-xl) !important;
  border: 1px solid var(--ks-line) !important;
  background: linear-gradient(180deg, rgba(14, 20, 28, 0.96), rgba(10, 14, 18, 0.99)) !important;
  box-shadow: none !important;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Domains: 5 cards in one line on wide screens */
@media (min-width: 1200px) {
  #domains .ks-domains-row {
    --bs-gutter-x: 1rem;
  }

  #domains .ks-domains-col {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

.ks-data-tile:hover {
  border-color: var(--ks-cyber) !important;
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.38),
    var(--ks-neon-glow-strong) !important;
}

.ks-data-tile__idx {
  font-family: var(--ks-font-mono);
  border-radius: var(--ks-radius-pill) !important;
  background: rgb(var(--ks-ui-teal-rgb) / 0.1) !important;
  border: 1px solid rgb(var(--ks-ui-teal-rgb) / 0.28) !important;
  color: var(--ks-cyan) !important;
}

.ks-data-tile__title {
  font-family: var(--ks-font-display);
  font-weight: 600;
}

/* Выше Bootstrap .card.border-0 — рамка и glow гарантированно на карточках экспертизы */
#domains .card.ks-data-tile,
.ks-section--domains .card.ks-data-tile,
#development .card.ks-data-tile,
.ks-section--development .card.ks-data-tile {
  border: 1px solid var(--ks-line) !important;
  box-shadow: none !important;
}

#domains .card.ks-data-tile:hover,
.ks-section--domains .card.ks-data-tile:hover,
#development .card.ks-data-tile:hover,
.ks-section--development .card.ks-data-tile:hover {
  border-color: var(--ks-cyber) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.38),
    var(--ks-neon-glow-strong) !important;
}

/* Development: product preview between title and description */
.ks-dev-media {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(0 0 0 / 0.22);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
}

.ks-dev-media__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  filter: brightness(0.78) saturate(0.9) contrast(1.06);
  transition: transform 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ks-data-tile:hover .ks-dev-media__img {
    transform: scale(1.04);
    filter: brightness(0.86) saturate(0.95) contrast(1.08);
  }
}

/* Фото (#photos) */
.ks-photo-carousel {
  --ks-photo-gap: 1rem;
  --ks-photo-radius: clamp(16px, 2vw, 20px);
  position: relative;
  margin-top: 0.25rem;
  padding: 0 2.35rem 0.25rem;
}

.ks-photo-card {
  margin: 0;
  border-radius: var(--ks-radius-lg);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: var(--ks-black);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.35);
}

.ks-photo-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ks-photo-card__cap {
  font-family: var(--ks-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--ks-muted);
  padding: 0.55rem 0.75rem 0.65rem;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.ks-photo-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pinch-zoom;
  scrollbar-width: none;
  cursor: grab;
  padding: 0.35rem 0 0.5rem;
  margin: 0 -0.25rem;
}

.ks-photo-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.ks-photo-carousel__viewport.ks-photo-carousel__viewport--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.ks-photo-carousel__viewport:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.4);
  outline-offset: 2px;
}

.ks-photo-carousel__track {
  display: flex;
  gap: var(--ks-photo-gap);
  list-style: none;
  margin: 0;
  padding: 0 0.35rem;
}

.ks-photo-carousel__slide {
  flex: 0 0 min(100%, 520px);
  min-width: 0;
  scroll-snap-align: center;
}

@media (min-width: 576px) {
  .ks-photo-carousel__slide {
    flex-basis: calc((100% - var(--ks-photo-gap)) / 2);
  }
}

@media (min-width: 992px) {
  .ks-photo-carousel__slide {
    flex-basis: calc((100% - 2 * var(--ks-photo-gap)) / 3);
  }
}

.ks-photo-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 2.15rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  background: rgb(8 11 16 / 0.88);
  color: var(--ks-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.22s ease,
    opacity 0.2s ease;
}

.ks-photo-carousel__arrow:hover:not(:disabled) {
  border-color: rgb(var(--ks-cyber-rgb) / 0.4);
  color: var(--ks-cyber);
  box-shadow: 0 0 20px rgb(var(--ks-cyber-rgb) / 0.12);
}

.ks-photo-carousel__arrow:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.45);
  outline-offset: 2px;
}

.ks-photo-carousel__arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.ks-photo-carousel__arrow--prev {
  left: 0;
}

.ks-photo-carousel__arrow--next {
  right: 0;
}

.ks-photo-carousel--locked .ks-photo-carousel__arrow {
  visibility: hidden;
  pointer-events: none;
}

.ks-photo-carousel--locked .ks-photo-carousel__dots {
  display: none;
}

.ks-photo-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  width: 100%;
  min-width: 0;
}

.ks-photo-carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ks-photo-carousel__dot:hover {
  background: rgb(var(--ks-cyber-rgb) / 0.45);
}

.ks-photo-carousel__dot.is-active {
  background: var(--ks-cyber);
  box-shadow: 0 0 10px rgb(var(--ks-cyber-rgb) / 0.35);
  transform: scale(1.15);
}

.ks-photo-carousel__dot:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.5);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .ks-photo-carousel {
    padding: 0 2rem;
  }

  .ks-photo-carousel__arrow {
    width: 1.9rem;
    height: 2.5rem;
    font-size: 1.15rem;
  }
}

/* Accordion */
.ks-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--ks-line);
  --bs-accordion-btn-bg: rgba(0, 0, 0, 0.25);
  --bs-accordion-active-bg: rgb(var(--ks-ui-teal-rgb) / 0.06);
  --bs-accordion-active-color: var(--ks-text);
  --bs-accordion-btn-focus-border-color: rgb(var(--ks-ui-teal-rgb) / 0.45);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgb(var(--ks-ui-teal-rgb) / 0.18);
  --bs-accordion-border-radius: var(--ks-radius-lg);
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
}

.ks-accordion__item {
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-lg) !important;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
}

.ks-accordion__btn {
  font-family: var(--ks-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: none !important;
}

.ks-accordion__btn.collapsed {
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--ks-muted) !important;
}

.ks-accordion__n {
  display: inline-block;
  min-width: 2rem;
  margin-right: 0.75rem;
  color: var(--ks-dim);
  font-size: 0.65rem;
}

.ks-accordion__body {
  font-size: 0.95rem;
  color: #9eaea5 !important;
  border-top: 1px solid var(--ks-line);
  background: rgba(0, 0, 0, 0.25);
}

/* —— Showcase «Где мы работаем»: горизонтальный карусель activity —— */
.ks-activity {
  --ks-activity-gap: 1rem;
  --ks-activity-radius: clamp(16px, 2vw, 20px);
  position: relative;
  margin-top: 0.25rem;
  padding: 0 2.35rem 0.25rem;
}

.ks-activity__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pinch-zoom;
  scrollbar-width: none;
  cursor: grab;
  padding: 0.35rem 0 0.5rem;
  margin: 0 -0.25rem;
}

.ks-activity__viewport::-webkit-scrollbar {
  display: none;
}

.ks-activity__viewport.ks-activity__viewport--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.ks-activity__viewport:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.4);
  outline-offset: 2px;
}

.ks-activity__track {
  display: flex;
  gap: var(--ks-activity-gap);
  list-style: none;
  margin: 0;
  padding: 0 0.35rem;
}

.ks-activity__slide {
  flex: 0 0 min(100%, 420px);
  min-width: 0;
  scroll-snap-align: center;
  transition: transform 0.35s ease;
}

@media (min-width: 576px) {
  .ks-activity__slide {
    flex-basis: calc((100% - var(--ks-activity-gap)) / 2);
  }
}

@media (min-width: 992px) {
  .ks-activity__slide {
    flex-basis: calc((100% - 2 * var(--ks-activity-gap)) / 3);
  }
}

.ks-activity__slide--active .ks-activity-card {
  transform: scale(1.02);
  box-shadow:
    0 12px 40px rgb(0 0 0 / 0.4),
    0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.18),
    0 0 32px rgb(var(--ks-cyber-rgb) / 0.12);
}

.ks-activity-card {
  height: 100%;
  border-radius: var(--ks-activity-radius);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.35);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.ks-activity-card:hover {
  border-color: rgb(var(--ks-cyber-rgb) / 0.28);
  box-shadow:
    0 14px 44px rgb(0 0 0 / 0.42),
    0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.2),
    0 0 36px rgb(var(--ks-cyber-rgb) / 0.14);
}

.ks-activity-card:hover .ks-activity-card__img {
  filter: brightness(0.82) saturate(0.88) contrast(1.08) hue-rotate(-6deg);
}

.ks-activity-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  min-height: 200px;
  background: var(--ks-black);
}

.ks-activity-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.72) saturate(0.82) contrast(1.06) hue-rotate(-8deg);
  transition: filter 0.35s ease;
}

.ks-activity-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(4 8 12 / 0.15) 0%,
    transparent 42%,
    rgb(3 8 12 / 0.88) 72%,
    rgb(2 6 10 / 0.96) 100%
  );
}

.ks-activity-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem 1.15rem;
  z-index: 1;
}

.ks-activity-card__label {
  display: block;
  font-family: var(--ks-font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--ks-cyber-rgb) / 0.88);
  margin-bottom: 0.35rem;
}

.ks-activity-card__title {
  font-family: var(--ks-font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ks-text);
  margin: 0 0 0.35rem;
}

.ks-activity-card__desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #9eaea5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ks-activity__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 2.15rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  background: rgb(8 11 16 / 0.88);
  color: var(--ks-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.22s ease,
    opacity 0.2s ease;
}

.ks-activity__arrow:hover:not(:disabled) {
  border-color: rgb(var(--ks-cyber-rgb) / 0.4);
  color: var(--ks-cyber);
  box-shadow: 0 0 20px rgb(var(--ks-cyber-rgb) / 0.12);
}

.ks-activity__arrow:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.45);
  outline-offset: 2px;
}

.ks-activity__arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.ks-activity__arrow--prev {
  left: 0;
}

.ks-activity__arrow--next {
  right: 0;
}

.ks-activity--locked .ks-activity__arrow {
  visibility: hidden;
  pointer-events: none;
}

.ks-activity__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  width: 100%;
  min-width: 0;
}

.ks-activity__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ks-activity__dot:hover {
  background: rgb(var(--ks-cyber-rgb) / 0.45);
}

.ks-activity__dot.is-active {
  background: var(--ks-cyber);
  box-shadow: 0 0 10px rgb(var(--ks-cyber-rgb) / 0.35);
  transform: scale(1.15);
}

.ks-activity__dot:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.5);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .ks-activity {
    padding: 0 2rem;
  }

  .ks-activity__arrow {
    width: 1.9rem;
    height: 2.5rem;
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-activity__viewport {
    scroll-behavior: auto;
  }

  .ks-activity__slide--active .ks-activity-card {
    transform: none;
  }
}

/* Arsenal */
.ks-arsenal-chips {
  scrollbar-width: thin;
  /* overflow-x: auto обрезает box-shadow; запас под лёгкое свечение вкладок */
  padding-block: 0.5rem;
  margin-block: -0.25rem;
}

.ks-arsenal-chip {
  font-family: var(--ks-font-mono);
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--ks-radius-pill) !important;
  border: 1px solid var(--ks-line) !important;
  color: var(--ks-muted) !important;
  white-space: nowrap;
  box-shadow: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease,
    filter 0.25s ease;
}

/* Cyber-hover как CTA; active чуть ярче невыбранного hover */
#arsenal-nav .ks-arsenal-chip:hover {
  border-color: var(--ks-cyber) !important;
  color: #eafff4 !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow-strong) !important;
}

#arsenal-nav .ks-arsenal-chip:focus-visible:not(:hover) {
  border-color: var(--ks-neon-line-soft) !important;
  color: #e2f8ef !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow) !important;
}

.ks-arsenal-chip.active,
.ks-arsenal-chip.is-active {
  border-color: rgb(var(--ks-cyber-rgb) / 0.72) !important;
  background: var(--ks-neon-fill) !important;
  color: #f2fffa !important;
  box-shadow: var(--ks-neon-glow-active);
}

#arsenal-nav .ks-arsenal-chip.active:hover,
#arsenal-nav .ks-arsenal-chip.is-active:hover {
  border-color: var(--ks-cyber) !important;
  background: var(--ks-neon-fill-hover) !important;
  color: #ffffff !important;
  box-shadow: var(--ks-neon-glow-active-hover) !important;
}

#arsenal-nav .ks-arsenal-chip.active:focus-visible:not(:hover),
#arsenal-nav .ks-arsenal-chip.is-active:focus-visible:not(:hover) {
  border-color: rgb(var(--ks-cyber-rgb) / 0.65) !important;
  background: var(--ks-neon-fill) !important;
  color: #f2fffa !important;
  box-shadow: var(--ks-neon-glow-active) !important;
}

.ks-arsenal-board {
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-xl) !important;
  background: linear-gradient(180deg, rgba(12, 18, 22, 0.98), #070a0c) !important;
  box-shadow: none !important;
}

.arsenal-panel::before {
  opacity: 0.06;
}

.ks-tag {
  font-family: var(--ks-font-mono);
  font-size: 0.65rem !important;
  border-radius: var(--ks-radius-pill) !important;
  border: 1px solid var(--ks-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #c4d0d8 !important;
  font-weight: 500;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

.ks-tag:hover {
  border-color: var(--ks-neon-line-soft) !important;
  color: #e8f5ef !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow);
}

@property --ks-scale-avg-value {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Направление арсенала: один fill/glow для карточных meter и маркера шкалы */
#arsenal-panel {
  --ks-arsenal-meter-fill: linear-gradient(90deg, var(--arsenal-accent), var(--arsenal-accent-soft));
  --ks-arsenal-meter-glow: 0 0 14px rgb(var(--ks-ui-teal-rgb) / 0.22), 0 0 8px rgb(var(--ks-brand-lime-rgb) / 0.12);
  --ks-arsenal-meter-glow-hover: 0 0 18px rgb(var(--ks-ui-teal-rgb) / 0.32), 0 0 10px rgb(var(--ks-brand-lime-rgb) / 0.18);
}

@supports (color: color-mix(in srgb, white, black)) {
  #arsenal-panel {
    --ks-arsenal-meter-glow: 0 0 14px color-mix(in srgb, var(--arsenal-accent) 38%, transparent),
      0 0 8px color-mix(in srgb, var(--arsenal-accent-soft) 24%, transparent);
    --ks-arsenal-meter-glow-hover: 0 0 18px color-mix(in srgb, var(--arsenal-accent) 45%, transparent),
      0 0 11px color-mix(in srgb, var(--arsenal-accent-soft) 32%, transparent);
  }
}

.ks-scale {
  font-family: var(--ks-font-mono);
  font-size: 0.62rem;
  color: var(--ks-dim);
  letter-spacing: 0.1em;
  border-top: 1px dashed var(--ks-line);
  padding-top: 0.75rem;
}

.ks-scale--meter {
  border-top: none;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.ks-scale__line {
  position: relative;
  height: 0;
  margin: 0 0 0.65rem;
  border-top: 1px dashed var(--ks-line);
}

/*
 * Единый reference box: линия, деления и маркер — прямые потомки .ks-scale-ref.
 * left: N% у всех считается от одной и той же ширины (padding-box .ks-scale-ref).
 */
.ks-scale-ref {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-height: 3.15rem;
}

/* Track 0–100% + fill 0→avg (как .ks-meter в карточках) */
.ks-scale-progress {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  bottom: 1.05rem;
  height: 4px;
  border-radius: var(--ks-radius-pill);
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 0;
}

.ks-scale-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: inherit;
}

.ks-scale-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--ks-scale-avg-value, 0) * 1%);
  max-width: 100%;
  border-radius: inherit;
  background: var(--ks-arsenal-meter-fill);
  box-shadow: var(--ks-arsenal-meter-glow);
  transition: width 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
  z-index: 1;
}

.skill-avg-indicator[data-avg-tier="high"] .ks-scale-fill {
  box-shadow: var(--ks-arsenal-meter-glow-hover);
}

.skill-avg-indicator[data-avg-tier="mid"] .ks-scale-fill {
  opacity: 0.94;
}

.skill-avg-indicator[data-avg-tier="low"] .ks-scale-fill {
  opacity: 0.72;
  filter: saturate(0.85) brightness(0.96);
  box-shadow: var(--ks-arsenal-meter-glow);
}

.ks-scale-tick {
  position: absolute;
  bottom: 0;
  font-family: var(--ks-font-mono);
  font-size: 0.62rem;
  color: var(--ks-dim);
  letter-spacing: normal;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
}

.ks-scale-tick--0 {
  left: 0;
  transform: translateX(0);
}

.ks-scale-tick--25 {
  left: 25%;
  transform: translateX(-50%);
}

.ks-scale-tick--50 {
  left: 50%;
  transform: translateX(-50%);
}

.ks-scale-tick--75 {
  left: 75%;
  transform: translateX(-50%);
}

.ks-scale-tick--100 {
  left: 100%;
  transform: translateX(-100%);
}

.ks-scale-marker {
  position: absolute;
  left: calc(var(--ks-scale-avg-value, 0) * 1%);
  bottom: calc(1.05rem + 4px + 0.28rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  z-index: 2;
  cursor: help;
  outline: none;
  transition: left 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.skill-avg-indicator[data-avg-value="0"] .ks-scale-marker {
  transform: translateX(0);
}

.ks-scale-marker:focus-visible {
  outline: 1px solid rgb(var(--ks-ui-teal-rgb) / 0.55);
  outline-offset: 4px;
  border-radius: 3px;
  box-shadow: 0 0 12px rgb(var(--ks-ui-teal-rgb) / 0.2);
}

.ks-scale-marker__label {
  font-family: var(--ks-font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  color: var(--arsenal-accent-soft, var(--ks-brand-lime));
  text-shadow: 0 0 12px rgb(var(--ks-brand-lime-rgb) / 0.18);
  pointer-events: none;
  user-select: none;
}

.skill-avg-indicator[data-avg-tier="mid"] .ks-scale-marker__label {
  opacity: 0.9;
}

.skill-avg-indicator[data-avg-tier="low"] .ks-scale-marker__label {
  opacity: 0.72;
  color: var(--ks-muted);
}

@media (prefers-reduced-motion: reduce) {
  .skill-avg-indicator .ks-scale-marker,
  .skill-avg-indicator .ks-scale-fill {
    transition: none;
  }
}

.ks-skill {
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-lg) !important;
  background: rgba(0, 0, 0, 0.28) !important;
}

.ks-skill__type {
  font-family: var(--ks-font-mono);
  font-size: 0.62rem !important;
  letter-spacing: 0.12em;
  color: var(--ks-dim) !important;
}

.ks-skill__name {
  font-family: var(--ks-font-sans);
  font-weight: 600;
  color: var(--ks-text);
}

.ks-skill__ref {
  font-family: var(--ks-font-mono);
  font-size: 0.72rem !important;
  color: var(--ks-muted) !important;
}

.ks-skill__val {
  font-family: var(--ks-font-mono);
  font-size: 0.85rem;
  color: var(--ks-brand-lime);
}

#arsenal-panel .ks-meter {
  height: 4px !important;
  border-radius: var(--ks-radius-pill) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgb(255 255 255 / 0.05) !important;
  overflow: hidden;
}

#arsenal-panel .ks-meter .progress-bar {
  width: var(--skill-progress, var(--skill-value));
  background: var(--ks-arsenal-meter-fill);
  box-shadow: var(--ks-arsenal-meter-glow);
  border-radius: var(--ks-radius-pill);
}

#arsenal-panel .ks-skill__val {
  color: var(--arsenal-accent-soft, var(--ks-brand-lime));
}

/* —— Contact (тот же каркас, что у остальных секций: chrome + ks-panel + section-heading) —— */
.ks-contact {
  position: relative;
}

.ks-contact__grid {
  position: relative;
}

.ks-contact__intro {
  opacity: 0;
  transform: translateY(10px);
  animation: ks-contact-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards;
}

@keyframes ks-contact-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ks-contact__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ks-muted);
  max-width: 44ch;
}

.ks-contact-cards {
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  animation: ks-contact-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.ks-contact-cards__hint {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ks-dim);
  margin: 0 0 1rem;
  max-width: 52ch;
}

.ks-contact-channels {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ks-contact-channel {
  --ks-ch-pad: 0.8rem 0.95rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: var(--ks-ch-pad);
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 0.07);
  background: rgb(6 10 14 / 0.88);
  color: var(--ks-text);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ks-contact-channel--link {
  cursor: pointer;
}

.ks-contact-channel:hover {
  border-color: rgb(var(--ks-cyber-rgb) / 0.35);
  background: rgb(10 16 22 / 0.95);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.2);
  transform: translateY(-1px);
}

.ks-contact-channel:focus-visible {
  outline: 2px solid rgb(var(--ks-cyber-rgb) / 0.55);
  outline-offset: 2px;
}

.ks-contact-channel.is-copied {
  border-color: rgb(var(--ks-cyber-rgb) / 0.45);
  box-shadow: 0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.12);
}

.ks-contact-channel__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.35);
  border: 1px solid rgb(255 255 255 / 0.06);
  color: rgb(var(--ks-cyber-rgb) / 0.95);
}

.ks-contact-channel__icon svg {
  display: block;
}

.ks-contact-channel__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ks-contact-channel__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-dim);
}

.ks-contact-channel__value {
  font-family: var(--ks-font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(232 248 240 / 0.98);
  word-break: break-all;
}

.ks-contact-channel__action {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(var(--ks-cyber-rgb) / 0.88);
  flex-shrink: 0;
}

.ks-contact-toast {
  position: fixed;
  bottom: 1.35rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 1080;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid rgb(var(--ks-cyber-rgb) / 0.35);
  background: rgb(8 12 16 / 0.94);
  color: rgb(220 250 235 / 0.98);
  font-family: var(--ks-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.ks-contact-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ks-contact__intro,
  .ks-contact-cards {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ks-contact-toast {
    transition: opacity 0.15s ease;
  }
}

/* Footer */
.ks-footer {
  position: relative;
  padding-bottom: 2rem;
}

.ks-footer__glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 900px);
  height: 120px;
  background: radial-gradient(ellipse at center, rgb(var(--ks-ui-teal-rgb) / 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ks-footer .container {
  position: relative;
  z-index: 1;
}

.ks-footer__panel {
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-xl) !important;
  background: linear-gradient(180deg, #080c10, #040608) !important;
  box-shadow: var(--ks-shadow);
}

.ks-footer__logo img {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  filter: saturate(0.9);
}

.ks-footer__title {
  font-family: var(--ks-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.ks-footer__mini {
  border-radius: var(--ks-radius-lg) !important;
  border: 1px solid var(--ks-line) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  font-family: var(--ks-font-mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.14em;
  min-height: 88px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

.ks-footer__mini:hover {
  border-color: var(--ks-cyber) !important;
  color: var(--ks-cyber) !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow-strong);
}

.ks-footer__h {
  font-family: var(--ks-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ks-muted);
}

.ks-footer__a {
  border-radius: var(--ks-radius-lg) !important;
  border: 1px solid var(--ks-line) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  font-size: 0.9rem;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.ks-footer__a:hover {
  border-color: var(--ks-cyber) !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow-strong);
}

.ks-footer__note {
  font-size: 0.85rem;
  color: var(--ks-muted);
  font-style: italic;
}

.ks-footer__legal {
  border-top: 1px solid var(--ks-line);
}

.ks-footer-badges {
  width: 100%;
  max-width: 28rem;
}

/* Ссылки-картинки: рамка по форме «сквиркла» иконки, не pill (pill на ~квадрате = круг) */
.site-footer a.ks-footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 140px;
  margin-inline: auto;
  padding: 0.55rem;
  border-radius: var(--ks-radius-xl);
  border: 1px solid rgb(255 255 255 / 0.12) !important;
  background: transparent !important;
  box-sizing: border-box;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.site-footer a.ks-footer-badge:hover {
  border-color: var(--ks-cyber) !important;
  background: var(--ks-neon-fill-hover) !important;
  box-shadow: var(--ks-neon-glow-strong) !important;
  outline: none !important;
}

.site-footer a.ks-footer-badge:focus-visible:not(:hover) {
  border-color: var(--ks-neon-line-soft) !important;
  background: transparent !important;
  box-shadow: var(--ks-neon-glow) !important;
  outline: none !important;
}

.ks-footer-badge__img {
  width: 100%;
  height: auto;
  max-width: 108px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ks-radius-lg);
  display: block;
}

/* —— Certificates slider (та же сетка, что у .ks-shell .container; без отдельного max-width) —— */
.ks-certificates-lead {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ks-muted);
  max-width: 52ch;
}

.ks-certs {
  --ks-certs-gap: 1rem;
  --ks-cert-radius: clamp(16px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
  min-width: 0;
  width: 100%;
  background: transparent;
}

.ks-certs__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: clamp(0.45rem, 1.5vw, 0.75rem);
  min-width: 0;
}

.ks-certs--locked .ks-certs__stage {
  grid-template-columns: minmax(0, 1fr);
}

.ks-certs--locked .ks-certs__arrow {
  display: none;
}

.ks-certs--locked .ks-certs__dots {
  display: none;
}

.ks-certs__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pinch-zoom;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  padding: 0.35rem 0 0.5rem;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  background: transparent;
}

.ks-certs__viewport::-webkit-scrollbar {
  display: none;
}

.ks-certs__viewport::-webkit-scrollbar-thumb {
  background: transparent;
}

.ks-certs__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.ks-certs__viewport:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.45);
  outline-offset: 2px;
}

.ks-certs__track {
  display: flex;
  align-items: stretch;
  gap: var(--ks-certs-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: min-content;
  background: transparent;
}

.ks-certs__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

@media (min-width: 576px) {
  .ks-certs__slide {
    flex-basis: calc((100% - var(--ks-certs-gap)) / 2);
  }
}

@media (min-width: 992px) {
  .ks-certs__slide {
    flex-basis: calc((100% - 2 * var(--ks-certs-gap)) / 3);
  }
}

.ks-cert-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  border-radius: var(--ks-cert-radius);
  border: 1px solid rgb(255 255 255 / 0.08);
  background: transparent;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.35);
  transition:
    transform 0.35s ease,
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}

.ks-cert-card__hit {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
}

.ks-cert-card__hit--zoom {
  cursor: zoom-in;
}

.ks-cert-card__hit--zoom:focus-visible {
  outline: 2px solid rgb(var(--ks-cyber-rgb) / 0.55);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .ks-cert-card:hover {
    border-color: rgb(var(--ks-cyber-rgb) / 0.28);
    box-shadow:
      0 14px 44px rgb(0 0 0 / 0.42),
      0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.2),
      0 0 36px rgb(var(--ks-cyber-rgb) / 0.14);
  }

  .ks-cert-card:hover .ks-cert-card__cover.ks-cert-card__cover--crop {
    transform: translateZ(0) scale(1.12);
  }

  .ks-cert-card:hover .ks-cert-card__cover {
    filter: brightness(0.82) saturate(0.88) contrast(1.08) hue-rotate(-6deg);
  }
}

.ks-cert-card__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: inherit;
  background: var(--ks-black);
  contain: layout style paint;
}

.ks-cert-card__cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.06);
  transform-origin: center center;
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
  filter: brightness(0.72) saturate(0.82) contrast(1.06) hue-rotate(-8deg);
}

.ks-cert-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(4 8 12 / 0.2) 0%,
    transparent 38%,
    rgb(3 8 12 / 0.82) 68%,
    rgb(2 6 10 / 0.96) 100%
  );
  z-index: 1;
}

.ks-cert-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.95rem 1.05rem 1.1rem;
  z-index: 2;
  pointer-events: none;
}

.ks-cert-card__kicker {
  display: block;
  font-family: var(--ks-font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ks-cyber-rgb) / 0.88);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-cert-card__heading {
  font-family: var(--ks-font-display);
  font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ks-text);
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ks-cert-card__stamp {
  display: inline-block;
  font-family: var(--ks-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--ks-muted);
}

.ks-cert-card__synth {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.25rem 1rem;
  text-align: center;
  background:
    linear-gradient(155deg, rgb(8 14 22 / 0.96), rgb(3 7 12 / 0.98)),
    repeating-linear-gradient(
      -12deg,
      rgb(255 255 255 / 0.02) 0 1px,
      transparent 1px 14px
    );
  border: 1px solid rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.08);
}

.ks-cert-card__synth--pdf {
  border-color: rgb(var(--ks-cyber-rgb) / 0.22);
  box-shadow:
    inset 0 0 0 1px rgb(var(--ks-cyber-rgb) / 0.12),
    inset 0 -40px 60px rgb(0 0 0 / 0.35);
}

.ks-cert-card__synth-id {
  font-family: var(--ks-font-mono);
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgb(230 252 242 / 0.96);
  text-shadow: 0 0 24px rgb(var(--ks-cyber-rgb) / 0.25);
}

.ks-cert-card__synth-line {
  font-family: var(--ks-font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--ks-dim);
}

.ks-cert-card__synth-hint {
  font-family: var(--ks-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: rgb(var(--ks-cyber-rgb) / 0.65);
}

.ks-cert-dialog {
  border: none;
  padding: 0;
  margin: auto;
  max-width: min(1240px, 98vw);
  max-height: 96vh;
  width: min(1240px, 98vw);
  background: transparent;
  color: var(--ks-text);
}

.ks-cert-dialog::backdrop {
  background: rgb(0 0 0 / 0.78);
  backdrop-filter: blur(3px);
}

.ks-cert-dialog__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  max-height: 92vh;
  border-radius: 12px;
  border: 1px solid rgb(var(--ks-cyber-rgb) / 0.28);
  background: linear-gradient(165deg, rgb(10 14 18), rgb(4 8 12));
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.04),
    0 24px 48px rgb(0 0 0 / 0.55);
}

.ks-cert-dialog__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(0 0 0 / 0.45);
  color: var(--ks-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.ks-cert-dialog__close:hover {
  border-color: rgb(var(--ks-cyber-rgb) / 0.45);
  color: #e8fff4;
}

.ks-cert-dialog__close:focus-visible {
  outline: 2px solid rgb(var(--ks-cyber-rgb) / 0.65);
  outline-offset: 2px;
}

.ks-cert-dialog__heading {
  margin: 0;
  padding-right: 2.5rem;
}

.ks-cert-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.ks-cert-dialog__media--img {
  display: block;
  max-width: 100%;
  max-height: min(88vh, 1100px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.ks-cert-dialog__media--frame {
  display: block;
  width: 100%;
  height: min(88vh, 1100px);
  max-height: min(88vh, 1100px);
  border: 0;
  border-radius: 6px;
  background: rgb(6 9 12);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ks-cert-dialog::backdrop {
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-cert-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .ks-cert-card:hover .ks-cert-card__cover.ks-cert-card__cover--crop {
    transform: translateZ(0) scale(1.06);
  }

  .ks-cert-card:hover .ks-cert-card__cover {
    filter: brightness(0.72) saturate(0.82) contrast(1.06) hue-rotate(-8deg);
  }

  .ks-cert-card__cover {
    transition: none;
  }
}

.ks-certs__arrow {
  position: static;
  z-index: 1;
  width: 2.15rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  background: rgb(8 11 16 / 0.88);
  color: var(--ks-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  align-self: center;
  justify-self: center;
  flex-shrink: 0;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.22s ease,
    opacity 0.2s ease;
}

.ks-certs__arrow:hover:not(:disabled) {
  border-color: rgb(var(--ks-cyber-rgb) / 0.4);
  color: var(--ks-cyber);
  box-shadow: 0 0 16px rgb(var(--ks-cyber-rgb) / 0.12);
}

.ks-certs__arrow:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.45);
  outline-offset: 2px;
}

.ks-certs__arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.ks-certs__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0;
  width: 100%;
  min-width: 0;
}

.ks-certs__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ks-certs__dot:hover {
  background: rgb(var(--ks-cyber-rgb) / 0.45);
}

.ks-certs__dot.is-active {
  background: var(--ks-cyber);
  box-shadow: 0 0 10px rgb(var(--ks-cyber-rgb) / 0.35);
  transform: scale(1.15);
}

.ks-certs__dot:focus-visible {
  outline: 1px solid rgb(var(--ks-cyber-rgb) / 0.5);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .ks-certs__stage {
    gap: 0.35rem;
  }

  .ks-certs__arrow {
    width: 1.85rem;
    height: 2.4rem;
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-certs__viewport {
    scroll-behavior: auto;
  }
}

/* Legacy compatibility */
.surface-card,
.domain-card,
.footer-surface {
  border-radius: var(--ks-radius-xl) !important;
}

.section-shell,
.footer-surface {
  background: linear-gradient(180deg, var(--ks-panel), var(--ks-ink)) !important;
}

.footer-legal {
  color: var(--ks-muted);
}

/* Arsenal reveal */
.arsenal-panel.is-revealing {
  animation: ks-reveal 0.28s ease;
}

@keyframes ks-reveal {
  from {
    opacity: 0.88;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arsenal-panel.is-revealing {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .site-nav {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--ks-line);
    background: rgba(0, 0, 0, 0.45);
  }

}

@media (max-width: 767.98px) {
  body {
    background-attachment: scroll;
  }

  .hero-title {
    font-size: clamp(2.4rem, 12vw, 3.2rem) !important;
  }
}