.hero-front {
  position: relative; z-index: 2; min-height: 88vh; display: grid; place-items: center;
  padding: clamp(48px,10vh,120px) clamp(18px,4vw,56px); text-align: center; overflow: hidden;
}
.hero-front .glow { top: -18%; }
.hero-front .glow-purple {
  position: absolute; bottom: -14%; right: -6%; width: min(50vw,620px); height: min(50vw,620px);
  border-radius: 50%; background: radial-gradient(circle, var(--blob-purple) 0%, transparent 66%);
  filter: blur(60px); opacity: .8; pointer-events: none;
  animation: drift linear both; animation-timeline: view();
}
.hero-front .hero-in { position: relative; max-width: 900px; }
.hero-front h1 {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px,8vw,116px);
  line-height: .98; letter-spacing: -.02em; margin: 34px 0 0; color: var(--bone); text-wrap: balance;
}
.hero-front h1 i { font-style: normal; color: var(--verdigris-light); }
.hero-front .lede {
  font-size: clamp(16px,1.3vw,19px); line-height: 1.78; color: var(--text-secondary);
  max-width: 60ch; margin: 0 auto 40px; text-wrap: pretty;
}
.hero-front .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-front .stack-row {
  position: absolute; bottom: 26px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(14px,3vw,40px); padding: 0 clamp(18px,4vw,56px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-muted);
}
.hero-front .stack-row .dot { color: var(--verdigris); }
.hero-front .scroll-hint { display: inline-flex; align-items: center; gap: 8px; animation: hint 2.6s ease-in-out infinite; }
.hero-front .scroll-hint i { width: 1px; height: 14px; background: var(--text-muted); display: block; }

.about-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px,4vw,54px); line-height: 1.08; margin: 0 0 30px; color: var(--bone); text-wrap: balance; }
.about-lede { font-family: var(--font-serif); font-size: 22px; line-height: 1.66; color: var(--text-soft); margin: 0 0 24px; text-wrap: pretty; }
.about-body { font-size: 16px; line-height: 1.82; color: var(--text-secondary); margin: 0; text-wrap: pretty; }