@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --black: #08090b;
  --red: #e3282d;
  --text: #f2f4f6;
  --muted: #8b939e;
  --line: rgba(255, 255, 255, .08);
  --green: #31d66b;
  --gold: #e4b74d;
  --blue: #5865f2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--black);
  color: var(--text);
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
}

body { overflow-x: hidden; }

a { color: inherit; }

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #07080a;
}

.bg-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 52% at 8% -8%, rgba(227, 40, 45, .52), transparent 56%),
    radial-gradient(ellipse 48% 38% at 94% 16%, rgba(227, 40, 45, .26), transparent 58%),
    radial-gradient(ellipse 55% 42% at 88% 78%, rgba(227, 40, 45, .22), transparent 60%),
    radial-gradient(ellipse 40% 32% at 12% 88%, rgba(88, 101, 242, .16), transparent 68%);
  animation: bgPulse 14s ease-in-out infinite;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .2) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .2) 100%);
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: .28;
  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='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.bg-mark {
  position: absolute;
  right: -3vw;
  bottom: 4%;
  font-size: clamp(160px, 24vw, 360px);
  font-weight: 900;
  letter-spacing: -.08em;
  color: rgba(227, 40, 45, .12);
  line-height: .8;
  user-select: none;
  pointer-events: none;
}

@keyframes bgPulse {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
  50% { transform: scale(1.06) translate3d(2%, 1%, 0); opacity: .88; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none; }
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 11, .78);
  backdrop-filter: blur(16px);
}

.brand {
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.03em;
  text-decoration: none;
}

.brand-red { color: var(--red); }

.nav-links {
  display: flex;
  gap: 18px;
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.nav-links a { text-decoration: none; }
.nav-links a:hover { color: #fff; }

.nav-launch {
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.nav-locale-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.locale-switch button {
  margin: 0;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.locale-switch button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .05);
}

.locale-switch button.active,
.locale-switch button[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(227, 40, 45, .55);
  background: rgba(227, 40, 45, .16);
}

.hero, .strip, .voice-band, .download, .footer {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 48px;
  align-items: center;
  padding: 72px 0 56px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 860;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.lede, .download-lead {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-note {
  margin: 14px 0 0;
  color: #66707c;
  font-size: 13px;
}

.btn, .dl {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 750;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 28px rgba(227, 40, 45, .28);
}

.btn-primary:hover { filter: brightness(1.06); }
.btn-win:hover, .dl-win:hover { border-color: rgba(227, 40, 45, .45); }

.btn-win, .dl-win {
  border: 1px solid rgba(255, 255, 255, .12);
  background: #16191e;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.app-frame {
  display: grid;
  grid-template-columns: 52px 148px minmax(0, 1fr);
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(227, 40, 45, .22);
  border-radius: 18px;
  background: #0d1014;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 48px rgba(227, 40, 45, .08);
}

.mock-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-right: 1px solid rgba(227, 40, 45, .16);
  background: #090b0e;
}

.rail-dot, .rail-add, .tile span {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.rail-dot {
  width: 34px;
  height: 34px;
  background: #242830;
}

.rail-dot.active {
  background: radial-gradient(circle at 35% 30%, #ef4a4e, #7a171b);
  box-shadow: 0 0 0 2px rgba(227, 40, 45, .35);
}

.rail-add {
  width: 34px;
  height: 34px;
  border: 1px dashed #3a414b;
  color: #7b8490;
}

.mock-channels {
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: #0b0e12;
  font-size: 12px;
}

.mock-cat {
  margin: 12px 0 6px;
  color: #6d7682;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.mock-ch, .mock-user {
  padding: 6px 8px;
  border-radius: 7px;
  color: #c5ccd4;
}

.mock-ch.on, .mock-user {
  background: rgba(255, 255, 255, .04);
}

.mock-user { margin-left: 10px; font-size: 11px; }
.speaking-green { color: var(--green); }
.speaking-raid { color: var(--gold); }
.speaking-cmd { color: #9aa3ff; }

.mock-main { padding: 14px; }
.mock-top {
  margin-bottom: 14px;
  color: #8b939e;
  font-size: 11px;
  font-weight: 700;
}

.mock-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tile {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
}

.tile span {
  width: 54px;
  height: 54px;
  border: 2px solid #2a3038;
  background: #1a1e24;
  font-weight: 800;
}

.tile.speaking-green span {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(49, 214, 107, .12), 0 0 18px rgba(49, 214, 107, .25);
}

.tile.speaking-raid span {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(228, 183, 77, .14), 0 0 18px rgba(228, 183, 77, .28);
}

.tile.speaking-cmd span {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(88, 101, 242, .16), 0 0 18px rgba(88, 101, 242, .3);
}

.tile em {
  color: #d7dde4;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.strip { padding: 24px 0 64px; }

.strip h2, .voice-band h2, .download h2 {
  margin: 0 0 28px;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.03em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.grid article {
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 20, 25, .72);
}

.grid h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.voice-band {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: center;
  padding: 28px 0 72px;
}

.voice-band ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.voice-band li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px;
  color: #c9d0d7;
  line-height: 1.45;
}

.dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
}

.dot.green { background: var(--green); }
.dot.gold { background: var(--gold); }
.dot.blue { background: var(--blue); }

.rings {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.ring {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.ring.green { box-shadow: 0 0 0 4px var(--green), 0 0 28px rgba(49, 214, 107, .28); }
.ring.gold { box-shadow: 0 0 0 4px var(--gold), 0 0 28px rgba(228, 183, 77, .3); }
.ring.blue { box-shadow: 0 0 0 4px var(--blue), 0 0 28px rgba(88, 101, 242, .32); }

.download { padding-bottom: 80px; }
.download-lead { margin-bottom: 22px; }

.download-stack {
  display: grid;
  gap: 10px;
}

.dl {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #11151a;
  color: inherit;
}

.dl:hover { border-color: rgba(255, 255, 255, .16); }
.dl-primary { border-color: rgba(227, 40, 45, .45); background: linear-gradient(180deg, rgba(227, 40, 45, .18), #151014); }
.dl strong { font-size: 16px; }
.dl span { color: var(--muted); font-size: 13px; }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer a { text-decoration: none; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .55);
}

.sheet.hidden { display: none; }

.sheet-card {
  width: min(420px, 100%);
  padding: 22px 20px 18px;
  border: 1px solid rgba(227, 40, 45, .22);
  border-radius: 16px;
  background: #12151a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.sheet-card h3 { margin: 0 0 8px; font-size: 20px; }
.sheet-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.sheet-extra { display: grid; gap: 8px; margin-top: 16px; }
.sheet-extra.hidden { display: none; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.os-pick {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e1115;
}

.os-pick b { display: block; }
.os-pick small { color: var(--muted); }

@media (max-width: 900px) {
  .hero, .voice-band, .grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-locale-switch { margin-left: auto; }
  .hero { padding-top: 40px; }
  .hero-stage { order: -1; }
}

@media (max-width: 560px) {
  .nav { padding: 12px 16px; }
  .hero, .strip, .voice-band, .download, .footer {
    width: calc(100% - 28px);
  }
  .hero-actions .btn { width: 100%; }
  .rings { flex-wrap: wrap; }
  .footer { flex-direction: column; }
}