/* ==========================================================================
   Landing page
   --------------------------------------------------------------------------
   Depth is built from layered light rather than heavy chrome: a slow gradient
   mesh, a faint grid, and elements that drift a few pixels. Motion is used to
   direct attention on arrival and then get out of the way — nothing here loops
   forever in the corner of the eye, and every effect collapses under
   prefers-reduced-motion (handled globally in theme.css).
   ========================================================================== */

.icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon-lg { width: 22px; height: 22px; }

.kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  font-family: var(--mono);
  font-size: 0.88em;
  font-weight: 600;
  color: var(--gold-bright);
}

/* ==========================================================================
   Ambient background
   ========================================================================== */

/* A grid that fades out down the page — gives the hero a sense of a plane
   without drawing a box around anything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 620px at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 620px at 50% 0%, #000 20%, transparent 78%);
}

/* Two slow-moving colour fields. Long durations and tiny distances, so it
   reads as light shifting rather than something animating. */
.bg-glow::after,
.bg-glow::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.bg-glow::before {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(245, 184, 65, 0.16), transparent 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.bg-glow::after {
  width: 40vw; height: 40vw;
  max-width: 540px; max-height: 540px;
  top: 8vw; right: -10vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12), transparent 68%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(6vw, 5vw, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-5vw, 7vw, 0) scale(1.08); } }

/* ==========================================================================
   Navigation
   ========================================================================== */

.lnav {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: 14px 0;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
/* Condenses into a solid bar once the hero is behind it, so the links stay
   legible over content instead of fighting it. */
.lnav.stuck {
  background: rgba(5, 7, 13, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.lnav-inner {
  width: 100%; max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex; align-items: center; gap: 20px;
}
.lnav .brand { margin-right: auto; }
.lnav-links { display: flex; align-items: center; gap: 4px; }
.lnav-links a {
  position: relative;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-2);
  transition: color var(--t), background var(--t);
}
.lnav-links a:hover { color: var(--text); background: var(--surface-2); }
.lnav-actions { display: flex; align-items: center; gap: 8px; }
.lnav-toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; z-index: var(--z-base); padding: 40px 0 80px; }

/* Two charts side by side, equal width. Equal, not weighted: neither market is
   the headline one, and a wider box would say otherwise. */
.hero-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
/* `minmax(0, 1fr)` above is load-bearing. The chart library sizes itself to its
   container, and a bare `1fr` floors at the content's min-width, so the canvas
   could only ever grow the column — the two charts ratcheted wider on every
   resize and pushed the page into a horizontal scroll. */

.hero-charts .chart-card { margin-bottom: 0; padding: 16px 16px 12px; }
.hero-charts .card-head { margin-bottom: 12px; }
.hero-charts .card-head h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.hero-charts .chart-box { height: 300px; }
.hero-charts .chart-sub { margin-top: 10px; }

.chart-last {
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.chart-last.up { color: var(--buy); }
.chart-last.down { color: var(--sell); }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-3);
}

/* ==========================================================================
   Charts
   --------------------------------------------------------------------------
   The chart library draws into these boxes and cannot read CSS variables, so
   its own colours are set in landing.js and must be kept in step with the
   tokens here. Grid and axes stay recessive: the candles are the data, the
   scaffolding is not.
   ========================================================================== */

.chart-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 22px;
}
.chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.chart-head h3 { font-size: 15px; font-weight: 700; }
.chart-head .muted { font-weight: 500; }
.chart-sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
/* landing.css loads after theme.css, so the bare `.up` / `.down` utilities lose
   to `.chart-sub` on source order despite equal specificity. */
.chart-sub.up { color: var(--buy); }
.chart-sub.down { color: var(--sell); }

.chart-box { width: 100%; height: 380px; }
.chart-box-sm { height: 240px; margin-top: 18px; }

.chart-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-3);
}

/* The library injects its own crosshair label; keep it on-theme. */
.chart-box table { min-width: 0; }

/* ==========================================================================
   What the engine reads
   ========================================================================== */

.reads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  align-items: start;
}
.reads-col { display: flex; flex-direction: column; }
.reads-lede { font-size: 13px; line-height: 1.6; color: var(--text-2); margin-bottom: 15px; }

/* Each entry is a real condition name, so the list is set as data rather than
   prose — it is meant to be scanned and recognised, not read. */
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  white-space: nowrap;
}
.reads-col:nth-child(2) .tag-list li {
  background: var(--gold-wash);
  border-color: var(--border-gold);
  color: var(--gold-bright);
}
.reads-foot {
  margin-top: auto;
  padding-top: 15px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-3);
}

/* ==========================================================================
   Backtest
   ========================================================================== */

.backtest-card { padding: 22px; }
.bt-controls {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.bt-controls .field { min-width: 118px; }
.bt-hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin-left: auto;
  align-self: center;
  text-align: right;
}
#bt-status { margin-top: 18px; }
#bt-results { margin-top: 18px; }
#bt-results .stat-row { margin-bottom: 0; }

.caveats { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.caveat {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.caveat::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { position: relative; z-index: var(--z-base); padding: 88px 0; }
.section-alt { background: rgba(12, 17, 27, 0.5); border-block: 1px solid var(--border); }

.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-h {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 14px;
}

/* ==========================================================================
   Steps
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  list-style: none;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.step:hover { border-color: var(--border-gold); background: var(--surface-2); }
.step-n {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.step h3 { font-size: 15px; margin-bottom: 8px; }
.step p { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }

/* ==========================================================================
   Features
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}
.feature { position: relative; overflow: hidden; transition: border-color var(--t); }
.feature:hover { border-color: var(--border-gold); }
/* A soft light that follows nothing — it simply lifts the card on hover,
   without moving it and shifting the grid. */
.feature::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 50% -20%, rgba(245, 184, 65, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.feature:hover::after { opacity: 1; }

.feature-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r);
  background: var(--gold-wash);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  margin-bottom: 16px;
}
.feature-icon .icon { width: 20px; height: 20px; }
.feature h3 { font-size: 15px; margin-bottom: 9px; }
.feature p { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }

.perf-card { margin-top: 26px; }
.perf-card .hint { margin-top: 14px; }

/* ==========================================================================
   Delivery
   ========================================================================== */

.delivery-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.delivery-copy .eyebrow { display: block; margin-bottom: 14px; }

.tick-list { list-style: none; margin-top: 24px; display: grid; gap: 13px; }
.tick-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
}
.tick-list .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--buy); }

/* --- phone mock ----------------------------------------------------------- */
.phone {
  position: relative;
  max-width: 320px;
  margin-inline: auto;
  padding: 12px;
  border-radius: 38px;
  background: linear-gradient(160deg, var(--surface-3), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 70px rgba(245, 184, 65, 0.07);
  animation: float-panel 11s ease-in-out infinite alternate;
}
.phone::before {
  content: "";
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
}
.phone-screen {
  border-radius: 27px;
  background: var(--bg-sunken);
  overflow: hidden;
  padding-top: 14px;
}
.wa-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.wa-name { font-size: 13px; font-weight: 700; }
.wa-status { font-size: 10.5px; color: var(--buy); }
.wa-body { padding: 14px; display: grid; gap: 10px; }
.wa-msg {
  position: relative;
  max-width: 88%;
  padding: 10px 12px 18px;
  border-radius: 12px 12px 12px 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.wa-msg strong { color: var(--text); font-weight: 700; }
.wa-msg .mono { color: var(--gold-bright); font-size: 11.5px; }
.wa-out {
  margin-left: auto;
  border-radius: 12px 12px 3px 12px;
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.24);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 600;
}
.wa-time {
  position: absolute; right: 10px; bottom: 5px;
  font-size: 9.5px;
  color: var(--text-3) !important;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin-inline: auto;
  align-items: start;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  transition: border-color var(--t), background var(--t);
}
.plan:hover { border-color: var(--border-strong); }
.plan-featured {
  border-color: var(--border-gold);
  background: linear-gradient(170deg, rgba(245, 184, 65, 0.07), transparent 52%), var(--surface);
  box-shadow: var(--glow-gold);
}
.plan-tag {
  position: absolute; top: -10px; left: 20px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--text-on-gold);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.plan-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.plan-desc { font-size: 13px; color: var(--text-2); min-height: 2.6em; }
.plan-price {
  display: flex; align-items: baseline; gap: 7px;
  margin: 16px 0 4px;
}
.plan-amount {
  font-family: var(--mono);
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.04em;
}
.plan-cycle { font-size: 13px; color: var(--text-3); }
.plan-features { list-style: none; display: grid; gap: 10px; margin: 18px 0 22px; }
.plan-features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.5;
  color: var(--text-2);
}
.plan-features .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }
.plan .btn { margin-top: auto; }
.skeleton-plan { border-color: transparent; background: transparent; padding: 0; }

.pay-note { margin-top: 22px; max-width: 60ch; margin-inline: auto; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list { display: grid; gap: 10px; }
.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t), background var(--t);
}
.faq:hover { border-color: var(--border-strong); }
.faq[open] { border-color: var(--border-gold); background: var(--surface-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that becomes a minus. Drawn in CSS so it needs no icon lookup and
   cannot fall out of sync with the open state. */
.faq summary::after {
  content: "";
  width: 11px; height: 11px;
  flex-shrink: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--gold);
  transition: transform var(--t);
}
.faq[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  transform: rotate(180deg);
}
.faq p {
  padding: 0 18px 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 74ch;
}

/* ==========================================================================
   Closing band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding: 44px;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, rgba(245, 184, 65, 0.11), rgba(56, 189, 248, 0.05) 60%, transparent), var(--surface);
  border: 1px solid var(--border-gold);
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 184, 65, 0.16), transparent 66%);
  filter: blur(50px);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .section-h { margin-bottom: 8px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a {
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  transition: color var(--t);
}
.foot-links a:hover { color: var(--gold); }

/* ==========================================================================
   Scroll reveal
   --------------------------------------------------------------------------
   Elements start shifted and are released by an IntersectionObserver. The
   `js` class is set by the script, so with JavaScript disabled or failed
   everything is simply visible rather than permanently invisible — an
   animation must never be the thing that decides whether content exists.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js [data-reveal].shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .delivery-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 28px 0 64px; }
  /* Side by side, each chart is already narrow at this width; stacked they stay
     wide enough to read a candle. */
  .hero-charts { grid-template-columns: 1fr; }
  .hero-charts .chart-box { height: 260px; }
  .lnav-links { display: none; }
  .lnav-toggle { display: inline-grid; }

  /* Menu opens as a sheet under the bar rather than a drawer — fewer moving
     parts, and it cannot trap focus off-screen. */
  .lnav-links.open {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px; right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .lnav-links.open a { padding: 12px 14px; min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 720px) {
  .section { padding: 60px 0; }
  .container, .container-narrow { padding-inline: 18px; }
  .lnav-actions .btn-ghost, .lnav-actions .btn-secondary { display: none; }
  .cta-band { padding: 30px 24px; }
  .foot-inner { flex-direction: column; align-items: flex-start; }

  /* The bar runs out of room here: the full brand lockup, a call to action and
     a menu button cannot share 375px. The wordmark keeps its line by dropping
     the strapline, and the mark alone carries the identity below that. */
  .lnav-inner { gap: 12px; }
  .lnav .brand-sub { display: none; }
  .lnav .brand-name { font-size: 13.5px; white-space: nowrap; }
  .lnav .brand { gap: 9px; }
  .lnav .brand-mark { width: 34px; height: 34px; font-size: 13px; }
}

@media (max-width: 430px) {
  .lnav .brand-name { display: none; }
  .lnav-actions .btn { padding: 0 14px; font-size: 12.5px; }
}