:root {
  --bg: #0d0b16;
  --text: #f4efff;
  --muted: #c3b7df;
  --primary: #ff4fc4;
  --primary-dark: #cf2e9a;
  --card: #171327;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 20%, #2a1242 0, var(--bg) 45%), var(--bg);
}

.hero { min-height: 100vh; padding: 1.5rem clamp(1rem, 4vw, 4rem) 3rem; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.logo { font-weight:800; letter-spacing:.04em; }
.hero-content { max-width: 700px; margin-top: 4rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight:700; }
h1 { font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.02; margin: .7rem 0; }
.subtitle { font-size: clamp(1rem, 2.5vw, 1.3rem); color: #e8dffc; max-width: 58ch; }

.cta-group { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.btn {
  background: linear-gradient(135deg, var(--primary), #ff86d9);
  border:none; color:#22072e; font-weight:800;
  border-radius: 999px; padding: .8rem 1.2rem; text-decoration:none;
  cursor:pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-small { padding:.6rem 1rem; font-size:.9rem; }
.btn-ghost { background: transparent; border: 1px solid #8f79c4; color: #f9edff; }

.pig-stage {
  margin: 3rem auto 0;
  width: min(640px, 100%);
  position: relative;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px; padding: 1.25rem;
}
.pig-media {
  overflow: hidden;
  aspect-ratio: 320 / 258;
  border-radius: 22px;
  background: #0a0612;
  box-shadow: 0 24px 45px rgba(0,0,0,.32);
}
.pig-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pig-caption {
  margin: .9rem 0 0;
  text-align: center;
  color: var(--muted);
}

.about,
.team {
  margin: 0 auto 3rem; width: min(900px, calc(100% - 2rem));
  background: var(--card); border: 1px solid rgba(255,255,255,.09); border-radius: 24px;
  padding: clamp(1rem, 4vw, 2rem);
}
.about h2,
.team h2 { margin-top:0; font-size:2rem; }
.about ul { padding-left: 1.1rem; color: var(--muted); }

.section-heading { max-width: 680px; }
.section-heading p:not(.eyebrow) { color: var(--muted); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.team-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.team-video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #0a0612;
}
.team-copy { padding: 1rem; }
.team-copy h3 { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.2; }
.team-copy p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.45; }

footer { padding: 2rem 1rem 3rem; text-align: center; color: #aa9bc8; }
footer a { color: #ffd0ef; }

@media (max-width: 640px) {
  .topbar { flex-direction: column; gap: .8rem; align-items: flex-start; }
}