.landing-page {
  --color-ink: #1a1915;
  --color-paper: #ffffff;
  --color-muted: #64748b;
  --color-subtle: #f1f5f9;
  --color-border: #cbd5e1;

  /* monday.com inspired palette */
  --color-grass: #00c875;
  --color-sky: #579bfc;
  --color-sunset: #ff9f43;
  --color-berry: #e44258;
  --color-purple: #2563eb;
  --color-ocean: #0086c0;

  /* Softer backgrounds */
  --color-grass-soft: #dcfce7;
  --color-sky-soft: #dbeafe;
  --color-sunset-soft: #ffedd5;
  --color-berry-soft: #ffe4e6;
  --color-purple-soft: #dbeafe;

  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--color-paper);
  color: var(--color-ink);
}

.dark .landing-page {
  --color-ink: #f5f5f4;
  --color-paper: #0f0f0f;
  --color-muted: #a1a1aa;
  --color-subtle: #18181b;
  --color-border: #27272a;
  --color-grass-soft: rgba(0, 200, 117, 0.2);
  --color-sky-soft: rgba(87, 155, 252, 0.2);
  --color-sunset-soft: rgba(255, 159, 67, 0.2);
  --color-berry-soft: rgba(228, 66, 88, 0.2);
  --color-purple-soft: rgba(37, 99, 235, 0.2);
}

.landing-page .font-display {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
}

.landing-page .text-balance { text-wrap: balance; }

/* Status pill like monday */
.landing-page .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

/* Dashboard preview card */
.landing-page .dashboard-preview {
  background: linear-gradient(165deg, var(--color-paper) 0%, var(--color-subtle) 100%);
  box-shadow:
    0 25px 50px -12px rgba(87, 155, 252, 0.25),
    0 0 0 1px rgba(87, 155, 252, 0.1),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.dark .landing-page .dashboard-preview {
  background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    0 25px 50px -12px rgba(87, 155, 252, 0.3),
    0 0 0 1px rgba(87, 155, 252, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Colored left border cards */
.landing-page .card-accent {
  border-left: 5px solid;
  background: linear-gradient(135deg, var(--color-paper) 0%, var(--color-subtle) 100%);
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow:
    0 10px 40px -10px var(--accent-shadow, rgba(0,0,0,0.2)),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.landing-page .card-accent[style*="berry"] { --accent-shadow: rgba(228, 66, 88, 0.3); }
.landing-page .card-accent[style*="sunset"] { --accent-shadow: rgba(255, 159, 67, 0.3); }
.landing-page .card-accent[style*="purple"] { --accent-shadow: rgba(37, 99, 235, 0.3); }
.dark .landing-page .card-accent {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    0 10px 40px -10px var(--accent-shadow, rgba(0,0,0,0.4)),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.landing-page .card-accent:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 50px -10px var(--accent-shadow, rgba(0,0,0,0.3)),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.dark .landing-page .card-accent:hover {
  box-shadow:
    0 20px 50px -10px var(--accent-shadow, rgba(0,0,0,0.5)),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Step numbers monday style */
.landing-page .step-number {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
}

/* Progress bar */
.landing-page .progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
}
.dark .landing-page .progress-bar {
  background: #3f3f46;
}
.landing-page .progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease-out;
}

/* Animated entrance */
.landing-page .fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: landingFadeUp 0.8s ease forwards;
}
.landing-page .fade-up:nth-child(1) { animation-delay: 0.1s; }
.landing-page .fade-up:nth-child(2) { animation-delay: 0.2s; }
.landing-page .fade-up:nth-child(3) { animation-delay: 0.3s; }
.landing-page .fade-up:nth-child(4) { animation-delay: 0.4s; }
.landing-page .fade-up:nth-child(5) { animation-delay: 0.5s; }

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

/* Kanban-style columns */
.landing-page .kanban-col {
  border-radius: 12px;
  padding: 20px;
}

/* Avatar stack */
.landing-page .avatar-stack {
  display: flex;
}
.landing-page .avatar-stack > * {
  margin-left: -8px;
  border: 2px solid var(--color-paper);
  border-radius: 50%;
}
.landing-page .avatar-stack > *:first-child {
  margin-left: 0;
}

/* Checkbox style */
.landing-page .check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.landing-page .check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Grain texture */
.landing-page .grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
}

/* Color bar animation */
.landing-page .color-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--color-grass), var(--color-sky), var(--color-purple), var(--color-sunset), var(--color-berry));
  background-size: 200% 100%;
  animation: landingColorSlide 8s ease infinite;
}
@keyframes landingColorSlide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Stat card */
.landing-page .stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-paper) 0%, var(--color-subtle) 100%);
  border: none;
  box-shadow:
    0 8px 30px -6px rgba(87, 155, 252, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dark .landing-page .stat-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    0 8px 30px -6px rgba(87, 155, 252, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.landing-page .stat-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px -8px rgba(87, 155, 252, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.dark .landing-page .stat-card:hover {
  box-shadow:
    0 16px 40px -8px rgba(87, 155, 252, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.landing-page .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-grass), var(--color-sky), var(--color-purple));
}

/* Step card */
.landing-page .step-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-paper) 0%, var(--color-subtle) 50%);
  border: none;
  box-shadow:
    0 8px 30px -6px rgba(0, 200, 117, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: all 0.3s ease;
}
.dark .landing-page .step-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  box-shadow:
    0 8px 30px -6px rgba(0, 200, 117, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.landing-page .step-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 50px -12px rgba(0, 200, 117, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.95);
}
.dark .landing-page .step-card:hover {
  box-shadow:
    0 20px 50px -12px rgba(0, 200, 117, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.landing-page .step-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-grass), var(--color-sky));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.landing-page .step-card:hover::after {
  opacity: 1;
}

/* Testimonial card */
.landing-page .testimonial-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-paper) 0%, var(--color-subtle) 100%);
  border: none;
  box-shadow:
    0 10px 40px -8px rgba(255, 159, 67, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: all 0.3s ease;
}
.dark .landing-page .testimonial-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    0 10px 40px -8px rgba(255, 159, 67, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.landing-page .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 50px -10px rgba(255, 159, 67, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.95);
}
.landing-page .testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-sunset), var(--color-berry));
}