/*
  Colors are copied from Frontend/src/styles/theme.css's light theme so this
  site matches the Compilo web app. If that palette changes, update here too
  — there's no shared source between the two repos.
*/
:root {
  --color-primary: #1b7a62;
  --color-primary-dark: #145f4c;
  --color-secondary: #113465;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-on-primary: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--color-text);
  /* Solid fallback only -- the actual background visual is .bg-decor,
     a fixed layer behind all page content (see below). */
  background: var(--color-background);
  line-height: 1.5;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* Background */

/*
  One shared background for the whole page, instead of each section
  painting its own block. `position: fixed` keeps it filling the viewport
  as you scroll (rather than only covering the page's first screenful),
  so it stays visible behind every section, not just the hero. It's the
  first element in <body>, so it paints before -- i.e. behind -- every
  later sibling with no z-index needed.
*/
.bg-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-decor__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.bg-decor__blob--teal {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -140px;
  background: var(--color-primary);
  opacity: 0.2;
}

.bg-decor__blob--navy {
  width: 380px;
  height: 380px;
  top: -80px;
  right: -140px;
  background: var(--color-secondary);
  opacity: 0.15;
}

.bg-decor__blob--amber {
  width: 320px;
  height: 320px;
  top: 40%;
  left: 55%;
  background: #f0a531;
  opacity: 0.14;
}

.bg-decor__blob--teal-soft {
  width: 360px;
  height: 360px;
  bottom: -160px;
  left: 8%;
  background: var(--color-primary);
  opacity: 0.14;
}

.bg-decor__blob--navy-soft {
  width: 300px;
  height: 300px;
  bottom: -120px;
  right: 6%;
  background: var(--color-secondary);
  opacity: 0.12;
}

/* Header */

.site-header {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}

.brand__logo {
  width: 32px;
  height: 32px;
}

.brand__name {
  font-weight: 700;
  font-size: 1.25rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a:not(.button) {
  color: var(--color-text-muted);
  font-weight: 500;
}

.site-nav a:not(.button):hover {
  color: var(--color-text);
}

/* Buttons */

.button {
  display: inline-block;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
}

.button--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.button--primary:hover {
  background: var(--color-primary-dark);
}

.button--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.button--secondary:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.button--small {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.button--large {
  padding: 14px 28px;
  font-size: 1.05rem;
}

/* Hero */

.hero {
  padding-block: 96px 72px;
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.hero__content {
  flex: 1 1 480px;
  min-width: 0;
  max-width: 560px;
}

.hero__visual {
  flex: 1 1 360px;
  min-width: 0;
}

.hero__visual img {
  width: 100%;
  height: auto;
  display: block;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  margin: 0 0 20px;
  color: var(--color-secondary);
}

.hero__subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin: 0 0 32px;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__cta-note {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Sections */

.section-title {
  font-size: 1.75rem;
  color: var(--color-secondary);
  margin: 0 0 40px;
  text-align: center;
}

.features {
  padding-block: 72px;
  background: transparent;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
}

.feature-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(27, 122, 98, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-card__icon {
  width: 26px;
  height: 26px;
}

.feature-card h3 {
  margin: 0 0 8px;
  color: var(--color-secondary);
}

.feature-card p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Marks a feature that only the Professional plan includes. */
.plan-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(27, 122, 98, 0.1);
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Showcase (real product screenshot) */

.showcase {
  padding-block: 24px 80px;
}

.showcase__inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

.section-title--left {
  text-align: left;
  margin-bottom: 16px;
}

.showcase__text {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 360px;
}

.showcase__text p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.showcase__note {
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 600;
}

.showcase__image {
  flex: 1 1 640px;
  min-width: 0;
}

.showcase__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.25);
}

.pricing {
  padding-block: 72px;
  background: transparent;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  background: var(--color-background);
}

.pricing-card--muted {
  opacity: 0.7;
}

.pricing-card h3 {
  margin: 0 0 8px;
  color: var(--color-secondary);
}

.pricing-card__price {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 12px;
}

.pricing-card p:not(.pricing-card__price) {
  color: var(--color-text-muted);
  min-height: 48px;
}

.pricing-card p.pricing-card__lead {
  min-height: 0;
  margin-bottom: 8px;
}

.pricing-card__features {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.pricing-card__features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}

.pricing-card__features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.pricing-card .button {
  margin-top: 12px;
}

.pricing__compare-link {
  text-align: center;
  margin: 40px 0 0;
}

.pricing__compare-link a {
  font-weight: 600;
}

/* Compare plans page */

.page-header {
  padding-block: 64px 24px;
  text-align: center;
}

.page-header h1 {
  font-size: 2.25rem;
  color: var(--color-secondary);
  margin: 0 0 16px;
}

.page-header__subtitle {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.compare {
  padding-block: 24px 80px;
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.compare-table thead th {
  color: var(--color-secondary);
  font-size: 1.05rem;
  border-bottom: 2px solid var(--color-border);
}

.compare-table tbody th {
  color: var(--color-text);
  font-weight: 600;
  width: 28%;
}

.compare-table tbody td {
  color: var(--color-text-muted);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table__feature-col {
  width: 28%;
}

/* The three plan columns share the rest equally, whatever their content. */
.compare-table thead th:not(.compare-table__feature-col) {
  width: 24%;
}

.compare-table__highlight {
  background: rgba(27, 122, 98, 0.06);
  color: var(--color-text);
  font-weight: 500;
}

.compare-table thead .compare-table__highlight {
  background: rgba(27, 122, 98, 0.1);
}

.compare-table__cta-row td {
  padding-top: 20px;
  padding-bottom: 20px;
}

.compare-table__cta-row .button {
  white-space: nowrap;
}

.compare-footnote {
  margin: 16px 4px 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Footer */

.site-footer {
  padding-block: 32px;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Responsive */

@media (max-width: 800px) {
  .features__grid,
  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-block: 64px 48px;
  }

  .hero__inner {
    flex-direction: column-reverse;
    gap: 32px;
  }

  .hero__content {
    max-width: none;
  }

  .hero__visual {
    max-width: 320px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .showcase__inner {
    flex-direction: column;
  }

  .showcase__text {
    max-width: none;
  }

  .section-title--left {
    text-align: center;
  }
}