: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;overflow-x:hidden}
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:12px}
.brand__icon{width:42px;height:42px;filter:drop-shadow(0 0 18px rgba(124,58,237,.55))}
.brand__name{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.03em}

.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}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;padding:6px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.84)}
.burger__line{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.burger.is-open .burger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open .burger__line:nth-child(2){opacity:0}
.burger.is-open .burger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobileMenu{display:none;position:fixed;inset:0;z-index:190;background:rgba(10,10,18,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 20px}
.mobileMenu.is-open{display:flex}
.mobileMenu__nav{display:flex;flex-direction:column;align-items:center;gap:20px}
.mobileMenu__nav a{font-size:1.2rem;color:rgba(255,255,255,.88);text-decoration:none;font-weight:600}
.mobileMenu__nav a:hover{color:#fff}
.mobileMenu__cta{margin-top:8px}
.mobileMenu__close{position:absolute;top:18px;right:18px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.6);font-size:28px;line-height:1;padding:8px;transition:color .15s}
.mobileMenu__close:hover{color:#fff}

.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:21px 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:start;
}
.hero__right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-self:end;
  width:100%;
}
.heroSoloArt{
  position:relative;
  width:min(100%, 460px);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding:4px 0 8px;
  isolation:isolate;
}
.heroSoloArt::before{
  content:"";
  position:absolute;
  inset:2% 0 6%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 58% 18%, rgba(34,211,238,.56), transparent 22%),
    radial-gradient(circle at 34% 40%, rgba(124,58,237,.48), transparent 28%),
    radial-gradient(circle at 54% 62%, rgba(34,211,238,.28), transparent 24%),
    radial-gradient(circle at 52% 80%, rgba(255,255,255,.16), transparent 18%);
  filter:blur(82px);
  mix-blend-mode:screen;
  opacity:1;
}
.heroSoloArt::after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:8px;
  height:160px;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  background:
    radial-gradient(closest-side at 50% 46%, rgba(34,211,238,.42), transparent 66%),
    radial-gradient(closest-side at 50% 56%, rgba(124,58,237,.34), transparent 74%),
    radial-gradient(closest-side at 50% 74%, rgba(255,255,255,.14), transparent 80%);
  filter:blur(38px);
  mix-blend-mode:screen;
  opacity:1;
}
.heroSoloArt__image{
  display:block;
  width:auto;
  height:640px;
  max-width:min(100%, 430px);
  object-fit:contain;
  filter:
    drop-shadow(0 34px 84px rgba(0,0,0,.48))
    drop-shadow(0 0 54px rgba(34,211,238,.34))
    drop-shadow(0 0 110px rgba(124,58,237,.30))
    drop-shadow(0 0 160px rgba(34,211,238,.18));
}
.panel--legacy-hidden,
.note--legacy-hidden{
  display:none !important;
}
.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}
.hero__price{margin-top:14px;margin-left:10px;font-size:18px;color:rgba(255,255,255,.55);display:flex;align-items:baseline;gap:4px}
.hero__priceVal{
  font-size:22px;
  font-weight:700;
  background:linear-gradient(90deg,#a78bfa,#22D3EE);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.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;}
.panel__mid--legacy,
.panel__bottom--legacy{
  display:none;
}
.panel__preview{
  position:relative;
  min-height:500px;
  padding:18px 10px 8px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.panel__preview::before{
  content:"";
  position:absolute;
  inset:8% 6% 0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 56% 18%, rgba(34,211,238,.24), transparent 28%),
    radial-gradient(circle at 36% 56%, rgba(124,58,237,.20), transparent 34%),
    radial-gradient(circle at 58% 78%, rgba(255,255,255,.09), transparent 28%);
  filter:blur(42px);
  opacity:.95;
}
.panel__preview::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:18px;
  height:88px;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(34,211,238,.22), transparent 72%),
    radial-gradient(closest-side at 50% 60%, rgba(124,58,237,.14), transparent 78%);
  filter:blur(18px);
  opacity:.9;
}
.panel__previewImage{
  display:block;
  width:auto;
  height:520px;
  max-width:min(100%, 430px);
  object-fit:contain;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.45));
}
.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)}

.railShowcase{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.railRibbons{
  position:relative;
  display:grid;
  gap:10px;
}
.railRibbon{
  position:relative;
  overflow:hidden;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(255,255,255,.015), rgba(255,255,255,.07) 18%, rgba(255,255,255,.095) 50%, rgba(255,255,255,.07) 82%, rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.railRibbon::before,
.railRibbon::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:180px;
  z-index:2;
  pointer-events:none;
}
.railRibbon::before{
  left:0;
  background:linear-gradient(90deg, rgba(7,9,20,1), rgba(7,9,20,0));
}
.railRibbon::after{
  right:0;
  background:linear-gradient(-90deg, rgba(7,9,20,1), rgba(7,9,20,0));
}
.railRibbon__track{
  --rail-distance: 0px;
  --rail-duration: 36s;
  display:flex;
  align-items:center;
  gap:36px;
  width:max-content;
  animation: railMarquee var(--rail-duration) linear infinite;
  will-change: transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.railRibbon--reverse .railRibbon__track{
  animation-direction: reverse;
}
.railRibbon__group{
  display:flex;
  align-items:center;
  gap:36px;
  flex:0 0 auto;
  padding-inline:34px;
}
.railRibbon__item{
  display:inline-flex;
  align-items:baseline;
  gap:12px;
  white-space:nowrap;
}
.railRibbon__count{
  color:rgba(255,255,255,.96);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}
.railRibbon__sep{
  color:rgba(255,255,255,.34);
  font-size:20px;
  font-weight:700;
}
.railRibbon__list{
  color:rgba(255,255,255,.64);
  font-size:16px;
}
.railRibbon__divider{
  width:1px;
  height:30px;
  flex:0 0 1px;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
}
@keyframes railMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--rail-distance)),0,0)}
}

.serverShowcase{
  display:grid;
  gap:10px;
}
.serverShowcase__head{
  display:grid;
  gap:8px;
  justify-items:center;
  text-align:center;
}
.serverShowcase__title{
  margin-bottom:0;
}
.serverShowcase__lead{
  color:rgba(255,255,255,.62);
  font-size:15px;
}
.serverOrbit{
  position:relative;
  min-height:clamp(420px, 46vw, 580px);
  margin-top:0;
  perspective:800px;
  perspective-origin:50% 30%;
  overflow:visible;
}
.section--servers{
  overflow:hidden;
}
.serverOrbit__ambient{
  position:absolute;
  inset:10% 6%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, rgba(124,58,237,.22), transparent 34%),
    radial-gradient(circle at 46% 56%, rgba(34,211,238,.16), transparent 44%);
  filter:blur(52px);
  opacity:.95;
}
.serverOrbit__stage{
  position:relative;
  min-height:inherit;
  transform-style:preserve-3d;
  transform:translate3d(0,0,0) rotateX(-14deg) rotateY(0deg);
}
.serverOrbit__guide{
  display:none;
}
.serverOrbit__deck{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.serverCard{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 170% at 0% 0%, rgba(var(--server-accent, 124,58,237),.22), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%),
    rgba(11,15,28,.84);
  box-shadow:
    0 0 0 1px rgba(var(--server-accent, 124,58,237),.20) inset,
    0 1px 0 0 rgba(255,255,255,.22) inset,
    0 -1px 0 0 rgba(0,0,0,.30) inset;
  padding:22px 20px 18px;
}
.serverCard--orbit.serverCard{
  background:
    radial-gradient(140% 170% at 0% 0%, rgba(var(--server-accent, 124,58,237),.28), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%),
    rgb(11,15,28);
}
.serverCard--orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(180px, 16vw, 240px);
  min-height:148px;
  padding:14px 14px 12px !important;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  backface-visibility:visible;
  pointer-events:none;
  transition:none;
  /* Fix pixelated text in 3D */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* ── 3D-толщина: грани экструдированной плиты (T = 16px) ───────────── */
.serverCard--orbit::before,
.serverCard--orbit::before,
.serverCard--orbit::after{
  content:"";
}
/* Боковые грани = толщина плиты. Вращение идёт вокруг Y, поэтому торец карточки —
   это ЛЕВО/ПРАВО (верх/низ торцом не становятся). Грань вписана внутрь скруглений
   (отступ = радиус 28px), чтобы её прямые углы не вылезали за дугу. */
.serverCard--orbit::before,
.serverCard--orbit::after{
  position:absolute;
  pointer-events:none;
  top:28px;
  width:30px;
  height:calc(100% - 56px);
}
/* Левая грань */
.serverCard--orbit::before{
  left:0;
  transform-origin:left center;
  transform:rotateY(90deg);
  background:linear-gradient(to right,
    rgba(150,175,255,.60) 0%,
    rgba(22,28,52,1) 42%,
    rgba(6,9,20,1) 100%);
}
/* Правая грань */
.serverCard--orbit::after{
  right:0;
  transform-origin:right center;
  transform:rotateY(-90deg);
  background:linear-gradient(to left,
    rgba(150,175,255,.60) 0%,
    rgba(22,28,52,1) 42%,
    rgba(6,9,20,1) 100%);
}
.serverCard--orbit .serverCard__top{
  gap:8px;
}
.serverCard--orbit .serverCard__flag{
  width:28px;
  height:20px;
}
.serverCard--orbit .serverCard__name{
  font-size:15px;
}
.serverCard--orbit .serverCard__sub{
  font-size:11px;
}
.serverCard--orbit .serverCard__stats{
  gap:8px;
  margin-top:12px;
}
.serverCard--orbit .serverCard__stat strong{
  font-size:13px;
}
.serverCard--orbit .serverCard__stat span{
  font-size:10px;
}
.serverCard--orbit .serverCard__status{
  margin-top:10px;
  font-size:12px;
}
.serverCard--orbit .serverCard__statusDot{
  width:6px;
  height:6px;
}
.serverCard__top{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:14px;
}
.serverCard__flag{
  width:40px;
  height:28px;
  display:block;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
  margin-top:2px;
}
.serverCard__code{
  color:rgba(255,255,255,.86);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
}
.serverCard__head{
  display:grid;
  gap:4px;
}
.serverCard__name{
  color:rgba(255,255,255,.96);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
}
.serverCard__sub{
  color:rgba(255,255,255,.48);
  font-size:14px;
  line-height:1.35;
}
.serverCard__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}
.serverCard__stat{
  display:grid;
  gap:4px;
}
.serverCard__stat strong{
  color:#26d56b;
  font-size:18px;
  font-weight:800;
  line-height:1.1;
}
.serverCard__stat span{
  color:rgba(255,255,255,.38);
  font-size:12px;
  letter-spacing:.06em;
}
.serverCard__status{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#26d56b;
  font-size:14px;
}
.serverCard__statusDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#26d56b;
  box-shadow:0 0 14px rgba(38,213,107,.45);
}

/* Sections */
.section{padding:44px 0 8px}
.section--rails{padding-top:22px}
#how{padding-top:80px}
#how > .wrap > .h2{
  position:relative;
  z-index:2;
  margin-top:0;
  margin-bottom:18px;
  transform:translateY(-26px);
}
.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:20px;
  box-shadow: 0 16px 70px rgba(0,0,0,.35);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  display:grid;
  grid-template-columns:48px 1fr;
  grid-template-rows:auto auto auto;
  column-gap:14px;
  row-gap:0;
  align-items:center;
}
.glass:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(124,58,237,.4), 0 0 30px rgba(124,58,237,.2), 0 0 60px rgba(34,211,238,.1);
  border-color:rgba(124,58,237,.5);
  background:rgba(124,58,237,.08);
}
.glass__icon{
  grid-column:1;
  grid-row:1;
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.glass__icon svg{
  width:24px;
  height:24px;
  display:block;
}
.glass__icon svg :where(path, rect, circle, line, polyline, polygon):not([fill]){
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.glass__h{
  grid-column:2;
  grid-row:1;
  font-weight:700;
  font-size:22px;
  letter-spacing:-.02em;
  margin-top:0;
  align-self:center;
}
.glass__p{
  grid-column:1 / -1;
  grid-row:2;
  color:var(--muted);
  margin-top:10px;
  line-height:1.55;
  font-size:15px;
}
.glass__stat{
  grid-column:1 / -1;
  grid-row:3;
  justify-self:start;
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(124,58,237,.35);
  background:linear-gradient(90deg, rgba(124,58,237,.25), rgba(34,211,238,.12));
  color:rgba(255,255,255,.9);
  font-size:12px;
  font-weight:700;
}
#features .grid3.reveal-stagger--ready .glass{
  --feature-reveal-transform:translate3d(0,56px,0) scale(.95);
  will-change:transform,opacity;
}
#features .grid3.reveal-stagger--ready .glass:nth-child(3n+1){
  --feature-reveal-transform:translate3d(-58px,36px,0) rotate(-4deg) scale(.96);
}
#features .grid3.reveal-stagger--ready .glass:nth-child(3n+2){
  --feature-reveal-transform:translate3d(0,62px,0) scale(.94);
}
#features .grid3.reveal-stagger--ready .glass:nth-child(3n){
  --feature-reveal-transform:translate3d(58px,36px,0) rotate(4deg) scale(.96);
}
#features .grid3.reveal-stagger--ready:not(.is-visible) .glass{
  opacity:0;
  transform:var(--feature-reveal-transform);
  pointer-events:none;
}
#features .grid3.reveal-stagger--ready.is-visible .glass{
  opacity:1;
  transform:none;
  pointer-events:auto;
  animation:featureCardReveal .82s cubic-bezier(.22, 1, .36, 1) both;
}
#features .grid3.reveal-stagger--ready.is-visible .glass:nth-child(1){animation-delay:0ms}
#features .grid3.reveal-stagger--ready.is-visible .glass:nth-child(2){animation-delay:90ms}
#features .grid3.reveal-stagger--ready.is-visible .glass:nth-child(3){animation-delay:180ms}
#features .grid3.reveal-stagger--ready.is-visible .glass:nth-child(4){animation-delay:120ms}
#features .grid3.reveal-stagger--ready.is-visible .glass:nth-child(5){animation-delay:210ms}
#features .grid3.reveal-stagger--ready.is-visible .glass:nth-child(6){animation-delay:300ms}
@keyframes featureCardReveal{
  from{
    opacity:0;
    transform:var(--feature-reveal-transform);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.pricingStrip.reveal-ready,
.pricingCalcHead.reveal-ready,
.pricingCalculator.reveal-ready{
  transition:
    opacity .82s cubic-bezier(.22, 1, .36, 1),
    transform .82s cubic-bezier(.22, 1, .36, 1);
  will-change:transform,opacity;
}
.pricingCalcHead.reveal-ready:not(.is-visible){
  opacity:0;
  transform:translate3d(0,32px,0);
}
.pricingCalcHead.reveal-ready.is-visible{
  opacity:1;
  transform:none;
}
.pricingCalculator.reveal-ready:not(.is-visible),
.pricingStrip.reveal-ready:not(.is-visible){
  opacity:0;
  transform:translate3d(0,48px,0) scale(.98);
}
.pricingCalculator.reveal-ready.is-visible,
.pricingStrip.reveal-ready.is-visible{
  opacity:1;
  transform:none;
}

.pricingCalcHead{
  max-width:760px;
  margin:0 auto 22px;
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
}
.pricingCalcHead__eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(124,58,237,.28);
  background:linear-gradient(90deg, rgba(124,58,237,.14), rgba(34,211,238,.08));
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.pricingCalcHead__title{
  margin-bottom:0;
}
.pricingCalcHead__lead{
  color:rgba(255,255,255,.68);
  font-size:16px;
  line-height:1.6;
}
.pricingCalculator{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr);
  gap:24px;
  align-items:stretch;
}
.pricingCalcPanel{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(124,58,237,.10), transparent 42%),
    rgba(11,15,31,.64);
  box-shadow:0 24px 90px rgba(0,0,0,.34);
}
.pricingCalcPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 14% 12%, rgba(255,255,255,.08), transparent 52%),
    radial-gradient(120% 120% at 84% 20%, rgba(34,211,238,.08), transparent 56%);
  opacity:.92;
}
.pricingCalcPanel > *{
  position:relative;
  z-index:1;
}
.pricingCalcPanel--summary{
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(34,211,238,.10), transparent 44%),
    rgba(10,14,28,.74);
}
.pricingCalcPanel--controls{
  display:grid;
  gap:0;
}
.pricingCalcControl{
  --calc-accent:#22d3ee;
  --calc-accent-soft:rgba(34,211,238,.14);
  --calc-accent-glow:rgba(34,211,238,.42);
  display:grid;
  grid-template-rows:auto 28px 18px minmax(48px,auto);
  align-content:start;
  gap:14px;
  padding:4px 0 24px;
}
.pricingCalcControl + .pricingCalcControl{
  margin-top:8px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pricingCalcControl--cyan{
  --calc-accent:#47a8ff;
  --calc-accent-soft:rgba(71,168,255,.14);
  --calc-accent-glow:rgba(71,168,255,.44);
}
.pricingCalcControl--violet{
  --calc-accent:#9c63ff;
  --calc-accent-soft:rgba(156,99,255,.14);
  --calc-accent-glow:rgba(156,99,255,.44);
}
.pricingCalcControl__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.pricingCalcControl__label{
  color:rgba(255,255,255,.92);
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:none;
}
.pricingCalcControl__value{
  display:flex;
  align-items:baseline;
  gap:10px;
  color:rgba(255,255,255,.96);
}
.pricingCalcControl__value span{
  font-size:42px;
  font-weight:800;
  letter-spacing:-.05em;
  line-height:1;
}
.pricingCalcControl__value small{
  color:rgba(255,255,255,.64);
  font-size:16px;
  font-weight:600;
}
.pricingCalcRangeWrap{
  --range-progress:0%;
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:28px;
  isolation:isolate;
  overflow:visible;
}
.pricingCalcRangeWrap::before{
  content:"";
  position:absolute;
  inset:50% 0 auto;
  height:5px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.pricingCalcRangeWrap::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:var(--range-progress);
  height:5px;
  transform:translateY(-50%);
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72), var(--calc-accent) 24%, var(--calc-accent) 100%),
    linear-gradient(110deg, transparent 0%, transparent 36%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 56%, transparent 64%, transparent 100%);
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%, 38% 100%;
  background-position:0 0, -60% 0;
  box-shadow:0 0 10px var(--calc-accent-soft), 0 0 22px rgba(255,255,255,.06);
  transition:width .4s cubic-bezier(.22, 1, .36, 1);
  animation:pricingLineSweep 3.6s linear infinite;
}
.pricingCalcRangeShine{
  display:none;
}
.pricingCalcRangeKnob{
  position:absolute;
  left:var(--range-progress);
  top:50%;
  width:22px;
  height:22px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  border:1.5px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.98) 0 14%, rgba(255,255,255,.92) 15%, rgba(255,255,255,.74) 30%, rgba(255,255,255,.18) 31%, var(--calc-accent) 58%, rgba(7,14,32,.95) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.32),
    0 8px 18px rgba(0,0,0,.22);
  transition:
    left .42s cubic-bezier(.22, 1, .36, 1),
    transform .22s ease,
    box-shadow .22s ease;
}
.pricingCalcRangeKnob::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, var(--calc-accent-soft) 0%, rgba(255,255,255,.1) 28%, transparent 72%);
  filter:blur(10px);
  opacity:.95;
}
.pricingCalcRangeKnob::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.96), rgba(255,255,255,0) 78%);
  opacity:.9;
}
.pricingCalcRange{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  z-index:2;
  width:100%;
  height:28px;
  margin:0;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  background:transparent;
  touch-action:pan-y;
}
.pricingCalcRange::-webkit-slider-runnable-track{
  height:28px;
  background:transparent;
}
.pricingCalcRange::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:28px;
  height:28px;
  margin-top:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  opacity:0;
  cursor:pointer;
}
.pricingCalcRange::-moz-range-thumb{
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  opacity:0;
  cursor:pointer;
}
.pricingCalcRange::-moz-range-track{
  height:28px;
  border-radius:999px;
  background:transparent;
  border:0;
}
.pricingCalcRangeWrap:hover .pricingCalcRangeKnob,
.pricingCalcRange:focus-visible + .pricingCalcRangeShine + .pricingCalcRangeKnob,
.pricingCalcRange:active + .pricingCalcRangeShine + .pricingCalcRangeKnob{
  transform:translate(-50%, -50%) scale(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.36),
    0 10px 20px rgba(0,0,0,.24);
}
.pricingCalcMarks{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:rgba(255,255,255,.42);
  font-size:12px;
  font-weight:600;
}
.pricingCalcControl__hint{
  color:rgba(255,255,255,.56);
  font-size:14px;
  line-height:1.5;
  min-height:42px;
}
.pricingCalcStats{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.pricingCalcStat{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:10px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  text-align:center;
}
.pricingCalcStat__label{
  color:rgba(255,255,255,.46);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pricingCalcStat strong{
  color:rgba(255,255,255,.96);
  font-size:24px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.15;
}
.pricingCalcStat--accent strong{
  color:#22d3ee;
}
.pricingSummary__eyebrow{
  color:rgba(255,255,255,.48);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pricingSummary__amount{
  margin-top:12px;
  color:rgba(255,255,255,.98);
  font-size:56px;
  font-weight:800;
  letter-spacing:-.06em;
  line-height:1;
}
.pricingSummary__sub{
  margin-top:14px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:rgba(255,255,255,.78);
  font-size:16px;
  font-weight:600;
}
.pricingSummary__dotSep{
  color:rgba(255,255,255,.32);
}
.pricingSummary__note{
  margin-top:14px;
  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.6;
}
.pricingSummary__badges{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pricingSummary__badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.86);
  font-size:13px;
  font-weight:700;
}
.pricingSummary__list{
  margin-top:22px;
  display:grid;
  gap:12px;
}
.pricingSummary__item{
  display:grid;
  grid-template-columns:10px 1fr;
  gap:10px;
  align-items:start;
  color:rgba(255,255,255,.76);
  font-size:15px;
  line-height:1.55;
}
.pricingSummary__dot{
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#22d3ee);
  box-shadow:0 0 16px rgba(124,58,237,.45);
}
.pricingSummary__cta{
  width:100%;
  margin-top:26px;
}
.pricingSummary__foot{
  margin-top:14px;
  color:rgba(255,255,255,.48);
  font-size:13px;
  line-height:1.5;
}

@keyframes pricingLineSweep{
  0%{
    background-position:0 0, -60% 0;
  }
  100%{
    background-position:0 0, 160% 0;
  }
}

.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}

.pricingStrip{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:20px 28px;box-shadow:0 16px 70px rgba(0,0,0,.35)}
.pricingStrip__left{display:flex;flex-direction:column;gap:4px}
.pricingStrip__h{font-size:28px;font-weight:700;letter-spacing:-.02em}
.pricingStrip__p{font-size:14px;color:var(--muted)}

/* Roadmap */
@keyframes phoneBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.roadmap{
  position:relative;
  display:grid;
  gap:0;
}
.roadmap__item + .roadmap__item{
  margin-top:-100px;
}
.roadmap::before{
  content:"";
  position:absolute;
  top:25px;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background:linear-gradient(180deg,#7C3AED 0%,#22D3EE 100%);
  z-index:0;
}
.roadmap__item{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 50px 1fr;
  align-items:center;
  gap:64px;
}
/* --left: phone col1, dot col2, text col3 */
.roadmap__item--left .roadmap__dot{order:2}
.roadmap__item--left .roadmap__media{order:1;justify-content:flex-end}
.roadmap__item--left .roadmap__content{order:3;text-align:left;justify-self:start}
/* --right: text col1, dot col2, phone col3 */
.roadmap__item--right .roadmap__dot{order:2}
.roadmap__item--right .roadmap__content{order:1;text-align:right;justify-self:end}
.roadmap__item--right .roadmap__media{order:3;justify-content:flex-start}
@keyframes dotGlow{
  0%,100%{box-shadow:0 0 8px 2px rgba(34,211,238,.2), 0 0 20px 4px rgba(124,58,237,.15)}
  50%{box-shadow:0 0 18px 6px rgba(34,211,238,.55), 0 0 40px 10px rgba(124,58,237,.35)}
}
.roadmap__dot{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  background:linear-gradient(135deg,#7C3AED,#22D3EE);
  color:#fff;
  font-size:17px;
  font-weight:800;
  flex-shrink:0;
  animation:dotGlow 2.4s ease-in-out infinite;
}
.roadmap__media{
  width:100%;
  display:flex;
  align-items:center;
}
.roadmap__media img{
  width:min(100%,276px);
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.5));
  animation:phoneBob 3.2s ease-in-out infinite;
}
.roadmap__item:nth-child(even) .roadmap__media img{
  animation-delay:1.6s;
}
.roadmap__content{
  max-width:360px;
}
.roadmap__title{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.96);
}
.roadmap__text{
  margin-top:8px;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.6;
}

/* 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:16px 0 10px;color:rgba(255,255,255,.72)}
.footer--glass{margin-top:6px}
.footerGlass{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(124,58,237,.26), transparent 55%),
    radial-gradient(120% 160% at 94% 10%, rgba(34,211,238,.22), transparent 60%),
    rgba(255,255,255,.085);
  border-radius:20px;
  padding:14px 16px;
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    0 22px 65px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
  display:block;
}
.footerGlass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    radial-gradient(110% 80% at 0% 0%, rgba(255,255,255,.16), transparent 58%);
  mix-blend-mode:screen;
  opacity:.65;
}
.footerGlass__brand{
  padding:4px 8px 4px 0;
}
.footerGlass__top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(200px, 1fr) minmax(0, 2fr);
  gap:12px;
  align-items:start;
}
.footerGlass__links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.footerGlass__logoRow{
  display:flex;
  align-items:center;
  gap:12px;
}
.footerGlass__duck{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  flex:0 0 40px;
}
.footerGlass__logo{
  font-size:24px;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(255,255,255,.96);
}
.footerGlass__tag{
  margin-top:3px;
  color:rgba(255,255,255,.75);
  line-height:1.45;
  font-size:14px;
}
.footerGlass__social{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.footerSocial{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.84);
  transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.footerSocial:hover{
  transform:translateY(-1px);
  color:rgba(255,255,255,.98);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
}
.footerSocial svg{
  width:20px;
  height:20px;
  display:block;
}
.footerGlass__divider{
  position:relative;
  z-index:1;
  height:1px;
  margin:10px 0 10px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
}
.footerGlass__proxyNote{
  position:relative;
  z-index:1;
  text-align:center;
  padding:10px 0 14px;
}
.footerGlass__proxyNote a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--b);opacity:.75;
  text-decoration:none;transition:opacity .2s;
}
.footerGlass__proxyNote a:hover{opacity:1}
.footerGlass__bottom{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footerGlass__pay{
  flex:1 1 680px;
}
.footerGlass__payIcons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.payBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.payBadge img{
  height:22px;
  width:auto;
  object-fit:contain;
  display:block;
}
.payBadge--lg img{
  height:36px;
}
.footerGlass__copy{
  margin-top:0;
  color:rgba(255,255,255,.55);
  font-size:12px;
}
.footerGlass__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.footerGlass__col{
  padding:12px;
}
.footerGlass__col h3{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  color:rgba(255,255,255,.90);
}
.footerList{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.footerList li{
  color:rgba(255,255,255,.75);
  font-size:14px;
  line-height:1.4;
}
.footerList a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
}
.footerList a:hover{color:rgba(255,255,255,.96)}
.footerList--payments{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.payCell{
  display:block;
}
.payCell--bottomCenter{
  grid-column:1 / -1;
}
.payCell--cryptoCloud{
  width:100%;
  max-width:300px;
  margin:0 auto;
}
.payTile{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 0;
  overflow:hidden;
}
.payTile > img{
  width:100%;
  height:52px;
  max-width:100%;
  max-height:52px;
  object-fit:contain;
  display:block;
}
.payCell--cryptoCloud .payTile{
  min-height:0;
  padding:0;
  overflow:visible;
  justify-content:flex-start;
}
.cryptoCloudStack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.cryptoCloudLogo{
  width:min(100%,240px);
  height:54px;
  max-width:240px;
  max-height:54px;
  object-fit:contain;
  display:block;
}
.cryptoCloudCoins{
  width:min(100%,268px);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  justify-items:center;
  column-gap:0;
  padding:0;
  box-sizing:border-box;
}
.cryptoCloudCoins img{
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  max-width:40px;
  max-height:40px;
  object-fit:contain;
  display:block;
}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .header__cta{display:none}
  .burger{display:flex}
  /* Логотип по центру шапки */
  .header__wrap{position:relative;justify-content:center}
  .burger{position:absolute;right:0;top:50%;transform:translateY(-50%)}
  .pricingStrip{flex-direction:column;text-align:center;align-items:center}
  .pricingCalcHead{
    margin-bottom:14px;
  }
  .pricingCalculator{
    grid-template-columns:1fr;
    gap:12px;
  }
  .pricingCalcPanel{
    padding:16px;
  }
  .pricingCalcControl{
    gap:10px;
    padding:2px 0 8px;
  }
  .pricingCalcControl + .pricingCalcControl{
    margin-top:4px;
    padding-top:14px;
  }
  .pricingCalcControl__value span{
    font-size:32px;
  }
  .pricingCalcControl__hint{
    font-size:13px;
    min-height:unset;
  }
  .pricingCalcStats{
    margin-top:2px;
    grid-template-columns:1fr;
    gap:6px;
  }
  .pricingCalcStat{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    gap:8px;
    border-radius:12px;
  }
  .pricingCalcStat__label{
    font-size:11px;
    letter-spacing:.06em;
  }
  .pricingCalcStat strong{
    font-size:18px;
  }
  .pricingSummary__amount{
    font-size:50px;
  }
  .hero__wrap{grid-template-columns:1fr;gap:18px}
  .hero__right{
    justify-self:stretch;
  }
  .heroSoloArt{
    width:min(100%, 420px);
    margin-inline:auto;
  }
  .heroSoloArt::before{
    inset:4% -2% 10%;
    filter:blur(68px);
  }
  .heroSoloArt::after{
    left:-6%;
    right:-6%;
    bottom:10px;
    height:132px;
    filter:blur(32px);
  }
  .heroSoloArt__image{
    height:560px;
    max-width:min(100%, 360px);
  }
  .h1{font-size:38px}
  .grid3,.steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .panel__bottom{grid-template-columns:1fr}
  .orb{height:220px}
  .panel__preview{
    min-height:440px;
    padding:14px 8px 4px;
  }
  .panel__previewImage{
    height:452px;
    max-width:min(100%, 360px);
  }
  .roadmap__item + .roadmap__item{
    margin-top:0;
  }
  /* Линия по центру кружков */
  .roadmap::before{
    left:26px;
    transform:none;
  }
  /* Все items: одинаковый layout */
  .roadmap__item,
  .roadmap__item--right{
    grid-template-columns:52px 1fr;
    grid-template-rows:auto auto;
    align-items:start;
    gap:10px 14px;
  }
  /* dot — col1 row1 */
  .roadmap__item .roadmap__dot,
  .roadmap__item--right .roadmap__dot{
    order:1;
    grid-column:1;
    grid-row:1;
    justify-self:center;
  }
  /* content — col2 row1 */
  .roadmap__item .roadmap__content,
  .roadmap__item--right .roadmap__content{
    order:2;
    grid-column:2;
    grid-row:1;
    text-align:left;
    justify-self:stretch;
    max-width:none;
  }
  /* media — только col2 row2, не перекрывает линию */
  .roadmap__item .roadmap__media,
  .roadmap__item--right .roadmap__media{
    order:3;
    grid-column:2;
    grid-row:2;
    justify-content:flex-start;
  }
  .roadmap__item .roadmap__media img,
  .roadmap__item--right .roadmap__media img{
    width:min(100%, 200px);
  }
  .footerGlass__top{
    grid-template-columns:1fr;
  }
  .footerGlass__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .serverOrbit{
    min-height:560px;
    perspective:1440px;
  }
  .serverOrbit__guide--outer{
    width:min(96%, 860px);
    height:clamp(220px, 30vw, 280px);
  }
  .serverOrbit__guide--inner{
    width:min(74%, 620px);
    height:clamp(146px, 20vw, 190px);
  }
  .serverCard--orbit{
    width:min(42vw, 290px);
    min-height:186px;
    padding:18px 16px 15px;
  }
  .railRibbon{
    padding:16px 0;
  }
  .railRibbon__track,
  .railRibbon__group{
    gap:28px;
  }
  .railRibbon__count{
    font-size:18px;
  }
  .railRibbon__list{
    font-size:15px;
  }
}

@media (max-width: 680px){
  .pricingCalcHead{
    justify-items:start;
    text-align:left;
    margin-bottom:18px;
  }
  .pricingCalcHead__lead{
    font-size:15px;
  }
  .pricingCalculator{
    gap:14px;
  }
  .pricingCalcPanel{
    padding:18px 16px;
    border-radius:22px;
  }
  .pricingCalcControl{
    gap:12px;
    padding-bottom:18px;
  }
  .pricingCalcControl + .pricingCalcControl{
    margin-top:2px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .pricingCalcControl__top{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .pricingCalcControl__value span{
    font-size:30px;
  }
  .pricingCalcControl__value small{
    font-size:14px;
  }
  .pricingCalcMarks{
    font-size:11px;
  }
  .pricingCalcControl{
    grid-template-rows:auto 28px 18px auto;
  }
  .pricingCalcControl__hint{
    font-size:13px;
    min-height:unset;
    margin-bottom:0;
    padding-bottom:0;
  }
  .pricingCalcStats{
    margin-top:2px;
    grid-template-columns:1fr;
    gap:6px;
  }
  .pricingCalcStat{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:9px 12px;
    gap:8px;
    border-radius:12px;
  }
  .pricingCalcStat strong{
    font-size:18px;
  }
  .pricingSummary__amount{
    font-size:42px;
  }
  .pricingSummary__sub{
    font-size:15px;
  }
  .pricingSummary__note{
    font-size:14px;
  }
  .pricingSummary__badges{
    margin-top:16px;
    gap:8px;
  }
  .pricingSummary__badge{
    font-size:12px;
  }
  .pricingSummary__list{
    margin-top:18px;
  }
  .pricingSummary__item{
    font-size:14px;
  }
  .pricingSummary__foot{
    font-size:12px;
  }
  .heroSoloArt{
    width:min(100%, 320px);
    padding:0;
  }
  .heroSoloArt::before{
    inset:8% -6% 12%;
    filter:blur(42px);
  }
  .heroSoloArt::after{
    left:-10%;
    right:-10%;
    bottom:8px;
    height:88px;
    filter:blur(24px);
  }
  .heroSoloArt__image{
    height:430px;
    max-width:min(100%, 300px);
  }
  .panel__preview{
    min-height:380px;
    padding:10px 0 2px;
  }
  .panel__preview::before{
    inset:10% 0 4%;
    filter:blur(30px);
  }
  .panel__preview::after{
    left:2%;
    right:2%;
    bottom:10px;
    height:62px;
  }
  .panel__previewImage{
    height:392px;
    max-width:min(100%, 300px);
  }
  .footerGlass{
    border-radius:20px;
    padding:14px;
  }
  .footerGlass__links{
    grid-template-columns:1fr;
  }
  .footerGlass__col{
    padding:11px;
  }
  .footerGlass__bottom{
    align-items:flex-start;
  }
  .footerGlass__payIcons{
    gap:8px;
  }
  .payBadge{
  }
  .payBadge img{
    height:18px;
  }
  .payCell--cryptoCloud .payTile{
    min-height:0;
    padding:0;
  }
  .cryptoCloudLogo{
    width:min(100%,208px);
    height:46px;
    max-width:208px;
    max-height:46px;
  }
  .cryptoCloudCoins img{
    max-width:34px;
    max-height:34px;
  }
  #features .grid3.reveal-stagger--ready .glass:nth-child(3n+1),
  #features .grid3.reveal-stagger--ready .glass:nth-child(3n+2),
  #features .grid3.reveal-stagger--ready .glass:nth-child(3n){
    --feature-reveal-transform:translate3d(0,34px,0) scale(.98);
  }
  .serverOrbit{
    min-height:400px;
    perspective:900px;
  }
  .serverOrbit__guide--outer{
    width:95%;
    height:196px;
  }
  .serverOrbit__guide--inner{
    width:74%;
    height:124px;
  }
  .serverCard--orbit{
    width:min(25vw, 96px);
    min-height:96px;
    padding:9px 8px 7px;
    border-radius:14px;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .serverCard--orbit .serverCard__flag{
    width:20px;
    height:14px;
  }
  .serverCard--orbit .serverCard__name{
    font-size:11px;
  }
  .serverCard--orbit .serverCard__sub{
    font-size:9px;
  }
  .serverCard--orbit .serverCard__stats{
    gap:4px;
    margin-top:7px;
  }
  .serverCard--orbit .serverCard__stat strong{
    font-size:10px;
  }
  .serverCard--orbit .serverCard__stat span{
    font-size:8px;
  }
  .serverCard--orbit .serverCard__status{
    margin-top:6px;
    font-size:9px;
  }
  .railRibbon{
    padding:15px 0;
  }
  .railRibbon::before,
  .railRibbon::after{
    width:48px;
  }
  .railRibbon__track,
  .railRibbon__group{
    gap:20px;
  }
  .railRibbon__group{
    padding-inline:18px;
  }
  .railRibbon__item{
    gap:8px;
  }
  .railRibbon__count{
    font-size:16px;
  }
  .railRibbon__sep,
  .railRibbon__list{
    font-size:13px;
  }
  .railRibbon__divider{
    height:24px;
  }
  .glass__icon{
    width:44px;
    height:44px;
  }
  .glass__icon svg{
    width:22px;
    height:22px;
  }
  .glass__h{
    font-size:20px;
  }
  #features .grid3.reveal-stagger--ready .glass:nth-child(3n+1){
    --feature-reveal-transform:translate3d(-42px,28px,0) rotate(-3deg) scale(.97);
  }
  #features .grid3.reveal-stagger--ready .glass:nth-child(3n+2){
    --feature-reveal-transform:translate3d(0,48px,0) scale(.95);
  }
  #features .grid3.reveal-stagger--ready .glass:nth-child(3n){
    --feature-reveal-transform:translate3d(42px,28px,0) rotate(3deg) scale(.97);
  }
  .glass__p{
    font-size:15px;
  }
  .roadmap__item,
  .roadmap__item--right{
    gap:10px 14px;
    padding:10px 10px 10px 0;
  }
  .roadmap__dot{
    width:36px;
    height:36px;
    font-size:14px;
  }
  /* При padding=0 слева, dot центр = 52/2 = 26px — совпадает с линией */
  .roadmap__title{
    font-size:22px;
  }
  .roadmap__text{
    font-size:15px;
  }
}

/* ── Fan carousel (перспективный веер, активируется JS-классом) ── */
.serverOrbit--fan{
  perspective:900px;
  perspective-origin:50% 50%;
  overflow:hidden;
  min-height:340px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 72px, black calc(100% - 72px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, black 72px, black calc(100% - 72px), transparent 100%);
}
.serverOrbit--fan .serverOrbit__ambient{opacity:.6}
.serverOrbit--fan .serverOrbit__stage{
  min-height:inherit;
  transform-style:preserve-3d;
  transform:none !important;
}
.serverOrbit--fan .serverOrbit__deck{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:none !important;
}
.serverOrbit--fan .serverCard--orbit{
  position:absolute;
  width:260px !important;
  min-height:180px !important;
  padding:18px 18px 16px !important;
  border-radius:22px !important;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
}
.serverOrbit--fan .serverCard--orbit .serverCard__flag{width:32px;height:22px}
.serverOrbit--fan .serverCard--orbit .serverCard__name{font-size:18px}
.serverOrbit--fan .serverCard--orbit .serverCard__sub{font-size:12px}
.serverOrbit--fan .serverCard--orbit .serverCard__stats{gap:14px;margin-top:14px}
.serverOrbit--fan .serverCard--orbit .serverCard__stat strong{font-size:15px}
.serverOrbit--fan .serverCard--orbit .serverCard__stat span{font-size:10px;letter-spacing:.04em}
.serverOrbit--fan .serverCard--orbit .serverCard__status{margin-top:12px;font-size:13px}

/* ── Мобильные: отключаем тяжёлый backdrop-filter для GPU ── */
@media (max-width: 680px){
  .panel,
  .glass,
  .footerGlass,
  .serverCard--orbit{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* Лента от края до края */
  .railShowcase{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }
  .hero__right{ display:none; }
  .railRibbons{
    gap:2px;
  }
  .hero{
    padding-bottom:28px;
  }
  .section--rails{
    padding:0;
    margin-top:0;
    position:relative;
    z-index:2;
  }
}

/* ── 480px: very small phones (iPhone SE, Android 360-412px) ── */
@media (max-width: 480px){
  /* Header */
  .brand__name{font-size:26px}
  .brand__icon{width:34px;height:34px}

  /* Hero */
  .hero{padding:14px 0 28px}
  .h1{font-size:28px;letter-spacing:-.4px}
  .lead{font-size:15px}
  .hero__buttons{gap:8px;margin-top:14px}
  .hero__buttons .btn{
    flex:1 1 100%;
    justify-content:center;
    min-height:44px;
  }
  .hero__price{
    font-size:15px;
    margin-left:0;
    margin-top:10px;
  }
  .hero__priceVal{font-size:18px}
  .chips{gap:8px;margin-top:12px}

  /* Hero map — smaller on tiny screens */
  .heroMap{border-radius:14px}

  /* Sections */
  .section{padding:32px 0 6px}
  .section--rails{padding:0;margin-top:0;margin-bottom:0;position:relative;z-index:2}
  #how{padding-top:48px}
  .h2{font-size:22px;letter-spacing:-.3px}

  /* Pricing strip */
  .pricingStrip{padding:16px 18px;border-radius:18px}
  .pricingStrip__h{font-size:22px}

  /* Pricing calculator */
  .pricingCalcPanel{border-radius:18px}

  /* FAQ */
  .faq{border-radius:18px}
  .faq summary{font-size:15px}

  /* Footer */
  .footerGlass{border-radius:16px;padding:12px}
  .footerGlass__col{padding:10px}

  /* Orb section */
  .orb{height:180px}
}

@media (prefers-reduced-motion: reduce){
  .railRibbon__track{
    animation:none;
    transform:none !important;
  }
  #features .grid3.reveal-stagger--ready:not(.is-visible) .glass,
  .pricingCalcHead.reveal-ready:not(.is-visible),
  .pricingCalculator.reveal-ready:not(.is-visible),
  .pricingStrip.reveal-ready:not(.is-visible){
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  #features .grid3.reveal-stagger--ready.is-visible .glass{
    animation:none;
  }
  .serverCard{
    transition:none;
  }
  .serverCard.serverCard--ready{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* 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;
}