/* Logic X marketing site — shared styles
   Ported 1:1 from design_handoff_logicxtrading_site prototypes.
   Page-level layout/visual styles live inline in the HTML (lifted verbatim
   from the approved design files); this file holds everything the prototype
   kept in <style> blocks plus hover states that were style-hover attributes. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #07090d; -webkit-font-smoothing: antialiased; }

/* ---- pulsing live dots ---- */
@keyframes lxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(45,212,191,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(45,212,191,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); }
}
@media (prefers-reduced-motion: reduce) { .lx-pulse { animation: none !important; } }

/* ---- news wire ticker ---- */
@keyframes lxTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.lx-ticker { animation: lxTicker 36s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lx-ticker { animation: none; } }

/* ---- scroll-in reveals ---- */
.lx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.lx-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lx-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- links & buttons (hover states from the prototypes) ---- */
.lx-navlink { color: #92a2b6; text-decoration: none; transition: color .15s ease; }
.lx-navlink:hover { color: #eef3f8; }
.lx-navlink.active { color: #eef3f8; }

.lx-btn { transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
.lx-btn:hover { transform: translateY(-2px); }
.lx-btn-nav:hover { box-shadow: 0 12px 34px rgba(58,123,255,.45) !important; }
.lx-btn-hero:hover { box-shadow: 0 14px 42px rgba(58,123,255,.45) !important; }

.lx-ghost { transition: border-color .18s ease; }
.lx-ghost:hover { border-color: #3a4552 !important; }

.lx-card { transition: border-color .18s ease; }
.lx-card:hover { border-color: #2a313b !important; }

.lx-textlink { transition: color .15s ease; }
.lx-textlink:hover { color: #9dbcff; }

/* ---- segmented toggles (Quant/Plain, Monthly/Annual) ---- */
.lx-seg {
  flex: 1; padding: 9px; border-radius: 8px; text-align: center;
  font: 600 12.5px 'Roboto', sans-serif; cursor: pointer; color: #92a2b6;
  background: transparent; border: 0; transition: background .2s ease, color .2s ease;
}
.lx-seg--pricing { padding: 10px; }
.lx-seg.active { background: #3a7bff; color: #fff; }

/* ---- reversal play-by-play rows (staged reveal) ---- */
.lx-revrow { transition: opacity .45s ease, transform .45s ease; opacity: 0; transform: translateY(-6px); }
.lx-revrow.shown { opacity: 1; transform: none; }
.lx-revalert { transition: opacity .45s ease, transform .45s ease; opacity: 0; transform: translateY(6px); }
.lx-revalert.shown { opacity: 1; transform: none; }

/* ---- responsive (from the prototypes) ---- */
@media (max-width: 1000px) {
  .lx-hero { grid-template-columns: 1fr !important; }
  .lx-howgrid { grid-template-columns: 1fr !important; }
  .lx-features { grid-template-columns: repeat(2, 1fr) !important; }
  .lx-tiegrid { grid-template-columns: 1fr !important; }
  .lx-tiegrid > div:nth-child(2), .lx-tiegrid > div:nth-child(4) { justify-content: center; }
  .lx-cmprow { grid-template-columns: 1fr !important; gap: 8px !important; }
  .lx-demogrid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .lx-navlinks { display: none !important; }
  .lx-menubtn { display: inline-flex !important; }
}
@media (max-width: 640px) {
  .lx-features { grid-template-columns: 1fr !important; }
  /* the hero lean panel's inner grids have a ~400px min-content width —
     stack them so phones don't scroll horizontally (prototype leaves <640px undefined) */
  .lx-leangrid { grid-template-columns: 1fr !important; }
  .lx-statgrid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- mobile menu (production addition per handoff README) ---- */
.lx-menubtn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid #22303d;
  background: transparent; color: #eef3f8; cursor: pointer; padding: 0;
}
.lx-mobilemenu {
  display: none; border-bottom: 1px solid #151a21;
  background: rgba(7,9,13,.97); backdrop-filter: blur(14px);
}
.lx-mobilemenu.open { display: block; }
.lx-mobilemenu a {
  display: block; padding: 15px 24px; color: #92a2b6; text-decoration: none;
  font: 500 15px 'Roboto', sans-serif; border-top: 1px solid #151a21;
}
.lx-mobilemenu a:first-child { border-top: 0; }
.lx-mobilemenu a:hover { color: #eef3f8; }