/* ===== Rock On Consulting — Premium Stylesheet ===== */

/* ---------- CSS Variables ---------- */
:root {
  --rock-red: #DC2626;
  --rock-red-dark: #B91C1C;
  --rock-red-light: #FEE2E2;
  --rock-red-glow: rgba(220, 38, 38, 0.45);
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50: #F9FAFB;
  --white: #FFFFFF;
}

/* ---------- Base ---------- */
body {
  font-family: 'Inter', sans-serif;
}

/* ---------- Header / Logo ---------- */
.header-logo {
  height: 64px;
  overflow: hidden;
  display: block;
}
.header-logo img {
  object-fit: cover;
  margin-top: -20%;
  margin-bottom: -20%;
  height: 140%;
}

/* ---------- Hero ---------- */
.hero-bg {
  background-color: var(--gray-900);
  background-image:
    linear-gradient(135deg, rgba(17,24,39,.88) 0%, rgba(127,29,29,.7) 50%, rgba(17,24,39,.92) 100%),
    url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=2073&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(220,38,38,.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(220,38,38,.10) 0%, transparent 50%);
  pointer-events: none;
}

/* ---------- CTA Button ---------- */
.cta-button {
  transition: all .3s ease;
  position: relative;
}
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px var(--rock-red-glow);
}
.cta-button-outline {
  transition: all .3s ease;
}
.cta-button-outline:hover {
  background: var(--rock-red);
  color: var(--white);
  border-color: var(--rock-red);
}

/* ---------- Cards ---------- */
.service-card, .team-card, .testimonial-card {
  transition: all .35s cubic-bezier(.25,.46,.45,.94);
  border: 1px solid var(--gray-200);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--rock-red);
  transform: scaleY(0);
  transition: transform .35s ease;
}
.service-card:hover::before { transform: scaleY(1); }
.service-card:hover, .team-card:hover, .testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.12);
  border-color: var(--rock-red);
}

/* Testimonial quote mark */
.testimonial-card::after {
  content: '\201C';
  position: absolute;
  top: 10px; right: 20px;
  font-size: 5rem;
  line-height: 1;
  color: rgba(220,38,38,.08);
  font-family: Georgia, serif;
  pointer-events: none;
}

/* ---------- Stats Bar ---------- */
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.stat-label {
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  margin-top: .25rem;
}

/* ---------- Scroll Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Active Nav ---------- */
.nav-link {
  position: relative;
  transition: color .3s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--rock-red);
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active { color: var(--rock-red); }

/* ---------- Icon circle gradient ---------- */
.icon-circle {
  background: linear-gradient(135deg, var(--rock-red-light) 0%, rgba(254,202,202,.4) 100%);
}

/* ---------- Footer ---------- */
.footer-link {
  transition: color .2s ease;
}
.footer-link:hover {
  color: var(--white);
}

/* ---------- Mobile menu animation ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 500px;
  opacity: 1;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
  .stat-number { font-size: 1.75rem; }
}