/* ==========================================================================
   HatchVerse theme — tokens, layout, components, responsive
   ========================================================================== */

:root {
	--hv-bg:        #F6EEDB;
	--hv-bg-alt:    #F0E5CB;
	--hv-surface:   #FFFCF4;
	--hv-ink:       #5C4A35;
	--hv-heading:   #382C1C;
	--hv-muted:     #9C9281;
	--hv-accent:    #E0A43B; /* amber / gold */
	--hv-accent-2:  #7B5EA7; /* purple */
	--hv-hot:       #C9544A; /* warm red */
	--hv-cta:       #5E7B2A; /* forest green */
	--hv-cta-hover: #4E6822;
	--hv-cta-ink:   #FBF6E9;

	--hv-radius:    20px;
	--hv-radius-sm: 12px;
	--hv-shadow:    0 12px 32px rgba(60, 40, 20, .10);
	--hv-shadow-sm: 0 4px 14px rgba(60, 40, 20, .08);
	--hv-maxw:      1120px;

	--hv-s1: .5rem;
	--hv-s2: 1rem;
	--hv-s3: 1.5rem;
	--hv-s4: 2.5rem;
	--hv-s5: 4rem;
	--hv-s6: 6rem;

	/* System stack keeps Lighthouse fast and the build step at zero.
	   To use a brand typeface, @font-face it and swap these two vars. */
	--hv-font-head: ui-rounded, "Hiragino Maru Gothic ProN", "Quicksand",
		-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--hv-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI",
		system-ui, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--hv-font-body);
	color: var(--hv-ink);
	background: var(--hv-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--hv-font-head); color: var(--hv-heading); line-height: 1.15; }
a { color: var(--hv-cta); }
img { max-width: 100%; height: auto; display: block; }

.hv-skip {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--hv-cta); color: var(--hv-cta-ink);
	padding: .75rem 1.25rem; border-radius: 0 0 var(--hv-radius-sm) 0;
}
.hv-skip:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.hv-wrap { max-width: var(--hv-maxw); margin-inline: auto; padding-inline: 1.25rem; }
.hv-sec { padding-block: var(--hv-s5); }
.hv-alt { background: var(--hv-bg-alt); }
.hv-center { text-align: center; }
.hv-narrow { max-width: 760px; margin-inline: auto; }

.hv-h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: .25em 0 .4em; }
.hv-h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 0 0 .5em; }
.hv-sec h3 { font-size: 1.2rem; margin: .2em 0; }
.hv-lede { font-size: 1.08rem; color: var(--hv-ink); margin: 0 0 1.5rem; }
.hv-accent   { color: var(--hv-accent); }
.hv-accent-2 { color: var(--hv-accent-2); }
.hv-muted    { color: var(--hv-muted); }
.hv-hot      { color: var(--hv-hot); }

.hv-eyebrow {
	font-family: var(--hv-font-head); font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; font-size: .8rem; color: var(--hv-cta);
	margin: 0 0 1rem;
}
.hv-eyebrow.hv-center { text-align: center; }

.hv-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.hv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hv-grid--5 { grid-template-columns: repeat(5, 1fr); }

.hv-card {
	background: var(--hv-surface); border-radius: var(--hv-radius);
	padding: 1.6rem; box-shadow: var(--hv-shadow-sm);
}
.hv-card p { margin: .3em 0 0; color: var(--hv-ink); }

.hv-banner {
	margin-top: 2.5rem; background: var(--hv-surface);
	border-radius: var(--hv-radius); padding: 1.25rem 1.5rem;
	box-shadow: var(--hv-shadow-sm); text-align: center;
}
.hv-banner strong { color: var(--hv-heading); display: block; }

.hv-tag {
	display: inline-block; font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	padding: .3rem .7rem; border-radius: 999px; margin: 0 0 .8rem;
}
.hv-tag--grey { background: #E7E1D2; color: #6B6354; }
.hv-tag--gold { background: #FBE7C4; color: #9A6B16; }
.hv-tag--red  { background: #F6D9D5; color: #A53C33; }

/* ---------- Buttons / CTA ---------- */
.hv-btnrow { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hv-btnrow.hv-center { justify-content: center; }

.hv-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--hv-font-head); font-weight: 700;
	text-decoration: none; border-radius: 999px; cursor: pointer;
	border: 0; transition: transform .15s ease, background-color .15s ease;
}
.hv-btn--lg { padding: .9rem 1.5rem; font-size: 1rem; }
.hv-btn--md { padding: .7rem 1.2rem; font-size: .95rem; }
.hv-btn--mini { padding: .55rem 1.1rem; font-size: .9rem;
	background: var(--hv-accent); color: #4A2F09; }
.hv-btn:hover { transform: translateY(-2px); }
.hv-btn:focus-visible { outline: 3px solid var(--hv-accent-2); outline-offset: 2px; }

.hv-btn--store { background: #1B1B1B; color: #fff; }
.hv-btn--store.is-soon { cursor: default; opacity: .9; }
.hv-btn--store.is-soon:hover { transform: none; }
.hv-badge { display: flex; align-items: center; gap: .55rem; }
.hv-badge__glyph { font-size: 1.5rem; line-height: 1; }
.hv-badge__text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.hv-badge__text small { font-size: .62rem; opacity: .85; }
.hv-badge__text strong { font-size: 1.05rem; }
.hv-btn__soon {
	margin-left: .5rem; background: var(--hv-accent); color: #4A2F09;
	font-size: .7rem; padding: .15rem .55rem; border-radius: 999px;
}
.hv-btn--ghost { background: var(--hv-surface); color: var(--hv-heading); box-shadow: var(--hv-shadow-sm); }
.hv-btn__play { color: var(--hv-cta); }

/* ---------- Header ---------- */
.hv-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(246, 238, 219, .88);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	box-shadow: var(--hv-shadow-sm);
}
.hv-header__inner {
	max-width: var(--hv-maxw); margin-inline: auto;
	padding: .7rem 1.25rem; display: flex; align-items: center;
	justify-content: space-between; gap: 1rem;
}
.hv-logo { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.hv-logo__mark { font-size: 1.5rem; }
.hv-logo__word { font-family: var(--hv-font-head); font-weight: 800; font-size: 1.3rem; color: var(--hv-heading); }
.hv-logo__word span { color: var(--hv-accent); }
.hv-nav__list { list-style: none; display: flex; align-items: center; gap: 1.4rem; margin: 0; padding: 0; }
.hv-nav__list a { color: var(--hv-heading); text-decoration: none; font-weight: 600; font-size: .95rem; }
.hv-nav__list a:hover { color: var(--hv-cta); }
.hv-nav__cta a { color: #4A2F09; }

.hv-navtoggle {
	display: none; width: 44px; height: 44px; border: 0; cursor: pointer;
	background: transparent; position: relative;
}
.hv-navtoggle__bar, .hv-navtoggle__bar::before, .hv-navtoggle__bar::after {
	content: ""; position: absolute; left: 10px; right: 10px; height: 3px;
	background: var(--hv-heading); border-radius: 3px; transition: transform .2s ease, opacity .2s ease;
}
.hv-navtoggle__bar { top: 21px; }
.hv-navtoggle__bar::before { top: -7px; }
.hv-navtoggle__bar::after { top: 7px; }
.hv-navtoggle[aria-expanded="true"] .hv-navtoggle__bar { background: transparent; }
.hv-navtoggle[aria-expanded="true"] .hv-navtoggle__bar::before { transform: translateY(7px) rotate(45deg); }
.hv-navtoggle[aria-expanded="true"] .hv-navtoggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* anchor offset under sticky header */
:where(#top, #how-it-works, #habitats, #for-parents, #faq, #download, #built-by-parents) {
	scroll-margin-top: 84px;
}

/* ---------- Hero ---------- */
.hv-hero { padding-top: var(--hv-s4); }
.hv-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; }
.hv-badge-pill {
	display: inline-block; background: var(--hv-surface); color: var(--hv-cta);
	font-weight: 700; font-size: .8rem; padding: .4rem .9rem;
	border-radius: 999px; box-shadow: var(--hv-shadow-sm); margin: 0;
}
.hv-trustline { color: var(--hv-muted); font-size: .9rem; margin-top: 1rem; }
.hv-hero__art { position: relative; }
.hv-floatcards { list-style: none; margin: 0; padding: 0; }
.hv-floatcard {
	position: absolute; background: var(--hv-surface); border-radius: var(--hv-radius-sm);
	box-shadow: var(--hv-shadow); padding: .6rem .9rem; font-size: .8rem;
	display: flex; flex-direction: column;
}
.hv-floatcard strong { color: var(--hv-heading); }
.hv-floatcard span { color: var(--hv-muted); }
.hv-floatcard--egg  { top: 8%;  right: -4%; }
.hv-floatcard--new  { top: 42%; right: -6%; }
.hv-floatcard--prog { bottom: 8%; left: -4%; }
.hv-hero__trustbar {
	text-align: center; margin-top: var(--hv-s4); font-family: var(--hv-font-head);
	font-weight: 700; color: var(--hv-heading);
}
.hv-stars { color: var(--hv-accent); margin-left: .4rem; }

/* ---------- How it works steps ---------- */
.hv-steps { list-style: none; padding: 0; counter-reset: step; }
.hv-step { position: relative; }
.hv-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 999px;
	background: var(--hv-accent); color: #fff; font-weight: 800; margin-bottom: .6rem;
}
.hv-pillrow { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; padding: 0; margin: 2.5rem 0 0; }
.hv-pillrow li { background: var(--hv-surface); padding: .55rem 1.1rem; border-radius: 999px; box-shadow: var(--hv-shadow-sm); font-size: .9rem; }

/* ---------- App preview ---------- */
.hv-screen { margin: 0; text-align: center; }
.hv-screen__phone {
	background: var(--hv-surface); border-radius: 32px; padding: .8rem;
	box-shadow: var(--hv-shadow); display: inline-block; max-width: 280px;
}
.hv-screen__phone .hv-img, .hv-screen__phone .hv-slot { border-radius: 24px; width: 100%; }
.hv-screen figcaption h3 { margin-top: 1rem; }

/* ---------- Habitats ---------- */
.hv-habitat { background: var(--hv-surface); border-radius: var(--hv-radius); overflow: hidden; box-shadow: var(--hv-shadow-sm); }
.hv-habitat__img { position: relative; }
.hv-habitat__img .hv-img, .hv-habitat__img .hv-slot { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.hv-habitat__badge {
	position: absolute; top: .6rem; right: .6rem; background: var(--hv-accent);
	color: #4A2F09; font-size: .68rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px;
}
.hv-habitat__body { padding: 1rem 1.2rem 1.3rem; }
.hv-habitat__body p { color: var(--hv-muted); font-size: .9rem; margin: .3em 0 0; }
.hv-habitat--soon { background: #EFE6CF; display: flex; flex-direction: column; padding: 1.2rem; }
.hv-habitat--soon ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hv-habitat--soon li { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .85rem; }
.hv-habitat__thumb { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--hv-radius-sm); }

/* ---------- Animal carousel ---------- */
.hv-carousel {
	list-style: none; display: flex; gap: 1.1rem; margin: 2.5rem 0 0;
	padding: 0 1.25rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
	max-width: var(--hv-maxw); margin-inline: auto;
}
.hv-acard {
	scroll-snap-align: start; flex: 0 0 220px; background: var(--hv-surface);
	border-radius: var(--hv-radius); box-shadow: var(--hv-shadow-sm);
	padding: .9rem; text-align: center;
}
.hv-acard__img { position: relative; }
.hv-acard__img .hv-img, .hv-acard__img .hv-slot { width: 100%; aspect-ratio: 1; object-fit: contain; }
.hv-acard h3 { margin: .6rem 0 .1rem; }
.hv-acard__habitat { color: var(--hv-muted); font-size: .85rem; margin: 0; }
.hv-rarity {
	position: absolute; top: .4rem; right: .4rem; font-size: .68rem;
	font-weight: 700; padding: .2rem .55rem; border-radius: 999px; color: #fff;
}
.hv-rarity--common { background: #6E8B3D; }
.hv-rarity--rare   { background: #3E78B0; }
.hv-rarity--epic   { background: #7B5EA7; }
.hv-acard--epic { box-shadow: 0 0 0 2px #E7D6F2, var(--hv-shadow-sm); }

/* ---------- Benefits / use cases / values ---------- */
.hv-benefit, .hv-case { text-align: center; }
.hv-benefit__icon, .hv-case__icon, .hv-value__icon { font-size: 1.8rem; display: block; margin-bottom: .4rem; }
.hv-values { list-style: none; padding: 0; }
.hv-value { background: var(--hv-surface); border-radius: var(--hv-radius); box-shadow: var(--hv-shadow-sm); padding: 1.2rem; text-align: center; display: flex; flex-direction: column; gap: .25rem; }
.hv-value strong { color: var(--hv-heading); }
.hv-value span { color: var(--hv-muted); font-size: .85rem; }

/* ---------- Built by parents ---------- */
.hv-built__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }

/* ---------- FAQ accordion ---------- */
.hv-accordion { margin-top: 2.5rem; }
.hv-acc { background: var(--hv-surface); border-radius: var(--hv-radius-sm); box-shadow: var(--hv-shadow-sm); margin-bottom: .75rem; overflow: hidden; }
.hv-acc__h { margin: 0; }
.hv-acc__btn {
	width: 100%; text-align: left; background: transparent; border: 0;
	padding: 1.05rem 1.3rem; font-family: var(--hv-font-head); font-weight: 700;
	font-size: 1.02rem; color: var(--hv-heading); cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.hv-acc__btn:focus-visible { outline: 3px solid var(--hv-accent-2); outline-offset: -3px; }
.hv-acc__chev { width: 12px; height: 12px; border-right: 3px solid var(--hv-cta); border-bottom: 3px solid var(--hv-cta); transform: rotate(45deg); transition: transform .2s ease; flex: none; }
.hv-acc__btn[aria-expanded="true"] .hv-acc__chev { transform: rotate(-135deg); }
.hv-acc__panel { padding: 0 1.3rem 1.2rem; }
.hv-acc__panel p { margin: 0; color: var(--hv-ink); }
.hv-faq__foot { text-align: center; margin-top: 1.75rem; color: var(--hv-muted); }

/* ---------- Final CTA ---------- */
.hv-finalcta { background: var(--hv-bg-alt); }

/* ---------- Footer ---------- */
.hv-footer { background: var(--hv-bg-alt); position: relative; }
.hv-footer__deco { line-height: 0; margin-top: -56px; }
.hv-footer__deco img {
	width: 100%; max-height: 230px; object-fit: cover; object-position: center 56%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 78%, transparent 100%);
}
.hv-footer__inner {
	max-width: var(--hv-maxw); margin-inline: auto; padding: 2.5rem 1.25rem 1rem;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.hv-footer__brand { font-size: 1.2rem; }
.hv-footer h2 { font-size: 1rem; }
.hv-footer ul { list-style: none; padding: 0; margin: .6rem 0 0; }
.hv-footer li { margin: .35rem 0; }
.hv-footer a { color: var(--hv-ink); text-decoration: none; }
.hv-footer a:hover { color: var(--hv-cta); }
.hv-footer__bottom { text-align: center; color: var(--hv-muted); padding: 1rem 0 2rem; margin: 0; }

/* ---------- Image slot placeholders ---------- */
.hv-slot {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .25rem; background: repeating-linear-gradient(45deg, #EFE6CF, #EFE6CF 12px, #EAE0C6 12px, #EAE0C6 24px);
	border: 2px dashed #C9B98C; border-radius: var(--hv-radius-sm);
	color: #8A7B55; font-size: .8rem; text-align: center; width: 100%;
}
.hv-slot__id { font-weight: 700; }
.hv-slot__dim { font-size: .72rem; opacity: .8; }

/* ---------- Plain pages (legal / fallback) ---------- */
.hv-main--plain { padding-block: var(--hv-s5); }
.hv-prose { max-width: 760px; }
.hv-prose h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.hv-prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.hv-prose h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.hv-prose__back { margin-top: 2.5rem; }

/* ---------- Contact form ---------- */
.hv-form { margin: 1.5rem 0 0; }
.hv-field { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1.1rem; }
.hv-field label { font-family: var(--hv-font-head); font-weight: 700; color: var(--hv-heading); font-size: .95rem; }
.hv-field input, .hv-field textarea {
	font: inherit; color: var(--hv-ink); background: var(--hv-surface);
	border: 1px solid var(--hv-line, #E7DBBE); border-radius: var(--hv-radius-sm);
	padding: .75rem .9rem; width: 100%;
}
.hv-field input:focus, .hv-field textarea:focus {
	outline: 3px solid var(--hv-accent-2); outline-offset: 1px; border-color: transparent;
}
.hv-field textarea { resize: vertical; min-height: 140px; }
.hv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hv-formnotice {
	border-radius: var(--hv-radius-sm); padding: .9rem 1.1rem; margin: 0 0 1.25rem;
	font-weight: 600;
}
.hv-formnotice--ok  { background: #E8F0D8; color: #4E6822; border: 1px solid #Bcd39a; }
.hv-formnotice--err { background: #F6D9D5; color: #A53C33; border: 1px solid #E3b3ac; }

.hv-field__opt { color: var(--hv-muted); font-weight: 500; font-size: .85em; margin-left: .25em; }
.hv-form__actions { margin: 1.4rem 0 0; }

/* Primary brand button (forest green) — for in-page CTAs like Send Message. */
.hv-btn--primary { background: var(--hv-cta); color: var(--hv-cta-ink); }
.hv-btn--primary:hover { background: var(--hv-cta-hover); color: var(--hv-cta-ink); }

/* ---------- Contact page layout ---------- */
.hv-contact-page { padding-block: var(--hv-s5); }
.hv-contact__grid {
	display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: start;
}
.hv-contact__aside { max-width: 460px; }
.hv-contact__aside .hv-h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: .15em 0 .5em; }
.hv-contact__intro p { color: var(--hv-ink); font-size: 1.05rem; }
.hv-contact__art {
	margin: 1.4rem 0 .8rem; display: flex; justify-content: center;
}
.hv-contact__fox,
.hv-contact__art .hv-img,
.hv-contact__art .hv-slot { max-width: 240px; width: 100%; height: auto; }
.hv-contact-page .hv-trustline { margin-top: .25rem; }

.hv-contact__form-card {
	background: var(--hv-surface); border-radius: var(--hv-radius);
	padding: 2rem 1.9rem; box-shadow: var(--hv-shadow);
	border: 1px solid var(--hv-line, #E7DBBE);
}
.hv-contact__form-card .hv-form { margin: 0; }
.hv-contact-page .hv-prose__back { margin-top: 2.5rem; }

@media (max-width: 860px) {
	.hv-contact__grid { grid-template-columns: 1fr; gap: 2rem; }
	.hv-contact__aside { max-width: none; text-align: center; }
	.hv-contact__art { margin-top: 1rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.hv-grid--4, .hv-grid--5 { grid-template-columns: repeat(2, 1fr); }
	.hv-hero__grid, .hv-built__grid { grid-template-columns: 1fr; }
	.hv-hero__art { order: -1; }
	.hv-floatcard--egg { right: 2%; }
	.hv-floatcard--new { right: 0; }
	.hv-floatcard--prog { left: 2%; }
}

@media (max-width: 760px) {
	.hv-sec { padding-block: var(--hv-s4); }
	.hv-grid--3 { grid-template-columns: 1fr; }
	.hv-navtoggle { display: block; }
	.hv-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--hv-bg); box-shadow: var(--hv-shadow);
		max-height: 0; overflow: hidden; transition: max-height .25s ease;
	}
	.hv-nav.is-open { max-height: 70vh; }
	.hv-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; }
	.hv-nav__list li { padding: .6rem 0; border-bottom: 1px solid rgba(60,40,20,.08); }
	.hv-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
}

@media (max-width: 480px) {
	.hv-grid--4, .hv-grid--5 { grid-template-columns: 1fr; }
	.hv-habitat--soon ul { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}