/* =====================================================================
   Saitum Mini App — база: токены, шрифты, фон, типографика.
   Токены перенесены из public_html/assets/css/common.css проекта Saitum.
   ===================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --canvas:#05060f;
  --steel:#2f343e;
  --fog:#9da7ba;
  --moon:#c7d3ea;
  --frost:#d1e4fa;
  --blue:#b6d9fc;
  --edge:rgba(186,215,247,.12);
  --fill:rgba(199,211,234,.06);
  --ice:linear-gradient(0deg,#d8ecf8 0%,#98c0ef 100%);
  --glass:inset 0 1px 1px rgba(216,236,248,.2),inset 0 24px 48px rgba(168,216,245,.045),0 16px 32px rgba(0,0,0,.3);
  --good:#87cbb0;
  --violet:#9b8cf3;
  --sans:'Inter','Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;

  /* Telegram подставляет реальные значения через js/telegram.js */
  --tg-safe-top:0px;
  --tg-safe-bottom:0px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--frost);
  font:15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100vh;
  min-height:100dvh;
}

/* Фон: тонкая сетка + холодное свечение сверху (как Hero Saitum) */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse at 50% -12%,rgba(52,73,127,.28),transparent 58%),
    radial-gradient(ellipse at 50% 30%,rgba(116,162,215,.075),transparent 55%),
    linear-gradient(rgba(186,215,247,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(186,215,247,.045) 1px,transparent 1px);
  background-size:auto,auto,80px 80px,80px 80px;
  background-position:center,center,center top,center top;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 12%,#000 30%,transparent 100%);
}

/* Лёгкий шум поверх всего (как на сайте) */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  background-repeat:repeat;
}

h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;line-height:1.18;letter-spacing:-.03em}
p{color:var(--fog)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button,a{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
::selection{background:#33486b;color:white}
svg{display:block;flex-shrink:0}
ul,ol{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}

.wrap{width:min(560px,calc(100% - 44px));margin-inline:auto}

.gradient{background:var(--ice);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.055em}
.nowrap{white-space:nowrap}

.eyebrow{
  display:flex;justify-content:center;align-items:center;gap:14px;
  font:11px/1.5 var(--mono);letter-spacing:.1em;color:var(--moon);
  margin:0 0 18px;
}
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--edge))}
.eyebrow::after{transform:rotate(180deg)}
.eyebrow.left{justify-content:flex-start}
.eyebrow.left::before{display:none}

.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--edge),transparent)}

.section{padding-block:64px;position:relative}
.section-copy{max-width:420px;margin:16px auto 0;font-size:14.5px;line-height:1.7;text-align:center}

.live-dot{
  width:5px;height:5px;display:inline-block;border-radius:50%;
  background:var(--good);box-shadow:0 0 9px rgba(135,203,176,.4);
  animation:pulse 3s infinite;
}
@keyframes pulse{50%{opacity:.45;box-shadow:0 0 3px rgba(135,203,176,.15)}}

/* Появление блоков при прокрутке (мягкое, с уважением к reduced-motion) */
.js-motion .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js-motion .reveal.visible{opacity:1;transform:none}
.js-motion .stagger>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js-motion .stagger.visible>*{opacity:1;transform:none}
.js-motion .stagger.visible>*:nth-child(2){transition-delay:.07s}
.js-motion .stagger.visible>*:nth-child(3){transition-delay:.14s}
.js-motion .stagger.visible>*:nth-child(4){transition-delay:.21s}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-motion .reveal,.js-motion .stagger>*{opacity:1;transform:none}
}