:root{
  /* hero layout: single source of truth */
  --hero-left-width: 680px;
  --hero-right-width: 460px;
  /* frame thickness (make it taller without cropping content) */
  --hero-map-pad-x: 10px;
  --hero-map-pad-y: 12px;
  --bg:#070914;
  --bg2:#0a0e1f;
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.52);
  --a:#7c3aed; /* violet */
  --b:#22d3ee; /* cyan */
  --ok:#22c55e;
  --shadow: 0 18px 80px rgba(0,0,0,.55);
  --radius:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:#000}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text);
  /* фон рисуем только в .bg (fixed), чтобы не было "разделения" */
  background:transparent;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
code{color:rgba(255,255,255,.9); background:rgba(255,255,255,.08); padding:.15em .4em; border-radius:.4em}

.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* Background layers */
.bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* единая подложка */
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.bg__radial{position:absolute;inset:-40%;filter:blur(40px);opacity:.9}
.bg__radial--a{background:radial-gradient(circle at 30% 25%, rgba(124,58,237,.35), transparent 55%)}
.bg__radial--b{background:radial-gradient(circle at 70% 35%, rgba(34,211,238,.28), transparent 55%)}
.bg__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,.9), transparent 70%);
  opacity:.22;
}
.bg__noise{
  position:absolute;inset:0;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Header */
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(7,9,20,.75), rgba(7,9,20,.35));
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* гарантируем, что контент всегда выше фона */
.main, .footer{
  position:relative;
  z-index:1;
}

.header__wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__icon{width:28px;height:28px;filter:drop-shadow(0 0 18px rgba(124,58,237,.55))}
.brand__name{font-weight:700;letter-spacing:.2px}

.nav{display:flex;gap:18px}
.nav a{color:var(--muted);font-size:14px}
.nav a:hover{color:rgba(255,255,255,.92)}
.nav a[href="/terms/"]{opacity:.85}

.header__cta{display:flex;gap:10px;align-items:center}

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:16px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18)}
.btn--ghost{background:transparent}
.btn--primary{
  border-color:rgba(124,58,237,.35);
  background: linear-gradient(90deg, rgba(124,58,237,.75), rgba(34,211,238,.35));
  box-shadow: 0 10px 40px rgba(124,58,237,.22);
}
.btn--primary:hover{
  box-shadow: 0 14px 60px rgba(124,58,237,.28), 0 0 0 1px rgba(34,211,238,.14) inset;
}
.btn--xl{padding:14px 16px;border-radius:18px;font-weight:600}
.btn__spark{
  position:absolute;inset:-2px;border-radius:18px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%),
              radial-gradient(circle at 70% 60%, rgba(34,211,238,.22), transparent 55%);
  filter: blur(10px);
  opacity:.55;
  z-index:0;
}
.btn__text, .btn__arrow{position:relative;z-index:1}
.btn__arrow{opacity:.9}

/* Hero */
.main{padding-bottom:0px}
.hero{padding:42px 0 18px}
.hero__wrap{
  display:grid;
  grid-template-columns: minmax(0,var(--hero-left-width,680px)) minmax(0,var(--hero-right-width,460px));
  justify-content: space-between;
  gap:26px;
  align-items:center;
}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  font-size:13px;
}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 16px rgba(34,197,94,.55)}

.h1{font-size:46px;line-height:1.06;margin:14px 0 10px;letter-spacing:-.8px}
.grad{
  background: linear-gradient(90deg, rgba(124,58,237,1), rgba(34,211,238,1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{color:var(--muted);font-size:16px;line-height:1.55;max-width:var(--hero-left-width,680px)}

/* Hero animated map (decorative, illustrates choosing an exit location) */
.heroMap{
  position:relative;
  width:100%;
  max-width:var(--hero-left-width,680px);
  aspect-ratio: 640/240;
  border-radius:22px;
  overflow:hidden; /* важно: ничего не вылезает за рамки */
  background:rgba(255,255,255,.010);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 40px 90px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 12px 24px rgba(255,255,255,.05),
    inset 0 -18px 44px rgba(0,0,0,.22);
}

/* one (outer) liquid-glass layer — no inner frame */
.heroMap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    /* thick glass rim (stronger + wider) */
    radial-gradient(closest-side at 50% 55%, rgba(255,255,255,0) 76%, rgba(255,255,255,.11) 100%),
    /* side glass thickness */
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.08)),
    radial-gradient(130% 190% at 18% 12%, rgba(255,255,255,.10), rgba(255,255,255,0) 64%),
    radial-gradient(140% 190% at 84% 34%, rgba(34,211,238,.07), rgba(255,255,255,0) 72%);
  opacity:.55;
}
.heroMap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(closest-side at 50% 38%, rgba(255,255,255,0) 76%, rgba(255,255,255,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 68%);
  mix-blend-mode: screen; /* чище, чем overlay */
  opacity:.20;
}

/* no cursor-parallax */
#heroMapNet {
  transform: none !important;
}

/* subtle “star twinkle” for nodes (ONE definition, no duplicates) */
.heroMap__node{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.18));
  transform-box: fill-box;
  transform-origin: center;
  will-change: opacity, transform, filter;
  animation: heroMapTwinkle var(--twDur, 3.4s) ease-in-out infinite;
  animation-delay: var(--twDelay, 0s);
}

@keyframes heroMapTwinkle{
  0%, 100% { opacity:.72; transform:scale(1.00); filter:drop-shadow(0 0 6px rgba(255,255,255,.16)); }
  50%      { opacity:1;   transform:scale(1.16); filter:drop-shadow(0 0 10px rgba(255,255,255,.30)); }
}

/* per-node offsets so they don't blink in sync */
#node_US  { --twDur: 3.9s; --twDelay: -1.4s; }
#node_GB  { --twDur: 3.2s; --twDelay: -0.6s; }
#node_DE  { --twDur: 4.4s; --twDelay: -2.0s; }
#node_NL  { --twDur: 3.5s; --twDelay: -1.1s; }
#node_FR  { --twDur: 2.9s; --twDelay: -0.2s; }
#node_SE  { --twDur: 3.8s; --twDelay: -1.8s; }
#node_FI  { --twDur: 4.1s; --twDelay: -0.9s; }
#node_AT  { --twDur: 3.1s; --twDelay: -2.4s; }
#node_BR  { --twDur: 4.6s; --twDelay: -1.7s; }
#node_ZA  { --twDur: 3.4s; --twDelay: -0.4s; }
#node_IN  { --twDur: 4.0s; --twDelay: -2.6s; }
#node_JP  { --twDur: 3.0s; --twDelay: -1.9s; }
#node_AU  { --twDur: 4.2s; --twDelay: -0.8s; }
#node_P14 { --twDur: 3.6s; --twDelay: -2.2s; }
#node_P15 { --twDur: 4.8s; --twDelay: -0.1s; }

/* в edit-режиме лучше без мерцания (чтобы не мешало двигать точки) */
.heroMap.is-edit .heroMap__node{ animation: none !important; opacity: .92; transform: none; }


.heroMap__path{
  fill:none;
  stroke-linecap:round;
  stroke-width:1.6;
  opacity:.85;
  /* start hidden: JS drives animation */
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
}

@keyframes heroMapDrawF{
  /* ✅ РОВНО: draw A->B (~55%) -> erase into B (no hanging) */
  0%   { stroke-dasharray:0 100;   stroke-dashoffset:0;     opacity:0 }
  6%   { opacity:.92 }
  55%  { stroke-dasharray:100 0;   stroke-dashoffset:0;     opacity:.92 } /* линия дошла до B */
  100% { stroke-dasharray:0 100;   stroke-dashoffset:-100;  opacity:0 }   /* "заезд" в B */
}

/* inner clip: this is the actual map frame */
.heroMap__clip{
  position:absolute;
  inset:0;                 /* убираем внутренний отступ-рамку */
  border-radius:inherit;   /* ровно как внешняя рамка */
  overflow:hidden;
  background:transparent;  /* никакого "второго фона" */
  z-index:1;               /* выше стекла heroMap::before/after */
}

/* no extra background map (the map is inside SVG <image>) */
.heroMap__clip::before,
.heroMap__clip::after{ display:none; }

.heroMap__svg{
  position:absolute;
  inset:0;
  z-index:2; /* поверх стекла */
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.heroMap__note{
  padding:8px 12px 10px;
  font-size:12px;
  color:rgba(255,255,255,.62);
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.heroMap__origin,
.heroMap__node{
  fill:#fff;
  fill-opacity:.86;
}
.heroMap__origin{fill:#22d3ee; fill-opacity:.92}
.heroMap__node--v{fill:#7c3aed; fill-opacity:.92}
.heroMap__node--w{fill:#fff; fill-opacity:.92}
.heroMap__node--c{fill:#22d3ee; fill-opacity:.92}

/* smaller country dots */
/* r задаём в HTML (надёжно). Тут только лёгкая читабельность */
.heroMap__node{ filter: drop-shadow(0 0 6px rgba(255,255,255,.18)); }

@media (prefers-reduced-motion: reduce){
  .heroMap__path{animation:none;stroke-dashoffset:0;opacity:.55}
  .heroMap__node{animation:none !important; opacity:.9; transform:none; }
}

.heroMap__pkt{
  fill: #ffffff;
  fill-opacity:.92;
}
.heroMap__pkt--rev{fill:#7c3aed; fill-opacity:.92}

.hero__buttons{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.chips{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.chip{
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color:rgba(255,255,255,.78);
  font-size:13px;
}

/* Right panel */
.panel{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel{position:relative}

/* cleaner liquid-glass highlight */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 10%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(120% 90% at 88% 22%, rgba(34,211,238,.08), transparent 60%);
  opacity:.55;
}
.panel__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.panel__title{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.2px}
.panel__badge{
  font-size:11px;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
}
.panel__status{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.84);font-size:13px}
.dot{width:8px;height:8px;border-radius:50%}
.dot--ok{background:var(--ok);box-shadow:0 0 14px rgba(34,197,94,.55)}

/* status lamp */
.lamp{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:
    0 0 6px rgba(34,197,94,.95),
    0 0 18px rgba(34,197,94,.65),
    0 0 36px rgba(34,197,94,.35);
  animation: lampPulse 2.4s ease-in-out infinite;
}
@keyframes lampPulse{
  0%,100%{opacity:.75}
  50%{opacity:1}
}
.panel__mid{padding:18px 16px 10px; position:relative; z-index:2;}
.orb{
  position:relative;
  height:240px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(200px 160px at 50% 30%, rgba(124,58,237,.18), transparent 60%),
    rgba(255,255,255,.025);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  overflow:hidden;
  isolation:isolate;
}

/* cleaner “liquid” sheen + subtle vignette */
.orb::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(120% 90% at 86% 22%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 38%, transparent 70%, rgba(255,255,255,.06));
  opacity:.55;
}
.orb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.28), transparent 55%),
    radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.14), transparent 60%);
  opacity:.55;
}
.orb__glow{
  position:absolute;inset:-40%;
  background: radial-gradient(circle at 50% 40%, rgba(124,58,237,.45), transparent 55%);
  filter: blur(25px);
  opacity:.75;
  animation: breathe 4.2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.orb__ring{
  position:absolute;inset:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 70px rgba(34,211,238,.10);
  z-index:3;
}

/* subtle “floor glow” (no extra capsule) */
.orb__ring::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:min(240px, 84%);
  height:54px;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 50% 60%, rgba(34,211,238,.18), transparent 72%),
    radial-gradient(closest-side at 50% 60%, rgba(255,255,255,.10), transparent 60%);
  opacity:.55;
  filter: blur(10px);
}
.orb__duck{
  position:absolute;
  left:50%;top:61%;
  transform:translate(-50%,-50%);
  width:170px;height:170px;
  filter:
    drop-shadow(0 26px 55px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(124,58,237,.22));
  opacity:.95;
  z-index:4;
}

/* Telegram profile chip */
.tgProfile{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 6px 6px;
  border-radius:14px;
  background:rgba(7,9,20,.42);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  z-index:10;              /* всегда поверх уточки */
  max-width:72%;
  box-shadow:
    0 12px 34px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.tgProfile__ava{
  width:28px;
  height:28px;
  border-radius:50%;
  display:block;
}
.tgProfile__meta{display:flex;flex-direction:column;min-width:0}
.tgProfile__name{
  font-size:12px;font-weight:650;line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tgProfile__sub{font-size:11px;color:rgba(255,255,255,.60);line-height:1.1;margin-top:2px}

.orb__caption{
  position:absolute;left:14px;bottom:12px;
  font-size:12px;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:6px 10px;border-radius:999px;
}

.card {
  position: relative;
  overflow: hidden;
}

/* directional light */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    120px 120px at var(--mx,50%) var(--my,50%),
    rgba(34,211,238,.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.card:hover::before {
  opacity: .85;
}

.cards{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* FIX: не даём контенту раздувать колонки */
  gap:10px;
}
.card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:10px 10px 12px;
  min-width:0; /* FIX: разрешаем сжиматься внутри grid */
  position:relative;
  overflow:hidden;
}

/* directional border glow */
.card::before,
.mini::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(34,211,238,.35), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
}
.card:hover::before,
.mini:hover::before{
  opacity:.85;
}

/* location select card */
.card--select{cursor:pointer; overflow:visible}
.card--open{z-index:80}
.card__selectValue{display:inline-flex;min-width:0}
.card__dropdown{
  position:fixed;
  left: var(--dd-left, 0px);
  top:  var(--dd-top, 0px);
  width: var(--dd-width, 260px);
  z-index:9999;
  display:none;
  padding:8px;
  border-radius:16px;
  overflow:auto;
  max-height: min(340px, calc(100vh - var(--dd-top, 0px) - 14px));
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(120% 120% at 86% 26%, rgba(34,211,238,.10), transparent 60%),
    rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 26px 90px rgba(0,0,0,.60),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
.card__dropdown.is-open{display:block}
.card__option{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.90);
  padding:9px 10px;
  border-radius:12px;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
}
.card__option:hover{background: rgba(255,255,255,.08)}
.card__option .rotator__country{width:100%}
.card__option .rotator__flagimg{box-shadow:none}

.card__k{color:var(--muted2);font-size:12px}
.card__v{margin-top:6px;font-size:14px;color:rgba(255,255,255,.9);font-weight:600;min-width:0}

.panel__bottom{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); /* FIX: то же самое */
  gap:10px;
  padding:12px 16px 16px;
  position:relative; z-index:1;
}
.mini{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:10px;
  min-width:0; /* FIX */
  position:relative;
  overflow:hidden;
}
.mini--select{cursor:pointer}
.mini--select:focus-visible,
.card--select:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}
.mini__k{color:var(--muted2);font-size:12px}
.mini__v{margin-top:6px;font-size:14px;font-weight:650;min-width:0}

/* ===== Premium slot-rotator ===== */
.rotator{
  display:flex;
  align-items:center;
  width:100%;              /* важно: не даём контенту менять ширину ячейки */
  min-width:0;
}

/* viewport with clipping */
.rotator__viewport{
  display:block;
  overflow:hidden;
  position:relative;
  height:24px; 
  width:100%;
  min-width:0;
}

/* stack that moves */
.rotator__stack{
  display:block;
  transform: translate3d(0,0,0);
  will-change: transform, filter, opacity;
}

/* rows (two lines inside the slot) */
.rotator__row{
  display:flex;
  align-items:center;
  justify-content:flex-start;    /* FIX: никаких "space-between" -> не разъезжается */
  gap:10px;
  padding:0;
  height:24px;
  line-height:24px;
  width:100%;
  min-width:0;
}

/* animation state */
.rotator.is-anim .rotator__stack{
  transition:
    transform 1400ms cubic-bezier(.22, 1, .36, 1),
    filter 1400ms cubic-bezier(.22, 1, .36, 1),
    opacity 1400ms cubic-bezier(.22, 1, .36, 1);
  filter: blur(.18px);
  opacity:.96;
}

.rotator__logo{
  width:16px;
  height:16px;
  display:inline-block;
  flex:0 0 16px;
  opacity:.92;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}

/* большие логотипы (протоколы) — как флаг */
.rotator__logo--lg{
  width:26px;
  height:18px;
  flex:0 0 26px;
}

.rotator__logo--v2ray{
  object-fit: contain;
  border-radius: 4px;
  background: transparent;
}

/* протоколы — без лишней "плашки/рамки" от теней */
.rotator__logo--proto{
  opacity:1;
  filter:none;
}

/* монохромные SVG (например V2Ray) делаем белыми, чтобы читались на тёмном */
.rotator__logo--mono{
  filter: brightness(0) invert(1);
  opacity:.92;
}

/* ✅ Platform row (stable DOM, no blink) */
.rotator__pitem{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  width:100%;
}
.rotator__picon{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background: transparent;
  box-shadow: none;
  border-radius:0;
  flex:0 0 auto;
}
.rotator__pimg{
  width:18px;
  height:18px;
  display:block;
  opacity:.92;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}

.rotator__count{
  font-weight:700;
  letter-spacing:.3px;
}

.rotator__count::after{
  content:"×";
  margin-left:2px;
  font-weight:600;
  opacity:.7;
}

/* Country row: bigger flag + name */
.rotator__country{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  width:100%;
}
.rotator__flagimg{
  width:26px;
  height:18px;
  border-radius:2px;
  box-shadow:none;
  display:block;
}

.rotator__txt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;  /* если вдруг очень длинно — красиво, без ломания карточки */
  min-width:0;
  flex:1 1 auto; 
}

.rotator__icon{
  width:16px;
  height:16px;
  display:inline-block;
  flex:0 0 16px;
  opacity:.95;
}

.rotator__logo--stars{
  width:18px;
  height:18px;
  flex:0 0 18px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  transform: translateY(1px);
}

.rotator__logo--v2raytun{
  object-fit: contain;
  border-radius:4px;
  background: transparent;
}

.rotator__btc{
  width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  background: #f7931a;          /* BTC orange */
  color: #fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.12) inset;
}

.rotator__ton{
  width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px; line-height:1;
  filter: drop-shadow(0 0 10px rgba(124,58,237,.18));
}

.tgStarsIcon{
  display:inline-block;
  vertical-align:top;
  white-space:nowrap;
  font-style:normal;
  overflow:hidden;
  position:relative;
  background:url('data:image/svg+xml,%3Csvg%20height%3D%2245%22%20viewBox%3D%220%200%2046%2045%22%20width%3D%2246%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2225%25%22%20x2%3D%2274.92%25%22%20y1%3D%22.825%25%22%20y2%3D%22107.86%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd951%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb222%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%2299.795%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e58f0d%22%2F%3E%3Cstop%20offset%3D%22.99963%22%20stop-color%3D%22%23eb7915%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20id%3D%22c%22%20d%3D%22m15.45%2013.17%205.29-10.61c.61-1.22%202.09-1.71%203.3-1.09.47.24.86.63%201.09%201.11l5%2010.23c.41.83%201.21%201.4%202.12%201.51l10.47%201.27c1.42.17%202.43%201.47%202.26%202.91-.07.59-.34%201.14-.76%201.56l-8.27%208.2c-.33.33-.49.8-.44%201.27l1.38%2011.08c.2%201.59-.92%203.04-2.49%203.23-.59.08-1.19-.04-1.72-.32l-8.74-4.81c-.63-.35-1.39-.36-2.03-.03l-9.06%204.68c-1.27.66-2.83.14-3.48-1.14-.25-.49-.34-1.03-.26-1.57l.72-5.08c.36-2.49%201.89-4.64%204.1-5.78l10.06-5.17c.27-.14.37-.47.24-.74-.11-.21-.34-.33-.57-.29l-12.3%201.77c-1.88.27-3.78-.27-5.26-1.48l-4.09-3.36c-1.17-.96-1.35-2.7-.4-3.88.44-.55%201.08-.9%201.77-.99l10.5-1.36c.68-.09%201.26-.51%201.57-1.12z%22%2F%3E%3Cfilter%20id%3D%22d%22%20height%3D%22111.7%25%22%20width%3D%22111.4%25%22%20x%3D%22-5.7%25%22%20y%3D%22-5.9%25%22%3E%3CfeOffset%20dx%3D%222%22%20dy%3D%223%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetInner1%22%2F%3E%3CfeComposite%20in%3D%22shadowOffsetInner1%22%20in2%3D%22SourceAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%20result%3D%22shadowInnerInner1%22%2F%3E%3CfeColorMatrix%20in%3D%22shadowInnerInner1%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%20%200%200%200%200%201%20%20%200%200%200%200%201%20%200%200%200%200.65667938%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20fill%3D%22%23000%22%20filter%3D%22url%28%23d%29%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center;
  background-size:contain;
  letter-spacing:10em;
  text-indent:-10em;
  width:1.3em;
  height:1.3em;
}

.rotator__hint{
  margin-left:6px;
  font-size:11px;
  color: rgba(255,255,255,.62);
  font-weight:600;
  white-space:nowrap;
}

/* iOS-ish depth: slightly fade non-centered rows */

.rotator__stack .rotator__row{opacity:.92}
.rotator__code{
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  letter-spacing:.35px;
}

.rotator__hint{
  margin-left:6px;
  font-size:11px;
  color: rgba(255,255,255,.62);
  font-weight:600;
}

.note{
  margin-top:10px;
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.68);
  font-size:13px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.note__dot{width:8px;height:8px;border-radius:50%;background:rgba(124,58,237,.9);box-shadow:0 0 14px rgba(124,58,237,.45)}

/* Sections */
.section{padding:44px 0 8px}
.h2{font-size:28px;letter-spacing:-.4px;margin:0 0 16px}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.glass{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:16px;
  box-shadow: 0 16px 70px rgba(0,0,0,.35);
}
.glass__h{font-weight:700}
.glass__p{color:var(--muted);margin-top:8px;line-height:1.55}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.step{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:16px;
}
.step__n{
  font-weight:800;
  letter-spacing:.4px;
  color:rgba(34,211,238,.95);
}
.step__t{margin-top:8px;font-weight:700}
.step__p{margin-top:8px;color:var(--muted);line-height:1.55}

/* FAQ */
.faq{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:12px 14px;
  margin-bottom:10px;
}
.faq summary{cursor:pointer;font-weight:650}
.faq__a{margin-top:10px;color:var(--muted);line-height:1.55}

.final{
  margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(124,58,237,.22);
  background: linear-gradient(90deg, rgba(124,58,237,.18), rgba(34,211,238,.10));
}
.final__h{font-size:18px;font-weight:800}
.final__p{color:var(--muted);margin-top:4px}

/* Footer */
.footer{padding:26px 0 10px;color:rgba(255,255,255,.68)}
.footer__wrap{display:flex;align-items:center;justify-content:space-between}
.footer__l{display:flex;align-items:center;gap:12px}
.footer__icon{width:22px;height:22px;filter:drop-shadow(0 0 14px rgba(124,58,237,.45))}
.footer__brand{font-weight:800;color:rgba(255,255,255,.85)}
.footer__r{display:flex;gap:14px;align-items:center}
.footer__r a{color:rgba(255,255,255,.68)}
.footer__r a:hover{color:rgba(255,255,255,.92)}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .hero__wrap{grid-template-columns:1fr;gap:18px}
  .h1{font-size:38px}
  .grid3,.steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .panel__bottom{grid-template-columns:1fr}
  .orb{height:220px}
}

/* mapdebug HUD (only appears with ?mapdebug=1) */
.heroMapDebugHud{
  position:absolute;
  left:12px;
  top:12px;
  z-index:6;
  padding:6px 10px;
  border-radius:12px;
  font-size:12px;
  color:rgba(255,255,255,.88);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  pointer-events:none;
}

/* mapedit HUD (only appears with ?mapedit=1) */
.heroMap.is-edit .heroMap__svg{ pointer-events:auto; }
.heroMap.is-edit .heroMap__node{ pointer-events:all; animation:none; opacity:.92; transform:none; }
.heroMap.is-edit .heroMap__node.is-active{
  stroke: rgba(255,255,255,.85);
  stroke-width: 1.3;
  paint-order: stroke fill;
}
.heroMapEditHud{
  position:absolute;
  left:12px;
  top:12px;
  z-index:6;
  padding:6px 10px;
  border-radius:12px;
  font-size:12px;
  color:rgba(255,255,255,.88);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  pointer-events:none;
}

/* JS random-links mode: hide default infinite CSS animation (JS controls it) */
.heroMap.is-random .heroMap__path{
  animation: none;
  opacity: 0;
}