/* ComentaTok Landing - Styles */
:root {
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted: #94a3b8;
  --line: rgba(255,255,255,0.1);
  --pink: #ff0050; /* TikTok pink */
  --cyan: #00f2ea; /* TikTok cyan */
}

html, body { height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }

.section-title {
  font-weight: 900;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
}

.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.card-title { font-weight: 800; margin-bottom: 6px; }
.card-text { color: #cbd5e1; }

.mockup-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.mockup-window {
  height: 10px;
  background:
    radial-gradient(circle at 20px 50%, #ef4444 6px, transparent 7px),
    radial-gradient(circle at 46px 50%, #f59e0b 6px, transparent 7px),
    radial-gradient(circle at 72px 50%, #10b981 6px, transparent 7px);
}
.mockup-body { padding: 18px; }

.stat { text-align: center; background: rgba(255,255,255,0.03); border:1px solid var(--line); border-radius: 12px; padding:10px; }
.stat-k { font-weight: 900; font-size: 1.25rem; }
.stat-l { font-size: .75rem; color: var(--muted); }

.i.i-check::before { content: "✔"; color: #22c55e; margin-right: 8px; }
.li-check { display: flex; align-items: flex-start; gap: .5rem; color: #d1d5db; }
.li-check::before { content: "✔"; color: #22c55e; margin-top: .2rem; }

.step { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; gap: 10px; align-items: center; }
.step .n { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; color: #0b1220; background: linear-gradient(135deg, var(--pink), var(--cyan)); }

.faq { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.faq > summary { cursor: pointer; font-weight: 700; }
.faq > p { color: #cbd5e1; margin-top: 6px; }

/* CTA highlight */
.cta-buy { position: relative; isolation: isolate; }
.cta-buy::after {
  content: "";
  position: absolute; inset: -2px; z-index: -1; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,0,80,.6), rgba(0,242,234,.6));
  filter: blur(12px); opacity: .4;
}

/* Demo (vídeo) */
.video-frame { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.video-wrap { position: relative; width: 100%; padding-top: 56.25%; }
.video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Depoimentos e badges */
.testi { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.stars { color: #f59e0b; font-weight: 900; letter-spacing: 1px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.04); color: #cbd5e1; }

/* Utilities */
.border-white\/10 { border-color: rgba(255,255,255,0.1) !important; }
.bg-slate-900\/40 { background-color: rgba(15,23,42,0.4) !important; }

/* Responsive helpers */
@media (max-width: 640px) {
  .stat { padding: 8px; }
}