/* The site's styles, from the mockup's Landing boards (phone and desktop).
   Phone first; one breakpoint at 960px switches to the desktop layout.
   No inline styles anywhere: the Content-Security-Policy allows only this file. */

/* Fonts, served from /static: Latin and Cyrillic subsets, plus the ruble sign on its own.
   Unbounded (the headline) blocks instead of swapping: shown in a narrower stand-in
   first, the title would start small and then grow. base.html preloads it, so the
   wait is short. */
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("fonts/onest-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("fonts/onest-cyrillic-400.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("fonts/onest-rub-400.woff2") format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url("fonts/onest-latin-600.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}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url("fonts/onest-cyrillic-600.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url("fonts/onest-rub-600.woff2") format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url("fonts/onest-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url("fonts/onest-cyrillic-700.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url("fonts/onest-rub-700.woff2") format("woff2");unicode-range:U+20BD}
@font-face{font-family:"Unbounded";font-weight:700;font-display:block;src:url("fonts/unbounded-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-weight:700;font-display:block;src:url("fonts/unbounded-cyrillic-700.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-latin-500.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}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-cyrillic-500.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root {
  --bg: #0B0D12;
  --text: #F1EEEA;
  --muted: #A3A09B;
  --soft: #CFCBC5;
  --accent: #F0675F;
  --accent-soft: #F08A84;
  --link-hover: #F59A94;
  --online: #34D399;
  --online-text: #CFE9DA;
  --glow-red: rgba(192, 53, 47, 0.45);
  /* The main buttons, from the mockup's button colour #E8544C */
  --btn: rgba(232, 84, 76, 0.78);
  --btn-dark: rgba(167, 60, 55, 0.78);
  --btn-edge: rgba(246, 187, 183, 0.35);
  --btn-glow: rgba(209, 76, 68, 0.32);
  --btn-glow-strong: rgba(209, 76, 68, 0.48);
  --font-body: "Onest", system-ui, sans-serif;
  --font-display: "Unbounded", "Onest", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* The design system: the mockup's "Design system" board (scale ui, base 16 px; buttons
     lg 56/56, md 48/48, sm 44/48 phone/desktop). Change them there, then copy them here */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: 18px;
  --t-xl: 20px;
  --t-2xl: 24px;
  --t-3xl: 30px;
  --t-4xl: 40px;
  --t-5xl: 48px;
  --t-6xl: 64px;
  --t-7xl: 104px;
  --btn-lg-h-phone: 56px;
  --btn-lg-font-phone: 18px;
  --btn-md-h-phone: 48px;
  --btn-md-font-phone: 16px;
  --btn-sm-h-phone: 44px;
  --btn-sm-font-phone: 14px;
  --btn-lg-h-desktop: 56px;
  --btn-lg-font-desktop: 20px;
  --btn-md-h-desktop: 48px;
  --btn-md-font-desktop: 18px;
  --btn-sm-h-desktop: 48px;
  --btn-sm-font-desktop: 18px;
  /* The buttons' sizes here and now: the phone ones, the desktop ones from 960px */
  --btn-lg-h: var(--btn-lg-h-phone);
  --btn-lg-font: var(--btn-lg-font-phone);
  --btn-md-h: var(--btn-md-h-phone);
  --btn-md-font: var(--btn-md-font-phone);
  --btn-sm-h: var(--btn-sm-h-phone);
  --btn-sm-font: var(--btn-sm-font-phone);
}

* { box-sizing: border-box; }

/* The scrollbar's room is kept on every page: the short login page would otherwise
   be wider than the landing, and the logo and map would jump sideways between them */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--link-hover); }

/* The page: a red glow at the top; no grid, as on the desktop board. The glow has a
   fixed height: sized to the page, it stretched into a red column down the long
   landing, behind the title, while short pages kept a small halo */
.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 32% 570px at 50% 0%, rgba(192, 53, 47, 0.22) 0, transparent 100%), var(--bg);
}
.page > header, .page > main, .page > footer { position: relative; }
.page > main { flex: 1; }

.wrap { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.muted { color: var(--muted); }

/* Glass: buttons, chips, cards */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-md-h);
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--btn-md-font);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.glass {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--text);
}
.glass:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
/* A tight halo centred on the button, plus a small dark shadow for depth */
.glass-red {
  background: linear-gradient(180deg, var(--btn), var(--btn-dark));
  border: 1px solid var(--btn-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 22px var(--btn-glow);
  color: #FFFFFF;
  transition: box-shadow 0.2s ease;
}
.glass-red:hover {
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 30px var(--btn-glow-strong);
}
.btn-small { min-height: var(--btn-sm-h); height: var(--btn-sm-h); padding: 0 16px; font-size: var(--btn-sm-font); }
.btn-small.glass-red { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 12px var(--btn-glow); }
.btn-small.glass-red:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 18px var(--btn-glow-strong); }
.btn-cta { min-height: var(--btn-lg-h); font-size: var(--btn-lg-font); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-weight: 600;
  font-size: var(--t-sm);
}
.chip-accent { color: var(--accent-soft); }

.card {
  background: rgba(22, 22, 25, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
}
.card-best { border-color: rgba(240, 103, 95, 0.55); box-shadow: 0 0 40px rgba(192, 53, 47, 0.25); }
/* With a mouse, a card's rim lights up in the button colour */
@media (hover: hover) {
  .card { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
  .card:hover { border-color: var(--btn-edge); box-shadow: 0 0 0 1px var(--btn-edge), 0 0 36px var(--btn-glow); }
}
/* Phones: Safari drops blurred layers while scrolling (cards vanish until you scroll
   back), so cards get a solid backdrop there; the few glass buttons keep the blur */
@media (max-width: 959px) {
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 22, 28, 0.92); }
}

/* Moving between pages: browsers that can crossfade from one page to the next do,
   and the logo and map, in the same place on both, stay put */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Header: the logo, and Войти or (logged in) Кабинет */
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-base);
}
.brand:hover { color: var(--text); }
.brand img { display: block; width: 32px; height: 32px; border-radius: 50%; }
/* Кабинет: quieter glass than Войти, with the email's first letter in a red badge */
.header-account { padding-left: 6px; gap: 10px; }
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--btn), var(--btn-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
}

/* The map behind the hero: one SVG per layout, the phone one by default */
.backdrop { position: absolute; left: 0; right: 0; top: 0; height: 760px; overflow: hidden; pointer-events: none; }
.map { position: absolute; top: 0; left: 50%; }
.map-desktop { display: none; margin-left: -640px; }
.map-tablet { display: none; margin-left: -480px; }
.map-phone { margin-left: -320px; }
@media (min-width: 640px) {
  .map-phone { display: none; }
  .map-tablet { display: block; }
}
.map-land { opacity: 0.21; }
.backdrop-quiet .map-land { opacity: 0.12; }
.server-dot { fill: var(--online); filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.85)); }
.server-ring {
  fill: none;
  stroke: var(--online);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: online-ping 2s ease-out infinite;
}
@keyframes online-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3.2); opacity: 0; } }
.server-label { fill: var(--online-text); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 20px; padding-bottom: 40px; text-align: center; }
.hero-logo { display: block; width: 176px; height: 176px; filter: drop-shadow(0 0 32px var(--glow-red)); }
.hero h1 { --hero-title: var(--t-6xl); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-title { font-size: var(--hero-title); line-height: 0.95; letter-spacing: -0.03em; }
/* As wide as Крыса above it, never wider: in Unbounded "Быстрая, живучая" is that
   wide at 0.33 of the title's size, whatever the title's size is */
.hero-tagline { font-size: calc(var(--hero-title) * 0.33); line-height: 1.15; color: var(--accent); white-space: nowrap; }
.hero-lead { font-size: var(--t-base); line-height: 1.5; }
/* The facts and the two buttons below them; on desktop the buttons span the facts' width */
.hero-offer { display: flex; flex-direction: column; align-items: stretch; gap: 22px; align-self: stretch; }
.facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; align-self: center; }
.facts li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-base); font-weight: 500; color: #DAD6D0; }
.fact-check { flex: none; fill: none; stroke: #E8544C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; }
.hero-note { font-size: var(--t-sm); line-height: 1.5; }

/* Sections */
.section { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.section h2 { font-size: var(--t-2xl); }
.section-head { display: flex; flex-direction: column; gap: 8px; }
.section-note { font-size: var(--t-base); }
.small-note { font-size: var(--t-sm); }

.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-text { display: flex; flex-direction: column; gap: 4px; }
.step-text strong { font-size: var(--t-base); }
.step-text span { font-size: var(--t-base); line-height: 1.45; }
.num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(240, 103, 95, 0.14);
  border: 1px solid rgba(240, 103, 95, 0.35);
  color: var(--accent-soft);
  font-weight: 700;
  font-size: var(--t-base);
}

.plans { display: flex; flex-direction: column; gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 12px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-head strong { font-size: var(--t-lg); }
.plan-price { display: flex; align-items: baseline; gap: 10px; }
.plan-price span:first-child { font-size: var(--t-3xl); font-weight: 700; }
.plan-price .muted { font-size: var(--t-base); }

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: var(--t-base); }
.faq p { padding: 0 20px 16px; font-size: var(--t-base); line-height: 1.5; }

/* Login and account: one card under the logo and a title, as on the mockup's Login board.
   The logo has the landing's size and place (20 px under the header, 176 px; 18 px and
   252 px on desktop) */
[hidden] { display: none !important; }
.wrap.auth { max-width: 472px; padding-top: 20px; padding-bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.auth-logo { display: block; width: 176px; height: 176px; filter: drop-shadow(0 0 28px var(--glow-red)); }
.auth-step { align-self: stretch; display: flex; flex-direction: column; gap: 22px; }
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.auth-head h1 { font-size: var(--t-3xl); }
.auth-head p { font-size: var(--t-base); line-height: 1.5; }
.auth-email { color: var(--text); overflow-wrap: anywhere; }
.auth > .panel { align-self: stretch; }
.panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(20, 22, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.field-group { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: var(--t-sm); font-weight: 600; color: #DAD6D0; }
.label-center { text-align: center; }
.field {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: var(--t-lg);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  outline: none;
}
.field::placeholder { color: #6E6B67; }
.field:focus { border-color: rgba(246, 187, 183, 0.6); box-shadow: 0 0 0 3px rgba(232, 84, 76, 0.25); }
.field-invalid { border-color: rgba(240, 103, 95, 0.8); box-shadow: 0 0 0 3px rgba(240, 103, 95, 0.2); }
/* The code: one box per digit */
.digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.digit {
  width: 100%;
  min-width: 0;
  height: 64px;
  padding: 0;
  border-radius: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-3xl);
  color: var(--text);
  caret-color: #E8544C;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  outline: none;
}
.digit-filled { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); }
.digit:focus { border-color: rgba(246, 187, 183, 0.6); box-shadow: 0 0 0 3px rgba(232, 84, 76, 0.25); }
.digits.field-invalid { border: 0; box-shadow: none; }
.digits.field-invalid .digit { border-color: rgba(240, 103, 95, 0.8); box-shadow: 0 0 0 2px rgba(240, 103, 95, 0.18); }
.form-hint { margin-top: -6px; font-size: var(--t-sm); text-align: center; }
.form-error { font-size: var(--t-sm); line-height: 1.4; color: var(--link-hover); text-align: center; }
.form-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--t-sm); }
.link-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.link-button:hover { color: var(--link-hover); }
.link-button:only-child, #change-email { margin-left: auto; }
.btn:disabled { opacity: 0.6; cursor: default; }

/* The account page: the mockup's account boards, one column with Выйти beside the title */
.wrap.account { max-width: 520px; padding-top: 20px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 18px; }
.account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.account-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.account-head h1 { font-size: var(--t-3xl); }
.account-head .btn { flex: none; }
.account-email { font-size: var(--t-sm); overflow-wrap: anywhere; }
.account .panel { gap: 16px; }
.account .panel h2 { font-size: var(--t-lg); }
.account .panel p { font-size: var(--t-sm); line-height: 1.5; }
/* The text under a headline with no subscription or no answer from the panel */
.account .panel .panel-lead { font-size: var(--t-base); }
.account-term { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.account-headline { font-size: var(--t-3xl); font-weight: 700; }
.panel > .account-headline { font-size: var(--t-2xl); }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: var(--t-sm); }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; }
.badge-active { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); color: #7EE2B8; }
.badge-active .badge-dot { background: var(--online); box-shadow: 0 0 8px rgba(52, 211, 153, 0.9); }
.badge-limited { background: rgba(245, 184, 61, 0.12); border: 1px solid rgba(245, 184, 61, 0.4); color: #F7CD72; }
.badge-limited .badge-dot { background: #F5B83D; box-shadow: 0 0 8px rgba(245, 184, 61, 0.9); }
.badge-expired, .badge-disabled { background: rgba(240, 103, 95, 0.12); border: 1px solid rgba(240, 103, 95, 0.4); color: var(--link-hover); }
.badge-expired .badge-dot, .badge-disabled .badge-dot { background: var(--accent); box-shadow: 0 0 8px rgba(240, 103, 95, 0.9); }
.traffic { display: flex; flex-direction: column; gap: 8px; }
.traffic-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-sm); }
.traffic-note { font-size: var(--t-sm); }
.cable { display: block; overflow: visible; }
.cable-track-segment { fill: rgba(255, 255, 255, 0.08); }
.cable-used-segment { fill: #E8544C; }
.cable-full .cable-used-segment { fill: #C8433C; }
.cable-used { filter: drop-shadow(0 0 5px rgba(232, 84, 76, 0.55)); }
.cable-plug { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.cable-plug-body { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.cable-plug-pin { fill: #D9A63A; }

/* The trial card (the mockup's "Account · trial funnel"): rimmed in the button colour,
   as the offer the page leads to */
.panel-offer { border-color: rgba(246, 187, 183, 0.45); box-shadow: 0 0 0 1px rgba(232, 84, 76, 0.25), 0 0 40px rgba(209, 76, 68, 0.18), 0 20px 60px rgba(0, 0, 0, 0.45); }
.trial-offer { display: flex; flex-direction: column; gap: 16px; }
.trial-head { display: flex; flex-direction: column; gap: 6px; }
.trial-head .chip { align-self: flex-start; padding: 4px 10px; font-size: var(--t-xs); }
.account .trial h2 { font-size: var(--t-xl); }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tier { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--t-sm); }
.tier strong { font-size: var(--t-lg); }
.tier-plus { background: rgba(232, 84, 76, 0.08); border-color: rgba(246, 187, 183, 0.35); color: var(--accent-soft); }
.tier-plus strong { color: var(--text); }
/* The captcha widget (_captcha.html, captcha.js; the mockup's "Captcha · widget"): a
   row like an input, its state on the left, what it's doing in the middle, Повторить
   on the right when it fails, and how far it has got as a thin line along the bottom */
.cw { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; }
.cw[data-state="done"] { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.cw[data-state="failed"] { border-color: rgba(240, 103, 95, 0.55); background: rgba(240, 103, 95, 0.07); }
.cw-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.cw-icon .spin { width: 20px; height: 20px; border-width: 2px; }
.cw-mark { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.cw-mark svg { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cw-mark-ok { background: rgba(52, 211, 153, 0.15); border: 1px solid rgba(52, 211, 153, 0.5); }
.cw-mark-ok svg { stroke: #7EE2B8; }
.cw-mark-fail { background: rgba(240, 103, 95, 0.15); border: 1px solid rgba(240, 103, 95, 0.55); }
.cw-mark-fail svg { stroke: var(--link-hover); }
.cw:not([data-state="checking"]) .spin { display: none; }
.cw[data-state="done"] .cw-mark-ok, .cw[data-state="failed"] .cw-mark-fail { display: flex; }
.cw-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sm); line-height: 1.35; }
.cw-title { font-weight: 600; }
.cw-retry { flex: none; min-height: 44px; padding: 0 2px; border: 0; background: none; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; color: var(--accent); cursor: pointer; }
.cw-retry:hover { color: var(--link-hover); }
.cw-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #E8544C, #F0857E); transform: scaleX(0); transform-origin: left; transition: transform 0.2s linear; }
.cw:not([data-state="checking"]) .cw-progress { display: none; }

/* Linking Telegram (the funnel board): the "Что дальше" checklist on the micro-trial,
   the linking card with the bot link (phone) or its QR code (computer), and the note
   once it's done */
.divider { height: 1px; background: rgba(255, 255, 255, 0.08); }
/* A step: its number in the title's line, like a numbered heading; the content below at full width */
.next-step, .next-offer, .next-linking, .tg-link-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.next-text { display: flex; flex-direction: column; gap: 4px; }
.next-title { display: flex; align-items: center; gap: 10px; }
.next-title .num { width: 28px; height: 28px; font-size: var(--t-sm); }
.next-text strong { font-size: var(--t-base); }
.account .panel .next-text .muted, .next-hint, .tg-note { font-size: var(--t-sm); line-height: 1.5; }
.next-hint, .tg-note { font-size: var(--t-xs); }
.num-done { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); color: #7EE2B8; }
.note-row { flex-direction: row; gap: 14px; align-items: flex-start; }
.note-text { display: flex; flex-direction: column; gap: 4px; }
.shortcut { text-align: center; }
/* On a computer, as the subscription link's: the code on the left, the text, the
   computer's Telegram and the wait beside it */
.tg-desktop { display: none; gap: 24px; align-items: flex-start; }
/* As tall as the code: the text at its top, the wait at its bottom, the button just above the wait */
.tg-desktop-col { flex: 1; align-self: stretch; display: flex; flex-direction: column; gap: 12px; min-width: 0; line-height: 1.5; }
/* A long label in a narrow column: one line at body size */
.tg-desktop-col .btn { margin-top: auto; padding: 0 12px; font-size: var(--t-base); }
.tg-qr { flex: none; width: 200px; aspect-ratio: 1; border-radius: 16px; background: #F1EEEA; padding: 6px; }
.tg-qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.tg-wait { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); }
.tg-wait .spin { width: 18px; height: 18px; border-width: 2px; }
/* Linking in step 2's place: a red arc spins round the step's number, the wait itself.
   On a computer that replaces the wait line, kept for screen readers only; the phone
   keeps its line under Открыть бота */
@media (min-width: 960px) {
  .num-wait { position: relative; border-color: rgba(255, 255, 255, 0.15); }
  .num-wait::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent; border-top-color: #E8544C; animation: spin 0.9s linear infinite; }
  .next-linking .tg-desktop-col .tg-wait { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) { .num-wait::after { animation-duration: 3s; } }

/* The subscription link with its QR code (the account boards): on a phone the code
   waits behind Показать QR-код, under the buttons; on a computer it's on the left */
.link-qr { display: flex; flex-direction: column; gap: 12px; }
.link-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sub-qr-col { order: 1; display: none; flex-direction: column; align-items: center; gap: 10px; }
.link-qr.qr-open .sub-qr-col { display: flex; }
.sub-qr { width: 220px; aspect-ratio: 1; border-radius: 16px; background: #F1EEEA; padding: 6px; }
.sub-qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; transition: filter 0.2s, opacity 0.2s; }
/* Blurred while linking Telegram (telegram.js), so only the bot's code can be scanned */
.sub-qr { position: relative; }
.sub-qr.qr-dim { cursor: pointer; }
.sub-qr.qr-dim svg { filter: blur(6px); opacity: 0.35; }
.qr-dim-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: #0B0D12; font-weight: 600; font-size: var(--t-sm); }
.qr-dim .qr-dim-hint { display: flex; }
.account .panel .sub-qr-phone { font-size: var(--t-sm); line-height: 1.5; text-align: center; }
.sub-qr-desktop { display: none; line-height: 1.5; }
.qr-toggle { align-self: center; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 960px) {
  .tg-phone { display: none; }
  .tg-desktop { display: flex; }
  .link-qr { flex-direction: row; gap: 24px; align-items: flex-start; }
  .sub-qr-col { order: 0; display: flex; flex: none; }
  .sub-qr { width: 200px; }
  .sub-qr-phone, .qr-toggle { display: none; }
  .sub-qr-desktop { display: block; }
}

/* A word of warning on login: amber, as the unpaid-payment card */
.notice { padding: 14px 16px; border-radius: 16px; background: rgba(245, 184, 61, 0.08); border: 1px solid rgba(245, 184, 61, 0.35); color: #F7CD72; font-size: var(--t-sm); line-height: 1.5; }

/* Buying on the account page: the mockup's account boards. The plans are rows to
   pick from, the picked one lit in the button colour */
.pending { border-color: rgba(245, 184, 61, 0.4); }
.pending > span:not(.badge) { font-size: var(--t-base); }
.buy-head { display: flex; flex-direction: column; gap: 6px; }
.plan-rows { display: flex; flex-direction: column; gap: 10px; }
.plan-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  text-align: left;
  cursor: pointer;
}
.plan-row:hover { background: rgba(255, 255, 255, 0.07); }
.plan-on { background: rgba(232, 84, 76, 0.10); border-color: rgba(246, 187, 183, 0.6); box-shadow: 0 0 0 3px rgba(232, 84, 76, 0.18); }
.radio { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); }
.plan-on .radio { border-color: #E8544C; }
.plan-on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #E8544C; }
.plan-row-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plan-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-row-title strong { font-size: var(--t-base); }
.plan-row-title .chip { padding: 3px 9px; font-size: var(--t-xs); }
.plan-row-text .muted { font-size: var(--t-sm); }
.plan-row-price { font-size: var(--t-lg); white-space: nowrap; }
/* A discount: the full price struck through, smaller, before the offer's */
.plan-row-full { font-size: var(--t-sm); font-weight: 400; }
.check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-base); cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 0; accent-color: #E8544C; }
.buy-actions { display: flex; flex-direction: column; gap: 12px; }
/* Full width, so little side padding: the labels stay on one line down to a 360 px phone */
.buy-actions .btn { padding: 0 12px; }
.account .panel .buy-note { font-size: var(--t-sm); text-align: center; }

/* The payment page: every state keeps the same icon, title and text slots, so
   switching states moves nothing */
.status { align-items: center; text-align: center; padding: 32px 24px; }
.icon-slot { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; }
.spin { display: block; width: 48px; height: 48px; border: 3px solid rgba(255, 255, 255, 0.12); border-top-color: #E8544C; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; }
.mark svg { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark-ok { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); box-shadow: 0 0 24px rgba(52, 211, 153, 0.35); }
.mark-ok svg { stroke: #7EE2B8; }
.mark-fail { background: rgba(240, 103, 95, 0.12); border: 1px solid rgba(240, 103, 95, 0.4); box-shadow: 0 0 24px rgba(240, 103, 95, 0.3); }
.mark-fail svg { stroke: var(--link-hover); }
.status-title { font-size: var(--t-2xl); font-weight: 700; line-height: 28px; }
.status-body { display: flex; flex-direction: column; gap: 2px; min-height: 90px; }
.account .status-body p { font-size: var(--t-base); line-height: 22px; }
.row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-base); }
/* The subscription link, which copies itself when tapped: the whole field is the
   button, the icon at its end says so and turns into a tick */
.link-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 6px 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.link-field:hover { border-color: rgba(255, 255, 255, 0.24); }
.link-field-text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-field-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.link-field-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-field .icon-done, .link-copied .icon-copy { display: none; }
.link-copied .icon-done { display: block; }
.link-copied .link-field-text, .link-copied .link-field-icon { color: #7EE2B8; }

/* Footer */
.footer { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 40px; background: rgba(20, 20, 22, 0.7); }
.footer-row { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; padding-bottom: 32px; font-size: var(--t-sm); }
.footer .brand { font-size: var(--t-base); }
.footer .brand img { width: 28px; height: 28px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { color: var(--soft); text-decoration: none; }
.footer-links a:hover { color: #FFFFFF; }

/* Desktop */
@media (min-width: 960px) {
  :root {
    --btn-lg-h: var(--btn-lg-h-desktop);
    --btn-lg-font: var(--btn-lg-font-desktop);
    --btn-md-h: var(--btn-md-h-desktop);
    --btn-md-font: var(--btn-md-font-desktop);
    --btn-sm-h: var(--btn-sm-h-desktop);
    --btn-sm-font: var(--btn-sm-font-desktop);
  }
  .wrap { max-width: 1120px; padding-left: 32px; padding-right: 32px; }

  /* The header at the desktop board's 1.3 scale */
  .header-row { gap: 24px; height: 94px; }
  .brand { gap: 13px; font-size: 22px; }
  .brand img { width: 47px; height: 47px; }
  .btn-small { padding: 0 21px; }
  .header-row .header-account { padding-left: 8px; gap: 13px; }
  .avatar { width: 36px; height: 36px; font-size: 17px; }

  .map-desktop { display: block; }
  .map-tablet { display: none; }
  .server-label { font-size: var(--t-xs); }

  .hero { gap: 22px; padding-top: 18px; padding-bottom: 96px; }
  .hero-logo { width: 252px; height: 252px; filter: drop-shadow(0 0 40px var(--glow-red)); }
  .hero h1 { --hero-title: var(--t-7xl); gap: 10px; }
  .hero-tagline { line-height: 1.1; }
  .hero-lead { font-size: var(--t-xl); }
  .hero-offer { align-self: center; gap: 26px; margin-top: 4px; }
  .facts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .btn-cta { padding: 0 26px; }

  .section { gap: 20px; padding-bottom: 80px; }
  .section h2 { font-size: var(--t-3xl); text-align: center; }
  .section-head { align-items: center; text-align: center; }
  .card { padding: 24px; }
  .num { width: 36px; height: 36px; }
  .step-text { gap: 6px; }
  .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .plan { gap: 14px; }
  .small-note { text-align: center; }
  .faq { max-width: 760px; width: 100%; margin: 0 auto; }
  .faq summary { padding: 18px 24px; }
  .faq p { padding: 0 24px 18px; }

  .wrap.auth { max-width: 504px; padding-top: 18px; padding-bottom: 64px; }
  .auth-logo { width: 252px; height: 252px; filter: drop-shadow(0 0 40px var(--glow-red)); }
  .auth-head { gap: 10px; }
  .auth-head h1 { font-size: var(--t-4xl); }
  .panel { padding: 28px; }
  .digits { gap: 10px; }
  .wrap.account { max-width: 624px; padding-top: 18px; padding-bottom: 64px; gap: 20px; }
  .account-head h1 { font-size: var(--t-4xl); }
  .account-email { font-size: var(--t-base); }
  .account .panel { gap: 18px; }
  .account .panel h2 { font-size: var(--t-xl); }
  .account .panel p { font-size: var(--t-base); }
  .account-term, .traffic-row { font-size: var(--t-base); }
  .plan-row { gap: 16px; min-height: 68px; padding: 14px 20px; }
  .plan-row-title strong { font-size: var(--t-lg); }
  .plan-row-price { font-size: var(--t-xl); }
  .status { padding: 40px 28px; }
  .icon-slot, .mark { width: 60px; height: 60px; }
  .spin { width: 52px; height: 52px; }
  .status-title { line-height: 32px; }
  .status-body { min-height: 72px; }
  .account .status-body p { line-height: 24px; }

  .footer { margin-top: 56px; }
  .footer-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; }
  .footer-links { gap: 24px; }
}

/* The steps side by side once each card fits its number and title on one line;
   the description runs underneath at the card's full width */
@media (min-width: 1200px) {
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .step { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 12px; row-gap: 10px; }
  .step-text { display: contents; }
  .step-text strong { white-space: nowrap; }
  .step-text span { grid-column: 1 / -1; }
}

/* Big screens: a 4K monitor at 100% would show the page small, so it scales up,
   to about 140% at 3840px wide */
@media (min-width: 2200px) { html { zoom: 1.15; } }
@media (min-width: 2560px) { html { zoom: 1.25; } }
@media (min-width: 3200px) { html { zoom: 1.4; } }

@media (prefers-reduced-motion: reduce) {
  .server-ring { animation: none; display: none; }
  .spin { animation-duration: 3s; }
}