/* ================= палитра ================= */
:root{
  --bg:#140726;
  --ink:#f3e9ff;
  --muted:rgba(238,226,255,.72);
  --muted-2:rgba(238,226,255,.6);
  --muted-3:rgba(236,224,252,.58);
  --line:rgba(255,255,255,.09);

  --yellow:#ffd93d;
  --yellow-soft:#ffe060;
  --pink:#ff4f9a;
  --mint:#4de3c1;
  --teal:#47a49f;
  --dark:#2b0522;

  --wrap:1160px;
  --f-head:"Unbounded","Manrope",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h3,p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 34px}

/* ================= сцена ================= */
.scene{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.scene__photo{position:absolute;inset:0;opacity:.6;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.scene__veil{position:absolute;inset:0;opacity:.55;
  background:linear-gradient(rgba(20,7,38,.88),rgba(20,7,38,.66) 45%,rgba(20,7,38,.94))}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;will-change:transform}
.aurora--a{width:52vw;height:52vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle,var(--pink),transparent 66%);animation:floatA 22s ease-in-out infinite}
.aurora--b{width:46vw;height:46vw;right:-10vw;top:2vw;opacity:.3;
  background:radial-gradient(circle,var(--mint),transparent 66%);animation:floatB 27s ease-in-out infinite}
.aurora--c{width:60vw;height:60vw;left:22vw;bottom:-32vw;opacity:.34;
  background:radial-gradient(circle,var(--yellow),transparent 70%);animation:floatA 31s ease-in-out infinite reverse}
@keyframes floatA{50%{transform:translate3d(6vw,4vw,0) scale(1.12)}}
@keyframes floatB{50%{transform:translate3d(-5vw,6vw,0) scale(1.08)}}
.scene__mesh{position:absolute;inset:0;
  background:
    linear-gradient(transparent 96%,rgba(255,255,255,.05) 100%) 0 0/100% 46px,
    linear-gradient(90deg,transparent 96%,rgba(255,255,255,.04) 100%) 0 0/46px 100%;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 78%)}
.scene__noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* плывущие иконки */
.drift{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.drift span{position:absolute;bottom:-8vh;font-size:29px;line-height:1;opacity:.47;
  color:#ff9ec8;animation:driftUp linear infinite;will-change:transform}
@keyframes driftUp{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  12%{opacity:.47}
  88%{opacity:.35}
  100%{transform:translate3d(4vw,-118vh,0) rotate(220deg);opacity:0}
}

/* пятно за курсором */
.spot{position:fixed;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;
  margin:-260px 0 0 -260px;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(255,79,154,.22),transparent 66%)}
.spot.is-on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .aurora,.drift span,.card__lolly{animation:none}
  .spot{display:none}
}

/* ================= шапка ================= */
.topbar{position:sticky;top:0;z-index:40;padding:16px 20px;transition:padding .25s ease}
.topbar.is-small{padding:8px 20px}
.topbar__in{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 10px 10px 14px;border-radius:22px;
  background:rgba(24,10,44,.9);border:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 44px rgba(0,0,0,.42)
}
.logo{display:flex;align-items:center;gap:12px}
.logo__badge{
  width:44px;height:44px;flex:0 0 44px;border-radius:15px;
  display:grid;place-items:center;font-size:19px;color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--pink),var(--teal));
  box-shadow:0 8px 22px rgba(255,79,154,.32)
}
.logo__badge img{width:100%;height:100%;object-fit:cover}
.logo__text{display:flex;flex-direction:column;line-height:1.05}
.logo__name{font-family:var(--f-head);font-weight:800;font-size:20px;letter-spacing:.02em}
.logo__sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}

.topbar__act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:14px;
  font-weight:800;font-size:14px;color:var(--dark);
  background:linear-gradient(115deg,var(--yellow),var(--pink) 55%,var(--mint));
  box-shadow:0 10px 26px rgba(255,79,154,.28);
  transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,79,154,.4)}
.btn--ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn--ghost:hover{box-shadow:0 12px 26px rgba(0,0,0,.32)}
.btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}

/* ================= герой ================= */
.hero{padding:34px 0 72px}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 423px;
  gap:46px;align-items:center;min-height:52vh
}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--yellow-soft);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase
}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--mint);
  box-shadow:0 0 0 0 rgba(77,227,193,.55);animation:pulse 2.2s infinite}
.dot--dark{background:#04241c;box-shadow:none;animation:none}
.is-off .dot{background:#ff7a7a;box-shadow:none;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(77,227,193,0)}100%{box-shadow:0 0 0 0 rgba(77,227,193,0)}}

.big{font-family:var(--f-head);font-weight:700;font-size:32px;line-height:1.16;margin-top:18px;
  display:flex;flex-direction:column}
.word{
  font-weight:800;font-size:clamp(52px,9vw,104px);line-height:.92;letter-spacing:-.01em;
  background:linear-gradient(96deg,var(--pink) 0%,var(--yellow) 46%,var(--mint) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 30px rgba(255,79,154,.28));margin-bottom:10px;word-break:break-word
}
.big__line{color:var(--ink)}
.lead{margin-top:16px;font-size:17px;color:var(--muted)}

/* ================= карточка статуса ================= */
.card{
  position:relative;overflow:hidden;
  padding:26px;border-radius:30px;
  background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 60px rgba(0,0,0,.42)
}
.card__lolly{
  position:absolute;right:-46px;top:-46px;width:219px;height:219px;border-radius:50%;opacity:.22;
  background:conic-gradient(var(--pink) 0deg,var(--pink) 40deg,transparent 40deg,transparent 80deg,
    var(--yellow) 80deg,var(--yellow) 120deg,transparent 120deg,transparent 160deg,
    var(--mint) 160deg,var(--mint) 200deg,transparent 200deg,transparent 240deg,
    var(--pink) 240deg,var(--pink) 280deg,transparent 280deg,transparent 320deg,
    var(--yellow) 320deg,var(--yellow) 360deg);
  animation:spin 26s linear infinite;pointer-events:none
}
@keyframes spin{to{transform:rotate(360deg)}}
.live{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
  background:var(--mint);color:#04241c;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase
}
.live.is-off{background:#ff8f8f}
.clock{position:relative;display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.clock__ico{width:46px;height:46px;flex:0 0 46px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,217,61,.16)}
.clock__ico svg{width:22px;height:22px;fill:var(--yellow)}
.clock__txt{display:flex;flex-direction:column}
.clock__txt b{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.clock__txt em{font-style:normal;font-family:var(--f-head);font-weight:700;font-size:24px}
.metrics{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.metrics li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 16px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)
}
.metrics b{font-family:var(--f-head);font-weight:700;font-size:19px}
.metrics li:nth-child(1) b{color:var(--yellow)}
.metrics li:nth-child(2) b{color:var(--pink)}
.metrics li:nth-child(3) b{color:var(--mint)}
.metrics li:nth-child(4) b{color:var(--teal)}
.metrics span{color:var(--muted-2);font-size:13px;text-align:right}

/* ================= плитки-ссылки ================= */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
.tile{
  position:relative;overflow:hidden;min-height:204px;
  padding:24px 22px 20px;border-radius:26px;
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.086),rgba(255,255,255,.024));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 46px rgba(0,0,0,.34);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
.tile::after{content:"";position:absolute;inset:auto -30% -62% -30%;height:72%;pointer-events:none;
  background:radial-gradient(circle,var(--accent),transparent 68%);opacity:.2}
.tile:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 30px 62px rgba(0,0,0,.5)}
.tile__ico{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent-strong),var(--accent-soft))}
.tile__ico svg{width:24px;height:24px;fill:#fff}
.tile__tag{
  position:absolute;top:22px;right:22px;
  padding:4px 10px;border-radius:999px;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dark);background:var(--yellow)
}
.tile__name{font-family:var(--f-body);font-weight:600;font-size:15.5px;color:#fff;margin:auto 0 4px}
.tile__note{font-size:13px;color:var(--muted-2)}
.tile__go{display:inline-flex;align-items:center;gap:7px;padding-top:18px;
  font-size:12.5px;font-weight:700;letter-spacing:.5px;color:var(--accent);opacity:.65;
  transition:opacity .2s ease}
.tile:hover .tile__go{opacity:1}
.tile__go svg{width:13px;height:13px;fill:currentColor;transition:transform .2s ease}
.tile:hover .tile__go svg{transform:translateX(5px)}

/* ================= подвал ================= */
.foot{position:relative;padding:22px 0 34px}
.foot__top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
.foot__col--brand{max-width:520px}
.logo--foot{margin-bottom:14px}
.foot__text{font-size:13.5px;color:var(--muted-3);max-width:430px}
.foot__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.foot__word{
  font-family:var(--f-head);font-weight:800;text-align:center;
  font-size:clamp(46px,15.5vw,190px);line-height:.9;letter-spacing:-.03em;opacity:.5;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;pointer-events:none;margin-top:10px
}
.foot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:18px;margin-top:-4px;border-top:1px solid var(--line);
  color:var(--muted-3);font-size:13px
}

/* ================= наверх ================= */
.up{
  position:fixed;right:18px;bottom:18px;z-index:50;
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--yellow),var(--pink));
  opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.4)
}
.up.is-on{opacity:.63;transform:none;pointer-events:auto}
.up:hover{opacity:1}
.up svg{width:18px;height:18px;fill:var(--dark)}

/* ================= появление ================= */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.rise.is-in{opacity:1;transform:none}

/* ================= адаптив ================= */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:28px;min-height:0}
  .hero{padding:22px 0 56px}
  .wrap{padding:0 20px}
}
@media (max-width:560px){
  .topbar{padding:10px 12px}
  .topbar__in{padding:8px 8px 8px 12px;border-radius:20px}
  .logo__badge{width:40px;height:40px;flex-basis:40px;font-size:18px}
  .logo__name{font-size:17px}
  .btn{padding:10px 14px;font-size:13px}
  .wrap{padding:0 14px}
  .card{padding:20px;border-radius:26px}
  .tiles{gap:12px;margin-top:28px}
  .tile{min-height:180px;padding:20px 18px 18px}
  .tile__ico{width:52px;height:52px;border-radius:18px}
  .lead{font-size:15.5px}
  .big{font-size:24px}
}