/* ============================================================
   Klosi · Página de Funcionalidades
   /funcionalidades — features.css
   ============================================================ */

/* ========== HERO COMPACTO ========== */
.feat-hero {
  padding: 96px 0 56px;
  background:
    radial-gradient(1100px 540px at 80% -10%, var(--brand-soft) 0%, transparent 60%),
    radial-gradient(720px 420px at 12% 12%, var(--accent-soft) 0%, transparent 55%),
    var(--bg-primary);
  text-align: center;
  position: relative;
}
.feat-hero h1 { max-width: 880px; margin: 18px auto 16px; }
.feat-hero .lead { max-width: 680px; margin: 0 auto 36px; }

/* sticky anchor menu */
.feat-anchor {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: color-mix(in oklab, var(--bg-primary) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border-secondary);
}
.feat-anchor-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 0;
}
.feat-anchor-inner::-webkit-scrollbar { display: none; }
.feat-anchor a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font: 500 13.5px/1 var(--font-ui);
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: all .18s ease;
  border: 1px solid transparent;
}
.feat-anchor a:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.feat-anchor a.active {
  color: var(--brand-primary);
  background: var(--brand-soft);
  border-color: var(--brand-soft-2);
}
.feat-anchor a .num {
  font: 700 11px/1 ui-monospace, Menlo, monospace;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.feat-anchor a.active .num { color: var(--brand-primary); }

/* ========== FEATURE SECTIONS ========== */
.feat-section {
  padding: 96px 0;
  scroll-margin-top: 120px;
  position: relative;
}
.feat-section + .feat-section { border-top: 1px solid var(--border-tertiary); }
.feat-section.alt { background: var(--bg-secondary); }
.feat-section.business {
  background:
    radial-gradient(900px 500px at 90% 30%, var(--brand-soft) 0%, transparent 55%),
    var(--bg-secondary);
}

.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.feat-grid.reverse .feat-copy { order: 2; }
.feat-grid.reverse .feat-mock { order: 1; }

.feat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 16px;
}
.feat-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.feat-section.business .feat-eyebrow { color: var(--violet-800); }
[data-theme="dark"] .feat-section.business .feat-eyebrow { color: var(--violet-200); }

.feat-title {
  font: 700 clamp(32px, 4.2vw, 46px)/1.05 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.feat-para {
  font: 400 18px/1.55 var(--font-ui);
  color: var(--text-secondary);
  margin: 0 0 28px;
  max-width: 540px;
}
.feat-sublist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.feat-sublist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font: 400 15px/1.5 var(--font-ui);
  color: var(--text-primary);
}
.feat-sublist li svg {
  flex-shrink: 0;
  color: var(--brand-primary);
  margin-top: 2px;
}
.feat-sublist li strong {
  font-weight: 600;
  color: var(--text-primary);
}
.feat-sublist li .pro-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-left: 4px;
  font: 600 10px/1 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--brand-primary);
  background: var(--brand-soft);
  border-radius: 4px;
  vertical-align: 1px;
}

.feat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 15px/1 var(--font-ui);
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--brand-soft-2);
  padding-bottom: 2px;
  transition: gap .18s ease;
}
.feat-link:hover { gap: 10px; }

/* ========== MOCKUPS — frame ========== */
.feat-mock {
  position: relative;
  isolation: isolate;
}
.feat-mock-frame {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 18px;
  box-shadow:
    0 1px 0 var(--border-tertiary),
    0 24px 48px -24px rgba(15, 17, 24, 0.16),
    0 8px 16px -8px rgba(15, 17, 24, 0.08);
  overflow: hidden;
}
[data-theme="dark"] .feat-mock-frame {
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 24px 48px -24px rgba(0,0,0,0.6);
}
.feat-mock-frame::before {
  content: "";
  display: block;
  height: 32px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-tertiary);
  background-image:
    radial-gradient(circle at 14px 16px, #ff5f57 4px, transparent 4.5px),
    radial-gradient(circle at 32px 16px, #febc2e 4px, transparent 4.5px),
    radial-gradient(circle at 50px 16px, #28c840 4px, transparent 4.5px);
}
.feat-mock-blob {
  position: absolute;
  inset: -10% auto auto -8%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  filter: blur(30px);
  z-index: -1;
}
.feat-mock-blob.alt {
  inset: auto -8% -10% auto;
  background: radial-gradient(circle, var(--brand-soft-2) 0%, transparent 70%);
}

.feat-mock-body { padding: 20px; }

/* ===== Mockup 1: Proposta com IA ===== */
.mock-proposal {
  background: var(--bg-secondary);
}
.mock-proposal .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-tertiary);
  margin-bottom: 14px;
}
.mock-proposal .head .who {
  display: flex; align-items: center; gap: 10px;
}
.mock-proposal .head .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-400), var(--violet-600));
  color: white; display: grid; place-items: center;
  font: 600 13px/1 var(--font-ui);
}
.mock-proposal .head h4 { margin: 0; font: 600 14px/1.2 var(--font-ui); color: var(--text-primary); }
.mock-proposal .head p { margin: 2px 0 0; font: 400 12px/1.2 var(--font-ui); color: var(--text-secondary); }
.mock-proposal .head .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--brand-soft);
  color: var(--brand-primary);
  border-radius: 999px;
  font: 500 11px/1 var(--font-ui);
}
.mock-proposal .head .pill .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-primary);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

.mock-proposal .typing {
  font: 400 13px/1.6 var(--font-ui);
  color: var(--text-primary);
  min-height: 96px;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-tertiary);
  border-radius: 12px;
  margin-bottom: 14px;
}
.mock-proposal .typing .caret {
  display: inline-block;
  width: 2px; height: 14px;
  background: var(--brand-primary);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.mock-proposal .meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mock-proposal .meta .cell {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 10px 12px;
}
.mock-proposal .meta .lab {
  font: 500 10px/1 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.mock-proposal .meta .val {
  font: 600 16px/1.1 var(--font-display);
  color: var(--text-primary);
}
.mock-proposal .meta .val.brand { color: var(--brand-primary); }

/* ===== Mockup 2: Cobrança ===== */
.mock-billing { padding: 0; }
.mock-billing .toast {
  margin: 16px 16px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, #00B881 0%, #009466 100%);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 20px -6px rgba(0, 184, 129, .35);
  animation: pop-in .6s ease-out;
}
@keyframes pop-in {
  0% { transform: translateY(-8px) scale(.96); opacity: 0; }
  60% { transform: translateY(2px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.mock-billing .toast .ic {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: grid; place-items: center;
}
.mock-billing .toast .lab {
  font: 500 11px/1 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .9;
}
.mock-billing .toast .val {
  font: 700 18px/1.1 var(--font-display);
}
.mock-billing .toast .time {
  margin-left: auto;
  font: 400 11px/1 var(--font-ui);
  opacity: .85;
}

.mock-billing .rows {
  padding: 16px;
  display: grid;
  gap: 8px;
}
.mock-billing .row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  font: 400 13px/1.2 var(--font-ui);
}
.mock-billing .row .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-secondary);
}
.mock-billing .row .ic.pix { background: #00BDAE; color: white; }
.mock-billing .row .ic.nfse { background: var(--brand-soft); color: var(--brand-primary); }
.mock-billing .row .ic.boleto { background: var(--accent-soft); color: var(--accent-primary); }
.mock-billing .row strong { font-weight: 600; color: var(--text-primary); display: block; }
.mock-billing .row span { font: 400 11px/1.2 var(--font-ui); color: var(--text-secondary); }
.mock-billing .row .amt { font: 600 14px/1 var(--font-display); color: var(--text-primary); }

/* ===== Mockup 3: Agenda ===== */
.mock-agenda { padding: 16px; }
.mock-agenda .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mock-agenda .head h4 { margin: 0; font: 600 15px/1 var(--font-display); color: var(--text-primary); }
.mock-agenda .head .nav {
  display: flex; gap: 4px;
}
.mock-agenda .head .nav button {
  width: 24px; height: 24px;
  border: 1px solid var(--border-secondary);
  background: var(--bg-secondary);
  border-radius: 6px;
  color: var(--text-secondary);
  display: grid; place-items: center;
  cursor: pointer;
}
.mock-agenda .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mock-agenda .dow {
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
  padding: 6px 0;
}
.mock-agenda .day {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bg-tertiary);
  padding: 4px;
  position: relative;
  font: 500 11px/1 var(--font-ui);
  color: var(--text-secondary);
  min-height: 38px;
}
.mock-agenda .day.muted { opacity: .35; }
.mock-agenda .day.today {
  background: var(--brand-soft);
  color: var(--brand-primary);
  font-weight: 700;
}
.mock-agenda .day .ev {
  position: absolute;
  bottom: 3px; left: 3px; right: 3px;
  height: 4px;
  border-radius: 2px;
}
.mock-agenda .day .ev.aceito { background: #00B881; }
.mock-agenda .day .ev.enviado { background: var(--brand-primary); }
.mock-agenda .day .ev.pago { background: var(--accent-primary); }
.mock-agenda .legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 12px;
  font: 500 11px/1 var(--font-ui);
  color: var(--text-secondary);
}
.mock-agenda .legend span { display: inline-flex; align-items: center; gap: 5px; }
.mock-agenda .legend i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}

/* ===== Mockup 4: CRM ===== */
.mock-crm { padding: 16px; }
.mock-crm .who {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-tertiary);
}
.mock-crm .who .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--coral-400), var(--coral-600));
  color: white;
  display: grid; place-items: center;
  font: 600 16px/1 var(--font-display);
}
.mock-crm .who h4 { margin: 0; font: 600 15px/1.2 var(--font-ui); color: var(--text-primary); }
.mock-crm .who p { margin: 2px 0 0; font: 400 12px/1.2 var(--font-ui); color: var(--text-secondary); }
.mock-crm .tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.mock-crm .tag {
  padding: 2px 8px;
  font: 500 10px/1.5 var(--font-ui);
  background: var(--brand-soft);
  color: var(--brand-primary);
  border-radius: 4px;
}
.mock-crm .tag.coral { background: var(--accent-soft); color: var(--accent-primary); }

.mock-crm .kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.mock-crm .kpi {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 10px;
}
.mock-crm .kpi .lab {
  font: 500 9px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.mock-crm .kpi .val {
  font: 700 15px/1 var(--font-display);
  color: var(--text-primary);
}

.mock-crm .timeline {
  position: relative;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
.mock-crm .timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border-secondary);
}
.mock-crm .tl-item {
  position: relative;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-secondary);
}
.mock-crm .tl-item::before {
  content: "";
  position: absolute;
  left: -18px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
}
.mock-crm .tl-item.brand::before { border-color: var(--brand-primary); background: var(--brand-soft); }
.mock-crm .tl-item.success::before { border-color: #00B881; background: #E6F7F0; }
.mock-crm .tl-item.coral::before { border-color: var(--accent-primary); background: var(--accent-soft); }
.mock-crm .tl-item strong { color: var(--text-primary); font-weight: 600; }
.mock-crm .tl-item .when {
  font: 400 10px/1 var(--font-ui);
  color: var(--text-tertiary);
  margin-left: 6px;
}

/* ===== Mockup 5: Indicação ===== */
.mock-refs { padding: 16px; }
.mock-refs .head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 16px;
}
.mock-refs .head h4 { margin: 0; font: 600 15px/1 var(--font-display); color: var(--text-primary); }
.mock-refs .head .total {
  font: 700 24px/1 var(--font-display);
  color: var(--brand-primary);
}
.mock-refs .head .total small {
  font: 500 11px/1 var(--font-ui);
  color: var(--text-tertiary);
  display: block;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.mock-refs .chart {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  align-items: flex-end;
  height: 110px;
  padding: 8px 4px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  margin-bottom: 14px;
}
.mock-refs .chart .bar {
  position: relative;
  background: var(--brand-soft-2);
  border-radius: 4px 4px 0 0;
  min-height: 6px;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: bar-grow .8s ease-out forwards;
}
.mock-refs .chart .bar.active { background: var(--brand-primary); }
@keyframes bar-grow {
  to { transform: scaleY(1); }
}

.mock-refs .ref-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-tertiary);
  font: 400 12px/1.2 var(--font-ui);
}
.mock-refs .ref-row .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: grid; place-items: center;
  font: 600 11px/1 var(--font-ui);
}
.mock-refs .ref-row strong {
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}
.mock-refs .ref-row span {
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.mock-refs .ref-row .badge {
  padding: 2px 8px;
  font: 600 10px/1.5 var(--font-ui);
  background: #E6F7F0;
  color: #00935A;
  border-radius: 4px;
}
[data-theme="dark"] .mock-refs .ref-row .badge {
  background: rgba(0, 184, 129, .14);
  color: #4FE5B0;
}

/* ===== Mockup 6: Business white label ===== */
.mock-wl {
  padding: 0;
  /* Custom palette for fictitious "Lumina Studio" */
  --wl-primary: #0E7C66;
  --wl-soft: #E0F2EC;
  --wl-bg: #FAF8F3;
  --wl-text: #1A1F1C;
}
[data-theme="dark"] .mock-wl {
  --wl-soft: rgba(14, 124, 102, .18);
  --wl-bg: #1B201E;
  --wl-text: rgba(244, 245, 248, .92);
}
.mock-wl .wl-bar {
  background: var(--wl-primary);
  color: white;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.mock-wl .wl-bar .logo {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: white;
  color: var(--wl-primary);
  display: grid; place-items: center;
  font: 700 12px/1 var(--font-display);
}
.mock-wl .wl-bar .url {
  margin-left: auto;
  font: 400 11px/1 var(--font-ui);
  opacity: .8;
}
.mock-wl .wl-body {
  padding: 22px;
  background: var(--wl-bg);
  color: var(--wl-text);
  font-family: 'Outfit', sans-serif;
}
.mock-wl .wl-body h3 {
  margin: 0 0 6px;
  font: 700 22px/1.15 'Outfit', sans-serif;
  letter-spacing: -0.02em;
  color: var(--wl-text);
}
.mock-wl .wl-body .who {
  font: 400 12px/1.4 'Outfit', sans-serif;
  color: var(--wl-text);
  opacity: .65;
  margin-bottom: 18px;
}
.mock-wl .wl-body .total-card {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid var(--wl-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
[data-theme="dark"] .mock-wl .wl-body .total-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.mock-wl .wl-body .total-card .lab {
  font: 500 11px/1 'Outfit', sans-serif;
  color: var(--wl-text);
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.mock-wl .wl-body .total-card .val {
  font: 700 22px/1 'Outfit', sans-serif;
  color: var(--wl-primary);
  letter-spacing: -0.01em;
}
.mock-wl .wl-body .accept-btn {
  padding: 6px 12px;
  background: var(--wl-primary);
  color: white;
  border-radius: 8px;
  font: 600 11px/1.4 'Outfit', sans-serif;
  border: 0;
}
.mock-wl .wl-foot {
  padding: 10px 22px 16px;
  background: var(--wl-bg);
  font: 400 10px/1.4 'Outfit', sans-serif;
  color: var(--wl-text);
  opacity: .45;
  border-top: 1px solid var(--wl-soft);
  display: flex;
  justify-content: space-between;
}
.mock-wl .wl-foot .no-klosi {
  font-style: italic;
}
[data-theme="dark"] .mock-wl .wl-foot { border-color: rgba(255,255,255,.08); }

/* ========== COMPARISON CARDS ========== */
.feat-compare {
  padding: 96px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-tertiary);
}
.feat-compare .head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.feat-compare h2 {
  font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.feat-compare .head p {
  font: 400 17px/1.5 var(--font-ui);
  color: var(--text-secondary);
  margin: 0;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.compare-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.compare-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -16px rgba(15, 17, 24, 0.12);
}
.compare-card .from-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: 600 11px/1 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 999px;
  margin-bottom: 18px;
}
.compare-card h3 {
  font: 700 22px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.compare-card p {
  font: 400 15px/1.55 var(--font-ui);
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.compare-card .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  font: 500 13px/1.3 var(--font-ui);
  color: var(--text-primary);
}
.compare-card .arrow svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* ========== NICHE CARDS ========== */
.feat-niche {
  padding: 96px 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-tertiary);
}
.feat-niche .head {
  text-align: center;
  margin-bottom: 56px;
}
.feat-niche h2 {
  font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.feat-niche .head p {
  font: 400 17px/1.5 var(--font-ui);
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto;
}
.niche-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.niche-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  text-decoration: none;
  display: block;
  transition: all .22s ease;
}
.niche-card:hover {
  border-color: var(--brand-soft-2);
  background: var(--brand-soft);
  transform: translateY(-2px);
}
.niche-card:hover .niche-arrow { transform: translateX(3px); color: var(--brand-primary); }
.niche-card .ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-primary);
  display: grid; place-items: center;
  margin-bottom: 16px;
  transition: all .22s ease;
}
.niche-card:hover .ic { background: white; }
.niche-card h4 {
  font: 600 17px/1.2 var(--font-display);
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.niche-card p {
  font: 400 14px/1.5 var(--font-ui);
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.niche-card .niche-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 var(--font-ui);
  color: var(--text-tertiary);
  transition: all .22s ease;
}

/* ========== CTA FINAL ========== */
.feat-cta-final {
  padding: 110px 0 130px;
  text-align: center;
  background:
    radial-gradient(900px 480px at 50% 100%, var(--brand-soft) 0%, transparent 60%),
    var(--bg-secondary);
  border-top: 1px solid var(--border-tertiary);
}
.feat-cta-final h2 {
  font: 700 clamp(34px, 4.6vw, 52px)/1.05 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 auto 18px;
  max-width: 720px;
}
.feat-cta-final p {
  font: 400 18px/1.5 var(--font-ui);
  color: var(--text-secondary);
  margin: 0 auto 36px;
  max-width: 560px;
}
.feat-cta-final .ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.feat-cta-final .finep {
  margin-top: 28px;
  font: 500 13px/1 var(--font-ui);
  color: var(--text-tertiary);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 960px) {
  .feat-hero { padding: 72px 0 40px; }
  .feat-section { padding: 64px 0; }
  .feat-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feat-grid.reverse .feat-copy { order: 1; }
  .feat-grid.reverse .feat-mock { order: 2; }
  .compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .niche-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .feat-anchor { top: 56px; }
  .feat-anchor a { padding: 6px 10px; font-size: 12.5px; }
  .feat-anchor a .num { display: none; }
  .feat-cta-final { padding: 80px 0; }
}
@media (max-width: 560px) {
  .niche-grid { grid-template-columns: 1fr; }
  .feat-title { font-size: 28px; }
  .feat-para { font-size: 16px; }
  .mock-proposal .meta { grid-template-columns: 1fr 1fr; }
  .mock-proposal .meta .cell:last-child { grid-column: span 2; }
  .mock-crm .kpis { grid-template-columns: 1fr 1fr; }
  .mock-crm .kpi:last-child { display: none; }
}