/*
=================================================
BLOKS LABS LAYER
Version: 1.0.0
=================================================
*/

/* =========================================================
   BLOKS Labs UI
   Experimental layer for labs.bloks.net
   Loads after bloks-ui.css
========================================================= */

body {
  background:
    radial-gradient(circle at top left, rgba(40,90,255,.18), transparent 34rem),
    radial-gradient(circle at top right, rgba(130,40,255,.12), transparent 32rem),
    linear-gradient(180deg, #030511 0%, #050816 45%, #02030a 100%);
}

.bloks-labs {
  position: relative;
  overflow: hidden;
}

.bloks-labs::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(rgba(120,170,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.025) 1px, transparent 1px);

  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black, transparent 75%);
}

.bloks-labs .bloks-hero {
  min-height: 78vh;
}

.bloks-labs .bloks-hero-content,
.bloks-labs .bloks-h1 {
  max-width: 980px;
}

.bloks-labs .bloks-section {
  position: relative;
  z-index: 1;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.bloks-labs .bloks-panel {
  border-color: rgba(120,180,255,.18);

  box-shadow:
    0 0 0 1px rgba(120,180,255,.06),
    0 30px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.bloks-labs .bloks-card {
  background:
    linear-gradient(
      180deg,
      rgba(10,16,36,.92),
      rgba(4,7,20,.96)
    );

  border-color: rgba(120,180,255,.14);
}

.bloks-labs .bloks-card:hover {
  transform: translateY(-3px);

  border-color: rgba(120,200,255,.34);

  box-shadow:
    0 20px 70px rgba(0,0,0,.38),
    0 0 35px rgba(90,150,255,.12);
}

.bloks-labs .bloks-shader-wrap {
  margin-top: 2rem;

  border-radius: 28px;
  border-color: rgba(120,190,255,.18);

  box-shadow:
    0 35px 110px rgba(0,0,0,.55),
    0 0 70px rgba(70,130,255,.12);
}

.bloks-labs .bloks-btn-primary {
  box-shadow:
    0 0 28px rgba(80,150,255,.24),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.bloks-labs-hud {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.bloks-labs-chip {
  display: inline-flex;
  align-items: center;

  padding: .35rem .7rem;

  border: 1px solid rgba(120,180,255,.18);
  border-radius: 999px;

  color: rgba(190,220,255,.76);
  background: rgba(8,14,32,.72);

  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .bloks-labs .bloks-hero {
    min-height: 68vh;
  }

  .bloks-labs .bloks-shader-wrap {
    border-radius: 20px;
  }
}