/* The look of every page of the site: the app's, brought here.

   The owner, 2026-10-13: «надо полностью изменить дизайн сайта на дизайн
   будущего как в нашем боте под его тематику». So this is the desktop of the
   app as a web page -- its wall behind everything, its pyramid where the logo
   stood, panels of glass with an outline of light and rounded corners, the
   glass models for icons, one gradient of light from cyan through violet to
   magenta. It replaces the "machine room" this file used to be: the drifting
   aurora, the scrolling grid, the scanlines, the cut corners with brackets and
   the typed shell prompt are gone, for the reason they went from the app --
   they were decoration from an older idea of the future.

   Linked after each page's own <style>, so it restyles without the pages being
   rewritten: where a page says var(--panel), it now gets glass. Fonts are served
   from this site -- the content policy allows fonts from 'self' only. */

@font-face { font-family: "JBM"; font-weight: 400; font-display: swap; src: url(/fonts/jbm-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JBM"; font-weight: 700; font-display: swap; src: url(/fonts/jbm-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JBM"; font-weight: 400; font-display: swap; src: url(/fonts/jbm-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JBM"; font-weight: 700; font-display: swap; src: url(/fonts/jbm-cyrillic-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --mono: "JBM", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --void: #05070B;
  --cy: #19F0FF;
  --mg: #FF2E97;
  --vi: #8C7BFF;
  --glass: linear-gradient(180deg, rgba(14, 22, 38, 0.56), rgba(8, 13, 24, 0.44));
  --edge: rgba(120, 160, 205, 0.22);
  --edge-lit: rgba(25, 240, 255, 0.60);
  --light: linear-gradient(100deg, var(--cy) 0%, var(--vi) 52%, var(--mg) 100%);
  /* The pages' own names for these, pointed at the new values, so every rule
     in a page's <style> that says var(--panel) is glass without being touched. */
  --ground: transparent;
  --panel: rgba(14, 22, 38, 0.50);
  --panel-raised: rgba(30, 44, 68, 0.50);
  --hairline: rgba(120, 160, 205, 0.20);
  --text: #E6EDF5;
  --muted: #93A1B2;
}

html { background: var(--void); }
body { background: transparent !important; position: relative; }

/* 1. THE WALL: the app's own, as a picture (ops/render-backdrop.mjs). Fixed, so
      the page moves over it as a panel moves over the desktop. Nothing here is
      animated -- the one thing that moves is the pyramid. */
.fx-wall {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  /* A layer of its own: the page scrolls over it without the wall being painted again. */
  transform: translateZ(0); will-change: transform; contain: strict;
  background: var(--void) url(/backdrop-1920.webp?v=3) center 30% / cover no-repeat;
}
/* A FILM'S GRAIN over the wall (1.32.0, «текстурнее»): a tile of points a shade lighter and darker,
   painted once with the wall's own layer -- nothing to redraw as the page scrolls. */
.fx-wall::after { content: ""; position: absolute; inset: 0; background: url(/grain.png) repeat; background-size: 160px 160px; }
/* THE PICTURE HAS TO HAVE THE SCREEN'S PIXELS. One picture of 1920 was stretched over
   whatever the window was, and on a full 2560 screen, or a phone held upright (three
   device pixels to one, and a wide picture cut to a tall strip), its thin lines went soft
   -- «становится мыльным», the owner, 2026-10-13. So: a large one for a large or dense
   screen, a tall one for a phone, and the small one only where it is enough. */
@media (min-width: 1500px), (min-width: 900px) and (min-resolution: 1.4dppx) {
  .fx-wall { background-image: url(/backdrop.webp?v=3); }
}
@media (max-width: 899px) and (orientation: portrait) {
  .fx-wall { background-image: url(/backdrop-tall.webp?v=3); }
}
/* A veil that thickens down the page: by the second screen there is text over
   the horizon, and it must read. */
.fx-veil {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0) 0, rgba(5, 7, 11, 0) 620px, rgba(5, 7, 11, 0.62) 1100px, rgba(5, 7, 11, 0.62) 100%);
}

/* A page that is all text (the guide, the offer, the policy) has no first screen to
   keep clear: the veil is over the whole of it, so every line reads. */
.fx-doc .fx-veil { background: rgba(5, 7, 11, 0.58); }

/* The pages' old hero glows and grid belong to the look this replaces. */
.hero::before, .hero::after, .cta::before, .vpn-promo::before { display: none !important; }
.hero { overflow: visible !important; }

/* 2. NOTHING HAS A CUT CORNER, AND NOTHING HAS A FRAME. The panels of the desktop
      are veils with no line round them (the owner, 2026-10-13: «у нас дизайн
      будущего, там нет рамок, чисто голограммы»); so is everything here. A border
      that a page's own style sets is kept as a TRANSPARENT one, so nothing moves by
      a pixel; what ends a panel is its tone and a little light inside it. */
.cut, .cut-sm { clip-path: none !important; }
.cut { border-radius: 14px; }
.cut-sm { border-radius: 10px; }

header {
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.78), rgba(6, 10, 18, 0.46)) !important;
  border-bottom: 1px solid transparent !important;
}
header::after { content: none !important; }

.card, .step, .price-card, .term, .faq details, details, .dl-card, .device, .screens figure, .note, .strip div, .chip, .vpn-promo, .cta-inner, .cta {
  background: var(--glass) !important;
  box-shadow: 0 0 46px rgba(6, 10, 18, 0.50), inset 0 0 70px rgba(25, 240, 255, 0.028) !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
}
.strip { background: transparent !important; gap: 12px !important; }
.strip b { background: var(--light); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.card, .price-card, .dl-card, .step { position: relative; transition: transform .18s, border-color .18s, box-shadow .18s; }
.card::after, .price-card::after, .term::after { content: none !important; }
/* The sheen across the top of the glass, as on a panel of the desktop. */
.card::before, .price-card::before, .dl-card::before, .term::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; pointer-events: none; border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0));
}
.card:hover, .price-card:hover, .dl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(25, 240, 255, 0.20), 0 0 70px rgba(255, 46, 151, 0.10), inset 0 0 70px rgba(25, 240, 255, 0.06) !important;
}
/* The one to choose is lit from within, not ringed. */
.dl-card.main, .price-card { box-shadow: 0 0 50px rgba(140, 123, 255, 0.22), inset 0 0 80px rgba(140, 123, 255, 0.10) !important; }

/* 3. THE MODELS. A feature is shown by the thing it is about, in glass -- the
      same pictures the app's menu is made of (cyber.js puts them in). */
.icon {
  width: 68px !important; height: 68px !important; margin: -6px 0 12px -6px !important;
  background: none !important; font-size: 0 !important;
}
.icon img { width: 68px; height: 68px; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.card:hover .icon img { transform: translateY(-3px) scale(1.06); transition: transform .2s; }

/* 4. LIGHT. One gradient, cyan through violet to magenta: on the name, on the
      words that matter, on the one button a page wants pressed. */
.logo-text, h1 .grad, .grad, h2 .grad, .brand b {
  background: var(--light) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
.btn { border-radius: 12px !important; letter-spacing: 0.02em; transition: transform .12s, box-shadow .16s, border-color .16s !important; }
.btn-primary, .btn-violet {
  background: var(--light) !important; color: #05070B !important;
  box-shadow: 0 10px 34px rgba(25, 240, 255, 0.22), 0 6px 40px rgba(255, 46, 151, 0.16) !important;
}
.btn-primary:hover, .btn-violet:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(25, 240, 255, 0.34), 0 8px 54px rgba(255, 46, 151, 0.26) !important; }
.btn-ghost {
  background: rgba(120, 160, 205, 0.13) !important; color: var(--text) !important;
  box-shadow: none !important; border: 1px solid transparent !important;
}
.btn-ghost:hover { background: rgba(120, 160, 205, 0.20) !important; box-shadow: 0 0 30px rgba(25, 240, 255, 0.20) !important; }
.btn small { opacity: 0.7; }

.eyebrow, .announce, .hero-note {
  background: rgba(14, 22, 38, 0.50) !important; border: 1px solid transparent !important; box-shadow: none !important;
}
.hero-note { border-radius: 12px; }
.eyebrow { color: var(--cy) !important; }
.dot { background: var(--cy) !important; box-shadow: 0 0 10px var(--cy) !important; }
.announce .new { background: var(--light) !important; color: #05070B !important; border-radius: 6px; }
.kicker { color: var(--cy) !important; }
.kicker::before { content: none; }
.tabs a.on { color: #fff !important; border-color: var(--cy) !important; }
.step::before {
  background: rgba(14, 22, 38, 0.7) !important; color: var(--cy) !important;
  border: 0; border-radius: 50%; box-shadow: 0 0 22px rgba(25, 240, 255, 0.30);
}
.split li::before, .price-list li::before { color: var(--cy) !important; }
summary::after { color: var(--cy) !important; }
a { text-underline-offset: 3px; }

/* 5. The terminal face stays for what is structural; body copy stays sans. */
.logo-text, .tabs a, .kicker, .eyebrow, .strip b, .price-num, .term, .term-body, .term-bar span, .btn, .step::before, .hero-note { font-family: var(--mono) !important; }
.logo-text { letter-spacing: 0.08em; }
.term-bar { background: rgba(255, 255, 255, 0.04) !important; border-radius: 16px 16px 0 0; }

/* 6. THE PYRAMID, where the tile of the logo used to stand: the model itself,
      turning (cyber.js; the same shader as the app's, through WebGL). */
.fx-pyramid { contain: layout paint; display: block; width: min(340px, 78vw); height: min(340px, 78vw); margin: -34px 0 -52px -46px; }
.fx-pyramid.small { width: min(240px, 60vw); height: min(240px, 60vw); margin: -28px 0 -34px -34px; }
.hero-mark { filter: none !important; }

/* On the landing the first screen is centred on it, as the app's desktop is. */
.hero-inner { text-align: center; }
.hero-inner .fx-pyramid { margin: -40px auto -56px; }
.hero-inner .hero-mark { margin-left: auto; margin-right: auto; }
.hero-inner .hero-badges, .hero-inner .hero-actions { justify-content: center; }
.hero-inner h1, .hero-inner .lede, .hero-inner .hero-note { margin-left: auto !important; margin-right: auto !important; }
.hero-inner .lede { max-width: 62ch; }
.hero-inner .hero-note { display: inline-block; }
.hero-inner .strip { text-align: left; }

footer { border-top: 1px solid transparent !important; background: linear-gradient(180deg, rgba(5, 7, 11, 0), rgba(5, 7, 11, 0.62) 90px); }

/* The legal pages and the guide: one column of glass. */
body > main > .wrap, main.wrap { position: relative; }
.note { border-left: 3px solid var(--cy) !important; }

@media (max-width: 560px) {
  .fx-pyramid { margin-left: auto; margin-right: auto; }
  .card, .step, .price-card, .term, details, .dl-card { border-radius: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .price-card, .dl-card, .btn { transition: none !important; }
}

/* The signs on the cards are neon tubes (cyber.js, neonIcon): the light runs along each as it
   comes into view, it catches and comes up to full; pointed at, a pulse runs its length. */
.card .icon svg.neon { display: block; overflow: visible; filter: drop-shadow(0 0 1.5px var(--neon)) drop-shadow(0 0 9px color-mix(in srgb, var(--neon) 55%, transparent)); transition: filter .18s ease-out; }
.card:hover .icon svg.neon { filter: drop-shadow(0 0 2.5px var(--neon)) drop-shadow(0 0 16px var(--neon)); }