/* FIANITA landing — v9 (buttons raised) */
:root{
  --glass-bg: rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.35);
  /* подняли кнопки выше */
  --buttons-bottom-offset: clamp(80px, 18vh, 150px);
}

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

.bg{
  position:fixed; inset:0;
  min-height: 100svh;
  background-image: url('assets/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: #121212;
  filter: saturate(.95) contrast(.98) brightness(.98);
}

.overlay{
  position:fixed; inset:0;
  background:
    radial-gradient(1100px 560px at 50% 78%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.38)),
    radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,.16), transparent 70%);
  pointer-events:none;
}

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

/* Buttons */
.buttons{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: var(--buttons-bottom-offset);
  width:min(720px, 92vw);
  display:grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: clamp(12px, 3vw, 20px);
  padding: 0 clamp(8px, 2vw, 16px);
}
.btn{
  display:flex; align-items:center; justify-content:center;
  padding: clamp(14px, 3.6vw, 18px);
  border-radius: 14px; text-decoration:none; text-align:center;
  color:#f6f6f6; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

@media (max-width: 380px){
  .btn{ padding: 12px; font-size: 12px; }
}