/* Vega TV — page styles */

.page {
  min-height: 100vh;
  background: var(--sv-bg);
  position: relative;
  overflow: hidden;
}

/* ─── Optional textures ─── */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(800px 600px at 70% -10%, rgba(168,85,247,0.10), transparent 60%);
}
.tex-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.33  0 0 0 0 0.97  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.tex-scan::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.wrap {
  position: relative;
  z-index: 3;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sv-space-8);
}

/* ─── Top bar ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,8,11,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sv-border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sv-topbar-h);
  gap: var(--sv-space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
}
.brand-mark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--sv-accent);
}
.brand-name {
  font-family: var(--sv-font-sans);
  font-weight: 600;
  font-size: var(--sv-text-md);
  letter-spacing: 0.04em;
  color: var(--sv-fg);
}
.brand-name .dot { color: var(--sv-accent); }

.top-right {
  display: flex;
  align-items: center;
  gap: var(--sv-space-5);
}
.top-status {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  letter-spacing: var(--sv-tracking-wide);
  text-transform: uppercase;
  color: var(--sv-fg-muted);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sv-accent);
  box-shadow: 0 0 0 0 var(--sv-accent);
  animation: pulse 1.6s var(--sv-ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168,85,247,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(168,85,247,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
}
.top-nav {
  display: flex;
  gap: var(--sv-space-5);
}
.top-nav a {
  font-size: var(--sv-text-sm);
  color: var(--sv-fg-muted);
  text-decoration: none;
  transition: color var(--sv-duration-fast) var(--sv-ease);
}
.top-nav a:hover { color: var(--sv-fg); }

/* ─── Buttons ─── */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sv-font-sans);
  font-weight: 500;
  font-size: var(--sv-text-sm);
  padding: 0 var(--sv-space-4);
  height: 32px;
  border-radius: var(--sv-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  transition: all var(--sv-duration-fast) var(--sv-ease);
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--sv-accent);
  color: #0a0014;
  font-weight: 600;
}
.btn-primary:hover { background: var(--sv-accent-hover); }
.btn-primary:active { background: var(--sv-accent-press); }

.btn-ghost {
  background: transparent;
  color: var(--sv-fg);
  border: 1px solid var(--sv-border-strong);
}
.btn-ghost:hover { border-color: var(--sv-fg-dim); background: var(--sv-surface-2); }

.btn-lg { height: 44px; padding: 0 var(--sv-space-6); font-size: var(--sv-text-md); }

/* ─── Hero ─── */
.hero {
  padding: 96px 0 80px;
  position: relative;
}
.hero-pre {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  margin-bottom: var(--sv-space-8);
}
.hero-pre .label-caps { color: var(--sv-fg-muted); }
.hero-pre .rule {
  flex: 0 0 56px;
  height: 1px;
  background: var(--sv-fg-faint);
}

.hero-title {
  font-family: var(--sv-font-sans);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: var(--sv-space-8);
  color: var(--sv-fg);
}
.hero-title em {
  font-style: normal;
  color: var(--sv-accent);
}
.hero-title .slash {
  color: var(--sv-fg-faint);
  font-weight: 400;
}

.hero-lead {
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--sv-fg-muted);
  margin-bottom: var(--sv-space-10);
}
.hero-lead strong { color: var(--sv-fg); font-weight: 500; }

.hero-form {
  display: flex;
  gap: var(--sv-space-2);
  max-width: 480px;
  margin-bottom: var(--sv-space-5);
}
.hero-form input {
  flex: 1;
  height: 44px;
  background: var(--sv-surface-1);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-sm);
  padding: 0 var(--sv-space-4);
  color: var(--sv-fg);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-md);
  transition: border-color var(--sv-duration-fast) var(--sv-ease);
}
.hero-form input::placeholder { color: var(--sv-fg-faint); }
.hero-form input:hover { border-color: var(--sv-border-strong); }
.hero-form input:focus { border-color: var(--sv-accent); box-shadow: none; outline: none; }

.hero-help {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-faint);
  letter-spacing: 0.02em;
}
.hero-help .ok { color: var(--sv-accent); }
.hero-help .err { color: var(--sv-danger); }

/* ─── Login form ─── */
.login-form {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  margin-bottom: var(--sv-space-4);
}
.login-row {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
}
.login-label {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  color: var(--sv-fg-faint);
  font-weight: 500;
}
.login-form input {
  height: 44px;
  background: var(--sv-surface-1);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-sm);
  padding: 0 var(--sv-space-4);
  color: var(--sv-fg);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-md);
  transition: border-color var(--sv-duration-fast) var(--sv-ease);
  width: 100%;
}
.login-form input::placeholder { color: var(--sv-fg-faint); }
.login-form input:hover { border-color: var(--sv-border-strong); }
.login-form input:focus { border-color: var(--sv-accent); outline: none; box-shadow: none; }

.login-pass { position: relative; }
.login-pass input { padding-right: 80px; }
.login-eye {
  position: absolute;
  right: var(--sv-space-3);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--sv-fg-dim);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--sv-radius-sm);
  transition: color var(--sv-duration-fast) var(--sv-ease);
}
.login-eye:hover { color: var(--sv-fg); }

.login-actions {
  display: flex;
  align-items: center;
  gap: var(--sv-space-5);
  margin-top: var(--sv-space-2);
}
.login-link {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--sv-duration-fast) var(--sv-ease);
}
.login-link:hover { color: var(--sv-fg); }

/* Hero "ticket" — launch info, side */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sv-space-10);
  align-items: start;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 56px; padding-bottom: 56px; }
}

.ticket {
  border: 1px solid var(--sv-border);
  background: var(--sv-surface-1);
  padding: var(--sv-space-5);
  border-radius: var(--sv-radius-md);
  display: grid;
  gap: var(--sv-space-3);
}
.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sv-space-3);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
}
.ticket-row .k { color: var(--sv-fg-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.ticket-row .v { color: var(--sv-fg); }
.ticket-row .v.accent { color: var(--sv-accent); }
.ticket-divider { height: 1px; background: var(--sv-border); margin: var(--sv-space-1) 0; }

/* ─── Hero live preview (right column) ─── */
.hero-live {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  width: 100%;
}
.hl-frame {
  border: 1px solid var(--sv-border);
  background: var(--sv-surface-1);
  border-radius: var(--sv-radius-md);
  overflow: hidden;
  box-shadow: var(--sv-shadow-2);
}
.hl-vid {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 28% 20%, rgba(168,85,247,0.45), transparent 55%),
    radial-gradient(140% 100% at 80% 100%, rgba(59,130,246,0.30), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(236,72,153,0.18), transparent 70%),
    linear-gradient(135deg, #16161e, #0b0b10);
}
.hl-vid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.hl-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%, 18% { transform: translateX(-100%); }
  55%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}
.hl-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--sv-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--sv-accent);
  color: #0a0014;
  font-weight: 700;
  padding: 4px 8px 4px 7px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 24px rgba(168,85,247,0.45);
}
.hl-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #0a0014;
  animation: pulse-dark 1.6s var(--sv-ease) infinite;
}
@keyframes pulse-dark {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.hl-viewers {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.55);
  color: #ededf0;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hl-viewers svg { opacity: 0.75; }

.hl-chat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  max-width: 280px;
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  pointer-events: none;
}
.chat-roll {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-msg {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 5px 9px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: #ededf0;
  width: fit-content;
  max-width: 100%;
  opacity: 1;
  transition: opacity 280ms var(--sv-ease), transform 280ms var(--sv-ease);
}
.chat-msg.enter {
  opacity: 0;
  transform: translateY(8px);
}
.chat-msg .chat-u {
  font-family: var(--sv-font-mono);
  font-size: 10.5px;
  color: var(--sv-fg-muted);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.chat-msg.host .chat-u { color: var(--sv-accent); }
.chat-msg .chat-c {
  font-size: 12px;
  color: #ededf0;
  word-break: break-word;
}

.hl-meta {
  padding: var(--sv-space-4) var(--sv-space-4) var(--sv-space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--sv-border);
}
.hl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sv-space-3);
}
.hl-ch {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-sm);
  color: var(--sv-fg);
  font-weight: 500;
}
.hl-time {
  font-size: 11px;
  color: var(--sv-fg-faint);
  letter-spacing: 0.04em;
}
.hl-title {
  font-size: var(--sv-text-md);
  color: var(--sv-fg);
  font-weight: 500;
  line-height: 1.35;
}
.hl-tags {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.hl-tags span {
  font-family: var(--sv-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--sv-fg-muted);
  border: 1px solid var(--sv-border);
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--sv-surface-2);
}

.hl-caption {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-faint);
  letter-spacing: 0.05em;
  text-align: center;
  padding-top: 2px;
}

/* ─── Marquee tape ─── */
.tape {
  border-top: 1px solid var(--sv-border);
  border-bottom: 1px solid var(--sv-border);
  background: var(--sv-surface-1);
  overflow: hidden;
  position: relative;
  z-index: 3;
}
.tape-track {
  display: flex;
  gap: var(--sv-space-10);
  padding: var(--sv-space-4) 0;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-sm);
  color: var(--sv-fg-muted);
  letter-spacing: 0.02em;
}
.tape-track span { display: inline-flex; align-items: center; gap: var(--sv-space-3); }
.tape-track .live {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sv-accent);
}
.tape-track .sep {
  color: var(--sv-fg-faint);
  margin: 0 var(--sv-space-2);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Section heads ─── */
.section {
  padding: 120px 0;
  position: relative;
}
.section + .section { border-top: 1px solid var(--sv-border); }
.section-first { padding-top: 96px; }

/* Editorial kicker (replaces numbered section labels) */
.kicker {
  display: inline-block;
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--sv-tracking-caps);
  color: var(--sv-fg-faint);
  font-weight: 500;
  margin-bottom: var(--sv-space-6);
  position: relative;
  padding-left: 14px;
}
.kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sv-accent);
  transform: translateY(-50%);
}

/* ─── Prose section ("О платформе") ─── */
.prose {
  max-width: 720px;
}
.prose-h {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--sv-space-8);
  color: var(--sv-fg);
  text-wrap: pretty;
}
.prose-p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--sv-fg-muted);
  margin-bottom: var(--sv-space-5);
  text-wrap: pretty;
}
.prose-p:last-child { margin-bottom: 0; }
.prose-p strong { color: var(--sv-fg); font-weight: 500; }
.prose-p.prose-quiet { color: var(--sv-fg-dim); font-size: var(--sv-text-md); }

/* ─── Duo (стримерам / зрителям) ─── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sv-space-12) var(--sv-space-10);
  max-width: 1080px;
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: var(--sv-space-10); }
}
.duo-col { max-width: 460px; }
.duo-h {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sv-space-4);
  color: var(--sv-fg);
  text-wrap: pretty;
}
.duo-p {
  font-size: var(--sv-text-md);
  line-height: 1.6;
  color: var(--sv-fg-muted);
  margin-bottom: var(--sv-space-3);
  text-wrap: pretty;
}
.duo-p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .section { padding: 72px 0; }
}

/* ─── Features grid ─── */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sv-border);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-md);
  overflow: hidden;
}
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .features { grid-template-columns: 1fr; } }

.feat {
  background: var(--sv-surface-1);
  padding: var(--sv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-4);
  min-height: 200px;
  position: relative;
  transition: background var(--sv-duration-normal) var(--sv-ease);
}
.feat:hover { background: var(--sv-surface-2); }
.feat-icon {
  width: 22px;
  height: 22px;
  color: var(--sv-accent);
}
.feat-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.feat-title {
  font-size: var(--sv-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.feat-desc {
  font-size: var(--sv-text-sm);
  color: var(--sv-fg-muted);
  line-height: 1.55;
  margin-top: auto;
}
.feat-num {
  position: absolute;
  top: var(--sv-space-4);
  right: var(--sv-space-5);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-faint);
}

/* ─── Split: for streamers / for viewers ─── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--sv-border);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-md);
  overflow: hidden;
}
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.split-col {
  background: var(--sv-surface-1);
  padding: var(--sv-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-5);
}
.split-tag {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  color: var(--sv-fg-faint);
}
.split-tag .star { color: var(--sv-accent); }
.split-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.split-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.split-list li {
  display: flex;
  gap: var(--sv-space-4);
  padding: var(--sv-space-3) 0;
  border-bottom: 1px solid var(--sv-border);
  font-size: var(--sv-text-md);
  color: var(--sv-fg);
  line-height: 1.4;
}
.split-list li:last-child { border-bottom: 0; }
.split-list .idx {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-faint);
  flex: 0 0 24px;
  padding-top: 3px;
}
.split-list .body small {
  display: block;
  margin-top: 2px;
  color: var(--sv-fg-muted);
  font-size: var(--sv-text-sm);
}

/* ─── Preview shelf (a faux app screen, optional motif) ─── */
.shelf {
  margin-top: var(--sv-space-10);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-md);
  overflow: hidden;
  background: var(--sv-surface-1);
}
.shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sv-space-3) var(--sv-space-5);
  border-bottom: 1px solid var(--sv-border);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shelf-head .dots { display: flex; gap: 6px; }
.shelf-head .dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sv-surface-4);
}
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sv-border);
}
@media (max-width: 800px) { .shelf-grid { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--sv-surface-1);
  padding: var(--sv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  position: relative;
  min-height: 180px;
}
.tile-vid {
  aspect-ratio: 16/9;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(168,85,247,0.25), transparent 55%),
    radial-gradient(140% 100% at 80% 100%, rgba(59,130,246,0.18), transparent 60%),
    linear-gradient(135deg, #1a1a22, #0e0e12);
  border-radius: var(--sv-radius-sm);
  position: relative;
  overflow: hidden;
}
.tile-vid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.tile-live {
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--sv-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sv-accent);
  color: #0a0014;
  padding: 3px 6px;
  border-radius: 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tile-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #0a0014;
}
.tile-viewers {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--sv-font-mono);
  font-size: 10px;
  color: #ededf0;
  background: rgba(0,0,0,0.55);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.tile-title {
  font-size: var(--sv-text-sm);
  color: var(--sv-fg);
  font-weight: 500;
  line-height: 1.3;
}
.tile-meta {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-faint);
  letter-spacing: 0.04em;
  display: flex;
  gap: var(--sv-space-3);
}
.tile-meta .ch {
  color: var(--sv-fg-muted);
}

/* ─── Roadmap ─── */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sv-border);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-md);
  overflow: hidden;
}
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } }
.tl-cell {
  background: var(--sv-surface-1);
  padding: var(--sv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  min-height: 160px;
}
.tl-date {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-fg-faint);
}
.tl-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  font-family: var(--sv-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sv-fg-muted);
  width: fit-content;
}
.tl-state.done { color: var(--sv-fg-dim); }
.tl-state.done::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-fg-dim); }
.tl-state.now { color: var(--sv-accent); }
.tl-state.now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-accent); animation: pulse 1.6s var(--sv-ease) infinite; }
.tl-state.next { color: var(--sv-fg-muted); }
.tl-state.next::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-border-strong); }
.tl-title {
  font-size: var(--sv-text-md);
  font-weight: 500;
  line-height: 1.35;
  color: var(--sv-fg);
}
.tl-cell:nth-child(2) { background: linear-gradient(180deg, var(--sv-surface-1), rgba(168,85,247,0.04)); }

/* ─── CTA / signup section ─── */
.cta {
  border: 1px solid var(--sv-border);
  background:
    radial-gradient(800px 300px at 80% 0%, rgba(168,85,247,0.18), transparent 60%),
    var(--sv-surface-1);
  border-radius: var(--sv-radius-md);
  padding: var(--sv-space-12) var(--sv-space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sv-space-10);
  align-items: end;
}
@media (max-width: 800px) {
  .cta { grid-template-columns: 1fr; padding: var(--sv-space-8) var(--sv-space-6); }
}
.cta h3 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: var(--sv-space-4);
}
.cta h3 em { font-style: normal; color: var(--sv-accent); }
.cta p {
  color: var(--sv-fg-muted);
  font-size: var(--sv-text-md);
  line-height: 1.55;
  max-width: 420px;
}

/* ─── Footer ─── */
.footer {
  border-top: 1px solid var(--sv-border);
  padding: var(--sv-space-10) 0 var(--sv-space-6);
  position: relative;
  z-index: 3;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sv-space-10);
  margin-bottom: var(--sv-space-10);
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sv-space-6); } }
.fcol h4 {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  color: var(--sv-fg-faint);
  font-weight: 500;
  margin-bottom: var(--sv-space-3);
}
.fcol a, .fcol p {
  display: block;
  font-size: var(--sv-text-sm);
  color: var(--sv-fg-muted);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--sv-duration-fast) var(--sv-ease);
}
.fcol a:hover { color: var(--sv-fg); }

.fbig {
  font-family: var(--sv-font-sans);
  font-weight: 700;
  font-size: clamp(80px, 14vw, 220px);
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--sv-fg);
  margin-bottom: var(--sv-space-6);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.fbig em { font-style: normal; color: var(--sv-accent); }
.fbig .slash { color: var(--sv-fg-faint); font-weight: 400; }

.legal {
  display: flex;
  justify-content: space-between;
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-xs);
  color: var(--sv-fg-faint);
  letter-spacing: 0.04em;
  padding-top: var(--sv-space-4);
  border-top: 1px solid var(--sv-border);
}
@media (max-width: 600px) { .legal { flex-direction: column; gap: var(--sv-space-2); } }

/* ─── Small star/asterisk mark ─── */
.star-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  transform: translateY(0.08em);
}

/* utility */
.hidden-sm { }
@media (max-width: 700px) {
  .hidden-sm { display: none; }
}

/* launch card — под превью эфира */
.launch-card {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(168,85,247,0.12), rgba(236,72,153,0.06)),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(168,85,247,0.35);
  box-shadow: 0 10px 30px rgba(168,85,247,0.18);
}
.launch-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #a855f7, #7c3aed);
  color: #fff;
  line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), 0 6px 18px rgba(124,58,237,0.35);
}
.launch-card__day {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.launch-card__mon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-top: 4px;
  opacity: 0.95;
}
.launch-card__year {
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-top: 3px;
  opacity: 0.75;
}
.launch-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.launch-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a855f7;
  font-weight: 700;
}
.launch-card__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 0 0 rgba(168,85,247,0.6);
  animation: lc-pulse 1.6s infinite;
}
.launch-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.launch-card__sub {
  font-size: 12px;
  opacity: 0.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@keyframes lc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168,85,247,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(168,85,247,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
}