@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 600;
	font-stretch: 100%;
	font-display: swap;
	src: url("/assets/fonts/open-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400 600;
	font-stretch: 100%;
	font-display: swap;
	src: url("/assets/fonts/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Varela Round";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/varela-round-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Varela Round";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/varela-round-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
			--ink: #4e4d4e;
			--purple: #5e2684;
			--purple-deep: #3a1468;
			--purple-mid: #6b35a0;
			--orange: #fc935a;
			--paper: #ffffff;
			--mist: #f7f5f8;
			--line: #e7e2ec;
			--max: 1120px;
		}

		* { box-sizing: border-box; }
		html { scroll-behavior: smooth; }
		body {
			margin: 0;
			color: var(--ink);
			background: var(--paper);
			font-family: "Open Sans", sans-serif;
			font-size: 17px;
			line-height: 1.65;
		}
		img { max-width: 100%; height: auto; display: block; }
		a { color: var(--purple); }
		a:hover { color: var(--purple-deep); }
		h1, h2, h3 {
			font-family: "Varela Round", sans-serif;
			font-weight: 400;
			line-height: 1.15;
			letter-spacing: -0.02em;
			margin: 0;
		}
		p { margin: 0 0 1em; }
		p:last-child { margin-bottom: 0; }
		.after { margin-top: 22px; }

		.skip {
			position: absolute;
			left: 12px;
			top: 12px;
			transform: translateY(-150%);
			background: #fff;
			color: var(--purple);
			padding: 8px 12px;
			z-index: 20;
		}
		.skip:focus { transform: none; }

		.wrap {
			width: min(var(--max), calc(100% - 48px));
			margin: 0 auto;
		}

		.util {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 18px;
			width: min(var(--max), calc(100% - 48px));
			margin: 0 auto;
			padding: 10px 0;
			background: transparent;
			color: #fff;
			font-size: 14px;
			font-weight: 500;
		}
		.util-bar {
			background: rgba(32, 14, 58, 0.38);
		}
		.util a { color: #fff; text-decoration: none; }
		.util a:hover { text-decoration: underline; }
		.util .sep { opacity: 0.45; }

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 14px 22px;
			border: 0;
			border-radius: 0;
			text-decoration: none;
			font-weight: 600;
			font-size: 16px;
			line-height: 1;
		}
		.btn-orange {
			background: var(--orange);
			color: #fff;
		}
		.btn-orange:hover { background: #f07d3e; color: #fff; }
		.util .btn {
			padding: 7px 12px;
			font-size: 14px;
			font-weight: 600;
		}
		.btn-ghost {
			background: transparent;
			color: var(--purple);
			padding-left: 0;
			padding-right: 8px;
		}
		.btn-ghost:hover { color: var(--purple-deep); }

		.hero {
			position: relative;
			color: #fff;
			background:
				radial-gradient(ellipse 48% 70% at 82% 42%, rgba(214, 170, 245, 0.55), transparent 62%),
				radial-gradient(ellipse 36% 46% at 92% 78%, rgba(252, 147, 90, 0.22), transparent 60%),
				radial-gradient(ellipse 42% 55% at 62% 18%, rgba(126, 62, 184, 0.45), transparent 70%),
				linear-gradient(118deg, #34115f 0%, #5a208c 46%, #7a3cb0 100%);
			overflow: hidden;
			min-height: 640px;
		}
		.hero::before,
		.hero::after {
			content: "";
			position: absolute;
			border-radius: 50%;
			filter: blur(2px);
			pointer-events: none;
		}
		.hero::before {
			width: 520px;
			height: 680px;
			right: -80px;
			top: 40px;
			background:
				radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.18), transparent 42%),
				radial-gradient(circle at 60% 70%, rgba(90, 20, 140, 0.2), transparent 50%);
			opacity: 0.9;
		}
		.hero::after {
			width: 280px;
			height: 280px;
			right: 18%;
			bottom: 8%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
		}
		.nav {
			position: relative;
			z-index: 5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
			padding-top: 22px;
			padding-bottom: 8px;
		}
		.logo img { width: 210px; height: auto; }
		.nav-links {
			display: flex;
			align-items: center;
			gap: 22px;
			font-weight: 500;
		}
		.nav-links a { color: #fff; text-decoration: none; }
		.nav-links a:hover { text-decoration: underline; }
		.menu-toggle { display: none; }

		.hero-copy {
			position: relative;
			z-index: 2;
			width: min(var(--max), calc(100% - 48px));
			margin: 48px auto 0;
			padding: 0 0 88px;
		}
		.hero h1 {
			font-size: clamp(46px, 6vw, 68px);
			color: #fff;
			max-width: 11ch;
		}
		.hero .lead {
			margin-top: 22px;
			max-width: 34em;
			font-size: 22px;
			line-height: 1.45;
			font-weight: 400;
		}
		.hero-actions {
			position: relative;
			z-index: 3;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			width: min(var(--max), calc(100% - 48px));
			margin: -32px auto 0;
		}
		.hero-actions .action {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 64px;
			padding: 16px 28px;
			text-decoration: none;
			font-weight: 600;
			font-size: 18px;
		}
		.hero-actions .action-text {
			background: #fff;
			color: var(--purple);
			min-width: 240px;
		}
		.hero-actions .action-text:hover { color: var(--purple-deep); }
		.hero-actions .action-orange {
			background: var(--orange);
			color: #fff;
			min-width: 200px;
		}
		.hero-actions .action-orange:hover { background: #f07d3e; color: #fff; }

		.section { padding: 84px 0; }
		.section-mist { background: var(--mist); }
		.split {
			display: grid;
			grid-template-columns: minmax(240px, 0.85fr) 1.35fr;
			gap: 48px;
			align-items: start;
		}
		.split h2, .stack h2 { font-size: clamp(30px, 3.4vw, 40px); color: var(--ink); }
		.contents {
			margin: 0 0 22px;
			font-size: 16px;
		}
		.contents a { color: var(--ink); }
		.contents a:hover { color: var(--purple); }

		.benefits { margin-top: 36px; display: grid; gap: 0; }
		.benefit {
			display: grid;
			grid-template-columns: 72px 1fr;
			gap: 18px;
			padding: 26px 0;
			border-top: 1px solid var(--line);
		}
		.benefit:last-child { border-bottom: 1px solid var(--line); }
		.benefit .num {
			font-family: "Varela Round", sans-serif;
			font-size: 28px;
			color: var(--purple);
			line-height: 1;
			padding-top: 4px;
		}
		.benefit h3 { font-size: 24px; margin-bottom: 8px; color: var(--ink); }

		.stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 18px;
			margin: 28px 0 36px;
		}
		.case-copy { max-width: 68ch; }
		.stat {
			background: #fff;
			padding: 22px 20px;
			border-top: 3px solid var(--purple);
		}
		.stat strong {
			display: block;
			font-family: "Varela Round", sans-serif;
			font-size: 40px;
			font-weight: 400;
			color: var(--purple);
			line-height: 1;
			margin-bottom: 8px;
		}
		.stat span { display: block; font-size: 15px; }

		blockquote {
			margin: 28px 0 0;
			padding: 8px 0 8px 22px;
			border-left: 3px solid var(--purple);
		}
		blockquote p { font-size: 20px; line-height: 1.5; }
		.cite { margin-top: 10px; font-size: 15px; }

		.band {
			background:
				radial-gradient(ellipse 40% 80% at 100% 50%, rgba(255, 255, 255, 0.12), transparent 60%),
				linear-gradient(120deg, #3a1468, #5e2684 70%);
			color: #fff;
			padding: 84px 0;
		}
		.band h2 { color: #fff; font-size: clamp(30px, 3.4vw, 40px); max-width: 16ch; }
		.band p { max-width: 42em; }
		.band a { color: #fff; }
		.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
		.pill {
			border: 1px solid rgba(255, 255, 255, 0.45);
			padding: 8px 12px;
			font-size: 14px;
			font-weight: 600;
		}

		.faq { display: grid; gap: 0; margin-top: 28px; }
		details {
			border-top: 1px solid var(--line);
			padding: 16px 0;
		}
		details:last-child { border-bottom: 1px solid var(--line); }
		summary {
			cursor: pointer;
			font-family: "Varela Round", sans-serif;
			font-size: 20px;
			list-style: none;
			display: flex;
			justify-content: space-between;
			gap: 16px;
			align-items: center;
		}
		summary::-webkit-details-marker { display: none; }
		summary::after { content: "+"; color: var(--purple); font-size: 28px; line-height: 1; }
		details[open] summary::after { content: "–"; }
		details p { margin-top: 12px; max-width: 46em; }

		.cta {
			display: grid;
			grid-template-columns: 1.4fr 0.8fr;
			gap: 32px;
			align-items: end;
		}
		.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
		.cta .btn-line {
			background: transparent;
			color: var(--purple);
			border: 2px solid var(--purple);
		}
		.cta .btn-line:hover { background: var(--purple); color: #fff; }
		.aside-card {
			background: #fff;
			padding: 24px;
		}
		.aside-card a { color: var(--ink); font-weight: 600; text-decoration: none; }
		.aside-card a:hover { color: var(--purple); }

		.refs { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
		.refs a { font-weight: 600; }

		body > footer {
			background: #241038;
			color: rgba(255, 255, 255, 0.86);
			padding: 48px 0 28px;
			font-size: 15px;
		}
		.foot {
			display: grid;
			grid-template-columns: 1.3fr 1fr 1fr;
			gap: 28px;
		}
		footer a { color: #fff; }
		footer .logo img { width: 180px; margin-bottom: 14px; }
		.fine { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 13px; color: rgba(255, 255, 255, 0.65); }

		@media (max-width: 860px) {
			.wrap { width: min(var(--max), calc(100% - 32px)); }
			.split, .cta, .foot, .stats { grid-template-columns: 1fr; }
			.hero { min-height: 0; }
			.hero-copy { width: min(var(--max), calc(100% - 32px)); margin: 36px auto 0; }
			.util { width: min(var(--max), calc(100% - 32px)); padding-left: 0; }
			.nav { padding-left: 0; padding-right: 0; }
			.menu-toggle {
				display: inline-flex;
				background: transparent;
				color: #fff;
				border: 1px solid rgba(255, 255, 255, 0.7);
				padding: 8px 12px;
				font: inherit;
				font-weight: 600;
			}
			.nav-links {
				display: none;
				position: absolute;
				top: 78px;
				right: 16px;
				background: #3a1468;
				padding: 12px 16px;
				flex-direction: column;
				align-items: flex-start;
				min-width: 200px;
			}
			.nav-links.open { display: flex; }
			.util { justify-content: flex-start; flex-wrap: wrap; padding-left: 16px; }
			.section, .band { padding: 56px 0; }
			.hero h1 { font-size: 44px; }
			.hero .lead { font-size: 18px; }
		}
		@media (max-width: 560px) {
			.hero-actions { flex-direction: column; }
			.hero-actions .action { width: 100%; }
			.util { font-size: 13px; gap: 10px; }
		}