@font-face {
  font-family: "Google Sans";
  src: url("./fonts/GoogleSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("./fonts/GoogleSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("./fonts/GoogleSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aspekta";
  src: url("./fonts/Aspekta-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aspekta";
  src: url("./fonts/Aspekta-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aspekta";
  src: url("./fonts/Aspekta-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #070a10;
  --bg-1: #0f1722;
  --surface-0: #111b28;
  --surface-1: #182536;
  --text-0: #f6f9ff;
  --text-1: #c2d1e4;
  --accent: #38b6ff;
  --accent-soft: #8ddcff;
  --stroke: rgba(255, 255, 255, 0.13);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-sm: 12px;
  --container: 1140px;
  --font-display: "Google Sans", "Product Sans", "Avenir Next", sans-serif;
  --font-body: "Aspekta", "Outfit", "Segoe UI", sans-serif;
  --section-hero: #0f1726;
  --section-services: #172133;
  --section-workflow: #101a2b;
  --section-portfolio: #1b2639;
  --section-pricing: #121d2f;
  --section-testimonials: #1a2a40;
  --section-cta: #101a2a;
  --section-contact: #162337;
  --section-modules: #172133;
  --section-benefits: #101a2b;
  --section-projects: #1b2639;
  --section-stats: #121d2f;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text-0);
  background:
    radial-gradient(circle at 18% -12%, rgba(56, 182, 255, 0.22), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(0, 214, 143, 0.12), transparent 38%),
    linear-gradient(160deg, var(--bg-0) 18%, color-mix(in srgb, var(--bg-1) 78%, #05070a) 65%, #06080d 100%);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Flat background system by section */
body {
  background: var(--bg-0);
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.price,
.stat-card strong {
  font-family: var(--font-display);
}

body[data-mode="gaming"] {
  --bg-0: #060c09;
  --bg-1: #0f1a14;
  --surface-0: #13261e;
  --surface-1: #1b352a;
  --accent: #00d68f;
  --accent-soft: #7bffd0;
  --section-hero: #132219;
  --section-services: #193023;
  --section-workflow: #11241b;
  --section-portfolio: #1f3728;
  --section-pricing: #14291f;
  --section-testimonials: #1c3428;
  --section-cta: #102118;
  --section-contact: #173023;
  --section-modules: #193023;
  --section-benefits: #11241b;
  --section-projects: #1f3728;
  --section-stats: #14291f;
}

.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.bg-layer {
  display: none;
}

.bg-layer-1 {
  background:
    conic-gradient(from 120deg at 78% 22%, rgba(56, 182, 255, 0.26), transparent 34%, rgba(0, 214, 143, 0.2) 56%, transparent 74%),
    radial-gradient(circle at 75% 26%, rgba(56, 182, 255, 0.22), transparent 46%);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: auroraShift 20s ease-in-out infinite alternate;
}

.bg-layer-1::before,
.bg-layer-1::after {
  content: "";
  position: absolute;
  border-radius: 44% 56% 63% 37% / 42% 38% 62% 58%;
  filter: blur(16px);
  opacity: 0.45;
}

.bg-layer-1::before {
  width: 420px;
  height: 420px;
  top: 52%;
  left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(56, 182, 255, 0.22), rgba(56, 182, 255, 0.03) 65%, transparent 70%);
  animation: orbitalFloat 16s ease-in-out infinite alternate;
}

.bg-layer-1::after {
  width: 360px;
  height: 360px;
  bottom: -150px;
  right: 10%;
  background: radial-gradient(circle at 70% 40%, rgba(0, 214, 143, 0.2), rgba(0, 214, 143, 0.03) 66%, transparent 72%);
  animation: orbitalFloat 18s ease-in-out infinite alternate-reverse;
}

.bg-layer-2 {
  background-image:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1.8px);
  background-size: 52px 52px, 24px 24px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  opacity: 0.7;
  animation: gridPulse 10s ease-in-out infinite;
}

body[data-mode="gaming"] .bg-layer-1 {
  filter: hue-rotate(-18deg) saturate(1.12);
}

.container {
  width: min(calc(100% - 2.2rem), var(--container));
  margin-inline: auto;
}

.section {
  padding: 70px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(7, 10, 16, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  text-decoration: none;
  color: var(--text-0);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.logo span {
  color: var(--accent);
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text-1);
  text-decoration: none;
  transition: color 0.25s ease;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-links a:hover {
  color: var(--text-0);
}

.nav-links a i {
  font-size: 0.82rem;
  opacity: 0.9;
}

.nav-cta {
  white-space: nowrap;
}

.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 7px 11px 7px 8px;
  color: var(--text-0);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  font-weight: 600;
}

.mode-track {
  width: 45px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  padding: 2px;
}

.mode-thumb {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  transform: translateX(0);
  transition: transform 0.25s ease;
}

body[data-mode="gaming"] .mode-thumb {
  transform: translateX(21px);
}

.hero {
  padding-top: 90px;
  background: var(--section-hero);
}

#servicios,
#modulos {
  background: var(--section-services);
}

.workflow,
#beneficios {
  background: var(--section-workflow);
}

#portafolio,
#proyectos {
  background: var(--section-portfolio);
}

#planes {
  background: var(--section-pricing);
}

#testimonios {
  background: var(--section-testimonials);
}

.cta-section {
  background: var(--section-cta);
}

#contacto {
  background: var(--section-contact);
}

/* Stats/neutral section used in portfolio and ERP pages */
main > .section:not(#inicio):not(#servicios):not(#modulos):not(#beneficios):not(#portafolio):not(#proyectos):not(#planes):not(#testimonios):not(#contacto):not(.workflow):not(.cta-section) {
  background: var(--section-stats);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: stretch;
}

.hero-copy {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.hero-copy::after {
  content: "";
  position: absolute;
  inset: auto -20% -35% auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  pointer-events: none;
}

.hero-copy h1 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.05;
}

.hero-subtitle {
  margin: 0;
  max-width: 62ch;
  color: var(--text-1);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.eyebrow {
  width: fit-content;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-soft);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 26px;
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.76rem 1.15rem;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  gap: 8px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black));
  color: #041018;
}

.btn-ghost {
  border-color: var(--stroke);
  color: var(--text-0);
  background: rgba(255, 255, 255, 0.03);
}

.highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.highlight {
  padding: 0.9rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-1) 62%, transparent);
}

.highlight strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.1;
}

.highlight span {
  color: var(--text-1);
  font-size: 0.84rem;
}

.hero-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--stroke);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  padding: 1.3rem;
}

.hero-panel-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.panel-label {
  color: var(--text-1);
  font-size: 0.9rem;
}

.hero-panel-top strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--accent);
}

.panel-copy {
  color: var(--text-1);
  margin: 10px 0 18px;
}

.mode-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mode-chip {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 0.68rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-0);
  font-weight: 700;
  cursor: pointer;
}

.mode-chip.active {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.panel-features {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.panel-features li {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  color: var(--text-1);
  background: color-mix(in srgb, var(--surface-0) 55%, transparent);
}

.section-head h2 {
  margin: 9px 0 10px;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.1;
}

.section-head p {
  max-width: 66ch;
  color: var(--text-1);
  margin: 0;
}

.card-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.card-grid-lg {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  padding: 1.05rem;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pill {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}

.icon-inline {
  font-size: 0.9em;
  margin-right: 0.4rem;
  opacity: 0.95;
}

.card h3 {
  margin: 0;
  font-size: 1.2rem;
}

.card p {
  margin: 10px 0 0;
  color: var(--text-1);
}

.card-meta {
  margin-top: 14px;
  color: var(--accent-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.workflow {
  padding-top: 24px;
}

.workflow-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.workflow-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
  padding: 1.1rem;
}

.workflow-card span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  font-weight: 700;
}

.workflow-card h3 {
  margin: 14px 0 8px;
  font-size: 1.14rem;
}

.workflow-card p {
  margin: 0;
  color: var(--text-1);
}

.pricing-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.price-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.price-card.featured {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--accent) 80%, transparent);
}

.price-card h3 {
  margin: 0;
  font-size: 1.22rem;
}

.price {
  margin: 8px 0 2px;
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.period {
  color: var(--text-1);
  font-size: 0.85rem;
}

.price-desc {
  margin: 10px 0 0;
  color: var(--text-1);
}

.feature-list {
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.feature-list li {
  color: var(--text-1);
  position: relative;
  padding-left: 20px;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.price-card .btn {
  margin-top: auto;
}

.quote-card p {
  margin: 0;
}

.quote-author {
  margin-top: 12px;
  display: grid;
  gap: 2px;
}

.quote-author strong {
  font-size: 0.96rem;
}

.quote-author span {
  color: var(--text-1);
  font-size: 0.88rem;
}

.portfolio-toolbar {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-filter {
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-0);
  padding: 0.45rem 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.tag-filter.active {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.stats-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem;
}

.stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}

.stat-card span {
  color: var(--text-1);
  font-size: 0.9rem;
}

.cta-box {
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(255, 255, 255, 0.03));
  text-align: center;
  padding: clamp(1.35rem, 3vw, 2.4rem);
}

.cta-box h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  line-height: 1.1;
}

.cta-box .eyebrow {
  margin-inline: auto;
  margin-bottom: 10px;
}

.cta-box p {
  margin: 12px auto 20px;
  max-width: 70ch;
  color: color-mix(in srgb, var(--text-0) 90%, var(--text-1));
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-copy,
.contact-form {
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  padding: 1.1rem;
}

.contact-copy h2 {
  margin: 10px 0 8px;
  line-height: 1.1;
}

.contact-copy p {
  margin: 0;
  color: var(--text-1);
}

.contact-links {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.contact-links a {
  color: var(--accent-soft);
  text-decoration: none;
}

.contact-form {
  display: grid;
  gap: 8px;
}

.contact-form label {
  color: var(--text-1);
  font-size: 0.88rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--text-0);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface-0) 55%, transparent);
  border-radius: 10px;
  padding: 0.72rem 0.8rem;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 32px 0;
}

.wa-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.72rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(140deg, #25d366, #1aa74f);
  color: #02150a;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 18px 38px -24px rgba(37, 211, 102, 0.95);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -26px rgba(37, 211, 102, 0.95);
}

.wa-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-icon svg {
  width: 100%;
  height: 100%;
}

.wa-label {
  font-size: 0.9rem;
  line-height: 1;
}

.footer-content {
  display: grid;
  gap: 4px;
  text-align: center;
}

.footer-content p,
.footer-content small {
  color: var(--text-1);
  margin: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Google-inspired redesign */
:root {
  --bg-0: #f8f9fa;
  --bg-1: #eef2f7;
  --surface-0: #ffffff;
  --surface-1: #f1f5fb;
  --text-0: #202124;
  --text-1: #5f6368;
  --accent: #1a73e8;
  --accent-soft: #4285f4;
  --stroke: rgba(32, 33, 36, 0.08);
  --section-hero: #f8f9fa;
  --section-services: #ffffff;
  --section-workflow: #f8f9fa;
  --section-portfolio: #eef3fb;
  --section-pricing: #ffffff;
  --section-testimonials: #f8f9fa;
  --section-cta: #e8f0fe;
  --section-contact: #ffffff;
  --section-modules: #ffffff;
  --section-benefits: #f8f9fa;
  --section-projects: #eef3fb;
  --section-stats: #ffffff;
}

body[data-mode="gaming"] {
  --bg-0: #0b1116;
  --surface-0: #131c24;
  --surface-1: #1a2732;
  --text-0: #e8edf4;
  --text-1: #9aa9b8;
  --stroke: rgba(232, 237, 244, 0.1);
  --accent: #35c46a;
  --accent-soft: #7fdb9f;
  --section-hero: #0f1720;
  --section-services: #121c26;
  --section-workflow: #0e1822;
  --section-portfolio: #142231;
  --section-pricing: #101a24;
  --section-testimonials: #13212e;
  --section-cta: #11291d;
  --section-contact: #121d28;
  --section-modules: #121c26;
  --section-benefits: #0e1822;
  --section-projects: #142231;
  --section-stats: #111b25;
}

body {
  color: var(--text-0);
  background: var(--bg-0);
}

.site-header {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.logo {
  color: #1f1f1f;
  font-weight: 700;
}

.logo span {
  color: var(--accent);
}

.nav-links a {
  color: #3c4043;
  font-weight: 500;
}

.nav-links a:hover {
  color: #1f1f1f;
}

.section {
  border-top: 0;
  border-bottom: 0;
}

.hero-copy,
.hero-panel,
.card,
.workflow-card,
.price-card,
.contact-copy,
.contact-form,
.stat-card {
  background: var(--surface-0);
  border: 1px solid var(--stroke);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.08);
}

.hero-copy::after,
.card::before {
  display: none;
}

.hero-copy h1,
.section-head h2,
.cta-box h2 {
  color: #1f1f1f;
  letter-spacing: -0.02em;
}

.hero-subtitle,
.section-head p,
.card p,
.panel-copy,
.workflow-card p,
.price-desc,
.contact-copy p,
.feature-list li,
.quote-author span {
  color: var(--text-1);
}

.eyebrow,
.pill {
  background: #e8f0fe;
  border-color: transparent;
  color: #1a73e8;
  font-weight: 600;
}

body[data-mode="gaming"] .eyebrow,
body[data-mode="gaming"] .pill {
  background: #e6f4ea;
  color: #188038;
}

.btn {
  border-radius: 999px;
  padding: 0.68rem 1.1rem;
  font-weight: 600;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, black);
}

.btn-ghost {
  background: #fff;
  color: #1f1f1f;
  border-color: var(--stroke);
}

.btn-ghost:hover {
  background: #f6f9fe;
}

.mode-toggle {
  background: #fff;
  color: #1f1f1f;
  border: 1px solid var(--stroke);
}

.mode-track {
  background: #d2e3fc;
}

body[data-mode="gaming"] .mode-track {
  background: #ceead6;
}

.highlight {
  background: var(--surface-1);
  border-color: transparent;
}

.highlight strong {
  color: #1f1f1f;
}

.panel-features li {
  background: var(--surface-1);
  border-color: transparent;
}

.price-card.featured {
  border-color: rgba(26, 115, 232, 0.28);
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.14);
}

body[data-mode="gaming"] .price-card.featured {
  border-color: rgba(24, 128, 56, 0.28);
  box-shadow: 0 2px 8px rgba(24, 128, 56, 0.14);
}

.feature-list li::before {
  background: var(--accent);
}

.cta-box {
  background: var(--section-cta);
  border: 1px solid transparent;
  box-shadow: none;
}

/* Floating CTA window (like previous Elyon Suite style) */
.cta-section {
  background: transparent !important;
  position: relative;
  z-index: 2;
  padding: 34px 0;
}

.cta-section .container {
  position: relative;
}

.cta-section .cta-box {
  max-width: 980px;
  margin-inline: auto;
  border-radius: 26px;
  border: 1px solid rgba(60, 64, 67, 0.14);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(60, 64, 67, 0.18);
  transform: translateY(-8px);
}

.contact-form input,
.contact-form textarea {
  background: #fff;
  border-color: #dfe1e5;
  color: #1f1f1f;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.site-footer {
  background: #fff;
  border-top: 1px solid var(--stroke);
}

.footer-content p,
.footer-content small {
  color: var(--text-1);
}

.wa-widget {
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

/* Gaming-specific visual tuning */
body[data-mode="gaming"] {
  color: var(--text-0);
  background: var(--bg-0);
}

body[data-mode="gaming"] .site-header {
  background: rgba(11, 17, 22, 0.85);
  border-bottom-color: rgba(232, 237, 244, 0.1);
}

body[data-mode="gaming"] .logo,
body[data-mode="gaming"] .nav-links a,
body[data-mode="gaming"] .nav-links a:hover {
  color: #e8edf4;
}

body[data-mode="gaming"] .hero-copy,
body[data-mode="gaming"] .hero-panel,
body[data-mode="gaming"] .card,
body[data-mode="gaming"] .workflow-card,
body[data-mode="gaming"] .price-card,
body[data-mode="gaming"] .contact-copy,
body[data-mode="gaming"] .contact-form,
body[data-mode="gaming"] .stat-card {
  background: var(--surface-0);
  border-color: rgba(232, 237, 244, 0.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

body[data-mode="gaming"] .hero-copy h1,
body[data-mode="gaming"] .section-head h2,
body[data-mode="gaming"] .cta-box h2,
body[data-mode="gaming"] .highlight strong {
  color: #f5f9ff;
}

body[data-mode="gaming"] .hero-subtitle,
body[data-mode="gaming"] .section-head p,
body[data-mode="gaming"] .card p,
body[data-mode="gaming"] .panel-copy,
body[data-mode="gaming"] .workflow-card p,
body[data-mode="gaming"] .price-desc,
body[data-mode="gaming"] .contact-copy p,
body[data-mode="gaming"] .feature-list li,
body[data-mode="gaming"] .quote-author span {
  color: #9aa9b8;
}

body[data-mode="gaming"] .eyebrow,
body[data-mode="gaming"] .pill {
  background: rgba(53, 196, 106, 0.16);
  color: #7fdb9f;
}

body[data-mode="gaming"] .btn-primary {
  background: linear-gradient(120deg, #35c46a, #2ba65a);
  border-color: #35c46a;
  color: #07140d;
}

body[data-mode="gaming"] .btn-primary:hover {
  background: #2fb463;
}

body[data-mode="gaming"] .btn-ghost {
  background: #16222d;
  color: #e8edf4;
  border-color: rgba(232, 237, 244, 0.14);
}

body[data-mode="gaming"] .btn-ghost:hover {
  background: #1a2b39;
}

body[data-mode="gaming"] .mode-toggle {
  background: #16222d;
  color: #e8edf4;
  border-color: rgba(232, 237, 244, 0.14);
}

body[data-mode="gaming"] .mode-track {
  background: rgba(53, 196, 106, 0.3);
}

body[data-mode="gaming"] .highlight,
body[data-mode="gaming"] .panel-features li {
  background: var(--surface-1);
}

body[data-mode="gaming"] .cta-box {
  background: var(--section-cta);
}

body[data-mode="gaming"] .cta-section {
  background: transparent !important;
}

body[data-mode="gaming"] .cta-section .cta-box {
  background: #131c24;
  border-color: rgba(232, 237, 244, 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

body[data-mode="gaming"] .contact-form input,
body[data-mode="gaming"] .contact-form textarea {
  background: #0f1720;
  border-color: rgba(232, 237, 244, 0.14);
  color: #e8edf4;
}

body[data-mode="gaming"] .contact-form input:focus,
body[data-mode="gaming"] .contact-form textarea:focus {
  border-color: #35c46a;
  box-shadow: 0 0 0 3px rgba(53, 196, 106, 0.2);
}

body[data-mode="gaming"] .site-footer {
  background: #0f1720;
}

@keyframes auroraShift {
  0% {
    transform: translateX(-4%) translateY(0%) scale(1) rotate(0deg);
  }
  100% {
    transform: translateX(4%) translateY(-2%) scale(1.1) rotate(6deg);
  }
}

@keyframes orbitalFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(-24px) translateX(26px) rotate(12deg);
  }
}

@keyframes gridPulse {
  0%,
  100% {
    opacity: 0.56;
  }
  50% {
    opacity: 0.78;
  }
}

@media (max-width: 1040px) {
  .hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .pricing-grid,
  .workflow-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 0;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 14px;
    padding-bottom: 2px;
  }

  .section {
    padding: 58px 0;
  }

  .highlights,
  .card-grid,
  .card-grid-lg,
  .pricing-grid,
  .workflow-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .nav .nav-cta {
    width: auto;
  }

  .portfolio-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions {
    flex-direction: column;
  }

  .wa-widget {
    right: 12px;
    bottom: 12px;
    padding: 0.68rem 0.78rem;
  }

  .wa-label {
    font-size: 0.84rem;
  }

  .cta-section {
    padding: 22px 0;
  }

  .cta-section .cta-box {
    transform: none;
    border-radius: 18px;
  }
}

/* ERP animated showcase cards */
.erp-feature-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.erp-feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 1.15rem;
  background: #fff;
  border: 1px solid rgba(60, 64, 67, 0.12);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.erp-feature-card::before {
  content: "";
  position: absolute;
  inset: auto -25% -40% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.9;
  pointer-events: none;
}

.erp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(60, 64, 67, 0.16);
}

.erp-card-pos { grid-column: span 7; }
.erp-card-crm { grid-column: span 5; }
.erp-card-accounting { grid-column: span 5; }
.erp-card-sales { grid-column: span 7; }

.erp-card-pos::before {
  background: radial-gradient(circle, rgba(66, 133, 244, 0.25), transparent 66%);
}

.erp-card-crm::before {
  background: radial-gradient(circle, rgba(26, 115, 232, 0.22), transparent 66%);
}

.erp-card-accounting::before {
  background: radial-gradient(circle, rgba(251, 188, 4, 0.2), transparent 66%);
}

.erp-card-sales::before {
  background: radial-gradient(circle, rgba(52, 168, 83, 0.22), transparent 66%);
}

.erp-feature-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.erp-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3fb;
  color: #1a73e8;
  font-size: 1rem;
}

.erp-feature-tag {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #f1f3f4;
  color: #5f6368;
  font-weight: 600;
}

.erp-feature-card h3 {
  margin: 0 0 7px;
  font-size: 1.45rem;
  line-height: 1.12;
  color: #1f1f1f;
}

.erp-feature-card p {
  margin: 0;
  color: #5f6368;
  max-width: 60ch;
}

.erp-mockup {
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid rgba(60, 64, 67, 0.16);
  background: linear-gradient(140deg, #ffffff, #f3f7fd);
  min-height: 120px;
  position: relative;
  overflow: hidden;
}

.erp-mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.7) 46%, transparent 68%);
  transform: translateX(-120%);
  animation: erpShine 5s linear infinite;
}

.erp-mockup span {
  position: absolute;
  border-radius: 10px;
  background: #dfe7f4;
}

.erp-mockup-pos span:nth-child(1) { top: 14px; left: 14px; width: 30%; height: 16px; }
.erp-mockup-pos span:nth-child(2) { top: 40px; left: 14px; width: 82%; height: 12px; }
.erp-mockup-pos span:nth-child(3) { top: 62px; left: 14px; width: 56%; height: 12px; background: #cde0fb; }

.erp-mockup-pos::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(26, 115, 232, 0.6), transparent);
  animation: posScan 2.1s linear infinite;
}

.erp-mockup-pos span:nth-child(1) {
  transform-origin: left;
  animation: posHeaderPulse 2.6s ease-in-out infinite;
}

.erp-mockup-pos span:nth-child(2),
.erp-mockup-pos span:nth-child(3) {
  transform-origin: left;
}

.erp-mockup-pos span:nth-child(2) {
  animation: posLineGrowA 2.4s ease-in-out infinite;
}

.erp-mockup-pos span:nth-child(3) {
  animation: posLineGrowB 2.4s ease-in-out infinite 0.25s;
}

.erp-mockup-crm span:nth-child(1) { left: 14px; bottom: 12px; width: 12px; height: 44px; }
.erp-mockup-crm span:nth-child(2) { left: 34px; bottom: 12px; width: 12px; height: 70px; }
.erp-mockup-crm span:nth-child(3) { left: 54px; bottom: 12px; width: 12px; height: 28px; }
.erp-mockup-crm span:nth-child(4) { left: 74px; bottom: 12px; width: 12px; height: 58px; background: #cde0fb; }

.erp-mockup-crm span {
  transform-origin: bottom;
  animation: crmBar 2.6s ease-in-out infinite;
}

.erp-mockup-crm span:nth-child(1) { animation-delay: 0s; }
.erp-mockup-crm span:nth-child(2) { animation-delay: 0.2s; }
.erp-mockup-crm span:nth-child(3) { animation-delay: 0.4s; }
.erp-mockup-crm span:nth-child(4) { animation-delay: 0.6s; }

.erp-mockup-crm::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(26, 115, 232, 0.55), transparent);
  animation: crmSweep 2.2s linear infinite;
}

.erp-mockup-crm::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a73e8;
  box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45);
  right: 12px;
  top: 10px;
  animation: crmPulse 1.6s ease-out infinite;
}

.erp-mockup-accounting span:nth-child(1) { top: 14px; left: 14px; width: 84%; height: 14px; }
.erp-mockup-accounting span:nth-child(2) { top: 38px; left: 14px; width: 64%; height: 14px; }

.erp-mockup-accounting::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 16px;
  border-radius: 999px;
  background: rgba(52, 168, 83, 0.2);
  animation: accountingBadge 2.8s ease-in-out infinite;
}

.erp-mockup-accounting span:nth-child(1),
.erp-mockup-accounting span:nth-child(2) {
  transform-origin: left;
  animation: accountingFlow 2.2s ease-in-out infinite;
}

.erp-mockup-accounting span:nth-child(2) {
  animation-delay: 0.3s;
}

.erp-mockup-sales span:nth-child(1) { top: 14px; left: 14px; width: 90%; height: 14px; }
.erp-mockup-sales span:nth-child(2) { top: 40px; left: 14px; width: 42%; height: 52px; background: #d6eadf; }
.erp-mockup-sales span:nth-child(3) { top: 40px; right: 14px; width: 46%; height: 52px; background: #dbe8fb; }

.erp-mockup-sales::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 90%;
  height: 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(52, 168, 83, 0.18), rgba(26, 115, 232, 0.18));
  animation: salesHeaderRun 2.5s linear infinite;
}

.erp-mockup-sales span:nth-child(2),
.erp-mockup-sales span:nth-child(3) {
  animation: salesCardFloat 2.7s ease-in-out infinite;
}

.erp-mockup-sales span:nth-child(3) {
  animation-delay: 0.45s;
}

@keyframes erpShine {
  100% { transform: translateX(120%); }
}

@keyframes crmBar {
  0%, 100% { transform: scaleY(0.72); }
  50% { transform: scaleY(1.08); }
}

@keyframes crmSweep {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes crmPulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45); }
  80% { box-shadow: 0 0 0 10px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}

@keyframes posScan {
  0% { transform: translateX(-100%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes posHeaderPulse {
  0%, 100% { transform: scaleX(0.78); opacity: 0.7; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes posLineGrowA {
  0%, 100% { transform: scaleX(0.65); opacity: 0.65; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes posLineGrowB {
  0%, 100% { transform: scaleX(0.72); opacity: 0.72; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes accountingFlow {
  0%, 100% { transform: scaleX(0.7); opacity: 0.68; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes accountingBadge {
  0%, 100% { transform: scale(0.88); opacity: 0.55; }
  50% { transform: scale(1); opacity: 0.95; }
}

@keyframes salesCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes salesHeaderRun {
  0% { transform: translateX(-8%); opacity: 0.3; }
  50% { transform: translateX(2%); opacity: 0.85; }
  100% { transform: translateX(-8%); opacity: 0.3; }
}

body[data-mode="gaming"] .erp-feature-card {
  background: #131c24;
  border-color: rgba(232, 237, 244, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

body[data-mode="gaming"] .erp-feature-card h3 { color: #f5f9ff; }
body[data-mode="gaming"] .erp-feature-card p { color: #9aa9b8; }

body[data-mode="gaming"] .erp-feature-icon {
  background: #1a2732;
  color: #7fdb9f;
}

body[data-mode="gaming"] .erp-feature-tag {
  background: #1a2732;
  color: #9aa9b8;
}

body[data-mode="gaming"] .erp-mockup {
  background: linear-gradient(145deg, #172330, #111b25);
  border-color: rgba(232, 237, 244, 0.12);
}

body[data-mode="gaming"] .erp-mockup-crm::before {
  background: linear-gradient(90deg, transparent, rgba(127, 219, 159, 0.7), transparent);
}

body[data-mode="gaming"] .erp-mockup-crm::after {
  background: #7fdb9f;
  box-shadow: 0 0 0 0 rgba(127, 219, 159, 0.45);
  animation-name: crmPulseGaming;
}

body[data-mode="gaming"] .erp-mockup-pos::before {
  background: linear-gradient(90deg, transparent, rgba(127, 219, 159, 0.78), transparent);
}

body[data-mode="gaming"] .erp-mockup-accounting::before {
  background: rgba(127, 219, 159, 0.24);
}

@keyframes crmPulseGaming {
  0% { box-shadow: 0 0 0 0 rgba(127, 219, 159, 0.45); }
  80% { box-shadow: 0 0 0 10px rgba(127, 219, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 219, 159, 0); }
}

/* ERP module-specific animations (v2) */
.erp-mockup-pos span:nth-child(1) {
  top: 12px;
  left: 12px;
  width: 76%;
  height: 14px;
  background: #d6e4f9;
  animation: none;
}

.erp-mockup-pos span:nth-child(2) {
  top: 34px;
  left: 12px;
  width: 40%;
  height: 10px;
  background: #e4ebf7;
  animation: none;
}

.erp-mockup-pos span:nth-child(3) {
  top: 52px;
  left: 18px;
  width: 32px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #e8f0fe);
  border: 1px solid rgba(26, 115, 232, 0.22);
  animation: posReceiptDrop 2.8s ease-in-out infinite;
}

.erp-mockup-pos::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 47px;
  width: 44px;
  height: 8px;
  border-radius: 999px;
  background: #b8c8e4;
  animation: none;
}

.erp-mockup-crm span {
  width: 34px;
  height: 14px;
  border-radius: 999px;
  background: #d9e7fb;
  bottom: auto;
  top: 22px;
  transform-origin: center;
  animation: crmLeadFlow 3.2s ease-in-out infinite;
}

.erp-mockup-crm span:nth-child(1) { left: 12px; animation-delay: 0s; }
.erp-mockup-crm span:nth-child(2) { left: 54px; animation-delay: 0.35s; }
.erp-mockup-crm span:nth-child(3) { left: 96px; animation-delay: 0.7s; }
.erp-mockup-crm span:nth-child(4) { left: 138px; animation-delay: 1.05s; background: #c5dcff; }

.erp-mockup-crm::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(26, 115, 232, 0.35) 0 10px, transparent 10px 18px);
  animation: none;
}

.erp-mockup-crm::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 56px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(26, 115, 232, 0.2), rgba(26, 115, 232, 0.55));
  animation: crmConversionPulse 1.8s ease-in-out infinite;
  box-shadow: none;
}

.erp-mockup-accounting {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 14px 12px;
}

.erp-mockup-accounting span {
  position: relative;
  top: auto;
  left: auto;
  width: 14px;
  height: 24px;
  border-radius: 6px 6px 2px 2px;
  background: #d9e7fb;
}

.erp-mockup-accounting span:nth-child(1) {
  animation: accountingRiseA 2.2s ease-in-out infinite;
}

.erp-mockup-accounting span:nth-child(2) {
  animation: accountingRiseB 2.2s ease-in-out infinite 0.25s;
}

.erp-mockup-accounting::before {
  content: "";
  position: absolute;
  left: 40%;
  bottom: 12px;
  width: 14px;
  height: 26px;
  border-radius: 6px 6px 2px 2px;
  background: #c5dcff;
  animation: accountingRiseC 2.2s ease-in-out infinite 0.45s;
}

.erp-mockup-accounting::after {
  content: "";
  position: absolute;
  left: calc(40% + 22px);
  bottom: 12px;
  width: 14px;
  height: 18px;
  border-radius: 6px 6px 2px 2px;
  background: #b5d1fb;
  animation: accountingRiseD 2.2s ease-in-out infinite 0.65s;
}

.erp-mockup-sales span:nth-child(1) {
  top: 18px;
  left: 14px;
  width: 82%;
  height: 4px;
  border-radius: 999px;
  background: #cfdff4;
  animation: none;
}

.erp-mockup-sales span:nth-child(2) {
  top: 34px;
  left: 14px;
  width: 38%;
  height: 16px;
  border-radius: 999px;
  background: #d6eadf;
  animation: salesStepPulse 2.4s ease-in-out infinite;
}

.erp-mockup-sales span:nth-child(3) {
  top: 34px;
  right: 14px;
  width: 44%;
  height: 16px;
  border-radius: 999px;
  background: #dbe8fb;
  animation: salesStepPulse 2.4s ease-in-out infinite 0.4s;
}

.erp-mockup-sales::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34a853;
  animation: salesTrackingDot 2.4s ease-in-out infinite;
}

.erp-mockup-sales::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(52, 168, 83, 0.16), rgba(26, 115, 232, 0.16));
}

@keyframes posReceiptDrop {
  0% { transform: translateY(-18px); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(4px); opacity: 1; }
  80% { transform: translateY(10px); opacity: 0.85; }
  100% { transform: translateY(-18px); opacity: 0; }
}

@keyframes crmLeadFlow {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.5; }
  20% { opacity: 1; }
  70% { transform: translateX(12px) scale(1.05); opacity: 1; }
}

@keyframes crmConversionPulse {
  0%, 100% { transform: scaleX(0.72); opacity: 0.55; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes accountingRiseA {
  0%, 100% { height: 20px; }
  50% { height: 54px; }
}

@keyframes accountingRiseB {
  0%, 100% { height: 30px; }
  50% { height: 72px; }
}

@keyframes accountingRiseC {
  0%, 100% { height: 24px; }
  50% { height: 62px; }
}

@keyframes accountingRiseD {
  0%, 100% { height: 18px; }
  50% { height: 46px; }
}

@keyframes salesStepPulse {
  0%, 100% { transform: scaleX(0.9); opacity: 0.7; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes salesTrackingDot {
  0% { transform: translateX(0); opacity: 0.4; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(210px); opacity: 0.4; }
}

body[data-mode="gaming"] .erp-mockup-crm span {
  background: #26445b;
}

body[data-mode="gaming"] .erp-mockup-crm span:nth-child(4) {
  background: #2f5d7e;
}

body[data-mode="gaming"] .erp-mockup-sales::before {
  background: #7fdb9f;
}

/* ERP semantic mockups (module-meaningful animations) */
.erp-mockup[class*="erp-mockup-"] span {
  all: unset;
}

.erp-mockup-pos {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px;
}

.pos-terminal {
  width: 92px;
  height: 74px;
  border-radius: 12px;
  background: #e8eef8;
  border: 1px solid rgba(26, 115, 232, 0.2);
  display: grid;
  grid-template-rows: 24px 1fr;
  gap: 8px;
  padding: 8px;
}

.pos-screen {
  display: block;
  border-radius: 6px;
  background: #d4e3fb;
}

.pos-btn {
  display: inline-block;
  width: 26px;
  height: 8px;
  border-radius: 999px;
  background: #c1d6f7;
  margin-right: 6px;
}

.pos-receipt {
  width: 64px;
  height: 88px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #eef3fb);
  border: 1px solid rgba(26, 115, 232, 0.18);
  padding: 9px;
  transform-origin: top;
  animation: posPrint 3s ease-in-out infinite;
}

.pos-receipt span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: #d9e5f7;
  margin-bottom: 6px;
}

.pos-receipt span:last-child {
  width: 60%;
  background: #c3d8fb;
}

.erp-mockup-crm {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.crm-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.crm-stages span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: #5f6368;
  border-radius: 999px;
  background: #eef3fb;
  height: 20px;
}

.crm-lead-card {
  width: 48px;
  height: 26px;
  border-radius: 8px;
  background: #d7e6fd;
  border: 1px solid rgba(26, 115, 232, 0.22);
  padding: 5px;
  display: grid;
  gap: 3px;
  animation: crmJourney 3.4s ease-in-out infinite;
}

.crm-lead-card span {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: #b8d2fb;
}

.erp-mockup-accounting {
  padding: 12px;
  display: grid;
  align-items: end;
  gap: 10px;
}

.acc-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 76px;
}

.acc-bars span {
  display: block;
  width: 14px;
  background: #c5dcff;
  border-radius: 6px 6px 2px 2px;
}

.acc-bars span:nth-child(1) { animation: accRise1 2.5s ease-in-out infinite; }
.acc-bars span:nth-child(2) { animation: accRise2 2.5s ease-in-out infinite 0.15s; }
.acc-bars span:nth-child(3) { animation: accRise3 2.5s ease-in-out infinite 0.3s; }
.acc-bars span:nth-child(4) { animation: accRise4 2.5s ease-in-out infinite 0.45s; }

.acc-line {
  height: 2px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34a853, #1a73e8);
  animation: accTrend 2.5s ease-in-out infinite;
}

.erp-mockup-sales {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.sales-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-steps span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: #5f6368;
  border-radius: 999px;
  background: #eef3fb;
  height: 20px;
  opacity: 0.5;
  animation: salesStepState 3s ease-in-out infinite;
}

.sales-steps span:nth-child(2) { animation-delay: 0.55s; }
.sales-steps span:nth-child(3) { animation-delay: 1.1s; }

.sales-path {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #d7e6fd;
  overflow: hidden;
}

.sales-dot {
  position: absolute;
  top: -2px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34a853;
  animation: salesMove 3s ease-in-out infinite;
}

@keyframes posPrint {
  0%, 100% { transform: translateY(-24px) scaleY(0.7); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateY(0) scaleY(1); opacity: 1; }
  75% { transform: translateY(6px) scaleY(1); opacity: 0.9; }
}

@keyframes crmJourney {
  0%, 12% { transform: translateX(0); }
  35%, 47% { transform: translateX(calc(100% + 6px)); }
  70%, 82% { transform: translateX(calc(200% + 12px)); }
  100% { transform: translateX(0); }
}

@keyframes accRise1 { 0%,100% { height: 18px; } 50% { height: 34px; } }
@keyframes accRise2 { 0%,100% { height: 24px; } 50% { height: 48px; } }
@keyframes accRise3 { 0%,100% { height: 16px; } 50% { height: 62px; } }
@keyframes accRise4 { 0%,100% { height: 26px; } 50% { height: 72px; } }

@keyframes accTrend {
  0%, 100% { width: 0%; opacity: 0; }
  20% { opacity: 1; }
  70% { width: 100%; opacity: 1; }
}

@keyframes salesMove {
  0%, 100% { left: 0; }
  70% { left: calc(100% - 12px); }
}

@keyframes salesStepState {
  0%,100% { opacity: 0.45; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
}

body[data-mode="gaming"] .pos-terminal,
body[data-mode="gaming"] .crm-stages span,
body[data-mode="gaming"] .sales-steps span {
  background: #1a2732;
  color: #9aa9b8;
}

body[data-mode="gaming"] .pos-receipt {
  background: linear-gradient(180deg, #1a2732, #111b25);
  border-color: rgba(127, 219, 159, 0.25);
}

body[data-mode="gaming"] .crm-lead-card {
  background: #2b4c63;
  border-color: rgba(127, 219, 159, 0.35);
}

body[data-mode="gaming"] .acc-bars span {
  background: #3b5f7d;
}

body[data-mode="gaming"] .acc-line {
  background: linear-gradient(90deg, #7fdb9f, #4aa6ff);
}

body[data-mode="gaming"] .sales-path {
  background: #2a4154;
}

body[data-mode="gaming"] .sales-dot {
  background: #7fdb9f;
}

/* ERP refinement v3 (clearer, product-like motion) */
.erp-mockup-pos {
  position: relative;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 18px;
  padding: 14px 16px;
}

.pos-terminal {
  width: 112px;
  height: 82px;
  border-radius: 12px;
  padding: 9px;
  background: #e6eefb;
  border: 1px solid rgba(26, 115, 232, 0.2);
  position: relative;
}

.pos-terminal::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: #bdd2f3;
}

.pos-screen {
  height: 24px;
  border-radius: 7px;
  background: #d2e1f9;
}

.pos-receipt {
  width: 74px;
  height: 102px;
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f1f5fd);
  border: 1px solid rgba(26, 115, 232, 0.22);
  animation: posPrintRefined 3.2s cubic-bezier(.42,0,.2,1) infinite;
}

.erp-mockup-crm {
  position: relative;
  padding: 12px;
  min-height: 110px;
}

.crm-stages {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-stages::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -10px;
  border-bottom: 2px dashed rgba(26, 115, 232, 0.35);
}

.crm-stages span {
  height: 22px;
  font-size: 11px;
  font-weight: 500;
}

.crm-lead-card {
  position: absolute;
  top: 58px;
  left: 14px;
  width: 64px;
  height: 34px;
  border-radius: 9px;
  background: #d7e6fd;
  border: 1px solid rgba(26, 115, 232, 0.25);
  padding: 6px;
  animation: crmJourneyRefined 3.6s ease-in-out infinite;
}

.erp-mockup-accounting {
  position: relative;
  padding: 14px 14px 18px;
}

.acc-bars {
  height: 70px;
  gap: 10px;
}

.acc-bars span {
  width: 16px;
  border-radius: 6px 6px 2px 2px;
}

.acc-line {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 2px;
  width: auto;
  background: #b9cdea;
  animation: none;
}

.acc-line::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34a853, #1a73e8);
  animation: accTrendRefined 2.8s ease-in-out infinite;
}

.acc-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a73e8;
  animation: accDotRefined 2.8s ease-in-out infinite;
}

.erp-mockup-sales {
  padding: 12px 14px;
}

.sales-steps span {
  height: 22px;
  font-size: 11px;
  font-weight: 500;
}

.sales-path {
  height: 7px;
  margin-top: 4px;
  background: #d4e3f8;
}

.sales-dot {
  top: -2px;
  width: 11px;
  height: 11px;
  animation: salesMoveRefined 3s ease-in-out infinite;
}

.sales-steps span:nth-child(1) { animation: salesStageRefined 3s ease-in-out infinite; }
.sales-steps span:nth-child(2) { animation: salesStageRefined 3s ease-in-out infinite 0.8s; }
.sales-steps span:nth-child(3) { animation: salesStageRefined 3s ease-in-out infinite 1.6s; }

@keyframes posPrintRefined {
  0%, 100% { transform: translateY(-26px); opacity: 0; }
  18% { opacity: 1; }
  50% { transform: translateY(0); opacity: 1; }
  75% { transform: translateY(8px); opacity: 0.88; }
}

@keyframes crmJourneyRefined {
  0%, 12% { left: 14px; opacity: 0.9; }
  32%, 44% { left: 42%; opacity: 1; }
  64%, 76% { left: 74%; opacity: 1; }
  100% { left: 14px; opacity: 0.9; }
}

@keyframes accTrendRefined {
  0%, 100% { width: 0%; opacity: 0; }
  15% { opacity: 1; }
  70% { width: 88%; opacity: 1; }
}

@keyframes accDotRefined {
  0%, 100% { left: 0%; opacity: 0; }
  20% { opacity: 1; }
  70% { left: 88%; opacity: 1; }
}

@keyframes salesMoveRefined {
  0%, 100% { left: 0%; }
  70% { left: calc(100% - 11px); }
}

@keyframes salesStageRefined {
  0%, 100% { opacity: 0.45; transform: scale(0.98); }
  40% { opacity: 1; transform: scale(1); }
}

body[data-mode="gaming"] .crm-stages::after {
  border-bottom-color: rgba(127, 219, 159, 0.38);
}

body[data-mode="gaming"] .crm-lead-card {
  background: #2b4c63;
  border-color: rgba(127, 219, 159, 0.35);
}

body[data-mode="gaming"] .acc-line {
  background: #2a4154;
}

body[data-mode="gaming"] .acc-line::before {
  background: linear-gradient(90deg, #7fdb9f, #4aa6ff);
}
.suite-framework {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.suite-node {
  border-radius: 20px;
  border: 1px solid rgba(60, 64, 67, 0.12);
  background: #fff;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1), 0 1px 3px rgba(60, 64, 67, 0.07);
  position: relative;
  overflow: hidden;
}

.suite-node::after {
  content: "";
  position: absolute;
  inset: auto -12% -38% auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.14), transparent 68%);
}

.suite-node span {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f0fe;
  color: #1a73e8;
  margin-bottom: 8px;
}

.suite-node h3 {
  margin: 0 0 6px;
  font-size: 1.22rem;
  color: #1f1f1f;
}

.suite-node p {
  margin: 0;
  color: #5f6368;
}

body[data-mode="gaming"] .suite-node {
  background: #131c24;
  border-color: rgba(232, 237, 244, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

body[data-mode="gaming"] .suite-node::after {
  background: radial-gradient(circle, rgba(53, 196, 106, 0.16), transparent 68%);
}

body[data-mode="gaming"] .suite-node span {
  background: #1a2732;
  color: #7fdb9f;
}

body[data-mode="gaming"] .suite-node h3 {
  color: #f5f9ff;
}

body[data-mode="gaming"] .suite-node p {
  color: #9aa9b8;
}

@media (max-width: 1040px) {
  .erp-card-pos,
  .erp-card-crm,
  .erp-card-accounting,
  .erp-card-sales {
    grid-column: span 6;
  }

  .suite-framework {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .erp-feature-grid { grid-template-columns: 1fr; }
  .erp-card-pos,
  .erp-card-crm,
  .erp-card-accounting,
  .erp-card-sales {
    grid-column: auto;
  }
}

/* ERP polish v4 */
.erp-feature-card {
  min-height: 340px;
}

.erp-mockup {
  min-height: 136px;
  background: linear-gradient(180deg, #eef2f8, #e9eef6);
  border: 1px solid rgba(60, 64, 67, 0.14);
}

.erp-mockup-pos {
  justify-content: space-between;
  align-items: center;
}

.pos-terminal {
  width: 128px;
  height: 86px;
  border-radius: 14px;
  background: linear-gradient(180deg, #dfe7f5, #d4dfef);
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.18);
}

.pos-terminal::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 18px;
  height: 30px;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(160, 182, 216, 0.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 182, 216, 0.75) 1px, transparent 1px);
  background-size: 12px 10px;
}

.pos-screen {
  background: linear-gradient(90deg, #b8cbed, #c7d8f3);
}

.pos-receipt {
  width: 82px;
  height: 108px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff, #eff4fd);
  border-color: rgba(26, 115, 232, 0.24);
  box-shadow: 0 4px 10px rgba(60, 64, 67, 0.12);
  position: relative;
}

.pos-receipt::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  border-radius: 8px 8px 0 0;
  background: #b9cbe7;
}

.pos-receipt span {
  width: 100%;
}

.pos-receipt span:nth-child(2) {
  width: 80%;
}

.crm-stages span {
  height: 24px;
  font-size: 11px;
  background: #e0e8f5;
  font-weight: 600;
}

.crm-stages::after {
  bottom: -11px;
  border-bottom-color: rgba(26, 115, 232, 0.3);
}

.crm-lead-card {
  width: 74px;
  height: 36px;
  border-radius: 10px;
  top: 58px;
  left: 14px;
  background: linear-gradient(180deg, #d8e7fe, #cfe0fb);
  box-shadow: 0 3px 8px rgba(26, 115, 232, 0.16);
  animation: crmDealMoveV4 3.8s ease-in-out infinite;
}

.crm-lead-card::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 6px;
  border-radius: 999px;
  background: rgba(26, 115, 232, 0.35);
}

.erp-mockup-accounting {
  padding-bottom: 22px;
}

.acc-bars {
  height: 84px;
}

.acc-bars span {
  width: 18px;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #d7e7ff, #b9d3fc);
}

.acc-line {
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 3px;
  background: #c2d4ee;
}

.acc-line::before {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34a853, #1a73e8);
  animation: accTrendRefinedV4 3s ease-in-out infinite;
}

.acc-line::after {
  width: 10px;
  height: 10px;
  background: #1a73e8;
  animation: accDotRefinedV4 3s ease-in-out infinite;
}

.sales-steps span {
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  background: #e0e8f5;
}

.sales-path {
  height: 8px;
  background: #c9daf2;
}

.sales-dot {
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #34a853;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  animation: salesMoveRefinedV4 3.2s ease-in-out infinite;
}

.sales-dot::before {
  content: "\f466";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 8px;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

@keyframes crmDealMoveV4 {
  0%, 12% { left: 14px; }
  36%, 48% { left: calc(50% - 38px); }
  72%, 84% { left: calc(100% - 90px); }
  100% { left: 14px; }
}

@keyframes accTrendRefinedV4 {
  0%, 100% { width: 0%; opacity: 0; }
  18% { opacity: 1; }
  72% { width: 92%; opacity: 1; }
}

@keyframes accDotRefinedV4 {
  0%, 100% { left: 0%; opacity: 0; }
  20% { opacity: 1; }
  72% { left: 92%; opacity: 1; }
}

@keyframes salesMoveRefinedV4 {
  0%, 100% { left: 0%; }
  72% { left: calc(100% - 14px); }
}

body[data-mode="gaming"] .erp-mockup {
  background: linear-gradient(180deg, #1a2431, #141d29);
}

body[data-mode="gaming"] .pos-terminal,
body[data-mode="gaming"] .sales-steps span,
body[data-mode="gaming"] .crm-stages span {
  background: #243445;
  color: #b7c5d3;
}

body[data-mode="gaming"] .pos-receipt {
  background: linear-gradient(180deg, #223344, #172432);
}

body[data-mode="gaming"] .crm-lead-card {
  background: linear-gradient(180deg, #355773, #2b4a63);
}

body[data-mode="gaming"] .acc-bars span {
  background: linear-gradient(180deg, #5077a0, #3e5f80);
}

body[data-mode="gaming"] .sales-path {
  background: #2f455b;
}

/* Accounting chart refinement (module-specific) */
.erp-mockup-accounting {
  padding: 10px 12px 12px;
}

.acc-chart-board {
  position: relative;
  width: 100%;
  height: 106px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 115, 232, 0.16);
  background: linear-gradient(180deg, #f4f8fe, #edf3fb);
}

.acc-chart-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(26, 115, 232, 0.1) 1px, transparent 1px);
  background-size: 100% 20px;
  pointer-events: none;
}

.acc-bars-mini {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 60px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 1;
}

.acc-bars-mini span {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #c7dcfc, #aac9f7);
  transform-origin: bottom;
  animation: accBarPulseMeaningful 2.8s ease-in-out infinite;
}

.acc-bars-mini span:nth-child(1) { height: 22px; animation-delay: 0s; }
.acc-bars-mini span:nth-child(2) { height: 28px; animation-delay: 0.12s; }
.acc-bars-mini span:nth-child(3) { height: 34px; animation-delay: 0.24s; }
.acc-bars-mini span:nth-child(4) { height: 42px; animation-delay: 0.36s; }
.acc-bars-mini span:nth-child(5) { height: 50px; animation-delay: 0.48s; }
.acc-bars-mini span:nth-child(6) { height: 58px; animation-delay: 0.6s; }

.acc-trend-svg {
  position: absolute;
  inset: 8px 10px 8px 10px;
  z-index: 2;
}

.acc-trend-area {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0;
  animation: accAreaDrawMeaningful 2.8s ease-in-out infinite;
}

.acc-trend-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: accLineDrawMeaningful 2.8s ease-in-out infinite;
}

.acc-trend-dot {
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  animation: accDotShowMeaningful 2.8s ease-in-out infinite;
}

.acc-trend-dot.d1 { animation-delay: 0.2s; }
.acc-trend-dot.d2 { animation-delay: 0.35s; }
.acc-trend-dot.d3 { animation-delay: 0.5s; }
.acc-trend-dot.d4 { animation-delay: 0.65s; }
.acc-trend-dot.d5 { animation-delay: 0.8s; }

@keyframes accBarPulseMeaningful {
  0%, 100% { transform: scaleY(0.82); opacity: 0.75; }
  45% { transform: scaleY(1); opacity: 1; }
}

@keyframes accLineDrawMeaningful {
  0%, 8% { stroke-dashoffset: 360; opacity: 0; }
  16% { opacity: 1; }
  72% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 360; opacity: 0; }
}

@keyframes accAreaDrawMeaningful {
  0%, 16% { opacity: 0; }
  48%, 72% { opacity: 0.22; }
  100% { opacity: 0; }
}

@keyframes accDotShowMeaningful {
  0%, 25% { opacity: 0; transform: scale(0.6); }
  45%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

body[data-mode="gaming"] .acc-chart-board {
  border-color: rgba(127, 219, 159, 0.2);
  background: linear-gradient(180deg, #1a2734, #14202b);
}

body[data-mode="gaming"] .acc-chart-board::before {
  background-image: linear-gradient(rgba(127, 219, 159, 0.12) 1px, transparent 1px);
}

body[data-mode="gaming"] .acc-bars-mini span {
  background: linear-gradient(180deg, #5f87ae, #46698b);
}

/* ERP final requested behavior */
.erp-mockup-pos::before,
.erp-mockup-pos::after,
.erp-mockup-crm::before,
.erp-mockup-crm::after,
.erp-mockup-accounting::before,
.erp-mockup-accounting::after,
.erp-mockup-sales::before,
.erp-mockup-sales::after {
  content: none !important;
  display: none !important;
}

.erp-mockup-pos {
  position: relative;
  height: 118px;
  max-width: 420px;
  margin-inline: auto;
  padding: 0;
  display: block;
}

.pos-terminal {
  position: absolute;
  left: 18px;
  bottom: 12px;
  width: 146px;
  height: 92px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e7edf8, #dbe6f4);
  border: 1px solid rgba(26, 115, 232, 0.2);
  box-shadow: inset 0 -20px 0 rgba(26, 115, 232, 0.06);
}

.pos-screen {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, #d1def4, #c3d4ef);
}

.pos-screen::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #16a34a;
  font-size: 16px;
  opacity: 0;
  transform: scale(0.6);
  animation: posSuccessOnScreen 3.6s ease-in-out infinite;
}

.pos-btn {
  position: absolute;
  bottom: 14px;
  width: 46px;
  height: 10px;
  border-radius: 999px;
  background: #bfd2f2;
}

.pos-btn:nth-child(2) { left: 14px; }
.pos-btn:nth-child(3) { left: 68px; }

.pos-receipt {
  position: absolute;
  right: 18px;
  bottom: 26px;
  width: 82px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid rgba(26, 115, 232, 0.24);
  background: linear-gradient(160deg, #ffffff, #eaf1fc);
  box-shadow: 0 4px 10px rgba(60, 64, 67, 0.14);
  animation: posCardInsert 3.6s ease-in-out infinite;
}

.pos-receipt span {
  display: block;
  margin: 8px 10px 0;
  height: 6px;
  border-radius: 4px;
  background: #c7d8f5;
}

.pos-receipt span:nth-child(2) { width: 72%; }
.pos-receipt span:nth-child(3) { width: 48%; }

.erp-mockup-crm {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  height: 118px;
  padding: 0;
}

.crm-stages {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  width: 88%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-stages span {
  display: grid;
  place-items: center;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #c9d8ef;
  background: #eef4fe;
  font-size: 11px;
  font-weight: 600;
  color: #496280;
  animation: crmStageFocus 3.9s ease-in-out infinite;
}

.crm-stages span:nth-child(1) { animation-delay: 0s; }
.crm-stages span:nth-child(2) { animation-delay: 1.3s; }
.crm-stages span:nth-child(3) { animation-delay: 2.6s; }

.crm-lead-card {
  position: absolute;
  top: 66px;
  left: 12%;
  width: 72px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(26, 115, 232, 0.26);
  background: linear-gradient(180deg, #d8e7fe, #cbddfb);
  box-shadow: 0 4px 10px rgba(26, 115, 232, 0.14);
  animation: crmLeadTravel 3.9s ease-in-out infinite;
}

.crm-lead-card span {
  display: block;
  margin: 7px 8px 0;
  height: 5px;
  border-radius: 4px;
  background: #b3cdf8;
}

.crm-lead-card span:nth-child(2) { width: 62%; }

.erp-mockup-accounting {
  padding: 0;
  display: grid;
  place-items: center;
}

.acc-chart-board {
  width: min(94%, 430px);
  height: 114px;
  margin-inline: auto;
}

.acc-trend-line {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: accLineDrawRequested 3s ease-in-out infinite;
}

.acc-trend-area {
  animation: accAreaRequested 3s ease-in-out infinite;
}

.acc-trend-dot {
  animation: accDotRequested 3s ease-in-out infinite;
}

.erp-mockup-sales {
  max-width: 430px;
  margin-inline: auto;
  height: 118px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.sales-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sales-steps span {
  display: grid;
  place-items: center;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #c9d8ef;
  background: #eef4fe;
  font-size: 11px;
  font-weight: 600;
  color: #516683;
  animation: salesStageFocus 3.4s ease-in-out infinite;
}

.sales-steps span:nth-child(1) { animation-delay: 0s; }
.sales-steps span:nth-child(2) { animation-delay: 1.1s; }
.sales-steps span:nth-child(3) { animation-delay: 2.2s; }

.sales-path {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: #d4deec;
  overflow: hidden;
}

.sales-path::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  border-top: 2px dashed rgba(90, 114, 145, 0.45);
}

.sales-dot {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 30px;
  height: 16px;
  border-radius: 6px;
  background: #34a853;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  animation: salesTruckDrive 3.4s ease-in-out infinite;
}

.sales-dot::before {
  content: "\f0d1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 9px;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

@keyframes posCardInsert {
  0%, 100% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  42% { transform: translateX(-130px); opacity: 1; }
  62% { transform: translateX(-126px); opacity: 1; }
  85% { transform: translateX(0); opacity: 0; }
}

@keyframes posSuccessOnScreen {
  0%, 42% { opacity: 0; transform: scale(0.55); }
  50%, 72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.55); }
}

@keyframes crmLeadTravel {
  0%, 12% { left: 12%; }
  36%, 48% { left: calc(50% - 36px); }
  72%, 84% { left: calc(88% - 72px); }
  100% { left: 12%; }
}

@keyframes crmStageFocus {
  0%, 100% { opacity: 0.45; transform: scale(0.98); }
  40%, 58% { opacity: 1; transform: scale(1); border-color: #7eacf4; }
}

@keyframes accLineDrawRequested {
  0%, 10% { stroke-dashoffset: 340; opacity: 0; }
  18% { opacity: 1; }
  72% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 340; opacity: 0; }
}

@keyframes accAreaRequested {
  0%, 18% { opacity: 0; }
  48%, 72% { opacity: 0.24; }
  100% { opacity: 0; }
}

@keyframes accDotRequested {
  0%, 26% { opacity: 0; transform: scale(0.6); }
  48%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

@keyframes salesTruckDrive {
  0%, 100% { left: 2px; }
  72% { left: calc(100% - 32px); }
}

@keyframes salesStageFocus {
  0%, 100% { opacity: 0.45; transform: scale(0.98); }
  40%, 58% { opacity: 1; transform: scale(1); border-color: #7eacf4; }
}

body[data-mode="gaming"] .pos-terminal,
body[data-mode="gaming"] .crm-stages span,
body[data-mode="gaming"] .sales-steps span {
  background: #243445;
  color: #b7c5d3;
  border-color: #3a5670;
}

body[data-mode="gaming"] .pos-receipt {
  background: linear-gradient(180deg, #223344, #172432);
  border-color: rgba(127, 219, 159, 0.32);
}

body[data-mode="gaming"] .pos-screen::after {
  color: #7fdb9f;
}

body[data-mode="gaming"] .crm-lead-card {
  background: linear-gradient(180deg, #355773, #2b4a63);
  border-color: rgba(127, 219, 159, 0.38);
}

body[data-mode="gaming"] .sales-path {
  background: #2f455b;
}

body[data-mode="gaming"] .sales-path::before {
  border-top-color: rgba(127, 219, 159, 0.45);
}

body[data-mode="gaming"] .sales-dot {
  background: #7fdb9f;
  box-shadow: 0 0 0 2px rgba(17, 27, 37, 0.9);
}

/* ERP motion polish v5 */
.erp-mockup-pos {
  position: relative;
  max-width: 430px;
  margin-inline: auto;
  height: 122px;
  padding: 0;
}

.pos-terminal {
  left: 18px;
  bottom: 14px;
  width: 154px;
  height: 94px;
}

.pos-terminal::before {
  left: 14px;
  right: 14px;
  bottom: 24px;
  height: 26px;
}

.pos-screen::after {
  animation: posSuccessSequenceV5 3.8s ease-in-out infinite;
}

.pos-card {
  position: absolute;
  right: 16px;
  top: 38px;
  width: 80px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(145deg, #2d7ff0, #1a73e8);
  box-shadow: 0 6px 12px rgba(26, 115, 232, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: posCardToTerminalV5 3.8s ease-in-out infinite;
}

.pos-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 20px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
}

.pos-card span {
  display: block;
  height: 5px;
  margin: 30px 10px 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.65);
}

.pos-card span:last-child {
  width: 60%;
  margin-top: 5px;
}

.pos-receipt {
  right: 16px;
  bottom: 22px;
  width: 84px;
  height: 106px;
  animation: posReceiptOutV5 3.8s ease-in-out infinite;
}

.crm-stages {
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  gap: 10px;
}

.crm-stages span {
  height: 24px;
  font-size: 11px;
  font-weight: 600;
}

.crm-stages span:nth-child(1) {
  background: #fff4e5;
  border-color: #f3bf75;
  color: #9a6200;
}

.crm-stages span:nth-child(2) {
  background: #e8f1ff;
  border-color: #9fc3ff;
  color: #1f5dbb;
}

.crm-stages span:nth-child(3) {
  background: #e9f8ef;
  border-color: #9fddba;
  color: #1f7c45;
}

.crm-lead-card {
  top: 67px;
  left: 11%;
  width: 72px;
  height: 34px;
  animation: crmLeadTravelV5 3.9s ease-in-out infinite;
}

.crm-lead-card::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a73e8;
}

.sales-steps span {
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}

.sales-steps span:nth-child(1) {
  background: #fff4e5;
  border-color: #f3bf75;
  color: #9a6200;
}

.sales-steps span:nth-child(2) {
  background: #e8f1ff;
  border-color: #9fc3ff;
  color: #1f5dbb;
}

.sales-steps span:nth-child(3) {
  background: #e9f8ef;
  border-color: #9fddba;
  color: #1f7c45;
}

.sales-path {
  position: relative;
  height: 22px;
  border: 1px solid #bfd0e8;
  background: linear-gradient(180deg, #dbe6f5, #cfddf0);
  border-radius: 999px;
}

.sales-path::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 2px dashed #8aa5c8;
}

.sales-truck {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 34px;
  height: 16px;
  border-radius: 6px;
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  animation: salesTruckRunV5 3.4s ease-in-out infinite;
  display: block;
}

.sales-truck::before {
  content: "\f0d1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 9px;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.sales-truck::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
}

@keyframes posCardToTerminalV5 {
  0%, 100% { transform: translateX(0); opacity: 0.05; }
  12% { opacity: 1; }
  42%, 56% { transform: translateX(-126px); opacity: 1; }
  80% { transform: translateX(0); opacity: 0.08; }
}

@keyframes posSuccessSequenceV5 {
  0%, 44% { opacity: 0; transform: scale(0.5); }
  52%, 72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

@keyframes posReceiptOutV5 {
  0%, 50% { transform: translateY(-18px); opacity: 0; }
  58%, 82% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-18px); opacity: 0; }
}

@keyframes crmLeadTravelV5 {
  0%, 12% { left: 11%; }
  36%, 48% { left: calc(50% - 36px); }
  72%, 84% { left: calc(89% - 72px); }
  100% { left: 11%; }
}

@keyframes salesTruckRunV5 {
  0%, 100% { left: 3px; }
  72% { left: calc(100% - 37px); }
}

body[data-mode="gaming"] .pos-card {
  background: linear-gradient(145deg, #3c5f7d, #2c4d67);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

body[data-mode="gaming"] .sales-path {
  border-color: #3c5874;
  background: linear-gradient(180deg, #2c4258, #24384a);
}

body[data-mode="gaming"] .sales-path::before {
  border-top-color: #77c39c;
}

body[data-mode="gaming"] .sales-truck {
  background: #7fdb9f;
  box-shadow: 0 0 0 2px rgba(17, 27, 37, 0.9);
}

/* ERP actionable UX additions */
.erp-more-btn {
  margin-top: 12px;
  align-self: flex-start;
}

.crm-lead-card {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 6px 8px;
}

.crm-lead-card small {
  font-size: 9px;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.crm-lead-card strong {
  font-size: 11px;
  line-height: 1.1;
  color: #1f2d3d;
  font-weight: 700;
}

.crm-lead-card em {
  font-style: normal;
  font-size: 9px;
  color: #46689a;
}

.sales-path {
  height: 10px !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.sales-path::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 3px solid #8fa6c3;
  border-radius: 999px;
}

.sales-truck {
  width: 44px !important;
  height: 24px !important;
  border-radius: 7px !important;
  top: -7px !important;
  background: #2563eb !important;
  animation: salesTruckRunV6 3.4s ease-in-out infinite !important;
}

.sales-truck::before {
  font-size: 12px !important;
}

.sales-truck::after {
  height: 4px !important;
  bottom: -5px !important;
}

@keyframes salesTruckRunV6 {
  0%, 100% { left: 2px; }
  72% { left: calc(100% - 46px); }
}

.module-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}

.module-modal.open {
  display: block;
}

.module-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 14, 0.5);
  backdrop-filter: blur(3px);
}

.module-modal-card {
  position: relative;
  width: min(920px, calc(100% - 1.6rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 1rem auto;
  border-radius: 22px;
  border: 1px solid rgba(60, 64, 67, 0.18);
  background: #fff;
  padding: 1.1rem;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.module-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(60, 64, 67, 0.2);
  background: #fff;
  color: #1f1f1f;
  cursor: pointer;
}

.module-modal-card h3 {
  margin: 8px 0 8px;
  font-size: 1.65rem;
}

.module-modal-card p {
  margin: 0 0 10px;
  color: #5f6368;
}

.module-modal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.module-modal-list li {
  background: #f3f7fd;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  color: #334a66;
  font-size: 0.95rem;
}

.module-modal-media {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.module-shot {
  min-height: 170px;
  border-radius: 14px;
  border: 1px solid #d1deef;
  background: linear-gradient(170deg, #f8fbff, #edf3fb);
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.module-shot h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #1f2d3d;
}

.module-shot .line {
  height: 8px;
  border-radius: 4px;
  background: #ccdaf0;
  margin-bottom: 6px;
}

.module-shot .line.w60 { width: 60%; }
.module-shot .line.w80 { width: 80%; }
.module-shot .line.w40 { width: 40%; }
.module-shot .line.w95 { width: 95%; }

.module-shot.pos::after,
.module-shot.crm::after,
.module-shot.accounting::after,
.module-shot.sales::after {
  content: "";
  position: absolute;
  inset: auto -10% -35% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
}

.module-shot.pos::after { background: radial-gradient(circle, rgba(26,115,232,0.18), transparent 68%); }
.module-shot.crm::after { background: radial-gradient(circle, rgba(102,126,234,0.18), transparent 68%); }
.module-shot.accounting::after { background: radial-gradient(circle, rgba(52,168,83,0.18), transparent 68%); }
.module-shot.sales::after { background: radial-gradient(circle, rgba(251,188,4,0.2), transparent 68%); }

body[data-mode="gaming"] .crm-lead-card small { color: #b7c5d3; }
body[data-mode="gaming"] .crm-lead-card strong { color: #e8edf4; }
body[data-mode="gaming"] .crm-lead-card em { color: #9fd1b3; }

body[data-mode="gaming"] .sales-path::before {
  border-top-color: #7dbf98;
}

body[data-mode="gaming"] .sales-truck {
  background: #34c36a !important;
}

body[data-mode="gaming"] .module-modal-card {
  background: #131c24;
  border-color: rgba(232, 237, 244, 0.16);
}

body[data-mode="gaming"] .module-modal-close {
  background: #1a2732;
  border-color: rgba(232, 237, 244, 0.2);
  color: #e8edf4;
}

body[data-mode="gaming"] .module-modal-card h3 { color: #f5f9ff; }
body[data-mode="gaming"] .module-modal-card p { color: #9aa9b8; }
body[data-mode="gaming"] .module-modal-list li {
  background: #1a2732;
  border-color: #2f4458;
  color: #b4c3d3;
}

body[data-mode="gaming"] .module-shot {
  border-color: #2f4458;
  background: linear-gradient(170deg, #1a2732, #15222c);
}

body[data-mode="gaming"] .module-shot h4 { color: #e8edf4; }
body[data-mode="gaming"] .module-shot .line { background: #49627a; }

@media (max-width: 760px) {
  .module-modal-media {
    grid-template-columns: 1fr;
  }

  .sales-truck {
    width: 40px !important;
  }
}

/* Final refinement block: CRM states, smooth modal, adapted truck */
.erp-mockup-crm {
  overflow: hidden;
}

.crm-stages {
  position: absolute;
  top: 14px !important;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 18px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.crm-stages span {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
  opacity: 0.78;
}

.crm-stages span.is-active {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.28), 0 6px 14px rgba(26, 115, 232, 0.16);
  opacity: 1;
}

.crm-lead-card {
  position: absolute;
  width: 144px !important;
  min-height: 70px;
  height: auto !important;
  top: 40px !important;
  left: 8%;
  border-radius: 12px !important;
  border: 1px solid #8eb4f2 !important;
  background: linear-gradient(170deg, #f7faff, #e8f0fd) !important;
  box-shadow: 0 10px 20px rgba(26, 115, 232, 0.22);
  padding: 6px 9px !important;
  gap: 2px !important;
  animation: none !important;
  transition: left 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease;
}

.crm-lead-card::after {
  content: none !important;
}

.crm-lead-card small,
.crm-lead-card strong,
.crm-lead-card em,
.crm-lead-card span {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  margin: 0;
}

.crm-lead-card small {
  font-size: 9px !important;
  color: #476890 !important;
}

.crm-lead-card strong {
  font-size: 13px !important;
  color: #16324a !important;
}

.crm-lead-card em {
  font-size: 10px !important;
  color: #1a56b9 !important;
}

.crm-lead-card span {
  font-size: 9px;
  color: #326f4d;
  font-weight: 600;
}

.sales-path {
  height: 90px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #edf3fb, #e6eef8) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 4px 8px 8px;
}

.sales-path::before,
.sales-path::after {
  content: none !important;
}

.sales-loader {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sales-truck-wrapper {
  width: min(460px, 98%);
  height: 72px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.sales-truck-runner {
  width: 108px;
  height: 52px;
  position: absolute;
  left: 4px;
  bottom: 10px;
  z-index: 4;
  animation: salesTruckDrive 3.4s linear infinite;
}

.sales-truck-body {
  width: 108px;
  height: 34px;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-end;
  animation: salesTruckMotion 0.9s linear infinite;
}

.sales-truck-cargo {
  display: block;
  width: 72px;
  height: 28px;
  border-radius: 8px 3px 3px 8px;
  border: 1px solid #b26411;
  background: linear-gradient(160deg, #f59e0b, #f97316);
}

.sales-truck-cabin {
  display: block;
  width: 36px;
  height: 22px;
  margin-left: -2px;
  border-radius: 6px 8px 4px 4px;
  border: 1px solid #1d4ed8;
  background: linear-gradient(160deg, #3b82f6, #60a5fa);
  position: relative;
}

.sales-truck-cabin::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 12px;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
}

.sales-truck-tires {
  width: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
}

.sales-truck-tires span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #475569, #0f172a 62%);
}

.sales-road {
  width: 100%;
  height: 9px;
  background-color: #506581;
  position: relative;
  bottom: 8px;
  border-radius: 999px;
  align-self: flex-end;
  overflow: hidden;
}

.sales-road::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 100%;
  background-color: #506581;
  right: -36%;
  border-radius: 999px;
  animation: salesRoadFlow 1.3s linear infinite;
  border-left: 12px solid #f8fbff;
}

.sales-road::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 100%;
  background-color: #506581;
  right: -54%;
  border-radius: 999px;
  animation: salesRoadFlow 1.3s linear infinite;
  border-left: 5px solid #f8fbff;
}

.sales-lamp-post {
  position: absolute;
  bottom: 8px;
  right: -72%;
  width: 3px;
  height: 30px;
  border-radius: 999px;
  background: #8ca3be;
  animation: salesRoadFlow 1.3s linear infinite;
}

@keyframes salesTruckMotion {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes salesTruckDrive {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% - 120px));
  }
}

@keyframes salesRoadFlow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-350px);
  }
}

.module-modal {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}

.module-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.module-modal-backdrop {
  opacity: 0;
  transition: opacity 0.32s ease;
}

.module-modal.open .module-modal-backdrop {
  opacity: 1;
}

.module-modal-card {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.34s ease;
}

.module-modal.open .module-modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.module-shot h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-shot h4 i {
  color: #1a73e8;
  font-size: 0.95rem;
}

.shot-stats {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.shot-stats li {
  font-size: 0.82rem;
  color: #35506f;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid #cfdbeb;
  border-radius: 7px;
  padding: 4px 6px;
}

body[data-mode="gaming"] .crm-stages span.is-active {
  box-shadow: inset 0 0 0 1px rgba(139, 206, 255, 0.42), 0 8px 18px rgba(0, 0, 0, 0.38);
}

body[data-mode="gaming"] .crm-lead-card {
  border-color: #4872a4 !important;
  background: linear-gradient(165deg, #1a2733, #172431) !important;
  box-shadow: 0 10px 20px rgba(2, 10, 20, 0.5);
}

body[data-mode="gaming"] .crm-lead-card small { color: #9eb7d2 !important; }
body[data-mode="gaming"] .crm-lead-card strong { color: #edf3fa !important; }
body[data-mode="gaming"] .crm-lead-card em { color: #8fb8ff !important; }
body[data-mode="gaming"] .crm-lead-card span { color: #95d4ab !important; }

body[data-mode="gaming"] .sales-path {
  background: linear-gradient(180deg, #1b2a38, #172532) !important;
}

body[data-mode="gaming"] .sales-road {
  background-color: #32475f;
}

body[data-mode="gaming"] .sales-road::before,
body[data-mode="gaming"] .sales-road::after {
  border-left-color: #e8f0fa;
  background-color: #32475f;
}

body[data-mode="gaming"] .sales-lamp-post {
  background: #6e8fb0;
}

body[data-mode="gaming"] .shot-stats li {
  background: rgba(19, 28, 36, 0.76);
  border-color: #2f4458;
  color: #b8c9db;
}

body[data-mode="gaming"] .module-shot h4 i {
  color: #8ec5ff;
}

@media (max-width: 760px) {
  .sales-path {
    height: 84px !important;
  }

  .sales-truck-wrapper {
    width: 100%;
  }

  .sales-truck-runner {
    width: 90px;
  }

  .sales-truck-body {
    width: 90px;
    height: 30px;
  }

  .sales-truck-cargo {
    width: 60px;
    height: 24px;
  }

  .sales-truck-cabin {
    width: 30px;
    height: 20px;
  }

  .sales-truck-tires {
    width: 90px;
    padding: 0 10px 0 12px;
  }

  .sales-truck-tires span {
    width: 12px;
    height: 12px;
  }

  .crm-lead-card {
    width: 134px !important;
  }
}

/* POS animation adaptation (Uiverse-inspired) */
.erp-mockup-pos {
  max-width: 460px !important;
  height: 122px !important;
  padding: 0 !important;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pos-ui-container {
  background-color: #ffffff;
  display: flex;
  width: min(100%, 460px);
  height: 112px;
  position: relative;
  border-radius: 10px;
  border: 1px solid #d5e2f3;
  overflow: hidden;
}

.pos-ui-left {
  background-color: #5de2a3;
  width: 132px;
  height: 112px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  animation: posUiLeftExpand 3.8s ease-in-out infinite;
}

.pos-ui-right {
  width: calc(100% - 132px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 16px 0 18px;
  background: #ffffff;
  animation: posUiRightFade 3.8s ease-in-out infinite;
}

.pos-ui-label {
  font-size: 1.02rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: #1f2d3d;
}

.pos-ui-arrow {
  font-size: 1rem;
  color: #3a4f66;
}

.pos-ui-card {
  width: 70px;
  height: 46px;
  background-color: #c7ffbc;
  border-radius: 7px;
  position: absolute;
  left: 31px;
  top: 34px;
  display: flex;
  z-index: 8;
  flex-direction: column;
  align-items: center;
  box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  animation: posUiCardSlide 3.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

.pos-ui-card-line {
  width: 64px;
  height: 12px;
  background-color: #80ea69;
  border-radius: 2px;
  margin-top: 7px;
}

.pos-ui-buttons {
  width: 8px;
  height: 8px;
  background-color: #379e1f;
  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;
  border-radius: 50%;
  transform: rotate(90deg);
  margin: 10px 0 0 -30px;
}

.pos-ui-post {
  width: 63px;
  height: 75px;
  background-color: #dddde0;
  position: absolute;
  z-index: 9;
  top: 112px;
  right: 20px;
  border-radius: 6px;
  overflow: hidden;
  animation: posUiPostSlide 3.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

.pos-ui-post-line {
  width: 47px;
  height: 9px;
  background-color: #545354;
  position: absolute;
  border-radius: 0 0 3px 3px;
  right: 8px;
  top: 8px;
}

.pos-ui-post-line::before {
  content: "";
  position: absolute;
  width: 47px;
  height: 9px;
  background-color: #757375;
  top: -8px;
  left: 0;
}

.pos-ui-screen {
  width: 47px;
  height: 23px;
  background-color: #ffffff;
  position: absolute;
  top: 22px;
  right: 8px;
  border-radius: 3px;
}

.pos-ui-numbers {
  width: 12px;
  height: 12px;
  background-color: #838183;
  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 52px;
}

.pos-ui-numbers-line2 {
  width: 12px;
  height: 12px;
  background-color: #aaa9ab;
  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 68px;
}

.pos-ui-success {
  position: absolute;
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  width: 100%;
  left: 0;
  top: 2px;
  color: #2a8f58;
  text-align: center;
  opacity: 0;
  animation: posUiSuccessFade 3.8s ease-in-out infinite;
}

@keyframes posUiLeftExpand {
  0%,
  18%,
  100% {
    width: 132px;
  }
  30%,
  76% {
    width: 100%;
  }
}

@keyframes posUiRightFade {
  0%,
  20%,
  100% {
    width: calc(100% - 132px);
    padding: 0 16px 0 18px;
    opacity: 1;
    transform: translateX(0);
  }
  30%,
  76% {
    width: 0;
    padding: 0;
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes posUiCardSlide {
  0%,
  18% {
    transform: translateY(0) rotate(0deg);
  }
  44%,
  58% {
    transform: translateY(-70px) rotate(90deg);
  }
  74% {
    transform: translateY(-10px) rotate(90deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes posUiPostSlide {
  0%,
  22%,
  100% {
    transform: translateY(0);
  }
  44%,
  74% {
    transform: translateY(-72px);
  }
}

@keyframes posUiSuccessFade {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
  66%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
}

body[data-mode="gaming"] .pos-ui-container {
  background: #142332;
  border-color: #35506b;
}

body[data-mode="gaming"] .pos-ui-left {
  background: #2e8f62;
}

body[data-mode="gaming"] .pos-ui-right {
  background: #1a2732;
}

body[data-mode="gaming"] .pos-ui-label {
  color: #e8edf4;
}

body[data-mode="gaming"] .pos-ui-arrow {
  color: #b8c9db;
}

body[data-mode="gaming"] .pos-ui-card {
  background: #c4f0b6;
  box-shadow: 8px 8px 14px -2px rgba(0, 0, 0, 0.45);
}

body[data-mode="gaming"] .pos-ui-card-line {
  background: #7dcf67;
}

body[data-mode="gaming"] .pos-ui-post {
  background: #c9cbd2;
}

@media (max-width: 760px) {
  .erp-mockup-pos {
    max-width: 100% !important;
    height: 116px !important;
  }

  .pos-ui-container {
    height: 104px;
  }

  .pos-ui-label {
    font-size: 0.92rem;
  }

  .pos-ui-left {
    width: 120px;
    height: 104px;
  }
}

/* ERP visual fit pass: CRM, POS, Sales */
.erp-card-crm .erp-mockup-crm {
  max-width: 430px;
  height: 122px !important;
  margin-inline: auto;
  overflow: hidden;
}

.erp-card-crm .crm-stages {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  width: auto !important;
  transform: none !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.erp-card-crm .crm-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 27px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #b7cae5;
  color: #38597e;
  background: #e9f1fd;
  opacity: 0.7;
}

.erp-card-crm .crm-stage:nth-child(1) {
  background: #fff2de;
  border-color: #f0c180;
  color: #9a6200;
}

.erp-card-crm .crm-stage:nth-child(2) {
  background: #e8f1ff;
  border-color: #9fc3ff;
  color: #1f5dbb;
}

.erp-card-crm .crm-stage:nth-child(3) {
  background: #e9f8ef;
  border-color: #9fddba;
  color: #1f7c45;
}

.erp-card-crm .crm-stage.is-active {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.35);
}

.erp-card-crm .crm-lead-card {
  width: 132px !important;
  min-height: 62px;
  top: 46px !important;
  left: 23%;
  transform: translateX(-50%);
  border-radius: 10px !important;
  border: 1px solid #85ace5 !important;
  background: linear-gradient(165deg, #f8fbff, #eaf2ff) !important;
  box-shadow: 0 8px 14px rgba(26, 115, 232, 0.2);
  padding: 5px 8px !important;
  gap: 1px !important;
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease;
}

.erp-card-crm .crm-lead-card small {
  font-size: 0.58rem !important;
  color: #4b6789 !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.erp-card-crm .crm-lead-card strong {
  font-size: 1.02rem !important;
  line-height: 1.05;
  color: #152d4d !important;
}

.erp-card-crm .crm-lead-card em {
  font-size: 0.72rem !important;
  color: #215ebd !important;
}

.erp-card-crm .crm-status {
  font-size: 0.7rem;
  color: #2f7e53;
  font-weight: 700;
}

.erp-card-pos .erp-mockup-pos {
  max-width: 430px !important;
  height: 122px !important;
}

.erp-card-pos .pos-ui-container {
  height: 106px;
  border-radius: 14px;
  border-color: #c7d7ee;
  background: linear-gradient(180deg, #f7fbff, #eef4fd);
}

.erp-card-pos .pos-ui-left {
  width: 132px;
  height: 106px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6ce1ac, #55c995);
  animation: posUiLeftExpandV2 4.2s ease-in-out infinite !important;
}

.erp-card-pos .pos-ui-right {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  animation: posUiRightFadeV2 4.2s ease-in-out infinite !important;
}

.erp-card-pos .pos-ui-card {
  left: 28px;
  top: 30px;
  border: 1px solid rgba(106, 176, 78, 0.38);
  animation: posUiCardSlideV2 4.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite !important;
}

.erp-card-pos .pos-ui-post {
  right: 16px;
  top: 108px;
  animation: posUiPostSlideV2 4.2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite !important;
}

.erp-card-pos .pos-ui-success {
  animation: posUiSuccessFadeV2 4.2s ease-in-out infinite !important;
}

@keyframes posUiLeftExpandV2 {
  0%,
  18%,
  100% {
    width: 132px;
  }
  34%,
  66% {
    width: 56%;
  }
}

@keyframes posUiRightFadeV2 {
  0%,
  18%,
  100% {
    width: calc(100% - 132px);
    opacity: 1;
    transform: translateX(0);
  }
  34%,
  66% {
    width: 44%;
    opacity: 0.55;
    transform: translateX(4px);
  }
}

@keyframes posUiCardSlideV2 {
  0%,
  20% {
    transform: translateY(0) rotate(0deg);
  }
  42%,
  56% {
    transform: translateY(-62px) rotate(90deg);
  }
  68% {
    transform: translateY(-9px) rotate(90deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes posUiPostSlideV2 {
  0%,
  22%,
  100% {
    transform: translateY(0);
  }
  44%,
  68% {
    transform: translateY(-66px);
  }
}

@keyframes posUiSuccessFadeV2 {
  0%,
  56%,
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
  64%,
  76% {
    opacity: 1;
    transform: translateY(0);
  }
}

.erp-card-sales .erp-mockup-sales {
  max-width: 430px;
  height: 122px !important;
  margin-inline: auto;
  padding: 0 !important;
}

.erp-card-sales .sales-steps {
  margin: 10px 10px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.erp-card-sales .sales-step {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b7cae5;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.erp-card-sales .sales-step:nth-child(1) {
  background: #fff2de;
  border-color: #f0c180;
  color: #9a6200;
}

.erp-card-sales .sales-step:nth-child(2) {
  background: #e8f1ff;
  border-color: #9fc3ff;
  color: #1f5dbb;
}

.erp-card-sales .sales-step:nth-child(3) {
  background: #e9f8ef;
  border-color: #9fddba;
  color: #1f7c45;
}

.erp-card-sales .sales-path {
  margin: 8px 10px 10px;
  height: 74px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #edf3fb, #e6eef8) !important;
  padding: 0;
}

.erp-card-sales .sales-loader,
.erp-card-sales .sales-truck-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.erp-card-sales .sales-road {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 9px;
  background: #506581;
  border-radius: 999px;
  overflow: hidden;
}

.erp-card-sales .sales-road::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14px, #f6fbff 14px 24px);
  animation: salesRoadDashV2 0.9s linear infinite;
}

.erp-card-sales .sales-road::after {
  content: none;
}

.erp-card-sales .sales-truck-runner {
  position: absolute;
  left: -2px;
  bottom: 17px;
  width: 150px;
  height: 52px;
  animation: salesTruckRunV2 4s linear infinite;
  z-index: 3;
}

.erp-card-sales .sales-truck-unit {
  width: 150px;
  height: 40px;
  position: relative;
  animation: salesTruckBounceV2 0.45s ease-in-out infinite;
}

.erp-card-sales .sales-truck-trailer {
  position: absolute;
  left: 0;
  top: 8px;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  border: 3px solid #2a2f35;
  background: #f5f7fb;
}

.erp-card-sales .sales-truck-cab {
  position: absolute;
  left: 82px;
  top: 10px;
  width: 40px;
  height: 28px;
  border-radius: 6px 6px 4px 4px;
  border: 3px solid #2a2f35;
  background: #ff4545;
}

.erp-card-sales .sales-truck-cab::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 12px;
  height: 8px;
  border-radius: 2px;
  background: #f3f8ff;
}

.erp-card-sales .sales-truck-driver {
  position: absolute;
  left: 102px;
  top: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #2a2f35;
  background: #f6d4b4;
}

.erp-card-sales .sales-truck-tires {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 132px;
  display: flex;
  justify-content: space-between;
}

.erp-card-sales .sales-truck-tires div {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4d5b6d, #111821 62%);
}

.erp-card-sales .sales-lamp-post {
  position: absolute;
  right: -66px;
  bottom: 12px;
  width: 3px;
  height: 30px;
  border-radius: 999px;
  background: #8ca3be;
  animation: salesRoadFlowV2 1.2s linear infinite;
}

@keyframes salesTruckRunV2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% - 162px));
  }
}

@keyframes salesTruckBounceV2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.5px);
  }
}

@keyframes salesRoadDashV2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-24px);
  }
}

@keyframes salesRoadFlowV2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-430px);
  }
}

body[data-mode="gaming"] .erp-card-crm .crm-lead-card {
  border-color: #4872a4 !important;
  background: linear-gradient(165deg, #1a2733, #172431) !important;
}

body[data-mode="gaming"] .erp-card-crm .crm-lead-card strong {
  color: #edf3fa !important;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-container {
  background: #142332;
  border-color: #35506b;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-right {
  background: #1a2732;
}

body[data-mode="gaming"] .erp-card-sales .sales-path {
  background: linear-gradient(180deg, #1b2a38, #172532) !important;
}

body[data-mode="gaming"] .erp-card-sales .sales-road {
  background: #32475f;
}

body[data-mode="gaming"] .erp-card-sales .sales-road::before {
  background: repeating-linear-gradient(90deg, transparent 0 14px, #dce7f6 14px 24px);
}

@media (max-width: 760px) {
  .erp-card-crm .crm-lead-card {
    width: 126px !important;
    min-height: 58px;
  }

  .erp-card-pos .pos-ui-container {
    height: 100px;
  }

  .erp-card-pos .pos-ui-left {
    width: 118px;
    height: 100px;
  }

  .erp-card-sales .sales-step {
    font-size: 0.66rem;
  }

  .erp-card-sales .sales-truck-runner {
    width: 138px;
  }

  .erp-card-sales .sales-truck-unit {
    width: 138px;
  }

  .erp-card-sales .sales-truck-trailer {
    width: 72px;
  }

  .erp-card-sales .sales-truck-cab {
    left: 74px;
  }

  .erp-card-sales .sales-truck-driver {
    left: 92px;
  }

  .erp-card-sales .sales-truck-tires {
    width: 122px;
  }
}

/* POS centering pass */
.erp-card-pos .pos-ui-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

.erp-card-pos .pos-ui-right {
  display: none !important;
}

.erp-card-pos .pos-ui-left {
  width: 212px !important;
  height: 96px !important;
  margin-inline: auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #68ddb0, #54c79c);
  animation: none !important;
}

.erp-card-pos .pos-ui-card {
  left: 20px;
  top: 26px;
  animation: posCardCore 3.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite !important;
}

.erp-card-pos .pos-ui-post {
  right: 20px;
  top: 98px;
  animation: posPostCore 3.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite !important;
}

.erp-card-pos .pos-ui-success {
  animation: posSuccessCore 3.8s ease-in-out infinite !important;
}

@keyframes posCardCore {
  0%,
  18% {
    transform: translate(0, 0) rotate(0deg);
  }
  40%,
  55% {
    transform: translate(98px, -58px) rotate(90deg);
  }
  68% {
    transform: translate(98px, -8px) rotate(90deg);
  }
  82%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes posPostCore {
  0%,
  20%,
  100% {
    transform: translateY(0);
  }
  42%,
  70% {
    transform: translateY(-66px);
  }
}

@keyframes posSuccessCore {
  0%,
  56%,
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
  64%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-left {
  background: linear-gradient(135deg, #2b8b65, #226d4f);
}

@media (max-width: 760px) {
  .erp-card-pos .pos-ui-left {
    width: 196px !important;
    height: 90px !important;
  }

  .erp-card-pos .pos-ui-card {
    left: 14px;
    top: 22px;
  }

  .erp-card-pos .pos-ui-post {
    right: 16px;
    top: 92px;
  }

  @keyframes posCardCore {
    0%,
    18% {
      transform: translate(0, 0) rotate(0deg);
    }
    40%,
    55% {
      transform: translate(88px, -52px) rotate(90deg);
    }
    68% {
      transform: translate(88px, -8px) rotate(90deg);
    }
    82%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }
}

/* POS exact adaptation v3 (based on original interaction) */
.erp-card-pos .erp-mockup-pos {
  max-width: 460px !important;
  height: 124px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.erp-card-pos .pos-ui-container {
  background-color: #ffffff !important;
  display: flex !important;
  width: min(100%, 460px) !important;
  height: 120px !important;
  position: relative !important;
  border-radius: 10px !important;
  border: 1px solid #c8d8ee !important;
  overflow: hidden !important;
  transform: scale(1);
  animation: posExactContainer 3.8s ease-in-out infinite !important;
}

.erp-card-pos .pos-ui-left {
  background-color: #5de2a3 !important;
  width: 130px !important;
  height: 120px !important;
  border-radius: 6px !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  animation: posExactLeft 3.8s ease-in-out infinite !important;
}

.erp-card-pos .pos-ui-right {
  width: calc(100% - 130px) !important;
  display: block !important;
  background: linear-gradient(180deg, #ffffff, #f9fbff) !important;
  animation: posExactRight 3.8s ease-in-out infinite !important;
}

.erp-card-pos .pos-ui-card {
  width: 70px !important;
  height: 46px !important;
  background-color: #c7ffbc !important;
  border-radius: 6px !important;
  position: absolute !important;
  left: 30px !important;
  top: 38px !important;
  display: flex !important;
  z-index: 10 !important;
  flex-direction: column !important;
  align-items: center !important;
  box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72) !important;
  animation: posExactCard 3.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite !important;
}

.erp-card-pos .pos-ui-card-line {
  width: 65px !important;
  height: 13px !important;
  background-color: #80ea69 !important;
  border-radius: 2px !important;
  margin-top: 7px !important;
}

.erp-card-pos .pos-ui-buttons {
  width: 8px !important;
  height: 8px !important;
  background-color: #379e1f !important;
  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e !important;
  border-radius: 50% !important;
  transform: rotate(90deg) !important;
  margin: 10px 0 0 -30px !important;
}

.erp-card-pos .pos-ui-post {
  width: 63px !important;
  height: 75px !important;
  background-color: #dddde0 !important;
  position: absolute !important;
  z-index: 11 !important;
  top: 120px !important;
  right: 24px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  animation: posExactPost 3.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite !important;
}

.erp-card-pos .pos-ui-post-line {
  width: 47px !important;
  height: 9px !important;
  background-color: #545354 !important;
  position: absolute !important;
  border-radius: 0 0 3px 3px !important;
  right: 8px !important;
  top: 8px !important;
}

.erp-card-pos .pos-ui-post-line::before {
  content: "" !important;
  position: absolute !important;
  width: 47px !important;
  height: 9px !important;
  background-color: #757375 !important;
  top: -8px !important;
  left: 0 !important;
}

.erp-card-pos .pos-ui-screen {
  width: 47px !important;
  height: 23px !important;
  background-color: #ffffff !important;
  position: absolute !important;
  top: 22px !important;
  right: 8px !important;
  border-radius: 3px !important;
}

.erp-card-pos .pos-ui-numbers {
  width: 12px !important;
  height: 12px !important;
  background-color: #838183 !important;
  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183 !important;
  border-radius: 2px !important;
  position: absolute !important;
  transform: rotate(90deg) !important;
  left: 25px !important;
  top: 52px !important;
}

.erp-card-pos .pos-ui-numbers-line2 {
  width: 12px !important;
  height: 12px !important;
  background-color: #aaa9ab !important;
  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab !important;
  border-radius: 2px !important;
  position: absolute !important;
  transform: rotate(90deg) !important;
  left: 25px !important;
  top: 68px !important;
}

.erp-card-pos .pos-ui-success {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  font-size: 15px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: #4b953b !important;
  text-align: center !important;
  opacity: 0 !important;
  animation: posExactSuccess 3.8s ease-in-out infinite !important;
}

@keyframes posExactContainer {
  0%,
  18%,
  100% {
    transform: scale(1);
  }
  28%,
  74% {
    transform: scale(1.02);
  }
}

@keyframes posExactLeft {
  0%,
  18%,
  100% {
    width: 130px;
  }
  30%,
  74% {
    width: 100%;
  }
}

@keyframes posExactRight {
  0%,
  18%,
  100% {
    width: calc(100% - 130px);
    opacity: 1;
  }
  30%,
  74% {
    width: 0;
    opacity: 0;
  }
}

@keyframes posExactCard {
  0%,
  20% {
    transform: translateY(0) rotate(0);
  }
  46%,
  58% {
    transform: translateY(-70px) rotate(90deg);
  }
  70% {
    transform: translateY(-8px) rotate(90deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes posExactPost {
  0%,
  24%,
  100% {
    transform: translateY(0);
  }
  50%,
  74% {
    transform: translateY(-70px);
  }
}

@keyframes posExactSuccess {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
  66%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-container {
  background: #142332 !important;
  border-color: #35506b !important;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-left {
  background-color: #2f9b6c !important;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-right {
  background: #1a2732 !important;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-card {
  background-color: #cef6c4 !important;
}

@media only screen and (max-width: 760px) {
  .erp-card-pos .erp-mockup-pos {
    height: 114px !important;
  }

  .erp-card-pos .pos-ui-container {
    height: 102px !important;
    transform: scale(0.9);
    transform-origin: center;
  }

  .erp-card-pos .pos-ui-left {
    height: 102px !important;
  }

  .erp-card-pos .pos-ui-success {
    font-size: 13px !important;
  }
}

/* POS cleanup v4: centered, cleaner, with dollar cue */
.erp-card-pos .erp-mockup-pos {
  max-width: 430px !important;
  height: 118px !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.erp-card-pos .erp-mockup-pos::before,
.erp-card-pos .erp-mockup-pos::after {
  content: none !important;
  display: none !important;
}

.erp-card-pos .pos-ui-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  animation: none !important;
}

.erp-card-pos .pos-ui-right {
  display: none !important;
}

.erp-card-pos .pos-ui-left {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform: translateX(-50%);
  width: 130px !important;
  height: 118px !important;
  border-radius: 10px !important;
  background-color: #5de2a3 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  animation: posLeftCoreV4 3.8s ease-in-out infinite !important;
}

.erp-card-pos .pos-ui-card {
  left: 30px !important;
  top: 36px !important;
  width: 70px !important;
  height: 46px !important;
  border-radius: 6px !important;
  animation: posCardCoreV4 3.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite !important;
}

.erp-card-pos .pos-ui-post {
  top: 120px !important;
  right: 8px !important;
  width: 63px !important;
  height: 75px !important;
  animation: posPostCoreV4 3.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite !important;
}

.erp-card-pos .pos-ui-screen {
  position: absolute !important;
  top: 22px !important;
  right: 8px !important;
  width: 47px !important;
  height: 23px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.erp-card-pos .pos-ui-dollar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 700;
  color: #4b953b;
  opacity: 0;
  transform: translateY(-5px);
  animation: posDollarCoreV4 3.8s ease-in-out infinite;
}

.erp-card-pos .pos-ui-success {
  top: 3px !important;
  font-size: 11px !important;
  opacity: 0 !important;
  animation: posSuccessCoreV4 3.8s ease-in-out infinite !important;
}

@keyframes posLeftCoreV4 {
  0%,
  20%,
  100% {
    width: 130px;
  }
  34%,
  74% {
    width: 186px;
  }
}

@keyframes posCardCoreV4 {
  0%,
  20% {
    transform: translateY(0) rotate(0deg);
  }
  48%,
  62% {
    transform: translateY(-70px) rotate(90deg);
  }
  74% {
    transform: translateY(-8px) rotate(90deg);
  }
  86%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes posPostCoreV4 {
  0%,
  24%,
  100% {
    transform: translateY(0);
  }
  50%,
  76% {
    transform: translateY(-70px);
  }
}

@keyframes posDollarCoreV4 {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
  66%,
  78% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes posSuccessCoreV4 {
  0%,
  64%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
  72%,
  82% {
    opacity: 1;
    transform: translateY(0);
  }
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-left {
  background-color: #2f9b6c !important;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-dollar {
  color: #8be5b2;
}

body[data-mode="gaming"] .erp-card-pos .pos-ui-success {
  color: #8be5b2 !important;
}

@media only screen and (max-width: 760px) {
  .erp-card-pos .erp-mockup-pos {
    height: 110px !important;
  }

  .erp-card-pos .pos-ui-left {
    width: 122px !important;
    height: 110px !important;
  }

  .erp-card-pos .pos-ui-card {
    left: 26px !important;
    top: 32px !important;
  }

  .erp-card-pos .pos-ui-post {
    top: 112px !important;
    right: 6px !important;
  }

  .erp-card-pos .pos-ui-dollar {
    font-size: 14px;
  }
}

/* Accounting tune v2: left aligned, more fluctuation, seamless loop */
.erp-card-accounting .erp-mockup-accounting {
  display: block !important;
  padding: 0 !important;
}

.erp-card-accounting .acc-chart-board {
  width: min(96%, 430px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  height: 114px !important;
}

.erp-card-accounting .acc-trend-svg {
  inset: 8px 8px 8px 2px !important;
}

.erp-card-accounting .acc-trend-line {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 0.96 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: accTrendLineFloatV2 7.6s ease-in-out infinite !important;
}

.erp-card-accounting .acc-trend-area {
  opacity: 0.22 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: accTrendAreaFloatV2 7.6s ease-in-out infinite !important;
}

.erp-card-accounting .acc-trend-dot {
  opacity: 0.9 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: accTrendDotPulseV2 7.6s ease-in-out infinite !important;
}

.erp-card-accounting .acc-trend-dot.d1 { animation-delay: 0.15s !important; }
.erp-card-accounting .acc-trend-dot.d2 { animation-delay: 0.3s !important; }
.erp-card-accounting .acc-trend-dot.d3 { animation-delay: 0.45s !important; }
.erp-card-accounting .acc-trend-dot.d4 { animation-delay: 0.6s !important; }
.erp-card-accounting .acc-trend-dot.d5 { animation-delay: 0.75s !important; }

@keyframes accTrendLineFloatV2 {
  0%,
  100% {
    transform: translateY(0);
  }
  18% {
    transform: translateY(-2px);
  }
  42% {
    transform: translateY(1.8px);
  }
  66% {
    transform: translateY(-1.4px);
  }
  84% {
    transform: translateY(0.8px);
  }
}

@keyframes accTrendAreaFloatV2 {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.2;
  }
  22% {
    transform: translateY(-1.8px);
    opacity: 0.25;
  }
  48% {
    transform: translateY(1.4px);
    opacity: 0.18;
  }
  70% {
    transform: translateY(-1px);
    opacity: 0.24;
  }
}

@keyframes accTrendDotPulseV2 {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.78;
  }
  45% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Static mockups mode (animations disabled by request) */
.erp-feature-grid .erp-mockup,
.erp-feature-grid .erp-mockup::before,
.erp-feature-grid .erp-mockup::after,
.erp-feature-grid .erp-mockup * {
  animation: none !important;
  transition: none !important;
}

.erp-card-pos .pos-ui-container {
  inset: 0 !important;
}

.erp-card-pos .pos-ui-left {
  width: 170px !important;
  height: 110px !important;
  left: 50% !important;
}

.erp-card-pos .pos-ui-card {
  transform: translate(66px, -50px) rotate(90deg) !important;
}

.erp-card-pos .pos-ui-post {
  top: 46px !important;
  right: 12px !important;
}

.erp-card-pos .pos-ui-dollar,
.erp-card-pos .pos-ui-success {
  opacity: 1 !important;
  transform: none !important;
}

.erp-card-crm .crm-stage {
  opacity: 0.72;
}

.erp-card-crm .crm-stage:nth-child(2) {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.35);
}

.erp-card-crm .crm-lead-card {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.erp-card-accounting .acc-bars-mini span {
  opacity: 0.62;
}

.erp-card-accounting .acc-trend-area {
  opacity: 0.2 !important;
}

.erp-card-accounting .acc-trend-line {
  opacity: 0.98 !important;
}

.erp-card-accounting .acc-trend-dot {
  opacity: 0.94 !important;
  transform: none !important;
}

.erp-card-sales .sales-step {
  opacity: 1;
}

.erp-card-sales .sales-truck-runner {
  left: 18px !important;
  bottom: 17px !important;
  transform: none !important;
}

.erp-card-sales .sales-truck-unit {
  transform: none !important;
}

.erp-card-sales .sales-road::before {
  animation: none !important;
  transform: none !important;
}

.erp-card-sales .sales-lamp-post {
  right: 24px !important;
  animation: none !important;
}

/* ERP cards only mode (simple static cards) */
.erp-feature-grid .erp-mockup {
  min-height: 136px;
  padding: 10px !important;
}

.erp-feature-grid .module-static {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid #c7d7ee;
  background: linear-gradient(180deg, #f6faff, #edf3fb);
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.erp-feature-grid .module-static-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.erp-feature-grid .module-static-head strong {
  font-size: 0.86rem;
  color: #1f2d3d;
}

.erp-feature-grid .module-static-head small {
  font-size: 0.72rem;
  color: #2f7e53;
  background: #e8f5ee;
  border: 1px solid #b6e1c5;
  border-radius: 999px;
  padding: 2px 8px;
}

.erp-feature-grid .module-static-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.erp-feature-grid .module-static-kpis > div {
  border: 1px solid #d2deef;
  border-radius: 9px;
  background: #ffffff;
  padding: 6px;
}

.erp-feature-grid .module-static-kpis p {
  margin: 0;
  font-size: 0.68rem;
  color: #64758a;
}

.erp-feature-grid .module-static-kpis strong {
  font-size: 0.92rem;
  color: #1d3554;
}

.erp-feature-grid .module-static-note {
  display: flex;
  align-items: center;
  gap: 8px;
}

.erp-feature-grid .module-static-note i {
  color: #1a73e8;
  font-size: 0.88rem;
}

.erp-feature-grid .module-static-note p {
  margin: 0;
  font-size: 0.75rem;
  color: #50657e;
}

.erp-feature-grid .module-static-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.erp-feature-grid .module-static-stages > div {
  border: 1px solid #b7cae5;
  background: #e8f1ff;
  color: #2f4e73;
  border-radius: 8px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 4px;
}

.erp-feature-grid .module-static-stages > div.is-current {
  border-color: #8cb4f8;
  background: #d8e7ff;
  color: #174ea6;
}

.erp-feature-grid .module-static-prospect {
  border: 1px solid #c8d9ef;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
}

.erp-feature-grid .module-static-prospect p {
  margin: 0;
  font-size: 0.72rem;
  color: #536b85;
  font-weight: 600;
}

.erp-feature-grid .module-static-prospect strong {
  font-size: 1.05rem;
  color: #17355d;
}

.erp-feature-grid .module-static-prospect small {
  display: block;
  font-size: 0.7rem;
  color: #2f7e53;
}

.erp-feature-grid .module-static-bars {
  height: 72px;
  border: 1px solid #d2deef;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: end;
  gap: 7px;
  padding: 8px;
}

.erp-feature-grid .module-static-bars > div {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #7ab3f8, #2f7de1);
}

.erp-feature-grid .module-static-bars > div:nth-child(1) { height: 24%; }
.erp-feature-grid .module-static-bars > div:nth-child(2) { height: 52%; }
.erp-feature-grid .module-static-bars > div:nth-child(3) { height: 34%; }
.erp-feature-grid .module-static-bars > div:nth-child(4) { height: 74%; }
.erp-feature-grid .module-static-bars > div:nth-child(5) { height: 58%; }
.erp-feature-grid .module-static-bars > div:nth-child(6) { height: 88%; }

.erp-feature-grid .module-static-balance {
  border: 1px solid #c8d9ef;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
}

.erp-feature-grid .module-static-balance small {
  display: block;
  font-size: 0.7rem;
  color: #617891;
}

.erp-feature-grid .module-static-balance strong {
  font-size: 0.96rem;
  color: #17355d;
}

.erp-feature-grid .module-static-route {
  height: 42px;
  border: 1px solid #c8d9ef;
  border-radius: 10px;
  background: #ffffff;
  position: relative;
}

.erp-feature-grid .module-static-route .route-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 999px;
  background: #5a6f8f;
}

.erp-feature-grid .module-static-route i {
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  font-size: 1.1rem;
  color: #1a73e8;
}

body[data-mode="gaming"] .erp-feature-grid .module-static {
  border-color: #2f4458;
  background: linear-gradient(180deg, #1a2732, #15222c);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-head strong,
body[data-mode="gaming"] .erp-feature-grid .module-static-kpis strong,
body[data-mode="gaming"] .erp-feature-grid .module-static-prospect strong,
body[data-mode="gaming"] .erp-feature-grid .module-static-balance strong {
  color: #e8edf4;
}

body[data-mode="gaming"] .erp-feature-grid .module-static-kpis > div,
body[data-mode="gaming"] .erp-feature-grid .module-static-prospect,
body[data-mode="gaming"] .erp-feature-grid .module-static-bars,
body[data-mode="gaming"] .erp-feature-grid .module-static-balance,
body[data-mode="gaming"] .erp-feature-grid .module-static-route {
  border-color: #35506b;
  background: #1b2a38;
}

body[data-mode="gaming"] .erp-feature-grid .module-static-note p,
body[data-mode="gaming"] .erp-feature-grid .module-static-kpis p,
body[data-mode="gaming"] .erp-feature-grid .module-static-prospect p,
body[data-mode="gaming"] .erp-feature-grid .module-static-balance small {
  color: #9fb0c2;
}

@media (max-width: 760px) {
  .erp-feature-grid .module-static-kpis {
    grid-template-columns: 1fr;
  }
}

/* Module color themes */
.erp-feature-grid .module-static-pos {
  border-color: #b9e5cb;
  background: linear-gradient(180deg, #effbf3, #e5f6ed);
}

.erp-feature-grid .module-static-pos .module-static-head small {
  color: #1f7a4f;
  background: #dcf5e8;
  border-color: #9dd8bb;
}

.erp-feature-grid .module-static-pos .module-static-kpis > div {
  border-color: #c5e7d3;
  background: #fbfffc;
}

.erp-feature-grid .module-static-pos .module-static-note i {
  color: #2e9b69;
}

.erp-feature-grid .module-static-crm {
  border-color: #c9d6f4;
  background: linear-gradient(180deg, #f4f7ff, #eaf0ff);
}

.erp-feature-grid .module-static-crm .module-static-stages > div {
  background: #ebf1ff;
  border-color: #bfd0f4;
  color: #35507b;
}

.erp-feature-grid .module-static-crm .module-static-stages > div.is-current {
  background: #dbe7ff;
  border-color: #8fb1f4;
  color: #194ea6;
}

.erp-feature-grid .module-static-crm .module-static-prospect {
  border-color: #bfd0ee;
  background: #fefeff;
}

.erp-feature-grid .module-static-crm .module-static-prospect small {
  color: #2a68b8;
}

.erp-feature-grid .module-static-accounting {
  border-color: #efd8a8;
  background: linear-gradient(180deg, #fff8eb, #fef1d9);
}

.erp-feature-grid .module-static-accounting .module-static-bars {
  border-color: #eed8ac;
  background: #fffdf7;
}

.erp-feature-grid .module-static-accounting .module-static-bars > div {
  background: linear-gradient(180deg, #f4be57, #df8f15);
}

.erp-feature-grid .module-static-accounting .module-static-bars > div:nth-child(2n) {
  background: linear-gradient(180deg, #7bb7ff, #2f7de1);
}

.erp-feature-grid .module-static-accounting .module-static-balance {
  border-color: #ead2a2;
  background: #fffefb;
}

.erp-feature-grid .module-static-balance strong {
  color: #7b4f0f;
}

.erp-feature-grid .module-static-sales {
  border-color: #b9d9ef;
  background: linear-gradient(180deg, #eff8ff, #e4f0fb);
}

.erp-feature-grid .module-static-sales .module-static-stages > div {
  background: #ebf4ff;
  border-color: #bcd5ef;
}

.erp-feature-grid .module-static-sales .module-static-stages > div.is-current {
  background: #d7ecff;
  border-color: #86bae7;
  color: #0f5f99;
}

.erp-feature-grid .module-static-sales .module-static-route {
  border-color: #b8d3ee;
  background: #fafdff;
}

.erp-feature-grid .module-static-sales .module-static-route .route-line {
  background: linear-gradient(90deg, #4f6c90, #3f8cd3);
}

.erp-feature-grid .module-static-sales .module-static-route i {
  color: #1a73e8;
}

body[data-mode="gaming"] .erp-feature-grid .module-static-pos {
  border-color: #2e5b47;
  background: linear-gradient(180deg, #183026, #13261e);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-crm {
  border-color: #31476d;
  background: linear-gradient(180deg, #1b2738, #162131);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-accounting {
  border-color: #5c4a2b;
  background: linear-gradient(180deg, #2e2619, #241e14);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-sales {
  border-color: #2c4c64;
  background: linear-gradient(180deg, #1a2d3b, #152531);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-pos .module-static-kpis > div,
body[data-mode="gaming"] .erp-feature-grid .module-static-crm .module-static-prospect,
body[data-mode="gaming"] .erp-feature-grid .module-static-accounting .module-static-bars,
body[data-mode="gaming"] .erp-feature-grid .module-static-accounting .module-static-balance,
body[data-mode="gaming"] .erp-feature-grid .module-static-sales .module-static-route {
  border-color: rgba(232, 237, 244, 0.2);
  background: rgba(13, 23, 34, 0.4);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-accounting .module-static-bars > div {
  background: linear-gradient(180deg, #f2c778, #b47b20);
}

body[data-mode="gaming"] .erp-feature-grid .module-static-accounting .module-static-bars > div:nth-child(2n) {
  background: linear-gradient(180deg, #76aef0, #315f96);
}

/* Professional polish pass (studio mode) */
body[data-mode="studio"] {
  background: linear-gradient(180deg, #eef2f6 0%, #e8edf4 100%);
  color: #1f2937;
}

body[data-mode="studio"] .site-header {
  background: rgba(247, 250, 253, 0.92);
  border-bottom: 1px solid #d5dee8;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

body[data-mode="studio"] .nav-links a {
  color: #334155;
}

body[data-mode="studio"] #inicio.hero {
  background: linear-gradient(180deg, #f2f6fb 0%, #eef3f9 100%);
}

body[data-mode="studio"] #servicios,
body[data-mode="studio"] #modulos,
body[data-mode="studio"] #proyectos,
body[data-mode="studio"] #portafolio {
  background: #f6f9fc;
}

body[data-mode="studio"] .workflow,
body[data-mode="studio"] #beneficios,
body[data-mode="studio"] #testimonios {
  background: #eef3f8;
}

body[data-mode="studio"] #planes,
body[data-mode="studio"] .section:not(#inicio):not(#servicios):not(#modulos):not(#beneficios):not(#proyectos):not(#portafolio):not(.workflow):not(.cta-section):not(#contacto):not(#testimonios) {
  background: #f3f7fb;
}

body[data-mode="studio"] #contacto {
  background: #edf2f8;
}

body[data-mode="studio"] .hero-copy,
body[data-mode="studio"] .hero-panel,
body[data-mode="studio"] .card,
body[data-mode="studio"] .workflow-card,
body[data-mode="studio"] .price-card,
body[data-mode="studio"] .contact-copy,
body[data-mode="studio"] .contact-form,
body[data-mode="studio"] .stat-card,
body[data-mode="studio"] .erp-feature-card,
body[data-mode="studio"] .suite-node,
body[data-mode="studio"] .cta-box {
  border: 1px solid #d4dee9;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
}

body[data-mode="studio"] .erp-feature-card {
  border-radius: 22px;
}

body[data-mode="studio"] .erp-card-pos {
  border-top: 3px solid #34a853;
}

body[data-mode="studio"] .erp-card-crm {
  border-top: 3px solid #1a73e8;
}

body[data-mode="studio"] .erp-card-accounting {
  border-top: 3px solid #f9ab00;
}

body[data-mode="studio"] .erp-card-sales {
  border-top: 3px solid #0f9d58;
}

body[data-mode="studio"] .module-static {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-mode="studio"] .section-head h2,
body[data-mode="studio"] h3 {
  color: #10253f;
}

body[data-mode="studio"] .section-head p,
body[data-mode="studio"] .hero-subtitle,
body[data-mode="studio"] .card p,
body[data-mode="studio"] .workflow-card p,
body[data-mode="studio"] .contact-copy p {
  color: #4f6278;
}

body[data-mode="studio"] .btn-primary {
  background: #1a73e8;
  border-color: #1a73e8;
  box-shadow: 0 6px 14px rgba(26, 115, 232, 0.24);
}

body[data-mode="studio"] .btn-primary:hover {
  background: #1767cf;
}

body[data-mode="studio"] .btn-ghost {
  background: #ffffff;
  border-color: #cbd8e7;
  color: #24364b;
}

/* Google-like Material polish v2 (studio) */
body[data-mode="studio"] {
  background: #edf2f7;
  color: #1f2937;
}

body[data-mode="studio"] .section {
  padding: 78px 0;
}

body[data-mode="studio"] .site-header {
  background: rgba(248, 251, 255, 0.94);
  border-bottom-color: #d9e1ec;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(15, 23, 42, 0.05);
}

body[data-mode="studio"] .nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #37495f;
}

body[data-mode="studio"] .logo {
  color: #1f2937;
}

body[data-mode="studio"] #inicio.hero {
  background: linear-gradient(180deg, #f5f8fc 0%, #eff3f9 100%);
}

body[data-mode="studio"] #servicios,
body[data-mode="studio"] #modulos,
body[data-mode="studio"] #proyectos,
body[data-mode="studio"] #portafolio,
body[data-mode="studio"] #planes {
  background: #f8fbff;
}

body[data-mode="studio"] .workflow,
body[data-mode="studio"] #beneficios,
body[data-mode="studio"] #testimonios,
body[data-mode="studio"] #contacto {
  background: #f2f6fb;
}

body[data-mode="studio"] .hero-copy,
body[data-mode="studio"] .hero-panel,
body[data-mode="studio"] .card,
body[data-mode="studio"] .workflow-card,
body[data-mode="studio"] .price-card,
body[data-mode="studio"] .contact-copy,
body[data-mode="studio"] .contact-form,
body[data-mode="studio"] .stat-card,
body[data-mode="studio"] .erp-feature-card,
body[data-mode="studio"] .suite-node,
body[data-mode="studio"] .cta-box {
  border: 1px solid #dbe3ee;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.05);
}

body[data-mode="studio"] .hero-copy,
body[data-mode="studio"] .hero-panel {
  border-radius: 24px;
}

body[data-mode="studio"] .section-head h2,
body[data-mode="studio"] h3 {
  color: #0f2948;
  letter-spacing: -0.01em;
}

body[data-mode="studio"] .hero-subtitle,
body[data-mode="studio"] .section-head p,
body[data-mode="studio"] .card p,
body[data-mode="studio"] .workflow-card p,
body[data-mode="studio"] .contact-copy p,
body[data-mode="studio"] .price-desc {
  color: #52657d;
}

body[data-mode="studio"] .eyebrow,
body[data-mode="studio"] .pill {
  background: #e8f0fe;
  color: #185abc;
  border: 1px solid #c9dafc;
  font-weight: 600;
}

body[data-mode="studio"] .btn {
  border-radius: 999px;
  font-weight: 600;
}

body[data-mode="studio"] .btn-primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(26, 115, 232, 0.2);
}

body[data-mode="studio"] .btn-primary:hover {
  background: #155ec5;
  border-color: #155ec5;
}

body[data-mode="studio"] .btn-ghost {
  background: #ffffff;
  border-color: #d4deea;
  color: #2b3d52;
}

body[data-mode="studio"] .btn-ghost:hover {
  background: #f6f9ff;
}

body[data-mode="studio"] .contact-form input,
body[data-mode="studio"] .contact-form textarea {
  background: #ffffff;
  border-color: #d5deea;
}

body[data-mode="studio"] .contact-form input:focus,
body[data-mode="studio"] .contact-form textarea:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

body[data-mode="studio"] .erp-feature-card {
  border-top-width: 2px;
}

body[data-mode="studio"] .erp-feature-icon {
  background: #edf3fd;
  border: 1px solid #d1def1;
}

body[data-mode="studio"] .module-static {
  border: 1px solid #d7e1ee;
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body[data-mode="studio"] .module-static-pos {
  border-left: 3px solid #34a853;
}

body[data-mode="studio"] .module-static-crm {
  border-left: 3px solid #1a73e8;
}

body[data-mode="studio"] .module-static-accounting {
  border-left: 3px solid #f9ab00;
}

body[data-mode="studio"] .module-static-sales {
  border-left: 3px solid #0f9d58;
}

body[data-mode="studio"] .module-static-kpis > div,
body[data-mode="studio"] .module-static-prospect,
body[data-mode="studio"] .module-static-bars,
body[data-mode="studio"] .module-static-balance,
body[data-mode="studio"] .module-static-route {
  background: #ffffff;
  border-color: #d6e0ec;
}

body[data-mode="studio"] .module-static-stages > div {
  background: #eef3fb;
  border-color: #c7d5ea;
  color: #38506d;
}

body[data-mode="studio"] .module-static-stages > div.is-current {
  background: #dbe8ff;
  border-color: #9ebdf0;
  color: #194ea6;
}

body[data-mode="studio"] .suite-node {
  border-radius: 18px;
}

body[data-mode="studio"] .suite-node span {
  background: #e8f0fe;
  border: 1px solid #c7d8f8;
  color: #1a73e8;
}

body[data-mode="studio"] .cta-section .cta-box {
  background: linear-gradient(180deg, #f8fbff, #eff4fb);
  border-color: #d6e2f2;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

@media (max-width: 760px) {
  body[data-mode="studio"] .section {
    padding: 62px 0;
  }

  body[data-mode="studio"] .hero-copy,
  body[data-mode="studio"] .hero-panel,
  body[data-mode="studio"] .card,
  body[data-mode="studio"] .workflow-card,
  body[data-mode="studio"] .price-card,
  body[data-mode="studio"] .contact-copy,
  body[data-mode="studio"] .contact-form,
  body[data-mode="studio"] .stat-card,
  body[data-mode="studio"] .erp-feature-card,
  body[data-mode="studio"] .suite-node,
  body[data-mode="studio"] .cta-box {
    border-radius: 16px;
  }
}

/* Material Design 3 adaptation (studio mode) */
body[data-mode="studio"] {
  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dbe7ff;
  --md-sys-color-on-primary-container: #0a2f74;

  --md-sys-color-secondary: #4f6178;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d2e5ff;
  --md-sys-color-on-secondary-container: #203247;

  --md-sys-color-tertiary: #0d8a6a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #baf0df;
  --md-sys-color-on-tertiary-container: #003828;

  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  --md-sys-color-surface: #f8f9fc;
  --md-sys-color-surface-dim: #e6ebf2;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f6fb;
  --md-sys-color-surface-container: #edf2f8;
  --md-sys-color-surface-container-high: #e7edf4;
  --md-sys-color-surface-container-highest: #dfe6ef;
  --md-sys-color-on-surface: #1f2937;
  --md-sys-color-on-surface-variant: #5b6778;

  --md-sys-color-outline: #8b97a9;
  --md-sys-color-outline-variant: #ccd4df;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;

  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;

  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .site-header {
  background: color-mix(in srgb, var(--md-sys-color-surface-bright) 90%, transparent);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.05);
}

body[data-mode="studio"] .logo {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .logo span {
  color: var(--md-sys-color-primary);
}

body[data-mode="studio"] .nav-links a {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-mode="studio"] .nav-links a:hover {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] #inicio.hero {
  background: var(--md-sys-color-surface-container-low);
}

body[data-mode="studio"] #servicios,
body[data-mode="studio"] #modulos,
body[data-mode="studio"] #proyectos,
body[data-mode="studio"] #portafolio,
body[data-mode="studio"] #planes {
  background: var(--md-sys-color-surface);
}

body[data-mode="studio"] .workflow,
body[data-mode="studio"] #beneficios,
body[data-mode="studio"] #testimonios,
body[data-mode="studio"] #contacto {
  background: var(--md-sys-color-surface-container-low);
}

body[data-mode="studio"] .hero-copy,
body[data-mode="studio"] .hero-panel,
body[data-mode="studio"] .card,
body[data-mode="studio"] .workflow-card,
body[data-mode="studio"] .price-card,
body[data-mode="studio"] .contact-copy,
body[data-mode="studio"] .contact-form,
body[data-mode="studio"] .stat-card,
body[data-mode="studio"] .erp-feature-card,
body[data-mode="studio"] .suite-node,
body[data-mode="studio"] .cta-box {
  background: var(--md-sys-color-surface-bright);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.04);
}

body[data-mode="studio"] .hero-copy,
body[data-mode="studio"] .hero-panel {
  border-radius: var(--md-sys-shape-corner-extra-large);
}

body[data-mode="studio"] .section-head h2,
body[data-mode="studio"] h3 {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .hero-subtitle,
body[data-mode="studio"] .section-head p,
body[data-mode="studio"] .card p,
body[data-mode="studio"] .workflow-card p,
body[data-mode="studio"] .contact-copy p,
body[data-mode="studio"] .price-desc {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-mode="studio"] .eyebrow,
body[data-mode="studio"] .pill {
  background: var(--md-sys-color-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 24%, white);
  color: var(--md-sys-color-on-primary-container);
}

body[data-mode="studio"] .btn {
  border-radius: 999px;
}

body[data-mode="studio"] .btn-primary {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: 0 2px 6px rgba(11, 87, 208, 0.22);
}

body[data-mode="studio"] .btn-primary:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 90%, black);
}

body[data-mode="studio"] .btn-ghost {
  background: var(--md-sys-color-surface-bright);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .btn-ghost:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-surface-bright));
}

body[data-mode="studio"] .contact-form input,
body[data-mode="studio"] .contact-form textarea {
  background: var(--md-sys-color-surface-bright);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .contact-form input:focus,
body[data-mode="studio"] .contact-form textarea:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

body[data-mode="studio"] .suite-node span,
body[data-mode="studio"] .erp-feature-icon {
  background: var(--md-sys-color-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 24%, white);
  color: var(--md-sys-color-primary);
}

body[data-mode="studio"] .erp-feature-tag {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

body[data-mode="studio"] .erp-feature-card:hover,
body[data-mode="studio"] .card:hover,
body[data-mode="studio"] .workflow-card:hover,
body[data-mode="studio"] .price-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.06);
}

body[data-mode="studio"] .module-static {
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-medium);
}

body[data-mode="studio"] .module-static-pos { border-left: 3px solid var(--md-sys-color-tertiary); }
body[data-mode="studio"] .module-static-crm { border-left: 3px solid var(--md-sys-color-primary); }
body[data-mode="studio"] .module-static-accounting { border-left: 3px solid #b26a00; }
body[data-mode="studio"] .module-static-sales { border-left: 3px solid var(--md-sys-color-secondary); }

body[data-mode="studio"] .module-static-kpis > div,
body[data-mode="studio"] .module-static-prospect,
body[data-mode="studio"] .module-static-bars,
body[data-mode="studio"] .module-static-balance,
body[data-mode="studio"] .module-static-route {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-outline-variant);
}

body[data-mode="studio"] .module-static-note p,
body[data-mode="studio"] .module-static-kpis p,
body[data-mode="studio"] .module-static-balance small,
body[data-mode="studio"] .module-static-prospect p {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-mode="studio"] .module-static-kpis strong,
body[data-mode="studio"] .module-static-prospect strong,
body[data-mode="studio"] .module-static-balance strong {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .module-static-stages > div {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

body[data-mode="studio"] .module-static-stages > div.is-current {
  background: var(--md-sys-color-secondary-container);
  border-color: color-mix(in srgb, var(--md-sys-color-secondary) 30%, white);
  color: var(--md-sys-color-on-secondary-container);
}

body[data-mode="studio"] .module-static-route .route-line {
  background: color-mix(in srgb, var(--md-sys-color-secondary) 80%, #2d4360);
}

body[data-mode="studio"] .module-static-route i {
  color: var(--md-sys-color-primary);
}

/* Payment methods marquee */
.payments-section .section-head {
  text-align: center;
}

.payments-section .section-head p {
  max-width: 720px;
  margin-inline: auto;
}

.payments-marquee {
  --payments-gap: 14px;
  display: flex;
  gap: var(--payments-gap);
  overflow: hidden;
  margin-top: 22px;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid #d5deea;
  background: linear-gradient(180deg, #f5f8fd, #edf2f8);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.payments-track {
  flex: 0 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: var(--payments-gap);
  animation: payments-marquee-scroll 24s linear infinite;
  will-change: transform;
}

.payments-marquee:hover .payments-track {
  animation-play-state: paused;
}

.payment-logo {
  min-width: 170px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #d6deea;
  background: #ffffff;
  color: #243042;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.06);
  font-family: "Google Sans", "Aspekta", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.payment-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 126px;
  max-height: 34px;
  object-fit: contain;
}

.payment-oxxo img {
  max-width: 146px;
  max-height: 46px;
}

.payment-mastercard img {
  max-width: 166px;
  max-height: 46px;
}

.payment-oxxo {
  min-width: 192px;
}

.payment-mastercard {
  min-width: 208px;
}

.payment-googlepay img {
  max-width: 132px;
}

.payment-applepay img {
  max-width: 112px;
}

.payment-logo span {
  font-size: 0.98rem;
}

.payment-stripe {
  background: #f3f6ff;
  border-color: #cad6ff;
  color: #635bff;
  font-weight: 800;
}

@keyframes payments-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--payments-gap)));
  }
}

body[data-mode="studio"] .payments-section {
  background: var(--md-sys-color-surface);
}

body[data-mode="studio"] .payments-marquee {
  background: linear-gradient(180deg, var(--md-sys-color-surface-container-low), var(--md-sys-color-surface-container));
  border-color: var(--md-sys-color-outline-variant);
}

body[data-mode="studio"] .payment-logo {
  background: var(--md-sys-color-surface-bright);
  border-color: var(--md-sys-color-outline-variant);
}

body[data-mode="gaming"] .payments-marquee {
  border-color: rgba(120, 182, 255, 0.35);
  background: linear-gradient(180deg, rgba(23, 31, 49, 0.94), rgba(17, 24, 39, 0.96));
}

body[data-mode="gaming"] .payment-logo {
  background: #ffffff;
  border-color: rgba(120, 182, 255, 0.35);
  color: #243042;
}

@media (max-width: 760px) {
  .payments-marquee {
    margin-top: 18px;
    padding: 10px;
    border-radius: 20px;
    --payments-gap: 10px;
  }

  .payment-logo {
    min-width: 142px;
    height: 56px;
    border-radius: 14px;
    padding: 0 14px;
    gap: 8px;
  }

  .payment-logo img {
    max-width: 102px;
    max-height: 28px;
  }

  .payment-oxxo img {
    max-width: 124px;
    max-height: 38px;
  }

  .payment-mastercard img {
    max-width: 142px;
    max-height: 38px;
  }

  .payment-oxxo {
    min-width: 164px;
  }

  .payment-mastercard {
    min-width: 176px;
  }

  .payment-googlepay img {
    max-width: 110px;
  }

  .payment-applepay img {
    max-width: 94px;
  }

  .payment-logo span {
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payments-track {
    animation: none;
  }

  .payments-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .payment-logo {
    scroll-snap-align: start;
  }
}

/* Elyon Suite hero preview image */
.suite-hero-preview {
  padding-top: 12px;
  --suite-smooth-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.suite-preview-intro {
  max-width: 980px;
  margin: 0 auto 34px;
  text-align: center;
}

.suite-preview-title {
  margin: 0;
  font-family: "Google Sans", "Aspekta", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4vw, 3.55rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: #152338;
}

.suite-preview-info {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.suite-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: start;
}

.suite-dropdowns {
  display: grid;
  gap: 16px;
}

.suite-dropdown-item {
  border-left: 4px solid #d9e1ea;
  padding-left: 20px;
  background: transparent;
  border-radius: 0;
  transition:
    border-left-color 320ms var(--suite-smooth-ease),
    background-color 320ms var(--suite-smooth-ease);
}

.suite-dropdown-item summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 0;
  font-family: "Google Sans", "Aspekta", "Segoe UI", sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 2.25rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #44586f;
  opacity: 0.92;
  transform: translateY(0);
  transition:
    color 320ms var(--suite-smooth-ease),
    transform 440ms var(--suite-smooth-ease),
    opacity 320ms var(--suite-smooth-ease);
}

.suite-dropdown-item summary::-webkit-details-marker {
  display: none;
}

.suite-dropdown-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 460ms var(--suite-smooth-ease),
    opacity 320ms var(--suite-smooth-ease),
    transform 420ms var(--suite-smooth-ease);
  will-change: grid-template-rows, opacity, transform;
}

.suite-dropdown-content > p {
  margin: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transform: translateY(-16px);
  color: #5c6e83;
  line-height: 1.5;
  font-size: clamp(1.02rem, 1.24vw, 1.28rem);
  max-width: 42ch;
  transition:
    opacity 320ms var(--suite-smooth-ease),
    transform 420ms var(--suite-smooth-ease),
    padding 420ms var(--suite-smooth-ease);
}

.suite-dropdown-item[open] .suite-dropdown-content {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 30ms;
}

.suite-dropdown-item[open] .suite-dropdown-content > p {
  opacity: 1;
  padding-top: 14px;
  transform: translateY(0);
  transition-delay: 80ms;
}

.suite-dropdown-item[open],
.suite-dropdown-item.is-active {
  border-left-color: #1a73e8;
}

.suite-dropdown-item[open] summary,
.suite-dropdown-item.is-active summary {
  color: #1d2c3f;
  opacity: 1;
  transform: translateY(-6px);
}

.suite-preview-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.suite-preview-media {
  position: relative;
  width: 100%;
  min-height: clamp(280px, 34vw, 420px);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.suite-preview-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
  background: transparent;
  transform-origin: center center;
  transition:
    opacity 320ms var(--suite-smooth-ease),
    transform 520ms var(--suite-smooth-ease),
    filter 320ms var(--suite-smooth-ease);
}

.suite-preview-image.is-switching {
  opacity: 0.14;
  filter: saturate(0.95);
}

.suite-preview-image.is-view-overview {
  transform: scale(1) translate3d(0, 0, 0);
}

.suite-preview-image.is-view-ai {
  transform: scale(1) translate3d(0, 0, 0);
}

.suite-preview-image.is-view-admin {
  transform: scale(1) translate3d(0, 0, 0);
}

.suite-preview-image.is-view-security {
  transform: scale(1) translate3d(0, 0, 0);
}

body[data-mode="studio"] .suite-preview-card {
  background: transparent;
}

body[data-mode="studio"] .suite-preview-title {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="studio"] .suite-preview-info {
  background: transparent;
}

body[data-mode="studio"] .suite-dropdown-item {
  border-left-color: var(--md-sys-color-outline-variant);
}

body[data-mode="studio"] .suite-dropdown-item summary {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 85%, #3f5269);
}

body[data-mode="studio"] .suite-dropdown-content > p {
  color: var(--md-sys-color-on-surface-variant);
}

body[data-mode="studio"] .suite-dropdown-item[open],
body[data-mode="studio"] .suite-dropdown-item.is-active {
  border-left-color: var(--md-sys-color-primary);
}

body[data-mode="studio"] .suite-dropdown-item[open] summary,
body[data-mode="studio"] .suite-dropdown-item.is-active summary {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="gaming"] .suite-preview-card {
  background: transparent;
}

body[data-mode="gaming"] .suite-preview-title {
  color: #eef4ff;
}

body[data-mode="gaming"] .suite-preview-info {
  background: transparent;
}

body[data-mode="gaming"] .suite-dropdown-item {
  border-left-color: rgba(140, 170, 210, 0.58);
}

body[data-mode="gaming"] .suite-dropdown-item summary {
  color: #dbe8ff;
}

body[data-mode="gaming"] .suite-dropdown-content > p {
  color: #a8bfdc;
}

body[data-mode="gaming"] .suite-dropdown-item[open],
body[data-mode="gaming"] .suite-dropdown-item.is-active {
  border-left-color: #73a8ff;
}

body[data-mode="gaming"] .suite-dropdown-item[open] summary,
body[data-mode="gaming"] .suite-dropdown-item.is-active summary {
  color: #f2f7ff;
}

@media (max-width: 760px) {
  .suite-hero-preview {
    padding-top: 6px;
  }

  .suite-preview-intro {
    margin-bottom: 18px;
  }

  .suite-preview-title {
    font-size: clamp(1.62rem, 9.2vw, 2.2rem);
    line-height: 1.18;
  }

  .suite-preview-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .suite-preview-info {
    padding: 0;
  }

  .suite-dropdown-item summary {
    font-size: 1.03rem;
    line-height: 1.25;
  }

  .suite-dropdown-content > p {
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: none;
  }

  .suite-dropdown-item[open] .suite-dropdown-content > p {
    padding-top: 10px;
  }

  .suite-dropdown-item {
    padding-left: 12px;
  }

  .suite-preview-media {
    min-height: 240px;
    aspect-ratio: 4 / 3;
  }

  .suite-preview-image.is-view-ai,
  .suite-preview-image.is-view-admin,
  .suite-preview-image.is-view-security {
    transform: scale(1) translate3d(0, 0, 0);
  }

  .suite-preview-card {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-dropdown-item summary,
  .suite-dropdown-content,
  .suite-dropdown-content > p,
  .suite-preview-image {
    transition: none;
  }

  .suite-dropdown-item summary,
  .suite-dropdown-item[open] summary,
  .suite-dropdown-item.is-active summary,
  .suite-dropdown-content,
  .suite-dropdown-content > p {
    transform: none !important;
  }

  .suite-preview-image {
    transform: none !important;
  }

  .suite-preview-image.is-switching {
    opacity: 1;
  }
}

/* Elyon Suite embedded video block */
.suite-video-section {
  padding-top: 10px;
}

.suite-video-head {
  text-align: center;
  margin-bottom: 20px;
}

.suite-video-head h2 {
  margin: 0;
  font-family: "Google Sans", "Aspekta", "Segoe UI", sans-serif;
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  font-weight: 500;
  line-height: 1.18;
}

.suite-video-wrap {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.suite-inline-video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

body[data-mode="studio"] .suite-video-head h2 {
  color: var(--md-sys-color-on-surface);
}

body[data-mode="gaming"] .suite-video-head h2 {
  color: #edf4ff;
}

@media (max-width: 760px) {
  .suite-video-section {
    padding-top: 4px;
  }

  .suite-video-head {
    margin-bottom: 14px;
  }

  .suite-video-wrap { border-radius: 0; }
}