/* Devra HQ: a Gen-AI studio landing page.
   Concept: the page is a live automation canvas. Wires, nodes and signal-yellow pulses recur;
   giant Bricolage type carries the voice. Tokens live in theme.json.
   Hidden "before" states only apply under .dh-js (set by assets/js/devrahq.js),
   so the editor and no-JS visitors always see the finished content. */

:root {
	--dh-ink: var(--wp--preset--color--ink);
	--dh-soft: var(--wp--preset--color--ink-soft);
	--dh-ultra: var(--wp--preset--color--ultramarine);
	--dh-ultra-d: var(--wp--preset--color--ultramarine-dark);
	--dh-lav: var(--wp--preset--color--lavender);
	--dh-signal: var(--wp--preset--color--signal);
	--dh-mist: var(--wp--preset--color--mist);
	--dh-line: var(--wp--preset--color--line);
	--dh-glow: #6d66ff;
	--dh-live: #3ddc97;
	--dh-display: var(--wp--preset--font-family--display);
	--dh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dh-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10l-6.3 2.2L12 18.5l-2.2-6.3L3.5 10l6.3-1.7z'/%3E%3C/svg%3E");
	interpolate-size: allow-keywords;
}

@property --dh-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { text-wrap: balance; }
a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
:where(a, button, input, textarea, summary):focus-visible {
	outline: 3px solid var(--dh-signal);
	outline-offset: 3px;
	border-radius: 6px;
}
[id] { scroll-margin-top: 96px; }
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.dh-header { position: relative; isolation: isolate; }
.dh-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--dh-ink) 84%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dh-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--dh-glow), var(--dh-signal));
	transform-origin: 0 50%;
	transform: scaleX(var(--dh-progress, 0));
}
.dh-header-inner { min-height: 76px; }
.dh-header-inner > .dh-wordmark { margin-right: auto; }

.dh-wordmark {
	margin: 0;
	font-family: var(--dh-display);
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
}
.dh-wordmark a { color: inherit; text-decoration: none; }
.dh-hq {
	display: inline-block;
	margin-left: 0.08em;
	padding: 0.12em 0.3em 0.16em;
	border-radius: 0.28em;
	background: var(--dh-ultra);
	color: #fff;
	font-size: 0.72em;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: 0.1em;
}
.dh-header .dh-hq { box-shadow: 0 0 18px rgba(109, 102, 255, 0.7); }

.dh-nav .wp-block-navigation-item__content { color: var(--dh-mist); text-decoration: none; transition: color 0.2s; }
.dh-nav .wp-block-navigation-item__content:hover { color: #fff; }
@media (max-width: 960px) { .dh-nav { display: none; } }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform 0.3s var(--dh-ease), background-color 0.25s, box-shadow 0.3s; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.dh-btn-small .wp-block-button__link { padding: 0.7rem 1.2rem; font-size: 1rem; }
.dh-btn-glow .wp-block-button__link {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 40px -10px rgba(109, 102, 255, 0.95);
}
.dh-btn-glow .wp-block-button__link:hover {
	background: var(--dh-glow);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 50px -8px rgba(109, 102, 255, 1);
}
.dh-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.dh-btn-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ---------- Split headings (word reveal) ---------- */
.dh-js .dh-split .dh-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.dh-js .dh-split .dh-w > span {
	display: inline-block;
	transform: translateY(110%) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform 1s var(--dh-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.dh-js .dh-split.is-in .dh-w > span { transform: none; }

/* ---------- Generic reveal ---------- */
.dh-js .dh-reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.9s var(--dh-ease), transform 0.9s var(--dh-ease);
	transition-delay: calc(var(--i, 0) * 110ms);
}
.dh-js .dh-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.dh-hero { position: relative; overflow: hidden; isolation: isolate; }
.dh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 25%, transparent 75%);
	mask-image: radial-gradient(ellipse 85% 70% at 50% 25%, #000 25%, transparent 75%);
}
.dh-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 46%;
	width: min(1200px, 130vw);
	aspect-ratio: 1;
	translate: -50% 0;
	background: radial-gradient(circle, rgba(59, 50, 245, 0.6), rgba(59, 50, 245, 0) 62%);
	filter: blur(20px);
}
.dh-hero h1 { font-size: clamp(2.9rem, 7.2vw, 7.6rem); line-height: 0.95; letter-spacing: -0.035em; }
.dh-hero-row { width: 100%; }

/* Credentials under the calls to action */
.dh-hero .dh-trust {
	width: 100%;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dh-trust-item {
	position: relative;
	min-height: 44px;
	margin: 0;
	padding-left: 58px;
	color: var(--dh-mist);
	font-size: 0.95rem;
	line-height: 1.45;
}
.dh-trust-item strong { color: #fff; font-size: 1.05rem; font-weight: 600; }
.dh-trust-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: rgba(169, 164, 255, 0.14) var(--dh-ico) center / 22px no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.dh-trust-item.is-core { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13.5L17 22l-5-3-5 3 1.5-8.5'/%3E%3C/svg%3E"); }
.dh-trust-item.is-sites { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.dh-trust-item.is-years { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.dh-lede { max-width: 40ch; margin: 0; color: var(--dh-mist); line-height: 1.5; }

.dh-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	width: fit-content;
	margin: 0;
	padding: 0.45rem 1.1rem 0.45rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--dh-lav);
	font-size: 0.98rem;
	font-weight: 500;
}
.dh-pill::before {
	content: "";
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--dh-signal);
	-webkit-mask: none;
	box-shadow: 0 0 22px rgba(255, 212, 59, 0.65);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d0e2a' d='M12 2l2.2 6.3L20.5 10l-6.3 2.2L12 18.5l-2.2-6.3L3.5 10l6.3-1.7z'/%3E%3C/svg%3E");
	background-size: 62%;
	background-position: center;
	background-repeat: no-repeat;
}

/* The console: one request becomes a website and a workflow. */
.dh-hero > .dh-console-wrap { margin-block-start: clamp(2.5rem, 4vw, 3.5rem); }
.dh-console {
	position: relative;
	padding: clamp(12px, 1.8vw, 22px);
	border-radius: 30px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 50px 140px -40px rgba(59, 50, 245, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.dh-console::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--dh-angle), transparent 0 62%, var(--dh-glow) 76%, var(--dh-signal) 86%, transparent 96%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: dh-rotate 6s linear infinite;
	pointer-events: none;
}

.dh-prompt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 12px 12px 14px;
	border-radius: 20px;
	background: rgba(9, 10, 32, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: clamp(1rem, 1.7vw, 1.4rem);
	line-height: 1.35;
}
.dh-prompt-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--dh-ultra), var(--dh-glow));
	box-shadow: 0 0 24px rgba(109, 102, 255, 0.7);
}
.dh-prompt-icon svg { width: 24px; height: 24px; fill: var(--dh-signal); }
.dh-prompt-text { flex: 1; min-width: 0; }
.dh-caret {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 3px;
	vertical-align: -0.18em;
	background: var(--dh-signal);
	animation: dh-blink 1s steps(1) infinite;
}
.dh-prompt-send {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--dh-signal);
	color: var(--dh-ink);
	transition: transform 0.3s var(--dh-ease), box-shadow 0.3s;
}
.dh-prompt-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dh-console.is-sending .dh-prompt-send { transform: scale(0.82); box-shadow: 0 0 0 10px rgba(255, 212, 59, 0.2); }

.dh-console-out {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(12px, 1.6vw, 20px);
	margin-top: clamp(12px, 1.6vw, 20px);
}

/* Generated website */
.dh-site {
	display: flex;
	flex-direction: column;
	min-height: 360px;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	color: var(--dh-ink);
}
.dh-site-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	background: #f1f1f8;
	border-bottom: 1px solid var(--dh-line);
}
.dh-site-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7d7e6; }
.dh-site-bar span { margin-left: 10px; padding: 3px 14px; border-radius: 999px; background: #fff; color: var(--dh-soft); font-size: 0.8rem; }
.dh-site-body {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: start;
	gap: 12px;
	padding: 18px;
}
.dh-sk {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 12px;
	border-radius: 8px;
	background: #ececf6;
	transition: background-color 0.5s, transform 0.5s var(--dh-ease), color 0.4s, box-shadow 0.5s;
}
.dh-sk::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
	transform: translateX(-100%);
	animation: dh-shimmer 1.3s ease-in-out infinite;
}
.dh-sk.is-built::after { display: none; }
.dh-sk-nav { grid-column: 1 / -1; height: 14px; }
.dh-sk-h { grid-column: 1 / 3; height: 30px; }
.dh-sk-h2 { grid-column: 1 / 3; height: 30px; width: 72%; }
.dh-sk-p { grid-column: 1 / 3; height: 12px; }
.dh-sk-btn {
	grid-column: 1 / 2;
	display: grid;
	place-items: center;
	height: 38px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: transparent;
}
.dh-sk-img { grid-column: 3; grid-row: 2 / span 4; min-height: 130px; border-radius: 14px; }
.dh-sk-card { height: 70px; border-radius: 12px; }
.dh-js .dh-sk:not(.is-built) { transform: scale(0.97); }
.dh-sk-nav.is-built { background: linear-gradient(90deg, var(--dh-ink) 0 20%, transparent 20% 52%, #e4e4f0 52% 100%); }
.dh-sk-h.is-built,
.dh-sk-h2.is-built { background: var(--dh-ink); }
.dh-sk-p.is-built { background: #c9cae6; }
.dh-sk-btn.is-built { background: var(--dh-ultra); color: #fff; box-shadow: 0 8px 20px -8px rgba(59, 50, 245, 0.8); }
.dh-sk-img.is-built {
	background:
		radial-gradient(circle at 70% 30%, var(--dh-signal) 0 14%, transparent 15%),
		linear-gradient(150deg, var(--dh-glow), var(--dh-ultra) 60%, #1d17a8);
}
.dh-sk-card.is-built { background: linear-gradient(var(--dh-ultra) 0 6px, var(--dh-lav) 6px); }

/* Workflow */
.dh-flow {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(14px, 1.6vw, 20px);
	border-radius: 20px;
	background-color: rgba(9, 10, 32, 0.7);
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
	background-size: 18px 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.dh-node {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: border-color 0.4s, background-color 0.4s, box-shadow 0.4s, transform 0.4s var(--dh-ease);
}
.dh-node-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(169, 164, 255, 0.15);
	color: var(--dh-lav);
	transition: background-color 0.4s, color 0.4s;
}
.dh-node-icon svg,
.dh-step-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dh-node-icon svg { width: 22px; height: 22px; }
.dh-node-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dh-node-text strong { font-weight: 600; font-size: 1rem; }
.dh-node-text small { color: var(--dh-mist); font-size: 0.82rem; }
.dh-node-check {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dh-signal);
	color: var(--dh-ink);
	transition: transform 0.45s var(--dh-ease);
}
.dh-node-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dh-js .dh-node:not(.is-done) .dh-node-check { transform: scale(0); }
.dh-node.is-active {
	border-color: var(--dh-glow);
	background: rgba(109, 102, 255, 0.18);
	box-shadow: 0 0 0 4px rgba(109, 102, 255, 0.18), 0 12px 40px -10px rgba(109, 102, 255, 0.95);
	transform: translateX(6px);
}
.dh-node.is-active .dh-node-icon { background: var(--dh-ultra); color: #fff; animation: dh-ring 1s ease-out infinite; }
.dh-node.is-done .dh-node-icon { background: rgba(255, 212, 59, 0.14); color: var(--dh-signal); }
.dh-wire {
	position: relative;
	width: 2px;
	height: 22px;
	margin-left: 34px;
	background: repeating-linear-gradient(180deg, rgba(169, 164, 255, 0.55) 0 4px, transparent 4px 8px);
	animation: dh-wireflow 0.8s linear infinite;
}
.dh-wire i {
	position: absolute;
	left: 50%;
	top: -4px;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--dh-signal);
	box-shadow: 0 0 14px 3px rgba(255, 212, 59, 0.8);
	opacity: 0;
}
.dh-wire.is-flowing i { animation: dh-drop 0.45s ease-in forwards; }

.dh-console-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 14px;
	padding: 0 6px;
	color: var(--dh-mist);
	font-size: 0.9rem;
}
.dh-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font-weight: 600;
}
.dh-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--dh-live); animation: dh-ping 1.6s infinite; }
.dh-console[data-state="typing"] .dh-status i,
.dh-console[data-state="generating"] .dh-status i { background: var(--dh-signal); --dh-ping: rgba(255, 212, 59, 0.6); }


/* ---------- Marquee ---------- */
.dh-marquee { overflow: hidden; }
.dh-marquee-label { margin: 0; color: var(--dh-lav); font-size: 1rem; font-weight: 500; }
.dh-marquee-row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.dh-marquee-track {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	width: max-content;
	padding-right: clamp(1.5rem, 3vw, 3rem);
	animation: dh-marquee 70s linear infinite;
}
.dh-marquee:hover .dh-marquee-track { animation-play-state: paused; }
.dh-marquee-track span {
	font-family: var(--dh-display);
	font-weight: 700;
	font-size: clamp(2.4rem, 6.4vw, 6rem);
	line-height: 1.1;
	letter-spacing: -0.04em;
	white-space: nowrap;
}
.dh-marquee-track i {
	flex: none;
	width: clamp(20px, 2.4vw, 34px);
	aspect-ratio: 1;
	background: var(--dh-signal);
	-webkit-mask: var(--dh-sparkle) center / contain no-repeat;
	mask: var(--dh-sparkle) center / contain no-repeat;
}

/* ---------- Section heads ---------- */
.dh-section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.dh-section-intro { max-width: 30ch; margin: 0; line-height: 1.4; }
.dh-section-title { max-width: 900px; }

/* ---------- Services bento ---------- */
.dh-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.dh-card--web { grid-column: 1 / 3; }
.dh-card--auto { grid-column: 3; grid-row: 1 / 3; }
.dh-card--audit { grid-column: 1; }
.dh-card--care { grid-column: 2; }
.dh-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.6vw, 36px);
	border-radius: 30px;
	background: #15163b;
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	transition: transform 0.5s var(--dh-ease), border-color 0.4s, opacity 0.9s var(--dh-ease);
}
.dh-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(109, 102, 255, 0.24), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s;
}
.dh-card:hover { border-color: rgba(169, 164, 255, 0.35); }
.dh-card:hover::after { opacity: 1; }
.dh-js .dh-card.dh-reveal.is-in:hover { transform: translateY(-6px); }
.dh-card > h3 { margin-top: 1.75rem; }
.dh-card p { margin: 0; color: var(--dh-mist); }
.dh-card > .dh-good-for { margin-top: auto; padding-top: 1rem; color: #fff; }
.dh-card--auto {
	overflow: visible;
	background: linear-gradient(165deg, var(--dh-ultra), #1b15a3 85%);
	border-color: transparent;
	box-shadow: 0 40px 100px -40px rgba(59, 50, 245, 0.9);
}
.dh-card--auto::after { border-radius: inherit; }
.dh-card--auto p { color: rgba(255, 255, 255, 0.86); }
.dh-card--care { background: var(--dh-signal); border-color: transparent; }
.dh-card--care p { color: rgba(13, 14, 42, 0.78); }
.dh-card--care > .dh-good-for { color: var(--dh-ink); }
.dh-card--care::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.45), transparent 60%); }

.dh-vis { position: relative; border-radius: 20px; }
.dh-vis-web {
	min-height: 250px;
	padding: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.dh-mini-prompt {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 0.92rem;
}
.dh-mini-prompt svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--dh-signal); fill: var(--dh-ink); }
.dh-mini-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.dh-mini-page .m {
	display: block;
	height: 48px;
	border-radius: 10px;
	background: rgba(169, 164, 255, 0.22);
}

.dh-mini-page .m1 { grid-column: 1 / -1; height: 16px; }
.dh-mini-page .m2 { grid-column: 1 / 3; height: 78px; background: linear-gradient(120deg, var(--dh-ultra), var(--dh-glow)); }
.dh-mini-page .m3 { height: 78px; background: var(--dh-signal); }
.dh-mini-page .m4 { }
.dh-mini-page .m5 { }
.dh-mini-page .m6 { }

.dh-vis-auto { flex: 1; display: grid; place-items: center; min-height: 260px; padding: 10px 0; }
.dh-vis-auto svg { width: 100%; height: auto; max-width: 380px; max-height: 520px; overflow: visible; }
.dh-gwire { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; stroke-dasharray: 5 7; animation: dh-dash 1.2s linear infinite; }
.dh-gnode rect { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
.dh-gnode text { fill: #fff; font-family: var(--dh-display); font-weight: 600; font-size: 17px; text-anchor: middle; dominant-baseline: central; }
.dh-gnode.is-ai rect { fill: var(--dh-signal); stroke: none; }
.dh-gnode.is-ai text { fill: var(--dh-ink); font-weight: 700; }
.dh-gnode.is-out rect { fill: #fff; stroke: none; }
.dh-gnode.is-out text { fill: var(--dh-ultra); font-weight: 700; }
.dh-gnode.is-ai { animation: dh-node-glow 2.2s ease-in-out infinite; }
.dh-gpulse { fill: var(--dh-signal); filter: drop-shadow(0 0 6px rgba(255, 212, 59, 0.95)); }

.dh-vis-audit {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.dh-audit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-size: 0.92rem;
}
.dh-audit-row b {
	flex: none;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--dh-mist);
	font-size: 0.78rem;
	font-weight: 600;
}
.dh-audit-row:nth-child(-n+2) b { background: var(--dh-signal); color: var(--dh-ink); }

.dh-vis-care { padding: 14px 16px; border-radius: 20px; background: rgba(13, 14, 42, 0.07); }
.dh-vis-care svg { display: block; width: 100%; height: 76px; }
.dh-beat {
	fill: none;
	stroke: var(--dh-ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dh-care-status { display: inline-flex; align-items: center; gap: 9px; color: var(--dh-ink); font-weight: 600; font-size: 0.92rem; }
.dh-care-status i { width: 9px; height: 9px; border-radius: 50%; background: #149a5f; animation: dh-ping 1.6s infinite; --dh-ping: rgba(20, 154, 95, 0.5); }

/* ---------- Where did the week go? ---------- */
.dh-busy-side { position: sticky; top: 130px; }
.dh-busy-total { margin-top: 1.5rem; font-family: var(--dh-display); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; }
.dh-busy-total .js-total {
	display: block;
	font-size: clamp(3.6rem, 8.5vw, 8.5rem);
	color: var(--dh-ultra);
	font-variant-numeric: tabular-nums;
	transition: color 0.5s;
}
.dh-busy-total-label {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 1.05rem;
	letter-spacing: 0;
	color: var(--dh-soft);
}
.dh-busy.is-done .js-total { color: #149a5f; }
.dh-busy-rows { border-top: 2px solid var(--dh-ink); margin-bottom: 1.5rem; }
.dh-busy-row {
	align-items: center;
	gap: 1.5rem;
	padding: clamp(1.1rem, 2.2vw, 1.8rem) 0;
	border-bottom: 1px solid var(--dh-line);
}
.dh-busy-task {
	margin: 0;
	font-family: var(--dh-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}
.dh-mark {
	background: linear-gradient(var(--dh-signal), var(--dh-signal)) 0 58% / 0% 0.34em no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.9s var(--dh-ease), color 0.6s;
}
.dh-busy-row.is-auto .dh-mark { background-size: 100% 0.34em; color: rgba(13, 14, 42, 0.42); }
.dh-busy-time {
	flex: none;
	margin: 0;
	font-family: var(--dh-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 2.1rem);
	color: var(--dh-ultra);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.dh-busy-row.is-auto .dh-busy-time { color: var(--dh-ink); animation: dh-flip 0.6s var(--dh-ease); }
.dh-auto-badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.25em 0.6em;
	border-radius: 999px;
	background: var(--dh-ultra);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.42em;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: 0.35em;
}

/* ---------- Before / after ---------- */
.dh-toggle {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	padding: 6px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 14px 40px -14px rgba(59, 50, 245, 0.45);
}
.dh-toggle-btn {
	position: relative;
	z-index: 1;
	padding: 0.95rem 1.8rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--dh-ink);
	font: 600 1.2rem/1 var(--dh-display);
	cursor: pointer;
	transition: color 0.35s;
}
.dh-toggle-btn[aria-pressed="true"] { color: #fff; }
.dh-toggle-thumb {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 6px;
	width: calc(50% - 6px);
	border-radius: 999px;
	background: var(--dh-ink);
	transition: transform 0.5s var(--dh-ease), background-color 0.5s;
}
.dh-ba-section.is-after .dh-toggle-thumb { transform: translateX(100%); background: var(--dh-ultra); }

.dh-ba { border-top: 2px solid var(--dh-ink); }
.dh-ba-row {
	display: grid;
	grid-template-columns: minmax(13rem, 0.34fr) minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem 3rem;
	padding: clamp(1.2rem, 2.4vw, 2rem) 0;
	border-bottom: 1px solid rgba(59, 50, 245, 0.16);
}
.dh-ba-topic { display: flex; align-items: center; gap: 0.9rem; margin: 0; font-weight: 600; font-size: 1.1rem; }
.dh-ba-topic::before {
	content: "";
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background-color: #fff;
	background-image: var(--dh-ico);
	background-size: 24px;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 8px 20px -12px rgba(59, 50, 245, 0.6);
}
.dh-ba-row:nth-child(1) { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b32f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9 6 9-6M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.dh-ba-row:nth-child(2) { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b32f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6zM14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.dh-ba-row:nth-child(3) { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b32f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E"); }
.dh-ba-row:nth-child(4) { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b32f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.dh-ba-row:nth-child(5) { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b32f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }
.dh-ba-row:nth-child(6) { --dh-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b32f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.dh-ba-before,
.dh-ba-after {
	margin: 0;
	font-family: var(--dh-display);
	font-weight: 600;
	font-size: clamp(1.35rem, 2.5vw, 2.3rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
}
.dh-ba-before { color: var(--dh-soft); }
.dh-ba-after { color: var(--dh-ultra); }
.dh-js .dh-ba-before,
.dh-js .dh-ba-after {
	grid-column: 2;
	grid-row: 1;
	transition: opacity 0.45s, transform 0.6s var(--dh-ease), visibility 0.6s;
	transition-delay: calc(var(--n, 0) * 70ms);
}
.dh-js .dh-ba-after { opacity: 0; transform: translateY(45%); visibility: hidden; }
.dh-js .dh-ba-section.is-after .dh-ba-before { opacity: 0; transform: translateY(-45%); visibility: hidden; }
.dh-js .dh-ba-section.is-after .dh-ba-after { opacity: 1; transform: none; visibility: visible; }

/* ---------- Process ---------- */
.dh-process { position: relative; overflow: hidden; isolation: isolate; }
.dh-process::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
	background-size: 30px 30px;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.dh-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	counter-reset: step;
}
.dh-steps::before,
.dh-steps::after {
	content: "";
	position: absolute;
	left: 34px;
	right: 0;
	top: 34px;
	height: 2px;
	background: rgba(255, 255, 255, 0.12);
}
.dh-steps::after {
	background: linear-gradient(90deg, var(--dh-signal), var(--dh-glow));
	box-shadow: 0 0 18px rgba(109, 102, 255, 0.9);
	transform-origin: 0 50%;
	transition: transform 2s var(--dh-ease);
}
.dh-js .dh-steps:not(.is-in)::after { transform: scaleX(0); }
.dh-step { position: relative; z-index: 1; counter-increment: step; }
.dh-step-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 22px;
	background: #17184a;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--dh-lav);
	transition: background-color 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s var(--dh-ease);
	transition-delay: calc(var(--n, 0) * 0.45s);
}
.dh-step-icon svg { width: 30px; height: 30px; }
.dh-steps.is-in .dh-step-icon,
html:not(.dh-js) .dh-step-icon {
	background: var(--dh-ultra);
	color: #fff;
	box-shadow: 0 0 0 6px rgba(59, 50, 245, 0.25), 0 0 44px rgba(109, 102, 255, 0.65);
}
.dh-step > h3 { margin-top: 1.75rem; }
.dh-step > h3::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: 0.7rem;
	color: var(--dh-signal);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
}
.dh-step p { margin: 0; color: var(--dh-mist); }

/* ---------- About ---------- */
.dh-portrait { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: 0 auto; }
.dh-portrait img {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #fff, var(--dh-lav) 70%);
	box-shadow: 0 0 0 10px #fff, 0 0 0 11px var(--dh-line), 0 40px 90px -40px rgba(59, 50, 245, 0.7);
}
.dh-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
	padding-top: 1.75rem;
	border-top: 2px solid var(--dh-ink);
}
.dh-count {
	margin: 0;
	font-family: var(--dh-display);
	font-weight: 800;
	font-size: clamp(2.6rem, 4.8vw, 4.6rem);
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--dh-ultra);
	font-variant-numeric: tabular-nums;
}
.dh-fact-label { margin: 0; color: var(--dh-soft); }
.dh-about-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; }

/* ---------- FAQ ---------- */
.dh-sticky { position: sticky; top: 130px; }
.dh-faq-list { border-top: 2px solid var(--dh-ink); }
.dh-faq-list .wp-block-details { border-bottom: 1px solid var(--dh-line); }
.dh-faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.15rem, 2vw, 1.6rem) 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--dh-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 2.2vw, 1.95rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	transition: color 0.25s;
}
.dh-faq-list summary:hover { color: var(--dh-ultra); }
.dh-faq-list summary::-webkit-details-marker { display: none; }
.dh-faq-list summary::after {
	content: "";
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--dh-lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0e2a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: transform 0.45s var(--dh-ease), background-color 0.3s;
}
.dh-faq-list .wp-block-details[open] summary::after { transform: rotate(135deg); background-color: var(--dh-signal); }
.dh-faq-list .wp-block-details::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.5s var(--dh-ease), content-visibility 0.5s allow-discrete;
}
.dh-faq-list .wp-block-details[open]::details-content { block-size: auto; }
.dh-faq-list .wp-block-details > p {
	margin: 0;
	max-width: 58ch;
	padding-bottom: 1.6rem;
	color: var(--dh-soft);
	font-size: 1.15rem;
}

/* ---------- Contact ---------- */
.dh-contact { position: relative; overflow: hidden; isolation: isolate; }
.dh-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 20% 50%, #000, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 20% 50%, #000, transparent 75%);
}
.dh-contact::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -15%;
	top: -30%;
	width: min(900px, 100vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 212, 59, 0.32), transparent 60%);
}
.dh-contact .wp-block-column > p { max-width: 40ch; }

.dh-form {
	display: grid;
	gap: 18px;
	min-width: 0;
	padding: clamp(22px, 3vw, 40px);
	border-radius: 30px;
	background: #fff;
	color: var(--dh-ink);
	box-shadow: 0 50px 120px -40px rgba(13, 14, 42, 0.7);
}
.dh-field { display: grid; gap: 8px; }
.dh-field label { font-weight: 600; font-size: 1rem; }
.dh-optional { font-weight: 400; color: var(--dh-soft); }
.dh-field input,
.dh-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 15px 18px;
	border: 1.5px solid var(--dh-line);
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
	color: var(--dh-ink);
	font: inherit;
	font-size: 1.05rem;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.dh-field input:focus,
.dh-field textarea:focus {
	outline: none;
	border-color: var(--dh-ultra);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(59, 50, 245, 0.15);
}
.dh-field textarea { min-height: 130px; resize: vertical; }
.dh-field.has-error input,
.dh-field.has-error textarea { border-color: #c4291c; }
.dh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dh-form-submit { width: 100%; min-height: 60px; cursor: pointer; font-size: 1.2rem; }
.dh-form-submit:disabled { opacity: 0.75; cursor: default; }
.dh-form-status { margin: 0; min-height: 1.2em; font-size: 1rem; }
.dh-form-status.is-ok { color: #149a5f; font-weight: 600; }
.dh-form-status.is-error { color: #c4291c; }
.dh-contact .dh-form a { color: var(--dh-ultra); }
.dh-form-note { margin: 0; color: var(--dh-soft); font-size: 0.88rem; }

/* ---------- Footer ---------- */
.dh-footer { overflow: hidden; }
.dh-footer-cta {
	margin: 0;
	max-width: 22ch;
	font-family: var(--dh-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.8vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
}
.dh-footer-mark {
	margin: 0;
	font-family: var(--dh-display);
	font-weight: 800;
	font-size: clamp(4.6rem, 26vw, 26rem);
	line-height: 0.82;
	letter-spacing: -0.065em;
	white-space: nowrap;
}
.dh-footer .dh-footer-mark a { color: #fff; text-decoration: none; }
.dh-footer-mark .dh-hq {
	background: var(--dh-signal);
	color: var(--dh-ink);
	border-radius: 0.14em;
	padding: 0.06em 0.12em 0.1em;
	font-size: 0.6em;
	letter-spacing: -0.04em;
	vertical-align: 0.12em;
	box-shadow: 0 0 80px rgba(255, 212, 59, 0.35);
}
.dh-footer-bottom { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dh-footer-bottom p { margin: 0; }
.dh-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.dh-footer-links a { text-decoration: none; }
.dh-footer-links a:hover { color: #fff; }

/* ---------- Service pages (Landing page template) ---------- */
.dh-landing .wp-block-post-content > * + * { margin-block-start: 0; }
.dh-svc-hero h1 { font-size: clamp(2.6rem, 5.6vw, 5.8rem); line-height: 0.96; letter-spacing: -0.035em; }
.dh-crumb { margin: 0; color: var(--dh-mist); font-size: 0.95rem; }
.dh-crumb a { color: var(--dh-lav); text-decoration: none; }
.dh-crumb a:hover { color: #fff; }
.dh-crumb span { margin: 0 0.35rem; opacity: 0.5; }
.dh-svc-visual {
	padding: clamp(12px, 1.6vw, 20px);
	border-radius: 30px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 50px 120px -40px rgba(59, 50, 245, 0.85);
}
.dh-svc-visual .dh-vis-web { min-height: 300px; }
.dh-svc-visual .dh-vis-audit { min-height: 0; }
.dh-svc-visual .dh-vis-care { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.dh-svc-visual .dh-beat { stroke: var(--dh-signal); }
.dh-svc-visual .dh-care-status { color: #fff; }
.dh-care-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dh-care-list span {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--dh-lav);
	font-size: 0.85rem;
	font-weight: 600;
}

.dh-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.dh-feature {
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: 26px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--dh-line);
	transition: transform 0.4s var(--dh-ease), box-shadow 0.4s, border-color 0.3s;
}
.dh-feature:hover { transform: translateY(-4px); border-color: rgba(59, 50, 245, 0.3); box-shadow: 0 24px 60px -30px rgba(59, 50, 245, 0.45); }
.dh-feature h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.15; margin-top: 0.6rem; }
.dh-feature p { margin: 0; }
.dh-feature-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--dh-lav);
	color: var(--dh-ultra);
}
.dh-feature-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dh-checklist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--dh-ink); }
.dh-checklist li {
	position: relative;
	padding: clamp(1rem, 1.8vw, 1.4rem) 0 clamp(1rem, 1.8vw, 1.4rem) 3.2rem;
	border-bottom: 1px solid rgba(59, 50, 245, 0.16);
	font-family: var(--dh-display);
	font-weight: 600;
	font-size: clamp(1.2rem, 2vw, 1.65rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.dh-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2.1rem;
	height: 2.1rem;
	margin-top: -1.05rem;
	border-radius: 50%;
	background: var(--dh-ultra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 55% no-repeat;
}

/* Service cards on the homepage and hub link to their pages; the whole card is clickable. */
.dh-card > .dh-card-link { margin-top: 0.9rem; }
.dh-card-link a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.dh-card-link a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.dh-card--care .dh-card-link a { color: var(--dh-ink); }

@media (max-width: 1000px) {
	.dh-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.dh-features { grid-template-columns: 1fr; }
}

/* ---------- Plain pages (privacy notice, posts) ---------- */
.dh-page .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.dh-page .wp-block-post-content :where(p, li) { color: var(--dh-soft); }

/* ---------- Keyframes ---------- */
@keyframes dh-rotate { to { --dh-angle: 360deg; } }
@keyframes dh-blink { 50% { opacity: 0; } }
@keyframes dh-shimmer { to { transform: translateX(100%); } }
@keyframes dh-ping {
	0% { box-shadow: 0 0 0 0 var(--dh-ping, rgba(61, 220, 151, 0.6)); }
	100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes dh-ring {
	0% { box-shadow: 0 0 0 0 rgba(109, 102, 255, 0.7); }
	100% { box-shadow: 0 0 0 12px rgba(109, 102, 255, 0); }
}
@keyframes dh-wireflow { to { background-position-y: 8px; } }
@keyframes dh-drop {
	0% { top: -4px; opacity: 1; }
	100% { top: calc(100% - 4px); opacity: 1; }
}
@keyframes dh-dash { to { stroke-dashoffset: -24; } }
@keyframes dh-node-glow { 50% { filter: drop-shadow(0 0 14px rgba(255, 212, 59, 0.8)); } }
@keyframes dh-marquee { to { transform: translateX(-50%); } }
@keyframes dh-flip {
	0% { transform: rotateX(90deg); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.dh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dh-card--web,
	.dh-card--auto { grid-column: 1 / -1; grid-row: auto; }
	.dh-card--audit { grid-column: 1; }
	.dh-card--care { grid-column: 2; }
	.dh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
	.dh-steps::before,
	.dh-steps::after { display: none; }
}
@media (max-width: 860px) {
	.dh-console-out { grid-template-columns: 1fr; }
	.dh-site { min-height: 300px; }
}
@media (max-width: 781px) {
	.dh-busy-side,
	.dh-sticky { position: static; }
	.dh-ba-row { grid-template-columns: 1fr; }
	.dh-js .dh-ba-before,
	.dh-js .dh-ba-after { grid-column: 1; grid-row: 2; }
	.dh-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.dh-bento { grid-template-columns: 1fr; }
	.dh-card--audit,
	.dh-card--care { grid-column: auto; }
	.dh-steps { grid-template-columns: 1fr; }
	.dh-prompt-send { display: none; }
	.dh-toggle-btn { padding: 0.8rem 1.3rem; font-size: 1.05rem; }
	.dh-busy-row { gap: 1rem; }
}
@media (max-width: 480px) {
	.dh-pill { font-size: 0.82rem; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}
}