/* silonin.ru — shared UI layer v2.3
   Canon: DESIGN_POLICY.md, 2026-07-24 */

:root {
  --paper: #f6f5f0;
  --paper-2: #ebece6;
  --surface: #f6f5f0;
  --ink: #171919;
  --ink-2: #555b57;
  --ink-3: #555b57;
  --line: #c8cbc4;
  --line-2: #c8cbc4;
  --dark: #111414;
  --dark-2: #1c2020;
  --dark-line: rgba(255,255,255,.11);
  --dark-fg: #f6f5f0;
  --dark-fg-2: #bfc3bc;
  --gold: #e9b44c;
  --gold-2: #f6c86f;
  --gold-soft: rgba(218,165,32,.12);
  --gold-line: rgba(218,165,32,.32);
  --maxw: 1280px;
  --pad: clamp(20px,4vw,56px);
  --r-sm: 6px;
  --r-content: 4px;
  --r-lg: var(--r-content);
  --glass-blur: 24px;
  --glass-light: linear-gradient(135deg,rgba(255,253,248,.70),rgba(239,231,218,.40));
  --glass-dark: linear-gradient(135deg,rgba(34,30,24,.74),rgba(13,11,9,.50));
  --glass-line-light: rgba(255,255,255,.72);
  --glass-line-dark: rgba(255,255,255,.22);
  --glass-shadow-light: inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(27,24,20,.05),0 18px 46px rgba(27,24,20,.10);
  --glass-shadow-dark: inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.12),0 18px 46px rgba(0,0,0,.16);
  --serif: "IBM Plex Sans",monospace;
}

body.v2-system {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink-2);
  font-family: "IBM Plex Sans",Arial,sans-serif;
  font-size:16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

body.v2-system h1,
body.v2-system h2,
body.v2-system h3,
body.v2-system h4 {
  color: var(--ink);
  font-family: "IBM Plex Sans",Arial,sans-serif;
  text-wrap: balance;
}

body.v2-system h1 { letter-spacing: -.045em; }
body.v2-system h2 { letter-spacing: -.03em; }
body.v2-system em {
  color: inherit;
  font-family: "IBM Plex Sans",monospace;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.05em;
}

body.v2-system .doc .intro,
body.v2-system .quiz-result__next-step p,
body.v2-system .step-wide .foot {
  font-family: "IBM Plex Sans",Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

body.v2-system .kicker,
body.v2-system .eyebrow,
body.v2-system .v2-kicker,
body.v2-system .c2-eyebrow,
body.v2-system .label,
body.v2-system .src,
body.v2-system .source,
body.v2-system .proof-source,
body.v2-system .route-meta,
body.v2-system .solution-role {
  font-family: "IBM Plex Sans",monospace;
  font-style: normal;
  font-weight: 500;
}

body.v2-system .big,
body.v2-system .stat-value,
body.v2-system .metric-value,
body.v2-system .proof-value span,
body.v2-system .cat-card__metric,
body.v2-system .c2-result__value,
body.v2-system .c2-hero__stat-value,
body.v2-system .track-cell strong,
body.v2-system .track-cell .v,
body.v2-system .case-metric {
  font-family: "IBM Plex Sans",monospace;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
}

body.v2-system .hs-cell .num em,
body.v2-system .anat .num,
body.v2-system .arch-row .num,
body.v2-system .step .num,
body.v2-system .step-wide-head .num,
body.v2-system .dir-num,
body.v2-system .quiz-result__code,
body.v2-system .quiz-rec__num,
body.v2-system .paid .price em,
body.v2-system .track-cell .big,
body.v2-system .strip-row b em,
body.v2-system .about-quote,
body.v2-system .pullquote {
  font-family: "IBM Plex Sans",monospace;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.v2-system .num,
body.v2-system .c2-eyebrow__num,
body.v2-system .c2-process__num,
body.v2-system .cap__step {
  font-family: "IBM Plex Sans",monospace;
  font-style: normal;
  font-weight: 500;
}

body.v2-system .btn,
body.v2-system .c2-btn,
body.v2-system .nav-cta,
body.v2-system .cta-button,
body.v2-system button[type="submit"] {
  border-radius:2px;
}

body.v2-system .arr,
body.v2-system .arrow,
body.v2-system .ph-arrow-right {
  display: inline-block;
  font-family: inherit;
  font-style: normal;
  transition: transform .2s ease;
}

body.v2-system a:hover .arr,
body.v2-system a:hover .arrow,
body.v2-system a:hover .ph-arrow-right,
body.v2-system button:hover .arr,
body.v2-system button:hover .arrow,
body.v2-system button:hover .ph-arrow-right {
  transform: translateX(3px);
}

body.v2-system :is(a,button,input,textarea,select):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

body.v2-system :is(
  .svc-card,
  .role-card,
  .col-card,
  .cat-card,
  .route-card,
  .feature-card,
  .dir-col.col-result,
  .dept,
  .product-card,
  .case-card,
  .format-card,
  .relief-cell,
  .process-cell,
  .case-cell,
  .cell,
  .cap,
  .ind,
  .princ,
  .anat,
  .deploy,
  .quiz-rec,
  .related a,
  .c2-result,
  .c2-inline-cta,
  .inline-cta
) {
  position: relative;
  overflow: hidden;
  border-color: var(--glass-line-light);
  border-radius:2px;
  background: var(--glass-light);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease,background-color .24s ease;
}

body.v2-system :is(
  .svc-card,
  .role-card,
  .col-card,
  .cat-card,
  .route-card,
  .feature-card,
  .dir-col.col-result,
  .dept,
  .product-card,
  .case-card,
  .format-card,
  .relief-cell,
  .process-cell,
  .case-cell,
  .cell,
  .cap,
  .ind,
  .princ,
  .anat,
  .deploy,
  .quiz-rec,
  .related a,
  .c2-result,
  .c2-inline-cta,
  .inline-cta
)::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--gold);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

body.v2-system :is(
  .svc-card,
  .role-card,
  .col-card,
  .cat-card,
  .route-card,
  .feature-card,
  .dir-col.col-result,
  .dept,
  .product-card,
  .case-card,
  .format-card,
  .relief-cell,
  .process-cell,
  .case-cell,
  .cell,
  .cap,
  .ind,
  .princ,
  .anat,
  .deploy,
  .quiz-rec,
  .related a,
  .c2-result,
  .c2-inline-cta,
  .inline-cta
):hover {
  border-color: var(--gold-line);
  box-shadow:none;
  transform: translateY(-4px);
}

body.v2-system :is(
  .svc-card,
  .role-card,
  .col-card,
  .cat-card,
  .route-card,
  .feature-card,
  .dir-col.col-result,
  .dept,
  .product-card,
  .case-card,
  .format-card,
  .relief-cell,
  .process-cell,
  .case-cell,
  .cell,
  .cap,
  .ind,
  .princ,
  .anat,
  .deploy,
  .quiz-rec,
  .related a,
  .c2-result,
  .c2-inline-cta,
  .inline-cta
):hover::after {
  transform: scaleX(1);
}

body.v2-system :is(.hero,.hero-band,.cta-block,.final-cta,.footer,.site) {
  --ink: var(--dark-fg);
  --ink-2: var(--dark-fg-2);
}

body.v2-system > .header {
  position: sticky;
  z-index: 1000;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 28px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--dark-line);
  background: rgba(13,11,9,.92);
  color: var(--dark-fg-2);
  backdrop-filter:none;
}

body.v2-system > .header > .logo {
  color: var(--dark-fg);
  font-family: "IBM Plex Sans",Arial,sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
}

body.v2-system > .header > .nav {
  display: flex;
  align-items: center;
  gap: clamp(14px,2vw,28px);
  margin-left: auto;
}

body.v2-system > .header > .nav a {
  color: var(--dark-fg-2);
  font-family: "IBM Plex Sans",Arial,sans-serif;
  font-size:14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.v2-system > .header > .nav a:hover { color: var(--dark-fg); }
body.v2-system > .header .cta-button { border-color: var(--gold); background: var(--gold); color: var(--dark); }

body.v2-system :is(.hero,.hero-band,.c2-hero,.v2-hero-band) > :is(.nav,.v2-nav),
body.v2-system > .v2-nav {
  position: fixed !important;
  z-index: 1000 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  border-bottom: 1px solid var(--dark-line);
  background: rgba(13,11,9,.9) !important;
  backdrop-filter:none;
}

body.v2-system :is(.footer,.site) {
  background: var(--dark);
  color: var(--dark-fg-2);
}

body.v2-system :is(.footer,.site) :is(h2,h3,h4,strong) { color: var(--dark-fg); }
body.v2-system :is(.footer,.site) a { color: var(--dark-fg-2); }
body.v2-system :is(.footer,.site) a:hover { color: var(--dark-fg); }

body.v2-system .contact-form,
body.v2-system .cta-form {
  border-color: var(--glass-line-dark);
  border-radius:2px;
  background: var(--glass-dark);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body.v2-system :is(input,textarea,select) {
  border-radius:2px;
}

body.v2-system form:has(input[name="consent"]:not(:checked)) :is(button,input)[type="submit"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .48;
}

@media (max-width:700px) {
  body.v2-system :is(
    .svc-card,
    .role-card,
    .col-card,
    .cat-card,
    .route-card,
    .feature-card,
    .dir-col.col-result,
    .dept,
    .product-card,
    .case-card,
    .format-card,
    .relief-cell,
    .process-cell,
    .case-cell,
    .cell,
    .cap,
    .ind,
    .princ,
    .anat,
    .deploy,
    .quiz-rec,
    .related a,
    .c2-result,
    .c2-inline-cta,
    .inline-cta
  ):hover {
    box-shadow:none;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.v2-system *,
  body.v2-system *::before,
  body.v2-system *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}