:root {
	color-scheme:light dark;

	--bg:#fff;
	--light-bg:#f7f7f7;
	--dark-bg:#ccc;

	--light-fg:#777;
	--fg:#444;
	--medium-fg:#222;
	--dark-fg:#000;
	--link-fg:#07c;

	--highlight:rgba(0,172,127, 1);

	--fs-pct:clamp(50%, calc(50% + (100vw - 800px) * 0.125), 100%);
	--fs:0.9rem;
	--medium-fs:1rem;
	--large-fs:1.2rem;
	--xlarge-fs:1.4rem;
	--xxl-fs:1.6rem;

	--button-op:0.8;
	--button-op-hover:1;
	--primary-cta-op:0.7;
	--primary-cta-op-hover:0.9;
	--secondary-cta-op:0.4;
	--secondary-cta-op-hover:0.6;

	--box-shwd:0 2px 3px rgba(0,0,0, 0.3);

	--lrpad:max(0.5rem, calc((100vw - 75rem) / 2));
	--med-lrpad:max(0.5rem, calc((100vw - 73rem) / 2));
	--sml-lrpad:max(0.5rem, calc((100vw - 64rem) / 2));
	--cases-gap:clamp(1rem, calc(4rem + (100vw - 75rem) * (5 / 34)), 4rem);
}

@media (max-width: 600px) { div.heroimg { background:none !important; } }

/* top level set the width and height and defaults */
html { width:100%; height:100%; scroll-behavior:smooth; font-size:var(--fs-pct); }
body {
	width:100%;
	height:100%;
	font-family:Mulish, sans-serif;
	background-color:var(--bg);
	color:var(--fg);
	font-size:var(--fs);
	line-height:1.6em;
}

/* common */
.thick { font-weight:bold; }
ul { list-style-type:disc; margin-left:1.5em; }
li { line-height:1.6em; }
p { margin:1.2em 0; }
a { color:inherit; }
a:visited { color:inherit; }
span.green { color:var(--highlight); }
span.blue { color:#07c; }
span.gray { color:#777; }
div.right { text-align:right; }
span.itl { font-style:italic; }
button { cursor:pointer; }

/* header */
nav {
	box-sizing:border-box; width:100vw;
	position:fixed; top:0; z-index:5;
	padding:1.25rem var(--lrpad);
	display:flex; justify-content:space-between; align-items:center;
	-webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); background-color:rgba(255,255,255,0.7);

	div.link { display:inline-block; cursor:pointer; }
	a, div.link { padding:0 5px; color:var(--dark-fg); font-size:var(--medium-fs); }
	a.selected { border-bottom:0.2rem solid var(--highlight); }
	a:hover, div.link:hover { color:var(--link-fg); }
	a img { width:1.5rem; height:1.5rem; margin-right:0.3rem; }
	a span { font-size:2rem; font-weight:bold; color:var(--dark-fg); text-transform:uppercase; }
	button { padding:0.45rem 1.5rem; border-radius:0.5rem; background:rgba(0,119,204, var(--button-op)); color:#fff; border:0; font-size:var(--fs); font-weight:500; letter-spacing:0.5px; }
	button:hover { background:rgba(0,119,204, var(--button-op-hover)); }
}

main { margin-top:4.5rem; }

/* footer */
div.footer {
	display:flex;
	justify-content:space-between;
	font-size:var(--medium-fs);
	color:#bbb;
	background-color:var(--dark-fg);
	padding:4rem var(--lrpad);
	line-height:1.7rem;

	a { color:#0095ad; margin-left:1rem; }
}

/* each section, set the padding and default font size */
section {
	padding:8em var(--lrpad);
	font-size:var(--medium-fs);
}

/* first section is a bit taller */
section.hero {
	display:flex;
	padding:0 var(--lrpad);
	background:radial-gradient(ellipse at 70% 20%, #f7f7f7 20%, #dee1e7 100%);

	div.herotext { width:40rem; padding:12rem 0; }
	div.heroimg { width:35rem; }

	div.headline {
		width:46rem;
		font-size:2.7rem; letter-spacing:-0.5px; line-height:4rem;
		margin-bottom:1.7rem;
		margin-left:1rem;

		span.thick { font-weight:600; color:var(--medium-fg); }
		span.thin { font-weight:300; color:var(--dark-fg); }
	}

	div.subhead {
		width:41rem;
		font-size:1.2rem; line-height:1.7rem;
		color:var(--medium-fg);
		margin-bottom:4rem;
		margin-left:1rem;
	}

	div.ctas { width:40rem; text-align:center; margin-left:1rem; }
}

/* title of each section */
div.section_title {
	font-size:2.7rem; letter-spacing:-0.5px; line-height:3rem; font-weight:450;
	color:var(--dark-fg);
	margin-bottom:2rem;
}

div.section_desc {
	font-size:var(--large-fs);
	color:var(--dark-fg);
	margin-bottom:3rem;
	width:105ch;
	max-width:90vw;
	line-height:1.7rem;
}

#home {
	div.heroimg {
		background-image:url("/images/hero-coins.avif");
		background-position:left;
		background-repeat:no-repeat;
		background-size:auto 40rem;
	}
}

#tokens {
	padding:8rem var(--sml-lrpad);

	div.section_desc { width:75ch; }

	span.blue { color:rgba(85, 172, 238, 1); }
	span.green { color:rgba(0, 172, 127, 1); }

	div.token_cards {
		display:flex;
		gap:0;
		justify-content:start;
		border-radius:2rem;
		box-shadow:var(--box-shwd);

		div.section_subtitle { background-color:rgba(0,0,0, 0.1); padding:0.8rem; }

		div.half_card { width:50%; padding:1.25rem; color:#fff; }
		div.half_card.blue {
			background:linear-gradient(180deg,rgba(85, 172, 238, 0.7) 0%, rgba(85, 172, 238, 1) 100%);
			border-radius:2rem 0 0 2rem;

			div.section_subtitle { border-radius:1.8rem 0 0 1.8rem; margin:-0.62rem -1.25rem 2.5rem -0.62rem; }
		}
		div.half_card.green {
			background:linear-gradient(180deg,rgba(0, 172, 127, 0.7) 0%, rgba(0, 172, 127, 1) 100%);
			border-radius:0 2rem 2rem 0;

			div.section_subtitle { border-radius:0 1.8rem 1.8rem 0; margin:-0.62rem -0.62rem 2.5rem -1.25rem; }
		}
		div.half_card div.thick { font-size:1.1rem; margin-bottom:1rem; display:inline-block; vertical-align:top; }
		div.half_card div.image { display:inline-block; width:3em; height:3em; margin-right:1.5em; background-color:#fff; }
		div.half_card div.section_subtitle {
			font-size:1.5rem; font-weight:600;
			margin-bottom:1.8em;
			text-align:center;
		}

		div.token_summary, div.token_desc { margin:1rem; }
		div.token_desc { font-size:var(--medium-fs); }

		img { width:2rem; height:2rem; margin-top:0.5rem; margin-right:1rem; }
	}
}

#whylemx {
	padding:8rem var(--med-lrpad);
	background:radial-gradient(circle,rgba(0, 172, 127, 0.3) 0%, rgba(0, 172, 127, 0.7) 100%);

	div.why_cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem;
		div.why_card { padding:1.5rem; border:0; border-radius:1.5rem; background:rgba(255,255,255, 0.6); box-shadow:var(--box-shwd); }
		div.card_title { font-size:1.4rem; font-weight:600; margin-bottom:1.5rem; padding-bottom:0.4rem; border-bottom:1px solid rgba(120,120,120, 0.3); }
		div.card_desc { }
	}

	div.checkmark { display:inline-block; font-size:1.4rem; color:rgba(0,172,127, 1); margin-right:0.5rem; font-weight:400; }
}

#howlemx {
	background:radial-gradient(circle,rgba(85, 172, 238, 0.3) 0%, rgba(85, 172, 238, 0.7) 100%);

	div.section_desc { width:100ch; }

	div.how_cards { border-radius:1rem; display:flex; gap:1rem; margin-bottom:5rem;
		div.how_card { background:rgba(255,255,255, 0.6); flex:1; padding:1rem; border-radius:1.5rem; box-shadow:var(--box-shwd); }
		div.card_title { font-size:1.4rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid rgba(120,120,120, 0.3); margin:0.3rem 0 2rem 0; }
		div.card_desc { font-size:var(--medium-fs); margin-bottom:1.3rem; }
	}
}

#implementation {
	background:radial-gradient(ellipse 70% 70%, #fafafa, #dee1e7);

	div.ibenefits { border-radius:1rem; display:flex; gap:2rem;
		div.ibenefit { background:rgba(255,255,255, 0.7); flex:1; padding:1.5rem; border-radius:1.5rem; box-shadow:var(--box-shwd); }
		div.card_title { font-size:1.4rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid rgba(120,120,120, 0.3); margin-bottom:1.5rem; }
		div.card_desc { font-size:var(--medium-fs); }
	}
}

#product {
	background:radial-gradient(ellipse at 70% 20%, #bbd2f6 20%, #99a3f7);

	div.heroimg {
		background-image:url("/images/product-hero.avif");
		background-position:right;
		background-repeat:no-repeat;
		background-size:auto 40rem;
	}
}

#platform {
	/*background:radial-gradient(circle, #fffcb0, #ffe5b1);*/
	/*background:#fff;*/
	/*background:radial-gradient(ellipse, #fafafa, #dee1e7);*/
	/*background:radial-gradient(ellipse 60% 60%, rgba(241, 238, 201, 50), rgba(254, 244, 161, 0.49));*/
	/*background:rgb(255,255,240);*/
	background:radial-gradient(ellipse 90% 50%, #fafafa, #dee1e7);
	/*background:radial-gradient(circle,rgba(85, 172, 238, 0.3) 0%, rgba(85, 172, 238, 0.7) 100%);*/

	div.steps { display:flex; justify-content:space-between; align-items:start; gap:1.5rem; margin:3rem 0 2rem 0; }
	div.step {
		padding:1rem;
		box-shadow:var(--box-shwd); border-radius:1rem;
		background:rgba(255,255,255, 0.7);

		div.step_title { font-size:1.4rem; font-weight:600; padding-bottom:0.5rem; border-bottom:1px solid rgba(120,120,120, 0.3); margin:0.3rem 0 2rem 0; }
		div.step_desc { font-size:var(--medium-fs); margin-bottom:1.3rem; }
	}

	div.step.one div.number { color:#07c; }
	div.step.two div.number { color:#995ed1; }
	div.step.three div.number { color:#4bab7d; }

	div.diagram {
		width:100%; box-sizing:border-box; padding:5px;
		border:0; border-radius:2rem;
		background:rgba(255,255,255, 0.6); box-shadow:var(--box-shwd);

		img { width:100%; }
	}
}

#dataflow { scroll-margin-top:5.5rem; }

#platformBenefits {
	/*background:radial-gradient(circle,rgba(0, 172, 127, 0.3) 0%, rgba(0, 172, 127, 0.7) 100%);*/
	background:radial-gradient(circle,rgba(85, 172, 238, 0.3) 0%, rgba(85, 172, 238, 0.7) 100%);
}

#core {
	padding:8em var(--sml-lrpad);
	div.section_desc { width:70ch; }

	div.components {
		width:100%; box-sizing:border-box;

		div.component {
			display:flex; gap:2rem;
			padding:2rem; border-bottom:1px solid rgba(0,0,0, 0.1);
		}
		div.component.last { border:0; }

		div.img { width:10rem; box-sizing:border-box; text-align:center; background:transparent; border-radius:1rem; display:flex; justify-items:center; align-items:center; }
		div.img img { width:10rem; }
		div.title {	font-size:1.4rem; font-weight:bold; margin-bottom:1.5rem; padding:0 2rem; }
		div.desc { font-size:var(--medium-fs); padding:0 2rem; line-height:1.5rem; }
	}
}

#usecases {
	display:block !important; padding:6rem 0;

	div.headline { width:100%; text-align:center; margin:0 0 3rem 0; }

	div.cases {
		max-width:75rem; margin:auto; padding:3rem 0;
		display:grid; place-items:center; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); grid-template-rows:repeat(auto-fit, 1fr); gap:var(--cases-gap);
	}

	div.case { width:20rem;
		padding:1rem; border-radius:1rem; background:rgba(255,255,255, 0.7);
		box-shadow:var(--box-shwd);

		div.img { width:20rem; height:20rem; margin-bottom:2rem; border-radius:0.4rem; }
		div.img > img { width:100%; border-radius:0.4rem; }
		div.title { font-size:1.4rem; font-weight:bold; margin-bottom:2rem; }
		div.desc { height:10rem; }
		div.cta { text-align:center; margin-bottom:1rem; }

		button { color:#fff; background:rgba(0,119,204, var(--button-op)); border:0; border-radius:1.5rem; padding:0.7rem 1.5rem; font-size:var(--fs); }
		button:hover { background:rgba(0,119,204, var(--button-op-hover)); }
	}
}
div.content.usecases { display:none; }

#financed {
	background:radial-gradient(circle,rgba(0, 172, 127, 0.3) 0%, rgba(0, 172, 127, 0.7) 100%);

	div.subhead { width:39rem; }

	div.herotext { padding-top:11.2rem; padding-bottom:11.2rem; }
	div.heroimg {
		background-image:url("/images/financed-hero.avif");
		background-position:right;
		background-repeat:no-repeat;
		background-size:auto 38rem;
		margin-top:0.8rem;
	}
}

#problems {
	background:radial-gradient(circle at center, #fafafa, #dee1e7);
	padding:8rem var(--sml-lrpad);

	div.casetitle { font-size:1.5rem; font-weight:bold; margin-bottom:1.5rem; padding:1rem 1.5rem !important; background:rgba(0,0,0, 0.05); color:rgba(0,0,0, 0.6); }
	div.casetitle.problem { border-radius:1rem 0 0 1rem; border:0 !important; color:rgba(208, 77, 77, 0.9); }
	div.casetitle.solution { border-radius:0 1rem 1rem 0; border:0 !important; color:rgba(0,172,127, 0.9); }

	div.cases {
		padding:2rem; border-radius:2rem;
		display:grid; place-items:center; grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; gap:0;
		background:rgba(255,255,255, 0.6); box-shadow:var(--box-shwd);
	}

	div.problem, div.solution {
		width:100%; box-sizing:border-box; padding:1.5rem;
		border-top:1px solid rgba(0,0,0, 0.1);

		div.title { font-size:1.3rem; font-weight:bold; margin-bottom:1.2rem; }
		div.desc { }

		div.checkmark { display:inline-block; font-size:1.3rem; color:rgba(0,172,127, 1); margin-right:0.7rem; font-weight:400; }
		div.crossmark { display:inline-block; font-size:1.3rem; color:rgba(208, 77, 77, 1); margin-right:0.7rem; font-weight:400; }
	}

	div.first { border:0 !important; }
}

#whyftts {
	background:radial-gradient(circle,rgba(85, 172, 238, 0.3) 0%, rgba(85, 172, 238, 0.7) 100%);
	padding:8rem var(--sml-lrpad);

	div.section_desc { width:65ch; }

	div.benefits {
		border-radius:2rem;
		display:grid; place-items:start; grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; gap:0;
		background:rgba(255,255,255, 0.6); box-shadow:var(--box-shwd);
	}

	div.benefit { padding:2rem;
		div.title { font-size:1.3rem; font-weight:bold; margin-bottom:1.4rem; }
	}
	div.benefit.top { border-bottom:1px solid rgba(0,0,0, 0.1); }
	div.benefit.lft { border-right:1px solid rgba(0,0,0, 0.1); }
}

div.context_label { display:none; }

div.benefits {
	border-radius:2rem;
	display:grid; place-items:start; grid-template-columns:repeat(2, 1fr); grid-template-rows:auto; gap:0;
	background:rgba(255,255,255, 0.6); box-shadow:var(--box-shwd);

	div.benefit { padding:2rem;
		div.title { font-size:1.3rem; font-weight:bold; margin-bottom:1.4rem; }
	}

	div.benefit.top { border-bottom:1px solid rgba(0,0,0, 0.1); }
	div.benefit.lft { border-right:1px solid rgba(0,0,0, 0.1); }
}

div.ctas { text-align:center;
	button { font-size:var(--medium-fs); padding:0.7rem 0; border-radius:1.3rem; width:15rem; border:0; box-shadow:var(--box-shwd); }
	button.primary { background:rgba(255,255,255, var(--primary-cta-op)); color:var(--medium-bg); font-weight:bold; margin-right:3rem; }
	button.primary:hover { background:rgba(255,255,255, var(--primary-cta-op-hover)); }
	button.secondary { background:rgba(255,255,255, var(--secondary-cta-op)); color:var(--medium-fg); }
	button.secondary:hover { background:rgba(255,255,255, var(--secondary-cta-op-hover)); }
}

#coverall {
	width:100%; height:100%; z-index:10; position:fixed; top:0; left:0; overflow:hidden; display:none;
	background:linear-gradient(to bottom right, oklch(0.7672 0.0272 278.6 / 50%) 30%, oklch(0.6729 0.0411 323.29 / 50%) 69.33%); backdrop-filter:blur(30px);
}

div.modal {
	position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:11;
	display:none; padding:2rem; overflow:auto; border-radius:2rem; box-sizing:border-box;
	width:auto; max-width:70rem; height:auto; max-height:90vh; overflow:auto;
	background-color:rgba(255, 255, 255, 0.5); backdrop-filter:blur(7px);
	box-shadow:0 -1px 1px rgba(255,255,255, 1), 0 2px 4px rgba(0,0,0, 0.5);

	div.content {
		max-width:65rem; max-height:70vh; overflow-x:hidden; overflow-y:auto;
	}

	div.modalheader { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; gap:3rem; }
	div.modaltitle { font-size:1.4rem; font-weight:650; }
	button.close { border:0; border-radius:50%; width:1.8rem; height:1.8rem; font-size:var(--medium-fs); background:rgba(255,255,255, 0.5); color:rgba(0,0,0, 0.7); }
	button.close:hover { background:rgba(0,0,0, 0.7); color:rgba(255,255,255, 1); }

	div.wrapper { margin-top:1rem; }
	label > div { font-size:var(--medium-fs); padding:0.2rem; }
	label > input, label > textarea {
		background:rgba(255,255,255, 0.5); box-shadow:0 1px 2px rgba(0,0,0, 0.3);
		font-size:var(--medium-fs); padding:0.5rem; width:100%;
		border:0; border-radius:0.5rem; box-sizing:border-box;
	}
	label > input.email { letter-spacing:1px; }
	label > textarea { height:10rem; }

	div.submit { display:flex; justify-content:space-around; margin-top:1.5rem;
		button {
			padding:0.5rem 3rem;
			font-size:var(--medium-fs); font-weight:600;
			border:0; border-radius:1rem;
		}
	}
	button.submit { color:#fff; background:rgba(0,119,204, var(--button-op)); }
	button.submit:hover { background:rgba(0,119,204, var(--button-op-hover)); }
	button.cancel { color:#fff; background:rgba(0,0,0, 0.2); }
	button.cancel:hover { color:#fff; background:rgba(0,0,0, 0.3); }
}

div.modal.form { padding:2rem; }

#contactform { min-width:28rem; }
div.modal.usecases {
	div.modaltitle { font-size:1.5rem; }
	div.content { width:67rem; height:70vh; display:flex; flex-direction:column; gap:0.8rem; border-radius:1rem; }
	div.case { padding:0; background:rgba(255,255,255, 0.3); border-radius:1rem; }
	div.case:hover { background:rgba(255,255,255, 0.4); }
	div.casetitle { font-size:1.3rem; display:inline-block; }
	div.steps { display:flex; justify-content:space-between; align-items:start; gap:2rem; padding:0 1.5rem; margin-top:0.5rem; }
	div.step { flex:1; }
	div.step div.title { font-size:var(--medium-fs); margin-bottom:1.5rem; padding-bottom:0.3rem; border-bottom:1px solid #999; text-transform:uppercase; letter-spacing:1px; }
	div.step div.desc { font-size:var(--medium-fs); }

	summary { cursor: pointer; list-style: none; padding:1.5rem; }
	/* Hide default marker (Chrome/Safari/Edge) */
	summary::-webkit-details-marker { display: none; }

	/* Custom icon before the text */
	summary::before {
		content: "▶";
		display: inline-block;
		margin-right: 0.5rem;
		transition: transform 0.2s ease;
		color:#07c;
	}

	/* When the accordion is open, rotate or change the icon */
	details[open] { padding-bottom:1.5rem;
		div.casetitle { font-weight:600; }

		summary::before { transform: rotate(90deg); }
	}
}