[data-v2] {
  --ink: #000000;
  --panel: #08060C;
  --accent-rgb: 168 85 247;
  --accent-soft-rgb: 192 132 252;
  --accent-deep-rgb: 108 43 217;
  --accent-hover-rgb: 90 34 181;
  --accent-ink-rgb: 88 28 190;
  --violet: #6C2BD9;
  --violet-lit: #7B3FE4;
  --bloom: #A855F7;
  --bloom-soft: #C084FC;
  --lime: #C6F432;
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.07);
  --r-panel: 28px;
  --r-media: 16px;
  --pad-edge: 20px;
  --ease-over: cubic-bezier(.21,1.02,.73,1);
  --ease-long: cubic-bezier(.06,.71,.55,1);
  --ease-line: cubic-bezier(.16,1,.3,1);
  --font-v2: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

[data-v2] [data-accent] {
  --accent-rgb: 168 85 247;
  --accent-soft-rgb: 192 132 252;
  --accent-deep-rgb: 108 43 217;
  --accent-hover-rgb: 90 34 181;
  --accent-ink-rgb: 88 28 190;
}

[data-v2],
[data-v2] body { background-color: #000000; }

[data-v2] body,
[data-v2] .font-sans,
[data-v2] .font-mono,
[data-v2] .font-display,
[data-v2] .display,
[data-v2] .meta { font-family: var(--font-v2); }

[data-v2] .display {
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.03em;
  line-height: .94;
}

[data-v2] .meta {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 500;
}
@media (min-width: 640px) { [data-v2] .meta { font-size: 12px; } }

[data-v2] .pill {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 1.35rem;
  white-space: nowrap;
}
[data-v2] .pill-solid { background: #ffffff; color: #000000; font-weight: 500; }
[data-v2] .pill-ghost { border: 1px solid var(--line); color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  [data-v2] .pill { transition: transform .3s ease-out, opacity .3s ease-out; }
  [data-v2] .pill:hover { transform: translateY(-2px); }
  [data-v2] .pill-ghost:hover { border-color: rgba(255,255,255,.32); }
}

[data-v2] .rule { height: 1px; background: var(--line); border: 0; }

[data-v2].scroll-smooth { scroll-behavior: auto; }

.v2-nav {
  position: fixed;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  z-index: 55;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: .25rem;
  border-radius: 999px;
  background: transparent;
  padding: 6px 6px 6px 8px;
  box-shadow: 0 18px 46px -22px rgba(0,0,0,0);
  max-width: calc(100vw - 24px);
  transition: background-color .5s var(--ease-long), box-shadow .5s var(--ease-long);
}
.v2-nav.on {
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 46px -22px rgba(0,0,0,.85);
}

.v2-nav-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  flex: 0 0 auto;
  transition: background-color .5s var(--ease-long);
}
.v2-nav.on .v2-nav-mark { background: #000000; }
.v2-nav-mark svg { width: 17px; height: 17px; fill: #ffffff; }
.v2-nav a.v2-nav-link {
  padding: 0 .8rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  white-space: nowrap;
  transition: color .5s var(--ease-long);
}
.v2-nav.on a.v2-nav-link { color: rgba(0,0,0,.66); }
@media (hover: hover) and (pointer: fine) {
  .v2-nav a.v2-nav-link:hover { color: #ffffff; }
  .v2-nav.on a.v2-nav-link:hover { color: #000000; background: rgba(0,0,0,.06); }
}

.v2-nav .v2-nav-cta {
  background: #ffffff;
  color: #000000;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .5s var(--ease-long), color .5s var(--ease-long);
}
.v2-nav.on .v2-nav-cta { background: #000000; color: #ffffff; }
.v2-nav-burger {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #ffffff;
  flex: 0 0 auto;
  transition: color .5s var(--ease-long);
}
.v2-nav.on .v2-nav-burger { color: #000000; }
.v2-nav-burger svg { width: 18px; height: 18px; }
.v2-nav-burger,
.v2-nav .v2-nav-cta { position: relative; }
.v2-nav-burger::after,
.v2-nav .v2-nav-cta::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
}
@media (min-width: 1024px) {
  .v2-nav .v2-nav-burger { display: none; }
}

@media (max-width: 1023px) {
  .v2-nav .v2-nav-links { display: none; }
  .v2-nav .v2-nav-cta { font-size: 12px; padding: 0 .85rem; }
}

.v2-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #050409;
  display: grid;
  align-content: center;
  padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom));
}
.v2-sheet[hidden] { display: none; }
.v2-sheet-close {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.05); color: #fff; cursor: pointer;
}
.v2-sheet-close svg { width: 20px; height: 20px; }
.v2-sheet-close:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.v2-sheet-inner { display: grid; gap: .35rem; max-width: 26rem; margin-inline: auto; width: 100%; }
.v2-sheet-inner a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1.25rem;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  font-size: 17px;
}
.v2-sheet-inner a:active { background: rgba(255,255,255,.07); }
.v2-sheet-cta {
  margin-top: 1rem;
  background: #ffffff;
  color: #000000 !important;
  justify-content: center;
  font-weight: 500;
}

/* Индустриальный слой старого дизайна: зерно, чертёжные сетки, зебра,
   призраки номеров и крестики на пересечениях. Он спорит с воздухом первого
   экрана, поэтому на страницах v2 выключен целиком. */
[data-v2] .grain::after,
[data-v2] .hazard,
[data-v2] .ghost-wrap,
[data-v2] .cross,
[data-v2] .rail-dots,
[data-v2] .rail-progress { display: none; }

[data-v2] .paper,
[data-v2] .blueprint {
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Жёсткие линии уступают место воздуху. */
[data-v2] section[class*="border-"],
[data-v2] .shell[class*="border-"] { border-color: transparent; }
[data-v2] [class*="divide-y"] > * + * { border-top-color: rgb(255 255 255 / .05); }
[data-v2] .paper [class*="divide-y"] > * + * { border-top-color: rgb(10 10 12 / .07); }
[data-v2] .rule { border-color: rgb(255 255 255 / .12); }

/* Всё, что было прямоугольным, получает скругления системы. */
[data-v2] .rail-panel .seg,
[data-v2] .seg { border-radius: 999px; overflow: hidden; }
[data-v2] .rail-body > div[class*="border"],
[data-v2] .band-panel,
[data-v2] .card,
[data-v2] figure[class*="border"],
[data-v2] div[class*="border"][class*="p-"] { border-radius: var(--r-media); }

/* Нижний блок: кнопки-плиты и сетка ячеек читались как панель управления,
   а не как приглашение написать. */
[data-v2] .band-accent a[class*="bg-accent-deep"],
[data-v2] .band-accent a[class*="bg-ink"] {
  border-radius: 999px;
  padding-block: 1.15rem;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 15px;
}
[data-v2] .band-accent a[class*="bg-ink"] {
  background: rgb(255 255 255 / .12);
}
[data-v2] .band-accent a[class*="bg-ink"]:hover {
  background: rgb(255 255 255 / .2);
}

[data-v2] dl[class*="grid"] > div,
[data-v2] .shell > dl > div { border-color: rgb(255 255 255 / .07); }

@media (prefers-reduced-motion: reduce) {
  .v2-nav { transition: none; }
}

.hero-screen { margin: 0; position: relative; }
.hero-screen img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgb(255 255 255 / .14); border-top: 0;
  border-radius: 0 0 14px 14px; background: #0d0d10;
}
.hero-screen-bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .9rem; background: #141419;
  border: 1px solid rgb(255 255 255 / .14); border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.hero-screen-bar .dots { display: flex; gap: .38rem; }
.hero-screen-bar .dots i { width: .5rem; height: .5rem; border-radius: 50%; background: rgb(255 255 255 / .2); }
.hero-screen-bar .url {
  flex: 1; max-width: 260px; font-size: 11.5px; color: rgb(255 255 255 / .6);
  background: #0d0d10; border: 1px solid rgb(255 255 255 / .08);
  border-radius: 999px; padding: .25rem .8rem;
  font-family: ui-monospace, Consolas, monospace;
}
@media (min-width: 1024px) {
  .hero-screen { box-shadow: 0 50px 110px -50px rgb(0 0 0 / .9); }
}

#heroWrap { overflow: hidden; }
#heroWrap::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 42%, #000 26%, transparent 76%);
          mask-image: radial-gradient(ellipse 92% 74% at 50% 42%, #000 26%, transparent 76%);
}
#heroWrap > .shell { position: relative; z-index: 1; }

.hero-screen::before {
  content: "";
  position: absolute; inset: -14% -10% -20%; z-index: -1;
  background: radial-gradient(ellipse at 50% 48%, rgb(var(--accent-rgb) / .34), rgb(var(--accent-rgb) / .12) 42%, transparent 72%);
  filter: blur(46px);
  pointer-events: none;
}

@media (max-width: 1023px) {
  #heroWrap::before { background-size: 56px 56px; }
  .hero-screen::before { inset: -10% -6% -14%; filter: blur(22px); }
}

.flip { position: relative; background: #0a0a0c; }
.flip-face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgb(255 255 255 / .15);
  background: #0a0a0c;
}
.flip-front { min-height: var(--view, 100lvh); padding: 7rem 0 3.5rem; overflow: hidden; }
.flip-back { padding: 4rem 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .flip-pin {
    position: sticky;
    perspective: 1900px;
  }
  .js .flip-card {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .js .flip-front { border-bottom: 0; }
  .js .flip-back {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--view, 100lvh);
    padding: 0;
    border-bottom: 0;
    transform: rotateX(180deg);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .js .flip-front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
}

#sites { overflow: hidden; }
#sites::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 96% 80% at 50% 56%, #000 24%, transparent 78%);
          mask-image: radial-gradient(ellipse 96% 80% at 50% 56%, #000 24%, transparent 78%);
}
#sites::after {
  content: "";
  position: absolute; left: -12%; right: -12%; bottom: -34%; height: 76%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%, rgb(var(--accent-rgb) / .32), rgb(var(--accent-rgb) / .1) 44%, transparent 72%);
  filter: blur(52px);
}
#sites > .shell { position: relative; z-index: 1; }
@media (max-width: 1023px) {
  #sites::before { background-size: 56px 56px; }
  #sites::after { filter: blur(38px); }
}

#navSheet { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: no-preference) {
  [data-v2].native-scroll { scroll-behavior: smooth; }
}

#navPill.away { opacity: 0; pointer-events: none; transform: translateY(120%); }