/* ==========================================================================
   Mega888 Guide — LANDING PAGE design system
   --------------------------------------------------------------------------
   Loaded ONLY by index.html. Every selector is prefixed .lp (or nested under
   .lp) so this file cannot leak into the other 17 pages, which keep the older
   flat-panel system in style.css.

   Design direction, deliberately different from the inner pages:
     inner pages : flat panels, 3px left accent bar, ghost numerals, square
                   buttons (13px radius), left-aligned split hero
     this page   : centred hero, pill buttons, floating rounded cards with
                   gradient hairline borders, circular gradient numerals,
                   gradient text accents, ambient colour glows

   Colours are the existing tokens, so every contrast pair already verified by
   tools/audit-site.ps1 still holds.
   ========================================================================== */

/* --- 1. Ambient background ------------------------------------------------ */
.lp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lp-ambient {
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  pointer-events: none;
  z-index: -1;
}

.lp-ambient span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
}

.lp-ambient .a1 {
  width: 520px; height: 520px;
  top: -180px; left: 50%;
  transform: translateX(-58%);
  background: radial-gradient(circle, rgba(246, 198, 83, 0.20), transparent 68%);
}

.lp-ambient .a2 {
  width: 460px; height: 460px;
  top: 60px; left: -140px;
  background: radial-gradient(circle, rgba(77, 141, 246, 0.16), transparent 68%);
}

.lp-ambient .a3 {
  width: 420px; height: 420px;
  top: 140px; right: -130px;
  background: radial-gradient(circle, rgba(56, 193, 114, 0.13), transparent 68%);
}

/* --- 2. Shared bits ------------------------------------------------------- */
.lp-sec { padding: 46px 0; }

.lp-eyebrow2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.lp-eyebrow2::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lp-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 12px;
}

.lp-sub {
  color: var(--muted);
  margin: 0 0 30px;
  max-width: 620px;
}

.lp-centre { text-align: center; }
.lp-centre .lp-sub { margin-left: auto; margin-right: auto; }

/* Gradient text accent — the single most visible difference from inner pages.
   The plain colour is the FALLBACK: background-clip:text paints the glyphs with
   a gradient and makes the text colour transparent, so on any engine that does
   not support it the word would disappear entirely. Wrapping the transparent
   version in @supports means unsupported browsers get solid gold instead. */
.lp-grad { color: var(--gold); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lp-grad {
    background: linear-gradient(100deg, #f6c653 0%, #ffe6a3 46%, #d9a02a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* --- 3. Hero -------------------------------------------------------------- */
.lp-hero {
  padding: 78px 0 20px;
  text-align: center;
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-bottom: 26px;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold);
  background: var(--gold-glow);
  border: 1px solid rgba(246, 198, 83, 0.28);
  white-space: nowrap;
}

.lp-chip.is-green {
  color: #a7f3c8;
  background: rgba(56, 193, 114, 0.14);
  border-color: rgba(56, 193, 114, 0.32);
}

.lp-h1 {
  font-size: clamp(2.15rem, 5.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 20px;
  max-width: 15ch;
  margin-left: auto;
  margin-right: auto;
}

.lp-lede {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 580px;
  margin: 0 auto 32px;
}

.lp-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
  margin-bottom: 18px;
}

.lp-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

/* --- 4. Pill buttons ------------------------------------------------------ */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  white-space: nowrap;
}

.lp-btn svg { width: 19px; height: 19px; flex: none; }

.lp-btn-primary {
  color: #141824;
  background: linear-gradient(135deg, #f6c653 0%, #ffdf8a 50%, #d9a02a 100%);
  box-shadow: 0 12px 30px -12px rgba(246, 198, 83, 0.62);
}

.lp-btn-wa {
  color: #07240f;
  background: linear-gradient(135deg, #6ee7a0 0%, #4ade80 50%, #25d366 100%);
  box-shadow: 0 12px 30px -12px rgba(37, 211, 102, 0.55);
}

.lp-btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border-strong);
}

.lp-btn:hover { transform: translateY(-2px); }

.lp-btn-primary:hover { box-shadow: 0 18px 38px -12px rgba(246, 198, 83, 0.72); }
.lp-btn-wa:hover      { box-shadow: 0 18px 38px -12px rgba(37, 211, 102, 0.68); }
.lp-btn-ghost:hover   { background: rgba(255, 255, 255, 0.085); }

.lp-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.lp-btn-sm { padding: 11px 20px; font-size: 0.87rem; }

/* --- 5. App card (the hero visual) ---------------------------------------- */
.lp-appwrap {
  max-width: 720px;
  margin: 42px auto 0;
}

.lp-appcard {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 26px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(246, 198, 83, 0.55), rgba(255, 255, 255, 0.06) 45%, rgba(77, 141, 246, 0.35)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.95);
  text-align: left;
}

.lp-appicon {
  width: 66px; height: 66px;
  flex: none;
  border-radius: 19px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f6c653, #d9a02a);
  box-shadow: 0 10px 24px -10px rgba(246, 198, 83, 0.6);
}

.lp-appicon svg { width: 34px; height: 34px; }

.lp-appmeta { flex: 1 1 auto; min-width: 0; }

.lp-appname {
  font-size: 1.16rem;
  font-weight: 800;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}

.lp-appsub {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.lp-apptags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-3);
  border: 1px solid var(--border);
}

.lp-appacts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: none;
}

/* --- 6. Trust strip ------------------------------------------------------- */
.lp-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 46px;
}

.lp-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  text-align: left;
}

.lp-trust-ico {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(246, 198, 83, 0.22), rgba(246, 198, 83, 0.07));
  border: 1px solid rgba(246, 198, 83, 0.24);
  color: var(--gold);
}

.lp-trust-ico svg { width: 19px; height: 19px; }

.lp-trust-t {
  font-size: 0.86rem;
  font-weight: 750;
  margin: 0;
  line-height: 1.3;
}

.lp-trust-d {
  font-size: 0.76rem;
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.35;
}

/* --- 7. Numbered steps ---------------------------------------------------- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-step {
  position: relative;
  padding: 30px 24px 26px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.lp-step:hover {
  transform: translateY(-4px);
  border-color: rgba(246, 198, 83, 0.34);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.95);
}

.lp-stepnum {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.06rem;
  font-weight: 800;
  color: #141824;
  background: linear-gradient(135deg, #f6c653, #d9a02a);
  box-shadow: 0 10px 22px -10px rgba(246, 198, 83, 0.6);
  margin-bottom: 18px;
}

.lp-step h3 {
  font-size: 1.08rem;
  font-weight: 780;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.lp-step p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

.lp-step-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}

.lp-step-link:hover { text-decoration: underline; }

/* --- 8. Install cards ----------------------------------------------------- */
.lp-install {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.lp-icard {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-radius: 26px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)) border-box;
  border: 1px solid transparent;
}

.lp-icard-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.lp-icard-ico {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--gold);
}

.lp-icard-ico svg { width: 24px; height: 24px; }

.lp-icard h3 {
  font-size: 1.12rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}

.lp-icard .lp-tag { margin-top: 3px; }

.lp-icard p {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-soft);
  margin: 0 0 20px;
  flex: 1 1 auto;
}

.lp-icard .lp-btn { width: 100%; }

/* --- 9. Explore grid ------------------------------------------------------ */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lp-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 21px 20px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.17s ease, border-color 0.17s ease, background 0.17s ease;
}

.lp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(246, 198, 83, 0.32);
  background: var(--surface-2);
}

.lp-card-ico {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(246, 198, 83, 0.20), rgba(246, 198, 83, 0.06));
  border: 1px solid rgba(246, 198, 83, 0.22);
}

.lp-card-ico svg { width: 20px; height: 20px; }

.lp-card-t {
  font-size: 0.96rem;
  font-weight: 780;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.lp-card-d {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* --- 10. Safety checklist ------------------------------------------------- */
.lp-safety {
  padding: 34px 32px;
  border-radius: 28px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgba(227, 58, 82, 0.42), rgba(255, 255, 255, 0.05) 55%, rgba(246, 198, 83, 0.3)) border-box;
  border: 1px solid transparent;
}

.lp-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.lp-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.lp-check-ico {
  width: 26px; height: 26px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(227, 58, 82, 0.16);
  border: 1px solid rgba(227, 58, 82, 0.4);
  color: #ff8b9d;
}

.lp-check-ico svg { width: 14px; height: 14px; }

.lp-check p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

.lp-check strong { color: var(--text); }

/* --- 11. FAQ ------------------------------------------------------------- */
.lp-faq {
  display: grid;
  gap: 11px;
  max-width: 820px;
  margin: 0 auto;
}

.lp-q {
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.17s ease;
}

.lp-q[open] { border-color: rgba(246, 198, 83, 0.3); }

.lp-q summary {
  cursor: pointer;
  padding: 18px 22px;
  font-size: 0.98rem;
  font-weight: 720;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-q summary::-webkit-details-marker { display: none; }

.lp-q summary::after {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.lp-q[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.lp-q .lp-a {
  padding: 0 22px 20px;
  font-size: 0.91rem;
  line-height: 1.68;
  color: var(--text-soft);
  margin: 0;
}

.lp-q .lp-a a { color: var(--gold); }

/* --- 12. Final CTA ------------------------------------------------------- */
.lp-final {
  text-align: center;
  padding: 52px 32px;
  border-radius: 30px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(246, 198, 83, 0.17), transparent 62%),
    var(--surface);
  border: 1px solid rgba(246, 198, 83, 0.24);
}

.lp-final .lp-h2 { margin-bottom: 10px; }

.lp-final .lp-sub { margin-left: auto; margin-right: auto; margin-bottom: 26px; }

/* --- 13. Responsible strip ----------------------------------------------- */
.lp-resp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
  padding: 22px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
}

.lp-resp p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--text-soft);
}

.lp-resp a { color: var(--gold); font-weight: 700; }

.lp-resp .age {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: #141824;
  background: linear-gradient(135deg, #f6c653, #d9a02a);
}

/* --- 14. Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
  .lp-trust { grid-template-columns: repeat(2, 1fr); }
  .lp-grid  { grid-template-columns: repeat(2, 1fr); }
  .lp-checks { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .lp-steps  { grid-template-columns: 1fr; }
  .lp-install { grid-template-columns: 1fr; }

  .lp-hero { padding-top: 46px; }

  .lp-h1 { max-width: 100%; }

  /* The app card stacks and its buttons go full width, which is how an app
     store listing behaves on a phone. */
  .lp-appcard {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 16px;
  }

  .lp-appicon { align-self: center; }
  .lp-apptags { justify-content: center; }
  .lp-appacts { flex-direction: row; }
  .lp-appacts .lp-btn { flex: 1 1 0; }
}

@media (max-width: 620px) {
  .lp-sec { padding: 34px 0; }
  .lp-trust { grid-template-columns: 1fr; }
  .lp-grid  { grid-template-columns: 1fr; }
  .lp-ctas  { flex-direction: column; }
  .lp-ctas .lp-btn { width: 100%; }
  .lp-safety { padding: 26px 20px; }
  .lp-final { padding: 38px 20px; }
  .lp-appacts { flex-direction: column; }
}

/* --- 15. Motion preferences ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-btn,
  .lp-step,
  .lp-card {
    transition: none;
  }
  .lp-btn:hover,
  .lp-step:hover,
  .lp-card:hover { transform: none; }
}

/* --- 16. Print ----------------------------------------------------------- */
@media print {
  .lp-ambient,
  .lp-ctas,
  .lp-appacts { display: none; }
}

/* ==========================================================================
   2026 landing refresh — modern, motion-led presentation
   --------------------------------------------------------------------------
   Appended as an override layer so the original rules above remain the
   fallback for older browsers. The page still works without JavaScript;
   the reveal classes only hide content when <html> has the .js class.
   ========================================================================== */

/* --- Reading progress and header state ---------------------------------- */
.lp-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 2000;
  pointer-events: none;
}

.lp-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #d9a02a, #f6c653 45%, #ffe6a3 70%, #f6c653);
  box-shadow: 0 0 18px rgba(246, 198, 83, 0.65);
  transition: width 0.08s linear;
}

.site-header.is-scrolled {
  background: rgba(8, 11, 22, 0.84);
  box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.95);
}

/* --- Ambient field ------------------------------------------------------- */
.lp-ambient {
  height: 100%;
  min-height: 760px;
  inset: 0;
  overflow: hidden;
}

.lp-ambient::before {
  content: "";
  position: absolute;
  inset: -12% -18% auto;
  height: 82%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(85% 70% at 50% 8%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(85% 70% at 50% 8%, #000 0%, transparent 72%);
  animation: lp-grid-drift 24s linear infinite;
}

.lp-ambient .a1 {
  width: 560px;
  height: 560px;
  top: -210px;
  left: 42%;
  background: radial-gradient(circle, rgba(246, 198, 83, 0.22), transparent 68%);
  animation: lp-blob 18s ease-in-out infinite alternate;
}

.lp-ambient .a2 {
  width: 480px;
  height: 480px;
  top: 20px;
  left: -160px;
  background: radial-gradient(circle, rgba(77, 141, 246, 0.18), transparent 68%);
  animation: lp-blob 22s ease-in-out -6s infinite alternate-reverse;
}

.lp-ambient .a3 {
  width: 440px;
  height: 440px;
  top: 90px;
  right: -140px;
  background: radial-gradient(circle, rgba(56, 193, 114, 0.15), transparent 68%);
  animation: lp-blob 20s ease-in-out -3s infinite alternate;
}

.lp-ambient .a4 {
  width: 250px;
  height: 250px;
  top: 560px;
  left: 8%;
  background: radial-gradient(circle, rgba(246, 198, 83, 0.1), transparent 70%);
  animation: lp-blob 26s ease-in-out -8s infinite alternate-reverse;
}

.lp-ambient .a5 {
  width: 310px;
  height: 310px;
  top: 600px;
  right: 4%;
  background: radial-gradient(circle, rgba(77, 141, 246, 0.13), transparent 70%);
  animation: lp-blob 24s ease-in-out -12s infinite alternate;
}

@keyframes lp-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 46px, 46px 0; }
}

@keyframes lp-blob {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(24px, -22px, 0) scale(1.08); }
}

/* --- Hero composition ---------------------------------------------------- */
.lp-hero {
  padding: 70px 0 28px;
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(400px, 0.96fr);
  gap: 48px;
  align-items: center;
}

.lp-hero-copy {
  text-align: left;
}

.lp-livebar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lp-live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #38c172;
  box-shadow: 0 0 0 0 rgba(56, 193, 114, 0.48);
  animation: lp-pulse 1.8s ease-out infinite;
}

.lp-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(56, 193, 114, 0.5);
  animation: lp-ping 1.8s ease-out infinite;
}

.lp-live-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}

.lp-clock {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.lp-hero .lp-chips {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.lp-h1 {
  margin: 0 0 20px;
  max-width: 13ch;
  text-align: left;
}

.lp-lede {
  margin: 0 0 30px;
  max-width: 580px;
  text-align: left;
}

.lp-hero .lp-ctas {
  justify-content: flex-start;
  margin-bottom: 18px;
}

.lp-note {
  text-align: left;
}

/* --- Hero visual: app frame ---------------------------------------------- */
.lp-hero-visual {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transition: transform 0.16s ease-out;
}

.lp-orbit {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.lp-orbit-a {
  width: 540px;
  height: 540px;
  border: 1px dashed rgba(246, 198, 83, 0.18);
  animation: lp-spin 30s linear infinite;
}

.lp-orbit-b {
  width: 470px;
  height: 470px;
  border: 1px solid rgba(77, 141, 246, 0.12);
  animation: lp-spin 24s linear infinite reverse;
}

.lp-appframe {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  border-radius: 34px;
  padding: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(13, 18, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 42px 90px -42px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform 0.22s ease;
}

.lp-appframe-top {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 2px 2px 18px;
}

.lp-applogo {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f6c653, #d9a02a);
  box-shadow: 0 10px 26px -12px rgba(246, 198, 83, 0.85);
}

.lp-applogo svg {
  width: 28px;
  height: 28px;
}

.lp-appframe-title {
  min-width: 0;
  flex: 1 1 auto;
}

.lp-appframe-title .lp-appname {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.lp-appframe-title .lp-appsub {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.lp-open {
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  color: #0c1511;
  background: linear-gradient(135deg, #6ee7a0, #25d366);
  box-shadow: 0 8px 20px -10px rgba(37, 211, 102, 0.9);
}

.lp-reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(246, 198, 83, 0.1), transparent 60%),
    rgba(0, 0, 0, 0.14);
  border-radius: 24px;
}

.lp-reel-col {
  position: relative;
  height: 210px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.lp-reel-col::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 198, 83, 0.55), transparent);
  box-shadow: 0 0 16px rgba(246, 198, 83, 0.35);
  z-index: 2;
}

.lp-reel-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  animation: lp-reel-spin 6.5s linear infinite;
  will-change: transform;
}

.lp-reel-slow { animation-duration: 8.4s; }
.lp-reel-fast { animation-duration: 4.8s; }

.lp-reel-track span {
  display: grid;
  place-items: center;
  height: 62px;
  min-width: 56px;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  margin: 0 0 8px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.lp-reel-track span:nth-child(3n + 1) { color: var(--gold); }
.lp-reel-track span:nth-child(3n + 2) { color: #ff8b9d; }
.lp-reel-track span:nth-child(3n) { color: #9dc0ff; }

.lp-appframe-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 18px;
}

.lp-appframe-foot .lp-btn {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.82rem;
}

/* --- Floating live cards -------------------------------------------------- */
.lp-float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(13, 18, 33, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: lp-float 5.5s ease-in-out infinite;
}

.lp-float strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--text);
}

.lp-float small {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--muted);
}

.lp-float-ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--gold);
  background: rgba(246, 198, 83, 0.15);
  border: 1px solid rgba(246, 198, 83, 0.24);
}

.lp-float-ico svg {
  width: 16px;
  height: 16px;
}

.lp-float-wa {
  top: 38px;
  left: -26px;
}

.lp-float-wa .lp-float-ico {
  color: #6ee7a0;
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.26);
}

.lp-float-safe {
  right: -24px;
  bottom: 84px;
  animation-delay: -2.6s;
}

.lp-float-update {
  top: 22px;
  right: -10px;
  padding: 7px 11px;
  gap: 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--text-soft);
  animation-delay: -4.2s;
}

@keyframes lp-spin {
  to { transform: rotate(360deg); }
}

@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56, 193, 114, 0.48); }
  70%  { box-shadow: 0 0 0 8px rgba(56, 193, 114, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 193, 114, 0); }
}

@keyframes lp-ping {
  0%   { opacity: 0.8; transform: scale(0.7); }
  70%  { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes lp-reel-spin {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- Live game ticker ------------------------------------------------------ */
.lp-marquee {
  position: relative;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.022);
  overflow: hidden;
  padding: 13px 0;
}

.lp-marquee::before,
.lp-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}

.lp-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}

.lp-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

.lp-marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: lp-marquee 24s linear infinite;
}

.lp-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.lp-marquee-track span::after {
  content: "\2726";
  color: var(--gold);
  font-size: 0.86rem;
  opacity: 0.8;
}

@keyframes lp-marquee {
  to { transform: translateX(calc(-50% - 14px)); }
}

/* --- Stats strip ----------------------------------------------------------- */
.lp-stats {
  padding: 26px 0 8px;
}

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lp-stat {
  text-align: center;
  padding: 20px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
}

.lp-stat strong {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold);
}

.lp-stat > span {
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- Buttons: shine and lift ---------------------------------------------- */
.lp-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lp-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.48) 50%, transparent 68%);
  transform: translateX(-160%);
  transition: transform 0.65s ease;
}

.lp-btn:hover::after {
  transform: translateX(160%);
}

.lp-btn-wa {
  animation: lp-wa-glow 2.4s ease-in-out infinite;
}

@keyframes lp-wa-glow {
  0%, 100% { box-shadow: 0 12px 30px -12px rgba(37, 211, 102, 0.55); }
  50%      { box-shadow: 0 16px 38px -12px rgba(37, 211, 102, 0.78); }
}

/* --- Reveal on scroll ------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 0.8, 0.26, 1),
    transform 0.72s cubic-bezier(0.22, 0.8, 0.26, 1);
  will-change: opacity, transform;
}

.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="up"] { transform: translateY(28px); }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Once the hero visual has revealed, hand transform back to the small,
   responsive tilt transition so pointer movement stays crisp. */
.lp-hero-visual[data-reveal].is-visible {
  transition: transform 0.16s ease-out;
}

/* --- Spotlight cards ------------------------------------------------------- */
[data-spotlight] {
  position: relative;
  overflow: hidden;
}

[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 198, 83, 0.12), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

[data-spotlight]:hover::before {
  opacity: 1;
}

[data-spotlight] > * {
  position: relative;
  z-index: 1;
}

/* --- Card polish ------------------------------------------------------------ */
.lp-step,
.lp-icard,
.lp-card,
.lp-safety,
.lp-final {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    var(--surface);
}

.lp-step,
.lp-icard {
  border-color: rgba(255, 255, 255, 0.105);
}

.lp-card:hover,
.lp-step:hover,
.lp-icard:hover {
  border-color: rgba(246, 198, 83, 0.36);
  box-shadow: 0 26px 58px -30px rgba(0, 0, 0, 0.95);
}

/* --- FAQ motion ------------------------------------------------------------- */
.lp-q {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lp-q:hover {
  transform: translateY(-2px);
  border-color: rgba(246, 198, 83, 0.28);
}

.lp-q[open] {
  background:
    linear-gradient(145deg, rgba(246, 198, 83, 0.06), transparent 55%),
    var(--surface);
}

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 34px;
  }

  .lp-float-wa { left: -8px; }
  .lp-float-safe { right: -8px; }
}

@media (max-width: 980px) {
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .lp-hero-copy {
    max-width: 720px;
    margin-inline: auto;
  }

  .lp-hero-visual {
    min-height: 510px;
  }

  .lp-appframe {
    width: min(100%, 450px);
  }

  .lp-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lp-hero {
    padding-top: 44px;
  }

  .lp-hero-copy {
    text-align: center;
  }

  .lp-hero .lp-chips,
  .lp-hero .lp-ctas {
    justify-content: center;
  }

  .lp-h1,
  .lp-lede,
  .lp-note {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .lp-hero-visual {
    min-height: 470px;
  }

  .lp-orbit-a { width: 440px; height: 440px; }
  .lp-orbit-b { width: 390px; height: 390px; }
}

@media (max-width: 620px) {
  .lp-ambient { min-height: 660px; }

  .lp-hero-grid { gap: 28px; }

  .lp-livebar {
    gap: 7px;
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  .lp-h1 {
    max-width: 100%;
  }

  .lp-hero-visual {
    min-height: 430px;
  }

  .lp-appframe {
    padding: 17px;
    border-radius: 28px;
  }

  .lp-reel {
    gap: 9px;
    padding: 18px 12px;
  }

  .lp-reel-col { height: 176px; }

  .lp-reel-track span {
    height: 52px;
    min-width: 44px;
    font-size: 0.88rem;
    margin-bottom: 7px;
  }

  .lp-appframe-foot {
    gap: 8px;
  }

  .lp-float {
    padding: 9px 11px;
  }

  .lp-float-wa { left: 2px; top: 18px; }
  .lp-float-safe { right: 2px; bottom: 44px; }
  .lp-float-update { right: 4px; top: 4px; }

  .lp-stats-grid {
    gap: 10px;
  }

  .lp-stat {
    padding: 16px 12px;
  }
}

/* --- Reduced motion and print ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lp-marquee-track,
  .lp-reel-track,
  .lp-orbit,
  .lp-ambient::before,
  .lp-ambient span,
  .lp-float,
  .lp-btn-wa,
  .lp-live-dot,
  .lp-live-dot::after {
    animation: none !important;
  }

  .lp-appframe {
    transform: none;
  }

  .lp-hero-visual {
    transition: none;
  }
}

@media print {
  .lp-progress,
  .lp-marquee,
  .lp-stats,
  .lp-hero-visual,
  .lp-ambient,
  .lp-float {
    display: none !important;
  }

  .lp-hero-grid {
    display: block;
  }
}