/* Hero */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 60%, rgba(212,0,26,.35) 100%),
    url('https://images.unsplash.com/photo-1558981403-c5f9899a28bc?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
  z-index: 0;
}
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 100px, rgba(255,255,255,.02) 100px 101px),
    repeating-linear-gradient(0deg, transparent 0 100px, rgba(255,255,255,.02) 100px 101px);
}
.hero__bg::after {
  content: '';
  position: absolute;
  right: -10%;
  bottom: -20%;
  width: 80%;
  height: 120%;
  background: radial-gradient(circle at center, rgba(212,0,26,.4), transparent 50%);
  filter: blur(80px);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 60px 0;
}
.hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 14px;
  color: var(--color-accent);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow::before {
  content: '';
  width: 60px; height: 2px;
  background: var(--color-accent);
}

.hero__title {
  border-left: 4px solid var(--color-accent);
  padding-left: 28px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 110px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -2px;
  margin-bottom: 24px;
  color: #fff;
}
.hero__title .accent { color: var(--color-accent); }

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin-bottom: 40px;
  padding-left: 32px;
}

.hero__actions { display: flex; gap: 16px; padding-left: 32px; flex-wrap: wrap; }

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 3;
}
.scroll-indicator__chevron {
  width: 22px; height: 22px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
  50% { transform: rotate(45deg) translate(8px, 8px); opacity: .4; }
}

/* CTA Banner */
.cta-banner {
  position: relative;
  padding: 80px 0;
  background:
    linear-gradient(135deg, rgba(140,0,16,.85), rgba(212,0,26,.85)),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(0,0,0,.1) 20px 40px);
  text-align: center;
  overflow: hidden;
  z-index: 2;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.cta-banner__sub { color: rgba(255,255,255,.85); font-size: 18px; margin-bottom: 32px; }
.cta-banner__actions { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Page header */
.page-header {
  padding: 80px 0 60px;
  position: relative;
  background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
  border-bottom: 1px solid var(--color-border);
  z-index: 2;
}
.page-header h1 { margin-bottom: 12px; }
.page-header p { color: var(--color-text-secondary); font-size: 18px; max-width: 640px; }
.page-header__title-bar {
  border-left: 4px solid var(--color-accent);
  padding-left: 24px;
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--color-accent); }
.breadcrumb span { margin: 0 10px; }