/* =====================================================================
   CLICKATIVE - AI-enhanced design & web development
   One stylesheet for the one-page site and the proposal pages.
   ===================================================================== */

/* ---------- Registered properties (so they can ease, not jump) ---------- */

@property --real {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

@property --wire {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --spot {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --wing {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@property --scan {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

/* ---------- Tokens ---------- */

:root {
	--paper: #F7F9FC;
	--paper-2: #EEF4FA;
	--paper-3: #E3ECF6;
	--white: #FFFFFF;
	--ink: #0F1B2D;
	--ink-2: #3E4D63;
	--ink-3: #56657B;
	--line: #DCE5F0;
	--line-2: #C8D6E6;
	--bp: #8DBBE5;
	--bp-soft: rgba(13, 124, 193, 0.07);
	--blue: #0D7CC1;
	--blue-deep: #0A5E96;
	--sky: #65A3D8;
	--sky-2: #A9CFEF;
	--orange: #FE844D;
	--orange-hi: #FF9958;
	--orange-deep: #F4692F;
	--orange-ink: #B24713;
	--amber: #FDB515;
	--green: #1F9D6B;
	--red: #C0362D;
	--grad-click: linear-gradient(120deg, #FF9F5E 0%, #FE844D 45%, #F4692F 100%);
	--grad-btn: linear-gradient(120deg, #FF8A48 0%, #F26A2C 50%, #E0561C 100%);
	--grad-blue: linear-gradient(140deg, #0D7CC1 0%, #3F93D0 55%, #65A3D8 100%);
	--mk-o: url(#cl-orange);
	--mk-b: url(#cl-blue);
	--font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--r-s: 10px;
	--r-m: 16px;
	--r-l: 24px;
	--r-xl: 32px;
	--shadow-1: 0 1px 2px rgba(15, 27, 45, 0.05), 0 12px 30px -16px rgba(15, 27, 45, 0.24);
	--shadow-2: 0 2px 6px rgba(15, 27, 45, 0.05), 0 34px 70px -34px rgba(13, 124, 193, 0.48);
	--shadow-o: 0 14px 30px -12px rgba(244, 105, 47, 0.55);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--t: 0.3s;
	--wrap: 1320px;
	--gutter: clamp(20px, 4vw, 56px);
	--nav-h: 76px;
	--mx: 50vw;
	--my: 50vh;
	--sp: 0;
}

/* ---------- Base ---------- */

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

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

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink-2);
	background: var(--paper);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
textarea {
	font: inherit;
}

a {
	color: inherit;
}

p {
	margin: 0;
}

h1,
h2,
h3 {
	margin: 0;
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -0.02em;
}

h3 {
	font-size: 21px;
	line-height: 1.25;
	font-stretch: 104%;
	letter-spacing: -0.01em;
}

::selection {
	background: rgba(254, 132, 77, 0.3);
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

html.is-modal {
	overflow: hidden;
}

.sprite,
.defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.skip {
	position: fixed;
	left: 16px;
	top: 16px;
	z-index: 3000;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--ink);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform var(--t) var(--ease-in);
}

.skip:focus {
	transform: none;
	transition-timing-function: var(--ease-out);
}

.wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

/* The Clickative mark, wherever it is drawn with <use href="#cl-mark"> */
.mk-o {
	fill: var(--mk-o);
	transform: translate(calc(var(--wing) * -1), calc(var(--wing) * -0.45));
}

.mk-b {
	fill: var(--mk-b);
	transform: translate(calc(var(--wing) * 0.45), var(--wing));
}

/* ---------- Section rhythm + type ---------- */

.sec {
	position: relative;
	padding: clamp(96px, 11vw, 168px) 0;
}

.sec__head--center {
	text-align: center;
}

.sec__head--center .sec__title,
.sec__head--center .sec__lead,
.sec__head--center .sec__body {
	margin-inline: auto;
}

.sec__title {
	position: relative;
	max-width: 17ch;
	font-size: clamp(40px, 5vw, 76px);
	line-height: 1.02;
	font-stretch: 112%;
	font-weight: 820;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* Hovering a headline measures it, the way a design tool would */
.sec__title::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	height: 9px;
	background:
		linear-gradient(var(--sky), var(--sky)) left center / 1.5px 100% no-repeat,
		linear-gradient(var(--sky), var(--sky)) right center / 1.5px 100% no-repeat,
		linear-gradient(var(--sky), var(--sky)) center / 100% 1.5px no-repeat;
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in);
	pointer-events: none;
}

.sec__title:hover::after {
	opacity: 1;
	transform: none;
	transition-timing-function: var(--ease-out);
}

.sec__head--center .sec__title::after {
	left: 10%;
	right: 10%;
}

/* split headlines: a word may move to the next line, but its letters never break apart */
[data-split] .word {
	white-space: nowrap;
}

.sec__lead {
	max-width: 46ch;
	margin-top: 24px;
	font-size: clamp(20px, 1.7vw, 25px);
	line-height: 1.45;
	font-weight: 500;
	color: var(--ink);
}

.sec__body {
	max-width: 60ch;
	margin-top: 16px;
	transition: color var(--t) var(--ease-in);
}

.sec__body:hover {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

/* ---------- Fixed background ---------- */

.bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.bg__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--bp-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--bp-soft) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: -1px -1px;
}

.bg__grid--lit {
	background-image:
		linear-gradient(rgba(13, 124, 193, 0.26) 1px, transparent 1px),
		linear-gradient(90deg, rgba(13, 124, 193, 0.26) 1px, transparent 1px);
	-webkit-mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, transparent 100%);
	mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000 0%, transparent 100%);
	opacity: 0;
	transition: opacity var(--t) var(--ease-in);
}

.has-pointer .bg__grid--lit {
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.bg__aurora {
	position: absolute;
	inset: -20%;
	filter: blur(70px);
	opacity: 0.55;
}

.bg__blob {
	position: absolute;
	width: 38vw;
	height: 38vw;
	border-radius: 50%;
	animation: blob 26s ease-in-out infinite alternate;
}

.bg__blob--o {
	left: 58%;
	top: 8%;
	background: radial-gradient(circle, rgba(255, 153, 88, 0.45), transparent 65%);
}

.bg__blob--b {
	left: 8%;
	top: 38%;
	background: radial-gradient(circle, rgba(101, 163, 216, 0.5), transparent 65%);
	animation-duration: 32s;
	animation-delay: -8s;
}

.bg__blob--s {
	left: 44%;
	top: 64%;
	background: radial-gradient(circle, rgba(13, 124, 193, 0.28), transparent 65%);
	animation-duration: 38s;
	animation-delay: -14s;
}

@keyframes blob {
	0% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(6vw, -4vw) scale(1.12);
	}

	100% {
		transform: translate(-5vw, 5vw) scale(0.94);
	}
}

/* ---------- Loader ---------- */

.loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 34px;
	background: var(--paper);
	transition: opacity 0.5s var(--ease-in), visibility 0s linear 0.5s;
}

html:not(.js) .loader {
	animation: loader-bail 0.4s var(--ease-in) 3s forwards;
}

body:not(.is-loading) .loader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@keyframes loader-bail {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.loader__stage {
	position: relative;
	width: 118px;
	height: 118px;
}

.loader__mark {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.loader__wing {
	transform-box: fill-box;
	transform-origin: 80% 20%;
}

.loader__wing--o {
	fill: url(#cl-orange);
	animation: ld-wing-o 0.7s var(--ease-out) 0.1s both;
}

.loader__wing--b {
	fill: url(#cl-blue);
	animation: ld-wing-b 0.7s var(--ease-out) 0.18s both;
}

@keyframes ld-wing-o {
	from {
		opacity: 0;
		transform: translate(-70px, 34px) rotate(-28deg) scale(0.8);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ld-wing-b {
	from {
		opacity: 0;
		transform: translate(46px, 80px) rotate(24deg) scale(0.8);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.loader__sparks {
	position: absolute;
	right: -30px;
	top: -34px;
	width: 70px;
	height: 70px;
	overflow: visible;
}

.loader__sparks line {
	stroke: #FE8A50;
	stroke-width: 6;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: ld-spark 0.45s var(--ease-out) 0.78s forwards;
}

.loader__sparks line:nth-child(2) {
	animation-delay: 0.83s;
}

.loader__sparks line:nth-child(3) {
	animation-delay: 0.88s;
}

.loader__sparks line:nth-child(4) {
	animation-delay: 0.93s;
}

@keyframes ld-spark {
	to {
		stroke-dashoffset: 0;
	}
}

.loader__bar {
	width: 140px;
	height: 3px;
	border-radius: 999px;
	background: var(--paper-3);
	overflow: hidden;
}

.loader__bar span {
	display: block;
	height: 100%;
	background: var(--grad-click);
	transform-origin: left;
	animation: ld-bar 1.1s var(--ease-out) forwards;
}

@keyframes ld-bar {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ---------- Cursor companion + click sparks ---------- */

.cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2000;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--t) var(--ease-in);
}

.has-pointer .cursor.is-on {
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.cursor__mark {
	position: absolute;
	left: 14px;
	top: 12px;
	width: 20px;
	height: 20px;
	overflow: visible;
}

.sparks {
	position: fixed;
	inset: 0;
	z-index: 1999;
	pointer-events: none;
}

.spark {
	position: absolute;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	overflow: visible;
}

.spark line {
	stroke: var(--orange);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 10 60;
	stroke-dashoffset: 10;
	animation: spark-fly 0.55s var(--ease-out) forwards;
}

.spark line:nth-child(even) {
	stroke: var(--sky);
}

@keyframes spark-fly {
	0% {
		stroke-dashoffset: 10;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: -22;
		opacity: 0;
	}
}

/* the little mark that flies in and clicks each headline */
.clicker {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1500;
	width: 26px;
	height: 26px;
	overflow: visible;
	pointer-events: none;
}

/* ---------- Scroll progress ---------- */

.progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 101;
	height: 3px;
	pointer-events: none;
}

.progress__line {
	position: absolute;
	inset: 0;
	background: var(--grad-click);
	transform-origin: left;
	transform: scaleX(var(--sp));
}

.progress__plane {
	position: absolute;
	left: 0;
	top: -6px;
	width: 15px;
	height: 15px;
	transform: translateX(calc(var(--sp) * (100vw - 18px))) rotate(45deg);
}

/* ---------- Nav ---------- */

.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--nav-h);
	transition: background-color var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.nav.is-scrolled {
	background-color: rgba(247, 249, 252, 0.8);
	box-shadow: 0 1px 0 var(--line);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	transition-timing-function: var(--ease-out);
}

.nav__inner {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 100%;
}

.brand {
	display: block;
	flex: none;
	width: 170px;
}

.brand__logo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.brand__wing {
	transform-box: fill-box;
	transform-origin: 75% 25%;
	transition: transform var(--t) var(--ease-in);
}

.brand__wing--o {
	fill: url(#cl-orange);
}

.brand__wing--b {
	fill: url(#cl-blue);
}

.brand:hover .brand__wing--o {
	transform: translate(-9px, -5px) rotate(-5deg);
	transition-timing-function: var(--ease-out);
}

.brand:hover .brand__wing--b {
	transform: translate(6px, 10px) rotate(4deg);
	transition-timing-function: var(--ease-out);
}

.brand__sparks line {
	stroke: #FE8A50;
	stroke-width: 11.5;
	stroke-dasharray: 40;
	stroke-dashoffset: 0;
}

.brand:hover .brand__sparks line,
.brand.is-sparking .brand__sparks line {
	animation: brand-spark 0.6s var(--ease-out) both;
}

.brand:hover .brand__sparks line:nth-child(2),
.brand.is-sparking .brand__sparks line:nth-child(2) {
	animation-delay: 0.05s;
}

.brand:hover .brand__sparks line:nth-child(3),
.brand.is-sparking .brand__sparks line:nth-child(3) {
	animation-delay: 0.1s;
}

.brand:hover .brand__sparks line:nth-child(4),
.brand.is-sparking .brand__sparks line:nth-child(4) {
	animation-delay: 0.15s;
}

@keyframes brand-spark {
	0% {
		stroke-dashoffset: 40;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

.nav__links {
	display: flex;
	gap: 4px;
	margin-left: auto;
}

.nav__links a {
	position: relative;
	padding: 10px 13px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	transition: color var(--t) var(--ease-in);
}

.nav__links a::after {
	content: '';
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-click);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t) var(--ease-in);
}

.nav__links a:hover,
.nav__links a.is-active {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.nav__links a:hover::after,
.nav__links a.is-active::after {
	transform: scaleX(1);
	transform-origin: left;
	transition-timing-function: var(--ease-out);
}

.nav__burger {
	display: none;
	flex: none;
	width: 48px;
	height: 48px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
	cursor: pointer;
	transition: box-shadow var(--t) var(--ease-in);
}

.nav__burger:hover {
	box-shadow: inset 0 0 0 1.5px var(--sky), var(--shadow-1);
	transition-timing-function: var(--ease-out);
}

.nav__burger span {
	display: block;
	width: 20px;
	height: 2px;
	margin: 4px auto;
	border-radius: 2px;
	background: var(--ink);
	transition: transform var(--t) var(--ease-in), opacity var(--t) var(--ease-in);
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
	transition-timing-function: var(--ease-out);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
	transition-timing-function: var(--ease-out);
}

.nav__mobile {
	display: grid;
	gap: 4px;
	padding: 12px var(--gutter) 24px;
	background: rgba(247, 249, 252, 0.96);
	box-shadow: 0 20px 30px -24px rgba(15, 27, 45, 0.4);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.nav__mobile.is-open {
	opacity: 1;
	transform: none;
	transition-timing-function: var(--ease-out);
}

.nav__mobile a {
	padding: 14px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	transition: color var(--t) var(--ease-in), padding-left var(--t) var(--ease-in);
}

.nav__mobile a:hover {
	padding-left: 10px;
	color: var(--blue);
	transition-timing-function: var(--ease-out);
}

.nav__mobile .btn {
	margin-top: 16px;
}

/* ---------- Buttons ---------- */

.btn {
	--gx: 0px;
	--gy: 0px;
	--lift: 0px;
	--bx: 50%;
	--by: 50%;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	font-size: 17px;
	font-weight: 700;
	font-stretch: 106%;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transform: translate3d(var(--gx), calc(var(--gy) + var(--lift)), 0);
	transition: transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.btn:hover {
	--lift: -2px;
	transition-timing-function: var(--ease-out);
}

.btn:active {
	--lift: 1px;
}

.btn[hidden] {
	display: none;
}

.btn__fill {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	overflow: hidden;
}

/* light that follows the pointer across the button */
.btn__fill::before {
	content: '';
	position: absolute;
	left: var(--bx);
	top: var(--by);
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 62%);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.3s var(--ease-in);
}

.btn:hover .btn__fill::before {
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.3s var(--ease-out);
}

.btn__label {
	position: relative;
	transform: translate(calc(var(--gx) * 0.35), calc(var(--gy) * 0.35));
	transition: transform var(--t) var(--ease-in);
}

.btn:hover .btn__label {
	transition-timing-function: var(--ease-out);
}

.btn__plane {
	--mk-o: #FFFFFF;
	--mk-b: #FFFFFF;
	position: relative;
	width: 20px;
	height: 20px;
	flex: none;
	overflow: visible;
	filter: drop-shadow(0 1px 1px rgba(120, 40, 5, 0.3));
	transition: transform var(--t) var(--ease-in), --wing var(--t) var(--ease-in);
}

.btn:hover .btn__plane {
	--wing: 22px;
	transform: translate(3px, -3px) rotate(10deg);
	transition-timing-function: var(--ease-out);
}

.btn.is-sent .btn__plane {
	animation: plane-away 0.8s var(--ease-in) forwards;
}

@keyframes plane-away {
	0% {
		transform: none;
	}

	30% {
		transform: translate(-6px, 4px) rotate(-8deg);
	}

	100% {
		transform: translate(240px, -160px) rotate(18deg);
		opacity: 0;
	}
}

.btn__ico {
	font-size: 20px;
}

.btn--primary {
	color: #FFFFFF;
	text-shadow: 0 1px 1px rgba(120, 40, 5, 0.35);
	box-shadow: var(--shadow-o);
}

.btn--primary .btn__fill {
	background: var(--grad-btn);
}

/* the shine that sweeps across on hover */
.btn--primary .btn__fill::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -70%;
	width: 50%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
	transform: skewX(-18deg);
	transition: transform 0.3s var(--ease-in);
}

.btn--primary:hover .btn__fill::after {
	transform: skewX(-18deg) translateX(460%);
	transition: transform 0.8s var(--ease-out);
}

.btn--primary:hover {
	box-shadow: 0 22px 44px -14px rgba(244, 105, 47, 0.7);
}

.btn--ghost {
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--line-2);
}

.btn--ghost .btn__fill {
	background: rgba(255, 255, 255, 0.72);
}

/* dashed like a wireframe until you touch it */
.btn--ghost::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1.5px dashed var(--bp);
	opacity: 1;
	transition: opacity var(--t) var(--ease-in);
}

.btn--ghost:hover {
	color: var(--blue-deep);
	box-shadow: inset 0 0 0 1.5px var(--blue), 0 14px 30px -18px rgba(13, 124, 193, 0.6);
}

.btn--ghost:hover::before {
	opacity: 0;
	transition-timing-function: var(--ease-out);
}

.btn--sm {
	min-height: 44px;
	padding: 0 18px;
	font-size: 16px;
}

.btn--lg {
	min-height: 60px;
	padding: 0 32px;
	font-size: 18px;
}

.btn--xl {
	min-height: 74px;
	padding: 0 46px;
	font-size: 21px;
}

.btn--xl .btn__plane {
	width: 26px;
	height: 26px;
}

/* ---------- Icons (inline SVG sprite, drawn from the IcoForge library) ---------- */

.ico {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.14em;
	overflow: visible;
	fill: currentColor;
	fill-opacity: 1;
	stroke: currentColor;
	stroke-width: 0;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
	transform-origin: 50% 50%;
	transition: transform var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

/* wireframe to reality: the outline traces itself, then the fill floods back */
.ico.is-drawing {
	animation: ico-draw 0.9s var(--ease-out);
}

@keyframes ico-draw {
	0% {
		stroke-width: 34;
		stroke-dashoffset: 1;
		fill-opacity: 0;
	}

	55% {
		stroke-width: 34;
		stroke-dashoffset: 0;
		fill-opacity: 0;
	}

	100% {
		stroke-width: 0;
		stroke-dashoffset: 0;
		fill-opacity: 1;
	}
}

.has-ico:hover .ico {
	transition-timing-function: var(--ease-out);
}

.has-ico:hover .ico--lift {
	transform: translate(3px, -3px) rotate(-8deg);
}

.has-ico:hover .ico--spin {
	transform: rotate(120deg);
	transition-duration: 0.6s;
}

.has-ico:hover .ico--swing {
	transform: rotate(-14deg) translateY(-1px);
}

.has-ico:hover .ico--pop {
	transform: scale(1.18);
}

.has-ico:hover .ico--shake {
	transform: rotate(14deg) scale(1.08);
}

.has-ico:hover .ico--tilt {
	transform: rotate(-12deg) translate(-1px, -2px);
}

.has-ico:hover .ico--pulse {
	transform: scale(1.2);
}

.has-ico:hover .ico--slide {
	transform: translateX(4px);
}

.has-ico:hover .ico--slide-back {
	transform: translateX(-4px);
}

.has-ico:hover .ico--flip {
	transform: translateY(-3px) scale(1.08);
}

.has-ico:hover .ico--bob {
	transform: translateY(3px);
}

/* the rounded tile an icon sits in */
.chip {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 17px;
	font-size: 27px;
	color: var(--blue);
	background: linear-gradient(145deg, #FFFFFF, var(--paper-2));
	box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px -14px rgba(13, 124, 193, 0.55);
	transition: color var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.chip::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--grad-click);
	opacity: 0;
	transition: opacity var(--t) var(--ease-in);
}

.has-ico:hover .chip {
	color: #FFFFFF;
	box-shadow: inset 0 0 0 1px transparent, 0 14px 26px -12px rgba(244, 105, 47, 0.6);
	transform: rotate(-4deg);
	transition-timing-function: var(--ease-out);
}

.has-ico:hover .chip::before {
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.chip--sm {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	font-size: 21px;
}

.chip--lg {
	width: 68px;
	height: 68px;
	border-radius: 20px;
	font-size: 34px;
}

/* ---------- Buildable boxes: a wireframe outline, then the real surface ---------- */

.bx {
	--px: 50%;
	--py: 50%;
	position: relative;
	isolation: isolate;
	transition: --spot var(--t) var(--ease-in);
}

.bx::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(420px circle at var(--px) var(--py), rgba(254, 132, 77, calc(0.14 * var(--spot))), transparent 62%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86));
	box-shadow: inset 0 0 0 1px rgba(200, 214, 230, calc(0.7 + 0.3 * var(--spot))), var(--shadow-1);
	opacity: var(--real);
}

.bx::after {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: calc(var(--r-xl) + 7px);
	border: 1.5px dashed var(--bp);
	background:
		linear-gradient(var(--blue), var(--blue)) left top / 8px 8px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right top / 8px 8px no-repeat,
		linear-gradient(var(--blue), var(--blue)) left bottom / 8px 8px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right bottom / 8px 8px no-repeat;
	opacity: var(--wire);
	pointer-events: none;
}

.bx:hover {
	--spot: 1;
	transition-timing-function: var(--ease-out);
}

/* the tile's own icon, large and faint in its bottom-right corner; the span clips it to the tile's corners */
.tile-mark {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}

.tile-mark .ico {
	position: absolute;
	right: -18px;
	bottom: -22px;
	font-size: 132px;
	color: var(--blue);
	opacity: 0.07;
	transform: rotate(-12deg);
	transition: transform 0.3s var(--ease-in), opacity 0.3s var(--ease-in), color 0.3s var(--ease-in);
}

.has-ico:hover .tile-mark .ico {
	opacity: 0.13;
	color: var(--orange-deep);
	transform: rotate(-4deg) scale(1.06);
	transition-timing-function: var(--ease-out);
}

/* ---------- Image scan: blueprint ghost, then the real render wipes in ---------- */

[data-shot] {
	position: relative;
}

.shot__frame {
	position: relative;
}

.shot__ghost {
	width: 100%;
	opacity: 0.55;
	filter: grayscale(1) sepia(1) hue-rotate(168deg) saturate(2.6) brightness(1.18) contrast(0.8);
}

.shot__real {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0 calc((1 - var(--scan)) * 100%) 0 0);
	transition: transform 0.6s var(--ease-in), filter 0.6s var(--ease-in);
}

.shot__scan {
	position: absolute;
	top: 4%;
	bottom: 4%;
	left: calc(var(--scan) * 100%);
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(transparent, var(--orange) 20%, var(--orange) 80%, transparent);
	box-shadow: 0 0 18px 3px rgba(254, 132, 77, 0.55);
	opacity: calc(min(var(--scan), 1 - var(--scan)) * 10);
	pointer-events: none;
}

/* selection handles when you point at an image, like picking it up in a design tool */
.shot__frame::after {
	content: '';
	position: absolute;
	inset: 2%;
	border: 1.5px solid var(--sky);
	background:
		linear-gradient(#fff, #fff) left top / 10px 10px no-repeat,
		linear-gradient(#fff, #fff) right top / 10px 10px no-repeat,
		linear-gradient(#fff, #fff) left bottom / 10px 10px no-repeat,
		linear-gradient(#fff, #fff) right bottom / 10px 10px no-repeat;
	outline: 1.5px solid transparent;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in);
	pointer-events: none;
}

[data-shot]:hover .shot__frame::after {
	opacity: 1;
	transform: none;
	transition-timing-function: var(--ease-out);
}

[data-shot]:hover .shot__real {
	transform: translateY(-6px) scale(1.015);
	filter: drop-shadow(0 26px 30px rgba(13, 124, 193, 0.18));
	transition-timing-function: var(--ease-out);
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: calc(var(--nav-h) + 40px) 0 120px;
	overflow: hidden;
}

.hero__scene {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__canvas,
.build__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.scene-still {
	display: none;
}

html:not(.js) .scene-still,
.no-webgl .scene-still {
	display: block;
	position: absolute;
	right: 4%;
	top: 50%;
	width: min(40vw, 560px);
	transform: translateY(-50%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.hero__inner > * {
	pointer-events: auto;
}

.pulse-dot {
	position: relative;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--green);
}

.pulse-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: pulse 2s var(--ease-out) infinite;
}

.pulse-dot--hot {
	background: var(--orange-deep);
}

.pulse-dot--hot::after {
	animation-duration: 1.2s;
}

@keyframes pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}

.hero__title {
	max-width: 11.5ch;
	margin-top: 26px;
	font-size: clamp(50px, 7.3vw, 122px);
	line-height: 0.93;
	font-weight: 820;
	letter-spacing: -0.045em;
}

.hero__title .char {
	--h: 0;
	display: inline-block;
	color: color-mix(in srgb, var(--orange-deep) calc(var(--h) * 100%), var(--ink));
	will-change: transform;
}

.hero__lede {
	max-width: 50ch;
	margin-top: 30px;
	font-size: clamp(19px, 1.45vw, 22px);
	transition: color var(--t) var(--ease-in);
}

.hero__lede:hover {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.hero__just {
	margin-top: 26px;
	font-size: clamp(22px, 1.8vw, 28px);
	line-height: 1.25;
	font-weight: 800;
	font-stretch: 108%;
	letter-spacing: -0.01em;
	color: var(--blue-deep);
	text-wrap: balance;
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.concept-note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 58ch;
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-2);
	transition: color var(--t) var(--ease-in);
}

.concept-note .ico {
	margin-top: 2px;
	font-size: 22px;
	color: var(--orange-deep);
}

.concept-note strong {
	color: var(--ink);
}

.concept-note:hover {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.concept-note--center {
	justify-content: center;
	text-align: left;
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-3);
	text-decoration: none;
	transform: translateX(-50%);
	transition: color var(--t) var(--ease-in);
}

.hero__scroll .ico {
	font-size: 26px;
	animation: bob 1.9s ease-in-out infinite;
}

.hero__scroll:hover {
	color: var(--blue);
	transition-timing-function: var(--ease-out);
}

@keyframes bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(6px);
	}
}

/* the free concept proposal is the offer: it gets its own block, not a footnote */
.concept-block {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 600px;
	margin-top: 28px;
	padding: 18px 26px 18px 18px;
	border-radius: 22px;
	background: linear-gradient(135deg, #FFF2E8 0%, #FFFFFF 70%);
	box-shadow: inset 0 0 0 1.5px rgba(244, 105, 47, 0.35), 0 18px 36px -24px rgba(244, 105, 47, 0.55);
	transition: transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.concept-block:hover {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 2px var(--orange), 0 24px 44px -22px rgba(244, 105, 47, 0.7);
	transition-timing-function: var(--ease-out);
}

.concept-block__chip {
	display: grid;
	place-items: center;
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: var(--grad-btn);
	box-shadow: var(--shadow-o);
	font-size: 28px;
	color: #FFFFFF;
}

.concept-block__title {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
	font-stretch: 104%;
	color: var(--ink);
}

.concept-block__text {
	margin-top: 4px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ink-2);
}

/* ---------- Marquee ---------- */

.marquee {
	position: relative;
	padding: 24px 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.6);
	border-block: 1px solid var(--line);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

.marquee__list {
	--skew: 0deg;
	display: flex;
	gap: 50px;
	margin: 0;
	padding: 0 50px 0 0;
	list-style: none;
	transform: skewX(var(--skew));
}

.marquee__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	font-stretch: 110%;
	color: var(--ink);
	white-space: nowrap;
	transition: color var(--t) var(--ease-in);
}

.marquee__list li .ico {
	font-size: 26px;
	color: var(--blue);
}

.marquee__list li:hover {
	color: var(--orange-ink);
	transition-timing-function: var(--ease-out);
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Design ---------- */

.design__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 48px 28px;
	align-items: center;
}

.design__head {
	grid-column: 1 / span 6;
}

.shot--devices {
	grid-column: 7 / span 6;
	margin: 0;
}

.redline {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1.5px var(--sky-2), var(--shadow-1);
	font-size: 16px;
	font-weight: 700;
	color: var(--blue-deep);
	white-space: nowrap;
	transition: box-shadow var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.redline::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--orange);
}

.redline:hover {
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--orange), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.redline--a {
	left: 2%;
	top: 6%;
}

.redline--b {
	right: 0;
	top: 42%;
}

.redline--c {
	left: 18%;
	bottom: 2%;
}

.feats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.feats--8 {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.feat,
.pillar,
.service,
.cap,
.reason,
.tier,
.point,
.duo__card {
	border-radius: var(--r-xl);
}

.feat {
	padding: 26px 24px 28px;
}

.feat h3 {
	margin-top: 20px;
	font-size: 20px;
}

.feat p,
.pillar p,
.service p,
.cap p,
.reason p,
.point p {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-3);
	transition: color var(--t) var(--ease-in);
}

.feat:hover p,
.pillar:hover p,
.service:hover p,
.cap:hover p,
.reason:hover p,
.point:hover p {
	color: var(--ink-2);
	transition-timing-function: var(--ease-out);
}

.design__close {
	grid-column: 3 / span 8;
	font-size: clamp(19px, 1.6vw, 23px);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
	text-align: center;
}

/* ---------- Wireframe to reality (sticky 3D stage) ---------- */

.build {
	position: relative;
}

.build__stage {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
}

.build.is-pinned {
	height: 340vh;
}

.build.is-pinned .build__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
}

.build:not(.is-pinned) .build__copy {
	padding-block: calc(var(--nav-h) + 60px) 80px;
}

.build:not(.is-pinned) .step {
	opacity: 1;
}

.build:not(.is-pinned) .build__meter,
.build:not(.is-pinned) .build__hint {
	display: none;
}

.build__scene {
	position: absolute;
	inset: 0;
}

.build__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-top: var(--nav-h);
	pointer-events: none;
}

.build__copy > * {
	max-width: 450px;
	pointer-events: auto;
}

.build__title {
	max-width: 11ch;
	font-size: clamp(38px, 4.2vw, 66px);
}

.build__lead {
	font-size: 19px;
}

.steps {
	display: grid;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.step {
	display: grid;
	grid-template-columns: 30px 44px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 12px 16px;
	border-radius: 20px;
	opacity: 0.5;
	transition: opacity var(--t) var(--ease-in), background-color var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.step.is-on {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.86);
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	transition-timing-function: var(--ease-out);
}

.step:hover {
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.step__n {
	padding-top: 11px;
	font-size: 16px;
	font-weight: 800;
	color: var(--blue);
}

.step h3 {
	font-size: 19px;
	padding-top: 2px;
}

.step p {
	margin-top: 2px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-3);
}

.build.is-pinned .step p {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--t) var(--ease-in), opacity var(--t) var(--ease-in);
}

.build.is-pinned .step.is-on p {
	max-height: 80px;
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.build__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-3);
	transition: color var(--t) var(--ease-in);
}

.build__hint .ico {
	font-size: 22px;
	color: var(--orange-deep);
}

.build__hint:hover {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.build__meter {
	--bp-progress: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--line);
}

.build__meter span {
	display: block;
	height: 100%;
	background: var(--grad-click);
	transform-origin: left;
	transform: scaleX(var(--bp-progress));
}

/* ---------- AI-enhanced ---------- */

.ai {
	overflow: hidden;
}

.ai__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

.ai__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px 64px;
	align-items: start;
}

.under {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.under li,
.includes li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	transition: transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.under li .ico,
.includes li .ico {
	font-size: 20px;
	color: var(--blue);
}

.under li:hover,
.includes li:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px var(--sky), 0 12px 22px -14px rgba(13, 124, 193, 0.55);
	transition-timing-function: var(--ease-out);
}

.duo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	padding-top: 12px;
}

.duo__card {
	padding: 30px 26px 32px;
}

.duo__card h3 {
	margin-top: 20px;
	font-size: 22px;
}

.duo__card--ai .chip {
	color: var(--orange-deep);
}

.ticks,
.marks {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.ticks li,
.marks li {
	padding-left: 28px;
	background: url('../images/clickative_logo_icon.svg') no-repeat 0 0.32em / 15px 15px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ink-2);
	transition: transform var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.ticks li:hover,
.marks li:hover {
	color: var(--ink);
	transform: translateX(4px);
	transition-timing-function: var(--ease-out);
}

.ai__mascot {
	grid-column: 1 / -1;
	justify-self: end;
	width: 240px;
	margin: -18px -10px 0 0;
	pointer-events: none;
}

/* ---------- Vibe coding vs Clickative ---------- */

.versus {
	--split: 50%;
	position: relative;
	max-width: 1000px;
	margin: 60px auto 0;
	aspect-ratio: 16 / 8.4;
	border-radius: 36px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
}

.versus__side {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 64px 40px 40px;
}

.versus__side--vibe {
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 77, 141, 0.12), transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(124, 252, 0, 0.12), transparent 50%),
		#FFF8F4;
}

.versus__side--click {
	background:
		linear-gradient(var(--bp-soft) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, var(--bp-soft) 1px, transparent 1px) 0 0 / 28px 28px,
		#F4F9FE;
	clip-path: inset(0 0 0 var(--split));
}

.mock {
	width: min(560px, 92%);
	border-radius: 18px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 30px 60px -30px rgba(15, 27, 45, 0.45);
}

.mock__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	background: var(--paper-2);
}

.mock__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line-2);
}

.mock__bar span {
	margin-left: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-3);
}

.mock__body {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 22px;
}

.mock__h {
	grid-column: 1 / -1;
	height: 26px;
	width: 70%;
	border-radius: 8px;
	background: var(--ink);
}

.mock__p {
	grid-column: 1 / -1;
	height: 12px;
	border-radius: 6px;
	background: var(--line);
}

.mock__p--short {
	width: 60%;
}

.mock__btn {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
}

.mock__card {
	height: 70px;
	border-radius: 12px;
}

.mock--click .mock__btn {
	background: var(--grad-btn);
	color: #FFFFFF;
}

.mock--click .mock__card {
	background: linear-gradient(150deg, var(--paper-2), #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--line);
}

.mock__ok {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(31, 157, 107, 0.12);
	font-size: 16px;
	font-weight: 700;
	color: #146C4A;
}

.mock__ok::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--green);
}

.mock--vibe {
	transform: rotate(-1.2deg);
}

.mock--vibe .mock__h {
	width: 84%;
	background: #FF4D8D;
	transform: rotate(-2deg) translateX(18px);
	animation: glitch 3.2s steps(1) infinite;
}

.mock--vibe .mock__p {
	width: 108%;
	transform: translateX(-10px);
}

.mock--vibe .mock__btn {
	background: #7CFC00;
	color: var(--ink);
	transform: rotate(4deg) translateX(40px);
	animation: glitch 2.6s steps(1) infinite 0.4s;
}

.mock--vibe .mock__card--a {
	background: #FFE07A;
	transform: translateY(8px) rotate(2deg);
}

.mock--vibe .mock__card--b {
	background: #B7A6FF;
	transform: translate(-14px, -6px) rotate(-3deg);
}

.mock__err {
	grid-column: 1 / -1;
	padding: 8px 12px;
	border-radius: 8px;
	background: #FDE8E7;
	font-family: var(--mono);
	font-size: 16px;
	color: var(--red);
	animation: glitch 4s steps(1) infinite 1.1s;
}

@keyframes glitch {
	0%,
	88%,
	100% {
		translate: 0 0;
		filter: none;
	}

	90% {
		translate: -6px 2px;
		filter: hue-rotate(90deg);
	}

	93% {
		translate: 5px -3px;
	}

	96% {
		translate: -2px 0;
		filter: none;
	}
}

.versus__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--split);
	z-index: 3;
	width: 0;
	cursor: ew-resize;
	outline: none;
}

.versus__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--ink);
}

.versus__knob {
	position: absolute;
	left: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 0 1.5px var(--ink), 0 16px 30px -12px rgba(15, 27, 45, 0.45);
	transform: translate(-50%, -50%);
	transition: transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.versus__knob svg {
	width: 30px;
	height: 30px;
	overflow: visible;
	transition: --wing var(--t) var(--ease-in);
}

.versus__handle:hover .versus__knob,
.versus.is-dragging .versus__knob {
	transform: translate(-50%, -50%) scale(1.12);
	box-shadow: 0 0 0 2px var(--orange), 0 20px 36px -12px rgba(244, 105, 47, 0.55);
	transition-timing-function: var(--ease-out);
}

.versus__handle:hover .versus__knob svg,
.versus.is-dragging .versus__knob svg {
	--wing: 18px;
	transition-timing-function: var(--ease-out);
}

.versus__handle:focus-visible .versus__knob {
	box-shadow: 0 0 0 3px var(--blue), 0 20px 36px -12px rgba(13, 124, 193, 0.55);
}

.versus__tag {
	position: absolute;
	top: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: var(--shadow-1);
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

.versus__tag .ico {
	font-size: 18px;
	color: var(--orange-deep);
}

.versus__tag--vibe {
	left: 18px;
}

.versus__tag--click {
	right: 18px;
}

.versus__tag--click .ico {
	color: var(--blue);
}

.rows {
	display: grid;
	gap: 8px;
	max-width: 1000px;
	margin: 36px auto 0;
}

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

.rows__head span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px 6px;
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
}

.rows__head .ico {
	font-size: 20px;
	color: var(--blue);
}

.row span {
	padding: 16px 20px;
	border-radius: 16px;
	font-size: 17px;
	line-height: 1.4;
	transition: transform var(--t) var(--ease-in), opacity var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.row__vibe {
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--ink-3);
}

.row__click {
	padding-left: 50px !important;
	background: url('../images/clickative_logo_icon.svg') no-repeat 20px center / 17px 17px, #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	font-weight: 600;
	color: var(--ink);
}

.row:hover .row__vibe {
	opacity: 0.6;
	transform: translateX(-4px);
	transition-timing-function: var(--ease-out);
}

.row:hover .row__click {
	transform: translateX(4px);
	box-shadow: inset 0 0 0 1.5px var(--orange), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.warn {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 760px;
	margin: 36px auto 0;
	padding: 18px 22px;
	border-radius: 20px;
	background: #FFF4F0;
	box-shadow: inset 0 0 0 1px rgba(192, 54, 45, 0.18);
	font-size: 17px;
	color: var(--ink);
	transition: box-shadow var(--t) var(--ease-in);
}

.warn .ico {
	margin-top: 3px;
	font-size: 22px;
	color: var(--red);
}

.warn:hover {
	box-shadow: inset 0 0 0 1.5px rgba(192, 54, 45, 0.45), var(--shadow-1);
	transition-timing-function: var(--ease-out);
}

.motto {
	display: grid;
	gap: 4px;
	margin-top: 80px;
	text-align: center;
	font-size: clamp(34px, 5vw, 78px);
	line-height: 1.02;
	font-weight: 850;
	font-stretch: 115%;
	letter-spacing: -0.04em;
	color: var(--ink);
}

/* the second line is drawn as an outline and fills in as you scroll to it */
.motto span:last-child {
	--fill: 0;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--blue);
	background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 100%) no-repeat left / calc(var(--fill) * 100%) 100%;
	-webkit-background-clip: text;
	background-clip: text;
	transition: -webkit-text-stroke-color var(--t) var(--ease-in);
}

.motto span:first-child {
	transition: color var(--t) var(--ease-in);
}

.motto:hover span:first-child {
	color: var(--blue-deep);
	transition-timing-function: var(--ease-out);
}

.motto:hover span:last-child {
	-webkit-text-stroke-color: var(--orange);
	transition-timing-function: var(--ease-out);
}

/* ---------- Built properly from the inside out ---------- */

.inside__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px 60px;
	align-items: center;
}

.stack {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	padding: 0 8%;
}

.stack__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--sky);
	stroke-width: 1.5;
	pointer-events: none;
}

.stack__tag {
	position: absolute;
	padding: 6px 14px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1.5px var(--sky-2), var(--shadow-1);
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	transform: translateY(-50%);
	transition: box-shadow var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.stack__tag:hover {
	color: var(--blue-deep);
	box-shadow: inset 0 0 0 1.5px var(--orange), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.stack__tag--1 {
	right: -2%;
	top: 14.3%;
}

.stack__tag--2 {
	right: -2%;
	top: 35.7%;
}

.stack__tag--3 {
	left: -2%;
	top: 56.2%;
}

.stack__tag--4 {
	left: -2%;
	top: 78.6%;
}

.inside__mascot {
	position: absolute;
	right: -4%;
	bottom: -12%;
	width: clamp(130px, 14vw, 210px);
	pointer-events: none;
}

.pillars {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.pillar {
	padding: 28px 26px 30px;
}

.pillar h3 {
	margin-top: 18px;
}

.pillar--wide {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 22px;
}

.pillar--wide h3 {
	margin-top: 0;
	flex: none;
}

.pillar--wide p {
	margin-top: 0;
	font-size: 18px;
}

/* ---------- Design + brand ---------- */

.brandsec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 64px;
	align-items: center;
}

.brandsec__art {
	margin: 0;
}

.palette {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.swatch {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	min-width: 0;
	height: 92px;
	padding: 12px 14px;
	border: 0;
	border-radius: 18px;
	text-align: left;
	overflow: hidden;
	cursor: pointer;
	transition: flex-grow var(--t) var(--ease-in), transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.swatch:hover,
.swatch:focus-visible {
	flex-grow: 2.4;
	transform: translateY(-4px);
	box-shadow: 0 18px 30px -18px rgba(15, 27, 45, 0.5);
	transition-timing-function: var(--ease-out);
}

.swatch__name {
	font-size: 16px;
	line-height: 1.2;
	font-weight: 800;
}

.swatch__hex {
	font-size: 16px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.swatch:hover .swatch__hex,
.swatch:focus-visible .swatch__hex {
	opacity: 1;
	transform: none;
	transition-timing-function: var(--ease-out);
}

.swatch--orange {
	background: var(--grad-click);
	color: var(--ink);
}

.swatch--blue {
	background: #0D7CC1;
	color: #FFFFFF;
}

.swatch--sky {
	background: #65A3D8;
	color: var(--ink);
}

.swatch--ink {
	background: #0F1B2D;
	color: #FFFFFF;
}

.swatch--paper {
	background: #F7F9FC;
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--ink);
}

.palette__hint {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 16px;
	color: var(--ink-3);
}

.palette__hint .ico {
	font-size: 18px;
	color: var(--blue);
}

.services {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.service {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px;
}

.service h3 {
	padding-top: 4px;
	font-size: 20px;
}

.brandsec__multi,
.pricing__note {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 860px;
	margin: 26px auto 0;
	padding: 18px 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	transition: box-shadow var(--t) var(--ease-in);
}

.brandsec__multi .ico,
.pricing__note .ico {
	flex: none;
	font-size: 24px;
	color: var(--orange-deep);
}

.brandsec__multi:hover,
.pricing__note:hover {
	box-shadow: inset 0 0 0 1.5px var(--orange), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

/* ---------- Custom development (sticky horizontal rail) ---------- */

.custom {
	position: relative;
}

.custom__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding-block: clamp(96px, 11vw, 168px);
}

.custom__rail {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.custom__rail::-webkit-scrollbar {
	display: none;
}

.custom.is-pinned .custom__stage {
	position: sticky;
	top: 0;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	padding: var(--nav-h) 0 0;
	overflow: hidden;
}

.custom.is-pinned .custom__rail {
	overflow: visible;
}

.custom__head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 20px 60px;
	align-items: end;
}

.custom__head .sec__title {
	max-width: 15ch;
}

.custom__intro .sec__lead {
	margin-top: 0;
	font-size: 21px;
}

.custom__track {
	--hx: 0px;
	display: flex;
	align-items: center;
	gap: 22px;
	width: max-content;
	margin: 0;
	padding: 20px var(--gutter);
	list-style: none;
	transform: translate3d(var(--hx), 0, 0);
	will-change: transform;
}

.cap {
	flex: none;
	scroll-snap-align: center;
	width: 310px;
	min-height: 262px;
	padding: 28px 26px;
}

.cap h3 {
	margin-top: 22px;
	font-size: 21px;
}

.cap--art {
	width: 500px;
	padding: 0;
	display: grid;
	place-items: center;
}

.cap--art img {
	width: 100%;
}

.cap--idea {
	width: 400px;
	padding-top: 150px;
}

.cap--idea::before {
	background: linear-gradient(160deg, #FFF1E8, #FFFFFF 62%) !important;
}

.cap__mascot {
	position: absolute;
	top: -26px;
	right: 10px;
	width: 180px;
	pointer-events: none;
	transition: transform var(--t) var(--ease-in);
}

.cap--idea:hover .cap__mascot {
	transform: translateY(-8px) rotate(4deg);
	transition-timing-function: var(--ease-out);
}

.cap--idea h3 {
	margin-top: 0;
	font-size: 26px;
	font-stretch: 110%;
}

.cap--idea p {
	margin-bottom: 22px;
}

/* ---------- Ventures ---------- */

.ventures__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 36px 64px;
	align-items: center;
}

.ventures__head {
	grid-column: 1;
}

.constellation {
	position: relative;
	grid-column: 2;
	grid-row: 1 / span 2;
	aspect-ratio: 600 / 460;
}

.constellation__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.c-link {
	fill: none;
	stroke: var(--line-2);
	stroke-width: 2;
	stroke-dasharray: 5 8;
	transition: stroke var(--t) var(--ease-in);
}

.c-link--pulse {
	stroke: var(--orange);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 16 520;
	stroke-dashoffset: 536;
	animation: c-pulse 2.8s linear infinite;
}

.c-link--pulse[data-node="1"] {
	animation-delay: -0.7s;
}

.c-link--pulse[data-node="2"] {
	animation-delay: -1.4s;
}

.c-link--pulse[data-node="3"] {
	animation-delay: -2.1s;
}

.c-link.is-hot:not(.c-link--pulse) {
	stroke: var(--sky);
	transition-timing-function: var(--ease-out);
}

@keyframes c-pulse {
	to {
		stroke-dashoffset: 0;
	}
}

.c-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	border-radius: 32px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
	transform: translate(-50%, -50%);
}

.c-hub::before {
	content: '';
	position: absolute;
	inset: -14px;
	border-radius: 42px;
	border: 1.5px dashed var(--bp);
	animation: spin 30s linear infinite;
}

.c-hub svg {
	width: 56px;
	height: 56px;
	overflow: visible;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.c-node {
	position: absolute;
	display: grid;
	gap: 8px;
	width: 29%;
	min-width: 150px;
	padding: 12px 14px 14px;
	border-radius: 18px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	transition: transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.c-node:hover,
.c-node.is-hot {
	transform: translateY(-6px) scale(1.04);
	box-shadow: inset 0 0 0 2px var(--orange), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.c-node--0 {
	left: 0;
	top: 4%;
}

.c-node--1 {
	right: 0;
	top: 2%;
}

.c-node--2 {
	left: 0;
	bottom: 4%;
}

.c-node--3 {
	right: 0;
	bottom: 2%;
}

.c-node__bar {
	display: flex;
	gap: 5px;
}

.c-node__bar i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--line-2);
}

.c-node__logo {
	width: 30px;
	height: 30px;
}

.c-node__logo--0 {
	border-radius: 50%;
	background: linear-gradient(140deg, #FFB86B, #F4692F);
}

.c-node__logo--1 {
	border-radius: 8px;
	background: linear-gradient(140deg, #65A3D8, #0D7CC1);
}

.c-node__logo--2 {
	background: linear-gradient(140deg, #3FC99A, #1F9D6B);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.c-node__logo--3 {
	border-radius: 8px;
	border: 2px dashed var(--bp);
}

.c-node__name {
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
}

.c-node__kpi {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 30px;
}

.c-node__kpi span {
	flex: 1;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(var(--sky), var(--blue));
	animation: kpi 3.4s ease-in-out infinite alternate;
}

.c-node__kpi span:nth-child(1) {
	height: 40%;
}

.c-node__kpi span:nth-child(2) {
	height: 70%;
	animation-delay: -1s;
}

.c-node__kpi span:nth-child(3) {
	height: 55%;
	animation-delay: -2s;
}

.c-node__kpi span:nth-child(4) {
	height: 90%;
	animation-delay: -3s;
}

.c-node--3 .c-node__kpi span {
	background: repeating-linear-gradient(0deg, var(--bp) 0 3px, transparent 3px 6px);
	animation: none;
}

@keyframes kpi {
	to {
		transform: scaleY(0.6);
	}
}

.c-node__kpi span {
	transform-origin: bottom;
}

.points {
	grid-column: 1;
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.point {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 22px;
}

.point h3 {
	padding-top: 4px;
	font-size: 20px;
}

/* ---------- Testimonials ---------- */

.clients {
	overflow: hidden;
}

.clients__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 24px;
	margin-top: 60px;
}

.featured {
	position: relative;
	margin: 0;
	padding: clamp(30px, 4vw, 48px);
	border-radius: 36px;
	overflow: hidden;
	color: #FFFFFF;
	background: linear-gradient(150deg, #1689CF 0%, #0B67A6 55%, #084D7D 100%);
	box-shadow: var(--shadow-2);
	transition: box-shadow var(--t) var(--ease-in);
}

.featured::after {
	content: '';
	position: absolute;
	right: -18%;
	bottom: -24%;
	width: 70%;
	aspect-ratio: 1;
	background: url('../images/clickative_logo_icon.svg') no-repeat center / contain;
	opacity: 0.1;
	transform: rotate(-12deg);
	transition: transform 0.6s var(--ease-in), opacity 0.6s var(--ease-in);
	pointer-events: none;
}

.featured:hover {
	box-shadow: 0 40px 80px -30px rgba(13, 124, 193, 0.7);
	transition-timing-function: var(--ease-out);
}

.featured:hover::after {
	opacity: 0.16;
	transform: rotate(-4deg) scale(1.05);
	transition-timing-function: var(--ease-out);
}

.featured__quote {
	position: absolute;
	right: 32px;
	top: 28px;
	width: 84px;
	height: 84px;
	fill: rgba(255, 255, 255, 0.16);
}

.featured__stat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

.featured__num {
	font-size: clamp(66px, 7.4vw, 116px);
	line-height: 0.9;
	font-weight: 850;
	font-stretch: 118%;
	letter-spacing: -0.045em;
	color: #FFFFFF;
	text-shadow: 0 10px 40px rgba(255, 153, 88, 0.45);
}

.featured__label {
	max-width: 14ch;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.88);
}

.featured blockquote {
	position: relative;
	margin: 28px 0 0;
}

.featured blockquote p {
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.45;
	font-weight: 500;
	color: #FFFFFF;
}

.who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 24px;
	font-size: 17px;
}

.stars {
	display: inline-flex;
	gap: 3px;
	font-size: 19px;
	color: var(--amber);
}

.who__name {
	font-weight: 800;
	color: var(--ink);
}

.featured .who__name {
	color: #FFFFFF;
}

.who__where {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-3);
}

.featured .who__where {
	color: rgba(255, 255, 255, 0.85);
}

.who__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(254, 132, 77, 0.14);
	font-weight: 700;
	color: var(--ink);
}

.who__tag .ico {
	color: var(--orange-deep);
}

.deck {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}

.deck__cards {
	position: relative;
	min-height: 400px;
	perspective: 1400px;
}

.deck__card {
	position: absolute;
	inset: 0 0 34px;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 32px;
	border-radius: 32px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	transform-origin: 50% 120%;
	transition: transform 0.3s var(--ease-in), opacity 0.3s var(--ease-in);
	touch-action: pan-y;
	cursor: grab;
}

.deck__card[data-pos="0"] {
	z-index: 3;
	transition-timing-function: var(--ease-out);
}

.deck__card[data-pos="1"] {
	z-index: 2;
	opacity: 0.75;
	transform: translateY(16px) scale(0.95);
}

.deck__card[data-pos="2"] {
	z-index: 1;
	opacity: 0.4;
	transform: translateY(32px) scale(0.9);
}

.deck__card[data-pos="hide"] {
	opacity: 0;
	transform: translateY(40px) scale(0.86);
	pointer-events: none;
}

.deck__card[data-pos="out"] {
	z-index: 4;
	opacity: 0;
	transform: translateX(-70%) rotate(-10deg);
	pointer-events: none;
}

.deck__card[data-pos="in"] {
	z-index: 4;
	opacity: 0;
	transform: translateX(70%) rotate(10deg);
}

/* cards waiting in the stack show their surface only, so text never doubles up */
.deck__card > * {
	transition: opacity var(--t) var(--ease-in);
}

.deck__card:not([data-pos="0"]) > * {
	opacity: 0;
}

.deck__card[data-pos="0"] > * {
	transition-timing-function: var(--ease-out);
}

.deck__card blockquote {
	margin: 18px 0 0;
}

.deck__card blockquote p {
	font-size: 22px;
	line-height: 1.55;
	color: var(--ink);
}

.deck__card .who {
	margin-top: auto;
	padding-top: 20px;
}

.deck__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.deck__btn {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	font-size: 22px;
	color: var(--ink);
	cursor: pointer;
	transition: box-shadow var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.deck__btn:hover {
	color: var(--orange-ink);
	box-shadow: inset 0 0 0 2px var(--orange), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.deck__count {
	min-width: 64px;
	font-size: 16px;
	font-weight: 800;
	color: var(--ink);
	text-align: center;
}

.reaction {
	grid-column: 1 / -1;
	margin: 0;
	padding: 26px 30px 24px;
	border-radius: 32px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	transition: box-shadow var(--t) var(--ease-in);
}

.reaction:hover {
	box-shadow: inset 0 0 0 1.5px var(--sky), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.reaction__label {
	font-size: 16px;
	font-weight: 800;
	color: var(--ink-3);
}

.reaction__bubble {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0;
}

.reaction__bubble p {
	padding: 10px 16px;
	border-radius: 20px 20px 20px 6px;
	background: #0D7CC1;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
	color: #FFFFFF;
	transition: transform var(--t) var(--ease-in);
}

.reaction__bubble p:hover {
	transform: translateX(4px) scale(1.02);
	transition-timing-function: var(--ease-out);
}

.ribbons {
	display: grid;
	gap: 14px;
	margin-top: 80px;
	transform: rotate(-2deg);
}

.ribbon {
	overflow: hidden;
	background: var(--ink);
}

.ribbon--b {
	background: var(--grad-click);
	transform: rotate(3deg) translateY(-6px);
}

.ribbon__track {
	display: flex;
	width: max-content;
	animation: marquee 60s linear infinite;
}

.ribbon--b .ribbon__track {
	animation-direction: reverse;
	animation-duration: 54s;
}

.ribbons:hover .ribbon__track {
	animation-play-state: paused;
}

.ribbon span {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 15px 0 15px 30px;
	font-size: 21px;
	font-weight: 800;
	font-stretch: 115%;
	color: #FFFFFF;
	white-space: nowrap;
}

.ribbon span::after {
	content: '';
	width: 20px;
	height: 20px;
	background: url('../images/clickative_logo_icon.svg') no-repeat center / contain;
}

.ribbon--b span {
	color: var(--ink);
}

/* ---------- Pricing ---------- */

.tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
	margin-top: 60px;
}

.tier {
	display: flex;
	flex-direction: column;
	padding: 34px 30px 30px;
}

.tier--mid {
	margin-block: -14px 14px;
}

.tier--mid::before {
	background:
		radial-gradient(420px circle at var(--px) var(--py), rgba(254, 132, 77, calc(0.14 * var(--spot))), transparent 62%) padding-box,
		linear-gradient(#FFFFFF, #FFFFFF) padding-box,
		var(--grad-click) border-box;
	border: 2px solid transparent;
	box-shadow: var(--shadow-2);
}

.tier__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tier__head h3 {
	font-size: 27px;
	font-stretch: 112%;
}

.tier__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-top: 24px;
	font-size: clamp(28px, 2.3vw, 38px);
	line-height: 1.05;
	font-weight: 850;
	font-stretch: 100%;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.tier__dash {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink-3);
}

.tier__for {
	margin-top: 20px;
	font-size: 16px;
	font-weight: 800;
	color: var(--blue-deep);
}

.tier .marks {
	margin-bottom: 28px;
}

.tier__btn {
	margin-top: auto;
}

/* ---------- Partnership ---------- */

.partner__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 60px 80px;
	align-items: center;
}

.partner__alert {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
	padding: 8px 18px 8px 14px;
	border-radius: 999px;
	background: #FFF1EA;
	box-shadow: inset 0 0 0 1px rgba(244, 105, 47, 0.35);
	font-size: 16px;
	font-weight: 800;
	color: var(--orange-ink);
}

.partner__price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 22px;
}

.partner__amount {
	font-size: clamp(58px, 6vw, 96px);
	line-height: 1;
	font-weight: 850;
	font-stretch: 118%;
	letter-spacing: -0.045em;
	color: var(--ink);
}

.partner__per {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink-3);
}

.includes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.partner__one {
	margin-top: 22px;
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
}

.slots {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 30px;
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
}

.slots__meter-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink-2);
}

.slots__meter-top strong {
	color: var(--orange-ink);
}

.slots__bar {
	height: 12px;
	margin-top: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--paper-3);
}

.slots__fill {
	--fill: 0;
	position: relative;
	display: block;
	width: 66.667%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	background: var(--grad-click);
	transform-origin: left;
	transform: scaleX(var(--fill));
}

.slots__fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.7) 50%, transparent 80%);
	transform: translateX(-100%);
	animation: shimmer 2.2s var(--ease-in) infinite;
}

@keyframes shimmer {
	to {
		transform: translateX(100%);
	}
}

.slot {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 20px 22px;
	border-radius: 22px;
	overflow: hidden;
	transition: transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.slot--taken {
	background: repeating-linear-gradient(135deg, #F2F5F9 0 12px, #EBEFF5 12px 24px);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--ink-3);
}

.slot--taken:hover {
	transform: translateX(-4px);
	transition-timing-function: var(--ease-out);
}

.slot__num {
	font-size: 19px;
	font-weight: 850;
	font-stretch: 110%;
	color: var(--ink);
}

.slot--taken .slot__num {
	color: var(--ink-3);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.slot__state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
}

.slot__stamp {
	position: absolute;
	right: 20px;
	top: 50%;
	padding: 3px 12px;
	border: 2.5px solid #B03A2E;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #B03A2E;
	opacity: 0.85;
	transform: translateY(-50%) rotate(-9deg);
}

.slot--open {
	background: linear-gradient(150deg, #FFF3EA, #FFFFFF 62%);
	box-shadow: 0 0 0 2px var(--orange), 0 22px 44px -20px rgba(244, 105, 47, 0.6);
	animation: slot-glow 2.4s ease-in-out infinite;
}

.slot--open .slot__state {
	color: var(--ink);
}

.slot--open .slot__state .ico {
	font-size: 20px;
	color: var(--orange-deep);
}

@keyframes slot-glow {
	0%,
	100% {
		box-shadow: 0 0 0 2px var(--orange), 0 22px 44px -20px rgba(244, 105, 47, 0.6);
	}

	50% {
		box-shadow: 0 0 0 5px rgba(254, 132, 77, 0.35), 0 26px 54px -18px rgba(244, 105, 47, 0.75);
	}
}

.slot__last {
	margin-left: auto;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ink);
	font-size: 16px;
	font-weight: 800;
	color: #FFFFFF;
	animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
	0%,
	100% {
		transform: none;
	}

	50% {
		transform: scale(1.06);
	}
}

.slot__btn {
	width: 100%;
	margin-top: 4px;
}

.slots__mascot {
	position: absolute;
	right: -160px;
	bottom: -30px;
	width: 230px;
	pointer-events: none;
}

.slots__fine {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-3);
}

/* ---------- Why ---------- */

.why__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 50px 60px;
	align-items: start;
}

.why__head {
	position: sticky;
	top: calc(var(--nav-h) + 40px);
}

.why__head .sec__title {
	font-size: clamp(40px, 3.8vw, 60px);
}

.why__mascot {
	margin: 20px 0 0;
}

.why__mascot img {
	width: min(300px, 100%);
}

.reasons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reason {
	padding: 28px 26px 30px;
}

.reason h3 {
	margin-top: 18px;
}

/* ---------- What happens next ---------- */

.next__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 50px 70px;
	align-items: start;
}

.next__head {
	grid-column: 1 / -1;
}

.path {
	--path: 0;
	position: relative;
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.path::before,
.path::after {
	content: '';
	position: absolute;
	left: 27px;
	top: 28px;
	bottom: 28px;
	width: 2px;
	border-radius: 2px;
	background: var(--line-2);
}

.path::after {
	background: var(--grad-click);
	transform-origin: top;
	transform: scaleY(var(--path));
}

.path__step {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.path__dot {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 2px var(--line-2);
	font-size: 24px;
	color: var(--blue);
	transition: box-shadow var(--t) var(--ease-in), color var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.path__step.is-on .path__dot {
	box-shadow: inset 0 0 0 2px var(--orange), var(--shadow-1);
	color: var(--orange-deep);
	transition-timing-function: var(--ease-out);
}

.path__step:hover .path__dot {
	transform: scale(1.08);
	transition-timing-function: var(--ease-out);
}

.path__step--gift .path__dot {
	background: var(--grad-click);
	box-shadow: var(--shadow-o);
	color: #FFFFFF;
}

.path__step--gift.is-on .path__dot {
	box-shadow: var(--shadow-o);
	color: #FFFFFF;
}

.path__step h3 {
	margin-top: 12px;
}

.path__step p {
	margin-top: 6px;
	font-size: 17px;
	color: var(--ink-3);
	transition: color var(--t) var(--ease-in);
}

.path__step:hover p {
	color: var(--ink-2);
	transition-timing-function: var(--ease-out);
}

.proposal-peek {
	position: sticky;
	top: calc(var(--nav-h) + 50px);
	border-radius: 26px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
}

.proposal-peek__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 14px 18px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.proposal-peek__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line-2);
}

.proposal-peek__bar span {
	margin-left: 10px;
	padding: 4px 14px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 16px;
	color: var(--ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.proposal-peek__body {
	display: grid;
	gap: 16px;
	padding: 30px;
}

.proposal-peek__kicker {
	font-size: 16px;
	font-weight: 800;
	color: var(--orange-ink);
}

.proposal-peek__title {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.1;
	font-weight: 850;
	font-stretch: 112%;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.proposal-peek__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.proposal-peek__tile {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	transition: transform var(--t) var(--ease-in);
}

.proposal-peek__tile:hover {
	transform: translateY(-4px) rotate(-2deg);
	transition-timing-function: var(--ease-out);
}

.proposal-peek__tile--o {
	background: linear-gradient(150deg, #FFB27A, #F4692F);
}

.proposal-peek__tile--b {
	background: linear-gradient(150deg, #65A3D8, #0A5E96);
}

.proposal-peek__tile--s {
	background:
		linear-gradient(var(--bp-soft) 1px, transparent 1px) 0 0 / 14px 14px,
		linear-gradient(90deg, var(--bp-soft) 1px, transparent 1px) 0 0 / 14px 14px,
		var(--paper-2);
	box-shadow: inset 0 0 0 1.5px var(--bp);
}

.proposal-peek__line {
	height: 12px;
	border-radius: 6px;
	background: var(--paper-3);
}

.proposal-peek__line--short {
	width: 62%;
}

.proposal-peek__chips {
	display: flex;
	gap: 8px;
}

.proposal-peek__chips i {
	width: 82px;
	height: 30px;
	border-radius: 999px;
	background: #FFF1EA;
	box-shadow: inset 0 0 0 1px rgba(244, 105, 47, 0.3);
}

/* ---------- Final CTA ---------- */

.final {
	overflow: hidden;
	padding-block: clamp(120px, 14vw, 220px);
}

.final__bg {
	position: absolute;
	inset: -12% 0;
	z-index: -1;
}

.final__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.final__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.final__watermark {
	position: absolute;
	left: 50%;
	top: 46%;
	z-index: -1;
	width: min(80vw, 720px);
	height: auto;
	overflow: visible;
	fill: none;
	stroke: rgba(13, 124, 193, 0.13);
	stroke-width: 1.2;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.final__title {
	max-width: 12ch;
	font-size: clamp(50px, 7.2vw, 124px);
	line-height: 0.94;
	font-weight: 850;
	font-stretch: 112%;
	letter-spacing: -0.045em;
}

.final__qs {
	display: grid;
	gap: 8px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.final__qs li {
	font-size: clamp(19px, 1.6vw, 23px);
	color: var(--ink-2);
	transition: color var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.final__qs li:hover {
	color: var(--ink);
	transform: scale(1.03);
	transition-timing-function: var(--ease-out);
}

.final__tell {
	margin-top: 28px;
	font-size: 23px;
	font-weight: 850;
	font-stretch: 108%;
	color: var(--ink);
}

.final__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

.final__mascot {
	position: absolute;
	right: -3%;
	bottom: -90px;
	width: clamp(170px, 21vw, 320px);
	pointer-events: none;
}

/* ---------- Footer ---------- */

.foot {
	position: relative;
	padding: 64px 0 44px;
	background: rgba(255, 255, 255, 0.66);
	border-top: 1px solid var(--line);
}

.foot__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.brand--foot {
	width: 210px;
}

.foot__brand p {
	margin-top: 14px;
	font-size: 16px;
	color: var(--ink-3);
}

.foot__nav {
	display: grid;
	align-content: start;
	gap: 20px;
}

.foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding-top: 6px;
}

.foot__links a,
.foot__legal a {
	position: relative;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	transition: color var(--t) var(--ease-in);
}

.foot__links a::after,
.foot__legal a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: var(--grad-click);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t) var(--ease-in);
}

.foot__links a:hover,
.foot__legal a:hover {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.foot__links a:hover::after,
.foot__legal a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
	transition-timing-function: var(--ease-out);
}

.foot__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.foot__copy {
	font-size: 16px;
	color: var(--ink-3);
}

.foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in), box-shadow var(--t) var(--ease-in);
}

.totop.is-on {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-timing-function: var(--ease-out);
}

.totop:hover {
	box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
	transition-timing-function: var(--ease-out);
}

.totop__ring {
	position: absolute;
	inset: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	fill: none;
	stroke: var(--orange);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 132;
	stroke-dashoffset: calc(132 * (1 - var(--sp)));
	transform: rotate(-90deg);
}

.totop__mark {
	width: 22px;
	height: 22px;
	overflow: visible;
	transform: translateY(4px) rotate(-45deg);
	transition: transform var(--t) var(--ease-in);
}

.totop:hover .totop__mark {
	transform: translateY(2px) rotate(-45deg);
	transition-timing-function: var(--ease-out);
}

/* ---------- Toast ---------- */

.toast {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 2500;
	width: fit-content;
	margin: 0 auto;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--ink);
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.toast.is-on {
	opacity: 1;
	transform: none;
	transition-timing-function: var(--ease-out);
}

/* ---------- Start Project modal ---------- */

.modal {
	width: min(780px, calc(100% - 28px));
	max-width: none;
	max-height: calc(100svh - 28px);
	padding: 0;
	border: 0;
	border-radius: 30px;
	overflow: visible;
	background: transparent;
	color: var(--ink-2);
}

.modal::backdrop {
	background: rgba(15, 27, 45, 0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--t) var(--ease-in);
}

.modal.is-open::backdrop {
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.modal__panel {
	position: relative;
	max-height: calc(100svh - 28px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 36px clamp(22px, 4vw, 46px) 32px;
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: 0 40px 100px -30px rgba(15, 27, 45, 0.5);
	opacity: 0;
	transform: translateY(26px) scale(0.97);
	transition: opacity var(--t) var(--ease-in), transform var(--t) var(--ease-in);
}

.modal.is-open .modal__panel {
	opacity: 1;
	transform: none;
	transition-timing-function: var(--ease-out);
}

.modal__close {
	position: absolute;
	right: 18px;
	top: 18px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--paper);
	font-size: 18px;
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.modal__close:hover {
	background-color: #FFF1EA;
	color: var(--orange-ink);
	transition-timing-function: var(--ease-out);
}

.modal__head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-right: 50px;
}

.modal__mark {
	flex: none;
	width: 50px;
	height: 50px;
	overflow: visible;
}

.modal__head h2 {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.1;
	font-weight: 850;
	font-stretch: 112%;
	letter-spacing: -0.03em;
}

.modal__gift {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 6px;
	font-size: 16px;
	color: var(--ink-2);
}

.modal__gift .ico {
	margin-top: 2px;
	font-size: 20px;
	color: var(--orange-deep);
}

.modal__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.modal__steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink-3);
	transition: color var(--t) var(--ease-in);
}

.modal__steps li span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--paper-2);
	font-size: 16px;
	transition: background-color var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.modal__steps li.is-on {
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.modal__steps li.is-on span {
	background-color: var(--orange);
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.modal__steps li.is-done span {
	background-color: var(--blue);
	color: #FFFFFF;
}

.modal__bar {
	height: 4px;
	margin: 14px 0 24px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--paper-3);
}

.modal__bar span {
	--fp: 0.333;
	display: block;
	height: 100%;
	background: var(--grad-click);
	transform-origin: left;
	transform: scaleX(var(--fp));
	transition: transform 0.4s var(--ease-out);
}

.form__trap {
	display: none;
}

.form__step {
	display: none;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form__step.is-on {
	display: grid;
	animation: step-in 0.3s var(--ease-out);
}

.form__step.is-leaving {
	animation: step-out 0.3s var(--ease-in) forwards;
}

@keyframes step-in {
	from {
		opacity: 0;
		transform: translateX(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes step-out {
	to {
		opacity: 0;
		transform: translateX(-24px);
	}
}

.form__legend {
	float: left;
	width: 100%;
	margin-bottom: 2px;
	padding: 0;
	font-size: 21px;
	font-weight: 850;
	font-stretch: 108%;
	color: var(--ink);
}

.form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

.field {
	display: grid;
	align-content: start;
	gap: 8px;
	min-width: 0;
}

.field__label {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

.field__label em {
	font-style: normal;
	font-weight: 500;
	color: var(--ink-3);
}

.field__box {
	position: relative;
	display: flex;
	align-items: center;
}

.field__box .ico {
	position: absolute;
	left: 16px;
	font-size: 20px;
	color: var(--ink-3);
	pointer-events: none;
}

.field input,
.field textarea {
	width: 100%;
	min-height: 54px;
	padding: 14px 16px 14px 48px;
	border: 0;
	border-radius: 14px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1.5px var(--line);
	font-size: 17px;
	color: var(--ink);
	transition: box-shadow var(--t) var(--ease-in), background-color var(--t) var(--ease-in);
}

.field textarea {
	min-height: 140px;
	padding-left: 16px;
	line-height: 1.55;
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: #7C8AA0;
}

.field input:hover,
.field textarea:hover {
	box-shadow: inset 0 0 0 1.5px var(--sky-2);
	transition-timing-function: var(--ease-out);
}

.field input:focus,
.field textarea:focus {
	outline: none;
	background-color: #FFFFFF;
	box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(13, 124, 193, 0.12);
	transition-timing-function: var(--ease-out);
}

.field:focus-within .field__box .ico {
	color: var(--blue);
	transition-timing-function: var(--ease-out);
}

.field__err {
	display: none;
	font-size: 16px;
	font-weight: 600;
	color: var(--red);
}

.field.is-bad .field__err {
	display: block;
	animation: step-in 0.3s var(--ease-out);
}

.field.is-bad input,
.field.is-bad textarea {
	box-shadow: inset 0 0 0 2px var(--red);
}

.picks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pick {
	position: relative;
}

.pick input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pick span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 17px;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1.5px var(--line);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
	transition: box-shadow var(--t) var(--ease-in), background-color var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.pick span .ico {
	font-size: 18px;
	color: var(--blue);
}

.pick:hover span {
	box-shadow: inset 0 0 0 1.5px var(--sky);
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.pick input:checked + span {
	background-color: #FFF1EA;
	box-shadow: inset 0 0 0 2px var(--orange);
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.pick__flag {
	position: absolute;
	right: 12px;
	top: -13px;
	z-index: 1;
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--ink);
	font-size: 16px;
	line-height: 1.4;
	font-style: normal;
	font-weight: 800;
	color: #FFFFFF;
	white-space: nowrap;
	pointer-events: none;
	animation: nudge 2.4s ease-in-out infinite;
}

.picks[data-budget-picks] {
	row-gap: 20px;
	padding-top: 6px;
}

.pick input:focus-visible + span {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
}

.field.is-bad .picks .pick span {
	box-shadow: inset 0 0 0 1.5px rgba(192, 54, 45, 0.55);
}

/* a field that folds open (0.3s out) and shut (0.3s in) instead of popping */
.fold {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	opacity: 0;
	transition: grid-template-rows var(--t) var(--ease-in), opacity var(--t) var(--ease-in);
}

.fold.is-open {
	grid-template-rows: minmax(0, 1fr);
	opacity: 1;
	transition-timing-function: var(--ease-out);
}

.fold__inner {
	min-height: 0;
	overflow: hidden;
}

.form__privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-3);
}

.form__privacy .ico {
	margin-top: 2px;
	font-size: 20px;
	color: var(--blue);
}

.form__status {
	margin-top: 18px;
	padding: 12px 16px;
	border-radius: 14px;
	background: #FDECEB;
	font-size: 16px;
	font-weight: 600;
	color: var(--red);
}

.form__status:empty {
	display: none;
}

.form__nav {
	display: flex;
	gap: 12px;
	margin-top: 28px;
}

.form__nav [data-next],
.form__nav [data-submit] {
	margin-left: auto;
}

.form.is-sending [data-submit] {
	pointer-events: none;
	opacity: 0.75;
}

.sent {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 6px 0 4px;
	text-align: center;
	animation: step-in 0.3s var(--ease-out);
}

.sent[hidden] {
	display: none;
}

.sent__mascot {
	width: 230px;
	animation: fly-in 0.9s var(--ease-out);
}

@keyframes fly-in {
	from {
		opacity: 0;
		transform: translate(-120px, 80px) rotate(-12deg);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sent__title {
	font-size: 36px;
	font-weight: 850;
	font-stretch: 112%;
	letter-spacing: -0.03em;
}

.sent p {
	max-width: 44ch;
	font-size: 18px;
}

.sent .btn {
	margin-top: 10px;
}

/* ---------- Legal pop-ups (Privacy Policy, Terms of Service) ---------- */

.legal__date {
	margin-top: 6px;
	font-size: 16px;
	color: var(--ink-3);
}

.legal {
	counter-reset: part;
	margin-top: 28px;
}

.legal__lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink);
}

.legal__part {
	counter-increment: part;
	margin-top: 30px;
}

.legal__part h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
}

/* each clause is numbered so it can be referred to; the badge warms up while you read that clause */
.legal__part h3::before {
	content: counter(part);
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--paper-2);
	font-size: 16px;
	font-weight: 800;
	color: var(--blue);
	transition: background-color var(--t) var(--ease-in), color var(--t) var(--ease-in);
}

.legal__part:hover h3::before {
	background-color: var(--orange);
	color: var(--ink);
	transition-timing-function: var(--ease-out);
}

.legal__part p,
.legal__part ul {
	margin: 10px 0 0;
	padding-left: 44px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
}

.legal__part ul {
	display: grid;
	gap: 6px;
	list-style: none;
}

.legal__part li {
	position: relative;
	padding-left: 20px;
}

.legal__part li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.7em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--orange);
}

.legal strong {
	color: var(--ink);
}

/* a link in running text that opens another pop-up: the form, or the other legal page */
.legal__link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--blue-deep);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--t) var(--ease-in);
}

.legal__link:hover {
	color: var(--orange-ink);
	transition-timing-function: var(--ease-out);
}

.legal__end {
	display: flex;
	justify-content: flex-end;
	margin-top: 34px;
}

/* =====================================================================
   PROPOSALS (proposals/index.php) - reuses everything above
   ===================================================================== */

.prop-cover {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 86svh;
	padding: calc(var(--nav-h) + 50px) 0 90px;
	overflow: hidden;
}

.prop-cover__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 40px 60px;
	align-items: center;
}

.prop-cover__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 14px;
	border-radius: 999px;
	background: #FFF1EA;
	box-shadow: inset 0 0 0 1px rgba(244, 105, 47, 0.3);
	font-size: 16px;
	font-weight: 800;
	color: var(--orange-ink);
}

.prop-cover__kicker .ico {
	font-size: 20px;
	color: var(--orange-deep);
}

.prop-cover__client {
	margin-top: 26px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ink-2);
}

.prop-cover__title {
	max-width: 14ch;
	margin-top: 8px;
	font-size: clamp(44px, 6vw, 96px);
	line-height: 0.96;
	font-weight: 850;
	font-stretch: 110%;
	letter-spacing: -0.04em;
}

.prop-cover__summary {
	max-width: 54ch;
	margin-top: 24px;
	font-size: clamp(19px, 1.5vw, 22px);
	color: var(--ink-2);
}

.prop-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.prop-meta li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	transition: box-shadow var(--t) var(--ease-in);
}

.prop-meta li .ico {
	font-size: 20px;
	color: var(--blue);
}

.prop-meta li:hover {
	box-shadow: inset 0 0 0 1.5px var(--sky), var(--shadow-1);
	transition-timing-function: var(--ease-out);
}

.prop-cover__art {
	position: relative;
	display: grid;
	place-items: center;
}

.prop-cover__mark {
	width: min(100%, 380px);
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 40px 50px rgba(13, 124, 193, 0.25));
	animation: floaty 7s ease-in-out infinite;
}

@keyframes floaty {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-14px) rotate(-2deg);
	}
}

.prop-goals,
.prop-features,
.prop-deliver {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 50px 0 0;
	padding: 0;
	list-style: none;
}

.prop-concepts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 50px;
}

.concept {
	display: flex;
	flex-direction: column;
	padding: 18px 18px 26px;
	border-radius: var(--r-xl);
}

.concept__art {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 22px;
	overflow: hidden;
	background:
		linear-gradient(var(--bp-soft) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(90deg, var(--bp-soft) 1px, transparent 1px) 0 0 / 22px 22px,
		var(--paper-2);
}

.concept__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-in);
}

.concept:hover .concept__art img {
	transform: scale(1.04);
	transition-timing-function: var(--ease-out);
}

.concept__label {
	margin-top: 20px;
	padding: 0 8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--orange-ink);
}

.concept h3 {
	margin-top: 6px;
	padding: 0 8px;
	font-size: 24px;
	font-stretch: 110%;
}

.concept p {
	margin-top: 10px;
	padding: 0 8px;
	font-size: 17px;
	color: var(--ink-3);
}

.concept__swatches {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	padding: 0 8px;
}

.concept__swatches span {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(15, 27, 45, 0.1);
	transition: transform var(--t) var(--ease-in);
}

.concept__swatches span:hover {
	transform: translateY(-4px) scale(1.1);
	transition-timing-function: var(--ease-out);
}

.concept__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding: 0 8px;
}

.concept__tags span {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--paper-2);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-2);
}

.prop-feature__tag {
	display: inline-block;
	margin-top: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--paper-2);
	font-size: 16px;
	font-weight: 700;
	color: var(--blue-deep);
}

.prop-feature__tag--core {
	background: #FFF1EA;
	color: var(--orange-ink);
}

/* a single quote sits as one centred card instead of stretching across the page */
.prop-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
	justify-content: center;
	gap: 22px;
	align-items: stretch;
	margin-top: 60px;
}

.prop-option__time {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.15;
	font-weight: 850;
	font-stretch: 108%;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.prop-option__time .ico {
	font-size: 0.9em;
	color: var(--blue);
}

.prop-option__note {
	margin-top: 12px;
	font-size: 16px;
	color: var(--ink-3);
}

.prop-nav__cta {
	margin-left: auto;
}

.prop-when {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--paper-2);
	font-size: 16px;
	font-weight: 700;
	font-stretch: 100%;
	letter-spacing: 0;
	color: var(--blue-deep);
	vertical-align: 2px;
}

.prop-valid {
	display: flex;
	justify-content: center;
	margin-top: 26px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-3);
}

.prop-404 {
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding: 120px var(--gutter);
	text-align: center;
}

.prop-404 svg {
	width: 120px;
	height: 120px;
	margin: 0 auto 30px;
	overflow: visible;
	animation: floaty 7s ease-in-out infinite;
}

.prop-404 h1 {
	font-size: clamp(36px, 5vw, 64px);
	font-stretch: 110%;
	letter-spacing: -0.03em;
}

.prop-404 p {
	max-width: 44ch;
	margin: 18px auto 30px;
	font-size: 19px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1240px) {
	.nav__links a {
		padding-inline: 9px;
	}

	.nav__links a::after {
		left: 9px;
		right: 9px;
	}

	.feats--8 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.slots__mascot {
		right: -90px;
		width: 190px;
	}
}

@media (max-width: 1080px) {
	:root {
		--nav-h: 68px;
	}

	.nav__links,
	.nav__cta {
		display: none;
	}

	.nav__burger {
		display: block;
	}

	.design__head,
	.shot--devices,
	.design__close {
		grid-column: 1 / -1;
	}

	.ai__grid,
	.brandsec__grid,
	.ventures__grid,
	.partner__grid,
	.next__grid,
	.inside__grid,
	.clients__grid,
	.why__grid,
	.prop-cover__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.stack,
	.constellation,
	.brandsec__art {
		grid-column: 1;
		grid-row: auto;
	}

	.why__head,
	.proposal-peek {
		position: relative;
		top: 0;
	}

	.ai__mascot {
		display: none;
	}

	.slots__mascot {
		right: -20px;
		bottom: auto;
		top: -150px;
		width: 160px;
	}

	.partner__grid {
		gap: 170px;
	}

	.pillars,
	.services,
	.tiers,
	.prop-goals,
	.prop-features,
	.prop-deliver {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tier--mid {
		margin-block: 0;
	}

	.custom__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.foot__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.foot__end {
		align-items: flex-start;
	}
}

/* phones and portrait tablets: the 3D mark gets its own band under the nav instead of sitting behind the copy;
   the band fades out at both ends, so a flyer never drifts behind the logo or gets cut off above the title */
@media (max-width: 1080px) and (orientation: portrait), (max-width: 760px) {
	.hero {
		align-items: flex-start;
		padding-top: 480px;
	}

	.hero__scene {
		inset: 0 0 auto 0;
		height: 490px;
		-webkit-mask-image: linear-gradient(180deg, transparent calc(var(--nav-h) - 6px), #000000 calc(var(--nav-h) + 30px), #000000 calc(100% - 50px), transparent);
		mask-image: linear-gradient(180deg, transparent calc(var(--nav-h) - 6px), #000000 calc(var(--nav-h) + 30px), #000000 calc(100% - 50px), transparent);
	}
}

@media (max-width: 760px) {
	body {
		font-size: 17px;
	}

	.hero {
		padding-top: 390px;
	}

	.hero__scene {
		height: 400px;
	}

	.feats--8,
	.pillars,
	.services,
	.tiers,
	.reasons,
	.duo,
	.form__row,
	.rows__head,
	.row,
	.prop-goals,
	.prop-features,
	.prop-deliver {
		grid-template-columns: minmax(0, 1fr);
	}

	.rows__head {
		display: none;
	}

	.row {
		gap: 4px;
		margin-bottom: 10px;
	}

	.pillar--wide {
		flex-direction: column;
		align-items: flex-start;
	}

	.versus {
		aspect-ratio: 3 / 4;
	}

	.versus__side {
		padding: 70px 16px 24px;
	}

	.versus__tag--click {
		top: auto;
		bottom: 18px;
	}

	.mock__body {
		padding: 16px;
	}

	/* phones: the copy keeps the top of the pinned stage, one step at a time, and the build takes the bottom */
	.build.is-pinned .build__copy {
		justify-content: flex-start;
		padding-top: calc(var(--nav-h) + 24px);
	}

	.build.is-pinned .steps {
		margin-top: 18px;
	}

	.build.is-pinned .step {
		grid-area: 1 / 1;
		opacity: 0;
	}

	.build.is-pinned .step.is-on {
		opacity: 1;
	}

	.build__lead {
		font-size: 17px;
	}

	.stack__tag {
		display: none;
	}

	.stack__lines {
		display: none;
	}

	.cap {
		width: 80vw;
	}

	.cap--art {
		display: none;
	}

	.cap--idea {
		width: 86vw;
	}

	.deck__cards {
		min-height: 520px;
	}

	.slot__stamp {
		right: 14px;
	}

	/* the stamp already says it; the label would sit underneath it */
	.slot--taken .slot__state {
		display: none;
	}

	.final__mascot {
		position: relative;
		right: auto;
		bottom: auto;
		margin-top: 30px;
	}

	.c-node {
		min-width: 0;
		width: 38%;
		padding: 10px;
	}

	.c-hub {
		width: 80px;
		height: 80px;
		border-radius: 24px;
	}

	.c-hub svg {
		width: 40px;
		height: 40px;
	}

	.brandsec__multi,
	.pricing__note {
		border-radius: 24px;
	}

	.palette {
		flex-wrap: wrap;
	}

	.swatch {
		flex-basis: 30%;
	}

	.legal__part p,
	.legal__part ul {
		padding-left: 0;
	}

	/* the proposal header keeps its approve button whole: on a phone the logo shows just its mark */
	.nav--prop .brand {
		width: 43px;
		height: 42px;
		overflow: hidden;
	}

	.nav--prop .brand__logo {
		width: 262px;
		margin-top: -11px;
	}
}

/* touch screens cannot hover, so the hover hint has nothing to offer them */
@media (hover: none) {
	.build__hint {
		display: none;
	}
}

/* =====================================================================
   REDUCED MOTION - everything still works, nothing flies around
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cursor,
	.sparks {
		display: none;
	}

	.marquee__track,
	.ribbon__track {
		animation: none;
	}
}