/* RESET */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-primary);
  background:var(--color-dark);
  color:var(--color-light);
  line-height:1.6;
  overflow-x:hidden;
}

/* IMAGES */

img{
  width:100%;
  display:block;
}

/* LINKS */

a{
  text-decoration:none;
  color:inherit;
}

/* CONTAINER */

.section{
  width:min(100% - 3rem, var(--container-width));
  margin-inline:auto;
  padding-block:var(--section-padding);
}

/* TYPOGRAPHY */

h1,h2,h3{
  line-height:1.1;
  letter-spacing:-0.03em;
}

h1{
  font-size:clamp(3rem, 6vw, 6rem);
  max-width:12ch;
}

h2{
  font-size:clamp(2rem, 4vw, 4rem);
  margin-bottom:1.5rem;
}

h3{
  font-size:1.4rem;
  margin-bottom:1rem;
}

p{
  color:rgba(255,255,255,0.8);
  max-width:70ch;
}

.eyebrow{
  color:var(--color-accent);
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.8rem;
  margin-bottom:1rem;
}

/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:1rem 1.8rem;

  border-radius:999px;

  font-weight:600;

  transition:var(--transition);
}

.btn-primary{
  background:linear-gradient(
    135deg,
    var(--color-secondary),
    var(--color-accent)
  );

  color:white;
}

.btn-primary:hover{
  transform:translateY(-3px);
}

.btn-secondary{
  border:1px solid rgba(255,255,255,0.15);
}

.btn-secondary:hover{
  border-color:var(--color-accent);
}
/* SELECTION */

::selection{
  background:var(--color-secondary);
  color:white;
}

/* SCROLLBAR */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:var(--color-dark);
}

::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.15);
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.25);
}
/* ATMOSPHERIC BACKGROUND */

body::before{

  content:"";

  position:fixed;

  inset:0;

  background:

    radial-gradient(
      circle at top left,
      rgba(39,93,225,0.10),
      transparent 30%
    ),

    radial-gradient(
      circle at top right,
      rgba(61,191,239,0.08),
      transparent 25%
    ),

    radial-gradient(
      circle at center,
      rgba(6,25,86,0.25),
      transparent 60%
    );

  pointer-events:none;

  z-index:-2;
}

/* NOISE TEXTURE */

body::after{

  content:"";

  position:fixed;

  inset:0;

  opacity:0.035;

  background-image:
    radial-gradient(
      rgba(255,255,255,0.35) 0.5px,
      transparent 0.5px
    );

  background-size:4px 4px;

  pointer-events:none;

  z-index:-1;
}