/* 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: hidden;
}

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: hidden;
}

/* 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: hidden !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: #1976d2; }
.public-app .btn-primary { color: #fff; background-color: #1976d2; border-color: #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 #42a5f5; }

.public-app .content { padding-top: 1.1rem; }

.public-app .valid.modified:not([type="checkbox"]) { outline: 1px solid #4caf50; }
.public-app .invalid { outline: 1px solid #f44336; }
.public-app .validation-message { color: #f44336; }

/* Do NOT remove outlines globally. Component CSS should manage focus styles. */

.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: linear-gradient(135deg, #1976d2, #42a5f5); 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/erp-command-center.svg') 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/erp-command-center.svg') 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/platform-operations.svg') 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/growth-dashboard.svg') 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/secure-cloud.svg') 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/customer-success.svg') 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/platform-operations.svg') 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/erp-command-center.svg') 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/customer-success.svg') center / cover no-repeat !important;
}

.public-app .resources-hero,
.public-app .kb-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/erp-command-center.svg') 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/customer-success.svg') 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/secure-cloud.svg') 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/secure-cloud.svg') 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/customer-success.svg') 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/platform-operations.svg') 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/secure-cloud.svg') 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 {
  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 {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, .32);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .13) !important;
}

.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, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(12px);
}

.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 white pill with dark-navy label/icon, readable on the
   dark gradient regardless of the active MudBlazor theme. */
.public-app .marketing-cta-btn--primary {
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

.public-app .marketing-cta-btn--primary,
.public-app .marketing-cta-btn--primary .mud-button-label,
.public-app .marketing-cta-btn--primary .mud-icon-root,
.public-app .marketing-cta-btn--primary svg {
  color: #1e3a8a !important;
  fill: currentColor !important;
}

.public-app .marketing-cta-btn--primary:hover {
  background-color: #eef2ff !important;
}

/* Secondary CTA: outlined white-on-gradient. */
.public-app .marketing-cta-btn--secondary {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background-color: transparent !important;
}

.public-app .marketing-cta-btn--secondary,
.public-app .marketing-cta-btn--secondary .mud-button-label,
.public-app .marketing-cta-btn--secondary .mud-icon-root,
.public-app .marketing-cta-btn--secondary svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

.public-app .marketing-cta-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.85) !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 {
  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 .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/platform-operations.svg'); }
.public-app .image-panel--growth { background-image: url('/Images/3.jpg'), url('/Images/growth-dashboard.svg'); }
.public-app .image-panel--secure { background-image: url('/Images/4.jpg'), url('/Images/secure-cloud.svg'); }
.public-app .image-panel--success { background-image: url('/Images/5.jpg'), url('/Images/customer-success.svg'); }
.public-app .image-panel--brand { background-image: url('/Images/6.jpg'), url('/Images/erp-command-center.svg'); }

/* 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 .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 {
  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;
}

: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 {
  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: 96px;
}

.blog-article-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  scroll-margin-top: 96px;
}

.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: clamp(2rem, 4vw, 3.25rem);
}

.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);
}

/* 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: 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;
  }
}