:root{
  --bg:#567FEF;
  --bg-deep:#3D63D8;
  --ink:#FFFFFF;
  --ink-soft:#E3EAFF;
  --coral:#FF6B4A;
  --mint:#3DDC84;
  --milk:#FFF6EC;
  --display:'Unbounded',sans-serif;
  --body:'Onest',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  overflow:hidden;
  cursor:none;
}
@media (hover:none){ body{cursor:auto} }

::selection{background:var(--coral);color:#fff}

/* ── канвас с кадрами ── */
#stage{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;touch-action:none;
}

/* лёгкая вуаль слева, чтобы мелкий текст держал контраст */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(58% 78% at 16% 46%, rgba(28,48,130,.30), rgba(28,48,130,0) 68%);
}

/* ── тонкая рамка по краю ── */
.frame-border{
  position:fixed;inset:14px;z-index:6;pointer-events:none;
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px;
}

/* ── шапка ── */
.topbar{
  position:fixed;top:14px;left:14px;right:14px;z-index:7;
  height:96px;padding:0 34px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.topbar-left{display:flex;align-items:baseline;gap:16px}
.logo{
  font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:.01em;
}
.reg{font-size:.45em;vertical-align:super;font-weight:500}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em}
.dim{color:var(--ink-soft);opacity:.82}
.topbar-center{position:absolute;left:50%;transform:translateX(-50%)}
.topbar-right{display:flex;align-items:center;gap:10px}
.pulse-dot{
  width:9px;height:9px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 0 rgba(61,220,132,.55);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}
  70%{box-shadow:0 0 0 11px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}

/* ── правый текстовый блок ── */
.panel{
  position:fixed;z-index:7;
  left:5%;top:47%;transform:translateY(-50%);
  width:min(35vw,500px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.kicker{color:var(--mint);margin-bottom:22px;font-weight:500}
.title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(44px,4.5vw,70px);
  line-height:.98;letter-spacing:-.01em;
  margin-bottom:26px;text-wrap:balance;
}
.outline{
  color:transparent;
  -webkit-text-stroke:1.6px rgba(255,255,255,.92);
}
.punch{
  font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.8vw,26px);
  color:#fff;margin:-6px 0 24px;letter-spacing:.01em;
}
/* буквы подпрыгивают под курсором */
.ch{
  display:inline-block;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.ch:hover{transform:translateY(-12px) rotate(-5deg)}
.lead{
  font-size:15.5px;line-height:1.65;color:var(--ink-soft);
  max-width:360px;margin-bottom:34px;font-weight:400;
}
.stats{display:flex;gap:34px;margin-bottom:44px}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats b{
  font-family:var(--display);font-weight:800;font-size:21px;
  font-variant-numeric:tabular-nums;
}
.stats .mono{color:var(--ink-soft);opacity:.8;font-size:10.5px}

/* ── круглая кнопка ── */
.cta{
  width:128px;height:128px;border-radius:50%;border:none;
  background:var(--milk);color:#2B3A78;
  font-family:var(--display);font-weight:800;font-size:12px;line-height:1.35;
  letter-spacing:.05em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  cursor:none;
  box-shadow:0 14px 34px -10px rgba(23,40,110,.45);
  transition:background .35s ease,color .35s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:none){ .cta{cursor:pointer} }
.cta-arrow{transition:transform .3s ease}
.cta:hover{background:var(--coral);color:#fff}
.cta:hover .cta-arrow{transform:translateX(5px)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cta.bounce{animation:bounce .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes bounce{
  0%{transform:scale(1)}35%{transform:scale(.88)}70%{transform:scale(1.06)}100%{transform:scale(1)}
}

/* ── футер ── */
.bottombar{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:7;
  height:58px;padding:0 34px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.28);
  color:var(--ink-soft);
}

/* ── кастомный курсор ── */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:40;
  opacity:0;
}
body.cursor-live .cursor,body.cursor-live .cursor-dot{opacity:1}
.cursor{
  width:36px;height:36px;border:1.5px solid rgba(255,255,255,.85);
  transform:translate(-50%,-50%);
  transition:width .25s ease,height .25s ease,border-color .25s ease;
}
.cursor.grow{width:58px;height:58px;border-color:var(--coral)}
.cursor-dot{
  width:6px;height:6px;background:#fff;transform:translate(-50%,-50%);
}
@media (hover:none){ .cursor,.cursor-dot{display:none} }

/* ── загрузка ── */
.loader{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .6s ease;
}
.loader.done{opacity:0;pointer-events:none}
.loader-logo{font-family:var(--display);font-weight:900;font-size:34px}
.loader-bar{
  width:min(280px,60vw);height:2px;background:rgba(255,255,255,.25);
  border-radius:2px;overflow:hidden;
}
.loader-bar i{
  display:block;height:100%;width:0%;background:#fff;border-radius:2px;
  transition:width .2s ease;
}
.loader-pct{color:var(--ink-soft)}

/* ── появление интерфейса ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
body.ready .reveal{opacity:1;transform:none}
body.ready .reveal:nth-of-type(1){transition-delay:.05s}
.panel .reveal:nth-child(1){transition-delay:.10s}
.panel .reveal:nth-child(2){transition-delay:.18s}
.panel .reveal:nth-child(3){transition-delay:.24s}
.panel .reveal:nth-child(4){transition-delay:.30s}
.panel .reveal:nth-child(5){transition-delay:.38s}
.panel .reveal:nth-child(6){transition-delay:.46s}
.bottombar.reveal{transition-delay:.5s}

/* ── планшет ── */
@media (max-width:1024px){
  .panel{width:min(42vw,420px)}
  .title{font-size:clamp(40px,6vw,72px)}
  .cta{width:112px;height:112px}
  .topbar-center{display:none}
}

/* ── мобильный ── */
@media (max-width:640px){
  body::after{
    background:linear-gradient(to top, rgba(30,48,128,.62) 0%, rgba(30,48,128,.30) 26%, rgba(30,48,128,0) 46%);
  }
  .topbar{height:72px;padding:0 20px}
  .logo{font-size:21px}
  .topbar .dim{display:none}
  body::after{
    background:linear-gradient(to top, rgba(30,48,128,.78) 0%, rgba(30,48,128,.62) 38%, rgba(30,48,128,.25) 52%, rgba(30,48,128,0) 62%);
  }
  .panel{
    right:auto;left:50%;top:auto;bottom:74px;
    transform:translateX(-50%);
    width:88vw;align-items:flex-start;
  }
  .kicker{margin-bottom:8px;font-size:10px}
  .title{font-size:clamp(34px,10.5vw,50px);margin-bottom:8px;line-height:.95}
  .punch{font-size:16px;margin-bottom:8px}
  .lead{font-size:13px;line-height:1.45;margin-bottom:12px;max-width:none}
  .stats{gap:20px;margin-bottom:14px}
  .stats b{font-size:22px}
  .stats div:nth-child(2){display:none}
  .cta{width:96px;height:96px;font-size:11px;align-self:flex-end;margin-top:-52px}
  .bottombar{height:52px;padding:0 20px;font-size:10px}
  .bottombar .dim{display:none}
  .frame-border{inset:10px;border-radius:18px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .pulse-dot{animation:none}
  .cta.bounce{animation:none}
  .ch{transition:none}
  .ch:hover{transform:none}
}