/* DEZISION — Hoba Galaxy themed decision engine UI
 * Deep navy + neon cyan palette, drifting nebula bg.
 *
 * TYPOGRAPHY: the active locale's font is set via the CSS custom property
 * `--dz-font`, injected by PHP per active locale (see dezision_register_assets).
 * Each locale's web font is loaded conditionally via the
 * `dezision-locale-font` stylesheet so we don't ship Arabic fonts to English
 * users (and vice versa). Default fallback uses the system stack.
 */

/* Embedded mode: when the dz container is inside a theme that wraps it in
 * its own padded container, break out so the dark background reaches the
 * edges. Fullscreen mode (dezision-fullscreen body) doesn't need this. */
body:not(.dezision-fullscreen) .dz {
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.dz {
	/* Palette — HOBA GALAXY dark premium: deep navy-black + gold accent.
	 * These are the single source of truth for the whole app; every surface
	 * (app, cards, payment, my-cards) reads them, so retheming happens here.
	 * Mirrored onto body.dz-skin in dezision-skin.css for non-app pages. */
	--bg:        #080A16;   /* --background      */
	--bg-2:      #0E0E19;   /* --header-background */
	--surface:   #10131F;   /* --card-background */
	--surface-2: #171B2B;   /* raised card       */
	--ink:       #F5F5F7;   /* --primary-text    */
	--ink-2:     #E4E5EA;
	--mute:      #8C91A3;   /* --secondary-text  */
	--mute-2:    #757B8E;   /* placeholder / hint — AA on --bg-2 */
	--icon:      #B8BBC7;   /* --icon-color      */
	--line:      #202438;   /* --border          */
	--line-2:    #2C3149;
	--accent:    #C9A45C;   /* --gold            */
	--accent-2:  #A8843C;   /* gradient partner  */
	--accent-3:  #E0BC73;   /* --gold-hover      */
	--ok:        #3FBF87;
	--ok-bg:     rgba( 63, 191, 135, 0.10);
	--accent-glow:        rgba(201, 164,  92, 0.30);
	--accent-glow-strong: rgba(201, 164,  92, 0.55);
	--accent-glow-soft:   rgba(201, 164,  92, 0.12);
	--err:       #ff4d4d;   /* nexem-red */
	--err-bg:    rgba(255, 77, 77, 0.08);

	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	color: var(--ink);
	font-family: var(--dz-font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	isolation: isolate;
}

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

/* ---------- top bar (sticky so it's always visible) ----------
 * HOBA GALAXY header redesign — dark navy + gold, logical properties only
 * (no left:/right:) so it mirrors correctly under dir="rtl". Vars are scoped
 * to .dz-top so the rest of the app keeps its existing cyan accent system. */
.dz-top {
	--hd-bg:          #0E0E19;
	--hd-card:        #10131F;
	--hd-border:      #202438;
	--hd-primary:     #F5F5F7;
	--hd-secondary:   #8C91A3;
	--hd-icon:        #B8BBC7;
	--hd-gold:        #C9A45C;
	--hd-gold-hover:  #E0BC73;
	--hd-placeholder: #73798C;

	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-block: 24px;
	padding-inline: 42px;
	border-bottom: 1px solid var(--hd-border);
	background: var(--hd-bg);
}
.dz-top-start {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}
.dz-top-end {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}
@media (max-width: 480px) {
	.dz-top { padding: 10px 14px; }
	.dz-brand-word { font-size: 12px; letter-spacing: 0.14em; }
}
.dz-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.dz-brand-word {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--ink);
}
.dz-brand--hoba .dz-brand-spark {
	display: inline-flex;
	color: var(--hd-gold, #C9A45C);
}
.dz-brand--hoba .dz-brand-spark svg { width: 22px; height: 22px; }
.dz-brand--hoba .dz-brand-word {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--hd-primary, #F5F5F7);
	white-space: nowrap;
}
.dz-paid-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--hd-gold, #C9A45C);
	border: 1px solid var(--hd-gold, #C9A45C);
	border-radius: 999px;
	padding: 5px 10px;
	background: rgba(201, 164, 92, 0.08);
	white-space: nowrap;
}

/* ---------- header controls: profile / notification buttons ---------- */
.dz-hd-btn {
	--hd-btn-size: 70px;
	flex: 0 0 auto;
	width: var(--hd-btn-size);
	height: var(--hd-btn-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hd-card);
	border: 1px solid var(--hd-border);
	color: var(--hd-icon);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}
.dz-hd-btn--profile { border-radius: 50%; }
.dz-hd-btn--notif   { border-radius: 18px; }
.dz-hd-btn:hover,
.dz-hd-btn:focus-visible {
	border-color: var(--hd-gold);
	color: var(--hd-gold);
	outline: none;
}

/* ---------- language dropdown (native <details>, no JS required) ---------- */
.dz-hd-lang { position: relative; flex: 0 0 auto; }
.dz-hd-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 155px;
	height: 70px;
	padding-inline: 18px;
	background: var(--hd-card);
	border: 1px solid var(--hd-border);
	border-radius: 18px;
	color: var(--hd-primary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: border-color 160ms ease;
}
.dz-hd-lang-btn::-webkit-details-marker { display: none; }
.dz-hd-lang-btn:hover,
.dz-hd-lang[open] > .dz-hd-lang-btn { border-color: var(--hd-gold); }
.dz-hd-lang-icon { flex: 0 0 auto; display: inline-flex; color: var(--hd-gold); }
.dz-hd-lang-current {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: start;
}
.dz-hd-lang-caret {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: 10px;
	color: var(--hd-secondary);
	transition: transform 160ms ease;
}
.dz-hd-lang[open] .dz-hd-lang-caret { transform: rotate(180deg); }
.dz-hd-lang-menu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 8px);
	min-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	background: var(--hd-card);
	border: 1px solid var(--hd-border);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	z-index: 30;
}
.dz-hd-lang-opt {
	display: block;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hd-secondary);
	text-decoration: none;
	text-align: start;
	white-space: nowrap;
}
.dz-hd-lang-opt:hover { color: var(--hd-primary); background: rgba(255, 255, 255, 0.05); }
.dz-hd-lang-opt.is-active { color: var(--hd-gold); }

/* ---------- header search ---------- */
.dz-hd-search { flex: 1 1 240px; max-width: 430px; min-width: 0; }
.dz-hd-search-shell {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 70px;
	padding-inline: 20px;
	background: var(--hd-card);
	border: 1px solid var(--hd-border);
	border-radius: 18px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dz-hd-search-shell:focus-within {
	border-color: var(--hd-gold);
	box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.18);
}
.dz-hd-search-icon { flex: 0 0 auto; display: inline-flex; color: var(--hd-icon); }
.dz-hd-search-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--hd-primary);
}
.dz-hd-search-input::placeholder { color: var(--hd-placeholder); }

@media (max-width: 1180px) {
	.dz-top { padding-inline: 24px; }
	.dz-hd-search { max-width: 300px; }
}
@media (max-width: 900px) {
	.dz-hd-search { max-width: 220px; }
	.dz-brand--hoba .dz-brand-word { font-size: 20px; letter-spacing: 2px; }
}
@media (max-width: 640px) {
	.dz-top { padding-inline: 16px; padding-block: 14px; gap: 10px; }
	.dz-hd-btn { --hd-btn-size: 44px; }
	.dz-hd-btn svg { width: 20px; height: 20px; }
	.dz-hd-lang-btn { width: auto; height: 44px; padding-inline: 12px; gap: 6px; font-size: 12px; }
	.dz-hd-search { order: 4; flex-basis: 100%; max-width: 100%; }
	.dz-hd-search-shell { height: 46px; padding-inline: 14px; border-radius: 14px; }
	.dz-brand--hoba .dz-brand-word { font-size: 16px; letter-spacing: 1.5px; }
	.dz-brand--hoba .dz-brand-spark svg { width: 16px; height: 16px; }
	.dz-paid-badge { font-size: 10px; padding: 4px 8px; }
}

/* ---------- progress dots ---------- */
.dz-nav {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}
.dz-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--line-2);
	transition: background 280ms ease, width 280ms ease, opacity 280ms ease, box-shadow 280ms ease;
}
.dz[data-current="ask"]     .dz-dot[data-dot="ask"],
.dz[data-current="clarify"] .dz-dot[data-dot="clarify"],
.dz[data-current="preview"] .dz-dot[data-dot="preview"] {
	background: var(--hd-gold, #C9A45C);
	width: 22px;
	border-radius: 999px;
	box-shadow: 0 0 8px rgba(201, 164, 92, 0.4);
}

/* ---------- thinking (routing) ---------- */
.dz-thinking {
	display: none;
	flex-direction: column;
	gap: 18px;
	min-height: calc(100dvh - 70px);
	align-items: center;
	justify-content: center;
}
.dz[data-thinking="true"] .dz-thinking { display: flex; }
.dz[data-thinking="true"] .dz-stage    { display: none !important; }
.dz-thinking-dots {
	display: flex;
	gap: 6px;
}
.dz-thinking-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 8px var(--accent-glow);
	animation: dz-pulse 1.1s ease-in-out infinite;
}
.dz-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.dz-thinking-dots span:nth-child(3) { animation-delay: 0.30s; }
.dz-thinking-label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
}
.dz-thinking-label::after {
	content: "...";
	display: inline-block;
	margin-inline-start: 2px;
	color: var(--accent);
	animation: dz-ellipsis 1.4s steps(4, end) infinite;
	width: 14px;
	overflow: hidden;
	vertical-align: bottom;
}

/* ---------- routed-to badge (Stage 2) ---------- */
.dz-route {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px 6px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	background: rgba(201, 164, 92, 0.08);
	border: 1px solid rgba(201, 164, 92, 0.4);
	border-radius: 999px;
	box-shadow: 0 0 16px var(--accent-glow);
	animation: dz-route-in 600ms 60ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dz-route::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 8px var(--accent-glow);
	animation: dz-blink 1.6s ease-in-out infinite;
}
.dz-route-prefix { color: var(--mute); font-weight: 500; }
.dz-route-name { color: var(--accent); }

/* ---------- stage system ---------- */
.dz-stage {
	display: none;
	flex: 1;
	flex-direction: column;
	min-height: calc(100dvh - 70px);
	background: #080A16;
}
.dz[data-current="ask"]     [data-stage="ask"],
.dz[data-current="clarify"] [data-stage="clarify"],
.dz[data-current="preview"] [data-stage="preview"],
.dz[data-current="result"]  [data-stage="result"] {
	display: flex;
	animation: dz-stage-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- content area ---------- */
.dz-content {
	flex: 1;
	max-width: 540px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(24px, 5vh, 48px) clamp(16px, 4vw, 24px) clamp(24px, 5vh, 40px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Stage 1 — wider content area to host the 3-column category grid (legacy) */
.dz[data-current="ask"] .dz-content {
	max-width: 760px;
	padding-top: 28px;
}

/* Stage 1 — hero variant: centered, narrow, generous vertical breathing room */
.dz[data-current="ask"] .dz-content.dz-content-hero {
	max-width: 768px;
	padding: clamp(16px, 4vh, 32px) clamp(14px, 4vw, 18px);
	gap: 0;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	min-height: calc(100dvh - 70px);
}
.dz-content-hero > * { position: relative; z-index: 1; }

/* ---------- typography ---------- */
.dz-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--accent);
	text-transform: uppercase;
	margin: 0;
	animation: dz-fade-in 600ms 60ms ease-out both;
}
.dz-headline {
	font-size: clamp(28px, 6vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 700;
	margin: 0;
	color: var(--ink);
	animation: dz-fade-in 600ms 100ms ease-out both;
}
.dz-accent {
	color: var(--accent);
	font-weight: 700;
}
.dz-sub {
	font-size: 15px;
	line-height: 1.5;
	color: var(--mute);
	margin: 0;
	font-weight: 400;
	animation: dz-fade-in 600ms 160ms ease-out both;
}
.dz-section-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 28px 0 12px;
}

/* ---------- input ---------- */
.dz-form { width: 100%; animation: dz-fade-in 600ms 220ms ease-out both; }
.dz-form-quiet { margin-top: 4px; }

.dz-input {
	width: 100%;
	padding: 16px 0 14px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--line-2);
	border-radius: 0;
	outline: none;
	transition: border-color 200ms ease;
}
.dz-input::placeholder { color: var(--mute-2); font-weight: 400; }
.dz-input:focus { border-bottom-color: var(--accent); }
.dz-input-quiet {
	padding: 12px 0 10px;
	font-size: 15px;
	border-bottom-color: var(--line);
}
.dz-input-quiet:focus { border-bottom-color: var(--accent); }

/* ---------- category grid (Stage 1 main page) ---------- */
.dz-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	width: 100%;
	max-width: 720px;
	margin: 8px auto 0;
	animation: dz-fade-in 600ms 200ms ease-out both;
}
.dz-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 138px;
	padding: 22px 14px 18px;
	font-family: inherit;
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: 16px;
	cursor: pointer;
	text-align: center;
	transition: border-color 200ms ease, background 200ms ease, transform 140ms ease, box-shadow 200ms ease;
	-webkit-tap-highlight-color: transparent;
}
.dz-cat:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-1px); }
.dz-cat:active { transform: scale(0.985); }
.dz-cat.is-selected {
	border-color: var(--accent);
	background: rgba(201, 164, 92, 0.08);
	box-shadow: 0 0 0 1px var(--accent), 0 12px 36px -12px var(--accent-glow);
}
.dz-cat.is-selected::after {
	content: "✓";
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #0a0807;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 12px var(--accent-glow);
}

.dz-cat-icon {
	font-size: 30px;
	line-height: 1;
	margin-bottom: 4px;
}
.dz-cat-name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.dz-cat-sub {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--mute);
	text-transform: uppercase;
}

.dz-or {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--mute-2);
	text-transform: uppercase;
	margin: 22px 0 4px;
}
.dz-or::before, .dz-or::after {
	content: "";
	flex: 1;
	height: 1px;
	max-width: 80px;
	background: var(--line);
}

.dz-bar-spacer { flex: 1; }

/* Single-button bar — center the CTA. */
.dz-bar-center { justify-content: center; }
.dz-bar-center .dz-cta { min-width: 220px; }

/* Stage 1 — sticky bottom area with input + Continue, always visible. */
.dz-bar-stage1 {
	position: sticky;
	bottom: 0;
	z-index: 15;
	gap: 12px;
	padding: 16px 24px;
	background: rgba(10, 8, 7, 0.92);
	border-top: 1px solid var(--line);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	max-width: none;
}
.dz-bar-stage1 .dz-bar-form {
	flex: 1;
	min-width: 0;
}
.dz-input-bar {
	width: 100%;
	padding: 14px 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line-2);
	border-radius: 12px;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.dz-input-bar::placeholder { color: var(--mute-2); }
.dz-input-bar:hover { border-color: var(--mute); }
.dz-input-bar:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Reserve space at the bottom of Stage 1 content so the sticky bar doesn't
   sit on top of the last row of category cards. */
.dz[data-current="ask"] .dz-content { padding-bottom: 24px; }

/* ---------- Stage 2 (clarify) — concise glass layout ---------- */
.dz[data-current="clarify"] .dz-content.dz-content-clarify {
	max-width: 560px;
	padding: 48px 20px 40px;
	gap: 0;
	align-items: center;
	text-align: center;
}

.dz-badge-routed {
	margin: 0 auto 28px;
	animation: dz-fade-up 700ms 80ms cubic-bezier(0.25, 0.4, 0.25, 1) both;
}
.dz-badge-routed .dz-route-prefix {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
}
.dz-badge-routed .dz-route-name {
	color: #ffffff;
	font-weight: 500;
	margin-inline-start: 4px;
}

.dz-headline-clarify {
	font-size: clamp(28px, 4.5vw, 40px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 12px;
	background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: dz-fade-up 700ms 200ms cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

/* Flow Builder: when two questions share a screen, the second heading is
   visually smaller so the first question still leads, and gets clear top
   space to separate it from the previous question's option grid. */
.dz-headline-clarify-secondary {
	font-size: clamp(20px, 3vw, 26px);
	margin-top: 32px;
	animation-delay: 280ms;
}

.dz-sub-clarify {
	margin: 0 0 28px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.4);
	animation: dz-fade-up 700ms 320ms cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

.dz-clarify-form {
	width: 100%;
	margin: 16px 0 0;
	animation: dz-fade-up 700ms 540ms cubic-bezier(0.25, 0.4, 0.25, 1) both;
}

/* Compact search-shell variant for the clarify free-text input */
.dz-search-shell-sm {
	padding: 4px 4px 4px 16px;
	border-radius: 9999px;
}
.dz-search-shell-sm .dz-search-input {
	font-size: 15px;
	padding: 12px 4px;
}

.dz-clarify-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 32px 0 0;
	animation: dz-fade-up 700ms 660ms cubic-bezier(0.25, 0.4, 0.25, 1) both;
}
.dz-clarify-actions .dz-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	font-weight: 400;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 200ms ease, transform 200ms ease;
	-webkit-tap-highlight-color: transparent;
}
.dz-clarify-actions .dz-back:hover { color: #ffffff; transform: translateX(-2px); }

/* Stage 2 Continue button — minimal pill, indigo→rose gradient on engaged */
.dz-cta-clarify {
	min-width: 0;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 9999px;
	box-shadow: none;
	transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms cubic-bezier(0.16, 1, 0.3, 1), color 240ms ease, transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-cta-clarify:hover,
a.dz-cta-clarify:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	transform: translateY(-1px);
	filter: none;
	box-shadow: none;
}
.dz-cta-clarify svg { transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.dz-cta-clarify:hover svg { transform: translateX(2px); }

/* ---------- option cards (clarifier choices) — refined glass pills ---------- */
.dz-option {
	position: relative;
	padding: 14px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
	text-align: left;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 9999px;
	cursor: pointer;
	transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1), background 240ms cubic-bezier(0.16, 1, 0.3, 1), color 240ms ease;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}
.dz-option:hover {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
}
.dz-option.is-selected {
	border-color: rgba(201, 164, 92, 0.55);
	background: rgba(201, 164, 92, 0.08);
	color: #ffffff;
	padding-inline-end: 44px;
}
.dz-option.is-selected::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 16px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A45C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ---------- bottom action bar ---------- */
.dz-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 540px;
	width: 100%;
	margin: 0 auto;
	padding: 16px clamp(14px, 4vw, 24px) 24px;
}
.dz-bar .dz-cta { flex: 1; min-width: 0; }
@media (max-width: 480px) {
	.dz-bar { flex-direction: column-reverse; align-items: stretch; }
	.dz-bar .dz-cta,
	.dz-bar .dz-back { width: 100%; justify-content: center; }
}

.dz-cta,
a.dz-cta {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 16px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	color: #0b0d17;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
	border: none;
	border-radius: 15px;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 280ms ease, opacity 180ms ease, filter 220ms ease;
	box-shadow:
		0 10px 28px -8px var(--accent-glow-strong),
		0 0 24px -4px var(--accent-glow),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-webkit-tap-highlight-color: transparent;
	min-width: 160px;
}
.dz-cta:hover, a.dz-cta:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow:
		0 14px 36px -8px var(--accent-glow-strong),
		0 0 32px -2px var(--accent-glow-strong),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.dz-cta:active { transform: scale(0.985); }
.dz-cta[disabled], .dz-cta.is-disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.dz-cta-arrow {
	display: inline-block;
	font-weight: 600;
	font-size: 16px;
	transform: translateY(-1px);
	transition: transform 200ms ease;
}
.dz-cta:hover .dz-cta-arrow { transform: translateX(2px) translateY(-1px); }

.dz-cta-buy { min-width: 200px; }

.dz-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--mute);
	background: none;
	border: none;
	padding: 10px 4px;
	cursor: pointer;
	transition: color 180ms ease, transform 180ms ease;
	-webkit-tap-highlight-color: transparent;
}
.dz-back:hover { color: var(--ink); transform: translateX(-2px); }

/* ---------- decision card ---------- */
.dz-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 6px 22px;
	margin: 8px 0 0;
	animation: dz-fade-in 600ms 180ms ease-out both;
}
.dz-field { padding: 16px 0; border-bottom: 1px solid var(--line); }
.dz-field:last-child { border-bottom: none; }
.dz-field-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--mute);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.dz-field-value {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--ink-2);
	line-height: 1.5;
}
.dz-field-value-lead {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.35;
	color: var(--ink);
}

/* ---------- free / pro tags + locked teaser fields ---------- */
.dz-tag {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 2px 7px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 999px;
	vertical-align: middle;
	line-height: 1.4;
}
.dz-tag-free {
	background: rgba(201, 164, 92, 0.12);
	color: #C9A45C;
	border: 1px solid rgba(201, 164, 92, 0.35);
}
.dz-tag-pro {
	background: rgba(255, 165, 0, 0.14);
	color: #ffb84d;
	border: 1px solid rgba(255, 165, 0, 0.4);
}
.dz-field-locked .dz-field-value-locked {
	color: var(--mute);
	font-style: italic;
	opacity: 0.85;
	filter: blur(0.2px);
}
/* Free decisions: hide the Pro-locked teaser rows on the preview card. */
[data-stage="preview"][data-dz-free="1"] .dz-field-locked,
[data-stage="preview"][data-dz-free="1"] .dz-locked-zone,
[data-stage="preview"][data-dz-free="1"] .dz-unlock-panel { display: none; }

/* ---------- Premium paywall: gradient-blur teaser zone ---------- */
/* Real personalized content (remaining steps / what unlocking adds), never
   generic filler, gradually obscured toward the bottom via a masked
   backdrop-blur layer plus a fade-to-surface layer. Payment/value copy
   below this zone (.dz-unlock-panel) is a SEPARATE sibling and is never
   touched by either overlay, so it stays 100% readable. */
.dz-locked-zone { position: relative; }
.dz-locked-inner {
	position: relative;
	max-height: 220px;
	overflow: hidden;
	border-radius: 12px;
}
.dz-includes-list {
	margin: 0;
	padding: 0 0 0 1.1em;
	list-style: disc;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.7;
	user-select: none;
}
[dir="rtl"] .dz-includes-list { padding: 0 1.1em 0 0; }
.dz-locked-inner * { pointer-events: none; }
.dz-blur-overlay,
.dz-fade-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.dz-blur-overlay {
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.75) 62%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.75) 62%, #000 100%);
}
.dz-fade-overlay {
	background: linear-gradient(to bottom, transparent 45%, var(--surface) 96%);
}
@media (prefers-reduced-motion: reduce) {
	.dz-blur-overlay { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}

/* ---------- Value-explanation / unlock CTA copy — never blurred ---------- */
.dz-unlock-panel {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: rgba(201, 164, 92, 0.06);
}
.dz-unlock-line {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-2);
}
.dz-unlock-line:last-child { margin-bottom: 0; }
.dz-unlock-line strong { color: var(--ink); }
.dz-steps-list {
	margin: 0;
	padding: 0 0 0 1.2em;
	list-style: decimal;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.6;
}
[dir="rtl"] .dz-steps-list { padding: 0 1.2em 0 0; }

/* ---------- Language switcher (top-right of the header) ---------- */
.dz-lang {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px;
}
.dz-lang-link {
	display: inline-block;
	padding: 5px 11px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mute);
	text-decoration: none;
	border-radius: 999px;
	transition: background 120ms ease, color 120ms ease;
}
.dz-lang-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.dz-lang-link.is-active {
	color: #0a0e1a;
	background: linear-gradient(135deg, #C9A45C 0%, #A8843C 100%);
}

/* ---------- RTL adjustments (scoped — dir="rtl" on .dz handles inheritance) ---------- */
.dz-rtl .dz-content,
.dz-rtl .dz-card,
.dz-rtl .dz-decision-line,
.dz-rtl .dz-sub { text-align: right; }
.dz-rtl .dz-content-hero,
.dz-rtl .dz-content-clarify,
.dz-rtl .dz-headline { text-align: center; }
.dz-rtl .dz-search-input { text-align: right; }
.dz-rtl .dz-search-shell { flex-direction: row-reverse; }
/* RTL body uses the active locale's registered font via --dz-font (so Urdu's
 * Nastaliq, Arabic's Cairo, Persian's Vazir all work without CSS edits). */
.dz-rtl,
.dz-rtl input,
.dz-rtl button,
.dz-rtl textarea {
	font-family: var(--dz-font, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
}
.dz-rtl .dz-headline { letter-spacing: 0; }
/* Stage 3 buy bar: keep arrow direction natural in RTL (already handled in PHP). */

/* Action hint above the AI button — tells the visitor what will happen. */
.dz-action-hint {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mute-1, #d6d3d1);
	max-width: 540px;
	letter-spacing: -0.005em;
}

/* "Start a new decision" affordance near the bottom of the result page. */
.dz-start-over {
	margin: 22px 0 8px;
	text-align: center;
}
.dz-start-over-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mute-1, #d6d3d1);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 9999px;
	text-decoration: none;
	transition:
		border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
		color 220ms,
		background 220ms;
}
.dz-start-over-link:hover {
	color: var(--ink, #f5f4f1);
	border-color: rgba(255, 122, 26, 0.55);
	background: rgba(255, 122, 26, 0.06);
}

/* ---------- HOBA DEKA slim result: one decision, one action ---------- */
.dz-decision-line {
	margin: 8px 0 24px;
	font-size: clamp(17px, 2.4vw, 22px);
	font-weight: 600;
	letter-spacing: -0.014em;
	line-height: 1.4;
	color: var(--ink);
	max-width: 640px;
}
.dz-run-row-slim {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 28px;
}
.dz-run-row-slim .dz-run-btn { flex: 1 1 auto; min-width: 0; }
.dz-run-btn-primary {
	background: linear-gradient(135deg, #C9A45C 0%, #A8843C 100%);
	color: #0a0e1a !important;
	border: none;
	font-weight: 700;
	padding: 14px 22px;
	border-radius: 12px;
	box-shadow: 0 8px 28px -10px rgba(201, 164, 92, 0.55);
	white-space: nowrap;
}
.dz-run-btn-primary:hover {
	background: linear-gradient(135deg, #1de1ff 0%, #00b3d4 100%);
	transform: translateY(-1px);
}
.dz-run-btn-ghost {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink-2);
	padding: 14px 22px;
	border-radius: 12px;
}
.dz-run-btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }

.dz-details {
	margin: 4px 0 24px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0 16px;
}
.dz-details > summary {
	cursor: pointer;
	padding: 12px 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mute);
	letter-spacing: 0.04em;
	user-select: none;
	list-style: none;
}
.dz-details > summary::-webkit-details-marker { display: none; }
.dz-details > summary::before {
	content: "▸";
	display: inline-block;
	width: 1em;
	margin-inline-end: 4px;
	transition: transform 150ms ease;
	color: var(--mute);
}
.dz-details[open] > summary::before { transform: rotate(90deg); }
.dz-details[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 12px; }

.dz-exit-slim { margin-top: 24px; }
.dz-exit-slim .dz-exit-block { max-width: 320px; }

/* ---------- post-purchase: full prompt block ---------- */
.dz-prompt-block {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 20px;
	margin: 8px 0 24px;
	color: var(--ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-x: auto;
	max-height: 460px;
	overflow-y: auto;
}

/* ---------- error ---------- */
.dz-error {
	margin: 0 auto 8px;
	max-width: 540px;
	padding: 12px 16px;
	font-size: 13px;
	color: var(--err);
	background: var(--err-bg);
	border: 1px solid rgba(248, 113, 113, 0.3);
	border-radius: 10px;
	animation: dz-fade-in 200ms ease-out both;
}

/* ---------- result stage ---------- */
.dz[data-current="result"] .dz-stage {
	flex-direction: column;
}
.dz[data-current="result"] .dz-content {
	padding: 40px 24px 56px;
}

.dz-steps {
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: dz-step;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	overflow: hidden;
}
.dz-steps li {
	counter-increment: dz-step;
	position: relative;
	padding: 16px 18px 16px 52px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
	border-bottom: 1px solid var(--line);
}
.dz-steps li:last-child { border-bottom: none; }
.dz-steps li::before {
	content: counter(dz-step);
	position: absolute;
	inset-inline-start: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	background: rgba(201, 164, 92, 0.1);
	border: 1px solid rgba(201, 164, 92, 0.3);
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
}

/* ---------- run row (copy + execute) ---------- */
.dz-run-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.dz-run-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 14px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink-2);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease, transform 140ms ease, background 180ms ease;
	-webkit-tap-highlight-color: transparent;
	text-align: center;
}
.dz-run-btn:hover { border-color: var(--accent); color: var(--ink); }
.dz-run-btn:active { transform: scale(0.985); }
.dz-run-btn.is-copied { color: var(--accent); border-color: var(--accent); background: rgba(201, 164, 92, 0.08); }
.dz-run-row .dz-run-btn:first-child {
	grid-column: 1 / -1;
	background: var(--accent);
	color: #0a0807;
	border-color: var(--accent);
	font-weight: 600;
}
.dz-run-row .dz-run-btn:first-child:hover { background: var(--accent-2); border-color: var(--accent-2); }
.dz-run-row .dz-run-btn:first-child.is-copied { background: var(--accent); color: #0a0807; }

/* ---------- exit blocks (final 3 cards) ---------- */
.dz-exit {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dz-exit-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 200ms ease, background 200ms ease, transform 140ms ease;
	-webkit-tap-highlight-color: transparent;
}
.dz-exit-block:hover {
	border-color: var(--accent);
	background: var(--surface-2);
}
.dz-exit-block:active { transform: scale(0.99); }

.dz-exit-text { display: flex; flex-direction: column; gap: 4px; }
.dz-exit-label {
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.012em;
}
.dz-exit-hint {
	font-size: 13px;
	color: var(--mute);
	font-weight: 400;
}
.dz-exit-arrow {
	font-size: 20px;
	font-weight: 600;
	color: var(--accent);
	transition: transform 200ms ease;
}
.dz-exit-block:hover .dz-exit-arrow { transform: translateX(4px); }

/* ---------- motion ---------- */
@keyframes dz-stage-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes dz-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes dz-pulse {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1; }
}
@keyframes dz-ellipsis {
	0%   { width: 0; }
	100% { width: 14px; }
}
@keyframes dz-route-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dz-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* ---------- animated background: floating elegant shapes ----------
 * Pure-CSS port of @kokonutui/shape-landing-hero. Five elongated pill
 * shapes with colored gradient + soft glass border + inner radial
 * highlight. Each fades in from y=-150 with rotation easing into
 * place, then loops a gentle 12s Y-bob — same as the framer-motion
 * original. */

.dz-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

/* Soft indigo→rose ambient wash behind the shapes.
 * No filter:blur — the gradient is naturally soft and a 64px blur
 * creates a massive compositing layer for no visual benefit. */
.dz-bg-ambient {
	position: absolute;
	inset: 0;
	/* Single warm bloom behind the orb — the reference has no cool tints. */
	background:
		radial-gradient(60% 46% at 50% 34%, rgba(201, 164,  92, 0.14) 0%, rgba(201, 164, 92, 0.05) 42%, transparent 72%),
		radial-gradient(90% 70% at 50% 0%,  rgba(224, 188, 115, 0.05) 0%, transparent 60%);
}

.dz-bg-shapes {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Shape outer: handles intro slide-in (translateY + rotate + opacity).
 * Slow, generous easing — these shapes set the tone of the page so
 * they should feel calm, not snappy. */
.dz-shape {
	position: absolute;
	opacity: 0;
	will-change: transform, opacity;
	animation: dz-shape-in 3.2s cubic-bezier(0.23, 0.86, 0.39, 0.96) both;
}

/* Shape inner wrapper — was bobbing, now static. Shapes fade in
 * once during intro and then stay completely still. */
.dz-shape-bob {
	position: relative;
	width: var(--shape-w);
	height: var(--shape-h);
}

/* The visual pill: colored gradient → transparent, glass border,
 * soft drop shadow, plus an inner radial highlight via ::after.
 * NOTE: backdrop-filter is intentionally omitted on these moving
 * elements — re-blurring the page behind 5 animated pills every
 * frame causes major stutter. The colored gradient + border + inner
 * highlight already give the glassy look without the GPU cost. */
.dz-shape-pill {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--shape-color), transparent);
	border: 2px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.10);
	transform: translateZ(0);
}
.dz-shape-pill::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.20), transparent 70%);
}

/* ---- Shape positions / sizes / colors / delays (mirrors React props) ---- */
/* Tailwind hex refs: indigo-500 #6366f1, rose-500 #f43f5e,
 * violet-500 #8b5cf6, amber-500 #f59e0b, cyan-500 #06b6d4 */

.dz-shape-1 {
	--shape-w: 600px; --shape-h: 140px;
	--shape-color: rgba(201, 164, 92, 0.055);
	--rot-from: -3deg;  --rot-to: 12deg;
	left: -10%; top: 15%;
	animation-delay: 0.3s;
}
.dz-shape-2 {
	--shape-w: 500px; --shape-h: 120px;
	--shape-color: rgba(224, 188, 115, 0.045);
	--rot-from: -30deg; --rot-to: -15deg;
	right: -5%; top: 70%;
	animation-delay: 0.5s;
}
.dz-shape-3 {
	--shape-w: 300px; --shape-h: 80px;
	--shape-color: rgba(201, 164, 92, 0.040);
	--rot-from: -23deg; --rot-to: -8deg;
	left: 5%; bottom: 5%;
	animation-delay: 0.4s;
}
.dz-shape-4 {
	--shape-w: 200px; --shape-h: 60px;
	--shape-color: rgba(224, 188, 115, 0.050);
	--rot-from: 5deg;  --rot-to: 20deg;
	right: 15%; top: 10%;
	animation-delay: 0.6s;
}
.dz-shape-5 {
	--shape-w: 150px; --shape-h: 40px;
	--shape-color: rgba(201, 164, 92, 0.035);
	--rot-from: -40deg; --rot-to: -25deg;
	left: 20%; top: 5%;
	animation-delay: 0.7s;
}

/* Top-to-bottom vignette (matches original `bg-gradient-to-t from-[#080A16]
 * via-transparent to-[#080A16]/80` overlay) */
.dz-bg-vignette {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		#080A16 0%,
		transparent 50%,
		rgba(3, 3, 3, 0.8) 100%
	);
}

/* Badge pill (Kokonut UI hero style) — small rounded with rose dot */
.dz-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto;
	padding: 4px 12px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.6);
	opacity: 0;
	transform: translateY(30px);
	animation: dz-fade-up 1s 0.5s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}
.dz-hero-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(201, 164, 92, 0.85);
}

/* Two-line gradient headline — line 1 white→white/80 vertical,
 * line 2 indigo-300 → white/90 → rose-300 horizontal. */
.dz-headline-hero {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: clamp(40px, 9vw, 96px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 24px 0 32px;
	opacity: 0;
	transform: translateY(30px);
	animation: dz-fade-up 1s 0.7s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}
.dz-headline-hero .dz-h-line-1 {
	background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.dz-headline-hero .dz-h-line-2 {
	background: linear-gradient(to right, #C9A45C 0%, rgba(255, 255, 255, 0.9) 50%, #E0BC73 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Sub copy — text-white/40, font-light, tracking-wide */
.dz-sub-hero {
	max-width: 560px;
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 300;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin: 0 auto 8px;
	padding: 0 16px;
	opacity: 0;
	transform: translateY(30px);
	animation: dz-fade-up 1s 0.9s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

.dz-search {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 8px auto 0;
	opacity: 0;
	transform: translateY(30px);
	animation: dz-fade-up 1s 1.1s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

.dz-search-shell {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 20px;
	background: rgba(15, 15, 20, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 9999px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 8px 32px 0 rgba(0, 0, 0, 0.4);
	transition:
		border-color 360ms cubic-bezier(0.16, 1, 0.3, 1),
		background 360ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Input shell stays identical in all states — no border color change,
 * no glow, no lift on hover or focus. Pure neutral input field. */

.dz-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mute-2);
}

.dz-search-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	padding: 18px 4px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: var(--ink);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	caret-color: var(--ink);
}
.dz-search-input::placeholder {
	color: var(--mute-2);
	font-weight: 400;
	transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dz-search:focus-within .dz-search-input::placeholder { color: rgba(120, 113, 108, 0.55); }

/* Kill Chrome / Edge autofill yellow-orange background that overrides ours */
.dz-search-input:-webkit-autofill,
.dz-search-input:-webkit-autofill:hover,
.dz-search-input:-webkit-autofill:focus,
.dz-search-input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--ink) !important;
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	caret-color: var(--ink) !important;
	transition: background-color 600000s 0s, color 600000s 0s;
}

/* Brief instruction line under the hero — guides first-time visitors. */
.dz-hero-instruction {
	margin: 16px 0 24px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mute-1, #d6d3d1);
	letter-spacing: -0.005em;
	max-width: 540px;
	text-align: center;
}

/* Path / suggestion block — visible by default as a guide ("Or pick a path:")
 * On no-match, JS swaps the heading + reveals the rephrase link. */
/* No-match recovery notice. Replaces the removed .dz-suggest-chips block.
   Hidden until the classifier fails to route the input, so it costs no
   vertical space in the default state. */
.dz-nomatch {
	margin-block-start: 18px;
	text-align: center;
	animation: dz-nomatch-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dz-nomatch[hidden] { display: none; }

@keyframes dz-nomatch-in {
	from { opacity: 0; transform: translateY(5px); }
	to   { opacity: 1; transform: none; }
}

.dz-nomatch-text {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dz-mute, rgba(255, 255, 255, 0.6));
}

.dz-nomatch-retry {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--dz-line-2, rgba(255, 255, 255, 0.14));
	background: transparent;
	color: var(--dz-mute, rgba(255, 255, 255, 0.6));
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}
.dz-nomatch-retry:hover {
	color: var(--dz-ink, #f5f4f1);
	border-color: var(--dz-accent, #C9A45C);
}
.dz-nomatch-retry[hidden] { display: none; }

/* Progress indicator on the multi-step clarifier. One dot per question, fills
 * past + current. Tells the visitor "you are 2 of 3, almost done." */
.dz-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 16px 0 18px;
	animation: dz-progress-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dz-progress[hidden] { display: none; }
@keyframes dz-progress-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.dz-progress-dots {
	display: flex;
	gap: 8px;
	align-items: center;
}
.dz-progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.18);
	transition:
		background 280ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dz-progress-dot.is-complete {
	background: rgba(255, 122, 26, 0.55);
}
.dz-progress-dot.is-active {
	background: var(--accent-warm, #ff7a1a);
	transform: scale(1.35);
	box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.18);
}
.dz-progress-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--mute-2, #a8a29e);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dz-search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--mute);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	cursor: pointer;
	transition:
		background 320ms cubic-bezier(0.16, 1, 0.3, 1),
		color 320ms cubic-bezier(0.16, 1, 0.3, 1),
		border-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
	-webkit-tap-highlight-color: transparent;
}
.dz-search-submit svg {
	transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-search-submit:hover {
	color: var(--ink);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
}
.dz-search-submit:hover svg { transform: translateX(2px); }
.dz-search-submit:active { transform: scale(0.95); }

/* When the input is engaged (focused or has content), the submit lights up */
.dz-search:focus-within .dz-search-submit,
.dz-search-input:not(:placeholder-shown) ~ .dz-search-submit {
	color: #0b0d17;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
	border-color: transparent;
	box-shadow:
		0 10px 24px -8px var(--accent-glow-strong),
		0 0 24px -4px var(--accent-glow),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.dz-search:focus-within .dz-search-submit:hover,
.dz-search-input:not(:placeholder-shown) ~ .dz-search-submit:hover {
	color: #0b0d17;
	transform: translateY(-1px);
	box-shadow:
		0 14px 32px -8px var(--accent-glow-strong),
		0 0 32px -2px var(--accent-glow-strong),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.dz-search-submit.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* ---------- hero + bg motion keyframes ---------- */
@keyframes dz-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes dz-fade-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Shape intro — matches framer-motion: initial { opacity: 0, y: -150,
 * rotate: rotate - 15 } → animate { opacity: 1, y: 0, rotate: rotate }
 * with duration 2.4s easing [0.23, 0.86, 0.39, 0.96]. Opacity reaches
 * 1 at the 50% mark (mirrors opacity:{ duration: 1.2 } in the original). */
@keyframes dz-shape-in {
	0%   { opacity: 0; transform: translateY(-150px) rotate(var(--rot-from)); }
	50%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0)      rotate(var(--rot-to));   }
}

/* Infinite Y bob — gentle 10px drift, slow. */
@keyframes dz-shape-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(10px); }
}

/* ---------- responsive — mobile-first ---------- */
@media (max-width: 640px) {
	.dz-top { padding: 18px 20px; }
	.dz-content { padding: 32px 20px 24px; gap: 16px; }
	.dz-bar { padding: 12px 20px 24px; gap: 10px; }
	.dz-cta { min-width: 0; padding: 15px 22px; flex: 1; }
	.dz-options { grid-template-columns: 1fr; gap: 10px; }
	.dz-option { min-height: 0; padding: 18px 16px 18px 18px; }
	.dz-categories { grid-template-columns: 1fr 1fr; gap: 10px; }
	.dz-cat { min-height: 120px; padding: 18px 12px 16px; }
	.dz-cat-icon { font-size: 26px; }
	.dz-cat-name { font-size: 14px; }
	.dz-cat-sub { display: none; }
	.dz-bar-stage1 { flex-direction: column; padding: 12px 18px 16px; gap: 10px; }
	.dz-bar-stage1 .dz-cta { width: 100%; }
	.dz[data-current="ask"] .dz-content.dz-content-hero { padding: 44px 18px 56px; gap: 14px; }
	.dz-headline-hero { font-size: clamp(30px, 8.4vw, 40px); }
	.dz-sub-hero { font-size: 15px; }
	.dz-search { max-width: 100%; margin-top: 16px; }
	.dz-search-shell { padding: 6px 6px 6px 16px; gap: 8px; border-radius: 18px; }
	.dz-search-input { font-size: 16px; padding: 16px 2px; }
	.dz-search-submit { width: 40px; height: 40px; border-radius: 12px; }
	/* Shapes — match React's mobile-first positions (left:-10%, etc.) */
	.dz-shape-1 { left: -10%; top: 15%; --shape-w: 400px; --shape-h: 100px; }
	.dz-shape-2 { right: -5%; top: 70%; --shape-w: 360px; --shape-h: 90px; }
	.dz-shape-3 { left: 5%;   bottom: 5%; --shape-w: 220px; --shape-h: 60px; }
	.dz-shape-4 { right: 15%; top: 10%; --shape-w: 160px; --shape-h: 48px; }
	.dz-shape-5 { left: 20%;  top: 5%;  --shape-w: 120px; --shape-h: 36px; }
	.dz-run-row { grid-template-columns: 1fr; }
	.dz-run-row .dz-run-btn:first-child { grid-column: 1; }
	.dz-card { padding: 4px 18px; border-radius: 14px; }
	.dz-field-value-lead { font-size: 17px; }
	.dz-headline { font-size: 28px; }
	.dz-exit-block { padding: 18px 20px; }
	.dz-exit-label { font-size: 16px; }
}

/* ---------- a11y ---------- */
@media (prefers-reduced-motion: reduce) {
	.dz, .dz * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================================
 *  CARDS CATALOG  (Phase 1 — [dezision_cards] shortcode)
 *  Mobile-first grid. 1 col → 2 col @640px → 3 col @1024px.
 * ========================================================================= */
.dz-cards-catalog {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 32px 16px;
	max-width: 1200px;
	margin: 0 auto;
	color: var(--ink);
	background: var(--bg);
	font-family: var(--dz-font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif);
}
.dz-cards-catalog * { font-family: inherit; }
.dz-cards-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: -24px;
}
.dz-cards-header__brand {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--mute);
	text-transform: uppercase;
}
[dir="rtl"] .dz-cards-header__brand { letter-spacing: 0; }
[dir="rtl"] .dz-cards-tile__badge { align-self: flex-end; }
.dz-cards-empty {
	text-align: center;
	color: var(--mute);
	padding: 48px 16px;
}
.dz-cards-section__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 20px;
	color: var(--ink);
}
.dz-cards-section__icon {
	font-size: 28px;
	line-height: 1;
}
.dz-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px) {
	.dz-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
	.dz-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.dz-cards-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.dz-cards-tile:hover {
	transform: translateY(-2px);
	border-color: var(--accent-glow-strong);
	box-shadow: 0 8px 32px var(--accent-glow);
}
.dz-cards-tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.dz-cards-tile__media {
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(47,139,255,0.16), transparent 60%),
		linear-gradient(180deg, #060b18 0%, #03060f 100%);
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(79,150,255,0.25);
}
.dz-cards-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dz-cards-tile__placeholder {
	font-size: 48px;
	opacity: 0.5;
	line-height: 1;
}

/* Mini access-card thumbnail (one master template; only the title changes) */
.dz-acard-mini {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 16px 14px 18px;
	text-align: center;
}
.dz-acard-mini__brand {
	color: #eaf4ff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.26em;
	padding-left: 0.26em;
}
.dz-acard-mini__trail {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	margin: 2px 0;
}
.dz-acard-mini__trail svg {
	height: 100%;
	max-height: 150px;
	width: auto;
	filter: drop-shadow(0 0 6px rgba(47,139,255,0.55));
}
.dz-acard-mini__title {
	color: #eaf4ff;
	font-size: clamp(13px, 3.4vw, 17px);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.15;
	text-transform: uppercase;
	padding-left: 0.1em;
}
.dz-acard-mini__label {
	color: #6fb6ff;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.24em;
	padding-left: 0.24em;
	text-transform: uppercase;
}
.dz-cards-tile__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
[dir="rtl"] .dz-acard-mini__brand,
[dir="rtl"] .dz-acard-mini__title,
[dir="rtl"] .dz-acard-mini__label { letter-spacing: 0; padding-left: 0; }
.dz-cards-tile__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dz-cards-tile__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.dz-cards-tile__desc {
	margin: 0;
	font-size: 13px;
	color: var(--mute);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dz-cards-tile__badge {
	display: inline-flex;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 4px;
}
.dz-cards-tile__badge--prompt {
	background: var(--accent-glow-soft);
	color: var(--accent);
}
.dz-cards-tile__badge--access {
	background: rgba(108, 92, 231, 0.15);
	color: #a78bfa;
}
.dz-cards-tile__badge--qr_only {
	background: rgba(245, 158, 11, 0.15);
	color: #fbbf24;
}
[dir="rtl"] .dz-cards-tile__body {
	text-align: right;
}

/* =========================================================================
 *  CARD LANDING  (Phase 1 — /card/<slug>/)
 *  Single-card focus view linked to from the catalog.
 * ========================================================================= */
.dz-card-landing {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--ink);
	font-family: var(--dz-font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif);
}
.dz-card-landing * { font-family: inherit; }
.dz-card-landing__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.dz-card-landing__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mute);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.02em;
	padding: 8px 0;
	width: max-content;
}
.dz-card-landing__back:hover {
	color: var(--accent);
}
.dz-card-landing__hero {
	aspect-ratio: 16 / 10;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(201, 164, 92, 0.10), rgba(108, 92, 231, 0.10));
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dz-card-landing__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dz-card-landing__hero-icon {
	font-size: 96px;
	opacity: 0.6;
	line-height: 1;
}
.dz-card-landing__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 0 4px;
	max-width: 540px;
	margin: 0 auto;
}
.dz-card-landing__body .dz-card-landing__preview { max-width: 480px; }
.dz-card-landing__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}
@media (min-width: 640px) {
	.dz-card-landing__title { font-size: 34px; }
}
.dz-card-landing__preview {
	margin: 0;
	font-size: 16px;
	color: var(--mute);
	line-height: 1.55;
}
.dz-card-landing__clarifier {
	margin: 0;
	padding: 14px 16px;
	border-left: 3px solid var(--accent);
	background: var(--accent-glow-soft);
	border-radius: 0 12px 12px 0;
	font-size: 14px;
	color: var(--ink);
	font-style: italic;
}
[dir="rtl"] .dz-card-landing__clarifier {
	border-left: none;
	border-right: 3px solid var(--accent);
	border-radius: 12px 0 0 12px;
}
.dz-card-landing__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--accent);
	color: #03171c;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	border-radius: 12px;
	letter-spacing: 0.02em;
	margin-top: 8px;
	width: max-content;
	max-width: 100%;
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.dz-card-landing__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 32px var(--accent-glow);
	background: #4be7ff;
}
.dz-card-landing__cta:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* QR section on the card landing */
.dz-card-landing__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 24px 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line);
	border-radius: 16px;
	text-align: center;
}
.dz-card-landing__qr-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mute);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.dz-card-landing__qr-img {
	width: 200px;
	height: 200px;
	background: #fff;
	border-radius: 12px;
	padding: 8px;
	display: block;
}
.dz-card-landing__qr--large .dz-card-landing__qr-img {
	width: 320px;
	height: 320px;
}
.dz-card-landing__qr-help {
	margin: 0;
	font-size: 13px;
	color: var(--mute);
	line-height: 1.5;
	max-width: 360px;
}
.dz-card-landing__qr-save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--accent);
	text-decoration: none;
	margin-top: 4px;
	padding: 6px 12px;
	border: 1px solid var(--accent-glow);
	border-radius: 8px;
	transition: background 200ms ease, color 200ms ease;
}
.dz-card-landing__qr-save:hover {
	background: var(--accent-glow-soft);
}
.dz-card-landing__qr-save {
	cursor: pointer;
	font: inherit;
	white-space: nowrap;
}
.dz-card-landing__qr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 6px;
}
.dz-card-landing__qr-actions button.dz-card-landing__qr-save {
	background: transparent;
}

/* =========================================================================
 *  PHASE 2 — premium card treatment (NFT-style)
 *  Layered onto the existing tile/landing components without breaking Phase 1.
 * ========================================================================= */
.dz-cards-tile {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)),
		var(--surface);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.04),
		0 1px 2px rgba(0,0,0,0.4);
}
.dz-cards-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(201,164,92,0.0) 0%, rgba(201,164,92,0.0) 40%, rgba(201,164,92,0.35) 60%, rgba(108,92,231,0.45) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}
.dz-cards-tile:hover::before { opacity: 1; }
.dz-cards-tile__media {
	position: relative;
}
.dz-cards-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top, rgba(201,164,92,0.15), transparent 60%);
	pointer-events: none;
}

.dz-card-landing__hero {
	position: relative;
	background:
		radial-gradient(ellipse at top, rgba(201,164,92,0.18), transparent 70%),
		linear-gradient(135deg, rgba(201, 164, 92, 0.10), rgba(108, 92, 231, 0.10));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.06),
		0 12px 40px -16px rgba(201,164,92,0.35);
}
.dz-card-landing__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(201,164,92,0.5), rgba(108,92,231,0.5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

/* Holographic shimmer on the badge */
.dz-cards-tile__badge,
.dz-card-landing__body .dz-cards-tile__badge {
	position: relative;
	overflow: hidden;
}
.dz-cards-tile__badge::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -120%;
	width: 80%;
	height: 200%;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
	transform: skewX(-15deg);
	transition: left 700ms ease;
	pointer-events: none;
}
.dz-cards-tile:hover .dz-cards-tile__badge::after { left: 130%; }


/* ============================================================================
 *  ACCESS CARD — master template (DEKA req 1: one design, only the title changes)
 *  Reproduces the HOBA GALAXY "ACCESS CARD" artwork: hex logo, light trail,
 *  title, tagline, QR, and SCAN > DECIDE > EXECUTE strip.
 * ========================================================================= */
.dz-acard {
	--ac-blue: #2f8bff;
	--ac-blue-soft: #6fb6ff;
	--ac-ink: #eaf4ff;
	--ac-mute: #8fb4e0;
	width: 100%;
	max-width: 440px;
	margin: 8px auto 4px;
	border-radius: 26px;
	padding: 4px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(47,139,255,0.18), transparent 60%),
		linear-gradient(180deg, #060b18 0%, #03060f 100%);
	box-shadow:
		0 0 0 1px rgba(79,150,255,0.55),
		0 0 28px -4px rgba(47,139,255,0.55),
		0 24px 60px -24px rgba(0,0,0,0.9);
}
.dz-acard__inner {
	border-radius: 22px;
	border: 1px solid rgba(79,150,255,0.45);
	padding: 26px 22px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	background:
		radial-gradient(80% 50% at 50% 60%, rgba(47,139,255,0.10), transparent 70%);
}
.dz-acard__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.dz-acard__logo { line-height: 0; filter: drop-shadow(0 0 8px rgba(47,139,255,0.45)); }
.dz-acard__name {
	color: var(--ac-ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.42em;
	padding-left: 0.42em; /* optical centering for the trailing tracking */
}
.dz-acard__sub {
	color: var(--ac-blue-soft);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.34em;
	padding-left: 0.34em;
	text-transform: uppercase;
}
.dz-acard__trail {
	width: 100%;
	max-width: 230px;
	margin: -2px auto;
}
.dz-acard__trail svg { width: 100%; height: auto; display: block; }
.dz-acard__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	margin-top: -4px;
}
.dz-acard__title {
	margin: 0;
	color: var(--ac-ink);
	font-size: clamp(22px, 7.5vw, 40px);
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.1;
	text-transform: uppercase;
	padding-left: 0.2em;
}
.dz-acard__access {
	margin: 0;
	color: var(--ac-blue-soft);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.34em;
	padding-left: 0.34em;
	text-transform: uppercase;
}
.dz-acard__tagline {
	margin: 6px 0 0;
	color: var(--ac-ink);
	font-size: 14px;
	font-weight: 500;
}
.dz-acard__tagline .is-accent { color: var(--ac-blue-soft); }
.dz-acard__qr {
	margin-top: 6px;
	padding: 10px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 0 0 1px rgba(79,150,255,0.6), 0 0 20px -4px rgba(47,139,255,0.7);
}
.dz-acard__qr img {
	display: block;
	width: 132px;
	height: 132px;
	border-radius: 6px;
}
.dz-acard__flow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	padding-top: 16px;
	width: 100%;
	border-top: 1px solid rgba(79,150,255,0.18);
}
.dz-acard__flow-step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ac-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.dz-acard__flow-step svg { color: var(--ac-blue-soft); }
.dz-acard__flow-arrow {
	color: var(--ac-blue);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}
[dir="rtl"] .dz-acard__flow-arrow { transform: scaleX(-1); }
[dir="rtl"] .dz-acard__name,
[dir="rtl"] .dz-acard__sub,
[dir="rtl"] .dz-acard__access,
[dir="rtl"] .dz-acard__title { letter-spacing: 0; padding-left: 0; }


/* ============================================================================
 *  PHASE 3 — HOBA DEKA (ecosystem links, price chip, My Cards)
 * ============================================================================ */

/* Ecosystem gateway block on card landings (DEKA req 6) */
.dz-card-eco {
	margin: 28px auto 40px;
	padding: 20px 24px;
	max-width: 720px;
	text-align: center;
	border-top: 1px solid rgba(201, 164, 92, 0.15);
}
.dz-card-eco__title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink, #fff);
}
.dz-card-eco__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.dz-card-eco__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: #b9c1d2;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.02);
	transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.dz-card-eco__link:hover {
	color: var(--accent, #C9A45C);
	border-color: rgba(201, 164, 92, 0.4);
	background: rgba(201, 164, 92, 0.07);
	transform: translateY(-1px);
}

/* Price chip on paid catalog tiles (DEKA req 1: $9) */
.dz-cards-tile__price {
	display: inline-block;
	margin-top: 8px;
	margin-inline-start: 6px;
	padding: 3px 11px;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent, #C9A45C);
	background: rgba(201, 164, 92, 0.1);
	border: 1px solid rgba(201, 164, 92, 0.3);
	border-radius: 999px;
}

/* My Cards tab in WooCommerce My Account (DEKA req 5) */
.dz-mycards { display: grid; gap: 16px; }
.dz-mycards__item {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px;
	background: #11141f;
	border: 1px solid #1f2435;
	border-radius: 14px;
}
.dz-mycards__img {
	width: 96px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
}
.dz-mycards__title { margin: 0 0 2px; font-size: 17px; color: #fff; }
.dz-mycards__date { margin: 0 0 8px; font-size: 12px; color: #8b93a7; }
.dz-mycards__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dz-mycards__btn {
	font-size: 13px !important;
	padding: 6px 14px !important;
	border-radius: 8px !important;
}
.dz-mycards__btn--primary {
	background: #C9A45C !important;
	color: #0b0d17 !important;
	font-weight: 700 !important;
}
.dz-mycards-empty { font-size: 14px; }
@media (max-width: 560px) {
	.dz-mycards__item { flex-direction: column; align-items: flex-start; }
}


/* ============================================================================
 *  PHASE 3 — HOBA GALAXY HOME ([dezision_home])
 * ============================================================================ */

.dz-home {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 24px 64px;
	color: var(--ink, #fff);
}

/* Hero */
.dz-home-hero {
	position: relative;
	text-align: center;
	padding: 72px 16px 56px;
	overflow: hidden;
}
.dz-home-hero__glow {
	position: absolute;
	inset: -40% -20% auto;
	height: 140%;
	background:
		radial-gradient(600px 320px at 50% 20%, rgba(201, 164, 92, 0.18), transparent 70%),
		radial-gradient(420px 240px at 80% 60%, rgba(255, 215, 0, 0.06), transparent 70%);
	pointer-events: none;
}
.dz-home-hero__kicker {
	position: relative;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(201, 164, 92, 0.85);
}
.dz-home-hero__title {
	position: relative;
	margin: 0 auto 16px;
	max-width: 760px;
	font-size: clamp(32px, 6vw, 56px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.015em;
	background: linear-gradient(150deg, #ffffff 45%, #9ee9ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.dz-home-hero__sub {
	position: relative;
	margin: 0 auto 28px;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--mute, #ccc);
}
.dz-home-hero__ctas {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* Buttons */
.dz-home-btn {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	color: #eaf6ff;
	text-decoration: none;
	border: 1px solid rgba(201, 164, 92, 0.4);
	border-radius: 12px;
	background: rgba(201, 164, 92, 0.06);
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}
.dz-home-btn:hover {
	background: rgba(201, 164, 92, 0.12);
	border-color: rgba(201, 164, 92, 0.7);
	color: #ffffff;
	transform: translateY(-2px);
}
.dz-home-btn--primary {
	color: #0b0d17;
	background: linear-gradient(135deg, #C9A45C, #4be7ff);
	border-color: transparent;
	box-shadow: 0 8px 28px rgba(201, 164, 92, 0.35);
}
.dz-home-btn--primary:hover {
	background: linear-gradient(135deg, #21dcff, #6cecff);
	box-shadow: 0 12px 36px rgba(201, 164, 92, 0.45);
}

/* Sections */
.dz-home-section { margin: 48px 0; }
.dz-home-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}
.dz-home-section__title {
	margin: 0;
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 800;
	color: var(--ink, #fff);
}
.dz-home-section__title--center { text-align: center; margin-bottom: 28px; }
.dz-home-section__more {
	font-size: 14px;
	font-weight: 600;
	color: var(--accent, #C9A45C);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 180ms ease, transform 180ms ease;
}
.dz-home-section__more:hover {
	opacity: 0.85;
	transform: translateX(2px);
}
[dir="rtl"] .dz-home-section__more:hover { transform: translateX(-2px); }

/* How it works — 5 steps */
.dz-home-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	counter-reset: dz-step;
}
.dz-home-step {
	position: relative;
	padding: 22px 16px 18px;
	background: #0f121d;
	border: 1px solid #1f2435;
	border-radius: 14px;
	text-align: center;
	transition: border-color 200ms ease, transform 200ms ease;
}
.dz-home-step:hover {
	border-color: rgba(201, 164, 92, 0.5);
	transform: translateY(-3px);
}
.dz-home-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 800;
	color: #0b0d17;
	background: linear-gradient(135deg, #C9A45C, #4be7ff);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(201, 164, 92, 0.4);
}
.dz-home-step__title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--ink, #fff); }
.dz-home-step__desc { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--mute, #ccc); }

/* Value props */
.dz-home-props {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.dz-home-prop {
	padding: 22px 18px;
	background: linear-gradient(160deg, #10131f 0%, #0c0f18 100%);
	border: 1px solid #1f2435;
	border-radius: 14px;
	transition: border-color 200ms ease;
}
.dz-home-prop:hover { border-color: rgba(201, 164, 92, 0.45); }
.dz-home-prop__title { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--accent, #C9A45C); }
.dz-home-prop__desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mute, #ccc); }

/* Final CTA band */
.dz-home-final {
	margin: 56px 0 0;
	padding: 48px 24px;
	text-align: center;
	background:
		radial-gradient(480px 200px at 50% 0%, rgba(201, 164, 92, 0.14), transparent 70%),
		#0f121d;
	border: 1px solid #1f2435;
	border-radius: 20px;
}
.dz-home-final__title { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); font-weight: 900; color: var(--ink, #fff); }
.dz-home-final__sub { margin: 0 0 24px; font-size: 15px; color: var(--mute, #ccc); }

/* Responsive */
@media (max-width: 960px) {
	.dz-home-steps { grid-template-columns: repeat(2, 1fr); }
	.dz-home-props { grid-template-columns: repeat(2, 1fr); }
	.dz-home-step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.dz-home-hero { padding: 48px 8px 40px; }
	.dz-home-steps { grid-template-columns: 1fr; }
	.dz-home-props { grid-template-columns: 1fr; }
	.dz-home-section { margin: 36px 0; }
}


/* ============================================================================
 *  THEME ISOLATION — protect DEZISION components from theme/global CSS
 *  (Astra adds underline to all .ast-single-post .entry-content links; the
 *  site custom CSS forces underlines + colors in My Account content; Astra
 *  containers can paint white boxes. Everything below neutralizes that.)
 * ============================================================================ */

/* 1. No theme underlines or link-color leaks inside any dz component */
.entry-content .dz-home a,
.entry-content .dz-cards-catalog a,
.ast-single-post .entry-content .dz-home a,
.ast-single-post .entry-content .dz-cards-catalog a,
.dz-home a, .dz-home a:hover, .dz-home a:focus,
.dz-cards-catalog a, .dz-cards-catalog a:hover, .dz-cards-catalog a:focus,
.dz-card-landing a, .dz-card-landing a:hover, .dz-card-landing a:focus,
.dz-card-eco a, .dz-card-eco a:hover, .dz-card-eco a:focus,
.woocommerce-account .woocommerce-MyAccount-content .dz-mycards a,
.woocommerce-account .woocommerce-MyAccount-content .dz-mycards a:hover,
.woocommerce-account .woocommerce-MyAccount-content .dz-mycards-empty a {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* 2. Headings inside dz components keep our colors, not the theme's */
.dz-home h1, .dz-home h2, .dz-home h3,
.dz-cards-catalog h2, .dz-cards-catalog h3,
.dz-card-landing h1, .dz-card-landing h2 {
	color: var(--ink, #fff);
	font-family: inherit;
}
.dz-home-prop__title { color: var(--accent, #C9A45C) !important; }

/* 3. No white/light theme boxes behind the dark pages */
body.hoba-global-shell .site-content,
body.hoba-global-shell .ast-container,
body.hoba-global-shell .entry-content,
body.hoba-global-shell article.page,
body.hoba-global-shell .ast-article-single,
body.hoba-global-shell .ast-article-inner {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* 4. Kill theme entry-spacing that pads our full-bleed sections oddly */
body.hoba-global-shell .entry-content > .dz-home,
body.hoba-global-shell .entry-content > .dz-cards-catalog {
	margin-top: 0;
}
/* Scoped to the two dz-rendered pages only - Woo shop/account keep theme width */
body.page-id-885 .site-content .ast-container,
body.page-id-881 .site-content .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }

/* 5. Body text inside dz components: consistent muted gray, no theme color */
.dz-home p, .dz-cards-catalog p { color: var(--mute, #b9c1d2); }


/* ============================================================================
 *  REFINEMENT LAYER (v1.19) — matches the decision-page look across all pages
 *  Calm: shared ambient background (fades in once, then still), gentle one-time
 *  scroll reveals, and quiet hovers. No perpetual motion. Gated behind
 *  `html.dz-js` and prefers-reduced-motion.
 * ============================================================================ */

/* ---- Shared ambient background, full-bleed behind every page ----------- */
.dz-bg--page {
	position: fixed;
	contain: layout paint;
}

/* ---- Gentle, one-time scroll reveals (only when JS is present) ---------- */
html.dz-js [data-dz-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--dz-i, 0) * 60ms);
	will-change: opacity, transform;
}
html.dz-js [data-dz-reveal].dz-in { opacity: 1; transform: none; }
/* Safety net: engine never loaded → reveal everything. */
html.dz-no-anim [data-dz-reveal] { opacity: 1 !important; transform: none !important; }

/* ---- Access-card light trail: draws itself once, then rests ------------- */
@keyframes dz-trail-draw { to { stroke-dashoffset: 0; } }
.dz-acard__trail path.dz-trail-armed,
.dz-acard-mini__trail path.dz-trail-armed { stroke-dashoffset: var(--dz-len, 600); }
.dz-acard__trail path.dz-trail-go { animation: dz-trail-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.dz-acard-mini__trail path.dz-trail-go { animation: dz-trail-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

/* ---- Hero stats band — quiet surface cards (no glow) -------------------- */
.dz-home-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 36px auto 0;
	max-width: 640px;
}
.dz-home-stat {
	flex: 1 1 150px;
	max-width: 200px;
	padding: 18px 16px;
	border-radius: 14px;
	background: #0f121d;
	border: 1px solid #1f2435;
	text-align: center;
	transition: border-color 220ms ease, transform 220ms ease;
}
.dz-home-stat:hover { border-color: rgba(201, 164, 92, 0.4); transform: translateY(-2px); }
.dz-home-stat__num {
	display: block;
	font-size: clamp(24px, 4.5vw, 34px);
	font-weight: 800;
	line-height: 1;
	color: var(--accent, #C9A45C);
}
.dz-home-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--mute, #b9c1d2);
}

/* ---- Soft static glow behind the final CTA band ------------------------- */
.dz-home-final { position: relative; overflow: hidden; }
.dz-home-final__glow {
	position: absolute;
	inset: -40% -10% auto;
	height: 150%;
	background: radial-gradient(420px 200px at 50% 0%, rgba(201, 164, 92, 0.12), transparent 70%);
	pointer-events: none;
}

/* ---- Quiet hovers ------------------------------------------------------- */
.dz-card-eco__link { transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.dz-card-eco__link:hover { transform: translateY(-1px); }
.dz-mycards__item { transition: transform 220ms ease, border-color 200ms ease; }
.dz-mycards__item:hover { transform: translateY(-2px); border-color: rgba(201, 164, 92, 0.35); }

/* ---- Respect reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.dz-js [data-dz-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.dz-acard__trail path,
	.dz-acard-mini__trail path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ============================================================
   IN-CARD EXECUTION CONTENT  (HOBA DEKA "what's inside")
   Rendered on the card landing inside .dz-card-landing__body.
   ============================================================ */
.dz-card-content {
	width: 100%;
	max-width: 560px;
	margin: 26px auto 4px;
	padding: 22px 22px 24px;
	text-align: start;
	border-radius: 20px;
	border: 1px solid rgba(79, 150, 255, 0.22);
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(47, 139, 255, 0.10), transparent 60%),
		linear-gradient(180deg, rgba(10, 18, 36, 0.55), rgba(4, 8, 18, 0.6));
	box-shadow: 0 16px 44px -22px rgba(0, 0, 0, 0.9);
}
.dz-card-content__h {
	margin: 0 0 16px;
	font-size: clamp(17px, 4.4vw, 21px);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #eaf4ff;
	text-shadow: 0 0 16px rgba(52, 150, 255, 0.4);
}
.dz-cc-block { margin: 0 0 18px; }
.dz-cc-block:last-child { margin-bottom: 0; }
.dz-cc-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6fb6ff;
}
.dz-cc-p { margin: 0 0 8px; color: #c8d6ec; font-size: 14px; line-height: 1.7; }
.dz-cc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dz-cc-list li {
	position: relative;
	padding-inline-start: 28px;
	color: #e7eefb;
	font-size: 14px;
	line-height: 1.55;
}
.dz-cc-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1.5px solid rgba(111, 182, 255, 0.6);
	background:
		linear-gradient(135deg, rgba(52, 230, 255, 0.25), rgba(47, 139, 255, 0.25));
}
.dz-cc-list li::after {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	top: 5px;
	width: 5px;
	height: 9px;
	border: solid #34e6ff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* locked teaser */
.dz-card-content.is-locked .dz-card-content__outline {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dz-card-content.is-locked .dz-card-content__outline li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #cdd9ee;
	font-size: 15px;
	font-weight: 600;
}
.dz-cc-lock { filter: drop-shadow(0 0 6px rgba(52, 180, 255, 0.6)); }
.dz-card-content__note {
	margin: 4px 0 0;
	font-size: 13px;
	color: #8fb4e0;
	letter-spacing: 0.02em;
}

/* ============================================================
   HOME — PREMIUM UPGRADE  (overrides the base .dz-home rules above)
   Richer accent system, animated hero, journey steps, prop icons.
   ============================================================ */
.dz-home {
	--h-cyan: #34e6ff;
	--h-blue: #2f8bff;
	--h-violet: #7a5cff;
	--h-grad: linear-gradient(110deg, var(--h-cyan), var(--h-blue) 55%, var(--h-violet));
	max-width: 1180px;
	padding: 16px 22px 72px;
}

/* ---- Hero ---- */
.dz-home-hero { padding: clamp(64px, 11vw, 110px) 16px clamp(48px, 7vw, 72px); }
/* Hero background wash removed — let the clean dark theme show through. */
.dz-home-hero::before,
.dz-home-hero::after { content: none !important; display: none !important; }
@keyframes dz-aurora {
	0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
	100% { transform: translate3d(3%, 2%, 0) scale(1.12); }
}
.dz-home-hero > * { position: relative; z-index: 1; }
.dz-home-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #8fb6d6;
}
.dz-home-hero__kicker::before {
	content: "";
	width: 30px; height: 2px;
	border-radius: 2px;
	background: var(--accent, #C9A45C);
	box-shadow: none;
	animation: none;
}
@keyframes dz-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.dz-home-hero__title {
	max-width: 880px;
	font-size: clamp(36px, 7vw, 68px);
	font-weight: 900;
	letter-spacing: -0.025em;
	background: linear-gradient(180deg, #ffffff 0%, #d4ecff 58%, #8fc4ff 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 4px 30px rgba(52, 150, 255, 0.45));
}
.dz-home-hero__sub { max-width: 600px; font-size: clamp(15px, 2.2vw, 18px); }

/* ---- Buttons: shine sweep + arrow ---- */
.dz-home-btn {
	position: relative;
	overflow: hidden;
	padding: 15px 30px;
	border-radius: 14px;
	font-weight: 700;
}
.dz-home-btn--primary {
	color: #06121f;
	background: linear-gradient(135deg, #C9A45C, #4be7ff);
	border-color: transparent;
	box-shadow: 0 12px 32px -10px rgba(201, 164, 92, 0.55);
}
.dz-home-btn--primary:hover {
	background: linear-gradient(135deg, #1ad9ff, #6cecff);
	box-shadow: 0 16px 38px -10px rgba(201, 164, 92, 0.7);
}
.dz-home-btn--primary::before {       /* shine sweep */
	content: "";
	position: absolute; top: 0; left: -70%;
	width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
}
.dz-home-btn--primary:hover::before { left: 130%; }
.dz-home-btn--primary::after {
	content: "→";
	margin-inline-start: 9px;
	transition: transform 0.25s ease;
}
.dz-home-btn--primary:hover::after { transform: translateX(3px); }
[dir="rtl"] .dz-home-btn--primary::after { content: "←"; }
[dir="rtl"] .dz-home-btn--primary:hover::after { transform: translateX(-3px); }

/* ---- Stats strip ---- */
.dz-home-stats {
	margin-top: 44px;
	gap: 0;
	border: 1px solid rgba(120, 190, 255, 0.16);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(16, 24, 44, 0.5), rgba(6, 10, 22, 0.5));
	overflow: hidden;
}
.dz-home-stat {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	border-inline-end: 1px solid rgba(120, 190, 255, 0.12) !important;
	padding: 22px 18px !important;
}
.dz-home-stat:last-child { border-inline-end: 0 !important; }
.dz-home-stat:hover { transform: none !important; background: rgba(52, 230, 255, 0.04) !important; }
.dz-home-stat__num {
	background: var(--h-grad);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 16px rgba(52, 180, 255, 0.4));
}

/* ---- Section headers ---- */
.dz-home-section__title { font-weight: 900; letter-spacing: -0.02em; }
.dz-home-section__title--center { position: relative; padding-top: 16px; }
.dz-home-section__title--center::before {
	content: "";
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 56px; height: 4px; border-radius: 4px;
	background: var(--h-grad);
	box-shadow: 0 0 16px rgba(52, 180, 255, 0.6);
}

/* ---- How it works: journey cards ---- */
.dz-home-step {
	padding: 26px 18px 22px;
	background: linear-gradient(168deg, rgba(16, 24, 44, 0.6), rgba(6, 10, 22, 0.55));
	border: 1px solid rgba(120, 190, 255, 0.14);
	border-radius: 18px;
}
.dz-home-step:hover {
	border-color: rgba(52, 230, 255, 0.55);
	transform: translateY(-6px);
	box-shadow: 0 22px 50px -24px rgba(52, 150, 255, 0.7);
}
.dz-home-step__num {
	width: 46px; height: 46px;
	margin-bottom: 14px;
	font-size: 18px;
	background: var(--h-grad);
	box-shadow: 0 6px 18px rgba(52, 150, 255, 0.5), 0 0 0 6px rgba(52, 230, 255, 0.08);
}
.dz-home-step__title { font-size: 15.5px; }

/* ---- Value props: icon + gradient top accent ---- */
.dz-home-prop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 26px 20px 22px;
	background: linear-gradient(168deg, rgba(16, 24, 44, 0.6), rgba(6, 10, 22, 0.55));
	border: 1px solid rgba(120, 190, 255, 0.14);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.dz-home-prop::before {              /* top accent line */
	content: "";
	position: absolute; top: 0; inset-inline: 0; height: 3px;
	background: var(--h-grad);
	opacity: 0.5;
	transition: opacity 220ms ease;
}
.dz-home-prop::after {               /* icon chip — pulled to the top via flex order */
	order: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	margin-bottom: 14px;
	border-radius: 12px;
	font-size: 20px;
	line-height: 1;
	background: rgba(52, 230, 255, 0.10);
	border: 1px solid rgba(120, 190, 255, 0.25);
}
.dz-home-prop:nth-child(1)::after { content: "⚡"; }   /* ⚡ instant */
.dz-home-prop:nth-child(2)::after { content: "🔓"; }  /* 🔓 permanent access */
.dz-home-prop:nth-child(3)::after { content: "📲"; }  /* 📲 QR + PDF */
.dz-home-prop:nth-child(4)::after { content: "🚪"; }  /* 🚪 gateway */
.dz-home-prop:hover {
	border-color: rgba(52, 230, 255, 0.5);
	transform: translateY(-5px);
	box-shadow: 0 22px 50px -26px rgba(52, 150, 255, 0.65);
}
.dz-home-prop:hover::before { opacity: 1; }
.dz-home-prop__title { font-size: 16px; }

/* ---- Final CTA: animated gradient ring ---- */
.dz-home-final {
	position: relative;
	margin-top: 64px;
	padding: clamp(40px, 6vw, 60px) 24px;
	background:
		radial-gradient(540px 240px at 50% 0%, rgba(52, 180, 255, 0.18), transparent 70%),
		linear-gradient(180deg, rgba(16, 24, 44, 0.6), rgba(6, 10, 22, 0.6));
	border: 1px solid transparent;
	border-radius: 24px;
	overflow: hidden;
}
.dz-home-final::before {
	content: "";
	position: absolute; inset: 0; z-index: 0; border-radius: 24px; padding: 1.5px;
	background: var(--h-grad);
	background-size: 200% 200%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0.7;
	animation: dz-aurora 9s ease infinite alternate;
}
.dz-home-final > * { position: relative; z-index: 1; }
.dz-home-final__title { font-weight: 900; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
	.dz-home-hero::before, .dz-home-final::before, .dz-home-hero__kicker::before { animation: none !important; }
}
@media (max-width: 600px) {
	.dz-home-stats { flex-direction: row; }
	.dz-home-stat { padding: 16px 8px !important; }
}

/* ============================================================================
   HERO — editorial (dark, cleaner)
   Left-aligned, large-type, flat dark. No glows or color washes — a single
   quiet cyan accent on the divider. Kicker → oversized headline → thin rule →
   sub → two restrained CTAs → quiet stats row. Calm, professional, motion-safe.
   ============================================================================ */
.dz-hero-saas {
	position: relative;
	display: block;
	text-align: start;
	padding: clamp(72px, 11vw, 132px) 4px clamp(44px, 6vw, 68px);
}
.dz-hero-saas .dz-hero-copy {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1040px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ---- Kicker: label + trailing hairline ---- */
.dz-hero-ed__kicker {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 520px;
	margin: 0 0 26px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #8fa0bd;
}
.dz-hero-ed__kicker > span { flex: none; }
.dz-hero-ed__kicker::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent);
}
[dir="rtl"] .dz-hero-ed__kicker::after {
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.18), transparent);
}

/* ---- Headline: oversized, near-white, left-aligned ---- */
.dz-hero-ed__title {
	max-width: 14ch;
	margin: 0 0 22px;
	font-size: clamp(40px, 7.2vw, 82px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: #f5f8ff;
	background: none;
	-webkit-text-fill-color: currentColor;
	filter: none;
}

/* ---- Divider rule with the one accent ---- */
.dz-hero-ed__rule {
	display: block;
	width: 240px;
	max-width: 62%;
	height: 2px;
	margin: 0 0 26px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		var(--h-cyan, #34e6ff) 0,
		var(--h-cyan, #34e6ff) 46px,
		rgba(255, 255, 255, 0.16) 46px,
		transparent 100%);
}
[dir="rtl"] .dz-hero-ed__rule {
	background: linear-gradient(270deg,
		var(--h-cyan, #34e6ff) 0,
		var(--h-cyan, #34e6ff) 46px,
		rgba(255, 255, 255, 0.16) 46px,
		transparent 100%);
}

/* ---- Sub ---- */
.dz-hero-ed__sub {
	max-width: 54ch;
	margin: 0 0 34px;
	font-size: clamp(15px, 1.9vw, 19px);
	line-height: 1.7;
	color: #9aa8c2;
}

/* ---- CTAs: one restrained solid + one quiet link ---- */
.dz-hero-ed__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	justify-content: flex-start;
}
.dz-hero-ed__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 600;
	color: #cdd8ec;
	text-decoration: none;
	transition: color .2s ease;
}
.dz-hero-ed__cta:hover { color: #ffffff; }
.dz-hero-ed__cta--primary {
	padding: 13px 26px;
	border-radius: 10px;
	color: #f6f9ff;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dz-hero-ed__cta--primary:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.34);
	transform: translateY(-1px);
}
.dz-hero-ed__cta:not(.dz-hero-ed__cta--primary) {
	position: relative;
	padding-bottom: 3px;
}
.dz-hero-ed__cta:not(.dz-hero-ed__cta--primary)::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}
.dz-hero-ed__cta:not(.dz-hero-ed__cta--primary):hover::after { transform: scaleX(1); }
[dir="rtl"] .dz-hero-ed__cta:not(.dz-hero-ed__cta--primary)::after { transform-origin: right center; }
.dz-hero-ed__arrow { font-size: 14px; transition: transform .2s ease; }
.dz-hero-ed__cta--primary:hover .dz-hero-ed__arrow { transform: translateX(3px); }
[dir="rtl"] .dz-hero-ed__arrow { transform: scaleX(-1); }
[dir="rtl"] .dz-hero-ed__cta--primary:hover .dz-hero-ed__arrow { transform: scaleX(-1) translateX(3px); }

/* ---- Stats: quiet inline row (flatten the band) ---- */
.dz-hero-ed__stats {
	justify-content: flex-start !important;
	flex-wrap: wrap;
	gap: 14px 40px !important;
	margin: 48px 0 0 !important;
	max-width: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	overflow: visible !important;
}
.dz-hero-ed__stats .dz-home-stat {
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-align: start;
}
.dz-hero-ed__stats .dz-home-stat:hover { background: none !important; }
.dz-hero-ed__stats .dz-home-stat__num {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: #eef4ff;
	background: none;
	-webkit-text-fill-color: currentColor;
	filter: none;
}
.dz-hero-ed__stats .dz-home-stat__label {
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: #82909f;
}

@media (max-width: 600px) {
	.dz-hero-ed__stats { gap: 14px 28px !important; }
	.dz-hero-ed__stats .dz-home-stat__num { font-size: 26px; }
}

/* ============================================================================
   HOMEPAGE — BOLD EDITORIAL SYSTEM
   A whole-page typographic redesign: oversized headings, big index numerals,
   generous rhythm, hairline dividers, flat dark surfaces, a single cyan accent.
   Scoped to .dz-home--ed so the shared catalog/card styles stay untouched.
   ============================================================================ */
.dz-home--ed { --ed-ink: #f3f7ff; --ed-mute: #97a6c2; --ed-faint: #6c7a93; --ed-line: rgba(255,255,255,0.1); }
.dz-home--ed .dz-home-section,
.dz-home--ed .dz-ed-sec { margin: clamp(72px, 11vw, 132px) 0 0; }

/* ---- Section header: index + huge title + optional link ---- */
.dz-ed-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	column-gap: clamp(14px, 2.4vw, 28px);
	row-gap: 6px;
	padding-bottom: 22px;
	margin-bottom: clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--ed-line);
}
.dz-ed-head__idx {
	font-size: clamp(13px, 1.6vw, 16px);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--h-cyan, #34e6ff);
	font-variant-numeric: tabular-nums;
}
.dz-ed-head__title {
	margin: 0;
	font-size: clamp(30px, 5.4vw, 60px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--ed-ink);
}
.dz-ed-head__link {
	align-self: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ed-mute);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.dz-ed-head__link:hover { color: #ffffff; }
@media (max-width: 640px) {
	.dz-ed-head { grid-template-columns: auto 1fr; }
	.dz-ed-head__link { grid-column: 1 / -1; align-self: start; }
}

/* ---- Featured tiles: flatten to match the editorial surface ---- */
.dz-home--ed .dz-cards-tile {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--ed-line);
	border-radius: 16px;
	transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.dz-home--ed .dz-cards-tile::before { display: none; }
.dz-home--ed .dz-cards-tile:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-4px);
	box-shadow: none;
}
.dz-home--ed .dz-cards-tile__title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

/* ---- How it works: big numbered editorial rows ---- */
.dz-ed-steps {
	list-style: none;
	margin: 0; padding: 0;
	counter-reset: none;
}
.dz-ed-step {
	display: grid;
	grid-template-columns: minmax(96px, 0.18fr) 1fr;
	align-items: start;
	gap: clamp(16px, 4vw, 56px);
	padding: clamp(24px, 3.4vw, 40px) 0;
	border-top: 1px solid var(--ed-line);
}
.dz-ed-step:last-child { border-bottom: 1px solid var(--ed-line); }
.dz-ed-step__n {
	font-size: clamp(40px, 7vw, 88px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
	font-variant-numeric: tabular-nums;
	transition: -webkit-text-stroke-color .3s ease, color .3s ease;
}
.dz-ed-step:hover .dz-ed-step__n {
	-webkit-text-stroke-color: var(--h-cyan, #34e6ff);
	color: rgba(52, 230, 255, 0.06);
}
.dz-ed-step__title {
	margin: 0 0 8px;
	font-size: clamp(20px, 2.8vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ed-ink);
}
.dz-ed-step__desc {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.65;
	color: var(--ed-mute);
}
@media (max-width: 560px) {
	.dz-ed-step { grid-template-columns: 1fr; gap: 10px; }
	.dz-ed-step__n { font-size: 44px; }
}

/* ---- Value props: big statement grid ---- */
.dz-ed-props {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--ed-line);
	border: 1px solid var(--ed-line);
	border-radius: 18px;
	overflow: hidden;
}
@media (max-width: 720px) { .dz-ed-props { grid-template-columns: 1fr; } }
.dz-ed-prop {
	position: relative;
	padding: clamp(26px, 3.4vw, 44px);
	background: #0a0f1d;
	transition: background .25s ease;
}
.dz-ed-prop:hover { background: #0d1426; }
.dz-ed-prop__mark {
	display: block;
	margin-bottom: 16px;
	font-size: 22px;
	font-weight: 700;
	color: var(--h-cyan, #34e6ff);
}
[dir="rtl"] .dz-ed-prop__mark { transform: scaleX(-1); }
.dz-ed-prop__title {
	margin: 0 0 10px;
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ed-ink);
}
.dz-ed-prop__desc {
	margin: 0;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.6;
	color: var(--ed-mute);
}

/* ---- Final CTA: oversized statement ---- */
.dz-ed-final {
	margin: clamp(88px, 13vw, 160px) 0 clamp(8px, 2vw, 24px);
	padding: clamp(40px, 6vw, 72px) 0;
	border-top: 1px solid var(--ed-line);
	text-align: start;
}
.dz-ed-final__title {
	margin: 0 0 18px;
	max-width: 18ch;
	font-size: clamp(34px, 6.6vw, 76px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--ed-ink);
}
.dz-ed-final__sub {
	margin: 0 0 32px;
	max-width: 52ch;
	font-size: clamp(15px, 2vw, 19px);
	line-height: 1.65;
	color: var(--ed-mute);
}

/* ============================================================================
   HOMEPAGE — RELOADLY-STYLE (light, bright, rounded, friendly fintech)
   A from-scratch redesign: white canvas, vibrant green primary with coral /
   violet / sky / yellow accents, big rounded pills & cards, soft shadows,
   playful blob shapes. Scoped to .dz-home--rl so nothing else is affected.
   ============================================================================ */
.dz-home--rl {
	/* Unified brand palette — cyan/blue across the whole theme (matches v1, navbar, footer, cards) */
	--rl-green: #C9A45C;  --rl-green-d: #1ec8ef;  --rl-mint: rgba(201, 164, 92, 0.13);
	--rl-cyan: #34dce0;   --rl-cyan2: #3aa8ff;
	--rl-ink: #eef3fb;    --rl-ink2: #97a6c2;
	--rl-coral: #34dce0;  --rl-violet: #6fb6ff;  --rl-sky: #3aa8ff;  --rl-yellow: #7fe6ff;
	--rl-navy: #0a1530;   --rl-navy-2: #081124;
	--rl-soft: #0c1326;   --rl-line: rgba(255, 255, 255, 0.09);
	--rl-card: #101a31;
	--rl-shadow: 0 28px 64px -28px rgba(0, 0, 0, 0.85);
	--rl-shadow-sm: 0 16px 36px -22px rgba(0, 0, 0, 0.6);
	--rl-r: 22px;

	width: 100%;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	z-index: 1;
	color: var(--rl-ink);
	background: var(--rl-navy-2);
	font-family: "Poppins", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
/* Full-bleed navy backdrop covering the shell behind */
.dz-home--rl::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background: var(--rl-navy-2);
	pointer-events: none;
}
/* Cyan/teal headline highlight (Reloadly-style) */
.dz-home--rl .dz-rl-hl {
	background: linear-gradient(100deg, var(--rl-cyan), var(--rl-cyan2));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.dz-home--rl .dz-bg { display: none !important; }
.dz-home--rl * { font-family: inherit; }

.dz-rl-wrap {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
.dz-home--rl *, .dz-home--rl *::before, .dz-home--rl *::after { box-sizing: border-box; }

/* ---------- v2 page: force every theme wrapper to true full width ---------- */
body.dz-home-v2-page { overflow-x: hidden; }
body.dz-home-v2-page #page,
body.dz-home-v2-page #content,
body.dz-home-v2-page .site-content,
body.dz-home-v2-page .ast-container,
body.dz-home-v2-page #primary,
body.dz-home-v2-page .entry-content,
body.dz-home-v2-page .ast-article-single,
body.dz-home-v2-page .dz-home-v2-main {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
}
body.dz-home-v2-page #secondary { display: none !important; }

/* ---------- HERO ---------- */
.dz-rl-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 8vw, 96px);
	background:
		radial-gradient(900px 520px at 88% -8%, rgba(52, 220, 224, 0.16), transparent 60%),
		radial-gradient(760px 520px at 6% 8%, rgba(201, 164, 92, 0.12), transparent 60%),
		linear-gradient(180deg, var(--rl-navy) 0%, var(--rl-navy-2) 100%);
}
.dz-rl-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 860px) {
	.dz-rl-hero__grid { grid-template-columns: 1fr; text-align: center; }
}

/* Subtle technical grid behind the hero (clean, not blobby) */
.dz-rl-hero__grid-bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000, transparent 75%);
	        mask-image: radial-gradient(80% 70% at 70% 30%, #000, transparent 75%);
}

.dz-rl-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	margin-bottom: 20px;
	padding: 7px 15px 7px 12px;
	border-radius: 999px;
	font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
	color: var(--rl-green);
	background: var(--rl-mint);
	border: 1px solid rgba(201, 164, 92, 0.22);
}
.dz-rl-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rl-green); box-shadow: 0 0 0 4px rgba(201,164,92,0.2); }
@media (max-width: 860px) { .dz-rl-eyebrow { margin-inline: auto; } }

.dz-rl-hero__title {
	margin: 0 0 18px;
	font-size: clamp(38px, 6vw, 66px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--rl-ink);
}
.dz-rl-hero__sub {
	margin: 0 0 30px;
	max-width: 30em;
	font-size: clamp(16px, 1.8vw, 19px);
	line-height: 1.65;
	color: var(--rl-ink2);
}
@media (max-width: 860px) { .dz-rl-hero__sub { margin-inline: auto; } }
.dz-rl-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 860px) { .dz-rl-hero__cta { justify-content: center; } }

/* ---------- Buttons ---------- */
.dz-rl-btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 15.5px; font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.dz-rl-btn__arrow { transition: transform .2s ease; }
.dz-rl-btn:hover .dz-rl-btn__arrow { transform: translateX(4px); }
[dir="rtl"] .dz-rl-btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .dz-rl-btn:hover .dz-rl-btn__arrow { transform: scaleX(-1) translateX(4px); }
.dz-rl-btn--primary {
	color: #06121f;
	background: linear-gradient(135deg, var(--rl-cyan), var(--rl-cyan2));
	box-shadow: 0 16px 32px -12px rgba(52, 220, 224, 0.55);
}
.dz-rl-btn--primary:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(52, 220, 224, 0.72); }
.dz-rl-btn--ghost {
	color: var(--rl-ink);
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.16);
}
.dz-rl-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.dz-rl-btn--ondark {
	color: var(--rl-green-d);
	background: #fff;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5);
}
.dz-rl-btn--ondark:hover { transform: translateY(-2px); color: var(--rl-ink); }

/* ---------- Hero stats ---------- */
.dz-rl-stats { display: flex; flex-wrap: wrap; gap: 28px 40px; margin-top: 40px; }
@media (max-width: 860px) { .dz-rl-stats { justify-content: center; } }
.dz-rl-stat { display: flex; flex-direction: column; }
.dz-rl-stat__num { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; color: var(--rl-ink); line-height: 1; }
.dz-rl-stat__label { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--rl-ink2); }

/* ---------- Hero art: floating tilted cards (Reloadly-style) ---------- */
.dz-rl-hero__art {
	position: relative;
	min-height: clamp(360px, 40vw, 460px);
}
.dz-rl-hero__art::before {            /* soft ambient glow behind the cluster */
	content: "";
	position: absolute; z-index: 0;
	width: 80%; height: 70%; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(52, 220, 224, 0.22), transparent 68%);
	filter: blur(46px);
	pointer-events: none;
}
.dz-rl-cards { position: absolute; inset: 0; z-index: 1; }
.dz-rl-floatcard {
	position: absolute;
	width: clamp(150px, 16vw, 188px);
	border-radius: 18px;
	padding: 10px;
	background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--rl-shadow);
}
.dz-rl-floatcard__inner {
	border-radius: 12px;
	background: linear-gradient(165deg, #101a31, #0a1124);
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
}
.dz-rl-floatcard__inner .dz-acard-mini { color: #eaf2ff; padding: 12px 10px 13px; }
.dz-rl-floatcard__inner .dz-acard-mini__title { font-size: 13px; }
.dz-rl-floatcard__inner .dz-acard-mini__trail svg { max-height: 96px; }
/* positions + tilt */
.dz-rl-floatcard--cyan   { top: 2%;   left: 0;    transform: rotate(-8deg);  z-index: 2; }
.dz-rl-floatcard--green  { top: 24%;  right: 0;   transform: rotate(6deg);   z-index: 3; width: clamp(160px, 17vw, 200px); }
.dz-rl-floatcard--violet { bottom: 0;  left: 16%;  transform: rotate(-3deg);  z-index: 1; }
.dz-rl-floatcard--cyan   { border-color: rgba(52, 220, 224, 0.5);  box-shadow: 0 24px 54px -26px rgba(52, 220, 224, 0.6); }
.dz-rl-floatcard--green  { border-color: rgba(201, 164, 92, 0.5);  box-shadow: 0 24px 54px -26px rgba(201, 164, 92, 0.6); }
.dz-rl-floatcard--violet { border-color: rgba(58, 168, 255, 0.5); box-shadow: 0 24px 54px -26px rgba(58, 168, 255, 0.5); }
/* gentle vertical float on the inner so the tilt is preserved */
.dz-rl-floatcard__inner { animation: dz-rl-bob2 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.8s); }
@keyframes dz-rl-bob2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 860px) {
	.dz-rl-hero__art { min-height: 380px; max-width: 380px; margin: 8px auto 0; }
}
@media (max-width: 640px) {
	.dz-rl-wrap { padding: 0 18px; }
	.dz-rl-hero__art { min-height: 0; max-width: 100%; }
	.dz-rl-hero__art::before { width: 70%; height: 60%; }
	.dz-rl-cards {
		position: relative; inset: auto;
		display: flex; flex-wrap: wrap; justify-content: center;
		gap: 14px; margin-top: 8px;
	}
	.dz-rl-floatcard {
		position: static !important;
		transform: none !important;
		width: 44% !important; min-width: 134px; max-width: 168px;
	}
	.dz-rl-floatcard__inner { animation: none; }
}

/* ---------- Section shell ---------- */
.dz-rl-sec { padding: clamp(56px, 8vw, 96px) 0; }
.dz-rl-sec--soft { background: var(--rl-soft); }

/* ---------- Section header ---------- */
.dz-rl-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	flex-wrap: wrap; gap: 16px;
	margin-bottom: clamp(28px, 4vw, 48px);
}
.dz-rl-head--center { flex-direction: column; align-items: center; text-align: center; }
.dz-rl-head__main { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.dz-rl-head--center .dz-rl-head__main { align-items: center; }
.dz-rl-head__tag {
	display: inline-flex; align-items: center;
	padding: 5px 14px; border-radius: 999px;
	font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
}
.dz-rl-head__tag--green  { color: var(--rl-green);  background: var(--rl-mint); }
.dz-rl-head__tag--violet { color: var(--rl-violet); background: rgba(58, 168, 255, 0.14); }
.dz-rl-head__tag--coral  { color: var(--rl-coral);  background: rgba(201, 164, 92, 0.14); }
.dz-rl-head__title {
	margin: 0;
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--rl-ink);
}
.dz-rl-head__link {
	font-size: 15px; font-weight: 700;
	color: var(--rl-green-d);
	text-decoration: none;
	white-space: nowrap;
}
.dz-rl-head__link:hover { color: var(--rl-ink); }

/* ---------- Featured tiles: light cards w/ dark card preview ---------- */
.dz-home--rl .dz-cards-tile {
	background: var(--rl-card) !important;
	border: 1px solid var(--rl-line) !important;
	border-radius: var(--rl-r) !important;
	box-shadow: var(--rl-shadow-sm);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dz-home--rl .dz-cards-tile::before { display: none !important; }
.dz-home--rl .dz-cards-tile:hover {
	transform: translateY(-6px);
	border-color: rgba(201, 164, 92, 0.55) !important;
	box-shadow: var(--rl-shadow);
}
.dz-home--rl .dz-cards-tile__media {
	background: linear-gradient(160deg, #16233f, #0a1124) !important;
	border-radius: 16px;
	margin: 6px 6px 0;
}
.dz-home--rl .dz-cards-tile__media::after { display: none !important; }
.dz-home--rl .dz-cards-tile__title { color: var(--rl-ink) !important; font-weight: 700; }
.dz-home--rl .dz-cards-tile__desc  { color: var(--rl-ink2) !important; }

/* ---------- How it works: friendly step cards ---------- */
.dz-rl-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
}
.dz-rl-step {
	position: relative;
	padding: 30px 22px 24px;
	background: var(--rl-card);
	border: 1px solid var(--rl-line);
	border-radius: 20px;
	box-shadow: var(--rl-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dz-rl-step:hover { border-color: rgba(255, 255, 255, 0.16); }
.dz-rl-step:hover { transform: translateY(-6px); box-shadow: var(--rl-shadow); }
.dz-rl-step__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px;
	margin-bottom: 16px;
	border-radius: 16px;
	font-size: 17px; font-weight: 800; color: #fff;
	font-variant-numeric: tabular-nums;
}
.dz-rl-step[data-step="1"] .dz-rl-step__n { background: var(--rl-green); }
.dz-rl-step[data-step="2"] .dz-rl-step__n { background: var(--rl-sky); }
.dz-rl-step[data-step="3"] .dz-rl-step__n { background: var(--rl-violet); }
.dz-rl-step[data-step="4"] .dz-rl-step__n { background: var(--rl-coral); }
.dz-rl-step[data-step="5"] .dz-rl-step__n { background: var(--rl-yellow); color: var(--rl-ink); }
.dz-rl-step__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--rl-ink); }
.dz-rl-step__desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--rl-ink2); }

/* ---------- Value props: colorful icon cards ---------- */
.dz-rl-props {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
}
.dz-rl-prop {
	padding: 30px 26px;
	background: var(--rl-card);
	border: 1px solid var(--rl-line);
	border-radius: 22px;
	box-shadow: var(--rl-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dz-rl-prop:hover { border-color: rgba(255, 255, 255, 0.16); }
.dz-rl-prop:hover { transform: translateY(-6px); box-shadow: var(--rl-shadow); }
.dz-rl-prop__ic {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 18px;
	border-radius: 15px;
}
.dz-rl-prop[data-prop="1"] .dz-rl-prop__ic { background: var(--rl-mint);                color: var(--rl-green); }
.dz-rl-prop[data-prop="2"] .dz-rl-prop__ic { background: rgba(58, 168, 255, 0.16); color: var(--rl-violet); }
.dz-rl-prop[data-prop="3"] .dz-rl-prop__ic { background: rgba(58, 168, 255, 0.16);  color: var(--rl-sky); }
.dz-rl-prop[data-prop="4"] .dz-rl-prop__ic { background: rgba(201, 164, 92, 0.16);  color: var(--rl-coral); }
.dz-rl-prop__title { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--rl-ink); }
.dz-rl-prop__desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rl-ink2); }

/* ---------- Final CTA band ---------- */
.dz-rl-final-wrap { padding: 0 0 clamp(56px, 8vw, 96px); }
.dz-rl-final {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 84px) clamp(28px, 5vw, 72px);
	border-radius: 32px;
	text-align: center;
	background:
		radial-gradient(70% 120% at 50% 0%, rgba(201, 164, 92, 0.22), transparent 60%),
		linear-gradient(160deg, #14161f 0%, #0c0e15 100%);
	border: 1px solid rgba(201, 164, 92, 0.22);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.dz-rl-final__blob { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.5; filter: blur(50px); }
.dz-rl-final__blob--1 { width: 280px; height: 280px; top: -140px; left: -60px; background: radial-gradient(circle, rgba(201, 164, 92, 0.5), transparent 70%); }
.dz-rl-final__blob--2 { width: 220px; height: 220px; bottom: -130px; right: -40px; background: radial-gradient(circle, rgba(58, 168, 255, 0.4), transparent 70%); }
.dz-rl-final__title {
	position: relative; z-index: 1;
	margin: 0 auto 16px; max-width: 18ch;
	font-size: clamp(28px, 4.6vw, 50px);
	font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
	color: #fff;
}
.dz-rl-final__sub {
	position: relative; z-index: 1;
	margin: 0 auto 30px; max-width: 46ch;
	font-size: clamp(15px, 2vw, 18px); line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}
.dz-rl-final .dz-rl-btn { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.dz-rl-blob, .dz-rl-cardframe, .dz-rl-chip { animation: none !important; }
}

/* ============================================================================
   Card tile refinement — cinematic home (v1) AND the /cards/ catalog
   Balanced square preview, framed media, roomier body, premium hover.
   ============================================================================ */
.dz-home:not(.dz-home--rl) .dz-cards-grid,
.dz-cards-catalog .dz-cards-grid { gap: 24px; }
.dz-home:not(.dz-home--rl) .dz-cards-tile,
.dz-cards-catalog .dz-cards-tile {
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), #0a0e18;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.dz-home:not(.dz-home--rl) .dz-cards-tile:hover,
.dz-cards-catalog .dz-cards-tile:hover {
	transform: translateY(-6px);
	border-color: rgba(201, 164, 92, 0.5);
	box-shadow: 0 26px 54px -28px rgba(201, 164, 92, 0.6);
}
.dz-home:not(.dz-home--rl) .dz-cards-tile__media,
.dz-cards-catalog .dz-cards-tile__media {
	aspect-ratio: 1 / 1;
	margin: 12px 12px 0;
	border-radius: 14px;
	border: 1px solid rgba(79, 150, 255, 0.22);
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(47, 139, 255, 0.24), transparent 62%),
		linear-gradient(180deg, #0c1426 0%, #06090f 100%);
}
.dz-home:not(.dz-home--rl) .dz-cards-tile__body,
.dz-cards-catalog .dz-cards-tile__body {
	display: flex; flex-direction: column;
	gap: 9px;
	padding: 18px 18px 20px;
}
.dz-home:not(.dz-home--rl) .dz-cards-tile__title,
.dz-cards-catalog .dz-cards-tile__title {
	font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #f1f6ff;
}
.dz-home:not(.dz-home--rl) .dz-cards-tile__desc,
.dz-cards-catalog .dz-cards-tile__desc {
	font-size: 14px; line-height: 1.55; color: var(--mute, #cfd8e6);
}
.dz-home:not(.dz-home--rl) .dz-cards-tile__meta,
.dz-cards-catalog .dz-cards-tile__meta { margin-top: 4px; }

/* ============================================================================
   REWARDS & REFERRALS — v1.20 improvements
   Gold milestones, emotional referral journey, optimized side menu.
   ============================================================================ */

:root {
	--dz-gold:   #ffd700;
	--dz-purple: #9b51e0;
	--dz-navy:   #0a1124;
}

/* 1. Rewards Milestones */
.dz-rewards { padding: 40px 0; }
.dz-rewards__head { text-align: center; margin-bottom: 32px; }
.dz-rewards__title { font-size: clamp(28px, 5vw, 42px); font-weight: 800; margin-bottom: 12px; }
.dz-rewards__sub { color: var(--mute); max-width: 600px; margin: 0 auto; }

.dz-rewards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.dz-reward-card {
	position: relative;
	padding: 40px 24px;
	border-radius: 24px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dz-reward-card:hover { transform: translateY(-8px); }

.dz-reward--gold { border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 20px 40px -20px rgba(255, 215, 0, 0.3); }
.dz-reward--purple { border-color: rgba(155, 81, 224, 0.3); box-shadow: 0 20px 40px -20px rgba(155, 81, 224, 0.3); }
.dz-reward--dark { border-color: rgba(52, 220, 255, 0.3); box-shadow: 0 20px 40px -20px rgba(52, 220, 255, 0.3); }

.dz-reward-card__points { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--mute); margin-bottom: 16px; }
.dz-reward-card__gift { font-size: 64px; margin-bottom: 16px; filter: drop-shadow(0 0 20px rgba(255,255,255,0.2)); }
.dz-reward-card__label { font-size: 20px; font-weight: 800; color: var(--ink); }

.dz-reward--gold .dz-reward-card__label { color: var(--dz-gold); }
.dz-reward--purple .dz-reward-card__label { color: var(--dz-purple); }

/* Unlocked milestone (driven by live WPLoyalty points) */
.dz-reward-card.is-unlocked { border-color: rgba(52, 220, 255, 0.5); }
.dz-reward-card.is-unlocked .dz-reward-card__gift { filter: drop-shadow(0 0 24px rgba(52,220,255,0.55)); }
.dz-reward-card__badge {
	position: absolute; top: 14px; inset-inline-end: 14px;
	font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
	color: #001016; background: var(--accent);
	padding: 4px 10px; border-radius: 999px;
}

/* 2. Referral & Journey */
.dz-referral { padding: 40px 0; }
.dz-referral__hero { text-align: center; margin-bottom: 56px; }
.dz-referral__main-card {
	max-width: 600px; margin: 32px auto 0;
	padding: 32px; border-radius: 28px;
	background: var(--surface); border: 1px solid var(--line);
	box-shadow: 0 24px 64px -16px rgba(0,0,0,0.5);
}
.dz-referral__balance { margin-bottom: 24px; }
.dz-referral__balance-label { display: block; font-size: 13px; font-weight: 600; color: var(--mute); margin-bottom: 4px; }
.dz-referral__balance-value { font-size: 48px; font-weight: 800; color: var(--accent); }
.dz-referral__balance-hint { display: block; font-size: 13px; color: var(--mute); margin-top: 6px; }
.dz-referral__note { color: var(--mute); font-size: 14px; margin: 0 0 16px; }

.dz-referral__link-box { display: flex; gap: 8px; background: rgba(0,0,0,0.2); padding: 6px; border-radius: 14px; border: 1px solid var(--line); }
.dz-referral__input { flex: 1; background: transparent; border: 0; color: var(--ink); padding: 0 12px; font-size: 14px; }
.dz-referral__btn { display: inline-block; text-decoration: none; text-align: center; background: var(--accent); color: #000; border: 0; padding: 10px 20px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease; }
.dz-referral__btn:hover { opacity: 0.9; }
.dz-referral__btn.is-copied { background: var(--dz-gold); }

.dz-referral__journey-title { text-align: center; margin-bottom: 32px; font-size: 24px; font-weight: 800; }
.dz-referral__journey-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.dz-referral__step { position: relative; padding: 24px; background: var(--surface-2); border-radius: 20px; text-align: center; border: 1px solid var(--line); }
.dz-referral__step-num { width: 32px; height: 32px; background: var(--accent); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-weight: 800; }
.dz-referral__step-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.dz-referral__step-desc { font-size: 13px; color: var(--mute); line-height: 1.5; }
.dz-referral__step-arrow { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); color: var(--line-2); font-size: 24px; }
[dir="rtl"] .dz-referral__step-arrow { right: auto; left: -20px; transform: translateY(-50%) rotate(180deg); }

@media (max-width: 900px) {
	.dz-referral__step-arrow { display: none; }
}

/* 3. Side Menu Optimization (WooCommerce My Account) */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--surface);
	padding: 12px;
	border-radius: 20px;
	border: 1px solid var(--line);
	margin-bottom: 32px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 12px 16px;
	border-radius: 12px;
	color: var(--mute);
	font-weight: 600;
	transition: all 0.2s ease;
	text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link:hover a {
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--accent-glow-soft);
	color: var(--accent);
	border: 1px solid var(--accent-glow);
}

/* 4. Global Spacing Reductions */
.dz-home-section { margin: 28px 0 !important; }
.dz-home-hero { padding: 48px 16px 32px !important; }
.dz-rl-sec { padding: 40px 0 !important; }

/* ============================================================================
 *  HOBA GALAXY — SHARED DESIGN SYSTEM
 * ============================================================================
 *  One primitive set reused by every surface (app stages, card landing,
 *  my-cards, payment). Everything below reads the `.dz` tokens declared at the
 *  top of this file, so a palette change happens in exactly one place.
 *
 *  RTL: logical properties only (margin-inline / padding-inline /
 *  inset-inline-start / text-align: start). No left:/right: in this section.
 * ========================================================================== */

.dz-ds {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--dz-font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dz-ds *, .dz-ds *::before, .dz-ds *::after { box-sizing: border-box; }

/* ---------- container ---------- */
.dz-container {
	inline-size: 100%;
	max-inline-size: 1120px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 42px);
}
.dz-container--narrow { max-inline-size: 560px; }
.dz-container--mid    { max-inline-size: 760px; }

/* ---------- card ---------- */
.dz-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: clamp(18px, 3.2vw, 28px);
}
.dz-card--raised { background: var(--surface-2); }
.dz-card--flush  { padding: 0; overflow: hidden; }

/* ---------- typography ---------- */
.dz-ds h1, .dz-ds h2, .dz-ds h3 { color: var(--ink); margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
.dz-title    { font-size: clamp(24px, 4vw, 34px); font-weight: 700; }
.dz-subtitle { font-size: clamp(14px, 2vw, 16px); color: var(--mute); margin: 8px 0 0; line-height: 1.6; }
.dz-eyebrow-ds {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 10px;
	text-align: start;
}
.dz-muted { color: var(--mute); }

/* ---------- buttons ---------- */
.dz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 50px;
	padding-inline: 22px;
	padding-block: 12px;
	border-radius: 14px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, opacity 160ms ease;
}
.dz-btn:disabled, .dz-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.dz-btn:not(:disabled):active { transform: translateY(1px); }
.dz-btn--primary {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
	color: #14100A;
	font-weight: 700;
}
.dz-btn--primary:not(:disabled):hover { background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 100%); }
.dz-btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.dz-btn--ghost:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.dz-btn--block { inline-size: 100%; }
.dz-ds :is(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 10px;
}

/* ---------- inputs ---------- */
.dz-field { display: block; margin-block-end: 16px; }
.dz-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--mute);
	margin-block-end: 7px;
	text-align: start;
}
.dz-input {
	inline-size: 100%;
	min-block-size: 50px;
	padding-inline: 15px;
	padding-block: 12px;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 12px;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	text-align: start;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dz-input::placeholder { color: var(--mute-2); }
.dz-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow-soft);
}
.dz-input[aria-invalid="true"] { border-color: var(--err); }
/* Card-shaped inputs stay LTR even in Arabic — card numbers, expiry and CVV
 * are always entered and displayed left-to-right regardless of page language. */
.dz-input--numeric {
	direction: ltr;
	text-align: start;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}
.dz-field-error {
	display: none;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--err);
	text-align: start;
}
.dz-field.has-error .dz-field-error { display: block; }
.dz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- badge ---------- */
.dz-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 10px;
	padding-block: 5px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--line-2);
	color: var(--mute);
}
.dz-badge--gold { color: var(--accent); border-color: rgba(201, 164, 92, 0.45); background: var(--accent-glow-soft); }
.dz-badge--ok   { color: var(--ok);     border-color: rgba( 63, 191, 135, 0.45); background: var(--ok-bg); }

/* ---------- alert ---------- */
.dz-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--bg-2);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
	text-align: start;
}
.dz-alert--warn { border-color: rgba(201, 164, 92, 0.40); background: var(--accent-glow-soft); }
.dz-alert--error { border-color: rgba(255, 77, 77, 0.45); background: var(--err-bg); color: #ffd7d7; }
.dz-alert-icon { flex: 0 0 auto; color: var(--accent); line-height: 1; }
.dz-alert--error .dz-alert-icon { color: var(--err); }

/* ---------- loading ---------- */
.dz-spinner {
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	border: 2px solid rgba(201, 164, 92, 0.28);
	border-block-start-color: var(--accent);
	animation: dz-spin 700ms linear infinite;
	flex: 0 0 auto;
}
.dz-spinner--lg { inline-size: 34px; block-size: 34px; border-width: 3px; }
.dz-btn--primary .dz-spinner { border-color: rgba(20, 16, 10, 0.30); border-block-start-color: #14100A; }
@keyframes dz-spin { to { transform: rotate(360deg); } }

.dz-loading-state, .dz-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-block: 46px;
	text-align: center;
	color: var(--mute);
}
.dz-empty-state-title { color: var(--ink); font-size: 17px; font-weight: 600; }

/* ---------- modal ---------- */
.dz-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(4, 6, 14, 0.78);
	backdrop-filter: blur(6px);
}
.dz-modal.is-open { display: flex; }
.dz-modal-panel {
	inline-size: 100%;
	max-inline-size: 420px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 28px;
	text-align: center;
	animation: dz-modal-in 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes dz-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
	.dz-modal-panel { animation: none; }
	.dz-spinner { animation-duration: 1.6s; }
}

/* ============================================================================
 *  PAYMENT PAGE
 * ========================================================================== */
/* The payment route renders its own standalone document (no theme template),
 * so the page chrome a theme would normally supply has to be set here —
 * otherwise the default white body shows through around the container and in
 * the overscroll area. */
html:has(body.dz-payment-page) { background: #080A16; }
body.dz-payment-page {
	margin: 0;
	padding: 0;
	background: #080A16;
	color: #F5F5F7;
	min-block-size: 100vh;
	overscroll-behavior: none;
	-webkit-text-size-adjust: 100%;
}

.dz-pay { flex: 1 1 auto; padding-block: clamp(24px, 5vw, 52px) 64px; }
.dz-pay-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	max-inline-size: 560px;
	margin-inline: auto;
}
.dz-pay-head { text-align: center; margin-block-end: 26px; }
.dz-pay-head .dz-eyebrow-ds { text-align: center; }

/* order summary */
.dz-pay-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dz-pay-summary-plan { font-size: 13px; color: var(--mute); margin: 4px 0 0; }
.dz-pay-summary-name { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.dz-pay-price {
	font-size: clamp(22px, 4vw, 28px);
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* method picker */
.dz-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: 6px 4px; }
.dz-method {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 84px;
	padding: 12px 8px;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 14px;
	color: var(--icon);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.dz-method:hover { border-color: var(--line-2); color: var(--ink); }
.dz-method[aria-pressed="true"] {
	border-color: var(--accent);
	background: var(--accent-glow-soft);
	color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent) inset;
}
.dz-method-mark { block-size: 22px; display: flex; align-items: center; }
.dz-method-mark svg { block-size: 100%; inline-size: auto; }
.dz-method-label { text-transform: uppercase; }

/* card-number field with brand hint */
.dz-cardnum-wrap { position: relative; display: block; }
.dz-cardnum-wrap .dz-input { padding-inline-end: 58px; }
.dz-cardnum-brand {
	position: absolute;
	inset-inline-end: 14px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	block-size: 16px;
	opacity: 0.85;
	pointer-events: none;
}

/* demo banner */
.dz-demo-flag {
	/* auto margins don't centre an inline-flex box — make it a full-width
	 * flex row and centre the badge inside it instead. */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin-block-end: 14px;
}

.dz-pay-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-block-start: 14px;
	font-size: 12px;
	color: var(--mute-2);
	text-align: center;
}

/* success panel */
.dz-pay-success-icon {
	inline-size: 62px;
	block-size: 62px;
	margin-inline: auto;
	margin-block-end: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ok);
	background: var(--ok-bg);
	border: 1px solid rgba(63, 191, 135, 0.4);
}

@media (max-width: 480px) {
	.dz-row { grid-template-columns: 1fr; }
	.dz-methods { grid-template-columns: 1fr; }
	.dz-method { flex-direction: row; justify-content: flex-start; min-block-size: 60px; padding-inline: 16px; gap: 12px; }
}

/* Pro-unlocked marker in the header end cluster */
.dz-pro-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 12px;
	padding-block: 6px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid rgba(201, 164, 92, 0.45);
	background: var(--accent-glow-soft);
}

/* ============================================================================
 *  HOBA GALAXY — REFERENCE HERO
 * ============================================================================
 *  The entry screen from the approved design: glowing avatar orb, gold
 *  waveform, welcome block, and the single ask bar. Every token below comes
 *  from the shared `.dz` palette, so this stays in step with the rest of the
 *  app. Logical properties throughout — the whole hero mirrors under RTL.
 * ========================================================================== */

.dz-content-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
	padding-block: clamp(16px, 3vw, 34px) 40px;
}

/* ---------- avatar orb ---------- */
.dz-orb {
	position: relative;
	inline-size: clamp(190px, 27vw, 372px);
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-inline: auto;
	isolation: isolate;
}
/* Outer bloom. Sits behind the disc and is the single brightest thing on the
 * page — everything else stays quiet so this reads as the focal point. */
.dz-orb::before {
	content: "";
	position: absolute;
	inset: -14%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(224, 188, 115, 0.55) 0%,
		rgba(201, 164,  92, 0.28) 42%,
		rgba(201, 164,  92, 0.08) 62%,
		transparent 74%
	);
	filter: blur(14px);
	z-index: -2;
	animation: dz-orb-breathe 6.5s ease-in-out infinite;
}
/* Crisp gold rim. */
.dz-orb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(232, 196, 128, 0.92);
	box-shadow:
		0 0 22px 2px rgba(224, 188, 115, 0.45),
		inset 0 0 26px 2px rgba(201, 164, 92, 0.16);
	z-index: 2;
	pointer-events: none;
}
.dz-orb-disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 50% 42%, #141829 0%, #0C0F1C 58%, #080A16 100%);
	z-index: 1;
}
.dz-orb-disc svg { inline-size: 100%; block-size: 100%; display: block; }

@keyframes dz-orb-breathe {
	0%, 100% { opacity: 0.82; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.035); }
}

/* Twinkling stars inside the disc. */
.dz-orb-star { animation: dz-twinkle 3.4s ease-in-out infinite; transform-origin: center; }
.dz-orb-star:nth-of-type(2n) { animation-delay: 1.1s; }
.dz-orb-star:nth-of-type(3n) { animation-delay: 2.2s; }
@keyframes dz-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---------- waveform ---------- */
.dz-wave {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	block-size: 34px;
	margin-block: clamp(20px, 3vw, 34px) clamp(14px, 2vw, 22px);
}
.dz-wave span {
	display: block;
	inline-size: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--accent-3) 0%, var(--accent) 100%);
	block-size: var(--h, 40%);
	opacity: 0.9;
	animation: dz-wave-pulse 1.5s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes dz-wave-pulse {
	0%, 100% { transform: scaleY(0.62); }
	50%      { transform: scaleY(1.18); }
}

/* ---------- welcome copy ---------- */
.dz-welcome-title {
	margin: 0;
	font-size: clamp(30px, 5vw, 46px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ink);
}
.dz-welcome-sub {
	margin: 12px 0 0;
	font-size: clamp(14px, 1.9vw, 17px);
	color: var(--mute);
	line-height: 1.6;
}

/* ---------- ask bar ---------- */
.dz-askbar { inline-size: 100%; max-inline-size: 780px; margin-block-start: clamp(24px, 4vw, 40px); }
.dz-askbar-shell {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 72px;
	padding-inline: 18px;
	background: #101320;
	border: 1px solid var(--line-2);
	border-radius: 20px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dz-askbar-shell:focus-within {
	border-color: rgba(201, 164, 92, 0.7);
	box-shadow: 0 0 0 4px var(--accent-glow-soft);
}
.dz-askbar-spark { flex: 0 0 auto; color: var(--accent); display: flex; }
.dz-askbar-input {
	flex: 1 1 auto;
	min-inline-size: 0;
	background: none;
	border: 0;
	outline: none;
	color: var(--ink);
	font: inherit;
	font-size: clamp(15px, 2vw, 16.5px);
	text-align: start;
	padding-block: 18px;
}
.dz-askbar-input::placeholder { color: var(--mute-2); }
.dz-askbar-btn {
	flex: 0 0 auto;
	inline-size: 42px;
	block-size: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--icon);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.dz-askbar-btn:hover { color: var(--accent); background: var(--accent-glow-soft); border-color: rgba(201, 164, 92, 0.35); }
.dz-askbar-btn[hidden] { display: none; }
/* Mic is only shown when the browser actually supports speech input — JS
 * adds this class. Without it the button never renders, so there is no dead
 * control sitting in the bar. */
.dz-askbar-mic { display: none; }
.dz-has-speech .dz-askbar-mic { display: grid; }
.dz-askbar-mic.is-listening {
	color: var(--accent);
	background: var(--accent-glow-soft);
	border-color: rgba(201, 164, 92, 0.55);
	animation: dz-mic-pulse 1.3s ease-in-out infinite;
}
@keyframes dz-mic-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.40); }
	50%      { box-shadow: 0 0 0 7px rgba(201, 164, 92, 0); }
}
.dz-askbar-send { color: var(--accent); }

@media (max-width: 560px) {
	.dz-askbar-shell { min-block-size: 60px; padding-inline: 12px; gap: 8px; border-radius: 16px; }
	.dz-wave { block-size: 26px; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	.dz-orb::before, .dz-wave span, .dz-orb-star, .dz-askbar-mic.is-listening { animation: none; }
}

/* ---------- compact orb reused as the page motif on later stages ---------- */
.dz-orb--mini {
	inline-size: clamp(64px, 9vw, 88px);
	margin-block-end: 18px;
}
.dz-orb--mini::before { inset: -18%; filter: blur(9px); }
.dz-orb--mini::after { border-width: 1.5px; box-shadow: 0 0 12px 1px rgba(224, 188, 115, 0.40); }

/* Send arrow points toward the reading direction. */
[dir="rtl"] .dz-askbar-send svg { transform: scaleX(-1); }

/* Orb motif sits centred above the heading on the non-hero screens. */
.dz-content-clarify .dz-orb--mini,
.dz-content .dz-orb--mini { margin-inline: auto; }
.dz-pay-head .dz-orb--mini { margin-inline: auto; margin-block-end: 16px; }
/* The empty/expired payment state has no heading block, so it keeps its own
 * spacing rather than inheriting the head margin. */
.dz-payment-page .dz-empty-state .dz-orb--mini { margin-block-end: 4px; }

/* ============================================================================
 *  REFERENCE-UI CORRECTIONS
 * ========================================================================== */

/* 1. The header does NOT mirror. In the approved design the control cluster
 *    sits on the left and the HOBA GALAXY lockup on the right in BOTH
 *    languages — a brand lockup that swaps sides between locales reads as a
 *    bug, not a translation. The bar is pinned LTR and each item re-asserts
 *    its own direction so Arabic labels inside still shape correctly.
 *    To make the header mirror with the page instead, delete this block. */
.dz-top { direction: ltr; }
.dz-top-start, .dz-top-end { direction: ltr; }
[dir="rtl"] .dz-hd-lang-current,
[dir="rtl"] .dz-hd-search-input,
[dir="rtl"] .dz-hd-lang-opt { direction: rtl; }
/* Search text still reads right-to-left inside the pinned bar. */
[dir="rtl"] .dz-hd-search-input { text-align: right; }
/* Brand: sparkle leads the wordmark, as in the reference. */
.dz-brand--hoba { flex-direction: row; }

/* 2. Progress dots are meaningful once the visitor is moving through the
 *    flow, but the entry screen is step one by definition — the reference
 *    shows no dots there, so they appear from the clarify stage onward. */
.dz[data-current="ask"] .dz-nav { visibility: hidden; }

/* 3. Send arrow appears only once there is something to send, leaving the
 *    mic as the single resting affordance exactly as in the reference.
 *    Pure CSS via :placeholder-shown — the typewriter animates the
 *    placeholder attribute, never the value, so this stays accurate.
 *    Without JS the mic is absent and the arrow is the only control, which
 *    is why the no-JS fallback below keeps it visible. */
.dz-has-speech .dz-askbar-input:placeholder-shown ~ .dz-askbar-send { display: none; }

/* Search keeps the page's reading direction inside the pinned-LTR bar, so the
 * magnifier sits at the end of the field as it does in the reference. */
[dir="rtl"] .dz-hd-search-shell { direction: rtl; }

/* Two-locale toggle: label then icon, no caret, matching the reference. */
.dz-hd-lang-btn--toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.dz-hd-lang-btn--toggle .dz-hd-lang-current { font-weight: 600; }

/* Mobile header: keep controls and the lockup on one row.
 * The header search is only a proxy into the hero ask bar, which is already
 * on screen — so on narrow viewports it's redundant and costs a whole row of
 * the fold. Dropping it lets the orb sit above the fold instead. */
@media (max-width: 720px) {
	.dz-top { padding-inline: 16px; padding-block: 14px; gap: 10px; flex-wrap: nowrap; }
	.dz-hd-search { display: none; }
	.dz-top-start { gap: 8px; }
	.dz-brand--hoba .dz-brand-word { font-size: 15px; letter-spacing: 0.14em; }
}
@media (max-width: 460px) {
	/* Icon-only language control — the globe plus the target hreflang still
	 * names the action for screen readers via aria-label. */
	.dz-hd-lang-btn--toggle .dz-hd-lang-current,
	.dz-hd-lang .dz-hd-lang-current,
	.dz-hd-lang-caret { display: none; }
	.dz-hd-lang-btn { padding-inline: 10px; }
	.dz-brand--hoba .dz-brand-word { font-size: 13px; letter-spacing: 0.1em; }
	.dz-hd-btn { inline-size: 38px; block-size: 38px; }
}

/* The header search input was 20px tall inside a 70px pill, so clicks landing
 * on the pill's padding did nothing. Stretch it to fill the shell and the
 * whole control becomes the target. */
.dz-hd-search-shell { align-items: stretch; }
.dz-hd-search-input { align-self: stretch; }
.dz-hd-search-icon { display: flex; align-items: center; }