/* ==========================================================================
   Your Pet Hamster — homepage.css
   Hero, quick-start, featured setups, guides, FAQ, newsletter, trust.
   ========================================================================== */

.yph-front-wrap > section { padding: 80px 0; }
@media (max-width: 720px) { .yph-front-wrap > section { padding: 56px 0; } }

/* =========== HERO =========== */
.yph-hero {
	position: relative;
	overflow: hidden;
	padding: 100px 0 140px !important;
	background: linear-gradient(160deg, var(--yph-bg-alt) 0%, var(--yph-bg) 100%);
	isolation: isolate;
}
.yph-hero__bg {
	position: absolute; inset: 0; z-index: -1;
}
.yph-hero__bg img {
	width: 100%; height: 100%; object-fit: cover;
	opacity: .25; filter: saturate(.95);
}
.yph-hero__gradient {
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 60% at 20% 10%, color-mix(in srgb, var(--yph-accent) 30%, transparent), transparent 60%),
		radial-gradient(50% 50% at 80% 90%, color-mix(in srgb, var(--yph-secondary) 45%, transparent), transparent 60%);
}
.yph-hero__particle {
	position: absolute; width: 40px; height: 40px;
	opacity: .6; animation: yph-float 8s ease-in-out infinite;
}
.yph-hero__particle--1 { top: 15%; left: 8%; }
.yph-hero__particle--2 { top: 30%; right: 18%; animation-delay: -2s; }
.yph-hero__particle--3 { bottom: 25%; left: 15%; animation-delay: -4s; }
.yph-hero__particle--4 { bottom: 18%; right: 8%; animation-delay: -6s; }
@keyframes yph-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(8px, -14px); }
}

.yph-hero__inner {
	display: grid; gap: 50px; align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.yph-hero__inner { grid-template-columns: 1.4fr 1fr; gap: 70px; }
}
.yph-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border-radius: 999px;
	background: color-mix(in srgb, var(--yph-accent) 18%, #fff);
	color: var(--yph-primary);
	font-family: var(--yph-font-ui); font-weight: 700; font-size: .82rem;
	letter-spacing: .04em; text-transform: uppercase;
	margin-bottom: 18px;
}
.yph-hero__eyebrow-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--yph-accent);
	animation: yph-pulse 1.5s ease-in-out infinite;
}
@keyframes yph-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.6); opacity: .5; }
}
.yph-hero__title {
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	line-height: 1.05; margin: 0 0 16px;
	background: linear-gradient(135deg, var(--yph-text) 0%, var(--yph-primary) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.yph-hero__subtitle {
	font-size: 1.15rem; color: var(--yph-muted);
	max-width: 560px; margin: 0 0 28px;
}
.yph-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.yph-hero__trust {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 18px;
	color: var(--yph-muted); font-size: .9rem;
}
.yph-hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.yph-hero__trust svg { color: var(--yph-secondary); }

.yph-hero-card {
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(8px);
	border: 1px solid color-mix(in srgb, var(--yph-wood) 30%, transparent);
	border-radius: var(--yph-radius-lg);
	padding: 24px;
	box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--yph-primary) 40%, transparent);
	transform: rotate(-1.5deg);
	transition: transform .25s ease;
}
.yph-hero-card:hover { transform: rotate(0deg) translateY(-4px); }
.yph-hero-card__head {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--yph-font-ui); font-weight: 700; font-size: .82rem;
	color: var(--yph-primary); text-transform: uppercase; letter-spacing: .05em;
	margin-bottom: 14px;
}
.yph-hero-card__pulse {
	width: 8px; height: 8px; background: var(--yph-secondary);
	border-radius: 50%; animation: yph-pulse 1.5s ease-in-out infinite;
}
.yph-hero-card__row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--yph-wood) 30%, transparent);
}
.yph-hero-card__row:last-of-type { border-bottom: 0; }
.yph-hero-card__row span { color: var(--yph-muted); font-size: .9rem; }
.yph-hero-card__row strong { font-size: 1.05rem; }
.yph-hero-card__cta { margin-top: 18px; }

.yph-hero__wave {
	position: absolute; bottom: -1px; left: 0; right: 0;
	width: 100%; height: 80px;
}

/* =========== QUICK START =========== */
.yph-quick { background: var(--yph-bg); }
.yph-quick__grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.yph-quick__tile {
	display: flex; flex-direction: column; align-items: flex-start;
	text-align: left; gap: 8px;
	padding: 22px;
	background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--yph-wood) 20%, transparent);
	border-radius: var(--yph-radius);
	cursor: pointer; position: relative;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	font-family: inherit;
	text-align: left;
}
.yph-quick__tile:hover {
	transform: translateY(-4px);
	border-color: var(--yph-accent);
	box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--yph-primary) 35%, transparent);
}
.yph-quick__tile.is-active {
	border-color: var(--yph-primary);
	background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--yph-secondary) 18%, #fff));
}
.yph-quick__emoji { font-size: 2rem; }
.yph-quick__label { font-family: var(--yph-font-heading); font-weight: 800; font-size: 1.05rem; color: var(--yph-text); }
.yph-quick__desc  { font-size: .85rem; color: var(--yph-muted); margin: 0; }
.yph-quick__arrow {
	position: absolute; top: 22px; right: 22px;
	color: var(--yph-muted);
	transition: transform .2s ease, color .2s ease;
}
.yph-quick__tile:hover .yph-quick__arrow { transform: translateX(4px); color: var(--yph-accent); }

/* =========== FEATURED SETUPS =========== */
.yph-setups { background: var(--yph-bg-alt); }
.yph-setups__grid {
	display: grid; gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.yph-setup-card {
	display: block;
	background: #fff;
	border-radius: var(--yph-radius);
	overflow: hidden;
	box-shadow: 0 10px 25px -18px rgba(76,46,28,.4);
	transition: transform .25s ease, box-shadow .25s ease;
	color: inherit;
}
.yph-setup-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(76,46,28,.5); color: inherit; }
.yph-setup-card__media {
	aspect-ratio: 4 / 3; position: relative;
	background: linear-gradient(135deg, var(--yph-bg-alt), color-mix(in srgb, var(--yph-wood) 40%, var(--yph-bg-alt)));
}
.yph-setup-card__media img { width: 100%; height: 100%; object-fit: cover; }
.yph-setup-card__placeholder {
	height: 100%; display: flex; align-items: center; justify-content: center;
	font-size: 4rem;
}
.yph-setup-card__budget {
	position: absolute; top: 12px; left: 12px;
	background: rgba(255,255,255,.92);
	padding: 4px 12px; border-radius: 999px;
	font-family: var(--yph-font-ui); font-weight: 700; font-size: .78rem;
	color: var(--yph-primary);
}
.yph-setup-card__body { padding: 20px 22px; }
.yph-setup-card__species { color: var(--yph-accent); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--yph-font-ui); }
.yph-setup-card__title { font-size: 1.15rem; margin: 6px 0 6px; }
.yph-setup-card__desc { color: var(--yph-muted); font-size: .9rem; margin: 0 0 14px; }
.yph-setup-card__cta { color: var(--yph-primary); font-weight: 700; font-size: .9rem; }

/* =========== GUIDES =========== */
.yph-guides__fallback {
	display: grid; gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* =========== FAQ =========== */
.yph-faq { background: var(--yph-bg); }
.yph-faq__list {
	max-width: 820px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 12px;
}
.yph-faq__item {
	background: #fff;
	border-radius: var(--yph-radius);
	box-shadow: 0 4px 18px -14px rgba(76,46,28,.3);
	overflow: hidden;
	transition: box-shadow .15s ease;
}
.yph-faq__item[open] { box-shadow: 0 12px 26px -18px rgba(76,46,28,.45); }
.yph-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 24px; cursor: pointer;
	font-family: var(--yph-font-heading); font-weight: 700; font-size: 1.05rem;
	list-style: none;
}
.yph-faq__item summary::-webkit-details-marker { display: none; }
.yph-faq__chev { transition: transform .2s ease; flex-shrink: 0; color: var(--yph-primary); }
.yph-faq__item[open] .yph-faq__chev { transform: rotate(180deg); }
.yph-faq__answer { padding: 0 24px 22px; color: var(--yph-muted); }
.yph-faq__answer p:last-child { margin-bottom: 0; }

/* =========== NEWSLETTER =========== */
.yph-news { background: var(--yph-bg); }
.yph-news__card {
	background: linear-gradient(135deg, var(--yph-primary), var(--yph-accent));
	color: #fff;
	border-radius: var(--yph-radius-lg);
	padding: 50px;
	display: grid; gap: 32px;
	grid-template-columns: minmax(0, 1fr);
	position: relative; overflow: hidden;
	box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--yph-primary) 60%, transparent);
}
.yph-news__card::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(40% 40% at 90% 10%, rgba(255,255,255,.2), transparent),
		radial-gradient(40% 40% at 10% 90%, rgba(255,255,255,.15), transparent);
	pointer-events: none;
}
@media (min-width: 768px) { .yph-news__card { grid-template-columns: auto 1fr; } }
.yph-news__art {
	display: flex; gap: 12px; font-size: 3.5rem; line-height: 1;
}
.yph-news__art span:nth-child(1) { animation: yph-bounce 2s ease-in-out infinite; }
.yph-news__art span:nth-child(2) { animation: yph-bounce 2s ease-in-out infinite .3s; }
.yph-news__art span:nth-child(3) { animation: yph-bounce 2s ease-in-out infinite .6s; }
@keyframes yph-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
.yph-news__title { color: #fff; font-size: 1.7rem; margin: 0 0 8px; }
.yph-news__sub { color: rgba(255,255,255,.92); margin: 0 0 18px; }
.yph-news__form {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.yph-news__form input[type="email"] {
	flex: 1; min-width: 220px;
	padding: 14px 18px;
	border: 0; border-radius: 999px;
	background: rgba(255,255,255,.95);
	color: var(--yph-text);
	font: inherit;
}
.yph-news__form input[type="email"]:focus {
	outline: 0;
	box-shadow: 0 0 0 4px rgba(255,255,255,.5);
}
.yph-news__form .yph-btn { background: #fff; color: var(--yph-primary); }
.yph-news__form .yph-btn:hover { background: rgba(255,255,255,.85); color: var(--yph-primary); }
.yph-news__privacy { width: 100%; color: rgba(255,255,255,.85); font-size: .82rem; margin: 6px 0 0; }
.yph-news__status { width: 100%; color: #fff; font-weight: 600; margin: 8px 0 0; }

/* =========== TRUST / EEAT =========== */
.yph-trust { background: var(--yph-bg-alt); }
.yph-trust__grid {
	display: grid; gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 32px;
}
.yph-trust__pillar {
	background: #fff;
	border-radius: var(--yph-radius);
	padding: 26px;
	border: 1.5px solid color-mix(in srgb, var(--yph-wood) 20%, transparent);
	transition: transform .15s, border-color .15s, box-shadow .2s;
}
.yph-trust__pillar:hover {
	transform: translateY(-3px);
	border-color: var(--yph-secondary);
	box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--yph-primary) 35%, transparent);
}
.yph-trust__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	background: color-mix(in srgb, var(--yph-secondary) 30%, #fff);
	color: var(--yph-primary);
	border-radius: 14px;
	margin-bottom: 14px;
}
.yph-trust__pillar-title { font-size: 1.05rem; margin: 0 0 6px; }
.yph-trust__pillar-desc { color: var(--yph-muted); font-size: .92rem; margin: 0; }
.yph-trust__cta {
	display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}