.hero { position: relative; padding: 5rem 0 4rem; overflow: hidden; color: #fff; background: linear-gradient(135deg, rgba(45,106,79,0.82), rgba(27,67,50,0.88)), url('/images/diamond-background.jpg') center/cover no-repeat; }
.hero .hero-content { text-align: center; position: relative; z-index: 1; }
.hero .hero-logo { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.hero .hero-logo img { height: 64px; filter: brightness(0) invert(1); }
.hero .hero-logo-text .main { font-size: 2rem; font-weight: 800; }
.hero .hero-logo-text .sub { font-size: 0.85rem; opacity: 0.95; }
.hero h1 { font-size: 2.1rem; margin-bottom: 0.9rem; text-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.hero p { font-size: 1.08rem; margin-bottom: 1.4rem; opacity: 0.98; text-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.cta-button { display: inline-block; background: linear-gradient(90deg, var(--green), var(--green-2)); color: #fff; padding: 0.9rem 1.4rem; border-radius: 999px; text-decoration: none; font-weight: 700; box-shadow: 0 10px 30px rgba(45,106,79,0.3); transition: transform .2s, box-shadow .2s; }
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(45,106,79,0.35); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; margin-top: 2rem; }
.stat-item { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 1rem; backdrop-filter: blur(6px); }
.figure-number { font-size: 1.6rem; font-weight: 900; }
.stat-label { font-size: 0.9rem; opacity: .9; }
/* BG particles */
.hero-particles { position: absolute; inset: 0; overflow: hidden; }
.hero-particles .particle { position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,0.35); border-radius: 999px; filter: blur(1px); animation: float 12s infinite ease-in-out; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-30px) } }

/* Mobile adjustments */

@media (max-width: 640px) {
	.hero { padding: 3.5rem 0 2.5rem; }
	.hero .hero-logo img { height: 48px; }
	.hero .hero-logo-text .main { font-size: 1.5rem; }
	.hero h1 { font-size: 1.55rem; }
	.hero p { font-size: 0.98rem; }
	.hero-stats { grid-template-columns: 1fr; gap: 0.75rem; }
}