/* HomeFlow marketing — estilo zen-hub (Lovable) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --radius: 0.625rem;
  --background: oklch(97% 0.012 80);
  --foreground: oklch(22% 0.04 150);
  --card: oklch(99% 0.006 80);
  --muted-foreground: oklch(45% 0.03 140);
  --primary: oklch(52% 0.08 155);
  --primary-foreground: oklch(98% 0.01 80);
  --secondary: oklch(93% 0.02 80);
  --accent: oklch(82% 0.09 60);
  --accent-foreground: oklch(25% 0.06 60);
  --border: oklch(89% 0.015 80);
  --ring: oklch(52% 0.08 155);
  --shadow-elegant: 0 20px 60px -20px oklch(30% 0.05 150 / 0.18);
  --shadow-card: 0 10px 40px -15px oklch(30% 0.05 150 / 0.12);
  --max: 80rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.mkt-zen {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

.mkt-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

/* Header */
.mkt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.mkt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  gap: 1rem;
}

.mkt-logo img { height: 2.75rem; width: auto; }

.mkt-nav {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.mkt-nav a:hover { color: var(--foreground); }

.mkt-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mkt-link-muted {
  display: none;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.mkt-link-muted:hover { color: var(--foreground); }

.mkt-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
}

.mkt-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}

.mkt-mobile-nav.open { display: flex; }

.mkt-mobile-nav a {
  padding: 0.75rem 0;
  color: var(--muted-foreground);
  font-size: 0.95rem;
}

/* Buttons */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.mkt-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.625rem 1.25rem;
  box-shadow: var(--shadow-elegant);
}

.mkt-btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, black); }

.mkt-btn-lg {
  padding: 0.75rem 1.75rem;
  font-size: 0.9375rem;
}

.mkt-btn-outline {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  padding: 0.75rem 1.75rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.mkt-btn-outline:hover { background: var(--secondary); }

.mkt-btn-light {
  background: var(--background);
  color: var(--foreground);
  padding: 0.75rem 2rem;
  box-shadow: var(--shadow-elegant);
}

.mkt-btn-light:hover { background: color-mix(in oklab, var(--background) 92%, black); }

/* Hero */
.mkt-hero {
  padding: 5rem 0 6rem;
}

.mkt-hero-grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.mkt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.mkt-hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
}

.mkt-hero-lead {
  margin: 2rem 0 0;
  font-size: 1.125rem;
  color: var(--muted-foreground);
  max-width: 36rem;
  line-height: 1.7;
}

.mkt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.mkt-hero-visual {
  position: relative;
  animation: mkt-float 6s ease-in-out infinite;
}

.mkt-hero-visual img {
  border-radius: 1.5rem;
  box-shadow: var(--shadow-elegant);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.mkt-float-card {
  position: absolute;
  top: 33%;
  left: -1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 14rem;
}

.mkt-float-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-foreground);
}

.mkt-float-card strong { display: block; font-size: 0.875rem; }
.mkt-float-card span { font-size: 0.75rem; color: var(--muted-foreground); }

/* Stats */
.mkt-stats {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--secondary) 40%, transparent);
  padding: 3rem 0;
}

.mkt-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.mkt-stat-value {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  color: var(--primary);
}

.mkt-stat-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* App showcase */
.mkt-app-showcase {
  padding: 5rem 0 6rem;
  background: color-mix(in oklab, var(--secondary) 35%, transparent);
  border-block: 1px solid var(--border);
}

.mkt-showcase-featured {
  margin: 0 auto 3rem;
  max-width: 22rem;
  padding: 0;
}

.mkt-showcase-featured img {
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
}

.mkt-showcase-phones {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mkt-showcase-phone {
  flex: 0 0 min(72vw, 16rem);
  scroll-snap-align: center;
  margin: 0;
  text-align: center;
}

.mkt-showcase-phone img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  background: var(--card);
}

.mkt-showcase-phone figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.mkt-showcase-cta {
  text-align: center;
  margin: 2.5rem 0 0;
}

/* Sections */
.mkt-section {
  padding: 7rem 0;
}

.mkt-section-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 5rem;
}

.mkt-section-head h2 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.15;
}

.mkt-section-head p {
  margin: 1.5rem 0 0;
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.mkt-features {
  display: grid;
  gap: 2rem;
}

.mkt-feature {
  padding: 2rem;
  border-radius: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s;
}

.mkt-feature:hover { transform: translateY(-4px); }

.mkt-feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.mkt-feature h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.mkt-feature p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin: 0 0 2rem;
}

.mkt-feature img {
  border-radius: 1rem;
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

/* How it works */
.mkt-how {
  background: color-mix(in oklab, var(--secondary) 50%, transparent);
}

.mkt-how-grid {
  display: grid;
  gap: 5rem;
  align-items: center;
}

.mkt-steps { margin-top: 3rem; }

.mkt-step {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.mkt-step-num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.mkt-step h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.mkt-step p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.7; margin: 0; }

.mkt-preview-panel {
  background: var(--card);
  border-radius: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mkt-preview-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--secondary) 50%, transparent);
}

.mkt-preview-row .icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mkt-preview-row .icon.primary { background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary); }
.mkt-preview-row .icon.accent { background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--accent-foreground); }
.mkt-preview-row .icon.muted { background: var(--secondary); color: var(--muted-foreground); }

.mkt-preview-row .body { flex: 1; min-width: 0; }
.mkt-preview-row strong { display: block; font-size: 0.9375rem; }
.mkt-preview-row span { font-size: 0.875rem; color: var(--muted-foreground); }
.mkt-preview-row .done { text-decoration: line-through; color: var(--muted-foreground); }

.mkt-chip {
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
}

/* Pricing / CTA */
.mkt-cta {
  padding: 3rem 0 7rem;
}

.mkt-cta-band {
  background: var(--primary);
  border-radius: 1.5rem;
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  color: var(--primary-foreground);
}

.mkt-cta-band h2 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.15;
  color: inherit;
}

.mkt-cta-band p {
  margin: 2rem auto 0;
  max-width: 42rem;
  font-size: 1.125rem;
  opacity: 0.85;
  line-height: 1.7;
}

.mkt-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.mkt-pricing-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Footer */
.mkt-footer {
  padding: 5rem 0 2.5rem;
}

.mkt-footer-grid {
  display: grid;
  gap: 2.5rem;
  font-size: 0.875rem;
}

.mkt-footer-grid h4 {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.mkt-footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mkt-footer-grid li { margin-bottom: 0.75rem; }

.mkt-footer-grid a {
  color: var(--muted-foreground);
  transition: color 0.15s;
}

.mkt-footer-grid a:hover { color: var(--foreground); }

.mkt-footer-tagline {
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-top: 1rem;
}

.mkt-newsletter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mkt-newsletter input {
  flex: 1;
  min-width: 10rem;
  padding: 0.625rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}

.mkt-newsletter input:focus {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent);
}

.mkt-footer-copy {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Install modal */
.mkt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mkt-modal-backdrop.open { display: flex; }

.mkt-modal {
  background: var(--card);
  border-radius: 1.25rem;
  padding: 1.75rem;
  max-width: 24rem;
  width: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  position: relative;
}

.mkt-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted-foreground);
  line-height: 1;
}

.mkt-modal h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.mkt-modal p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0 0 1rem;
  line-height: 1.6;
}

.mkt-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--foreground);
  color: var(--background);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem;
  z-index: 200;
  transition: transform 0.25s;
}

.mkt-toast.show { transform: translateX(-50%) translateY(0); }

@keyframes mkt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes mkt-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.mkt-animate { animation: mkt-fade-up 0.7s ease-out both; }

@media (min-width: 768px) {
  .mkt-nav { display: flex; }
  .mkt-link-muted { display: inline; }
  .mkt-menu-btn { display: none; }
  .mkt-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .mkt-showcase-featured { max-width: 26rem; margin-bottom: 4rem; }
  .mkt-showcase-phones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    overflow: visible;
    padding-bottom: 0;
  }
  .mkt-showcase-phone { flex: none; }
  .mkt-features { grid-template-columns: repeat(3, 1fr); }
  .mkt-how-grid { grid-template-columns: 1fr 1fr; }
  .mkt-footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  .mkt-float-card { left: -2.5rem; }
}

@media (min-width: 1024px) {
  .mkt-hero-grid { grid-template-columns: 1fr 1fr; }
}