/* =========================================================================
   OddsLens landing page — its own visual identity, deliberately separate
   from design-system.css's clean SaaS-dashboard look (that stays exactly
   as-is for the admin panel and the logged-in calculator). This page
   targets bettors browsing for the product, not operators running it:
   darker, bolder, gradient/glow-driven, energetic. Scoped entirely under
   .landing-page so nothing here leaks onto any other page — the shared
   header in base.html is untouched and keeps its normal light styling.
   ========================================================================= */

.landing-page, .dashboard-page {
  /* Full-bleed regardless of .app-content's padding/max-width at any
     breakpoint — viewport-relative breakout, not a negative-margin
     mirror of a specific padding value. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  --lp-bg: #05060f;
  --lp-bg-raised: #0d0f22;
  --lp-card-bg: rgba(255, 255, 255, .04);
  --lp-card-bg-strong: rgba(255, 255, 255, .07);
  --lp-border: rgba(255, 255, 255, .10);
  --lp-border-strong: rgba(255, 255, 255, .18);
  --lp-text: #f5f5ff;
  --lp-text-muted: #a5a5cc;
  --lp-text-subtle: #6f6f96;

  --lp-violet: #a855f7;
  --lp-cyan: #22d3ee;
  --lp-lime: #bef264;
  --lp-magenta: #f472b6;

  --lp-gradient-brand: linear-gradient(120deg, #7c3aed 0%, #a855f7 40%, #22d3ee 100%);
  --lp-gradient-cta: linear-gradient(120deg, #22d3ee 0%, #a855f7 100%);

  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--font-sans);
  overflow: hidden;
}

.landing-page a { color: inherit; }

/* .app-content's own top/bottom padding (design-system.css) sits outside
   both full-bleed wrappers above -- without this, the page's light
   default body background shows through as a visible seam above the
   header and below the footer/last card on any page using either
   wrapper. Repaints the whole page dark instead of just the wrapper's
   own box, so no seam is possible regardless of content height. */
body:has(.landing-page), body:has(.dashboard-page) { background: #05060f; }

/* ---- Shared header, dark variant (every non-admin page) ----------------
   base.html's single .brand-bar is used everywhere (admin included) --
   the admin panel deliberately keeps its plain light bar (design-system.css,
   untouched); this dark skin only ever applies when base.html adds
   .brand-bar-dark, i.e. never on an /admin/* page. Uses the same --lp-*
   tokens as the rest of this file, defined inline here (rather than only
   under .landing-page/.dashboard-page) since the header sits outside both
   of those wrappers in the DOM. ------------------------------------------- */

.brand-bar.brand-bar-dark {
  --lp-bg: #05060f;
  --lp-card-bg: rgba(255, 255, 255, .04);
  --lp-border: rgba(255, 255, 255, .10);
  --lp-border-strong: rgba(255, 255, 255, .18);
  --lp-text: #f5f5ff;
  --lp-text-muted: #a5a5cc;
  --lp-cyan: #22d3ee;
  --lp-violet: #a855f7;
  --lp-gradient-brand: linear-gradient(120deg, #7c3aed 0%, #a855f7 40%, #22d3ee 100%);
  --lp-gradient-cta: linear-gradient(120deg, #22d3ee 0%, #a855f7 100%);

  background: rgba(5, 6, 15, .78);
  border-bottom: 1px solid var(--lp-border);
  backdrop-filter: blur(14px);
  color: var(--lp-text);
}

.brand-bar-dark .brand-name {
  background: var(--lp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-bar-dark .brand-tagline { color: var(--lp-text-muted); }

.brand-bar-dark .brand-logo {
  height: 32px;
  width: 32px;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--lp-border-strong), 0 8px 20px -8px rgba(168, 85, 247, .6);
}

.brand-bar-dark .brand-nav-link { color: var(--lp-text-muted); }

.brand-bar-dark .brand-nav-link:hover { background: var(--lp-card-bg); color: var(--lp-text); }

.brand-bar-dark .brand-nav-link.is-active { background: rgba(34, 211, 238, .12); color: var(--lp-cyan); }

.brand-bar-dark .status-indicator { color: var(--lp-text-muted); }

.brand-bar-dark .button-primary {
  background: var(--lp-gradient-cta);
  color: #060612;
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(168, 85, 247, .6);
}

.brand-bar-dark .button-primary:hover:not(:disabled) { filter: brightness(1.08); }

.brand-bar-dark .button-secondary {
  background: transparent;
  color: var(--lp-text);
  border-color: var(--lp-border-strong);
}

.brand-bar-dark .button-secondary:hover:not(:disabled) { background: var(--lp-card-bg); border-color: var(--lp-cyan); }

/* ---- Dashboard page: re-themes design-system.css's shared components
   (.card, .stat-tile, .button, .select, .input, .modal-*, .data-table,
   .alert, .badge, .chip, .empty, ...) dark by overriding the semantic
   tokens they already consume -- no component CSS or JS markup needs to
   change. Scoped to .dashboard-page only, so /admin keeps its existing
   light design-system.css theme untouched. ------------------------------ */

.dashboard-page {
  --color-bg: var(--lp-bg);
  --color-surface: var(--lp-card-bg-strong);
  --color-surface-muted: var(--lp-card-bg);
  --color-border: var(--lp-border);
  --color-border-strong: var(--lp-border-strong);
  --color-text: var(--lp-text);
  --color-text-muted: var(--lp-text-muted);
  --color-text-subtle: var(--lp-text-subtle);

  --color-accent: var(--lp-cyan);
  --color-accent-hover: #67e8f9;
  --color-accent-active: #a5f3fc;
  --color-accent-soft-bg: rgba(34, 211, 238, .12);
  --color-accent-soft-border: rgba(34, 211, 238, .35);
  --color-accent-text: var(--lp-cyan);

  --color-success: var(--lp-lime);
  --color-success-hover: #a3e635;
  --color-success-soft-bg: rgba(190, 242, 100, .12);
  --color-success-soft-border: rgba(190, 242, 100, .35);

  --color-danger: var(--lp-magenta);
  --color-danger-hover: #ec4899;
  --color-danger-soft-bg: rgba(244, 114, 182, .12);
  --color-danger-soft-border: rgba(244, 114, 182, .35);

  --color-warning: #fbbf24;
  --color-warning-hover: #f59e0b;
  --color-warning-soft-bg: rgba(251, 191, 36, .12);
  --color-warning-soft-border: rgba(251, 191, 36, .35);

  --color-focus-ring: rgba(34, 211, 238, .35);
  --color-disabled-bg: rgba(255, 255, 255, .04);
  --color-disabled-text: var(--lp-text-subtle);
  --color-disabled-border: var(--lp-border);

  --color-overlay: rgba(2, 3, 10, .72);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);
}

/* Selects/inputs (design-system.css hardcodes a white select background
   for a light theme) need an explicit dark background -- everything else
   about them already tracks the semantic tokens above. */
.dashboard-page .select,
.dashboard-page .input {
  background: rgba(255, 255, 255, .04);
}

.dashboard-page .select:focus,
.dashboard-page .input:focus {
  background: rgba(255, 255, 255, .06);
}

/* Modals: a translucent dark tint barely dims an already-dark page, so
   the backdrop (and the content behind it) stayed legible through the
   overlay -- fixed with a blur (obscures shapes/text regardless of color
   similarity) plus a stronger, near-opaque overlay and a solid (not
   translucent-card) panel background so the dialog itself stands out
   clearly from the dimmed page behind it. */
.dashboard-page .modal-overlay {
  background: rgba(2, 3, 10, .85);
  backdrop-filter: blur(6px);
}

.dashboard-page .modal-panel {
  background: var(--lp-bg-raised);
  border: 1px solid var(--lp-border-strong);
}

.dashboard-page .button-primary {
  background: var(--lp-gradient-cta);
  color: #060612;
  box-shadow: 0 6px 20px -8px rgba(168, 85, 247, .55);
}

.dashboard-page .button-primary:hover:not(:disabled) { filter: brightness(1.08); }

.dashboard-page .page-title {
  background: var(--lp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.lp-container {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.lp-section { position: relative; padding: var(--space-16) 0; }

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--lp-border-strong);
  background: var(--lp-card-bg);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

.lp-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-lime);
  box-shadow: 0 0 8px 2px rgba(190, 242, 100, .7);
}

/* ---- Hero -------------------------------------------------------------- */

.lp-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}

.lp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.lp-glow-a { width: 520px; height: 520px; top: -180px; left: 50%; transform: translateX(-70%); background: radial-gradient(circle, var(--lp-violet), transparent 70%); }
.lp-glow-b { width: 460px; height: 460px; top: -60px; left: 55%; background: radial-gradient(circle, var(--lp-cyan), transparent 70%); }

.lp-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }

.lp-eyebrow {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.lp-headline {
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.lp-headline-gradient {
  background: var(--lp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-subhead {
  margin: var(--space-6) auto 0;
  max-width: 560px;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--lp-text-muted);
}

.lp-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  text-decoration: none;
}

.lp-button-primary {
  background: var(--lp-gradient-cta);
  color: #060612;
  box-shadow: 0 8px 30px -6px rgba(168, 85, 247, .55);
}

.lp-button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px -6px rgba(168, 85, 247, .7); }

.lp-button-ghost {
  background: transparent;
  color: var(--lp-text);
  border-color: var(--lp-border-strong);
}

.lp-button-ghost:hover { border-color: var(--lp-cyan); background: rgba(34, 211, 238, .08); }

.lp-trust-line {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--lp-text-subtle);
}

/* ---- Sample opportunity card (illustrative, not live data) ------------- */

.lp-mock-wrap { position: relative; z-index: 1; max-width: 480px; margin: var(--space-12) auto 0; }

.lp-mock-card {
  background: var(--lp-card-bg-strong);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: left;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.lp-mock-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--lp-text-subtle);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--space-3);
}

.lp-mock-match { font-size: var(--text-lg); font-weight: 800; }

.lp-mock-meta { color: var(--lp-text-muted); font-size: var(--text-sm); margin-top: 2px; }

.lp-mock-legs { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }

.lp-mock-leg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--lp-border);
  font-size: var(--text-sm);
}

.lp-mock-leg strong { font-variant-numeric: tabular-nums; color: var(--lp-lime); }

.lp-mock-roi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--lp-border);
}

.lp-mock-roi-value { font-size: var(--text-2xl); font-weight: 900; color: var(--lp-lime); }

/* ---- Generic section heading -------------------------------------------- */

.lp-section-head { max-width: 640px; margin: 0 auto var(--space-10); text-align: center; }

.lp-section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -.02em;
  margin: var(--space-3) 0 0;
}

.lp-section-desc { margin-top: var(--space-3); color: var(--lp-text-muted); font-size: var(--text-md); line-height: 1.6; }

/* ---- How it works -------------------------------------------------------- */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.lp-step {
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.lp-step:hover { border-color: var(--lp-border-strong); transform: translateY(-3px); }

.lp-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--text-md);
  background: var(--lp-gradient-brand);
  color: #060612;
  margin-bottom: var(--space-4);
}

.lp-step-title { font-size: var(--text-lg); font-weight: 800; }

.lp-step-desc { margin-top: var(--space-2); color: var(--lp-text-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ---- Feature grid -------------------------------------------------------- */

.lp-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.lp-feature {
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.lp-feature:hover {
  border-color: rgba(168, 85, 247, .5);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .25), 0 20px 40px -20px rgba(168, 85, 247, .45);
  transform: translateY(-3px);
}

.lp-feature-glyph {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  background: rgba(255, 255, 255, .06);
  margin-bottom: var(--space-4);
}

.lp-feature-title { font-size: var(--text-md); font-weight: 800; }

.lp-feature-desc { margin-top: var(--space-2); color: var(--lp-text-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ---- Stat strip ------------------------------------------------------------ */

.lp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  text-align: center;
}

.lp-stat-value {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  background: var(--lp-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-stat-label { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--lp-text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---- Final CTA band -------------------------------------------------------- */

.lp-cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(34, 211, 238, .25));
  border: 1px solid var(--lp-border-strong);
  overflow: hidden;
}

.lp-cta-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; }

.lp-cta-desc { margin-top: var(--space-3); color: var(--lp-text-muted); max-width: 480px; margin-left: auto; margin-right: auto; }

/* ---- Footer ----------------------------------------------------------------- */

.lp-footer {
  border-top: 1px solid var(--lp-border);
  padding: var(--space-8) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--lp-text-subtle);
  font-size: var(--text-xs);
}

/* ---- Pricing (shared by the landing page's pricing section and the
   authenticated /pricing checkout page, so they can never look or
   price things differently) ------------------------------------------ */

.lp-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.lp-plan-card {
  position: relative;
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.lp-plan-card:hover { transform: translateY(-3px); }

.lp-plan-card.is-featured {
  border-color: var(--lp-violet);
  background: var(--lp-card-bg-strong);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .4), 0 25px 50px -20px rgba(168, 85, 247, .5);
}

.lp-plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: var(--lp-gradient-cta);
  color: #060612;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lp-plan-label { font-size: var(--text-md); font-weight: 700; color: var(--lp-text-muted); }

.lp-plan-price { margin-top: var(--space-3); font-size: var(--text-3xl); font-weight: 900; letter-spacing: -.02em; }

.lp-plan-price small { font-size: var(--text-sm); font-weight: 600; color: var(--lp-text-muted); }

.lp-plan-savings { margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--lp-lime); }

.lp-plan-cta { margin-top: var(--space-6); width: 100%; }

/* ---- Auth (login/signup) ------------------------------------------------------ */

.lp-auth-wrap {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
}

.lp-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--lp-card-bg-strong);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.lp-auth-title { font-size: var(--text-2xl); font-weight: 900; letter-spacing: -.02em; }

.lp-auth-subtitle { margin-top: var(--space-2); color: var(--lp-text-muted); font-size: var(--text-sm); }

.lp-field { margin-top: var(--space-5); }

.lp-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lp-text-muted);
  margin-bottom: var(--space-2);
}

.lp-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--lp-border-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--lp-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lp-input::placeholder { color: var(--lp-text-subtle); }

.lp-input:focus {
  outline: none;
  border-color: var(--lp-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .25);
}

.lp-field-error { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--lp-magenta); }

.lp-field-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--lp-text-muted); }

.lp-alert-error {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(244, 114, 182, .12);
  border: 1px solid rgba(244, 114, 182, .35);
  color: #fbcfe8;
  font-size: var(--text-sm);
}

.lp-alert-info {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(190, 242, 100, .12);
  border: 1px solid rgba(190, 242, 100, .35);
  color: var(--lp-lime);
  font-size: var(--text-sm);
  text-align: center;
}

.lp-auth-submit { width: 100%; margin-top: var(--space-6); }

.lp-auth-footer { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--lp-text-muted); }

.lp-auth-footer a { color: var(--lp-cyan); font-weight: 700; text-decoration: none; }

.lp-auth-footer a:hover { text-decoration: underline; }

/* ---- Responsive -------------------------------------------------------------- */

@media (max-width: 860px) {
  .lp-steps, .lp-features, .lp-pricing { grid-template-columns: 1fr; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .lp-cta-row { flex-direction: column; align-items: stretch; }
  .lp-button { width: 100%; }
}