/* SeasonalQuant landing — intro, feature cards, stats. Scoped under .sq-landing. */

/* ---------- Shared section bits ---------- */
.sq-landing__h2 {
  max-width: 600px; text-align: center;
  font: 600 48px/56px var(--sq-font-display); color: var(--sq-text-default);
}
.sq-landing__h2--nowrap { max-width: none; white-space: nowrap; }
.sq-landing__grad {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #cad8ff 0%, #7097f9 52.404%, #4a6afb 100%);
}

/* ---------- Intro statement ---------- */
.sq-landing__intro { display: flex; justify-content: center; padding: 100px 80px; background: var(--sq-bg); }
.sq-landing__intro-text { width: 600px; font: 500 36px/44px var(--sq-font-display); color: var(--sq-text-default); }
.sq-landing__intro-text span { color: #404040; }
/* scroll-driven fill: words and letters are created by script.js, --p goes 0 -> 1 per letter */
.sq-landing__intro-text .sq-landing__word { display: inline-block; }
.sq-landing__intro-text .sq-landing__letter {
  --p: 0;
  color: color-mix(in srgb, var(--sq-text-default) calc(var(--p) * 100%), #404040);
}

/* ---------- Feature cards ---------- */
.sq-landing__features {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  padding: 100px 80px; background: var(--sq-bg);
}
.sq-landing__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1280px; }
.sq-landing__card { display: flex; flex-direction: column; background: #131216; border-radius: 24px; overflow: clip; }
.sq-landing__card-visual { position: relative; flex: none; width: 100%; aspect-ratio: 328 / 250; overflow: clip; }
.sq-landing__card-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.sq-landing__card-title { font: 600 24px/32px var(--sq-font-display); color: var(--sq-text-default); }
.sq-landing__card-text { font: 400 16px/24px var(--sq-font-body); color: #8c8c8c; }
.sq-landing__card-fade {
  position: absolute; left: 0; right: 0; bottom: -0.24px; height: 60px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(19,18,22,0), #131216);
}

/* decorative glow behind each preview */
.sq-landing__card-bg {
  position: absolute; width: 405.929px; height: 402.946px; pointer-events: none;
  top: calc(50% - 21.81px); left: calc(50% - 111.06px);
  transform: translate(-50%, -50%) rotate(-175.56deg);
}
.sq-landing__card-bg img { position: absolute; max-width: none; }
.sq-landing__card-bg--1 img { left: -21.91%; top: -5.08%; width: 132.03%; height: 136.14%; }
.sq-landing__card-bg--2 img { left: -61.12%; top: 0; width: 161.12%; height: 135%; }
.sq-landing__card-bg--3 img { left: -53.63%; top: 0; width: 153.63%; height: 146.04%; }
.sq-landing__card-bg--4 { left: calc(50% + 113.94px); transform: translate(-50%, -50%) rotate(-4.44deg) scale(1, -1); }
.sq-landing__card-bg--4 img { left: -57.66%; top: 0; width: 157.66%; height: 143.37%; }

/* 1 · screener table */
.sq-landing__table {
  position: absolute; left: calc(50% + 85.5px); top: calc(50% + 38.62px); transform: translate(-50%, -50%);
  display: flex; width: max-content; overflow: clip;
  border: 1px solid #1b1b1d; border-radius: 16px;
}
.sq-landing__col { flex: none; display: flex; flex-direction: column; }
.sq-landing__th, .sq-landing__td { display: flex; align-items: center; border-right: 1px solid; border-bottom: 1px solid; }
.sq-landing__th { min-height: 48px; padding: 12px 8px; background: #1b1b1d; border-color: #1f1f23; font: 500 14px/16px var(--sq-font-ui); color: var(--sq-text-default); white-space: nowrap; }
.sq-landing__th > span:first-child { padding: 0 4px; }
.sq-landing__td { min-height: 40px; padding: 8px 12px; background: #161618; border-color: #1b1b1d; font: 400 14px/16px var(--sq-font-ui); color: var(--sq-text-default); }
.sq-landing__td--subtle { color: var(--sq-text-subtle); }
.sq-landing__td--success { color: var(--sq-text-success); }
.sq-landing__td u, .sq-landing__th-skeleton { display: block; height: 16px; border-radius: 100px; background: #1b1b1d; text-decoration: none; }
.sq-landing__th-skeleton { width: 70px; background: #262629; }
.sq-landing__ibtns { display: flex; }
.sq-landing__ibtn { display: flex; align-items: center; justify-content: center; padding: 4px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.sq-landing__ibtn--active { background: #26262b; }
.sq-landing__ibtn img { width: 16px; height: 16px; }

/* shared little tooltips */
.sq-landing__chip {
  display: flex; flex-direction: column; padding: 8px 10px;
  background: #1f1f23; border: 1px solid #303036; border-radius: 8px;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.25));
  font: 400 12px/16px var(--sq-font-ui); white-space: nowrap;
}
.sq-landing__chip-main { font-size: 12px; color: var(--sq-text-default); }
.sq-landing__chip-sub { font-size: 10px; color: var(--sq-text-subtlest); }
.sq-landing__chip-sub--12 { font-size: 12px; }

/* 2 · window heat map */
.sq-landing__heatpanel {
  position: absolute; left: calc(50% + 21px); top: calc(50% + 35.12px); transform: translate(-50%, -50%);
  padding: 24px 20px 20px; background: #131216; border-radius: 16px;
}
.sq-landing__heatview { position: relative; width: 244px; height: 197px; overflow: clip; }
.sq-landing__heatbox { position: absolute; left: 0.5px; top: 0; width: 212.5px; height: 197px; }
.sq-landing__heat {
  position: absolute; inset: 0 0 4.57% 11.53%;
  display: grid; grid-template-columns: repeat(19, 8px); grid-auto-rows: 8px; gap: 2px;
}
.sq-landing__heat i, .sq-landing__heat b { display: block; width: 8px; height: 8px; border-radius: 2px; }
.sq-landing__heat b { visibility: hidden; }
.sq-landing__heat .a { background: #191a1d; }
.sq-landing__heat .b { background: #292d36; }
.sq-landing__heat .c { background: #1e2335; }
.sq-landing__heat .d { background: #223168; }
.sq-landing__heat .e { background: #1b213a; }
.sq-landing__heat .f { background: #375dfa; border-radius: 100px; }
.sq-landing__heat-exit {
  position: absolute; left: 0; top: 45.69%; bottom: 29.95%; width: 7.53%;
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font: 400 12px/16px var(--sq-font-ui); color: #67676f;
}
.sq-landing__heat-edge { position: absolute; left: 10.12%; top: 0; right: 0; bottom: 3.05%; }
.sq-landing__heat-edge img { position: absolute; max-width: none; left: -0.26%; top: 0; width: 100.26%; height: 100.26%; }
.sq-landing__heat-entry {
  position: absolute; left: 99.5px; top: 181px; width: 37px; height: 16px; background: #131216;
  font: 400 12px/16px var(--sq-font-ui); color: #525259; text-align: center;
}
.sq-landing__heat-bar {
  position: absolute; left: 234px; top: 24px; width: 10px; height: 144px;
  background: linear-gradient(180deg, #131216 0%, #375dfa 13.462%, #223168 51.442%, #191a1d 91.827%, #131316 100%);
}
.sq-landing__heatview > .sq-landing__chip { position: absolute; left: 73px; top: 38px; }

/* 3 · backtest bars */
.sq-landing__barpanel {
  position: absolute; left: calc(50% + 0.69px); top: calc(50% + 15.12px); transform: translate(-50%, -50%);
  padding: 20px 22px 16px; background: #131216; border-radius: 16px;
}
.sq-landing__bars { position: relative; width: 223.31px; height: 143.06px; }
.sq-landing__bars > i { position: absolute; display: block; width: 10px; }
.sq-landing__bars > i.t { border-radius: 4px 4px 0 0; }
.sq-landing__bars > i.b { border-radius: 0 0 4px 4px; }
.sq-landing__bars > i.sq-landing__bar-glow {
  left: 110px; top: 0; width: 14px; height: 106px; border-radius: 0;
  background: linear-gradient(to bottom, rgba(126,163,255,0), rgba(126,163,255,.4) 49.519%, rgba(126,163,255,0));
}
.sq-landing__bars-base { position: absolute; max-width: none; left: 0.81px; top: 120.56px; width: 222.5px; height: 1px; }
.sq-landing__year { position: absolute; top: 127.06px; font: 400 10px/16px var(--sq-font-ui); color: #525259; white-space: nowrap; }
.sq-landing__cursor { position: absolute; left: 111.75px; top: 46.06px; width: 18px; height: 18px; }
.sq-landing__cursor img { position: absolute; max-width: none; left: 3.9px; top: 1.65px; width: 11.26px; height: 15.88px; }
.sq-landing__chip--gain { position: absolute; left: 131.75px; top: 61.06px; color: var(--sq-text-success); }
.sq-landing__stat-chip {
  position: absolute; left: calc(50% - 88px); top: calc(50% - 68.38px); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 4px; width: 96px; padding: 10px 12px;
  background: #1f1f23; border: 1px solid #303036; border-radius: 12px;
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,.08));
  font: 400 12px/16px var(--sq-font-ui);
}
.sq-landing__stat-chip .sq-landing__chip-main { font-size: 14px; }

/* 4 · forecast */
.sq-landing__fpanel {
  position: absolute; left: calc(50% + 18.5px); top: calc(50% + 34.12px); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; overflow: clip; background: #131216; border-radius: 16px;
}
.sq-landing__fhead { padding: 4px; }
.sq-landing__fhead-in {
  display: flex; align-items: center; gap: 4px; padding: 8px 12px;
  background: #191a1d; border: 1px solid #26262b; border-radius: 12px;
  font: 400 12px/16px var(--sq-font-ui); color: var(--sq-text-default); white-space: nowrap;
}
.sq-landing__badge { padding: 2px 6px; background: #1f1f23; border-radius: 4px; font-size: 10px; color: var(--sq-text-subtle); }
.sq-landing__fchart { position: relative; box-sizing: content-box; width: 231px; height: 157px; padding: 16px 24px 20px; }
.sq-landing__fchart > * { position: absolute; max-width: none; }
.sq-landing__fpaths { left: 24px; top: 16px; width: 231px; height: 117px; }
.sq-landing__fpaths img { position: absolute; max-width: none; left: -0.21%; top: -0.43%; width: 100.37%; height: 100.86%; }
.sq-landing__fbase { left: 24px; top: calc(16px + 130.5px); width: 231px; height: 1px; }
.sq-landing__ftoday { left: calc(24px + 16.5px); top: calc(16px + 65px); width: 131px; height: 1px; transform: rotate(-90deg); }
.sq-landing__fdot {
  left: calc(24px + 76px); top: calc(16px + 67px); padding: 3px; border-radius: 40px; background: #6677a1;
  box-shadow: 0 0 32px 4px rgba(171,195,255,.75);
}
.sq-landing__fdot i { display: block; width: 6px; height: 6px; border-radius: 40px; background: #c3d4ff; }
.sq-landing__flabels { left: 24px; top: calc(16px + 137px); width: 231px; height: 20px; font: 400 10px/16px var(--sq-font-ui); white-space: nowrap; }
.sq-landing__flabels span { position: absolute; top: 2px; }
.sq-landing__flabels .l { left: 11.5px; transform: translateX(-50%); color: #35343a; }
.sq-landing__flabels .m { left: 82.5px; transform: translateX(-50%); color: #d8d8d9; }
.sq-landing__flabels .r { right: 11.5px; transform: translateX(50%); color: #35343a; }

/* ---------- Stats ---------- */
.sq-landing__stats {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  padding: 100px 80px; background: var(--sq-bg);
}
.sq-landing__stat-row { display: flex; width: 100%; max-width: 1280px; margin: 0; }
.sq-landing__stat {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px; text-align: center;
}
.sq-landing__stat + .sq-landing__stat { box-shadow: inset 1px 0 0 #1b1b1d; }
.sq-landing__stat dt { width: 100%; font: 400 64px/80px var(--sq-font-display); color: var(--sq-text-default); }
.sq-landing__stat dd { width: 100%; margin: 0; font: 400 16px/24px var(--sq-font-body); color: #8c8c8c; }

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