/* atom6492.casino — архетип tape-reel, namespace rel- */

:root{
  --bg:#0B0D16;          /* фон страницы: почти чёрный с синим подтоном */
  --bg-deep:#070911;     /* подвал, глубокие подложки */
  --surface:#141726;     /* панели, карточки, боковая колонка */
  --surface-2:#1B1F30;   /* вложенные блоки, вторичная кнопка, строки таблиц */
  --line:#262B40;        /* границы */
  --pink:#FF2D8E;        /* фирменная фуксия — главный акцент и CTA */
  --pink-light:#FF5FA2;  /* верх градиента кнопки */
  --pink-deep:#D81B77;   /* низ градиента, тени */
  --cyan:#3FE0F0;        /* фирменный циан — вторая половина логотипа, подсветка */
  --cyan-deep:#22B8D6;
  --violet:#7B5CFF;      /* промо-блоки, третий акцент */
  --text:#FFFFFF;
  --muted:#9AA0B5;       /* подписи, второстепенный текст */
  --muted-2:#6B7189;     /* мелочь, футер */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Onest","Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.66;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.rel-word,.rel-kpi-num,.rel-tier-name{
  font-family:"Forum","Times New Roman",Georgia,serif;
  font-weight:400;
  letter-spacing:.2px;
}

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--cyan-deep)}
p{margin:0 0 14px}
img{max-width:100%;height:auto;display:block}

.rel-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 22px}

/* ——— шапка: лого слева, текстовая ссылка и крупная CTA справа ——— */
.rel-top{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.rel-top-in{
  display:flex;align-items:center;gap:18px;
  min-height:70px;
}
.rel-logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.rel-reel{width:30px;height:30px;flex:0 0 30px}
.rel-word{
  font-size:26px;line-height:1;
  background:linear-gradient(90deg,#3FE0F0,#FF2D8E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rel-word-sub{
  display:block;font-family:"Onest",Arial,sans-serif;
  font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted-2);
}
.rel-link{
  color:var(--muted);font-size:15px;letter-spacing:.4px;
  padding:9px 6px;border-bottom:1px solid transparent;
}
.rel-link:hover{color:var(--text);border-bottom-color:var(--cyan)}
.rel-cta{
  display:inline-block;
  background:linear-gradient(180deg,#FF5FA2 0%,#FF2D8E 100%);
  color:#FFFFFF;border-radius:8px;
  padding:14px 30px;font-size:16px;letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(216,27,119,.32);
}
.rel-cta:hover{color:#FFFFFF;filter:brightness(1.06)}
.rel-cta-wide{padding:17px 46px;font-size:18px}

/* ——— лента-разделитель: витки бобины ——— */
.rel-tape{
  height:26px;margin:44px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(115deg,
    rgba(63,224,240,.16) 0 10px,
    rgba(11,13,22,0) 10px 22px,
    rgba(255,45,142,.16) 22px 32px,
    rgba(11,13,22,0) 32px 46px);
}
.rel-tape-thin{height:10px;margin:28px 0}

/* ——— hero ——— */
.rel-hero{padding:46px 0 10px}
.rel-hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:34px;align-items:center}
h1{font-size:44px;line-height:1.16;margin:0 0 18px}
.rel-lead{font-size:19px;color:#E4E7F2;margin-bottom:22px}
.rel-accent{color:var(--cyan)}
.rel-hot{color:var(--pink)}

.rel-coil{
  position:relative;aspect-ratio:1/1;max-width:340px;margin:0 auto;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(123,92,255,.22) 0 7px,
      rgba(20,23,38,.9) 7px 15px);
  border:1px solid var(--line);
  box-shadow:inset 0 0 60px rgba(63,224,240,.12),0 20px 50px rgba(7,9,17,.7);
  display:grid;place-items:center;
}
.rel-coil-core{
  width:34%;aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(135deg,#3FE0F0,#FF2D8E);
  display:grid;place-items:center;text-align:center;
  font-family:"Forum",Georgia,serif;font-size:15px;color:#0B0D16;line-height:1.2;padding:8px;
}

/* ——— KPI ——— */
.rel-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0 26px}
.rel-kpi-cell{
  background:var(--surface);border:1px solid var(--line);
  border-radius:4px 16px 4px 16px;padding:16px 14px;
  border-left:3px solid var(--cyan);
}
.rel-kpi-cell:nth-child(even){border-left-color:var(--pink)}
.rel-kpi-num{display:block;font-size:26px;line-height:1.1;color:var(--text)}
.rel-kpi-cap{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;letter-spacing:.3px}

.rel-hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:6px 0 10px}
.rel-note{font-size:14px;color:var(--muted-2)}

/* ——— секции ——— */
section{padding:6px 0}
h2{
  font-size:31px;line-height:1.24;margin:34px 0 14px;
  padding-left:18px;border-left:4px solid var(--pink);
}
h3{font-size:22px;line-height:1.3;margin:26px 0 10px;color:#EDEFF7}
h3::before{content:"◍ ";color:var(--cyan);font-size:15px}

.rel-panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:4px 20px 4px 20px;padding:20px 22px;margin:18px 0;
}
.rel-panel-v{border-top:2px solid var(--violet)}
.rel-panel-c{border-top:2px solid var(--cyan)}

.rel-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rel-cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

ul.rel-list{list-style:none;margin:0 0 14px;padding:0}
ul.rel-list li{position:relative;padding-left:24px;margin-bottom:9px}
ul.rel-list li::before{
  content:"";position:absolute;left:0;top:10px;width:12px;height:2px;
  background:linear-gradient(90deg,#3FE0F0,#FF2D8E);
}

.rel-em{color:var(--cyan);font-style:normal}
.rel-em-p{color:var(--pink);font-style:normal}
.rel-key{font-family:"Onest",Arial,sans-serif;font-size:.95em;color:#D9DCE8;background:var(--surface-2);padding:1px 7px;border-radius:4px}

/* ——— таблицы ——— */
.rel-scroll{overflow-x:auto;margin:16px 0 8px;border:1px solid var(--line);border-radius:4px 18px 4px 18px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
caption{caption-side:bottom;text-align:left;color:var(--muted-2);font-size:13.5px;padding:10px 14px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--surface-2);color:var(--cyan);font-weight:600;letter-spacing:.3px;white-space:nowrap}
tbody tr:nth-child(odd){background:rgba(27,31,48,.55)}
tbody tr:last-child td{border-bottom:0}
td.rel-tot{color:var(--pink)}

/* ——— клуб: витки ——— */
.rel-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}
.rel-tier{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:50px 8px 50px 8px;padding:16px 14px;text-align:center;
}
.rel-tier:nth-child(5){border-color:var(--pink);box-shadow:0 0 0 1px rgba(255,45,142,.25) inset}
.rel-tier-name{display:block;font-size:19px;margin-bottom:4px}
.rel-tier-val{display:block;font-size:13px;color:var(--muted)}

/* ——— галерея: витком по спирали ——— */
.rel-ribbon{
  display:flex;flex-wrap:wrap;gap:18px 16px;margin:22px 0 10px;
  padding:26px 0;
  background:repeating-linear-gradient(180deg,
    rgba(38,43,64,.55) 0 1px,
    rgba(11,13,22,0) 1px 64px);
}
.rel-frame{
  flex:0 0 calc(25% - 12px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:3px 14px 3px 14px;padding:10px;
}
.rel-frame img{border-radius:2px 10px 2px 10px;width:100%;aspect-ratio:16/11;object-fit:cover}
.rel-frame figcaption{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.45}
.rel-frame:nth-child(8n+1){transform:translateY(0)}
.rel-frame:nth-child(8n+2){transform:translateY(14px)}
.rel-frame:nth-child(8n+3){transform:translateY(26px)}
.rel-frame:nth-child(8n+4){transform:translateY(34px)}
.rel-frame:nth-child(8n+5){transform:translateY(26px)}
.rel-frame:nth-child(8n+6){transform:translateY(14px)}
.rel-frame:nth-child(8n+7){transform:translateY(4px)}
.rel-frame:nth-child(8n+8){transform:translateY(-6px)}
.rel-frame:hover{border-color:var(--cyan)}

/* ——— отзыв ——— */
.rel-quote{
  background:var(--surface-2);border-left:4px solid var(--cyan);
  border-radius:0 18px 0 18px;padding:18px 22px;margin:20px 0;
}
.rel-quote-sign{display:block;font-size:13.5px;color:var(--muted-2);margin-top:8px}

/* ——— FAQ ——— */
details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:4px 16px 4px 16px;margin:10px 0;padding:0 18px;
}
details[open]{border-color:var(--pink)}
summary{
  cursor:pointer;padding:15px 0;font-size:17px;color:#EDEFF7;
  list-style:none;display:flex;gap:12px;align-items:flex-start;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";color:var(--pink);flex:0 0 auto}
details[open] summary::before{content:"▾"}
details p{color:var(--muted);margin:0 0 15px;padding-left:24px}

/* ——— блок сверки + финальный CTA ——— */
.rel-ledger{
  background:linear-gradient(160deg,rgba(123,92,255,.14),rgba(20,23,38,.9));
  border:1px solid var(--line);border-radius:6px 26px 6px 26px;
  padding:26px 26px 20px;margin:30px 0;
}
.rel-ledger ul.rel-list li::before{background:var(--violet)}
.rel-final{text-align:center;padding:14px 0 4px}

/* ——— подвал ——— */
footer{
  background:var(--bg-deep);border-top:1px solid var(--line);
  margin-top:46px;padding:34px 0 40px;color:var(--muted-2);font-size:14px;
}
footer p{margin:0 0 10px}
.rel-legal{color:var(--muted)}
.rel-age{
  display:inline-block;margin-top:8px;padding:9px 14px;
  border:1px solid var(--line);border-radius:4px 14px 4px 14px;
  background:var(--surface);color:var(--muted);
}

/* ——— адаптив ——— */
@media (max-width:960px){
  .rel-hero-grid{grid-template-columns:1fr}
  .rel-kpi{grid-template-columns:repeat(2,1fr)}
  .rel-tiers{grid-template-columns:repeat(2,1fr)}
  .rel-cols,.rel-cols-3{grid-template-columns:1fr}
  .rel-frame{flex:0 0 calc(50% - 8px)}
  h1{font-size:34px}
  h2{font-size:26px}
}
@media (max-width:640px){
  body{font-size:16px}
  .rel-wrap{padding:0 16px}
  .rel-top-in{flex-wrap:wrap;gap:10px;padding:10px 0;min-height:0}
  .rel-logo{margin-right:auto}
  .rel-word{font-size:21px}
  .rel-link{font-size:14px;padding:8px 4px}
  .rel-cta{padding:11px 18px;font-size:14.5px}
  .rel-cta-wide{padding:14px 22px;font-size:16px;width:100%;text-align:center}
  h1{font-size:28px}
  h2{font-size:23px;padding-left:12px}
  h3{font-size:19px}
  .rel-kpi{grid-template-columns:1fr 1fr}
  .rel-frame{flex:0 0 100%;transform:none}
  .rel-frame:nth-child(8n+1),.rel-frame:nth-child(8n+2),.rel-frame:nth-child(8n+3),
  .rel-frame:nth-child(8n+4),.rel-frame:nth-child(8n+5),.rel-frame:nth-child(8n+6),
  .rel-frame:nth-child(8n+7),.rel-frame:nth-child(8n+8){transform:none}
  .rel-ribbon{padding:14px 0;background:none}
  .rel-panel,.rel-ledger{padding:16px}
  .rel-hero-cta{gap:12px}
}