/* ========================================
   Homepage Hero
   ======================================== */

.home-hero {
  position: relative;
  padding: calc(var(--nav-height) + 120px) 64px 120px;
  text-align: center;
  overflow: hidden;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.2) brightness(0.3);
}

.home-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow);
}

.home-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.home-hero h1 {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -3px;
  margin-bottom: 28px;
}

.home-hero p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 48px;
}

.home-hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* ========================================
   Philosophy Split (uses global .split, .split-content, .split-photo)
   ======================================== */

.philosophy .split-photo img {
  filter: saturate(0.25);
}

/* ========================================
   Value Props
   ======================================== */

.value-props {
  padding: var(--section-padding);
}

.value-props-header {
  text-align: center;
  margin-bottom: 64px;
}

.value-props-header h2 {
  margin-bottom: 16px;
}

.value-props-header p {
  font-size: 18px;
  color: var(--text-secondary);
}

.value-props-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ========================================
   Brand Showcase
   ======================================== */

.brand-showcase {
  padding: var(--section-padding);
  border-top: 1px solid var(--border);
}

.brand-showcase-header {
  text-align: center;
  margin-bottom: 56px;
}

.brand-showcase-header .label {
  margin-bottom: 12px;
}

.brand-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.brand-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 28px;
  text-align: center;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.brand-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
}

.brand-card h3 {
  margin-bottom: 8px;
}

.brand-card p {
  font-size: 14px;
  color: var(--text-muted);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1199px) {
  .home-hero { padding: calc(var(--nav-height) + 80px) 40px 80px; }
  .home-hero h1 { font-size: 52px; letter-spacing: -2px; }
  .value-props-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .home-hero { padding: calc(var(--nav-height) + 56px) 24px 56px; }
  .home-hero h1 { font-size: 36px; letter-spacing: -1px; }
  .home-hero p { font-size: 16px; }
  .home-hero-buttons { flex-direction: column; }
  .value-props-grid { grid-template-columns: 1fr; }
  .brand-showcase-grid { grid-template-columns: 1fr; }
}