/* Hallmark · macrostructure: Marquee Hero · nav: N1b · footer: Ft5 statement
 * theme: studied-DNA (source: beget.com) · paper #ffffff · accent #2761d1
 * fonts: Unbounded (display) + Onest (body) + Anonymous Pro (mono)
 * tone: utilitarian-plain · enrichment: hand-built SVG mark (Cyprus + globe)
 * pre-emit critique: P4 H5 E5 S5 R5 V4
 */
@import url("/fonts/fonts.css");

:root {
  --color-paper:     #ffffff;
  --color-paper-1:   #fafbfd;
  --color-paper-2:   #f4f5f7;
  --color-paper-3:   #e4e7ec;
  --color-ink:       #1d1c28;
  --color-ink-2:     #5c5b68;
  --color-ink-3:     #9598a6;
  --color-accent:    #2761d1;
  --color-accent-2:  #1d4ed8;
  --color-accent-sw: #eaf0fc;
  --color-success-sw:#eef7ec;
  --color-danger:    #dc3545;
  --color-focus:     #1d4ed8;

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body:    "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Anonymous Pro", ui-monospace, Menlo, monospace;

  --text-display: clamp(2.1rem, 5.4vw, 3.4rem);
  --text-2xl:     clamp(1.5rem, 3vw, 2rem);
  --text-xl:      1.25rem;
  --text-lg:      1.0625rem;
  --text-md:      1rem;
  --text-sm:      0.9375rem;
  --text-xs:      0.8125rem;

  --space-2: 4px;  --space-3: 8px;  --space-4: 12px; --space-5: 16px;
  --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px;
  --space-10: 88px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
  --radius-xl: 24px; --radius-pill: 9999px;

  --rule: 1px solid var(--color-paper-3);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms; --dur-mid: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-style: normal; line-height: 1.15; margin: 0;
  overflow-wrap: anywhere; min-width: 0;
}
h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
h2, h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-2); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 var(--space-6); }
.narrow { max-width: 620px; }

/* ── знак: остров Кипр на глобусе ────────────────────── */
.brand {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: -0.02em;
  color: var(--color-ink);
}
.brand svg { width: 30px; height: 30px; flex: none; display: block; }

/* Глобус — фон САМОЙ СТРАНИЦЫ, не привязан ни к одному блоку.
   z-index: -1 держит его под всем содержимым; первый экран сделан прозрачным,
   поэтому рисунок читается как подложка, а не как картинка внутри секции. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cg fill='none' stroke='%232761d1' stroke-width='1.1'%3E%3Ccircle cx='200' cy='200' r='199'/%3E      %3Cellipse cx='200' cy='200' rx='66' ry='199'/%3E      %3Cellipse cx='200' cy='200' rx='133' ry='199'/%3E      %3Cpath d='M200 1V399'/%3E      %3Cellipse cx='200' cy='82' rx='160' ry='21'/%3E      %3Cellipse cx='200' cy='140' rx='190' ry='14'/%3E      %3Cellipse cx='200' cy='200' rx='199' ry='7'/%3E      %3Cellipse cx='200' cy='260' rx='190' ry='14'/%3E      %3Cellipse cx='200' cy='318' rx='160' ry='21'/%3E%3C/g%3E%3Cpath d='M315.00 131.05C314.3 130.1 306.1 134.9 301.6 136.7C297.0 138.5 292.2 139.9 287.7 141.9C283.2 144.0 278.8 146.6 274.7 149.0C270.5 151.4 267.1 154.1 262.7 156.5C258.3 158.8 253.3 161.3 248.4 162.9C243.6 164.5 238.2 164.4 233.4 166.1C228.6 167.7 224.4 171.1 219.6 172.7C214.8 174.3 209.7 175.3 204.6 175.7C199.5 176.0 194.1 175.1 189.0 174.8C183.9 174.5 178.9 174.3 173.9 173.9C169.0 173.4 163.5 172.5 159.3 171.9C155.0 171.3 150.0 167.9 148.4 170.2C146.7 172.5 150.4 180.9 149.2 185.5C148.0 190.2 144.7 196.6 140.9 197.9C137.2 199.1 131.5 193.5 126.7 192.9C122.0 192.2 115.9 191.6 112.2 194.1C108.6 196.6 108.1 205.7 104.6 207.8C101.2 209.9 94.7 206.1 91.4 206.6C88.2 207.1 85.3 207.9 85.0 211.0C84.7 214.2 87.7 220.9 89.6 225.3C91.5 229.8 94.1 233.5 96.3 237.7C98.6 241.9 99.6 247.5 103.2 250.5C106.7 253.6 112.6 254.3 117.4 255.8C122.2 257.3 127.2 258.6 131.9 259.3C136.7 260.0 142.1 258.4 145.9 260.0C149.8 261.6 153.0 268.8 155.1 269.0C157.3 269.1 156.1 263.5 158.9 260.7C161.6 257.9 166.8 253.8 171.4 252.2C176.0 250.6 181.5 252.4 186.3 251.2C191.2 250.1 196.0 247.3 200.6 245.4C205.3 243.5 211.0 242.9 214.2 239.8C217.5 236.8 217.3 230.4 220.2 227.1C223.1 223.8 227.5 220.9 231.8 220.1C236.0 219.2 240.8 221.8 245.5 222.0C250.2 222.2 257.8 222.7 260.2 221.3C262.5 219.8 261.6 216.5 259.9 213.2C258.2 209.8 252.2 205.6 249.9 201.1C247.7 196.6 245.0 190.1 246.3 186.3C247.7 182.5 254.4 181.3 258.0 178.3C261.6 175.3 264.0 171.2 267.9 168.2C271.8 165.2 277.1 163.1 281.5 160.4C285.9 157.6 290.3 154.7 294.3 151.6C298.3 148.6 302.2 145.7 305.7 142.2C309.1 138.8 315.7 132.0 315.0 131.0Z' fill='%232761d1' fill-opacity='.5'/%3E%3C/svg%3E") no-repeat right 7% top 56px;
  background-size: 440px 440px;
  opacity: .11;
  pointer-events: none;
  z-index: -1;
}

/* ── nav ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule);
}
.nav__in { display: flex; align-items: center; gap: var(--space-5); height: 68px; }
.nav__in .brand { min-width: 0; flex: none; }
.nav__links { display: flex; gap: var(--space-6); margin-left: auto; }
.nav__links a { color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.nav__links a:hover { color: var(--color-ink); }
.nav__cta { margin-left: var(--space-5); }
.nav__spacer {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── кнопки ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  padding: 11px 20px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-accent-2); color: #fff; }
.btn--primary:active, .btn--primary.is-active { transform: translateY(1px); }
.btn--ghost { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper-3); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--color-paper-2); color: var(--color-ink); }
.btn--lg { padding: 14px 26px; font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { color: transparent; position: relative; pointer-events: none; }
.btn[data-state="loading"]::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: spin 640ms linear infinite;
}
.btn--ghost[data-state="loading"]::after { border-color: rgba(29,28,40,.25); border-top-color: var(--color-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── лендинг ─────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;             /* clip не понимает Safari до 16-й версии */
  padding: var(--space-10) 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: var(--text-display); max-width: 13ch; }
.hero__lead { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--color-ink-2); max-width: 44ch; }
.hero__actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4); }

.section { padding: var(--space-9) 0; }
.section--tint { background: rgba(244, 245, 247, .94); }
.section__head { margin-bottom: var(--space-7); }
.section__head h2 { font-size: var(--text-2xl); }

.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { background: var(--color-paper); border: var(--rule); border-radius: var(--radius-xl); padding: var(--space-7); }
.card h3 { font-size: var(--text-xl); }
.card p { margin-top: var(--space-3); color: var(--color-ink-2); font-size: var(--text-sm); }
.card__flag { font-size: 26px; line-height: 1; display: block; margin-bottom: var(--space-5); }

.steps { display: grid; gap: var(--space-6); }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.step__n {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--color-accent-sw); color: var(--color-accent-2);
  display: grid; place-items: center; font-weight: 600; font-size: var(--text-sm);
}
.step h3 { font-size: var(--text-lg); }
.step p { margin-top: var(--space-3); color: var(--color-ink-2); font-size: var(--text-sm); }

.limits { display: grid; }
.limit { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--rule); }
.limit:last-child { border-bottom: 0; }
.limit__v { color: var(--color-ink-2); font-size: var(--text-sm); margin-left: auto; }

.footer { border-top: var(--rule); padding: var(--space-8) 0; }
.footer__in { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-5); }
.footer__col { flex: 1 1 300px; min-width: 0; }
.footer p { color: var(--color-ink-3); font-size: var(--text-sm); max-width: 52ch; margin-top: var(--space-5); }
.footer__logo {
  flex: none; margin-left: auto;
  width: 180px; max-width: 38%; height: auto;
}

/* ── формы ───────────────────────────────────────────── */
.pane { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-7) var(--space-5); background: var(--color-paper-2); }
.panel { width: 100%; max-width: 420px; background: var(--color-paper); border: var(--rule); border-radius: var(--radius-xl); padding: var(--space-8); }
.panel h1 { font-size: var(--text-2xl); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.015em; }
.panel__sub { margin-top: var(--space-4); color: var(--color-ink-2); font-size: var(--text-sm); }
.field { margin-top: var(--space-6); }
.field label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-3); }
.input {
  width: 100%; font-family: inherit; font-size: var(--text-md); color: var(--color-ink);
  background: var(--color-paper); padding: 12px 14px;
  border: 1px solid var(--color-paper-3); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-ink-3); }
.input:hover, .input.is-hover { border-color: var(--color-ink-3); }
.input:focus-visible, .input.is-focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-sw); }
.input[disabled] { background: var(--color-paper-2); color: var(--color-ink-3); cursor: not-allowed; }
.hint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-ink-3); }
.msg { margin-top: var(--space-5); font-size: var(--text-sm); border-radius: var(--radius-md); padding: 10px 14px; }
.msg--err { background: #fdecee; color: #a4232f; }
.msg--ok  { background: var(--color-success-sw); color: #33702a; }
.msg[hidden] { display: none; }
.panel .btn { margin-top: var(--space-6); }
.panel__foot { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-ink-3); text-align: center; }

/* ── кабинет ─────────────────────────────────────────── */
.app { min-height: 100dvh; background: var(--color-paper-2); }
.app__body { padding: var(--space-8) 0 var(--space-9); }
.tile { background: var(--color-paper); border: var(--rule); border-radius: var(--radius-xl); padding: var(--space-7); }
.tile + .tile { margin-top: var(--space-5); }
.tile h2 { font-size: var(--text-xl); }
.tile__sub { margin-top: var(--space-4); color: var(--color-ink-2); font-size: var(--text-sm); }

.empty { text-align: center; padding: var(--space-8) var(--space-5); }
.empty h2 { font-size: var(--text-xl); }
.empty p { margin-top: var(--space-4); color: var(--color-ink-2); font-size: var(--text-sm); }

.bridge__top { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; }
.bridge__top h2 { font-size: var(--text-2xl); }
.bridge__kind { color: var(--color-ink-2); font-size: var(--text-sm); }
.badge {
  margin-left: auto; font-size: var(--text-xs); font-weight: 500;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-success-sw); color: #33702a;
}

.choices { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice__box {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-5);
  align-items: center; padding: var(--space-5);
  border: 1px solid var(--color-paper-3); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.choice input:hover + .choice__box { border-color: var(--color-ink-3); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice input:checked + .choice__box { border-color: var(--color-accent); background: var(--color-accent-sw); }
.choice__flag { font-size: 24px; line-height: 1; }
.choice__t { font-weight: 500; }
.choice__d { font-size: var(--text-xs); color: var(--color-ink-2); margin-top: 2px; }

.link-box {
  margin-top: var(--space-5); background: var(--color-paper-2);
  border: var(--rule); border-radius: var(--radius-md); padding: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-xs);
  word-break: break-all; color: var(--color-ink);
}
.row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }

/* установка клиентов */
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.platforms .btn { width: 100%; }
.alts { margin-top: var(--space-5); border-top: var(--rule); padding-top: var(--space-5); }
.alts summary {
  cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--color-accent);
  list-style: none; display: inline-flex; align-items: center; gap: var(--space-3);
}
.alts summary::-webkit-details-marker { display: none; }
.alts summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-mid) var(--ease-out);
}
.alts[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.alt { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; border-bottom: var(--rule); }
.alt:last-child { border-bottom: 0; padding-bottom: 0; }
.alt__n { font-size: var(--text-sm); font-weight: 500; }
.alt__d { font-size: var(--text-xs); color: var(--color-ink-3); margin-top: 2px; }
.alt__b { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; }
.alt__b .btn { padding: 7px 14px; font-size: var(--text-xs); }

.dl { display: grid; margin-top: var(--space-5); }
.dl div { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); padding: var(--space-4) 0; border-bottom: var(--rule); }
.dl div:last-child { border-bottom: 0; }
.dl dt { color: var(--color-ink-2); }
.dl dd { margin: 0 0 0 auto; font-weight: 500; }

@media (max-width: 820px) {
  /* без видимых ссылок в шапке пропадает и распорка — возвращаем её кнопке,
     иначе «Войти» прилипает вплотную к логотипу */
  .nav__cta { margin-left: auto; }
  /* на телефоне — крупнее и бледнее, уходит за правый край */
  /* на телефоне тот же фон страницы, только компактнее */
  body::before { background-size: 300px 300px; background-position: right -50px top 40px; opacity: .1; }
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .nav__links { display: none; }
  .hero { padding: var(--space-8) 0 var(--space-7); }
  .platforms { grid-template-columns: minmax(0, 1fr); }
  /* на телефоне логотип остаётся СПРАВА, просто уже — вниз не переносим */
  .footer__logo { width: 116px; }
  .alt__b { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── место под рекламу ───────────────────────────────
   Блок приходит от внешней сети, размеры непредсказуемы.
   Обёртка не даёт ему разъехаться и утащить страницу в
   горизонтальную прокрутку на телефоне. */
.ad-slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  margin: var(--space-6) auto;
  padding: 0 var(--space-5);
}
.ad-slot:empty { display: none; }
.ad-slot__label {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--color-ink-3);
  text-align: center;
}
/* один и тот же блок не должен грузиться дважды: на ПК свой, на телефоне свой */
@media (min-width: 821px) {
  .ad-slot--mob { display: none; }
  /* прижимаем к правому краю колонки: по центру он рвёт страницу пустой полосой */
  .ad-slot--pc { justify-content: flex-end; max-width: 1060px; padding: 0 var(--space-6); }
  .ad-slot--pc .ad-slot__label { text-align: right; }
}
@media (max-width: 820px) { .ad-slot--pc  { display: none; } }
.ad-slot iframe,
.ad-slot img,
.ad-slot ins,
.ad-slot > div { max-width: 100% !important; height: auto; }