/* Página inicial (apresentação + download). Usa as cores, fontes e botões do style.css. */

body.landing { overflow-x: hidden; overflow-y: auto; background: var(--bg-0); }
.landing main { position: relative; }
.landing a { text-decoration: none; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------- topo */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px max(20px, calc((100vw - 1200px) / 2));
  background: rgba(6, 7, 11, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.lp-logo { display: flex; align-items: center; gap: 10px; color: #fff; font: 700 17px/1 var(--font-display); letter-spacing: 0.24em; }
.lp-logo img { filter: drop-shadow(0 0 12px rgba(var(--hot-rgb), 0.5)); }
.lp-links { display: flex; gap: 22px; margin-left: auto; }
.lp-links a { font: 600 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.lp-links a:hover { color: #fff; }
.lp-enter { height: 40px; }

/* ---------------- hero */
.lp-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 48px;
  min-height: min(860px, calc(100vh - 70px));
  padding: 70px max(20px, calc((100vw - 1200px) / 2)) 90px;
  overflow: hidden;
}
.lp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font: 600 12px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); background: rgba(43, 255, 154, 0.08); border: 1px solid rgba(43, 255, 154, 0.25); }
.lp-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 1.4s ease-in-out infinite; }
.lp-hero h1 { margin: 22px 0 18px; font: 700 clamp(44px, 6.2vw, 82px)/0.98 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.lp-hero h1 .grad { display: block; filter: drop-shadow(0 0 30px rgba(var(--hot-rgb), 0.35)); }
.lp-lead { max-width: 520px; margin: 0 0 30px; font-size: 19px; line-height: 1.55; color: var(--text-2); }
.lp-lead strong { color: #fff; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-ctas .icon { width: 20px; height: 20px; }
.lp-note { margin: 16px 0 0; font-size: 13px; color: var(--text-3); }
.lp-note strong { color: var(--text-2); }

.lp-hero-visual { position: relative; perspective: 1600px; }
.lp-shot { overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--bg-2); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(var(--hot-rgb), 0.18); }
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-shot.tilt { transform: rotateY(-12deg) rotateX(5deg) rotateZ(1deg); transform-origin: 30% 50%; animation: tilt-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tilt-in { from { opacity: 0; transform: rotateY(-25deg) rotateX(12deg) translateY(40px); } }
.lp-float { position: absolute; font-size: 46px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)); animation: bob 4s ease-in-out infinite; }
.lp-float.f1 { right: -14px; top: 6%; }
.lp-float.f2 { left: -26px; bottom: 26%; animation-delay: -1.3s; }
.lp-float.f3 { right: 12%; bottom: -24px; animation-delay: -2.6s; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(6deg); } }
.lp-card-mini { position: absolute; left: 6%; top: -22px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; font-size: 14px; color: var(--text-2); background: rgba(14, 16, 24, 0.92); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); }
.lp-card-mini strong { color: #fff; }
.lp-live { padding: 4px 8px; font: 700 10px/1 var(--font-display); letter-spacing: 0.12em; color: #fff; background: var(--red); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }

/* ---------------- números */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: -40px max(20px, calc((100vw - 1200px) / 2)) 0;
  position: relative;
  z-index: 2;
  border-radius: 18px;
  overflow: hidden;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lp-stats div { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; background: var(--bg-2); }
.lp-stats strong { font: 700 24px/1.1 var(--font-display); letter-spacing: 0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stats span { font-size: 14px; color: var(--text-2); }

/* ---------------- seções */
.lp-section { padding: 110px max(20px, calc((100vw - 1200px) / 2)) 0; }
.lp-head { max-width: 760px; margin-bottom: 44px; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hot); }
.lp-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.lp-section h2 { margin: 14px 0 0; font: 700 clamp(30px, 4vw, 48px)/1.05 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }

.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-feature {
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(20, 23, 35, 0.92), rgba(11, 13, 20, 0.95)) padding-box, linear-gradient(160deg, rgba(var(--hot-rgb), 0.45), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.04)) border-box;
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-feature:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(var(--hot-rgb), 0.12); }
.lp-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: var(--hot); background: rgba(var(--hot-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--hot-rgb), 0.32), 0 0 24px rgba(var(--hot-rgb), 0.18); }
.lp-ico .icon { width: 26px; height: 26px; }
.lp-feature h3 { margin: 20px 0 8px; font: 700 18px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.lp-feature p { margin: 0; color: var(--text-2); }

.lp-showcase { display: flex; flex-direction: column; gap: 90px; }
.lp-show-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.lp-show-row.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.lp-show-row.reverse .lp-shot { order: 2; }
.lp-show-text p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }

.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.lp-steps li { position: relative; padding: 30px 26px 28px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line-2); }
.lp-step-n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font: 700 26px/1 var(--font-display); color: #fff; background: var(--grad); box-shadow: 0 0 30px rgba(var(--hot-rgb), 0.45); }
.lp-steps h3 { margin: 20px 0 8px; font: 700 18px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.lp-steps p { margin: 0; color: var(--text-2); }
.lp-steps strong { color: #fff; }

.lp-download {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 48px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(var(--hot-rgb), 0.16), rgba(14, 16, 24, 0.96) 55%) padding-box, var(--grad) border-box;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 80px rgba(var(--hot-rgb), 0.15);
}
.lp-download > img { flex-shrink: 0; filter: drop-shadow(0 0 30px rgba(var(--hot-rgb), 0.6)); animation: float 4s ease-in-out infinite; }
.lp-download h2 { margin: 0 0 10px; }
.lp-download p { margin: 0 0 24px; max-width: 640px; font-size: 16px; color: var(--text-2); }
.lp-download .lp-note { margin: 18px 0 0; }

.lp-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-faq details { padding: 18px 22px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); }
.lp-faq details[open] { border-color: rgba(var(--hot-rgb), 0.45); }
.lp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; font: 700 15px/1.3 var(--font-display); letter-spacing: 0.04em; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--hot); font-size: 20px; line-height: 1; }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq p { margin: 12px 0 0; color: var(--text-2); }
.lp-feature p a, .lp-faq p a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(41, 230, 255, 0.35); }
.lp-feature p a:hover, .lp-faq p a:hover { color: #fff; }

.lp-footer { display: flex; align-items: center; gap: 12px; margin-top: 110px; padding: 28px max(20px, calc((100vw - 1200px) / 2)); border-top: 1px solid var(--line); font: 700 13px/1 var(--font-display); letter-spacing: 0.2em; color: var(--text-2); }
.lp-footer-sub { flex: 1; font: 400 14px/1 var(--font-ui); letter-spacing: 0; color: var(--text-3); }
.lp-footer a { color: var(--text-2); letter-spacing: 0.12em; text-transform: uppercase; }
.lp-footer a:hover { color: #fff; }

/* ---------------- telas menores */
@media (max-width: 1000px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 50px; }
  .lp-shot.tilt { transform: none; }
  .lp-features, .lp-steps { grid-template-columns: 1fr 1fr; }
  .lp-stats { grid-template-columns: 1fr 1fr; }
  .lp-show-row, .lp-show-row.reverse { grid-template-columns: 1fr; gap: 26px; }
  .lp-show-row.reverse .lp-shot { order: 0; }
}
@media (max-width: 680px) {
  .lp-links { display: none; }
  .lp-enter { margin-left: auto; }
  .lp-features, .lp-steps, .lp-faq, .lp-stats { grid-template-columns: 1fr; }
  .lp-download { flex-direction: column; align-items: flex-start; padding: 30px 24px; }
  .lp-section { padding-top: 80px; }
  .lp-float { font-size: 34px; }
  .lp-card-mini { display: none; }
  .lp-ctas .btn { width: 100%; }
}