@font-face { font-family: 'Fredoka'; src: url('/fredoka.ttf'); }
* { box-sizing: border-box; margin: 0; }
body {
	font-family: 'Fredoka', system-ui, sans-serif;
	background: linear-gradient(#3f96d8, #8fd0f0 60%, #35c96a 60.2%, #6ed48f);
	min-height: 100vh; color: #2b3140;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 28px 20px 80px; }
header { display: flex; align-items: center; gap: 14px; padding-bottom: 26px; }
header img { width: 52px; height: 52px; border-radius: 13px; box-shadow: 0 4px 12px rgba(20,40,70,.25); }
header a.home {
	font-size: 24px; font-weight: 700; color: #fff; text-decoration: none;
	background: #ff6b52; padding: 8px 22px; border-radius: 999px;
	box-shadow: 0 5px 0 #d84e37; letter-spacing: .02em;
}
header nav { margin-left: auto; display: flex; gap: 18px; }
header nav a { color: #fff; font-weight: 600; text-decoration: none; font-size: 17px;
	text-shadow: 0 1px 3px rgba(20,40,70,.3); }
header nav a:hover { text-decoration: underline; }
.hero { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; padding: 20px 0 40px; }
.hero .pitch { flex: 1 1 300px; }
.hero h1 { color: #fff; font-size: 44px; font-weight: 700; line-height: 1.1;
	text-shadow: 0 3px 0 rgba(30,40,70,.3); text-wrap: balance; }
.hero p { color: #eef7ff; font-size: 19px; line-height: 1.5; margin: 16px 0 26px;
	text-shadow: 0 1px 3px rgba(20,40,70,.3); }
.badges { display: flex; gap: 12px; flex-wrap: wrap; }
.badge { background: #2b3140; color: #fff; border-radius: 14px; padding: 10px 20px;
	font-weight: 600; font-size: 15px; }
.badge span { display: block; font-size: 11px; font-weight: 400; color: #aeb6c6; }
.hero img.art { flex: 0 1 300px; max-width: 300px; width: 100%; border-radius: 24px;
	box-shadow: 0 18px 50px rgba(20,40,70,.35); }
.shots { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 10px 0 30px; }
.shots img { width: 230px; max-width: 28vw; border-radius: 18px;
	box-shadow: 0 12px 34px rgba(20,40,70,.3); }
.card { background: #fff8ea; border-radius: 26px; padding: 34px 38px;
	box-shadow: 0 14px 40px rgba(20,40,70,.25); }
.card h1 { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
.card .date { color: #8a90a0; font-size: 14px; margin-bottom: 22px; }
.card h2 { font-size: 20px; font-weight: 600; margin: 26px 0 8px; color: #d84e37; }
.card p, .card li { line-height: 1.65; font-size: 16.5px; font-weight: 400; }
.card ul { padding-left: 22px; }
.card a { color: #d84e37; font-weight: 600; }
.lead { font-size: 18px; background: #daf3e3; border-radius: 14px; padding: 14px 18px; }
footer { padding-top: 40px; text-align: center; color: #fff; font-size: 14px;
	text-shadow: 0 1px 3px rgba(20,40,70,.3); }
footer a { color: #fff; font-weight: 600; }
@media (max-width: 620px) {
	.hero h1 { font-size: 34px; }
	header nav { gap: 12px; font-size: 15px; }
	.card { padding: 26px 22px; }
	.shots img { max-width: 44vw; }
}