/* Organic landing — вертикальные стеклянные кнопки */
:root{
  --gap: clamp(16px, 4vh, 24px);
  --btn-w: clamp(180px, 45vw, 280px);
  --btn-h: clamp(58px, 8vh, 80px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#f5f5f5;background:#0f0f10;overflow:hidden}

.bg{position:fixed;inset:0;background:#0f0f10 url('assets/bg.jpg') center bottom/cover no-repeat}
.veil{position:fixed;inset:0;pointer-events:none;background:radial-gradient(1100px 520px at 50% 78%,rgba(0,0,0,.22),transparent 60%),linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.30))}

.mist{position:fixed;inset:-10%;pointer-events:none;mix-blend-mode:screen;opacity:.2;filter:blur(8px)}
@keyframes drift-a{0%{transform:translateX(-2%)}50%{transform:translate(2%,1%)}100%{transform:translateX(-2%)}}
@keyframes drift-b{0%{transform:translateX(2%)}50%{transform:translate(-3%,-1%)}100%{transform:translateX(2%)}}
.mist-a{background:radial-gradient(35% 25% at 18% 60%,rgba(255,255,255,.12),transparent 70%),radial-gradient(30% 20% at 72% 32%,rgba(255,255,255,.10),transparent 70%);animation:drift-a 42s ease-in-out infinite}
.mist-b{opacity:.16;background:radial-gradient(30% 22% at 80% 20%,rgba(255,255,255,.10),transparent 70%),radial-gradient(26% 20% at 16% 84%,rgba(255,255,255,.10),transparent 70%);animation:drift-b 64s ease-in-out infinite}

.buttons.vertical{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:var(--gap);
}

.buttons.glass .btn{
  width: var(--btn-w); height: var(--btn-h);
  border-radius: 40px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0,0,0,.35), 0 0 18px rgba(0,255,128,.10) inset;
  color:#fff; text-decoration:none; display:flex; align-items:center; justify-content:center;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.buttons.glass .btn span{font-size: clamp(12px, 2.8vw, 16px)}
.buttons.glass .btn:hover{
  transform: translateY(-3px) scale(1.03);
  background: rgba(255,255,255,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.45),
              0 0 22px rgba(0,255,128,.22) inset,
              0 0 24px rgba(0,255,128,.15);
}