/* ══════════════════════════════════════════════════════════════════════════
   Preflop Driller — Landing page
   "Velvet Aurora" — full rebuild (v8, 2026-05-10).
   Deep purple-black base, gold/crimson/violet accents, Fraunces display.
   New layout: hero feature-carousel + 5 alternating feature sections.
   Matches the in-app dashboard palette so landing → app feels seamless.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --lp-bg:        #070410;
  --lp-bg-2:      #0B0717;
  --lp-surface:   #120A1E;
  --lp-surface-2: #1A0F2A;
  --lp-surface-3: #231538;
  --lp-line:      rgba(245, 239, 227, 0.09);
  --lp-line-2:    rgba(245, 239, 227, 0.05);

  /* Text */
  --lp-text:   #F5EFE3;
  --lp-text-2: #B8AECA;
  --lp-text-3: #857698;
  --lp-text-4: #5A4F6C;

  /* Accents — mirror the in-app --vb-* tokens */
  --lp-gold:    #F0B65C;
  --lp-gold-hi: #FFE7B8;
  --lp-gold-lo: #C68938;
  --lp-crimson: #FF4477;
  --lp-violet:  #8567FF;
  --lp-cyan:    #4BDDFF;
  --lp-mint:    #48E0A4;

  /* Type */
  --lp-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --lp-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lp-italic:  'Instrument Serif', 'Fraunces', Georgia, serif;
  --lp-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shape + motion */
  --lp-radius:    16px;
  --lp-radius-lg: 24px;
  --lp-container: 1200px;
  --lp-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --lp-shadow:    0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Ambient aurora behind the whole page */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 12% 8%,  rgba(133, 103, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 45% 38% at 88% 18%, rgba(255, 68, 119, 0.11),  transparent 60%),
    radial-gradient(ellipse 50% 40% at 75% 92%, rgba(75, 221, 255, 0.08),  transparent 60%);
  filter: blur(50px);
}
body > * { position: relative; z-index: 1; }

/* ── Shared layout ─────────────────────────────────────────────────────── */
.lp-wrap {
  width: 100%;
  max-width: var(--lp-container);
  margin: 0 auto;
  padding: 0 28px;
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-gold);
}
.lp-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--lp-gold), transparent);
}
.accent {
  font-family: var(--lp-italic);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--lp-gold) 0%, var(--lp-crimson) 52%, var(--lp-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 14px 26px;
  transition: transform 0.22s var(--lp-ease), box-shadow 0.22s var(--lp-ease), background 0.22s var(--lp-ease);
  white-space: nowrap;
}
.lp-btn svg { transition: transform 0.22s var(--lp-ease); }
.lp-btn-primary {
  color: #1A0E04;
  background: linear-gradient(180deg, var(--lp-gold-hi) 0%, var(--lp-gold) 58%, var(--lp-gold-lo) 100%);
  box-shadow: 0 12px 32px -12px rgba(240, 182, 92, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(240, 182, 92, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lp-btn-primary:hover svg { transform: translateX(4px); }
.lp-btn-ghost {
  color: var(--lp-text);
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-line);
}
.lp-btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 239, 227, 0.2);
  background: var(--lp-surface-3);
}
.lp-btn-lg { padding: 17px 34px; font-size: 16px; }

/* ══ NAV ═══════════════════════════════════════════════════════════════ */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  max-width: var(--lp-container);
  margin: 0 auto;
  transition: background 0.3s var(--lp-ease), border-color 0.3s var(--lp-ease), padding 0.3s var(--lp-ease);
  border-bottom: 1px solid transparent;
}
.lp-nav.scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(7, 4, 16, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--lp-line);
}
.lp-nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
}
.lp-nav-logo-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #1A0E04;
  background: linear-gradient(150deg, var(--lp-gold-hi), var(--lp-gold) 60%, var(--lp-gold-lo));
  box-shadow: 0 8px 20px -8px rgba(240, 182, 92, 0.8);
}
.lp-nav-logo-mark svg { width: 19px; height: 19px; }
.lp-nav-logo em { font-style: normal; color: var(--lp-gold); }
.lp-nav-links {
  display: flex;
  gap: 4px;
}
.lp-nav-links a {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-2);
  border-radius: 10px;
  transition: color 0.18s, background 0.18s;
}
.lp-nav-links a:hover { color: var(--lp-text); background: var(--lp-surface-2); }
.lp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #1A0E04;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lp-gold-hi), var(--lp-gold) 60%, var(--lp-gold-lo));
  box-shadow: 0 10px 26px -10px rgba(240, 182, 92, 0.75);
  transition: transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease);
}
.lp-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(240, 182, 92, 0.9);
}
.lp-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.lp-nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--lp-text);
  border-radius: 2px;
  transition: transform 0.25s var(--lp-ease), opacity 0.25s;
}
.lp-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-nav-toggle.open span:nth-child(2) { opacity: 0; }
.lp-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lp-mobile {
  display: none;
  position: fixed;
  inset: 64px 0 auto 0;
  z-index: 49;
  flex-direction: column;
  gap: 4px;
  padding: 18px 28px 26px;
  background: rgba(7, 4, 16, 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lp-line);
}
.lp-mobile.open { display: flex; }
.lp-mobile a {
  padding: 13px 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--lp-text-2);
  border-bottom: 1px solid var(--lp-line-2);
}
.lp-mobile a:last-child {
  margin-top: 10px;
  border: none;
  justify-content: center;
}

/* ══ HERO ══════════════════════════════════════════════════════════════ */
.lp-hero {
  padding: 70px 0 90px;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.lp-hero-h1 {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.lp-hero-sub {
  font-size: 18px;
  line-height: 1.62;
  color: var(--lp-text-2);
  max-width: 30em;
  margin-bottom: 30px;
}
.lp-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.lp-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--lp-text-3);
}
.lp-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lp-hero-tags span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lp-gold);
  box-shadow: 0 0 8px var(--lp-gold);
}

/* ── Hero carousel stage — clean showcase panel ────────────────────────── */
.lp-stage { position: relative; }

.lp-stage-frame {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: var(--lp-radius-lg);
  background:
    radial-gradient(ellipse 76% 58% at 50% 4%, var(--sc, rgba(240,182,92,0.16)), transparent 72%),
    linear-gradient(180deg, var(--lp-surface-2), var(--lp-surface));
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow), inset 0 1px 0 var(--lp-line-2);
  overflow: hidden;
  transition: background 0.6s var(--lp-ease);
}
/* per-slide accent — driven by [data-c] on the frame (#lpStage) */
.lp-stage-frame[data-c="gold"]    { --sc: rgba(240,182,92,0.18); --se: var(--lp-gold); }
.lp-stage-frame[data-c="cyan"]    { --sc: rgba(75,221,255,0.16);  --se: var(--lp-cyan); }
.lp-stage-frame[data-c="mint"]    { --sc: rgba(72,224,164,0.16);  --se: var(--lp-mint); }
.lp-stage-frame[data-c="violet"]  { --sc: rgba(133,103,255,0.20); --se: var(--lp-violet); }
.lp-stage-frame[data-c="crimson"] { --sc: rgba(255,68,119,0.18);  --se: var(--lp-crimson); }
/* soft accent hairline along the top edge */
.lp-stage-frame::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--se, var(--lp-gold)), transparent);
  opacity: 0.7;
  transition: background 0.6s var(--lp-ease);
}

.lp-slide {
  position: absolute;
  inset: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.965) translateY(8px);
  transition: opacity 0.5s var(--lp-ease), transform 0.5s var(--lp-ease);
  pointer-events: none;
}
.lp-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lp-slide-art {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .lp-slide { transition: opacity 0.2s linear; transform: none; }
}

/* caption strip + dots, below the panel */
.lp-stage-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.lp-stage-caption {
  text-align: center;
  min-height: 48px;
}
.lp-stage-tag {
  display: block;
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-gold);
  margin-bottom: 5px;
}
.lp-stage-cap {
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--lp-text);
}
.lp-stage-dots {
  display: flex;
  gap: 9px;
}
.lp-dot {
  width: 30px;
  height: 5px;
  border-radius: 99px;
  background: var(--lp-surface-3);
  transition: background 0.3s var(--lp-ease), width 0.3s var(--lp-ease);
}
.lp-dot:hover { background: var(--lp-text-4); }
.lp-dot.is-active {
  width: 46px;
  background: linear-gradient(90deg, var(--lp-gold), var(--lp-crimson));
}

/* ── Mockup: poker table (Practice slide) ──────────────────────────────── */
.mk-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mk-ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lp-text-3);
  text-transform: uppercase;
}
.mk-ctx b { color: var(--lp-gold); font-weight: 600; }
.mk-ctx .mk-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lp-mint);
}
.mk-ctx .mk-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lp-mint);
  box-shadow: 0 0 8px var(--lp-mint);
}
.mk-felt {
  position: relative;
  height: 116px;
  border-radius: 90px / 60px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(72, 224, 164, 0.14), transparent 70%),
    linear-gradient(180deg, #14322A, #0C1F1B);
  border: 1px solid rgba(72, 224, 164, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mk-card {
  width: 46px;
  height: 64px;
  border-radius: 7px;
  background: linear-gradient(180deg, #FCFAF4, #E9E4D6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 7px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8);
  font-family: var(--lp-display);
  font-weight: 600;
}
.mk-card .r { font-size: 17px; line-height: 1; color: #1A1326; }
.mk-card .s { font-size: 15px; line-height: 1; align-self: flex-end; color: #1A1326; }
.mk-card.red .r, .mk-card.red .s { color: var(--lp-crimson); }
.mk-acts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.mk-act {
  padding: 9px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9px;
  background: var(--lp-surface-3);
  border: 1px solid var(--lp-line);
  color: var(--lp-text-2);
}
.mk-act.win {
  color: #1A0E04;
  background: linear-gradient(180deg, var(--lp-gold-hi), var(--lp-gold));
  border-color: transparent;
}
.mk-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.mk-verdict .ok { color: var(--lp-mint); font-weight: 700; text-transform: uppercase; }
.mk-bar {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  display: flex;
  background: var(--lp-surface-3);
}
.mk-bar i { height: 100%; }
.mk-bar i.raise { background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-hi)); }
.mk-bar i.fold  { background: var(--lp-surface-3); }

/* ── Mockup: 13×13 matrix (Study slide) ────────────────────────────────── */
.mk-matrix {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2.4px;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
}
.mk-cell {
  border-radius: 2px;
  background: var(--lp-surface-3);
}
.mk-cell.raise { background: linear-gradient(135deg, var(--lp-gold), var(--lp-gold-lo)); }
.mk-cell.mix   { background: linear-gradient(135deg, var(--lp-gold-lo), var(--lp-crimson)); }
.mk-cell.call  { background: linear-gradient(135deg, var(--lp-mint), #1B9464); }
.mk-cell.fold  { background: var(--lp-surface-2); }
.mk-legend {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-text-3);
}
.mk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mk-legend i { width: 9px; height: 9px; border-radius: 2px; }
.mk-legend i.raise { background: var(--lp-gold); }
.mk-legend i.mix   { background: var(--lp-crimson); }
.mk-legend i.call  { background: var(--lp-mint); }

/* ── Mockup: code editor (My Ranges slide) ─────────────────────────────── */
.mk-editor {
  width: 100%;
  border-radius: 11px;
  background: var(--lp-bg-2);
  border: 1px solid var(--lp-line);
  overflow: hidden;
  font-family: var(--lp-mono);
}
.mk-editor-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--lp-line);
  font-size: 11px;
  color: var(--lp-text-3);
}
.mk-editor-hd .save {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lp-mint);
  font-weight: 600;
}
.mk-editor-body {
  padding: 13px 14px;
  font-size: 12px;
  line-height: 1.85;
}
.mk-editor-body .ln { color: var(--lp-text-4); margin-right: 12px; }
.mk-tk-pair    { color: var(--lp-gold); }
.mk-tk-suited  { color: var(--lp-mint); }
.mk-tk-off     { color: var(--lp-cyan); }
.mk-tk-mix     { color: var(--lp-crimson); }
.mk-editor-ft {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--lp-line);
  font-size: 11px;
  color: var(--lp-text-2);
}
.mk-editor-ft .dot {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(72, 224, 164, 0.14);
  color: var(--lp-mint);
  font-size: 10px;
  font-weight: 900;
}
.mk-editor-ft b { color: var(--lp-mint); }

/* ── Mockup: postflop board (Postflop slide) ───────────────────────────── */
.mk-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mk-board-cards {
  display: flex;
  gap: 7px;
  justify-content: center;
}
.mk-bcard {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FCFAF4, #E9E4D6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 5px;
  font-family: var(--lp-display);
  font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7);
}
.mk-bcard .r { font-size: 13px; color: #1A1326; }
.mk-bcard .s { font-size: 12px; align-self: flex-end; color: #1A1326; }
.mk-bcard.red .r, .mk-bcard.red .s { color: var(--lp-crimson); }
.mk-bcard.empty {
  background: var(--lp-surface-2);
  border: 1px dashed var(--lp-line);
  box-shadow: none;
}
.mk-eq {
  display: flex;
  gap: 10px;
}
.mk-eq-side {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-line);
}
.mk-eq-side .lbl {
  font-family: var(--lp-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-3);
}
.mk-eq-side .val {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
}
.mk-eq-side.hero .val  { color: var(--lp-mint); }
.mk-eq-side.vill .val  { color: var(--lp-crimson); }
.mk-eq-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mk-eq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lp-mono);
  font-size: 10.5px;
  color: var(--lp-text-3);
}
.mk-eq-row .name { width: 74px; }
.mk-eq-row .track {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--lp-surface-3);
  overflow: hidden;
}
.mk-eq-row .track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lp-violet), var(--lp-cyan));
}

/* ── Mockup: 1v1 head-to-head (1v1 slide) ──────────────────────────────── */
.mk-vs {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-vs-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mk-vs-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-line);
}
.mk-vs-player.you { border-color: rgba(72, 224, 164, 0.3); }
.mk-vs-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 20px;
  color: #1A0E04;
}
.mk-vs-player.you .mk-vs-avatar  { background: linear-gradient(150deg, var(--lp-mint), #1B9464); }
.mk-vs-player.opp .mk-vs-avatar  { background: linear-gradient(150deg, var(--lp-crimson), #A31E45); color: #FFF; }
.mk-vs-name { font-size: 12px; font-weight: 600; color: var(--lp-text-2); }
.mk-vs-score {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 30px;
}
.mk-vs-player.you .mk-vs-score { color: var(--lp-mint); }
.mk-vs-player.opp .mk-vs-score { color: var(--lp-crimson); }
.mk-vs-mid {
  font-family: var(--lp-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--lp-text-3);
}
.mk-vs-foot {
  text-align: center;
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--lp-text-3);
}
.mk-vs-foot b { color: var(--lp-gold); }

/* ══ SECTION HEADINGS ══════════════════════════════════════════════════ */
.lp-section { padding: 80px 0; }
.lp-section-hd {
  max-width: 640px;
  margin-bottom: 48px;
}
.lp-section-hd.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.lp-section-hd.center .lp-eyebrow { justify-content: center; }
.lp-h2 {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 16px 0 14px;
}
.lp-section-sub {
  font-size: 17px;
  color: var(--lp-text-2);
  line-height: 1.6;
}

/* ══ FEATURE BAND (6-tile index) ═══════════════════════════════════════ */
.lp-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lp-band-tile {
  padding: 22px;
  border-radius: var(--lp-radius);
  background: linear-gradient(180deg, var(--lp-surface-2), var(--lp-surface));
  border: 1px solid var(--lp-line);
  transition: transform 0.25s var(--lp-ease), border-color 0.25s var(--lp-ease);
}
.lp-band-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 239, 227, 0.16);
}
.lp-band-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  margin-bottom: 14px;
}
.lp-band-tile[data-c="gold"]    .lp-band-ico { color: var(--lp-gold);    background: rgba(240,182,92,0.12); }
.lp-band-tile[data-c="cyan"]    .lp-band-ico { color: var(--lp-cyan);    background: rgba(75,221,255,0.12); }
.lp-band-tile[data-c="mint"]    .lp-band-ico { color: var(--lp-mint);    background: rgba(72,224,164,0.12); }
.lp-band-tile[data-c="violet"]  .lp-band-ico { color: var(--lp-violet);  background: rgba(133,103,255,0.14); }
.lp-band-tile[data-c="crimson"] .lp-band-ico { color: var(--lp-crimson); background: rgba(255,68,119,0.14); }
.lp-band-name {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 5px;
}
.lp-band-desc { font-size: 13.5px; color: var(--lp-text-3); line-height: 1.5; }

/* ══ FEATURE SECTIONS (alternating) ════════════════════════════════════ */
.lp-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.lp-feat.flip .lp-feat-copy  { order: 2; }
.lp-feat.flip .lp-feat-visual { order: 1; }
.lp-feat-copy .lp-h2 { font-size: clamp(28px, 3.4vw, 42px); }
.lp-feat-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-feat-list li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  color: var(--lp-text-2);
  line-height: 1.5;
}
.lp-feat-list .ck {
  flex: 0 0 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  margin-top: 1px;
}
.lp-feat[data-c="gold"]    .ck { color: var(--lp-gold);    background: rgba(240,182,92,0.14); }
.lp-feat[data-c="cyan"]    .ck { color: var(--lp-cyan);    background: rgba(75,221,255,0.14); }
.lp-feat[data-c="mint"]    .ck { color: var(--lp-mint);    background: rgba(72,224,164,0.14); }
.lp-feat[data-c="violet"]  .ck { color: var(--lp-violet);  background: rgba(133,103,255,0.16); }
.lp-feat[data-c="crimson"] .ck { color: var(--lp-crimson); background: rgba(255,68,119,0.16); }
.lp-feat-cta { margin-top: 26px; }

/* feature visual card */
.lp-feat-card {
  position: relative;
  border-radius: var(--lp-radius-lg);
  background: linear-gradient(180deg, var(--lp-surface-2), var(--lp-surface));
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow);
  padding: 26px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-feat-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fc, var(--lp-gold)), transparent);
  opacity: 0.6;
}
.lp-feat[data-c="gold"]    .lp-feat-card { --fc: var(--lp-gold); }
.lp-feat[data-c="cyan"]    .lp-feat-card { --fc: var(--lp-cyan); }
.lp-feat[data-c="mint"]    .lp-feat-card { --fc: var(--lp-mint); }
.lp-feat[data-c="violet"]  .lp-feat-card { --fc: var(--lp-violet); }
.lp-feat[data-c="crimson"] .lp-feat-card { --fc: var(--lp-crimson); }
.lp-feat-card .mk-matrix { max-width: 320px; }

/* ══ HOW IT WORKS ══════════════════════════════════════════════════════ */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-step {
  position: relative;
  padding: 30px 24px;
  border-radius: var(--lp-radius);
  background: linear-gradient(180deg, var(--lp-surface-2), var(--lp-surface));
  border: 1px solid var(--lp-line);
}
.lp-step::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-gold), transparent);
  opacity: 0.4;
}
.lp-step-num {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--lp-gold);
  letter-spacing: 0.1em;
}
.lp-step-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: 14px 0 16px;
  border-radius: 12px;
  color: var(--lp-gold);
  background: rgba(240, 182, 92, 0.1);
  border: 1px solid rgba(240, 182, 92, 0.22);
}
.lp-step h4 {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 19px;
  margin-bottom: 7px;
}
.lp-step p { font-size: 14px; color: var(--lp-text-3); line-height: 1.55; }

/* ══ PRICING ═══════════════════════════════════════════════════════════ */
.lp-price {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 52px 40px;
  border-radius: var(--lp-radius-lg);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240, 182, 92, 0.12), transparent 70%),
    linear-gradient(180deg, var(--lp-surface-2), var(--lp-surface));
  border: 1px solid rgba(240, 182, 92, 0.2);
}
.lp-price-tag {
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 92px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--lp-gold-hi), var(--lp-gold) 55%, var(--lp-gold-lo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.lp-price-sub {
  font-family: var(--lp-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--lp-text-2);
  margin-bottom: 20px;
}
.lp-price p {
  font-size: 15.5px;
  color: var(--lp-text-2);
  line-height: 1.6;
  max-width: 42em;
  margin: 0 auto 26px;
}

/* ══ FAQ ═══════════════════════════════════════════════════════════════ */
.lp-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-faq-item {
  border-radius: var(--lp-radius);
  background: linear-gradient(180deg, var(--lp-surface-2), var(--lp-surface));
  border: 1px solid var(--lp-line);
  overflow: hidden;
}
.lp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  text-align: left;
  font-family: var(--lp-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--lp-text);
}
.lp-faq-icon {
  flex: 0 0 22px;
  color: var(--lp-gold);
  transition: transform 0.3s var(--lp-ease);
}
.lp-faq-item.open .lp-faq-icon { transform: rotate(45deg); }
.lp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--lp-ease);
}
.lp-faq-item.open .lp-faq-a { max-height: 320px; }
.lp-faq-a p {
  padding: 0 22px 20px;
  font-size: 15px;
  color: var(--lp-text-2);
  line-height: 1.62;
}

/* ══ FINAL CTA ═════════════════════════════════════════════════════════ */
.lp-final {
  position: relative;
  text-align: center;
  padding: 96px 0 104px;
  overflow: hidden;
}
.lp-final-card {
  position: absolute;
  font-family: var(--lp-display);
  font-weight: 600;
  font-size: 150px;
  color: var(--lp-surface-3);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}
.lp-final-card.a { top: 8%;  left: 8%;  transform: rotate(-16deg); }
.lp-final-card.k { bottom: 6%; right: 8%; transform: rotate(13deg); }
.lp-final-card .suit { color: var(--lp-crimson); opacity: 0.55; }
.lp-final .lp-h2 { font-size: clamp(36px, 5.4vw, 64px); }
.lp-final-sub {
  font-size: 17px;
  color: var(--lp-text-2);
  margin: 14px 0 30px;
}
.lp-final-note {
  margin-top: 18px;
  font-family: var(--lp-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--lp-text-4);
}

/* ══ FOOTER ════════════════════════════════════════════════════════════ */
.lp-footer {
  border-top: 1px solid var(--lp-line);
  padding: 52px 0 30px;
}
.lp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 38px;
}
.lp-footer-brand .lp-nav-logo { margin-bottom: 12px; }
.lp-footer-brand p {
  font-size: 14px;
  color: var(--lp-text-3);
  max-width: 24em;
}
.lp-footer-col h5 {
  font-family: var(--lp-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-text-4);
  margin-bottom: 14px;
}
.lp-footer-col a,
.lp-footer-col span {
  display: block;
  font-size: 14px;
  color: var(--lp-text-2);
  padding: 5px 0;
}
.lp-footer-col a:hover { color: var(--lp-gold); }
.lp-footer-bottom {
  display: flex;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-line-2);
  font-size: 13px;
  color: var(--lp-text-4);
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
  .lp-nav-links { display: none; }
  .lp-nav-cta { display: none; }
  .lp-nav-toggle { display: flex; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .lp-stage { max-width: 460px; margin: 0 auto; width: 100%; }
  .lp-feat-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-feat.flip .lp-feat-copy   { order: 1; }
  .lp-feat.flip .lp-feat-visual { order: 2; }
  .lp-band { grid-template-columns: 1fr 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .lp-wrap { padding: 0 20px; }
  .lp-hero { padding: 44px 0 64px; }
  .lp-section { padding: 60px 0; }
  .lp-band { grid-template-columns: 1fr; }
  .lp-hero-ctas { flex-direction: column; align-items: stretch; }
  .lp-hero-ctas .lp-btn { justify-content: center; }
  .lp-footer-grid { grid-template-columns: 1fr; }
  .lp-final-card { font-size: 96px; }
}