/* Shared home / about marketing page refinements */

.public-app .public-section-title {
  letter-spacing: var(--egk-tracking-tight);
  line-height: var(--egk-lh-snug);
  font-weight: var(--egk-weight-bold);
  text-wrap: balance;
}

.public-app .public-section-lead {
  max-width: 42rem;
  line-height: var(--egk-lh-relaxed);
  color: var(--egk-color-muted);
  font-size: var(--egk-fs-body-lg);
  text-wrap: pretty;
}

/* Global rule: centered section header title => centered subtitle */
.public-app .home-section-header.text-center .public-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.public-app .public-body-copy {
  line-height: var(--egk-lh-relaxed);
  max-width: 36rem;
  text-wrap: pretty;
}

/* Hero — chip, title, metrics, CTAs */
.public-app .public-hero-chip {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.public-app .home-hero-chip {
  color: #bbf7d0 !important;
}

.public-app .public-hero-title {
  color: #fff !important;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(2rem, 4.5vw, 3.35rem) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.public-app .public-hero-title .hero-brand-highlight {
  display: block;
  margin-top: 0.12em;
}

.public-app .public-hero-lead {
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.7;
  font-weight: 400;
}

.public-app .home-page-hero .public-hero-lead {
  max-width: 34rem;
}

.public-app .public-hero-metric {
  text-align: center;
  padding: 1rem 0.75rem;
  border-radius: 16px;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.public-app .public-hero-metric:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.public-app .public-hero-metric__icon {
  color: #93c5fd !important;
}

.public-app .public-hero-metric__value {
  color: #fff !important;
}

.public-app .public-hero-metric__label {
  color: rgba(255, 255, 255, 0.78) !important;
}

.public-app .public-hero-cta-primary.mud-button-root,
.public-app .hero-cta-btn--primary.mud-button-root {
  background: var(--egk-cta-surface) !important;
  color: var(--egk-cta-on-surface-label) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  text-transform: none !important;
  border: 1px solid var(--egk-cta-surface) !important;
}

.public-app .public-hero-cta-primary .mud-button-label,
.public-app .public-hero-cta-primary .mud-button-start-icon,
.public-app .public-hero-cta-primary .mud-icon-root,
.public-app .public-hero-cta-primary svg,
.public-app .hero-cta-btn--primary .mud-button-label,
.public-app .hero-cta-btn--primary .mud-button-start-icon,
.public-app .hero-cta-btn--primary .mud-icon-root,
.public-app .hero-cta-btn--primary svg {
  color: var(--egk-cta-on-surface-label) !important;
  fill: currentColor !important;
}

.public-app .public-hero-cta-secondary.mud-button-root,
.public-app .hero-cta-btn--secondary.mud-button-root {
  background: transparent !important;
  border: 2px solid var(--egk-cta-on-gradient-border) !important;
  color: var(--egk-on-brand) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.public-app .public-hero-cta-secondary .mud-button-label,
.public-app .public-hero-cta-secondary .mud-button-start-icon,
.public-app .public-hero-cta-secondary .mud-icon-root,
.public-app .public-hero-cta-secondary svg,
.public-app .hero-cta-btn--secondary .mud-button-label,
.public-app .hero-cta-btn--secondary .mud-button-start-icon,
.public-app .hero-cta-btn--secondary .mud-icon-root,
.public-app .hero-cta-btn--secondary svg {
  color: var(--egk-on-brand) !important;
  fill: currentColor !important;
}

.public-app .public-hero-cta-secondary:hover,
.public-app .hero-cta-btn--secondary:hover {
  background: var(--egk-cta-on-gradient-hover-bg) !important;
  border-color: var(--egk-on-brand) !important;
}

.public-app .public-hero-cta-tertiary.mud-button-root,
.public-app .hero-cta-btn--text.mud-button-root {
  color: var(--egk-on-brand-muted) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  background: transparent !important;
}

.public-app .public-hero-cta-tertiary .mud-button-label,
.public-app .public-hero-cta-tertiary .mud-button-start-icon,
.public-app .public-hero-cta-tertiary .mud-icon-root,
.public-app .public-hero-cta-tertiary svg,
.public-app .hero-cta-btn--text .mud-button-label,
.public-app .hero-cta-btn--text .mud-button-start-icon,
.public-app .hero-cta-btn--text .mud-icon-root,
.public-app .hero-cta-btn--text svg {
  color: var(--egk-on-brand-muted) !important;
  fill: currentColor !important;
}

.public-app .public-hero-cta-tertiary:hover,
.public-app .hero-cta-btn--text:hover {
  background: var(--egk-cta-on-gradient-hover-bg) !important;
}

.public-app .public-hero-cta-tertiary:hover .mud-button-label,
.public-app .public-hero-cta-tertiary:hover .mud-icon-root,
.public-app .hero-cta-btn--text:hover .mud-button-label,
.public-app .hero-cta-btn--text:hover .mud-icon-root {
  color: var(--egk-on-brand) !important;
}

/* Split hero (about + home) */
.public-app .public-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.public-app .public-hero-split__content,
.public-app .public-hero-split__visual {
  min-width: 0;
}

.public-app .about-page-hero .public-hero-split__content {
  text-align: left;
}

.public-app .about-page-hero .public-hero-trust,
.public-app .about-page-hero .public-hero-actions {
  justify-content: flex-start;
}

.public-app .about-page-hero .about-breadcrumb-nav {
  justify-content: flex-start;
}

.public-app .public-hero-visual-panel {
  border-radius: 24px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.public-app .public-hero-visual-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.4) !important;
}

.public-app .public-hero-visual-panel .image-panel {
  border-radius: 0;
}

/* Dashboard mockup chrome */
.public-app .public-dashboard-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.mud-theme-dark .public-app .public-dashboard-chrome {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

.public-app .public-kpi-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 0.5rem;
}

.public-app .public-kpi-spark span {
  flex: 1;
  max-width: 8px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg,
    rgba(var(--egk-color-primary-rgb), 0.55),
    rgba(var(--egk-color-primary-rgb), 0.15));
}

.public-app .kpi-card {
  position: relative;
}

/* Milestones timeline */
.public-app .public-milestone {
  position: relative;
  padding-top: 0.25rem;
}

.public-app .public-milestone__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--egk-gradient-brand-vivid);
  margin-bottom: 0.65rem;
}

/* Industry / leader accent */
.public-app .public-card-accent {
  height: 3px;
  width: 100%;
  border-radius: 24px 24px 0 0;
}

.public-app .home-industry-card {
  overflow: hidden;
  padding-top: 0 !important;
}

.public-app .home-industry-card .pa-4 {
  padding-top: 1.25rem !important;
}

/* AI demo step rail */
.public-app .public-ai-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
}

.public-app .public-ai-steps::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--egk-color-primary-rgb), 0.2),
    rgba(var(--egk-color-secondary-rgb), 0.35),
    rgba(var(--egk-color-primary-rgb), 0.2));
  z-index: 0;
}

.public-app .public-ai-step {
  position: relative;
  z-index: 1;
}

.public-app .public-ai-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--egk-gradient-brand-vivid);
  margin-bottom: 0.65rem;
}

.public-app .public-stat-highlight {
  background: var(--egk-gradient-brand-vivid);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
}

/* Vision panel (about) */
.public-app .about-vision-panel {
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(125, 211, 252, 0.2), transparent 40%),
    linear-gradient(145deg, #0f172a 0%, #1e3a8a 48%, #3730a3 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.public-app .about-vision-panel__kicker {
  color: rgba(191, 219, 254, 0.9);
  letter-spacing: 0.12em;
}

.public-app .about-vision-panel__title {
  color: #fff !important;
  line-height: 1.45;
}

.public-app .about-vision-panel__divider {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.public-app .about-vision-panel__heading {
  color: #f8fafc !important;
  letter-spacing: -0.01em;
}

/* MudPaper + MudTypography reset palette colors — force readable text on dark panel */
.public-app .about-vision-panel .mud-typography {
  color: inherit;
}

.public-app .about-vision-panel__value-title {
  color: #ffffff !important;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.public-app .about-vision-panel__value-desc {
  color: rgba(241, 245, 249, 0.9) !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

.public-app .about-vision-panel .about-vision-panel__icon-ring,
.public-app .about-vision-panel .insight-icon-ring {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.public-app .about-vision-panel .about-vision-panel__icon,
.public-app .about-vision-panel .insight-icon-ring .mud-icon-root {
  color: #e0f2fe !important;
}

.public-app .about-value-row__text {
  min-width: 0;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .about-vision-panel .about-value-row {
  flex-direction: row-reverse;
  text-align: right;
}

.public-app .about-leader-card {
  overflow: hidden;
}

.public-app .about-cert-card__ring,
.public-app .home-tech-card__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(var(--egk-color-primary-rgb), 0.25);
  background: linear-gradient(135deg,
    rgba(var(--egk-color-primary-rgb), 0.10),
    rgba(var(--egk-color-secondary-rgb), 0.06));
}

.public-app .about-tech-panel {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
}

.mud-theme-dark .public-app .about-tech-panel {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.5));
}

.public-app .about-tech-item {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  height: 100%;
}

.mud-theme-dark .public-app .about-tech-item {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(148, 163, 184, 0.15);
}

.public-app .about-tech-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--egk-color-primary-rgb), 0.1);
  flex-shrink: 0;
}

.public-app .public-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.public-app .public-quick-nav .mud-button-root {
  text-transform: none;
  font-weight: 500;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

@media (width <= 960px) {
  .public-app .public-hero-split {
    grid-template-columns: 1fr;
  }

  .public-app .about-page-hero .public-hero-split__content {
    text-align: center;
  }

  .public-app .about-page-hero .public-hero-trust,
  .public-app .about-page-hero .public-hero-actions,
  .public-app .about-page-hero .about-breadcrumb-nav {
    justify-content: center;
  }

  .public-app .public-ai-steps {
    grid-template-columns: 1fr;
  }

  .public-app .public-ai-steps::before {
    display: none;
  }
}

@media (width <= 600px) {
  .public-app .public-hero-actions .mud-button-root {
    width: 100%;
    max-width: 280px;
  }

  .public-app .public-hero-trust {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-app .public-hero-metric,
  .public-app .public-hero-visual-panel,
  .public-app .production-card {
    transition: none;
  }
}

/* ── Home page refinements ───────────────────────────────────── */
.public-app .home-section--muted {
  background: var(--mud-palette-surface);
}

.public-app .home-section-header--start .public-section-lead {
  text-align: center;
}

.public-app .home-social-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.public-app .home-social-proof-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.public-app .home-social-proof-pill .mud-icon-root {
  color: #93c5fd !important;
}

.public-app .home-trial-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.public-app .home-modules-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.public-app .home-module-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.public-app .home-module-card:hover,
.public-app .home-outcome-card:hover,
.public-app .home-platform-card:hover,
.public-app .home-industry-card:hover,
.public-app .home-success-story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

/* Soft seam between the dark hero and the trust strip, instead of a hard cut. */
/* Soft gradient seam between every home section — a hairline that fades in from
   the edges instead of an abrupt border, so plain/muted bands read as one
   continuous page rather than stacked blocks. */
.public-app .home-section {
  position: relative;
}

.public-app .home-section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
}

.public-app .home-section:first-of-type::before {
  content: none;
}

/* Compact trust-strip kicker (used right under the hero, above the logo wall) */
.public-app .home-trust-strip__header {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Right under the hero this must read as a quiet caption, not another pill
   competing with the hero chip — plain letter-spaced uppercase, no chrome. */
.public-app .home-trust-strip__kicker {
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--mud-palette-text-secondary);
  letter-spacing: 0.16em;
}

.mud-theme-dark .public-app .home-trust-strip__kicker {
  background: none;
  border: none;
  color: var(--mud-palette-text-secondary);
}

.public-app .home-trust-strip__kicker .mud-icon-root {
  color: var(--mud-palette-primary) !important;
}

/* Premium client tiles. A wide, fixed logo stage gives horizontal wordmarks
   enough room while object-fit keeps square and portrait marks proportional. */
.public-app .home-client-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 300px;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  min-height: 94px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76));
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.public-app .home-client-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--client-accent, #38bdf8) 12%, transparent), transparent 44%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.public-app .home-client-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--client-accent, #38bdf8) 42%, rgba(148, 163, 184, 0.3));
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.12),
    0 0 0 1px color-mix(in srgb, var(--client-accent, #38bdf8) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.public-app .home-client-card:hover::before {
  opacity: 1;
}

.public-app .home-client-card__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 16px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #64748b, #475569);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.public-app .home-client-card:hover .home-client-card__mark {
  background: linear-gradient(135deg, var(--client-accent), var(--client-accent));
  transform: scale(1.035);
}

/* Real marks use a landscape stage. Explicit dimensions reserve layout space,
   and contain prevents clipping regardless of the source image aspect ratio. */
.public-app .home-client-card__mark--img,
.public-app .home-trust-strip--dark .home-client-card__mark--img {
  width: 6.5rem;
  height: 4rem;
  background: #fff;
  padding: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 15px;
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.public-app .home-client-card:hover .home-client-card__mark--img,
.public-app .home-trust-strip--dark .home-client-card:hover .home-client-card__mark--img {
  background: #fff;
  border-color: color-mix(in srgb, var(--client-accent, #7dd3fc) 65%, transparent);
  box-shadow:
    0 9px 24px rgba(15, 23, 42, 0.12),
    0 0 18px color-mix(in srgb, var(--client-accent, #7dd3fc) 12%, transparent);
}

/* White and very pale wordmarks need a dark stage. This is applied only to
   verified light assets; keeping the default stage white preserves dark logos. */
.public-app .home-client-card__mark--img.home-client-card__mark--dark,
.public-app .home-trust-strip--dark .home-client-card__mark--img.home-client-card__mark--dark {
  background:
    radial-gradient(circle at 75% 20%, rgba(56, 189, 248, 0.14), transparent 42%),
    linear-gradient(145deg, #172033, #0b1220);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.public-app .home-client-card:hover .home-client-card__mark--img.home-client-card__mark--dark,
.public-app .home-trust-strip--dark .home-client-card:hover .home-client-card__mark--img.home-client-card__mark--dark {
  background:
    radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--client-accent, #38bdf8) 24%, transparent), transparent 44%),
    linear-gradient(145deg, #1e293b, #0b1220);
  border-color: color-mix(in srgb, var(--client-accent, #7dd3fc) 62%, transparent);
}

.public-app .home-client-card__mark--img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

.public-app .home-client-card__meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  text-align: start;
}

.public-app .home-client-card__name {
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--mud-palette-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-app .home-client-card__industry {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Dark trust band (compact strip right under the hero) ─────────────────
   The hero is deep navy; cutting to a white logo strip read as a hard seam
   with washed-out gray monograms. The compact band stays dark so hero →
   trust strip flows as one scene, and each client monogram becomes a glass
   chip lit by its own accent color. */
.public-app .home-section.home-trust-strip--dark {
  background:
    radial-gradient(55% 130% at 50% 0%, rgba(56, 189, 248, 0.07), transparent 65%),
    linear-gradient(180deg, #0c1428, #090e1d);
}

.public-app .home-trust-strip--dark .home-client-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* The hero already ends with its own glowing cyan/violet hairline — the
   generic gray section seam on top of it reads as a scratch. */
.public-app .home-section.home-trust-strip--dark::before {
  content: none;
}

.public-app .home-trust-strip--dark .home-trust-strip__header {
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Symmetric fading hairlines flanking the kicker (center-fade keeps them
   direction-agnostic for RTL). */
.public-app .home-trust-strip--dark .home-trust-strip__header::before,
.public-app .home-trust-strip--dark .home-trust-strip__header::after {
  content: "";
  height: 1px;
  flex: 0 1 220px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.4), transparent);
}

.public-app .home-trust-strip--dark .home-trust-strip__kicker,
.mud-theme-dark .public-app .home-trust-strip--dark .home-trust-strip__kicker {
  color: #9fb0cc;
}

.public-app .home-trust-strip--dark .home-trust-strip__kicker .mud-icon-root {
  color: #7dd3fc !important;
}

/* Monogram chip: dark glass lit by the client's accent; fills solid on hover. */
.public-app .home-trust-strip--dark .home-client-card__mark:not(.home-client-card__mark--img) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid color-mix(in srgb, var(--client-accent, #7dd3fc) 45%, transparent);
  color: color-mix(in srgb, var(--client-accent, #7dd3fc) 55%, #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--client-accent, #7dd3fc) 16%, transparent);
}

.public-app .home-trust-strip--dark .home-client-card:hover .home-client-card__mark:not(.home-client-card__mark--img) {
  background: linear-gradient(135deg, var(--client-accent, #38bdf8), color-mix(in srgb, var(--client-accent, #38bdf8) 65%, #0b1120));
  border-color: color-mix(in srgb, var(--client-accent, #7dd3fc) 70%, transparent);
  color: #fff;
  transform: scale(1.06);
}

.public-app .home-trust-strip--dark .home-client-card__name {
  color: #eef2f9;
}

.public-app .home-trust-strip--dark .home-client-card__industry {
  color: #8ea0bd;
}

/* The moving row pauses on hover; the brighter glass state makes that
   interaction discoverable without overpowering the brand artwork. */
.public-app .home-trust-strip--dark .home-logo-marquee .home-client-card:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  border-color: color-mix(in srgb, var(--client-accent, #7dd3fc) 42%, rgba(148, 163, 184, 0.22));
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.26),
    0 0 26px color-mix(in srgb, var(--client-accent, #7dd3fc) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.public-app .home-outcome-metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.public-app .home-outcome-metric__prefix {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mud-palette-text-secondary);
}

.public-app .home-success-story-card__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mud-palette-text-secondary);
}

.public-app .home-success-story-card__label--result {
  color: var(--mud-palette-primary);
}

.public-app .home-success-story-card__quote {
  opacity: 0.65;
  vertical-align: -2px;
}

.public-app .home-success-story-card__author {
  color: var(--mud-palette-text-secondary);
  font-weight: 600;
  padding-inline-start: 1.5rem;
}

.public-app .home-success-story-card__metric {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  letter-spacing: -0.01em;
}

/* Final CTA: force full centering (the title was inheriting start-alignment
   in some render paths) and scale the headline as the page's closing beat. */
.public-app .home-final-cta,
.public-app .home-final-cta .mud-container {
  text-align: center;
}

.public-app .home-final-cta__title {
  color: #fff;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.public-app .home-final-cta__lead {
  text-align: center;
}

/* Glowing hairline seam at the top of the closing panel, echoing the hero. */
.public-app .home-final-cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg,
    transparent 10%,
    rgba(125, 211, 252, 0.55) 38%,
    rgba(196, 181, 253, 0.55) 62%,
    transparent 90%);
}

.public-app .home-final-cta__lead {
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  line-height: 1.65;
}

.public-app .home-final-cta__sales.mud-button-root,
.public-app .home-final-cta__sales .mud-button-label,
.public-app .home-final-cta__sales .mud-icon-root {
  color: var(--egk-on-brand-muted) !important;
}

.public-app .home-cta-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 600;
}

.public-app .home-cta-trust-pill .mud-icon-root {
  color: rgba(255, 255, 255, 0.85) !important;
}

@media (width >= 992px) {
  .public-app .home-section-header--start {
    text-align: start;
  }

  .public-app .home-section-header--start .public-section-lead {
    margin-left: 0;
    margin-right: auto;
    text-align: start;
  }
}

@media (width <= 1200px) {
  .public-app .home-modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width <= 960px) {
  .public-app .home-modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-app .home-social-proof-strip {
    justify-content: center;
  }
}

@media (width <= 600px) {
  .public-app .home-modules-grid {
    grid-template-columns: 1fr;
  }
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-section-header--start .public-section-lead {
  margin-right: 0;
  margin-left: auto;
  text-align: start;
}

/* Logo marquee */
.public-app .home-logo-marquee {
  overflow: hidden;
  padding: 0.75rem 0 1.35rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.public-app .home-logo-marquee__track {
  --marquee-end: -50%;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  width: max-content;
  /* Duration scales with the number of tiles (set inline by ClientLogos.razor)
     so a long client list scrolls at the same speed as a short one. */
  animation: homeLogoMarquee var(--marquee-duration, 44s) linear infinite;
}

/* In RTL the max-content track grows toward the inline start (left). Moving it
   by the LTR negative offset eventually sends both logo copies outside the
   viewport, leaving the trust strip blank. Reverse only the physical marquee
   translation; the cards retain the page's RTL direction and text layout. */
:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-logo-marquee__track {
  --marquee-end: 50%;
}

.public-app .home-logo-marquee:hover .home-logo-marquee__track {
  animation-play-state: paused;
}

@media (width <= 600px) {
  .public-app .home-client-card {
    flex-basis: 260px;
    min-width: 260px;
    min-height: 84px;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border-radius: 17px;
  }

  .public-app .home-client-card__mark {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
  }

  .public-app .home-client-card__mark--img,
  .public-app .home-trust-strip--dark .home-client-card__mark--img {
    width: 5.5rem;
    height: 3.5rem;
    padding: 0.4rem;
    border-radius: 13px;
  }

  .public-app .home-client-card__name {
    font-size: 0.8rem;
  }

  .public-app .home-client-card__industry {
    font-size: 0.61rem;
  }

  .public-app .home-logo-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
}

@keyframes homeLogoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-end, -50%)); }
}

/* The trusted-logos strip is a decorative single-row marquee. Keep it sliding
   as one clipped row (no scrollbar, no wrap) even when Theme Studio's
   "reduced motion" preference is on — otherwise the global `.reduced-motion *`
   rule freezes the animation and the strip diverges from the server rendering. */
.public-app.reduced-motion .home-logo-marquee {
  overflow: hidden;
}

.public-app.reduced-motion .home-logo-marquee__track {
  flex-wrap: nowrap;
  animation: homeLogoMarquee var(--marquee-duration, 36s) linear infinite !important;
}

/* Inline CTA band */
.public-app .home-inline-cta__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.public-app .home-inline-cta__hint-icon {
  color: var(--mud-palette-success);
  font-size: 1rem !important;
  width: 1rem !important;
}

.public-app .home-inline-cta__panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--egk-color-primary-rgb), 0.08), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(var(--egk-color-secondary-rgb), 0.06), transparent 40%),
    var(--mud-palette-surface);
  border: 1px solid rgba(var(--egk-color-primary-rgb), 0.12);
}

/* Outcome card accent — everything (top bar, icon ring, metric) derives from
   the card's --pillar-accent so each stat reads as its own colored story. */
.public-app .home-outcome-card {
  position: relative;
  overflow: hidden;
}

.public-app .home-outcome-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--pillar-accent, #2563eb),
    color-mix(in srgb, var(--pillar-accent, #2563eb) 45%, transparent));
}

.public-app .home-outcome-card:hover {
  border-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 35%, transparent);
}

.public-app .home-outcome-card .insight-icon-ring {
  background: color-mix(in srgb, var(--pillar-accent, #2563eb) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--pillar-accent, #2563eb) 24%, transparent) !important;
  transition: background 0.25s ease, transform 0.25s ease;
}

.public-app .home-outcome-card .insight-icon-ring .mud-icon-root {
  color: var(--pillar-accent, var(--mud-palette-primary)) !important;
  transition: color 0.25s ease;
}

.public-app .home-outcome-card:hover .insight-icon-ring {
  background: var(--pillar-accent, #2563eb) !important;
  transform: scale(1.06);
}

.public-app .home-outcome-card:hover .insight-icon-ring .mud-icon-root {
  color: #fff !important;
}

/* The big percentage takes the card accent instead of one global green. */
.public-app .home-outcome-card .public-stat-highlight {
  background: none !important;
  -webkit-text-fill-color: initial;
  color: var(--pillar-accent, var(--mud-palette-primary)) !important;
}

/* "Why businesses choose EGKits" cards — accent-driven ring + drawn top bar,
   matching the pillar/role/solution card language. */
.public-app .home-platform-card {
  position: relative;
  overflow: hidden;
}

.public-app .home-platform-card:hover {
  border-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 35%, transparent);
}

.public-app .home-platform-card:hover .home-pillar-card__accent {
  transform: scaleX(1);
}

.public-app .home-platform-card .home-tech-card__ring {
  border-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 26%, transparent);
  background: color-mix(in srgb, var(--pillar-accent, #2563eb) 10%, transparent);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.public-app .home-platform-card .home-tech-card__ring .mud-icon-root {
  color: var(--pillar-accent, var(--mud-palette-primary)) !important;
  transition: color 0.25s ease;
}

.public-app .home-platform-card:hover .home-tech-card__ring {
  background: var(--pillar-accent, #2563eb);
  border-color: var(--pillar-accent, #2563eb);
  transform: scale(1.06);
}

.public-app .home-platform-card:hover .home-tech-card__ring .mud-icon-root {
  color: #fff !important;
}

/* Module stats row */
.public-app .home-module-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.public-app .home-module-stats__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(var(--egk-color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--egk-color-primary-rgb), 0.14);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
}

/* Clickable industry cards */
.public-app .home-industry-card-link {
  color: inherit;
  text-decoration: none;
  border-radius: 24px;
}

.public-app .home-industry-card-link:hover .home-industry-card {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the decorative trusted-logos strip as a single sliding row so it
     matches the server-side rendering (no wrap, no scrollbar). */
  .public-app .home-logo-marquee {
    overflow: hidden;
  }

  .public-app .home-logo-marquee__track {
    flex-wrap: nowrap;
    animation: homeLogoMarquee var(--marquee-duration, 36s) linear infinite;
  }
}

/* Image hero CTAs (Contact, etc.) */
.public-app .image-hero__actions .hero-cta-btn--primary.mud-button-root {
  background: var(--egk-cta-surface) !important;
  color: var(--egk-cta-on-surface-label) !important;
  border: 1px solid var(--egk-cta-surface) !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.public-app .image-hero__actions .hero-cta-btn--primary .mud-button-label,
.public-app .image-hero__actions .hero-cta-btn--primary .mud-icon-root,
.public-app .image-hero__actions .hero-cta-btn--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 .image-hero__actions .hero-cta-btn--secondary.mud-button-root {
  background: transparent !important;
  border: 2px solid var(--egk-cta-on-gradient-border) !important;
  color: var(--egk-on-brand) !important;
  text-transform: none !important;
}

.public-app .image-hero__actions .hero-cta-btn--secondary .mud-button-label,
.public-app .image-hero__actions .hero-cta-btn--secondary .mud-icon-root,
.public-app .image-hero__actions .hero-cta-btn--secondary svg {
  color: var(--egk-on-brand) !important;
  fill: currentColor !important;
  -webkit-text-fill-color: var(--egk-on-brand) !important;
}

/* Security hero certification badges on dark gradient */
.public-app .security-hero .security-badge .mud-typography,
.public-app .security-hero .security-badge .mud-icon-root,
.public-app .security-hero .security-badge__icon,
.public-app .security-hero .security-badge__title {
  color: var(--egk-on-brand) !important;
}

.public-app .security-hero .security-badge__subtitle,
.public-app .security-hero .security-badge .mud-typography-caption {
  color: var(--egk-on-brand-muted) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Homepage card carousel (scroll-snap, no JS dependency beyond scroll helper)
   ───────────────────────────────────────────────────────────────────────── */
.public-app .home-card-carousel {
  position: relative;
}

.public-app .home-card-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem 0.25rem 1.25rem;
  cursor: grab;
}

.public-app .home-card-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.public-app .home-card-carousel__viewport:active {
  cursor: grabbing;
}

.public-app .home-card-carousel__track {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
}

.public-app .home-card-carousel__card {
  flex: 0 0 calc(25% - 0.9375rem);
  min-width: 260px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

@media (width <= 1400px) {
  .public-app .home-card-carousel__card {
    flex-basis: calc(33.333% - 0.8333rem);
  }
}

@media (width <= 960px) {
  .public-app .home-card-carousel__card {
    flex-basis: calc(50% - 0.625rem);
  }
}

@media (width <= 600px) {
  .public-app .home-card-carousel__card {
    flex-basis: 86%;
  }
}

.public-app .home-card-carousel__nav {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: -0.75rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.public-app .home-card-carousel__arrow {
  pointer-events: auto;
  background: var(--mud-palette-surface) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  border: 1px solid var(--mud-palette-lines-default);
}

/* Premium hover inversion for module cards — each card floods with its own
   module accent (--pillar-accent) instead of one generic primary. */
.public-app .home-module-card {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.public-app .home-module-card .feature-icon-ring {
  background: color-mix(in srgb, var(--pillar-accent, #2563eb) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pillar-accent, #2563eb) 24%, transparent);
}

.public-app .home-module-card .feature-icon-ring .mud-icon-root {
  color: var(--pillar-accent, var(--mud-palette-primary)) !important;
}

.public-app .home-module-card:hover {
  background: var(--pillar-accent, var(--mud-palette-primary)) !important;
  transform: translateY(-6px);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--pillar-accent, #2563eb) 35%, transparent);
}

.public-app .home-module-card:hover .mud-typography,
.public-app .home-module-card:hover .mud-icon-root,
.public-app .home-module-card:hover .mud-button-label,
.public-app .home-module-card:hover .feature-link {
  color: #fff !important;
}

.public-app .home-module-card:hover .feature-icon-ring {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Industry cards: hover lift + accent-tinted shadow/border */
.public-app .home-industry-carousel .home-industry-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.public-app .home-industry-carousel .home-industry-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 35%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--pillar-accent, #0f172a) 18%, transparent);
}

/* The whole industry card is a link — never render link underlines through
   the title/description/CTA text. */
.public-app .home-industry-card-link,
.public-app .home-industry-card-link:hover,
.public-app .home-industry-card-link:focus-visible,
.public-app .home-industry-card-link *,
.public-app .home-industry-card-link:hover * {
  text-decoration: none !important;
}

/* Explore CTA picks up the industry's accent; arrow nudges on hover. */
.public-app .home-industry-card .industry-card__cta.mud-typography {
  color: var(--pillar-accent, var(--mud-palette-primary)) !important;
}

.public-app .home-industry-card .industry-card__cta .mud-icon-root {
  transition: transform 0.25s ease;
}

.public-app .home-industry-card:hover .industry-card__cta .mud-icon-root {
  transform: translateX(3px);
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-industry-card:hover .industry-card__cta .mud-icon-root {
  transform: translateX(-3px);
}

/* AI section: equal-height tabbed experience */
.public-app .home-ai-grid > .mud-grid-item {
  display: flex;
}

.public-app .ai-tabs-panel,
.public-app .ai-demo-flow {
  min-height: 100%;
}

.public-app .home-ai-tabs .mud-tabs-panels {
  display: none;
}

.public-app .home-ai-tabs .mud-tab {
  justify-content: flex-start;
}

.public-app .home-ai-tabs .mud-tab.mud-tab-active {
  color: var(--mud-palette-primary);
  font-weight: 700;
}

.public-app .ai-demo-flow .public-ai-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (width <= 960px) {
  .public-app .ai-demo-flow .public-ai-steps {
    grid-template-columns: 1fr;
  }
}

/* Database providers showcase logos */
.public-app .home-db-showcase__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.public-app .home-db-showcase__logo-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 10px;
  min-height: 58px;
  padding: 0.5rem 0.9rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.public-app .home-db-showcase__logo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(148, 163, 184, 0.4);
}

.public-app .home-db-showcase__logo-item img {
  max-width: 100%;
  max-height: 27px;
  object-fit: contain;
  object-position: left center;
}

.mud-theme-dark .public-app .home-db-showcase__logo-item img {
  filter: brightness(0) invert(1) opacity(0.92);
}

/* MudChip is single-line by design; the "Hybrid Deployment Supported
   (Cloud + On-Premise)" pill overflows a 390px viewport. Let chips inside
   the showcase wrap on narrow screens. */
@media (width <= 600px) {
  .public-app .home-db-showcase .mud-chip {
    height: auto;
    min-height: 32px;
    max-width: 100%;
    padding-block: 6px;
    white-space: normal;
  }

  .public-app .home-db-showcase .mud-chip .mud-chip-content {
    white-space: normal;
    line-height: 1.35;
  }
}

/* ---------------------------------------------------------------------------
   Home refinement sections: value pillars, business solutions, product preview,
   pricing preview, integrations, trust metrics. All spacing on the 8px grid and
   logical properties for RTL mirroring.
--------------------------------------------------------------------------- */

/* Accent-driven cards (value pillars, role cards, solution cards) — each card
   carries its accent in --pillar-accent so the icon ring, top bar, border and
   hover state all derive from one color. */
.public-app .home-pillar-card,
.public-app .home-role-card,
.public-app .home-solution-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.public-app .home-pillar-card:hover,
.public-app .home-role-card:hover,
.public-app .home-solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  border-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 35%, transparent);
}

/* Shared gradient accent bar. It draws itself across the top on hover instead
   of sitting there permanently. */
.public-app .home-pillar-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      var(--pillar-accent, #2563eb),
      color-mix(in srgb, var(--pillar-accent, #2563eb) 45%, transparent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

:is(.public-app[dir="rtl"], [dir="rtl"] .public-app) .home-pillar-card__accent {
  transform-origin: right center;
  background: linear-gradient(270deg,
      var(--pillar-accent, #2563eb),
      color-mix(in srgb, var(--pillar-accent, #2563eb) 45%, transparent));
}

.public-app .home-pillar-card:hover .home-pillar-card__accent,
.public-app .home-role-card:hover .home-pillar-card__accent,
.public-app .home-solution-card:hover .home-pillar-card__accent {
  transform: scaleX(1);
}

.public-app .home-pillar-card .feature-icon-ring,
.public-app .home-role-card .feature-icon-ring,
.public-app .home-solution-card .feature-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--pillar-accent, #2563eb) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pillar-accent, #2563eb) 22%, transparent);
  transition: background 0.25s ease, transform 0.25s ease;
}

.public-app .home-pillar-card .feature-icon-ring .mud-icon-root,
.public-app .home-role-card .feature-icon-ring .mud-icon-root,
.public-app .home-solution-card .feature-icon-ring .mud-icon-root {
  color: var(--pillar-accent, #2563eb) !important;
  transition: color 0.25s ease;
}

/* Hover reward: the ring fills with the accent and the glyph flips white. */
.public-app .home-pillar-card:hover .feature-icon-ring,
.public-app .home-role-card:hover .feature-icon-ring,
.public-app .home-solution-card:hover .feature-icon-ring {
  background: var(--pillar-accent, #2563eb);
  transform: scale(1.06);
}

.public-app .home-pillar-card:hover .feature-icon-ring .mud-icon-root,
.public-app .home-role-card:hover .feature-icon-ring .mud-icon-root,
.public-app .home-solution-card:hover .feature-icon-ring .mud-icon-root {
  color: #fff !important;
}

/* Business solutions: problem → solution → outcome
   (base card styles shared with .home-pillar-card above) */
.public-app .home-solution-card__step {
  padding-inline-start: 0.85rem;
  border-inline-start: 2px solid var(--mud-palette-lines-default);
}

.public-app .home-solution-card__step--outcome {
  border-inline-start-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 45%, transparent);
}

.public-app .home-solution-card__label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
}

.public-app .home-solution-card__label--outcome {
  color: var(--pillar-accent, var(--mud-palette-primary));
}

.public-app .home-solution-card__outcome {
  color: var(--pillar-accent, var(--mud-palette-primary));
}

/* Product experience preview */
.public-app .home-preview-card {
  overflow: hidden;
}

.public-app .home-preview-card__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 1rem;
  background: var(--mud-palette-background-gray, rgba(15, 23, 42, 0.04));
  border-block-end: 1px solid var(--mud-palette-lines-default);
}

.public-app .home-preview-card__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mud-palette-lines-default);
}

.public-app .home-preview-card__chrome span:nth-child(1) {
  background: #f87171;
}

.public-app .home-preview-card__chrome span:nth-child(2) {
  background: #fbbf24;
}

.public-app .home-preview-card__chrome span:nth-child(3) {
  background: #34d399;
}

/* Compact, image-free preview visual — a small "live panel" accent instead of
   a large screenshot placeholder. Built entirely from CSS so it never shows a
   broken image while real product screenshots aren't wired up yet. */
.public-app .home-preview-card__mock {
  position: relative;
  height: 148px;
  /* The large block-end padding reserves the bottom strip of the panel for the
     overlaid caption pill, so the sparkline bars can never render underneath the
     caption text (which made both unreadable). */
  padding: 1.1rem 1.15rem 3.1rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.5) 1px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(150deg, color-mix(in srgb, var(--preview-accent) 16%, var(--mud-palette-surface)), var(--mud-palette-surface) 78%);
  border-block-end: 1px solid var(--mud-palette-lines-default);
}

.mud-theme-dark .public-app .home-preview-card__mock {
  background:
    radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.06) 1px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(150deg, color-mix(in srgb, var(--preview-accent) 24%, #0f172a), #0f172a 78%);
}

.public-app .home-preview-card__mock-icon {
  position: absolute;
  inset-inline-end: -0.5rem;
  inset-block-start: -0.5rem;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--preview-accent);
  opacity: 0.14;
  transform: rotate(8deg);
}

.public-app .home-preview-card__mock-icon .mud-icon-root {
  width: 1em;
  height: 1em;
  font-size: inherit;
}

.public-app .home-preview-card__mock-bars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
}

.public-app .home-preview-card__mock-bar {
  width: 7px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--preview-accent), color-mix(in srgb, var(--preview-accent) 55%, transparent));
  opacity: 0.9;
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.public-app .home-preview-card:hover .home-preview-card__mock-bar {
  transform: scaleY(1.08);
}

.public-app .home-preview-card__mock-wrap {
  position: relative;
}

.public-app .home-preview-card__caption {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0.85rem;
  inset-block-end: 0.85rem;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1.7rem);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pricing preview */
.public-app .home-pricing-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.public-app .home-pricing-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pillar-accent, #2563eb) 35%, transparent);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

/* Tier names come back lowercase from some resource lookups ("starter") —
   normalize the display regardless of the resource value. */
.public-app .home-pricing-card__name {
  text-transform: capitalize;
}

.public-app .home-pricing-card__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pillar-accent, #2563eb) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pillar-accent, #2563eb) 24%, transparent);
}

.public-app .home-pricing-card__ring .mud-icon-root {
  color: var(--pillar-accent, var(--mud-palette-primary)) !important;
}

/* The "Most Popular" plan gets a true gradient border (two-layer background
   trick) plus a stronger halo, so it clearly leads the row. */
.public-app .home-pricing-card--highlighted {
  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);
}

.public-app .home-pricing-card--highlighted:hover {
  border-color: transparent;
  box-shadow: 0 24px 56px rgba(var(--egk-color-primary-rgb), 0.22);
}

@media (width >= 1280px) {
  .public-app .home-pricing-card--highlighted {
    transform: translateY(-8px);
  }
}

.public-app .home-pricing-card__badge {
  position: absolute;
  top: -12px;
  inset-inline-end: 1.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg,
    var(--mud-palette-primary),
    var(--mud-palette-primary-darken));
  color: var(--mud-palette-primary-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.public-app .home-pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.public-app .home-pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mud-palette-text-primary);
}

.public-app .home-pricing-card__features li .mud-icon-root {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
}

/* Integrations & ecosystem */
.public-app .home-integration-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.public-app .home-integration-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Trust metrics strip (success stories) */
.public-app .home-trust-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.public-app .home-trust-metrics__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(var(--egk-color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--egk-color-primary-rgb), 0.14);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
}

/* Reassurance pills on light/muted section backgrounds (pricing preview, etc.) */
.public-app .home-cta-trust-pill--muted {
  background: rgba(var(--egk-color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--egk-color-primary-rgb), 0.14);
  color: var(--mud-palette-text-primary);
}

.public-app .home-cta-trust-pill--muted .mud-icon-root {
  color: var(--mud-palette-success) !important;
}

/* Solutions by role (business-solutions "By Role" tab) */
/* Role cards share the accent-driven base styles with .home-pillar-card. */
.public-app .home-role-card__role {
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--pillar-accent, var(--mud-palette-primary));
}

.public-app .home-role-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.public-app .home-role-card__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mud-palette-text-secondary);
}

.public-app .home-role-card__points li .mud-icon-root {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* "By Role / By Business Need" switcher — restyled from a classic underlined
   tab bar into a segmented pill control (the underline slider is hidden and
   the active tab becomes a raised white pill). */
.public-app .home-solutions-tabs .mud-tabs-toolbar {
  background: transparent;
  border: none;
}

.public-app .home-solutions-tabs .mud-tabs-toolbar-wrapper {
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--mud-palette-background-gray, rgba(15, 23, 42, 0.05));
  border: 1px solid var(--mud-palette-lines-default);
}

.public-app .home-solutions-tabs .mud-tab {
  border-radius: 999px;
  text-transform: none;
  min-height: 42px;
  padding-block: 0;
  padding-inline: 1.4rem;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.public-app .home-solutions-tabs .mud-tab:hover {
  background: rgba(15, 23, 42, 0.04);
}

.public-app .home-solutions-tabs .mud-tab.mud-tab-active {
  background: var(--mud-palette-surface, #fff);
  color: var(--mud-palette-primary);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.public-app .home-solutions-tabs .mud-tab-slider {
  display: none;
}

/* Premium entrance motion for card grids (hero-visual style fadeInUp, staggered per item) */
.public-app .home-fade-in-item {
  animation: fadeInUp 0.6s ease-out both;
  animation-delay: var(--fade-delay, 0ms);
}

/* Downloads & Resources Center */
.public-app .download-card {
  border-radius: 16px;
  border: 1px solid var(--mud-palette-divider);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.public-app .download-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-divider));
}

.public-app .download-card--featured {
  border-inline-start-width: 4px;
  border-inline-start-style: solid;
}

.public-app .download-card__meta {
  display: grid;
  gap: 0.35rem 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mud-palette-background-gray) 80%, transparent);
  border: 1px solid var(--mud-palette-divider);
}

.public-app .download-card__meta-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 34%) 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.public-app .download-card__meta-label {
  color: var(--mud-palette-text-secondary);
  font-weight: 500;
}

.public-app .download-card__meta-value {
  color: var(--mud-palette-text-primary);
  font-weight: 600;
  word-break: break-word;
}

.public-app .download-detail-aside {
  position: sticky;
  top: 88px;
}

.public-app .download-checksum {
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
}

.public-app .download-arch-note {
  max-width: 42rem;
}

.public-app .downloads-hero .downloads-search .mud-input-filled {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
}

.public-app .downloads-hero .mud-breadcrumbs .mud-breadcrumb-item,
.public-app .downloads-detail-hero .mud-breadcrumbs .mud-breadcrumb-item,
.public-app .downloads-detail-hero .mud-breadcrumbs .mud-breadcrumb-separator {
  color: rgba(255, 255, 255, 0.88);
}

.public-app .downloads-hero .category-chip-idle {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

@media (max-width: 960px) {
  .public-app .download-detail-aside {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-app .download-card {
    transition: none;
  }

  .public-app .download-card:hover {
    transform: none;
  }

  .public-app .home-pillar-card,
  .public-app .home-solution-card,
  .public-app .home-role-card,
  .public-app .home-integration-card,
  .public-app .home-preview-card__mock-bar {
    transition: none;
  }

  .public-app .home-pillar-card:hover,
  .public-app .home-solution-card:hover,
  .public-app .home-role-card:hover,
  .public-app .home-integration-card:hover {
    transform: none;
  }

  .public-app .home-preview-card:hover .home-preview-card__mock-bar {
    transform: none;
  }

  .public-app .home-fade-in-item {
    animation: none;
  }
}