/* apps/site/styles.css — маркетинг-лендинг CleanFlow. Дизайн-токены (как в приложении) +
   стили лендинга. Цвета только через var(--cf-*). Светлая тема по умолчанию (маркетинг). */

:root {
  --cf-bg: #f6f7f9;
  --cf-surface: #ffffff;
  --cf-surface-2: #f0f2f5;
  --cf-border: #e3e6ea;
  --cf-text: #1a1d21;
  --cf-text-muted: #6b7280;
  --cf-primary: #2563eb;
  --cf-primary-hover: #1d4ed8;
  --cf-primary-fg: #ffffff;
  --cf-success: #10b981;
  --cf-radius: 10px;
  --cf-radius-lg: 16px;
  --cf-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --cf-shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.12);
  --cf-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cf-maxw: 1080px;
}

/* Юридические страницы (политика конфиденциальности и т.п.) */
.legal { max-width: 760px; }
.legal h1 { font-size: 28px; margin: 0 0 8px; }
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--cf-text); }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--cf-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cf-primary); text-decoration: none; }
.wrap { max-width: var(--cf-maxw); margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: var(--cf-radius); font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-size: 15px;
}
.btn-primary { background: var(--cf-primary); color: var(--cf-primary-fg); }
.btn-primary:hover { background: var(--cf-primary-hover); text-decoration: none; }
.btn-ghost { color: var(--cf-text); border-color: var(--cf-border); background: var(--cf-surface); }
.btn-ghost:hover { background: var(--cf-surface-2); text-decoration: none; }

/* Header */
.site-header { border-bottom: 1px solid var(--cf-border); background: var(--cf-surface); position: sticky; top: 0; z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-weight: 800; font-size: 20px; color: var(--cf-primary); }
.nav-actions { display: flex; gap: 12px; align-items: center; }

/* Hero */
.hero { padding: 80px 0 64px; text-align: center; }
.hero h1 { font-size: 44px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero p.lead { font-size: 19px; color: var(--cf-text-muted); max-width: 640px; margin: 0 auto 28px; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .trial-note { margin-top: 12px; color: var(--cf-text-muted); font-size: 14px; }

/* Sections */
section { padding: 56px 0; }
.section-title { font-size: 30px; text-align: center; margin: 0 0 8px; letter-spacing: -0.01em; }
.section-sub { text-align: center; color: var(--cf-text-muted); margin: 0 0 40px; }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg); padding: 24px; box-shadow: var(--cf-shadow);
}
.feature h3 { margin: 0 0 8px; font-size: 18px; }
.feature p { margin: 0; color: var(--cf-text-muted); font-size: 15px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.plan.featured { border-color: var(--cf-primary); box-shadow: var(--cf-shadow-lg); position: relative; }
.plan .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--cf-primary); color: var(--cf-primary-fg);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.plan .plan-name { font-size: 18px; font-weight: 700; }
.plan .price { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--cf-text-muted); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan li { padding-left: 26px; position: relative; color: var(--cf-text); font-size: 15px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--cf-success); font-weight: 700; }

/* Footer */
.site-footer { border-top: 1px solid var(--cf-border); background: var(--cf-surface); padding: 40px 0; color: var(--cf-text-muted); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .features, .plans { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
}