/*
 * SimScheduler Marketing Site — Custom Styles
 *
 * Typography and brand colors align with the simscheduler app theme:
 *   Font:          'Helvetica Neue', Helvetica, Inter, sans-serif
 *   Brand green:   #15803d  (--brand-primary in the app)
 *   Brand hover:   #166534  (10% darker via brightness filter, matching app)
 *   Accent green:  #22c55e  (lighter callout / icon tint)
 */

:root {
  --brand-primary:       #15803d;
  --brand-primary-hover: #166534;
  --brand-primary-glow:  rgba(21, 128, 61, 0.35);
  --brand-accent:        #22c55e;
  --brand-accent-subtle: rgba(21, 128, 61, 0.12);
  --brand-accent-border: rgba(21, 128, 61, 0.28);
}

html { scroll-behavior: smooth; }

body {
  background-color: #ffffff;
  color: #64748b;
  font-family: 'Helvetica Neue', Helvetica, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn-primary {
  background-color: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0.375rem;
  border: 1px solid var(--brand-primary);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 20px var(--brand-primary-glow);
}

.btn-primary:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--brand-primary-glow);
}

/* ─── Status / indicator colors ──────────────────────────────────────── */

.check-green { color: var(--brand-accent); }
.cross-red   { color: #f87171; }
.warn-yellow { color: #fbbf24; }

/* ─── Animations ─────────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease both; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* ─── Value prop cards ───────────────────────────────────────────────── */

.value-prop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.value-prop-card .vp-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.value-prop-card .vp-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.value-prop-card .vp-desc {
  font-size: 14px;
  color: #64748b;
}

/* ─── Pricing card ──────────────────────────────────────────────────── */

.pricing-card {
  padding: 40px 32px;
  border: 2px solid #bbf7d0;
  border-radius: 16px;
  background: #f8fafc;
}

/* ─── Feature cards ──────────────────────────────────────────────────── */

.feature-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  border-color: #bbf7d0;
  box-shadow: 0 8px 24px rgba(21, 128, 61, 0.08);
}

.feature-card-img {
  background: #f8fafc;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e2e8f0;
  overflow: hidden;
}

.feature-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.feature-card-body {
  padding: 20px;
}

.feature-card-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.feature-card-body p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}