.hero {
  padding: 0;
  /* Warm white base with subtle gold radial at Three.js canvas side */
  background: radial-gradient(ellipse at 65% 50%, rgba(201,168,76,0.06) 0%, transparent 55%), var(--bg-page);
  position: relative; overflow: hidden;
}

/* Morphing gold blobs in background */
.hero .blob-morph:nth-child(1) { width: 500px; height: 500px; top: -100px; right: -80px; opacity: 0.5; }
.hero .blob-morph:nth-child(2) { width: 300px; height: 300px; top: 60%; left: 5%; opacity: 0.3; }

.hero-content {
  padding: 160px 0 80px var(--space-3xl);
  display: flex; flex-direction: column; justify-content: center;
  z-index: 2; position: relative;
}

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, var(--text-5xl));
  font-weight: 900;
  color: var(--color-wool-ink);          /* Dark on white */
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.hero-sub {
  color: var(--color-wool-dark);
  font-size: var(--text-lg);
  max-width: 480px;
  line-height: 1.8;
  margin-bottom: var(--space-xl);
}

.hero-cta-row { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-xl); }

.hero-socials { display: flex; gap: var(--space-md); }
.hero-socials a svg { width: 20px; height: 20px; stroke: var(--color-wool-light); fill: none; transition: stroke var(--transition-fast), transform var(--transition-fast); }
.hero-socials a:hover svg { stroke: var(--color-gold-bright); transform: translateY(-3px); }

.hero-canvas-wrap { width: 55%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; }
#heroCanvas { width: 100%; height: 100%; }

/* Subtle star particles on white bg — very faint */
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--color-wool-charcoal); animation: twinkle var(--duration, 4s) ease-in-out infinite var(--delay, 0s); opacity: 0.1; }