:root {
  --bg: #060707;
  --bg-soft: #101311;
  --panel: rgba(16, 17, 15, 0.74);
  --panel-solid: #151510;
  --text: #fff7e8;
  --muted: #beb6a2;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #f2a23b;
  --accent-strong: #ffd27a;
  --cold: #5fa7b7;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(242, 162, 59, 0.18), transparent 34rem),
    radial-gradient(circle at 100% 22%, rgba(45, 132, 151, 0.2), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.noise-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 210, 122, 0.034) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 167, 183, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.navbar {
  background: rgba(6, 7, 7, 0.66);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.navbar-brand,
.nav-link {
  color: var(--text);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.navbar-brand img {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(95, 167, 183, 0.32);
}

.nav-link {
  color: var(--muted);
}

.nav-link:hover {
  color: var(--text);
}

.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 7rem 0 5rem;
  background:
    linear-gradient(90deg, rgba(6, 7, 7, 0.88) 0%, rgba(6, 7, 7, 0.62) 45%, rgba(6, 7, 7, 0.3) 100%),
    linear-gradient(180deg, rgba(6, 7, 7, 0.18) 0%, rgba(6, 7, 7, 0.88) 100%),
    url("alienforesigt_bg.webp") center / cover no-repeat;
  box-shadow: inset 0 -1px 0 var(--line);
  animation: hero-bg-drift 22s ease-in-out infinite alternate;
}

.hero-section::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 24%, rgba(255, 210, 122, 0.06) 29%, rgba(95, 167, 183, 0.045) 33%, transparent 39%),
    repeating-linear-gradient(104deg, transparent 0 18px, rgba(255, 210, 122, 0.022) 19px 20px, transparent 21px 44px),
    repeating-linear-gradient(101deg, transparent 0 46px, rgba(95, 167, 183, 0.022) 47px 49px, transparent 50px 88px);
  mix-blend-mode: screen;
  filter: blur(0.55px) contrast(1.16);
  opacity: 0.7;
  animation: bg-warp 6.8s linear infinite;
}

.hero-section .container {
  position: relative;
  z-index: 4;
}

.speed-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.speed-lines span {
  position: absolute;
  right: -46%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(95, 167, 183, 0.08), rgba(255, 210, 122, 0.34), rgba(255, 247, 232, 0.14), transparent);
  opacity: 0;
  transform: translateX(0) skewX(16deg);
  filter: drop-shadow(0 0 8px rgba(255, 210, 122, 0.2));
  animation: speed-line 2.25s linear infinite;
}

.speed-lines span:nth-child(1) {
  top: 18%;
}

.speed-lines span:nth-child(2) {
  top: 23%;
  animation-delay: 0.18s;
}

.speed-lines span:nth-child(3) {
  top: 28%;
  animation-delay: 0.36s;
}

.speed-lines span:nth-child(4) {
  top: 34%;
  animation-delay: 0.54s;
}

.speed-lines span:nth-child(5) {
  top: 39%;
  animation-delay: 0.72s;
}

.speed-lines span:nth-child(6) {
  top: 45%;
  animation-delay: 0.9s;
}

.speed-lines span:nth-child(7) {
  top: 50%;
  animation-delay: 1.08s;
}

.speed-lines span:nth-child(8) {
  top: 56%;
  animation-delay: 1.26s;
}

.speed-lines span:nth-child(9) {
  top: 62%;
  animation-delay: 1.44s;
}

.speed-lines span:nth-child(10) {
  top: 68%;
  animation-delay: 1.62s;
}

.speed-lines span:nth-child(11) {
  top: 74%;
  animation-delay: 1.8s;
}

.speed-lines span:nth-child(12) {
  top: 80%;
  animation-delay: 1.98s;
}

.speed-lines span:nth-child(13) {
  top: 16%;
  animation-delay: 2.16s;
}

.speed-lines span:nth-child(14) {
  top: 37%;
  animation-delay: 2.34s;
}

.speed-lines span:nth-child(15) {
  top: 53%;
  animation-delay: 2.52s;
}

.speed-lines span:nth-child(16) {
  top: 70%;
  animation-delay: 2.7s;
}

.speed-lines span:nth-child(17) {
  top: 87%;
  animation-delay: 2.88s;
}

.speed-lines span:nth-child(18) {
  top: 92%;
  animation-delay: 3.06s;
}

.speed-lines span:nth-child(3n) {
  height: 2px;
  width: 86%;
  animation-duration: 2.65s;
}

.speed-lines span:nth-child(4n) {
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(95, 167, 183, 0.22), rgba(255, 210, 122, 0.28), transparent);
}

.speed-lines span:nth-child(5n) {
  height: 1px;
  width: 100%;
  animation-duration: 1.9s;
}

.speed-lines span:nth-child(6n) {
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 247, 232, 0.12), rgba(95, 167, 183, 0.22), transparent);
}

@keyframes speed-line {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(16deg);
  }

  12%,
  72% {
    opacity: 0.45;
  }

  100% {
    opacity: 0;
    transform: translateX(-360%) skewX(16deg);
  }
}

@keyframes bg-warp {
  from {
    background-position: 0 0, 0 0;
    transform: translateX(0) skewX(0deg);
  }

  50% {
    transform: translateX(-3%) skewX(-1.4deg) scaleX(1.018);
  }

  to {
    background-position: -1200px 0, -800px 0;
    transform: translateX(0) skewX(0deg);
  }
}

@keyframes hero-bg-drift {
  from {
    background-position: center center, center center, 48% center;
  }

  to {
    background-position: center center, center center, 54% center;
  }
}

.alien-profile-wall {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  width: min(44vw, 740px);
  min-width: 460px;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(6, 7, 7, 0.86), rgba(6, 7, 7, 0.34), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.72) 84%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0.72) 84%, transparent 100%);
}

.alien-profile-image {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 108%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.88;
  filter: saturate(0.92) contrast(1.05) brightness(0.72);
  transform: translateX(-5.5%);
  transform-origin: left center;
}

.alien-profile-wall::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 36% 38%, rgba(95, 167, 183, 0.18), transparent 20rem),
    linear-gradient(90deg, rgba(6, 7, 7, 0.04), rgba(6, 7, 7, 0.58));
  mix-blend-mode: multiply;
}

.alien-eye-beam {
  position: absolute;
  z-index: 3;
  top: clamp(18rem, 36vh, 24rem);
  left: clamp(14rem, 17vw, 20rem);
  width: min(46vw, 760px);
  height: 96px;
  pointer-events: none;
  transform: rotate(-3deg);
  transform-origin: left center;
  background:
    linear-gradient(90deg, rgba(106, 225, 232, 0.22), rgba(106, 225, 232, 0.08) 36%, transparent 78%),
    linear-gradient(90deg, rgba(255, 210, 122, 0.1), rgba(255, 210, 122, 0.035) 45%, transparent 76%);
  clip-path: polygon(0 45%, 100% 20%, 100% 72%, 0 55%);
  mix-blend-mode: screen;
  filter: blur(1.5px);
  opacity: 0.34;
  animation: eye-beam 3.6s ease-in-out infinite alternate;
}

.alien-eye-beam::before {
  position: absolute;
  inset: 38% auto auto -14px;
  width: 58px;
  height: 28px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 252, 255, 0.46), rgba(106, 225, 232, 0.12) 48%, transparent 72%);
  filter: blur(4px);
}

@keyframes eye-beam {
  from {
    opacity: 0.22;
    transform: rotate(-3deg) scaleX(0.96);
  }

  to {
    opacity: 0.42;
    transform: rotate(-3deg) scaleX(1.04);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 680px;
  font-size: clamp(2.25rem, 4.5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

h3 {
  font-size: 1.05rem;
}

.lead,
.section-heading p,
.section p {
  color: var(--muted);
}

.lead {
  max-width: 620px;
  margin: 1.4rem 0 2rem;
  font-size: clamp(1.02rem, 1.55vw, 1.18rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.btn {
  border-radius: 999px;
  font-weight: 800;
}

.btn-light {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #161006;
}

.btn-light:hover {
  border-color: var(--text);
  background: var(--text);
  color: #161006;
}

.btn-outline-light {
  border-color: rgba(255, 210, 122, 0.72);
  color: var(--accent-strong);
}

.btn-outline-light:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #161006;
}

.section {
  padding: 6rem 0;
}

.section-contrast {
  background:
    linear-gradient(90deg, rgba(242, 162, 59, 0.06), rgba(95, 167, 183, 0.05)),
    rgba(255, 255, 255, 0.03);
  border-block: 1px solid var(--line);
}

.section-heading {
  max-width: 820px;
  margin-bottom: 2rem;
}

.card-tile,
.stack-item,
.roadmap-step {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  padding: 1.4rem;
}

.card-tile i {
  color: var(--cold);
  font-size: 2rem;
}

.card-tile h3,
.stack-item h3 {
  margin: 1rem 0 0.45rem;
}

.card-tile p,
.stack-item p,
.roadmap-step p,
.site-footer p {
  margin-bottom: 0;
}

.stack-list {
  display: grid;
  gap: 1rem;
}

.stack-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
}

.stack-item span,
.roadmap-step span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.roadmap-step.active {
  border-color: rgba(255, 210, 122, 0.55);
  background: rgba(242, 162, 59, 0.12);
}

.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer a {
  color: var(--text);
}

@media (max-width: 767px) {
  .navbar .container {
    gap: 0.75rem;
  }

  .nav-link {
    display: none;
  }

  .roadmap {
    grid-template-columns: 1fr;
  }

  .alien-profile-wall {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    min-height: 360px;
    margin-top: 2rem;
  }

  .alien-eye-beam {
    display: none;
  }
}