/* ════════════════════════════════════════════════════════
   PYPI — Hero Section
════════════════════════════════════════════════════════ */

.lf-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--lf-bg);
}

/* Dot grid */
.lf-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(154, 120, 64, .11) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}
/* Guide grid */
.lf-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(154, 120, 64, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 120, 64, .025) 1px, transparent 1px);
  background-size: 160px 160px; pointer-events: none;
}

/* ── Corner brackets ─────────────────────────────────── */
.lf-corner {
  position: absolute; width: 24px; height: 24px;
  pointer-events: none; z-index: 2; opacity: .28;
}
.lf-corner--tl { top: 40px; left: 40px; }
.lf-corner--tr { top: 40px; right: 40px; transform: scaleX(-1); }
.lf-corner--bl { bottom: 40px; left: 40px; transform: scaleY(-1); }
.lf-corner--br { bottom: 40px; right: 40px; transform: scale(-1); }

/* ── Lines ───────────────────────────────────────────── */
.lf-hero-lines {
  position: absolute; inset: 0;
  display: flex; justify-content: space-evenly; pointer-events: none;
}
.lf-hero-lines span {
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(154, 120, 64, .05) 30%, rgba(154, 120, 64, .05) 70%, transparent 100%);
}

/* ── Stamp ───────────────────────────────────────────── */
.lf-hero-stamp {
  position: absolute; right: -1vw; bottom: -6vh;
  font-family: var(--lf-serif); font-size: clamp(180px, 22vw, 340px);
  font-weight: 300; font-style: italic;
  color: rgba(154, 120, 64, .04);
  line-height: 1; pointer-events: none; user-select: none; letter-spacing: -4px;
}

/* ── Floating elements container ─────────────────────── */
.lf-floats {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}

/* ── Hero content body ───────────────────────────────── */
.lf-hero-body {
  position: relative; z-index: 5;
  text-align: center; max-width: 760px; padding: 0 40px;
}

/* ── Eyebrow ─────────────────────────────────────────── */
.lf-eyebrow {
  display: inline-flex; align-items: center; gap: 20px;
  font-size: 7.5px; font-weight: 500; letter-spacing: 4.5px;
  text-transform: uppercase; color: var(--lf-gold); opacity: .6; margin-bottom: 44px;
}
.lf-eyebrow::before, .lf-eyebrow::after {
  content: ''; display: block; width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 120, 64, .32));
}
.lf-eyebrow::after { transform: scaleX(-1); }

/* ── H1 ──────────────────────────────────────────────── */
.lf-hero-h1 {
  font-family: var(--lf-serif);
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 300; line-height: 1.1;
  letter-spacing: -2px; color: var(--lf-navy);
  margin-bottom: 32px;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
.lf-hero-h1 em { font-style: italic; color: var(--lf-gold); font-weight: 300; }

/* ── Gold rule ───────────────────────────────────────── */
.lf-hero-rule {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lf-gold), transparent);
  margin: 28px auto 24px;
}

/* ── Subheadline ─────────────────────────────────────── */
.lf-hero-sub {
  font-size: 13.5px; font-weight: 300; line-height: 2; color: var(--lf-mid);
  letter-spacing: .3px; margin-bottom: 44px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ── CTA buttons ─────────────────────────────────────── */
.lf-hero-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 60px; flex-wrap: wrap;
}

.lf-hero-btn-fill {
  display: inline-flex; align-items: center;
  padding: 15px 40px;
  background: var(--lf-navy); color: #fff;
  font-family: var(--lf-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
  transition: background .25s, letter-spacing .2s;
  position: relative; overflow: hidden;
}
.lf-hero-btn-fill::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--lf-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.lf-hero-btn-fill:hover { background: #1e1a18; letter-spacing: 2.8px; }
.lf-hero-btn-fill:hover::after { transform: scaleX(1); }

.lf-hero-btn-line {
  display: inline-flex; align-items: center;
  padding: 15px 36px;
  border: 1px solid rgba(154, 120, 64, .25); color: var(--lf-mid);
  font-family: var(--lf-sans); font-size: 10px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.lf-hero-btn-line:hover { color: var(--lf-navy); border-color: var(--lf-gold); background: rgba(154, 120, 64, .04); }

/* ── Section nav (scroll indicator) ─────────────────── */
.lf-section-nav {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--lf-muted); transition: color .2s; margin-top: 8px;
}
.lf-section-nav:hover { color: var(--lf-gold); }
.lf-section-nav-inner {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Courier New', monospace; font-size: 8px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
}
.lf-section-nav-label { color: var(--lf-gold); opacity: .5; }
.lf-section-nav-line {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 120, 64, .3), transparent);
}
.lf-section-nav-text { color: var(--lf-muted); font-size: 7px; }
.lf-section-nav-arrow { opacity: .4; animation: scrollPulse 2s ease-in-out infinite; }
.lf-section-nav:hover .lf-section-nav-arrow { opacity: .8; }

/* ── Right deco SVG ──────────────────────────────────── */
.lf-hero-deco {
  position: absolute; right: -1vw; top: 50%; transform: translateY(-50%);
  width: clamp(340px, 50vw, 640px);
  pointer-events: none; overflow: visible; z-index: 0;
}
.lf-deco-svg { width: 100%; height: auto; }

/* ── Left background SVG ─────────────────────────────── */
.lf-hero-left-bg {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: clamp(280px, 42vw, 520px); height: auto;
  pointer-events: none; z-index: 0; opacity: .85;
}