html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none}
@font-face {
font-family: "Refoke";
src: url("../fonts/Refoke-Black.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}@font-face {
font-family: "DM Sans";
src: url("../fonts/dm-sans-400.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}@font-face {
font-family: "Manrope";
src: url("../fonts/manrope-500.woff2") format("woff2");
font-weight: 500 800;
font-style: normal;
font-display: swap;
}@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}@property --bg { syntax: "<color>"; inherits: true; initial-value: #140d1d; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fg-2 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.78); }
@property --fg-3 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.5); }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.1); }
@property --line-2 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.25); }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #c5f43d; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.03); }:root {
--dc-purple: #6721df;
--dc-purple-bright: #7b2cf0;
--dc-purple-dark: #261735;
--dc-purple-black: #140d1d;
--dc-lime: #c5f43d;
--dc-lime-dark: #b2e02c;
--dc-white: #ffffff;
--dc-off-white: #f7f6f9;
--dc-light: #ece9f1;
--dc-charcoal: #19151f;
--dc-muted: #696370;
--dc-mark-purple: #5313cb;
--dc-mark-lime: #c9ed2d;
--wedge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 109.9 111.7 78.27'%3E%3Cpath d='M0.01 110.08C37.45 110.02 74.04 109.96 111.7 109.9C85.68 136.17 60.34 161.74 34.16 188.17C33.96 185.72 33.78 184.46 33.76 183.2C33.58 170.95 33.33 158.69 33.31 146.43C33.31 143.5 32.56 141.39 30.31 139.31C21.2 130.86 12.31 122.2 3.35 113.6C2.38 112.67 1.5 111.67 0 110.09Z'/%3E%3C/svg%3E") center / contain no-repeat;
--wedge-ratio: 111.7 / 78.27;
--background-primary: var(--dc-purple-black);
--background-secondary: var(--dc-purple-dark);
--background-paper: var(--dc-off-white);
--background-paper-2: var(--dc-light);
--text-primary: var(--dc-white);
--text-secondary: rgba(255, 255, 255, 0.78);
--text-muted: rgba(255, 255, 255, 0.5);
--text-ink: var(--dc-charcoal);
--text-ink-muted: var(--dc-muted);
--accent-primary: var(--dc-lime);
--accent-secondary: var(--dc-purple);
--gradient-primary: linear-gradient(135deg, var(--dc-purple-black), var(--dc-purple-dark) 55%, var(--dc-purple));
--gradient-signal: linear-gradient(90deg, var(--dc-purple-bright), var(--dc-lime));
--border-subtle: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.25);
--border-ink: rgba(103, 33, 223, 0.12);
--border-ink-strong: rgba(103, 33, 223, 0.25);
--font-heading: "Refoke", "Manrope", "Segoe UI", system-ui, sans-serif;
--font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
--font-logo: "Manrope", "DM Sans", system-ui, sans-serif;
--tracking-heading: -0.01em;
--tracking-mono: 0.2em;--fs-mono: 0.75rem;
--fs-small: 0.875rem;
--fs-body: clamp(1rem, 0.94rem + 0.18vw, 1.125rem);
--fs-lead: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3rem);
--fs-h3: clamp(1.25rem, 0.95rem + 0.9vw, 1.85rem);
--fs-h2: clamp(2rem, 1rem + 3.6vw, 5.2rem);
--fs-num: clamp(3.2rem, 1.6rem + 5.5vw, 7.5rem);
--radius-pill: 999px;
--radius-md: 10px;
--radius-sm: 6px;
--shadow-lime: 0 10px 30px -10px rgba(197, 244, 61, 0.45);
--shadow-lime-hover: 0 16px 40px -10px rgba(197, 244, 61, 0.6);
--shadow-header: 0 12px 40px -16px rgba(20, 13, 29, 0.9);
--shadow-panel: 0 40px 80px -40px rgba(10, 6, 16, 0.8);
--ease-out: cubic-bezier(0.21, 0.65, 0.36, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 0.25s;
--dur: 0.5s;
--dur-slow: 0.9s;
--gutter: clamp(20px, 4vw, 64px);
--container-max: 1760px;
--header-h: 76px;
--section-pad: clamp(72px, 8vw, 140px);
}:root,
[data-theme="dark"] {
--bg: #140d1d;
--fg: #ffffff;
--fg-2: rgba(255, 255, 255, 0.78);
--fg-3: rgba(255, 255, 255, 0.5);
--line: rgba(255, 255, 255, 0.1);
--line-2: rgba(255, 255, 255, 0.25);
--accent: #c5f43d;
--panel: rgba(255, 255, 255, 0.03);
}[data-theme="light"] {
--bg: #f7f6f9;
--fg: #19151f;
--fg-2: rgba(25, 21, 31, 0.8);
--fg-3: #696370;
--line: rgba(103, 33, 223, 0.12);
--line-2: rgba(103, 33, 223, 0.28);
--accent: #6721df;
--panel: rgba(103, 33, 223, 0.035);
}[data-theme="purple"] {
--bg: #6721df;
--fg: #ffffff;
--fg-2: rgba(255, 255, 255, 0.84);
--fg-3: rgba(255, 255, 255, 0.64);
--line: rgba(255, 255, 255, 0.18);
--line-2: rgba(255, 255, 255, 0.38);
--accent: #c5f43d;
--panel: rgba(20, 13, 29, 0.12);
}
*,
*::before,
*::after {
box-sizing: border-box;
}html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background-color: var(--bg);
color: var(--fg);
overflow-x: clip;
transition:
--bg 0.9s var(--ease-in-out),
--fg 0.9s var(--ease-in-out),
--fg-2 0.9s var(--ease-in-out),
--fg-3 0.9s var(--ease-in-out),
--line 0.9s var(--ease-in-out),
--line-2 0.9s var(--ease-in-out),
--accent 0.9s var(--ease-in-out),
--panel 0.9s var(--ease-in-out);
}html:not(.lenis) {
scroll-behavior: smooth;
}@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
transition: none;
}
}body {
margin: 0;
min-height: 100vh;
background: transparent;
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
overflow-x: clip;
}img,
svg,
video,
canvas {
display: block;
max-width: 100%;
}img {
height: auto;
}a {
color: inherit;
text-decoration: none;
}ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}::selection {
background-color: var(--dc-lime);
color: var(--dc-purple-black);
}:focus-visible {
outline: 2px solid var(--dc-lime);
outline-offset: 3px;
border-radius: 4px;
}[data-theme="light"] :focus-visible,
html[data-theme="light"] :focus-visible {
outline-color: var(--dc-purple);
}.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 300;
padding: 12px 20px;
border-radius: var(--radius-pill);
background: var(--dc-lime);
color: var(--dc-purple-black);
font-weight: 700;
transform: translateY(-160%);
transition: transform 0.2s var(--ease-out);
}.skip-link:focus {
transform: none;
}main:focus {
outline: none;
}section[data-theme],
footer[data-theme] {
position: relative;
background-color: var(--bg);
color: var(--fg);
}.has-theme section[data-theme],
.has-theme footer[data-theme] {
--bg: inherit;
--fg: inherit;
--fg-2: inherit;
--fg-3: inherit;
--line: inherit;
--line-2: inherit;
--accent: inherit;
--panel: inherit;
background-color: transparent;
}.container {
width: 100%;
max-width: calc(var(--container-max) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}.section {
padding-block: var(--section-pad);
}.grid-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(16px, 2vw, 32px);
}section[id],
[id].anchor {
scroll-margin-top: calc(var(--header-h) + 12px);
}.t-display,
.t-h2,
.t-h3 {
font-family: var(--font-heading);
font-weight: 900;
text-transform: uppercase;
letter-spacing: var(--tracking-heading);
color: var(--fg);
}.t-h2 {
font-size: min(var(--fs-h2), calc((100vw - var(--gutter) * 2) / 12.3));
line-height: 0.92;
}.t-h3 {
font-size: var(--fs-h3);
line-height: 1;
}.t-lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--fg-2);
max-width: 34em;
text-wrap: pretty;
}.t-body {
color: var(--fg-2);
line-height: 1.65;
text-wrap: pretty;
}.t-mono {
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
}.accent {
font-style: normal;
color: var(--accent);
}.line {
display: block;
overflow: clip;
padding-block: 0.06em 0.08em;
margin-block: -0.06em -0.08em;
}.line__inner {
display: inline-block;
will-change: transform;
}@media (min-width: 1024px) {
.sec-head {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
row-gap: 28px;
align-items: start;
}.sec-head > .folio {
grid-column: 1 / -1;
grid-row: 1;
}.sec-head > .t-h2 {
grid-column: 1 / -1;
grid-row: 2;
}.sec-head > :not(.folio):not(.t-h2) {
grid-column: 1;
grid-row: 3;
margin: 0;
}.sec-head .t-h2 .line,
.cta__title .line {
white-space: nowrap;
}
}@media (min-width: 1280px) {
.sec-head > :not(.folio):not(.t-h2) {
grid-column: 2;
grid-row: 2;
align-self: end;
}
}.folio {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--fg-3);
}.folio__idx {
color: var(--accent);
}.folio__rule {
width: 44px;
height: 1px;
background: currentColor;
opacity: 0.6;
transform-origin: left;
}.folio__extra {
margin-left: auto;
}@media (max-width: 599px) {
.folio__label {
white-space: nowrap;
}.folio__extra {
display: none;
}
}.rule {
height: 1px;
background: var(--line);
transform-origin: left;
}.marks {
position: absolute;
inset: -12px;
pointer-events: none;
--m: 12px;
--c: var(--line-2);
background:
linear-gradient(var(--c), var(--c)) top left / var(--m) 1px no-repeat,
linear-gradient(var(--c), var(--c)) top left / 1px var(--m) no-repeat,
linear-gradient(var(--c), var(--c)) top right / var(--m) 1px no-repeat,
linear-gradient(var(--c), var(--c)) top right / 1px var(--m) no-repeat,
linear-gradient(var(--c), var(--c)) bottom left / var(--m) 1px no-repeat,
linear-gradient(var(--c), var(--c)) bottom left / 1px var(--m) no-repeat,
linear-gradient(var(--c), var(--c)) bottom right / var(--m) 1px no-repeat,
linear-gradient(var(--c), var(--c)) bottom right / 1px var(--m) no-repeat;
}.wedge {
display: inline-block;
width: 0.88em;
aspect-ratio: var(--wedge-ratio);
background: var(--dc-lime);
-webkit-mask: var(--wedge);
mask: var(--wedge);
flex-shrink: 0;
}.mark-d {
fill: var(--dc-mark-purple);
}.mark-wedge {
fill: var(--dc-mark-lime);
}.is-motion [data-reveal] {
opacity: 0;
}.is-motion [data-reveal="lines"] {
opacity: 1;
}.is-motion [data-reveal="lines"] .line__inner {
transform: translateY(108%);
}@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.logo {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg);
}.logo__mark {
width: 34px;
height: auto;
flex-shrink: 0;
}.logo__type {
display: grid;
line-height: 1;
font-family: var(--font-logo);
text-transform: uppercase;
}.logo__word {
font-size: 17px;
font-weight: 800;
letter-spacing: 0.17em;
margin-right: -0.17em;
}.logo__sub {
margin-top: 3px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.76em;
margin-right: -0.76em;
}.btn {
--btn-bg: transparent;
--btn-fg: var(--fg);
--btn-border: var(--line-2);
--well-bg: transparent;
--well-fg: currentColor;
--well-border: var(--line-2);
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
min-height: 54px;
padding: 6px 6px 6px 26px;
border-radius: var(--radius-pill);
border: 1px solid var(--btn-border);
background-color: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
isolation: isolate;
transition:
background-color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out),
box-shadow 0.4s var(--ease-out);
will-change: transform;
}.btn__label {
position: relative;
display: inline-grid;
overflow: hidden;
padding-block: 2px;
}.btn__text {
grid-area: 1 / 1;
transition: transform 0.55s var(--ease-expo);
}.btn__text--clone {
transform: translateY(115%);
}.btn__icon {
position: relative;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--well-border);
background-color: var(--well-bg);
color: var(--well-fg);
overflow: hidden;
flex-shrink: 0;
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}.btn__arrow {
grid-area: 1 / 1;
width: 16px;
height: 16px;
transition: transform 0.55s var(--ease-expo);
}.btn__arrow--in {
transform: translate(-160%, 160%);
}@media (hover: hover) {
.btn:hover .btn__text {
transform: translateY(-115%);
}.btn:hover .btn__text--clone {
transform: none;
}.btn:hover .btn__arrow {
transform: translate(160%, -160%);
}.btn:hover .btn__arrow--in {
transform: none;
}
}.btn:active {
transform: scale(0.98);
}.btn--primary {
--btn-bg: var(--dc-lime);
--btn-fg: var(--dc-purple-black);
--btn-border: var(--dc-lime);
--well-bg: var(--dc-purple-black);
--well-fg: var(--dc-lime);
--well-border: var(--dc-purple-black);
box-shadow: var(--shadow-lime);
}@media (hover: hover) {
.btn--primary:hover {
--btn-bg: var(--dc-lime-dark);
--btn-border: var(--dc-lime-dark);
box-shadow: var(--shadow-lime-hover);
}.btn--ghost:hover {
--btn-border: var(--accent);
--btn-fg: var(--accent);
--well-bg: var(--accent);
--well-border: var(--accent);
--well-fg: var(--bg);
}
}.btn--sm {
min-height: 44px;
gap: 10px;
padding: 4px 4px 4px 18px;
font-size: 0.875rem;
}.btn--sm .btn__icon {
width: 34px;
height: 34px;
}.btn--sm .btn__arrow {
width: 14px;
height: 14px;
}.link {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--fg);
}.link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 1px;
background: currentColor;
transform: scaleX(0.25);
transform-origin: left;
transition: transform 0.5s var(--ease-expo);
}.link .icon {
width: 16px;
height: 16px;
transition: transform 0.5s var(--ease-expo);
}@media (hover: hover) {
.link:hover::after {
transform: scaleX(1);
}.link:hover .icon {
transform: translate(3px, -3px);
}
}.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-2);
line-height: 1;
white-space: nowrap;
}.progress {
position: fixed;
inset: 0 0 auto 0;
z-index: 120;
height: 2px;
background: var(--gradient-signal);
transform: scaleX(0);
transform-origin: left;
pointer-events: none;
}.hdr {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
padding: 12px var(--gutter);
transition: transform 0.6s var(--ease-expo);
pointer-events: none;
}.hdr.is-hidden {
transform: translateY(-130%);
}.hdr__bar {
position: relative;
display: flex;
align-items: center;
gap: 24px;
max-width: var(--container-max);
height: 64px;
margin-inline: auto;
padding: 0;
border-radius: 18px;
pointer-events: auto;
transition:
max-width 0.8s var(--ease-expo),
padding 0.8s var(--ease-expo),
background-color 0.5s var(--ease-out),
box-shadow 0.5s var(--ease-out),
-webkit-backdrop-filter 0.5s var(--ease-out),
backdrop-filter 0.5s var(--ease-out);
}.hdr.is-scrolled .hdr__bar {
max-width: 1180px;
padding: 0 9px 0 19px;
background-color: color-mix(in srgb, var(--bg) 80%, transparent);
box-shadow: inset 0 0 0 1px var(--line), var(--shadow-header);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}html[data-theme="light"] .hdr.is-scrolled .hdr__bar {
box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(38, 23, 53, 0.35);
}.hdr__logo {
display: inline-flex;
border-radius: 8px;
}.hdr__nav {
display: none;
margin-left: auto;
}.hdr__list {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 36px);
}.hdr__link {
position: relative;
display: inline-block;
padding-block: 8px;
font-size: 0.9rem;
font-weight: 500;
color: var(--fg-2);
transition: color 0.3s var(--ease-out);
}.hdr__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.45s var(--ease-expo);
}.hdr__link:hover,
.hdr__link.is-active {
color: var(--fg);
}.hdr__link:hover::after,
.hdr__link.is-active::after {
transform: scaleX(1);
transform-origin: left;
}.hdr__cta {
display: none;
}.hdr__toggle {
position: relative;
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
margin-left: auto;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg);
}.hdr__toggle-bars {
position: relative;
width: 18px;
height: 8px;
}.hdr__toggle-bars::before,
.hdr__toggle-bars::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.5px;
background: currentColor;
border-radius: 2px;
transition: transform 0.5s var(--ease-expo), top 0.5s var(--ease-expo);
}.hdr__toggle-bars::before {
top: 0;
}.hdr__toggle-bars::after {
top: calc(100% - 1.5px);
}.menu-open .hdr__toggle-bars::before {
top: calc(50% - 0.75px);
transform: rotate(45deg);
}.menu-open .hdr__toggle-bars::after {
top: calc(50% - 0.75px);
transform: rotate(-45deg);
}@media (min-width: 1024px) {
.hdr__nav {
display: block;
}.hdr__cta {
display: inline-flex;
}.hdr__toggle {
display: none;
}
}.menu {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
padding: calc(var(--header-h) + 40px) var(--gutter) 32px;
background: var(--dc-purple-black);
color: var(--dc-white);
clip-path: inset(0 0 100% 0);
visibility: hidden;
transition: clip-path 0.8s var(--ease-expo), visibility 0s linear 0.8s;
}.menu::before {
content: "";
position: absolute;
inset: auto -20% -30% -20%;
height: 70%;
background: radial-gradient(closest-side, rgba(123, 44, 240, 0.35), transparent);
pointer-events: none;
}.menu-open .menu {
clip-path: inset(0 0 0 0);
visibility: visible;
transition: clip-path 0.8s var(--ease-expo), visibility 0s;
}.menu-open .hdr .hdr__bar {
padding: 0;
background-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
--fg: #fff;
--line-2: rgba(255, 255, 255, 0.25);
}.menu__list {
position: relative;
display: grid;
gap: 4px;
}.menu__link {
display: flex;
align-items: baseline;
gap: 14px;
font-family: var(--font-heading);
font-size: clamp(2rem, 9vw, 3.6rem);
line-height: 1.02;
text-transform: uppercase;
}.menu__link small {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.2em;
color: var(--dc-lime);
}.menu__link .line__inner {
transform: translateY(110%);
transition: transform 0.8s var(--ease-expo);
}.menu-open .menu__link .line__inner {
transform: none;
}.menu__list li:nth-child(2) .line__inner { transition-delay: 0.05s; }
.menu__list li:nth-child(3) .line__inner { transition-delay: 0.1s; }
.menu__list li:nth-child(4) .line__inner { transition-delay: 0.15s; }
.menu__list li:nth-child(5) .line__inner { transition-delay: 0.2s; }.menu__foot {
position: relative;
display: grid;
gap: 18px;
margin-top: auto;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-expo);
}.menu-open .menu__foot {
opacity: 1;
transform: none;
transition-delay: 0.3s;
}.menu__contact {
display: grid;
gap: 6px;
color: rgba(255, 255, 255, 0.78);
}.menu__social {
display: flex;
gap: 10px;
}.menu__social a,
.social a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}.menu__social a:hover,
.social a:hover {
border-color: var(--dc-lime);
color: var(--dc-lime);
}.menu__social .icon,
.social .icon {
width: 18px;
height: 18px;
}@media (min-width: 1024px) {
.menu {
display: none;
}
}.cursor {
position: fixed;
top: 0;
left: 0;
z-index: 400;
pointer-events: none;
display: none;
}.has-cursor .cursor {
display: block;
}.cursor__ring {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 50%;
border: 1px solid var(--fg-3);
opacity: 0;
transition:
width 0.45s var(--ease-expo),
height 0.45s var(--ease-expo),
margin 0.45s var(--ease-expo),
background-color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
opacity 0.35s var(--ease-out);
}.cursor.is-visible .cursor__ring {
opacity: 1;
}.cursor.is-hover .cursor__ring {
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
border-color: var(--accent);
}.cursor.is-label .cursor__ring {
width: 92px;
height: 92px;
margin: -46px 0 0 -46px;
background-color: var(--dc-lime);
border-color: var(--dc-lime);
}.cursor.is-hidden .cursor__ring {
opacity: 0;
}.cursor__label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dc-purple-black);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-expo);
}.cursor.is-label .cursor__label {
opacity: 1;
transform: none;
}.field {
position: fixed;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 1.1s var(--ease-in-out);
}.field.is-on {
opacity: 1;
}.field-fallback {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(ellipse 50% 45% at 85% 15%, rgba(123, 44, 240, 0.28), transparent 70%),
radial-gradient(ellipse 40% 40% at 5% 95%, rgba(197, 244, 61, 0.05), transparent 70%);
opacity: 0;
transition: opacity 1s var(--ease-in-out);
}html[data-theme="dark"] .field-fallback {
opacity: 1;
}
.pt {
--pt-ease: cubic-bezier(0.76, 0, 0.24, 1);
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
visibility: hidden;
}.pt__curtain {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background:
radial-gradient(ellipse 60% 55% at 80% 12%, rgba(123, 44, 240, 0.32), transparent 70%),
var(--dc-purple-black);
color: var(--dc-white);
clip-path: inset(100% 0 0 0);
}.pt__grid {
position: absolute;
inset: 0 var(--gutter);
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px calc(100% / 12));
pointer-events: none;
}.pt__line {
position: absolute;
inset: 0;
transform: translateY(0);
pointer-events: none;
}.pt__line::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--dc-lime) 18%, var(--dc-lime) 82%, transparent);
box-shadow: 0 0 24px 2px rgba(197, 244, 61, 0.45);
opacity: 0;
}.pt__id {
position: relative;
display: grid;
justify-items: center;
gap: 14px;
text-align: center;
}.pt__kicker {
color: rgba(255, 255, 255, 0.5);
}.pt__num {
display: block;
overflow: clip;
padding-block: 0.04em;
font-family: var(--font-heading);
font-size: clamp(6rem, 3rem + 16vw, 17rem);
line-height: 0.86;
letter-spacing: -0.02em;
color: var(--dc-lime);
}.pt__num-inner {
display: inline-block;
transform: translateY(0);
}.pt__label {
font-family: var(--font-heading);
font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.9rem);
text-transform: uppercase;
letter-spacing: 0.01em;
}.pt.is-leaving {
visibility: visible;
pointer-events: auto;
}.pt.is-leaving .pt__curtain {
clip-path: inset(0 0 0 0);
transition: clip-path 0.62s var(--pt-ease);
}.pt.is-leaving .pt__line {
transform: translateY(-100%);
transition: transform 0.62s var(--pt-ease);
}.pt.is-leaving .pt__line::after {
opacity: 1;
}.pt.is-leaving .pt__num-inner {
animation: ptRoll 0.7s var(--ease-expo) 0.14s both;
}.pt.is-leaving .pt__label,
.pt.is-leaving .pt__kicker {
animation: ptFade 0.6s var(--ease-out) 0.22s both;
}@keyframes ptRoll {
from { transform: translateY(105%); }
to { transform: translateY(0); }
}@keyframes ptFade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}.pt-in .pt {
visibility: visible;
pointer-events: auto;
}.pt-in .pt .pt__curtain {
clip-path: inset(0 0 0 0);
}.pt.is-opening {
visibility: visible;
}.pt.is-opening .pt__curtain {
clip-path: inset(0 0 100% 0);
transition: clip-path 0.9s var(--pt-ease) 0.12s;
}.pt.is-opening .pt__line {
animation: ptRail 0.9s var(--pt-ease) 0.12s both;
}.pt.is-opening .pt__line::after {
opacity: 1;
}.pt.is-opening .pt__id {
animation: ptGrow 0.95s var(--ease-expo) both;
}@keyframes ptRail {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}@keyframes ptGrow {
from { transform: none; opacity: 1; filter: blur(0); }
to { transform: scale(1.35) translateY(-6%); opacity: 0; filter: blur(6px); }
}@media (prefers-reduced-motion: reduce) {
.pt {
display: none;
}
}
:root {
--fs-mega: clamp(3.2rem, 0.6rem + 10vw, 13rem);
--fs-hero: clamp(2.9rem, 1rem + 7.2vw, 9.6rem);
--fs-giant: clamp(4.5rem, 1rem + 15vw, 21rem);
--chapter-pad: clamp(64px, 7vw, 128px);
--rail-w: 36px;
--z-rail: 60;
}.t-mega,
.t-hero {
--fit: 9;
font-family: var(--font-heading);
font-weight: 900;
text-transform: uppercase;
line-height: 0.87;
letter-spacing: -0.016em;
color: var(--fg);
}.t-mega {
font-size: min(var(--fs-mega), calc((100vw - var(--gutter) * 2) / var(--fit)));
}.t-hero {
font-size: min(var(--fs-hero), calc((100vw - var(--gutter) * 2) / var(--fit)));
}@media (min-width: 768px) {
.t-mega .line,
.t-hero .line {
white-space: nowrap;
}
}.inner .line,
.ftr--inner .line {
padding: 0.12em 0.06em 0.14em;
margin: -0.12em -0.06em -0.14em;
}.t-outline {
color: transparent;
-webkit-text-stroke: 1px var(--line-2);
}.kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tracking-mono);
text-transform: uppercase;
color: var(--fg-2);
}.kicker .wedge {
width: 0.95em;
transform: rotate(22.5deg);
}.ih {
position: relative;
display: grid;
padding-block: calc(var(--header-h) + clamp(16px, 2.4vw, 32px)) clamp(48px, 5vw, 80px);
overflow: clip visible;
}.ih > .container {
position: relative;
z-index: 1;
display: grid;
align-content: start;
gap: clamp(28px, 3.6vw, 52px);
}.ih--full {
min-height: 100vh;
min-height: 100svh;
}.ih--full > .container {
grid-template-rows: auto 1fr auto;
}.hmeta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}.crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
font-family: var(--font-mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.crumbs li {
display: inline-flex;
align-items: center;
gap: 10px;
}.crumbs li + li::before {
content: "/";
opacity: 0.5;
}.crumbs a {
transition: color 0.3s var(--ease-out);
}.crumbs a:hover {
color: var(--accent);
}.crumbs [aria-current] {
color: var(--fg);
}.hmeta__cap {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--fg-3);
}.hmeta__cap b {
font-weight: 500;
color: var(--accent);
}.hmeta__step {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg-2);
transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}.hmeta__step .icon {
width: 14px;
height: 14px;
transition: transform 0.5s var(--ease-expo);
}.hmeta__step:hover {
border-color: var(--accent);
color: var(--accent);
}.hmeta__step:first-child:hover .icon {
transform: translateX(-3px);
}.hmeta__step:last-child:hover .icon {
transform: translateX(3px);
}.hmeta__index {
display: inline-flex;
align-items: center;
gap: 12px;
margin-left: auto;
color: var(--fg-3);
}.hmeta__num {
color: var(--accent);
}.hmeta__rule {
width: 44px;
height: 1px;
background: currentColor;
opacity: 0.6;
}@media (max-width: 599px) {
.hmeta__index {
display: none;
}
}.chapter {
position: relative;
padding-block: var(--chapter-pad);
}.chapter--flush {
padding-block: 0;
}.chapter__head {
display: grid;
gap: 20px;
margin-bottom: clamp(32px, 4vw, 64px);
}@media (min-width: 1024px) {
.chapter__head {
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}.chapter__head > .folio {
grid-column: 1 / -1;
}.chapter__head > .t-h2,
.chapter__head > .t-hero {
grid-column: 1;
}.chapter__head > .t-lead {
grid-column: 2;
}.chapter__head .t-h2 .line {
white-space: nowrap;
}
}.gridlines {
position: absolute;
inset: 0 var(--gutter);
max-width: var(--container-max);
margin-inline: auto;
pointer-events: none;
background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 12));
-webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}.stage {
position: relative;
height: 100vh;
height: 100svh;
overflow: clip;
}.sticky {
position: sticky;
top: calc(var(--header-h) + 24px);
}.spec {
display: grid;
border-top: 1px solid var(--line);
}.spec > div,
.spec > li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-block: 14px;
border-bottom: 1px solid var(--line);
}.spec dt,
.spec .spec__k {
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.spec dd,
.spec .spec__v {
color: var(--fg);
text-align: right;
}.htrack {
display: flex;
gap: clamp(20px, 3vw, 48px);
will-change: transform;
}@media (max-width: 1023px) {
.htrack--stack {
flex-direction: column;
}
}.alt-text {
max-width: 44em;
color: var(--fg-3);
font-size: var(--fs-small);
}
.ui {
position: relative;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--bg) 86%, transparent);
box-shadow: var(--shadow-panel);
overflow: hidden;
isolation: isolate;
}.ui--glass {
background-color: color-mix(in srgb, var(--bg) 58%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(130%);
backdrop-filter: blur(14px) saturate(130%);
}.ui--paper {
--bg: var(--dc-off-white);
--fg: var(--dc-charcoal);
--fg-2: rgba(25, 21, 31, 0.8);
--fg-3: var(--dc-muted);
--line: rgba(103, 33, 223, 0.12);
--line-2: rgba(103, 33, 223, 0.28);
--accent: var(--dc-purple);
color: var(--fg);
background-color: var(--bg);
}.ui__bar {
display: flex;
align-items: center;
gap: 12px;
min-height: 38px;
padding: 0 14px;
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
white-space: nowrap;
}.ui__dots {
display: inline-flex;
gap: 5px;
flex-shrink: 0;
}.ui__dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--line-2);
}.ui__title {
overflow: hidden;
text-overflow: ellipsis;
color: var(--fg-2);
}.ui__status {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
color: var(--accent);
}.ui__body {
position: relative;
padding: clamp(14px, 1.6vw, 22px);
}.pulse {
position: relative;
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--dc-lime);
flex-shrink: 0;
}.pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: uiPulse 2s var(--ease-out) infinite;
}.pulse--wait {
background: var(--fg-3);
}.pulse--purple {
background: var(--dc-purple-bright);
}@keyframes uiPulse {
from { transform: scale(1); opacity: 0.7; }
to { transform: scale(3.2); opacity: 0; }
}.node {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 8px 14px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--bg) 92%, transparent);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-2);
white-space: nowrap;
transition:
border-color 0.45s var(--ease-out),
color 0.45s var(--ease-out),
box-shadow 0.45s var(--ease-out),
background-color 0.45s var(--ease-out);
}.node.is-on {
border-color: var(--dc-lime);
color: var(--fg);
box-shadow: 0 0 0 1px rgba(197, 244, 61, 0.25), 0 10px 40px -12px rgba(197, 244, 61, 0.45);
}.node.is-done {
border-color: color-mix(in srgb, var(--dc-lime) 45%, transparent);
color: var(--fg);
}[data-theme="light"] .node.is-on,
.ui--paper .node.is-on {
border-color: var(--dc-purple);
box-shadow: 0 0 0 1px rgba(103, 33, 223, 0.2), 0 10px 40px -14px rgba(103, 33, 223, 0.45);
}.wire {
fill: none;
stroke: var(--line-2);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}.wire--live {
stroke: var(--dc-lime);
stroke-dasharray: 3 7;
animation: uiFlow 1.1s linear infinite;
}.wire--draw {
stroke: var(--dc-lime);
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--draw, 0) * 100);
}@keyframes uiFlow {
to { stroke-dashoffset: -20; }
}.metric {
display: grid;
gap: 6px;
align-content: start;
}.metric__label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.metric__value {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 1rem + 2.2vw, 3.2rem);
line-height: 0.95;
color: var(--fg);
font-variant-numeric: tabular-nums;
}.metric__delta {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent);
}.metric__spark {
width: 100%;
height: 44px;
overflow: visible;
}.metric__spark path {
fill: none;
stroke: var(--dc-lime);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}.illus {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--fg-3);
white-space: nowrap;
}.illus::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
}.log {
display: grid;
gap: 2px;
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--fg-2);
}.log li {
display: grid;
grid-template-columns: 5.2em 1.4em minmax(0, 1fr);
align-items: baseline;
gap: 8px;
padding: 7px 0;
border-bottom: 1px dashed var(--line);
}.log time {
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}.log .ok {
color: var(--dc-lime);
}.log .wait {
color: var(--dc-purple-bright);
}.log .is-typing::after {
content: "";
display: inline-block;
width: 0.55em;
height: 1em;
margin-left: 3px;
vertical-align: -0.15em;
background: var(--dc-lime);
animation: uiCaret 1s steps(2) infinite;
}@keyframes uiCaret {
50% { opacity: 0; }
}.tabs__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}.tabs__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 16px;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-2);
transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}.tabs__tab:hover {
border-color: var(--fg-3);
color: var(--fg);
}.tabs__tab[aria-selected="true"],
.tabs__tab.is-active {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--fg);
}.input {
width: 100%;
min-height: 56px;
padding: 16px 18px;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background-color: color-mix(in srgb, var(--bg) 70%, transparent);
color: var(--fg);
font: inherit;
font-size: 1rem;
transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}.input::placeholder {
color: var(--fg-3);
}.input:hover {
border-color: var(--fg-3);
}.input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}textarea.input {
min-height: 140px;
resize: vertical;
line-height: 1.55;
}.input[aria-invalid="true"] {
border-color: #ff7a7a;
}.wstep {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background-color: var(--panel);
color: var(--fg-3);
transition: border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}.wstep__n {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--line-2);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.06em;
transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}.wstep__label {
font-weight: 700;
color: var(--fg-2);
}.wstep__meta {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}.wstep.is-active {
border-color: var(--accent);
color: var(--fg-2);
background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}.wstep.is-active .wstep__n,
.wstep.is-done .wstep__n {
border-color: var(--accent);
background-color: var(--accent);
color: var(--bg);
}.wstep.is-active .wstep__label,
.wstep.is-done .wstep__label {
color: var(--fg);
}.locmark {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.9375rem;
color: var(--fg-2);
white-space: nowrap;
}.locmark__dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--fg-3);
flex-shrink: 0;
}.locmark.is-hq .locmark__dot {
background: var(--dc-lime);
box-shadow: 0 0 0 4px rgba(197, 244, 61, 0.18);
}.locmark__iso {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--accent);
}.locmark__time {
padding: 2px 7px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.06em;
color: var(--fg-2);
font-variant-numeric: tabular-nums;
}.segbar {
display: flex;
gap: 4px;
}.segbar i {
position: relative;
flex: 1;
height: 2px;
border-radius: 2px;
background: var(--line-2);
overflow: hidden;
}.segbar i::after {
content: "";
position: absolute;
inset: 0;
background: var(--accent);
transform: scaleX(var(--p, 0));
transform-origin: left;
transition: transform 0.4s var(--ease-out);
}.marquee {
--speed: 40s;
display: flex;
overflow: clip;
-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}.marquee__track {
display: flex;
flex-shrink: 0;
gap: clamp(24px, 3vw, 56px);
padding-right: clamp(24px, 3vw, 56px);
animation: uiMarquee var(--speed) linear infinite;
}.marquee:hover .marquee__track {
animation-play-state: paused;
}@keyframes uiMarquee {
to { transform: translateX(-100%); }
}@media (prefers-reduced-motion: reduce) {
.marquee__track {
animation: none;
}.pulse::after,
.wire--live {
animation: none;
}
}
.hdr__where {
display: none;
}@media (min-width: 1280px) {
.hdr__where {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
margin-left: 6px;
padding-left: 18px;
border-left: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
white-space: nowrap;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-expo);
pointer-events: none;
}.hdr.is-scrolled .hdr__where {
opacity: 1;
transform: none;
}
}.hdr__where-num {
color: var(--accent);
}.hdr__where-text {
display: grid;
min-width: 0;
overflow: hidden;
}.hdr__where-page,
.hdr__where-chapter {
grid-area: 1 / 1;
overflow: hidden;
text-overflow: ellipsis;
transition: transform 0.6s var(--ease-expo), opacity 0.4s var(--ease-out);
}.hdr__where-chapter {
color: var(--fg-2);
opacity: 0;
transform: translateY(100%);
}.hdr.is-compact .hdr__where-chapter.is-in {
opacity: 1;
transform: none;
}.hdr.is-compact .hdr__where-text:has(.is-in) .hdr__where-page {
opacity: 0;
transform: translateY(-100%);
}.hdr--inner .hdr__bar {
transition:
max-width 0.8s var(--ease-expo),
height 0.6s var(--ease-expo),
padding 0.8s var(--ease-expo),
background-color 0.5s var(--ease-out),
box-shadow 0.5s var(--ease-out),
-webkit-backdrop-filter 0.5s var(--ease-out),
backdrop-filter 0.5s var(--ease-out);
}.hdr--inner.is-compact .hdr__bar {
height: 54px;
}@media (min-width: 1280px) {
.hdr--inner.is-scrolled .hdr__bar {
max-width: 1320px;
}
}.hdr--inner.is-compact .logo__mark {
width: 30px;
}.logo__mark {
transition: width 0.6s var(--ease-expo);
}.hdr__item--caps {
display: inline-flex;
align-items: center;
gap: 2px;
}.hdr__more {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
color: var(--fg-3);
transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}.hdr__more svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.5s var(--ease-expo);
}.hdr__more:hover,
.hdr__item--caps.is-open .hdr__more {
color: var(--fg);
}.hdr__item--caps.is-open .hdr__more svg {
transform: rotate(180deg);
}.caps {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-top: 12px;
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-expo), visibility 0s linear 0.6s;
}.caps[hidden] {
display: none;
}.hdr__item--caps.is-open .caps {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-expo), visibility 0s;
}.caps__inner {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
gap: 10px;
padding: 10px;
border-radius: 18px;
background-color: color-mix(in srgb, var(--dc-purple-black) 94%, transparent);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow-header);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
color: var(--dc-white);
--fg: #fff;
--fg-2: rgba(255, 255, 255, 0.78);
--fg-3: rgba(255, 255, 255, 0.5);
--line: rgba(255, 255, 255, 0.1);
--line-2: rgba(255, 255, 255, 0.25);
--accent: var(--dc-lime);
}.caps__all {
position: relative;
display: grid;
align-content: space-between;
gap: 28px;
padding: 22px;
border-radius: 12px;
background:
radial-gradient(ellipse 90% 70% at 100% 0%, rgba(123, 44, 240, 0.45), transparent 70%),
var(--dc-purple-dark);
overflow: hidden;
}.caps__kicker {
color: var(--dc-lime);
}.caps__all-title {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 1rem + 0.9vw, 2rem);
line-height: 0.95;
text-transform: uppercase;
}.caps__all-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
font-weight: 700;
}.caps__all-cta .icon {
width: 16px;
height: 16px;
transition: transform 0.5s var(--ease-expo);
}.caps__all:hover .caps__all-cta .icon {
transform: translateX(4px);
}.caps__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px;
counter-reset: none;
}.caps__list li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}.caps__link {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "num name arrow" "num line arrow";
column-gap: 14px;
row-gap: 2px;
align-items: center;
padding: 14px 16px;
border-radius: 10px;
transition: background-color 0.35s var(--ease-out);
}.caps__link:hover,
.caps__link:focus-visible {
background-color: rgba(255, 255, 255, 0.05);
}.caps__num {
grid-area: num;
align-self: start;
padding-top: 3px;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
color: var(--fg-3);
transition: color 0.3s var(--ease-out);
}.caps__name {
grid-area: name;
font-weight: 700;
font-size: 0.95rem;
}.caps__line {
grid-area: line;
font-size: 0.8125rem;
color: var(--fg-3);
}.caps__arrow {
grid-area: arrow;
color: var(--fg-3);
opacity: 0;
transform: translate(-6px, 6px);
transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-expo), color 0.3s;
}.caps__arrow .icon {
width: 16px;
height: 16px;
}.caps__link:hover .caps__arrow,
.caps__link:focus-visible .caps__arrow {
opacity: 1;
transform: none;
color: var(--dc-lime);
}.caps__link:hover .caps__num,
.caps__link.is-current .caps__num {
color: var(--dc-lime);
}.caps__link.is-current::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 2px;
border-radius: 2px;
background: var(--dc-lime);
}.menu--pages {
overflow-y: auto;
overscroll-behavior: contain;
}.menu__link.is-active small {
color: var(--dc-white);
}.menu__link.is-active .line__inner {
color: var(--dc-lime);
}.menu__caps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 16px;
margin: 8px 0 14px;
padding-left: 30px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-expo);
}.menu-open .menu__caps {
opacity: 1;
transform: none;
transition-delay: 0.18s;
}.menu__caps a {
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 0;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.72);
}.menu__caps a span {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.4);
}.menu__caps a.is-current {
color: var(--dc-lime);
}@media (max-width: 399px) {
.menu__caps {
grid-template-columns: minmax(0, 1fr);
}
}.caprail {
display: none;
}@media (min-width: 1280px) {
.caprail {
position: fixed;
left: max(14px, calc(var(--gutter) / 2 - var(--rail-w) / 2));
top: 50%;
z-index: var(--z-rail);
display: grid;
gap: 14px;
transform: translate(-12px, -50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-expo), visibility 0s linear 0.7s;
}.caprail.is-on {
opacity: 1;
visibility: visible;
transform: translate(0, -50%);
transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-expo), visibility 0s;
}
html[data-theme="light"] .caprail {
--rail-ink: var(--dc-charcoal);
}
}.caprail__list {
display: grid;
gap: 4px;
}.caprail__all,
.caprail__link {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 28px;
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.caprail__all .caprail__tick {
width: 18px;
height: 18px;
border: 1px solid var(--line-2);
border-radius: 50%;
background:
radial-gradient(circle, var(--fg-3) 1.5px, transparent 2px) center / 6px 6px;
}.caprail__num {
width: 18px;
font-variant-numeric: tabular-nums;
transition: color 0.3s var(--ease-out);
}.caprail__bar {
position: relative;
width: 2px;
height: 18px;
border-radius: 2px;
background: var(--line-2);
overflow: hidden;
transition: height 0.5s var(--ease-expo);
}.caprail__bar i {
position: absolute;
inset: 0;
background: var(--accent);
transform: scaleY(var(--p, 0));
transform-origin: top;
}.caprail__link.is-current {
color: var(--fg);
}.caprail__link.is-current .caprail__num {
color: var(--accent);
}.caprail__link.is-current .caprail__bar {
height: 44px;
}.caprail__name {
position: absolute;
left: calc(100% + 6px);
padding: 6px 10px;
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--bg) 88%, transparent);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--fg);
white-space: nowrap;
opacity: 0;
transform: translateX(-6px);
pointer-events: none;
transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-expo);
}.caprail__all:hover .caprail__name,
.caprail__all:focus-visible .caprail__name,
.caprail__link:hover .caprail__name,
.caprail__link:focus-visible .caprail__name {
opacity: 1;
transform: none;
}.caprail__link:hover .caprail__num {
color: var(--fg);
}.next {
position: relative;
padding-block: clamp(48px, 6vw, 104px) clamp(40px, 5vw, 80px);
border-top: 1px solid var(--line);
overflow: clip visible;
}.next__link {
position: relative;
display: grid;
gap: clamp(20px, 3vw, 40px);
padding: clamp(20px, 3vw, 48px) 0;
isolation: isolate;
}.next__link::before {
content: "";
position: absolute;
inset: 0 calc(var(--gutter) * -0.5);
z-index: -1;
border-radius: 24px;
background:
radial-gradient(ellipse 60% 90% at 90% 100%, rgba(123, 44, 240, 0.35), transparent 70%),
var(--dc-purple-dark);
opacity: 0;
transform: scale(0.98);
transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-expo);
}.next__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}.next__kicker {
display: inline-flex;
gap: 12px;
color: var(--fg-3);
}.next__arrow {
position: relative;
display: grid;
place-items: center;
width: clamp(56px, 6vw, 88px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg);
overflow: hidden;
flex-shrink: 0;
transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}.next__arrow .icon {
grid-area: 1 / 1;
width: 40%;
height: 40%;
transition: transform 0.6s var(--ease-expo);
}.next__arrow .icon + .icon {
transform: translateX(-180%);
}.next__title {
display: flex;
align-items: flex-start;
gap: clamp(10px, 1.5vw, 24px);
min-width: 0;
}.next__num {
padding-top: 0.5em;
font-family: var(--font-mono);
font-size: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
letter-spacing: 0.12em;
color: var(--accent);
}.next__name {
position: relative;
display: block;
font-family: var(--font-heading);
font-size: min(clamp(3rem, 0.6rem + 10.5vw, 13.5rem), calc((100vw - var(--gutter) * 2) / 7.2));
line-height: 0.86;
letter-spacing: -0.02em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--line-2);
}.next__name::after {
content: attr(data-text);
position: absolute;
inset: 0;
color: var(--fg);
-webkit-text-stroke: 0;
clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
transition: color 0.5s var(--ease-out);
}.next__rule {
position: relative;
display: block;
height: 1px;
background: var(--line);
}.next__rule i {
position: absolute;
inset: 0;
background: var(--dc-lime);
box-shadow: 0 0 16px rgba(197, 244, 61, 0.5);
transform: scaleX(var(--p, 0));
transform-origin: left;
}.next__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
}.next__statement {
font-size: var(--fs-lead);
color: var(--fg-2);
}.next__caps {
display: flex;
flex-wrap: wrap;
gap: 8px;
}@media (hover: hover) {
.next__link:hover::before {
opacity: 1;
transform: none;
}.next__link:hover .next__arrow {
background-color: var(--dc-lime);
border-color: var(--dc-lime);
color: var(--dc-purple-black);
}.next__link:hover .next__arrow .icon:first-child {
transform: translateX(180%);
}.next__link:hover .next__arrow .icon + .icon {
transform: none;
}.next__link:hover .next__name::after {
color: var(--dc-lime);
}
}.next__dots {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: clamp(28px, 4vw, 56px);
}.next__dots a:not(.link) {
display: grid;
place-items: center;
min-width: 44px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
color: var(--fg-3);
transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}.next__dots a:not(.link):hover {
border-color: var(--fg-3);
color: var(--fg);
}.next__dots a.is-current {
border-color: var(--line-2);
color: var(--fg);
}.next__dots a.is-next {
border-color: var(--accent);
color: var(--accent);
}.next__all {
margin-left: auto;
}
.gcta {
position: relative;
padding-block: var(--chapter-pad);
overflow: clip visible;
}.gcta__glow {
position: absolute;
inset: auto -10% -40% 30%;
height: 90%;
background: radial-gradient(closest-side, rgba(123, 44, 240, 0.35), transparent);
pointer-events: none;
}.gcta .container {
position: relative;
}.gcta__head {
display: grid;
gap: 28px;
}.gcta__title {
font-family: var(--font-heading);
font-weight: 900;
font-size: min(var(--fs-hero), calc((100vw - var(--gutter) * 2) / 7.4));
line-height: 0.88;
letter-spacing: -0.016em;
text-transform: uppercase;
color: var(--fg);
}@media (min-width: 1024px) {
.gcta__head {
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
column-gap: clamp(40px, 6vw, 120px);
align-items: end;
}.gcta__head > .folio {
grid-column: 1 / -1;
}.gcta__title .line {
white-space: nowrap;
}
}.gcta__intents {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 10px;
margin-top: clamp(32px, 4vw, 56px);
}.gcta__intent {
--trace: 0;
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "num label arrow" "num hint arrow";
column-gap: 16px;
row-gap: 4px;
align-items: center;
min-height: 96px;
padding: 20px 20px 20px 22px;
border-radius: 14px;
background-color: var(--panel);
box-shadow: inset 0 0 0 1px var(--line);
transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}.gcta__intent::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from 200deg, var(--dc-lime) calc(var(--trace) * 1turn), transparent 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
transition: --trace 0.9s var(--ease-expo);
}@property --trace {
syntax: "<number>";
inherits: false;
initial-value: 0;
}.gcta__i-num {
grid-area: num;
align-self: start;
padding-top: 4px;
color: var(--fg-3);
}.gcta__i-label {
grid-area: label;
font-family: var(--font-heading);
font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
text-transform: uppercase;
line-height: 1;
color: var(--fg);
}.gcta__i-hint {
grid-area: hint;
font-size: 0.875rem;
color: var(--fg-3);
}.gcta__i-arrow {
grid-area: arrow;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--line-2);
color: var(--fg-2);
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.6s var(--ease-expo);
}.gcta__i-arrow .icon {
width: 15px;
height: 15px;
}.gcta__i-tag {
position: absolute;
top: -9px;
right: 16px;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: var(--dc-lime);
color: var(--dc-purple-black);
font-size: 0.5625rem;
}.gcta__intent.is-suggested {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-lime) 55%, transparent);
}.gcta__intent:hover,
.gcta__intent:focus-visible {
--trace: 1;
background-color: color-mix(in srgb, var(--dc-lime) 6%, transparent);
}.gcta__intent:hover .gcta__i-arrow,
.gcta__intent:focus-visible .gcta__i-arrow {
background-color: var(--dc-lime);
border-color: var(--dc-lime);
color: var(--dc-purple-black);
transform: rotate(45deg);
}.gcta__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 32px;
margin-top: clamp(32px, 4vw, 56px);
padding-top: 28px;
border-top: 1px solid var(--line);
}.gcta__book {
margin-left: auto;
color: var(--fg-2);
}@media (max-width: 599px) {
.gcta__book {
margin-left: 0;
}
}.case {
container-type: inline-size;
width: 100%;
}.case__link {
display: grid;
height: 100%;
border-radius: 16px;
background-color: var(--panel);
box-shadow: inset 0 0 0 1px var(--line);
overflow: hidden;
transition: box-shadow 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}.case__media {
position: relative;
aspect-ratio: 4 / 3;
margin: 0;
overflow: hidden;
background: var(--dc-purple-dark);
}.case__cover {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-expo);
}.case__screen {
position: absolute;
right: 5%;
bottom: -2%;
width: 44%;
height: 78%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-radius: 8px 8px 0 0;
background: #fff;
box-shadow: 0 30px 60px -20px rgba(10, 6, 16, 0.65), 0 0 0 1px rgba(20, 13, 29, 0.12);
overflow: hidden;
transform: translateY(4%);
transition: transform 0.9s var(--ease-expo);
}.case__screen-bar {
display: flex;
gap: 4px;
padding: 6px 8px;
background: #ece9f1;
}.case__screen-bar i {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(20, 13, 29, 0.25);
}.case__screen img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
transition: object-position 4.5s cubic-bezier(0.45, 0, 0.25, 1);
}.case__mark {
position: absolute;
top: 14px;
left: 14px;
padding: 6px 10px;
border-radius: var(--radius-pill);
background: rgba(20, 13, 29, 0.72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.86);
font-size: 0.75rem;
line-height: 1;
}.case__body {
display: grid;
align-content: start;
gap: 12px;
padding: clamp(18px, 2vw, 26px);
}.case__meta {
color: var(--accent);
font-size: 0.6875rem;
}.case__title {
font-family: var(--font-heading);
font-weight: 900;
font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
line-height: 1.02;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--fg);
text-wrap: balance;
}.case__summary {
color: var(--fg-2);
font-size: 0.975rem;
line-height: 1.55;
}.case__caps {
display: flex;
flex-wrap: wrap;
gap: 6px;
}.case__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-weight: 700;
color: var(--fg);
}.case__cta .icon {
width: 16px;
height: 16px;
transition: transform 0.5s var(--ease-expo);
}@media (hover: hover) {
.case__link:hover {
box-shadow: inset 0 0 0 1px var(--accent);
}.case__link:hover .case__cover {
transform: scale(1.04);
}.case__link:hover .case__screen {
transform: translateY(-2%);
}.case__link:hover .case__screen img {
object-position: 50% 100%;
}.case__link:hover .case__cta .icon {
transform: translate(3px, -3px);
}
}@container (min-width: 760px) {
.case--lg .case__link {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}.case--lg .case__media {
aspect-ratio: auto;
min-height: 100%;
}.case--lg .case__body {
align-content: center;
padding: clamp(24px, 3vw, 48px);
}.case--lg .case__title {
font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}
}@media (prefers-reduced-motion: reduce) {
.case__screen img {
transition: none;
}
}.ftr--inner {
padding-top: 0;
}.ftr__closing {
position: relative;
padding-block: clamp(56px, 6vw, 104px) clamp(40px, 4.5vw, 72px);
border-bottom: 1px solid var(--line);
margin-bottom: clamp(40px, 5vw, 72px);
}.ftr__closing-kicker {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--fg-3);
}.ftr__closing-kicker .wedge {
transform: rotate(22.5deg);
}.ftr__closing-title {
margin-top: 24px;
font-family: var(--font-heading);
font-weight: 900;
font-size: min(var(--fs-hero), calc((100vw - var(--gutter) * 2) / 10.4));
line-height: 0.88;
letter-spacing: -0.016em;
text-transform: uppercase;
color: var(--fg);
}@media (min-width: 768px) {
.ftr__closing-title .line {
white-space: nowrap;
}
}.is-motion .ftr__closing-title .line__inner {
transform: translateY(108%);
}.ftr__closing-rule {
display: block;
height: 2px;
margin-top: clamp(32px, 4vw, 56px);
background: linear-gradient(90deg, var(--dc-lime), rgba(197, 244, 61, 0.1) 70%, transparent);
transform-origin: left;
}.ftr--inner .ftr__brand {
align-content: start;
}.ftr__note {
max-width: 24em;
color: var(--fg-2);
}.ftr__head--sub {
margin-top: 16px;
}.ftr__more {
color: var(--fg) !important;
}.ftr__more .icon {
width: 14px;
height: 14px;
align-self: center;
transition: transform 0.5s var(--ease-expo);
}.ftr__more:hover .icon {
transform: translateX(3px);
}.ftr__places {
display: grid;
gap: 8px;
}.ftr__places .ftr__hq {
flex-wrap: wrap;
}.ftr__clock {
margin-left: 6px;
padding: 2px 7px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.08em;
color: var(--dc-lime);
font-variant-numeric: tabular-nums;
}.ftr__markets {
font-size: 0.875rem;
line-height: 1.6;
color: var(--fg-3);
}.ftr__col a[aria-current] {
color: var(--dc-lime);
}@media (min-width: 768px) {
.ftr--inner .ftr__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ftr--inner .ftr__brand {
grid-column: 1 / -1;
}
}@media (min-width: 1024px) {
.ftr--inner .ftr__top {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}@media (min-width: 1280px) {
.ftr--inner .ftr__top {
grid-template-columns: minmax(0, 3.4fr) minmax(0, 2.8fr) minmax(0, 1.8fr) minmax(0, 1.8fr) minmax(0, 2.8fr);
column-gap: clamp(28px, 3vw, 56px);
}.ftr--inner .ftr__brand {
grid-column: auto;
}
}
.ftr {
position: relative;
padding-top: clamp(56px, 7vw, 100px);
overflow: clip;
border-top: 1px solid var(--line);
}.ftr__top {
position: relative;
z-index: 1;
display: grid;
gap: 48px;
}.ftr__brand {
display: grid;
justify-items: start;
gap: 24px;
}.logo--lg .logo__mark {
width: 42px;
}.logo--lg .logo__word {
font-size: 20px;
}.logo--lg .logo__sub {
font-size: 13.5px;
}.ftr__tagline {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
line-height: 0.98;
text-transform: uppercase;
color: var(--fg);
}.ftr__col {
display: grid;
align-content: start;
gap: 18px;
}.ftr__head {
color: var(--fg-3);
}.ftr__col ul {
display: grid;
gap: 10px;
}.ftr__col a,
.ftr__hq {
display: inline-flex;
align-items: baseline;
gap: 10px;
color: var(--fg-2);
transition: color 0.3s var(--ease-out);
}.ftr__col a:hover {
color: var(--dc-lime);
}.ftr__n {
min-width: 1.8em;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.1em;
color: var(--fg-3);
}.social {
display: flex;
gap: 10px;
margin-top: 8px;
}.ftr__col .social a {
display: grid;
place-items: center;
gap: 0;
color: var(--fg-2);
}.ftr__bottom {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
margin-top: clamp(56px, 7vw, 100px);
padding: 24px 0;
border-top: 1px solid var(--line);
font-size: 0.875rem;
color: var(--fg-3);
}.ftr__legal {
display: flex;
gap: 24px;
}.ftr__legal a,
.ftr__top-link {
transition: color 0.3s var(--ease-out);
}.ftr__legal a:hover,
.ftr__top-link:hover {
color: var(--fg);
}.ftr__top-link {
display: inline-flex;
align-items: center;
gap: 8px;
}.ftr__top-link .icon {
width: 16px;
height: 16px;
}.ftr__giant {
position: relative;
margin-top: -0.05em;
height: 0.62em;
font-family: var(--font-heading);
font-size: calc((100vw - var(--gutter)) / 4.25);
line-height: 1;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
pointer-events: none;
user-select: none;
}.ftr__giant span {
display: inline-block;
background: linear-gradient(180deg, rgba(123, 44, 240, 0.28), rgba(123, 44, 240, 0) 70%);
-webkit-background-clip: text;
background-clip: text;
}@media (min-width: 768px) {
.ftr__top {
grid-template-columns: repeat(3, minmax(0, 1fr));
}.ftr__brand {
grid-column: 1 / -1;
}
}@media (min-width: 1100px) {
.ftr__top {
grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr);
column-gap: clamp(32px, 4vw, 72px);
}.ftr__brand {
grid-column: auto;
}
}