/*
 * The Digital BM — premium look + motion layer (theme 1.1.0).
 * Tokens live in tokens.css (:root, "lt-" prefix). Only transform and opacity animate.
 * Hidden "pre-reveal" states exist only under .lt-js (set by a tiny head script), so the
 * page is complete with JS off. Everything is instant under prefers-reduced-motion.
 */

/* ---------- Type: fluid, balanced ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.dbm-hero h1 { font-size: var(--lt-hero-size); line-height: .95; letter-spacing: -.03em; max-width: 12ch; }
.dbm-hero-lead { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }

/* One accent, for emphasis only: links are ink with a quiet underline; green appears on hover. */
a { text-decoration-color: rgba(0, 0, 0, .3); text-decoration-thickness: 2px; transition: text-decoration-color var(--lt-dur-feedback) var(--lt-ease); }
a:hover { text-decoration-color: var(--lt-accent); }
@media (prefers-color-scheme: dark) { a { text-decoration-color: rgba(255, 255, 255, .35); } }

/* Key word in the hero and important numbers: a green marker behind black text (AA contrast). */
.lt-key, .dbm-price, .dbm-results li strong {
	background-image: linear-gradient(transparent 55%, var(--lt-accent-soft) 55%, var(--lt-accent-soft) 86%, transparent 86%);
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lt-key { padding: 0 .04em; }
.dbm-price, .dbm-facts li, .dbm-results li, .dbm-progress > span, .lt-count { font-variant-numeric: tabular-nums; }

/* ---------- Hero: soft accent glow behind the visual ---------- */
.dbm-hero { position: relative; isolation: isolate; overflow: hidden; }
.dbm-hero::before { content: ""; position: absolute; inset: -10% -5% -20%; z-index: -1; background: var(--lt-glow); pointer-events: none; }

/* ---------- Buttons: pills that lift and press ---------- */
.dbm-button, button, input[type="submit"] {
	position: relative; border-radius: var(--lt-radius-pill); min-height: var(--lt-tap);
	color: #000; transform: translateZ(0);
	transition: transform var(--lt-dur-feedback) var(--lt-ease);
}
.dbm-button--plain, .dbm-button--dark { color: var(--dbm-black); }
.dbm-button--dark { color: var(--dbm-white); }
.dbm-button::after, button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--lt-shadow-2); opacity: 0; transition: opacity var(--lt-dur-feedback) var(--lt-ease); pointer-events: none; }
.dbm-button:hover, button:hover, input[type="submit"]:hover { transform: translateY(-3px) rotate(-.6deg); }
.dbm-button:hover::after, button:hover::after { opacity: 1; }
.dbm-button:active, button:active, input[type="submit"]:active { transform: translateY(1px) scale(.98); transition-duration: 90ms; }
.dbm-button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible { box-shadow: var(--dbm-focus), 0 0 0 9px var(--lt-accent-soft); }
.dbm-menu-toggle summary { border-radius: var(--lt-radius-pill); min-height: var(--lt-tap); display: inline-flex; align-items: center; }

/* Arrows slide right on links that lead somewhere. */
.dbm-section-head > a::after, .dbm-pager a::after { content: "\2192" / ""; display: inline-block; margin-left: .35em; transition: transform var(--lt-dur-feedback) var(--lt-ease); }
.dbm-pager a:first-child::after { content: none; }
.dbm-section-head > a:hover::after, .dbm-pager a:hover::after { transform: translateX(5px); }

/* ---------- Cards: big radius, layered soft shadow, lift on hover ---------- */
.dbm-panel, .dbm-checkout { border: 1px solid var(--lt-glass-border); border-radius: var(--lt-radius-card); box-shadow: var(--lt-shadow-1); background: var(--dbm-white); }
.dbm-path, .dbm-card { position: relative; border-radius: var(--lt-radius-card); }
.dbm-path {
	padding: var(--dbm-s6); border: 1px solid var(--lt-glass-border); border-top: 8px solid var(--dbm-black);
	background: var(--lt-glass-strong); box-shadow: var(--lt-shadow-1);
	transition: transform var(--lt-dur-reveal) var(--lt-ease);
}
.dbm-path--agency { border-top-color: var(--dbm-blue); }
.dbm-path--academy { border-top-color: var(--dbm-green); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dbm-path { background: var(--lt-glass-bg); -webkit-backdrop-filter: blur(var(--lt-blur)) saturate(1.3); backdrop-filter: blur(var(--lt-blur)) saturate(1.3); }
}
.dbm-path::after, .dbm-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--lt-shadow-3); opacity: 0; transition: opacity var(--lt-dur-reveal) var(--lt-ease); pointer-events: none; }
@media (hover: hover) {
	.dbm-path:hover, .dbm-card:hover { transform: translateY(-7px); }
	.dbm-path:hover::after, .dbm-card:hover::after { opacity: 1; }
	.dbm-card { transition: transform var(--lt-dur-reveal) var(--lt-ease); }
}
.dbm-row h3 a { transition: color var(--lt-dur-feedback) var(--lt-ease); }

/* ---------- Header: transparent at the top, glass once scrolled, hides going down ---------- */
.lt-js .dbm-site-header { transition: transform var(--lt-dur-reveal) var(--lt-ease); }
.lt-js .dbm-site-header:not(.lt-scrolled) { background: transparent; border-bottom-color: transparent; }
.lt-js .dbm-site-header.lt-scrolled { background: var(--lt-glass-strong); box-shadow: var(--lt-shadow-1); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lt-js .dbm-site-header.lt-scrolled { background: var(--lt-glass-bg); -webkit-backdrop-filter: blur(var(--lt-blur)) saturate(1.4); backdrop-filter: blur(var(--lt-blur)) saturate(1.4); }
}
.lt-js .dbm-site-header.lt-hide { transform: translateY(-100%); }
.dbm-nav a { display: inline-flex; align-items: center; min-height: var(--lt-tap); }
.dbm-footer-grid a { display: inline-block; padding: .55rem 0; }
.dbm-footer-grid li { margin-bottom: 0; }

/* Mobile menu: a full-screen glass overlay with staggered links (JS adds .lt-menu-open). */
@media (max-width: 960px) {
	.lt-noscroll { overflow: hidden; }
	.lt-js .lt-menu-open .dbm-nav, .lt-js .lt-menu-open .dbm-header-actions { position: fixed; left: 0; right: 0; z-index: 60; margin: 0; padding: 0 var(--dbm-s5); }
	.lt-js .lt-menu-open .dbm-nav { top: 64px; bottom: 0; padding-top: var(--dbm-s6); background: var(--lt-glass-strong); }
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.lt-js .lt-menu-open .dbm-nav { background: var(--lt-glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
	}
	.lt-js .lt-menu-open .dbm-nav a { font-size: var(--dbm-step-2); font-weight: 800; letter-spacing: -.02em; min-height: 56px; }
	.lt-js .lt-menu-open .dbm-header-actions { bottom: 0; padding-bottom: calc(var(--dbm-s6) + env(safe-area-inset-bottom)); gap: var(--dbm-s4); }
	.lt-js .lt-menu-open .dbm-site-header, .lt-js .dbm-site-header.lt-menu-open { transform: none; background: var(--lt-glass-strong); }
	.lt-js .lt-menu-open .dbm-nav li, .lt-js .lt-menu-open .dbm-header-actions > * { animation: lt-rise var(--lt-dur-reveal) var(--lt-ease) both; animation-delay: calc(var(--lt-i, 0) * var(--lt-stagger)); }
}

/* ---------- Hero entrance (JS splits the headline into words) ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* First paint already shows the start state, so splitting never flickers. The headline is visible
	   (35%) from the first frame: it counts for LCP and is readable. A failsafe completes it if JS fails. */
	.lt-js:not(.lt-hero-go) .dbm-hero h1 { opacity: .35; transform: translateY(.22em); animation: lt-failsafe 1ms 1.2s forwards; }
	.lt-js:not(.lt-hero-go) .dbm-hero-lead, .lt-js:not(.lt-hero-go) .dbm-hero-actions, .lt-js:not(.lt-hero-go) .dbm-chart { opacity: .55; transform: translateY(10px); animation: lt-failsafe 1ms 1.2s forwards; }
	.lt-hero-run .lt-word-i { display: inline-block; will-change: transform, opacity; animation: lt-word var(--lt-dur-reveal) var(--lt-ease) both; animation-delay: calc(var(--lt-i) * var(--lt-stagger-word)); }
	.lt-hero-run .dbm-hero-lead, .lt-hero-run .dbm-hero-actions, .lt-hero-run .dbm-chart { animation: lt-follow var(--lt-dur-reveal) var(--lt-ease) both; }
	.lt-hero-run .dbm-hero-lead { animation-delay: 480ms; }
	.lt-hero-run .dbm-hero-actions { animation-delay: 560ms; }
	.lt-hero-run .dbm-chart { animation-delay: 640ms; animation-duration: var(--lt-dur-hero); }
	.lt-hero-done .lt-word-i { will-change: auto; }
}
.lt-word { display: inline-block; }
@keyframes lt-word { from { opacity: .35; transform: translateY(.22em); } to { opacity: 1; transform: none; } }
@keyframes lt-follow { from { opacity: .55; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lt-rise { from { opacity: 0; transform: translateY(var(--lt-rise)); } to { opacity: 1; transform: none; } }
@keyframes lt-failsafe { to { opacity: 1; transform: none; } }

/* ---------- Scroll reveal (JS marks below-the-fold items with .lt-reveal) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.lt-js.lt-ready .lt-reveal:not(.lt-in) { opacity: 0; transform: translateY(var(--lt-rise)); }
	.lt-js.lt-ready .lt-reveal { transition: opacity var(--lt-dur-reveal) var(--lt-ease), transform var(--lt-dur-reveal) var(--lt-ease); }
}

/* ---------- Steps / process: scroll-linked progress line ---------- */
.lt-steps { position: relative; }
.lt-steps::before, .lt-steps-fill { content: ""; position: absolute; left: 7px; top: 1.4rem; bottom: 1.4rem; width: 2px; border-radius: 2px; }
.lt-steps::before { background: var(--dbm-line); }
.lt-steps-fill { background: var(--lt-accent); transform-origin: top; transform: scaleY(0); z-index: 0; }
.dbm-curriculum.lt-steps > li { position: relative; padding-left: var(--dbm-s6); }
.dbm-curriculum.lt-steps > li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--dbm-line); background: var(--dbm-white); z-index: 1; transition: transform var(--lt-dur-feedback) var(--lt-ease); }
.dbm-curriculum.lt-steps > li.lt-step-on::before { border-color: var(--dbm-black); background: var(--lt-accent); transform: scale(1.15); }
.dbm-outline.lt-steps li::before { z-index: 1; background-color: var(--dbm-white); }
.dbm-outline.lt-steps li.dbm-outline-done::before { background-color: var(--lt-accent); }
.dbm-outline.lt-steps li.lt-step-on::before { transform: scale(1.15); }

/* ---------- Forms: floating labels, focus glow, inline validation, submit states ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none; border-color: var(--dbm-black); box-shadow: 0 0 0 3px var(--dbm-white), 0 0 0 5px var(--dbm-black), 0 0 0 10px var(--lt-accent-soft);
}
input, select, textarea { border-radius: 14px; min-height: var(--lt-tap); }
/* Floating labels where the browser supports :has(); the layout is the same before and after JS (no shift). */
.lt-js .dbm-form label:has(+ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), textarea)) {
	position: relative; z-index: 1; margin: var(--dbm-s4) 0 -2.05rem; padding-left: 1rem; pointer-events: none; font-weight: 500; color: var(--dbm-muted);
	transform-origin: 0 0; transform: translateY(.62rem) scale(.78); transition: transform var(--lt-dur-feedback) var(--lt-ease);
}
.lt-js .dbm-form label:has(+ :is(input:placeholder-shown, textarea:placeholder-shown):not(:focus)) { transform: translateY(1.35rem); }
.lt-js .dbm-form label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), textarea) { padding-top: 1.55rem; padding-bottom: .45rem; }
.lt-js .dbm-form label + :is(input, textarea)::placeholder { color: transparent; }
.lt-msg { display: block; margin-top: var(--dbm-s1); font-size: var(--dbm-step--1); font-weight: 500; color: var(--dbm-red-text); }
[aria-invalid="true"] { border-color: var(--dbm-red) !important; }
.lt-sending { pointer-events: none; opacity: .8; }
.lt-sent::before { content: "\2713" / ""; display: inline-block; margin-right: .45em; transform: scale(0); animation: lt-pop var(--lt-dur-reveal) var(--lt-ease) forwards; }
@keyframes lt-pop { 60% { transform: scale(1.25); } to { transform: scale(1); } }

/* ---------- Shimmer placeholders for slow images and embeds ---------- */
.lt-shimmer { position: relative; overflow: hidden; background-color: var(--dbm-surface); }
.lt-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: lt-shine 1.1s linear infinite; pointer-events: none; }
@media (prefers-color-scheme: dark) { .lt-shimmer::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); } }
@keyframes lt-shine { to { transform: translateX(100%); } }

/* ---------- Quick page fade between pages (never blocks navigation) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--lt-dur-page); animation-timing-function: var(--lt-ease); }

/* ---------- Dark mode: keep brand surfaces readable ---------- */
@media (prefers-color-scheme: dark) {
	.dbm-pill--academy, .dbm-pill--agency, .dbm-band, .dbm-band label, .dbm-band p, .dbm-band h2 { color: #000; }
	.dbm-band .dbm-ok { color: var(--dbm-black); }
	.dbm-site-footer { background: #000; color: #fff; }
	.dbm-site-footer a { color: #fff; }
	.dbm-chart rect[fill="#000"], .dbm-chart polygon { fill: var(--dbm-black); }
	.dbm-chart polyline[stroke="#000"] { stroke: var(--dbm-black); }
	.dbm-chart polyline[stroke="#fff"] { stroke: var(--dbm-white); }
	.dbm-progress-track { background: var(--dbm-surface); }
	img { opacity: .94; }
}

/* ---------- Reduced motion: everything visible at once; only quick fades ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-property: opacity !important; transition-duration: 90ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
	.dbm-button:hover, button:hover, .dbm-path:hover, .dbm-card:hover, .lt-js .dbm-site-header.lt-hide { transform: none; }
	.lt-shimmer::after { animation: none; }
	@view-transition { navigation: none; }
}