:root{
  --n-bg-0:#020308;
  --n-bg-1:#04050a;
  --n-panel:rgba(16,22,33,.70);
  --n-panel-soft:rgba(255,255,255,.06);
  --n-border:rgba(255,255,255,.12);
  --n-text:rgba(255,255,255,.92);
  --n-muted:rgba(255,255,255,.68);
  --n-a:#7CFFB2;
  --n-b:#6EC8FF;
  --n-p:#FF4DFF;
  --n-shadow-a:rgba(0,255,200,.14);
  --n-shadow-b:rgba(110,200,255,.12);
  --n-shadow-p:rgba(255,77,255,.10);
}

html{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  background:
    radial-gradient(circle at 25% 25%, rgba(110,200,255,.18), transparent 55%),
    radial-gradient(circle at 78% 62%, rgba(124,255,178,.18), transparent 60%),
    radial-gradient(circle at 50% 85%, rgba(255,77,255,.08), transparent 70%),
    linear-gradient(180deg, var(--n-bg-0), var(--n-bg-1));
  color:var(--n-text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

::selection{
  background:rgba(110,200,255,.28);
  color:#fff;
}

a{
  color:inherit;
}

.neon{
  text-shadow:
    0 0 16px rgba(110,200,255,.16),
    0 0 34px rgba(124,255,178,.10),
    0 0 60px rgba(255,77,255,.06);
}

.glass{
  backdrop-filter:blur(18px) saturate(145%);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

.glass-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(145%);
}

.superglass{
  background:rgba(16,22,33,.70);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:
    0 0 18px var(--n-shadow-a),
    0 0 70px var(--n-shadow-b),
    0 0 110px var(--n-shadow-p),
    inset 0 0 22px rgba(255,255,255,.04);
  position:relative;
}

.superglass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:
    linear-gradient(135deg, rgba(124,255,178,.55), rgba(110,200,255,.55), rgba(255,77,255,.40));
  background-size:220% 220%;
  animation:borderFlow 7s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.60;
}

.superglass:hover{
  background:rgba(16,22,33,.76);
}

.btnfx{
  position:relative;
  overflow:hidden;
}

.btnfx::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%);
  transform:translateX(-120%) rotate(10deg);
}

.btnfx:hover::after{
  transform:translateX(220%) rotate(10deg);
  transition:750ms cubic-bezier(.16,1,.3,1);
}

.supremeGlass{
  background:rgba(16,22,33,.78);
  backdrop-filter:blur(26px) saturate(155%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 22px rgba(0,255,200,.14),
    0 0 80px rgba(110,200,255,.10),
    0 0 120px rgba(255,77,255,.08),
    inset 0 0 25px rgba(255,255,255,.04);
  position:relative;
}

.supremeGlass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:
    linear-gradient(135deg, rgba(124,255,178,.55), rgba(110,200,255,.55), rgba(255,77,255,.40));
  background-size:220% 220%;
  animation:borderFlow 7s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.65;
}

.supremeOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  border-radius:22px;
}

.supreme-animate{
  animation:holoIn .38s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes holoBreath{
  0%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.12) translate(-3%,2%)}
  100%{transform:scale(1) translate(0,0)}
}

@keyframes holoIn{
  0%{opacity:0;transform:scale(.92) translateY(12px);filter:blur(10px)}
  50%{opacity:.8;transform:scale(1.01) translateY(0);filter:blur(3px)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}

@keyframes borderFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.navbar,
.navbar-light,
.navbar-expand-lg{
  backdrop-filter:blur(18px) saturate(150%);
}

.dropdown-menu{
  background:rgba(16,22,33,.92);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 45px rgba(0,0,0,.45);
}

.form-control,
input,
textarea,
select{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:var(--n-text);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:rgba(124,255,178,.55);
  box-shadow:0 0 0 3px rgba(124,255,178,.14), 0 0 18px rgba(110,200,255,.12);
}

.btn,
button.btn{
  background:linear-gradient(135deg, rgba(124,255,178,.95), rgba(110,200,255,.95));
  border:0;
  color:#07101a;
  box-shadow:0 0 22px rgba(0,255,200,.16), 0 0 55px rgba(110,200,255,.10);
}

.btn:hover,
button.btn:hover{
  filter:brightness(1.03);
}

.txt_blue,
.txt_blue:hover{
  color:var(--n-b) !important;
}

.bg_main{
  background-color:transparent !important;
}

.main_bg_img,
.main_bg_gradient{
  background-image:none !important;
}
