:root {
  color-scheme: dark;
  --bg: #06080c;
  --text: #edf1f6;
  --muted: #a3aebd;
  --line: #ffffff14;
  --accent: #40e7a2;
  --accent-rgb: 64, 231, 162;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
:root[data-theme="amber"] { --accent: #f5b24a; --accent-rgb: 245, 178, 74; }
:root[data-theme="ice"] { --accent: #67d5f9; --accent-rgb: 103, 213, 249; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--text); font: 15px/1.55 var(--sans); background: var(--bg); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(1160px, 100% - 64px); margin-inline: auto; }
.glass {
  border: 1px solid var(--line); border-radius: 13px; background: rgba(11, 15, 22, .76); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px #ffffff12, 0 14px 36px -18px #000b;
}
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 4; padding: 8px 12px; border-radius: 6px; background: #111923; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); background: #06080cdb; backdrop-filter: blur(12px); }
.nav-in, .nav-actions, nav, .logo { display: flex; align-items: center; }
.nav-in { justify-content: space-between; min-height: 67px; gap: 16px; }
.logo { flex: none; gap: 9px; }
.logo img { display: block; width: clamp(128px, 15vw, 169px); height: auto; mix-blend-mode: screen; }
.version { border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; font: 10px/1.2 var(--mono); color: var(--muted); }
nav { gap: clamp(13px, 2vw, 25px); color: var(--muted); font-size: 13px; }
nav a:hover, .section-head a:hover, .community:hover { color: var(--accent); }
.nav-actions { gap: 8px; }
.community { display: grid; place-items: center; min-width: 32px; height: 36px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
.btn:active { transform: translateY(1px); }
.btn-primary { color: #071411; background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .13); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent), white 14%); }
.btn-outline { border-color: #ffffff24; background: #ffffff05; }
.btn-outline:hover, .btn-ghost:hover { background: #ffffff0d; border-color: #ffffff2b; }
.btn-ghost { color: var(--muted); }

.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: clamp(34px, 5.6vw, 86px);
}
.hero-field {
  position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 50% 24%, #173b36 0%, #0c211f 38%, #080e12 68%, var(--bg) 90%);
  mask-image: linear-gradient(#000 65%, transparent);
}
.hero-field::before {
  content: ""; position: absolute; inset: -16%; opacity: .55;
  background:
    repeating-linear-gradient(165deg, transparent 0 30px, #65f1cc17 31px, transparent 33px 72px),
    repeating-linear-gradient(164deg, transparent 0 87px, #64f7c929 89px, transparent 94px 141px),
    repeating-linear-gradient(164deg, transparent 0 11px, #a1ede20b 12px, transparent 13px 22px);
  mask-image: radial-gradient(ellipse at 48% 40%, #000 12%, transparent 70%);
  animation: field-drift 14s ease-in-out infinite alternate;
}
@keyframes field-drift {
  from { transform: translate3d(-4%, 2%, 0); opacity: .45; }
  to { transform: translate3d(4%, -4%, 0); opacity: .75; }
}
.hero-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  gap: 14px; padding: 14px clamp(9px, 2vw, 24px);
  animation: hero-arrive .75s cubic-bezier(.16,1,.3,1) both;
}
.hero-kicker { font-size: clamp(14px, 2vw, 21px); font-weight: 630; line-height: 1.13; letter-spacing: -.025em; }
.hero-description { align-self: center; color: #b8d0cb; font-size: clamp(12px, 1.4vw, 15px); }
.hero-markets { align-self: center; text-align: right; color: #a3c1b9; font: 11px/1.65 var(--mono); }
.hero-markets span {
  display: inline-block; width: 5px; height: 5px; margin-right: 4px; vertical-align: 2px;
  border-radius: 50%; background: #80eebd;
}
.hero-word {
  position: relative; container-type: inline-size; display: grid; place-items: center; overflow: clip;
  padding-block: clamp(22px, 4.4vw, 64px) clamp(9px, 1.5vw, 22px);
}
.hero-word h1 {
  margin: 0; font-size: min(11vw, 130px); font-size: min(12.2cqi, 148px);
  font-weight: 780; line-height: 1.05; letter-spacing: -.075em; white-space: nowrap;
  color: #edfffc;
  background: linear-gradient(180deg, #f4fffc 18%, #acdbd2 47%, #f1fffb 55%, #8fbbb1 88%);
  background-clip: text; -webkit-text-fill-color: transparent;
  animation: word-arrive 1.05s cubic-bezier(.16,1,.3,1) .06s backwards;
}
.hero-word h1 span {
  background: linear-gradient(180deg, #a8f9db 13%, #4fbf9b 48%, #c3ffec 55%, #46a984 88%);
  background-clip: text;
}
.hero-word.is-scattering { overflow: visible; }
.hero-particles { position: absolute; pointer-events: none; z-index: 1; }
@keyframes word-arrive {
  from { opacity: 0; transform: translateY(90%) scaleY(.92); }
  to { opacity: 1; transform: none; }
}
.hero-actions {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px;
  animation: hero-arrive .8s cubic-bezier(.16,1,.3,1) .17s both;
}
.hero-actions .btn { min-height: 44px; padding-inline: 15px; }
.hero-more { padding-block: 7px; font-size: 13px; color: #c3d4d0; transition: color .2s; }
.hero-more span { display: inline-block; margin-left: 3px; transition: transform .2s; }
.hero-more:hover { color: #fff; }
.hero-more:hover span { transform: translateY(3px); }
.hero-demo {
  --scene-accent: #81f0bd; position: relative; isolation: isolate;
  margin: clamp(24px, 3.7vw, 48px) 0 0;
  animation: hero-arrive .95s cubic-bezier(.16,1,.3,1) .22s both;
}
.hero-demo[data-scene="density"] { --scene-accent: #88d9ff; }
.hero-demo[data-scene="orderbook"] { --scene-accent: #ffd19b; }
.demo-label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 9px; overflow: hidden; color: var(--scene-accent);
  font-size: clamp(17px, 2.3vw, 29px); font-weight: 650; letter-spacing: -.025em;
}
.demo-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.demo-screen, .shot-link { position: relative; display: block; overflow: hidden; background: #0b0f14; cursor: zoom-in; }
.demo-screen { border: 1px solid #c7ede723; border-radius: 11px; aspect-ratio: 1600 / 670; }
.demo-screen img, .shot-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plan-periods button {
  min-height: 32px; padding: 3px 9px; border: 1px solid transparent; border-radius: 6px;
  color: var(--muted); background: transparent; font-size: 12px; cursor: pointer;
}
.plan-periods button:hover { background: #ffffff0a; color: var(--text); }
.plan-periods button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .24); color: var(--accent); }
.shot-expand { position: absolute; top: 8px; right: 8px; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #ffffff24; border-radius: 6px; color: var(--text); background: #0a1018eb; }
.shot-expand svg { width: 15px; height: 15px; }
.shot-link:hover .shot-expand { color: var(--accent); }

.features, .tariffs, .faq { padding-top: clamp(55px, 8vw, 104px); }
.section-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 19px; }
.section-head h2 { font-size: clamp(28px, 3.1vw, 41px); line-height: 1.1; letter-spacing: -.035em; font-weight: 620; }
.section-head p, .section-head a { color: var(--muted); font-size: 13px; }
.section-head a { display: inline-flex; align-items: center; gap: 5px; }
.section-head a svg { width: 14px; height: 14px; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.feature { min-width: 0; display: flex; flex-direction: column; padding: clamp(14px, 2vw, 22px); overflow: hidden; }
.radar-card, .workspace-card { grid-column: span 2; }
.feature-head { display: flex; align-items: center; gap: 9px; }
.feature-head svg { color: var(--accent); }
.feature h3 { font-size: clamp(17px, 2vw, 23px); font-weight: 620; line-height: 1.2; letter-spacing: -.02em; }
.feature p { color: var(--muted); margin: 8px 0 15px; max-width: 59ch; font-size: 14px; }
.feature .shot-link { margin-top: auto; border: 1px solid var(--line); border-radius: 8px; aspect-ratio: 2.55; }
.feature:not(.radar-card):not(.workspace-card) .shot-link { aspect-ratio: 1.65; }
.feature:not(.radar-card):not(.workspace-card) .shot-link img { object-position: 22% center; }
/* The feature introduction follows the same three-column grid as the hero. */
.section-head.about-terminal {
  display: grid; align-items: start; grid-template-columns: 1fr 2fr 1.15fr; gap: 18px;
  border-top: 1px solid var(--line); margin-bottom: clamp(21px, 3vw, 38px);
  padding-top: clamp(21px, 3vw, 38px);
}
.about-terminal .about-label { color: var(--accent); font: 12px/1.55 var(--mono); }
.about-terminal h2 { font-size: clamp(29px, 4.8vw, 66px); line-height: 1; letter-spacing: -.055em; }
.about-terminal .about-summary { font-size: clamp(13px, 1.4vw, 16px); max-width: 28ch; }
.about-terminal.shot-revealed { animation: hero-arrive .9s cubic-bezier(.16,1,.3,1) both; }

.tariff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tariff-card { min-width: 0; display: flex; flex-direction: column; padding: clamp(16px, 2.7vw, 28px); }
.tariff-pro { border-color: rgba(var(--accent-rgb), .39); background: linear-gradient(155deg, rgba(var(--accent-rgb), .06), transparent 54%), #0b1018; box-shadow: inset 0 1px #ffffff12, 0 0 30px -14px rgba(var(--accent-rgb), .32); }
.tariff-meta { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.tariff-meta h3 { font-size: 23px; font-weight: 620; }
.tariff-meta span { font-size: 12px; color: var(--muted); }
.tariff-meta .pro-badge { padding: 3px 8px; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 5px; background: rgba(var(--accent-rgb), .07); color: var(--accent); }
.plan-periods { display: flex; gap: 3px; flex-wrap: wrap; padding: 3px; border: 1px solid var(--line); border-radius: 8px; align-self: flex-start; margin: 11px 0 0; background: #06080c; }
.plan-periods button { font-variant-numeric: tabular-nums; }
.tariff-price { margin-top: 12px; font: 600 clamp(32px, 4.5vw, 50px)/1.12 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.tariff-price small { font: 400 14px/1.3 var(--sans); color: var(--muted); letter-spacing: 0; }
.plan-benefits { display: grid; gap: 7px; padding-left: 17px; margin: 16px 0 19px; color: var(--muted); font-size: 14px; }
.plan-benefits li::marker { color: var(--accent); }
.tariff-cta { margin-top: auto; min-height: 42px; align-self: stretch; justify-content: space-between; }
.plan-note { margin-top: 9px; color: var(--muted); font-size: 12px; }

.faq { padding-bottom: clamp(52px, 8vw, 96px); }
.faq-list { border-block: 1px solid var(--line); }
.faq-list details + details { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 3px; list-style: none; cursor: pointer; font-weight: 580; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg); margin-right: 5px; flex: none; }
.faq-list details[open] summary::after { transform: rotate(225deg); }
.faq-list p { color: var(--muted); max-width: 70ch; padding: 0 4px 15px; }
.site-footer { border-top: 1px solid var(--line); background: #090d13; }
.foot-in, .footer-brand { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 22px; }
.foot-in { padding-block: 22px; }
.foot-in nav { flex-wrap: wrap; }
.footer-brand small { color: var(--muted); font-size: 11px; }

.welcome-preview { width: min(1440px, 100% - 24px); max-height: 94dvh; padding: 8px; border: 1px solid #ffffff24; border-radius: 10px; color: var(--text); background: #0b0f16; }
.welcome-preview::backdrop { background: #000d; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 0 8px 5px; }
.preview-actions { display: flex; gap: 5px; flex: none; }
.preview-actions .btn { width: 36px; min-height: 36px; padding: 0; }
.preview-actions .btn[aria-pressed="true"] { color: var(--accent); }
.preview-image { overflow: auto; max-height: calc(94dvh - 64px); overscroll-behavior: contain; border-radius: 5px; }
.preview-image img { display: block; width: 100%; height: auto; }
.preview-image.is-zoomed img { width: auto; max-width: none; }
body:has(.welcome-preview[open]) { overflow: hidden; }

@media (max-width: 850px) {
  html { scroll-padding-top: 106px; }
  .wrap { width: calc(100% - 40px); }
  .nav-in { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding-top: 6px; }
  .nav-actions { grid-column: 2; grid-row: 1; }
  .nav-in nav { grid-column: 1 / -1; grid-row: 2; padding: 8px 0; flex-wrap: wrap; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-card { grid-column: auto; }
  .bento > :nth-child(2) { grid-column: 1; }
  .bento > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 26px); }
  .nav-actions { gap: 2px; }
  .nav-actions .btn { padding-inline: 6px; font-size: 11px; }
  .nav-actions .community, .version { display: none; }
  .nav-in nav { gap: 13px; font-size: 12px; }
  .hero-actions .btn { font-size: 12px; padding-inline: 9px; }
  .bento, .tariff-grid { grid-template-columns: minmax(0, 1fr); }
  .radar-card, .workspace-card { grid-column: 1; }
  .foot-in { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.demo-screen {
  isolation: isolate;
  perspective: 1050px;
  background: radial-gradient(ellipse at 50% 68%, #25464155, transparent 72%), #080d10;
}
.demo-screen .demo-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: translateX(var(--slide-x, 0%)); opacity: 0;
  transition: transform .72s cubic-bezier(.22,.8,.22,1), opacity .55s ease;
}
.demo-frame[data-slot="prev"] { --slide-x: -98%; }
.demo-frame[data-slot="next"] { --slide-x: 98%; }
.demo-screen .demo-frame[data-slot="center"] { z-index: 1; opacity: 1; }
.demo-screen .demo-frame.is-wrapping { transition: none; }
.shot-link.shot-pending > img {
  opacity: 0; transform: translateY(18px) scale(1.025);
  transition: opacity .74s ease, transform .88s cubic-bezier(.16,1,.3,1);
}
.shot-link.shot-pending:is(.shot-revealed,:focus-visible) > img { opacity: 1; transform: none; }
@media (min-width: 760px) {
  .demo-screen { aspect-ratio: 3.05; }
  .demo-screen .demo-frame {
    inset: 4% auto 4% 14%; width: 72%; height: 92%; border: 1px solid #ffffff22;
    border-radius: 9px; background: #0b0f14;
    transform: translateX(var(--slide-x, 0%)) rotateY(var(--slide-angle, 0deg)) scale(var(--slide-scale, 1));
    opacity: .62;
  }
  .demo-frame[data-slot="prev"] { --slide-x: -77%; --slide-angle: 32deg; --slide-scale: .82; }
  .demo-frame[data-slot="next"] { --slide-x: 77%; --slide-angle: -32deg; --slide-scale: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-link.shot-pending > img { opacity: 1; transform: none; }
}
@media (max-width: 850px) {
  .nav-in { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-in .logo { min-width: 0; }
  .nav-in .logo img { max-width: 100%; object-fit: contain; }
}
@media (max-width: 560px) {
  .hero-info { grid-template-columns: 1fr auto; gap: 11px 8px; padding: 10px 8px; }
  .hero-description { grid-row: 2; grid-column: 1 / -1; font-size: 13px; }
  .hero-break { display: none; }
  .hero-markets { font-size: 10px; }
  .hero-actions { gap: 3px 12px; }
  .hero-more { font-size: 12px; }
  .section-head.about-terminal { grid-template-columns: 1fr; gap: 12px; }
  .about-terminal .about-summary { max-width: 36ch; }
}
@media (max-width: 360px) {
  .nav-in .logo img { width: 105px; }
  .nav-in nav { column-gap: 9px; }
}