/* Friflirt – "Kommer snart" */
:root {
	--pink: #ff416c;
	--orange: #ff4b2b;
	--grad: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
	--text: #2b2233;
	--muted: #7b6f84;
}
*, *::before, *::after { box-sizing: border-box; }

.cs-body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--text);
	background: linear-gradient(135deg, #fff0f3 0%, #ffe9e1 45%, #f4ebff 100%);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.cs-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.cs-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: cs-float 18s ease-in-out infinite alternate; }
.cs-blob--1 { width: 440px; height: 440px; background: #ff8fa8; top: -130px; left: -110px; }
.cs-blob--2 { width: 400px; height: 400px; background: #ffb38a; bottom: -150px; right: -90px; animation-delay: -6s; }
.cs-blob--3 { width: 320px; height: 320px; background: #d7b8ff; top: 40%; left: 58%; animation-delay: -12s; }
@keyframes cs-float { to { transform: translate(40px, -30px) scale(1.12); } }

.cs {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: clamp(16px, 4vh, 40px) 16px;
}

.cs-card {
	width: 100%;
	max-width: 620px;
	padding: clamp(26px, 5vh, 44px) clamp(22px, 5vw, 48px);
	text-align: center;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 28px;
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	box-shadow: 0 24px 60px rgba(255, 75, 43, .14), 0 2px 6px rgba(43, 34, 51, .05), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.cs-brand { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: clamp(18px, 3vh, 28px); }
.cs-logo {
	display: inline-grid; place-items: center;
	width: 52px; height: 52px; border-radius: 16px;
	background: var(--grad); color: #fff;
	box-shadow: 0 10px 24px rgba(255, 65, 108, .35);
	animation: cs-beat 2.4s ease-in-out infinite;
}
@keyframes cs-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.1); } 24% { transform: scale(1); } 36% { transform: scale(1.06); } }
.cs-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

.cs-eyebrow {
	display: inline-block; margin: 0 0 12px; padding: 6px 14px;
	font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--pink); background: rgba(255, 65, 108, .1); border-radius: 999px;
}
.cs-title { margin: 0 0 12px; font-size: clamp(1.6rem, 4.4vw, 2.3rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.cs-title span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-lead { margin: 0 auto clamp(20px, 3.5vh, 30px); max-width: 480px; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

.cs-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2vw, 14px); margin-bottom: clamp(20px, 3.5vh, 28px); }
.cs-unit {
	padding: clamp(12px, 2.4vh, 18px) 4px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 18px;
	box-shadow: 0 8px 20px rgba(255, 75, 43, .1);
}
.cs-num {
	display: block;
	font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 800; line-height: 1;
	font-variant-numeric: tabular-nums;
	background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-lbl { display: block; margin-top: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cs-open { margin: -8px 0 20px; font-weight: 700; color: var(--pink); }

.cs-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: .92rem; font-weight: 600; }
.cs-feats span { color: var(--pink); font-weight: 800; margin-right: 2px; }

.dk-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.dk-legal-links a { color: var(--muted); text-decoration: none; font-weight: 600; }
.dk-legal-links a:hover { color: var(--pink); }

@media (max-width: 480px) {
	.cs-lead { font-size: .95rem; }
	.cs-feats { flex-direction: column; align-items: center; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-blob, .cs-logo { animation: none; }
}