/* ── 9. Main Content ── */
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(90vh - 6rem);
}

.content {
  max-width: 40rem;
  margin-left: 5%;
  z-index: 1;
}

/* heading with pulsing rainbow gradient */
.content h1 {
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.1rem;
  margin: 2rem 0;
  line-height: 1.2;
  background: linear-gradient(
    to right,
    #ff007f, #ff7f00, #7fff00,
    #00ff7f, #007fff, #7f00ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(255,0,127,0.7),
    0 0 20px rgba(255,127,0,0.6),
    0 0 30px rgba(127,255,0,0.5);
  animation: animationGradient 4s linear infinite;
}

.description {
  font-size: clamp(.5rem, 4vw, 1.2rem);
  letter-spacing: 0.05rem;
  max-width: 35rem;
  color: rgb(195, 195, 195);
}

.buttons {
  display: flex;
  gap: 1rem;
}

/* ── 10. Documentation Button (Glowy + Text-Fill on Hover) ── */
.btn-get-started {
  background: var(--bg);
  border: 4px solid transparent;
  border-radius: 1rem;
  padding: 1rem 2rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1ch;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background-size 0.24s,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--glow),
    linear-gradient(black, black) border-box;
}

.btn-get-started::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
  border-radius: 1rem;
  z-index: 2;
}

.btn-get-started span {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: var(--glow), rgb(103, 103, 103);
  background-clip: text;
  color: transparent;
  z-index: 3;
}

/* text-fill on hover */
.btn-get-started:hover span {
  background: linear-gradient(
    to right,
    hsl(var(--hue) 80% 85%),
    hsl(calc(var(--hue) + 60) 80% 85%),
    hsl(calc(var(--hue) + 120) 80% 85%)
  );
  background-size: 200%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animationGradient 3s linear infinite;
}

.btn-get-started::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 4px solid transparent;
  border-radius: 1rem;
  background: var(--glow);
  filter: blur(20px);
  z-index: 1;
}

:root:has(.btn-get-started:active) {
  --size: 300px;
}

.btn-get-started:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

/* ── 13. 3D Model Position ── */
.robot-3d {
  position: absolute;
  top: 0;
  right: -20%;
}

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
* {
  box-sizing: border-box;
}

body {
  color: #e7e7e7;
  font-family: "Jost", sans-serif;
  background-image: url(https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2378&q=80);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}