/* ============================================================
   TERMINUS COIN — лендинг домена stenbit.ru
   Тема arcanum (tokens.css), редакция 23.09.2026 — тёмное фэнтези.
   Только токены контракта: цвет/кегль/отступ/радиус из var(--…).
   Композиция не повторяет соседние лендинги кластера: тут кованые
   плиты, ритуальный круг, угли и орнаментальные углы.
   ============================================================ */

/* ---------- фон: угли, зарево, камень ---------- */
.night{position:fixed;inset:0;z-index:0;pointer-events:none}
.night canvas{width:100%;height:100%;display:block}

.veil{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.veil span{position:absolute;border-radius:50%;filter:blur(110px)}
/* подпал снизу — как от разлома, а не мягкое ночное небо */
.veil span:nth-child(1){width:120vw;height:60vh;left:-10vw;bottom:-26vh;opacity:.5;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent-solid) 42%,transparent),transparent 70%)}
.veil span:nth-child(2){width:52vw;height:52vw;right:-14vw;top:-12vw;opacity:.34;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 60%,transparent),transparent 70%)}
.veil span:nth-child(3){width:46vw;height:46vw;left:-12vw;top:22vh;opacity:.26;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-solid) 34%,transparent),transparent 72%)}

/* каменная крошка + тяжёлая виньетка: без неё сцена не читается как подземелье */
.parchment{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='5'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.75'/></svg>")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 105% at 50% 38%,transparent 44%,rgba(0,0,0,.82))}

.candle{position:fixed;z-index:1;pointer-events:none;width:38vw;height:38vw;left:0;top:0;
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .7s var(--ease);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-solid) 16%,transparent),transparent 62%)}

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

/* ---------- шапка: кованая планка ---------- */
.head{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--bg) 88%,transparent));
  backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--accent-solid) 26%,transparent);
  box-shadow:0 10px 30px rgba(0,0,0,.6)}
.head__in{max-width:var(--maxw);margin:0 auto;padding:var(--sp-3) clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.crest{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);
  font-size:var(--fs-3);letter-spacing:.1em;text-transform:uppercase}
.crest img{width:36px;height:36px;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent-solid) 65%,transparent))}
.head__links{display:flex;gap:var(--sp-5);font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.head__links a{transition:color var(--dur) var(--ease),text-shadow var(--dur) var(--ease)}
.head__links a:hover{color:var(--accent-solid);text-shadow:0 0 14px color-mix(in srgb,var(--accent-solid) 60%,transparent)}
@media (max-width:860px){.head__links{display:none}}

/* ---------- кнопки: кованые плиты ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-mono);font-weight:700;font-size:var(--fs-1);letter-spacing:.18em;
  text-transform:uppercase;padding:16px 30px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
/* скос фаски сверху — чтобы плита читалась как металл, а не как плоский прямоугольник */
.btn::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%)}
.btn--gild{background:var(--accent);color:var(--on-accent);
  box-shadow:inset 0 0 0 1px rgba(255,231,168,.55),0 10px 26px rgba(0,0,0,.6)}
.btn--gild:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,231,168,.8),var(--shadow-3)}
.btn--ink{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));
  color:var(--text);border-color:color-mix(in srgb,var(--accent-solid) 40%,transparent)}
.btn--ink:hover{transform:translateY(-2px);color:var(--accent-solid);border-color:var(--accent-solid);
  box-shadow:0 0 30px color-mix(in srgb,var(--accent-solid) 22%,transparent)}
.btn--lg{padding:18px 38px;font-size:var(--fs-2)}

/* ---------- главный экран ---------- */
.spread{position:relative;padding:var(--sp-9) 0 var(--sp-8);text-align:center}

/* ритуальный круг за заголовком + тёмная «плита» под текстом: без неё линии
   круга проходят прямо по буквам и заголовок перестаёт читаться. */
.circle{position:absolute;z-index:0;left:50%;top:calc(var(--sp-9) - 60px);
  width:min(640px,86vw);height:min(640px,86vw);
  transform:translateX(-50%);pointer-events:none;opacity:.34;
  animation:spin 90s linear infinite}
.spread::before{content:"";position:absolute;z-index:1;left:50%;top:calc(var(--sp-9) - 40px);
  transform:translateX(-50%);width:min(980px,94vw);height:min(560px,74vw);pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 88%,transparent) 0 42%,transparent 72%)}
.spread > *:not(.circle){position:relative;z-index:2}
.circle svg{width:100%;height:100%;display:block}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}

.chapter{position:relative;font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent-2);text-shadow:0 0 18px color-mix(in srgb,var(--accent-2) 60%,transparent)}
.rule{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  margin:var(--sp-4) auto var(--sp-5);max-width:420px;color:var(--accent-solid)}
.rule::before,.rule::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-solid) 70%,transparent))}
.rule::after{background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--accent-solid) 70%,transparent))}
.rule span{font-size:var(--fs-3);text-shadow:0 0 16px color-mix(in srgb,var(--accent-solid) 70%,transparent)}

.spread h1{position:relative;font-family:var(--font-display);font-size:var(--fs-9);font-weight:400;
  line-height:1.02;letter-spacing:.01em;text-transform:uppercase;
  /* высечено в камне: тёмная фаска снизу + тёплое свечение вокруг */
  text-shadow:0 2px 0 rgba(0,0,0,.85),0 4px 18px rgba(0,0,0,.9),
              0 0 60px color-mix(in srgb,var(--accent-solid) 26%,transparent)}
.spread h1 em{font-style:normal;background:var(--accent);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px color-mix(in srgb,var(--accent-solid) 45%,transparent))}
.spread__lede{position:relative;max-width:56ch;margin:var(--sp-5) auto 0;color:var(--text-muted);
  font-size:var(--fs-5);line-height:1.5}
.spread__cta{position:relative;display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-7)}

/* ---------- плиты со значениями ---------- */
.degrees{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);
  margin-top:var(--sp-8);text-align:center}
.degrees div{position:relative;padding:var(--sp-6) var(--sp-4);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 90%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));
  border:1px solid color-mix(in srgb,var(--accent-solid) 22%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,231,168,.14),0 14px 34px rgba(0,0,0,.55)}
/* орнаментальные углы — общий приём этой темы, повторяется на карточках */
.degrees div::before,.degrees div::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid color-mix(in srgb,var(--accent-solid) 70%,transparent)}
.degrees div::before{left:7px;top:7px;border-right:0;border-bottom:0}
.degrees div::after{right:7px;bottom:7px;border-left:0;border-top:0}
.degrees b{display:block;font-family:var(--font-display);font-size:var(--fs-6);font-weight:400;color:var(--text)}
.degrees span{display:block;margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:760px){.degrees{grid-template-columns:1fr}}

/* ---------- секции ---------- */
.sec{padding:var(--sp-9) 0}
.sec__head{max-width:64ch;margin-bottom:var(--sp-7)}
.sec__head h2{font-family:var(--font-display);font-size:var(--fs-7);font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.12;margin-top:var(--sp-3);
  text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 40px color-mix(in srgb,var(--accent-solid) 18%,transparent)}
.sec__head p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-5);line-height:1.5}
@media (max-width:640px){.sec__head h2{font-size:var(--fs-6)}}

/* ---------- свод: каменные таблички в две колонки ---------- */
.grimoire{columns:2;column-gap:var(--sp-6)}
@media (max-width:860px){.grimoire{columns:1}}
.spell{position:relative;break-inside:avoid;margin-bottom:var(--sp-6);padding:var(--sp-6);
  background:linear-gradient(170deg,color-mix(in srgb,var(--surface-2) 88%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));
  border:1px solid color-mix(in srgb,var(--accent-solid) 18%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,231,168,.10),0 16px 40px rgba(0,0,0,.5);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.spell::before,.spell::after{content:"";position:absolute;width:16px;height:16px;
  border:2px solid color-mix(in srgb,var(--accent-solid) 60%,transparent);
  transition:border-color var(--dur) var(--ease)}
.spell::before{left:8px;top:8px;border-right:0;border-bottom:0}
.spell::after{right:8px;bottom:8px;border-left:0;border-top:0}
.spell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent-solid) 55%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,231,168,.18),0 22px 60px rgba(0,0,0,.6),
             0 0 46px color-mix(in srgb,var(--accent-solid) 14%,transparent)}
.spell:hover::before,.spell:hover::after{border-color:var(--accent-solid)}
.spell__ico{width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--accent-solid);
  border:1px solid color-mix(in srgb,var(--accent-solid) 45%,transparent);
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent-solid) 20%,transparent),transparent 70%);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent-solid) 22%,transparent)}
.spell h3{margin-top:var(--sp-4);font-family:var(--font-display);font-size:var(--fs-5);font-weight:400;
  letter-spacing:.01em}
.spell p{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-4);line-height:1.55}
/* номер — кровью, это единственное место второго акцента на карточке */
.spell__no{position:absolute;right:var(--sp-5);top:var(--sp-5);font-family:var(--font-display);
  font-size:var(--fs-5);color:color-mix(in srgb,var(--accent-2) 80%,transparent);
  text-shadow:0 0 18px color-mix(in srgb,var(--accent-2) 55%,transparent)}

/* ---------- ссылки внутри текста ----------
   Витрины проектов на лендинге нет намеренно: список карточек с чужими
   доменами читается как спам. Ссылка живёт внутри фразы, где она к месту. */
.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),
             text-shadow var(--dur) var(--ease)}
.ink:hover{color:var(--text);border-color:var(--text);
  text-shadow:0 0 16px color-mix(in srgb,var(--accent-solid) 55%,transparent)}

/* ---------- обряд ---------- */
.rite{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
@media (max-width:860px){.rite{grid-template-columns:1fr}}
.rite__step{padding-top:var(--sp-6);position:relative;
  border-top:2px solid color-mix(in srgb,var(--accent-solid) 45%,transparent)}
.rite__step::after{content:"◆";position:absolute;left:0;top:-13px;font-size:var(--fs-2);
  color:var(--accent-solid);background:var(--bg);padding-right:8px;
  text-shadow:0 0 14px color-mix(in srgb,var(--accent-solid) 60%,transparent)}
.rite__step b{font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.2em;color:var(--accent-2)}
.rite__step h3{margin-top:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-5);font-weight:400}
.rite__step p{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-4);line-height:1.55}

/* ---------- печать ---------- */
.seal{position:relative;text-align:center;padding:var(--sp-9) var(--sp-5);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent-solid) 34%,transparent);
  background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--accent-solid) 16%,transparent),transparent 60%),
             linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 86%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,231,168,.14),0 22px 60px rgba(0,0,0,.6)}
.seal::before,.seal::after{content:"";position:absolute;width:22px;height:22px;
  border:2px solid color-mix(in srgb,var(--accent-solid) 65%,transparent)}
.seal::before{left:10px;top:10px;border-right:0;border-bottom:0}
.seal::after{right:10px;bottom:10px;border-left:0;border-top:0}
.seal img{width:132px;height:132px;margin:0 auto var(--sp-5);display:block;
  filter:drop-shadow(0 0 40px color-mix(in srgb,var(--accent-solid) 60%,transparent));
  animation:pulse 5s var(--ease) infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 70px color-mix(in srgb,var(--accent-solid) 85%,transparent)) brightness(1.12)}}
.seal h2{font-family:var(--font-display);font-size:var(--fs-8);font-weight:400;text-transform:uppercase;
  line-height:var(--lh-tight);text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 50px color-mix(in srgb,var(--accent-solid) 26%,transparent)}
.seal p{max-width:52ch;margin:var(--sp-4) auto 0;color:var(--text-muted);font-size:var(--fs-5)}
.seal .spread__cta{margin-top:var(--sp-6)}

/* ---------- подвал ---------- */
.foot{border-top:1px solid color-mix(in srgb,var(--accent-solid) 20%,transparent);
  margin-top:var(--sp-9);padding:var(--sp-7) 0 var(--sp-8);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 92%,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-family:var(--font-mono);
  font-size:var(--fs-1);letter-spacing:.12em;text-transform:uppercase;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-2);max-width:86ch;line-height:1.6}

/* ---------- внутренние страницы: /guide, /faq, /rules ---------- */
.doc{max-width:74ch;padding:var(--sp-9) 0 var(--sp-8)}
.doc h1{font-family:var(--font-display);font-size:var(--fs-8);font-weight:400;
  text-transform:uppercase;line-height:1.06;
  text-shadow:0 2px 0 rgba(0,0,0,.85),0 0 50px color-mix(in srgb,var(--accent-solid) 22%,transparent)}
.doc__lede{margin-top:var(--sp-5);color:var(--text-muted);font-size:var(--fs-5);line-height:1.55}
.doc h2{margin-top:var(--sp-8);font-family:var(--font-display);font-size:var(--fs-6);font-weight:400;
  text-transform:uppercase}
.doc p{margin-top:var(--sp-4);color:var(--text-muted);font-size:var(--fs-4);line-height:1.65}
.doc ul{margin-top:var(--sp-4);padding-left:var(--sp-5);color:var(--text-muted);font-size:var(--fs-4);line-height:1.65}
.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-family:var(--font-mono);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-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.doc__nav a:hover{color:var(--accent-solid)}

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

@media (prefers-reduced-motion:reduce){
  .seal img,.circle{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .candle{display:none}
  .btn:hover,.spell:hover{transform:none}
}