/* Fortress Charts site, in the order-flow software genre (DeepCharts, Exocharts): near-black, centred headings with a
   grey second line, a drawn and animated chart in the hero, a before/after X-ray slider, bordered cards with small
   drawn UI pieces, a vertical feature list beside one screenshot, tiered pricing, two-column FAQ, sitemap footer.
   Fortress colours: violet (heat scale start) for actions, teal up candles, the violet-teal-yellow heat ramp. */
:root {
  --bg: #030304; --bg2: #08080B; --card: #0A0A0E; --card2: #0E0E13; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
  --ink: #F5F5F7; --dim: #9C9CA8; --faint: #64646F;
  --violet: #7A5CFF; --violet2: #9B83FF; --teal: #2CE0B4; --teal2: #21C4A8; --yellow: #FDE725; --down: #7A5CFF; --up: #22D3A0; --red: #FF5A6A;
  --heat: linear-gradient(90deg, #482878, #3B528B, #21918C, #5EC962, #FDE725);
  --f-head: "Outfit", system-ui, sans-serif; --f-body: "Manrope", system-ui, -apple-system, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .stage .c, .stage .bub, .stage .lbl, .stage .ssl { opacity: 1 !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--f-mono); }
h1, h2, h3, h4 { font-family: var(--f-head); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
.fade { background: linear-gradient(180deg, #E9E9EE 0%, #8D8D99 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.center { justify-content: center; text-align: center; }
.kick { font: 600 13px var(--f-body); color: var(--violet2); margin-bottom: 14px; }
.lead { color: var(--dim); font-size: 16.5px; max-width: 56ch; margin: 14px auto 0; }
.head { text-align: center; max-width: 820px; margin: 0 auto 48px; padding-inline: 16px; }
:focus-visible { outline: 2px solid var(--violet2); outline-offset: 3px; border-radius: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 6px; font: 600 15px var(--f-body); color: #fff;
       background: radial-gradient(60% 100% at 50% 100%, #8E74FF 0%, #5A37F0 100%); box-shadow: 0 0 0 1px rgba(155,131,255,.45) inset, 0 8px 28px -10px rgba(122,92,255,.8);
       transition: filter .15s, transform .15s; cursor: pointer; border: 0; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn.ghost { background: transparent; box-shadow: 0 0 0 1px var(--line2) inset; color: var(--dim); }
.btn.ghost:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.btn.wide { width: 100%; }
.btn.off { opacity: .5; pointer-events: none; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; padding-inline: 16px; }

.announce { background: linear-gradient(90deg, #12061f, #170a2e 30%, #06201c 70%, #071a18); border-bottom: 1px solid var(--line); }
.announce a { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; padding: 6px 16px; font-size: 13.5px; color: var(--dim); flex-wrap: wrap; }
.ann-tag { font: 700 11px var(--f-mono); letter-spacing: .12em; color: #fff; font-style: italic; }
.ann-go { color: #fff; font-weight: 600; }

.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding: 12px 16px; background: rgba(3,3,4,.75); backdrop-filter: blur(12px); }
.navin { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 22px; height: 46px; padding: 0 6px 0 14px; border-radius: 10px;
         background: rgba(14,14,19,.85); box-shadow: 0 0 0 1px var(--line) inset; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 800 15px var(--f-head); letter-spacing: .08em; font-style: italic; }
.glyph { display:inline-block;width:26px;height:15px;background:url(/assets/mark.svg) left center/contain no-repeat;transform:none; }
.glyph b { display: none; }
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; }
.menu > a, .ddb { padding: 7px 10px; border-radius: 6px; color: var(--dim); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.menu > a:hover, .ddb:hover, .dd.open .ddb { color: var(--ink); background: rgba(255,255,255,.05); }
.ddb svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dd { position: relative; }
.ddp { position: absolute; top: calc(100% + 10px); left: -10px; width: 320px; padding: 8px; border-radius: 10px; background: #0F0F15; box-shadow: 0 0 0 1px var(--line2) inset, 0 20px 50px rgba(0,0,0,.6);
       display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s; }
.ddp::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ddp.small { width: 240px; }
.dd.open .ddp, .dd:focus-within .ddp { opacity: 1; visibility: visible; transform: none; }
.ddp a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 7px; }
.ddp a:hover { background: rgba(255,255,255,.05); }
.ddp b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.ddp em { display: block; font-style: normal; font-size: 12.5px; color: var(--faint); }
.ic { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font-style: normal; font-size: 14px; color: var(--violet2); background: rgba(122,92,255,.12); box-shadow: 0 0 0 1px rgba(155,131,255,.25) inset; }

.hero { position: relative; text-align: center; padding: 70px 16px 30px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, rgba(122,92,255,.16), transparent 70%); }
.hero > * { position: relative; }
.sub { color: var(--dim); font-size: 17px; max-width: 56ch; margin: 18px auto 0; }
.stage { max-width: 800px; margin: 48px auto 0; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #0B0A12, #050507);
         box-shadow: 0 0 0 1px var(--line) inset, 0 -1px 0 rgba(155,131,255,.6), 0 -18px 60px -28px rgba(122,92,255,.9); aspect-ratio: 1000 / 440; }
.stage svg { width: 100%; height: 100%; display: block; }
.stage .g { stroke: rgba(255,255,255,.04); }
.stage .c { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.stage.play .c { animation: grow .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes grow { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }
.stage .up { fill: var(--up); } .stage .dn { fill: var(--down); }
.stage .wick { stroke-width: 2; } .stage .wick.up { stroke: var(--up); } .stage .wick.dn { stroke: var(--down); }
.stage .ssl { stroke: rgba(255,90,106,.55); stroke-dasharray: 6 6; stroke-width: 1.5; opacity: 0; }
.stage.play .ssl { animation: show .6s ease forwards; animation-delay: .4s; }
.stage .lbl { font: 600 13px var(--f-mono); opacity: 0; }
.stage.play .lbl { animation: show .5s ease forwards; animation-delay: var(--d); }
.stage .bub { opacity: 0; transform-box: fill-box; transform-origin: center; }
.stage.play .bub { animation: pop .6s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: var(--d); }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes show { to { opacity: 1; } }
.stats { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; max-width: 800px; margin: 34px auto 0; padding: 0; }
.stats li { flex: 1 1 0; min-width: 140px; padding: 6px 12px; }
.stats b { display: block; font: 600 30px var(--f-head); letter-spacing: -.02em; }
.stats span { font-size: 13.5px; color: var(--faint); }

.xray { padding: 110px 16px 40px; }
.compare-img { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 12px; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize;
               box-shadow: 0 0 0 1px var(--line2), 0 30px 90px -30px rgba(0,0,0,.9), 0 0 80px -40px rgba(122,92,255,.6); background: #0C1214; }
.compare-img img { width: 100%; pointer-events: none; }
.xr-top { position: absolute; inset: 0; overflow: hidden; transform: translateX(38%); will-change: transform; }
.xr-top > div { transform: translateX(-38%); will-change: transform; }
/* the divider glides on the compositor: the heat layer slides right while its picture slides back, so the picture stays put */
.xr-glide .xr-top, .xr-glide .xr-handle { animation: xrGlide 15s ease-in-out infinite alternate; }
.xr-glide .xr-top > div { animation: xrGlideBack 15s ease-in-out infinite alternate; }
.xr-paused .xr-top, .xr-paused .xr-top > div, .xr-paused .xr-handle { animation-play-state: paused; }
@keyframes xrGlide { from { transform: translateX(16%); } to { transform: translateX(84%); } }
@keyframes xrGlideBack { from { transform: translateX(-16%); } to { transform: translateX(-84%); } }
.xr-top img { width: 100%; height: 100%; object-fit: cover; }
.xr-handle { position: absolute; inset: 0; pointer-events: none; transform: translateX(38%); will-change: transform; }
.xr-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--violet2); box-shadow: 0 0 18px rgba(155,131,255,.8); }
.xr-handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
                  background: var(--violet); color: #fff; font-size: 11px; letter-spacing: -1px; box-shadow: 0 0 0 4px rgba(122,92,255,.25), 0 6px 20px rgba(0,0,0,.5); }
.xr-lbl { position: absolute; bottom: 14px; padding: 4px 10px; border-radius: 5px; font: 600 12px var(--f-mono); background: rgba(3,3,4,.75); color: var(--dim); pointer-events: none; }
.xr-lbl.l { left: 14px; } .xr-lbl.r { right: 90px; color: var(--ink); }

.bento-sec { padding: 110px 16px 40px; }
.bento { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bc { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line) inset; min-width: 0; }
.bc:hover { box-shadow: 0 0 0 1px var(--line2) inset; }
.bc header { display: flex; align-items: center; gap: 12px; }
.bc header h3 { flex: 1; }
.bc > p { color: var(--faint); font-size: 14px; line-height: 1.55; }
.viz { position: relative; margin-top: auto; padding: 14px; border-radius: 8px; background: #050507; box-shadow: 0 0 0 1px var(--line) inset; min-height: 150px; }
.live { font-size: 11px; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.heatviz { display: grid; gap: 6px; align-content: center; }
.heatviz div { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; font-size: 11px; color: var(--faint); }
.heatviz i { display: block; height: 12px; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c)); }
.heatviz .nowline span { color: #fff; background: var(--red); border-radius: 3px; padding: 1px 4px; font-size: 10.5px; text-align: center; }
.heatviz .nowline em { height: 1px; border-top: 1px dashed rgba(255,90,106,.7); }
.extab { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.extab td { padding: 9px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.extab tr:last-child td { border-bottom: 0; }
.extab td:first-child { font-family: var(--f-body); font-weight: 700; color: var(--ink); }
.extab td:nth-child(3) { width: 30%; }
.extab .sh { display: block; height: 6px; border-radius: 3px; background: var(--heat); transition: width .6s; }
.pos { color: var(--red); } .neg { color: var(--up); }
.ladder { display: grid; gap: 2px; font-size: 11px; padding: 10px 12px; align-content: center; }
.ladder .lr { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 8px; height: 13px; }
.ladder .lr i { height: 10px; border-radius: 1px; }
.ladder .b i { justify-self: end; background: linear-gradient(270deg, rgba(34,211,160,.85), rgba(34,211,160,.15)); }
.ladder .a i { justify-self: start; background: linear-gradient(90deg, rgba(122,92,255,.9), rgba(122,92,255,.15)); }
.ladder .lr span { text-align: center; color: var(--faint); }
.ladder .lr.mid span { color: #fff; background: rgba(255,255,255,.08); border-radius: 3px; }
.ladder .lr.wall span { color: var(--yellow); }
.mini { width: 100%; height: 120px; }
.mini .lv { stroke-width: 1.2; stroke-dasharray: 5 5; } .mini .bsl { stroke: rgba(253,231,37,.6); } .mini .ssl { stroke: rgba(255,90,106,.7); }
.mini .cs line { stroke: var(--down); stroke-width: 2; }
.mini .up { fill: var(--up); } .mini .dn { fill: var(--down); }
.mini .hit { fill: var(--yellow); stroke: #050507; stroke-width: 2; }
.tag { position: absolute; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; }
.tag.t1 { right: 14px; top: 14px; color: #1a1600; background: var(--yellow); }
.tag.t2 { left: 70px; bottom: 12px; color: #fff; background: var(--red); }
.fvgviz { display: grid; align-content: center; gap: 12px; }
.frow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; align-items: baseline; }
.frow b { font-size: 30px; font-weight: 600; color: var(--teal); }
.frow.soft { color: var(--faint); font-size: 11px; }
.meter { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--heat); }
.keys { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; align-content: center; }
kbd { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 8px; font: 600 18px var(--f-mono); color: var(--ink);
      background: linear-gradient(180deg, #1A1A22, #101016); box-shadow: 0 0 0 1px var(--line2) inset, 0 3px 0 #000; }
.keys > span { color: var(--faint); }
.keys em { flex-basis: 100%; text-align: center; font-style: normal; font-size: 11px; letter-spacing: .08em; color: rgba(253,231,37,.75); margin-top: 6px; }

.tour { padding: 110px 16px 40px; }
.tourbox { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; align-items: center;
           padding: 30px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px rgba(122,92,255,.35) inset, 0 0 60px -30px rgba(122,92,255,.7); }
.tour-list h2 { margin-bottom: 18px; font-size: clamp(28px, 3vw, 38px); }
.ti { all: unset; display: block; box-sizing: border-box; width: 100%; cursor: pointer; padding: 14px 16px; border-radius: 8px; margin-top: 6px; border-left: 2px solid transparent; }
.ti b { display: block; font: 600 16px var(--f-head); color: var(--dim); }
.ti span { display: block; font-size: 13.5px; color: var(--faint); margin-top: 2px; }
.ti:hover b { color: var(--ink); }
.ti.on { background: rgba(122,92,255,.08); border-left-color: var(--violet2); }
.ti.on b { color: var(--violet2); }
.ti:focus-visible { outline: 2px solid var(--violet2); }
.tour-shot { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line2); background: #0C1214; }
.tour-shot img { transition: opacity .2s; }

.pricing { padding: 110px 16px 40px; }
.tiers { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tier { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line) inset; }
.tier.hot { box-shadow: 0 0 0 1px rgba(155,131,255,.55) inset, 0 20px 60px -30px rgba(122,92,255,.8); padding-top: 44px; }
.ribbon { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: grid; place-items: center; border-radius: 10px 10px 0 0; font: 600 11.5px var(--f-body); background: var(--violet); color: #fff; }
.tier h3 { font-size: 22px; text-align: center; }
.tsub { text-align: center; color: var(--faint); font-size: 13px; }
.amt { text-align: center; font: 600 40px var(--f-head); margin: 6px 0; }
.amt em { font-style: normal; font-size: 14px; color: var(--faint); font-weight: 400; margin-left: 4px; }
.amt.soon { color: var(--dim); }
.tl { font-size: 12px; color: var(--faint); margin-top: 8px; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.tier li { position: relative; padding-left: 26px; }
.tier li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 3px; font-size: 10px; color: #fff; background: var(--violet); }
.tier ul.planned li { color: var(--dim); } .tier ul.planned li::before { background: rgba(255,255,255,.1); color: var(--dim); }

.faq { padding: 110px 16px 40px; }
.faqbox { max-width: 1000px; margin: 0 auto; padding: 30px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px rgba(122,92,255,.3) inset; }
.faqbox h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 24px; }
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
details { border-radius: 6px; background: #121218; }
summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 16px; font: 600 14.5px var(--f-body); }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--dim); font-size: 16px; width: 12px; }
details[open] summary::before { content: "–"; }
details[open] summary { color: var(--violet2); }
details p { padding: 0 16px 16px 40px; color: var(--dim); font-size: 14px; }

.final { padding: 120px 16px; text-align: center; background: radial-gradient(50% 70% at 50% 100%, rgba(122,92,255,.16), transparent 70%); }
.foot { border-top: 1px solid var(--line); }
.footin { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 24px; padding: 50px 16px 36px; }
.fb p { color: var(--faint); font-size: 13.5px; margin-top: 12px; }
.fc { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--dim); }
.fc h4 { font: 600 14px var(--f-head); color: var(--ink); margin-bottom: 4px; }
.fc a:hover { color: var(--ink); }
.footbot { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 16px 34px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

.legal { padding: 70px 16px 100px; max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 10px; }
.legal h2 { font-size: 21px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--dim); max-width: 70ch; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }

@media (max-width: 900px) {
  .menu { display: none; }
  .navin { justify-content: space-between; }
  .bento { grid-template-columns: 1fr; }
  .tourbox { grid-template-columns: 1fr; padding: 18px; }
  .tiers, .qgrid { grid-template-columns: 1fr; }
  .footin { grid-template-columns: 1fr 1fr; }
  .fb { grid-column: 1 / -1; }
  .xr-lbl.r { right: 14px; }
}

/* ================================================================ motion layer (site/motion.js) */
.lightfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.lightfront { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.announce, .nav, main, .foot { position: relative; z-index: 1; }
.nav { z-index: 50; }

/* reveals: only when JS runs with motion allowed; at rest everything is visible */
.motion { scroll-behavior: auto; }
.motion [data-reveal], .motion [data-stagger] > * { opacity: 0; transform: translateY(32px); filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(.16,.84,.24,1), transform 1.2s cubic-bezier(.16,.84,.24,1), filter 1s cubic-bezier(.16,.84,.24,1); }
.motion [data-reveal].in, .motion [data-stagger] > .in { opacity: 1; transform: none; filter: none; }

/* hero chart: a slowly turning light border and a tilt that follows the mouse */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.stagewrap { max-width: 800px; margin: 48px auto 0; perspective: 1400px; }
.stagewrap .stage { margin: 0; position: relative; transition: transform .25s ease-out; transform-style: preserve-3d; }
.stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(155,131,255,.95) 70%, rgba(44,224,180,.9) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; }
@keyframes spin { to { --ang: 360deg; } }
.stage::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -40%; height: 60%; background: radial-gradient(50% 50% at 50% 0%, rgba(122,92,255,.35), transparent 70%); filter: blur(30px); pointer-events: none; }
.stage svg { position: relative; z-index: 1; }

/* the hero headline breathes in */
.motion .hero h1 .fade { background-size: 100% 200%; animation: shimmer 6s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } }

/* live ticker */
.ticker { position: relative; z-index: 1; margin-top: 60px; overflow: hidden; border-block: 1px solid var(--line); background: rgba(8,8,11,.6); backdrop-filter: blur(6px);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.ticker:hover .tk-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tk-track a { display: inline-flex; align-items: baseline; gap: 9px; padding: 14px 26px; border-right: 1px solid var(--line); font: 500 13px var(--f-mono); white-space: nowrap; color: var(--dim); }
.tk-track a b { font: 600 14px var(--f-head); color: var(--ink); letter-spacing: .02em; }
.tk-track a:hover { background: rgba(255,255,255,.03); }
.tk-track .up { color: var(--up); } .tk-track .dn { color: var(--red); }

/* cards: a light that follows the cursor and a glowing edge */
.bc, .tier, .tourbox, .faqbox { position: relative; isolation: isolate; overflow: hidden; }
.bc::before, .tier::before, .tourbox::before, .faqbox::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(122,92,255,.14), transparent 60%); }
.bc:hover::before, .tier:hover::before, .tourbox:hover::before, .faqbox:hover::before { opacity: 1; }
.bc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(155,131,255,.8), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bc:hover::after { opacity: 1; }
.bc { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.bc:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line2) inset, 0 24px 60px -30px rgba(122,92,255,.55); }

/* small living details inside the cards */
.motion .heatviz i { animation: heatpulse 4s ease-in-out infinite; }
.motion .heatviz div:nth-child(2) i { animation-delay: .7s; } .motion .heatviz div:nth-child(4) i { animation-delay: 1.4s; } .motion .heatviz div:nth-child(5) i { animation-delay: 2.1s; }
@keyframes heatpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
.motion .meter i { transform-origin: left; animation: fill 2.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fill { from { transform: scaleX(0); } }
.motion .mini .hit { animation: blink 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 50% { transform: scale(1.6); opacity: .6; } }
.motion kbd { animation: press 3.2s ease-in-out infinite; }
.motion kbd + span + kbd { animation-delay: .15s; }
@keyframes press { 0%, 84%, 100% { transform: none; box-shadow: 0 0 0 1px var(--line2) inset, 0 3px 0 #000; } 88% { transform: translateY(3px); box-shadow: 0 0 0 1px rgba(155,131,255,.7) inset, 0 0 0 #000, 0 0 24px rgba(122,92,255,.6); } }

/* section glow seams */
.xray, .bento-sec, .tour, .pricing, .faq { position: relative; }
.xray::before, .tour::before, .pricing::before { content: ""; position: absolute; left: 50%; top: 40px; width: min(900px, 90vw); height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(155,131,255,.5), rgba(44,224,180,.4), transparent); }
.still .stage::after, .still .tk-track { animation: none; }

/* ================================================================ drawn charts (site/art.js) */
.art { display: block; width: 100%; height: auto; background: radial-gradient(80% 90% at 30% 0%, #0E0B1C, #06060A 70%); }
.art .gl { stroke: rgba(255,255,255,.045); }
.art .axl { stroke: rgba(255,255,255,.07); }
.art .ax, .art .pl, .art .wl, .art .lpt, .art .tgt { font: 500 12px "JetBrains Mono", ui-monospace, monospace; }
.art .ax { fill: #5F6070; } .art .pl { fill: #8A8A99; } .art .wl { fill: #9C9CA8; font-size: 11px; }
.art .u { fill: #22D3A0; } .art .d { fill: #7A5CFF; }
.art .w { stroke-width: 1.6; } .art .w.u { stroke: #22D3A0; } .art .w.d { stroke: #7A5CFF; }
.art .lp { stroke: rgba(255,255,255,.18); stroke-dasharray: 3 4; }
.art .lpb.u { fill: #22D3A0; } .art .lpb.d { fill: #7A5CFF; } .art .lpt { fill: #06060A; font-weight: 700; }
.art .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art .cvd { stroke: #FDE725; } .art .oi { stroke: #9B83FF; } .art .ls { stroke: #2CE0B4; } .art .rsi { stroke: #9B83FF; }
.art .e1 { stroke: #FDE725; stroke-width: 1.8; } .art .e2 { stroke: #2CE0B4; stroke-width: 1.8; }
.art .lvl { stroke-width: 1.4; stroke-dasharray: 7 6; } .art .bsl { stroke: #FDE725; } .art .ssl { stroke: #FF5A6A; }
.art .fvg { fill: rgba(44,224,180,.12); stroke: rgba(44,224,180,.55); stroke-width: 1; }
.art .base { stroke: rgba(255,255,255,.14); stroke-dasharray: 4 5; }
.art .rsiz { fill: rgba(155,131,255,.06); }
.art .db.u { fill: rgba(34,211,160,.75); } .art .db.d { fill: rgba(122,92,255,.75); }
.art .wall.u { fill: rgba(34,211,160,.55); } .art .wall.d { fill: rgba(122,92,255,.6); }
.art .tgb { fill: rgba(10,10,16,.85); stroke-width: 1; } .art .tgb.v { stroke: #9B83FF; } .art .tgb.g { stroke: #22D3A0; } .art .tgb.y { stroke: #FDE725; } .art .tgb.r { stroke: #FF5A6A; } .art .tgb.t { stroke: #2CE0B4; }
.art .tgt.v { fill: #C9BCFF; } .art .tgt.g { fill: #7EF0CC; } .art .tgt.y { fill: #FDE725; } .art .tgt.r { fill: #FF8A96; } .art .tgt.t { fill: #7EF0E0; }

/* animation: candles grow in, then overlays: lines draw, bands fade in from the left, bubbles pop, tags appear */
.art .c, .art .db { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.art.play .c, .art.play .db { animation: artGrow .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 26ms); }
@keyframes artGrow { from { opacity: 0; transform: scaleY(.1) translateY(6px); } to { opacity: 1; transform: none; } }
.art .ln { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.art.play .ln { animation: artDraw 2.2s cubic-bezier(.45,0,.2,1) forwards; animation-delay: var(--d, 1s); }
@keyframes artDraw { to { stroke-dashoffset: 0; } }
.art .band, .art .haze, .art .area, .art .wall { transform-box: fill-box; transform-origin: 0 50%; }
.art .band, .art .area, .art .wall { opacity: 0; }
.art.play .band { animation: artBandIn 1.4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 1s); }
.art.play .area, .art.play .wall { animation: artFade 1.6s ease forwards; animation-delay: var(--d, 1s); }
@keyframes artFade { to { opacity: 1; } }
.art .haze { animation: none; }
.art .bub, .art .tg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.art.play .bub { animation: artPop .8s cubic-bezier(.2,1.5,.4,1) forwards; animation-delay: var(--d, 1.2s); }
.art.play .tg { animation: artFade .8s ease forwards; animation-delay: var(--d, 1.2s); }
@keyframes artPop { from { opacity: 0; transform: scale(.1); } to { opacity: 1; transform: none; } }
.motion .art.play .bub { animation: artPop .8s cubic-bezier(.2,1.5,.4,1) forwards, artBreathe 3.2s ease-in-out 2.4s infinite; }
@keyframes artBreathe { 50% { transform: scale(1.12); } }
.still .art .c, .still .art .db, .still .art .band, .still .art .area, .still .art .wall, .still .art .bub, .still .art .tg { opacity: 1; }
.still .art .ln { stroke-dashoffset: 0; }
/* the bands end at their own strength (--o) */
@keyframes artBandIn { from { opacity: 0; transform: scaleX(0); } to { opacity: var(--o, .8); transform: none; } }
.art .fvg { --o: 1; }
.still .art .band { opacity: var(--o, .8); }

/* X-ray box with drawn charts, the divider glides by itself; nothing in it can be selected or dragged */
.compare-img { cursor: default; touch-action: auto; }
.compare-img, .compare-img * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.xr-base, .xr-top > div { line-height: 0; }
#tourArt { line-height: 0; transition: opacity .26s ease, transform .26s ease; }
#tourArt.swap { opacity: 0; transform: scale(.985); }
/* capture mode (/#shot): drawn charts shown finished, for marketing screenshots; the background keeps moving */
.shot .stage .c, .shot .stage .bub, .shot .stage .lbl, .shot .stage .ssl, .shot .art .c, .shot .art .db, .shot .art .band, .shot .art .area, .shot .art .wall, .shot .art .bub, .shot .art .tg { animation: none !important; opacity: 1 !important; }
.shot .art .ln { animation: none !important; stroke-dashoffset: 0 !important; }
.shot [data-reveal], .shot [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
/* touch screens have no ⌥ key: the snapshot card shows just the watermark there */
@media (hover: none) { .viz.keys kbd, .viz.keys > span { display: none; } }

/* ---- the 8-step analysis: an example of the real panel next to a real share card */
.ana { position: relative; padding: 110px 16px 40px; }
.ana-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: center; }
.ana-panel { position: relative; padding: 16px 16px 10px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(122,92,255,.08), transparent 55%), #0A0A10;
  box-shadow: 0 0 0 1px var(--line2) inset, 0 30px 80px -30px rgba(0,0,0,.9); }
.ana-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--heat); }
.ap-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ap-call { display: block; font: 800 34px/1 var(--f-head); color: var(--red); text-shadow: 0 0 24px rgba(255,90,106,.45); }
.ap-head span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--dim); }
.ap-ring { --p: 0; position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; isolation: isolate; text-align: center; }
.ap-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: conic-gradient(transparent 0 calc(var(--p) * 1%), rgba(255,255,255,.1) calc(var(--p) * 1%) 100%), conic-gradient(#482878, #3B528B 30%, #21918C 55%, #5EC962 80%, #FDE725);
  -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px); mask: radial-gradient(circle, transparent 25px, #000 26px); }
.ap-ring b { font: 700 19px/1 var(--f-head); } .ap-ring i { position: absolute; top: 41px; left: 0; right: 0; font: 600 7.5px var(--f-mono); font-style: normal; letter-spacing: .08em; color: var(--dim); }
.ap-ring b { margin-top: -8px; }
.ap-why { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--violet); font-size: 13px; line-height: 1.5; color: #D4D4DE; }
.ap-plan { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.ap-plan span { color: var(--dim); font-family: var(--f-body); } .ap-plan .en { color: var(--violet2); } .ap-plan .dn { color: var(--red); } .ap-plan .up { color: var(--up); }
.ap-steps { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ap-steps li { display: grid; grid-template-columns: 22px 1fr 64px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: #DADAE4; }
.ap-steps li:last-child { border-bottom: 0; }
.ap-steps .n { font-size: 10.5px; color: var(--faint); } .ap-steps small { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ap-steps li.off .t { color: var(--faint); }
.ap-steps .bar { position: relative; height: 6px; }
.ap-steps .bar::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: var(--line2); }
.ap-steps .bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ap-steps .bull .bar i { left: 50%; background: linear-gradient(90deg, rgba(34,211,160,.25), var(--up)); box-shadow: 0 0 8px rgba(34,211,160,.5); }
.ap-steps .bear .bar i { right: 50%; background: linear-gradient(270deg, rgba(255,90,106,.25), var(--red)); box-shadow: 0 0 8px rgba(255,90,106,.5); }
.ap-steps .bar u { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--faint); }
.ana-card { margin: 0; }
.ana-card img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line2), 0 30px 90px -30px rgba(0,0,0,.9), 0 0 80px -40px rgba(122,92,255,.6); }
.ana-card figcaption { margin-top: 12px; font-size: 14px; color: var(--dim); text-align: center; }
.ana-card figcaption em { display: block; margin-top: 2px; font: 500 11.5px var(--f-mono); font-style: normal; color: var(--faint); }

/* ---- bento: Market Map, levels, bar replay, alerts */
.mapviz svg, .rpviz svg { display: block; width: 100%; height: auto; }
.mapviz .ring { fill: none; stroke: var(--line2); stroke-dasharray: 2 4; }
.mapviz .ln { stroke: rgba(155,131,255,.35); stroke-width: 1.2; } .mapviz .ln.hot { stroke: var(--up); stroke-width: 1.6; }
.mapviz .btc { fill: #F7931A; } .mapviz .nd { fill: var(--violet2); } .mapviz .nd.lead { fill: var(--up); } .mapviz .nd.off { fill: none; stroke: var(--yellow); stroke-width: 1.5; }
.mapviz .lb { font: 600 9.5px var(--f-mono); fill: var(--dim); text-anchor: middle; } .mapviz .lb.c { fill: #07070B; font-weight: 700; font-size: 7.5px; } .mapviz .lb.lead { fill: var(--up); }
.lvviz { display: grid; gap: 7px; align-content: center; font-size: 11.5px; }
.lvviz div { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; align-items: center; } .lvviz b { color: var(--ink); } .lvviz em { font-style: normal; color: var(--faint); }
.lvviz .dn { color: var(--red); } .lvviz .up { color: var(--up); } .lvviz p { margin: 4px 0 0; color: var(--faint); font-size: 10.5px; }
.rpviz .cs .up { fill: var(--up); } .rpviz .cs .dn { fill: var(--violet); }
.rpviz .now { stroke: #2962FF; stroke-width: 2; } .rpviz .fog { fill: rgba(41,98,255,.07); } .rpviz .fogt { font: 600 9px var(--f-mono); fill: var(--faint); text-anchor: middle; }
.rpbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--dim); }
.rpbar span { padding: 3px 7px; border-radius: 5px; background: rgba(255,255,255,.05); } .rpbar span.on { background: var(--violet); color: #fff; } .rpbar em { margin-left: auto; font-style: normal; color: var(--up); }
.alviz { display: grid; gap: 9px; align-content: center; font-size: 11.5px; }
.alviz div { display: grid; grid-template-columns: 10px 38px 1fr auto; gap: 8px; align-items: center; }
.alviz i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); } .alviz i.on { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.alviz b { color: var(--ink); } .alviz span { color: var(--dim); } .alviz em { font-style: normal; color: var(--faint); }

/* ---- built on public data from: grey marks, colour on hover */
.srcs { padding: 90px 16px 10px; text-align: center; }
.srcs ul { list-style: none; max-width: 1060px; margin: 18px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 38px; }
.srcs li { display: inline-flex; align-items: center; gap: 10px; color: #7C7C88; font: 600 16px var(--f-head); letter-spacing: -.01em; opacity: .75; transition: opacity .2s, color .2s; }
.srcs li:hover { opacity: 1; color: var(--ink); }
.srcs li svg, .srcs li img { width: 24px; height: 24px; flex: none; }
.srcs li img { filter: grayscale(1) brightness(1.6) contrast(.85); border-radius: 5px; transition: filter .2s; }
.srcs li:hover img { filter: none; }
.srcs-note { margin: 22px auto 0; max-width: 60ch; font-size: 12.5px; color: var(--faint); }
@media (max-width: 900px) {
  .ana-grid { grid-template-columns: 1fr; max-width: 560px; }
  .srcs ul { gap: 16px 24px; } .srcs li { font-size: 14px; } .srcs li svg, .srcs li img { width: 20px; height: 20px; }
}

/* looping animations pause while their section is off screen (motion.js adds .offscreen) */
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }

/* the AI signals and game sections, in the tourbox's look */
.sig { padding: 112px 16px 40px; }
.sig-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.sig-grid figure { margin: 0; }
.sig-grid img { border-radius: 8px; box-shadow: 0 0 0 1px var(--line2); }
.sig-grid figcaption, .led-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--faint); }
.led-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.led-head h3 { font-size: 20px; }
.seg2 { display: flex; gap: 2px; padding: 2px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line2) inset; }
.seg2 button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--dim); }
.seg2 button.on { background: var(--violet); color: #fff; }
.seg2 button:focus-visible { outline: 2px solid var(--violet2); }
.led-sum { margin: 12px 0 4px; font: 500 12.5px var(--f-mono); color: var(--dim); min-height: 18px; }
.led { width: 100%; border-collapse: collapse; font: 400 13px var(--f-mono); font-variant-numeric: tabular-nums; }
.led th { padding: 8px 0; text-align: left; font-weight: 500; color: var(--faint); border-bottom: 1px solid var(--line); }
.led td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.led .r { text-align: right; } .led .w { color: var(--up); } .led .l { color: var(--red); } .led .b { font-weight: 600; }
.led-more { all: unset; cursor: pointer; margin-top: 10px; display: inline-block; font-size: 13px; color: var(--dim); text-decoration: underline; }
[hidden] { display: none !important; }
.game { padding: 112px 16px 40px; }
.game .tour-list p { color: var(--dim); font-size: 15px; margin-bottom: 12px; }
.game .tour-list h2 { margin-bottom: 14px; }
.game .tour-list .btn { margin-top: 8px; }
.bento-note { max-width: 1000px; margin: 16px auto 0; font-size: 13px; color: var(--faint); }
.fpviz { display: grid; gap: 2px; font-size: 11px; align-content: center; }
.fpviz div { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 8px; color: var(--faint); text-align: center; }
.fpviz i { display: block; height: 12px; border-radius: 2px; }
.fpviz .s { justify-self: end; background: var(--down); } .fpviz .b { justify-self: start; background: var(--up); }
.rowsviz { display: grid; gap: 9px; font-size: 11.5px; align-content: center; }
.rowsviz div { display: flex; align-items: baseline; gap: 10px; }
.rowsviz b { color: var(--ink); font-weight: 600; min-width: 58px; } .rowsviz span { color: var(--dim); } .rowsviz em { margin-left: auto; font-style: normal; color: var(--faint); }
@media (max-width: 860px) { .sig-grid { grid-template-columns: minmax(0, 1fr); } }

/* Nov 6 2026, after Hyperliquid (user's reference): the screen is used edge to edge. Headline left, text and buttons right,
   the logo strip, then a full-width band with the chart between the coins. Section headers split the same way. */
.ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.navin { max-width: 1344px; }
.nav { padding-inline: clamp(16px, 3vw, 48px); }
.hero { text-align: left; padding: clamp(40px, 5vw, 76px) 0 0; }
.hero-top { max-width: 1416px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 48px; align-items: end; }
.hero h1 { font-size: clamp(44px, 6.2vw, 96px); line-height: 1.02; }
.hero-side .sub { margin: 0; font-size: clamp(16px, 1.25vw, 19px); max-width: 46ch; }
.hero-side .cta { justify-content: flex-start; margin-top: 24px; padding: 0; }
.hero .srcs { max-width: 1416px; margin: clamp(32px, 4vw, 56px) auto 0; padding: 18px clamp(16px, 3vw, 48px); text-align: left; border-top: 1px solid var(--line); }
.hero .srcs ul { max-width: none; margin: 0; justify-content: flex-start; gap: 12px 18px; }
.hero .srcs li { font-size: 12.5px; gap: 6px; white-space: nowrap; } .hero .srcs li svg, .hero .srcs li img { width: 16px; height: 16px; }
@media (min-width: 1360px) { .hero .srcs ul { flex-wrap: nowrap; justify-content: space-between; gap: 10px; } }
.hero .srcs-note { display: none; }
.band { position: relative; padding: clamp(32px, 4vw, 64px) 16px clamp(24px, 3vw, 40px); border-block: 1px solid var(--line); background: radial-gradient(60% 90% at 50% 0%, rgba(122,92,255,.13), transparent 70%); }
.band .stagewrap { max-width: min(1000px, 64vw); margin: 0 auto; }
.band .stage { max-width: none; width: 100%; margin: 0; }
.band .stats { max-width: min(1000px, 64vw); margin: 28px auto 0; }
.band .stats li { text-align: center; }
.stage-tag { position: absolute; right: 14px; top: 10px; z-index: 2; font: 500 11px var(--f-mono); color: var(--faint); }
.ticker { margin-top: 0; border-top: 0; }
.head { max-width: 1320px; padding-inline: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px; text-align: left; align-items: end; }
.head .kick { grid-column: 1; } .head h2 { grid-column: 1; }
.head .lead { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: end; max-width: 60ch; }
.compare-img, .ana-grid, .sig-grid, .bento, .bento-note, .tourbox, .faqbox, .footin, .footbot { max-width: 1320px; }
.tiers { max-width: 1320px; align-items: stretch; }
.cta.center { max-width: 1320px; margin-inline: auto; justify-content: flex-start; padding-inline: 0; text-align: left; }
.final .cta.center { justify-content: center; }
@media (min-width: 1240px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) { .ana-grid { grid-template-columns: 380px minmax(0, 1fr); } }
.final { position: relative; }
@media (max-width: 900px) {
  .hero-top, .head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .head .lead { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .hero-side { margin-top: 18px; }
  .hero .srcs ul { justify-content: flex-start; }
  .band { padding-top: 88px; } .band .stagewrap, .band .stats { max-width: 100%; }
  .ana-grid { max-width: none; }
  .navin { flex-wrap: wrap; height: auto; padding: 6px 6px 6px 14px; row-gap: 2px; }
  .menu { display: flex !important; order: 3; flex-basis: 100%; margin: 0 0 0 -10px; font-size: 13px; }
  .menu > .dd, .menu > a[href^="#"] { display: none; }
  .navin > .btn { margin-left: auto; }
}