/* Atom — atom850.buzz · архетип "tower": ярусы башни с сужением кверху · ns twr- */

: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:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.66;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

h1,h2,h3,.twr-word,.twr-tier-tag,.twr-num{
  font-family:"Oranienbaum",Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:.01em;
}

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}

/* ---------- ярусная оболочка ---------- */

.twr-stack{width:100%}
.twr-shell{width:min(1180px,100% - 34px);margin-inline:auto}

/* ярусы сужаются кверху: каждый следующий уровень уже предыдущего */
.twr-lvl-1{width:min(1180px,100% - 34px);margin-inline:auto}
.twr-lvl-2{width:min(1090px,100% - 34px);margin-inline:auto}
.twr-lvl-3{width:min(1000px,100% - 34px);margin-inline:auto}

/* ---------- шапка во всю ширину, кнопки прижаты к краям ---------- */

.twr-head{
  position:sticky;top:0;z-index:50;
  width:100%;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.twr-head-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:0;
  width:100%;
}
.twr-word{
  align-self:center;
  justify-self:center;
  font-size:30px;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(90deg,#3FE0F0,#FF2D8E);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding:14px 10px;
}
.twr-word span{display:block;font-size:10px;letter-spacing:.34em;color:var(--muted-2);
  background:none;-webkit-text-fill-color:var(--muted-2);text-align:center;font-family:"Source Sans 3",sans-serif}

.twr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Source Sans 3",sans-serif;
  font-size:15px;font-weight:600;
  border-radius:8px;
  padding:12px 22px;
  color:#FFFFFF;
  white-space:nowrap;
}
.twr-btn-ghost{background:var(--surface-2);border:1px solid var(--line);color:#FFFFFF}
.twr-btn-ghost:hover{background:#222741;color:#FFFFFF}
.twr-btn-main{
  background:linear-gradient(180deg,#FF5FA2 0%,#FF2D8E 100%);
  color:#FFFFFF;
  box-shadow:0 6px 18px rgba(216,27,119,.32);
}
.twr-btn-main:hover{color:#FFFFFF;box-shadow:0 8px 22px rgba(216,27,119,.46)}

/* кнопки шапки вжаты в самые края полосы */
.twr-head .twr-btn{border-radius:0 0 8px 0;margin:0;padding:16px 26px;font-size:16px}
.twr-head .twr-btn-main{border-radius:0 0 0 8px}

.twr-cta-wide{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:18px;
  padding:16px 42px;border-radius:8px;color:#FFFFFF;
  background:linear-gradient(180deg,#FF5FA2 0%,#FF2D8E 100%);
  box-shadow:0 8px 24px rgba(216,27,119,.34);
}
.twr-cta-wide:hover{color:#FFFFFF}
.twr-cta-note{color:var(--muted);font-size:14px;margin-top:10px}

/* ---------- hero ---------- */

.twr-hero{
  padding:44px 0 18px;
  background:
    radial-gradient(900px 340px at 50% -80px,rgba(123,92,255,.20),transparent 70%),
    linear-gradient(180deg,#0E1120 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.twr-hero-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:34px;align-items:start}
.twr-hero h1{font-size:44px;line-height:1.14;margin:0 0 16px}
.twr-lead{font-size:19px;color:#E6E9F5;margin-bottom:18px}
.twr-eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--line);border-radius:8px;padding:6px 14px;margin-bottom:16px;
  font-family:"Source Sans 3",sans-serif;
}

/* баннер-башня из инлайнового SVG */
.twr-banner{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
}
.twr-banner svg{width:100%;height:auto;display:block}
.twr-banner-cap{color:var(--muted);font-size:13px;margin-top:10px;text-align:center}

/* ---------- KPI полоса из 5 плиток ---------- */

.twr-kpi{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin:26px 0 8px;
}
.twr-kpi-cell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px 14px 14px;
  position:relative;
  overflow:hidden;
}
.twr-kpi-cell::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,#3FE0F0,#FF2D8E);
}
.twr-num{display:block;font-size:27px;line-height:1.1;color:#FFFFFF}
.twr-kpi-cell p{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* ---------- секции-ярусы ---------- */

.twr-sec{padding:38px 0 8px;border-top:1px solid var(--line)}
.twr-sec:first-of-type{border-top:0}
.twr-sec h2{
  font-size:31px;line-height:1.2;margin:0 0 6px;
  padding-left:18px;position:relative;
}
.twr-sec h2::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.24em;width:5px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),var(--pink));
}
.twr-sec h3{font-size:21px;margin:22px 0 6px;color:#F2F3FA}
.twr-tier-tag{
  display:block;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:8px;padding-left:18px;
  font-family:"Source Sans 3",sans-serif;
}

.twr-accent{color:var(--cyan)}
.twr-hot{color:var(--pink-light)}
.twr-key{color:#FFFFFF;background:rgba(123,92,255,.16);border-radius:4px;padding:0 4px}

/* ---------- панели и списки ---------- */

.twr-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:20px 22px;margin:18px 0;
}
.twr-panel-deep{background:var(--surface-2)}
.twr-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.twr-cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.twr-list{margin:10px 0 14px;padding-left:20px;color:#E4E7F3}
.twr-list li{margin-bottom:7px}

.twr-steps{list-style:none;margin:16px 0;padding:0;counter-reset:twrstep}
.twr-steps li{
  counter-increment:twrstep;
  position:relative;padding:12px 16px 12px 56px;margin-bottom:10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
}
.twr-steps li::before{
  content:counter(twrstep);
  position:absolute;left:16px;top:11px;
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  font-family:"Oranienbaum",serif;font-size:17px;
  background:linear-gradient(180deg,#FF5FA2 0%,#FF2D8E 100%);color:#FFFFFF;
}

/* ---------- таблицы ---------- */

.twr-tw{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
thead th{
  background:var(--surface-2);color:var(--cyan);text-align:left;
  font-family:"Source Sans 3",sans-serif;font-weight:600;
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:#E4E7F3}
tbody tr:nth-child(even) td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tfoot td{padding:12px 14px;background:rgba(255,45,142,.10);color:#FFFFFF}

/* ---------- клуб: пять ярусов ---------- */

.twr-club{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0;align-items:end}
.twr-club-cell{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 12px;
  border-top:3px solid var(--cyan);
}
.twr-club-cell:nth-child(2){border-top-color:#57CBEB}
.twr-club-cell:nth-child(3){border-top-color:var(--violet)}
.twr-club-cell:nth-child(4){border-top-color:var(--pink-light)}
.twr-club-cell:nth-child(5){border-top-color:var(--pink)}
.twr-club-cell p{margin:0;font-size:13px;color:var(--muted)}
.twr-club-cell .twr-club-name{
  font-family:"Oranienbaum",Georgia,serif;font-size:20px;color:#FFFFFF;margin:0 0 4px;line-height:1.2;
}

/* ---------- галерея: ярусы башни, сужаясь кверху ---------- */

.twr-gal{margin:22px 0 6px}
.twr-tier{
  display:grid;gap:12px;margin:0 auto 12px;
  justify-content:center;
}
.twr-tier-5{grid-template-columns:repeat(4,1fr);width:100%}
.twr-tier-4{grid-template-columns:repeat(4,1fr);width:92%}
.twr-tier-3{grid-template-columns:repeat(3,1fr);width:72%}
.twr-tier-2{grid-template-columns:repeat(2,1fr);width:50%}
.twr-tier-1{grid-template-columns:1fr;width:26%}

.twr-card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;
}
.twr-card img{width:100%;aspect-ratio:8/5;object-fit:cover}
.twr-card figcaption{padding:9px 11px;font-size:13px;color:var(--muted);line-height:1.4}
.twr-card .twr-prov{display:block;color:var(--cyan);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- FAQ ---------- */

.twr-faq details{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:12px 16px;margin-bottom:10px;
}
.twr-faq summary{
  cursor:pointer;font-weight:600;font-size:17px;color:#FFFFFF;list-style:none;
  display:flex;justify-content:space-between;gap:14px;
}
.twr-faq summary::-webkit-details-marker{display:none}
.twr-faq summary::after{content:"+";color:var(--pink-light);font-size:22px;line-height:1}
.twr-faq details[open] summary::after{content:"–"}
.twr-faq details p{margin:10px 0 2px;color:#DFE3F0}

/* ---------- отзыв ---------- */

.twr-quote{
  border-left:4px solid var(--pink);background:var(--surface-2);
  border-radius:0 8px 8px 0;padding:16px 20px;margin:18px 0;
}
.twr-quote p{margin:0 0 8px;color:#EFF1F8}
.twr-quote cite{font-style:normal;color:var(--muted);font-size:14px}

/* ---------- источники ---------- */

.twr-src{
  background:linear-gradient(180deg,#131627 0%,#0E1120 100%);
  border:1px solid var(--line);border-radius:8px;padding:24px;margin:26px 0;
}
.twr-src h2{margin-top:0}
.twr-cta-band{text-align:center;padding:10px 0 34px}

/* ---------- подвал ---------- */

.twr-foot{
  background:var(--bg-deep);border-top:1px solid var(--line);
  padding:30px 0;margin-top:20px;color:var(--muted-2);font-size:14px;
}
.twr-foot p{margin:0 0 9px}
.twr-foot-legal{color:var(--muted)}
.twr-age{
  display:inline-block;border:1px solid var(--line);border-radius:8px;
  padding:9px 14px;color:#C9CEDF;background:var(--surface);
}

/* ---------- ≤640px ---------- */

@media(max-width:900px){
  .twr-hero-grid{grid-template-columns:1fr}
  .twr-kpi{grid-template-columns:repeat(2,1fr)}
  .twr-club{grid-template-columns:repeat(2,1fr)}
  .twr-cols,.twr-cols-3{grid-template-columns:1fr}
  .twr-tier-1,.twr-tier-2,.twr-tier-3,.twr-tier-4,.twr-tier-5{width:100%}
  .twr-tier-1{grid-template-columns:1fr}
  .twr-tier-2,.twr-tier-3{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  body{font-size:16px}
  .twr-shell,.twr-lvl-1,.twr-lvl-2,.twr-lvl-3{width:calc(100% - 22px)}
  .twr-head-row{grid-template-columns:1fr 1fr;grid-template-areas:"word word" "login reg"}
  .twr-word{grid-area:word;font-size:24px;padding:10px 6px}
  .twr-head .twr-btn-ghost{grid-area:login;border-radius:0}
  .twr-head .twr-btn-main{grid-area:reg;border-radius:0}
  .twr-head .twr-btn{padding:12px 8px;font-size:14px;width:100%}
  .twr-hero h1{font-size:30px}
  .twr-lead{font-size:17px}
  .twr-sec h2{font-size:25px}
  .twr-sec h3{font-size:19px}
  .twr-kpi{grid-template-columns:1fr 1fr;gap:9px}
  .twr-num{font-size:23px}
  .twr-tier-4,.twr-tier-5{grid-template-columns:repeat(2,1fr)}
  .twr-cta-wide{padding:14px 20px;font-size:16px;width:100%}
  table{min-width:520px}
  .twr-panel{padding:16px}
}
