/* ===== dshukin.ru. Общие стили трёх страниц. Меняет только сборщик, блоки держат свои стили у себя ===== */
:root{
  --ink:#06080B; --ink-2:#0B0E13; --ink-3:#11151C; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#F4F6F8; --text-2:#A7B1BD; --text-3:#66717E;
  --up:#21D48C; --down:#FF4D62; --oi:#7CC4FF; --fund:#F5C451;
  --display:'Inter Tight',system-ui,sans-serif; --body:'Golos Text',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
html{color-scheme:dark}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.03em;text-wrap:balance;font-weight:600}
p{margin:0}
img,svg,canvas,video{max-width:100%}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)}.down{color:var(--down)}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.grad-text{background:linear-gradient(92deg,#FFFFFF 0%,#BFE9D6 45%,#21D48C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
input[type=range]{width:100%;accent-color:#F4F6F8}
.todo{color:var(--text-2);border-bottom:1px dashed rgba(255,255,255,.35)}
.link{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}.link:hover{border-color:#fff}
.prose p a,.fine a{border-bottom:1px solid rgba(255,255,255,.3)}
.prose p a:hover{border-color:#fff}
#cursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(closest-side,rgba(33,212,140,.14),rgba(124,196,255,.05) 45%,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .4s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>")}
main,header,footer{position:relative;z-index:1}

/* секции */
.sec{padding:120px 0 0;position:relative}
/* переход по якорю не должен ставить заголовок вплотную к кромке окна */
section[id]{scroll-margin-top:96px}
.sec h2{font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.04em;max-width:16ch}
.sec .intro{margin-top:22px;font-size:19px;color:var(--text-2);max-width:56ch}
.fine{font-size:14.5px;color:var(--text-2);max-width:70ch}
.prose{margin-top:28px}.prose p{font-size:19px;line-height:1.6;color:#D9DFE6;max-width:60ch;margin-bottom:22px}.prose p:last-child{margin-bottom:0}
.after{margin-top:40px;font-size:19px;color:#D9DFE6;max-width:60ch;line-height:1.6}
.big-line{margin-top:40px;font:600 clamp(26px,3.6vw,46px)/1.08 var(--display);letter-spacing:-.04em;max-width:22ch}
.more{margin-top:28px;font-size:17px;color:var(--text-2)}
.btn{display:inline-flex;align-items:center;padding:15px 24px;border-radius:999px;font:500 15px var(--body);border:1px solid transparent;transition:background .2s,border-color .2s;will-change:transform}
.btn.solid{background:#fff;color:#06080B}.btn.solid:hover{transform:translateY(-1px)}
.btn.ghost{border-color:var(--line-2);color:#fff;backdrop-filter:blur(6px)}.btn.ghost:hover{border-color:#fff}
.reveal{clip-path:inset(0 0 100% 0)}
.fade{opacity:0;transform:translateY(28px)}
.no-motion .reveal,.no-motion .fade{clip-path:none;opacity:1;transform:none}
.curtain{position:relative;z-index:2;margin-top:-40px;border-radius:40px 40px 0 0;background:var(--ink-2);padding:120px 0 72px;box-shadow:0 -30px 80px rgba(0,0,0,.6)}
.curtain .sec{padding-top:0;background:transparent}
/* общий комбинатор, а не соседний: сборщик ставит между блоками <style> и <script>, и «+» рвётся */
.curtain .sec ~ .sec{margin-top:120px}

/* карточка сущности под H1, одна на трёх страницах. Список определений dl > div > dt + dd.
   Сетка из сплошных тонких линий: зазор 1px между ячейками показывает фон-линию, ячейки закрашены панелью.
   Мера строки. Три колонки включаются только с 1280px, где .wrap упирается в максимум и колонка даёт 354px.
   В диапазоне 768-1279px (iPad, ноутбуки 1024-1152) две колонки: внутренняя ширина 340-567px.
   Ниже 768px одна колонка: две колонки там давали 276px и 20 знаков в строке.
   У семи строк (.seven) на трёх колонках вторая и третья ячейки занимают по две колонки,
   на двух колонках третья занимает ряд целиком. Правый отступ широкой ячейки держит меру --measure,
   поэтому в одном ряду нет двух разных мер и нет пустых ячеек.
   Все линии, включая верхнюю и нижнюю границы полосы, лежат в колонке .wrap, ступеньки между ними нет.
   Гутер --gut повторяет отступ страницы: 48px выше 980px, 22px ниже. Телефон одна колонка, строки компактные.
   Контент ячейки центрирован по вертикали (align-content), поэтому под однострочной ячейкой не висит пустота */
.card{background:var(--ink-2)}
/* шторка наезжает на предыдущий блок на 40px. Если это карточка, ровно столько отдаётся ей снизу,
   иначе скруглённый край режет последний ряд ячеек */
.card:has(+ .curtain){padding-bottom:40px}
.card dl.wrap{--gut:48px;--measure:560px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:0;background:var(--line);background-clip:content-box;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card dl.wrap>div{min-width:0;padding:24px;background:var(--ink-2);font-size:16px;line-height:1.5;color:#C9D2DC;text-wrap:pretty;overflow-wrap:break-word;align-content:center}
.card dt,.card dd{display:inline;margin:0}
.card dt{color:#fff;font-weight:600}
/* три колонки, 1280px и выше: на этой ширине .wrap уже упирается в максимум 1280 и колонка держит 354px */
@media (min-width:1280px){
  .card:not(.seven) dl.wrap>div:nth-child(3n+1){padding-left:var(--gut)}
  .card:not(.seven) dl.wrap>div:nth-child(3n){padding-right:var(--gut)}
  .card.seven dl.wrap>div:nth-child(1),.card.seven dl.wrap>div:nth-child(3),.card.seven dl.wrap>div:nth-child(5){padding-left:var(--gut)}
  .card.seven dl.wrap>div:nth-child(4),.card.seven dl.wrap>div:nth-child(7){padding-right:var(--gut)}
  .card.seven dl.wrap>div.wide{grid-column:span 2;padding-right:max(var(--gut),calc(100% - var(--measure)))}
}
/* две колонки, 768-1279px */
@media (min-width:768px) and (max-width:1279px){
  .card dl.wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:not(.seven) dl.wrap>div:nth-child(odd){padding-left:var(--gut)}
  .card:not(.seven) dl.wrap>div:nth-child(even){padding-right:var(--gut)}
  .card.seven dl.wrap>div:nth-child(1),.card.seven dl.wrap>div:nth-child(3),.card.seven dl.wrap>div:nth-child(4),.card.seven dl.wrap>div:nth-child(6){padding-left:var(--gut)}
  .card.seven dl.wrap>div:nth-child(2),.card.seven dl.wrap>div:nth-child(5),.card.seven dl.wrap>div:nth-child(7){padding-right:var(--gut)}
  .card.seven dl.wrap>div:nth-child(3){grid-column:span 2;padding-right:max(var(--gut),calc(100% - var(--measure)))}
}
@media (max-width:980px){
  .card dl.wrap{--gut:22px}
  .card dl.wrap>div{padding:20px 22px}
}
/* одна колонка, 767px и ниже. Мера строки закрыта правым отступом, иначе на 640-767 строка уходит за 80 знаков */
@media (max-width:767px){
  .card dl.wrap{grid-template-columns:minmax(0,1fr)}
  .card dl.wrap>div{padding:15px var(--gut);padding-right:max(var(--gut),calc(100% - var(--measure)))}
}

/* вопросы, главная и VIP. маркер стоит в левом рельсе, вплотную к первой строке вопроса */
.faq{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 20px;align-items:start;padding:24px 0;min-height:44px;font:500 23px/1.25 var(--display);letter-spacing:-.03em;color:#E6EAEE;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:-2px}
.faq summary .q{grid-area:1/2;display:block}
.faq summary i{grid-area:1/1;font-style:normal;color:var(--text-3);font:300 28px/1 var(--display);margin-top:1px;text-align:center;transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s}
.faq summary:hover,.faq details[open] summary{color:#fff}
.faq summary:hover i,.faq details[open] summary i{color:#fff}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details[open] summary{padding-bottom:12px}
.faq .faq-body{overflow:hidden;padding-left:46px}
.faq details p{padding:0 0 28px;max-width:62ch;color:var(--text-2);font-size:17px;line-height:1.6;overflow-wrap:anywhere}
.faq details p a{display:inline;color:#fff;border-bottom:0;padding:12px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color .2s,color .2s}
.faq details p a:hover{text-decoration-color:#fff}
.no-motion .faq summary,.no-motion .faq summary i,.no-motion .faq details p a{transition:none}
@media (max-width:980px){
  .faq summary{font-size:19px;padding:18px 0;grid-template-columns:20px minmax(0,1fr);gap:0 12px}
  .faq summary i{font-size:24px;line-height:1;margin-top:0}
  .faq details[open] summary{padding-bottom:10px}
  .faq .faq-body{padding-left:32px}
  .faq details p{padding-bottom:24px}
}

@media (max-width:980px){
  .wrap{padding:0 22px}
  .sec{padding-top:88px}
  section[id]{scroll-margin-top:80px}
  .curtain{padding:88px 0 56px;border-radius:28px 28px 0 0}
  .curtain .sec ~ .sec{margin-top:88px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.fade{clip-path:none;opacity:1;transform:none}
}