/* ================= рефералы: карточка-приглашение ================= */
  /* у нового пользователя друзей ноль, поэтому карточка держится на свете и стекле, а не на цифрах */
  .ref {
    position: relative;
    padding: clamp(40px, 6vw, 90px) 0 clamp(56px, 8vw, 110px);
    background: radial-gradient(40% 34% at 30% 56%, rgba(255, 255, 255, .05), transparent 70%);
  }
  .ref[hidden], .nav-link[hidden], .foot-links a[hidden] { display: none; }
  a.nav-link { text-decoration: none; }
  .ref-stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 6vw, 84px); align-items: center; max-width: 1060px; margin: 0 auto; }
  .ref-scene { position: relative; display: grid; place-items: center; padding: 12px 0 46px; }
  .ref-floor { /* отсвет карточки под ней */
    position: absolute; left: 14%; right: 14%; bottom: 4px; height: 44px; border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .15), transparent 70%);
    filter: blur(12px); pointer-events: none;
  }

  /* карточка: размеры внутри в cqw, поэтому она одинаково выглядит и на главной, и в окне.
     --rx/--ry - наклон, --px/--py - сдвиг слоёв, --mx/--my - где блик, --hv - сила отлива, --ang - поворот радуги на кромке */
  .rcard {
    --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --mx: 50%; --my: 40%; --hv: .3; --ang: 200deg;
    position: relative;
    width: min(480px, 100%); aspect-ratio: 1.586;
    border-radius: 20px; /* cqw у самого контейнера считается от ширины окна, поэтому точный радиус - у слоёв внутри */
    container-type: inline-size;
    transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
    will-change: transform;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 70px -22px rgba(255, 255, 255, .3);
    user-select: none; -webkit-user-select: none;
  }
  .rc-in {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 5.6cqw 6.2cqw;
    border-radius: 4.6cqw;
    overflow: hidden; isolation: isolate;
    color: #f4f4f5;
    background:
      radial-gradient(90% 80% at 0% 0%, rgba(255, 255, 255, .13), transparent 55%),
      radial-gradient(70% 60% at 100% 100%, rgba(255, 255, 255, .05), transparent 60%),
      linear-gradient(155deg, #1c1c22, #0c0c0f 55%, #141419);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }
  .rc-in::after { /* световая полоса изредка проходит по стеклу */
    content: ""; position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .08) 50%, transparent 56%);
    transform: translateX(-60%);
    animation: rc-sweep 7.5s ease-in-out 1.2s infinite;
  }
  @keyframes rc-sweep { 0%, 72% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
  .rc-guil { /* тонкие кольца расходятся от сферы, как гильош на банкноте */
    position: absolute; inset: -12px; z-index: -1;
    background: repeating-radial-gradient(circle at 76% 64%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 2.3cqw);
    -webkit-mask: radial-gradient(62% 80% at 76% 64%, #000, transparent 78%); mask: radial-gradient(62% 80% at 76% 64%, #000, transparent 78%);
    transform: translate(calc(var(--px) * -7px), calc(var(--py) * -7px));
  }
  .rc-foil { /* при наклоне стекло отливает спектром: свет проходит через призму */
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 26%, rgba(255, 130, 205, .5) 36%, rgba(125, 225, 255, .5) 44%, rgba(255, 238, 150, .5) 52%, rgba(175, 140, 255, .5) 60%, transparent 72%);
    background-size: 260% 260%; background-position: var(--mx) var(--my);
    mix-blend-mode: color-dodge;
    opacity: calc(var(--hv) * .24);
  }
  .rc-beam {
    position: absolute; left: 0; right: 0; top: 64%; z-index: -1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 18%, rgba(255, 255, 255, .72) 76%, rgba(255, 255, 255, .22) 93%, transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, .35);
  }
  .rc-orb {
    position: absolute; left: 76%; top: 50%;
    width: 4.4cqw; height: 4.4cqw; margin: -2.2cqw 0 0 -2.2cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fff 0 40%, #e6ebff 70%, #b9c2d8);
    box-shadow: 0 0 2cqw #fff, 0 0 7cqw rgba(255, 255, 255, .55), 0 0 18cqw rgba(255, 255, 255, .22);
    transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px));
    animation: rc-pulse 3.6s ease-in-out infinite;
  }
  @keyframes rc-pulse { 50% { box-shadow: 0 0 2.4cqw #fff, 0 0 9cqw rgba(255, 255, 255, .7), 0 0 24cqw rgba(255, 255, 255, .3); } }
  .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; }
  .rc-brand { display: inline-flex; align-items: center; font: 500 5.4cqw/1 Unbounded, Inter, sans-serif; letter-spacing: -.04em; }
  .rc-kind { display: inline-flex; align-items: center; gap: 1.8cqw; color: rgba(255, 255, 255, .62); font: 500 2.3cqw/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; }
  .rc-kind svg { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
  .rc-offer { margin-top: 7.4cqw; transform: translate(calc(var(--px) * 3px), calc(var(--py) * 3px)); }
  .rc-offer b {
    display: block;
    font: 500 14cqw/1 Unbounded, Inter, sans-serif; letter-spacing: -.05em;
    background: linear-gradient(180deg, #fff 30%, #9d9da8);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 3cqw rgba(255, 255, 255, .25));
  }
  .rc-bot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqw; }
  .rc-bot > div { min-width: 0; }
  .rc-bot small { display: block; margin-bottom: 1.3cqw; color: rgba(255, 255, 255, .42); font: 500 2cqw/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; }
  .rc-bot span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 3.5cqw/1.15 Inter, system-ui, sans-serif; color: #fff; }
  .rc-code { flex: none; text-align: right; }
  .rc-code span { font: 500 4.4cqw/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; margin-right: -.16em; }
  .rc-bot .rc-ph { color: rgba(255, 255, 255, .34); }
  .rc-glare { /* блик идёт за курсором */
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 44%);
    mix-blend-mode: soft-light;
    opacity: calc(.35 + var(--hv) * .65);
  }
  .rc-edge { /* кромка: белая, а при наклоне по ней бежит радуга */
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    padding: 1px; border-radius: 4.6cqw;
    background: conic-gradient(from var(--ang), rgba(255, 255, 255, .55), rgba(255, 170, 220, .75), rgba(160, 230, 255, .75), rgba(255, 240, 170, .75), rgba(190, 165, 255, .75), rgba(255, 255, 255, .55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: calc(.22 + var(--hv) * .5);
  }

  /* три шага: номера на тонком луче */
  .ref-steps { position: relative; display: grid; gap: 24px; padding: 0; list-style: none; }
  .ref-steps::before { content: ""; position: absolute; left: 18px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)); }
  .ref-steps li { position: relative; display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 16px; align-items: start; }
  .ref-num {
    display: grid; place-items: center;
    width: 37px; height: 37px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .18), #0b0b0e 72%);
    box-shadow: 0 0 22px -6px rgba(255, 255, 255, .45);
    color: #fff; font: 500 12px "JetBrains Mono", ui-monospace, monospace;
  }
  .ref-steps h3 { margin: 7px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  .ref-steps p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 40ch; }
  .ref-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 14px 53px; }
  .ref-cta .cta.is-done { box-shadow: 0 0 0 1px #fff, 0 0 38px rgba(255, 255, 255, .5); }
  .ref-fine { margin-left: 53px; color: #5c5c66; font-size: 12.5px; line-height: 1.5; max-width: 46ch; }
  @media (max-width: 860px) {
    .ref-stage { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .ref-scene { padding-bottom: 34px; }
  }

  /* окно «Рефералы» */
  .ref-win { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 18px; }
  .rw-card { display: grid; place-items: center; padding: 4px 0 10px; }
  .rw-card .rcard { width: 100%; }
  .rw-lbl { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; color: #8a8a94; font-size: 12px; }
  .rw-link { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .3); }
  .rw-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 12.5px "JetBrains Mono", ui-monospace, monospace; }
  .rw-link .btn { flex: none; }
  .rw-link + .rw-lbl { margin-top: 12px; }
  .rw-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
  .rw-share a.btn { color: inherit; text-decoration: none; }
  .rw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rw-stat { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); }
  .rw-stat span { display: block; color: #7c7c86; font-size: 11.5px; }
  .rw-stat b { display: block; margin-top: 2px; color: #fff; font-size: 17px; font-weight: 600; }
  .rw-stat b.zero { color: #5c5c66; }
  .rw-empty { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .13); color: #8a8a94; font-size: 13px; }
  .rw-ghosts { display: flex; flex: none; padding-left: 8px; }
  .rw-ghosts i { width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .02); box-shadow: 0 0 14px -4px rgba(255, 255, 255, .25); }
  .rw-note { margin-top: 14px; }
  .rw-demo { color: #c4c4cc !important; text-decoration: underline; text-underline-offset: 3px; }
  .rw-off { margin-bottom: 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #e4e4e7; }
  .rw-who { display: flex; align-items: center; gap: 10px; }
  .rs { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
  .rs-joined { color: #a1a1aa; border: 1px dashed rgba(255, 255, 255, .25); }
  .rs-hold { color: #e4e4e7; background: rgba(255, 255, 255, .08); }
  .rs-paid { color: #09090b; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .3); }
  .rw-terms { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: t; max-width: 62ch; }
  .rw-terms li { position: relative; padding: 12px 14px 12px 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); color: #c4c4cc; font-size: 13px; counter-increment: t; }
  .rw-terms li::before { content: "0" counter(t); position: absolute; left: 14px; top: 12px; color: #6b6b75; font: 500 11.5px/1.6 "JetBrains Mono", ui-monospace, monospace; }
  @media (max-width: 700px) {
    .ref-win { grid-template-columns: minmax(0, 1fr); }
    .rw-tbl th:nth-child(2), .rw-tbl td:nth-child(2) { display: none; }
  }

  /* приглашённый пришёл по ссылке: плашка снизу */
  .ref-hello {
    position: fixed; left: 50%; bottom: 20px; z-index: 25;
    display: flex; align-items: center; gap: 12px;
    width: max-content; max-width: calc(100% - 32px);
    padding: 7px 7px 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(20, 20, 24, .84);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px -20px #000, 0 0 40px -16px rgba(255, 255, 255, .35);
    color: #e4e4e7; font-size: 13.5px;
    transform: translateX(-50%);
    animation: rh-in .7s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes rh-in { from { opacity: 0; transform: translate(-50%, 16px); } }
  .rh-orb { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 20px rgba(255, 255, 255, .6); }
  .ref-hello .cta { flex: none; padding: 8px 16px; font-size: 13px; }
  .rh-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: #8a8a94; font-size: 18px; cursor: pointer; }
  .rh-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
  @media (max-width: 640px) {
    .ref-hello { flex-wrap: wrap; border-radius: 18px; padding: 12px 10px 10px 16px; }
    .ref-hello .rh-t { flex: 1 1 200px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rc-in::after, .rc-orb, .ref-hello { animation: none; }
  }


@media(max-width:1200px){.topbar .nav-links,.topbar .nav-sep{display:none}.nav .nav-more{display:grid}}
.rw-share a,.rw-support{color:inherit;text-decoration:none}

.rc-code span{font-size:2.7cqw;letter-spacing:.03em}.rc-bot>div:first-child{min-width:0;max-width:48%}.rc-bot>div:first-child>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}