/* =========================================
   RESET
========================================= */

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow-x:hidden;

  background:#070809;
}


/* =========================================
   HERO
========================================= */

.hero{
  position:relative;

  min-height:100svh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  padding:var(--nav-h, 0px) 24px 80px;
}


/* =========================================
   DARK METAL BACKGROUND
========================================= */

.hero__bg{
  position:absolute;
  inset:0;

  z-index:0;

  background:
    radial-gradient(
      circle at top,
      #1b1d22 0%,
      #111317 35%,
      #070809 100%
    );
}


/* =========================================
   INDUSTRIAL DOTS
========================================= */

.hero__grid{
  position:absolute;
  inset:-25%;

  z-index:1;

  transform:rotate(45deg);

  opacity:0.95;

  background:

    /* METAL LIGHT EDGE (behind) */
    radial-gradient(
      circle,
      transparent 0px,
      transparent 4px,
      rgba(255,255,255,0.10) 5.5px,
      transparent 7px
    ) 1.5px 1.5px,

    /* BLACK HOLES */
    radial-gradient(
      circle,
      #000 0px,
      #000 5px,
      transparent 5.5px
    );

  background-size:22px 22px;

  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,0.03));

  mask-image:
    radial-gradient(
      ellipse 85% 75% at 50% 40%,
      black 40%,
      transparent 100%
    );
}


/* =========================================
   METAL OVERLAY
========================================= */

.hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;

  pointer-events:none;

  background:

    repeating-linear-gradient(
      90deg,
      rgba(11, 11, 15, 0.015) 0px,
      rgba(5, 6, 9, 0.015) 1px,
      transparent 1px,
      transparent 3px
    ),

    radial-gradient(
      circle,
      transparent 50%,
      rgba(0,0,0,0.55) 100%
    );

  mix-blend-mode:overlay;
}


/* =========================================
   GLOW
========================================= */

.hero__glow{
  position:absolute;

  top:-10%;
  left:50%;

  transform:translateX(-50%);

  width:700px;
  height:500px;

  z-index:3;

  background:
    radial-gradient(
      ellipse,
      rgba(0,255,204,0.08) 0%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================
   CONTENT
========================================= */

.hero__content{
  position:relative;
  z-index:5;

  text-align:center;

  color:white;
}

.hero__content h1{
  font-size:4rem;
  margin:0;
}

.hero__content p{
  color:rgba(255,255,255,0.7);
}