/* ==========================================================================
   Bee Collection — Coming Soon
   Palette:  Ink #17140F · Panel #221D16 · Honey #E9A227 · Amber #B5651D
             Cream #FFF6E5 · Rose #D98884
   Type:     Display  = Fraunces
             Body/UI  = Manrope
             Utility  = JetBrains Mono
   ========================================================================== */

.bee-cs-root {
	--ink: #17140f;
	--panel: #221d16;
	--panel-2: #2b241a;
	--honey: #e9a227;
	--honey-light: #f7c15b;
	--amber: #b5651d;
	--cream: #fff6e5;
	--cream-dim: #d8cdb9;
	--rose: #d98884;
	--hex-border: rgba(233, 162, 39, 0.35);

	position: relative;
	isolation: isolate;
	min-height: 100vh;
	width: 100%;
	background: radial-gradient(120% 140% at 50% -10%, #262015 0%, var(--ink) 55%, #0f0d09 100%);
	color: var(--cream);
	font-family: 'Manrope', system-ui, sans-serif;
	overflow: hidden;
	box-sizing: border-box;
}
.bee-cs-root *, .bee-cs-root *::before, .bee-cs-root *::after { box-sizing: border-box; }

/* ---------- ambient background ---------- */
.bee-cs-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bee-cs-hexbg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	color: var(--honey); opacity: 0.06;
	animation: beeDrift 60s linear infinite;
}
@keyframes beeDrift {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-52px, -90px); }
}
.bee-cs-glow {
	position: absolute; border-radius: 50%;
	filter: blur(70px); opacity: 0.35; pointer-events: none;
}
.bee-cs-glow--one { width: 520px; height: 520px; top: -180px; left: -140px; background: var(--amber); }
.bee-cs-glow--two { width: 420px; height: 420px; bottom: -160px; right: -120px; background: var(--rose); opacity: 0.18; }

/* ---------- bee flight path (progressive enhancement) ---------- */
.bee-cs-flightpath { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.bee-cs-bee {
	position: absolute; top: 0; left: 0; font-size: 22px; z-index: 1;
	opacity: 0;
	offset-path: path('M -5,20 C 20,5 35,35 55,18 S 90,10 105,25');
	offset-distance: 0%;
	animation: beeFly 3.2s 0.6s cubic-bezier(.4,0,.2,1) 1 forwards;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
@supports not (offset-path: path('M0,0')) {
	.bee-cs-bee { display: none; }
}
@keyframes beeFly {
	0%   { offset-distance: 0%; opacity: 0; transform: scale(.7) rotate(0deg); }
	8%   { opacity: 1; }
	92%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; transform: scale(1) rotate(8deg); }
}

/* ---------- layout ---------- */
.bee-cs-container {
	position: relative; z-index: 2;
	max-width: 720px; margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) 24px 32px;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
}

.bee-cs-fade {
	opacity: 0; transform: translateY(14px);
	animation: beeFadeUp .7s ease-out forwards;
	animation-delay: var(--d, 0s);
}
@keyframes beeFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---------- logo ---------- */
.bee-cs-logo { margin-bottom: 18px; }
.bee-cs-logo img { max-width: 96px; height: auto; display: block; margin: 0 auto; }
.bee-cs-logo--text {
	font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px;
	letter-spacing: .01em; color: var(--cream);
	display: inline-flex; align-items: center; gap: 6px;
}
.bee-cs-logo--text span { color: var(--honey); }
.bee-cs-logo--text::before {
	content: '⬡'; color: var(--honey); font-size: 20px; transform: translateY(-1px);
}

/* ---------- eyebrow ---------- */
.bee-cs-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--honey-light);
	margin: 0 0 18px;
	display: inline-flex; align-items: center; gap: 10px;
}
.bee-cs-eyebrow::before, .bee-cs-eyebrow::after {
	content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--honey));
}
.bee-cs-eyebrow::after { background: linear-gradient(90deg, var(--honey), transparent); }

/* ---------- headline ---------- */
.bee-cs-headline {
	font-family: 'Fraunces', serif;
	font-optical-sizing: auto;
	color:white;
	font-weight: 600;
	font-size: clamp(2.4rem, 7vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}
.bee-cs-headline span { display: block; }
.bee-cs-headline-accent {
	font-style: italic;
	font-weight: 500;
	background: linear-gradient(100deg, var(--honey-light) 10%, var(--honey) 45%, var(--amber) 90%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- subcopy ---------- */
.bee-cs-subcopy {
	font-size: clamp(15px, 2.4vw, 17px);
	line-height: 1.6;
	color: var(--cream-dim);
	max-width: 480px;
	margin: 0 0 clamp(36px, 6vw, 52px);
}

/* ==========================================================================
   Honeycomb countdown — the signature element
   Two interlocking columns of pointy-top hexagons, offset columns
   ========================================================================== */
.bee-hive {
	display: flex;
	justify-content: center;
	gap: clamp(4px, 1.4vw, 10px);
	margin-bottom: clamp(36px, 6vw, 56px);
	--hexw: clamp(84px, 15vw, 118px);
}
.bee-hex-col {
	display: flex; flex-direction: column;
	gap: clamp(4px, 1.4vw, 10px);
}
.bee-hex-col--offset { margin-top: calc(var(--hexw) * 0.5); }

.bee-hex {
	width: var(--hexw);
	height: calc(var(--hexw) * 1.1547);
	position: relative;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 55%, #1b1710 100%);
}
.bee-hex::before {
	content: '';
	position: absolute; inset: 0;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	padding: 1.5px;
	background: linear-gradient(160deg, var(--honey) 0%, transparent 40%, transparent 60%, var(--amber) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: .8;
}
.bee-hex-inner {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px;
}
.bee-hex-num {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: clamp(1.3rem, 3.6vw, 1.9rem);
	color: var(--cream);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.bee-hex-lbl {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--honey-light);
	opacity: .85;
}

/* ---------- actions ---------- */
.bee-cs-actions {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
	gap: 12px; width: 100%; max-width: 520px; margin-bottom: 10px;
}
.bee-cs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
	padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.bee-cs-btn:hover { transform: translateY(-2px); }
.bee-cs-btn--primary {
	background: linear-gradient(100deg, var(--honey-light), var(--honey) 55%, var(--amber));
	color: #201705;
	box-shadow: 0 10px 26px -8px rgba(233, 162, 39, .55);
}
.bee-cs-btn--primary:hover { box-shadow: 0 14px 30px -8px rgba(233, 162, 39, .7); }
.bee-cs-btn--outline {
	background: transparent; color: var(--cream);
	border-color: rgba(255,246,229,.28);
}
.bee-cs-btn--outline:hover { border-color: var(--honey); color: var(--honey-light); }

.bee-cs-form {
	display: flex; flex: 1 1 260px; min-width: 240px;
	background: rgba(255,246,229,.05);
	border: 1px solid rgba(255,246,229,.16);
	border-radius: 999px; padding: 5px 5px 5px 20px;
	align-items: center; gap: 8px;
}
.bee-cs-form input[type="email"] {
	flex: 1; background: transparent; border: none; outline: none;
	color: var(--cream); font-family: 'Manrope', sans-serif; font-size: 14.5px;
	min-width: 0;
}
.bee-cs-form input[type="email"]::placeholder { color: var(--cream-dim); opacity: .6; }
.bee-cs-form .bee-cs-btn--outline { padding: 11px 20px; border: none; background: rgba(233,162,39,.14); color: var(--honey-light); }
.bee-cs-form .bee-cs-btn--outline:hover { background: rgba(233,162,39,.24); }

.bee-cs-form-msg {
	min-height: 20px; font-size: 13.5px; color: var(--honey-light);
	margin: 6px 0 clamp(28px, 5vw, 44px);
}
.bee-cs-form-msg[data-state="error"] { color: var(--rose); }

/* ---------- social proof ---------- */
.bee-cs-social {
	display: flex; align-items: center; gap: 12px;
	font-size: 13.5px; color: var(--cream-dim);
}
.bee-cs-social strong { color: var(--cream); font-weight: 700; }
.bee-cs-avatars { display: flex; }
.bee-cs-avatars span {
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid var(--ink);
	margin-left: -8px;
	background: linear-gradient(135deg, var(--honey), var(--rose));
}
.bee-cs-avatars span:first-child { margin-left: 0; }
.bee-cs-avatars span:nth-child(2) { background: linear-gradient(135deg, var(--amber), var(--honey-light)); }
.bee-cs-avatars span:nth-child(3) { background: linear-gradient(135deg, var(--rose), var(--amber)); }
.bee-cs-avatars span:nth-child(4) { background: linear-gradient(135deg, var(--honey-light), var(--rose)); }

/* ---------- footer ---------- */
.bee-cs-footer {
	position: relative; z-index: 2;
	text-align: center; font-size: 12.5px; color: var(--cream-dim);
	opacity: .6;
	padding: 18px 24px 28px;
}
.bee-cs-footer-dot { margin: 0 8px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.bee-cs-hexbg, .bee-cs-bee, .bee-cs-fade { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
	.bee-cs-container { padding-top: 40px; }
	.bee-cs-headline { font-size: clamp(2rem, 9vw, 2.8rem); }

	/* Collapse honeycomb interlock into a simple, thumb-friendly 2x2 grid */
	.bee-hive {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		max-width: 320px;
		margin-left: auto; margin-right: auto;
		--hexw: auto;
	}
	.bee-hex-col, .bee-hex-col--offset { display: contents; margin-top: 0; }
	.bee-hex {
		width: 100%; height: auto; aspect-ratio: 1 / 0.82;
		clip-path: none; border-radius: 18px;
		border: 1px solid var(--hex-border);
	}
	.bee-hex::before { display: none; }

	.bee-cs-actions { flex-direction: column; }
	.bee-cs-form, .bee-cs-btn { width: 100%; }
}

@media (max-width: 380px) {
	.bee-cs-eyebrow { letter-spacing: .14em; font-size: 11px; }
}