/* EGKitsPublic global styles (scoped) */

/* ──────────────────────────────────────────────────────────────────────────
   Global horizontal-overflow guard (RTL + LTR)

   This intentionally lives in a STATIC stylesheet (not a .razor <style> block)
   so it is served directly from wwwroot and applies on a plain browser reload
   without needing to recompile the Blazor WebAssembly bundle. With overflow-x
   genuinely hidden on <body>, a horizontal scrollbar cannot appear regardless
   of which descendant tries to exceed the viewport.

   NOTE: the previous `.public-app html/body` and `.egk-app body` selectors were
   dead (html/body are ancestors of those elements, not descendants), so the
   margin reset and overflow guard never actually applied. These rules fix that.
   ────────────────────────────────────────────────────────────────────────── */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body.egk-app-public {
  width: 100%;
  min-width: 0;
}

body.egk-app,
body.egk-app-public {
  margin: 0;
  padding: 0;
  font-family: Inter, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The MudBlazor layout chain must never be allowed to exceed the viewport. */
#app,
.showcase-layout-wrapper,
.showcase-app-layout,
.mud-layout,
.showcase-main-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.showcase-layout-wrapper,
.showcase-app-layout,
.showcase-main-content,
.showcase-footer {
  overflow-x: clip;
}

/* The public marketing layout only uses a temporary (overlay) theme drawer and
   has NO persistent navigation drawer, so its main content must never reserve a
   side gutter. MudBlazor can otherwise offset it (notably in RTL), pushing the
   document wider than the viewport. Scoped to .showcase-main-content so the
   PortalLayout's responsive drawer offset is left untouched. */
.showcase-app-layout > .mud-main-content,
.mud-layout > .showcase-main-content,
.showcase-main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  inset-inline-start: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Final public-shell boundary: the Theme Studio is an overlay, not a navigation
   drawer. If MudBlazor or component-level drawer CSS leaves the public shell in a
   drawer-offset state, keep every visible public layout surface pinned to the
   viewport instead of allowing a 420px RTL gutter/scroll band. */
.public-app.showcase-layout-wrapper,
.public-app .showcase-app-layout,
.public-app .showcase-appbar,
.public-app .showcase-main-content,
.public-app .showcase-footer,
.public-app .mud-container {
  box-sizing: border-box;
  max-width: 100% !important;
}

.public-app.showcase-layout-wrapper,
.public-app .showcase-app-layout,
.public-app .showcase-appbar,
.public-app .showcase-main-content,
.public-app .showcase-footer {
  width: 100% !important;
  margin-inline: 0 !important;
  overflow-x: clip !important;
}

/* Docs routes: keep vertical overflow visible so the nav sidebar can stick */
.public-app--docs.showcase-layout-wrapper,
.public-app--docs .showcase-app-layout,
.public-app--docs .showcase-main-content,
.public-app--docs .mud-layout,
.public-app--docs .docs-layout-shell,
.public-app--docs .docs-layout-container,
.public-app--docs .docs-layout-grid,
.public-app--docs .docs-layout-sidebar,
.public-app--docs .docs-layout-main {
  overflow-y: visible !important;
}

/* Root cause of the RTL "empty band on the left + horizontal scrollbar":
   the Theme Studio temporary drawer renders as position:absolute inside
   MudLayout. When closed (Anchor=Left in RTL) it parks ~420px off-canvas to the
   left, which expands the scrollable document width. Forcing it to fixed
   positioning takes it out of the document's scroll width entirely (fixed
   elements never create scrollbars), so it cannot push the page sideways. */
.mud-drawer.enterprise-theme-studio {
  position: fixed !important;
}

.public-app h1:focus { outline: none; }

.public-app a, .public-app .btn-link { color: var(--egk-color-primary); }
.public-app .btn-primary { color: #fff; background-color: var(--egk-color-primary); border-color: var(--mud-palette-primary-darken, #1565c0); }

.public-app .btn:focus, .public-app .btn:active:focus, .public-app .btn-link.nav-link:focus, .public-app .form-control:focus, .public-app .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--egk-color-secondary); }

.public-app .content { padding-top: 1.1rem; }

/* Blazor EditForm validation outlines. Exclude the native controls that live
   inside MudBlazor field wrappers (.mud-input-slot/.mud-input-root): the
   wrapper already renders validation state, so outlining the inner element
   would draw a second, duplicated border inside the field. */
.public-app .valid.modified:not([type="checkbox"]):not(.mud-input-slot):not(.mud-input-root) { outline: 1px solid #4caf50; }
.public-app .invalid:not(.mud-input-slot):not(.mud-input-root) { outline: 1px solid #f44336; }
.public-app .validation-message { color: #f44336; }

/* Do NOT remove outlines globally. Component CSS should manage focus styles. */

/* MudBlazor already thickens the outlined fieldset border (2px, primary) when
   a field is focused, so only add a soft, radius-matched halo around it.
   Do NOT use the strong --egk-focus-ring here: an opaque 3px ring pressed
   against the focused border reads as a second, duplicated border. */
.public-app .mud-input-root.mud-input-outlined.mud-input-focused,
.public-app .mud-input-root.mud-input-outlined:focus-within,
.public-app .mud-input-outlined.mud-input-focused,
.public-app .mud-input-outlined:focus-within {
  border-radius: var(--mud-default-borderradius, 4px);
  box-shadow: 0 0 0 3px rgba(var(--egk-color-primary-rgb), 0.12);
}

.public-app #blazor-error-ui { position: fixed; bottom: 0; left: 0; z-index: 1000;
 display: none;
 width: 100%;
 padding: 0.6rem 1.25rem 0.7rem;
 background: lightyellow;
 box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); color-scheme: light only; box-sizing: border-box; }
.public-app #blazor-error-ui .dismiss { position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer; }

.public-app .blazor-error-boundary { padding: 1rem 1rem 1rem 3.7rem;
 background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9zdmc+");
 color: white; }
.public-app .blazor-error-boundary::after { content: "An error has occurred." }

/* Showcase utilities and sections, scoped */
.public-app html { scroll-behavior: smooth; }
.public-app .display-1 { line-height: 1.2; font-size: 6rem; font-weight: 300; }
.public-app .display-2 { line-height: 1.2; font-size: 5.5rem; font-weight: 300; }
.public-app .display-3 { line-height: 1.2; font-size: 4.5rem; font-weight: 400; }
.public-app .display-4 { line-height: 1.2; font-size: 3.5rem; font-weight: 400; }
.public-app .text-gradient { background: var(--egk-gradient-brand-vivid); background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.public-app .shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
.public-app .shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
.public-app .border-radius-lg { border-radius: 16px; }
.public-app .border-radius-xl { border-radius: 24px; }

/* Production marketing refresh */
.public-app .hero-section,
.public-app .image-hero,
.public-app .community-hero,
.public-app .maintenance-hero,
.public-app .chat-hero,
.public-app .schedule-hero,
.public-app .brochure-hero,
.public-app .support-status-hero,
.public-app .video-support-hero,
.public-app .tickets-hero,
.public-app .emergency-hero,
.public-app .support-chat-hero,
.public-app .subscribe-hero,
.public-app .rss-hero,
.public-app .history-hero,
.public-app .callback-hero,
.public-app .notfound-hero {
  isolation: isolate;
}

.public-app .hero-section,
.public-app .community-hero,
.public-app .maintenance-hero,
.public-app .chat-hero,
.public-app .schedule-hero,
.public-app .brochure-hero,
.public-app .support-status-hero,
.public-app .video-support-hero,
.public-app .tickets-hero,
.public-app .emergency-hero,
.public-app .support-chat-hero,
.public-app .subscribe-hero,
.public-app .rss-hero,
.public-app .history-hero,
.public-app .callback-hero,
.public-app .notfound-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(8, 17, 31, .86), rgba(30, 58, 138, .68)),
    url('/Images/1.jpg') center / cover no-repeat,
    url('/Images/2.jpg') center / cover no-repeat !important;
  color: #fff;
}

.public-app .hero-section::before,
.public-app .image-hero::before,
.public-app .community-hero::before,
.public-app .maintenance-hero::before,
.public-app .chat-hero::before,
.public-app .schedule-hero::before,
.public-app .brochure-hero::before,
.public-app .support-status-hero::before,
.public-app .video-support-hero::before,
.public-app .tickets-hero::before,
.public-app .emergency-hero::before,
.public-app .support-chat-hero::before,
.public-app .subscribe-hero::before,
.public-app .rss-hero::before,
.public-app .history-hero::before,
.public-app .callback-hero::before,
.public-app .notfound-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, rgba(125, 211, 252, .24), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(196, 181, 253, .24), transparent 32%),
    linear-gradient(180deg, rgba(8, 17, 31, .05), rgba(8, 17, 31, .2));
  z-index: 0;
}

.public-app .hero-section > *,
.public-app .image-hero > *,
.public-app .community-hero > *,
.public-app .maintenance-hero > *,
.public-app .chat-hero > *,
.public-app .schedule-hero > *,
.public-app .brochure-hero > *,
.public-app .support-status-hero > *,
.public-app .video-support-hero > *,
.public-app .tickets-hero > *,
.public-app .emergency-hero > *,
.public-app .support-chat-hero > *,
.public-app .subscribe-hero > *,
.public-app .rss-hero > *,
.public-app .history-hero > *,
.public-app .callback-hero > *,
.public-app .notfound-hero > * {
  position: relative;
  z-index: 1;
}

.public-app .production-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-size: cover !important;
  background-position: center !important;
}

.public-app .production-hero--command {
    background: radial-gradient(circle at 18% 14%, rgba(125, 211, 252, .28), transparent 26%), linear-gradient(135deg, rgba(8,17,31,.9), rgba(30,58,138,.72)), url('/Images/1.jpg') center / cover no-repeat, url('/Images/1.jpg') center / cover no-repeat !important;
}
.public-app .production-hero--operations {
    background: radial-gradient(circle at 18% 14%, rgba(45, 212, 191, .2), transparent 28%), linear-gradient(135deg, rgba(8,17,31,.88), rgba(76,29,149,.72)), url('/Images/2.jpg') center / cover no-repeat, url('/Images/2.jpg') center / cover no-repeat !important;
}
.public-app .production-hero--growth {
    background: radial-gradient(circle at 82% 16%, rgba(196, 181, 253, .24), transparent 28%), linear-gradient(135deg, rgba(15,23,42,.72), rgba(30,64,175,.62)), url('/Images/3.jpg') center / cover no-repeat, url('/Images/3.jpg') center / cover no-repeat !important;
}
.public-app .production-hero--secure {
    background: radial-gradient(circle at 82% 16%, rgba(45, 212, 191, .24), transparent 28%), linear-gradient(135deg, rgba(8,17,31,.85), rgba(15,118,110,.64)), url('/Images/4.jpg') center / cover no-repeat, url('/Images/4.jpg') center / cover no-repeat !important;
}
.public-app .production-hero--success {
    background: radial-gradient(circle at 82% 16%, rgba(196, 181, 253, .24), transparent 28%), linear-gradient(135deg, rgba(8,17,31,.82), rgba(76,29,149,.68)), url('/Images/5.jpg') center / cover no-repeat, url('/Images/5.jpg') center / cover no-repeat !important;
}
.public-app .production-hero--brand {
    background: radial-gradient(circle at 82% 16%, rgba(45, 212, 191, .2), transparent 28%), linear-gradient(135deg, rgba(8,17,31,.82), rgba(15,118,110,.62)), url('/Images/6.jpg') center / cover no-repeat, url('/Images/6.jpg') center / cover no-repeat !important;
}

.public-app .docs-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(125, 211, 252, .28), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(196, 181, 253, .24), transparent 30%),
    linear-gradient(135deg, rgba(8,17,31,.94), rgba(30,58,138,.82)),
    url('/Images/2.jpg') center / cover no-repeat,
    url('/Images/2.jpg') center / cover no-repeat !important;
}

.public-app .support-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, .24), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(196, 181, 253, .22), transparent 30%),
    linear-gradient(135deg, rgba(8,17,31,.92), rgba(30,58,138,.78)),
    url('/Images/5.jpg') center / cover no-repeat,
    url('/Images/5.jpg') center / cover no-repeat !important;
}

.public-app .resources-hero,
.public-app .kb-hero,
.public-app .downloads-hero,
.public-app .blog-hero,
.public-app .changelog-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(125, 211, 252, .26), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(196, 181, 253, .22), transparent 30%),
    linear-gradient(135deg, rgba(8,17,31,.9), rgba(30,58,138,.76)),
    url('/Images/2.jpg') center / cover no-repeat,
    url('/Images/2.jpg') center / cover no-repeat !important;
}

.public-app .partners-hero,
.public-app .community-hero,
.public-app .contact-hero,
.public-app .about-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(196, 181, 253, .24), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(45, 212, 191, .18), transparent 30%),
    linear-gradient(135deg, rgba(8,17,31,.88), rgba(76,29,149,.72)),
    url('/Images/5.jpg') center / cover no-repeat,
    url('/Images/5.jpg') center / cover no-repeat !important;
}

.public-app .status-hero,
.public-app .maintenance-hero,
.public-app .support-status-hero,
.public-app .subscribe-hero,
.public-app .rss-hero,
.public-app .history-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, .25), transparent 28%),
    linear-gradient(135deg, rgba(8,17,31,.9), rgba(15,118,110,.68)),
    url('/Images/4.jpg') center / cover no-repeat,
    url('/Images/4.jpg') center / cover no-repeat !important;
}

.public-app .security-hero,
.public-app .privacy-hero,
.public-app .terms-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(45, 212, 191, .24), transparent 28%),
    linear-gradient(135deg, rgba(8,17,31,.88), rgba(15,118,110,.64)),
    url('/Images/4.jpg') center / cover no-repeat,
    url('/Images/4.jpg') center / cover no-repeat !important;
}

.public-app .chat-hero,
.public-app .support-chat-hero,
.public-app .tickets-hero,
.public-app .video-support-hero,
.public-app .schedule-hero,
.public-app .callback-hero,
.public-app .brochure-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, .24), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(196, 181, 253, .2), transparent 30%),
    linear-gradient(135deg, rgba(8,17,31,.88), rgba(30,58,138,.72)),
    url('/Images/5.jpg') center / cover no-repeat,
    url('/Images/5.jpg') center / cover no-repeat !important;
}

.public-app .sitemap-hero,
.public-app .notfound-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, .24), transparent 28%),
    linear-gradient(135deg, rgba(8,17,31,.9), rgba(30,58,138,.74)),
    url('/Images/6.jpg') center / cover no-repeat,
    url('/Images/6.jpg') center / cover no-repeat !important;
}

/* Emergency support: keep a high-urgency red treatment (overrides generic heroes) */
.public-app .emergency-hero {
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 138, 128, .3), transparent 30%),
    linear-gradient(135deg, rgba(127, 17, 17, .92), rgba(198, 40, 40, .78)),
    url('/Images/4.jpg') center / cover no-repeat,
    url('/Images/4.jpg') center / cover no-repeat !important;
}

.public-app .developer-preview-card,
.public-app .support-preview-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(15, 23, 42, .72) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28) !important;
}

.public-app .developer-preview-card::before,
.public-app .support-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 80%);
}

.public-app .developer-preview-card > *,
.public-app .support-preview-card > * {
  position: relative;
  z-index: 1;
}

.public-app .code-line {
  display: block;
  padding: .45rem .75rem;
  border-radius: 10px;
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: .84rem;
  color: #c4b5fd;
  background: rgba(15, 23, 42, .62);
  border: 1px solid rgba(148, 163, 184, .14);
}

.public-app .code-line strong {
  color: #67e8f9;
  font-weight: 600;
}

.public-app .support-ticket-row {
  border-radius: 14px;
  padding: .85rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.public-app .production-card,
.public-app .feature-card,
.public-app .pricing-card,
.public-app .module-card,
.public-app .industry-card,
.public-app .solution-feature-card,
.public-app .contact-form-card,
.public-app .contact-option-card,
.public-app .partner-card,
.public-app .featured-partner-card,
.public-app .docs-card,
.public-app .resource-category-card,
.public-app .popular-resource-card,
.public-app .developer-tool-card,
.public-app .community-card,
.public-app .support-card,
.public-app .support-option-card,
.public-app .resource-card,
.public-app .service-card,
.public-app .incident-card,
.public-app .metric-card,
.public-app .addon-card,
.public-app .office-card,
.public-app .success-story-card,
.public-app .compliance-card,
.public-app .security-feature-card,
.public-app .soc-stat-card,
.public-app .solution-tier-card,
.public-app .guide-card,
.public-app .kb-article-card,
.public-app .advanced-feature-card,
.public-app .contact-method-card,
.public-app .integration-card {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 24px !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.public-app .production-card:hover,
.public-app .feature-card:hover,
.public-app .pricing-card:hover,
.public-app .module-card:hover,
.public-app .industry-card:hover,
.public-app .solution-feature-card:hover,
.public-app .contact-option-card:hover,
.public-app .partner-card:hover,
.public-app .featured-partner-card:hover,
.public-app .docs-card:hover,
.public-app .resource-category-card:hover,
.public-app .popular-resource-card:hover,
.public-app .developer-tool-card:hover,
.public-app .community-card:hover,
.public-app .support-card:hover,
.public-app .support-option-card:hover,
.public-app .resource-card:hover,
.public-app .service-card:hover,
.public-app .addon-card:hover,
.public-app .office-card:hover,
.public-app .success-story-card:hover,
.public-app .compliance-card:hover,
.public-app .security-feature-card:hover,
.public-app .solution-tier-card:hover,
.public-app .guide-card:hover,
.public-app .kb-article-card:hover,
.public-app .advanced-feature-card:hover,
.public-app .contact-method-card:hover,
.public-app .integration-card:hover {
  transform: translateY(-4px);
  /* Accent-aware: cards that carry --pillar-accent glow in their own color,
     everything else falls back to the brand blue. */
  border-color: color-mix(in srgb, var(--pillar-accent, #3b82f6) 38%, transparent);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, .13),
    0 0 0 1px color-mix(in srgb, var(--pillar-accent, #3b82f6) 12%, transparent) !important;
}

/* Highlighted tier on the Solutions "Choose Your Solution Path" row — same
   blue→violet gradient border used for the featured pricing plan. */
.public-app .solution-tier-card.featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
    linear-gradient(135deg, var(--mud-palette-primary), #7c3aed) border-box;
  box-shadow: 0 20px 50px rgba(var(--egk-color-primary-rgb), 0.16) !important;
}

.public-app .solution-tier-card.featured:hover {
  box-shadow: 0 26px 64px rgba(var(--egk-color-primary-rgb), 0.22) !important;
}

/* ── Comparison tables (Pricing plan matrix, Features matrix) ───────
   Flat default MudTable → rounded premium panel with a tinted sticky
   header band and soft row hover. */
.public-app .comparison-table {
  border-radius: 20px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07) !important;
}

.public-app .comparison-table thead th {
  background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mud-palette-primary);
  border-bottom: 2px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent) !important;
}

.public-app .comparison-table tbody tr {
  transition: background-color .15s ease;
}

.public-app .comparison-table tbody tr:hover {
  background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent) !important;
}

.public-app .comparison-table tbody td {
  border-color: rgba(148, 163, 184, .16) !important;
}

/* Phones: the plan matrix is wider than the viewport — scroll it instead of
   clipping the last plan column. */
@media (width <= 700px) {
  .public-app .comparison-table,
  .public-app .comparison-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .public-app .comparison-table table {
    min-width: 640px;
  }
}

/* ── FAQ accordions (Pricing, Contact, Support, Sales…) ─────────────
   MudExpansionPanels default to one joined white slab with hairline
   dividers. Render them as separated premium cards instead: rounded,
   bordered, with a primary-tinted header while expanded. */
.public-app .mud-expansion-panels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: transparent;
  box-shadow: none;
}

.public-app .mud-expansion-panels .mud-expand-panel {
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--mud-palette-surface);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .05);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Kill the joined-list seams MudBlazor draws between panels */
.public-app .mud-expansion-panels .mud-expand-panel::before,
.public-app .mud-expansion-panels .mud-expand-panel::after {
  display: none;
}

.public-app .mud-expansion-panels .mud-expand-panel:hover {
  border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .09);
}

.public-app .mud-expansion-panels .mud-expand-panel .mud-expand-panel-header {
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.public-app .mud-expansion-panels .mud-expand-panel.mud-panel-expanded {
  border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
  box-shadow: 0 14px 40px rgba(var(--egk-color-primary-rgb), .12);
}

.public-app .mud-expansion-panels .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header .mud-expand-panel-text {
  color: var(--mud-palette-primary);
  font-weight: 700;
}

.public-app .mud-expansion-panels .mud-expand-panel.mud-panel-expanded .mud-expand-panel-icon {
  color: var(--mud-palette-primary);
}

.public-app .glass-panel {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
}

.public-app .metric-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(12px);
  font-weight: 500;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.public-app .metric-pill:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(125, 211, 252, .5);
  transform: translateY(-1px);
}

.public-app .metric-pill .mud-icon-root {
  color: #7dd3fc;
}

.public-app .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1e40af;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(99, 102, 241, .08));
  border: 1px solid rgba(59, 130, 246, .18);
}

.mud-theme-dark .public-app .section-kicker {
  color: #93c5fd;
  background: rgba(59, 130, 246, .14);
  border-color: rgba(147, 197, 253, .2);
}

.public-app .hero-brand-highlight {
  display: block;
  background: linear-gradient(120deg, #e0f2fe 0%, #c4b5fd 45%, #a5f3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.public-app .marketing-value-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  border-radius: 28px !important;
  padding: 2.25rem 2.5rem !important;
}

.public-app .marketing-value-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  border-radius: 4px 0 0 4px;
}

.public-app .marketing-insight-card {
  border-radius: 20px !important;
  transition: transform .22s ease, box-shadow .22s ease;
}

.public-app .marketing-insight-card:hover {
  transform: translateY(-3px);
}

.public-app .marketing-insight-card .insight-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .1));
  border: 1px solid rgba(59, 130, 246, .15);
  flex-shrink: 0;
}

.public-app .marketing-feature-card .feature-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(99, 102, 241, .08));
  margin-bottom: 1rem;
}

.public-app .marketing-cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(125, 211, 252, .35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(196, 181, 253, .3), transparent 50%),
    linear-gradient(135deg, #1e3a8a 0%, #312e81 48%, #1e40af 100%) !important;
}

.public-app .marketing-cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(8, 17, 31, .15));
}

.public-app .marketing-cta-panel > * {
  position: relative;
  z-index: 1;
}

.public-app .marketing-cta-btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  min-width: 188px;
  letter-spacing: .01em;
}

/* Primary CTA: solid surface pill with high-contrast label (contrast.css enforces). */
.public-app .marketing-cta-btn--primary {
  background-color: var(--egk-cta-surface) !important;
  border: 1px solid var(--egk-cta-surface) !important;
}

.public-app .marketing-cta-btn--primary:hover {
  background-color: rgba(var(--egk-color-primary-rgb), 0.08) !important;
}

/* Secondary CTA: outlined on gradient — tokenized in contrast.css */
.public-app .marketing-cta-btn--secondary {
  border: 1px solid var(--egk-cta-on-gradient-border) !important;
  background-color: transparent !important;
}

/* Marketing CTA panel — final overrides (beats hero-backgrounds cta-gradient palette) */
.public-app .marketing-cta-panel .docs-cta__title,
.public-app .cta-gradient.marketing-cta-panel .docs-cta__title,
.public-app .marketing-cta-panel .home-final-cta__title,
.public-app .cta-gradient.marketing-cta-panel .home-final-cta__title {
  color: var(--egk-on-brand) !important;
}

.public-app .marketing-cta-panel .docs-cta__lead,
.public-app .marketing-cta-panel .mud-typography-body1.docs-cta__lead,
.public-app .cta-gradient.marketing-cta-panel .docs-cta__lead,
.public-app .marketing-cta-panel .home-final-cta__lead,
.public-app .marketing-cta-panel .mud-typography-body1.home-final-cta__lead,
.public-app .cta-gradient.marketing-cta-panel .home-final-cta__lead {
  color: var(--egk-on-brand-muted) !important;
}

.public-app .marketing-cta-panel .marketing-cta-btn--primary.mud-button-root,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--primary.mud-button-root {
  background-color: var(--egk-cta-surface) !important;
  color: var(--egk-cta-on-surface-label) !important;
  border: 1px solid var(--egk-cta-surface) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.public-app .marketing-cta-panel .marketing-cta-btn--primary .mud-button-label,
.public-app .marketing-cta-panel .marketing-cta-btn--primary .mud-button-start-icon,
.public-app .marketing-cta-panel .marketing-cta-btn--primary .mud-button-end-icon,
.public-app .marketing-cta-panel .marketing-cta-btn--primary .mud-icon-root,
.public-app .marketing-cta-panel .marketing-cta-btn--primary svg,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--primary .mud-button-label,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--primary .mud-icon-root {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
  -webkit-text-fill-color: var(--egk-cta-on-surface-label) !important;
}

.public-app .marketing-cta-panel .marketing-cta-btn--secondary.mud-button-root,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--secondary.mud-button-root,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary.mud-button-text.mud-button-root,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary.mud-button-outlined.mud-button-root,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary.mud-button-filled.mud-button-root {
  background-color: transparent !important;
  border: 1px solid var(--egk-cta-on-gradient-border) !important;
  color: var(--egk-on-brand) !important;
  box-shadow: none !important;
}

.public-app .marketing-cta-panel .marketing-cta-btn--secondary .mud-button-label,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary .mud-button-start-icon,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary .mud-button-end-icon,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary .mud-icon-root,
.public-app .marketing-cta-panel .marketing-cta-btn--secondary svg,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--secondary .mud-button-label,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--secondary .mud-icon-root {
  color: var(--egk-on-brand) !important;
  fill: currentColor !important;
  -webkit-text-fill-color: var(--egk-on-brand) !important;
}

.public-app .marketing-cta-panel .marketing-cta-btn--secondary:hover,
.public-app .cta-gradient.marketing-cta-panel .marketing-cta-btn--secondary:hover {
  background-color: var(--egk-cta-on-gradient-hover-bg) !important;
  border-color: var(--egk-on-brand) !important;
}

.showcase-appbar .header-nav__cta-primary.mud-button-root,
.showcase-appbar .header-nav__cta-primary.mud-button-filled.mud-button-root {
  background-color: var(--egk-cta-surface) !important;
  color: var(--egk-cta-on-surface-label) !important;
  border: 1px solid var(--egk-cta-surface) !important;
}

.showcase-appbar .header-nav__cta-primary .mud-button-label,
.showcase-appbar .header-nav__cta-primary .mud-button-start-icon,
.showcase-appbar .header-nav__cta-primary .mud-icon-root,
.showcase-appbar .header-nav__cta-primary svg {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
  -webkit-text-fill-color: var(--egk-cta-on-surface-label) !important;
}

.public-app .journey-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  position: relative;
}

.public-app .journey-rail::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .25), rgba(124, 58, 237, .35), rgba(37, 99, 235, .25));
  z-index: 0;
}

.public-app .journey-step-card {
  position: relative;
  z-index: 1;
  border-radius: 22px !important;
  text-align: left !important;
  padding: 1.5rem 1.35rem !important;
}

.public-app .journey-step-card .step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  margin-bottom: .75rem;
}

.public-app .public-conversion-footer {
  border-radius: 20px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .98)),
    linear-gradient(135deg, rgba(37, 99, 235, .04), rgba(124, 58, 237, .03)) !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .06) !important;
}

.mud-theme-dark .public-app .public-conversion-footer {
  background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .88)) !important;
}

.public-app .cta-gradient,
.public-app .docs-cta {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(125, 211, 252, .35), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(196, 181, 253, .3), transparent 50%),
    linear-gradient(135deg, #1e3a8a 0%, #312e81 48%, #1e40af 100%) !important;
}

/* Glowing hairline where the CTA band meets the light content above it —
   the same crafted seam used at the top of the home page's final CTA. */
.public-app section.cta-gradient::before,
.public-app section.docs-cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent 8%,
      rgba(125, 211, 252, .6) 40%,
      rgba(167, 139, 250, .6) 60%,
      transparent 92%);
}

.public-app .responsive-image,
.public-app .image-container {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .05), rgba(148, 163, 184, .08));
}

.public-app .responsive-image__media,
.public-app .image-cover,
.public-app .image-contain {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
}

.public-app .responsive-image--cover .responsive-image__media,
.public-app .image-cover {
  object-fit: cover;
}

.public-app .responsive-image--contain .responsive-image__media,
.public-app .image-contain {
  object-fit: contain;
}

.public-app .responsive-image__content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.public-app .image-ratio-21x9 { aspect-ratio: 21 / 9; }
.public-app .image-ratio-16x9 { aspect-ratio: 16 / 9; }
.public-app .image-ratio-4x3 { aspect-ratio: 4 / 3; }
.public-app .image-ratio-1x1 { aspect-ratio: 1 / 1; }
.public-app .image-ratio-dashboard { aspect-ratio: 5 / 3; }
.public-app .image-focal-center { object-position: center; }
.public-app .image-focal-top { object-position: center top; }
.public-app .image-focal-bottom { object-position: center bottom; }
.public-app .image-soft-frame {
  border: 1px solid rgba(148, 163, 184, .24);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .16);
}

@media (max-width: 960px) {
  .public-app .journey-rail {
    grid-template-columns: 1fr;
  }

  .public-app .journey-rail::before {
    display: none;
  }
}

.public-app .image-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 32px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .16);
  border: 1px solid rgba(148, 163, 184, .24);
}

.public-app .image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, .18), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .18));
  z-index: 0;
}

.public-app .image-panel--operations { background-image: url('/Images/2.jpg'), url('/Images/6.jpg'); }
.public-app .image-panel--growth { background-image: url('/Images/3.jpg'), url('/Images/3.jpg'); }
.public-app .image-panel--secure { background-image: url('/Images/4.jpg'), url('/Images/4.jpg'); }
.public-app .image-panel--success { background-image: url('/Images/5.jpg'), url('/Images/5.jpg'); }
.public-app .image-panel--brand { background-image: url('/Images/6.jpg'), url('/Images/2.jpg'); }

/* Blog/list card thumbnails (branded card placeholders until real art lands). */
.public-app .blog-card { overflow: hidden; }
.public-app .blog-image { line-height: 0; }
.public-app .blog-thumb { border-top-left-radius: inherit; border-top-right-radius: inherit; }

.public-app .visual-direction-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, .22);
  background:
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, .22), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(196, 181, 253, .2), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .94));
  box-shadow: 0 24px 80px rgba(15, 23, 42, .16);
}

.public-app .visual-direction-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent);
  pointer-events: none;
}

.public-app .product-preview-shell {
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow: 0 30px 90px rgba(15, 23, 42, .16);
  overflow: hidden;
}

.mud-theme-dark .public-app .product-preview-shell {
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92));
}

.public-app .product-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: rgba(248, 250, 252, .78);
}

.mud-theme-dark .public-app .product-preview-topbar {
  background: rgba(15, 23, 42, .72);
}

.public-app .window-dots {
  display: inline-flex;
  gap: .4rem;
}

.public-app .window-dots span {
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  display: inline-block;
  background: #94a3b8;
}

.public-app .window-dots span:nth-child(1) { background: #f87171; }
.public-app .window-dots span:nth-child(2) { background: #fbbf24; }
.public-app .window-dots span:nth-child(3) { background: #34d399; }

.public-app .trusted-logo-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 1rem;
}

.public-app .trusted-logo-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(255, 255, 255, .72);
  padding: 1rem;
  text-align: center;
  color: #475569;
  font-weight: 700;
  letter-spacing: .02em;
}

.mud-theme-dark .public-app .trusted-logo-card {
  background: rgba(15, 23, 42, .72);
  color: #cbd5e1;
}

.public-app .trusted-logo-card--link {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.public-app .trusted-logo-card--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.public-app .trusted-logo-card__img {
  max-height: 36px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .85;
  transition: filter .2s ease, opacity .2s ease;
}

.public-app .trusted-logo-card:hover .trusted-logo-card__img {
  filter: grayscale(0%);
  opacity: 1;
}

.public-app .home-success-story-card__logo {
  max-height: 40px;
  max-width: 100px;
  object-fit: contain;
}

/* Result block: tinted panel in the story's accent, so a red/green/blue metric
   reads as a deliberate highlight instead of an error/success status color. */
.public-app .home-success-story-card__result {
  padding: 0.85rem 1rem;
  margin-top: 0.25rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pillar-accent, #2563eb) 7%, transparent);
  border-inline-start: 3px solid var(--pillar-accent, #2563eb);
}

.public-app .home-success-story-card__result .home-success-story-card__metric {
  color: var(--pillar-accent, var(--mud-palette-primary));
}

.public-app .home-success-story-card__result .home-success-story-card__label--result {
  color: var(--pillar-accent, var(--mud-palette-primary));
}

.public-app .ai-demo-flow {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, .22);
  background:
    radial-gradient(circle at 10% 10%, rgba(59, 130, 246, .14), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(124, 58, 237, .12), transparent 30%),
    var(--mud-palette-surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .1);
}

.public-app .ai-flow-line {
  height: 2px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .1), rgba(37, 99, 235, .75), rgba(20, 184, 166, .75), rgba(124, 58, 237, .1));
  animation: egk-flow 2.8s ease-in-out infinite;
}

@keyframes egk-flow {
  0%, 100% { opacity: .45; transform: scaleX(.94); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 960px) {
  .public-app .trusted-logo-strip {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 960px) {
  .public-app .hero-actions .mud-button,
  .public-app .cta-actions .mud-button {
    width: 100%;
    margin: .35rem 0 !important;
  }
}

/* Header nav legacy classes remain for other components; BEM classes used in Header.razor */
.public-app .showcase-header-navigation { display: flex; align-items: center;
 width: 100%; }

.public-app .nav-button { position: relative;
 margin: 0 8px;
 border-radius: 8px;
 color: rgba(255, 255, 255, 0.9);
 transition: all 0.3s ease; text-transform: none; font-weight: 500; }

.public-app .nav-button:hover { background: rgba(255, 255, 255, 0.1);
 color: #fff; transform: translateY(-1px); }

.public-app .nav-dropdown { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
 backdrop-filter: blur(20px);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); }

/* Mobile drawer */
.public-app .mobile-drawer { width: 320px; }
.public-app .mobile-menu-content { height: 100vh; overflow-y: auto; }
.public-app .mobile-actions .mud-button { border-radius: 12px; font-weight: 600; text-transform: none; }

/* Dark theme adjustments */
.mud-theme-dark .public-app .card-professional,
.mud-theme-dark .public-app .feature-card { background: #2d2d2d; border-color: #424242; }

/* Focus visibility: prefer component-level :focus-visible; do not blanket override here */

/* Print */
@media print {
  .public-app .hero-section { background: white !important;
 color: black !important; }
}

/* ============================================================
   Marketing readability layer
   Guarantees high-contrast, consistent typography independent
   of the active enterprise theme palette. Inline white styles in
   hero / CTA / gradient areas still win via inline specificity,
   so on-image headlines stay readable.
   ============================================================ */

/* Section headings: dark and dominant on light surfaces */
.public-app section h1,
.public-app section h2,
.public-app section h3,
.public-app section h4,
.public-app section h5,
.public-app section h6 {
  color: #0f172a;
}

.mud-theme-dark .public-app section h1,
.mud-theme-dark .public-app section h2,
.mud-theme-dark .public-app section h3,
.mud-theme-dark .public-app section h4,
.mud-theme-dark .public-app section h5,
.mud-theme-dark .public-app section h6 {
  color: #f1f5f9;
}

/* Muted/supporting copy: neutral slate instead of a saturated brand colour */
.public-app .mud-secondary-text {
  color: #475569 !important;
}

.mud-theme-dark .public-app .mud-secondary-text {
  color: #cbd5e1 !important;
}

/* Default marketing body copy keeps strong primary contrast */
.public-app section .mud-typography-body1,
.public-app section .mud-typography-body2 {
  color: #334155;
}

.mud-theme-dark .public-app section .mud-typography-body1,
.mud-theme-dark .public-app section .mud-typography-body2 {
  color: #e2e8f0;
}

/* Type hierarchy: section titles read as clearly dominant H2s */
.public-app section .mud-typography-h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.public-app section .mud-typography-h6 {
  letter-spacing: -0.005em;
}

/* Keep on-image hero / CTA headings white even without inline styles */
.public-app .cta-section .mud-typography-h2,
.public-app .cta-section .mud-typography-h6,
.public-app .cta-gradient .mud-typography-h2,
.public-app .cta-gradient .mud-typography-h6,
.public-app .docs-cta .mud-typography-h3,
.public-app .docs-cta .mud-typography-body1 {
  color: #fff;
}

/* ============================================================
   Premium section composition polish
   Balances centered intros, tightens the type scale, and gives
   section headers a consistent vertical rhythm.
   ============================================================ */

/* Centered section intros: consistent kicker spacing */
.public-app section .text-center .section-kicker {
  margin-bottom: 1rem;
}

/* Constrain centered headlines + subtitles so wide sections don't sprawl */
.public-app section .text-center > .mud-typography-h2 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.public-app section .text-center > .mud-typography-h5,
.public-app section .text-center > .mud-typography-h6 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Balanced, premium section title scale (hero h1 is handled separately) */
.public-app section .mud-typography-h2 {
  font-size: clamp(1.9rem, 1.05rem + 1.9vw, 2.55rem);
}

/* Slightly tighter, more legible card titles */
.public-app .feature-card .mud-typography-h6,
.public-app .industry-card .mud-typography-h6,
.public-app .testimonial-card .mud-typography-subtitle2 {
  font-size: 1.08rem;
}

/* Section vertical rhythm: ensure intros breathe before the grid */
.public-app section .text-center.mb-12 {
  margin-bottom: 3.25rem !important;
}

/* ============================================================
   RTL marketing polish
   dir="rtl" lives on .public-app itself — use :is(.public-app[dir="rtl"], …)
   ============================================================ */

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .marketing-section,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .industry-solutions,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .features-overview,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .customer-testimonials,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-section,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-section {
  direction: rtl;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .production-card,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .feature-card,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .journey-step-card,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .marketing-insight-card,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .marketing-feature-card,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-testimonial-card {
  text-align: right !important;
}

/* Industry tiles stay centered (matches Arabic marketing layout) */
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-industry-card,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-industry-card .pa-4 {
  text-align: center !important;
  align-items: center !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .industry-solutions .mud-grid {
  justify-content: flex-start;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .feature-header,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .testimonial-author,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .marketing-insight-card .d-flex,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .kpi-header,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .kpi-change {
  flex-direction: row-reverse;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .feature-header .ml-4,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .testimonial-author .ml-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .marketing-insight-card .gap-3 {
  gap: 1rem !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-hero-actions,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .hero-actions,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .cta-actions,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-hero-trust,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .trust-badges {
  direction: rtl;
}

/* Mirror forward arrows (←) on EndIcon CTAs */
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-end-icon,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-icon-end {
  margin-left: 0 !important;
  margin-right: 8px !important;
  margin-inline-start: 8px !important;
  margin-inline-end: 0 !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-end-icon .mud-icon-root,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-end-icon svg,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-icon-end .mud-icon-root,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-icon-end svg {
  transform: scaleX(-1);
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-start-icon,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .mud-button-root .mud-button-icon-start {
  margin-right: 0 !important;
  margin-left: 8px !important;
  margin-inline-end: 0 !important;
  margin-inline-start: 8px !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .journey-rail {
  direction: rtl;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-ai-steps {
  direction: rtl;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-ai-steps::before {
  background: linear-gradient(270deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.35), rgba(37, 99, 235, 0.2));
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .journey-step-card .step-index,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-ai-step__index {
  margin-left: auto;
  margin-right: 0;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* Footer link interactivity */
.public-app .showcase-footer a,
.public-app .showcase-footer .mud-link,
.public-app .showcase-footer .legal-btn,
.public-app .showcase-footer .social-icon-enhanced {
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.public-app .showcase-footer .footer-links a:hover,
.public-app .showcase-footer .footer-powered-link:hover,
.public-app .showcase-footer .legal-links .mud-link:hover {
  color: var(--mud-palette-primary) !important;
  transform: translateX(4px);
}

.public-app .showcase-footer .social-icon-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.public-app .footer-trust-chip {
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

/* Store badges: column aligns with page direction; only badge chips stay LTR. */
.public-app .showcase-footer .egk-store-badges {
  align-items: flex-start;
  width: 100%;
  text-align: start;
}

.public-app .showcase-footer .egk-store-badges__label {
  width: 100%;
  text-align: start;
}

.public-app .showcase-footer .egk-store-badges__row,
.public-app .showcase-footer .egk-store-badge,
.public-app .showcase-footer .egk-store-badge__copy {
  direction: ltr !important;
  unicode-bidi: isolate;
}

.public-app .showcase-footer .egk-store-badge {
  color: #fff !important;
}

.public-app .showcase-footer .egk-store-badge:hover {
  color: #fff !important;
  transform: translateY(-2px) scale(1.02);
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .showcase-footer .egk-store-badge,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .showcase-footer .egk-store-badge__icon,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .showcase-footer .egk-store-badge__icon svg {
  transform: none !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .showcase-footer .egk-store-badge:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .footer-links a:hover,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .feature-link:hover,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .showcase-footer .footer-powered-link:hover,
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .showcase-footer .legal-links .mud-link:hover {
  transform: translateX(-4px);
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-hero-split__content {
  text-align: right;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-breadcrumb-nav {
  justify-content: flex-start;
}

@media (min-width: 960px) {
  :is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-page-hero .public-hero-split__content {
    text-align: right;
  }
}

@media (max-width: 960px) {
  :is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-page-hero .public-hero-split__content,
  :is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .public-hero-split__content {
    text-align: center;
  }

  :is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-page-hero .public-hero-trust,
  :is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-page-hero .public-hero-actions,
  :is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-breadcrumb-nav {
    justify-content: center;
  }
}

/* ============================================================
   Blog module (list + details)
   ============================================================ */
.featured-article {
  background: linear-gradient(135deg, var(--mud-palette-surface), rgba(var(--mud-palette-primary-rgb), 0.05));
  border: 1px solid var(--mud-palette-divider);
}

.featured-article .featured-thumb,
.featured-article .responsive-image {
  border-radius: 16px;
  display: block;
  width: 100%;
}

.blog-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--mud-palette-divider);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}

.blog-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.05), rgba(var(--mud-palette-secondary-rgb), 0.05));
}

.blog-card__media .responsive-image,
.blog-card__media .blog-thumb {
  display: block;
  width: 100%;
}

.blog-card__badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
}

.blog-card__bookmark {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.blog-card__title-link {
  color: inherit;
}

.blog-card__title-link:hover {
  color: var(--mud-palette-primary);
}

.blog-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* List (horizontal) layout */
@media (min-width: 600px) {
  .blog-card--row {
    flex-direction: row;
  }

  .blog-card--row .blog-card__media {
    width: 38%;
    flex: 0 0 38%;
  }
}

/* Sticky table of contents */
.blog-toc-sticky {
  position: sticky;
  top: 96px;
}

.blog-toc__list {
  background: transparent;
  padding: 0;
}

.blog-toc__item {
  list-style: none;
  padding: 2px 0;
}

.blog-toc__item--sub {
  padding-inline-start: 16px;
}

/* Article body typography */
.blog-article-content {
  font-size: 1.075rem;
  line-height: 1.85;
  color: var(--mud-palette-text-primary);
}

.blog-article-content h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  scroll-margin-top: var(--egk-scroll-offset, 88px);
}

.blog-article-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  scroll-margin-top: var(--egk-scroll-offset, 88px);
}

.blog-article-content p {
  margin: 0 0 1.1rem;
}

.blog-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.blog-detail-image .responsive-image,
.blog-detail-image .blog-detail-thumb {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.blog-detail-hero__crumbs .mud-breadcrumb-item,
.blog-detail-hero__crumbs .mud-breadcrumbs li,
.blog-detail-hero__crumbs a {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* RTL: mirror the table-of-contents indentation and card badge */
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .blog-article-content {
  text-align: right;
}

/* Reader comments */
.blog-comments .blog-comment__body {
  white-space: pre-wrap;
  word-break: break-word;
}

.blog-comments .blog-comment__replies {
  border-inline-start: 2px solid var(--mud-palette-divider);
  padding-inline-start: 0.75rem;
}

/* ============================================================================
   DESIGN-SYSTEM PRIMITIVES (token-driven, opt-in via .egk-* classes)
   Reusable building blocks for consistent rhythm, surfaces, and hierarchy.
   Pair with the tokens in core/tokens.css. Safe to adopt incrementally.
   ========================================================================== */

/* ── Section rhythm ─────────────────────────────────────────────────────── */
.egk-section {
  position: relative;
  padding-block: var(--egk-section-y);
}

.egk-section--sm {
  padding-block: var(--egk-section-y-sm);
}

/* Alternating tinted band to create vertical rhythm between sections */
.egk-section--alt {
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--egk-color-primary-rgb), 0.05), transparent 36%),
    linear-gradient(180deg, rgba(var(--egk-color-primary-rgb), 0.035), rgba(var(--egk-color-surface-rgb), 0));
}

/* Full brand-gradient band (CTA strips, hero-adjacent sections) */
.egk-section--brand {
  background: var(--egk-gradient-brand);
  color: var(--egk-on-brand);
}

.egk-section--brand .mud-typography {
  color: inherit;
}

/* Constrained content container with consistent max width */
.egk-container {
  width: min(100% - 2rem, var(--egk-content-max));
  margin-inline: auto;
}

/* ── Section heading block ──────────────────────────────────────────────── */
.egk-section-head {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--egk-density-block);
}

.egk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: var(--egk-tracking-caps);
  font-size: var(--egk-fs-xs);
  font-weight: var(--egk-weight-bold);
  color: var(--egk-color-primary);
  margin-bottom: 0.75rem;
}

.egk-title {
  font-size: var(--egk-fs-h2);
  line-height: var(--egk-lh-snug);
  letter-spacing: var(--egk-tracking-tight);
  font-weight: var(--egk-weight-bold);
  margin: 0 0 0.6rem;
}

.egk-title--display {
  font-size: var(--egk-fs-display);
  line-height: var(--egk-lh-tight);
  letter-spacing: var(--egk-tracking-tighter);
  font-weight: var(--egk-weight-extrabold);
}

.egk-lead {
  max-width: var(--egk-prose-max);
  margin-inline: auto;
  color: var(--egk-color-muted);
  font-size: var(--egk-fs-body-lg);
  line-height: var(--egk-lh-relaxed);
}

/* Gradient text accent (use sparingly on key words/headlines) */
.egk-text-gradient {
  background: var(--egk-gradient-brand-vivid);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Surface / card ─────────────────────────────────────────────────────── */
.egk-surface {
  background: var(--egk-color-surface);
  border: 1px solid var(--egk-color-divider);
  border-radius: var(--egk-radius-xl);
  box-shadow: var(--egk-shadow-sm);
}

.egk-surface--interactive {
  transition: transform var(--egk-dur) var(--egk-ease-out),
    box-shadow var(--egk-dur) var(--egk-ease-out),
    border-color var(--egk-dur) var(--egk-ease-out);
  will-change: transform;
}

.egk-surface--interactive:hover {
  transform: translateY(-6px);
  box-shadow: var(--egk-shadow-lg);
  border-color: rgba(var(--egk-color-primary-rgb), 0.35);
}

/* Top accent strip for feature/industry cards */
.egk-surface--accent {
  position: relative;
  overflow: hidden;
}

.egk-surface--accent::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--egk-gradient-brand-vivid);
}

/* Icon medallion used at the top of cards/steps */
.egk-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--egk-radius-lg);
  color: var(--egk-color-primary);
  background: rgba(var(--egk-color-primary-rgb), 0.10);
  border: 1px solid rgba(var(--egk-color-primary-rgb), 0.18);
}

/* ── Responsive auto-fit grid ───────────────────────────────────────────── */
.egk-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.egk-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* ── Soft chip / pill ───────────────────────────────────────────────────── */
.egk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--egk-radius-full);
  font-size: var(--egk-fs-sm);
  font-weight: var(--egk-weight-medium);
  color: var(--egk-color-primary);
  background: rgba(var(--egk-color-primary-rgb), 0.10);
  border: 1px solid rgba(var(--egk-color-primary-rgb), 0.18);
}

/* Gradient divider for subtle section breaks */
.egk-divider-gradient {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent,
    rgba(var(--egk-color-primary-rgb), 0.35), transparent);
}

/* ============================================================================
   GLOBAL POLISH (conservative, scoped to .public-app)
   Broad consistency upgrades that propagate to every page.
   ========================================================================== */

/* Modern SaaS button casing: stop MudBlazor from upper-casing labels and give
   a consistent medium weight. Individual CTAs can still override. */
.public-app .mud-button-root {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--egk-weight-semibold);
}

/* Consistent, accessible focus ring on interactive elements */
.public-app a:focus-visible,
.public-app .mud-button-root:focus-visible,
.public-app .mud-icon-button:focus-visible,
.public-app .mud-nav-link:focus-visible,
.public-app [tabindex]:focus-visible {
  outline: none;
  border-radius: var(--egk-radius-sm);
  box-shadow: var(--egk-focus-ring);
}

/* FocusOnNavigate moves programmatic focus to the page heading (giving it
   tabindex="-1") after every route change. Headings are not interactive, so
   neither the base.css catch-all nor the [tabindex]:focus-visible rule above
   may draw a ring around them (it rendered as a stray green rectangle hugging
   the hero headline). The [tabindex] variants are needed to out-rank that rule. */
.public-app h1:focus-visible,
.public-app h2:focus-visible,
.public-app h3:focus-visible,
.public-app h1[tabindex]:focus-visible,
.public-app h2[tabindex]:focus-visible,
.public-app h3[tabindex]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Themed text selection */
.public-app ::selection {
  background: rgba(var(--egk-color-primary-rgb), 0.22);
}

/* Smooth in-page anchor scrolling (disabled under reduced-motion below) */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .egk-surface--interactive {
    transition: none;
  }

  .egk-surface--interactive:hover {
    transform: none;
  }
}

/* ============================================================================
   REFINEMENT LAYER (deeper, broadly-propagating polish; scoped to .public-app)
   Tightens typography hierarchy and unifies the shape language of buttons,
   cards, chips, and links across every page. Token-driven and theme-safe.
   ========================================================================== */

/* ── Typography hierarchy ───────────────────────────────────────────────── */
.public-app .mud-typography-h1,
.public-app .mud-typography-h2,
.public-app .mud-typography-h3,
.public-app .mud-typography-h4 {
  letter-spacing: var(--egk-tracking-tight);
  line-height: var(--egk-lh-snug);
  /* Avoid orphan words in marketing headlines (graceful where unsupported) */
  text-wrap: balance;
}

.public-app .mud-typography-h1,
.public-app .mud-typography-h2 {
  font-weight: var(--egk-weight-bold);
}

.public-app .mud-typography-h1 {
  line-height: var(--egk-lh-tight);
  letter-spacing: var(--egk-tracking-tighter);
}

/* Lead / body readability */
.public-app .mud-typography-subtitle1,
.public-app .mud-typography-body1 {
  line-height: var(--egk-lh-relaxed);
}

/* Eyebrow/overline kicker spacing for a refined editorial feel */
.public-app .mud-typography-overline {
  letter-spacing: var(--egk-tracking-caps);
  font-weight: var(--egk-weight-bold);
}

/* ── Shape language: buttons ────────────────────────────────────────────── */
.public-app .mud-button-root {
  border-radius: var(--egk-radius-md);
  transition: transform var(--egk-dur-fast) var(--egk-ease-out),
    box-shadow var(--egk-dur-fast) var(--egk-ease-out),
    background-color var(--egk-dur-fast) var(--egk-ease),
    border-color var(--egk-dur-fast) var(--egk-ease);
}

/* Tactile lift on solid/outlined CTAs (icon buttons & FABs excluded) */
.public-app .mud-button-filled:hover,
.public-app .mud-button-outlined:hover {
  transform: translateY(-1px);
  box-shadow: var(--egk-shadow-md);
}

.public-app .mud-button-filled:active,
.public-app .mud-button-outlined:active {
  transform: translateY(0);
}

/* ── Shape language: cards & chips ──────────────────────────────────────── */
.public-app .mud-card {
  border-radius: var(--egk-radius-xl);
}

.public-app .mud-chip {
  border-radius: var(--egk-radius-full);
  font-weight: var(--egk-weight-medium);
}

/* ── Links ──────────────────────────────────────────────────────────────── */
.public-app .mud-link {
  transition: color var(--egk-dur-fast) var(--egk-ease),
    opacity var(--egk-dur-fast) var(--egk-ease);
}

/* ── Sticky-header-aware anchor scrolling ───────────────────────────────────
   The appbar is sticky (~64px); offset in-page anchor targets so smooth-scroll
   jumps don't land hidden underneath it. */
.public-app :target {
  scroll-margin-top: var(--egk-scroll-offset, 88px);
}

@media (prefers-reduced-motion: reduce) {
  .public-app .mud-button-root {
    transition: none;
  }

  .public-app .mud-button-filled:hover,
  .public-app .mud-button-outlined:hover {
    transform: none;
    box-shadow: none;
  }
}