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

html {
  scroll-behavior: smooth;
}

:root {
  --bg: #050505;
  --card: #0d0d10;
  --purple: #7c3aed;
  --purple2: #a855f7;
  --yellow: #ffd166;
  --text: #ffffff;
  --muted: rgba(255,255,255,.62);
  --line: rgba(255,255,255,.10);
}

body {
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 80% 0%, rgba(124,58,237,.16), transparent 30%),
    #050505;
  color: var(--text);
  overflow-x: hidden;
}

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

.nav {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100% - 36px));
  height: 76px;
  z-index: 100;
  padding: 0 18px 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 950;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

.nav-links a {
  padding: 13px 20px;
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  font-size: 14px;
  font-weight: 850;
}

.nav-links a:hover,
.nav-links a.active {
  color: white;
  background: rgba(124,58,237,.35);
}

.nav-btn {
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), var(--purple2));
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 950;
}

.page {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 170px 0 100px;
}

.hero {
  max-width: 900px;
  margin-bottom: 70px;
}

.eyebrow {
  color: var(--purple2);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(54px, 8vw, 110px);
  line-height: .9;
  letter-spacing: -.075em;
  font-weight: 950;
}

.hero p {
  margin-top: 24px;
  max-width: 760px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 650;
}

.projects {
  display: grid;
  gap: 28px;
}

.project-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 38px;
  padding: 24px;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  transition: .3s ease;
  align-items: center;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168,85,247,.42);
  box-shadow: 0 35px 110px rgba(124,58,237,.14);
}

.project-card img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 24px;
  background: #111;
}

.project-info {
  padding-right: 12px;
}

.status {
  display: inline-flex;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.status.dev {
  color: #d8b4fe;
  background: rgba(168,85,247,.16);
  border: 1px solid rgba(168,85,247,.3);
}

.status.soon {
  color: var(--yellow);
  background: rgba(255,196,0,.14);
  border: 1px solid rgba(255,196,0,.28);
}

.project-info h2 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 950;
}

.project-info p {
  margin-top: 18px;
  max-width: 680px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 650;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.meta span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 850;
}

.project-info strong {
  display: inline-flex;
  margin-top: 28px;
  color: var(--purple2);
  font-size: 14px;
  font-weight: 950;
}

@media (max-width: 950px) {
  .nav-links {
    display: none;
  }

  .page {
    width: min(100% - 28px, 1240px);
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 52px;
  }

  .project-info h2 {
    font-size: 42px;
  }
}