/* Home page layout and its entrance choreography (front-page.php). */

.hm-section { padding: var(--wb-section) 0 0; }
.hm-section--tight { padding-top: clamp(40px, 5vw, 72px); }
.hm-h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 600; line-height: 1.06; margin: 0; max-width: 16ch; }
.hm-section__head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px 64px; align-items: end; margin-bottom: 40px; }
.hm-section__head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hm-section__head--center .hm-h2, .hm-section__head--center .hm-section__lead { margin-left: auto; margin-right: auto; }
.hm-section__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hm-section__aside p { margin: 0; max-width: 44ch; color: var(--wb-text-soft); }

/* ---------- hero ---------- */
.hm-hero { padding-top: 12px; }
.hm-hero__panel { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: center; padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 72px); border-radius: var(--wb-radius-xl); background: var(--wb-grad-soft); overflow: hidden; }
.hm-hero__panel::before { content: ""; position: absolute; top: -30%; right: -10%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(187, 38, 154, 0.18), transparent 70%); pointer-events: none; }
.hm-hero__copy { position: relative; }
.hm-hero__title { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 24px; max-width: 12ch; }
.hm-hero__title .hm-word { display: inline-block; }
.hm-hero__lead { font-size: 1.125rem; line-height: 1.6; color: var(--wb-text); max-width: 46ch; margin: 0 0 32px; }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The visual (template-parts/hero-board.php): an SVG dashboard on a 560 x 520 grid, with HTML chips
   placed on the same grid so their text stays crisp. Sizes inside scale with the visual's width. */
.hm-hero__visual { position: relative; aspect-ratio: 560 / 520; container-type: inline-size; }
.hm-board { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-board__ring { fill: none; stroke: rgba(129, 56, 186, 0.28); stroke-width: 1.5; stroke-dasharray: 1 8; stroke-linecap: round; }
.hm-board__ring--inner { stroke: rgba(129, 56, 186, 0.14); }
.hm-board__card { fill: #fff; }
.hm-board__head circle { fill: var(--wb-line); }
.hm-board__skel { fill: var(--wb-lavender); }
.hm-board__pill { fill: var(--wb-bg-soft); }
.hm-board__rule, .hm-board__base { fill: none; stroke: var(--wb-line); }
.hm-board__grid { fill: none; stroke: #eeecf6; stroke-dasharray: 3 6; }
.hm-board__area { fill: url(#hm-board-area); }
.hm-board__now { fill: none; stroke: rgba(74, 47, 201, 0.35); stroke-dasharray: 2 4; }
.hm-board__line { fill: none; stroke: url(#hm-board-line); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }
.hm-board__end { fill: var(--wb-indigo); stroke: #fff; stroke-width: 3; }
.hm-board__track { fill: #f2effa; }
.hm-board__key, .hm-board__bar { fill: var(--c); }
.hm-c-email { --c: var(--wb-accent); }
.hm-c-social { --c: var(--wb-magenta); }
.hm-c-ads { --c: var(--wb-indigo); }
.hm-c-search { --c: var(--wb-ink); }
/* the newest point keeps pinging (an HTML layer, so the loop never repaints the SVG) */
.hm-board__pulse { position: absolute; left: calc(464 * 100% / 560); top: calc(176 * 100% / 520); width: 2.4cqi; aspect-ratio: 1; border-radius: 50%; background: var(--wb-indigo); translate: -50% -50%; opacity: 0; pointer-events: none; }
.hm-chip { position: absolute; left: calc(var(--x) * 100% / 560); top: calc(var(--y) * 100% / 520); translate: -50% -50%; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.42em 1em 0.42em 0.42em; border-radius: 999px; background: #fff; box-shadow: 0 12px 32px rgba(11, 10, 46, 0.12), 0 0 0 1px rgba(11, 10, 46, 0.04); color: var(--wb-ink); font-size: clamp(11px, 2.75cqi, 15px); font-weight: 600; line-height: 1; white-space: nowrap; }
.hm-chip__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25em; height: 2.25em; border-radius: 50%; background: var(--c); color: #fff; }
.hm-chip__icon .wb-icon { width: 1.15em; height: 1.15em; }

/* entrance: words rise one after another, then the rest of the panel. In the visual the card
   rises, the growth line draws itself left to right, the channel bars fill, the chips pop in on
   the ring and keep drifting, and the newest point pings. Every end state is the static default. */
.hm-word, .hm-in { animation: hm-in 900ms var(--wb-ease-out) both; animation-delay: calc(var(--d, 0) * 70ms); }
.hm-hero__visual { animation: hm-visual 1100ms var(--wb-ease-out) 300ms both; }
.hm-board__line { animation: hm-draw 1700ms cubic-bezier(0.45, 0, 0.2, 1) 800ms both; }
.hm-board__area { animation: hm-wipe 1700ms cubic-bezier(0.45, 0, 0.2, 1) 800ms both; }
.hm-board__now { transform-box: fill-box; transform-origin: bottom; animation: hm-rise 700ms var(--wb-ease-out) 2300ms both; }
.hm-board__end { transform-box: fill-box; transform-origin: center; animation: hm-pop 600ms var(--wb-ease-out) 2350ms both; }
.hm-board__bar { transform-box: fill-box; transform-origin: left center; animation: hm-grow 1200ms var(--wb-ease-out) both; animation-delay: calc(1100ms + var(--i) * 150ms); }
.hm-board__pulse { animation: hm-ping 2600ms var(--wb-ease-out) 2700ms infinite; }
.hm-chip { animation: hm-chip 800ms var(--wb-ease-out) both, hm-drift 7s ease-in-out infinite; animation-delay: calc(1000ms + var(--i) * 180ms), calc(var(--i) * -1.75s); }
@keyframes hm-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hm-visual { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes hm-draw { from { stroke-dashoffset: 1; } }
@keyframes hm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hm-pop { from { transform: scale(0); } }
@keyframes hm-grow { from { transform: scaleX(0); } }
@keyframes hm-rise { from { transform: scaleY(0); } }
@keyframes hm-ping { from { opacity: 0.5; transform: scale(1); } 70%, to { opacity: 0; transform: scale(4); } }
@keyframes hm-chip { from { opacity: 0; scale: 0.7; filter: blur(4px); } }
@keyframes hm-drift { 50% { transform: translateY(-9px); } }


/* ---------- services ---------- */
.hm-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-service { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-lg); background: #fff; color: var(--wb-text-soft); transition: transform var(--wb-base) var(--wb-ease-out), box-shadow var(--wb-base) var(--wb-ease-out), border-color var(--wb-base) ease; }
.hm-service:hover { transform: translateY(-5px); box-shadow: var(--wb-shadow-md); border-color: transparent; color: var(--wb-text-soft); }
.hm-service__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: var(--wb-bg-soft); color: var(--wb-accent); transition: background var(--wb-base) ease; }
.hm-service:hover .hm-service__icon { background: var(--wb-lavender); }
.hm-service__icon .wb-icon { width: 30px; height: 30px; stroke-width: 1.75; }
.hm-service h3 { font-size: 1.25rem; margin: 6px 0 0; letter-spacing: -0.015em; }
.hm-service p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.hm-service__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--wb-ink); font-weight: 600; font-size: 0.9375rem; }
.hm-service__more svg { width: 14px; height: 14px; transition: transform var(--wb-base) var(--wb-ease-out); }
.hm-service:hover .hm-service__more { color: var(--wb-accent); }
.hm-service:hover .hm-service__more svg { transform: translate(2px, -2px); }

/* ---------- values (dark panel) ---------- */
.hm-values { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; padding: clamp(40px, 5vw, 72px); border-radius: var(--wb-radius-xl); background: var(--wb-ink); color: rgba(255, 255, 255, 0.78); overflow: hidden; }
.hm-values::before { content: ""; position: absolute; right: -15%; bottom: -45%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(129, 56, 186, 0.5), transparent 70%); pointer-events: none; }
.hm-values .wb-label { color: #c9b6ff; }
.hm-values .hm-h2 { color: #fff; }
.hm-values__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hm-values__list li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 24px; border-radius: var(--wb-radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: background var(--wb-base) ease; }
.hm-values__list li:hover { background: rgba(255, 255, 255, 0.09); }
.hm-values__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); color: #c9b6ff; }
.hm-values__icon .wb-icon { width: 26px; height: 26px; stroke-width: 1.75; }
.hm-values h3 { color: #fff; font-size: 1.125rem; margin: 2px 0 6px; letter-spacing: -0.01em; }
.hm-values p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

/* ---------- process: a ruled timeline, not another card row ---------- */
.hm-section__lead { margin: 16px 0 0; max-width: 46ch; color: var(--wb-text-soft); }
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.hm-step { position: relative; padding-top: 24px; border-top: 1px solid var(--wb-line); }
.hm-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--wb-accent); }
.hm-step__num { display: block; font-size: 0.875rem; font-weight: 600; color: var(--wb-accent); margin-bottom: 18px; font-variation-settings: "opsz" 14; }
.hm-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wb-ink); color: #fff; margin-bottom: 18px; }
.hm-step__icon .wb-icon { width: 24px; height: 24px; stroke-width: 1.75; }
.hm-step h3 { font-size: 1.2rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.hm-step p { margin: 0; font-size: 0.9375rem; color: var(--wb-text-soft); line-height: 1.6; }

/* ---------- latest posts ---------- */
.hm-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hm-post { display: block; padding: 12px; border: 1px solid var(--wb-line); border-radius: var(--wb-radius-lg); background: #fff; color: var(--wb-text-soft); transition: transform var(--wb-base) var(--wb-ease-out), box-shadow var(--wb-base) var(--wb-ease-out); }
.hm-post:hover { transform: translateY(-5px); box-shadow: var(--wb-shadow-md); color: var(--wb-text-soft); }
.hm-post__thumb { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; margin-bottom: 18px; }
.hm-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--wb-slow) var(--wb-ease-out); }
.hm-post:hover .hm-post__thumb img { transform: scale(1.04); }
.hm-post time { display: block; padding: 0 8px; font-size: 0.875rem; }
.hm-post h3 { font-size: 1.125rem; margin: 6px 8px 10px; line-height: 1.3; letter-spacing: -0.01em; transition: color var(--wb-fast) ease; }
.hm-post:hover h3 { color: var(--wb-accent); }

/* the call-to-action band sits a section below the posts */
.hm .wb-cta-band { margin-top: var(--wb-section); }

/* ---------- responsive ---------- */
@media (max-width: 1199px) { .hm-services, .hm-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
	.hm-hero__panel { grid-template-columns: 1fr; }
	.hm-hero__visual { max-width: 520px; margin: 0 auto; width: 100%; }
	.hm-values { grid-template-columns: 1fr; }
	.hm-section__head { grid-template-columns: 1fr; align-items: start; }
	.hm-posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
	.hm-hero { padding-top: 8px; }
	.hm-hero__panel { padding: 32px 22px; margin: 0 -4px; }
	.hm-hero__title { max-width: none; }
	.hm-services, .hm-steps, .hm-posts { grid-template-columns: 1fr; }
	.hm-values__list li { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px; }
	.hm-section__head { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-word, .hm-in, .hm-hero__visual, .hm-board *, .hm-board__pulse, .hm-chip { animation: none; }
	.hm-service:hover, .hm-post:hover { transform: none; }
}