:root {
	--hh-shadow: 0 18px 50px rgba(20, 33, 61, 0.09);
	--hh-shadow-soft: 0 8px 28px rgba(20, 33, 61, 0.07);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.hh-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(223, 231, 242, 0.9);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px);
}

.admin-bar .hh-site-header {
	top: 32px;
}

.hh-logo-mark {
	display: inline-grid;
	width: 2.15rem;
	height: 2.15rem;
	place-items: center;
	border-radius: 11px;
	background: linear-gradient(135deg, #2563eb, #06b6d4);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

.hh-header-inner {
	min-height: 72px;
}

.hh-header-nav a {
	color: #34415a;
	font-size: 0.94rem;
	font-weight: 650;
}

.hh-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #dfe7f2;
	background:
		radial-gradient(circle at 82% 20%, rgba(6, 182, 212, 0.18), transparent 26rem),
		radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.15), transparent 24rem),
		linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.hh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	border: 1px solid #cddcff;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	color: #1d4ed8;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 0.45rem 0.75rem;
	text-transform: uppercase;
}

.hh-hero-copy {
	max-width: 800px;
}

.hh-hero-copy p {
	max-width: 670px;
	color: #526079;
	font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hh-secondary-button .wp-block-button__link {
	border: 1px solid #c8d6eb;
	background: #fff;
	color: #14213d;
}

.hh-trust-row {
	color: #526079;
	font-size: 0.88rem;
}

.hh-section-label {
	color: #2563eb;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hh-card {
	height: 100%;
	border: 1px solid #dfe7f2;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--hh-shadow-soft);
	padding: clamp(1.2rem, 3vw, 1.75rem);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hh-card:hover {
	transform: translateY(-3px);
	border-color: #b9cdf8;
	box-shadow: var(--hh-shadow);
}

.hh-product-icon {
	display: grid;
	width: 2.7rem;
	height: 2.7rem;
	place-items: center;
	border-radius: 13px;
	background: #eef4ff;
	color: #2563eb;
	font-weight: 850;
}

.hh-post-card {
	overflow: hidden;
	border: 1px solid #dfe7f2;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--hh-shadow-soft);
	padding: 1.4rem;
}

.hh-card-cover {
	margin: -1.4rem -1.4rem 1.25rem;
	overflow: hidden;
}

.hh-card-cover img {
	display: block;
	width: 100%;
	transition: transform 220ms ease;
}

.hh-post-card:hover .hh-card-cover img {
	transform: scale(1.025);
}

.hh-post-card .wp-block-post-title {
	margin-top: 0.4rem;
}

.hh-post-card .wp-block-post-date,
.hh-post-card .wp-block-post-excerpt {
	color: #526079;
}

.hh-callout {
	border: 1px solid #cddcff;
	border-radius: 22px;
	background: linear-gradient(135deg, #eef4ff, #f0fbff);
	padding: clamp(1.5rem, 5vw, 3rem);
}

.hh-article-header {
	border-bottom: 1px solid #dfe7f2;
	background: linear-gradient(180deg, #f8fbff, #fff);
}

.hh-article-cover {
	margin-top: clamp(2rem, 5vw, 4rem);
	overflow: hidden;
	border: 1px solid #dfe7f2;
	border-radius: 24px;
	box-shadow: var(--hh-shadow);
}

.hh-article-cover img {
	display: block;
	width: 100%;
}

.hh-article-meta {
	color: #68758d;
	font-size: 0.9rem;
}

.hh-article-body h2 {
	margin-top: 2.75rem;
}

.hh-article-body h3 {
	margin-top: 2rem;
}

.hh-article-body img {
	border: 1px solid #dfe7f2;
	border-radius: 14px;
	box-shadow: var(--hh-shadow-soft);
}

.hh-article-body table {
	border: 1px solid #dfe7f2;
	border-radius: 12px;
	overflow: hidden;
}

.hh-article-body th {
	background: #eef4ff;
	text-align: left;
}

.hh-site-footer {
	border-top: 1px solid #dfe7f2;
	background: #0f172a;
	color: #cbd5e1;
}

.hh-site-footer a,
.hh-site-footer .wp-block-site-title a {
	color: #fff;
}

@media (max-width: 782px) {
	.admin-bar .hh-site-header {
		top: 46px;
	}

	.hh-header-inner {
		min-height: 64px;
	}

	.hh-header-nav {
		display: none;
	}
}