/* ==========================================================================
   xbt-theme.css  —  TrustTier AI "studio" theme layer
   Load this AFTER your existing <style> block (last thing in <head>).
   It overrides your tokens + restyles existing classes. No markup changes
   needed except the small snippets listed in the instructions.

   Sections:
   1  Tokens            6  Light sections & cards     11 Footer
   2  Base + type       7  Dark sections              12 Module pages
   3  Header + utility  8  Stats band                 13 Loader / cursor /
   4  Buttons           9  FAQ                           particles / reveal
   5  Hero              10 Misc fixes                 14 Responsive + a11y
   ========================================================================== */

/* 1 ── TOKENS ──────────────────────────────────────────────────────────── */
:root {
	/* confirmed from xbtventures.com: <meta theme-color> = #eef0f5 */
	--bg: #eef0f5;
	/* my choices — change these first if your brand tokens differ */
	--bg-2: #e3e6ee;
	--surface: #ffffff;
	--ink: #0d1324;
	--ink-2: #4b5468;
	--ink-3: #7a8398;
	--line: rgba(13, 19, 36, .10);
	--line-strong: rgba(13, 19, 36, .24);
	--accent: #ee1d23;          /* your existing brand red, now used sparingly */
	--accent-ink: #c41519;
	--accent-soft: #ff6b6f;     /* red that stays readable on dark */
	--on-dark-2: rgba(255, 255, 255, .68);
	--line-dark: rgba(255, 255, 255, .12);

	--font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	/* re-point your legacy tokens so every old rule inherits the new look */
	--primary-color: var(--accent);
	--primary-dark: var(--accent-ink);
	--accent-color: var(--accent-ink);
	--secondary-color: var(--ink);
	--text-dark: var(--ink);
	--text-light: var(--ink-2);
	--light-bg: var(--bg);
	--font-family: var(--font-body);

	--transition: all .35s cubic-bezier(.22, 1, .36, 1);
	--shadow-sm: 0 1px 0 rgba(13, 19, 36, .04);
	--shadow-md: 0 14px 30px -20px rgba(13, 19, 36, .35);
	--shadow-lg: 0 26px 50px -30px rgba(13, 19, 36, .42);
	--shadow-xl: 0 34px 64px -32px rgba(13, 19, 36, .5);
	--section-pad: clamp(3.5rem, 7vw, 6rem);
}

/* 2 ── BASE + TYPE ─────────────────────────────────────────────────────── */
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5,
.logo-text, .stat-number, .stat-currency, .stat-unit, .dpdp-stat-box .value,
.dpdp-product-acronym, .module-stat-value, .float-badge-value, .badge-value,
.float-card-value, .element-value, .status-text {
	font-family: var(--font-display);
}

/* one type treatment for every section title */
.diagram-main-title, .data-discovery-title, .pii-title, .ldrs-title, .vcip-title,
.fcps-dark-title, .benefits-dark-title, .use-cases-title, .early-warning-title,
.other-solutions-title, .dpdp-suite-title, .split-intro h2,
.module-showcase-title, .module-crosslink-header h2 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.04;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
}
.dpdp-hero-title, .module-hero-title {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1;
	font-size: clamp(2.6rem, 6.2vw, 5.2rem);
}
.hero-title {
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1;
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	background: none;
	-webkit-text-fill-color: #fff;
	color: #fff;
}
.hero-title-highlight {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--accent-soft);
}
.diagram-subtitle { font-style: normal; font-weight: 500; }

/* gradient-clipped text → plain solid text */
.title-highlight, .dpdp-hero-title span, .module-hero-title span, .logo-text,
.float-badge-value, .badge-value, .float-card-value,
.early-warning-title, .title-gradient {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
}
.title-highlight { color: inherit; }
.dpdp-hero-title span, .module-hero-title span { color: inherit; }
.logo-text { color: var(--ink); letter-spacing: -.03em; }
.float-badge-value, .badge-value, .float-card-value { color: var(--accent); }
.title-gradient { color: var(--accent-soft); font-style: normal; }
.early-warning-title { color: #fff; text-shadow: none; }
.dpdp-suite-title .highlight-teal { color: #fff; }
.title-underline { width: 48px; height: 2px; background: var(--accent); }

/* section eyebrows: calm, sentence-case, hairline */
.section-badge, .data-discovery-badge, .pii-badge, .ldrs-badge, .vcip-badge,
.split-intro .section-label, .dpdp-hero-badge, .module-hero-badge {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	font-size: .85rem;
}
.section-badge iconify-icon, .data-discovery-badge iconify-icon, .pii-badge iconify-icon,
.ldrs-badge iconify-icon, .vcip-badge iconify-icon, .dpdp-hero-badge iconify-icon,
.module-hero-badge iconify-icon { color: var(--accent); }
.fcps-dark-badge, .use-cases-badge, .early-warning-badge, .dpdp-suite-badge, .hero-badge {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--line-dark);
	color: var(--on-dark-2);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}
.fcps-dark-badge iconify-icon, .use-cases-badge iconify-icon,
.early-warning-badge iconify-icon, .dpdp-suite-badge iconify-icon { color: var(--accent-soft); }

/* 3 ── HEADER + UTILITY BAR ────────────────────────────────────────────── */
.professional-header, .module-header {
	background: rgba(238, 240, 245, .84);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: none;
	border-bottom: 1px solid var(--line);
}
.professional-header.scrolled { background: rgba(238, 240, 245, .95); box-shadow: 0 14px 30px -26px rgba(13, 19, 36, .6); }
.main-nav { padding: .65rem 0; }

.xbt-utility { border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--ink-2); }
.xbt-utility-inner {
	max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-xl); height: 38px;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.xbt-utility a { color: inherit; text-decoration: none; }
.xbt-utility a:hover { color: var(--accent); }
.xbt-utility-left { display: flex; gap: 1.5rem; align-items: center; white-space: nowrap; overflow: hidden; }
.xbt-textsize { display: flex; align-items: center; gap: .25rem; }
.xbt-textsize button {
	border: 1px solid var(--line); background: var(--surface); color: var(--ink);
	border-radius: 8px; padding: .1rem .5rem; font-weight: 600; font-size: .75rem; cursor: pointer;
	transition: border-color .2s ease;
}
.xbt-textsize button:hover { border-color: var(--ink); }
.xbt-textsize-val { margin-left: .5rem; min-width: 2.8rem; }

.nav-link-main { position: relative; color: var(--ink); font-weight: 500; padding: .6rem 1rem; background: none; }
.nav-link-main::after {
	content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .3rem; height: 1.5px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.nav-link-main:hover, .nav-link-main.active { color: var(--ink); background: none; }
.nav-link-main:hover::after, .nav-link-main.active::after { transform: scaleX(1); }

.dropdown-menu-modern {
	background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
	box-shadow: var(--shadow-xl);
}
.dropdown-group-label { text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.dropdown-item-modern:hover { background: var(--bg); color: var(--ink); transform: none; }
.dropdown-item-modern iconify-icon { color: var(--accent); }
.dropdown-item-modern:hover iconify-icon { transform: none; }
.nav-cta { border-left: 1px solid var(--line); }
.mobile-menu-toggle span { background: var(--ink); }

/* 4 ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn-demo, .btn-dpdp-hero-primary, .btn-diagram-primary, .btn-data-discovery-primary,
.btn-pii-primary, .btn-ldrs-primary, .btn-vcip-primary, .module-hero .btn-hero-primary {
	background: var(--ink); color: #fff; border: 1px solid var(--ink); box-shadow: none;
}
.btn-demo:hover, .btn-dpdp-hero-primary:hover, .btn-diagram-primary:hover,
.btn-data-discovery-primary:hover, .btn-pii-primary:hover, .btn-ldrs-primary:hover,
.btn-vcip-primary:hover, .module-hero .btn-hero-primary:hover {
	background: var(--accent); border-color: var(--accent); color: #fff;
	transform: translateY(-2px); box-shadow: 0 16px 28px -16px rgba(238, 29, 35, .7);
}
/* buttons that sit on dark backgrounds */
.btn-fcps-dark, .hero-section-pro .btn-hero-primary {
	background: #fff; color: var(--ink); border: 1px solid #fff; box-shadow: none;
}
.btn-fcps-dark:hover, .hero-section-pro .btn-hero-primary:hover {
	background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; transform: translateY(-2px);
}
.btn-dpdp-hero-secondary, .btn-diagram-secondary {
	background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
}
.btn-dpdp-hero-secondary:hover, .btn-diagram-secondary:hover {
	background: var(--surface); border-color: var(--ink); color: var(--ink); box-shadow: none;
}
.show-more-btn:hover { background: #fff; color: var(--ink); border-color: #fff; box-shadow: none; }
.btn-dpdp-product { color: #fff; border-color: var(--line-dark); background: transparent; }
.btn-dpdp-product:hover { background: #fff; color: var(--ink); }

/* 5 ── HERO ────────────────────────────────────────────────────────────── */
.dpdp-hero-bg { background: var(--bg); padding: 172px 0 5rem; }
.dpdp-hero-bg::before {
	background-image: radial-gradient(rgba(13, 19, 36, .16) 1px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 35% 40%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 85% 75% at 35% 40%, #000 25%, transparent 78%);
}
.dpdp-hero-bg::after { display: none; }
.dpdp-hero-bg > .container-fluid { position: relative; z-index: 1; }
.dpdp-hero-content { color: var(--ink); }
.dpdp-hero-title { color: var(--ink); }
.dpdp-hero-subtitle { color: var(--ink-2); max-width: 34rem; }
.dpdp-penalty-highlight { color: var(--ink); }
.dpdp-hero-module-chip {
	background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.dpdp-hero-module-chip:hover { border-color: var(--ink); background: var(--surface); }
.dpdp-hero-visual-ring {
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.dpdp-hero-visual-ring::before { border-color: var(--line-strong); }
.dpdp-hero-visual-icon { background: var(--ink); box-shadow: none; }
.dpdp-hero-float-badge { border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.dpdp-hero-float-badge .element-value { font-family: var(--font-display); }

/* the second (dark) intro strip */
.hero-section-pro { position: relative; overflow: hidden; background: var(--ink); padding: var(--section-pad) 0; }
.hero-background { background-image: none; opacity: 1; }
.hero-background::before, .hero-background::after { display: none; }
.hero-section-pro .hero-container { z-index: 2; }
.hero-float-card { border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
.hero-main-image { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); border-radius: 20px; }

/* 6 ── LIGHT SECTIONS + CARDS ──────────────────────────────────────────── */
.section.solutions, .component-diagram-section, .data-discovery-background,
.pi-background-color, .ldrs-background, .vcip-background, .other-solutions-background,
.dpdp-information-section, .module-showcase, .module-hero-bg {
	background: var(--bg);
}
.dpdp-faq-section, .module-features, .module-capabilities, .module-stats-section { background: var(--surface); }
/* remove the diagonal stripes + red glows */
.section.solutions::before, .component-diagram-section::before,
.data-discovery-background::before, .data-discovery-background::after,
.pi-background-color::before, .pi-background-color::after,
.ldrs-background::before, .ldrs-background::after, .vcip-background::before,
.other-solutions-background::before, .module-showcase::before,
.fcps-dark-background::before, .benefits-dark-background::before,
.use-cases-dark-background::before, .dpdp-suite-background::before,
.footer-background::before, .early-warning-background::after,
.diagram-decoration, .pii-decoration { display: none; }

.data-discovery-background, .pi-background-color, .ldrs-background, .vcip-background,
.other-solutions-background, .fcps-dark-background, .benefits-dark-background,
.use-cases-dark-background, .early-warning-background, .dpdp-suite-background {
	padding-top: var(--section-pad); padding-bottom: var(--section-pad);
}
.component-diagram-section { padding: var(--section-pad) 0; }
.data-discovery-description, .diagram-subtitle, .pii-description, .ldrs-intro,
.vcip-description, .other-solutions-subtitle, .split-intro > p { color: var(--ink-2); }

/* one card language: white, hairline, no glow */
.feature-item, .highlight-item, .data-discovery-feature-card, .ldrs-feature-card,
.vcip-feature-item, .benefit-card, .solution-card, .solution-grid article,
.dpdp-info-card, .module-stat-card, .module-feature-card, .capability-row {
	background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
	box-shadow: none;
}
.feature-item:hover, .highlight-item:hover, .data-discovery-feature-card:hover,
.ldrs-feature-card:hover, .vcip-feature-item:hover, .benefit-card:hover,
.solution-card:hover, .solution-grid article:hover, .dpdp-info-card:hover,
.module-stat-card:hover, .module-feature-card:hover, .capability-row:hover {
	border-color: var(--line-strong); box-shadow: var(--shadow-lg);
}
.feature-item:hover, .highlight-item:hover { transform: translateX(6px); }
.data-discovery-feature-card:hover, .ldrs-feature-card:hover, .benefit-card:hover,
.solution-card:hover, .solution-grid article:hover { transform: translateY(-6px); }

/* icon tiles: stop the spin/scale on hover */
.feature-card-icon-wrapper, .benefit-icon-wrapper, .ldrs-feature-card .feature-card-icon,
.vcip-feature-icon, .solution-icon-wrapper, .feature-icon {
	background: var(--bg);
}
.data-discovery-feature-card:hover .feature-card-icon-wrapper,
.benefit-card:hover .benefit-icon-wrapper,
.ldrs-feature-card:hover .feature-card-icon,
.solution-card:hover .solution-icon-wrapper,
.vcip-feature-item:hover .vcip-feature-icon {
	transform: none; background: var(--bg-2);
}
.ldrs-feature-card:hover .dpdp-module-icon { color: var(--accent); }
.vcip-feature-item:hover .vcip-feature-icon { color: var(--accent); }
.solution-grid article span { background: var(--bg); color: var(--ink-2); letter-spacing: 0; }
.feature-text strong, .vcip-description strong { color: var(--ink); }
.compliance-link { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.compliance-link:hover { border-bottom-color: var(--accent); color: var(--accent); }
.dashboard-mockup, .diagram-image, .module-hero-visual-ring { box-shadow: var(--shadow-xl); }
.dpdp-info-card h3 iconify-icon { color: var(--accent); }

/* 7 ── DARK SECTIONS ───────────────────────────────────────────────────── */
.fcps-dark-background, .benefits-dark-background, .use-cases-dark-background,
.dpdp-suite-background, .early-warning-background, .module-crosslink, .footer-background {
	background: var(--ink);
}
.early-warning-background::before { opacity: .08; }
.fcps-dark-header { margin-bottom: 3rem; }
.benefits-dark-header { margin-bottom: 3rem; }
.other-solutions-subtitle { margin-bottom: 3rem; }
.use-case-category { margin-bottom: 2.5rem; }
.category-header { margin-bottom: 1.5rem; }
.category-title { color: #fff; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }

.fcps-dark-card, .benefit-dark-card, .use-case-card, .dpdp-product-card,
.dpdp-stat-box, .dpdp-penalty-card, .module-crosslink-card {
	background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark);
	-webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 20px;
}
.fcps-dark-card:hover, .benefit-dark-card:hover, .use-case-card:hover, .dpdp-product-card:hover {
	border-color: rgba(255, 255, 255, .32); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8);
}
.fcps-dark-card::before, .benefit-dark-card::before, .use-case-card::before { display: none; }
.fcps-dark-icon-wrapper, .benefit-dark-icon-wrapper, .use-case-icon, .dpdp-product-icon-wrapper {
	background: rgba(255, 255, 255, .07);
}
.fcps-dark-card:hover .fcps-dark-icon-wrapper, .benefit-dark-card:hover .benefit-dark-icon-wrapper,
.use-case-card:hover .use-case-icon, .dpdp-product-card:hover .dpdp-product-icon-wrapper {
	background: rgba(238, 29, 35, .18); transform: none;
}
.use-case-card:hover .use-case-icon { color: var(--accent-soft); }
.dpdp-product-card:hover .dpdp-product-icon-wrapper iconify-icon { color: var(--accent-soft); }
.fcps-dark-card:hover .dpdp-module-icon { color: var(--accent-soft); }
.use-case-card-title { text-transform: none; letter-spacing: -.01em; font-family: var(--font-display); }
.dpdp-product-fullname { text-transform: none; letter-spacing: 0; color: var(--accent-soft); }
.dpdp-stat-box .value { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.dpdp-timeline-item strong { color: var(--accent-soft); }
.dpdp-penalty-card .amount { color: var(--accent-soft); }
.benefit-dark-card-text { font-size: .95rem; }      /* fixes a legacy bug: it used a radius token as font-size */
.title-light { font-weight: 600; }

/* 8 ── STATS BAND (light) ──────────────────────────────────────────────── */
.stats-gradient-bg { background: var(--bg); padding: var(--section-pad) 0 3rem; }
.stats-gradient-bg::before, .stats-gradient-bg::after { display: none; }
.stat-card {
	background: var(--surface); border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none;
	align-items: flex-start; text-align: left; padding: 1.75rem;
}
.stat-card::before { display: none; }
.stat-card:hover { background: var(--surface); border-color: var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.stat-card:hover .stat-icon-wrapper { transform: none; }
.stat-icon-wrapper { background: var(--bg); box-shadow: none; }
.stat-number-wrapper { justify-content: flex-start; align-items: baseline; }
.stat-number {
	font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -.04em;
	color: var(--ink); text-shadow: none; font-variant-numeric: tabular-nums;
}
.stat-currency, .stat-unit { color: var(--accent); font-size: 1.4rem; align-self: auto; margin: 0; }
.stat-label { color: var(--ink-2); }
.stat-sublabel { color: var(--ink-3); font-size: .8rem; margin: 0; }
.formula-card { background: transparent; border: 1px dashed var(--line-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
.formula-card:hover { background: transparent; border-color: var(--ink-3); }
.formula-text { color: var(--ink-2); }
.formula-label { color: var(--ink); }
.formula-highlight { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.currency-toggle { background: var(--surface); border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.currency-label { color: var(--ink-3); }
.currency-label.active { color: var(--ink); }
.toggle-slider { background: var(--bg-2); }
input:checked + .toggle-slider { background: var(--accent); }

/* 9 ── FAQ ─────────────────────────────────────────────────────────────── */
.dpdp-faq-section .accordion-item { border: 1px solid var(--line); border-radius: 16px !important; background: var(--surface); }
.dpdp-faq-section .accordion-button { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; padding: 1.15rem 1.4rem; }
.dpdp-faq-section .accordion-button:not(.collapsed) { background: var(--bg); color: var(--ink); }
.dpdp-faq-section .accordion-body { color: var(--ink-2); line-height: 1.75; }

/* 10 ── MISC FIXES ─────────────────────────────────────────────────────── */
.fcps-scroll-top { display: none; }                   /* duplicate of #scrollTopButton, sat on top of it */
#scrollTopButton, .fcps-scroll-top { background: var(--ink); box-shadow: var(--shadow-lg); }
#scrollTopButton:hover { background: var(--accent); box-shadow: var(--shadow-lg); }
.dpdp-timeline-item { background: rgba(255, 255, 255, .05); }
.dpdp-suite-header, .fcps-dark-header { margin-left: auto; margin-right: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* 11 ── FOOTER ────────────────────────────────────────────────────────── */
.footer-column-title { text-transform: none; letter-spacing: -.01em; font-family: var(--font-display); font-weight: 600; }
.footer-title-underline { background: var(--accent); width: 40px; height: 2px; }
.footer-links a:hover, .contact-link:hover { color: var(--accent-soft); }
.contact-icon { color: var(--accent-soft); }
.social-icon:hover { background: #fff; color: var(--ink); }
.footer-bottom { background: rgba(0, 0, 0, .25); }

/* 12 ── MODULE PAGES (cmp / dspm / dprm / dim) ────────────────────────── */
.module-hero-bg::before { background-image: radial-gradient(rgba(13, 19, 36, .16) 1px, transparent 1.3px); background-size: 26px 26px; }
.module-hero-bg::after { display: none; }
.module-hero-tagline { color: var(--ink); font-family: var(--font-display); font-weight: 500; }
.module-hero-chip { border-color: var(--line); box-shadow: none; }
.module-hero-visual-icon { background: var(--ink); box-shadow: none; }
.module-stat-icon, .module-feature-icon, .capability-icon { background: var(--bg); }
.module-feature-card:hover .module-feature-icon, .capability-row:hover .capability-icon { background: var(--bg-2); }
.module-feature-card:hover .module-feature-icon iconify-icon,
.capability-row:hover .capability-icon iconify-icon { color: var(--accent); }
.capability-badge { background: var(--bg); color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.module-footer { background: var(--ink); }
.module-footer a { color: var(--accent-soft); }
.module-crosslink-icon { background: rgba(255, 255, 255, .07); }
.module-crosslink-icon iconify-icon { color: var(--accent-soft); }

/* 13 ── LOADER · CURSOR · PARTICLES · SCROLL PROGRESS · REVEAL ─────────── */

/* loader (markup snippet goes right after <body>) */
#xbt-loader {
	position: fixed; inset: 0; z-index: 10002; background: var(--bg); color: var(--ink);
	display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.25rem, 3vw, 2.5rem);
	transition: transform .9s cubic-bezier(.76, 0, .24, 1);
	animation: xbtLoaderFailsafe .6s ease 6s forwards;   /* if JS never runs, still get out of the way */
}
#xbt-loader.is-done { transform: translateY(-100%); pointer-events: none; }
.xbt-skip-loader #xbt-loader { display: none; }
body:has(#xbt-loader:not(.is-done)) { overflow: hidden; }
.xbt-loader-brand { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; }
.xbt-loader-brand img { height: 36px; width: auto; }
.xbt-loader-count { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 22vw, 16rem); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.xbt-loader-count small { font-size: .32em; letter-spacing: 0; margin-left: .1em; color: var(--accent); }
.xbt-loader-bar { height: 2px; background: var(--line); margin-top: 1.5rem; overflow: hidden; }
.xbt-loader-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
@keyframes xbtLoaderFailsafe { to { opacity: 0; visibility: hidden; } }
/* hold the hero entrance until the loader has left */
body:has(#xbt-loader:not(.is-done)) .dpdp-hero-banner * { animation-play-state: paused; }

/* scroll progress */
.xbt-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; pointer-events: none; }
.xbt-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* cursor follower (native cursor is left alone) */
.xbt-cursor {
	position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
	width: 34px; height: 34px; border: 1.5px solid var(--accent); border-radius: 50%;
	opacity: 0; transition: opacity .3s ease, width .3s cubic-bezier(.22, 1, .36, 1), height .3s cubic-bezier(.22, 1, .36, 1), background .3s ease;
	will-change: transform;
}
.xbt-cursor.is-on { opacity: .9; }
.xbt-cursor.is-link { width: 64px; height: 64px; background: rgba(238, 29, 35, .10); }

/* particles */
.xbt-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* scroll reveal — gated on html.js-fx so no-JS visitors still see everything */
.js-fx .xbt-reveal:not(.is-in) { opacity: 0; translate: 0 18px; }
.js-fx .xbt-reveal.is-in { animation: xbtIn .8s cubic-bezier(.22, 1, .36, 1) var(--xbt-d, 0ms) backwards; }
@keyframes xbtIn { from { opacity: 0; translate: 0 18px; } }
/* below-the-fold entrance animations from the old CSS are replaced by the reveal above */
.feature-item, .data-discovery-feature-card, .benefit-card, .ldrs-feature-card, .fcps-dark-card,
.benefit-dark-card, .use-case-card, .solution-grid article, .highlight-item, .dpdp-info-card {
	animation: none;
}

/* 14 ── RESPONSIVE + ACCESSIBILITY ─────────────────────────────────────── */
@media (max-width: 991px) {
	.xbt-utility { display: none; }
	.dpdp-hero-bg { padding-top: 130px; }
	.nav-menu { background: var(--bg); }
}
@media (max-width: 576px) {
	.dpdp-hero-bg { padding-top: 112px; padding-bottom: 3.5rem; }
	.xbt-loader-count { font-size: 28vw; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js-fx .xbt-reveal:not(.is-in) { opacity: 1; translate: none; }
	.xbt-cursor { display: none; }
}
@media (hover: none), (pointer: coarse) { .xbt-cursor { display: none; } }

/* 15 ── TOP MARQUEE (DPDP COUNTDOWN + HIGHLIGHTS) ───────────────────────── */
:root { --xbt-dl-h: 0px; } /* JS sets this to the marquee's real height */

.xbt-marquee {
	position: relative; display: flex; align-items: center;
	background: var(--ink); color: #fff; font-size: .82rem;
}
.xbt-mq-viewport {
	flex: 1; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.xbt-mq-close {
	flex-shrink: 0; width: 26px; height: 26px; margin: 0 .75rem 0 .25rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .1); border: 1px solid var(--line-dark); border-radius: 50%;
	color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
	transition: background .2s ease, border-color .2s ease;
}
.xbt-mq-close:hover { background: var(--accent); border-color: var(--accent); }
.xbt-mq-close:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.xbt-mq-track {
	display: flex; width: max-content; will-change: transform;
	animation: xbtMarquee var(--xbt-mq-dur, 40s) linear infinite;
}
.xbt-marquee:hover .xbt-mq-track,
.xbt-marquee:focus-within .xbt-mq-track { animation-play-state: paused; }
@keyframes xbtMarquee { to { transform: translateX(-50%); } }

.xbt-mq-group { display: flex; align-items: center; flex-shrink: 0; }
.xbt-mq-item {
	display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 0;
	white-space: nowrap; color: #fff; text-decoration: none; font-weight: 500;
}
a.xbt-mq-item:hover { color: var(--accent-soft); }
.xbt-mq-item iconify-icon { color: var(--accent-soft); font-size: 1.05rem; }
.xbt-mq-sep { margin: 0 1.6rem; color: var(--accent-soft); font-size: .5rem; opacity: .8; }
.xbt-mq-label { color: var(--on-dark-2); }
.xbt-mq-clock {
	font-family: var(--font-display); font-weight: 700; letter-spacing: .02em;
	font-variant-numeric: tabular-nums; background: var(--accent);
	padding: .08rem .65rem; border-radius: 999px;
}
.xbt-mq-award, .xbt-mq-award iconify-icon { color: #ffd86b; }

/* hero + mobile menu offset by the marquee height */
.dpdp-hero-bg { padding-top: calc(172px + var(--xbt-dl-h)); }
@media (max-width: 991px) {
	.dpdp-hero-bg { padding-top: calc(130px + var(--xbt-dl-h)); }
	.nav-menu { top: calc(76px + var(--xbt-dl-h)); max-height: calc(100vh - 76px - var(--xbt-dl-h)); }
}
@media (max-width: 576px) {
	.dpdp-hero-bg { padding-top: calc(112px + var(--xbt-dl-h)); }
	.xbt-marquee { font-size: .76rem; }
}
/* reduced motion: no auto-scroll, let the user swipe/scroll it manually */
@media (prefers-reduced-motion: reduce) {
	.xbt-mq-track { animation: none !important; }
	.xbt-mq-viewport { overflow-x: auto; }
}


/* ── LDRS section: dark variant (scoped, other sections unaffected) ── */
#LDRS_FeatureSection .ldrs-background { background: var(--ink); }

/* left column */
#LDRS_FeatureSection .ldrs-title { color: #fff; }
#LDRS_FeatureSection .ldrs-intro { color: var(--on-dark-2); }
#LDRS_FeatureSection .ldrs-badge {
	background: rgba(238, 29, 35, .16);
	border-color: rgba(238, 29, 35, .45);
	color: var(--accent-soft);
}
#LDRS_FeatureSection .highlight-item {
	background: rgba(255, 255, 255, .04);
	border-color: var(--line-dark);
}
#LDRS_FeatureSection .highlight-item:hover { border-color: rgba(255, 255, 255, .32); }
#LDRS_FeatureSection .highlight-item span { color: #fff; }
#LDRS_FeatureSection .highlight-icon { color: var(--accent-soft); }

/* right column cards */
#LDRS_FeatureSection .ldrs-feature-card {
	background: rgba(255, 255, 255, .04);
	border-color: var(--line-dark);
}
#LDRS_FeatureSection .ldrs-feature-card::before { display: none; }
#LDRS_FeatureSection .ldrs-feature-card:hover {
	border-color: rgba(255, 255, 255, .32);
	box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8);
}
#LDRS_FeatureSection .feature-card-title { color: #fff; }
#LDRS_FeatureSection .feature-card-description { color: var(--on-dark-2); }
#LDRS_FeatureSection .feature-card-footer iconify-icon { color: var(--accent-soft); }

/* icon tile: kept light so your existing PNG icons stay visible */
#LDRS_FeatureSection .feature-card-icon { background: rgba(255, 255, 255, .92); }
#LDRS_FeatureSection .ldrs-feature-card:hover .feature-card-icon { background: #fff; }