:root {
	color-scheme: dark;
	font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
	background: #15102b;
	color: #fff;
	font-synthesis: none;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	background: linear-gradient(180deg, #7f5bff 0%, #5430d6 60%, #291759 100%);
}

.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.sky::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 68% 28%, rgba(255,255,255,.3), transparent 25%),
		linear-gradient(135deg, rgba(255,255,255,.08) 25%, transparent 25%) 0 0 / 44px 44px;
	mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.cloud { position: absolute; width: 320px; height: 92px; border-radius: 90px; background: rgba(255,255,255,.12); filter: blur(1px); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 140px; height: 140px; left: 46px; bottom: 0; }
.cloud::after { width: 190px; height: 190px; right: 30px; bottom: -6px; }
.cloud-one { top: 20%; left: -140px; }
.cloud-two { top: 12%; right: -80px; transform: scale(.72); }

.stud-field {
	position: absolute;
	left: -8%; right: -8%; bottom: -130px; height: 360px;
	transform: perspective(500px) rotateX(58deg);
	transform-origin: center bottom;
	background-color: #3c2279;
	background-image: radial-gradient(circle, #6543b3 0 24%, transparent 26%);
	background-size: 48px 48px;
	box-shadow: inset 0 22px 60px rgba(18,8,52,.45);
}

.site-header, main, footer { position: relative; z-index: 1; }
.site-header {
	display: flex; align-items: center; justify-content: space-between;
	width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0;
}

.brand, .stories-link { color: #fff; text-decoration: none; font-weight: 900; letter-spacing: .08em; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: .83rem; }
.brand-mark {
	display: grid; place-items: center; width: 36px; aspect-ratio: 1;
	border: 3px solid #fff; border-radius: 10px; transform: rotate(-7deg);
	background: #ffcb3d; color: #4e278e; box-shadow: 0 5px 0 #44227e;
}
.stories-link { padding: 11px 17px; border: 2px solid rgba(255,255,255,.45); border-radius: 10px; font-size: .72rem; background: rgba(37,16,84,.24); }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 30px; padding: 50px 0 80px; }
.eyebrow { display: inline-block; margin: 0 0 16px; padding: 8px 12px; border-radius: 8px; background: #ffcf3f; color: #4a267c; font-size: .75rem; font-weight: 950; letter-spacing: .12em; box-shadow: 0 5px 0 #a85ca6; }
h1 { margin: 0; font-size: clamp(4rem, 8vw, 7.5rem); line-height: .78; letter-spacing: -.075em; font-weight: 1000; text-shadow: 0 8px 0 #432083, 0 15px 28px rgba(28,10,69,.3); }
h1 span { color: #fff7a8; }
.lede { max-width: 530px; margin: 30px 0; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 750; color: #eee9ff; }
.actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 21px; border-radius: 12px; font-size: .78rem; font-weight: 950; letter-spacing: .045em; text-decoration: none; }
.primary { background: #58dc7c; color: #173c27; border: 3px solid #fff; box-shadow: 0 7px 0 #238a4d; transition: transform .15s ease, box-shadow .15s ease; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #238a4d; }
.secondary { color: #d9cffb; background: rgba(30,15,67,.35); border: 2px solid rgba(255,255,255,.2); }

.slime-stage { position: relative; min-height: 470px; display: grid; place-items: center; }
.slime { position: relative; width: min(390px, 80vw); aspect-ratio: 1.18; border-radius: 50% 50% 42% 42% / 45% 45% 55% 55%; background: radial-gradient(circle at 35% 23%, #c196ff 0 8%, #8650ed 33%, #5831b6 72%); border: 7px solid #3b1c80; box-shadow: inset -24px -28px 0 rgba(45,20,104,.18), 0 18px 0 #3b1c80, 0 36px 42px rgba(25,8,67,.35); animation: float 2.5s ease-in-out infinite; }
.shine { position: absolute; width: 23%; height: 12%; left: 19%; top: 16%; border-radius: 50%; background: rgba(255,255,255,.38); transform: rotate(-18deg); }
.eye { position: absolute; top: 45%; width: 11%; aspect-ratio: .7; border-radius: 50%; background: #21133c; box-shadow: inset 7px 8px 0 #fff; }
.eye.left { left: 28%; }.eye.right { right: 28%; }
.mouth { position: absolute; width: 17%; height: 10%; left: 41.5%; top: 67%; border-bottom: 9px solid #291547; border-radius: 50%; }
.slime-shadow { position: absolute; width: 66%; height: 55px; bottom: 32px; border-radius: 50%; background: rgba(28,11,63,.35); filter: blur(4px); }
.power-badge { position: absolute; right: -10px; top: 28px; display: grid; place-items: center; width: 114px; aspect-ratio: 1; border-radius: 50%; background: #ffcf3f; color: #4a267c; border: 5px solid #fff; box-shadow: 0 8px 0 #a85ca6; transform: rotate(9deg); }
.power-badge strong { font-size: 2.6rem; line-height: .9; }.power-badge span { font-size: .58rem; font-weight: 1000; letter-spacing: .04em; }
.jump-lines { position: absolute; inset: 0; }
.jump-lines i { position: absolute; width: 55px; height: 10px; border-radius: 10px; background: #fff7a8; transform: rotate(-55deg); box-shadow: 0 4px 0 rgba(64,31,131,.45); }
.jump-lines i:nth-child(1) { left: 2%; top: 27%; }.jump-lines i:nth-child(2) { left: 9%; top: 18%; width: 34px; }.jump-lines i:nth-child(3) { right: 4%; bottom: 29%; transform: rotate(-28deg); }

.feature-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 0 70px; }
.feature-strip article { display: flex; align-items: center; gap: 13px; min-height: 84px; padding: 16px 18px; border: 2px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(28,13,64,.42); backdrop-filter: blur(12px); }
.feature-strip strong { color: #fff7a8; letter-spacing: .06em; }.feature-strip span { color: #d9cffb; font-size: .8rem; font-weight: 650; }
footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.15); color: #bcaee8; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }

@keyframes float { 0%,100% { transform: translateY(4px) scaleX(1.01); } 50% { transform: translateY(-13px) scaleX(.98); } }
@media (prefers-reduced-motion: reduce) { .slime { animation: none; } }
@media (max-width: 800px) {
	.hero { grid-template-columns: 1fr; padding-top: 35px; text-align: center; }
	.hero-copy { display: grid; justify-items: center; }
	.slime-stage { min-height: 390px; }
	.feature-strip { grid-template-columns: 1fr; }
	.power-badge { right: 1%; }
}
@media (max-width: 480px) {
	.site-header, main, footer { width: min(100% - 24px, 1180px); }
	.site-header { padding-top: 18px; }.brand { font-size: .7rem; }.stories-link { font-size: .62rem; padding: 9px 11px; }
	h1 { font-size: clamp(3.45rem, 18vw, 5rem); }
	.hero { gap: 0; padding-bottom: 50px; }.slime-stage { min-height: 330px; }.slime { width: 280px; }
	.button { width: 100%; }.actions { width: 100%; }
	footer { gap: 20px; flex-direction: column; }
}