/* ========== Tokens ========== */
:root {
  --accent: #673de6;
  --accent-soft: rgba(103, 61, 230, 0.15);
  --accent-glow: rgba(103, 61, 230, 0.55);
  --gold: #C9A84C;
}

html { scroll-behavior: smooth; }
body { background: #f2f3f6; }

::selection { background: var(--accent); color: #fff; }

/* ========== Background grid (removido — tema claro) ========== */

/* ========== Glow ========== */
.glow-text {
  text-shadow: none;
}

.shadow-glow {
  box-shadow: 0 4px 16px rgba(103, 61, 230, 0.18);
}
.shadow-glow-lg {
  box-shadow: 0 6px 24px rgba(103, 61, 230, 0.22);
}

/* ========== Card tilt on hover ========== */
.card-tilt {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card-tilt:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
}

/* ========== Underline accent ========== */
.lp-underline {
  position: relative;
  color: #1d1e20;
  font-weight: 700;
  white-space: nowrap;
}
.lp-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .lp-underline { white-space: normal; }
}

/* ========== FAQ items ========== */
.faq-item {
  transition: border-color 0.2s ease;
}
.faq-item:hover {
  border-color: rgba(103, 61, 230, 0.3);
}

/* ========== Comparativo ========== */
.compare-card {
  position: relative;
  overflow: hidden;
}
.compare-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.compare-laser::before {
  background: var(--accent);
  opacity: 0.06;
}

/* ========== Timeline ========== */
.timeline-step {
  position: relative;
}
.timeline-step::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 100%;
  width: calc(100% - 48px);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.3;
}
.timeline-step:last-child::after {
  display: none;
}
@media (max-width: 1023px) {
  .timeline-step::after { display: none; }
}

/* ========== Reduce motion respect ========== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ========== Touch device: disable tilt ========== */
@media (hover: none) {
  .card-tilt:hover { transform: none; }
}