/* styles.css */

@font-face {
	font-family: "Galano";
	src: url("fonts/galano.woff2") format("woff2"),
	   url("fonts/galano.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "VCR";
	src: url("fonts/vcr.woff2") format("woff2"),
	   url("fonts/vcr.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-body: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--font-heading: "Galano", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	--font-special: "VCR", "Roboto Mono", monospace;
	--frame-inset: 3px; /* distance from viewport edge to frame */
	--frame-width: 8px;  /* thickness of frame */
	--frame-inset-mob: 2px;
	--frame-width-mob: 4px;
}

/* Basic reset */

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

html,
body {
	height: 100%;
	scroll-behavior: smooth;
}

/* Scrollbar */

html::-webkit-scrollbar {
	width: 5px;
	height: 10px;
}

html::-webkit-scrollbar-thumb {
	background: #EB258B;
	border-top: var(--frame-inset) solid #fff;
}

html::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.38);
}

@supports (-moz-appearance: none){
	html {
		scrollbar-color: #EB258B #000;
		scrollbar-width: thin;
	}
}

@media (prefers-reduced-motion: reduce) {
	html{
		scroll-behavior: auto;
	}
}

body {
	min-height: 100vh;
	margin: 0;
	color: #0c0c0f;
	font-family: var(--font-body);
	line-height: 1.2;
	font-size: 1.3vw;
	padding: calc(var(--frame-inset) + var(--frame-width));
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: var(--frame-inset) 0 var(--frame-inset) var(--frame-inset);
	border: var(--frame-width) solid #000;
	pointer-events: none;
	z-index: 9999;
}

@supports (-moz-appearance: none){
	body::before {
		inset: var(--frame-inset);
	}
}

html, body { 
	overflow-x: clip;
}

@supports not (overflow: clip) {
	html, body { overflow-x: hidden; }
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: none;
	cursor: pointer;
}

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

p {
	margin: 0 0 2ch 0;
	font-weight: 300;
}

.container {
	width: 85%;
	margin: 0 auto;
}

.container-narrow {
	width: 60%;
	margin: 0 auto;
}

.center {
	text-align: center;
}

.muted {
	color: #777;
	font-weight: 300;
	font-style: italic;
}

.muted-frame {
	border: 1px solid;
	padding: 0 0.2em 0.1em 0.2em;
}

.small {
	font-size: 14px;
}

.italic {
	font-style: italic;
}

.bold {
	font-weight: 700;
}

.hero-title,
.h2,
.h3,
.brand-name {
	font-family: var(--font-heading);
	font-weight: 700;
}

.accent-blue { color: #0098C4; }
.accent-pink { color: #EB258B; }
.accent-purple { color: #7161A9; }
.accent-teal { color: #2EAE77; }

.marker {
	background-image: linear-gradient(transparent 55%, rgba(0,0,0,0.18) 55%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.marker-pink { 
	background-image: linear-gradient(transparent 60%, #EB258B4D 60%);
}

.marker-blue {
	background-image: linear-gradient(transparent 60%, #0098C44D 60%);
}

.site-header {
	/* 
	position: sticky;
	top: calc(var(--frame-inset) + var(--frame-width));
	z-index: 20;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	*/
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2vw;
	gap: 12px;
}

.brand-logo {
	width: auto;
	display: block;
	max-height: 1.8vw;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 40px;
	font-size: 20px;
	color: #7252DF;
}

.nav-toggle {
	display: none;
	border: 0;
	background: transparent;
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: #7252DF;
	margin: 4px 0;
}

/* Hero */
.hero {
	padding: 56px 0 38px;
	margin-bottom: -150px;
	position: relative;
	z-index: 2;
}

.hero-inner {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 16px;
}

.hero-title {
	font-size: 4.4vw;
	line-height: 0.9;
	margin: 0;
}

.hero-title br  {
	display: none;
}

br.br-fixed {
	display: block;
}

.hero .kicker {
	display: none;
}

.hero-subtitle {
	margin: 0;
	font-size: 1.8vw;
	padding: 1.8em 0 2.6em 0;
	line-height: 1.4;
}

.hero-note {
	max-width: 45ch;
	margin: 0 auto;
	padding: 25px 0 0 0;
	font-size: 14px;
	color: #999;
	font-style: italic;
	text-align: center;
}

/* Buttons */

.btn,
button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 700;
	padding: 0.8em 1.2em;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.9);
	text-decoration: none;
}

.btn:active {
	transform: translate(1px, 1px);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.9);
}

.btn-primary {
	background: #18b86f;
	color: white;
	font-size: 2.2vw;
	box-shadow: 8px 8px 0 black;
	padding: 1em 1.3em;
	width: auto;
}

button.btn {
	border: none;
	font-family: inherit;
	cursor: pointer;
}

.button-ff {
	padding-left: 0.5em;
}

.button-ff img {
	height: 0.5em;
	width: auto;
}

.section.section-satori {
	padding: 50px;
}

.front-satori {
	position: relative;
	text-align: center;
	background: #fff;
	overflow: hidden;
	/*padding: 60px 0 120px;*/
}

.front-satori-background {
	position: absolute;
	inset: 0;
	opacity: 1;
	transition: opacity 1s ease;
	background: #fff;
	pointer-events: none;
	background-image: url('assets/background-blur.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	top: -250px;
	will-change: transform;
	transform: translate3d(0,0,0);
}

.front-satori .parallax {
	position: relative;
	max-width: 500px;
	width: 20vw;
	min-width: 300px;
	margin: 0 auto;
	padding-top: 200px;
	padding-bottom: 420px;
}

.parallax-image {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	will-change: top;
	opacity: 0;
	z-index: 3;
}

.section {
	padding: 60px 0;
}

.section-solution {
	padding: 0 0 48px 0;
}

.kicker {
	max-width: 38ch;
	line-height: 1.4;
}

.h2 {
	font-size: 3vw;
	line-height: 0.9;
	margin: 1em 0;
}

.h2-aligner-wrap {
	text-align: center;
}

.h2-aligner {
	display: inline-block;
	text-align: left;
}

.h3 {
	font-size: 16px;
	margin: 0 0 6px;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 26px;
}

.align-center {
	align-items: center;
}

.swaplist {
	margin: 4vw auto;
	display: grid;
	gap: 2vw;
	font-size: 1.3em;
}

.swaprow {
	display: grid;
	grid-template-columns: 1fr 3ch 1fr;
	align-items: center;
	gap: 1vw;
}

.swap-left {
	text-align: right;
	font-weight: 300;
}

.swap-right {
	text-align: left;
}

.swap-arrow {
	text-align: center;
	color: #0298C4;
	font-weight: 700;
	font-size: 2em;
	line-height: 0;
	font-family: monospace;
}

.features {
	padding: 5vw 0 0 0;
}

.feature {
	display: flex;
	margin: 0 0 250px 0;
	align-items: center;
}

.features .feature:last-child {
	margin-bottom: 0;
}

.feature-right {
	flex-direction: row-reverse;
}

.feature-text {
	flex: 0 1 75ch;
}

.feature-image {
	padding: 0 0 0 5ch;
	position: relative;
	display: inline-block;
}

.feature-image img {
	position: relative;
	z-index: 2;
	display: block;
}

.feature-right .feature-image {
	padding: 0 5ch 0 0;
}

.feature-dashboard .feature-image {
	position: relative;
	display: inline-block;
}

.feature-dashboard .feature-image:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 25%;
	top: -25%;
	transform: translateX(-35%) rotate(-10deg);
	width: 160%;
	height: 120%;
	filter: blur(18px);
	opacity: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, #EE258B55 0%, #EE258B00 65%);
}

.feature-dashboard .feature-image:after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	top: 25%;
	transform: translateX(-35%) rotate(-10deg);
	width: 100%;
	height: 120%;
	filter: blur(18px);
	opacity: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, #0298C455 0%, #0298C400 60%);
}

.feature-studio .feature-image:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -30%;
	top: -40%;
	transform: rotate(10deg);
	width: 130%;
	height: 120%;
	filter: blur(18px);
	opacity: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, #7162A966 0%, #7162A900 60%);
}

.feature-studio .feature-image:after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 30%;
	top: 10%;
	transform: rotate(10deg);
	width: 120%;
	height: 150%;
	filter: blur(18px);
	opacity: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, #2FAF7755 0%, #2FAF7700 60%);
}

.agent {
	padding: 0 0 0.1em 0;
	color: #999;
	font-size: 1.4em;
	font-weight: 700;
}

.agent-tag {
	background-color: #888;
	color: #fff;
	font-size: 1.4em;
	padding: 0 0.1em;
	font-family: var(--font-special);
	font-weight: 400;
	margin: 0 0.3em 0 0;
	position: relative;
	top: 0.1em;
}

.block {
	display: flex;
}

.block-experience {
	align-items: stretch;
	padding: 2em 0 0 0;
}

.text-experience {
	padding: 0 0 5ch 0;
	flex: 1 0 55%;
}

.text-experience p {
	max-width: 32ch;
}

.image-experience {
	align-self: flex-end;
	flex: 0 1 auto;
	line-height: 0;
}
	
.experience-last-full {
	display: block;
}

.experience-last-mob {
	display: none;
}

.divider {
	width: 100%;
	border-bottom: 1px solid #000;
}

.section-early {
	padding-top: 0;
}

.early-steps {
	padding: 0 8ch 0 0;
	flex: 1 0 55%;
}

.early-faq {
	flex: 0 1 auto;
}

.early-faq .h2 {
	display: none;
}

.step {
	padding: 1ch 0;
	max-width: 31ch;
}

.step-num {
	color: #ff3aa6;
	font-size: 2em;
	font-style: italic;
	padding: 0 0.5ch 0 0;
	position: relative;
	top: -0.3ch;
	font-weight: 700;
}

.faq-list {
	font-size: 0.9em;
}

.acc-item {
	padding: 1ch 0;
}

.acc-q {
	border: none;
	background: none;
	font-size: inherit;
	font-family: inherit;
	font-weight: 700;
	text-align: left;
	display: block;
	cursor: pointer;
	text-indent: -2ch;
	padding: 0;
}

.acc-q:hover {
	color: #7161A9;
}

.acc-a {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: height 220ms ease, opacity 220ms ease;
}

.acc-item.is-open .acc-a {
	opacity: 1;
}

.acc-a p {
	margin: 0;
}

.acc-icon:before {
	content: "+";
}

.acc-item.is-open .acc-icon:before {
	content: "-";
}

.acc-item.is-open .acc-icon{
	transform: rotate(45deg);
}

.cta-subtitle {
	margin: 0;
	font-size: 1.3em;
	padding: 2vw 0 3vw 0;
	max-width: 30ch;
	font-weight: 300;
}


/* Footer */

.footer {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 4vw 0 0 0;
}

.footer-items {
	display: flex;
	justify-content: space-between;
	padding: 80px 50px;
}

.footer-logo .logo path {
	fill: #000 !important;
}

.footer-logo .logo:hover path {
	fill: #EC258B !important;
}

.footer-logo .logo rect {
	display: none !important;
}

.footer-menu-link {
	margin: 0 0 0 3em;
	text-decoration: none;
	color: #000;
	border-bottom: 1px solid;
}

.footer-menu-link:hover {
	font-weight: 700;
	border-bottom: none;
}

.gradient * {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.gradient-bottom {
	width: 100%;
	height: 15vw;
	position: relative;
}

.gradient-blue {
	background: radial-gradient(ellipse 60% 16vw at 70% bottom, rgba(2, 152, 196, 0.4) 0%,rgba(2,152,196,0) 50%);
}

.gradient-red {
	background: radial-gradient(ellipse 40% 10vw at 40% bottom, rgba(238,37,139, 0.3) 0%,rgba(238,37,139,0) 60%);
}

.footer .gradient-bottom {
	position: absolute;
	z-index: -1;
	bottom: 0;
	padding-top: 80px;
}

.footer .gradient-bottom .gradient-red {
	background: radial-gradient(ellipse 50% 20vw at 45% bottom, rgba(238,37,139, 0.3) 0%,rgba(238,37,139,0) 60%);
}

.footer .gradient-bottom .gradient-blue {
	background: radial-gradient(ellipse 80% 25vw at 80% bottom, rgba(2, 152, 196, 0.4) 0%,rgba(2,152,196,0) 50%);
}

.footer .gradient-bottom .gradient-green {
	background: radial-gradient(ellipse 50% 25vw at 15% bottom, rgba(47, 175, 119, 0.4) 0%,rgba(47, 175, 119, 0) 50%);
}


/* Modal */

body.modal-open {
	overflow: hidden;
}

.modal[hidden] {
	display: none;
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 9998;
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.65);
}

.modal-panel {
	position: absolute;
	inset: 0;
	background: #fff;
	overflow: auto;
	padding: 0.5em;
	outline: none;
}

.modal-inner {
	width: min(900px, 100%);
	margin: 0 auto;
}

.modal-close {
	position: fixed;
	top: calc(var(--frame-inset) + var(--frame-width) + 10px);
	right: calc(var(--frame-inset) + var(--frame-width) + 10px);
	border: none;
	background: #fff;
	font-weight: 700;
	font-size: 30px;
	line-height: 0.5;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: #999;
}

.form-card {
	font-size: 0.8em;
	padding: 0 0 3em 0;
}

.option-grid .opt {
	background: #fff;
	border: 1px solid #000;
	width: 100%;
	padding: 0.6em 0.8em;
	font-family: inherit;
	text-align: left;
	font-weight: 400;
	font-size: 0.8em;
	margin-bottom: -1px;
	cursor: pointer;
}

.option-grid .opt:hover {
	background: #ddd;
}

.option-grid .opt[aria-pressed="true"] {
	background: #000;
	color: #fff;
}

.form-hint {
	padding: 0 0 1em 0;
}

.form-item {
	margin: 0 0 1em 0;
}

.form-group-1 .form-hint {
	padding-left: 3ch;
}

.form-label {
	padding: 0 0 1em 0;
	display: block;
	margin: 2em 0 0 0;
	color: #0098C4;
	font-weight: 700;
	text-indent: -3ch;
	padding-left: 3ch;
}

.form-group .input,
.form-group .textarea {
	width: 100%;
	border: 1px solid #000;
	padding: 0.4em 0.6em;
	font-family: inherit;
	font-size: inherit;
	padding: 0.6em 0.8em;
	background: #eee;
}

.form-error {
	background-color: #ffd6b2;
	margin: 0.5em 0;
	color: #892600;
	display: inline-block;
}

.form-card .btn-primary {
	background-color: #7B5DA7;
	width: 100%;
}





/* Responsive */

@media (max-width: 1024px) {
	
	body {
		font-size: 16px;
		padding: calc(var(--frame-inset-mob) + var(--frame-width-mob));
	}
	
	body::before {
		inset: var(--frame-inset-mob) 0 var(--frame-inset-mob) var(--frame-inset-mob);
		border: var(--frame-width-mob) solid #000;
	}
	
	@supports (-moz-appearance: none){
		body::before {
			inset: var(--frame-inset-mob);
		}
	}
	
	html {
		scrollbar-width: none;
	}
	body::-webkit-scrollbar {
		display: none;
	}
	
	.nav {
		padding: 1em;
	}
	
	.brand-logo {
		max-height: 1em;
	}

	.nav-toggle { 
		display: inline-block; 
	}

	.nav-links {
		display: none;
		position: absolute;
		top: calc(42px + var(--frame-inset-mob));
		right: calc(22px + var(--frame-inset-mob));
		flex-direction: column;
		gap: 1em;
		padding: 1em;
		font-size: 1.2em;
		background: #ffffff;
		border: 1px solid;
		box-shadow: 7px 7px #0004;
		z-index: 5;
	}
	
	.nav-links a:hover,
	.nav-links a:active {
		font-weight: 700;
	}

	.nav-links.is-open { 
		display: flex; 
	}
	
	.container,
	.container-narrow {
		width: 100%;
		padding: 0 1em;
	}
	
	.hero {
		padding: 40px 0;
	}
	
	.hero-inner {
		text-align: left; 
		justify-items: left;
	}
	
	.hero-title {
		font-size: 2.2em;
	}
	
	.hero-title br {
		display: block;
	}
	
	.hero .kicker {
		display: block;
		padding-top: 2em;
	}
	
	.hero .kicker img {
		max-height: 1em;
		position: relative;
		line-height: 1;
		top: 2px;
	}
	
	.hero-subtitle {
		font-size: initial;
		font-weight: 400;
		padding: 0.5em 0 1em 0;
		line-height: 1.2;
	}
	
	.btn {
		display: block;
		font-size: 1.4em;
		box-shadow: 4px 4px 0 black;
	}
	
	button.btn {
		width: 100%;
	}
	
	.hero-note {
		font-size: 12px;
		padding: 12px 0 0 0;
		font-style: normal;
	}
	
	.section {
		padding: 2em 0;
	}
	
	.section.section-satori {
		padding: 0;
	}
	
	.front-satori {
		padding: 20px 0 80px;
	}
	
	.front-satori-background {
		background-size: 200% auto;
		top: -250px;
	}

	.front-satori .parallax {
		width: 100%;
		min-width: 0;
		max-width: 520px;
		padding-top: 0;
		padding-bottom: 400px;
	}

	.parallax-image {
		max-width: 50%;
		margin: 0 auto;
	}
	
	.h2 {
		font-size: 1.6em;
		margin: 1.5em 0;
	}
	
	.swaplist {
		font-size: initial;
		gap: 1.5em;
		margin: 1em 0 3em 0;
	}
	
	.swaprow {
		grid-template-columns: 10ch 7ch 13ch;
	}
	
	.swap-left {
		text-align: left;
	}
	
	.swap-arrow {
		font-size: 4em;
	}
	
	.feature {
		gap: 3em;
		flex-direction: column-reverse;
	}
	
	.feature-right {
		margin: 0 0 2em 0;
	}
	
	.feature-text {
		flex: 1 0 auto;
	}
	
	.feature-image,
	.feature-right .feature-image {
		padding: 0;
	}
	
	.agent {
		padding: 0 0 0.2em 0;
		font-size: 1.2em;
	}
	
	.agent-tag {
		font-size: 1em;
	}
	
	.block,
	.block-experience {
		padding: 0;
		flex-direction: column;
	}
	
	.experience-last-full {
		display: none;
	}
	
	.experience-last-mob {
		display: block;
		margin: 3ch 0 0 0;
	}
	
	.text-experience {
		padding: 0 0 1ch 0;
		flex: 1 0 auto;
	}
	
	.image-experience {
		align-self: center;
		flex: 1 0 auto;
	}
	
	.image-experience img {
		width: 60vw;
	}
	
	.early-steps {
		padding: 0 0 2ch 0;
	}
	
	.early-faq .h2 {
		display: block;
	}
	
	.faq-list {
		padding-left: 2ch;
	}
	
	.cta-subtitle {
		font-size: initial;
		padding: 0 0 2em 0;
	}
	
	.footer-items {
		padding: 2em;
		flex-direction: column-reverse;
		align-items: center;
	}
	
	.footer-menu {
		font-size: 0.8em;
		padding: 3em 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.footer-menu-link {
		margin: 0 0 1em 0;
		display: block;
	}

}