:root{
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
}

*{
  box-sizing: border-box;
}

html, body{
  min-height: 100%;
}

body{
  font-family: "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  background:
    radial-gradient(900px 500px at 8% -10%, rgb(6 182 212 / 0.16) 0%, transparent 70%),
    radial-gradient(1000px 580px at 100% 0%, rgb(236 72 153 / 0.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1{
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: color-mix(in hsl shorter hue, var(--pink) 60%, var(--violet) 40%);
}

p{
  font-size: 1.03rem;
  line-height: 1.6;
  margin: 0;
  color: var(--muted);
}

nav{
  gap: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--page-gutter);
}

.hero{
  padding: 1rem var(--page-gutter);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.4rem;
  align-items: center;

  aside{
    display: grid;
    gap: 2rem;
  }
}