/* Site Theme: tuin-veranda-pergola.nl — "Tropical modern" */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --theme-bg: #FFFFFF;
  --theme-bg-alt: #F0FDF4;
  --theme-text: #1C1C1C;
  --theme-text-light: #4B5563;
  --theme-heading: #064E3B;
  --theme-accent: #65A30D;
  --theme-accent-hover: #4D7C0F;
  --theme-accent-light: #ECFCCB;
  --theme-coral: #F97316;
  --theme-coral-hover: #EA580C;
  --theme-coral-light: #FFEDD5;
  --theme-card-bg: #FFFFFF;
  --theme-card-border: #D1FAE5;
  --theme-font-heading: 'Montserrat', -apple-system, sans-serif;
  --theme-font-body: 'Montserrat', -apple-system, sans-serif;
  --theme-radius: 1rem;
  --theme-radius-lg: 1.5rem;
  --theme-shadow: 0 2px 8px rgba(6, 78, 59, 0.06);
  --theme-shadow-hover: 0 8px 28px rgba(6, 78, 59, 0.12);
  --theme-transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: var(--theme-font-body);
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-weight: 500;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--theme-font-heading);
  color: var(--theme-heading);
  font-weight: 700;
  line-height: 1.15;
}

/* Hero — tropical gradient bold */
.hero-section {
  background: linear-gradient(135deg, #064E3B 0%, #065F46 40%, #047857 70%, #10B981 100%);
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem;
  color: #fff;
}

/* Tropical leaf shapes */
.hero-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -30px;
  width: 280px;
  height: 280px;
  background: rgba(249, 115, 22, 0.12);
  border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%;
  animation: tropicalMorph 10s ease-in-out infinite;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 5%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 70% 30% 40% 60% / 30% 70% 50% 50%;
  animation: tropicalMorph 8s ease-in-out infinite reverse;
}

@keyframes tropicalMorph {
  0%, 100% { border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%; transform: rotate(0deg); }
  25% { border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; }
  50% { border-radius: 60% 40% 50% 50% / 60% 40% 40% 60%; transform: rotate(5deg); }
  75% { border-radius: 40% 60% 70% 30% / 50% 50% 30% 70%; }
}

.hero-section h1 {
  color: #fff;
  font-size: 2.75rem;
  font-weight: 800;
}

/* Plant growth animation on scroll */
@keyframes growUp {
  0% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}

.card {
  animation: growUp 0.5s ease-out backwards;
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }

/* Cards — fresh tropical */
.card,
.bg-white.rounded-lg,
[class*="shadow"] {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-card-border);
  border-radius: var(--theme-radius-lg);
  box-shadow: var(--theme-shadow);
  transition: all var(--theme-transition);
}

.card:hover,
.bg-white.rounded-lg:hover {
  box-shadow: var(--theme-shadow-hover);
  transform: translateY(-5px) scale(1.01);
  border-color: var(--theme-coral-light);
}

/* Sections */
section:nth-child(even) {
  background-color: var(--theme-bg-alt);
}

/* Buttons — coral vibrant */
.btn-primary,
button[type="submit"],
.cta-button {
  background-color: var(--theme-coral) !important;
  color: #fff !important;
  border: none;
  border-radius: 3rem;
  font-weight: 700;
  padding: 0.875rem 2rem;
  transition: all var(--theme-transition);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.btn-primary:hover,
button[type="submit"]:hover,
.cta-button:hover {
  background-color: var(--theme-coral-hover) !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35);
}

/* Coral accent badges */
.badge, .tag {
  background-color: var(--theme-coral-light);
  color: var(--theme-coral-hover);
  border-radius: 2rem;
  font-weight: 700;
}

/* Stat numbers */
.stat-number,
.text-3xl.font-bold,
.text-4xl.font-bold {
  color: var(--theme-coral);
  font-weight: 800;
}

/* Links */
a:not(.btn-primary):not([class*="bg-"]) {
  color: var(--theme-accent);
  font-weight: 600;
  transition: color var(--theme-transition);
}

a:not(.btn-primary):not([class*="bg-"]):hover {
  color: var(--theme-coral);
}

/* Form inputs */
input, select, textarea {
  border: 2px solid var(--theme-card-border);
  border-radius: var(--theme-radius);
  transition: all var(--theme-transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--theme-coral);
  box-shadow: 0 0 0 3px var(--theme-coral-light);
  outline: none;
}

/* Dividers */
hr {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, var(--theme-accent-light), var(--theme-coral-light), var(--theme-accent-light));
  margin: 2rem 0;
  border-radius: 2px;
}

/* Footer */
footer {
  background-color: var(--theme-heading) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hero-section { padding: 3rem 1rem; }
  .hero-section h1 { font-size: 2rem; }
  .card:hover { transform: translateY(-2px); }
}

@media (min-width: 1024px) {
  .hero-section { padding: 6rem 2rem; }
  .hero-section h1 { font-size: 3.5rem; }
}


/* === Nav & Template Color Harmonization === */
nav a[href="#devis-form"] {
  background-color: var(--theme-accent) !important;
  color: #fff !important;
  border-color: var(--theme-accent) !important;
}
nav a[href="#devis-form"]:hover {
  background-color: var(--theme-accent-hover) !important;
  border-color: var(--theme-accent-hover) !important;
}