/* ============================================================
   AIANBACK.XYZ - общий каркас (дизайн-система nekurs)
   Тёмный void + один лайм-сигнал. Радиусы 0-2px. Без эмодзи.
   ============================================================ */

:root {
  /* color */
  --bg: #0E0D0B;
  --surface-1: #161513;
  --surface-2: #1E1C18;
  --surface-3: #26231E;
  --border: #2B2823;
  --border-strong: #3C382F;
  --text-primary: #F2EFE7;
  --text-secondary: rgba(242, 239, 231, 0.65);
  --text-tertiary: rgba(242, 239, 231, 0.45);
  --text-disabled: rgba(242, 239, 231, 0.28);
  --accent: #C8FF00;
  --accent-dim: #9ABE00;
  --accent-glow: rgba(200, 255, 0, 0.22);
  --text-on-accent: #0E0D0B;
  --mentor: #A78BFA;
  --earned: #FFC53D;
  --danger: #FF5C5C;
  --warning: #FFB02E;
  /* type. Display = mono: Pixelify по-кириллически нечитаем (фидбек 2026-06-10),
     пиксельный шрифт только через .pixel на латинских именах продуктов */
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --font-pixel: 'Pixelify Sans', 'JetBrains Mono', monospace;
  --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --radius-sm: 2px;
  /* motion */
  --dur-micro: 80ms;
  --dur-short: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-primary); }
body { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, h4, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { image-rendering: pixelated; }
::selection { background: var(--accent); color: var(--text-on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

main.site { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 var(--space-lg); }

/* type helpers */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.h-display { font-family: var(--font-display); font-weight: 700; line-height: 1.12; color: var(--text-primary); text-wrap: balance; letter-spacing: -0.01em; }
.pixel { font-family: var(--font-pixel); }
h1.h-display { font-size: clamp(28px, 5vw, 46px); line-height: 1.08; }
h1.h-display.h-product { font-size: clamp(26px, 4.5vw, 40px); line-height: 1.1; }
h2.h-display { font-size: clamp(22px, 3.5vw, 32px); }

/* grids */
.s-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; padding: var(--space-2xl) 0 var(--space-lg); }
@media (min-width: 820px) { .s-hero { grid-template-columns: minmax(0, 1fr) auto; } }
.s-hero-art { display: flex; justify-content: center; }
@media (max-width: 819px) { .s-hero-art { order: -1; } }
.s-2col { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 680px) { .s-2col { grid-template-columns: repeat(2, 1fr); } }
.s-3col { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 680px) { .s-3col { grid-template-columns: repeat(3, 1fr); } }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--space-lg); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-head { width: 30px; height: 30px; border: 1px solid var(--border-strong); background: var(--surface-2); overflow: hidden; display: inline-flex; flex: 0 0 auto; }
.brand-head img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.brand-wordmark { height: 15px; width: auto; }

/* buttons */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.1; letter-spacing: -0.01em; font-family: var(--font-ui); transition: transform var(--dur-micro) var(--ease-spring), filter var(--dur-short) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent); color: var(--text-on-accent); border: 1px solid var(--accent); font-weight: 700; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-sm { min-height: 30px; padding: 6px 12px; font-size: 13px; }
.btn-md { min-height: 40px; padding: 10px 18px; font-size: 15px; }
.btn-lg { min-height: 56px; padding: 16px 24px; font-size: 16px; }
.btn-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; font-weight: 500; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; font-variant-numeric: tabular-nums; border-radius: var(--radius-sm); }
.badge-accent-solid { background: var(--accent); color: var(--text-on-accent); }
.badge-warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }

/* section label */
.seclabel { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-md); }
.seclabel-dot { width: 8px; height: 8px; background: var(--accent); flex: 0 0 auto; }
.seclabel-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-tertiary); text-transform: uppercase; }

/* crumb */
.crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: var(--space-lg) 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.crumb a { color: var(--text-tertiary); }
.crumb a:hover { color: var(--text-secondary); }
.crumb .sep { font-size: 11px; color: var(--text-disabled); }
.crumb .here { color: var(--text-primary); }

/* path / generic cards */
.card { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: var(--space-lg); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short), background var(--dur-short); }
a.cardlink { display: block; height: 100%; }
a.cardlink:hover .card:not(.card-soon) { transform: translateY(-2px); }
a.cardlink:hover .card { background: var(--surface-2); border-color: var(--border-strong); }
a.cardlink:hover .card-go { color: var(--accent); }
.card-soon { opacity: 0.65; }
.card-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.card-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-tertiary); text-transform: uppercase; }
.card-meta.accent { color: var(--accent); }
.card-title { font-weight: 700; font-size: 19px; color: var(--text-primary); line-height: 1.2; }
.card-desc { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.card-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text-primary); transition: color var(--dur-short); }

/* trust strip */
.trust { display: flex; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-item { display: flex; align-items: baseline; gap: 8px; flex: 1 1 160px; }
.trust-num { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--earned); font-variant-numeric: tabular-nums; }
.trust-label { font-size: 13px; color: var(--text-tertiary); }

/* subscription banner */
.subbanner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-lg); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short); }
a:hover > .subbanner { transform: translateY(-2px); }
.subbanner-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--accent); }

/* review slot */
.review-slot { display: flex; flex-direction: column; gap: 10px; padding: var(--space-lg); background: var(--surface-1); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.review-slot .bar { height: 8px; background: var(--surface-3); }

/* final CTA */
.finalcta { padding: var(--space-2xl) 0 var(--space-xl); }
.finalcta-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; padding: var(--space-2xl) var(--space-lg); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }

/* footer */
footer.site-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-xl) 0 var(--space-2xl); }
.footer-socials { display: flex; gap: var(--space-lg); flex-wrap: wrap; justify-content: center; }
.footer-socials a { display: inline-flex; align-items: baseline; gap: 6px; }
.footer-socials .name { font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.footer-socials .handle { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.footer-nav { display: flex; gap: var(--space-md) var(--space-lg); flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-nav a { color: var(--text-tertiary); }
.footer-nav a:hover { color: var(--text-secondary); }
.footer-sig { font-family: var(--font-mono); font-size: 11px; color: var(--text-disabled); letter-spacing: 0.08em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}