/* ============================================================
   GUSEV COIN — лендинг домена wm-mariupol.com
   Тема gusevcoin (tokens.css). Только токены контракта: цвет/кегль/
   отступ/радиус берутся из var(--…), собственных значений тут нет.
   ============================================================ */

/* ---------- фон: звёзды + туманность + зерно ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.sky canvas{width:100%;height:100%;display:block}

.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nebula span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.nebula span:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-12vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 42%,transparent),transparent 70%)}
.nebula span:nth-child(2){width:44vw;height:44vw;right:-12vw;top:22vh;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-solid) 26%,transparent),transparent 70%)}
.nebula span:nth-child(3){width:60vw;height:60vw;left:18vw;bottom:-28vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 24%,transparent),transparent 72%)}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>")}

/* след курсора — «прожектор» поверх фона, но под контентом */
.beam{position:fixed;z-index:1;pointer-events:none;width:44vw;height:44vw;left:0;top:0;
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 62%)}

.page{position:relative;z-index:2}

/* ---------- навигация: плавающее стекло ---------- */
.nav{position:fixed;left:50%;top:14px;z-index:60;transform:translateX(-50%);
  width:min(var(--maxw),calc(100vw - var(--sp-5)));
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:10px 10px 10px var(--sp-4);border:1px solid var(--line);border-radius:var(--r-full);
  background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(18px);
  box-shadow:var(--shadow-2)}
.nav__links{display:flex;gap:var(--sp-5);font-size:var(--fs-2);color:var(--text-muted)}
.nav__links a{transition:color var(--dur) var(--ease)}
.nav__links a:hover{color:var(--text)}
@media (max-width:860px){.nav__links{display:none}}

.logo{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);
  font-weight:800;font-size:var(--fs-3);letter-spacing:.04em;text-transform:uppercase}
.logo img{width:30px;height:30px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent-solid) 55%,transparent))}

/* ---------- кнопки: золото = действие ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-2);
  padding:13px 26px;border-radius:var(--r-full);border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--gold{background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-solid) 50%,transparent)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.btn--holo{background:color-mix(in srgb,var(--accent-2) 10%,transparent);color:var(--text);
  border-color:color-mix(in srgb,var(--accent-2) 42%,transparent)}
.btn--holo:hover{transform:translateY(-2px);border-color:var(--accent-2)}
.btn--lg{padding:16px 32px;font-size:var(--fs-3)}

/* ---------- герой ---------- */
.hero{position:relative;padding:calc(var(--sp-9) + 40px) 0 var(--sp-9);text-align:center}

/* вступительный «отлёт» текста в перспективе — подпись жанра космооперы */
.crawl{perspective:340px;height:clamp(150px,26vw,230px);margin-bottom:var(--sp-6);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 42%,#000 80%,transparent)}
.crawl__in{transform:rotateX(46deg);transform-origin:50% 100%;
  font-family:var(--font-display);font-weight:700;letter-spacing:.02em;
  font-size:clamp(13px,2.1vw,19px);line-height:1.7;text-transform:uppercase;
  color:var(--accent-solid);text-shadow:0 0 26px color-mix(in srgb,var(--accent-solid) 40%,transparent);
  animation:crawl 26s linear infinite}
@keyframes crawl{from{transform:rotateX(46deg) translateY(58%)}to{transform:rotateX(46deg) translateY(-118%)}}

.hero__title{font-family:var(--font-display);font-size:var(--fs-9);font-weight:800;
  letter-spacing:-.02em;line-height:var(--lh-tight);text-transform:uppercase}
.hero__title em{font-style:normal;background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{max-width:62ch;margin:var(--sp-5) auto 0;color:var(--text-muted);font-size:var(--fs-4)}
.hero__cta{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-7)}

.pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:7px 16px;border-radius:var(--r-full);
  border:1px solid color-mix(in srgb,var(--accent-2) 34%,transparent);
  background:color-mix(in srgb,var(--accent-2) 8%,transparent);
  font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--success);
  box-shadow:0 0 10px var(--success);animation:blink 2.4s var(--ease) infinite}
@keyframes blink{50%{opacity:.25}}

/* приборная строка под героем */
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--sp-8);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--line)}
.readout div{background:color-mix(in srgb,var(--surface) 88%,transparent);padding:var(--sp-5) var(--sp-4)}
.readout b{display:block;font-family:var(--font-display);font-size:var(--fs-6);letter-spacing:-.01em;color:var(--text)}
.readout span{display:block;margin-top:var(--sp-1);font-size:var(--fs-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
@media (max-width:700px){.readout{grid-template-columns:1fr}}

/* ---------- заголовки секций ---------- */
.sec{position:relative;padding:var(--sp-9) 0}
.sec__head{max-width:70ch;margin-bottom:var(--sp-7)}
.sec__head h2{font-family:var(--font-display);font-size:var(--fs-7);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;text-transform:uppercase;margin-top:var(--sp-3)}
.sec__head p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-4)}
/* На узком экране 36px заголовка не помещаются: «ЭКОСИСТЕМА ВОКРУГ» вылезает
   за габарит и тянет за собой горизонтальную прокрутку. Ступень ниже по шкале. */
@media (max-width:640px){.sec__head h2{font-size:var(--fs-6)}}
.eyebrow{font-size:var(--fs-1);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-2)}

/* ---------- голо-панели ---------- */
.holo{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));
  padding:var(--sp-6);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.holo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 55%,transparent) 0 1px,transparent 1px 4px)}
.holo::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent-2) 30%,transparent),transparent 45%);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.holo:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent-2) 40%,transparent);
  box-shadow:0 24px 60px color-mix(in srgb,var(--accent-2) 14%,transparent)}
.holo:hover::after{opacity:1}
.holo > *{position:relative;z-index:1}

.holo__ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--accent-2) 34%,transparent);
  background:color-mix(in srgb,var(--accent-2) 10%,transparent);color:var(--accent-2)}
.holo h3{margin-top:var(--sp-4);font-family:var(--font-display);font-size:var(--fs-5);font-weight:700}
.holo p{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-2)}

/* bento разного веса — не решётка одинаковых плиток */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
.bento > *:nth-child(1){grid-column:span 4}
.bento > *:nth-child(2){grid-column:span 2}
.bento > *:nth-child(3){grid-column:span 2}
.bento > *:nth-child(4){grid-column:span 2}
.bento > *:nth-child(5){grid-column:span 2}
.bento > *:nth-child(6){grid-column:span 6}
/* Планшет: две колонки, крупные плитки остаются во всю ширину. */
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *{grid-column:span 1}
  .bento > *:nth-child(1),.bento > *:nth-child(6){grid-column:span 2}
}
@media (max-width:640px){
  .bento > *{grid-column:span 2 !important}
}

/* большая плитка героя-механики */
.bento > *:nth-child(1) h3{font-size:var(--fs-6)}
.bento > *:nth-child(6){display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap}
.bento > *:nth-child(6) .holo__ico{flex:none}

/* ---------- шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);
  background:color-mix(in srgb,var(--surface) 70%,transparent)}
.step b{font-family:var(--font-display);font-size:var(--fs-1);letter-spacing:.2em;color:var(--accent-2)}
.step h3{margin-top:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-5)}
.step p{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-2)}

/* ---------- ссылки внутри текста ----------
   Витрины «наши проекты» на лендинге нет намеренно: список карточек с чужими
   доменами читается как спам и приписывает нам то, что нам не принадлежит. */
.ink{color:var(--accent-solid);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent-solid) 40%,transparent);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ink:hover{color:var(--text);border-color:var(--text)}

/* ---------- внутренние страницы: /guide, /faq, /rules ---------- */
.doc{max-width:74ch;padding:calc(var(--sp-9) + 40px) 0 var(--sp-8)}
.doc h1{font-family:var(--font-display);font-size:var(--fs-8);font-weight:800;
  letter-spacing:-.02em;line-height:var(--lh-tight);text-transform:uppercase}
.doc__lede{margin-top:var(--sp-5);color:var(--text-muted);font-size:var(--fs-4);line-height:1.65}
.doc h2{margin-top:var(--sp-8);font-family:var(--font-display);font-size:var(--fs-6);
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.doc h3{margin-top:var(--sp-6);font-family:var(--font-display);font-size:var(--fs-4);font-weight:700}
.doc p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-3);line-height:1.75}
.doc ul{margin-top:var(--sp-4);padding-left:var(--sp-5);color:var(--text-muted);font-size:var(--fs-3);line-height:1.75}
.doc li{margin-top:var(--sp-2)}
.doc li::marker{color:var(--accent-solid)}
.doc__back{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-8);
  font-size:var(--fs-1);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  transition:color var(--dur) var(--ease)}
.doc__back:hover{color:var(--accent-solid)}
.doc__nav{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--line);font-size:var(--fs-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.doc__nav a:hover{color:var(--accent-solid)}

/* ---------- бегущая строка ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  padding:var(--sp-4) 0;background:color-mix(in srgb,var(--surface) 55%,transparent)}
.ticker__row{display:flex;gap:var(--sp-6);width:max-content;animation:slide 38s linear infinite}
.ticker span{font-family:var(--font-display);font-size:var(--fs-2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.ticker span::after{content:"◆";margin-left:var(--sp-6);color:var(--accent-solid)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- финальный CTA ---------- */
.launch{position:relative;text-align:center;border:1px solid color-mix(in srgb,var(--accent-solid) 30%,transparent);
  border-radius:var(--r-lg);padding:var(--sp-9) var(--sp-5);overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--accent-solid) 12%,transparent),transparent 62%),
             color-mix(in srgb,var(--surface) 80%,transparent)}
.launch h2{font-family:var(--font-display);font-size:var(--fs-8);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:var(--lh-tight)}
.launch p{max-width:56ch;margin:var(--sp-4) auto 0;color:var(--text-muted);font-size:var(--fs-4)}
.launch .hero__cta{margin-top:var(--sp-6)}
.launch img{width:110px;height:110px;margin:0 auto var(--sp-5);display:block;
  filter:drop-shadow(0 0 34px color-mix(in srgb,var(--accent-solid) 55%,transparent));
  animation:float 7s var(--ease) infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(4deg)}}

/* ---------- подвал ---------- */
.foot{border-top:1px solid var(--line);padding:var(--sp-7) 0 var(--sp-8);margin-top:var(--sp-9);
  background:color-mix(in srgb,var(--bg) 88%,transparent)}
.foot__top{display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;align-items:center}
.foot__links{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-2);color:var(--text-muted)}
.foot__links a{transition:color var(--dur) var(--ease)}
.foot__links a:hover{color:var(--accent-solid)}
.foot__note{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);
  color:var(--text-muted);font-size:var(--fs-1);max-width:80ch}

/* ---------- появление по скроллу ---------- */
.rise{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.rise.is-in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  .crawl__in,.ticker__row,.launch img,.pill i{animation:none}
  .crawl__in{transform:rotateX(46deg) translateY(-20%)}
  .rise{opacity:1;transform:none;filter:none;transition:none}
  .beam{display:none}
  .btn:hover,.holo:hover,.orb:hover{transform:none}
}