.hero {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; background: var(--light-bg); overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(214,64,64,0.07) 1px, transparent 0);
  background-size: 48px 48px; z-index: 1;
}
.hero::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 42%;
  background: var(--white); z-index: 0;
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.hero-hex-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hex-dec { position: absolute; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.hex-dec-1 { width: 260px; height: 292px; right: 6%; top: 15%; background: rgba(214,64,64,0.06); border: 1px solid rgba(214,64,64,0.15); animation: hexFloat 8s ease-in-out infinite; }
.hex-dec-2 { width: 160px; height: 180px; right: 20%; top: 8%; background: rgba(214,64,64,0.04); border: 1px solid rgba(214,64,64,0.1); animation: hexFloat 10s ease-in-out infinite reverse; }
.hex-dec-3 { width: 90px; height: 101px; right: 35%; bottom: 22%; background: rgba(214,64,64,0.08); animation: hexFloat 12s ease-in-out infinite; }
@keyframes hexFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.hero-content {
  position: relative; z-index: 3;
  padding: 120px 40px 80px;
  margin-left: max(40px, calc((100vw - 1280px) / 2 + 40px));
  max-width: 620px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 24px;
}
.hero-tag::before { content: ''; width: 32px; height: 2px; background: var(--teal); }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; color: var(--navy); line-height: 1.05; margin-bottom: 24px; }
.hero-title-accent { color: var(--teal); font-style: italic; font-family: Georgia, serif; }
.hero-subtitle { font-size: 16px; line-height: 1.7; color: var(--text-mid); max-width: 480px; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 40px; margin-bottom: 44px; flex-wrap: wrap; }
.hero-stat { display: flex; align-items: center; gap: 16px; }
.stat-hex { width: 52px; height: 58px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(214,64,64,0.1); border: 1px solid var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon { font-size: 18px; }
.stat-number { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--teal); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-light); font-weight: 500; letter-spacing: 0.5px; margin-top: 4px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.scroll-dots { position: fixed; right: 32px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 12px; }
.scroll-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(26,26,26,0.25); background: transparent; cursor: pointer; transition: all 0.3s ease; padding: 0; }
.scroll-dot.active, .scroll-dot:hover { background: var(--teal); border-color: var(--teal); transform: scale(1.2); }
@media (max-width: 768px) { .hero-content { padding: 100px 24px 60px; margin-left: 0; } .hero::after { display: none; } .scroll-dots { display: none; } }