:root {
  --ds-ink: #f6f1e6;
  --ds-ink-82: rgba(246, 241, 230, .82);
  --ds-ink-58: rgba(246, 241, 230, .58);
  --ds-ink-32: rgba(246, 241, 230, .32);
  --ds-line: rgba(232, 215, 255, .16);
  --ds-line-strong: rgba(232, 215, 255, .34);
  --ds-violet: #a77ae3;
  --ds-violet-light: #e4d4ff;
  --ds-signal: #c9ff8f;
  --ds-void: #08030f;
  --ds-serif: "Fraunces", Georgia, serif;
  --ds-sans: "Hanken Grotesk", Arial, sans-serif;
  --ds-max: 1180px;
}

* { box-sizing: border-box; }
                             
                             
main { position: relative; overflow: clip; }
.ds-wrap { width: min(calc(100% - 64px), var(--ds-max)); margin-inline: auto; }
.ds-kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ds-violet-light); font: 650 11px/1 var(--ds-sans); letter-spacing: .18em; text-transform: uppercase; }
.ds-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 16px currentColor; }
.ds-label { color: var(--ds-ink-58); font: 650 10px/1.2 var(--ds-sans); letter-spacing: .15em; text-transform: uppercase; }
.ds-title { margin: 18px 0 0; font: 460 clamp(58px, 7.2vw, 98px)/.91 var(--ds-serif); letter-spacing: -.055em; text-wrap: balance; }
.ds-title em { color: var(--ds-violet-light); font-weight: 430; }
.ds-lead { max-width: 54ch; margin: 26px 0 0; color: var(--ds-ink-82); font: 500 18px/1.55 var(--ds-sans); }
.ds-lead strong { color: var(--ds-ink); }
.ds-jump { display: inline-flex; align-items: center; gap: 18px; margin-top: 30px; color: var(--ds-ink); font: 650 14px/1 var(--ds-sans); text-decoration: none; }
.ds-jump::after { content: "↘"; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--ds-line-strong); border-radius: 50%; transition: transform .25s ease, background .25s ease; }
.ds-jump:hover::after, .ds-jump:focus-visible::after { transform: translate(3px, 3px); background: rgba(228, 212, 255, .1); }

                                                                                              
.ds-hero { position: relative; min-height: 900px; height: 100svh; overflow: hidden; background: rgba(4, 1, 10, .56); }
.ds-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 1, 12, .82) 0%, rgba(5, 1, 12, .2) 48%, rgba(5, 1, 12, .47) 100%), linear-gradient(0deg, rgba(5, 1, 12, .76), transparent 40%); pointer-events: none; }
.ds-portrait { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.ds-hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.ds-hero-copy .ds-title { max-width: 8.6ch; }
.ds-hero-copy .ds-lead { max-width: 43ch; }
.ds-scale { position: absolute; z-index: 3; top: 128px; right: max(32px, calc((100vw - var(--ds-max)) / 2)); text-align: right; }
.ds-scale strong { display: block; font: 480 clamp(29px, 3vw, 44px)/1 var(--ds-serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ds-scale span { display: block; margin-top: 9px; color: var(--ds-ink-58); font: 650 10px/1 var(--ds-sans); letter-spacing: .16em; text-transform: uppercase; }
.ds-trust-rail { position: absolute; z-index: 3; right: max(32px, calc((100vw - var(--ds-max)) / 2)); bottom: 0; width: 300px; padding: 0 0 54px; border-top: 1px solid var(--ds-line-strong); }
.ds-trust-rail h2 { margin: 18px 0 72px; font: 600 15px/1.2 var(--ds-sans); }
.ds-trust-rail p { margin: 0; color: var(--ds-ink-58); font: 500 14px/1.5 var(--ds-sans); }
.ds-trust-rail strong { color: var(--ds-ink); }

                                                                                  
.ds-system { position: relative; padding: 112px 0 132px; border-top: 1px solid var(--ds-line); background: rgba(7, 2, 14, .78); scroll-margin-top: 72px; }
.ds-system-head { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: end; }
.ds-system h2 { margin: 18px 0 0; max-width: 11ch; font: 470 clamp(48px, 6vw, 82px)/.94 var(--ds-serif); letter-spacing: -.05em; }
.ds-system-head .ds-lead { margin: 0; max-width: 46ch; }
.ds-clarity { position: relative; height: 730px; margin-top: 72px; border: 1px solid var(--ds-line-strong); background: linear-gradient(112deg, rgba(24, 12, 44, .82), rgba(51, 30, 74, .54) 56%, rgba(13, 6, 25, .91)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 44px 110px rgba(2,0,9,.35); overflow: hidden; }
.ds-clarity::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 54% 49%, rgba(197, 155, 244, .13), transparent 29%), linear-gradient(90deg, rgba(7,2,14,.2), transparent 38% 78%, rgba(7,2,14,.24)); }
.ds-spine { position: absolute; z-index: 8; inset: 0 auto 0 0; width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0; border-right: 1px solid var(--ds-line-strong); background: rgba(16, 8, 31, .55); color: var(--ds-ink-58); font: 650 9px/1 var(--ds-sans); letter-spacing: .17em; text-transform: uppercase; }
.ds-spine span { writing-mode: vertical-rl; }
.ds-frame { position: absolute; z-index: 7; inset: 26px 26px 24px 74px; border-block: 1px solid var(--ds-line-strong); pointer-events: none; }
.ds-frame::before, .ds-frame::after { content: ""; position: absolute; width: 1px; height: 22px; background: var(--ds-line-strong); }
.ds-frame::before { left: 0; top: 0; }.ds-frame::after { right: 0; top: 0; }
.ds-axis { position: absolute; z-index: 9; left: 110px; right: 62px; display: grid; grid-template-columns: 42% 27% 31%; color: var(--ds-ink-58); font: 650 10px/1 var(--ds-sans); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.ds-axis--top { top: 42px; }.ds-axis--bottom { bottom: 38px; }
.ds-axis span:nth-child(2) { text-align: center; color: var(--ds-violet-light); }.ds-axis span:last-child { text-align: right; color: var(--ds-signal); }
.ds-plot { position: absolute; z-index: 2; left: 76px; right: 30px; top: 83px; bottom: 78px; background-image: linear-gradient(90deg, transparent 0 22px, rgba(228,212,255,.16) 22px 23px, transparent 23px 46px); background-size: 46px 100%; mask-image: linear-gradient(90deg, #000 0 78%, transparent 96%); }
.ds-plot canvas, .ds-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-plot svg { z-index: 1; overflow: visible; }.ds-plot canvas { z-index: 2; }
.ds-field-ticker { position: absolute; z-index: 10; top: 79px; left: 92px; width: 38%; overflow: hidden; color: var(--ds-ink-32); font: 650 9px/1 var(--ds-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ds-field-ticker span { display: inline-block; min-width: max-content; animation: dsTicker 18s linear infinite; }
@keyframes dsTicker { to { transform: translateX(-50%); } }
.ds-stage-rail { position: absolute; z-index: 10; left: 126px; right: 398px; bottom: 78px; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ds-line); }
.ds-stage-rail span { position: relative; padding-top: 15px; color: var(--ds-ink-58); font: 650 9px/1 var(--ds-sans); letter-spacing: .14em; text-transform: uppercase; }
.ds-stage-rail span::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ds-violet-light); box-shadow: 0 0 11px rgba(228,212,255,.7); }
.ds-output { position: absolute; z-index: 11; right: 42px; width: 270px; padding-left: 22px; color: var(--ds-ink); }
.ds-output::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-signal); box-shadow: 0 0 14px rgba(201,255,143,.7); }
.ds-output::after { content: ""; position: absolute; left: -70px; top: 10px; width: 58px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,255,143,.55)); }
.ds-output b { display: block; font: 520 17px/1.12 var(--ds-serif); letter-spacing: -.02em; }
.ds-output span { display: block; margin-top: 5px; color: var(--ds-ink-58); font: 500 11px/1.35 var(--ds-sans); }
.ds-output--1 { top: 156px; }.ds-output--2 { top: 276px; }.ds-output--3 { top: 396px; }.ds-output--4 { top: 516px; }
.ds-architecture { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); margin-top: -1px; border: 1px solid var(--ds-line-strong); background: rgba(12, 6, 23, .66); }
.ds-architecture > * { min-height: 108px; padding: 21px 22px; border-right: 1px solid var(--ds-line); }
.ds-architecture > *:last-child { border-right: 0; }
.ds-architecture h3 { margin: 13px 0 0; font: 500 20px/1.1 var(--ds-serif); }
.ds-architecture b { display: block; color: var(--ds-ink-82); font: 600 12px/1.25 var(--ds-sans); }
.ds-architecture p { margin: 7px 0 0; color: var(--ds-ink-58); font: 500 11px/1.4 var(--ds-sans); }

                                                                                         
.ds-practice { padding: 124px 0 142px; border-top: 1px solid var(--ds-line); background: rgba(8, 3, 17, .72); }
.ds-practice-head { display: grid; grid-template-columns: 6fr 6fr; gap: 72px; align-items: end; }
.ds-practice h2 { margin: 18px 0 0; max-width: 11ch; font: 470 clamp(48px, 5.8vw, 80px)/.95 var(--ds-serif); letter-spacing: -.05em; }
.ds-practice-head .ds-lead { margin: 0; max-width: 46ch; }
.ds-ledger { position: relative; margin-top: 72px; border: 1px solid var(--ds-line-strong); background: rgba(12, 6, 23, .64); overflow: hidden; }
.ds-ledger::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 101px; height: 1px; background: linear-gradient(90deg, var(--ds-violet), var(--ds-violet-light) 63%, var(--ds-signal)); transform-origin: left; transform: scaleX(.08); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.ds-ledger.is-seen::before { transform: scaleX(1); }
.ds-ledger-top { display: grid; grid-template-columns: 2fr 3fr; min-height: 102px; border-bottom: 1px solid var(--ds-line); }
.ds-ledger-top > div { padding: 23px 24px; border-right: 1px solid var(--ds-line); }
.ds-ledger-top > div:last-child { border-right: 0; }
.ds-ledger-top strong { display: block; margin-top: 11px; font: 500 22px/1.15 var(--ds-serif); }
.ds-ledger-top p { margin: 11px 0 0; color: var(--ds-ink-58); font: 500 12px/1.45 var(--ds-sans); }
.ds-steps { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding: 0; list-style: none; }
.ds-step { position: relative; min-height: 344px; padding: 34px 19px 24px; border-right: 1px solid var(--ds-line); }
.ds-step:last-child { border-right: 0; }
.ds-step::before { content: ""; position: absolute; z-index: 3; top: -4px; left: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-violet-light); box-shadow: 0 0 16px rgba(228,212,255,.72); }
.ds-step:last-child::before { background: var(--ds-signal); box-shadow: 0 0 16px rgba(201,255,143,.64); }
.ds-step-num { color: var(--ds-ink-32); font: 650 10px/1 var(--ds-sans); letter-spacing: .14em; }
.ds-step h3 { margin: 30px 0 0; font: 500 27px/1 var(--ds-serif); letter-spacing: -.03em; }
.ds-step-copy { margin: 18px 0 0; color: var(--ds-ink-58); font: 500 12px/1.5 var(--ds-sans); }
.ds-step-example { position: absolute; left: 19px; right: 19px; bottom: 23px; margin: 0; padding-top: 14px; border-top: 1px solid var(--ds-line); color: var(--ds-ink-82); font: 600 11px/1.4 var(--ds-sans); }
.ds-step-example span { display: block; margin-bottom: 7px; color: var(--ds-violet-light); font: 650 9px/1 var(--ds-sans); letter-spacing: .13em; text-transform: uppercase; }

.ds-close { padding: 128px 0 106px; border-top: 1px solid var(--ds-line); background: radial-gradient(circle at 70% 42%, rgba(121, 76, 169, .18), transparent 34%), rgba(7, 2, 14, .78); }
.ds-close-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 78px; align-items: end; }
.ds-close h2 { margin: 18px 0 0; max-width: 10ch; font: 470 clamp(52px, 6.2vw, 88px)/.94 var(--ds-serif); letter-spacing: -.052em; }
.ds-close-copy { padding-top: 20px; border-top: 1px solid var(--ds-line-strong); }
.ds-close-copy p { margin: 0; color: var(--ds-ink-82); font: 500 16px/1.55 var(--ds-sans); }
.ds-actions { display: flex; gap: 12px; margin-top: 28px; }
.ds-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--ds-line-strong); border-radius: 6px; color: var(--ds-ink); background: rgba(228,212,255,.04); font: 650 13px/1 var(--ds-sans); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.ds-button--primary { background: linear-gradient(135deg, rgba(124,48,180,.92), rgba(92,31,145,.92)); border-color: rgba(228,212,255,.38); }
.ds-button:hover, .ds-button:focus-visible { transform: translateY(-2px); border-color: rgba(228,212,255,.6); background-color: rgba(228,212,255,.1); }

@media (max-width: 1100px) {
  .ds-output { width: 235px; right: 24px; }
  .ds-stage-rail { right: 340px; }
  .ds-output b { font-size: 15px; }
}

@media (max-width: 900px) {
  .ds-wrap { width: min(calc(100% - 36px), var(--ds-max)); }
  .ds-hero { height: auto; min-height: 940px; }
  .ds-hero-copy { align-items: flex-start; padding-top: 172px; }
  .ds-hero-copy .ds-title { max-width: 8ch; font-size: clamp(54px, 12vw, 76px); }
  .ds-scale { top: 112px; right: 18px; }
  .ds-trust-rail { right: 18px; width: min(300px, calc(100% - 36px)); }
  .ds-system-head, .ds-practice-head, .ds-close-grid { grid-template-columns: 1fr; gap: 38px; }
  .ds-clarity { height: 900px; }
  .ds-plot { right: 18px; }
  .ds-output { left: 56%; right: 20px; width: auto; }
  .ds-stage-rail { left: 96px; right: 48%; }
  .ds-architecture { grid-template-columns: repeat(2, 1fr); }
  .ds-architecture > * { border-bottom: 1px solid var(--ds-line); }
  .ds-steps { grid-template-columns: repeat(2, 1fr); }
  .ds-step { border-bottom: 1px solid var(--ds-line); }
}

@media (max-width: 640px) {
  .ds-portrait { opacity: .45; transform: translateX(24%); }
  .ds-scale { display: none; }
  .ds-trust-rail h2 { margin-bottom: 34px; }
  .ds-system, .ds-practice, .ds-close { padding-block: 88px; }
  .ds-clarity { height: 1020px; }
  .ds-spine { width: 34px; }
  .ds-frame { left: 50px; }
  .ds-axis { left: 68px; right: 32px; grid-template-columns: 1fr 1fr; }
  .ds-axis span:nth-child(2) { display: none; }
  .ds-plot { left: 48px; right: 10px; top: 78px; bottom: 58px; opacity: .72; }
  .ds-field-ticker { left: 62px; width: 50%; }
  .ds-output { left: 45%; right: 10px; }
  .ds-stage-rail { left: 64px; right: 57%; grid-template-columns: repeat(2, 1fr); gap: 16px 0; border-top: 0; bottom: 66px; }
  .ds-stage-rail span { border-top: 1px solid var(--ds-line); }
  .ds-architecture { grid-template-columns: 1fr; }
  .ds-architecture > * { border-right: 0; }
  .ds-steps { grid-template-columns: 1fr; }
  .ds-step { min-height: 260px; border-right: 0; }
  .ds-ledger-top { grid-template-columns: 1fr; }
  .ds-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
                             
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ds-ledger::before { transform: scaleX(1); }
}