/* ==========================================================================
   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: 72px 0 96px; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.hero-copy .eyebrow { display: block; margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(38px, 6vw, 66px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}
.hero-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 56ch;
  margin-bottom: 32px;
}
.hero-lede em { color: var(--gold-bright); font-style: normal; font-weight: 600; }

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

/* ==========================================================================
   Live terminal
   ========================================================================== */

.hero-panel { position: relative; }

.terminal {
  position: relative;
  z-index: 2;
  background: linear-gradient(165deg, rgba(245, 184, 65, 0.05), transparent 46%), var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  animation: float-panel 9s ease-in-out infinite alternate;
}
@keyframes float-panel { to { transform: translateY(-10px); } }

/* A gradient rim that sweeps once on load — signals "live instrument" without
   a permanent animation running behind the numbers. */
.terminal::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 20%, rgba(245, 184, 65, 0.55), transparent 70%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sweep 2.4s ease-out 0.4s both;
  pointer-events: none;
}
@keyframes sweep { from { background-position: 200% 0; opacity: 0; } 30% { opacity: 1; } to { background-position: -60% 0; opacity: 0.5; } }

.terminal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.terminal-sym { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0.04em; }

.terminal-price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 18px 0 16px;
}
.terminal-price > .mono:first-child {
  font-size: clamp(32px, 4.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.terminal-change { font-size: 14px; font-weight: 500; }

.terminal-verdict {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.verdict-badge {
  font-family: var(--mono);
  font-size: 19px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--wait);
}
.verdict-badge.buy { color: var(--buy); text-shadow: 0 0 22px rgba(34, 197, 94, 0.5); }
.verdict-badge.sell { color: var(--sell); text-shadow: 0 0 22px rgba(239, 68, 68, 0.5); }

.terminal-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}
.terminal-grid > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
}
.terminal-grid .mono { font-size: 15px; font-weight: 500; }

.terminal-foot { display: flex; align-items: center; gap: 12px; }
.terminal-foot .label { flex-shrink: 0; }
.conf-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.conf-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1), background var(--t);
}
.conf-fill.buy { background: linear-gradient(90deg, #15803d, var(--buy)); }
.conf-fill.sell { background: linear-gradient(90deg, #b91c1c, var(--sell)); }

.terminal-hint {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

/* --- floating concept chips ----------------------------------------------
   Decorative, but they name real things the engine looks for, so they read as
   a legend rather than filler. Hidden from assistive tech and from narrow
   screens, where they would collide with the panel. */
.float-chip {
  position: absolute;
  z-index: 3;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(18, 25, 39, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-2);
  white-space: nowrap;
  animation: float-chip 7s ease-in-out infinite alternate;
}
.float-chip .icon { width: 13px; height: 13px; }
.float-chip-1 { top: 6%; left: -8%; color: var(--buy); animation-delay: 0s; }
.float-chip-2 { top: 40%; right: -7%; color: var(--gold-bright); animation-delay: -2.3s; }
.float-chip-3 { bottom: 12%; left: -6%; color: var(--info); animation-delay: -4.6s; }
@keyframes float-chip {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

@media (max-width: 1180px) { .float-chip { display: none; } }

/* ==========================================================================
   Trust band
   --------------------------------------------------------------------------
   Sits directly under the hero because it is the strongest thing this product
   can say and the least believable if it comes later: everything is checkable
   without an account.
   ========================================================================== */

.trust-band {
  position: relative; z-index: var(--z-base);
  padding: 26px 0;
  background: linear-gradient(90deg, rgba(245, 184, 65, 0.07), rgba(56, 189, 248, 0.04));
  border-block: 1px solid var(--border);
}
.trust-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.trust-lead { display: flex; align-items: flex-start; gap: 16px; max-width: 72ch; }
.trust-lead > .icon { color: var(--gold); margin-top: 3px; }
.trust-lead h2 { font-size: 18px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.02em; }
.trust-lead p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.trust-actions { flex-shrink: 0; }

/* ==========================================================================
   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);
}

/* ==========================================================================
   When it refuses
   ========================================================================== */

.refuse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}
.refuse { position: relative; transition: border-color var(--t); }
.refuse:hover { border-color: var(--border-strong); }
.refuse-tag {
  display: inline-block;
  margin-bottom: 13px;
  padding: 4px 11px;
  border-radius: var(--r-sm);
  background: var(--wait-wash);
  border: 1px solid var(--border-strong);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-2);
}
.refuse h3 { font-size: 15px; margin-bottom: 9px; }
.refuse p { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.refuse-foot { margin-top: 24px; }

/* ==========================================================================
   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;
}

/* ==========================================================================
   Fit / unfit
   ========================================================================== */

.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}
.fit h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px;
  margin-bottom: 15px;
}
.fit ul { list-style: none; display: grid; gap: 11px; }
.fit li {
  position: relative;
  padding-left: 17px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.fit li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.fit-yes { border-color: rgba(34, 197, 94, 0.26); }
.fit-yes h3 .icon { color: var(--buy); }
.fit-no { border-color: rgba(239, 68, 68, 0.22); }
.fit-no h3 .icon { color: var(--sell); }

/* ==========================================================================
   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) {
  .hero-inner, .delivery-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 48px 0 72px; }
  .hero-panel { max-width: 480px; }
  .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; }
  .terminal { padding: 18px; }
  .terminal-grid { grid-template-columns: 1fr 1fr; }
  .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; }
}

@media (max-width: 400px) {
  .terminal-grid { grid-template-columns: 1fr; }
}