* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: #0b1020; color: #eef2ff; line-height: 1.6; }
.hero { padding: 24px; background: radial-gradient(circle at top, #1f2a56, #0b1020 60%); }
.nav, .hero-content, .section { max-width: 1100px; margin: 0 auto; }
.nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 64px; }
.brand { font-weight: 800; letter-spacing: 0.04em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; max-width: 10ch; }
.eyebrow { color: #a5b4fc; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.12em; }
.sub { max-width: 700px; color: #cbd5e1; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.cta, .link-btn { display: inline-block; text-decoration: none; border: none; cursor: pointer; padding: 14px 20px; border-radius: 12px; font-weight: 700; }
.cta { background: #7c3aed; color: white; }
.secondary { background: rgba(255,255,255,0.08); color: white; }
.link-btn { color: #c4b5fd; }
.section { padding: 56px 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 24px; }
.testimonial blockquote { font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.faq details { margin-bottom: 12px; background: rgba(255,255,255,0.04); padding: 16px; border-radius: 12px; }
.form-card { display: grid; gap: 12px; max-width: 640px; }
input, textarea { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid #334155; background: #111827; color: white; }
textarea { min-height: 120px; resize: vertical; }
@media (max-width: 640px) { .nav { margin-bottom: 32px; } }


.gig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}

.gig-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.76);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.screenshot-link {
  display: block;
  background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(20,184,166,0.16));
  padding: 0.75rem;
}

.screenshot-link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
}

.gig-card-body {
  padding: 1.25rem;
}

.gig-card h3 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
}