/* ================================================================
   Enhancements Layer (add-on)
   - Safe: does not change your core system
   - Adds: depth, micro-interactions, better focus, premium motion
   ================================================================ */

/* Optional: extra shadows */
:root {
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-glow-cta: 0 6px 20px rgba(217,119,6,0.1);
}

/* 1) Global: nicer focus states (accessibility + premium feel) */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 3px;
  border-radius: 10px;
}

/* 2) Hero: warm depth glow */
.hero {
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(217,119,6,0.06), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(194,65,12,0.04), transparent 60%);
  pointer-events: none;
  filter: blur(2px);
}

/* Hero title - solid warm white */
.hero-title {
  color: var(--text-primary);
}

/* 3) Section flow: subtle gradients between blocks */
.selected-work {
  background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
}
.industries {
  background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary));
}

/* 4) Premium headings: animated underline */
.section-header h2 {
  position: relative;
}
.section-header h2::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--blue-primary);
  transition: width 0.45s ease;
}
.section-header:hover h2::after {
  width: 72px;
}

/* 5) Buttons: clean hover */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  transform: translateY(-2px);
}

/* 6) Cards: subtle lift */
.work-card:hover,
.process-step:hover,
.industry-card:hover,
.why-card:hover,
.testimonial-quote:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* 7) Images */
.work-image img {
  transform: scale(1.001);
}
.work-card:hover .work-image img {
  transform: scale(1.05);
}

/* 8) Nav: nicer active state */
.nav-link[aria-current="page"],
.nav-link.active {
  color: var(--text-primary);
}

/* 9) Mobile: bigger tap targets + better menu */
@media (max-width: 768px) {
  .btn {
    min-height: 48px;
  }

  .nav-links.mobile-open {
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-subtle);
  }
}

/* 10) Optional: sticky mobile CTA bar */
@media (max-width: 768px) {
  .mobile-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-fab) - 1);
    padding: 0.9rem 1rem;
    background: rgba(26,21,18,0.9);
    border-top: 1px solid var(--border-subtle);
  }
}

/* ═══════════════════════════════════════════════════════
   CONVERSION OPTIMIZATION STYLES
   ═══════════════════════════════════════════════════════ */

/* HERO: make conversion elements pop */
.hero-tagline {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.hero-mini-form {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: center;
  max-width: 760px;
}

.hero-mini-form input {
  padding: 0.9rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.hero-mini-form input:focus {
  outline: 2px solid rgba(217, 119, 6, 0.4);
  outline-offset: 2px;
  border-color: var(--accent);
}

.hero-mini-form small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .hero-mini-form {
    grid-template-columns: 1fr;
  }
}

/* RISK REVERSAL */
.risk-reversal {
  padding: 3rem 0;
  background: var(--bg-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.risk-card {
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.risk-card:hover {
  transform: translateY(-4px);
  border-left-color: var(--blue-primary);
  box-shadow: var(--shadow-md);
}

.risk-card i {
  color: var(--accent);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  display: block;
}

.risk-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.risk-card p {
  color: var(--text-muted);
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .risk-grid {
    grid-template-columns: 1fr;
  }

  .risk-reversal {
    padding: 2rem 0;
  }
}

/* 11) Respect reduced motion users */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   Additional Improvements
   ================================================================ */

/* Pricing Cards */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Featured pricing */
.pricing-card.featured {
  transform: scale(1.02);
  border: 2px solid var(--accent);
}

/* Portfolio Grid Animation */
.portfolio-grid > * {
  opacity: 0;
  transform: translateY(20px);
  animation: portfolioReveal 0.6s ease forwards;
}

.portfolio-grid > *:nth-child(1) { animation-delay: 0.1s; }
.portfolio-grid > *:nth-child(2) { animation-delay: 0.2s; }
.portfolio-grid > *:nth-child(3) { animation-delay: 0.3s; }
.portfolio-grid > *:nth-child(4) { animation-delay: 0.4s; }
.portfolio-grid > *:nth-child(5) { animation-delay: 0.5s; }
.portfolio-grid > *:nth-child(6) { animation-delay: 0.6s; }

@keyframes portfolioReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stat Numbers */
.stat {
  transition: transform 0.3s ease;
}

.stat:hover {
  transform: translateY(-3px);
}

/* Contact Form */
.contact-form {
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
}

.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(217,119,6,0.15);
}

/* Card hover consistency */
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.guarantee-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}