/*
 * Public website theme matched to the MIA dashboard UI.
 * This stylesheet intentionally reuses the dashboard's visual tokens:
 * Multan teal, soft canvas, white/dark surfaces, 16px panels,
 * 11-13px controls, restrained shadows and short lift animations.
 */
:root {
  /* Public theme bridge. Editable values live in assets/css/public-theme.css. */
  --site-accent: #0f766e;
  --site-accent-strong: #115e59;
  --site-accent-bright: #14b8a6;
  --site-accent-rgb: 15, 118, 110;
  --site-accent-contrast: #fff;
  --site-page: #f3f6f8;
  --site-panel: #fff;
  --site-panel-soft: #f8fafb;
  --site-border: #dfe5e8;
  --site-text: #172126;
  --site-muted: #65737b;
  --site-hero-copy: #fff;
  --site-hero-text: #172126;
  --site-hero-muted: #65737b;
  --site-footer: #111a20;
  --site-footer-panel: #142127;
  --site-footer-border: #27343b;
  --site-footer-text: #eef5f6;
  --site-footer-muted: #9aabb2;
  --site-footer-faint: #74868e;
  --site-shadow-rgb: 15, 23, 42;
  --site-bubble-opacity: .34;
  --site-bubble-blur: 0px;
  --site-bubble-1: color-mix(in srgb, var(--site-accent) 22%, transparent);
  --site-bubble-2: color-mix(in srgb, var(--site-accent-bright) 17%, transparent);
  --site-bubble-3: color-mix(in srgb, var(--site-panel) 76%, transparent);

  --brand: var(--site-accent);
  --brand-2: var(--site-accent-strong);
  --brand-3: var(--site-accent-bright);
  --brand-rgb: var(--site-accent-rgb);
  --accent-contrast: var(--site-accent-contrast);
  --surface: var(--site-panel);
  --surface-soft: var(--site-panel-soft);
  --canvas: var(--site-page);
  --border: var(--site-border);
  --text: var(--site-text);
  --muted: var(--site-muted);
  --hero-copy-surface: var(--site-hero-copy);
  --hero-copy-text: var(--site-hero-text);
  --hero-copy-muted: var(--site-hero-muted);
  --footer-surface: var(--site-footer);
  --footer-panel: var(--site-footer-panel);
  --footer-border: var(--site-footer-border);
  --footer-text: var(--site-footer-text);
  --footer-muted: var(--site-footer-muted);
  --footer-faint: var(--site-footer-faint);
  --shadow-rgb: var(--site-shadow-rgb);
  --success: var(--site-success);
  --success-strong: var(--site-success-strong);
  --danger: var(--site-danger);
  --danger-strong: var(--site-danger-strong);
  --highlight: var(--site-highlight);
  --highlight-soft: var(--site-highlight-soft);
  --sidebar: 270px;
  --shadow: 0 10px 30px rgba(var(--shadow-rgb), .07);
  --shadow-hover: 0 16px 38px rgba(var(--shadow-rgb), .11);
  --radius: 16px;
  --radius-sm: 13px;
  --control-radius: 11px;
  --header-height: 76px;
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-2);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--canvas);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--border);
  --bs-tertiary-bg: var(--surface-soft);
  --bs-form-control-bg: var(--surface-soft);
}
[data-bs-theme="dark"] {
  --site-page: #0b1216;
  --site-panel: #111a20;
  --site-panel-soft: #142127;
  --site-border: #27343b;
  --site-text: #eef5f6;
  --site-muted: #9aabb2;
  --site-shadow-rgb: 0, 0, 0;
  --shadow: 0 10px 30px rgba(var(--shadow-rgb), .25);
  --shadow-hover: 0 18px 42px rgba(var(--shadow-rgb), .34);
}


* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 102px; }
html[data-bs-theme="dark"] { color-scheme: dark; }
body.hd-site {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.hd-site::selection { color: var(--accent-contrast); background: var(--brand); }
body.hd-site { position: relative; isolation: isolate; }
.hd-page-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--site-bubble-opacity);
  filter: blur(var(--site-bubble-blur));
  transform: translateZ(0);
}
.hd-page-decor::before,
.hd-page-decor::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  min-width: 520px;
  min-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent), transparent 67%);
  animation: hdAmbientGlow 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hd-page-decor::before { left: -20vw; top: -22vw; }
.hd-page-decor::after { right: -24vw; bottom: -24vw; animation-delay: -8s; animation-direction: alternate-reverse; }
.hd-page-bubble {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --scroll-y: 0px;
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  background:
    radial-gradient(circle at 29% 23%, var(--highlight) 0 4%, transparent 5%),
    radial-gradient(circle at 36% 30%, var(--site-bubble-3) 0 9%, var(--site-bubble-2) 29%, var(--site-bubble-1) 67%, transparent 73%);
  box-shadow:
    inset -12px -18px 30px color-mix(in srgb, var(--brand) 9%, transparent),
    inset 8px 8px 18px var(--highlight-soft),
    0 20px 55px color-mix(in srgb, var(--brand) 13%, transparent);
  will-change: transform, opacity;
  transform-origin: center;
}
.hd-page-bubble::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid color-mix(in srgb, #fff 42%, transparent);
  border-radius: inherit;
  opacity: .55;
  animation: hdBubbleInnerPulse 4.8s ease-in-out infinite;
}
.hd-page-bubble:nth-child(1) { width: 210px; height: 210px; left: -68px; top: 9%; animation: hdBubbleFloatA 13s ease-in-out infinite; }
.hd-page-bubble:nth-child(2) { width: 92px; height: 92px; left: 12%; top: 67%; animation: hdBubbleFloatB 10.5s ease-in-out -4s infinite; }
.hd-page-bubble:nth-child(3) { width: 148px; height: 148px; right: 4%; top: 15%; animation: hdBubbleFloatC 14s ease-in-out -7s infinite; }
.hd-page-bubble:nth-child(4) { width: 64px; height: 64px; right: 22%; top: 53%; animation: hdBubbleFloatD 8.5s ease-in-out -2s infinite; }
.hd-page-bubble:nth-child(5) { width: 248px; height: 248px; right: -108px; bottom: 1%; animation: hdBubbleFloatB 16s ease-in-out -8s infinite reverse; }
.hd-page-bubble:nth-child(6) { width: 82px; height: 82px; left: 34%; top: 28%; animation: hdBubbleFloatC 10s ease-in-out -5s infinite reverse; }
.hd-page-bubble:nth-child(7) { width: 122px; height: 122px; left: 3%; bottom: 4%; animation: hdBubbleFloatD 13s ease-in-out -3s infinite reverse; }
.hd-page-bubble:nth-child(8) { width: 50px; height: 50px; right: 37%; bottom: 14%; animation: hdBubbleFloatA 7.8s ease-in-out -4s infinite; }
.hd-page-bubble:nth-child(9) { width: 38px; height: 38px; left: 55%; top: 11%; animation: hdBubbleFloatD 7s ease-in-out -1s infinite; }
.hd-page-bubble:nth-child(10) { width: 104px; height: 104px; left: 68%; top: 76%; animation: hdBubbleFloatA 11s ease-in-out -6s infinite reverse; }
.hd-page-bubble:nth-child(11) { width: 70px; height: 70px; left: 23%; top: 48%; animation: hdBubbleFloatB 9s ease-in-out -5s infinite; }
.hd-page-bubble:nth-child(12) { width: 166px; height: 166px; right: 12%; bottom: 35%; animation: hdBubbleFloatC 15s ease-in-out -10s infinite; }
.hd-announcement, main, .hd-footer { position: relative; z-index: 1; }
@keyframes hdAmbientGlow {
  0% { transform: translate3d(-4%, -3%, 0) scale(.92); opacity: .45; }
  50% { transform: translate3d(8%, 6%, 0) scale(1.08); opacity: .72; }
  100% { transform: translate3d(-1%, 12%, 0) scale(1); opacity: .52; }
}
@keyframes hdBubbleInnerPulse {
  0%,100% { transform: scale(.82); opacity: .25; }
  50% { transform: scale(1.08); opacity: .68; }
}
@keyframes hdBubbleFloatA {
  0%,100% { transform: translate3d(calc(var(--pointer-x) + 0px), calc(var(--pointer-y) + var(--scroll-y) + 0px), 0) rotate(0deg) scale(.96); }
  24% { transform: translate3d(calc(var(--pointer-x) + 32px), calc(var(--pointer-y) + var(--scroll-y) - 44px), 0) rotate(8deg) scale(1.08); }
  52% { transform: translate3d(calc(var(--pointer-x) - 19px), calc(var(--pointer-y) + var(--scroll-y) - 12px), 0) rotate(-7deg) scale(1.02); }
  78% { transform: translate3d(calc(var(--pointer-x) + 14px), calc(var(--pointer-y) + var(--scroll-y) + 31px), 0) rotate(5deg) scale(.91); }
}
@keyframes hdBubbleFloatB {
  0%,100% { transform: translate3d(calc(var(--pointer-x) + 0px), calc(var(--pointer-y) + var(--scroll-y) + 0px), 0) rotate(0deg) scale(1); }
  28% { transform: translate3d(calc(var(--pointer-x) - 38px), calc(var(--pointer-y) + var(--scroll-y) - 31px), 0) rotate(-16deg) scale(1.12); }
  57% { transform: translate3d(calc(var(--pointer-x) + 20px), calc(var(--pointer-y) + var(--scroll-y) - 48px), 0) rotate(11deg) scale(.94); }
  82% { transform: translate3d(calc(var(--pointer-x) + 36px), calc(var(--pointer-y) + var(--scroll-y) + 18px), 0) rotate(20deg) scale(1.04); }
}
@keyframes hdBubbleFloatC {
  0%,100% { transform: translate3d(calc(var(--pointer-x) + 0px), calc(var(--pointer-y) + var(--scroll-y) + 0px), 0) rotate(0deg) scale(.94); }
  22% { transform: translate3d(calc(var(--pointer-x) + 18px), calc(var(--pointer-y) + var(--scroll-y) + 34px), 0) rotate(12deg) scale(1.08); }
  49% { transform: translate3d(calc(var(--pointer-x) + 42px), calc(var(--pointer-y) + var(--scroll-y) - 17px), 0) rotate(25deg) scale(1.01); }
  76% { transform: translate3d(calc(var(--pointer-x) - 26px), calc(var(--pointer-y) + var(--scroll-y) - 38px), 0) rotate(-13deg) scale(.89); }
}
@keyframes hdBubbleFloatD {
  0%,100% { transform: translate3d(calc(var(--pointer-x) + 0px), calc(var(--pointer-y) + var(--scroll-y) + 0px), 0) rotate(0deg) scale(.9); }
  33% { transform: translate3d(calc(var(--pointer-x) + 24px), calc(var(--pointer-y) + var(--scroll-y) - 22px), 0) rotate(32deg) scale(1.18); }
  66% { transform: translate3d(calc(var(--pointer-x) - 28px), calc(var(--pointer-y) + var(--scroll-y) + 26px), 0) rotate(-22deg) scale(1); }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hd-container { width: min(100% - 48px, 1480px); margin-inline: auto; }
.hd-skip { position: fixed; left: 16px; top: -100px; z-index: 9999; padding: 11px 15px; border: 1px solid var(--border); border-radius: 0 0 11px 11px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 800; }
.hd-skip:focus { top: 0; }

/* Dashboard-style utility language */
.hd-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--brand); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hd-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.hd-kicker.light { color: var(--brand); }
.hd-kicker.light i { background: var(--brand); }
.hd-btn { min-height: 44px; padding: 10px 15px; border: 1px solid transparent; border-radius: var(--control-radius); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .82rem; font-weight: 800; line-height: 1; transition: transform .28s cubic-bezier(.2,.8,.2,1), background .24s ease, border-color .24s ease, color .24s ease, box-shadow .28s ease; }
.hd-btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 15%, transparent); }
.hd-btn:active { transform: translateY(-1px) scale(.985); }
.hd-btn:focus-visible, .hd-nav-links a:focus-visible, .hd-icon-action:focus-visible, .hd-mobile-theme-toggle:focus-visible, .hd-header-cta:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.hd-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--accent-contrast); box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 18%, transparent); }
.hd-btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--accent-contrast); }
.hd-btn-dark { background: var(--text); border-color: var(--text); color: var(--surface); }
.hd-btn-dark:hover { background: var(--brand); border-color: var(--brand); color: var(--accent-contrast); }
.hd-btn-light, .hd-btn-glass { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .05); }
.hd-btn-light:hover, .hd-btn-glass:hover { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.hd-btn-outline-light { border-color: color-mix(in srgb, var(--brand) 42%, var(--border)); color: var(--brand); background: transparent; }
.hd-btn-outline-light:hover { background: var(--brand); border-color: var(--brand); color: var(--accent-contrast); }
.hd-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: .82rem; font-weight: 800; }
.hd-text-link i { transition: transform .15s ease; }
.hd-text-link:hover i { transform: translateX(3px); }
.hd-text-link.light { color: var(--brand); }

/* Announcement and topbar */
.hd-announcement { border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--text); font-size: .68rem; font-weight: 800; }
.hd-announcement .hd-container { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hd-announcement p { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--text); letter-spacing: .055em; text-transform: uppercase; }
.hd-announcement .hd-container > div { display: flex; gap: 18px; color: var(--text); }
.hd-announcement a { display: inline-flex; align-items: center; gap: 7px; color: var(--text); transition: color .15s ease, opacity .15s ease; }
.hd-announcement a:hover { color: var(--text); opacity: .72; }

.hd-header { position: sticky; top: 0; z-index: 1000; min-height: var(--header-height); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); backdrop-filter: blur(15px); transition: box-shadow .2s ease, background .2s ease; }
.hd-header.scrolled { background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 9px 26px rgba(var(--shadow-rgb), .075); }
.hd-header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: 28px; }
.hd-logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hd-logo-mark { width: 42px; height: 42px; position: relative; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--brand), var(--brand-3)); color: var(--accent-contrast); overflow: hidden; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 25%, transparent); }
.hd-logo-mark::after { content: ""; position: absolute; inset: auto -12px -14px auto; width: 38px; height: 38px; border: 8px solid rgba(255,255,255,.16); border-radius: 50%; }
.hd-logo-mark b { position: relative; z-index: 1; font-size: 1.2rem; font-weight: 900; }
.hd-logo-mark i { display: none; }
.hd-logo-copy { display: grid; grid-template-columns: auto auto; column-gap: 6px; line-height: 1; }
.hd-logo-copy strong { font-size: 1.02rem; font-weight: 850; letter-spacing: -.015em; }
.hd-logo-copy em { align-self: center; color: var(--brand); font-size: .63rem; font-style: normal; font-weight: 900; letter-spacing: .1em; }
.hd-logo-copy small { grid-column: 1 / -1; margin-top: 6px; color: var(--muted); font-size: .58rem; letter-spacing: .045em; }
.hd-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; }
.hd-nav.collapse:not(.show) { display: flex; }
.hd-nav-links { display: flex; align-items: center; justify-content: center; gap: 3px; }
.hd-nav-links a { padding: 10px 12px; border-radius: 11px; color: var(--text); font-size: .78rem; font-weight: 700; transition: background .15s ease, color .15s ease, transform .15s ease; }
.hd-nav-links a:hover, .hd-nav-links a.active { color: var(--text); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.hd-nav-links a:hover { transform: translateY(-1px); }
.hd-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hd-icon-action { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--brand); box-shadow: 0 3px 12px rgba(var(--shadow-rgb), .04); transition: .15s ease; }
.hd-icon-action:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); transform: translateY(-2px); }
.hd-theme-toggle { cursor: pointer; color: var(--text); }
.hd-theme-toggle i { transition: transform .28s cubic-bezier(.2,.75,.2,1), color .2s ease; }
.hd-theme-toggle:hover i { color: var(--brand); transform: rotate(18deg) scale(1.08); }
.hd-theme-toggle[aria-pressed="true"] { color: var(--brand-3); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.hd-header-cta { min-height: 44px; padding: 10px 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--brand); border-radius: 11px; background: var(--brand); color: var(--accent-contrast); font-size: .8rem; font-weight: 800; box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 18%, transparent); transition: .15s ease; }
.hd-header-cta:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--accent-contrast); transform: translateY(-2px); }
.hd-nav-toggle { display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); padding: 10px; }
.hd-nav-toggle span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: var(--text); transition: .2s ease; }
.hd-nav-mobile-actions { display: none; }

/* Hero: stable three-slide panel with a white 30/70 curved diagonal split */
.hd-hero { position: relative; padding: 24px 0 0; background: var(--canvas); overflow: hidden; }
.hd-hero-slides { position: relative; isolation: isolate; width: min(95vw, 1900px); height: 80vh; min-height: 640px; max-height: 960px; margin-inline: auto; border: 1px solid var(--border); border-radius: 20px; background: var(--hero-copy-surface); box-shadow: var(--shadow); overflow: hidden; }
.hd-hero-slides .hd-hero-content { width: 100%; max-width: none; margin: 0; padding-inline: clamp(28px, 3.2vw, 60px); }
.hd-hero-slide { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.015); transition: opacity .72s ease, visibility .72s ease, transform .9s cubic-bezier(.2,.72,.2,1); }
.hd-hero-slide .hd-hero-copy > * { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .65s cubic-bezier(.2,.75,.2,1); }
.hd-hero-slide .hd-hero-copy > *:nth-child(2) { transition-delay: .06s; }
.hd-hero-slide .hd-hero-copy > *:nth-child(3) { transition-delay: .12s; }
.hd-hero-slide .hd-hero-copy > *:nth-child(4) { transition-delay: .18s; }
.hd-hero-slide .hd-hero-copy > *:nth-child(5) { transition-delay: .24s; }
.hd-hero-slide.active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
.hd-hero-slide.active .hd-hero-copy > * { opacity: 1; transform: none; }
.hd-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: color-mix(in srgb, var(--brand) 8%, var(--canvas)); }
.hd-hero-media::before { content: ""; position: absolute; inset: 16px; z-index: 2; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; pointer-events: none; }
.hd-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x) var(--focus-y); filter: saturate(.88) contrast(.98); transform: scale(1.025); transition: transform 6.5s ease; }
.hd-hero-slide.active .hd-hero-media img { transform: scale(1.095) translate3d(1.1%,-.5%,0); filter: saturate(.98) contrast(1); }
.hd-hero-shade { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; background: linear-gradient(90deg, transparent 34%, rgba(0,0,0,.03) 52%, rgba(0,0,0,.15) 100%); }
.hd-hero-shade::before { content: ""; position: absolute; left: -9%; top: -12%; width: 43%; height: 124%; background: var(--hero-copy-surface); border-top-right-radius: 48% 18%; border-bottom-right-radius: 48% 18%; box-shadow: 16px 0 36px rgba(var(--shadow-rgb),.08), 1px 0 0 var(--border); transform: skewX(-7deg); transform-origin: center; }
.hd-hero-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 48%, rgba(0,0,0,.13)); }
.hd-hero-content { position: relative; z-index: 3; height: 100%; min-height: 640px; display: flex; align-items: center; }
.hd-hero-copy { width: 30%; min-width: 360px; max-width: 500px; padding: 42px 24px 92px 0; color: var(--hero-copy-text); }
.hd-hero-title { margin: 0; color: var(--hero-copy-text); font-size: clamp(2.75rem, 4vw, 4.8rem); line-height: .96; letter-spacing: -.055em; font-weight: 850; }
.hd-hero-title span, .hd-hero-title strong { display: block; }
.hd-hero-title strong { color: var(--brand); }
.hd-hero-copy > p { max-width: 590px; margin: 20px 0 0; color: var(--hero-copy-muted); font-size: 1rem; }
.hd-hero-copy .hd-kicker { color: var(--brand); }
.hd-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.hd-hero-copy .hd-btn-glass { background: var(--hero-copy-surface); border-color: var(--site-border); color: var(--hero-copy-text); }
.hd-hero-trust { display: flex; flex-wrap: wrap; gap: 11px 19px; margin-top: 25px; color: var(--hero-copy-muted); font-size: .72rem; font-weight: 700; }
.hd-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hd-hero-trust i { color: var(--brand); }
.hd-hero-bottom { position: relative; z-index: 6; margin-top: -70px; }
.hd-hero-bottom > .hd-container { width: min(95vw, 1900px); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.hd-hero-search { width: min(900px, calc(100% - 210px)); min-height: 88px; padding: 13px; display: grid; grid-template-columns: 235px minmax(280px, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 38px rgba(var(--shadow-rgb),.13); }
.hd-search-title { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.hd-search-title > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: 1rem; }
.hd-search-title strong, .hd-search-title small { display: block; }
.hd-search-title strong { font-size: .82rem; }
.hd-search-title small { margin-top: 2px; color: var(--muted); font-size: .67rem; }
.hd-search-input { height: 48px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); transition: border-color .15s ease, box-shadow .15s ease; }
.hd-search-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.hd-search-input input { min-width: 0; flex: 1; height: 100%; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .8rem; }
.hd-search-input input::placeholder { color: var(--muted); }
.hd-search-input button { height: calc(100% - 6px); margin-right: 3px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--brand); color: var(--accent-contrast); font-size: .75rem; font-weight: 800; transition: background .15s ease; }
.hd-search-input button:hover { background: var(--brand-2); }
.hd-hero-search > a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.hd-hero-controls { min-height: 46px; padding: 5px 7px; display: flex; align-items: center; gap: 3px; border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 14px 32px rgba(var(--shadow-rgb),.16); backdrop-filter: blur(12px); }
.hd-hero-controls > button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); transition: background .15s ease, color .15s ease, transform .15s ease; }
.hd-hero-controls > button:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); transform: translateY(-1px); }
.hd-hero-dots { display: flex; align-items: center; gap: 2px; padding-inline: 2px; }
.hd-hero-dots button { width: 22px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; }
.hd-hero-dots span { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 30%, var(--border)); transition: width .22s ease, background .22s ease; }
.hd-hero-dots button.active span { width: 20px; background: var(--brand); }

/* Quick links and dashboard metrics */
.hd-quick-strip { padding: 18px 0 0; }
.hd-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hd-quick-grid > a { min-height: 95px; padding: 16px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: .15s ease; overflow: hidden; }
.hd-quick-grid > a:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.hd-quick-grid > a > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: 1.12rem; }
.hd-quick-grid strong, .hd-quick-grid small { display: block; }
.hd-quick-grid strong { font-size: .9rem; }
.hd-quick-grid small { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.hd-quick-grid > a > i { color: var(--brand); opacity: .5; transition: transform .15s ease, opacity .15s ease; }
.hd-quick-grid > a:hover > i { opacity: 1; transform: translate(2px,-2px); }

/* Shared sections */
.hd-section { padding: 72px 0 0; }
.hd-section:last-of-type { padding-bottom: 72px; }
.hd-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.hd-section-head.split { align-items: flex-start; }
.hd-section-head > div { max-width: 800px; }
.hd-section-head h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 850; }
.hd-section-head p, .hd-section-head.split > p { margin: 8px 0 0; max-width: 620px; color: var(--muted); font-size: .9rem; }
.hd-section-head.light, .hd-section-head.light h2, .hd-section-head.light p { color: var(--text); }

.hd-intro .hd-section-head, .hd-why .hd-section-head { padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.hd-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.hd-stats article { min-height: 112px; padding: 17px; position: relative; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: .15s ease; }
.hd-stats article:hover { border-color: var(--brand); transform: translateY(-2px); }
.hd-stats article::after { content: ""; position: absolute; right: -22px; top: -26px; width: 88px; height: 88px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 7%, transparent); }
.hd-stats article > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: 1.15rem; }
.hd-stats strong, .hd-stats small { display: block; }
.hd-stats strong { font-size: 1.25rem; line-height: 1.2; }
.hd-stats small { margin-top: 5px; color: var(--muted); font-size: .72rem; }

/* Product cards */
.hd-bike-grid, .hd-catalog-bike-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.hd-bike-card, .hd-catalog-bike-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.hd-bike-card:hover, .hd-catalog-bike-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.hd-bike-visual, .hd-catalog-bike-image { height: 290px; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); background: linear-gradient(145deg, var(--canvas), color-mix(in srgb, var(--brand) 7%, var(--surface))); }
.hd-bike-visual::after, .hd-catalog-bike-image::after { content: ""; position: absolute; width: 72%; height: 23%; left: 14%; bottom: 11%; border-radius: 50%; background: rgba(var(--shadow-rgb),.08); filter: blur(17px); }
.hd-bike-visual img, .hd-catalog-bike-image img { position: relative; z-index: 1; width: 84%; height: 79%; object-fit: contain; transition: transform .22s ease; }
.hd-bike-card:hover .hd-bike-visual img, .hd-catalog-bike-card:hover .hd-catalog-bike-image img { transform: scale(1.035); }
.hd-card-number { position: absolute; left: 14px; top: 13px; z-index: 3; color: var(--muted); font-size: .66rem; font-weight: 850; }
.hd-stock-pill { position: absolute; right: 12px; top: 12px; z-index: 3; min-height: 27px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--muted); backdrop-filter: blur(8px); font-size: .64rem; font-weight: 800; }
.hd-stock-pill i, .hd-stock-text i, .hd-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.hd-catalog-bike-image .hd-stock-pill { top: auto; bottom: 12px; }
.hd-stock-pill.available { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.hd-stock-pill.available i, .hd-stock-text.in i, .hd-live i { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.hd-bike-body, .hd-catalog-bike-body { padding: 17px; }
.hd-bike-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-bike-meta span { padding: 4px 7px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: .61rem; font-weight: 750; }
.hd-bike-body h3, .hd-catalog-bike-body h2 { margin: 10px 0 14px; font-size: 1.05rem; line-height: 1.25; font-weight: 850; }
.hd-catalog-bike-body > p { min-height: 43px; margin: -6px 0 14px; color: var(--muted); font-size: .75rem; }
.hd-bike-bottom, .hd-catalog-price { padding-top: 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--border); }
.hd-bike-bottom small, .hd-catalog-price small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .64rem; }
.hd-bike-bottom strong, .hd-catalog-price strong { font-size: 1rem; }
.hd-bike-bottom > a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--brand); transition: .15s ease; }
.hd-bike-bottom > a:hover { border-color: var(--brand); background: var(--brand); color: var(--accent-contrast); transform: translateY(-2px); }
.hd-catalog-price > a { min-height: 40px; padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; background: var(--brand); color: var(--accent-contrast); font-size: .72rem; font-weight: 800; }
.hd-card-topline { position: absolute; inset: 12px 12px auto; z-index: 3; display: flex; justify-content: space-between; color: var(--muted); font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* Categories are dashboard navigation tiles */
.hd-categories { margin-top: 72px; padding: 26px 0; background: color-mix(in srgb, var(--brand) 5%, var(--canvas)); border-block: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border)); }
.hd-categories .hd-section-head { margin-bottom: 18px; }
.hd-category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.hd-category-grid > a { min-height: 126px; padding: 16px; position: relative; display: flex; align-items: center; gap: 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: .15s ease; }
.hd-category-grid > a:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.hd-category-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: 1.2rem; }
.hd-category-grid strong, .hd-category-grid small { display: block; }
.hd-category-grid strong { font-size: .9rem; }
.hd-category-grid small { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.hd-category-grid > a > i { position: absolute; right: 14px; top: 14px; color: var(--brand); opacity: .45; }

.hd-part-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.hd-part-card, .hd-catalog-part-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: .15s ease; }
.hd-part-card:hover, .hd-catalog-part-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.hd-part-image, .hd-catalog-part-image { height: 190px; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.hd-part-image img, .hd-catalog-part-image img { width: 78%; height: 78%; object-fit: contain; transition: transform .2s ease; }
.hd-part-card:hover img, .hd-catalog-part-card:hover img { transform: scale(1.04); }
.hd-part-body, .hd-catalog-part-body { padding: 14px; }
.hd-part-body > small, .hd-catalog-part-body > small { color: var(--muted); font-size: .62rem; }
.hd-part-body h3, .hd-catalog-part-body h2 { min-height: 40px; margin: 5px 0 12px; font-size: .84rem; line-height: 1.35; font-weight: 800; }
.hd-part-body > div, .hd-catalog-part-bottom { padding-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--border); }
.hd-part-body strong, .hd-catalog-part-bottom strong { font-size: .86rem; }
.hd-stock-text { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .61rem; font-weight: 750; }
.hd-stock-text.out { color: var(--danger); }
.hd-catalog-part-bottom > div { display: grid; gap: 5px; }
.hd-catalog-part-bottom > a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 26%, var(--border)); transition: .15s ease; }
.hd-catalog-part-bottom > a:hover { background: var(--success); color: var(--accent-contrast); transform: translateY(-2px); }
.hd-compatibility { min-height: 49px; margin: 0 0 12px; padding: 9px; display: flex; align-items: flex-start; gap: 8px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: .66rem; }
.hd-compatibility i { color: var(--brand); }
.hd-compatibility small { display: block; color: var(--muted); font-size: .58rem; text-transform: uppercase; }

/* Workshop and wholesale use the same panels, not a separate visual theme */
.hd-service-panel { display: grid; grid-template-columns: .82fr 1.18fr; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.hd-service-visual { min-height: 430px; position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--canvas)); color: var(--brand); }
.hd-service-visual > i { position: relative; z-index: 2; font-size: 7rem; filter: drop-shadow(0 18px 25px color-mix(in srgb, var(--brand) 17%, transparent)); animation: dashboardIconFloat 4.5s ease-in-out infinite; }
.hd-service-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.hd-service-rings i { position: absolute; width: 190px; height: 190px; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 50%; animation: dashboardRingPulse 3.8s ease-in-out infinite; }
.hd-service-rings i:nth-child(2) { width: 270px; height: 270px; animation-delay: -.9s; }
.hd-service-rings i:nth-child(3) { width: 350px; height: 350px; animation-delay: -1.8s; }
.hd-service-label { position: absolute; left: 17px; top: 17px; padding: 6px 9px; border-radius: 999px; background: var(--surface); color: var(--brand); border: 1px solid var(--border); font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.hd-service-note { position: absolute; left: 17px; right: 17px; bottom: 17px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 91%, transparent); backdrop-filter: blur(10px); }
.hd-service-note small, .hd-service-note strong { display: block; }
.hd-service-note small { color: var(--muted); font-size: .63rem; }
.hd-service-note strong { margin-top: 3px; font-size: .78rem; }
.hd-service-copy { padding: clamp(30px,4vw,62px); display: flex; flex-direction: column; justify-content: center; }
.hd-service-copy h2 { max-width: 700px; margin: 0; font-size: clamp(2rem,4vw,3.7rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 850; }
.hd-service-copy > p { max-width: 680px; margin: 15px 0 0; color: var(--muted); }
.hd-check-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 22px; }
.hd-check-grid span { min-height: 43px; padding: 10px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); font-size: .73rem; font-weight: 700; }
.hd-check-grid i { color: var(--brand); }
.hd-service-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }

.hd-wholesale-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: stretch; }
.hd-wholesale-grid > div, .hd-wholesale-card { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.hd-wholesale-grid h2 { max-width: 680px; margin: 0; font-size: clamp(2rem,3.8vw,3.5rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 850; }
.hd-wholesale-grid > div > p { margin: 13px 0 0; color: var(--muted); }
.hd-wholesale-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; }
.hd-wholesale-steps article { padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.hd-wholesale-steps article > span { color: var(--brand); font-size: .63rem; font-weight: 900; }
.hd-wholesale-steps strong, .hd-wholesale-steps small { display: block; }
.hd-wholesale-steps strong { margin-top: 8px; font-size: .78rem; }
.hd-wholesale-steps small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.hd-wholesale-card { position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface)); }
.hd-wholesale-card::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 230px; height: 230px; border: 35px solid color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 50%; }
.hd-wholesale-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.hd-wholesale-card-top span, .hd-wholesale-card-top b { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: .66rem; font-weight: 850; }
.hd-wholesale-card-top b i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.hd-wholesale-card h3 { position: relative; z-index: 1; max-width: 580px; margin: 48px 0 12px; font-size: clamp(1.8rem,3.2vw,3rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 850; }
.hd-wholesale-card p { position: relative; z-index: 1; max-width: 580px; color: var(--muted); }
.hd-wholesale-card .hd-btn { position: relative; z-index: 1; margin-top: 13px; }

/* Offers and trust cards */
.hd-offer-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.hd-offer-grid article { min-height: 155px; padding: 18px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: .15s ease; }
.hd-offer-grid article:hover { border-color: var(--brand); transform: translateY(-2px); }
.hd-offer-grid article > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: 1.1rem; }
.hd-offer-grid small { color: var(--brand); font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.hd-offer-grid h3 { margin: 4px 0; font-size: 1rem; font-weight: 850; }
.hd-offer-grid p { margin: 0; color: var(--muted); font-size: .72rem; }
.hd-offer-grid article > strong { color: var(--brand); font-size: 2.2rem; opacity: .18; }
.hd-why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.hd-why-grid article { min-height: 190px; padding: 18px; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: .15s ease; }
.hd-why-grid article:hover { border-color: var(--brand); transform: translateY(-2px); }
.hd-why-grid article > span { color: var(--muted); font-size: .62rem; font-weight: 850; }
.hd-why-grid article > i { display: block; margin: 24px 0 12px; color: var(--brand); font-size: 1.8rem; }
.hd-why-grid h3 { margin: 0; font-size: .92rem; font-weight: 850; }
.hd-why-grid p { margin: 7px 0 0; color: var(--muted); font-size: .7rem; }

/* Catalog headers and filters */
.hd-catalog-hero { position: relative; padding: 18px 0 0; overflow: hidden; background: var(--canvas); }
.hd-catalog-hero::before { content: ""; position: absolute; left: 50%; top: 18px; width: min(calc(100% - 48px),1480px); height: calc(100% - 18px); transform: translateX(-50%); border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface) 58%); box-shadow: var(--shadow); }
.hd-catalog-hero-grid { position: relative; min-height: 438px; padding: 34px 30px 58px; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(430px,.96fr); align-items: stretch; gap: 20px; }
.hd-catalog-copy { align-self: center; padding: 4px 0 14px; }
.hd-breadcrumb { margin-bottom: 17px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .66rem; }
.hd-breadcrumb a:hover { color: var(--brand); }
.hd-breadcrumb i { font-size: .56rem; }
.hd-catalog-hero h1 { max-width: 760px; margin: 0; font-size: clamp(3rem,4.65vw,4.95rem); line-height: .94; letter-spacing: -.055em; font-weight: 850; }
.hd-catalog-hero p { max-width: 670px; margin: 14px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.62; }
.hd-catalog-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.hd-catalog-media-wrap { position: relative; min-height: 346px; display: flex; align-items: center; justify-content: flex-end; }
.hd-catalog-media { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; background: color-mix(in srgb, var(--brand) 8%, var(--canvas)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.hd-catalog-media::before { content: ""; position: absolute; left: -86px; top: -10%; z-index: 2; width: 190px; height: 122%; background: color-mix(in srgb, var(--surface) 98%, transparent); border-top-right-radius: 130px; border-bottom-right-radius: 130px; transform: rotate(8deg); box-shadow: 1px 0 0 var(--border); }
.hd-catalog-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(.98); transform: scale(1.04); }
.hd-catalog-media-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 38%, transparent) 0%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.18) 100%); }
.hd-catalog-stat { position: relative; z-index: 3; width: min(100%, 286px); min-height: 108px; margin: 0 22px 0 auto; padding: 18px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--surface) 96%, rgba(255,255,255,.85)); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.hd-catalog-stat > span { color: var(--brand); font-size: 2.85rem; line-height: 1; font-weight: 850; letter-spacing: -.05em; }
.hd-catalog-stat strong, .hd-catalog-stat small { display: block; }
.hd-catalog-stat strong { font-size: .94rem; }
.hd-catalog-stat small { margin-top: 4px; color: var(--muted); font-size: .67rem; }
.hd-catalog-stat > i { position: absolute; right: 12px; top: 10px; color: var(--brand); opacity: .11; font-size: 3.65rem; }
.hd-catalog-orbit { position: absolute; right: 5%; top: 8px; width: 220px; height: 220px; opacity: .22; pointer-events: none; }
.hd-catalog-orbit i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--brand) 17%, transparent); border-radius: 50%; animation: dashboardRingPulse 4.2s ease-in-out infinite; }
.hd-catalog-orbit i:nth-child(2) { inset: 34px; animation-delay: -1s; }
.hd-catalog-orbit i:nth-child(3) { inset: 68px; animation-delay: -2s; }
.hd-catalog-content { padding-bottom: 72px; }
.hd-filter-panel { position: relative; z-index: 5; margin-top: -30px; padding: 13px; display: grid; grid-template-columns: 190px minmax(260px,1fr) 170px 155px auto auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 40px rgba(var(--shadow-rgb),.12); }
.hd-filter-heading { display: flex; align-items: center; gap: 10px; }
.hd-filter-heading > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.hd-filter-heading strong, .hd-filter-heading small { display: block; }
.hd-filter-heading strong { font-size: .78rem; }
.hd-filter-heading small { color: var(--muted); font-size: .61rem; }
.hd-filter-search { height: 46px; position: relative; }
.hd-filter-search i { position: absolute; left: 13px; top: 14px; z-index: 1; color: var(--muted); }
.hd-filter-search input, .hd-select-wrap select { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); color: var(--text); outline: 0; transition: .15s ease; }
.hd-filter-search input { padding: 0 13px 0 39px; }
.hd-filter-search input::placeholder { color: var(--muted); }
.hd-filter-search input:focus, .hd-select-wrap select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.hd-select-wrap { position: relative; }
.hd-select-wrap select { padding: 0 34px 0 12px; appearance: none; font-size: .73rem; }
.hd-select-wrap > i { position: absolute; right: 12px; top: 14px; color: var(--muted); pointer-events: none; }
.hd-filter-clear { height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.hd-filter-clear:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.hd-result-head { padding: 42px 0 17px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hd-result-head h2 { margin: 0; font-size: 1.7rem; font-weight: 850; }
.hd-result-head p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; }
.hd-live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border)); font-size: .66rem; font-weight: 800; }
.hd-catalog-part-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.hd-image-placeholder { width: 84px; height: 84px; display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); color: var(--brand); font-size: 2rem; }
.hd-image-placeholder.small { width: 66px; height: 66px; font-size: 1.5rem; }
.hd-empty { margin-top: 15px; padding: 68px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.hd-empty > span { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: 1.4rem; }
.hd-empty h2 { margin: 0; font-size: 1.25rem; font-weight: 850; }
.hd-empty p { margin: 7px 0 18px; color: var(--muted); }
.hd-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.hd-catalog-help { padding: 0 0 72px; }
.hd-catalog-help .hd-container { min-height: 185px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface)); box-shadow: var(--shadow); }
.hd-catalog-help h2 { max-width: 800px; margin: 0; font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 850; }
.hd-catalog-help .hd-container > div:last-child { display: flex; flex-wrap: wrap; gap: 9px; }
/* Footer uses the dashboard dark surface palette */
.hd-footer { margin-top: 0; padding: 72px 0 0; border-top: 1px solid var(--footer-border); background: var(--footer-surface); color: var(--footer-text); }
.hd-footer .hd-kicker.light { color: var(--brand-3); }
.hd-footer .hd-kicker.light i { background: var(--brand-3); }
.hd-footer-cta { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--footer-border); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, var(--footer-panel)), var(--footer-panel)); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.hd-footer-cta h2 { max-width: 850px; margin: 0; font-size: clamp(2rem,3.5vw,3.6rem); line-height: 1.03; letter-spacing: -.045em; font-weight: 850; }
.hd-footer-cta p { max-width: 760px; margin: 12px 0 0; color: var(--footer-muted); }
.hd-footer-cta-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hd-footer .hd-btn-light { background: var(--footer-text); border-color: var(--footer-text); color: var(--footer-surface); }
.hd-footer .hd-btn-outline-light { border-color: color-mix(in srgb, var(--footer-border) 70%, var(--footer-text)); color: var(--footer-text); }
.hd-footer .hd-btn-outline-light:hover { border-color: var(--brand); }
.hd-footer-grid { padding: 48px 0; display: grid; grid-template-columns: 1.4fr .7fr .7fr 1fr; gap: 44px; }
.hd-logo-footer .hd-logo-copy small { color: var(--footer-muted); }
.hd-footer-brand > p { max-width: 430px; margin: 20px 0 0; color: var(--footer-muted); font-size: .78rem; }
.hd-social-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.hd-social-proof span { padding: 7px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--footer-border); border-radius: 9px; color: var(--footer-muted); font-size: .64rem; font-weight: 750; }
.hd-social-proof i { color: var(--brand-3); }
.hd-footer h3 { margin: 0 0 14px; color: var(--footer-text); font-size: .76rem; font-weight: 850; }
.hd-footer-links { display: flex; flex-direction: column; gap: 9px; }
.hd-footer-links a { color: var(--footer-muted); font-size: .72rem; transition: color .15s ease, transform .15s ease; }
.hd-footer-links a:hover { color: var(--brand-3); transform: translateX(2px); }
.hd-footer-contact { display: flex; flex-direction: column; gap: 11px; }
.hd-footer-contact > a { padding: 10px; display: flex; gap: 9px; border: 1px solid var(--footer-border); border-radius: 11px; color: var(--footer-text); transition: .15s ease; }
.hd-footer-contact > a:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--footer-surface)); }
.hd-footer-contact > a > i { color: var(--brand-3); }
.hd-footer-contact small { display: block; color: var(--footer-muted); font-size: .58rem; }
.hd-footer-contact span { font-size: .69rem; }
.hd-footer-bottom { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--footer-border); color: var(--footer-faint); font-size: .64rem; }
.hd-mobile-dock { display: none; }

/* Reveal and dashboard-like motion */
@keyframes dashboardIconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dashboardRingPulse { 0%,100% { transform: scale(.96); opacity: .4; } 50% { transform: scale(1.04); opacity: .75; } }


/* Richer interactive motion */
.hd-quick-grid > a,
.hd-stats article,
.hd-bike-card,
.hd-catalog-bike-card,
.hd-part-card,
.hd-catalog-part-card,
.hd-category-grid > a,
.hd-offer-grid article,
.hd-why-grid article,
.hd-filter-panel,
.hd-catalog-stat,
.hd-wholesale-card,
.hd-service-panel {
  transition: transform .34s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .34s ease, background .28s ease;
}
.hd-quick-grid > a:hover,
.hd-stats article:hover,
.hd-bike-card:hover,
.hd-catalog-bike-card:hover,
.hd-part-card:hover,
.hd-catalog-part-card:hover,
.hd-category-grid > a:hover,
.hd-offer-grid article:hover,
.hd-why-grid article:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(var(--shadow-rgb), .14), 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent);
}
.hd-quick-grid > a:hover > span,
.hd-stats article:hover > span,
.hd-category-grid > a:hover .hd-category-icon {
  animation: hdIconBounce .68s cubic-bezier(.2,.8,.2,1);
}
.hd-bike-card:hover .hd-stock-pill,
.hd-catalog-bike-card:hover .hd-stock-pill,
.hd-part-card:hover .hd-stock-text,
.hd-catalog-part-card:hover .hd-stock-text {
  animation: hdStatusPulse 1.15s ease-in-out infinite alternate;
}
.hd-kicker i { animation: hdKickerPulse 2.2s ease-in-out infinite; }
.hd-header.scrolled { animation: hdHeaderSettle .38s ease both; }
.hd-filter-panel:focus-within { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(var(--shadow-rgb), .15); }
.hd-catalog-orbit { animation: hdOrbitDrift 12s linear infinite; }
.hd-catalog-orbit i:nth-child(2) { animation-duration: 5.8s; }
.hd-catalog-orbit i:nth-child(3) { animation-duration: 7.2s; }
[data-reveal] { opacity: 0; transform: translate3d(var(--reveal-x, 0), 28px, 0) scale(.975); transition: opacity .62s ease var(--reveal-delay, 0ms), transform .68s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms); }
[data-reveal].visible { opacity: 1; transform: translate3d(0,0,0) scale(1); }
@keyframes hdIconBounce { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-6px) rotate(-5deg); } 65% { transform: translateY(2px) rotate(4deg); } 100% { transform: none; } }
@keyframes hdStatusPulse { from { transform: scale(1); filter: saturate(1); } to { transform: scale(1.045); filter: saturate(1.25); } }
@keyframes hdKickerPulse { 0%,100% { transform: scale(.9); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); } 50% { transform: scale(1.12); box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 4%, transparent); } }
@keyframes hdHeaderSettle { from { transform: translateY(-5px); } to { transform: none; } }
@keyframes hdOrbitDrift { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 1199.98px) {
  .hd-container { width: min(100% - 36px, 1480px); }
  .hd-header-inner { gap: 12px; }
  .hd-nav-toggle { display: block; order: 2; }
  .hd-header-actions { order: 3; }
  .hd-nav { position: absolute; left: 18px; right: 18px; top: calc(100% + 8px); padding: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 55px rgba(var(--shadow-rgb),.18); }
  .hd-nav.collapse:not(.show), .hd-nav:not(.show) { display: none; }
  .hd-nav.show { display: block; }
  .hd-nav-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
  .hd-nav-links a { padding: 11px 12px; }
  .hd-nav-mobile-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
  .hd-nav-mobile-actions a, .hd-mobile-theme-toggle { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .72rem; font-weight: 800; }
  .hd-mobile-theme-toggle { grid-column: 1 / -1; cursor: pointer; }
  .hd-mobile-theme-toggle:hover, .hd-mobile-theme-toggle[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--brand); }
  .hd-nav-mobile-actions a.primary { background: var(--brand); border-color: var(--brand); color: var(--accent-contrast); }
  .hd-hero-slides { width: min(95vw,1900px); }
  .hd-hero-slides .hd-hero-content { width: 100%; padding-inline: 30px; }
  .hd-hero-bottom > .hd-container { width: min(95vw,1900px); }
  .hd-hero-copy { padding-left: 0; }
  .hd-hero-search { grid-template-columns: minmax(260px,1fr) auto; width: calc(100% - 160px); }
  .hd-search-title { display: none; }
  .hd-bike-grid, .hd-catalog-bike-grid { grid-template-columns: repeat(2,1fr); }
  .hd-part-grid { grid-template-columns: repeat(4,1fr); }
  .hd-catalog-part-grid { grid-template-columns: repeat(3,1fr); }
  .hd-category-grid { grid-template-columns: repeat(2,1fr); }
  .hd-filter-panel { grid-template-columns: minmax(250px,1fr) 170px 155px auto; }
  .hd-filter-heading { grid-column: 1 / -1; }
  .hd-filter-clear { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 991.98px) {
  .hd-announcement .hd-container > div { display: none; }
  .hd-announcement .hd-container { justify-content: center; text-align: center; }
  .hd-header-actions .hd-header-cta { display: none; }
  .hd-hero-slides { height: 80vh; min-height: 620px; max-height: 900px; }
  .hd-hero-media { inset: 0; }
  .hd-hero-shade { background: linear-gradient(90deg, transparent 62%, rgba(0,0,0,.13)); }
  .hd-hero-shade::before { left: -14%; top: -10%; width: 79%; height: 120%; border-top-right-radius: 42% 15%; border-bottom-right-radius: 42% 15%; transform: skewX(-5deg); }
  .hd-hero-shade::after { background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 56%, rgba(0,0,0,.12)); }
  .hd-hero-content { height: 100%; min-height: 620px; align-items: flex-end; }
  .hd-hero-copy { width: min(66%,700px); min-width: 0; padding: 44px 0 116px; }
  .hd-hero-title { font-size: clamp(3rem,8vw,5.2rem); }
  .hd-hero-search { width: calc(100% - 120px); }
  .hd-quick-grid { grid-template-columns: repeat(2,1fr); }
  .hd-section-head, .hd-section-head.split { align-items: flex-start; flex-direction: column; }
  .hd-stats { grid-template-columns: repeat(2,1fr); }
  .hd-part-grid, .hd-catalog-part-grid { grid-template-columns: repeat(2,1fr); }
  .hd-service-panel { grid-template-columns: 1fr; }
  .hd-service-visual { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--border); }
  .hd-wholesale-grid { grid-template-columns: 1fr; }
  .hd-why-grid { grid-template-columns: repeat(2,1fr); }
  .hd-catalog-hero-grid { grid-template-columns: 1fr; min-height: 560px; padding: 30px 26px 52px; gap: 18px; }
  .hd-catalog-copy { padding-bottom: 0; }
  .hd-catalog-media-wrap { min-height: 250px; }
  .hd-catalog-media { position: relative; min-height: 250px; }
  .hd-catalog-media::before { left: -54px; top: -6%; width: 118px; height: 112%; transform: rotate(6deg); }
  .hd-catalog-stat { position: absolute; right: 18px; bottom: 18px; width: min(100%,320px); min-height: 90px; margin: 0; }
  .hd-filter-panel { grid-template-columns: 1fr 1fr; }
  .hd-filter-heading, .hd-filter-search { grid-column: 1 / -1; }
  .hd-filter-panel .hd-btn { width: 100%; }
  .hd-filter-clear { grid-column: auto; justify-self: stretch; }
  .hd-catalog-help .hd-container, .hd-footer-cta { align-items: flex-start; flex-direction: column; }
  .hd-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .hd-footer-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); }
  .hd-footer-contact h3 { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  body.hd-site { padding-bottom: 68px; }
  .hd-container { width: min(100% - 28px,1480px); }
  .hd-announcement { font-size: .56rem; }
  .hd-announcement .hd-container { min-height: 31px; }
  .hd-header-inner { min-height: 68px; }
  .hd-logo-mark { width: 40px; height: 40px; }
  .hd-logo-copy strong { font-size: .88rem; }
  .hd-logo-copy small { font-size: .51rem; }
  .hd-icon-action { display: none; }
  .hd-theme-toggle { display: grid; }
  .hd-nav { left: 14px; right: 14px; }
  .hd-hero { padding-top: 14px; }
  .hd-hero-slides { width: calc(100% - 28px); height: 80vh; min-height: 620px; max-height: 780px; border-radius: 16px; }
  .hd-hero-slides .hd-hero-content { width: 100%; padding-inline: 22px; }
  .hd-hero-bottom > .hd-container { width: calc(100% - 28px); }
  .hd-hero-shade { background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.05) 100%); }
  .hd-hero-shade::before { left: -18%; top: 32%; width: 136%; height: 76%; border-top-right-radius: 48% 18%; border-bottom-right-radius: 0; background: var(--hero-copy-surface); box-shadow: 0 -14px 30px rgba(var(--shadow-rgb),.08); transform: skewY(-4deg); }
  .hd-hero-shade::after { background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 42%); }
  .hd-hero-content { height: 100%; min-height: 620px; align-items: flex-end; }
  .hd-hero-copy { width: 100%; min-width: 0; max-width: none; padding: 34px 0 124px; }
  .hd-hero-title { font-size: clamp(2.65rem,13vw,4.5rem); }
  .hd-hero-copy > p { font-size: .84rem; }
  .hd-hero-trust { display: none; }
  .hd-hero-actions { display: grid; grid-template-columns: 1fr; }
  .hd-hero-actions .hd-btn { width: 100%; }
  .hd-hero-bottom { margin-top: -84px; }
  .hd-hero-bottom > .hd-container { display: block; }
  .hd-hero-search { width: 100%; min-height: 76px; padding: 10px; display: block; }
  .hd-search-input { height: 54px; }
  .hd-hero-search > a { display: none; }
  .hd-hero-controls { display: none; }
  .hd-hero-dots { display: none; }
  .hd-quick-grid { grid-template-columns: 1fr; }
  .hd-quick-grid > a { min-height: 82px; }
  .hd-section { padding-top: 58px; }
  .hd-section-head h2 { font-size: 2rem; }
  .hd-intro .hd-section-head, .hd-why .hd-section-head { padding: 16px; }
  .hd-stats { grid-template-columns: 1fr; }
  .hd-bike-grid, .hd-catalog-bike-grid { grid-template-columns: 1fr; }
  .hd-bike-visual, .hd-catalog-bike-image { height: 270px; }
  .hd-category-grid { grid-template-columns: 1fr; }
  .hd-part-grid, .hd-catalog-part-grid { grid-template-columns: repeat(2,1fr); }
  .hd-part-image, .hd-catalog-part-image { height: 150px; }
  .hd-part-body, .hd-catalog-part-body { padding: 12px; }
  .hd-part-body h3, .hd-catalog-part-body h2 { font-size: .76rem; }
  .hd-compatibility { display: none; }
  .hd-service-copy { padding: 30px 20px; }
  .hd-check-grid { grid-template-columns: 1fr; }
  .hd-wholesale-grid > div, .hd-wholesale-card { padding: 20px; }
  .hd-wholesale-steps { grid-template-columns: 1fr; }
  .hd-offer-grid { grid-template-columns: 1fr; }
  .hd-offer-grid article { grid-template-columns: 46px 1fr; }
  .hd-offer-grid article > strong { display: none; }
  .hd-why-grid { grid-template-columns: 1fr; }
  .hd-catalog-hero { padding-top: 10px; }
  .hd-catalog-hero::before { top: 10px; width: calc(100% - 28px); height: calc(100% - 10px); }
  .hd-catalog-hero-grid { min-height: 490px; padding: 22px 18px 44px; gap: 14px; }
  .hd-catalog-copy { padding: 0; }
  .hd-catalog-hero h1 { font-size: clamp(2.45rem,10.9vw,3.45rem); }
  .hd-catalog-hero p { font-size: .86rem; }
  .hd-catalog-media-wrap { min-height: 190px; }
  .hd-catalog-media { min-height: 190px; }
  .hd-catalog-media::before { left: -34px; top: -4%; width: 72px; height: 108%; transform: rotate(5deg); }
  .hd-catalog-media-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 24%, transparent) 0%, rgba(0,0,0,.1) 65%, rgba(0,0,0,.18) 100%); }
  .hd-catalog-stat { right: 12px; bottom: 12px; min-height: 82px; padding: 13px 15px; }
  .hd-catalog-stat > span { font-size: 2.2rem; }
  .hd-filter-panel { margin-top: -22px; grid-template-columns: 1fr; }
  .hd-filter-heading, .hd-filter-search { grid-column: auto; }
  .hd-filter-clear { grid-column: auto; }
  .hd-result-head { align-items: flex-start; flex-direction: column; }
  .hd-catalog-help { padding-bottom: 58px; }
  .hd-catalog-help .hd-container { padding: 20px; }
  .hd-footer { padding-top: 58px; }
  .hd-footer-cta { padding: 22px; }
  .hd-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .hd-footer-brand, .hd-footer-contact { grid-column: 1 / -1; }
  .hd-footer-contact { display: flex; }
  .hd-footer-contact h3 { grid-column: auto; }
  .hd-footer-bottom { padding: 16px 0; align-items: flex-start; flex-direction: column; }
  .hd-mobile-dock { position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; height: 68px; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 -8px 30px rgba(var(--shadow-rgb),.12); backdrop-filter: blur(14px); }
  .hd-mobile-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .58rem; font-weight: 800; }
  .hd-mobile-dock i { font-size: 1.05rem; }
  .hd-mobile-dock a.accent { background: var(--brand); color: var(--accent-contrast); }
}

@media (max-width: 430px) {
  .hd-logo-copy small { display: none; }
  .hd-logo-copy { display: flex; align-items: baseline; gap: 5px; }
  .hd-nav-links { grid-template-columns: 1fr; }
  .hd-part-grid, .hd-catalog-part-grid { grid-template-columns: 1fr; }
  .hd-part-image, .hd-catalog-part-image { height: 210px; }
  .hd-part-body h3, .hd-catalog-part-body h2 { min-height: 0; font-size: .88rem; }
  .hd-compatibility { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Typography readability pass
 * Keeps the dashboard visual language while enforcing a practical minimum
 * size for navigation, forms, supporting copy, catalogue metadata and footer text.
 */
body.hd-site {
  font-size: 16px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

.hd-kicker,
.hd-announcement,
.hd-card-number,
.hd-stock-pill,
.hd-card-topline,
.hd-service-label,
.hd-offer-grid small,
.hd-why-grid article > span,
.hd-live,
.hd-breadcrumb {
  font-size: .75rem;
  line-height: 1.35;
}

.hd-btn,
.hd-text-link,
.hd-header-cta,
.hd-nav-links a,
.hd-nav-mobile-actions a,
.hd-mobile-theme-toggle {
  font-size: .875rem;
}

.hd-logo-copy em { font-size: .72rem; }
.hd-logo-copy small { font-size: .7rem; line-height: 1.25; }

.hd-hero-copy > p,
.hd-section-head p,
.hd-section-head.split > p,
.hd-catalog-hero p,
.hd-footer-cta p {
  font-size: 1rem;
  line-height: 1.65;
}

.hd-hero-trust,
.hd-hero-search > a,
.hd-quick-grid small,
.hd-stats small,
.hd-category-grid small,
.hd-result-head p,
.hd-footer-bottom {
  font-size: .8rem;
  line-height: 1.45;
}

.hd-search-title strong,
.hd-quick-grid strong,
.hd-category-grid strong,
.hd-filter-heading strong {
  font-size: .9rem;
}

.hd-search-title small,
.hd-filter-heading small,
.hd-catalog-stat small,
.hd-bike-bottom small,
.hd-catalog-price small,
.hd-service-note small,
.hd-wholesale-steps small,
.hd-footer-contact small {
  font-size: .74rem;
  line-height: 1.4;
}

.hd-search-input input,
.hd-select-wrap select,
.hd-filter-search input {
  font-size: .9rem;
}

.hd-search-input button,
.hd-catalog-price > a,
.hd-filter-clear {
  font-size: .82rem;
}

.hd-bike-meta span,
.hd-part-body > small,
.hd-catalog-part-body > small,
.hd-stock-text,
.hd-compatibility,
.hd-social-proof span {
  font-size: .74rem;
  line-height: 1.4;
}

.hd-bike-body h3,
.hd-catalog-bike-body h2 {
  font-size: 1.12rem;
  line-height: 1.3;
}

.hd-catalog-bike-body > p {
  font-size: .88rem;
  line-height: 1.55;
}

.hd-part-body h3,
.hd-catalog-part-body h2 {
  font-size: .96rem;
  line-height: 1.42;
}

.hd-part-body strong,
.hd-catalog-part-bottom strong {
  font-size: 1rem;
}

.hd-compatibility small {
  font-size: .68rem;
  line-height: 1.35;
}

.hd-service-note strong,
.hd-wholesale-steps strong {
  font-size: .88rem;
}

.hd-check-grid span,
.hd-offer-grid p,
.hd-why-grid p,
.hd-footer-brand > p,
.hd-footer-links a,
.hd-footer-contact span {
  font-size: .86rem;
  line-height: 1.55;
}

.hd-wholesale-steps article > span,
.hd-wholesale-card-top span,
.hd-wholesale-card-top b {
  font-size: .74rem;
}

.hd-footer h3 {
  font-size: .92rem;
}

.hd-catalog-stat strong {
  font-size: 1rem;
}

.hd-result-head h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
}

@media (max-width: 767.98px) {
  body.hd-site { font-size: 16px; }
  .hd-announcement { font-size: .7rem; }
  .hd-logo-copy strong { font-size: 1rem; }
  .hd-logo-copy small { font-size: .68rem; }
  .hd-hero-copy > p,
  .hd-catalog-hero p { font-size: .94rem; }
  .hd-part-body h3,
  .hd-catalog-part-body h2 { font-size: .96rem; }
  .hd-filter-search input,
  .hd-select-wrap select,
  .hd-search-input input { font-size: 1rem; }
  .hd-mobile-dock a { font-size: .69rem; line-height: 1.2; }
}

@media (max-width: 430px) {
  .hd-part-body h3,
  .hd-catalog-part-body h2 { font-size: 1rem; }
  .hd-footer-links a,
  .hd-footer-contact span { font-size: .9rem; }
}



/* Smooth-scroll performance pass
   Decorative movement stays visible, but scroll-linked JavaScript, fixed blur,
   excess compositor layers and repaint-heavy effects are removed. */
.hd-page-decor {
  contain: layout paint style;
  filter: none;
  will-change: auto;
}
.hd-page-decor::before,
.hd-page-decor::after {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.hd-page-bubble {
  contain: paint;
  backface-visibility: hidden;
  box-shadow:
    inset -8px -12px 22px color-mix(in srgb, var(--brand) 8%, transparent),
    inset 5px 5px 12px var(--highlight-soft),
    0 12px 30px color-mix(in srgb, var(--brand) 9%, transparent);
}
.hd-page-bubble::after { animation-duration: 7.2s; }
.hd-page-bubble:nth-child(n+9) { display: none; }

.hd-header,
.hd-header.scrolled {
  background: color-mix(in srgb, var(--surface) 98%, var(--canvas));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
  transform: translateZ(0);
}
.hd-mobile-dock,
.hd-hero-controls,
.hd-stock-pill,
.hd-service-note,
.hd-catalog-stat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hd-section,
.hd-catalog-content,
.hd-catalog-help {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}
[data-reveal] { will-change: opacity, transform; }
[data-reveal].visible { will-change: auto; }

@keyframes hdStatusPulse {
  from { transform: scale(1); opacity: .92; }
  to { transform: scale(1.035); opacity: 1; }
}

@media (max-width: 991.98px) {
  .hd-page-bubble:nth-child(n+7) { display: none; }
  .hd-page-decor::before,
  .hd-page-decor::after { min-width: 360px; min-height: 360px; }
}

@media (max-width: 767.98px) {
  .hd-page-bubble:nth-child(n+5) { display: none; }
  .hd-page-decor::before,
  .hd-page-decor::after {
    width: 76vw;
    height: 76vw;
    min-width: 280px;
    min-height: 280px;
  }
  .hd-page-bubble { box-shadow: inset -5px -8px 15px color-mix(in srgb, var(--brand) 7%, transparent); }
}



/* Public dark mode: dashboard-matched surfaces with the saved frontend accent. */
html[data-bs-theme="dark"] body.hd-site { background: var(--canvas); color: var(--text); }
html[data-bs-theme="dark"] .hd-announcement { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
html[data-bs-theme="dark"] .hd-header,
html[data-bs-theme="dark"] .hd-header.scrolled { background: color-mix(in srgb, var(--surface) 97%, var(--canvas)); }
html[data-bs-theme="dark"] .hd-hero-media img,
html[data-bs-theme="dark"] .hd-catalog-media img { filter: saturate(.9) brightness(.82) contrast(1.04); }
html[data-bs-theme="dark"] .hd-hero-shade::before { box-shadow: 18px 0 34px rgba(0,0,0,.22); }
html[data-bs-theme="dark"] .hd-search-input input,
html[data-bs-theme="dark"] .hd-filter-search input,
html[data-bs-theme="dark"] .hd-select-wrap select { color-scheme: dark; }
html[data-bs-theme="dark"] .hd-catalog-stat { background: color-mix(in srgb, var(--surface) 96%, var(--canvas)); }
html[data-bs-theme="dark"] .hd-page-bubble { opacity: .82; }
html[data-bs-theme="dark"] .hd-mobile-dock { background: var(--surface); }
html[data-bs-theme="dark"] .hd-footer { background: var(--footer-surface); }

/* Light/dark color audit corrections. */
body.hd-site,
.hd-header,
.hd-announcement,
.hd-hero-slides,
.hd-hero-shade::before,
.hd-hero-search,
.hd-filter-panel,
.hd-mobile-dock,
.hd-quick-grid > a,
.hd-stats article,
.hd-bike-card,
.hd-catalog-bike-card,
.hd-part-card,
.hd-catalog-part-card,
.hd-category-grid > a,
.hd-offer-grid article,
.hd-why-grid article,
.hd-catalog-stat,
.hd-empty,
.hd-catalog-help .hd-container {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

html[data-bs-theme="light"] .hd-header,
html[data-bs-theme="light"] .hd-header.scrolled {
  background: color-mix(in srgb, var(--surface) 98%, var(--canvas));
}
html[data-bs-theme="light"] .hd-hero-shade::before { background: var(--hero-copy-surface); }
html[data-bs-theme="light"] .hd-filter-search input,
html[data-bs-theme="light"] .hd-select-wrap select,
html[data-bs-theme="light"] .hd-search-input input { color-scheme: light; }

html[data-bs-theme="dark"] .hd-btn-light,
html[data-bs-theme="dark"] .hd-btn-glass,
html[data-bs-theme="dark"] .hd-icon-action,
html[data-bs-theme="dark"] .hd-nav-toggle {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text);
}
html[data-bs-theme="dark"] .hd-btn-light:hover,
html[data-bs-theme="dark"] .hd-btn-glass:hover,
html[data-bs-theme="dark"] .hd-icon-action:hover {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 56%, var(--border));
  color: var(--brand);
}
html[data-bs-theme="dark"] .hd-hero-copy .hd-btn-glass {
  background: var(--hero-copy-surface);
  border-color: var(--border);
  color: var(--hero-copy-text);
}
html[data-bs-theme="dark"] .hd-hero-controls {
  background: color-mix(in srgb, var(--surface) 98%, var(--canvas));
  border-color: var(--border);
}
html[data-bs-theme="dark"] .hd-search-input input,
html[data-bs-theme="dark"] .hd-filter-search input,
html[data-bs-theme="dark"] .hd-select-wrap select {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text);
}
html[data-bs-theme="dark"] .hd-search-input input::placeholder,
html[data-bs-theme="dark"] .hd-filter-search input::placeholder { color: var(--muted); opacity: .9; }
html[data-bs-theme="dark"] .hd-stock-pill.available,
html[data-bs-theme="dark"] .hd-live {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}
html[data-bs-theme="dark"] .hd-stock-text.out,
html[data-bs-theme="dark"] .hd-filter-clear:hover { color: var(--danger); }
html[data-bs-theme="dark"] .hd-footer .hd-btn-light {
  background: var(--footer-text);
  border-color: var(--footer-text);
  color: var(--footer-surface);
}
html[data-bs-theme="dark"] .hd-footer .hd-btn-light:hover {
  background: color-mix(in srgb, var(--footer-text) 88%, var(--brand));
  border-color: var(--brand);
  color: var(--footer-surface);
}
html[data-bs-theme="dark"] .hd-footer .hd-btn-outline-light:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--accent-contrast);
}


/* Dark-mode icon and animated-bubble visibility pass.
   Icons on dark surfaces use a consistent white glyph, while controls with a
   deliberately light background keep their inherited dark text/icon color. */
html[data-bs-theme="dark"] body.hd-site .bi {
  color: #ffffff !important;
}
html[data-bs-theme="dark"] body.hd-site .hd-footer .hd-btn-light .bi,
html[data-bs-theme="dark"] body.hd-site .hd-btn-light.is-light-surface .bi {
  color: currentColor !important;
}
html[data-bs-theme="dark"] body.hd-site .hd-page-decor {
  opacity: var(--site-bubble-opacity);
}
html[data-bs-theme="dark"] body.hd-site .hd-page-decor::before,
html[data-bs-theme="dark"] body.hd-site .hd-page-decor::after {
  background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.045) 38%, transparent 69%);
}
html[data-bs-theme="dark"] body.hd-site .hd-page-bubble {
  border-color: rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.88) 0 3.5%, transparent 5%),
    radial-gradient(circle at 36% 30%, var(--site-bubble-3) 0 10%, var(--site-bubble-2) 31%, var(--site-bubble-1) 68%, transparent 74%);
  box-shadow:
    inset -8px -12px 22px rgba(255,255,255,.055),
    inset 6px 7px 14px rgba(255,255,255,.12),
    0 12px 30px rgba(255,255,255,.07);
}
html[data-bs-theme="dark"] body.hd-site .hd-page-bubble::after {
  border-color: rgba(255,255,255,.52);
  box-shadow: inset 0 0 14px rgba(255,255,255,.06);
}

/* Decorative motion remains optional and accessibility-safe. */
@media (prefers-reduced-motion: reduce) {
  .hd-page-decor::before,
  .hd-page-decor::after,
  .hd-page-bubble,
  .hd-page-bubble::after,
  .hd-kicker i,
  .hd-catalog-orbit,
  .hd-catalog-orbit i,
  .hd-hero-media img,
  .hd-hero-slide,
  .hd-hero-slide .hd-hero-copy > * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* Dark-mode accent tiles: keep glyphs white and apply the selected accent to the tile background. */
html[data-bs-theme="dark"] :is(
  .hd-icon-action,
  .hd-search-title > i,
  .hd-quick-grid > a > span,
  .hd-filter-heading > span,
  .hd-category-icon,
  .hd-image-placeholder,
  .hd-empty > span,
  .hd-offer-grid article > span,
  .hd-bike-bottom > a
) {
  background: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 76%, #ffffff 24%);
  color: #ffffff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 28%, transparent);
}

html[data-bs-theme="dark"] :is(
  .hd-icon-action,
  .hd-search-title > i,
  .hd-quick-grid > a > span,
  .hd-filter-heading > span,
  .hd-category-icon,
  .hd-image-placeholder,
  .hd-empty > span,
  .hd-offer-grid article > span,
  .hd-bike-bottom > a
) i {
  color: #ffffff;
}

/* The statistics strip was removed, so keep the introduction compact and balanced. */
.hd-intro .hd-section-head { margin-bottom: 0; }

/* ================================================================
   Catalogue hero parity fix
   Uses the same full-background image and curved diagonal copy panel
   as the homepage hero. The filter bar sits cleanly below the panel.
   ================================================================ */
.hd-catalog-hero {
  padding-top: 18px;
  overflow: visible;
}

.hd-catalog-hero::before {
  display: none;
}

.hd-catalog-hero-grid {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 48px), 1480px);
  min-height: 520px;
  margin-inline: auto;
  padding: 48px 42px 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--hero-copy-surface);
  box-shadow: var(--shadow);
}

.hd-catalog-hero-grid::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 6;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 15px;
  pointer-events: none;
}

.hd-catalog-copy {
  position: relative;
  z-index: 4;
  width: 48%;
  max-width: 720px;
  padding: 0 34px 0 0;
  align-self: center;
  color: var(--hero-copy-text);
}

.hd-catalog-hero h1 {
  max-width: 720px;
  color: var(--hero-copy-text);
}

.hd-catalog-hero p,
.hd-catalog-hero .hd-breadcrumb {
  color: var(--hero-copy-muted);
}

.hd-catalog-media-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  display: block;
}

.hd-catalog-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  background: color-mix(in srgb, var(--brand) 8%, var(--canvas));
  box-shadow: none;
}

/* This is intentionally the same geometry as the homepage hero divider. */
.hd-catalog-media::before {
  content: "";
  position: absolute;
  left: -9%;
  top: -12%;
  z-index: 3;
  width: 58%;
  height: 124%;
  background: var(--hero-copy-surface);
  border-top-right-radius: 48% 18%;
  border-bottom-right-radius: 48% 18%;
  box-shadow: 16px 0 36px rgba(var(--shadow-rgb), .08), 1px 0 0 var(--border);
  transform: skewX(-7deg);
  transform-origin: center;
  pointer-events: none;
}

.hd-catalog-media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1);
  transform: scale(1.035);
}

.hd-catalog-media-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent 38%, rgba(0, 0, 0, .03) 55%, rgba(0, 0, 0, .17) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .02), transparent 52%, rgba(0, 0, 0, .12));
  pointer-events: none;
}

.hd-catalog-stat {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 32px;
  bottom: auto;
  width: min(100%, 290px);
  min-height: 112px;
  margin: 0;
  transform: translateY(-50%);
}

/* Keep the search/filter panel clearly below the hero instead of hidden beneath it. */
.hd-catalog-content {
  position: relative;
  z-index: 7;
  padding-top: 22px;
}

.hd-filter-panel {
  margin-top: 0;
}

@media (max-width: 1199.98px) {
  .hd-catalog-hero-grid {
    width: min(calc(100% - 36px), 1480px);
    min-height: 500px;
    padding: 42px 34px 58px;
  }

  .hd-catalog-copy {
    width: 52%;
    padding-right: 24px;
  }

  .hd-catalog-media::before {
    width: 62%;
  }

  .hd-catalog-stat {
    right: 24px;
    width: 270px;
  }
}

@media (max-width: 991.98px) {
  .hd-catalog-hero-grid {
    min-height: 620px;
    padding: 38px 30px 58px;
    display: flex;
    align-items: center;
  }

  .hd-catalog-copy {
    width: min(67%, 700px);
    max-width: 700px;
    padding-right: 20px;
  }

  .hd-catalog-media::before {
    left: -14%;
    top: -10%;
    width: 82%;
    height: 120%;
    border-top-right-radius: 42% 15%;
    border-bottom-right-radius: 42% 15%;
    transform: skewX(-5deg);
  }

  .hd-catalog-stat {
    top: auto;
    right: 24px;
    bottom: 24px;
    width: min(100%, 300px);
    min-height: 94px;
    transform: none;
  }

  .hd-catalog-content {
    padding-top: 18px;
  }
}

@media (max-width: 767.98px) {
  .hd-catalog-hero {
    padding-top: 10px;
  }

  .hd-catalog-hero-grid {
    width: calc(100% - 28px);
    min-height: 760px;
    padding: 30px 22px 42px;
    align-items: flex-start;
    border-radius: 18px;
  }

  .hd-catalog-hero-grid::after {
    inset: 10px;
    border-radius: 12px;
  }

  .hd-catalog-copy {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .hd-catalog-hero h1 {
    font-size: clamp(2.45rem, 11.5vw, 3.45rem);
  }

  .hd-catalog-media::before {
    left: -18%;
    top: -8%;
    width: 136%;
    height: 72%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 48% 18%;
    border-bottom-left-radius: 18% 8%;
    box-shadow: 0 14px 30px rgba(var(--shadow-rgb), .08), 0 1px 0 var(--border);
    transform: skewY(-4deg);
  }

  .hd-catalog-media-shade {
    background:
      linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .03) 58%, rgba(0, 0, 0, .18) 100%);
  }

  .hd-catalog-stat {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    min-height: 88px;
  }

  .hd-catalog-content {
    padding-top: 14px;
  }

  .hd-filter-panel {
    margin-top: 0;
  }
}

html[data-bs-theme="dark"] .hd-catalog-media img {
  filter: saturate(.92) brightness(.82) contrast(1.05);
}