[data-sect="hero"] {
	--bg: var(--deep);
	--fg: var(--cream);
	--accent: var(--duck);
	--accent-fg: var(--ink);
	--pat-url: url('/static/img/patterns/pattern_017.webp?v=606e825');
	--pat-size: 518px;
	--pat-opacity: .05;
	--pat-blend: overlay;
}

[data-sect="offer"] {
	--zap: color-mix(in srgb, var(--duck) 72%, var(--tangerine));
	--bg: color-mix(in srgb, var(--zap) 66%, var(--cream));
	--fg: var(--ink);
	--accent: color-mix(in srgb, var(--tangerine) 88%, var(--ink));
	--accent-fg: var(--cream);
	--pat-url: url('/static/img/patterns/pattern_041.webp?v=eb51dac');
	--pat-size: 300px;
	--pat-opacity: .09;
	--pat-blend: multiply;
}

[data-sect="process"] {
	--bg: var(--coral);
	--fg: var(--ink);
	--accent: var(--grape);
	--accent-fg: var(--cream);
	--pat-url: url('/static/img/patterns/pattern_008.webp?v=bf42ad3');
	--pat-size: 220px;
	--pat-opacity: .09;
	--pat-blend: multiply;
}

[data-sect="why"] {
	--bg: color-mix(in srgb, var(--deep) 60%, black);
	--fg: var(--cream);
	--accent: var(--duck);
	--accent-fg: var(--ink);
	--pat-url: url('/static/img/patterns/pattern_051.webp?v=d9d6d03');
	--pat-size: 380px;
	--pat-opacity: .06;
	--pat-blend: overlay;
}

[data-sect="cta"] {
	--bg: var(--pool);
	--fg: var(--cream);
	--accent: var(--duck);
	--accent-fg: var(--ink);
	--pat-url: url('/static/img/patterns/pattern_078.webp?v=d583705');
	--pat-size: 400px;
	--pat-opacity: .07;
	--pat-blend: overlay;
}

.hero-sect {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.hero-glow {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 78% 30%, color-mix(in srgb, var(--pool) 85%, transparent) 0%, transparent 60%),
		radial-gradient(90% 70% at 10% 90%, color-mix(in srgb, var(--coral) 22%, transparent) 0%, transparent 65%);
}

.hero {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
	align-items: center;
	width: 100%;
	max-width: var(--hero-max);
	margin: 0 auto;
	padding: 24px var(--gutter) 0;
	gap: clamp(20px, 4vw, 48px);
}

h1 {
	font-size: clamp(34px, 6vw, 94px);
	line-height: .98;
	margin: 0 0 28px;
	max-width: 16ch;
}

.roll {
	display: inline-grid;
	overflow: hidden;
	vertical-align: baseline;
	background: var(--accent);
	color: var(--accent-fg);
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	line-height: 1.06;
	padding: .04em .16em;
	margin: 0 .06em;
}

.roll-item {
	grid-area: 1 / 1;
	white-space: nowrap;
	transform: translateY(100%);
}

.roll-item.is-on { transform: translateY(0); }
.roll-item.is-out { transform: translateY(-100%); }

.roll-item.is-on,
.roll-item.is-out {
	transition: transform .55s cubic-bezier(.5, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.roll-item.is-on,
	.roll-item.is-out {
		transition: none;
	}
}

.sub {
	font-size: clamp(15px, 1.7vw, 21px);
	line-height: 1.6;
	max-width: 46ch;
	opacity: .82;
	margin: 0 0 40px;
}

.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 0;
	width: 100%;
	max-width: var(--hero-max);
	margin: 44px auto 0;
	padding: 0 var(--gutter) 76px;
}

.stat {
	padding: 4px clamp(20px, 3vw, 50px);
	border-left: 3px solid color-mix(in srgb, currentColor 24%, transparent);
}

.stat:first-child { padding-left: 0; border-left: 0; }

.stat b {
	display: block;
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(26px, 3.4vw, 42px);
	letter-spacing: -.03em;
	color: var(--accent);
}

.stat span {
	font-family: var(--mono-font);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .62;
}

.art {
	position: relative;
	display: grid;
	place-items: center;
	align-self: start;
	min-height: calc(var(--disc) + 40px);
}

.art-disc {
	position: absolute;
	width: var(--disc);
	height: var(--disc);
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid color-mix(in srgb, var(--cream) 25%, transparent);
	box-shadow:
		0 0 0 12px color-mix(in srgb, var(--foam) 8%, transparent),
		0 0 60px 10px color-mix(in srgb, var(--duck) 20%, transparent),
		0 0 140px 40px color-mix(in srgb, var(--foam) 16%, transparent);
}

.art-rays {
	position: absolute;
	inset: -20%;
	background: repeating-conic-gradient(from 0deg,
		color-mix(in srgb, var(--pool) 62%, white) 0deg 15deg,
		color-mix(in srgb, var(--pool) 78%, black) 15deg 30deg);
	will-change: transform;
}

.bubbles {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: visible;
}

.bubble {
	position: absolute;
	left: 50%;
	bottom: 40%;
	width: var(--size);
	height: var(--size);
	margin-left: var(--x);
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--bubble) 85%, transparent);
	background: color-mix(in srgb, var(--bubble) 18%, transparent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--bubble) 30%, transparent);
	opacity: 0;
	animation: rise var(--dur) linear forwards;
}

@keyframes rise {
	0% { transform: translate(0, 0) scale(.4); opacity: 0; }
	12% { opacity: .9; }
	72% { opacity: .85; }
	100% { transform: translate(var(--drift), calc(-1 * var(--rise) - 90px)) scale(1.75); opacity: 0; }
}

.duck-big {
	display: block;
	position: relative;
	z-index: 3;
	width: calc(var(--disc) * .74);
	height: auto;
	margin-bottom: calc(var(--disc) * .04);
	filter: drop-shadow(0 22px 34px rgba(0,0,0,.45));
}

.cards, .steps {
	display: grid;
	gap: 24px;
}

.cards { grid-template-columns: repeat(auto-fit, minmax(296px, 1fr)); }
.steps { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.rows { display: grid; gap: 20px; }

.row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: clamp(18px, 3vw, 34px);
	padding: clamp(24px, 3vw, 40px);
}

.row-mark {
	width: 66px;
	height: 66px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--accent);
	color: var(--accent-fg);
	border: 3px solid var(--ink);
}

.row-mark svg { width: 32px; height: 32px; fill: currentColor; }

.row-body h3 {
	font-family: 'Archivo Black', sans-serif;
	font-size: clamp(18px, 2.3vw, 26px);
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.row-body p {
	font-size: clamp(15px, 1.7vw, 19px);
	line-height: 1.65;
	opacity: .78;
	max-width: 72ch;
	margin: 0;
}

.card { padding: 34px 32px 38px; }

.card-mark {
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--accent);
	color: var(--accent-fg);
	margin-bottom: 20px;
	border: 3px solid var(--ink);
}

.card-mark svg { width: 30px; height: 30px; fill: currentColor; }

.card h3 {
	font-family: 'Archivo Black', sans-serif;
	font-size: 21px;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.card p {
	font-size: 17px;
	line-height: 1.6;
	opacity: .76;
	margin: 0;
}

.step { padding: 30px 30px 34px; }

.step b {
	display: inline-block;
	font-family: var(--mono-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	background: var(--accent);
	color: var(--accent-fg);
	padding: 6px 12px;
	margin-bottom: 18px;
}

.step h3 {
	font-family: 'Archivo Black', sans-serif;
	font-size: 20px;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.step p { font-size: 17px; line-height: 1.6; opacity: .76; margin: 0; }

.cta-inner { text-align: center; max-width: 44ch; margin: 0 auto; }

.cta-inner h2 {
	font-size: clamp(28px, 4.6vw, 74px);
	line-height: 1.02;
	margin: 0 0 20px;
}

.cta-inner p {
	font-size: clamp(15px, 1.8vw, 21px);
	line-height: 1.6;
	opacity: .8;
	margin: 0 0 38px;
}

.cta-duck {
	display: block;
	width: clamp(96px, 15vw, 170px);
	height: auto;
	margin: 0 auto 22px;
}

@media (max-width: 980px) {
	.hero-sect { min-height: auto; }

	.hero {
		grid-template-columns: 1fr;
		padding-top: 6px;
		text-align: center;
		justify-items: center;
	}

	.art { order: -1; width: 100%; align-self: center; min-height: calc(var(--disc) + 120px); }
	h1, .sub { max-width: 22ch; margin-left: auto; margin-right: auto; }
	.sub { max-width: 46ch; }
	.actions { justify-content: center; }
	.kicker { margin-bottom: 20px; }
	.stats { justify-content: center; padding-bottom: 56px; }
}

@media (max-width: 700px) {
	.stat { padding: 4px 18px; }
	.stat b { font-size: 26px; }

	.row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 460px) {
	.stats { flex-direction: column; align-items: center; }
	.stat, .stat:first-child { padding: 0; border-left: 0; text-align: center; }
	.actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bubbles { display: none; }
}