/* Landing — Rodavia. Usa as cores do tema Mamix. */
:root {
  --cf-primary: #546dfe;
  --cf-secondary: #d77cf7;
  --cf-grad: linear-gradient(135deg, #546dfe 0%, #7d6bff 50%, #d77cf7 100%);
}

.landing-main { overflow-x: hidden; }

/* Navbar */
.cf-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme-mode="dark"] .cf-navbar { background: rgba(0, 0, 0, 0.6); border-color: rgba(255,255,255,0.08); }
.cf-navlink { color: inherit; text-decoration: none; font-weight: 500; opacity: .8; }
.cf-navlink:hover { opacity: 1; color: var(--cf-primary); }

/* Hero */
.cf-hero {
  position: relative;
  padding: 5rem 0 4rem;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(215,124,247,.18), transparent 60%),
    radial-gradient(800px 500px at 0% 0%, rgba(84,109,254,.16), transparent 55%);
}
.cf-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(84,109,254,.1); color: var(--cf-primary);
  font-weight: 600; font-size: .8rem;
}
.cf-hero h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }
.cf-gradient-text {
  background: var(--cf-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Mockup do painel no hero */
.cf-mock {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(84,109,254,.35), 0 10px 30px -15px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
[data-theme-mode="dark"] .cf-mock { background: #1b1f3b; border-color: rgba(255,255,255,.08); }
.cf-mock-bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--cf-grad); }
.cf-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.7); }
.cf-kpi { border-radius: 12px; border: 1px solid rgba(0,0,0,.06); padding: .85rem 1rem; }
[data-theme-mode="dark"] .cf-kpi { border-color: rgba(255,255,255,.08); }

/* Cards de feature */
.cf-feature {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.cf-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(84,109,254,.5); }
.cf-feature .cf-ico {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}

/* Lista de módulos */
.cf-module {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid rgba(0,0,0,.05);
  background: rgba(255,255,255,.6);
  font-weight: 500; font-size: .92rem;
}
[data-theme-mode="dark"] .cf-module { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
.cf-module i { color: var(--cf-primary); }

/* Passos */
.cf-step-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cf-grad); color: #fff; font-weight: 700;
}

/* Seção dev (escura) */
.cf-dev { background: #0f1226; color: #cdd3f0; border-radius: 24px; }
.cf-code {
  background: #0a0c1d; border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 1.1rem 1.25rem; color: #c9d1ff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem;
  overflow-x: auto;
}
.cf-code .tok-cmd { color: #7d8cff; }
.cf-code .tok-str { color: #9be7a6; }
.cf-code .tok-key { color: #d77cf7; }

/* Pricing */
.cf-price { border: 1px solid rgba(0,0,0,.08); border-radius: 18px; height: 100%; }
.cf-price.cf-highlight { border-color: var(--cf-primary); box-shadow: 0 24px 50px -28px rgba(84,109,254,.6); }

/* Faixa CTA */
.cf-cta { background: var(--cf-grad); border-radius: 24px; }

/* Seções */
.cf-section { padding: 4.5rem 0; }
.cf-kicker { color: var(--cf-primary); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }

/* Footer */
.cf-footer { background: #0f1226; color: #aeb4d6; }
.cf-footer a { color: #aeb4d6; text-decoration: none; }
.cf-footer a:hover { color: #fff; }