*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }

img, svg, video, canvas { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

:where(button) { cursor: pointer; }

:root {
	color-scheme: dark;

	--ink-1000: #000000;
	--ink-950:  #0A0A0A;
	--ink-900:  #101010;
	--ink-850:  #161616;
	--ink-800:  #1C1C1C;
	--ink-700:  #262626;
	--ink-600:  #333333;

	--white:    #FFFFFF;
	--grey-200: #E4E4E2;
	--grey-400: #A8A8A4;
	--grey-500: #8A8A86;
	--grey-600: #6B6B67;

	--carrot-400: #FF8A45;
	--carrot-500: #FE6C19;
	--carrot-600: #F26A1B;
	--carrot-700: #C34701;
	--carrot-800: #8F3401;

	--mark-highlight: #FFA471;
	--mark-mid:       #DB4F00;
	--mark-shade:     #C34701;
	--mark-deep:      #632400;

	--sprout: #C6FF7D;

	--surface-page:   var(--ink-1000);
	--surface-raised: var(--ink-950);
	--surface-inset:  var(--ink-900);
	--surface-accent: var(--carrot-500);

	--text-primary:   var(--white);
	--text-secondary: var(--grey-200);
	--text-muted:     var(--grey-400);
	--text-faint:     var(--grey-500);
	--text-accent:    var(--carrot-500);
	--text-on-accent: var(--ink-1000);

	--line-hairline: var(--ink-800);
	--line-strong:   var(--ink-600);
	--line-accent:   var(--carrot-500);

	--focus-ring: var(--carrot-500);

	--font-display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-body:    'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--weight-light:   300;
	--weight-regular: 400;
	--weight-medium:  500;
	--weight-bold:    700;
	--weight-black:   900;

	--size-display-1: clamp(2.6rem, 7.2vw, 6.5rem);
	--size-display-2: clamp(2rem, 4.6vw, 3.75rem);
	--size-heading:   clamp(1.5rem, 2vw, 1.875rem);
	--size-lead:      clamp(1.125rem, 1.5vw, 1.375rem);
	--size-body:      1.0625rem;
	--size-small:     0.9375rem;
	--size-label:     0.75rem;

	--leading-tight:  0.94;
	--leading-snug:   1.08;
	--leading-normal: 1.5;
	--leading-loose:  1.65;

	--tracking-display: -0.03em;
	--tracking-heading: -0.02em;
	--tracking-normal:  0;
	--tracking-label:   0.16em;

	--measure-narrow:  34ch;
	--measure-default: 56ch;
	--measure-wide:    68ch;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 160px;

	--section-y:     clamp(72px, 10vw, 144px);
	--container-max: 1320px;
	--container-pad: clamp(24px, 5vw, 64px);
	--grid-columns:  12;
	--grid-gutter:   24px;

	--radius-none: 0px;
	--radius-hair: 2px;

	--border-hairline: 1px solid var(--line-hairline);
	--border-strong:   1px solid var(--line-strong);
	--border-accent:   1px solid var(--line-accent);
	--rule-weight:     1px;

	--ease-turbo:     cubic-bezier(0.16, 1, 0.3, 1);
	--ease-turbo-out: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast:   120ms;
	--dur-base:   220ms;
	--dur-slow:   640ms;
	--dur-flood:  1400ms;
	--dur-flood-out: 420ms;
	--shift-x:    3px;
}

body {
	background: var(--surface-page);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--size-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	text-wrap: pretty;
}

h1, h2, h3, h4 { line-height: var(--leading-snug); text-wrap: balance; }
p, li { text-wrap: pretty; }
code, pre, kbd, samp { font-family: var(--font-mono); }

:where(a) {
	color: var(--text-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--carrot-700);
	transition: color var(--dur-fast) var(--ease-standard),
	            border-color var(--dur-fast) var(--ease-standard);
}
:where(a):hover { color: var(--sprout); border-bottom-color: var(--sprout); }

::selection { background: var(--carrot-500); color: var(--ink-1000); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.band { border-bottom: var(--border-hairline); }
.band[data-surface="raised"] { background: var(--surface-raised); }
.band[data-surface="inset"]  { background: var(--surface-inset); }
.band-pad { padding-block: var(--section-y); }

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gutter);
}

.wordmark {
	font-family: var(--font-display);
	font-weight: var(--weight-light);
	font-size: 1.25rem;
	letter-spacing: var(--tracking-display);
	line-height: 1;
	color: var(--white);
	white-space: nowrap;
	border-bottom: 0;
	text-transform: uppercase;
}
.wordmark strong { font-weight: var(--weight-black); }

.eyebrow {
	display: inline-flex;
	gap: var(--space-3);
	align-items: baseline;
	font-family: var(--font-mono);
	font-size: var(--size-label);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-faint);
}
.eyebrow[data-accent] { color: var(--carrot-500); }
.eyebrow .index { color: var(--carrot-500); }

.rule {
	border: 0;
	block-size: var(--rule-weight);
	background: var(--line-hairline);
}
.rule-accent { background: var(--carrot-500); }
.rule-strong { background: var(--line-strong); }
.rule-inset  { margin-inline: var(--space-5); }

button, .button {
	--btn-bg: transparent;
	--btn-ink: var(--white);
	--btn-line: var(--line-strong);
	--btn-pad: 13px 24px;
	--btn-size: 1rem;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);

	padding: var(--btn-pad);
	border: 1px solid var(--btn-line);
	border-radius: var(--radius-none);
	background: var(--btn-bg);
	color: var(--btn-ink);

	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--btn-size);
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;

	transition: background var(--dur-fast) var(--ease-standard),
	            color var(--dur-fast) var(--ease-standard),
	            border-color var(--dur-fast) var(--ease-standard),
	            transform var(--dur-base) var(--ease-turbo);
}

.btn-label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	gap: var(--space-2);
	align-items: baseline;
	transition: transform var(--dur-slow) var(--ease-turbo);
}

button[data-size="lg"], .button[data-size="lg"] { --btn-pad: 18px 32px; --btn-size: 1.125rem; }
button[data-size="sm"], .button[data-size="sm"] { --btn-pad: 9px 16px;  --btn-size: 0.875rem; }

button[data-variant="primary"], .button[data-variant="primary"] {
	--btn-bg: var(--carrot-500);
	--btn-ink: var(--ink-1000);
	--btn-line: transparent;
}
button[data-variant="primary"]::before,
.button[data-variant="primary"]::before {
	content: "";
	position: absolute;
	left: 33%;
	top: 50%;
	inline-size: 230%;
	aspect-ratio: 1;
	z-index: 0;
	background: var(--sprout);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);

	transition: transform var(--dur-flood-out) var(--ease-turbo-out);
}
button[data-variant="primary"]:hover::before,
.button[data-variant="primary"]:hover::before {
	transform: translate(-50%, -50%) scale(1);
	transition: transform var(--dur-flood) var(--ease-turbo);
}
button[data-variant="primary"]:hover,
.button[data-variant="primary"]:hover { --btn-line: var(--sprout); }
button[data-variant="primary"]:hover .btn-label,
.button[data-variant="primary"]:hover .btn-label { transform: translateX(6px); }

button[data-variant="outline"], .button[data-variant="outline"] {
	--btn-bg: transparent;
	--btn-ink: var(--white);
	--btn-line: var(--line-strong);
}
button[data-variant="outline"]:hover, .button[data-variant="outline"]:hover {
	--btn-ink: var(--carrot-500);
	--btn-line: var(--carrot-500);
	transform: translateX(var(--shift-x));
}

button[data-variant="ghost"], .button[data-variant="ghost"] {
	--btn-bg: transparent;
	--btn-ink: var(--carrot-500);
	--btn-line: transparent;
	padding: 0;
}
button[data-variant="ghost"]:hover, .button[data-variant="ghost"]:hover {
	--btn-ink: var(--carrot-400);
	transform: translateX(var(--shift-x));
}

button:disabled, .button[aria-disabled="true"] {
	opacity: 0.35;
	pointer-events: none;
	transform: none;
}

.text-link {
	display: inline-block;
	color: var(--carrot-500);
	border-bottom: 1px solid var(--carrot-700);
	padding-bottom: 1px;
	transition: color var(--dur-fast) var(--ease-standard),
	            border-color var(--dur-fast) var(--ease-standard),
	            transform var(--dur-base) var(--ease-turbo);
}
.text-link:hover {
	color: var(--sprout);
	border-bottom-color: var(--sprout);
	transform: translateX(var(--shift-x));
}
.text-link[data-muted] { color: var(--grey-400); border-bottom-color: var(--ink-700); }
.text-link[data-muted]:hover { color: var(--sprout); border-bottom-color: var(--sprout); }

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	border: var(--border-hairline);
	border-radius: var(--radius-none);
	background: transparent;
}
.card[data-surface="raised"] { background: var(--surface-raised); }

.card-title {
	font-family: var(--font-display);
	font-weight: var(--weight-black);
	font-size: var(--size-heading);
	letter-spacing: var(--tracking-heading);
	line-height: 1.05;
	color: var(--white);
}
.card-body {
	max-width: var(--measure-narrow);
	color: var(--text-muted);
	font-weight: var(--weight-light);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.pillars > * {
	padding: clamp(40px, 5vw, 64px) min(var(--space-7), var(--container-pad));
	border: 0;
	border-inline-start: var(--border-hairline);
}
.pillars > *:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pillars > *:last-child { padding-inline-end: 0; }

@media (width < 55rem) {
	.pillars { grid-template-columns: 1fr; }
	.pillars > * {
		padding: clamp(32px, 7vw, 48px) 0;
		border-inline-start: 0;
		border-block-start: var(--border-hairline);
	}
	.pillars > *:first-child { border-block-start: 0; padding-block-start: 0; }
}

label { display: flex; flex-direction: column; gap: var(--space-2); }
label > .field-label {
	font-family: var(--font-mono);
	font-size: var(--size-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-faint);
}

input, textarea, select {
	inline-size: 100%;
	padding: var(--space-3) var(--space-4);
	border: var(--border-hairline);
	border-radius: var(--radius-none);
	background: var(--surface-inset);
	color: var(--white);
	transition: border-color var(--dur-fast) var(--ease-standard);
}
textarea { min-block-size: 104px; resize: vertical; }

input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--carrot-500); }

input:user-invalid, textarea:user-invalid { border-color: var(--carrot-700); }
.field-error { color: var(--carrot-400); font-size: var(--size-small); }
input:not(:user-invalid) ~ .field-error { display: none; }

.muted    { color: var(--text-muted); }
.faint    { color: var(--text-faint); }
.accent   { color: var(--carrot-500); }
.thin     { font-weight: var(--weight-light); }
.black    { font-weight: var(--weight-black); }

.display {
	font-family: var(--font-display);
	font-weight: var(--weight-light);
	font-size: var(--size-display-2);
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-snug);
}
.display strong { font-weight: var(--weight-black); }
.display-1 { font-size: var(--size-display-1); line-height: var(--leading-tight); }

.lead {
	font-size: var(--size-lead);
	font-weight: var(--weight-light);
	line-height: 1.45;
	color: var(--text-secondary);
	max-width: var(--measure-default);
}

.visually-hidden {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.flow { display: flex; flex-direction: column; gap: var(--flow-space, var(--space-5)); }

.row    { display: flex; gap: var(--space-4); align-items: center; }
.wrap   { flex-wrap: wrap; }
.grow   { flex: 1; }
.between{ justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}