:root{
  --bg:#0b0b0c;
  --bg-soft:#111114;
  --text:#e7e7ea;
  --muted:#a2a2ad;
  --accent:#f6c76a; /* золотистый */
  --card:#131318;
  --border:#1c1c22;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:.15px;cursor:auto}
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: transparent;
}


/* Базовый слой звёзд (мелкие и ненавязчивые) */
.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.70), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.60), transparent),
    radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.65), transparent),
    radial-gradient(3px 3px at 160px 30px, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px 2px at 200px 90px, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 260px 20px, rgba(255,255,255,0.60), transparent),
    radial-gradient(2px 2px at 300px 60px, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 340px 100px, rgba(255,255,255,0.60), transparent),
    radial-gradient(2px 2px at 380px 10px, rgba(255,255,255,0.65), transparent);
  background-repeat: repeat;
  background-size: 360px 220px;
  animation: twinkle 5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; }
}

.stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 50px 50px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 100px 100px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 150px 50px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 250px 150px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 350px 100px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: twinkle 3s ease-in-out infinite alternate;
}

.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 75px 75px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 175px 25px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 225px 125px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 325px 75px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 500px 400px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(11,11,12,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-toggle{display:none}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#8f6b24);display:grid;place-items:center;font-weight:700;color:#110;box-shadow:0 0 20px rgba(246,199,106,.35)}
.brand-name{font-weight:600}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;opacity:.85;font-weight:500}
.nav a:hover{opacity:1}
.nav .buy-cta{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,rgba(246,199,106,.26),rgba(246,199,106,.10));color:var(--text);
  box-shadow:0 0 18px rgba(246,199,106,.35), 0 8px 26px rgba(246,199,106,.20);animation:goldenPulse 2.4s ease-in-out infinite}

/* Sections */
.section{padding:72px 0;border-bottom:1px solid var(--border)}
.section p{line-height:1.8}
.section .lead{line-height:1.7}
.section h2{margin:0 0 16px;font-size:32px}
.lead{max-width:720px;opacity:.9}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* Hero */
.hero{position:relative;overflow:visible;padding:140px 0 170px;background:linear-gradient(180deg,rgba(246,199,106,.07),transparent)}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 16px}
.hero .container{position:relative;z-index:2}
.cta-row{display:flex;gap:12px;margin:22px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(180deg,var(--accent),#c49a3a);color:#160;box-shadow:0 6px 28px rgba(246,199,106,.40), 0 0 40px rgba(246,199,106,.22);animation:goldenPulse 2.2s ease-in-out infinite}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--border);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn.large{padding:16px 24px;font-size:18px;border-radius:14px}
.btn.full{width:100%}
.microcopy{color:var(--muted);font-size:14px}
.notice{margin-top:12px;color:var(--muted);font-size:14px}
.notice a{color:var(--accent)}

/* Cards, grids */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}
.inline-metrics{display:flex;gap:18px;margin-top:14px}
.metric{background:#0e0e12;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.metric .num{font-weight:800;color:var(--accent)}
.metric .label{color:var(--muted);font-size:13px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}

/* Lists */
.checklist{list-style:none;padding:0;margin:12px 0 0}
.checklist li{position:relative;padding-left:26px;margin:10px 0}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--accent)}
.bullet{list-style:none;padding:0;margin:0}
.bullet li{margin:10px 0;padding-left:14px;border-left:2px solid var(--border)}

/* FAQ */
.faq .faq-list{max-width:820px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0;color:var(--muted)}

/* CTA */
.cta .cta-inner{display:grid;place-items:center;text-align:center}
.cta .contact{color:var(--muted);margin-top:10px}

/* Footer */
.site-footer{padding:28px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.small{font-size:13px}

/* Cursor canvas */
#cursor-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
/* Чтобы частицы были над всем сайтом */
#cursor-canvas{z-index:1000}
/* Кастомный курсор временно скрываем — оставляем только дымку */
/* Кастомный курсор — крупное мягкое кольцо */
#custom-cursor{
  position: fixed;
  left: 0; top: 0;
  width: 36px; height: 36px; /* увеличить при необходимости */
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(246,199,106,.65);
  background: radial-gradient(closest-side, rgba(246,199,106,.18), rgba(246,199,106,0) 70%);
  box-shadow: 0 0 18px rgba(246,199,106,.35), 0 0 32px rgba(246,199,106,.18);
  pointer-events: none;
  z-index: 1003;
  transform: translate3d(-9999px, -9999px, 0);
  display: none;
}
/* Кнопка переключения эффектов */
.effects-toggle{position:fixed;right:12px;top:12px;z-index:1002;padding:8px 12px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--text);font-weight:600;cursor:pointer}
.effects-toggle:hover{background:rgba(255,255,255,.08)}
/* Parallax blob */
#parallax-blob{position:fixed;inset:auto auto 10% -10%;width:60vmax;height:60vmax;border-radius:50%;
  background:radial-gradient(closest-side, rgba(246,199,106,.13), rgba(246,199,106,.04) 40%, transparent 70%);
  filter:blur(30px);pointer-events:none;z-index:1;transform:translate3d(0,0,0)}

/* Ensure content is above background effects */
main, .site-header, .site-footer {
  position: relative;
  z-index: 3;
}

/* Reveal animations (JS-enabled). По умолчанию контент виден. */
.reveal{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
html.reveal-enabled .reveal{opacity:0;transform:translateY(24px)}
html.reveal-enabled .reveal.is-visible{opacity:1;transform:none}

/* Footer links */
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--text)}

/* Responsive */
@media (max-width:960px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:36px}
}

/* ====== Breakpoints ====== */
@media (max-width:1200px){
  .container{max-width:980px}
  .hero{padding:120px 0 150px}
}
@media (max-width:992px){
  .container{max-width:860px}
  .hero h1{font-size:38px}
}
@media (max-width:768px){
  .container{max-width:720px}
  .site-header{position:sticky;top:0}
  .header-inner{height:60px}
  .brand-name{font-size:16px}
  /* Burger shown, nav hidden by default */
  .nav-toggle{display:inline-flex;flex-direction:column;gap:4px;width:38px;height:32px;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text)}
  .nav-toggle .nav-toggle-bar{display:block;width:20px;height:2px;background:var(--text);opacity:.9}
  .nav{position:absolute;right:16px;top:60px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 12px;
    display:none;flex-direction:column;gap:10px;z-index:1002;touch-action:manipulation}
  .nav a{padding:8px 10px;border-radius:8px}
  .nav a.buy-cta{display:block}
  .nav.is-open{display:flex;animation:menuFade .18s ease-out}
}
@media (max-width:480px){
  .container{max-width:100%;padding:0 14px}
  .hero{padding:100px 0 120px}
  .hero h1{font-size:28px}
  .btn{padding:10px 14px}
  .btn.large{padding:12px 16px;font-size:16px}
}

/* Lock scroll when menu open */
body.no-scroll{overflow:hidden}

@keyframes menuFade{
  0%{opacity:0;transform:translateY(-6px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Decorative floating elements */
.hero .decos{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero .deco{position:absolute;width:180px;height:180px;border-radius:24px;filter:blur(10px);
  background:radial-gradient(closest-side, rgba(246,199,106,.18), rgba(246,199,106,.06) 40%, transparent 70%);
  border:1px solid rgba(246,199,106,.12);opacity:.55;animation:float 16s ease-in-out infinite}
.hero .deco-a{top:10%;left:5%;animation-duration:18s}
.hero .deco-b{top:30%;right:8%;animation-duration:20s}
.hero .deco-c{bottom:8%;left:35%;animation-duration:22s}
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-14px) translateX(10px)}}

/* Golden Lion visual */
.lion-hero{position:absolute;right:4%;top:20px;bottom:auto;width:min(48vw,860px);height:min(32vw,600px);
  background-image:none; /* отключили старый фон льва */
  background-size:contain;background-repeat:no-repeat;background-position:bottom right;opacity:.85;pointer-events:none;z-index:1;
  filter:drop-shadow(0 10px 30px rgba(246,199,106,.25));mix-blend-mode:screen;
  animation:none}
.lion-hero #lion-smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lion-hero .lion-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.95;mix-blend-mode:screen;filter:drop-shadow(0 10px 30px rgba(246,199,106,.25))}
.lion-plate{display:none}
@keyframes plateSwing{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-2px)}}
.lion-hero .lion-video{width:100%;height:100%;object-fit:contain;opacity:.95;filter:drop-shadow(0 10px 30px rgba(246,199,106,.25));}
/* Sprite animation (8 frames: 4 columns x 2 rows). 
   Положите файл спрайта рядом с index.html: 'assetslion-sprite.png'. */
.lion-hero .lion-sprite{
  position:absolute;inset:0;width:100%;height:100%;
  background-image:url('assetslion-sprite.png');
  background-repeat:no-repeat;
  /* Каждая ячейка = 1/4 ширины и 1/2 высоты исходника */
  background-size:400% 200%;
  image-rendering:auto;opacity:.95;mix-blend-mode:screen;filter:drop-shadow(0 10px 30px rgba(246,199,106,.25));
  animation:lionSprite8 1.1s steps(1) infinite;
}
@keyframes lionSprite8{
  0%   {background-position:0% 0%}
  12.5%{background-position:33.333% 0%}
  25%  {background-position:66.666% 0%}
  37.5%{background-position:100% 0%}
  50%  {background-position:0% 100%}
  62.5%{background-position:33.333% 100%}
  75%  {background-position:66.666% 100%}
  87.5%{background-position:100% 100%}
  100% {background-position:0% 0%}
}
@keyframes lionApproach{
  0%{transform:translateX(2vw) translateY(4px) scale(0.98)}
  50%{transform:translateX(0) translateY(-6px) scale(1.04)}
  100%{transform:translateX(2vw) translateY(4px) scale(0.98)}
}

/* === User sprite animation (.lion) === */
.lion{
  position:absolute;
  top:auto;
  bottom:-6px; /* лапы на уровне бегущей строки */
  right:-6%;
  left:auto;
  transform:none;
  width:min(30vw, 520px);   /* крупнее и правее */
  aspect-ratio:1 / 1;       /* сохраняем квадрат */
  height:auto;
  /* Фотография льва с fallback-ом на вариант без неразрывного пробела */
  background-image: url(' assetslion.png'), url('assetslion.png');
  background-position: center bottom, center bottom;
  background-size: contain, contain;
  background-repeat: no-repeat, no-repeat;
  /* Плавные эффекты: лёгкое свечение + очень медленный ход */
  animation: lionSlide 22s ease-in-out infinite, lionGlow 5s ease-in-out infinite;
  opacity:.92;
  filter: drop-shadow(0 10px 30px rgba(246,199,106,.25));
  pointer-events:none; /* чтобы не мешал кликам */
  image-rendering:auto; /* фотография — лучше без crisp-edges */
  will-change: transform, filter;
}

/* Мобильная адаптация льва: показываем, но меньше и сильнее вправо */
@media (max-width: 900px){
  .lion-hero{display:block; right:2%; top:8px; width: 100%; height: 300px;}
  .lion{
    top:auto; bottom:-4px;
    right:-18%;
    width:min(48vw, 300px);
    opacity:.9;
    animation: lionSlide 28s ease-in-out infinite, lionGlow 6s ease-in-out infinite;
  }
  .hero{padding-bottom: 140px;}
}

/* Медленный шаг: смещение на пару процентов, без укачивания */
@keyframes lionSlide{
  0%,100%{ transform: translateX(0) }
  50%    { transform: translateX(-2%) }
}

/* Мягкое свечение */
@keyframes lionGlow{
  0%,100%{ filter: drop-shadow(0 10px 24px rgba(246,199,106,.18)) }
  50%    { filter: drop-shadow(0 14px 36px rgba(246,199,106,.34)) }
}

/* Едва заметное «дыхание», без укачивания */
@keyframes lionBreath{
  0%,100%{ transform: translateZ(0) scale(1) }
  50%    { transform: translateZ(0) scale(1.01) }
}

/* Скрыть старые варианты льва, чтобы не было наложений */
.lion-hero .lion-video,
.lion-hero .lion-img,
.lion-hero .lion-sprite{display:none}

/* Marquee */
.marquee{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:0;
  background:linear-gradient(180deg,rgba(246,199,106,.03),rgba(246,199,106,.01));overflow:hidden}
.marquee{z-index:2}
.marquee + .section{margin-top:28px}
.marquee__inner{display:flex;gap:40px;white-space:nowrap;padding:12px 0;animation:marquee 28s linear infinite}
.marquee__inner span{color:var(--accent);opacity:.9;font-weight:700;letter-spacing:.6px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Pulse for primary CTA */
.pulse{animation:goldenPulse 2.2s ease-in-out infinite}
.btn.pulse:hover{animation-duration:1.3s}
@keyframes goldenPulse{
  0%,100%{box-shadow:0 0 0 rgba(246,199,106,0), 0 8px 28px rgba(246,199,106,.28), 0 0 32px rgba(246,199,106,.18);transform:translateZ(0) scale(1)}
  50%{box-shadow:0 0 0 12px rgba(246,199,106,.10), 0 12px 40px rgba(246,199,106,.45), 0 0 50px rgba(246,199,106,.30);transform:translateZ(0) scale(1.04)}
}

/* Banners carousel */
.banners h2{margin-bottom:16px}
.banner-wrap{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02)}
.banner-track{display:flex;gap:14px;padding:14px;animation:track 26s linear infinite}
.banner-card{min-width:220px;padding:16px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(246,199,106,.12),rgba(246,199,106,.05));
  border:1px solid rgba(246,199,106,.22);font-weight:700;color:var(--text);box-shadow:0 6px 24px rgba(246,199,106,.12)}
@keyframes track{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Phone demo */
.phone-demo .phone-col{display:grid;place-items:center}
.phone-hero{position:relative;width:min(420px,40vw);aspect-ratio:9/19;border-radius:30px;
  background:radial-gradient(120% 120% at 70% 10%, rgba(246,199,106,.12), rgba(0,0,0,.0));
  border:1px solid var(--border);box-shadow:0 10px 40px rgba(0,0,0,.4), 0 0 60px rgba(246,199,106,.15);
  transform:perspective(800px) rotateX(6deg) rotateY(-6deg);animation:phoneFloat 8s ease-in-out infinite}
.phone-img,.phone-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:30px}
.phone-video{mix-blend-mode:screen;opacity:.95}
@keyframes phoneFloat{0%,100%{transform:perspective(800px) rotateX(6deg) rotateY(-6deg) translateY(0)}50%{transform:perspective(800px) rotateX(3deg) rotateY(-3deg) translateY(-10px)}}